projects / sdk / online-doc.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 082601c)
LB reviewed with UI guide sepacation
authorkimhj.kim <kimhj.kim@samsung.com>
Mon, 6 Jul 2015 09:56:14 +0000 (18:56 +0900)
committerkimhj.kim <kimhj.kim@samsung.com>
Mon, 6 Jul 2015 09:56:14 +0000 (18:56 +0900)
Change-Id: I68392a2364576622b7f7a537ea07972fee923add
Signed-off-by: kimhj.kim <kimhj.kim@samsung.com>
1234 files changed:
org.tizen.devtools/.project patch | blob | history
org.tizen.devtools/META-INF/MANIFEST.MF patch | blob | history
org.tizen.devtools/build.properties patch | blob | history
org.tizen.devtools/html/common_tools/certificate_registration.htm patch | blob | history
org.tizen.devtools/html/common_tools/connection_explorer.htm patch | blob | history
org.tizen.devtools/html/common_tools/emulator.htm patch | blob | history
org.tizen.devtools/html/common_tools/event_injec.htm patch | blob | history
org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm patch | blob | history
org.tizen.devtools/html/common_tools/log_view.htm patch | blob | history
org.tizen.devtools/html/common_tools/project_explorer.htm patch | blob | history
org.tizen.devtools/html/common_tools/smart_dev_bridge.htm patch | blob | history
org.tizen.devtools/html/css/snippet.css patch | blob | history
org.tizen.devtools/html/css/styles.css patch | blob | history
org.tizen.devtools/html/images/Thumbs.db [new file with mode: 0644] patch | blob
org.tizen.devtools/html/images/emulator_bridge_architecture.png [changed mode: 0755->0644] patch | blob | history
org.tizen.devtools/html/images/emulator_general_mobile.png [changed mode: 0755->0644] patch | blob | history
org.tizen.devtools/html/images/emulator_general_wearable.png [changed mode: 0755->0644] patch | blob | history
org.tizen.devtools/html/images/emulator_manager_ide.png patch | blob | history
org.tizen.devtools/html/images/emulator_nat_architecture.png [changed mode: 0755->0644] patch | blob | history
org.tizen.devtools/html/images/features.png [changed mode: 0755->0644] patch | blob | history
org.tizen.devtools/html/images/manifest.png [changed mode: 0755->0644] patch | blob | history
org.tizen.devtools/html/images/privilege.png [changed mode: 0755->0644] patch | blob | history
org.tizen.devtools/html/images/ui_builder_1.png [deleted file] patch | blob | history
org.tizen.devtools/html/native_tools/manifest_elements_n.htm patch | blob | history
org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm patch | blob | history
org.tizen.devtools/html/native_tools/t_trace_n.htm patch | blob | history
org.tizen.devtools/html/scripts/common.js patch | blob | history
org.tizen.devtools/html/scripts/core.js patch | blob | history
org.tizen.devtools/html/scripts/jquery.util.js patch | blob | history
org.tizen.devtools/html/scripts/jquery.zclip.min.js patch | blob | history
org.tizen.devtools/html/scripts/navi.js patch | blob | history
org.tizen.devtools/html/scripts/search.js patch | blob | history
org.tizen.devtools/html/scripts/showhide.js patch | blob | history
org.tizen.devtools/html/web_tools/config_editor_w.htm patch | blob | history
org.tizen.devtools/html/web_tools/js_log_console_w.htm patch | blob | history
org.tizen.devtools/html/web_tools/privilege_checker_w.htm patch | blob | history
org.tizen.devtools/html/web_tools/set_ide_preference_w.htm patch | blob | history
org.tizen.devtools/plugin.xml patch | blob | history
org.tizen.gettingstarted/.project patch | blob | history
org.tizen.gettingstarted/META-INF/MANIFEST.MF patch | blob | history
org.tizen.gettingstarted/build.properties patch | blob | history
org.tizen.gettingstarted/html/cover_page.htm patch | blob | history
org.tizen.gettingstarted/html/css/snippet.css patch | blob | history
org.tizen.gettingstarted/html/css/styles.css patch | blob | history
org.tizen.gettingstarted/html/images/native_api_layout.png [deleted file] patch | blob | history
org.tizen.gettingstarted/html/native/app_model/application_model_n.htm patch | blob | history
org.tizen.gettingstarted/html/native/details/event_handling_n.htm patch | blob | history
org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm patch | blob | history
org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm [changed mode: 0755->0644] patch | blob | history
org.tizen.gettingstarted/html/native/first_app/first_app_n.htm patch | blob | history
org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm patch | blob | history
org.tizen.gettingstarted/html/native/process/performance_n.htm patch | blob | history
org.tizen.gettingstarted/html/native/process/setting_properties_n.htm patch | blob | history
org.tizen.gettingstarted/html/preface.htm patch | blob | history
org.tizen.gettingstarted/html/scripts/common.js patch | blob | history
org.tizen.gettingstarted/html/scripts/core.js patch | blob | history
org.tizen.gettingstarted/html/scripts/jquery.util.js patch | blob | history
org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js patch | blob | history
org.tizen.gettingstarted/html/scripts/navi.js patch | blob | history
org.tizen.gettingstarted/html/scripts/search.js patch | blob | history
org.tizen.gettingstarted/html/scripts/showhide.js patch | blob | history
org.tizen.gettingstarted/html/tizen_websites.htm patch | blob | history
org.tizen.gettingstarted/html/web/details/details_w.htm patch | blob | history
org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm patch | blob | history
org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm patch | blob | history
org.tizen.gettingstarted/html/web/details/web_runtime_w.htm patch | blob | history
org.tizen.gettingstarted/html/web/first_app/first_app_w.htm patch | blob | history
org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm patch | blob | history
org.tizen.gettingstarted/html/web/process/coding_app_w.htm patch | blob | history
org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm patch | blob | history
org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm patch | blob | history
org.tizen.gettingstarted/plugin.xml patch | blob | history
org.tizen.guides/.project patch | blob | history
org.tizen.guides/META-INF/MANIFEST.MF patch | blob | history
org.tizen.guides/build.properties patch | blob | history
org.tizen.guides/html/css/snippet.css patch | blob | history
org.tizen.guides/html/css/styles.css patch | blob | history
org.tizen.guides/html/images/button_bottom.png [deleted file] patch | blob | history
org.tizen.guides/html/images/capi_media_screen_mirroring_sink_state_diagram.png [changed mode: 0755->0644] patch | blob | history
org.tizen.guides/html/images/circular_support.png [deleted file] patch | blob | history
org.tizen.guides/html/images/eom_mode.png [deleted file] patch | blob | history
org.tizen.guides/html/images/evas_map.png [deleted file] patch | blob | history
org.tizen.guides/html/images/form_0.png [deleted file] patch | blob | history
org.tizen.guides/html/images/form_1.png [deleted file] patch | blob | history
org.tizen.guides/html/images/form_2.png [deleted file] patch | blob | history
org.tizen.guides/html/images/form_3.png [deleted file] patch | blob | history
org.tizen.guides/html/images/form_4.png [deleted file] patch | blob | history
org.tizen.guides/html/images/form_5.png [deleted file] patch | blob | history
org.tizen.guides/html/images/form_6.png [deleted file] patch | blob | history
org.tizen.guides/html/images/form_7.png [deleted file] patch | blob | history
org.tizen.guides/html/images/localize_widget.png [deleted file] patch | blob | history
org.tizen.guides/html/images/notification_layout_desc.png [new file with mode: 0644] patch | blob
org.tizen.guides/html/images/screen_mirroring_sink_call_diagram.png [changed mode: 0755->0644] patch | blob | history
org.tizen.guides/html/index.htm patch | blob | history
org.tizen.guides/html/native/account/account_guide_n.htm patch | blob | history
org.tizen.guides/html/native/app/app_guide_n.htm patch | blob | history
org.tizen.guides/html/native/app/app_manager_n.htm patch | blob | history
org.tizen.guides/html/native/app/appgroup_n.htm patch | blob | history
org.tizen.guides/html/native/app/application_n.htm patch | blob | history
org.tizen.guides/html/native/app/badge_n.htm patch | blob | history
org.tizen.guides/html/native/app/bundle_n.htm patch | blob | history
org.tizen.guides/html/native/app/data_control_n.htm patch | blob | history
org.tizen.guides/html/native/app/message_port_n.htm patch | blob | history
org.tizen.guides/html/native/app/notification_n.htm patch | blob | history
org.tizen.guides/html/native/app/package_n.htm patch | blob | history
org.tizen.guides/html/native/app/service_app_n.htm patch | blob | history
org.tizen.guides/html/native/app/shortcut_n.htm patch | blob | history
org.tizen.guides/html/native/app/watch_n.htm patch | blob | history
org.tizen.guides/html/native/app/widget_n.htm patch | blob | history
org.tizen.guides/html/native/base/base_guide_n.htm patch | blob | history
org.tizen.guides/html/native/base/i18n_n.htm patch | blob | history
org.tizen.guides/html/native/content/content_guide_n.htm patch | blob | history
org.tizen.guides/html/native/content/download_n.htm patch | blob | history
org.tizen.guides/html/native/content/media_content_n.htm patch | blob | history
org.tizen.guides/html/native/content/mime_type_n.htm patch | blob | history
org.tizen.guides/html/native/context/activity_recognition_n.htm patch | blob | history
org.tizen.guides/html/native/context/context_guide_n.htm patch | blob | history
org.tizen.guides/html/native/context/gesture_recognition_n.htm patch | blob | history
org.tizen.guides/html/native/context/history_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/cairo_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/graphics_guide_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/opengles_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/tbm_n.htm patch | blob | history
org.tizen.guides/html/native/guides_n.htm patch | blob | history
org.tizen.guides/html/native/location/location_guide_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/email_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/messages_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/messaging_guide_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/push_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/audio_io_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/camera_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/image_util_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/media_codecs_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/media_tools_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/player_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/radio_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/recorder_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm [changed mode: 0755->0644] patch | blob | history
org.tizen.guides/html/native/multimedia/sound_manager_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/tone_player_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/video_util_n.htm patch | blob | history
org.tizen.guides/html/native/multimedia/wav_player_n.htm patch | blob | history
org.tizen.guides/html/native/network/bluetooth_n.htm patch | blob | history
org.tizen.guides/html/native/network/connection_n.htm patch | blob | history
org.tizen.guides/html/native/network/network_guide_n.htm patch | blob | history
org.tizen.guides/html/native/network/nfc_n.htm patch | blob | history
org.tizen.guides/html/native/network/smartcard_n.htm patch | blob | history
org.tizen.guides/html/native/network/wifi_direct_n.htm patch | blob | history
org.tizen.guides/html/native/network/wifi_n.htm patch | blob | history
org.tizen.guides/html/native/porting/porting_n.htm patch | blob | history
org.tizen.guides/html/native/security/key_manager_n.htm patch | blob | history
org.tizen.guides/html/native/security/privilege_n.htm patch | blob | history
org.tizen.guides/html/native/security/security_guide_n.htm patch | blob | history
org.tizen.guides/html/native/social/account_manager_n.htm patch | blob | history
org.tizen.guides/html/native/social/calendar_n.htm patch | blob | history
org.tizen.guides/html/native/social/service_adaptor_n.htm patch | blob | history
org.tizen.guides/html/native/social/social_guide_n.htm patch | blob | history
org.tizen.guides/html/native/system/device_n.htm patch | blob | history
org.tizen.guides/html/native/system/dlog_n.htm patch | blob | history
org.tizen.guides/html/native/system/media_keys_n.htm patch | blob | history
org.tizen.guides/html/native/system/runtime_info_n.htm patch | blob | history
org.tizen.guides/html/native/system/settings_n.htm patch | blob | history
org.tizen.guides/html/native/system/storage_n.htm patch | blob | history
org.tizen.guides/html/native/system/sysinfo_n.htm patch | blob | history
org.tizen.guides/html/native/telephony/phonenumber_util_n.htm patch | blob | history
org.tizen.guides/html/native/telephony/telephony_guide_n.htm patch | blob | history
org.tizen.guides/html/native/telephony/telephony_info_n.htm patch | blob | history
org.tizen.guides/html/native/ui/animations_effects_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/circle_components_wn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/components_mn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/components_wn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/containers_mn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/containers_wn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/data_types_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/ecore_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/edc_part_block_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/edje_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/efl_extension_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/efl_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/efl_util_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/eina_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/eina_tools_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/elementary_mn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/elementary_wn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/evas_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/event_types_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/events_effects_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/font_setting_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/main_loop_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/multiple_screens_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/preferences_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/scalability_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/styles_mn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/styles_wn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/threads_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/ui_component_mn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/ui_component_n.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/ui_component_wn.htm [deleted file] patch | blob | history
org.tizen.guides/html/native/ui/ui_guide_n.htm patch | blob | history
org.tizen.guides/html/native/uix/stt_n.htm patch | blob | history
org.tizen.guides/html/native/uix/tts_n.htm patch | blob | history
org.tizen.guides/html/native/uix/uix_guide_n.htm patch | blob | history
org.tizen.guides/html/native/web/web_guide_n.htm patch | blob | history
org.tizen.guides/html/scripts/common.js patch | blob | history
org.tizen.guides/html/scripts/core.js patch | blob | history
org.tizen.guides/html/scripts/jquery.util.js patch | blob | history
org.tizen.guides/html/scripts/jquery.zclip.min.js patch | blob | history
org.tizen.guides/html/scripts/navi.js patch | blob | history
org.tizen.guides/html/scripts/search.js patch | blob | history
org.tizen.guides/html/scripts/showhide.js patch | blob | history
org.tizen.guides/html/web/guides_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/TAU/accessibility.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/expandableheader.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/footerbutton.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/helper.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/moreoptions.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/popup.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/processing.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/progress.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/snaplist.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/circularUI/thumbnail.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/eventHandling.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/globalization.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/helloWorld.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/images/rectangular_index.png [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/images/round_index.png [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/managingPage.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/overview.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/tau.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/tutorialNotepad.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/uiComponent.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/TAU/uifw_guide_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/tizen/application/app_guide_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm [changed mode: 0755->0644] patch | blob | history
org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/guides_tizen_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/multimedia/sound_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/social/social_guide_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/system/fm_radio_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/system/system_guide_w.htm patch | blob | history
org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/device_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/dom/animation_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/background_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/color_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/flexible_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/font_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/html5forms_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/media_query_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/multi_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/selector_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/session_history_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/text_module_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/transform_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/transition_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/dom/woff_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/guides_w3c_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/getusermedia_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/media_capture_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/media_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/video_audio_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/webaudio_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/page_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/security/cors_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/security/iframe_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/security/security_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/camera_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/clipboard_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/useful/html_priority_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm [deleted file] patch | blob | history
org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm patch | blob | history
org.tizen.guides/index.xml patch | blob | history
org.tizen.guides/plugin.xml patch | blob | history
org.tizen.sampledescriptions/.project patch | blob | history
org.tizen.sampledescriptions/META-INF/MANIFEST.MF patch | blob | history
org.tizen.sampledescriptions/build.properties patch | blob | history
org.tizen.sampledescriptions/html/css/snippet.css patch | blob | history
org.tizen.sampledescriptions/html/css/styles.css patch | blob | history
org.tizen.sampledescriptions/html/images/DigitalWatch_sd1.png [deleted file] patch | blob | history
org.tizen.sampledescriptions/html/images/DigitalWatch_sd2.png [deleted file] patch | blob | history
org.tizen.sampledescriptions/html/images/analog_watch_sd_wn.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/analog_watch_tree_sd_wn.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/appcalleecaller_mw.png [deleted file] patch | blob | history
org.tizen.sampledescriptions/html/images/bluetoothchat_circle_sd.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/cairo_basic.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/cairo_basic_circular.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/cairo_evasgl.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/cairo_evasgl_circular.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/digital_watch_sd_wn.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/evas_gl_sd_wn.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/fmradio_sd_mw.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/glview11_cube_wn.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/glview_cube_wn.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/glview_shader_wn.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/lockscreen_ui_diagram.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/screen_locked.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/screen_unlock_1.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/screen_unlock_2.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/screen_unlocked.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/soundmanager_sd_mw.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/volume_sample_screenshot.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/images/widget_application_sd.png [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/index.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_n/cairo_basic_sd_mn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/mobile_n/cairo_evasgl_sd_mn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_n/lockscreen_sd_mn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_n/volume_sd_mn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/mobile_w/appcalleecaller_mw.htm [deleted file] patch | blob | history
org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm patch | blob | history
org.tizen.sampledescriptions/html/mobile_w/soundmanager_mw.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/mobile_w/winset_mw.htm patch | blob | history
org.tizen.sampledescriptions/html/scripts/common.js patch | blob | history
org.tizen.sampledescriptions/html/scripts/core.js patch | blob | history
org.tizen.sampledescriptions/html/scripts/jquery.util.js patch | blob | history
org.tizen.sampledescriptions/html/scripts/jquery.zclip.min.js patch | blob | history
org.tizen.sampledescriptions/html/scripts/navi.js patch | blob | history
org.tizen.sampledescriptions/html/scripts/search.js patch | blob | history
org.tizen.sampledescriptions/html/scripts/showhide.js patch | blob | history
org.tizen.sampledescriptions/html/wearable_n/analog_watch_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/bluetoothchat_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/cairo_basic_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/cairo_evasgl_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/digital_watch_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/evas_gl_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/glview11_cube_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/glview_cube_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/glview_shader_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm patch | blob | history
org.tizen.sampledescriptions/html/wearable_n/widget_animation_sd_wn.htm [new file with mode: 0644] patch | blob
org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm patch | blob | history
org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm patch | blob | history
org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm patch | blob | history
org.tizen.sampledescriptions/index.xml patch | blob | history
org.tizen.sampledescriptions/plugin.xml patch | blob | history
org.tizen.tutorials/.project patch | blob | history
org.tizen.tutorials/META-INF/MANIFEST.MF patch | blob | history
org.tizen.tutorials/build.properties patch | blob | history
org.tizen.tutorials/html/css/snippet.css patch | blob | history
org.tizen.tutorials/html/css/styles.css patch | blob | history
org.tizen.tutorials/html/images/accordion_menu.png [deleted file] patch | blob | history
org.tizen.tutorials/html/images/dragdrop.png [deleted file] patch | blob | history
org.tizen.tutorials/html/images/grid_layout.png [deleted file] patch | blob | history
org.tizen.tutorials/html/images/multi_node_selection.png [deleted file] patch | blob | history
org.tizen.tutorials/html/images/notification_status_sd.png [deleted file] patch | blob | history
org.tizen.tutorials/html/images/opengl1.png [deleted file] patch | blob | history
org.tizen.tutorials/html/images/opengl2.png [deleted file] patch | blob | history
org.tizen.tutorials/html/images/single_node_selection.png [deleted file] patch | blob | history
org.tizen.tutorials/html/index.htm patch | blob | history
org.tizen.tutorials/html/native/account/account_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm [changed mode: 0755->0644] patch | blob | history
org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/content/content_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/context/activity_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/context/context_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/location/location_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm [changed mode: 0755->0644] patch | blob | history
org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm [changed mode: 0755->0644] patch | blob | history
org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/network/connection_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/network/network_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/security/key_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/security/security_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/social/account_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/social/contact_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/social/social_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm patch | blob | history
org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/basic_tutorial_mn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/button_tutorial_wn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/datetime_tutorial_wn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/gesture_detector_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/panes_tutorial_mn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/popup_tutorial_wn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/ui_layout_tutorial_mn.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm patch | blob | history
org.tizen.tutorials/html/scripts/common.js patch | blob | history
org.tizen.tutorials/html/scripts/core.js patch | blob | history
org.tizen.tutorials/html/scripts/jquery.util.js patch | blob | history
org.tizen.tutorials/html/scripts/jquery.zclip.min.js patch | blob | history
org.tizen.tutorials/html/scripts/navi.js patch | blob | history
org.tizen.tutorials/html/scripts/search.js patch | blob | history
org.tizen.tutorials/html/scripts/showhide.js patch | blob | history
org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm patch | blob | history
org.tizen.tutorials/html/web/tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm patch | blob | history
org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm [deleted file] patch | blob | history
org.tizen.tutorials/index.xml patch | blob | history
org.tizen.tutorials/plugin.xml patch | blob | history
org.tizen.ui.guides/.project [new file with mode: 0755] patch | blob
org.tizen.ui.guides/META-INF/MANIFEST.MF [new file with mode: 0755] patch | blob
org.tizen.ui.guides/about.html [new file with mode: 0755] patch | blob
org.tizen.ui.guides/build.properties [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/cover_page.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/css/snippet.css [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/css/styles.css [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/4_columns.png [moved from org.tizen.guides/html/images/4_columns.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/9patch.png [moved from org.tizen.tutorials/html/images/9patch.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/9patch_buffer.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/9patch_resource.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/9patch_zoomed.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/actor_coordinates.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/actor_position.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/after_resize.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/align.png [moved from org.tizen.guides/html/images/align.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/align_hints.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/anchor_point.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/animation1.png [moved from org.tizen.tutorials/html/images/animation1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/animation_components.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/application_page_layout.png [moved from org.tizen.guides/html/images/application_page_layout.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/application_store_sd.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/applying_color.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/applying_invisibility.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/aspect-control-both.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/aspect-control-horizontal.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/aspect-control-none.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/backWearable.png [moved from org.tizen.guides/html/images/backWearable.png with 100% similarity] patch | blob | history
org.tizen.ui.guides/html/images/background_order.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/base_layout.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/base_scale.png [moved from org.tizen.guides/html/images/base_scale.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/base_scales.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/basic_layout_480x800.png [moved from org.tizen.tutorials/html/images/basic_layout_480x800.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/basic_layout_720x1280.png [moved from org.tizen.tutorials/html/images/basic_layout_720x1280.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/before_resize.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/bg.png [moved from org.tizen.guides/html/images/bg.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/bg_tree.png [moved from org.tizen.guides/html/images/bg_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/bg_util_bar.gif [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/bg_wn.png [moved from org.tizen.guides/html/images/bg_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/blue_box.png [moved from org.tizen.tutorials/html/images/blue_box.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/border.png [moved from org.tizen.guides/html/images/border.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/bottom.png [moved from org.tizen.guides/html/images/bottom.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/box.png [moved from org.tizen.guides/html/images/box.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/box_model_properties.png [moved from org.tizen.tutorials/html/images/box_model_properties.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/box_model_properties_struct.png [moved from org.tizen.guides/html/images/box_model_properties_struct.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/btn_top.gif [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/button.png [moved from org.tizen.guides/html/images/button.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_anchor.png [moved from org.tizen.guides/html/images/button_anchor.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_bottom_o_wn.png [moved from org.tizen.guides/html/images/button_bottom_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_circle.png [moved from org.tizen.guides/html/images/button_circle.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_default.png [moved from org.tizen.guides/html/images/button_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_default_wn.png [moved from org.tizen.guides/html/images/button_default_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_drawers.png [moved from org.tizen.guides/html/images/button_drawers.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_dropdown.png [moved from org.tizen.guides/html/images/button_dropdown.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_green_wn.png [moved from org.tizen.guides/html/images/button_green_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_hover_v.png [moved from org.tizen.guides/html/images/button_hover_v.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_hover_v_entry.png [moved from org.tizen.guides/html/images/button_hover_v_entry.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_hoversel.png [moved from org.tizen.guides/html/images/button_hoversel.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_hoversel_entry.png [moved from org.tizen.guides/html/images/button_hoversel_entry.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_next_wn.png [moved from org.tizen.guides/html/images/button_next_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_option.png [moved from org.tizen.guides/html/images/button_option.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_orange_wn.png [moved from org.tizen.guides/html/images/button_orange_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_recorder.png [moved from org.tizen.guides/html/images/button_recorder.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_red_wn.png [moved from org.tizen.guides/html/images/button_red_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_title_cancel.png [moved from org.tizen.guides/html/images/button_title_cancel.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_title_done.png [moved from org.tizen.guides/html/images/button_title_done.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_titleicon_wn.png [moved from org.tizen.guides/html/images/button_titleicon_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_tree.png [moved from org.tizen.guides/html/images/button_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/button_wn.png [moved from org.tizen.guides/html/images/button_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/calculator_sd.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/calling_img_sep.png [moved from org.tizen.guides/html/images/calling_img_sep.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/captured_screen1.png [moved from org.tizen.guides/html/images/captured_screen1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/captured_screen2.png [moved from org.tizen.guides/html/images/captured_screen2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/change_text_globally.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/changed_order.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/changing_opacity.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/check.png [moved from org.tizen.guides/html/images/check.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_default.png [moved from org.tizen.guides/html/images/check_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_default_o_wn.png [moved from org.tizen.guides/html/images/check_default_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_default_wn.png [moved from org.tizen.guides/html/images/check_default_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_favorite.png [moved from org.tizen.guides/html/images/check_favorite.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_on_off.png [moved from org.tizen.guides/html/images/check_on_off.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_onoff_o_wn.png [moved from org.tizen.guides/html/images/check_onoff_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_onoff_wn.png [moved from org.tizen.guides/html/images/check_onoff_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_small_o_wn.png [moved from org.tizen.guides/html/images/check_small_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_tree.png [moved from org.tizen.guides/html/images/check_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/check_wn.png [moved from org.tizen.guides/html/images/check_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/checkbox_button.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/circle_datetime.png [moved from org.tizen.guides/html/images/circle_datetime.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/circle_genlist.png [moved from org.tizen.guides/html/images/circle_genlist.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/circle_progressbar.png [moved from org.tizen.guides/html/images/circle_progressbar.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/circle_scroller.png [moved from org.tizen.guides/html/images/circle_scroller.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/circle_slider.png [moved from org.tizen.guides/html/images/circle_slider.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/circular_support.png [moved from org.tizen.guides/html/web/tizen/TAU/images/circular_support.png with 100% similarity] patch | blob | history
org.tizen.ui.guides/html/images/coin_flip_effect.png [moved from org.tizen.guides/html/images/coin_flip_effect.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/color_colorplane.png [moved from org.tizen.guides/html/images/color_colorplane.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/colorsel.png [moved from org.tizen.guides/html/images/colorsel.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/colorselector_tree.png [moved from org.tizen.guides/html/images/colorselector_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/column_break.png [moved from org.tizen.guides/html/images/column_break.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/column_gap.png [moved from org.tizen.guides/html/images/column_gap.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/column_rule.png [moved from org.tizen.guides/html/images/column_rule.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/column_settings.png [moved from org.tizen.tutorials/html/images/column_settings.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/column_span.png [moved from org.tizen.guides/html/images/column_span.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/column_width.png [moved from org.tizen.guides/html/images/column_width.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/conformant.png [moved from org.tizen.guides/html/images/conformant.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/contextual_bottom_o_wn.png [moved from org.tizen.guides/html/images/contextual_bottom_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/contextual_select_o_wn.png [moved from org.tizen.guides/html/images/contextual_select_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/contextual_top_o_wn.png [moved from org.tizen.guides/html/images/contextual_top_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/contextual_wn.png [moved from org.tizen.guides/html/images/contextual_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/copy_pasting.png [moved from org.tizen.tutorials/html/images/copy_pasting.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/css_bg1.png [moved from org.tizen.guides/html/images/css_bg1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/css_bg_tutorial1.png [moved from org.tizen.tutorials/html/images/css_bg_tutorial1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/css_bg_tutorial2.png [moved from org.tizen.tutorials/html/images/css_bg_tutorial2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/css_color_tutorial1.png [moved from org.tizen.tutorials/html/images/css_color_tutorial1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/css_result.png [moved from org.tizen.guides/html/images/css_result.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/css_transforms1.png [moved from org.tizen.tutorials/html/images/css_transforms1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/css_transforms2.png [moved from org.tizen.tutorials/html/images/css_transforms2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/css_transforms5.png [moved from org.tizen.tutorials/html/images/css_transforms5.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ctxpopup1.png [moved from org.tizen.guides/html/images/ctxpopup1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ctxpopup2.png [moved from org.tizen.guides/html/images/ctxpopup2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ctxpopup3.png [moved from org.tizen.guides/html/images/ctxpopup3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ctxpopup_default.png [moved from org.tizen.guides/html/images/ctxpopup_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ctxpopup_dropdown.png [moved from org.tizen.guides/html/images/ctxpopup_dropdown.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ctxpopup_dropdown_label.png [moved from org.tizen.guides/html/images/ctxpopup_dropdown_label.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ctxpopup_tree.png [moved from org.tizen.guides/html/images/ctxpopup_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ctxpopup_wn.png [moved from org.tizen.guides/html/images/ctxpopup_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/dali_component.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/date2.png [moved from org.tizen.guides/html/images/date2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_date_layout.png [moved from org.tizen.guides/html/images/datetime_date_layout.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_date_o_wn.png [moved from org.tizen.guides/html/images/datetime_date_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_date_wn.png [moved from org.tizen.guides/html/images/datetime_date_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_time_24h.png [moved from org.tizen.guides/html/images/datetime_time_24h.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_time_layout.png [moved from org.tizen.guides/html/images/datetime_time_layout.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_time_o_wn.png [moved from org.tizen.guides/html/images/datetime_time_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_time_wn.png [moved from org.tizen.guides/html/images/datetime_time_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_tree.png [moved from org.tizen.guides/html/images/datetime_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/datetime_wn.png [moved from org.tizen.guides/html/images/datetime_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/default_order.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/depth.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/dimension_dependency.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/display_text_classes.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/dynamic_layout_480x800.png [moved from org.tizen.tutorials/html/images/dynamic_layout_480x800.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/dynamic_layout_720x1280.png [moved from org.tizen.tutorials/html/images/dynamic_layout_720x1280.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/edc_masking.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/edje_color.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/edje_message.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/edje_object_scales.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/edje_signal1.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/edje_signal2.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/edje_text_main.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/efl_complex_clock.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/efl_complex_clock_tree.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/efl_layers.png [moved from org.tizen.guides/html/images/efl_layers.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/efl_notilevels.png [moved from org.tizen.guides/html/images/efl_notilevels.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/efl_phone.png [moved from org.tizen.guides/html/images/efl_phone.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/efl_simple_clock.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/efl_simple_clock_tree.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/efl_windowlayer.png [moved from org.tizen.guides/html/images/efl_windowlayer.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/efllibs.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/elementary.png [moved from org.tizen.guides/html/images/elementary.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/elementary_app.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/email_sample.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/empty_window.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/enlarge_low_res_image.png [moved from org.tizen.guides/html/images/enlarge_low_res_image.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/entry.png [moved from org.tizen.guides/html/images/entry.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/entry2.png [moved from org.tizen.guides/html/images/entry2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/entry2_wn.png [moved from org.tizen.guides/html/images/entry2_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/entry_default.png [moved from org.tizen.guides/html/images/entry_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/entry_default_wn.png [moved from org.tizen.guides/html/images/entry_default_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/entry_tree.png [moved from org.tizen.guides/html/images/entry_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/entry_wn.png [moved from org.tizen.guides/html/images/entry_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_advanced.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/evas_blur1.png [moved from org.tizen.guides/html/images/evas_blur1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_blur2.png [moved from org.tizen.guides/html/images/evas_blur2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_image_loader.png [moved from org.tizen.guides/html/images/evas_image_loader.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_image_scaling.png [moved from org.tizen.guides/html/images/evas_image_scaling.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_1.png [moved from org.tizen.guides/html/images/evas_map_1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_10.png [moved from org.tizen.guides/html/images/evas_map_10.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_11.png [moved from org.tizen.guides/html/images/evas_map_11.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_2.png [moved from org.tizen.guides/html/images/evas_map_2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_3.png [moved from org.tizen.guides/html/images/evas_map_3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_4.png [moved from org.tizen.guides/html/images/evas_map_4.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_5.png [moved from org.tizen.guides/html/images/evas_map_5.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_6.png [moved from org.tizen.guides/html/images/evas_map_6.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_7.png [moved from org.tizen.guides/html/images/evas_map_7.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_8.png [moved from org.tizen.guides/html/images/evas_map_8.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_9.png [moved from org.tizen.guides/html/images/evas_map_9.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_map_effect.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/evas_object_display.png [moved from org.tizen.guides/html/images/evas_object_display.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_partial_update.png [moved from org.tizen.guides/html/images/evas_partial_update.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_scaling1.png [moved from org.tizen.guides/html/images/evas_scaling1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_scaling2.png [moved from org.tizen.guides/html/images/evas_scaling2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_scaling3.png [moved from org.tizen.guides/html/images/evas_scaling3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_smooth_disabled.png [moved from org.tizen.guides/html/images/evas_smooth_disabled.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/evas_smooth_enabled.png [moved from org.tizen.guides/html/images/evas_smooth_enabled.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/events.png [moved from org.tizen.guides/html/images/events.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/events2.png [moved from org.tizen.guides/html/images/events2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/events3.png [moved from org.tizen.guides/html/images/events3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/events_flow.png [moved from org.tizen.guides/html/images/events_flow.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/events_scope.png [moved from org.tizen.guides/html/images/events_scope.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/events_using_css3.png [moved from org.tizen.tutorials/html/images/events_using_css3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/events_using_javascript.png [moved from org.tizen.tutorials/html/images/events_using_javascript.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/fade_affect_animation.png [moved from org.tizen.tutorials/html/images/fade_affect_animation.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/fill_to_parent.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/first_screen_edc.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/fit_to_children.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/fixed.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/flex_container.png [moved from org.tizen.guides/html/images/flex_container.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/flexcontainer_properties.png [moved from org.tizen.tutorials/html/images/flexcontainer_properties.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/flexible_box_alignment.png [moved from org.tizen.tutorials/html/images/flexible_box_allignment.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/flexible_default_structure.png [moved from org.tizen.tutorials/html/images/flexible_default_structure.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/flexible_screen_size.png [moved from org.tizen.tutorials/html/images/flexible_screen_size.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/flexitem_properties.png [moved from org.tizen.tutorials/html/images/flexitem_properties.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/flip_tree.png [moved from org.tizen.guides/html/images/flip_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/flipsel_default.png [moved from org.tizen.guides/html/images/flipsel_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/focal_length.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/font_face.png [moved from org.tizen.tutorials/html/images/font_face.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/font_properties.png [moved from org.tizen.tutorials/html/images/font_properties.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/form_contact_layout.png [moved from org.tizen.tutorials/html/images/form_contact_layout.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid.png [moved from org.tizen.guides/html/images/gengrid.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_album_pre.png [moved from org.tizen.guides/html/images/gengrid_album_pre.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_block.png [moved from org.tizen.guides/html/images/gengrid_block.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_def.png [moved from org.tizen.guides/html/images/gengrid_def.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_def_gridtext.png [moved from org.tizen.guides/html/images/gengrid_def_gridtext.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_def_gridtext2.png [moved from org.tizen.guides/html/images/gengrid_def_gridtext2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_def_style.png [moved from org.tizen.guides/html/images/gengrid_def_style.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_default.png [moved from org.tizen.guides/html/images/gengrid_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_grp_index.png [moved from org.tizen.guides/html/images/gengrid_grp_index.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gengrid_tree.png [moved from org.tizen.guides/html/images/gengrid_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist.png [moved from org.tizen.guides/html/images/genlist.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist1_wn.png [moved from org.tizen.guides/html/images/genlist1_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist2_wn.png [moved from org.tizen.guides/html/images/genlist2_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist3_wn.png [moved from org.tizen.guides/html/images/genlist3_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1line.png [moved from org.tizen.tutorials/html/images/genlist_1line.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1text1icon1_o_wn.png [moved from org.tizen.guides/html/images/genlist_1text1icon1_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1text1icon1_wn.png [moved from org.tizen.guides/html/images/genlist_1text1icon1_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1text1icon_o_wn.png [moved from org.tizen.guides/html/images/genlist_1text1icon_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1text1icon_wn.png [moved from org.tizen.guides/html/images/genlist_1text1icon_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1text1icondivider_o_wn.png [moved from org.tizen.guides/html/images/genlist_1text1icondivider_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1text1icondivider_wn.png [moved from org.tizen.guides/html/images/genlist_1text1icondivider_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1text_o_wn.png [moved from org.tizen.guides/html/images/genlist_1text_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_1text_wn.png [moved from org.tizen.guides/html/images/genlist_1text_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_2text1_wn.png [moved from org.tizen.guides/html/images/genlist_2text1_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_2text1icon1_o_wn.png [moved from org.tizen.guides/html/images/genlist_2text1icon1_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_2text1icon1_wn.png [moved from org.tizen.guides/html/images/genlist_2text1icon1_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_2text_o_wn.png [moved from org.tizen.guides/html/images/genlist_2text_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_2text_wn.png [moved from org.tizen.guides/html/images/genlist_2text_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_def_o_wn.png [moved from org.tizen.guides/html/images/genlist_def_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_def_wn.png [moved from org.tizen.guides/html/images/genlist_def_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_edit_o_wn.png [moved from org.tizen.guides/html/images/genlist_edit_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_group_o_wn.png [moved from org.tizen.guides/html/images/genlist_group_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_group_wn.png [moved from org.tizen.guides/html/images/genlist_group_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_htree.png [moved from org.tizen.guides/html/images/genlist_htree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_item.png [moved from org.tizen.tutorials/html/images/genlist_item.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_multi.png [moved from org.tizen.guides/html/images/genlist_multi.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_multi1_wn.png [moved from org.tizen.guides/html/images/genlist_multi1_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_multi2_wn.png [moved from org.tizen.guides/html/images/genlist_multi2_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_title_o_wn.png [moved from org.tizen.guides/html/images/genlist_title_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_tree.png [moved from org.tizen.guides/html/images/genlist_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/genlist_wn.png [moved from org.tizen.tutorials/html/images/genlist_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gesture_view2.png [moved from org.tizen.tutorials/html/images/gesture_view2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gl-default.png [moved from org.tizen.guides/html/images/gl-default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gl-double-label.png [moved from org.tizen.guides/html/images/gl-double-label.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/gl-end-icon.png [moved from org.tizen.guides/html/images/gl-end-icon.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/global_scales.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/globalize_folder_structure.png [moved from org.tizen.guides/html/images/globalize_folder_structure.png with 100% similarity] patch | blob | history
org.tizen.ui.guides/html/images/globalize_folder_structure_main.png [moved from org.tizen.guides/html/images/globalize_folder_structure_main.png with 100% similarity] patch | blob | history
org.tizen.ui.guides/html/images/glview.png [moved from org.tizen.guides/html/images/glview.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/glview_tree.png [moved from org.tizen.guides/html/images/glview_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/glview_wn.png [moved from org.tizen.guides/html/images/glview_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/google_cardboard.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/grid.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/ico_arr_hidden.gif [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/ico_bullet_2_7.gif [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/icon.png [moved from org.tizen.guides/html/images/icon.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_apps.png [moved from org.tizen.guides/html/images/icon_apps.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_arrowdown.png [moved from org.tizen.guides/html/images/icon_arrowdown.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_arrowleft.png [moved from org.tizen.guides/html/images/icon_arrowleft.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_arrowright.png [moved from org.tizen.guides/html/images/icon_arrowright.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_arrowup.png [moved from org.tizen.guides/html/images/icon_arrowup.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_chat.png [moved from org.tizen.guides/html/images/icon_chat.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_clock.png [moved from org.tizen.guides/html/images/icon_clock.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_close.png [moved from org.tizen.guides/html/images/icon_close.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_delete.png [moved from org.tizen.guides/html/images/icon_delete.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_edit.png [moved from org.tizen.guides/html/images/icon_edit.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_file.png [moved from org.tizen.guides/html/images/icon_file.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_forward.png [moved from org.tizen.guides/html/images/icon_forward.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_home.png [moved from org.tizen.guides/html/images/icon_home.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_info.png [moved from org.tizen.guides/html/images/icon_info.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_apps.png [moved from org.tizen.guides/html/images/icon_menu_apps.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_arrdown.png [moved from org.tizen.guides/html/images/icon_menu_arrdown.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_arrleft.png [moved from org.tizen.guides/html/images/icon_menu_arrleft.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_arrright.png [moved from org.tizen.guides/html/images/icon_menu_arrright.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_arrup.png [moved from org.tizen.guides/html/images/icon_menu_arrup.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_chat.png [moved from org.tizen.guides/html/images/icon_menu_chat.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_clock.png [moved from org.tizen.guides/html/images/icon_menu_clock.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_close.png [moved from org.tizen.guides/html/images/icon_menu_close.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_delete.png [moved from org.tizen.guides/html/images/icon_menu_delete.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_edit.png [moved from org.tizen.guides/html/images/icon_menu_edit.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_file.png [moved from org.tizen.guides/html/images/icon_menu_file.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_folder.png [moved from org.tizen.guides/html/images/icon_menu_folder.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_home.png [moved from org.tizen.guides/html/images/icon_menu_home.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_nophoto.png [moved from org.tizen.guides/html/images/icon_menu_nophoto.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_menu_refresh.png [moved from org.tizen.guides/html/images/icon_menu_refresh.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_next.png [moved from org.tizen.guides/html/images/icon_next.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_pause.png [moved from org.tizen.guides/html/images/icon_pause.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_photo_nophoto.png [moved from org.tizen.guides/html/images/icon_photo_nophoto.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_play.png [moved from org.tizen.guides/html/images/icon_play.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_prev.png [moved from org.tizen.guides/html/images/icon_prev.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_refresh.png [moved from org.tizen.guides/html/images/icon_refresh.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_rewind.png [moved from org.tizen.guides/html/images/icon_rewind.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_stop.png [moved from org.tizen.guides/html/images/icon_stop.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_apps.png [moved from org.tizen.guides/html/images/icon_toolbar_apps.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_arrdown.png [moved from org.tizen.guides/html/images/icon_toolbar_arrdown.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_arrleft.png [moved from org.tizen.guides/html/images/icon_toolbar_arrleft.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_arrright.png [moved from org.tizen.guides/html/images/icon_toolbar_arrright.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_arrup.png [moved from org.tizen.guides/html/images/icon_toolbar_arrup.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_chat.png [moved from org.tizen.guides/html/images/icon_toolbar_chat.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_clock.png [moved from org.tizen.guides/html/images/icon_toolbar_clock.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_close.png [moved from org.tizen.guides/html/images/icon_toolbar_close.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_delete.png [moved from org.tizen.guides/html/images/icon_toolbar_delete.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_edit.png [moved from org.tizen.guides/html/images/icon_toolbar_edit.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_file.png [moved from org.tizen.guides/html/images/icon_toolbar_file.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_folder.png [moved from org.tizen.guides/html/images/icon_toolbar_folder.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_moremenu.png [moved from org.tizen.guides/html/images/icon_toolbar_moremenu.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_toolbar_refresh.png [moved from org.tizen.guides/html/images/icon_toolbar_refresh.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/icon_tree.png [moved from org.tizen.guides/html/images/icon_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/idlers.png [moved from org.tizen.guides/html/images/idlers.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/image.png [moved from org.tizen.guides/html/images/image.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/image_after.png [moved from org.tizen.tutorials/html/images/image_after.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/image_before.png [moved from org.tizen.tutorials/html/images/image_before.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/image_tree.png [moved from org.tizen.guides/html/images/image_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/image_wn.png [moved from org.tizen.guides/html/images/image_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/immediate_mode.png [moved from org.tizen.guides/html/images/immediate_mode.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/import_css_area.png [moved from org.tizen.guides/html/images/import_css_area.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/import_linked_in_head.png [moved from org.tizen.guides/html/images/import_linked_in_head.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index.png [moved from org.tizen.guides/html/images/index.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_circle_o_wn.png [moved from org.tizen.guides/html/images/index_circle_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_default.png [moved from org.tizen.guides/html/images/index_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_default02.png [moved from org.tizen.guides/html/images/index_default02.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_pagecontrol.png [moved from org.tizen.guides/html/images/index_pagecontrol.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_tab_wn.png [moved from org.tizen.guides/html/images/index_tab_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_thumb_o_wn.png [moved from org.tizen.guides/html/images/index_thumb_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_thumb_wn.png [moved from org.tizen.guides/html/images/index_thumb_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_tree.png [moved from org.tizen.guides/html/images/index_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/index_wn.png [moved from org.tizen.guides/html/images/index_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/label.png [moved from org.tizen.guides/html/images/label.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/label_tree.png [moved from org.tizen.guides/html/images/label_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/label_wn.png [moved from org.tizen.guides/html/images/label_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_app.png [moved from org.tizen.guides/html/images/layout_app.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_calculator.png [moved from org.tizen.guides/html/images/layout_calculator.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_calculator_absolute.png [moved from org.tizen.guides/html/images/layout_calculator_absolute.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_calculator_relative.png [moved from org.tizen.guides/html/images/layout_calculator_relative.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_fixed_media.png [moved from org.tizen.guides/html/images/layout_fixed_media.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_flexible_media.png [moved from org.tizen.guides/html/images/layout_flexible_media.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_image.png [moved from org.tizen.guides/html/images/layout_image.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_image_scaled.png [moved from org.tizen.guides/html/images/layout_image_scaled.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_original.png [moved from org.tizen.guides/html/images/layout_original.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_original_scaled.png [moved from org.tizen.guides/html/images/layout_original_scaled.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_sample.png [moved from org.tizen.guides/html/images/layout_sample.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_sample_ok.png [moved from org.tizen.guides/html/images/layout_sample_ok.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/layout_sample_ugly.png [moved from org.tizen.guides/html/images/layout_sample_ugly.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/list.png [moved from org.tizen.guides/html/images/list.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/list_tree.png [moved from org.tizen.guides/html/images/list_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/list_wn.png [moved from org.tizen.guides/html/images/list_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/main_app_layout.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/map_tree.png [moved from org.tizen.guides/html/images/map_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/mapbuf_tree.png [moved from org.tizen.guides/html/images/mapbuf_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/mascot.gif [moved from org.tizen.guides/html/images/mascot.gif with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/media_queries1.png [moved from org.tizen.tutorials/html/images/media_queries1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/media_queries3.png [moved from org.tizen.tutorials/html/images/media_queries3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/memory.png [moved from org.tizen.guides/html/images/memory.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/memory2.png [moved from org.tizen.guides/html/images/memory2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/memory3.png [moved from org.tizen.guides/html/images/memory3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/memory_using_css3.png [moved from org.tizen.tutorials/html/images/memory_using_css3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/memory_using_javascript.png [moved from org.tizen.tutorials/html/images/memory_using_javascript.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/menu_skeleton.png [moved from org.tizen.tutorials/html/images/menu_skeleton.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/migrate_move_to_top.png [moved from org.tizen.guides/html/images/migrate_move_to_top.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/migrate_padding.png [moved from org.tizen.guides/html/images/migrate_padding.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/migrate_scrollable_circle.png [moved from org.tizen.guides/html/images/migrate_scrollable_circle.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/migrate_scrollable_rect.png [moved from org.tizen.guides/html/images/migrate_scrollable_rect.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/mn_division.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/mn_icon.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/moving1.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/moving2.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/multi_button_default.png [moved from org.tizen.guides/html/images/multi_button_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/multi_threading.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/multi_threading2.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/multiple_layout_example.png [moved from org.tizen.guides/html/images/multiple_layout_example.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/multipoint_touch.png [moved from org.tizen.tutorials/html/images/multipoint_touch.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/mw_division.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/mw_icon.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/mw_icon_optional.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/n_division.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/network.png [moved from org.tizen.guides/html/images/network.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/network2.png [moved from org.tizen.guides/html/images/network2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/network3.png [moved from org.tizen.guides/html/images/network3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/network_speed_sprite.png [moved from org.tizen.guides/html/images/network_speed_sprite.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/notify_tree.png [moved from org.tizen.guides/html/images/notify_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/object_size_16.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/object_size_22.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/object_size_44.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/padding-hints.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/pane_tuto.png [moved from org.tizen.tutorials/html/images/pane_tuto.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/panel_default.png [moved from org.tizen.guides/html/images/panel_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/panel_tree.png [moved from org.tizen.guides/html/images/panel_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/panes.png [moved from org.tizen.guides/html/images/panes.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/parent_origin.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/path_animation.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/perspective_buttons.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/perspective_screen.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/perspective_swallow.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/photo_tree.png [moved from org.tizen.guides/html/images/photo_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/photocam_tree.png [moved from org.tizen.guides/html/images/photocam_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/plug_tree.png [moved from org.tizen.guides/html/images/plug_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup.png [moved from org.tizen.guides/html/images/popup.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup_circle_o_wn.png [moved from org.tizen.guides/html/images/popup_circle_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup_default.png [moved from org.tizen.guides/html/images/popup_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup_default_wn.png [moved from org.tizen.guides/html/images/popup_default_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup_toast.png [moved from org.tizen.guides/html/images/popup_toast.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup_toast_o_wn.png [moved from org.tizen.guides/html/images/popup_toast_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup_toast_wn.png [moved from org.tizen.guides/html/images/popup_toast_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup_tree.png [moved from org.tizen.guides/html/images/popup_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/popup_wn.png [moved from org.tizen.guides/html/images/popup_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/pos_map_all.png [moved from org.tizen.guides/html/images/pos_map_all.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar.png [moved from org.tizen.guides/html/images/progressbar.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_default.png [moved from org.tizen.guides/html/images/progressbar_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_default_wn.png [moved from org.tizen.guides/html/images/progressbar_default_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_group_wn.png [moved from org.tizen.guides/html/images/progressbar_group_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_pending_wn.png [moved from org.tizen.guides/html/images/progressbar_pending_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_process_o_wn.png [moved from org.tizen.guides/html/images/progressbar_process_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_process_wn.png [moved from org.tizen.guides/html/images/progressbar_process_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_small_o_wn.png [moved from org.tizen.guides/html/images/progressbar_small_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_tree.png [moved from org.tizen.guides/html/images/progressbar_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_wheel.png [moved from org.tizen.guides/html/images/progressbar_wheel.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/progressbar_wn.png [moved from org.tizen.guides/html/images/progressbar_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/pseudo_elements_selector_range.png [moved from org.tizen.tutorials/html/images/pseudo_elements_selector_range.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/pseudo_elements_selector_required.png [moved from org.tizen.tutorials/html/images/pseudo_elements_selector_required.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/push_button.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/radio.png [moved from org.tizen.guides/html/images/radio.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/radio_button.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/radio_default.png [moved from org.tizen.guides/html/images/radio_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/radio_default_o_wn.png [moved from org.tizen.guides/html/images/radio_default_o_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/radio_default_wn.png [moved from org.tizen.guides/html/images/radio_default_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/radio_state_changes.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/radio_tree.png [moved from org.tizen.guides/html/images/radio_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/radio_wn.png [moved from org.tizen.guides/html/images/radio_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_footer.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_footer.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_header.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_header.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_list.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_snap.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_moreoption.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_moreoption.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_multibtn.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_multibtn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_popup_bottom.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_popup_bottom.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_popup_side.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_popup_side.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_processing.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_processing.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_progress.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_progress.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rectangular_thumbnail.png [moved from org.tizen.guides/html/web/tizen/TAU/images/rectangular_thumbnail.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/redrawing01.png [moved from org.tizen.guides/html/images/redrawing01.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/redrawing02.png [moved from org.tizen.guides/html/images/redrawing02.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/redrawing03.png [moved from org.tizen.guides/html/images/redrawing03.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/redrawing04.png [moved from org.tizen.guides/html/images/redrawing04.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/redrawing05.png [moved from org.tizen.guides/html/images/redrawing05.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rel1_rel2_offsets.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/rel1_rel2_offsets_and_relative.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/removing_padding.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/rendering1.png [moved from org.tizen.guides/html/images/rendering1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/retained_mode.png [moved from org.tizen.guides/html/images/retained_mode.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/rotary_event.png [moved from org.tizen.guides/html/images/rotary_event.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_footer.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_footer.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_header.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_header.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_list.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_snap.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_moreoption.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_moreoption.png with 100% similarity] patch | blob | history
org.tizen.ui.guides/html/images/round_multibtn.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_multibtn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_popup_bottom.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_popup_bottom.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_popup_side.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_popup_side.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_processing.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_processing.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_progress.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_progress.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/round_thumbnail.png [moved from org.tizen.guides/html/web/tizen/TAU/images/round_thumbnail.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scalable_group1.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/scalable_group2.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/scale.png [moved from org.tizen.guides/html/images/scale.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_1.3_finger_50.png [moved from org.tizen.guides/html/images/scale_1.3_finger_50.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_1_finger_50.png [moved from org.tizen.guides/html/images/scale_1_finger_50.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_1_finger_90.png [moved from org.tizen.guides/html/images/scale_1_finger_90.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_align_hint.png [moved from org.tizen.guides/html/images/scale_align_hint.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_box.png [moved from org.tizen.guides/html/images/scale_box.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_1.png [moved from org.tizen.guides/html/images/scale_effect_1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_10.png [moved from org.tizen.guides/html/images/scale_effect_10.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_2.png [moved from org.tizen.guides/html/images/scale_effect_2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_3.png [moved from org.tizen.guides/html/images/scale_effect_3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_4.png [moved from org.tizen.guides/html/images/scale_effect_4.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_5.png [moved from org.tizen.guides/html/images/scale_effect_5.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_6.png [moved from org.tizen.guides/html/images/scale_effect_6.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_7.png [moved from org.tizen.guides/html/images/scale_effect_7.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_8.png [moved from org.tizen.guides/html/images/scale_effect_8.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_effect_9.png [moved from org.tizen.guides/html/images/scale_effect_9.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_example_image.png [moved from org.tizen.guides/html/images/scale_example_image.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_example_image_set.png [moved from org.tizen.guides/html/images/scale_example_image_set.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_example_part.png [moved from org.tizen.guides/html/images/scale_example_part.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_example_part_aspect.png [moved from org.tizen.guides/html/images/scale_example_part_aspect.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_example_text.png [moved from org.tizen.guides/html/images/scale_example_text.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_example_text_fit.png [moved from org.tizen.guides/html/images/scale_example_text_fit.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_fixed.png [moved from org.tizen.guides/html/images/scale_fixed.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_fixed_flexible.png [moved from org.tizen.guides/html/images/scale_fixed_flexible.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_fixed_height.png [moved from org.tizen.guides/html/images/scale_fixed_height.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_flexible_height.png [moved from org.tizen.guides/html/images/scale_flexible_height.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_grid.png [moved from org.tizen.guides/html/images/scale_grid.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_original_image.png [moved from org.tizen.guides/html/images/scale_original_image.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_relative.png [moved from org.tizen.guides/html/images/scale_relative.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_relative_scaled.png [moved from org.tizen.guides/html/images/scale_relative_scaled.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_testing_app.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/scale_values.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/scale_values2.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/scale_weight_hint.png [moved from org.tizen.guides/html/images/scale_weight_hint.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scale_weight_hint_multiple.png [moved from org.tizen.guides/html/images/scale_weight_hint_multiple.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scaling.png [moved from org.tizen.guides/html/images/scaling.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/screenshot_1.png [moved from org.tizen.tutorials/html/images/screenshot_1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/screenshot_2.png [moved from org.tizen.tutorials/html/images/screenshot_2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/scrollview.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/segm_control_default.png [moved from org.tizen.guides/html/images/segm_control_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/segment.png [moved from org.tizen.guides/html/images/segment.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/segment_control_tree.png [moved from org.tizen.guides/html/images/segment_control_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/segment_text.png [moved from org.tizen.guides/html/images/segment_text.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/setting_sd.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/show_frametime.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/signal_slot.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/slider.png [moved from org.tizen.guides/html/images/slider.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/slider_hor.png [moved from org.tizen.guides/html/images/slider_hor.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/slider_hor_center.png [moved from org.tizen.guides/html/images/slider_hor_center.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/slider_hor_wn.png [moved from org.tizen.guides/html/images/slider_hor_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/slider_tree.png [moved from org.tizen.guides/html/images/slider_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/slider_ver.png [moved from org.tizen.guides/html/images/slider_ver.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/slider_ver_center.png [moved from org.tizen.guides/html/images/slider_ver_center.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/slider_wn.png [moved from org.tizen.guides/html/images/slider_wn.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/spin.png [moved from org.tizen.guides/html/images/spin.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/spinner_hor.png [moved from org.tizen.guides/html/images/spinner_hor.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/spinner_tree.png [moved from org.tizen.guides/html/images/spinner_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/spinner_ver.png [moved from org.tizen.guides/html/images/spinner_ver.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/spiral.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/stereo_projection.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/styleguide_genlist_def.png [moved from org.tizen.guides/html/images/styleguide_genlist_def.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/styleguide_genlist_defstyle.png [moved from org.tizen.guides/html/images/styleguide_genlist_defstyle.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/styleguide_genlist_doublelabel.png [moved from org.tizen.guides/html/images/styleguide_genlist_doublelabel.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/styleguide_genlist_end.png [moved from org.tizen.guides/html/images/styleguide_genlist_end.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/styleguide_genlist_full.png [moved from org.tizen.guides/html/images/styleguide_genlist_full.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/styleguide_genlist_group.png [moved from org.tizen.guides/html/images/styleguide_genlist_group.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/styleguide_genlist_message.png [moved from org.tizen.guides/html/images/styleguide_genlist_message.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/styleguide_genlist_oneicon.png [moved from org.tizen.guides/html/images/styleguide_genlist_oneicon.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/tableview.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/text_class_list.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/text_class_list_del.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/text_class_properties.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/text_properties.png [moved from org.tizen.tutorials/html/images/text_properties.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/text_screen_2.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/textfield.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/textlabel.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/thread_pool_lifecycle_1.png [moved from org.tizen.guides/html/images/thread_pool_lifecycle_1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/thread_pool_lifecycle_2.png [moved from org.tizen.guides/html/images/thread_pool_lifecycle_2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/thread_pool_lifecycle_3.png [moved from org.tizen.guides/html/images/thread_pool_lifecycle_3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/toolbar.png [moved from org.tizen.guides/html/images/toolbar.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/toolbar_default.png [moved from org.tizen.guides/html/images/toolbar_default.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/toolbar_navigation.png [moved from org.tizen.guides/html/images/toolbar_navigation.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/toolbar_tabbar.png [moved from org.tizen.guides/html/images/toolbar_tabbar.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/toolbar_tree.png [moved from org.tizen.guides/html/images/toolbar_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/transit_rotation_zoom.png [moved from org.tizen.tutorials/html/images/transit_rotation_zoom.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/transitions1.png [moved from org.tizen.tutorials/html/images/transitions1.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/transitions2.png [moved from org.tizen.tutorials/html/images/transitions2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/transitions3.png [moved from org.tizen.tutorials/html/images/transitions3.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/transitions5.png [moved from org.tizen.tutorials/html/images/transitions5.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/ui_control_hierarchy.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/ui_controls.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/uilayout_view2.png [moved from org.tizen.tutorials/html/images/uilayout_view2.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/use_natural_size.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/using_clipper.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/using_clipper2.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/using_import_attribute.png [moved from org.tizen.guides/html/images/using_import_attribute.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/view_main.png [moved from org.tizen.tutorials/html/images/view_main.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/w_division.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/win_tree.png [moved from org.tizen.guides/html/images/win_tree.png with 100% similarity, mode: 0755] patch | blob | history
org.tizen.ui.guides/html/images/wn_division.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/wn_icon.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/ww_division.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/ww_icon.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/images/ww_icon_optional.png [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/index.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/actors_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/advanced_animation_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/animation_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/basic_framework_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/buttons_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/constraints_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/dali_applications_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/dali_overview_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/event_handling_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/guides_dali_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/itemview_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/multi_threading_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/rendering_effects_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/resources_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/scrollview_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/tableview_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/textfield_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/textlabel_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/dali/ui_components_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/animation_effects_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/basic_tutorial_mn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/button_tutorial_wn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/circle_components_wn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/component_custom_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/component_focus_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/component_infra_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/components_mn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/components_wn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/containers_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/core_loop_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/data_types_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/data_types_tools_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/datetime_tutorial_wn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/ecore_animation_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/ecore_animation_tutorial_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edc_optimization_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edc_part_block_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edc_positioning_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_animation_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_animation_tutorial_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_color_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_files_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_intro_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_manage_animation_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_message_signal_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_objects_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_perspective_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_scaling_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/edje_text_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/efl_overview_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/elementary_animation_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/elementary_animation_tutorial_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/elementary_transit_effect_tutorial_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/evas_advanced_objects_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/evas_basic_objects_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/evas_map_animation_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/evas_map_effects_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/evas_objects_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/evas_optimization_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/evas_rendering_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/event_handling_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/event_types_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/font_setting_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/form_tutorial_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/genlist_tutorial_mn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/genlist_tutorial_wn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/graphical_objects_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/guides_efl_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/hw_input_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/key_events_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/layout_tutorial_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/main_loop_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/menu_tutorial_mn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/multiple_screens_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/multipoint_touch_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/naviframe_tutorial_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/notification_window_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/panes_tutorial_mn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/popup_tutorial_wn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/rotary_events_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/scalability_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/theme_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/threads_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/tools_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/touch_gesture_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/ui_components_mn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/ui_components_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/ui_components_wn.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/ui_containers_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/efl/ui_scalability_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/native/guides_n.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/scripts/common.js [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/scripts/core.js [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/scripts/jquery.util.js [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/scripts/jquery.zclip.min.js [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/scripts/navi.js [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/scripts/search.js [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/scripts/showhide.js [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/scripts/snippet.js [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/guides_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/accessibility_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/event_handling_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/globalization_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/guides_tau_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/header_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/helloworld_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/helper_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/list_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/managing_page_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/notepad_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/popup_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/processing_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/tau/ui_component_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/animation_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/background_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/basic_ui_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/clipboard_mw.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/color_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/flexible_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/font_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/frame_flattening_mw.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/html_priority_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/media_query_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/multi_mw.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/multiple_screens_mw.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/text_module_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/transform_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/transition_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/ui_layout_ww.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/html/web/w3c/woff_w.htm [new file with mode: 0755] patch | blob
org.tizen.ui.guides/index.xml [new file with mode: 0755] patch | blob
org.tizen.ui.guides/plugin.xml [new file with mode: 0755] patch | blob

diff --git a/org.tizen.devtools/.project b/org.tizen.devtools/.project
index a35a122..543c836 100644 (file)
--- a/org.tizen.devtools/.project
+++ b/org.tizen.devtools/.project
@@ -1,22 +1,22 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-       <name>org.tizen.devtools_2.4.0</name>
-       <comment></comment>
-       <projects>
-       </projects>
-       <buildSpec>
-               <buildCommand>
-                       <name>org.eclipse.pde.ManifestBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.eclipse.pde.SchemaBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-       </buildSpec>
-       <natures>
-               <nature>org.eclipse.pde.PluginNature</nature>
-       </natures>
-</projectDescription>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<projectDescription>\r
+       <name>org.tizen.devtools_2.4.0</name>\r
+       <comment></comment>\r
+       <projects>\r
+       </projects>\r
+       <buildSpec>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.ManifestBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.SchemaBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+       </buildSpec>\r
+       <natures>\r
+               <nature>org.eclipse.pde.PluginNature</nature>\r
+       </natures>\r
+</projectDescription>\r
diff --git a/org.tizen.devtools/META-INF/MANIFEST.MF b/org.tizen.devtools/META-INF/MANIFEST.MF
index bf52ba8..a0f882c 100644 (file)
--- a/org.tizen.devtools/META-INF/MANIFEST.MF
+++ b/org.tizen.devtools/META-INF/MANIFEST.MF
@@ -1,7 +1,7 @@
-Manifest-Version: 1.0
-Bundle-ManifestVersion: 1
-Bundle-Name: Tizen Tools
-Bundle-SymbolicName: org.tizen.devtools;singleton=true
-Bundle-Version: 2.4.0
-Bundle-Vendor: The Linux Foundation
-
+Manifest-Version: 1.0\r
+Bundle-ManifestVersion: 1\r
+Bundle-Name: Tizen Tools\r
+Bundle-SymbolicName: org.tizen.devtools;singleton=true\r
+Bundle-Version: 2.4.0\r
+Bundle-Vendor: The Linux Foundation\r
+\r
diff --git a/org.tizen.devtools/build.properties b/org.tizen.devtools/build.properties
index 5c90a0d..2becf8e 100644 (file)
--- a/org.tizen.devtools/build.properties
+++ b/org.tizen.devtools/build.properties
@@ -1,8 +1,8 @@
-bin.includes = plugin.xml,\
-               META-INF/,\
-               html/,\
-               build.properties,\
-               .project,\
-               about.html,\
-               index.xml
-
+bin.includes = plugin.xml,\\r
+               META-INF/,\\r
+               html/,\\r
+               build.properties,\\r
+               .project,\\r
+               about.html,\\r
+               index.xml\r
+\r
diff --git a/org.tizen.devtools/html/common_tools/certificate_registration.htm b/org.tizen.devtools/html/common_tools/certificate_registration.htm
index b9c60fc..38ed441 100644 (file)
--- a/org.tizen.devtools/html/common_tools/certificate_registration.htm
+++ b/org.tizen.devtools/html/common_tools/certificate_registration.htm
@@ -1,66 +1,66 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>Certificate Registration</title>
-</head>
-
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-
-<h1>Certificate Registration</h1>
-<p>To build and debug projects, to run projects as applications on an Emulator, dynamic analyzer, or external devices, to create packages, or to launch applications, you must register an author certificate in the Tizen IDE.</p>
-<p>To register an author certificate:</p>
-<ol>
-<li>In the Tizen IDE, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Security Profiles</strong>.</li>
-<li>To add a signed profile, click <strong>Add</strong> in the <strong>Profiles</strong> panel.</li>
-<li>Click <strong>Generate</strong> in the <strong>Author Certificate</strong> panel to generate an author certificate, if you do not have one.</li>
-<li>In the <strong>Author Certificate</strong> panel, click <strong>Edit</strong> to set the author certificate path and password.</li>
-</ol>
-<p>To change distributor certificates, select a table item and then click <strong>Edit</strong> in the <strong>Distributor Certificate</strong> panel.</p>
-<p>The first distributor certificate is required and the default information is filled automatically when a profile is created. The second distributor certificate is optional and is used only for special purposes. In general, you are not required to modify distributor certificates.</p>
-
-<p class="figure">Figure: Security Profiles</p>
-
-<p align="center"><img alt="Security Profiles" src="../images/author_certificate.png" /></p>
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>Certificate Registration</title>\r
+</head>\r
+\r
+\r
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+\r
+<h1>Certificate Registration</h1>\r
+<p>To build and debug projects, to run projects as applications on an Emulator, dynamic analyzer, or external devices, to create packages, or to launch applications, you must register an author certificate in the Tizen IDE.</p>\r
+<p>To register an author certificate:</p>\r
+<ol>\r
+<li>In the Tizen IDE, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Security Profiles</strong>.</li>\r
+<li>To add a signed profile, click <strong>Add</strong> in the <strong>Profiles</strong> panel.</li>\r
+<li>Click <strong>Generate</strong> in the <strong>Author Certificate</strong> panel to generate an author certificate, if you do not have one.</li>\r
+<li>In the <strong>Author Certificate</strong> panel, click <strong>Edit</strong> to set the author certificate path and password.</li>\r
+</ol>\r
+<p>To change distributor certificates, select a table item and then click <strong>Edit</strong> in the <strong>Distributor Certificate</strong> panel.</p>\r
+<p>The first distributor certificate is required and the default information is filled automatically when a profile is created. The second distributor certificate is optional and is used only for special purposes. In general, you are not required to modify distributor certificates.</p>\r
+\r
+<p class="figure">Figure: Security Profiles</p>\r
+\r
+<p align="center"><img alt="Security Profiles" src="../images/author_certificate.png" /></p>\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.devtools/html/common_tools/connection_explorer.htm b/org.tizen.devtools/html/common_tools/connection_explorer.htm
index ba98ea7..40468d5 100644 (file)
--- a/org.tizen.devtools/html/common_tools/connection_explorer.htm
+++ b/org.tizen.devtools/html/common_tools/connection_explorer.htm
@@ -1,108 +1,108 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>Connection Explorer View </title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#target">Testing with a Target Device</a></li>
-                               <li><a href="#emulator">Testing with the Emulator</a></li>
-                               <li><a href="#transfer">Transferring Files with Connected Devices</a></li>
-                               <li><a href="#preference">Setting Preferences</a></li>
-               </ul>
-       </div></div>
-</div>
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Connection Explorer View</h1>
-
-                       <p>You can test Tizen applications with connected devices by using the following alternative ways:</p> 
-<ul>
-<li>Testing applications on a physical device connected to the host system.</li>
-<li>Testing them on an Emulator that emulates a real device as a software component installed on the host computer.</li>
-<li>A list of connected devices is available in the <strong>Connection Explorer</strong> view after connecting a device or launching a Tizen Emulator with a tree view.</li></ul>
-
-<p>The <strong>Connection Explorer</strong> view shows the devices connected to the system. It provides the following actions for using connected devices:</p>
-<ul>
-<li>Show connected devices</li>
-<li>Provide file operations on connected devices</li>
-<li>Send or receive files between the <strong>Project Explorer</strong> view and <strong>Connection Explorer</strong> view by dragging and dropping them between the views</li>
-<li>Explore the file system on connected devices</li>
-<li>Launch the Emulator Manager to handle the Emulator with multi-instances</li>
-</ul>
-<p class="figure">Figure: Connection Explorer view</p>
-<p align="center"><img alt="Connection Explorer view" src="../images/connection_explorer.png" /></p>
-
-<h2 id="target" name="target">Testing with a Target Device</h2>
-<p>You can test your application by running and debugging it on a real target device:</p>
-<ul>
-<li>Connect your device to the host system by using a USB connector. The device icon (<img alt="Device icon" src="../images/device_icon.png"/>) is displayed in the <strong>Connection Explorer</strong> view.</li>
-<li>Select the device in the <strong>Connection Explorer</strong> view. It is ready to be run and used to test your project.</li></ul> 
-
-<h2 id="emulator" name="emulator">Testing with the Emulator</h2>
-<p>You can test your application by running and debugging it on the Emulator.</p>
-<p>To start the Emulator, click the Emulator Manager icon on the toolbar, select the Emulator in the Emulator Manager, and click <strong>Launch</strong>.</p>
-
-<p>The Emulator icon (<img alt="Emulator icon" src="../images/emulator_icon.png"/>) is displayed in the <strong>Connection Explorer</strong> view, and the Emulator is ready for testing the application.</p>
-
-
-<h2 id="transfer" name="transfer">Transferring Files with Connected Devices</h2>
-
-<p>You can transfer files between the connected devices and the host system:</p>
-<ul>
-<li>To transfer a file from a connected device to the host file system, pull the selected file to the desired host system path.
-</li> 
-<li>To transfer a file from the host file system to a connected device, push the selected file to the desired connected device path.
-</li></ul>
-
-<h2 id="preference" name="preference">Setting Preferences</h2>
-<p>You can set the following Connection Explorer preferences:</p>
-<ul>
-<li>Change the Emulator Manager path</li>
-<li>Set the file transfer timeout value</li>
-</ul>
-
-<p>To set the Connection Explorer preferences, right-click the project and select <strong>Preferences &gt; Tizen SDK &gt; Tools &gt; Connection Explorer</strong>.</p>
- 
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>Connection Explorer View </title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                               <li><a href="#target">Testing with a Target Device</a></li>\r
+                               <li><a href="#emulator">Testing with the Emulator</a></li>\r
+                               <li><a href="#transfer">Transferring Files with Connected Devices</a></li>\r
+                               <li><a href="#preference">Setting Preferences</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Connection Explorer View</h1>\r
+\r
+                       <p>You can test Tizen applications with connected devices by using the following alternative ways:</p> \r
+<ul>\r
+<li>Testing applications on a physical device connected to the host system.</li>\r
+<li>Testing them on an Emulator that emulates a real device as a software component installed on the host computer.</li>\r
+<li>A list of connected devices is available in the <strong>Connection Explorer</strong> view after connecting a device or launching a Tizen Emulator with a tree view.</li></ul>\r
+\r
+<p>The <strong>Connection Explorer</strong> view shows the devices connected to the system. It provides the following actions for using connected devices:</p>\r
+<ul>\r
+<li>Show connected devices</li>\r
+<li>Provide file operations on connected devices</li>\r
+<li>Send or receive files between the <strong>Project Explorer</strong> view and <strong>Connection Explorer</strong> view by dragging and dropping them between the views</li>\r
+<li>Explore the file system on connected devices</li>\r
+<li>Launch the Emulator Manager to handle the Emulator with multi-instances</li>\r
+</ul>\r
+<p class="figure">Figure: Connection Explorer view</p>\r
+<p align="center"><img alt="Connection Explorer view" src="../images/connection_explorer.png" /></p>\r
+\r
+<h2 id="target" name="target">Testing with a Target Device</h2>\r
+<p>You can test your application by running and debugging it on a real target device:</p>\r
+<ul>\r
+<li>Connect your device to the host system by using a USB connector. The device icon (<img alt="Device icon" src="../images/device_icon.png"/>) is displayed in the <strong>Connection Explorer</strong> view.</li>\r
+<li>Select the device in the <strong>Connection Explorer</strong> view. It is ready to be run and used to test your project.</li></ul> \r
+\r
+<h2 id="emulator" name="emulator">Testing with the Emulator</h2>\r
+<p>You can test your application by running and debugging it on the Emulator.</p>\r
+<p>To start the Emulator, click the Emulator Manager icon on the toolbar, select the Emulator in the Emulator Manager, and click <strong>Launch</strong>.</p>\r
+\r
+<p>The Emulator icon (<img alt="Emulator icon" src="../images/emulator_icon.png"/>) is displayed in the <strong>Connection Explorer</strong> view, and the Emulator is ready for testing the application.</p>\r
+\r
+\r
+<h2 id="transfer" name="transfer">Transferring Files with Connected Devices</h2>\r
+\r
+<p>You can transfer files between the connected devices and the host system:</p>\r
+<ul>\r
+<li>To transfer a file from a connected device to the host file system, pull the selected file to the desired host system path.\r
+</li> \r
+<li>To transfer a file from the host file system to a connected device, push the selected file to the desired connected device path.\r
+</li></ul>\r
+\r
+<h2 id="preference" name="preference">Setting Preferences</h2>\r
+<p>You can set the following Connection Explorer preferences:</p>\r
+<ul>\r
+<li>Change the Emulator Manager path</li>\r
+<li>Set the file transfer timeout value</li>\r
+</ul>\r
+\r
+<p>To set the Connection Explorer preferences, right-click the project and select <strong>Preferences &gt; Tizen SDK &gt; Tools &gt; Connection Explorer</strong>.</p>\r
+ \r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.devtools/html/common_tools/emulator.htm b/org.tizen.devtools/html/common_tools/emulator.htm
index 15f3b54..90031a1 100644 (file)
--- a/org.tizen.devtools/html/common_tools/emulator.htm
+++ b/org.tizen.devtools/html/common_tools/emulator.htm
@@ -1,1614 +1,1624 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>Emulator</title>      
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#features">Using the Emulator</a></li>             
-                       <li><a href="#manager">Emulator Manager</a></li>
-                       <li><a href="#hw">Using Hardware Virtualization</a></li>
-                       <li><a href="#controls">Emulator Control Keys and Menu</a></li>
-                       <li><a href="#ecp">Emulator Control Panel</a></li>
-                       <li><a href="#support">Supported Features</a></li>
-               </ul>
-       </div></div>
-</div>
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Emulator</h1>
-
-<p>The Tizen SDK includes a virtual device Emulator. The Emulator provides the full stacks of the Tizen platform so that you can test Tizen applications before deploying them         to the real target device. The Emulator is based on the open source QEMU project and comprises virtual CPU, memory, and various peripherals. Currently, the Tizen SDK only supports the x86 machine architecture for guest. You can use the <a href="#manager">Emulator Manager</a> to create and launch a Virtual Machine instance. You can communicate with the Emulator instance using the <a href="smart_dev_bridge.htm">Smart Development Bridge (SDB)</a>.</p>
-
-<p>The main features of the Emulator are:</p>
-<ul>
-<li>Providing full system emulation, including CPU, memory, and peripheral devices</li>
-<li>Simulating events with the <a href="#ecp">Emulator Control Panel</a></li>
-<li>Accelerating guest operations using host CPU or GPU</li>
-</ul>
-
-<p>For more information see <a href="#support">Supported Features</a>.</p>
-
-<h2 id="features" name="features">Using the Emulator</h2>
-
-<p>To run applications on the Emulator:</p>
-
-<ol>
-<li>Start the Emulator through the <a href="#manager">Emulator Manager</a>.
-<p>You can launch the Emulator from both the Emulator Manager and the command line. If you are using the command line, you can modify the <a href="emulator_features.htm#startup">start-up options</a>.</p></li>
-<li>While running the Emulator, you can use <a href="#controls">the control keys and context menu</a> or the <a href="#ecp">Emulator Control Panel</a> to control the Emulator. You can use <a href="emulator_features.htm">extended features</a> while running applications, such as a shared directory, multi-point touch, and a Webcam.</li>
-</ol>
-
-<h2 id="manager" name="manager">Emulator Manager</h2>
-
-<p>To start the Emulator quickly:</p>
-<ol>
-<li>Start the Emulator Manager
-<ul>
-       <li> By using the Desktop or Start menu:
-       <br>
-       <table border=1>
-               <tbody>
-                       <tr>
-                       <th style="text-align:center;margin-left:auto;margin-right:auto;">Linux</th>
-                       <th style="text-align:center;margin-left:auto;margin-right:auto;">Windows</th>
-                       <th style="text-align:center;margin-left:auto;margin-right:auto;">MacOS</th>
-                       </tr>
-                       <tr>
-                       <td><strong>Desktop &gt; Applications &gt; Emulator Manager</strong></td>
-                       <td><strong>Start &gt; All Programs &gt; Tizen SDK &gt; Emulator Manager</strong></td>
-                       <td><strong>Finder &gt; Applications &gt; Tizen SDK &gt; Emulator Manager</strong></td>
-                       </tr>
-                       <tr>
-                       <td><img alt="linux shortcut" src="../images/emulator_manager_linux_shortcut.png"/></td>
-                       <td> <img alt="windows shortcut" src="../images/emulator_manager_win_shortcut.png"/></td>
-                       <td> <img alt="macos shortcut" src="../images/emulator_manager_mac_shortcut.png"/></td>
-                       </tr>
-               </tbody>
-       </table>
-       </li>
-       <li> By using the Tizen IDE: <strong>Connection Explorer &gt; Emulator Manager Icon</strong>
-               <br><br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
-               <img alt="Launch" src="../images/emulator_manager_ide.png"/>
-       </li>
-</ul>
-</li>
-<li>Select your preferred profile tab, such as mobile or wearable.</li>
-<li>Select <strong>Create New</strong> and click <strong>Confirm</strong>.</li>
-<li>Click the <strong>Launch</strong> button ( <img alt="Launch" src="../images/launch.png" /> ) or press the ENTER keyboard key.</li>
-<li> To stop the Emulator, right-click the Emulator and select <strong>Close</strong>.</li>
-</ol>
-
-
-<p class="figure">Figure: Emulator Manager</p>
-<p align="center"><img alt="Emulator Manager" src="../images/emulator_manager.png" /></p>
-
-<table class="note">
-<tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">To run the application faster, switch on <strong>CPU VT</strong> and <strong>GPU</strong>. If <strong>CPU VT</strong> is disabled, check the <a href="#hw">Using Hardware Virtualization</a> section for more information. If <strong>GPU</strong> is disabled, <a href="https://developer.tizen.org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk" target="_blank">install the latest vendor-provided graphic driver</a>.</td>
-        </tr>
-      </tbody>
-    </table>
-
-<p>You can also create a new virtual machine (VM) with the <a href="#manager-cli">Emulator Manager CLI</a>.</p>
-
-<p>The created VM is added under the current tab. The name of tab, <span style="font-family: Courier New,Courier,monospace">&lt;Profile&gt;</span>, refers to the image profile. You can create a VM by using a custom image in <strong>Base Image</strong> of the detail view. The background color of a custom VM is blue.</p>
- 
-<p>You can also export a base image of the VM and manipulate the VM:</p>
-<ul>
-<li>To create a VM, select <strong>Create New</strong> and click <strong>Confirm</strong>.</li>
-<li>To create a base image of a VM, select the VM and <strong>Export as</strong>, and enter a name and location for the base image.</li>
-<li>To modify a VM, click the <strong>Modify</strong> icon ( <img alt="Modify icon" src="../images/mod_icon.png" /> ), make the appropriate changes, and click <strong>Confirm</strong>.</li>
-<li>To delete a VM, click <strong>Delete</strong> or press the DELETE keyboard key (<strong>fn + Delete</strong> in Mac OS&reg; X).</li>
-<li>To launch a VM, click the <strong>Launch</strong> button ( <img alt="Launch" src="../images/launch.png" /> ) or press the ENTER keyboard key.</li>
-</ul>
-
-
-<h3 id="vm" name="vm">Virtual Machine</h3>
-<p>A virtual machine (VM) is a set of hardware options including the file system image. The Emulator Manager controls the virtual machines. When you launch the Emulator, you can specify the VM that you want to customize. Each VM has its own Emulator file system image. In other words, different VMs have different states of Emulators.</p>
-<table class="note">
-
-      <tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">If you update the <span style="font-family: Courier New,Courier,monospace">EMULATOR_IMAGE</span> package on Tizen SDK Install Manager, existing VMs are not launched properly as the Base Image file is modified. To use the existing VMs after updating, the Emulator Manager provides the &#39;creating a base image&#39; feature through the <strong>Export as</strong> button. With this functionality, you can keep the existing VMs in the new Base Image.</td>
-        </tr>
-      </tbody>
-    </table>
-
-<p>You can set the following VM details:</p>
-<ul>
-<li>Name
-<p>The following rules apply for naming a VM:</p>
-<ul>
-<li>The length of the name must be at most 20 characters.</li>
-<li>Different VMs must not have the same name.</li>
-<li>Only the following characters are accepted: -, _, 0-9, a - z, and A - Z</li>
-</ul></li>
-
-<li>Base Image
-<p>You can use the default base image. You can also change the base image and choose another image when you create a VM by clicking <strong>Create New</strong> under the &quot;mobile-custom/wearable-custom&quot; tab folder. This new VM is added under the &quot;each custom&quot; group. The correct image file extension of the custom base image is <span style="font-family: Courier New,Courier,monospace">.x86</span>.</p></li>
-
-<li>Display Resolution
-<p>Note that the following resolution has its own default display density.</p>
-<ul>
-  <li>Mobile
-  <ul>
-    <li>480 x 800 (WVGA)</li>
-       <li>540 x 960 (qHD)</li>
-    <li>720 x 1280 (HD)</li>
-  </ul></li>
-  <li>Wearable
-  <ul>
-    <li>320 x 320</li>
-       <li>360 x 360</li>
-    <li>360 x 480</li>
-  </ul></li> 
-</ul>
-</li>
-
-<li>Display Density
-<p>DPI (Dots Per Inch) value of the Emulator. The DPI depends on the display resolution.</p>
-<ul>
-  <li>Mobile
-  <ul>
-    <li>233 (480 x 800)</li>
-       <li>220 (540 x 960)</li>
-    <li>306 (720 x 1280)</li>
-  </ul></li>
-  <li>Wearable
-  <ul>
-    <li>316 (320 x 320)</li>
-    <li>302 (360 x 360)</li>
-       <li>300 (360 x 480)</li>
-  </ul></li>
-</ul>
-</li>
-
-<li>Skin
-<p>The VM UI style. Select 1 or more of the available skins. The skin depends on the display resolution.</p></li>
-
-<li>Processors
-<p>The number of CPUs.</p></li>
-
-
-<li>RAM Size
-<p>The RAM size.</p>
-
-<table class="note">
-
-      <tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">In Windows&reg;, only the 512 MB size is available.</td>
-        </tr>
-      </tbody>
-    </table>
-       
-<ul>
-<li>512 MB</li>
-<li>768 MB</li>
-<li>1024 MB</li>
-</ul></li>
-
-<li>File Sharing
-<p>You can share a directory between the host PC and the Emulator. If you want to use this feature, set the value to <strong>ON</strong> and define the input directory to share in the <strong>directory</strong> field. For more information, see <a href="emulator_features.htm#file">Sharing a Directory</a>.</p></li>
-
-<li>CPU VT
-<p>The Emulator supports hardware virtualization. It is kvm on Ubuntu and HAX on Windows&reg;. If the host CPU supports hardware virtualization and a hardware virtualization module is installed, you can change this value. For more information, see <a href="#hw">Using Hardware Virtualization</a>.</p></li>
-
-<li>GPU
-<p>The Emulator supports hardware OpenGL&reg; acceleration. If the host graphic card driver supports hardware acceleration and you select <strong>ON</strong>, the feature operates properly. Otherwise, do not try to make the Emulator support hardware acceleration. If the GPU option is enabled, the rendering performance of the video player or camera can degrade.</p>
-</li>
-
-<li>Advanced Option
-<p>You can attach and detach devices.</p>
-<ul>
-  <li>Mobile
-  <ul>
-    <li>Sensor: accelerometer, gyroscope, geo-magnetic, proximity, light, haptic, pressure, ultraviolet, heartbeat rate meter</li>
-    <li>Device: camera, battery</li>
-    <li>Jack: ear jack, charger, USB</li>
-  </ul></li>
-  <li>Wearable
-  <ul>
-    <li>Sensor: accelerometer, gyroscope, geomagnetic, proximity, light, haptic, pressure, ultraviolet, heartbeat rate meter</li>
-    <li>Device: camera, battery</li>
-    <li>Jack: charger, USB</li>
-  </ul></li>
-</ul>
-</li>
-
-</ul>
-
-<h3 id="manager-cli" name="manager-cli">Emulator Manager CLI</h3>
-
-<p>You can create, modify, delete, and list your VMs through the command line interface commands. The CLI binary is located in:</p>
-       <ul>
-               <li>In Linux:
-               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/bin/em-cli</span></p></li>
-               <li>In Windows&reg;:
-               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;\tools\emulator\bin\em-cli.bat</span></p></li>
-       </ul>
-
-<p>For more information, see the CLI help messages.</p>
-
-<p class="figure">Figure: Emulator Manager command line</p> 
-<p align="center"><img alt="Emulator Manager command line" src="../images/emulator_cli.png" /></p> 
-
-
-<h2 id="hw" name="hw">Using Hardware Virtualization</h2>
-
-<p>To run the application faster, the Tizen x86 Emulator exploits <a href="http://www.linux-kvm.org/page/Main_Page" target="_blank">KVM</a> (Kernel-based Virtual Machine in Linux) or <a href="https://developer.tizen.org/sdk/haxm" target="_blank">HAX</a> (Hardware Accelerated eXecution in Windows&reg; and Mac OS&reg; X) with HW virtualization support.</p> 
-<p>If the <strong>CPU VT</strong> is disabled in the <strong>Detail</strong> view on the Emulator Manager, check the following prerequisites and install KVM or HAX.</p>
-
-
-<h3 id="prerequisite" name="prerequisite">Prerequisites</h3>
-
-<p>To use HW virtualization, you need:</p>
-
-<ul>
-<li>In Linux:
-<p>To use KVM, you need a processor that supports HW virtualization. Both Intel and AMD have developed those extensions for their processors (Intel VT-x/AMD-V). Check whether the CPU supports HW virtualization with the following command:</p> 
-<pre class="prettyprint">
-$egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>
-
-<p>If the output of the command is <span style="font-family: Courier New,Courier,monospace">0</span>, the CPU does not support HW virtualization. Otherwise, it does. </p>
-<p>The HW virtualization feature can also be disabled on the BIOS setting; check the setting and enable it if you need the feature.</p></li>
-
-<li>In Windows&reg;:
-<p>To use HAX, you need Intel VT-x-supported CPU, and you must enable the NX-related setting in the PC BIOS.</p> </li>
-
-<li>In Mac OS&reg; X:
-<p>To use HAX, install EFI-related updates on your Intel-based Mac system. For more information, see <a href="http://support.apple.com/kb/HT1237" target="_blank">EFI and SMC firmware updates for Intel-based Macs</a>.</p> </li>
-</ul>
-
-
-<h3 id="install" name="install">Installing KVM or HAX</h3>
-
-<p>To install KVM or HAX:</p>
-
-<ul>
-<li>In Linux:
-<p>No installation is required for KVM.</p> 
-</li>
-<li>In Windows&reg; and Mac OS&reg; X:
-<p>The HAXM driver is installed during the Tizen SDK installation. See the installation manual on the <a href="https://developer.tizen.org/sdk/haxm" target="_blank">Tizen developer site</a>.</p>
-<table class="note">
-
-      <tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">
-                 <p>If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP) -related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/ff542275%28v=vs.85%29.aspx" target="_blank">MSDN</a>).</p>
-</td>
-        </tr>
-      </tbody>
-    </table></li></ul>
-       
-<p>No configuration is required for KVM or HAX.</p>
-
-
-<h3 id="run" name="run">Running the Emulator</h3>
-<p>To run the Emulator with HW virtualization support in the Emulator Manager, set the <strong>CPU VT</strong> field to <strong>ON</strong>. The field is disabled if your system cannot support HW virtualization.</p>
-<p>You can also run the Emulator with HW virtualization support from the command line, by including the <span style="font-family: Courier New,Courier,monospace">-enable-kvm</span> (in Linux) or <span style="font-family: Courier New,Courier,monospace">-enable-hax</span> (in Windows&reg; and Mac OS&reg; X) option in the start-up command.</p>
-
-
-<h2 id="controls" name="controls">Emulator Control Keys and Menu</h2>
-
-<p>The Tizen Emulator provides a variety of control keys and menus.</p>
-
-<h3 id="phone" name="phone">Profile-specific Skin</h3>
-<p>The profile-specific skin has a real device-shaped image frame, and its hardware keys are on the main window skin. You can <a href="emulator_features.htm#skin">configure the profile-specific skin</a>.</p>
-
-
-<p class="figure">Figure: Profile-specific skin Emulator</p>
-
-<p align="center"><img alt="Profile-specific skin Emulator Mobile" src="../images/emulator_profile_mobile.png" /> <img alt="Profile-specific skin Emulator Wearable O" src="../images/emulator_profile_wearable_o.png" /> <img alt="Profile-specific skin Emulator Wearable" src="../images/emulator_profile_wearable.png" /></p>
-
-<h3 id="general" name="general">General Purpose Skin</h3>
-<p>The image of the general purpose skin is generated by nine-patch image processing. The Emulator skin frame has the same appearance on every state of resolution, scale, or rotation. Unlike the <a href="#phone">profile-specific skin</a>, the layout of the general purpose skin is not configurable.</p>
-
-<ul>
-<li>Key window
-<p>The key window displays an independent hardware key input window, which can be moved to any position on the screen or docked to the left or right side of the main window. If the key window is docked with the main window, both windows can be moved together on the screen.</p>
-</li>
-<li>Pair tag
-<p>The pair tag indicates that the Emulator main window and key window are in a pair. This tag is activated when the key window is open. The pair tag color changes every time the Emulator boot occurs.</p>
-</li>
-</ul>
-
-<p>The following figure illustrates the general purpose skin Emulator.</p>
-
-<p class="figure">Figure: General purpose skin Emulator</p>
-<p align="center"><img alt="General purpose skin Emulator Mobile" src="../images/emulator_general_mobile.png" /> <img alt="General purpose skin Emulator Wearable" src="../images/emulator_general_wearable.png" /></p>
-
-
-
-<h3 id="controlkeys" name="controlkeys">Control Keys</h3>
-<p>The following keys are available on the Emulator:</p>
-<ul>
-       <li><strong>Menu</strong> (mobile only)
-               <p>When you tap, it opens a list of options available for the current screen.</p>
-               </li>
-  <li><strong>Home</strong> (mobile only)
-       <p>If you long press the <strong>Home</strong> key, the Task switcher application appears as in a real device.</p>
-       </li>   
-  <li><strong>Back</strong> (mobile only)
-       <p>When you tap, it returns to the previous screen.</p>
-       </li>   
-  <li><strong>Power</strong>
-       <p>You can power off the display by clicking the <strong>Power</strong> key in most general situations. 
-               Sometimes, the display does not power off though you click the <strong>Power</strong> key. 
-               This is to guarantee the operation of a current application, such as the Stopwatch in the Clock App. 
-               If you click <strong>Power</strong> or <strong>Home</strong> key again, the display is powered on.</p>
-       </li>
-  <li><strong>Volume Up</strong> and <strong>Volume Down</strong> (mobile only)
-       <p>You can control the volume with the <strong>Volume Up</strong> and <strong>Volume Down</strong> keys.</p>
-       </li>
-</ul>
-
-
-
-<h3 id="menu" name="menu">Context Menu</h3>
-<p>You can access the context menu by right-clicking on the Emulator. In the menu, you can select:</p>
-
-<ul>
-<li>Emulator name (the top row in the menu)
-<p>Display the <strong>Detailed Info</strong> window, showing the <strong>Shortcut Info</strong> and <strong>VM Info</strong> tabs. The <strong>Shortcut Info</strong> tab lists the <a href="keyboard_shortcuts.htm#emulator">Emulator keyboard shortcuts</a> and the <strong>VM Info</strong> tab defines the virtual machine details.</p>
-<table border="1">
-       <caption>Table: VM Info tab</caption>
-               <tbody>
-                       <tr>
-                               <th style="text-align:center;margin-left:auto;margin-right:auto;">Feature</th>
-                               <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>       
-                       </tr>
-                       
-                       <tr>
-                         <td>VM Name</td>
-                         <td>VM name</td>
-                       </tr>
-
-                       <tr>
-                         <td>Skin Name</td>
-                         <td>Skin name</td>
-                       </tr>
-                                               
-                       <tr>
-                         <td>CPU</td>
-                         <td>CPU architecture</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>RAM Size</td>
-                         <td>RAM size (MB)</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>Display Resolution</td>
-                         <td>Target display resolution</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>Display Density</td>
-                         <td>DPI (Dots Per Inch)</td>
-                       </tr>
-                       
-                                       
-                       <tr>
-                         <td>Directory Sharing</td>
-                         <td>Whether host directory sharing is used</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>File Shared Path</td>
-                         <td>Path to the shared host directory</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>CPU Virtualization</td>
-                         <td>Whether hardware virtualization is supported</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>GPU Virtualization</td>
-                         <td>Whether GPU virtualization is supported</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>Image Path 1</td>
-                         <td>Target image path</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>Image Path 2</td>
-                         <td>Swap image path</td>
-                       </tr>
-                       
-                       <tr>
-                         <td>Log Path</td>
-                         <td>Emulator log file path</td>
-                       </tr>
-               </tbody>
-</table>
-</li>
-
-<li><strong>Always On Top</strong>
-<p>Select this option to keep the Emulator window on top of other windows.</p>
-
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-               <tr>
-                       <td class="note">The <strong>Always On Top</strong> feature is not supported in Mac OS&reg; X.</td>
-               </tr>
-  </tbody>
-</table>
-</li>
-<li><strong>Rotate</strong>
-<p>Select either <strong>Portrait</strong>, <strong>Landscape</strong>, <strong>Reverse Portrait</strong>, or <strong>Reverse Landscape</strong> as the orientation of the Emulator.</p></li>
-
-<li><strong>Scale</strong> (mobile only)
-<p>Scale the size of the Emulator between 1x, 1/2x (default), 3/4x, and 1/4x.</p></li>
-
-<li><strong>Advanced &gt; Controller</strong>
-<p>Show or hide the controller window.</p>
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-               <tr>
-                       <td class="note">The <strong>Controller</strong> menu is not supported in the profile-specific skin.</td>
-               </tr>
-  </tbody>
-</table></li>
-<li><strong>Advanced &gt; Screenshot</strong>
-<p>Capture a screenshot of the Emulator.</p></li>
-
-<li><strong>Advanced &gt; About</strong>
-<p>Display the Emulator version, build time, and git version.</p></li>
-
-<li><strong>Advanced &gt; Force Close</strong>
-<p>Force the Emulator to exit. Since force stopping the Emulator can cause problems, use the <strong>Close</strong> option to exit the Emulator. Use <strong>Force Close</strong> only when absolutely necessary.</p></li>
-
-<li><strong>Shell</strong>
-<p>Open a Smart Development Bridge (SDB) shell command window.</p></li>
-
-<li><strong>Control Panel</strong>
-<p>Help to control or monitor the state of the Emulator dynamically. </p></li>
-
-<li><strong>Close</strong>
-<p>Exit the Emulator.</p></li>
-
-</ul>
-
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-               <tr>
-                       <td class="note">In Ubuntu, you need to change a global GNOME setting to view the menu icons:
-                       <ol>
-                       <li>In the command console, execute the <span style="font-family: Courier New,Courier,monospace">gconf-editor</span> command.</li>
-                       <li>In the tree, navigate to <strong>desktop &gt; gnome &gt; interface</strong>.</li>
-                       <li>Enable the <strong>menus_have_icons</strong> option.</li>
-                       </ol>
-               </td>
-               </tr>
-  </tbody>
-</table>
-
-
-<h2 id="ecp" name="ecp">Emulator Control Panel</h2>
-
-<p>You can execute the Emulator Control Panel (ECP) by selecting <strong>Control Panel</strong> on the <a href="#menu">Context Menu</a> after the Emulator is successfully launched. You can control and monitor the state of the Emulator dynamically.</p> 
-<p>The main features of ECP:</p> 
-<ul>
-
-    <li>Device Manager
-       <p>The following table lists the Device Manager features and their availability on different profiles.</p>
-
-            <table border="1">
-                <caption>Table: Device Manager features</caption>
-         <tbody>
-
-          <tr>
-                       <th>Feature</th>
-                       <th>Mobile</th>       
-                       <th>Wearable</th>
-                               <th>Description</th>
-          </tr>
-  
-          <tr>
-                       <td>Device Tree</td>
-                       <td>Yes</td>
-                       <td>No</td>
-                       <td>The Device Tree is a data structure for describing hardware. 
-                               You can see the device information that actually loaded in the main system bus. 
-                               It shows a simple tree structure of nodes and properties. Nodes are generally a device or another bus. 
-                               Properties are key-value pairs where the value can either be empty or contain an arbitrary byte stream.</td>
-                     </tr>
-               
-                     <tr>
-                       <td>Network</td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can view a network device list and control the user network. 
-                               To forward a remote or local port to an inside port of the Emulator, click <strong>Add port–forwarding</strong>, 
-                               enter values in text boxes, and click <strong>Apply port–forwarding</strong>.</td>
-                     </tr>
-                         
-                         <tr>
-                       <td>Host Directory Sharing</td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>The specified host directory is mounted to <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> to share resources. Therefore, the file transfer is possible through the host directory sharing feature without using the sdb utility.</td>
-                     </tr>
-               
-          </tbody>  
-        </table>  </li>
-    
-    <li>App Manager
-       <p>The following table lists the App Manager features and their availability on different profiles.</p>
-       
-            <table border="1">
-                <caption>Table: App Manager features</caption>
-         <tbody>
-
-          <tr>
-                       <th>Feature</th>
-                       <th>Mobile</th>       
-                       <th>Wearable</th>
-                               <th>Description</th>
-          </tr>
-  
-          <tr>
-                       <td>Uninstaller</td>
-                       <td>No</td>
-                       <td>Yes</td>
-                       <td>You can see user-installed applications and uninstall them.</td>
-                     </tr>             
-                     
-          </tbody>  
-        </table>  
-</li>
-  
-  
-       <li>Event Injector
-       <p>The following table lists the Event Injector features and their availability on different profiles.</p>
-       
-                    <table border="1">
-                        <caption>Table: Event Injector features</caption>
-         <tbody>
-
-          <tr>
-                       <th colspan = "2">Feature</th>
-                       <th>Mobile</th>       
-                       <th>Wearable</th>
-                               <th>Description</th>
-          </tr>
-  
-          <tr>
-                       <td colspan = "2"><a href="event_injec.htm#device">Battery</a></td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can set the battery level using the Level slider. 
-                               To set the charger status to connected or disconnected, select the appropriate Charger radio button.</td>
-                     </tr>
-                     
-                     <tr>
-                       <td colspan = "2"><a href="event_injec.htm#device">RSSI</a></td>
-                       <td>Yes</td>
-                       <td>No</td>
-                       <td>You can set the remote signal strength using the level bar.</td>
-                     </tr>             
-                     
-                     <tr>
-                       <td rowspan = "6"><a href="event_injec.htm#sensor">Sensor</a></td>      
-                       <td>3-Axis Sensor</td>                          
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can inject user acceleration, magnetic, and gyroscope values using slider bars or text input.</td>              
-                     </tr>                                    
-                     
-                     <tr>
-                       <td>Light</td>                          
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can inject a lux value into light sensor. 
-                               If you set brightness as auto, then display will be changed by injecting light value.</td>                               
-               </tr>
-
-               <tr>
-                        <td>Proximity</td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can inject the presence of nearby objects.</td> 
-               </tr>
-               
-               <tr>
-                        <td>Pressure</td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can inject a hPa value into the pressure sensor.</td>   
-               </tr>
-               
-               <tr>
-                        <td>Ultraviolet</td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can inject an ultraviolet index.</td>   
-               </tr>
-               <tr>
-                        <td>Heart Rate Monitor</td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can inject the heart rate and peek-to-peek time in milliseconds.</td>   
-               </tr>                   
-
-          <tr>
-                       <td colspan = "2"><a href="event_injec.htm#device">Ear Jack</a></td>
-                       <td>Yes</td>
-                       <td>No</td>
-                       <td> You can inject adding or removing headset.</td>
-                     </tr>
-                     
-                     <tr>
-                       <td colspan = "2">Gesture</td>
-                       <td>No</td>
-                       <td>Yes</td>
-                       <td>You can inject flick up (menu button) or flick down (back button) events in the wearable profile.</td>
-                     </tr>
-                     
-                     <tr>
-                       <td colspan = "2"><a href="event_injec.htm#device">USB</a></td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can add or remove a USB device by setting the USB device setting to the connected or disconnected state.</td>
-                     </tr>
-                     
-                     <tr>
-                       <td colspan = "2"><a href="event_injec.htm#device">SD Card</a></td>
-                       <td>Yes</td>
-                       <td>No</td>
-                       <td>You can inject a 4, 8, 16, or 32G SD card.</td>
-                     </tr>
-                     
-                     <tr>
-                       <td colspan = "2"><a href="event_injec.htm#location">Location</a></td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can inject a latitude and longitude values using a map, manually, or from a log file.</td>
-                     </tr>
-                     
-                     <tr>
-                       <td colspan = "2"><a href="event_injec.htm#telephony">Telephony</a></td>
-                       <td>Yes</td>
-                       <td>Yes</td>
-                       <td>You can make and receive a call through the <strong>Call</strong> tab. You can also send and receive SMS messages through the <strong>SMS</strong> tab.</td>
-                     </tr>
-                     <tr>
-                <td colspan = "2"><a href="event_injec.htm#memory">Memory</a></td>
-                               <td>Yes</td>
-                               <td>Yes</td>
-                               <td>You can set the low memory status using the radio buttons.</td>
-                         </tr>
-          </tbody>  
-        </table> 
-</li>
-</ul>
-
- <p>Various <a href="keyboard_shortcuts.htm#ecp">keyboard shortcuts</a> are available to execute ECP tasks.</p>
-
- 
-<h3 name="ecp-cli">Emulator Control Panel CLI</h3>
-
-<p>You can control and monitor the Tizen Emulator by using ECP CLI instead of the ECP UI tool. The ECP CLI supports all the functionalities of the ECP UI. The CLI binary is located at:</p>
-       <ul>
-               <li>In Linux:
-               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/bin/ecp-cli</span></p></li>
-               <li>In Windows&reg;:
-               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;\tools\emulator\bin\ecp-cli.bat</span></p></li>
-       </ul>
-
-<p>You can use the CLI in a session mode or shell mode:</p>
-<ul><li>Session mode
-<p>You can access this mode by running the binary without any parameters. The mode keeps a session until it is exited. You can exit by entering the <span style="font-family: Courier New,Courier,monospace">exit</span> command.</p></li>
-<li>Shell mode
-<p>This mode is used for one-time message handling.</p></li></ul>
-<p class="figure">Figure: Session and shell modes</p> 
-<p align="center"><img alt="Session and shell modes" src="../images/ecp_cli_modes.png" /></p>
-
-<p>In Linux, the bash-based auto-completion is used with the TAB button.</p>
-
-<p>The following tables list the supported commands of the ECP CLI.</p>
-
-<table>
-<caption>Table: CLI common commands</caption>
-<tbody>
-<tr>
- <th>Command</th>
- <th>Syntax</th>
- <th>Description</th>
-</tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">help</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">help [device]</span></td>
- <td>To get help, type the command as <span style="font-family: Courier New,Courier,monospace">help</span>. For more a specific device help, use the device parameter.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">keycode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">keycode &lt;key-code&gt; [period|press|release]</span></td>
- <td>To enter a key code for a mobile device:
- <ul><li>114: volume down</li>
-<li>115: volume up</li>
-<li>139: HOME</li>
-<li>158: BACK</li>
-<li>169: MENU</li></ul></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hmp</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">hmp &lt;hmp command&gt;</span></td>
- <td>Access the QEMU human monitor protocol commands. For a list of provided commands, enter the <span style="font-family: Courier New,Courier,monospace">ecp-cli hmp help</span> command.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">qmp</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">qmp &lt;qmp command&gt;</span></td>
- <td>Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require <span style="font-family: Courier New,Courier,monospace">{ &quot;execute&quot;: &quot;qmp_capabilities&quot; }</span> to be in the control mode.
- <p>In the shell mode, the shell does not support the double quotation mark (&quot;) as an argument. For the JSON arguments, use  \&quot; (back space + double quotation mark) instead.</p></td>
- </tr>
- <tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">hds</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">hds mount &lt;host path&gt; &lt;guest path&gt;</span></td>
- <td>Enable the host directory sharing feature between the specified &lt;host path&gt; and the Emulator&#39;s &lt;guest path&gt;. The specified path must be a folder, not a file.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hds unmount &lt;id&gt;</span></td>
- <td>Unmount the mounted host directory sharing path. The <span style="font-family: Courier New,Courier,monospace">id</span> is the HDS ID and you can get it from the <span style="font-family: Courier New,Courier,monospace">hds status</span> command.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hds status</span></td>
- <td>Show the current host directory sharing status.</td>
- </tr>
- </tbody></table> 
-
-<table>
-<caption>Table: CLI profile commands</caption>
-<tbody>
-<tr>
- <th>Device</th>
- <th>Command</th>
- <th>Mobile</th>
- <th>Wearable</th>
- <th>Syntax</th> 
-</tr>
-
- <tr>
- <td rowspan="5">call</td> 
- <td><span style="font-family: Courier New,Courier,monospace">dial</span></td>
- <td rowspan="5">Yes</td>
- <td rowspan="5">No</td> 
- <td><span style="font-family: Courier New,Courier,monospace">call dial &lt;number&gt;</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hidden-dial</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">call hidden-dial &lt;number&gt;</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">connect</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">call connect</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">disconnect</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">call disconnect &lt;call id&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">call status</span></td>
- </tr>                         
- <tr>
- <td rowspan="4">sms</td> 
- <td><span style="font-family: Courier New,Courier,monospace">send</span></td>
- <td rowspan="4">Yes</td>
- <td rowspan="4">No</td> 
- <td><span style="font-family: Courier New,Courier,monospace">sms send &lt;number&gt; &lt;text&gt;</span></td>
- </tr>
- <tr>
-<td><span style="font-family: Courier New,Courier,monospace">set status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sms set &lt;available | unavailable&gt;</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sms status</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">mms_status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sms mms_status</span></td>
- </tr> 
- <tr>
- <td rowspan="4">location</td> 
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
- <td rowspan="4">Yes</td>
- <td rowspan="4">Yes</td> 
- <td><span style="font-family: Courier New,Courier,monospace">location set &lt;longitude> &lt;latitude&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">location status</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">stop</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">location stop</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">location file &lt;file-path&gt;</span></td>
- </tr>
- <tr>
- <td rowspan="3">battery</td> 
- <td><span style="font-family: Courier New,Courier,monospace">level</span></td>
- <td rowspan="3">Yes</td>
- <td rowspan="3">Yes</td> 
- <td><span style="font-family: Courier New,Courier,monospace">battery level &lt;percent&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">charger</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">battery charger &lt;on | off&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">battery status</span></td>
- </tr>
- <tr>
- <td rowspan="2">earjack</td> 
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
- <td rowspan="2">Yes</td>
- <td rowspan="2">No</td> 
- <td><span style="font-family: Courier New,Courier,monospace">earjack set &lt;3wire | 4wire | off&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">earjack status</span></td>
- </tr>
- <tr>
- <td rowspan="2">usb</td> 
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
- <td rowspan="2">Yes</td>
- <td rowspan="2">Yes</td> 
- <td><span style="font-family: Courier New,Courier,monospace">usb set &lt;on | off&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">usb status</span></td>
- </tr>
- <tr>
- <td rowspan="2">rssi</td> 
- <td><span style="font-family: Courier New,Courier,monospace">set</span></td>
- <td rowspan="2">Yes</td>
- <td rowspan="2">No</td> 
- <td><span style="font-family: Courier New,Courier,monospace">rssi set &lt;0~4&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">rssi status</span></td>
- </tr>
- <tr>
- <td rowspan="3">SD card</td> 
- <td><span style="font-family: Courier New,Courier,monospace">attach</span></td>
- <td rowspan="3">Yes</td>
- <td rowspan="3">No</td>
- <td><span style="font-family: Courier New,Courier,monospace">sdcard attach &lt;sdcard_[ 4 | 8 | 16 | 32 ]G&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">detach</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sdcard detach &lt;sdcard_[ 4 | 8 | 16 | 32 ]G&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sdcard status</span></td>
- </tr>
- <tr>
- <td rowspan="10">sensor</td> 
- <td><span style="font-family: Courier New,Courier,monospace">accelerometer</span></td>
- <td rowspan="10">Yes</td>
- <td rowspan="10">Yes</td> 
- <td><span style="font-family: Courier New,Courier,monospace">sensor accelerometer &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
- </tr> 
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">gyroscope</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor gyroscope &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">magnetic</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor magnetic &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">proximity</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor proximity &lt;value&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">light</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor light &lt;value&gt;</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pressure</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor pressure &lt;level&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">uv</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor uv &lt;level&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hrm</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor hrm &lt;level&gt;</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">status</span></td>
-<td><span style="font-family: Courier New,Courier,monospace">sensor status [sensor]</span></td>
- </tr>
-  <tr>
- <td><span style="font-family: Courier New,Courier,monospace">file</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor file &lt;sensor&gt; &lt;path&gt;</span></td>
- </tr>
- </tbody></table>
-
-
-<h2 id="support" name="support">Supported Features </h2>
-
-<p>The Emulator provides various virtual H/W, media formats, codecs and <a href="#opengl">OpenGL&reg; ES acceleration</a>. For better performance of the OpenGL&reg; ES support, the Tizen Emulator exploits the latest feature of the graphic driver, so always <a href="https://developer.tizen.org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk" target="_blank">install the latest vendor-provided graphic driver</a>. The Emulator, however, has some limitations and <a href="#target">differences compared to physical target devices</a>.</p>
-
-<p>The following table lists the basic features supported in the Emulator.</p>
-<table style="width: 100%" border="1">
-  <caption>Table: Supported Emulator features</caption>
-  <tbody>
-  <tr>
-  <th>Feature</th>             
-  <th>Detail</th>      
-  <th>Status</th>
-  <th>Notes</th>
-  </tr>
-       
-<tr>
-<td>Skin</td>
-<td><p>Skins are fitted to the screen resolution:</p> 
-<ul>
-<li>Mobile
-       <ul><li>WVGA (480 x 800, default)</li>
-                <li>qHD (540 x 960)</li>
-                <li>HD (720 x 1280)</li>
-               </ul>
-       </li> 
-<li>Wearable
-       <ul><li>320 x 320</li>
-       <li>360 x 360 (default)</li>
-       <li>360 x 480</li>
-               </ul>
-       </li>
-</ul> 
-
-
-<p>4 orientation modes are supported:</p> 
-<ul>
-<li>Portrait (default), landscape, reverse portrait, and reverse landscape</li></ul>
-
-</td>
-<td>Supported</td>
-<td>2 skin layout types are supported:
-<ul>
-       <li>Profile-specific skin</li>
-       <li>General purpose skin</li>
-</ul></td>
-</tr>
-<tr>
-<td>Touch</td>
-<td>Maru touchscreen device</td>
-<td>Supported</td>
-<td>Multi-touch is supported.</td>
-</tr>
-
-
-<tr>
-<td>Key</td>
-<td>HW keys, host keyboard, and SW keypad</td>
-<td>Supported</td>
-<td>The host keyboard is not supported for the Wearable Emulator.</td>
-</tr>
-<tr>
-<td>Rotary</td>
-<td>360 levels of clockwise or counter-clockwise rotation</td>
-<td>Supported</td>
-<td>-</td>
-</tr>
-
-
-<tr>
-<td>Display</td>
-<td>VGA card with 100 levels of brightness control</td>
-<td>Supported</td>
-<td>-</td>
-</tr>
-
-<tr>
-<td>OpenGL&reg; ES</td>
-<td>Compatible with OpenGL&reg; ES 1.1 and 2.0
-<p>OpenGL&reg; ES API pass-through via PCI</p>
-</td>
-<td>Supported
-</td>
-<td>The OpenGL&reg; ES 1.1 functionality is not guaranteed on the Emulator, unless the graphics hardware of your computer supports OpenGL&reg; 1.5.
-<p>The OpenGL&reg; ES 2.0 functionality is not guaranteed on the Emulator, unless the graphics hardware of your computer supports OpenGL&reg; 2.1.</p>
-<p>The host machine must support OpenGL&reg; 1.4.</p></td>
-</tr>
-
-
-<tr>
-<td>Sound</td>
-<td>AC97 device</td>
-<td>Supported</td>
-<td>Audio in: 
-<ul>
-<li>Make sure that the input volume of the microphone is enough to record your voice or songs on the host machine.</li> 
-
-<li>On Windows&reg; 7, inject the microphone into the host machine before starting the Emulator.</li> </ul>
-
-<p>Audio out:</p> 
-<ul>
-<li>On Windows&reg; 7, enable at least 1 audio out device before starting the Emulator. Make sure that the volume icon in the tray is not disabled.</li> 
-<li>While the Emulator is running, do not disable the audio out device, as it can lock the audio system of the guest platform.</li></ul>
-</td>
-</tr>
-
-<tr>
-<td>Network connection</td>
-<td>Virtio</td>
-<td>Supported</td>
-<td>Raw socket protocol, such as ICMP, is not supported.</td>
-</tr>
-
-
-<tr>
-<td>Emulator Control Panel</td>
-<td>The Emulator Control Panel (ECP) supports different features depending on the deice profile:
-<ul>
-       <li>Mobile
-               <ul>
-                       <li>Device Manager: Device Tree, Network, Host Directory Sharing</li>
-                       <li>Event Injector: Battery, RSSI, 3-Axis Sensor, Light, Proximity, Pressure, Ultraviolet, Heart Rate Monitor, Motion, Ear Jack, USB, SDCard, Location, Telephony</li>
-                       </ul>
-               </li>
-       <li>Wearable
-               <ul>
-                       <li>Device Manager: Network, Host Directory Sharing</li>
-                       <li>App Manager: Uninstaller</li>
-                       <li>Event Injector: Battery, 3-Axis Sensor, Light, Proximity, Pedometer, Pressure, Ultraviolet, Heart Rate Monitor, Gesture, USB</li>
-                       </ul>
-               </li>
-       </ul>
-
-</td>
-<td>Supported</td>
-<td>The Emulator Control Panel is a standalone tool, which replaces the Event Injector. It helps to control and monitor the Emulator features, and can be launched from the Emulator context menu.</td>
-</tr>
-
-
-<tr>
-<td>Camera</td>
-<td><p>Virtual camera device connecting a host machine&#39;s Webcam</p> 
-<p>Support: preview, capture, and record</p>
-<p>Image format: YUYV, I420, and YV12</p> 
-<p>Attributes: brightness and contrast </p>  
-<p>Resolution: 160 x 120, 176 x 144, 320 x 240, 352 x 288, and 640 x 480</p>
-<p>Video resolution: 1280 x 720 for the WVGA, 320 x 240 for the WQVGA, and 640 x 480 for the HVGA devices.</p> 
-<p>The supported video codecs are MPEG-4, H.263, H.264, and VC-1 for both encoding and decoding.</p>
-</td>
-<td>Supported</td>
-<td>While recording a video using the Emulator, an audio-video synchronization error can occur depending on your computer hardware and performance.</td>
-</tr>
-
-<tr>
-<td>Bluetooth</td>
-<td>-</td>
-<td>Not supported</td>
-<td>-</td>
-</tr>
-
-<tr>
-<td>Wi-Fi</td>
-<td>-</td>
-<td>Not supported</td>
-<td>-</td>
-</tr>
-<tr>
-<td>Wi-Fi Direct&trade;</td>
-<td>-</td>
-<td>Not supported</td>
-<td>-</td>
-</tr>
-
-</tbody>
-</table>
-
-<h3 id="opengl" name="opengl">OpenGL&reg; ES Acceleration Support</h3>
-
-<p>For the Emulator to support OpenGL&reg; ES acceleration, you need: </p>
-<ul>
-<li>Graphics chipset driver that supports OpenGL&reg; 1.4 installed on the host machine</li>
-<li>All chipset vendors and driver versions available to support the OpenGL&reg; 1.4 standard</li>
-</ul>
-
-<table class="note">
-
-      <tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">Emulator supports only ES 1.1, ES 2.0, and EGL&trade; 1.4 versions.</td>
-
-        </tr>
-      </tbody>
-    </table>
-
-<h3 id="target" name="target">Differences between the Emulator and Target</h3>
-
-<p>The following tables describe the differences between a real target device and the Emulator. For more detailed information, see the differences in:</p>
-<ul>
-<li><a href="#input">Input system</a></li>
-<li><a href="#graphics">Graphics and display</a></li>
-<li><a href="#sensor">Virtual sensor</a></li>
-<li><a href="#telephony">Telephony</a></li>
-<li><a href="#power">Power management</a></li>
-<li><a href="#codec">Supported media formats and codecs</a></li>
-</ul>
-
-<table border="1">
-  <caption>Table: Comparison summary</caption>
-  <tbody>
-    <tr>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Subject</th>       
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>
-    </tr>
-         <tr>
-                 <td rowspan ="5">Development environment</td>
-                 <td>Target</td>
-                 <td>Buy a target device or reference board (by model)</td>
-                 <td>Download the SDK (multi-profile and multi-model support)</td>
-        </tr>
-       
-               <tr>
-                 <td>Network</td>
-                 <td>Need Bluetooth</td>
-                 <td>Only the network environment</td>
-               </tr>
-               
-               <tr>
-                 <td>Target connection</td>
-                 <td>USB</td>
-                 <td>IPC (TCP/UDP)</td>
-               </tr>
-               
-               <tr>
-                 <td>Source and package management</td>
-                 <td>Source and package for target</td>
-                 <td>Source and package for the Emulator</td>
-               </tr>
-               
-               <tr>
-                 <td>Host Directory Sharing</td>
-                 <td>Not supported</td>
-                 <td>Supported</td>
-               </tr>
-        
-        <tr>
-                 <td rowspan ="10">Portability</td>
-                 <td>Screen resolution</td>
-                 <td>Fixed</td>
-                 <td>Configurable</td>
-           </tr>
-       
-               <tr>
-                 <td>RAM, storage size</td>
-                 <td>Fixed</td>
-                 <td>Configurable</td>
-               </tr>
-               
-               <tr>
-                 <td>2D and 3D acceleration API</td>
-                 <td>GPU-dependent</td>
-                 <td>GPU-independent (common set)</td>
-               </tr>
-               
-               <tr>
-                 <td>CP, telephony</td>
-                 <td>Fully supported</td>
-                 <td>Partially supported (only SMS and voice call)</td>
-               </tr>
-               
-               <tr>
-                 <td>Wi-Fi</td>
-                 <td>Fully supported</td>
-                 <td>Partially supported (using ethernet)</td>
-               </tr>
-                               
-               <tr>
-                 <td>Sensor</td>
-                 <td>Fully supported</td>
-                 <td>Partially supported (using the Emulator Control Panel)</td>
-               </tr>
-               
-               <tr>
-                 <td>PnP, external connection</td>
-                 <td>Fully supported</td>
-                 <td>Partially supported (using the Emulator Control Panel)</td>
-               </tr>
-               
-               <tr>
-                 <td>Camera</td>
-                 <td>Fully supported</td>
-                 <td>Partially supported (preview, capture, recording, contrast, and brightness)</td>
-               </tr>
-               
-               <tr>
-                 <td>Vibration, haptic</td>
-                 <td>Fully supported</td>
-                 <td>Not supported</td>
-               </tr>
-
-               <tr>
-                 <td>Bluetooth</td>
-                 <td>Fully supported</td>
-                 <td>Not supported</td>
-               </tr>  
-  
-               <tr>
-                 <td rowspan ="3">Performance</td>  
-                 <td>CPU performance</td>
-                 <td>Mobile CPU</td>
-                 <td>Desktop CPU (with hardware virtualization)</td>
-          </tr>
-       
-               <tr>
-                 <td>GPU performance</td>
-                 <td>Real GPU</td>
-                 <td>Desktop GPU (relatively slow)</td>
-               </tr>
-               
-               <tr>
-                 <td>I/O performance</td>
-                 <td>Real HW I/O</td>
-                 <td>Emulated I/O (relatively slow)</td>
-               </tr>
-</tbody>
-</table>
-
-<h4 id="input" name="input">Input System </h4>
-
-<table border="1">
-  <caption>Table: Input differences</caption>
-  <tbody>
-
-   <tr>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>       
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>
-   </tr>
-
-
-       <tr>
-                 <td>Touch screen panel</td>
-                 <td>Real device and driver</td>
-                 <td>Virtual (VirtIO) device and driver</td>
-               </tr>
-   
-   
-        <tr>
-                 <td>Host keyboard and hardware key</td>
-                 <td>Real device and driver</td>
-                 <td>Virtual (VirtIO) device and driver</td>
-               </tr>
-   </tbody>  
-</table>
-
-<h4 id="graphics" name="graphics">Graphics and display</h4>
-
- 
- <table border="1">
-  <caption>Table: Graphics and display differences</caption>
-  <tbody>
-
-   <tr>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>       
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>
-   </tr>
-
-  
-        <tr>
-                 <td>Framebuffer device</td>
-                 <td>Display controller in the processor</td>
-                 <td>Virtual VGA card</td>
-               </tr>
-               
-               <tr>
-                 <td>Backlight control</td>
-                 <td>LDI (LCD Driver IC) command</td>
-                 <td>Additional virtual device and driver</td>
-               </tr>
-               
-   </tbody>  
-</table>
-   
- <h4 id="sensor" name="sensor">Virtual Sensor (Emulator Control Panel)</h4>
-   
-  
-<table border="1">
-  <caption>Table: Virtual sensor differences</caption>
-  <tbody>  
-
-  <tr>
-  <th colspan="2">Category</th>
-     <th>Physical target</th>
-        <th>Emulator</th>
-  </tr>
- 
-        <tr>
-     <td rowspan="8">Sensor</td>
-        <td>Acceleration</td>
-  <td>Receives the actual acceleration value of the device.</td>
-  <td>Receives the virtual acceleration value through the Emulator Control Panel.
-  <p>If the Emulator orientation is portrait, the acceleration values are approximately 0, -9.81, and 0 degrees.</p></td>
-</tr>
-  
-   
-   <tr>
-        <td>Gyro</td>
-     <td>Receives the actual gyroscope value of the device.</td>
-     <td>Receives the virtual gyroscope value through the Emulator Control Panel.</td>
-   </tr>
-   
-   <tr>
-        <td>Geomagnetic</td>
-     <td>Receives the actual geomagnetic value of the device.</td>
-     <td>Receives the virtual geomagnetic value through the Emulator Control Panel.
-<p>If the Emulator orientation is portrait, the y axis points to true north and the magnetic tesla values are 1, 0, and -10 degrees.</p></td>
-   </tr>
-   
-   
-   <tr>
-        <td>Proximity</td>
-     <td>Receives the actual proximity value of the device.</td>
-     <td>Receives the virtual proximity value through the Emulator Control Panel.
-        <p>You can register an event handler for the proximity sensor and test it with the Emulator Control Panel. However, the screen does not power off during the event because the Emulator does not connect to the power manager.</p>
-    </td>
-   </tr>
-   
-   
-   <tr>
-        <td>Light</td>
-     <td>Receives the actual ambient light value of the device.</td>
-     <td>Receives the virtual ambient light value through the Emulator Control Panel.
-        <p>You can register an event handler for the light sensor and test it with the Emulator Control Panel. However, in order to test the screen brightness change, the brightness setting must be automatic in the setting application. </p>
-    </td>
-   </tr>
-   
-   <tr>
-        <td>Pressure</td>
-     <td>Receives the actual pressure value of the device.</td>
-     <td>Receives the virtual actual pressure value through the Emulator Control Panel.
-    </td>
-   </tr>
-   
-   <tr>
-        <td>Ultraviolet</td>
-     <td>Receives the actual ultraviolet value of the device.</td>
-     <td>Receives the virtual actual ultraviolet value through the Emulator Control Panel.
-    </td>
-   </tr>
-   
-   <tr>
-        <td>Heart Rate Monitor</td>
-     <td>Receives the actual heart rate and peak-to-peak values of the device.</td>
-     <td>Receives the virtual actual heart rate and peak-to-peak values through the Emulator Control Panel.
-    </td>
-   </tr>
- 
-        <tr>
-    <td rowspan="4">Device</td>
-         <td>Battery</td>
-     <td>Receives the actual battery value of the device.</td>
-     <td>Receives the virtual battery value through the Emulator Control Panel.
-        <p>You can change the battery level and the charger connection status.</p> 
-    </td>
-       </tr>
-   
-   <tr>
-         <td>Earjack</td>
-     <td>Receives the actual earjack connection event of the device.</td>
-     <td>Receives the earjack connection event through the Emulator Control Panel.
-        <p>You can select a 3-wire or 4-wire connection, or set the earjack as disconnected.</p> 
-    </td>
-       </tr>
-   
-   
-   <tr>
-         <td>USB</td>
-     <td>Receives the actual USB connection event of the device.</td>
-     <td>Receives the USB connection event through the Emulator Control Panel.</td>
-       </tr>
-   
-   <tr>
-         <td>RSSI</td>
-     <td>Receives the actual RSSI value of the device.</td>
-     <td>Receives the virtual RSSI value through the Emulator Control Panel.</td>
-       </tr>
- 
-        <tr>
-    <td rowspan="4">Location</td>
-         <td>Log</td>
-     <td>Supported by lbsFW.</td>
-     <td>Receives the virtual GPS log file through the Emulator Control Panel.
-        <p>You can use a log file of the NMEA format.</p>
-    </td>
-       </tr>
-   
-   <tr>
-         <td>Manual</td>
-     <td>Not supported.</td>
-     <td>Receives the virtual longitude and latitude values through the Emulator Control Panel.</td>
-       </tr>
-   
-   
-   <tr>
-         <td>Map</td>
-     <td>Not supported.</td>
-     <td>Receives the virtual longitude, latitude, altitude, and horizontal accuracy values through the Emulator Control Panel map.</td>
-       </tr>
-   
-   <tr>
-         <td>Auto</td>
-     <td>Receives the actual GPS coordinates of the device.</td>
-     <td>Not supported.</td>
-       </tr>
-   
-   </tbody>
- </table>
-
-
-<h4 id="telephony" name="telephony">Telephony</h4>
-
- <table border="1">
-  <caption>Table: Telephony differences</caption>
-  <tbody>  
- 
- <tr>
-    <th colspan="2">Category</th>
-       <th>Physical target</th>
-       <th>Emulator</th>
-   </tr>
-   <tr>
- <td rowspan="2">Telephony</td>
-     <td>Call</td>
-        <td>Calls and video calls are supported.</td>
-        <td>Call waiting, outgoing call barring, and voice calls with the Emulator Control Panel are supported.
-        <p>Video calls, call forwarding, incoming call barring, and Emulator-to-Emulator calls are not supported.</p></td>
-        </tr>
-        
-        <tr>
-     <td>SMS</td>
-        <td>SMS messaging is supported.</td>
-        <td>SMS messaging with the Emulator Control Panel is supported.
-        <p>Sending Emulator-to-Emulator SMS messages is not supported.</p></td>
-        </tr>
- </tbody>
- </table> 
-   
-   
-<h4 id="power" name="power">Power Management</h4>
- 
- <table border="1">
-  <caption>Table: Power management differences</caption>
-  <tbody>  
- 
- <tr>
-    <th>Mode</th>
-       <th>Physical target</th>
-    <th>Emulator</th>
-</tr>
- 
- 
- <tr>
-    <td>Display on/off</td>
-    <td>Display controller in the processor</td>
-    <td>Internal emulation</td>
- </tr>
- 
- <tr>
-    <td>Power off</td>
-    <td>Power management in the processor</td>
-    <td>ACPI (Advanced Configuration and Power Interface)</td>
- </tr>
-</tbody> 
-</table>
-
-
-<h4 id="codec" name="codec">Supported Media Formats and Codecs</h4>
-
- <table border="1">
-  <caption>Table: Media format and codec differences</caption>
-  <tbody>  
- 
- <tr>
-       <th colspan="2">Category</th>
-       <th>Physical target</th>
-       <th>Emulator</th>
-</tr>
-   <tr>
- <td rowspan="1">Decoder</td>
-     
-     <td>FLAC</td>
-        <td>Supported</td>
-        <td>Not supported</td>
-        </tr> 
- </tbody>
- </table> 
- 
- 
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>Emulator</title>      \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#features">Using the Emulator</a></li>             \r
+                       <li><a href="#manager">Emulator Manager</a></li>\r
+                       <li><a href="#hw">Using Hardware Virtualization</a></li>\r
+                       <li><a href="#controls">Emulator Control Keys and Menu</a></li>\r
+                       <li><a href="#ecp">Emulator Control Panel</a></li>\r
+                       <li><a href="#support">Supported Features</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Emulator</h1>\r
+\r
+<p>The Tizen SDK includes a virtual device Emulator. The Emulator provides the full stacks of the Tizen platform so that you can test Tizen applications before deploying them         to the real target device. The Emulator is based on the open source QEMU project and comprises virtual CPU, memory, and various peripherals. Currently, the Tizen SDK only supports the x86 machine architecture for guest. You can use the <a href="#manager">Emulator Manager</a> to create and launch a Virtual Machine instance. You can communicate with the Emulator instance using the <a href="smart_dev_bridge.htm">Smart Development Bridge (SDB)</a>.</p>\r
+\r
+<p>The main features of the Emulator are:</p>\r
+<ul>\r
+<li>Providing full system emulation, including CPU, memory, and peripheral devices</li>\r
+<li>Simulating events with the <a href="#ecp">Emulator Control Panel</a></li>\r
+<li>Accelerating guest operations using host CPU or GPU</li>\r
+</ul>\r
+\r
+<p>For more information see <a href="#support">Supported Features</a>.</p>\r
+\r
+<h2 id="features" name="features">Using the Emulator</h2>\r
+\r
+<p>To run applications on the Emulator:</p>\r
+\r
+<ol>\r
+<li>Start the Emulator through the <a href="#manager">Emulator Manager</a>.\r
+<p>You can launch the Emulator from both the Emulator Manager and the command line. If you are using the command line, you can modify the <a href="emulator_features.htm#startup">start-up options</a>.</p></li>\r
+<li>While running the Emulator, you can use <a href="#controls">the control keys and context menu</a> or the <a href="#ecp">Emulator Control Panel</a> to control the Emulator. You can use <a href="emulator_features.htm">extended features</a> while running applications, such as a shared directory, multi-point touch, and a Webcam.</li>\r
+</ol>\r
+\r
+<h2 id="manager" name="manager">Emulator Manager</h2>\r
+\r
+<p>To start the Emulator quickly:</p>\r
+<ol>\r
+<li>Start the Emulator Manager:\r
+<ul>\r
+       <li>By using the Desktop or Start menu, go to:\r
+\r
+       <table>\r
+               <tbody>\r
+                       <tr>\r
+                       <th style="text-align:center;margin-left:auto;margin-right:auto;">Ubuntu</th>\r
+                       <th style="text-align:center;margin-left:auto;margin-right:auto;">Windows&reg;</th>\r
+                       <th style="text-align:center;margin-left:auto;margin-right:auto;">Mac OS&reg;</th>\r
+                       </tr>\r
+                       <tr>\r
+                       <td><strong>Desktop &gt; Applications &gt; Emulator Manager</strong>:\r
+                                          <p><img alt="Ubuntu shortcut" src="../images/emulator_manager_linux_shortcut.png"/></p></td>\r
+                       <td><strong>Start &gt; All Programs &gt; Tizen SDK &gt; Emulator Manager</strong>:\r
+                                          <p><img alt="Windows shortcut" src="../images/emulator_manager_win_shortcut.png"/></p></td>\r
+                       <td><strong>Finder &gt; Applications &gt; Tizen SDK &gt; Emulator Manager</strong>:\r
+                                          <p><img alt="Mac OS shortcut" src="../images/emulator_manager_mac_shortcut.png"/></p></td>\r
+                       </tr>\r
+               </tbody>\r
+       </table>\r
+       </li>\r
+       <li> By using the Tizen IDE, click the <strong>Emulator Manager</strong> icon in the <strong>Connection Explorer</strong> view:\r
+              <p align="center"><img alt="Launch" src="../images/emulator_manager_ide.png"/></p>\r
+    </li>\r
+</ul>\r
+</li>\r
+<li>Select your preferred profile tab, such as mobile or wearable.</li>\r
+<li>Select <strong>Create New</strong> and click <strong>Confirm</strong>.</li>\r
+<li>Click the <strong>Launch</strong> button ( <img alt="Launch" src="../images/launch.png" /> ) or press the ENTER keyboard key.</li>\r
+<li> To stop the Emulator, right-click the Emulator and select <strong>Close</strong>.</li>\r
+</ol>\r
+\r
+\r
+<p class="figure">Figure: Emulator Manager</p>\r
+<p align="center"><img alt="Emulator Manager" src="../images/emulator_manager.png" /></p>\r
+\r
+<table class="note">\r
+<tbody>\r
+        <tr>\r
+          <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+          <td class="note">To run the application faster, switch on <strong>CPU VT</strong> and <strong>GPU</strong>. If <strong>CPU VT</strong> is disabled, check the <a href="#hw">Using Hardware Virtualization</a> section for more information. If <strong>GPU</strong> is disabled, <a href="https://developer.tizen.org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk" target="_blank">install the latest vendor-provided graphic driver</a>.</td>\r
+        </tr>\r
+      </tbody>\r
+    </table>\r
+\r
+<p>You can also create a new virtual machine (VM) with the <a href="#manager-cli">Emulator Manager CLI</a>.</p>\r
+\r
+<p>The created VM is added under the current tab. The name of tab, <span style="font-family: Courier New,Courier,monospace">&lt;Profile&gt;</span>, refers to the image profile. You can create a VM by using a custom image in <strong>Base Image</strong> of the detail view. The background color of a custom VM is blue.</p>\r
+ \r
+<p>You can also export a base image of the VM and manipulate the VM:</p>\r
+<ul>\r
+<li>To create a VM, select <strong>Create New</strong> and click <strong>Confirm</strong>.</li>\r
+<li>To create a base image of a VM, select the VM and <strong>Export as</strong>, and enter a name and location for the base image.</li>\r
+<li>To modify a VM, click the <strong>Modify</strong> icon ( <img alt="Modify icon" src="../images/mod_icon.png" /> ), make the appropriate changes, and click <strong>Confirm</strong>.</li>\r
+<li>To delete a VM, click <strong>Delete</strong> or press the DELETE keyboard key (<strong>fn + Delete</strong> in Mac OS&reg; X).</li>\r
+<li>To launch a VM, click the <strong>Launch</strong> button ( <img alt="Launch" src="../images/launch.png" /> ) or press the ENTER keyboard key.</li>\r
+</ul>\r
+\r
+\r
+<h3 id="vm" name="vm">Virtual Machine</h3>\r
+<p>A virtual machine (VM) is a set of hardware options including the file system image. The Emulator Manager controls the virtual machines. When you launch the Emulator, you can specify the VM that you want to customize. Each VM has its own Emulator file system image. In other words, different VMs have different states of Emulators.</p>\r
+<table class="note">\r
+\r
+      <tbody>\r
+        <tr>\r
+          <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+          <td class="note">If you update the <span style="font-family: Courier New,Courier,monospace">EMULATOR_IMAGE</span> package on Tizen SDK Install Manager, existing VMs are not launched properly as the Base Image file is modified. To use the existing VMs after updating, the Emulator Manager provides the &#39;creating a base image&#39; feature through the <strong>Export as</strong> button. With this functionality, you can keep the existing VMs in the new Base Image.</td>\r
+        </tr>\r
+      </tbody>\r
+    </table>\r
+\r
+<p>You can set the following VM details:</p>\r
+<ul>\r
+<li>Name\r
+<p>The following rules apply for naming a VM:</p>\r
+<ul>\r
+<li>The length of the name must be at most 20 characters.</li>\r
+<li>Different VMs must not have the same name.</li>\r
+<li>Only the following characters are accepted: -, _, 0-9, a - z, and A - Z</li>\r
+</ul></li>\r
+\r
+<li>Base Image\r
+<p>You can use the default base image. You can also change the base image and choose another image when you create a VM by clicking <strong>Create New</strong> under the &quot;mobile-custom/wearable-custom&quot; tab folder. This new VM is added under the &quot;each custom&quot; group. The correct image file extension of the custom base image is <span style="font-family: Courier New,Courier,monospace">.x86</span>.</p></li>\r
+\r
+<li>Display Resolution\r
+<p>Note that the following resolution has its own default display density.</p>\r
+<ul>\r
+  <li>Mobile\r
+  <ul>\r
+    <li>480 x 800 (WVGA)</li>\r
+       <li>540 x 960 (qHD)</li>\r
+    <li>720 x 1280 (HD)</li>\r
+  </ul></li>\r
+  <li>Wearable\r
+  <ul>\r
+    <li>320 x 320</li>\r
+       <li>360 x 360</li>\r
+    <li>360 x 480</li>\r
+  </ul></li> \r
+</ul>\r
+</li>\r
+\r
+<li>Display Density\r
+<p>DPI (Dots Per Inch) value of the Emulator. The DPI depends on the display resolution.</p>\r
+<ul>\r
+  <li>Mobile\r
+  <ul>\r
+    <li>233 (480 x 800)</li>\r
+       <li>220 (540 x 960)</li>\r
+    <li>306 (720 x 1280)</li>\r
+  </ul></li>\r
+  <li>Wearable\r
+  <ul>\r
+    <li>316 (320 x 320)</li>\r
+    <li>302 (360 x 360)</li>\r
+       <li>300 (360 x 480)</li>\r
+  </ul></li>\r
+</ul>\r
+</li>\r
+\r
+<li>Skin\r
+<p>The VM UI style. Select 1 or more of the available skins. The skin depends on the display resolution.</p></li>\r
+\r
+<li>Processors\r
+<p>The number of CPUs.</p></li>\r
+\r
+\r
+<li>RAM Size\r
+<p>The RAM size.</p>\r
+\r
+<table class="note">\r
+\r
+      <tbody>\r
+        <tr>\r
+          <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+          <td class="note">In Windows&reg;, only the 512 MB size is available.</td>\r
+        </tr>\r
+      </tbody>\r
+    </table>\r
+       \r
+<ul>\r
+<li>512 MB</li>\r
+<li>768 MB</li>\r
+<li>1024 MB</li>\r
+</ul></li>\r
+\r
+<li>File Sharing\r
+<p>You can share a directory between the host PC and the Emulator. If you want to use this feature, set the value to <strong>ON</strong> and define the input directory to share in the <strong>directory</strong> field. For more information, see <a href="emulator_features.htm#file">Sharing a Directory</a>.</p></li>\r
+\r
+<li>CPU VT\r
+<p>The Emulator supports hardware virtualization. It is kvm on Ubuntu and HAX on Windows&reg;. If the host CPU supports hardware virtualization and a hardware virtualization module is installed, you can change this value. For more information, see <a href="#hw">Using Hardware Virtualization</a>.</p></li>\r
+\r
+<li>GPU\r
+<p>The Emulator supports hardware OpenGL&reg; acceleration. If the host graphic card driver supports hardware acceleration and you select <strong>ON</strong>, the feature operates properly. Otherwise, do not try to make the Emulator support hardware acceleration. If the GPU option is enabled, the rendering performance of the video player or camera can degrade.</p>\r
+</li>\r
+\r
+<li>Advanced Option\r
+<p>You can attach and detach devices.</p>\r
+<ul>\r
+  <li>Mobile\r
+  <ul>\r
+    <li>Sensor: accelerometer, gyroscope, geo-magnetic, proximity, light, haptic, pressure, ultraviolet, heartbeat rate meter</li>\r
+    <li>Device: camera, battery</li>\r
+    <li>Jack: ear jack, charger, USB</li>\r
+  </ul></li>\r
+  <li>Wearable\r
+  <ul>\r
+    <li>Sensor: accelerometer, gyroscope, geomagnetic, proximity, light, haptic, pressure, ultraviolet, heartbeat rate meter</li>\r
+    <li>Device: camera, battery</li>\r
+    <li>Jack: charger, USB</li>\r
+  </ul></li>\r
+</ul>\r
+</li>\r
+\r
+</ul>\r
+\r
+<h3 id="manager-cli" name="manager-cli">Emulator Manager CLI</h3>\r
+\r
+<p>You can create, modify, delete, and list your VMs through the command line interface commands. The CLI binary is located in:</p>\r
+       <ul>\r
+               <li>In Linux:\r
+               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/bin/em-cli</span></p></li>\r
+               <li>In Windows&reg;:\r
+               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;\tools\emulator\bin\em-cli.bat</span></p></li>\r
+       </ul>\r
+\r
+<p>For more information, see the CLI help messages.</p>\r
+\r
+<p class="figure">Figure: Emulator Manager command line</p> \r
+<p align="center"><img alt="Emulator Manager command line" src="../images/emulator_cli.png" /></p> \r
+\r
+\r
+<h2 id="hw" name="hw">Using Hardware Virtualization</h2>\r
+\r
+<p>To run the application faster, the Tizen x86 Emulator exploits <a href="http://www.linux-kvm.org/page/Main_Page" target="_blank">KVM</a> (Kernel-based Virtual Machine in Linux) or <a href="https://developer.tizen.org/sdk/haxm" target="_blank">HAX</a> (Hardware Accelerated eXecution in Windows&reg; and Mac OS&reg; X) with HW virtualization support.</p> \r
+<p>If the <strong>CPU VT</strong> is disabled in the <strong>Detail</strong> view on the Emulator Manager, check the following prerequisites and install KVM or HAX.</p>\r
+\r
+\r
+<h3 id="prerequisite" name="prerequisite">Prerequisites</h3>\r
+\r
+<p>To use HW virtualization, you need:</p>\r
+\r
+<ul>\r
+<li>In Linux:\r
+<p>To use KVM, you need a processor that supports HW virtualization. Both Intel and AMD have developed those extensions for their processors (Intel VT-x/AMD-V). Check whether the CPU supports HW virtualization with the following command:</p> \r
+<pre class="prettyprint">\r
+$egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>\r
+\r
+<p>If the output of the command is <span style="font-family: Courier New,Courier,monospace">0</span>, the CPU does not support HW virtualization. Otherwise, it does. </p>\r
+<p>The HW virtualization feature can also be disabled on the BIOS setting; check the setting and enable it if you need the feature.</p></li>\r
+\r
+<li>In Windows&reg;:\r
+<p>To use HAX, you need Intel VT-x-supported CPU, and you must enable the NX-related setting in the PC BIOS.</p> </li>\r
+\r
+<li>In Mac OS&reg; X:\r
+<p>To use HAX, install EFI-related updates on your Intel-based Mac system. For more information, see <a href="http://support.apple.com/kb/HT1237" target="_blank">EFI and SMC firmware updates for Intel-based Macs</a>.</p> </li>\r
+</ul>\r
+\r
+\r
+<h3 id="install" name="install">Installing KVM or HAX</h3>\r
+\r
+<p>To install KVM or HAX:</p>\r
+\r
+<ul>\r
+<li>In Linux:\r
+<p>No installation is required for KVM.</p> \r
+</li>\r
+<li>In Windows&reg; and Mac OS&reg; X:\r
+<p>The HAXM driver is installed during the Tizen SDK installation. See the installation manual on the <a href="https://developer.tizen.org/sdk/haxm" target="_blank">Tizen developer site</a>.</p>\r
+<table class="note">\r
+\r
+      <tbody>\r
+        <tr>\r
+          <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+          <td class="note">\r
+                 <p>If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP) -related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/ff542275%28v=vs.85%29.aspx" target="_blank">MSDN</a>).</p>\r
+</td>\r
+        </tr>\r
+      </tbody>\r
+    </table></li></ul>\r
+       \r
+<p>No configuration is required for KVM or HAX.</p>\r
+\r
+\r
+<h3 id="run" name="run">Running the Emulator</h3>\r
+<p>To run the Emulator with HW virtualization support in the Emulator Manager, set the <strong>CPU VT</strong> field to <strong>ON</strong>. The field is disabled if your system cannot support HW virtualization.</p>\r
+<p>You can also run the Emulator with HW virtualization support from the command line, by including the <span style="font-family: Courier New,Courier,monospace">-enable-kvm</span> (in Linux) or <span style="font-family: Courier New,Courier,monospace">-enable-hax</span> (in Windows&reg; and Mac OS&reg; X) option in the start-up command.</p>\r
+\r
+\r
+<h2 id="controls" name="controls">Emulator Control Keys and Menu</h2>\r
+\r
+<p>The Tizen Emulator provides a variety of control keys and menus.</p>\r
+\r
+<h3 id="phone" name="phone">Profile-specific Skin</h3>\r
+<p>The profile-specific skin has a real device-shaped image frame, and its hardware keys are on the main window skin. You can <a href="emulator_features.htm#skin">configure the profile-specific skin</a>.</p>\r
+\r
+\r
+<p class="figure">Figure: Profile-specific skin Emulator</p>\r
+\r
+<p align="center"><img alt="Profile-specific skin Emulator Mobile" src="../images/emulator_profile_mobile.png" /> <img alt="Profile-specific skin Emulator Wearable O" src="../images/emulator_profile_wearable_o.png" /> <img alt="Profile-specific skin Emulator Wearable" src="../images/emulator_profile_wearable.png" /></p>\r
+\r
+<h3 id="general" name="general">General Purpose Skin</h3>\r
+<p>The image of the general purpose skin is generated by nine-patch image processing. The Emulator skin frame has the same appearance on every state of resolution, scale, or rotation. Unlike the <a href="#phone">profile-specific skin</a>, the layout of the general purpose skin is not configurable.</p>\r
+\r
+<ul>\r
+<li>Key window\r
+<p>The key window displays an independent hardware key input window, which can be moved to any position on the screen or docked to the left or right side of the main window. If the key window is docked with the main window, both windows can be moved together on the screen.</p>\r
+</li>\r
+<li>Pair tag\r
+<p>The pair tag indicates that the Emulator main window and key window are in a pair. This tag is activated when the key window is open. The pair tag color changes every time the Emulator boot occurs.</p>\r
+</li>\r
+</ul>\r
+\r
+<p>The following figure illustrates the general purpose skin Emulator.</p>\r
+\r
+<p class="figure">Figure: General purpose skin Emulator</p>\r
+<p align="center"><img alt="General purpose skin Emulator Mobile" src="../images/emulator_general_mobile.png" /> <img alt="General purpose skin Emulator Wearable" src="../images/emulator_general_wearable.png" /></p>\r
+\r
+\r
+\r
+<h3 id="controlkeys" name="controlkeys">Control Keys</h3>\r
+<p>The following keys are available on the Emulator:</p>\r
+<ul>\r
+       <li><strong>Menu</strong> (mobile only)\r
+               <p>When you tap, it opens a list of options available for the current screen.</p>\r
+               </li>\r
+  <li><strong>Home</strong> (mobile only)\r
+       <p>If you long press the <strong>Home</strong> key, the Task switcher application appears as in a real device.</p>\r
+       </li>   \r
+  <li><strong>Back</strong> (mobile only)\r
+       <p>When you tap, it returns to the previous screen.</p>\r
+       </li>   \r
+  <li><strong>Power</strong>\r
+       <p>You can power off the display by clicking the <strong>Power</strong> key in most general situations. \r
+               Sometimes, the display does not power off though you click the <strong>Power</strong> key. \r
+               This is to guarantee the operation of a current application, such as the Stopwatch in the Clock App. \r
+               If you click <strong>Power</strong> or <strong>Home</strong> key again, the display is powered on.</p>\r
+       </li>\r
+  <li><strong>Volume Up</strong> and <strong>Volume Down</strong> (mobile only)\r
+       <p>You can control the volume with the <strong>Volume Up</strong> and <strong>Volume Down</strong> keys.</p>\r
+       </li>\r
+</ul>\r
+\r
+\r
+\r
+<h3 id="menu" name="menu">Context Menu</h3>\r
+<p>You can access the context menu by right-clicking on the Emulator. In the menu, you can select:</p>\r
+\r
+<ul>\r
+<li>Emulator name (the top row in the menu)\r
+<p>Display the <strong>Detailed Info</strong> window, showing the <strong>Shortcut Info</strong> and <strong>VM Info</strong> tabs. The <strong>Shortcut Info</strong> tab lists the <a href="keyboard_shortcuts.htm#emulator">Emulator keyboard shortcuts</a> and the <strong>VM Info</strong> tab defines the virtual machine details.</p>\r
+<table border="1">\r
+       <caption>Table: VM Info tab</caption>\r
+               <tbody>\r
+                       <tr>\r
+                               <th style="text-align:center;margin-left:auto;margin-right:auto;">Feature</th>\r
+                               <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>       \r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>VM Name</td>\r
+                         <td>VM name</td>\r
+                       </tr>\r
+\r
+                       <tr>\r
+                         <td>Skin Name</td>\r
+                         <td>Skin name</td>\r
+                       </tr>\r
+                                               \r
+                       <tr>\r
+                         <td>CPU</td>\r
+                         <td>CPU architecture</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>RAM Size</td>\r
+                         <td>RAM size (MB)</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>Display Resolution</td>\r
+                         <td>Target display resolution</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>Display Density</td>\r
+                         <td>DPI (Dots Per Inch)</td>\r
+                       </tr>\r
+                       \r
+                                       \r
+                       <tr>\r
+                         <td>Directory Sharing</td>\r
+                         <td>Whether host directory sharing is used</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>File Shared Path</td>\r
+                         <td>Path to the shared host directory</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>CPU Virtualization</td>\r
+                         <td>Whether hardware virtualization is supported</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>GPU Virtualization</td>\r
+                         <td>Whether GPU virtualization is supported</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>Image Path 1</td>\r
+                         <td>Target image path</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>Image Path 2</td>\r
+                         <td>Swap image path</td>\r
+                       </tr>\r
+                       \r
+                       <tr>\r
+                         <td>Log Path</td>\r
+                         <td>Emulator log file path</td>\r
+                       </tr>\r
+               </tbody>\r
+</table>\r
+</li>\r
+\r
+<li><strong>Always On Top</strong>\r
+<p>Select this option to keep the Emulator window on top of other windows.</p>\r
+\r
+<table class="note">\r
+  <tbody>\r
+    <tr>\r
+      <th class="note">Note</th>\r
+    </tr>\r
+               <tr>\r
+                       <td class="note">The <strong>Always On Top</strong> feature is not supported in Mac OS&reg; X.</td>\r
+               </tr>\r
+  </tbody>\r
+</table>\r
+</li>\r
+<li><strong>Rotate</strong>\r
+<p>Select either <strong>Portrait</strong>, <strong>Landscape</strong>, <strong>Reverse Portrait</strong>, or <strong>Reverse Landscape</strong> as the orientation of the Emulator.</p></li>\r
+\r
+<li><strong>Scale</strong> (mobile only)\r
+<p>Scale the size of the Emulator between 1x, 1/2x (default), 3/4x, and 1/4x.</p></li>\r
+\r
+<li><strong>Advanced &gt; Controller</strong>\r
+<p>Show or hide the controller window.</p>\r
+<table class="note">\r
+  <tbody>\r
+    <tr>\r
+      <th class="note">Note</th>\r
+    </tr>\r
+               <tr>\r
+                       <td class="note">The <strong>Controller</strong> menu is not supported in the profile-specific skin.</td>\r
+               </tr>\r
+  </tbody>\r
+</table></li>\r
+<li><strong>Advanced &gt; Screenshot</strong>\r
+<p>Capture a screenshot of the Emulator.</p></li>\r
+\r
+<li><strong>Advanced &gt; About</strong>\r
+<p>Display the Emulator version, build time, and git version.</p></li>\r
+\r
+<li><strong>Advanced &gt; Force Close</strong>\r
+<p>Force the Emulator to exit. Since force stopping the Emulator can cause problems, use the <strong>Close</strong> option to exit the Emulator. Use <strong>Force Close</strong> only when absolutely necessary.</p></li>\r
+\r
+<li><strong>Shell</strong>\r
+<p>Open a Smart Development Bridge (SDB) shell command window.</p></li>\r
+\r
+<li><strong>Control Panel</strong>\r
+<p>Help to control or monitor the state of the Emulator dynamically. </p></li>\r
+\r
+<li><strong>Close</strong>\r
+<p>Exit the Emulator.</p></li>\r
+\r
+</ul>\r
+\r
+<table class="note">\r
+  <tbody>\r
+    <tr>\r
+      <th class="note">Note</th>\r
+    </tr>\r
+               <tr>\r
+                       <td class="note">In Ubuntu, you need to change a global GNOME setting to view the menu icons:\r
+                       <ol>\r
+                       <li>In the command console, execute the <span style="font-family: Courier New,Courier,monospace">gconf-editor</span> command.</li>\r
+                       <li>In the tree, navigate to <strong>desktop &gt; gnome &gt; interface</strong>.</li>\r
+                       <li>Enable the <strong>menus_have_icons</strong> option.</li>\r
+                       </ol>\r
+               </td>\r
+               </tr>\r
+  </tbody>\r
+</table>\r
+\r
+\r
+<h2 id="ecp" name="ecp">Emulator Control Panel</h2>\r
+\r
+<p>You can execute the Emulator Control Panel (ECP) by selecting <strong>Control Panel</strong> on the <a href="#menu">Context Menu</a> after the Emulator is successfully launched. You can control and monitor the state of the Emulator dynamically.</p> \r
+<p>The main features of ECP:</p> \r
+<ul>\r
+\r
+    <li>Device Manager\r
+       <p>The following table lists the Device Manager features and their availability on different profiles.</p>\r
+\r
+            <table border="1">\r
+                <caption>Table: Device Manager features</caption>\r
+         <tbody>\r
+\r
+          <tr>\r
+                       <th>Feature</th>\r
+                       <th>Mobile</th>       \r
+                       <th>Wearable</th>\r
+                               <th>Description</th>\r
+          </tr>\r
+  \r
+          <tr>\r
+                       <td>Device Tree</td>\r
+                       <td>Yes</td>\r
+                       <td>No</td>\r
+                       <td>The Device Tree is a data structure for describing hardware. \r
+                               You can see the device information that actually loaded in the main system bus. \r
+                               It shows a simple tree structure of nodes and properties. Nodes are generally a device or another bus. \r
+                               Properties are key-value pairs where the value can either be empty or contain an arbitrary byte stream.</td>\r
+                     </tr>\r
+               \r
+                     <tr>\r
+                       <td>Network</td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can view a network device list and control the user network. \r
+                               To forward a remote or local port to an inside port of the Emulator, click <strong>Add port–forwarding</strong>, \r
+                               enter values in text boxes, and click <strong>Apply port–forwarding</strong>.</td>\r
+                     </tr>\r
+                         \r
+                         <tr>\r
+                       <td>Host Directory Sharing</td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>The specified host directory is mounted to <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> to share resources. Therefore, the file transfer is possible through the host directory sharing feature without using the sdb utility.</td>\r
+                     </tr>\r
+               \r
+          </tbody>  \r
+        </table>  </li>\r
+    \r
+    <li>App Manager\r
+       <p>The following table lists the App Manager features and their availability on different profiles.</p>\r
+       \r
+            <table border="1">\r
+                <caption>Table: App Manager features</caption>\r
+         <tbody>\r
+\r
+          <tr>\r
+                       <th>Feature</th>\r
+                       <th>Mobile</th>       \r
+                       <th>Wearable</th>\r
+                               <th>Description</th>\r
+          </tr>\r
+  \r
+          <tr>\r
+                       <td>Uninstaller</td>\r
+                       <td>No</td>\r
+                       <td>Yes</td>\r
+                       <td>You can see user-installed applications and uninstall them.</td>\r
+                     </tr>             \r
+                     \r
+          </tbody>  \r
+        </table>  \r
+</li>\r
+  \r
+  \r
+       <li>Event Injector\r
+       <p>The following table lists the Event Injector features and their availability on different profiles.</p>\r
+       \r
+                    <table border="1">\r
+                        <caption>Table: Event Injector features</caption>\r
+         <tbody>\r
+\r
+          <tr>\r
+                       <th colspan = "2">Feature</th>\r
+                       <th>Mobile</th>       \r
+                       <th>Wearable</th>\r
+                               <th>Description</th>\r
+          </tr>\r
+  \r
+          <tr>\r
+                       <td colspan = "2"><a href="event_injec.htm#device">Battery</a></td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can set the battery level using the Level slider. \r
+                               To set the charger status to connected or disconnected, select the appropriate Charger radio button.</td>\r
+                     </tr>\r
+                     \r
+                     <tr>\r
+                       <td colspan = "2"><a href="event_injec.htm#device">RSSI</a></td>\r
+                       <td>Yes</td>\r
+                       <td>No</td>\r
+                       <td>You can set the remote signal strength using the level bar.</td>\r
+                     </tr>             \r
+                     \r
+                     <tr>\r
+                       <td rowspan = "6"><a href="event_injec.htm#sensor">Sensor</a></td>      \r
+                       <td>3-Axis Sensor</td>                          \r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can inject user acceleration, magnetic, and gyroscope values using slider bars or text input.</td>              \r
+                     </tr>                                    \r
+                     \r
+                     <tr>\r
+                       <td>Light</td>                          \r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can inject a lux value into light sensor. \r
+                               If you set brightness as auto, then display will be changed by injecting light value.</td>                               \r
+               </tr>\r
+\r
+               <tr>\r
+                        <td>Proximity</td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can inject the presence of nearby objects.</td> \r
+               </tr>\r
+               \r
+               <tr>\r
+                        <td>Pressure</td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can inject a hPa value into the pressure sensor.</td>   \r
+               </tr>\r
+               \r
+               <tr>\r
+                        <td>Ultraviolet</td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can inject an ultraviolet index.</td>   \r
+               </tr>\r
+               <tr>\r
+                        <td>Heart Rate Monitor</td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can inject the heart rate and peek-to-peek time in milliseconds.</td>   \r
+               </tr>                   \r
+\r
+          <tr>\r
+                       <td colspan = "2"><a href="event_injec.htm#device">Ear Jack</a></td>\r
+                       <td>Yes</td>\r
+                       <td>No</td>\r
+                       <td> You can inject adding or removing headset.</td>\r
+                     </tr>\r
+                     \r
+                     <tr>\r
+                       <td colspan = "2">Gesture</td>\r
+                       <td>No</td>\r
+                       <td>Yes</td>\r
+                       <td>You can inject flick up (menu button) or flick down (back button) events in the wearable profile.</td>\r
+                     </tr>\r
+                     \r
+                     <tr>\r
+                       <td colspan = "2"><a href="event_injec.htm#device">USB</a></td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can add or remove a USB device by setting the USB device setting to the connected or disconnected state.</td>\r
+                     </tr>\r
+                     \r
+                     <tr>\r
+                       <td colspan = "2"><a href="event_injec.htm#device">SD Card</a></td>\r
+                       <td>Yes</td>\r
+                       <td>No</td>\r
+                       <td>You can inject a 4, 8, 16, or 32G SD card.</td>\r
+                     </tr>\r
+                     \r
+                     <tr>\r
+                       <td colspan = "2"><a href="event_injec.htm#location">Location</a></td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can inject latitude and longitude values using a map, manually, or from a log file.</td>\r
+                     </tr>\r
+                     \r
+                     <tr>\r
+                       <td colspan = "2"><a href="event_injec.htm#telephony">Telephony</a></td>\r
+                       <td>Yes</td>\r
+                       <td>Yes</td>\r
+                       <td>You can make and receive a call through the <strong>Call</strong> tab. You can also send and receive SMS messages through the <strong>SMS</strong> tab.</td>\r
+                     </tr>\r
+                     <tr>\r
+                <td colspan = "2"><a href="event_injec.htm#memory">Memory</a></td>\r
+                               <td>Yes</td>\r
+                               <td>Yes</td>\r
+                               <td>You can set the low memory status using the radio buttons.</td>\r
+                         </tr>\r
+          </tbody>  \r
+        </table> \r
+</li>\r
+</ul>\r
+\r
+ <p>Various <a href="keyboard_shortcuts.htm#ecp">keyboard shortcuts</a> are available to execute ECP tasks.</p>\r
+\r
+ \r
+<h3 name="ecp-cli">Emulator Control Panel CLI</h3>\r
+\r
+<p>You can control and monitor the Tizen Emulator by using ECP CLI instead of the ECP UI tool. The ECP CLI supports all the functionalities of the ECP UI. The CLI binary is located at:</p>\r
+       <ul>\r
+               <li>In Linux:\r
+               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/bin/ecp-cli</span></p></li>\r
+               <li>In Windows&reg;:\r
+               <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;\tools\emulator\bin\ecp-cli.bat</span></p></li>\r
+       </ul>\r
+\r
+<p>You can use the CLI in a session mode or shell mode:</p>\r
+<ul><li>Session mode\r
+<p>You can access this mode by running the binary without any parameters. The mode keeps a session until it is exited. You can exit by entering the <span style="font-family: Courier New,Courier,monospace">exit</span> command.</p></li>\r
+<li>Shell mode\r
+<p>This mode is used for one-time message handling.</p></li></ul>\r
+<p class="figure">Figure: Session and shell modes</p> \r
+<p align="center"><img alt="Session and shell modes" src="../images/ecp_cli_modes.png" /></p>\r
+\r
+<p>In Linux, the bash-based auto-completion is used with the TAB button.</p>\r
+\r
+<p>The following tables list the supported commands of the ECP CLI.</p>\r
+\r
+<table>\r
+<caption>Table: CLI common commands</caption>\r
+<tbody>\r
+<tr>\r
+ <th>Command</th>\r
+ <th>Syntax</th>\r
+ <th>Description</th>\r
+</tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">help</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">help [device]</span></td>\r
+ <td>To get help, type the command as <span style="font-family: Courier New,Courier,monospace">help</span>. For more a specific device help, use the device parameter.</td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">keycode</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">keycode &lt;key-code&gt; [period|press|release]</span></td>\r
+ <td>To enter a key code for a mobile device:\r
+ <ul><li>114: volume down</li>\r
+<li>115: volume up</li>\r
+<li>139: HOME</li>\r
+<li>158: BACK</li>\r
+<li>169: MENU</li></ul></td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">hmp</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">hmp &lt;hmp command&gt;</span></td>\r
+ <td>Access the QEMU human monitor protocol commands. For a list of provided commands, enter the <span style="font-family: Courier New,Courier,monospace">ecp-cli hmp help</span> command.</td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">qmp</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">qmp &lt;qmp command&gt;</span></td>\r
+ <td>Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require <span style="font-family: Courier New,Courier,monospace">{ &quot;execute&quot;: &quot;qmp_capabilities&quot; }</span> to be in the control mode.\r
+ <p>In the shell mode, the shell does not support the double quotation mark (&quot;) as an argument. For the JSON arguments, use  \&quot; (back space + double quotation mark) instead.</p></td>\r
+ </tr>\r
+ <tr>\r
+ <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">hds</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">hds mount &lt;host path&gt; &lt;guest path&gt;</span></td>\r
+ <td>Enable the host directory sharing feature between the specified &lt;host path&gt; and the Emulator&#39;s &lt;guest path&gt;. The specified path must be a folder, not a file.</td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">hds unmount &lt;id&gt;</span></td>\r
+ <td>Unmount the mounted host directory sharing path. The <span style="font-family: Courier New,Courier,monospace">id</span> is the HDS ID and you can get it from the <span style="font-family: Courier New,Courier,monospace">hds status</span> command.</td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">hds status</span></td>\r
+ <td>Show the current host directory sharing status.</td>\r
+ </tr>\r
+ </tbody></table> \r
+\r
+<table>\r
+<caption>Table: CLI profile commands</caption>\r
+<tbody>\r
+<tr>\r
+ <th>Device</th>\r
+ <th>Command</th>\r
+ <th>Mobile</th>\r
+ <th>Wearable</th>\r
+ <th>Syntax</th> \r
+</tr>\r
+\r
+ <tr>\r
+ <td rowspan="5">call</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">dial</span></td>\r
+ <td rowspan="5">Yes</td>\r
+ <td rowspan="5">No</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">call dial &lt;number&gt;</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">hidden-dial</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">call hidden-dial &lt;number&gt;</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">connect</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">call connect</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">disconnect</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">call disconnect &lt;call id&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">call status</span></td>\r
+ </tr>                         \r
+ <tr>\r
+ <td rowspan="4">sms</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">send</span></td>\r
+ <td rowspan="4">Yes</td>\r
+ <td rowspan="4">No</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">sms send &lt;number&gt; &lt;text&gt;</span></td>\r
+ </tr>\r
+ <tr>\r
+<td><span style="font-family: Courier New,Courier,monospace">set status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sms set &lt;available | unavailable&gt;</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sms status</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">mms_status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sms mms_status</span></td>\r
+ </tr> \r
+ <tr>\r
+ <td rowspan="4">location</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>\r
+ <td rowspan="4">Yes</td>\r
+ <td rowspan="4">Yes</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">location set &lt;longitude> &lt;latitude&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">location status</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">stop</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">location stop</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">file</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">location file &lt;file-path&gt;</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td rowspan="3">battery</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">level</span></td>\r
+ <td rowspan="3">Yes</td>\r
+ <td rowspan="3">Yes</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">battery level &lt;percent&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">charger</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">battery charger &lt;on | off&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">battery status</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td rowspan="2">earjack</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>\r
+ <td rowspan="2">Yes</td>\r
+ <td rowspan="2">No</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">earjack set &lt;3wire | 4wire | off&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">earjack status</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td rowspan="2">usb</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>\r
+ <td rowspan="2">Yes</td>\r
+ <td rowspan="2">Yes</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">usb set &lt;on | off&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">usb status</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td rowspan="2">rssi</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>\r
+ <td rowspan="2">Yes</td>\r
+ <td rowspan="2">No</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">rssi set &lt;0~4&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">rssi status</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td rowspan="3">SD card</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">attach</span></td>\r
+ <td rowspan="3">Yes</td>\r
+ <td rowspan="3">No</td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sdcard attach &lt;sdcard_[ 4 | 8 | 16 | 32 ]G&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">detach</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sdcard detach &lt;sdcard_[ 4 | 8 | 16 | 32 ]G&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sdcard status</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td rowspan="10">sensor</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">accelerometer</span></td>\r
+ <td rowspan="10">Yes</td>\r
+ <td rowspan="10">Yes</td> \r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor accelerometer &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>\r
+ </tr> \r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">gyroscope</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor gyroscope &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">magnetic</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor magnetic &lt;x&gt; &lt;y&gt; &lt;z&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">proximity</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor proximity &lt;value&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">light</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor light &lt;value&gt;</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">pressure</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor pressure &lt;level&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">uv</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor uv &lt;level&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">hrm</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor hrm &lt;level&gt;</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+<td><span style="font-family: Courier New,Courier,monospace">sensor status [sensor]</span></td>\r
+ </tr>\r
+  <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">file</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">sensor file &lt;sensor&gt; &lt;path&gt;</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td rowspan="2">low_memory</td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">set</span></td>\r
+ <td rowspan="2">Yes</td>\r
+ <td rowspan="2">Yes</td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">low_memory set &lt;hard-warning | soft-warning | normal&gt;</span></td>\r
+ </tr>\r
+ <tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">status</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">low_memory status</span></td>\r
+\r
+ </tr>\r
+\r
+ </tbody></table>\r
+\r
+\r
+<h2 id="support" name="support">Supported Features </h2>\r
+\r
+<p>The Emulator provides various virtual H/W, media formats, codecs and <a href="#opengl">OpenGL&reg; ES acceleration</a>. For better performance of the OpenGL&reg; ES support, the Tizen Emulator exploits the latest feature of the graphic driver, so always <a href="https://developer.tizen.org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk" target="_blank">install the latest vendor-provided graphic driver</a>. The Emulator, however, has some limitations and <a href="#target">differences compared to physical target devices</a>.</p>\r
+\r
+<p>The following table lists the basic features supported in the Emulator.</p>\r
+<table style="width: 100%" border="1">\r
+  <caption>Table: Supported Emulator features</caption>\r
+  <tbody>\r
+  <tr>\r
+  <th>Feature</th>             \r
+  <th>Detail</th>      \r
+  <th>Status</th>\r
+  <th>Notes</th>\r
+  </tr>\r
+       \r
+<tr>\r
+<td>Skin</td>\r
+<td><p>Skins are fitted to the screen resolution:</p> \r
+<ul>\r
+<li>Mobile\r
+       <ul><li>WVGA (480 x 800, default)</li>\r
+                <li>qHD (540 x 960)</li>\r
+                <li>HD (720 x 1280)</li>\r
+               </ul>\r
+       </li> \r
+<li>Wearable\r
+       <ul><li>320 x 320</li>\r
+       <li>360 x 360 (default)</li>\r
+       <li>360 x 480</li>\r
+               </ul>\r
+       </li>\r
+</ul> \r
+\r
+\r
+<p>4 orientation modes are supported:</p> \r
+<ul>\r
+<li>Portrait (default), landscape, reverse portrait, and reverse landscape</li></ul>\r
+\r
+</td>\r
+<td>Supported</td>\r
+<td>2 skin layout types are supported:\r
+<ul>\r
+       <li>Profile-specific skin</li>\r
+       <li>General purpose skin</li>\r
+</ul></td>\r
+</tr>\r
+<tr>\r
+<td>Touch</td>\r
+<td>Maru touchscreen device</td>\r
+<td>Supported</td>\r
+<td>Multi-touch is supported.</td>\r
+</tr>\r
+\r
+\r
+<tr>\r
+<td>Key</td>\r
+<td>HW keys, host keyboard, and SW keypad</td>\r
+<td>Supported</td>\r
+<td>The host keyboard is not supported for the Wearable Emulator.</td>\r
+</tr>\r
+<tr>\r
+<td>Rotary</td>\r
+<td>360 levels of clockwise or counter-clockwise rotation</td>\r
+<td>Supported</td>\r
+<td>-</td>\r
+</tr>\r
+\r
+\r
+<tr>\r
+<td>Display</td>\r
+<td>VGA card with 100 levels of brightness control</td>\r
+<td>Supported</td>\r
+<td>-</td>\r
+</tr>\r
+\r
+<tr>\r
+<td>OpenGL&reg; ES</td>\r
+<td>Compatible with OpenGL&reg; ES 1.1 and 2.0\r
+<p>OpenGL&reg; ES API pass-through via PCI</p>\r
+</td>\r
+<td>Supported\r
+</td>\r
+<td>The OpenGL&reg; ES 1.1 functionality is not guaranteed on the Emulator, unless the graphics hardware of your computer supports OpenGL&reg; 1.5.\r
+<p>The OpenGL&reg; ES 2.0 functionality is not guaranteed on the Emulator, unless the graphics hardware of your computer supports OpenGL&reg; 2.1.</p>\r
+<p>The host machine must support OpenGL&reg; 1.4.</p></td>\r
+</tr>\r
+\r
+\r
+<tr>\r
+<td>Sound</td>\r
+<td>AC97 device</td>\r
+<td>Supported</td>\r
+<td>Audio in: \r
+<ul>\r
+<li>Make sure that the input volume of the microphone is enough to record your voice or songs on the host machine.</li> \r
+\r
+<li>On Windows&reg; 7, inject the microphone into the host machine before starting the Emulator.</li> </ul>\r
+\r
+<p>Audio out:</p> \r
+<ul>\r
+<li>On Windows&reg; 7, enable at least 1 audio out device before starting the Emulator. Make sure that the volume icon in the tray is not disabled.</li> \r
+<li>While the Emulator is running, do not disable the audio out device, as it can lock the audio system of the guest platform.</li></ul>\r
+</td>\r
+</tr>\r
+\r
+<tr>\r
+<td>Network connection</td>\r
+<td>Virtio</td>\r
+<td>Supported</td>\r
+<td>Raw socket protocol, such as ICMP, is not supported.</td>\r
+</tr>\r
+\r
+\r
+<tr>\r
+<td>Emulator Control Panel</td>\r
+<td>The Emulator Control Panel (ECP) supports different features depending on the deice profile:\r
+<ul>\r
+       <li>Mobile\r
+               <ul>\r
+                       <li>Device Manager: Device Tree, Network, Host Directory Sharing</li>\r
+                       <li>Event Injector: Battery, RSSI, 3-Axis Sensor, Light, Proximity, Pressure, Ultraviolet, Heart Rate Monitor, Motion, Ear Jack, USB, SDCard, Location, Telephony</li>\r
+                       </ul>\r
+               </li>\r
+       <li>Wearable\r
+               <ul>\r
+                       <li>Device Manager: Network, Host Directory Sharing</li>\r
+                       <li>App Manager: Uninstaller</li>\r
+                       <li>Event Injector: Battery, 3-Axis Sensor, Light, Proximity, Pedometer, Pressure, Ultraviolet, Heart Rate Monitor, Gesture, USB</li>\r
+                       </ul>\r
+               </li>\r
+       </ul>\r
+\r
+</td>\r
+<td>Supported</td>\r
+<td>The Emulator Control Panel is a standalone tool, which replaces the Event Injector. It helps to control and monitor the Emulator features, and can be launched from the Emulator context menu.</td>\r
+</tr>\r
+\r
+\r
+<tr>\r
+<td>Camera</td>\r
+<td><p>Virtual camera device connecting a host machine&#39;s Webcam</p> \r
+<p>Support: preview, capture, and record</p>\r
+<p>Image format: YUYV, I420, and YV12</p> \r
+<p>Attributes: brightness and contrast </p>  \r
+<p>Resolution: 160 x 120, 176 x 144, 320 x 240, 352 x 288, and 640 x 480</p>\r
+<p>Video resolution: 1280 x 720 for the WVGA, 320 x 240 for the WQVGA, and 640 x 480 for the HVGA devices.</p> \r
+<p>The supported video codecs are MPEG-4, H.263, H.264, and VC-1 for both encoding and decoding.</p>\r
+</td>\r
+<td>Supported</td>\r
+<td>While recording a video using the Emulator, an audio-video synchronization error can occur depending on your computer hardware and performance.</td>\r
+</tr>\r
+\r
+<tr>\r
+<td>Bluetooth</td>\r
+<td>-</td>\r
+<td>Not supported</td>\r
+<td>-</td>\r
+</tr>\r
+\r
+<tr>\r
+<td>Wi-Fi</td>\r
+<td>-</td>\r
+<td>Not supported</td>\r
+<td>-</td>\r
+</tr>\r
+<tr>\r
+<td>Wi-Fi Direct&trade;</td>\r
+<td>-</td>\r
+<td>Not supported</td>\r
+<td>-</td>\r
+</tr>\r
+\r
+</tbody>\r
+</table>\r
+\r
+<h3 id="opengl" name="opengl">OpenGL&reg; ES Acceleration Support</h3>\r
+\r
+<p>For the Emulator to support OpenGL&reg; ES acceleration, you need: </p>\r
+<ul>\r
+<li>Graphics chipset driver that supports OpenGL&reg; 1.4 installed on the host machine</li>\r
+<li>All chipset vendors and driver versions available to support the OpenGL&reg; 1.4 standard</li>\r
+</ul>\r
+\r
+<table class="note">\r
+\r
+      <tbody>\r
+        <tr>\r
+          <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+          <td class="note">Emulator supports only ES 1.1, ES 2.0, and EGL&trade; 1.4 versions.</td>\r
+\r
+        </tr>\r
+      </tbody>\r
+    </table>\r
+\r
+<h3 id="target" name="target">Differences Between the Emulator and Target</h3>\r
+\r
+<p>The following tables describe the differences between a real target device and the Emulator. For more detailed information, see the differences in:</p>\r
+<ul>\r
+<li><a href="#input">Input system</a></li>\r
+<li><a href="#graphics">Graphics and display</a></li>\r
+<li><a href="#sensor">Virtual sensor</a></li>\r
+<li><a href="#telephony">Telephony</a></li>\r
+<li><a href="#power">Power management</a></li>\r
+<li><a href="#codec">Supported media formats and codecs</a></li>\r
+</ul>\r
+\r
+<table border="1">\r
+  <caption>Table: Comparison summary</caption>\r
+  <tbody>\r
+    <tr>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Subject</th>       \r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>\r
+    </tr>\r
+         <tr>\r
+                 <td rowspan ="5">Development environment</td>\r
+                 <td>Target</td>\r
+                 <td>Buy a target device or reference board (by model)</td>\r
+                 <td>Download the SDK (multi-profile and multi-model support)</td>\r
+        </tr>\r
+       \r
+               <tr>\r
+                 <td>Network</td>\r
+                 <td>Need Bluetooth</td>\r
+                 <td>Only the network environment</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>Target connection</td>\r
+                 <td>USB</td>\r
+                 <td>IPC (TCP/UDP)</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>Source and package management</td>\r
+                 <td>Source and package for target</td>\r
+                 <td>Source and package for the Emulator</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>Host Directory Sharing</td>\r
+                 <td>Not supported</td>\r
+                 <td>Supported</td>\r
+               </tr>\r
+        \r
+        <tr>\r
+                 <td rowspan ="10">Portability</td>\r
+                 <td>Screen resolution</td>\r
+                 <td>Fixed</td>\r
+                 <td>Configurable</td>\r
+           </tr>\r
+       \r
+               <tr>\r
+                 <td>RAM, storage size</td>\r
+                 <td>Fixed</td>\r
+                 <td>Configurable</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>2D and 3D acceleration API</td>\r
+                 <td>GPU-dependent</td>\r
+                 <td>GPU-independent (common set)</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>CP, telephony</td>\r
+                 <td>Fully supported</td>\r
+                 <td>Partially supported (only SMS and voice call)</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>Wi-Fi</td>\r
+                 <td>Fully supported</td>\r
+                 <td>Partially supported (using ethernet)</td>\r
+               </tr>\r
+                               \r
+               <tr>\r
+                 <td>Sensor</td>\r
+                 <td>Fully supported</td>\r
+                 <td>Partially supported (using the Emulator Control Panel)</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>PnP, external connection</td>\r
+                 <td>Fully supported</td>\r
+                 <td>Partially supported (using the Emulator Control Panel)</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>Camera</td>\r
+                 <td>Fully supported</td>\r
+                 <td>Partially supported (preview, capture, recording, contrast, and brightness)</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>Vibration, haptic</td>\r
+                 <td>Fully supported</td>\r
+                 <td>Not supported</td>\r
+               </tr>\r
+\r
+               <tr>\r
+                 <td>Bluetooth</td>\r
+                 <td>Fully supported</td>\r
+                 <td>Not supported</td>\r
+               </tr>  \r
+  \r
+               <tr>\r
+                 <td rowspan ="3">Performance</td>  \r
+                 <td>CPU performance</td>\r
+                 <td>Mobile CPU</td>\r
+                 <td>Desktop CPU (with hardware virtualization)</td>\r
+          </tr>\r
+       \r
+               <tr>\r
+                 <td>GPU performance</td>\r
+                 <td>Real GPU</td>\r
+                 <td>Desktop GPU (relatively slow)</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>I/O performance</td>\r
+                 <td>Real HW I/O</td>\r
+                 <td>Emulated I/O (relatively slow)</td>\r
+               </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h4 id="input" name="input">Input System </h4>\r
+\r
+<table border="1">\r
+  <caption>Table: Input differences</caption>\r
+  <tbody>\r
+\r
+   <tr>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>       \r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>\r
+   </tr>\r
+\r
+\r
+       <tr>\r
+                 <td>Touch screen panel</td>\r
+                 <td>Real device and driver</td>\r
+                 <td>Virtual (VirtIO) device and driver</td>\r
+               </tr>\r
+   \r
+   \r
+        <tr>\r
+                 <td>Host keyboard and hardware key</td>\r
+                 <td>Real device and driver</td>\r
+                 <td>Virtual (VirtIO) device and driver</td>\r
+               </tr>\r
+   </tbody>  \r
+</table>\r
+\r
+<h4 id="graphics" name="graphics">Graphics and display</h4>\r
+\r
+ \r
+ <table border="1">\r
+  <caption>Table: Graphics and display differences</caption>\r
+  <tbody>\r
+\r
+   <tr>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>       \r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>\r
+   </tr>\r
+\r
+  \r
+        <tr>\r
+                 <td>Framebuffer device</td>\r
+                 <td>Display controller in the processor</td>\r
+                 <td>Virtual VGA card</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td>Backlight control</td>\r
+                 <td>LDI (LCD Driver IC) command</td>\r
+                 <td>Additional virtual device and driver</td>\r
+               </tr>\r
+               \r
+   </tbody>  \r
+</table>\r
+   \r
+ <h4 id="sensor" name="sensor">Virtual Sensor (Emulator Control Panel)</h4>\r
+   \r
+  \r
+<table border="1">\r
+  <caption>Table: Virtual sensor differences</caption>\r
+  <tbody>  \r
+\r
+  <tr>\r
+  <th colspan="2">Category</th>\r
+     <th>Physical target</th>\r
+        <th>Emulator</th>\r
+  </tr>\r
+ \r
+        <tr>\r
+     <td rowspan="8">Sensor</td>\r
+        <td>Acceleration</td>\r
+  <td>Receives the actual acceleration value of the device.</td>\r
+  <td>Receives the virtual acceleration value through the Emulator Control Panel.\r
+  <p>If the Emulator orientation is portrait, the acceleration values are approximately 0, -9.81, and 0 degrees.</p></td>\r
+</tr>\r
+  \r
+   \r
+   <tr>\r
+        <td>Gyro</td>\r
+     <td>Receives the actual gyroscope value of the device.</td>\r
+     <td>Receives the virtual gyroscope value through the Emulator Control Panel.</td>\r
+   </tr>\r
+   \r
+   <tr>\r
+        <td>Geomagnetic</td>\r
+     <td>Receives the actual geomagnetic value of the device.</td>\r
+     <td>Receives the virtual geomagnetic value through the Emulator Control Panel.\r
+<p>If the Emulator orientation is portrait, the y axis points to true north and the magnetic tesla values are 1, 0, and -10 degrees.</p></td>\r
+   </tr>\r
+   \r
+   \r
+   <tr>\r
+        <td>Proximity</td>\r
+     <td>Receives the actual proximity value of the device.</td>\r
+     <td>Receives the virtual proximity value through the Emulator Control Panel.\r
+        <p>You can register an event handler for the proximity sensor and test it with the Emulator Control Panel. However, the screen does not power off during the event because the Emulator does not connect to the power manager.</p>\r
+    </td>\r
+   </tr>\r
+   \r
+   \r
+   <tr>\r
+        <td>Light</td>\r
+     <td>Receives the actual ambient light value of the device.</td>\r
+     <td>Receives the virtual ambient light value through the Emulator Control Panel.\r
+        <p>You can register an event handler for the light sensor and test it with the Emulator Control Panel. However, in order to test the screen brightness change, the brightness setting must be automatic in the setting application. </p>\r
+    </td>\r
+   </tr>\r
+   \r
+   <tr>\r
+        <td>Pressure</td>\r
+     <td>Receives the actual pressure value of the device.</td>\r
+     <td>Receives the virtual actual pressure value through the Emulator Control Panel.\r
+    </td>\r
+   </tr>\r
+   \r
+   <tr>\r
+        <td>Ultraviolet</td>\r
+     <td>Receives the actual ultraviolet value of the device.</td>\r
+     <td>Receives the virtual actual ultraviolet value through the Emulator Control Panel.\r
+    </td>\r
+   </tr>\r
+   \r
+   <tr>\r
+        <td>Heart Rate Monitor</td>\r
+     <td>Receives the actual heart rate and peak-to-peak values of the device.</td>\r
+     <td>Receives the virtual actual heart rate and peak-to-peak values through the Emulator Control Panel.\r
+    </td>\r
+   </tr>\r
+ \r
+        <tr>\r
+    <td rowspan="4">Device</td>\r
+         <td>Battery</td>\r
+     <td>Receives the actual battery value of the device.</td>\r
+     <td>Receives the virtual battery value through the Emulator Control Panel.\r
+        <p>You can change the battery level and the charger connection status.</p> \r
+    </td>\r
+       </tr>\r
+   \r
+   <tr>\r
+         <td>Earjack</td>\r
+     <td>Receives the actual earjack connection event of the device.</td>\r
+     <td>Receives the earjack connection event through the Emulator Control Panel.\r
+        <p>You can select a 3-wire or 4-wire connection, or set the earjack as disconnected.</p> \r
+    </td>\r
+       </tr>\r
+   \r
+   \r
+   <tr>\r
+         <td>USB</td>\r
+     <td>Receives the actual USB connection event of the device.</td>\r
+     <td>Receives the USB connection event through the Emulator Control Panel.</td>\r
+       </tr>\r
+   \r
+   <tr>\r
+         <td>RSSI</td>\r
+     <td>Receives the actual RSSI value of the device.</td>\r
+     <td>Receives the virtual RSSI value through the Emulator Control Panel.</td>\r
+       </tr>\r
+ \r
+        <tr>\r
+    <td rowspan="4">Location</td>\r
+         <td>Log</td>\r
+     <td>Supported by lbsFW.</td>\r
+     <td>Receives the virtual GPS log file through the Emulator Control Panel.\r
+        <p>You can use a log file of the NMEA format.</p>\r
+    </td>\r
+       </tr>\r
+   \r
+   <tr>\r
+         <td>Manual</td>\r
+     <td>Not supported.</td>\r
+     <td>Receives the virtual longitude and latitude values through the Emulator Control Panel.</td>\r
+       </tr>\r
+   \r
+   \r
+   <tr>\r
+         <td>Map</td>\r
+     <td>Not supported.</td>\r
+     <td>Receives the virtual longitude, latitude, altitude, and horizontal accuracy values through the Emulator Control Panel map.</td>\r
+       </tr>\r
+   \r
+   <tr>\r
+         <td>Auto</td>\r
+     <td>Receives the actual GPS coordinates of the device.</td>\r
+     <td>Not supported.</td>\r
+       </tr>\r
+   \r
+   </tbody>\r
+ </table>\r
+\r
+\r
+<h4 id="telephony" name="telephony">Telephony</h4>\r
+\r
+ <table border="1">\r
+  <caption>Table: Telephony differences</caption>\r
+  <tbody>  \r
+ \r
+ <tr>\r
+    <th colspan="2">Category</th>\r
+       <th>Physical target</th>\r
+       <th>Emulator</th>\r
+   </tr>\r
+   <tr>\r
+ <td rowspan="2">Telephony</td>\r
+     <td>Call</td>\r
+        <td>Calls and video calls are supported.</td>\r
+        <td>Call waiting, outgoing call barring, and voice calls with the Emulator Control Panel are supported.\r
+        <p>Video calls, call forwarding, incoming call barring, and Emulator-to-Emulator calls are not supported.</p></td>\r
+        </tr>\r
+        \r
+        <tr>\r
+     <td>SMS</td>\r
+        <td>SMS messaging is supported.</td>\r
+        <td>SMS messaging with the Emulator Control Panel is supported.\r
+        <p>Sending Emulator-to-Emulator SMS messages is not supported.</p></td>\r
+        </tr>\r
+ </tbody>\r
+ </table> \r
+   \r
+   \r
+<h4 id="power" name="power">Power Management</h4>\r
+ \r
+ <table border="1">\r
+  <caption>Table: Power management differences</caption>\r
+  <tbody>  \r
+ \r
+ <tr>\r
+    <th>Mode</th>\r
+       <th>Physical target</th>\r
+    <th>Emulator</th>\r
+</tr>\r
+ \r
+ \r
+ <tr>\r
+    <td>Display on/off</td>\r
+    <td>Display controller in the processor</td>\r
+    <td>Internal emulation</td>\r
+ </tr>\r
+ \r
+ <tr>\r
+    <td>Power off</td>\r
+    <td>Power management in the processor</td>\r
+    <td>ACPI (Advanced Configuration and Power Interface)</td>\r
+ </tr>\r
+</tbody> \r
+</table>\r
+\r
+\r
+<h4 id="codec" name="codec">Supported Media Formats and Codecs</h4>\r
+\r
+ <table border="1">\r
+  <caption>Table: Media format and codec differences</caption>\r
+  <tbody>  \r
+ \r
+ <tr>\r
+       <th colspan="2">Category</th>\r
+       <th>Physical target</th>\r
+       <th>Emulator</th>\r
+</tr>\r
+   <tr>\r
+ <td rowspan="1">Decoder</td>\r
+     \r
+     <td>FLAC</td>\r
+        <td>Supported</td>\r
+        <td>Not supported</td>\r
+        </tr> \r
+ </tbody>\r
+ </table> \r
+ \r
+ \r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.devtools/html/common_tools/event_injec.htm b/org.tizen.devtools/html/common_tools/event_injec.htm
index d508719..634ff47 100644 (file)
--- a/org.tizen.devtools/html/common_tools/event_injec.htm
+++ b/org.tizen.devtools/html/common_tools/event_injec.htm
@@ -1,305 +1,305 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>Event Injector</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#device">Providing Device Data</a></li>
-                               <li><a href="#location">Providing Location Data</a></li>
-                               <li><a href="#nfc">Providing NFC Data</a></li>
-                               <li><a href="#sensor">Providing Sensor Data</a></li>
-                               <li><a href="#telephony">Providing Telephony Features</a></li>
-                               <li><a href="#memory">Providing Memory Data</a></li>
-               </ul>
-       </div></div>
-</div>
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Event Injector</h1>
-
-<p>In the <a href="emulator.htm#ecp">Emulator Control Panel</a> (ECP), you can inject various types of events.</p>
-
-<h2 id="device" name="device">Providing Device Data</h2>
-
-<p>The Emulator Control Panel (ECP) can be used to simulate device data, such as the battery level, adding or removing a ear jack (headset) or USB device, setting RSSI (remote signal strength indicator) information, and attaching and detaching the SD card in the <strong>Device</strong> tab:</p>
-
-<ul>
-
-<li>Setting the battery level
-<p>In the <strong>Battery</strong> tab, set the battery level using the <strong>Level</strong> slider. To set the charger status to connected or disconnected, select the appropriate <strong>Charger</strong> radio button.</p></li>
-
-
-<li>Adding or removing an ear jack
-<p>In the <strong>EarJack</strong> tab, select the ear jack setting:</p>
-<ul>
-  <li>3 Wire</li>
-  <li>4 Wire</li>
-  <li>Disconnect</li>
-</ul></li>
-
-<li>Adding or removing a USB device
-<p>In the <strong>USB</strong> tab, set the USB device setting to the connected or disconnected state.</p>
-</li>
-
-<li>Setting the RSSI information
-<p>In the <strong>RSSI</strong> tab, set the RSSI information level using the <strong>Level</strong> slider.</p></li>
-
-
-<li>Attaching and detaching the SD card
-<p>In the <strong>SD Card</strong> tab, select the 4G, 8G, 16G, or 32G SD card and attach it to the Emulator at runtime.</p>
-
-
-<table class="note">
-      <tbody>
-        <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">The same SD card cannot be attached to multiple Emulators at the same time.</td>
-        </tr>
-      </tbody>
-    </table></li></ul>
-       
-<p>The device information set using the ECP is reflected on the indicator bar of the device.</p>
-
-
-<h2 id="location" name="location">Providing Location Data</h2>
-
-<p>The Emulator Control Panel (ECP) can be used to provide imitated responses to location data requests by loading GPS log files, manually entering location coordinates, or injecting markers directly on the map in the <strong>Location</strong> tab:</p>
-
-<ul><li>Loading a GPS log file
-<p>In the <strong>Log</strong> section, select the pre-logged GPS data file (NMEA183 format) and click <strong>Inject Log</strong> to send the location data to the Emulator.</p></li>
-
-<li>Manually entering location coordinates
-<p>In the <strong>Manual</strong> section, enter the coordinates and click <strong>Inject Location</strong> to send the location data to the Emulator. The range of the latitude, longitude, altitude, and horizontal accuracy is from -90 to 90, -180 to 180, -300 to 100000, and 0 to 100000, respectively.</p></li>
-
-
-<li>Injecting markers on the map
-<p>In the <strong>Map</strong> section, right-click the desired map locations and click <strong>Inject Markers </strong> to send the location data to the Emulator.</p>
-</li></ul>
-
-<h2 id="nfc" name="nfc">Providing NFC Data</h2>
-
-<p>The Emulator Control Panel (ECP) can be used to test the near-field communication (NFC) features, such as NFC data exchange format (NDEF) events, NFC tag detection, and peer-to-peer (P2P) data connections in the <strong>NFC</strong> tab.</p>
-
-<table class="note">
-       <tbody>
-               <tr>
-          <th class="note">Note</th>
-        </tr>
-        <tr>
-          <td class="note">The Event Injector view sends only NFC-related events to the Emulator. There is no actual information exchange between the Event Injector and Emulator. Therefore, for features such as writing information to an NFC tag, the Emulator simply displays a success message.</td>
-
-        </tr>
-    </tbody>
-</table>
-
-
-<h3 id="ndef" name="ndef">Creating NDEF Messages</h3>
-<p>An NDEF message contains one or more NDEF records.</p>
-
-<p>In the <strong>NDEF Message</strong> section:</p>
-<ol>
-<li>Select the record type name format.</li>
-<li>Enter the record type name, ID, and payload.</li>
-<li>Click <strong>Add</strong>.
-<p>You can add multiple NDEF records as required in the NDEF message.</p></li>
-</ol>
-<p>Click <strong>Edit</strong> or <strong>Remove</strong> to modify or delete a selected record.</p>
-
-<h3 id="nfctags" name="nfctags">Attaching and Detaching NFC Tags</h3>
-
-<p>In the <strong>NFC Tag</strong> section:</p>
-<ol>
-<li>Select the tag type.</li>
-<li>Click <strong>Tag Attach</strong>.
-<p>If the NDEF records list is not empty, an NDEF message is created using this list and the attach message is sent to the Emulator with the NDEF message.</p></li>
-<li>When the tag operation is finished, click <strong>Tag Detach</strong>.</li>
-</ol>
-
-<h3 id="p2p" name="p2p">Creating a P2P data Connection</h3>
-
-<p>In the <strong>Peer to Peer</strong> section:</p>
-<ol>
-<li>To send the Emulator the discovered state of the new device, click <strong>P2P Discovered</strong>.</li>
-<li>To send the Emulator an NDEF message, click <strong>P2P Send</strong>.</li>
-<li>To send the Emulator the detached state of the connected device, click <strong>P2P Detached</strong>.</li>
-</ol>
-
-
-<h2 id="sensor" name="sensor">Providing Sensor Data</h2>
-<p>The Emulator Control Panel (ECP) can be used to imitate user actions, such as shaking, throwing, and tilting the device. You can generate 
-single sensor events, or design sensor profiles for different sensors, containing sensor data that describes a series 
-of sensor events. </p>
-
-<p>The sensor profiles have a simple data structure and are stored in TXT files. The sensor data can be input in the specified data structure from the <a href="#axis">3-axis</a>, <a href="#light">light, proximity, pressure, ultraviolet, or HRM</a> sensors.</p>
-<p>The sensor profiles are of 2 types: </p>
-<ul>
-<li>With timestamp
- <p>The Emulator tries to inject each item at its specified time. Events are discarded if they violate certain 
- performance, resource, or logic limits.</p></li> 
-<li>Without timestamp
- <p>The Emulator injects each item without any specific time considerations.
-  Profile data is not discarded.</p></li> 
-</ul>
-
-<h3 id="axis" name="axis">Controlling 3-axis Sensors</h3>
-<p>The ECP can be used to adjust the acceleration, magnetic, and gyro sensors of the Emulator in the <strong>Event Injector &gt; Sensor &gt; 3-Axis Sensors</strong> tab.</p>
-
-<p>On the <strong>GUI</strong> subtab, you can select which sensors are active, and you can move the Emulator using the 3 axis sliders or the direction buttons (<strong>Portrait</strong>, <strong>Landscape</strong>, <strong>Reverse Portrait</strong>, and <strong>Reverse Landscape</strong>). The Emulator image shows the current position of the Emulator.</p>
-
-<p>To better control the movement, select the <strong>With axis</strong> check box to see the axes in the Emulator image. You can also fix the y- or z-axis by selecting the <strong>X/Z</strong> or <strong>X/Y</strong> radio button, respectively. To change the Emulator accelerator value in the direction of the movement, select the <strong>Move</strong> radio button.</p>
-
-<p>To adjust the individual sensors:</p>
-
-<ul>
-<li>Acceleration sensor:
-<p>This sensor is used to control the acceleration values along the coordinate axes. If the Emulator is standing, the y axis gets the acceleration value -1g as gravitational acceleration.</p>
-
-<p>To change the acceleration value manually, use the sliders on the <strong>Acceleration</strong> subtab to set a value between -2 and 2 g. </p>
-<p>You can input a log file with up to 5 repeats for the acceleration sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>
-
-
-
-<li>Magnetic sensor:
-<p>This sensor is used to control the Emulator&#39;s magnetic tesla value along the coordinate axes. If the Emulator is standing, the magnetic tesla value is set by heading for real north (azimuth 0).</p>
-
-<p>To change the magnetic tesla value manually, use the sliders on the <strong>Magnetic</strong> subtab to set a value between -2000 and 2000 uT. </p>
-<p>You can input a log file with up to 5 repeats for the magnetic sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>
-
-
-<li>Gyro sensor:
-<p>This sensor is used to control the Emulator&#39;s rotation angle per second along the coordinate axes.</p>
-
-<p>To change the gyro value manually, use the sliders on the <strong>Gyro</strong> subtab to set a value between -10 and 10 rad. </p>
-<p>You can input a log file with up to 5 repeats for the gyro sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>
-</ul>
-
-
-<h3 id="light" name="light">Controlling Other Sensors</h3>
-
-<p>You can control the light, proximity, pressure, ultraviolet, and HRM sensor of the Emulator under the <strong>Event Injector &gt; Sensor</strong> tab:</p>
-
-<ul><li>
-<p>To control the light sensor, set the <strong>Lux</strong> value in the <strong>Light</strong>  tab. The range of this value is from 0 to 65535.</p></li>
-
-<li><p>To control the proximity sensor, set it on or off in the <strong>Proximity</strong> tab.</p></li>
-
-<li><p>To control the pressure sensor, set the <strong>hPa</strong> (Hectopascal) value in the <strong>Pressure</strong> tab. The range of this value is from 260 to 1260.</p></li>
-
-<li><p>To control the ultraviolet sensor, use the slider in the <strong>Ultraviolet</strong> tab. The unit is UV index and the range of this value is from 0 to 15.0.</p></li>
-
-<li><p>To control the HRM (Heart Rate Monitor) sensor, use the sliders in the <strong>Heart Rate Monitor</strong> tab. You can set the <strong>Heart Rate</strong> value between 0 and 220, and the <strong>Peek-to-Peek</strong> value between 0 and 5000.</p></li>
-
-</ul>
-
-<h2 id="telephony" name="telephony">Providing Telephony Features</h2>
-
-<p>The Emulator Control Panel (ECP) can be used to generate <a href="#call">incoming calls</a> and <a href="#message">messages</a> in the <strong>Telephony</strong> tab.</p>
-
-<h3 id="call" name="call">Generating Incoming Calls</h3>
-<p>Incoming calls are generated in the <strong>Event Injector &gt; Telephony &gt; Call</strong> tab.</p>
-
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-    <tr>
-      <td class="note">A Mobile Termination (MT) call is made from the Event Injector view to the Emulator. A Mobile Origination (MO) call is made from the Emulator to the Event Injector view using the phone application of the Emulator.</td>
-    </tr>
-  </tbody>
-</table>
-
-<p>To make an MT call:</p>
-<ol>
-  <li>Enter the phone number you want to imitate the call from.</li>
-  <li>Click <strong>Connect</strong>.</li>
-  <li><p>To hide the phone number on the Emulator, select the <strong>Hidden</strong> option.</p>
-  <p>The caller ID on the Emulator is set to &quot;Unknown&quot;.</p></li>
-</ol>
-
-<p>To make an MO call, use the Emulator&#39;s phone application:</p>
-<ol>
-  <li>To ready the Emulator for the connection, click <strong>Alert</strong>.</li>
-  <li>To ready the Emulator for the call, click <strong>Connect</strong>.</li>
-</ol>
-
-
-<h3 id="message" name="message">Generating Messages</h3>
-<p>SMS messages are generated in the <strong>Event Injector &gt; Telephony &gt; Messaging</strong> tab. After sending a message, your application waits for the asynchronous send status message. You can generate this status report for SMS messages using the same <strong>Messaging</strong> tab.</p>
-
-<p>To generate an SMS message:</p>
-<ol>
-  <li>Enter the sender phone number you want to imitate.</li>
-  <li>Enter the message body text and click <strong>Send Msg</strong>.</li>
-</ol>
-
-<p>To generate status reports, set the sending status value for the SMS message:</p>
-<ul>
-  <li>SMS OK (Success)</li>
-  <li>SMS Not Available</li>
-</ul>
-
-<p>You can also generate MMS message status reports. To generate MMS status reports, set the sending status value for the MMS message:</p>
-<ul>
-  <li>MMS OK (Success)</li>
-  <li>MMS Failure</li>
-</ul>
-
-<h2 id="memory" name="memory">Providing Memory Data</h2>
-
-<p>The Emulator Control Panel (ECP) can be used to simulate low memory status in the <strong>Memory</strong> tab.</p>
-
-<p>Set the low memory status using the radio buttons:</p>
-<ul>
-  <li>Hard-Warning (40 MB and under)</li>
-  <li>Soft-Warning (60 MB and under)</li>
-  <li>Normal (sufficient)</li>
-</ul>
-
-
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>Event Injector</title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                               <li><a href="#device">Providing Device Data</a></li>\r
+                               <li><a href="#location">Providing Location Data</a></li>\r
+                               <li><a href="#nfc">Providing NFC Data</a></li>\r
+                               <li><a href="#sensor">Providing Sensor Data</a></li>\r
+                               <li><a href="#telephony">Providing Telephony Features</a></li>\r
+                               <li><a href="#memory">Providing Memory Data</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Event Injector</h1>\r
+\r
+<p>In the <a href="emulator.htm#ecp">Emulator Control Panel</a> (ECP), you can inject various types of events.</p>\r
+\r
+<h2 id="device" name="device">Providing Device Data</h2>\r
+\r
+<p>The Emulator Control Panel (ECP) can be used to simulate device data, such as the battery level, adding or removing a ear jack (headset) or USB device, setting RSSI (remote signal strength indicator) information, and attaching and detaching the SD card in the <strong>Device</strong> tab:</p>\r
+\r
+<ul>\r
+\r
+<li>Setting the battery level\r
+<p>In the <strong>Battery</strong> tab, set the battery level using the <strong>Level</strong> slider. To set the charger status to connected or disconnected, select the appropriate <strong>Charger</strong> radio button.</p></li>\r
+\r
+\r
+<li>Adding or removing an ear jack\r
+<p>In the <strong>EarJack</strong> tab, select the ear jack setting:</p>\r
+<ul>\r
+  <li>3 Wire</li>\r
+  <li>4 Wire</li>\r
+  <li>Disconnect</li>\r
+</ul></li>\r
+\r
+<li>Adding or removing a USB device\r
+<p>In the <strong>USB</strong> tab, set the USB device setting to the connected or disconnected state.</p>\r
+</li>\r
+\r
+<li>Setting the RSSI information\r
+<p>In the <strong>RSSI</strong> tab, set the RSSI information level using the <strong>Level</strong> slider.</p></li>\r
+\r
+\r
+<li>Attaching and detaching the SD card\r
+<p>In the <strong>SD Card</strong> tab, select the 4G, 8G, 16G, or 32G SD card and attach it to the Emulator at runtime.</p>\r
+\r
+\r
+<table class="note">\r
+      <tbody>\r
+        <tr>\r
+          <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+          <td class="note">The same SD card cannot be attached to multiple Emulators at the same time.</td>\r
+        </tr>\r
+      </tbody>\r
+    </table></li></ul>\r
+       \r
+<p>The device information set using the ECP is reflected on the indicator bar of the device.</p>\r
+\r
+\r
+<h2 id="location" name="location">Providing Location Data</h2>\r
+\r
+<p>The Emulator Control Panel (ECP) can be used to provide imitated responses to location data requests by loading GPS log files, manually entering location coordinates, or injecting markers directly on the map in the <strong>Location</strong> tab:</p>\r
+\r
+<ul><li>Loading a GPS log file\r
+<p>In the <strong>Log</strong> section, select the pre-logged GPS data file (NMEA183 format) and click <strong>Inject Log</strong> to send the location data to the Emulator.</p></li>\r
+\r
+<li>Manually entering location coordinates\r
+<p>In the <strong>Manual</strong> section, enter the coordinates and click <strong>Inject Location</strong> to send the location data to the Emulator. The range of the latitude, longitude, altitude, and horizontal accuracy is from -90 to 90, -180 to 180, -300 to 100000, and 0 to 100000, respectively.</p></li>\r
+\r
+\r
+<li>Injecting markers on the map\r
+<p>In the <strong>Map</strong> section, right-click the desired map locations and click <strong>Inject Markers </strong> to send the location data to the Emulator.</p>\r
+</li></ul>\r
+\r
+<h2 id="nfc" name="nfc">Providing NFC Data</h2>\r
+\r
+<p>The Emulator Control Panel (ECP) can be used to test the near-field communication (NFC) features, such as NFC data exchange format (NDEF) events, NFC tag detection, and peer-to-peer (P2P) data connections in the <strong>NFC</strong> tab.</p>\r
+\r
+<table class="note">\r
+       <tbody>\r
+               <tr>\r
+          <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+          <td class="note">The Event Injector view sends only NFC-related events to the Emulator. There is no actual information exchange between the Event Injector and Emulator. Therefore, for features such as writing information to an NFC tag, the Emulator simply displays a success message.</td>\r
+\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+\r
+\r
+<h3 id="ndef" name="ndef">Creating NDEF Messages</h3>\r
+<p>An NDEF message contains one or more NDEF records.</p>\r
+\r
+<p>In the <strong>NDEF Message</strong> section:</p>\r
+<ol>\r
+<li>Select the record type name format.</li>\r
+<li>Enter the record type name, ID, and payload.</li>\r
+<li>Click <strong>Add</strong>.\r
+<p>You can add multiple NDEF records as required in the NDEF message.</p></li>\r
+</ol>\r
+<p>Click <strong>Edit</strong> or <strong>Remove</strong> to modify or delete a selected record.</p>\r
+\r
+<h3 id="nfctags" name="nfctags">Attaching and Detaching NFC Tags</h3>\r
+\r
+<p>In the <strong>NFC Tag</strong> section:</p>\r
+<ol>\r
+<li>Select the tag type.</li>\r
+<li>Click <strong>Tag Attach</strong>.\r
+<p>If the NDEF records list is not empty, an NDEF message is created using this list and the attach message is sent to the Emulator with the NDEF message.</p></li>\r
+<li>When the tag operation is finished, click <strong>Tag Detach</strong>.</li>\r
+</ol>\r
+\r
+<h3 id="p2p" name="p2p">Creating a P2P data Connection</h3>\r
+\r
+<p>In the <strong>Peer to Peer</strong> section:</p>\r
+<ol>\r
+<li>To send the Emulator the discovered state of the new device, click <strong>P2P Discovered</strong>.</li>\r
+<li>To send the Emulator an NDEF message, click <strong>P2P Send</strong>.</li>\r
+<li>To send the Emulator the detached state of the connected device, click <strong>P2P Detached</strong>.</li>\r
+</ol>\r
+\r
+\r
+<h2 id="sensor" name="sensor">Providing Sensor Data</h2>\r
+<p>The Emulator Control Panel (ECP) can be used to imitate user actions, such as shaking, throwing, and tilting the device. You can generate \r
+single sensor events, or design sensor profiles for different sensors, containing sensor data that describes a series \r
+of sensor events. </p>\r
+\r
+<p>The sensor profiles have a simple data structure and are stored in TXT files. The sensor data can be input in the specified data structure from the <a href="#axis">3-axis</a>, <a href="#light">light, proximity, pressure, ultraviolet, or HRM</a> sensors.</p>\r
+<p>The sensor profiles are of 2 types: </p>\r
+<ul>\r
+<li>With timestamp\r
+ <p>The Emulator tries to inject each item at its specified time. Events are discarded if they violate certain \r
+ performance, resource, or logic limits.</p></li> \r
+<li>Without timestamp\r
+ <p>The Emulator injects each item without any specific time considerations.\r
+  Profile data is not discarded.</p></li> \r
+</ul>\r
+\r
+<h3 id="axis" name="axis">Controlling 3-axis Sensors</h3>\r
+<p>The ECP can be used to adjust the acceleration, magnetic, and gyro sensors of the Emulator in the <strong>Event Injector &gt; Sensor &gt; 3-Axis Sensors</strong> tab.</p>\r
+\r
+<p>On the <strong>GUI</strong> subtab, you can select which sensors are active, and you can move the Emulator using the 3 axis sliders or the direction buttons (<strong>Portrait</strong>, <strong>Landscape</strong>, <strong>Reverse Portrait</strong>, and <strong>Reverse Landscape</strong>). The Emulator image shows the current position of the Emulator.</p>\r
+\r
+<p>To better control the movement, select the <strong>With axis</strong> check box to see the axes in the Emulator image. You can also fix the y- or z-axis by selecting the <strong>X/Z</strong> or <strong>X/Y</strong> radio button, respectively. To change the Emulator accelerator value in the direction of the movement, select the <strong>Move</strong> radio button.</p>\r
+\r
+<p>To adjust the individual sensors:</p>\r
+\r
+<ul>\r
+<li>Acceleration sensor:\r
+<p>This sensor is used to control the acceleration values along the coordinate axes. If the Emulator is standing, the y axis gets the acceleration value -1g as gravitational acceleration.</p>\r
+\r
+<p>To change the acceleration value manually, use the sliders on the <strong>Acceleration</strong> subtab to set a value between -2 and 2 g. </p>\r
+<p>You can input a log file with up to 5 repeats for the acceleration sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>\r
+\r
+\r
+\r
+<li>Magnetic sensor:\r
+<p>This sensor is used to control the Emulator&#39;s magnetic tesla value along the coordinate axes. If the Emulator is standing, the magnetic tesla value is set by heading for real north (azimuth 0).</p>\r
+\r
+<p>To change the magnetic tesla value manually, use the sliders on the <strong>Magnetic</strong> subtab to set a value between -2000 and 2000 uT. </p>\r
+<p>You can input a log file with up to 5 repeats for the magnetic sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>\r
+\r
+\r
+<li>Gyro sensor:\r
+<p>This sensor is used to control the Emulator&#39;s rotation angle per second along the coordinate axes.</p>\r
+\r
+<p>To change the gyro value manually, use the sliders on the <strong>Gyro</strong> subtab to set a value between -10 and 10 rad. </p>\r
+<p>You can input a log file with up to 5 repeats for the gyro sensor. The log file format is: &quot;milliseconds, x, y, z&quot;.</p></li>\r
+</ul>\r
+\r
+\r
+<h3 id="light" name="light">Controlling Other Sensors</h3>\r
+\r
+<p>You can control the light, proximity, pressure, ultraviolet, and HRM sensor of the Emulator under the <strong>Event Injector &gt; Sensor</strong> tab:</p>\r
+\r
+<ul><li>\r
+<p>To control the light sensor, set the <strong>Lux</strong> value in the <strong>Light</strong>  tab. The range of this value is from 0 to 65535.</p></li>\r
+\r
+<li><p>To control the proximity sensor, set it on or off in the <strong>Proximity</strong> tab.</p></li>\r
+\r
+<li><p>To control the pressure sensor, set the <strong>hPa</strong> (Hectopascal) value in the <strong>Pressure</strong> tab. The range of this value is from 260 to 1260.</p></li>\r
+\r
+<li><p>To control the ultraviolet sensor, use the slider in the <strong>Ultraviolet</strong> tab. The unit is UV index and the range of this value is from 0 to 15.0.</p></li>\r
+\r
+<li><p>To control the HRM (Heart Rate Monitor) sensor, use the sliders in the <strong>Heart Rate Monitor</strong> tab. You can set the <strong>Heart Rate</strong> value between 0 and 220, and the <strong>Peek-to-Peek</strong> value between 0 and 5000.</p></li>\r
+\r
+</ul>\r
+\r
+<h2 id="telephony" name="telephony">Providing Telephony Features</h2>\r
+\r
+<p>The Emulator Control Panel (ECP) can be used to generate <a href="#call">incoming calls</a> and <a href="#message">messages</a> in the <strong>Telephony</strong> tab.</p>\r
+\r
+<h3 id="call" name="call">Generating Incoming Calls</h3>\r
+<p>Incoming calls are generated in the <strong>Event Injector &gt; Telephony &gt; Call</strong> tab.</p>\r
+\r
+<table class="note">\r
+  <tbody>\r
+    <tr>\r
+      <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+      <td class="note">A Mobile Termination (MT) call is made from the Event Injector view to the Emulator. A Mobile Origination (MO) call is made from the Emulator to the Event Injector view using the phone application of the Emulator.</td>\r
+    </tr>\r
+  </tbody>\r
+</table>\r
+\r
+<p>To make an MT call:</p>\r
+<ol>\r
+  <li>Enter the phone number you want to imitate the call from.</li>\r
+  <li>Click <strong>Connect</strong>.</li>\r
+  <li><p>To hide the phone number on the Emulator, select the <strong>Hidden</strong> option.</p>\r
+  <p>The caller ID on the Emulator is set to &quot;Unknown&quot;.</p></li>\r
+</ol>\r
+\r
+<p>To make an MO call, use the Emulator&#39;s phone application:</p>\r
+<ol>\r
+  <li>To ready the Emulator for the connection, click <strong>Alert</strong>.</li>\r
+  <li>To ready the Emulator for the call, click <strong>Connect</strong>.</li>\r
+</ol>\r
+\r
+\r
+<h3 id="message" name="message">Generating Messages</h3>\r
+<p>SMS messages are generated in the <strong>Event Injector &gt; Telephony &gt; Messaging</strong> tab. After sending a message, your application waits for the asynchronous send status message. You can generate this status report for SMS messages using the same <strong>Messaging</strong> tab.</p>\r
+\r
+<p>To generate an SMS message:</p>\r
+<ol>\r
+  <li>Enter the sender phone number you want to imitate.</li>\r
+  <li>Enter the message body text and click <strong>Send Msg</strong>.</li>\r
+</ol>\r
+\r
+<p>To generate status reports, set the sending status value for the SMS message:</p>\r
+<ul>\r
+  <li>SMS OK (Success)</li>\r
+  <li>SMS Not Available</li>\r
+</ul>\r
+\r
+<p>You can also generate MMS message status reports. To generate MMS status reports, set the sending status value for the MMS message:</p>\r
+<ul>\r
+  <li>MMS OK (Success)</li>\r
+  <li>MMS Failure</li>\r
+</ul>\r
+\r
+<h2 id="memory" name="memory">Providing Memory Data</h2>\r
+\r
+<p>The Emulator Control Panel (ECP) can be used to simulate low memory status in the <strong>Memory</strong> tab.</p>\r
+\r
+<p>Set the low memory status using the radio buttons:</p>\r
+<ul>\r
+  <li>Hard-Warning (40 MB and under)</li>\r
+  <li>Soft-Warning (60 MB and under)</li>\r
+  <li>Normal (sufficient)</li>\r
+</ul>\r
+\r
+\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
index 660688f..789b0bd 100644 (file)
--- a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
+++ b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
@@ -1,1383 +1,1383 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>Keyboard Shortcuts</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#connection">Connection Explorer</a></li>
-                       <li><a href="#build">Build and Run</a></li>
-                       <li><a href="#debug">Debug</a></li>
-                       <li><a href="#content_assist">Content Assist</a></li>
-                       <li><a href="#project">Project Management</a></li>
-                       <li><a href="#editor">Editor</a></li>
-                       <li><a href="#refactor">Refactor</a></li>
-                       <li><a href="#ide">Native IDE</a></li>
-                       <li><a href="#web_ide">Web IDE</a></li>
-                       <li><a href="#da">Dynamic Analyzer</a></li>
-                       <li><a href="#emulator_manager">Emulator Manager</a></li>
-                       <li><a href="#emulator">Emulator</a></li>
-                       <li><a href="#ecp">Emulator Control Panel (ECP)</a></li>
-                       <li><a href="#enventor">Enventor</a></li>                       
-               </ul>
-       </div></div>
-</div>
-<div id="container"><div id="contents"><div class="content">
-<h1>Keyboard Shortcuts</h1>
-
-<p>The following symbols are used to define the supported operating system for each shortcut:</p> 
-<ul>
-<li><p><img alt="windows" src="../images/windows.png" />: Windows&reg;</p></li>
-<li><p><img alt="ubuntu" src="../images/ubuntu.png" />: Ubuntu</p></li>
-<li><p><img alt="mac" src="../images/mac.png" />: Mac OS&reg;</p></li>
-</ul>
-
-  <h2 id="connection" name="connection">Connection Explorer</h2>
-  <table border="1" style="width: 100%">
-  <colgroup>
-  <col width="40%" />
-  <col width="20%" />
-  <col width="40%" />
-  </colgroup>
-<tbody>
-       <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td>Delete</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Delete</td>
-       </tr>
-       <tr>
-               <td>Rename</td>
-               <td><img alt="windows_symbol" src="../images/windows.png" /><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F2</td>
-       </tr>
-       <tr>
-               <td>Refresh</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F5</td>
-       </tr>
-       <tr>
-               <td>Property</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Alt+Enter</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="build" name="build">Build and Run</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-       <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td rowspan="2">Build all</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+B</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+B</td>
-       </tr>
-       <tr>
-               <td>Make target build</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Shift+F9</td>
-       </tr>
-       <tr>
-               <td>Rebuild last target</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F9</td>
-       </tr>
-       <tr>
-               <td>Build project</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F10</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Run last launched</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+F11</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+F11</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="debug" name="debug">Debug</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-       <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td>Step into</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F5</td>
-       </tr>
-       <tr>
-               <td>Step over</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F6</td>
-       </tr>
-       <tr>
-               <td>Step return</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F7</td>
-       </tr>
-       <tr>
-               <td>Resume</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F8</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Debug</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+F11</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+F11</td>
-       </tr>
-       <tr>
-               <td>Debug last launched</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F11</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Toggle breakpoint</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+B</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+B</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="content_assist" name="content_assist">Content Assist</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-       <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td>Content assist</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Ctrl+Space</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="project" name="project">Project Management</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-       <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td rowspan="2">New project and file using the Wizard</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+N</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+N</td>
-       </tr>
-       <tr>
-               <td rowspan="2">New project and file</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Alt+N</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Alt+N</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Open resource</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+R</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+R</td>
-       </tr>
-       <tr>
-               <td>Properties</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Alt+Enter</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Save</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+S</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+S</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Save all</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+S</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+S</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Close</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+W</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+W</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Close all</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+W</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+W</td>
-       </tr>
-       <tr>
-               <td>Refresh</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F5</td>
-       </tr>
-       <tr>
-               <td>Rename</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F2</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="editor" name="editor">Editor</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-       <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td rowspan="2">Find and replace</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+F</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+F</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Quick fix</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+1</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+1</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Redo</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Z</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+Z</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Undo</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Z</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Z</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Go to line</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+L</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+L</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Delete line</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+D</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+D</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Go to matching bracket</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+P</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+P</td>
-       </tr>
-       <tr>
-               <td>Move lines down</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Alt+<img alt="arrow_down" src="../images/arrow_down.png" /></td>
-       </tr>
-       <tr>
-               <td>Move lines up</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Alt+<img alt="arrow_up" src="../images/arrow_up.png" /></td>
-       </tr>
-       <tr>
-               <td>Show tooltip</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F2</td>
-       </tr>
-       <tr>
-               <td>Open declaration</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F3</td>
-       </tr>
-       <tr>
-               <td>Open type hierarchy</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F4</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Open type</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+T</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+T</td>
-       </tr>
-       <tr>
-               <td rowspan="2">To lower case</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+Y</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+Y</td>
-       </tr>
-       <tr>
-               <td rowspan="2">To upper case</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+Z</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+Z</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Correct indentation</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+I</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+I</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Format</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+F</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+F</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Add/remove comment</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+/</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+/</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Add/remove block comment</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+/</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+/</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="refactor" name="refactor">Refactor</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-       <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td rowspan="2">Rename-refactoring</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Alt+Shift+R</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Alt+R</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Move-refactoring</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Alt+Shift+V</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Alt+V</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Change method signature</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Alt+Shift+C</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Alt+C</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Extract method</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Alt+Shift+M</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Alt+M</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Extract local variable</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Alt+Shift+L</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Alt+L</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="ide" name="ide">Native IDE</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-       <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td rowspan="2">Insert snippet</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+I</td>
-       </tr>
-       <tr>
-       
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+I</td>
-       </tr>   
-       <tr>
-               <td rowspan="2">New launch configuration</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Alt+Shift+F12</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="mac" src="../images/alt.png" />+F12</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Forward launch history</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Alt+Shift+[</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="mac" src="../images/alt.png" />+[</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Backward launch history</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Alt+Shift+]</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="mac" src="../images/alt.png" />+]</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="web_ide" name="web_ide">Web IDE</h2>
-  <table border="1" style="width: 100%">
-    <col width="15%"/>
-       <col width="25%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-       <tr>
-               <th colspan="2">Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td rowspan="8">HTML editor</td>
-               <td rowspan="2">Vertical layout</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+F9</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+F9</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Graphical designer</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+F10</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+F10</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Horizontal layout</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+F11</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+F11</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Source code</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+Shift+F12</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+Shift+F12</td>
-       </tr>
-       <tr>
-               <td colspan="2" rowspan="2">Preview</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+4</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+4</td>
-       </tr>
-       <tr>
-               <td colspan="2" rowspan="2">Code minifier</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+5</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+5</td>
-       </tr>
-       <tr>
-               <td colspan="2" rowspan="2">Code beautifier</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+6</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+6</td>
-       </tr>
-       <tr>
-               <td colspan="2" rowspan="2">Assignment tracing - next</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+]</td>
-       </tr>
-       <tr>
-               
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+]</td>
-       </tr>
-       <tr>
-               <td colspan="2" rowspan="2">Assignment tracing - previous</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+[</td>
-       </tr>
-       <tr>
-               
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+[</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="da" name="da">Dynamic Analyzer</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-               <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td>About Tizen Dynamic Analyzer</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F1</td>
-       </tr>
-       <tr>
-               <td>Configuration</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F2</td>
-       </tr>
-       <tr>
-               <td>Enable the source view of the toolbar</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>F3</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Select the Timeline tab</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+1</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+1</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Select the File tab</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+2</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+2</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Select the Thread tab</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+3</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+3</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Select the User Interface tab</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+4</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+4</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Select the Summary tab</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+5</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+5</td>
-       </tr>
-       
-       <tr>
-               <td rowspan="2">Select the Range tab</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+6</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+6</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Start/stop trace</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+g</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+g</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Open trace</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+o</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+o</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Save trace</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+s</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+s</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Replay</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+p</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+p</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Toggle the range information between create and remove</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+r</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+r</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Open the search dialog box</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Ctrl+f</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td><img alt="command" src="../images/command.png" />+f</td>
-       </tr>
-       <tr>
-               <td rowspan="2">Delete the saved file of the open trace dialog box</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Delete</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td>fn+Delete</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="emulator_manager" name="emulator_manager">Emulator Manager</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-               <tr>
-               <th>Command</th>
-               <th>Support</th>
-               <th>Shortcut</th>
-       </tr>
-       <tr>
-               <td rowspan="2">Delete virtual machine</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>
-               <td>Delete</td>
-       </tr>
-       <tr>
-               <td><img alt="mac" src="../images/mac.png" /></td>
-               <td>fn+Delete</td>
-       </tr>
-       <tr>
-               <td>Launch virtual machine</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Enter</td>
-       </tr>
-       <tr>
-               <td>Select virtual machine</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-               <td>Arrow key</td>
-       </tr>
-</tbody>
-</table>
-
-<h2 id="emulator" name="emulator">Emulator</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-                <tr>
-                <th>Command</th>
-                <th>Support</th>
-                <th>Shortcut</th>
-        </tr>
-        <tr>
-                <td>Always on Top</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+F2</td>
-        </tr>
-       <tr>
-                <td>Close</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>F4</td>
-        </tr>
-       <tr>
-                <td>Control Panel</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+F6</td>
-        </tr>
-       <tr>
-                <td>Detailed Info</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+F1</td>
-        </tr>
-       <tr>
-                <td>Force Close</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+F4</td>
-        </tr>
-       <tr>
-                <td>Rotate next</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+Num+9</td>
-        </tr>
-        <tr>
-                <td>Rotate prev</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+Num+7</td>
-        </tr>
-       <tr>
-                <td>Scale next</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+F10</td>
-        </tr>
-       <tr>
-                <td>Scale prev</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+F9</td>
-        </tr>
-       <tr>
-                <td>Screen Shot</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+F7</td>
-        </tr>
-       <tr>
-                <td>Shell</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+F5</td>
-        </tr>
-       <tr>
-                <td>Home</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>F1</td>
-        </tr>
-       <tr>
-                <td>Menu</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>F2</td>
-        </tr>
-       <tr>
-                <td>Power</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>F3</td>
-        </tr>
-       <tr>
-                <td>Volume +</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+Num++</td>
-        </tr>
-       <tr>
-                <td>Volume -</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Ctrl+Num+-</td>
-        </tr>
-</tbody>
-</table>
-
-
-<h2 id="ecp" name="ecp">Emulator Control Panel (ECP)</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-        <tr>
-                <th>Command</th>
-                <th>Support</th>
-                <th>Shortcut</th>
-        </tr>
-               <tr>
-                <th colspan="3">Common</th>
-        </tr>
-        <tr>
-                <td>Device Tree</td>
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+D</td>
-        </tr>
-       <tr>
-                <td>Network</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+N</td>
-        </tr>
-       <tr>
-                <td>Uninstaller</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+U</td>
-        </tr>
-       <tr>
-                <td>HDS (Host Directory Sharing)</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+H</td>
-        </tr>
-               <tr>
-                       <td>Upper menu focus movement</td>
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                       <td>Up</td>
-               </tr>
-               <tr>
-                       <td>Underneath menu focus movement</td>
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                       <td>Down</td>
-               </tr>
-               <tr>
-                       <td>Collapse tree menu</td>
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                       <td>Left</td>
-               </tr>
-               <tr>
-                       <td>Expand tree menu</td>
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                       <td>Right</td>
-               </tr>
-               <tr>
-                       <td>Move focus to next control</td>
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                       <td>Tab</td>
-               </tr>
-               <tr>
-                       <td>Move focus to previous control</td>
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                       <td>Shift + Tab</td>
-               </tr>
-               <tr>
-                       <td>Menu selection</td>
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                       <td>Enter</td>
-               </tr>           
-               
-               <tr>
-                <th colspan="3">Mobile</th>
-        </tr>
-       <tr>
-                <td>Battery</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+B</td>
-        </tr>
-       <tr>
-                <td>RSSI</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+R</td>
-        </tr>
-       <tr>
-                <td>3-Axis sensor</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+A</td>
-        </tr>
-       <tr>
-                <td>Light</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+I</td>
-        </tr>
-       <tr>
-                <td>Proximity</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+X</td>
-        </tr>
-       <tr>
-                <td>Pressure</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+E</td>
-        </tr>
-       <tr>
-                <td>Ultraviolet</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+V</td>
-        </tr>
-       <tr>
-                <td>Heart Rate Monitor</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+M</td>
-        </tr>
-       <tr>
-                <td>Ear Jack</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+K</td>
-        </tr>
-       <tr>
-                <td>USB</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+S</td>
-        </tr>
-       <tr>
-                <td>SD Card</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+D</td>
-        </tr>
-       <tr>
-                <td>Location</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+L</td>
-        </tr>
-       <tr>
-                <td>Telephony</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+T</td>
-        </tr>
-       <tr>
-                <td>Memory</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+O</td>
-        </tr>  
-               <tr>
-                <th colspan="3">Wearable</th>
-        </tr>
-       <tr>
-                <td>Battery</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+B</td>
-        </tr>
-       <tr>
-                <td>3-Axis sensor</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+A</td>
-        </tr>
-       <tr>
-                <td>Light</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+I</td>
-        </tr>
-       <tr>
-                <td>Proximity</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+X</td>
-        </tr>
-       <tr>
-                <td>Pressure</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+E</td>
-        </tr>
-       <tr>
-                <td>Ultraviolet</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+V</td>
-        </tr>
-       <tr>
-                <td>Heart Rate Monitor</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+M</td>
-        </tr>
-       <tr>
-                <td>Touch gesture</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+G</td>
-        </tr>
-       <tr>
-                <td>USB</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+S</td>
-        </tr>
-       <tr>
-                <td>Memory</td>
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
-                <td>Alt+O</td>
-        </tr>                  
-</tbody>
-</table>
-
-
-<h2 id="enventor" name="enventor">Enventor</h2>
-  <table border="1" style="width: 100%">
-    <col width="40%"/>
-  <col width="20%"/>
-  <col width="40%"/>
-<tbody>
-        <tr>
-                <th>Command</th>
-                <th>Support</th>
-                <th>Shortcut</th>
-        </tr>
-<tr> 
-<td><p>Close the menu</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Esc</p></td> 
-</tr>
-<tr> 
-<td><p>Show shortcut keys</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>F1</p></td> 
-</tr>
-<tr> 
-<td><p>Save the file</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>F3</p></td> 
-</tr>
-<tr> 
-<td><p>Show or hide the line numbers</p></td>
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>F5</p></td> 
-</tr>
-<tr> 
-<td><p>Show or hide the tool bar</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>F9</p></td> 
-</tr>
-<tr> 
-<td><p>Show or hide the console view</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>F10</p></td> 
-</tr>
-<tr> 
-<td><p>Show or hide the status bar</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>F11</p></td> 
-</tr>
-<tr> 
-<td><p>Show the configuration setting window</p></td>
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>F12</p></td> 
-</tr>
-<tr> 
-<td><p>Quick save and compile EDC</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+S</p></td> 
-</tr>
-<tr> 
-<td><p>Enable or disable auto indentation</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+I</p></td> 
-</tr>
-<tr> 
-<td><p>Enable or disable auto completion</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+O</p></td> 
-</tr>
-<tr> 
-<td><p>Show or hide virtual images to visualize SWALLOW part objects</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+W</p></td> 
-</tr>
-<tr> 
-<td><p>Enable or disable part object highlighting</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+H</p></td> 
-</tr>
-<tr> 
-<td><p>Enable or disable full text view</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Left</p></td> 
-</tr>
-<tr> 
-<td><p>Enable or disable full live view</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Right</p></td> 
-</tr>
-<tr> 
-<td><p>Enable or disable full console view</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Up</p></td> 
-</tr>
-<tr> 
-<td><p>Enable or disable full live/text view</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Down</p></td> 
-</tr>
-<tr> 
-<td><p>Insert default template code</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+T</p></td> 
-</tr>
-<tr> 
-<td><p>Enable or disable LiveEdit function</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+E</p></td> 
-</tr>
-<tr> 
-<td><p>View scale up/bigger font size</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Mouse wheel up</p></td> 
-</tr>
-<tr> 
-<td><p>View scale down/smaller font size</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Mouse wheel down</p></td> 
-</tr>
-<tr> 
-<td><p>Insert part template code: Textblock</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Shift+B</p></td> 
-</tr>
-<tr> 
-<td><p>Insert part template code: Image</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Shift+I</p></td> 
-</tr>
-<tr> 
-<td><p>Insert part template code: Rectangle</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Shift+R</p></td> 
-</tr>
-<tr> 
-<td><p>Insert part template code: Text</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Shift+T</p></td> 
-</tr>
-<tr> 
-<td><p>Insert part template code: Spacer</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Shift+S</p></td> 
-</tr>
-<tr> 
-<td><p>Insert part template code: Swallow</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Shift+W</p></td> 
-</tr>
-<tr> 
-<td><p>Select all the text</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+A</p></td> 
-</tr>
-<tr> 
-<td><p>Select the word</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Double-click</p></td> 
-</tr>
-<tr> 
-<td><p>Undo text changes</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+Z</p></td> 
-</tr>
-<tr> 
-<td><p>Redo text changes</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+R</p></td> 
-</tr>
-<tr> 
-<td><p>Copy selected text</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+C</p></td> 
-</tr>
-<tr> 
-<td><p>Paste copied text</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+V</p></td> 
-</tr>
-<tr> 
-<td><p>Cut selected text</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+X</p></td> 
-</tr>
-<tr> 
-<td><p>Delete a current line</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+D</p></td> 
-</tr>
-<tr> 
-<td><p>Find and replace the given word</p></td> <td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+F</p></td> 
-</tr>
-<tr> 
-<td><p>Go to the given line</p></td> <td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+L</p></td> 
-</tr>
-<tr> 
-<td><p>Go to the top line</p></td>
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td> 
-<td><p>Ctrl+Home</p></td> 
-</tr>
-<tr> 
-<td><p>Go to the bottom line</p></td> 
-<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
-<td><p>Ctrl+End</p></td> 
-</tr>
-</tbody>
-</table>
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>Keyboard Shortcuts</title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#connection">Connection Explorer</a></li>\r
+                       <li><a href="#build">Build and Run</a></li>\r
+                       <li><a href="#debug">Debug</a></li>\r
+                       <li><a href="#content_assist">Content Assist</a></li>\r
+                       <li><a href="#project">Project Management</a></li>\r
+                       <li><a href="#editor">Editor</a></li>\r
+                       <li><a href="#refactor">Refactor</a></li>\r
+                       <li><a href="#ide">Native IDE</a></li>\r
+                       <li><a href="#web_ide">Web IDE</a></li>\r
+                       <li><a href="#da">Dynamic Analyzer</a></li>\r
+                       <li><a href="#emulator_manager">Emulator Manager</a></li>\r
+                       <li><a href="#emulator">Emulator</a></li>\r
+                       <li><a href="#ecp">Emulator Control Panel (ECP)</a></li>\r
+                       <li><a href="#enventor">Enventor</a></li>                       \r
+               </ul>\r
+       </div></div>\r
+</div>\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Keyboard Shortcuts</h1>\r
+\r
+<p>The following symbols are used to define the supported operating system for each shortcut:</p> \r
+<ul>\r
+<li><p><img alt="windows" src="../images/windows.png" />: Windows&reg;</p></li>\r
+<li><p><img alt="ubuntu" src="../images/ubuntu.png" />: Ubuntu</p></li>\r
+<li><p><img alt="mac" src="../images/mac.png" />: Mac OS&reg;</p></li>\r
+</ul>\r
+\r
+  <h2 id="connection" name="connection">Connection Explorer</h2>\r
+  <table border="1" style="width: 100%">\r
+  <colgroup>\r
+  <col width="40%" />\r
+  <col width="20%" />\r
+  <col width="40%" />\r
+  </colgroup>\r
+<tbody>\r
+       <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td>Delete</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Delete</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Rename</td>\r
+               <td><img alt="windows_symbol" src="../images/windows.png" /><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F2</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Refresh</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F5</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Property</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Alt+Enter</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="build" name="build">Build and Run</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+       <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Build all</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+B</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+B</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Make target build</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Shift+F9</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Rebuild last target</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F9</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Build project</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F10</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Run last launched</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+F11</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+F11</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="debug" name="debug">Debug</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+       <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td>Step into</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F5</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Step over</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F6</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Step return</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F7</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Resume</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F8</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Debug</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+F11</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+F11</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Debug last launched</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F11</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Toggle breakpoint</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+B</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+B</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="content_assist" name="content_assist">Content Assist</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+       <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td>Content assist</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Ctrl+Space</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="project" name="project">Project Management</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+       <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">New project and file using the Wizard</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+N</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+N</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">New project and file</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Alt+N</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Alt+N</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Open resource</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+R</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+R</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Properties</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Alt+Enter</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Save</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+S</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+S</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Save all</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+S</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+S</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Close</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+W</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+W</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Close all</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+W</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+W</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Refresh</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F5</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Rename</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F2</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="editor" name="editor">Editor</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+       <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Find and replace</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+F</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+F</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Quick fix</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+1</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+1</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Redo</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Z</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+Z</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Undo</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Z</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Z</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Go to line</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+L</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+L</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Delete line</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+D</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+D</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Go to matching bracket</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+P</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+P</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Move lines down</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Alt+<img alt="arrow_down" src="../images/arrow_down.png" /></td>\r
+       </tr>\r
+       <tr>\r
+               <td>Move lines up</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Alt+<img alt="arrow_up" src="../images/arrow_up.png" /></td>\r
+       </tr>\r
+       <tr>\r
+               <td>Show tooltip</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F2</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Open declaration</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F3</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Open type hierarchy</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F4</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Open type</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+T</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+T</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">To lower case</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+Y</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+Y</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">To upper case</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+Z</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+Z</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Correct indentation</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+I</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+I</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Format</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+F</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+F</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Add/remove comment</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+/</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+/</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Add/remove block comment</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+/</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+/</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="refactor" name="refactor">Refactor</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+       <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Rename-refactoring</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Alt+Shift+R</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Alt+R</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Move-refactoring</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Alt+Shift+V</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Alt+V</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Change method signature</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Alt+Shift+C</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Alt+C</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Extract method</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Alt+Shift+M</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Alt+M</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Extract local variable</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Alt+Shift+L</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Alt+L</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="ide" name="ide">Native IDE</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+       <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Insert snippet</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+I</td>\r
+       </tr>\r
+       <tr>\r
+       \r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+I</td>\r
+       </tr>   \r
+       <tr>\r
+               <td rowspan="2">New launch configuration</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Alt+Shift+F12</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="mac" src="../images/alt.png" />+F12</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Forward launch history</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Alt+Shift+[</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="mac" src="../images/alt.png" />+[</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Backward launch history</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Alt+Shift+]</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="mac" src="../images/alt.png" />+]</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="web_ide" name="web_ide">Web IDE</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="15%"/>\r
+       <col width="25%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+       <tr>\r
+               <th colspan="2">Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="8">HTML editor</td>\r
+               <td rowspan="2">Vertical layout</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+F9</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+F9</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Graphical designer</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+F10</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+F10</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Horizontal layout</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+F11</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+F11</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Source code</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+Shift+F12</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+Shift+F12</td>\r
+       </tr>\r
+       <tr>\r
+               <td colspan="2" rowspan="2">Preview</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+4</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+4</td>\r
+       </tr>\r
+       <tr>\r
+               <td colspan="2" rowspan="2">Code minifier</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+5</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+5</td>\r
+       </tr>\r
+       <tr>\r
+               <td colspan="2" rowspan="2">Code beautifier</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+6</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+6</td>\r
+       </tr>\r
+       <tr>\r
+               <td colspan="2" rowspan="2">Assignment tracing - next</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+]</td>\r
+       </tr>\r
+       <tr>\r
+               \r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+]</td>\r
+       </tr>\r
+       <tr>\r
+               <td colspan="2" rowspan="2">Assignment tracing - previous</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+[</td>\r
+       </tr>\r
+       <tr>\r
+               \r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+[</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="da" name="da">Dynamic Analyzer</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+               <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td>About Tizen Dynamic Analyzer</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F1</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Configuration</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F2</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Enable the source view of the toolbar</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>F3</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Select the Timeline tab</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+1</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+1</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Select the File tab</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+2</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+2</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Select the Thread tab</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+3</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+3</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Select the User Interface tab</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+4</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+4</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Select the Summary tab</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+5</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+5</td>\r
+       </tr>\r
+       \r
+       <tr>\r
+               <td rowspan="2">Select the Range tab</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+6</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+6</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Start/stop trace</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+g</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+g</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Open trace</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+o</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+o</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Save trace</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+s</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+s</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Replay</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+p</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+p</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Toggle the range information between create and remove</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+r</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+r</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Open the search dialog box</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Ctrl+f</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="command" src="../images/command.png" />+f</td>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Delete the saved file of the open trace dialog box</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Delete</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td>fn+Delete</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="emulator_manager" name="emulator_manager">Emulator Manager</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+               <tr>\r
+               <th>Command</th>\r
+               <th>Support</th>\r
+               <th>Shortcut</th>\r
+       </tr>\r
+       <tr>\r
+               <td rowspan="2">Delete virtual machine</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td>Delete</td>\r
+       </tr>\r
+       <tr>\r
+               <td><img alt="mac" src="../images/mac.png" /></td>\r
+               <td>fn+Delete</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Launch virtual machine</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Enter</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Select virtual machine</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td>Arrow key</td>\r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+<h2 id="emulator" name="emulator">Emulator</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+                <tr>\r
+                <th>Command</th>\r
+                <th>Support</th>\r
+                <th>Shortcut</th>\r
+        </tr>\r
+        <tr>\r
+                <td>Always on Top</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+F2</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Close</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>F4</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Control Panel</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+F6</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Detailed Info</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+F1</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Force Close</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+F4</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Rotate next</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+Num+9</td>\r
+        </tr>\r
+        <tr>\r
+                <td>Rotate prev</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+Num+7</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Scale next</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+F10</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Scale prev</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+F9</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Screen Shot</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+F7</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Shell</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+F5</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Home</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>F1</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Menu</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>F2</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Power</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>F3</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Volume +</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+Num++</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Volume -</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Ctrl+Num+-</td>\r
+        </tr>\r
+</tbody>\r
+</table>\r
+\r
+\r
+<h2 id="ecp" name="ecp">Emulator Control Panel (ECP)</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+        <tr>\r
+                <th>Command</th>\r
+                <th>Support</th>\r
+                <th>Shortcut</th>\r
+        </tr>\r
+               <tr>\r
+                <th colspan="3">Common</th>\r
+        </tr>\r
+        <tr>\r
+                <td>Device Tree</td>\r
+               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+D</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Network</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+N</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Uninstaller</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+U</td>\r
+        </tr>\r
+       <tr>\r
+                <td>HDS (Host Directory Sharing)</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+H</td>\r
+        </tr>\r
+               <tr>\r
+                       <td>Upper menu focus movement</td>\r
+                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td>Up</td>\r
+               </tr>\r
+               <tr>\r
+                       <td>Underneath menu focus movement</td>\r
+                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td>Down</td>\r
+               </tr>\r
+               <tr>\r
+                       <td>Collapse tree menu</td>\r
+                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td>Left</td>\r
+               </tr>\r
+               <tr>\r
+                       <td>Expand tree menu</td>\r
+                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td>Right</td>\r
+               </tr>\r
+               <tr>\r
+                       <td>Move focus to next control</td>\r
+                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td>Tab</td>\r
+               </tr>\r
+               <tr>\r
+                       <td>Move focus to previous control</td>\r
+                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td>Shift + Tab</td>\r
+               </tr>\r
+               <tr>\r
+                       <td>Menu selection</td>\r
+                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td>Enter</td>\r
+               </tr>           \r
+               \r
+               <tr>\r
+                <th colspan="3">Mobile</th>\r
+        </tr>\r
+       <tr>\r
+                <td>Battery</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+B</td>\r
+        </tr>\r
+       <tr>\r
+                <td>RSSI</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+R</td>\r
+        </tr>\r
+       <tr>\r
+                <td>3-Axis sensor</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+A</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Light</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+I</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Proximity</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+X</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Pressure</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+E</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Ultraviolet</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+V</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Heart Rate Monitor</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+M</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Ear Jack</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+K</td>\r
+        </tr>\r
+       <tr>\r
+                <td>USB</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+S</td>\r
+        </tr>\r
+       <tr>\r
+                <td>SD Card</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+D</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Location</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+L</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Telephony</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+T</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Memory</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+O</td>\r
+        </tr>  \r
+               <tr>\r
+                <th colspan="3">Wearable</th>\r
+        </tr>\r
+       <tr>\r
+                <td>Battery</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+B</td>\r
+        </tr>\r
+       <tr>\r
+                <td>3-Axis sensor</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+A</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Light</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+I</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Proximity</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+X</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Pressure</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+E</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Ultraviolet</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+V</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Heart Rate Monitor</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+M</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Touch gesture</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+G</td>\r
+        </tr>\r
+       <tr>\r
+                <td>USB</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+S</td>\r
+        </tr>\r
+       <tr>\r
+                <td>Memory</td>\r
+                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td>Alt+O</td>\r
+        </tr>                  \r
+</tbody>\r
+</table>\r
+\r
+\r
+<h2 id="enventor" name="enventor">Enventor</h2>\r
+  <table border="1" style="width: 100%">\r
+    <col width="40%"/>\r
+  <col width="20%"/>\r
+  <col width="40%"/>\r
+<tbody>\r
+        <tr>\r
+                <th>Command</th>\r
+                <th>Support</th>\r
+                <th>Shortcut</th>\r
+        </tr>\r
+<tr> \r
+<td><p>Close the menu</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Esc</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Show shortcut keys</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>F1</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Save the file</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>F3</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Show or hide the line numbers</p></td>\r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>F5</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Show or hide the tool bar</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>F9</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Show or hide the console view</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>F10</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Show or hide the status bar</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>F11</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Show the configuration setting window</p></td>\r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>F12</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Quick save and compile EDC</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+S</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Enable or disable auto indentation</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+I</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Enable or disable auto completion</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+O</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Show or hide virtual images to visualize SWALLOW part objects</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+W</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Enable or disable part object highlighting</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+H</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Enable or disable full text view</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Left</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Enable or disable full live view</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Right</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Enable or disable full console view</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Up</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Enable or disable full live/text view</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Down</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Insert default template code</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+T</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Enable or disable LiveEdit function</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+E</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>View scale up/bigger font size</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Mouse wheel up</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>View scale down/smaller font size</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Mouse wheel down</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Insert part template code: Textblock</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Shift+B</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Insert part template code: Image</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Shift+I</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Insert part template code: Rectangle</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Shift+R</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Insert part template code: Text</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Shift+T</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Insert part template code: Spacer</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Shift+S</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Insert part template code: Swallow</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Shift+W</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Select all the text</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+A</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Select the word</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Double-click</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Undo text changes</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+Z</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Redo text changes</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+R</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Copy selected text</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+C</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Paste copied text</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+V</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Cut selected text</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+X</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Delete a current line</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+D</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Find and replace the given word</p></td> <td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+F</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Go to the given line</p></td> <td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+L</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Go to the top line</p></td>\r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td> \r
+<td><p>Ctrl+Home</p></td> \r
+</tr>\r
+<tr> \r
+<td><p>Go to the bottom line</p></td> \r
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>\r
+<td><p>Ctrl+End</p></td> \r
+</tr>\r
+</tbody>\r
+</table>\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.devtools/html/common_tools/log_view.htm b/org.tizen.devtools/html/common_tools/log_view.htm
index 4ab0452..292c999 100644 (file)
--- a/org.tizen.devtools/html/common_tools/log_view.htm
+++ b/org.tizen.devtools/html/common_tools/log_view.htm
@@ -1,68 +1,68 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>Log View </title>
-</head>
-
- <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       
-<h1>Log View</h1>
-
-<p>While the application is running in the Emulator or target device, the IDE&#39;s <strong>Log</strong> view shows the log, debug, and exception messages. If the <strong>Log</strong> view is not visible, open it by selecting <strong>Window &gt; Show View &gt; Log</strong> from the IDE menu.</p>
-
-<p>In the <strong>Log</strong> view, you can:</p>
-<ul>
-<li>Work with LogTabs
-<p>Each device has at least 1 default LogTab associated with it. If a device is connected, the default LogTab is not editable or removable. However, you can add additional LogTabs with more filtering options. Additional LogTabs are editable and removable.</p>
-</li>
-<li>Filter log messages by using the <strong>V</strong>, <strong>D</strong>, <strong>I</strong>, <strong>W</strong>, <strong>E</strong>, and <strong>F</strong>  buttons to show only specific log message types (verbose, debug, info, warning, error, and fatal).</li>
-<li>Search for logs by selecting the field (Pid, Tag, or Message) to be searched from the drop-down list, and entering the keyword. Multiple keywords must be separated by a space and a comma.</li>
-<li>Export a log by clicking <strong>Export the log</strong> and saving current log messages from the <strong>Log</strong> view as a log file on the host system.</li>
-<li>Remove all log messages from the <strong>Log</strong> view by clicking <strong>Clear the log</strong>.</li>
-
-</ul>
-
-<p>You can create logs in the native framework using the methods defined in the log macros.</p>
-
- 
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>Log View </title>\r
+</head>\r
+\r
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+<h1>Log View</h1>\r
+\r
+<p>While the application is running in the Emulator or target device, the IDE&#39;s <strong>Log</strong> view shows the log, debug, and exception messages. If the <strong>Log</strong> view is not visible, open it by selecting <strong>Window &gt; Show View &gt; Log</strong> from the IDE menu.</p>\r
+\r
+<p>In the <strong>Log</strong> view, you can:</p>\r
+<ul>\r
+<li>Work with LogTabs\r
+<p>Each device has at least 1 default LogTab associated with it. If a device is connected, the default LogTab is not editable or removable. However, you can add additional LogTabs with more filtering options. Additional LogTabs are editable and removable.</p>\r
+</li>\r
+<li>Filter log messages by using the <strong>V</strong>, <strong>D</strong>, <strong>I</strong>, <strong>W</strong>, <strong>E</strong>, and <strong>F</strong>  buttons to show only specific log message types (verbose, debug, info, warning, error, and fatal).</li>\r
+<li>Search for logs by selecting the field (Pid, Tag, or Message) to be searched from the drop-down list, and entering the keyword. Multiple keywords must be separated by a space and a comma.</li>\r
+<li>Export a log by clicking <strong>Export the log</strong> and saving current log messages from the <strong>Log</strong> view as a log file on the host system.</li>\r
+<li>Remove all log messages from the <strong>Log</strong> view by clicking <strong>Clear the log</strong>.</li>\r
+\r
+</ul>\r
+\r
+<p>You can create logs in the native framework using the methods defined in the log macros.</p>\r
+\r
+ \r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.devtools/html/common_tools/project_explorer.htm b/org.tizen.devtools/html/common_tools/project_explorer.htm
index 28363c8..edf8703 100644 (file)
--- a/org.tizen.devtools/html/common_tools/project_explorer.htm
+++ b/org.tizen.devtools/html/common_tools/project_explorer.htm
@@ -1,63 +1,63 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>Project Explorer View </title>
-</head>
- <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       
-<h1>Project Explorer View</h1>
-<p>The <strong>Project Explorer</strong> view provides a hierarchical view of all resources in the workspace. You can open files for editing or select resources for operations, such as building, packaging, signing, or validating an application.</p>
-
-<p>The following figure shows and example of the <strong>Project Explorer</strong> view with a Web application.</p>
-
-<p class="figure">Figure: Project Explorer view</p>
-
-<p align="center"><img alt="Project Explorer view"
-src="../images/project_explorer.png"
-style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>
-
-
-
-  
- 
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>Project Explorer View </title>\r
+</head>\r
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+<h1>Project Explorer View</h1>\r
+<p>The <strong>Project Explorer</strong> view provides a hierarchical view of all resources in the workspace. You can open files for editing or select resources for operations, such as building, packaging, signing, or validating an application.</p>\r
+\r
+<p>The following figure shows and example of the <strong>Project Explorer</strong> view with a Web application.</p>\r
+\r
+<p class="figure">Figure: Project Explorer view</p>\r
+\r
+<p align="center"><img alt="Project Explorer view"\r
+src="../images/project_explorer.png"\r
+style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>\r
+\r
+\r
+\r
+  \r
+ \r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm b/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
index 14c79e5..fdf4bb9 100644 (file)
--- a/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
+++ b/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
@@ -1,302 +1,302 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>Smart Development Bridge </title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#command">SDB Commands</a></li>
-                       <li><a href="#log">Controlling Log Output</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Smart Development Bridge</h1>
-
-<p>The Smart Development Bridge (SDB) is a device management tool included in the Tizen SDK:</p>
-<ul>
-       <li>The SDB manages multiple device connections. You can list connected devices and send a command to a specific device with a serial number that is created by the SDB.</li>
-       <li>The SDB supplies basic commands for application development, such as file transfer, remote shell command, port forwarding for a debugger, viewing, filtering, and <a href="#log">controlling</a> device log output.</li>
-       <li>The SDB also includes the Emulator.</li>
-</ul>
-
-<p>To use the SDB:</p>
-<ol>
-<li>To use the SDB in a target device, set the device to the SDB mode by going to <strong>Settings &gt; More system settings &gt; Developer options &gt; USB debugging</strong> in the device menu.</li>
-<li>Run the SDB with a shell using the following command:
-<pre class="prettyprint">&#36; sdb [option] &lt;command&gt; [parameters]</pre>
-
-<p>Where <span style="font-family: Courier New,Courier,monospace;">[option]</span> can be:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">-d</span>: Directs the command to the only connected USB device and return an error if more than one USB device is present.</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">-e</span>: Direct the command to the only running Emulator and return an error if more than one Emulator is present.</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">-s &lt;serial number&gt;</span>: Direct the command to the USB device or Emulator with the defined serial number.
-<p>If multiple Emulator or device instances are running, you need to specify a target instance in the SDB command.</p>
-       </li>
-       <li><span style="font-family: Courier New,Courier,monospace;">devices</span>: List all connected devices.
-<p>Before issuing SDB commands, it is helpful to know which Emulator or device instances are connected to the SDB server. In response to this command option, the SDB prints the serial number (a string created by the SDB to uniquely identify an Emulator or device instance) and connection status for each connected device. The connection status can be offline (the instance is not connected to the SDB or is not responding) or device (the instance is connected to the SDB server).</p>
-<p>The following snippet shows an example of the command output:</p>
-<pre class="prettyprint">&#36; sdb devices
-List of devices attached 
-emulator-26100 device myemulator1
-emulator-26200 device myemulator2
-&#36;
-</pre>
-       
-       
-       </li>
-</ul>
-<p>For more information about the available commands and their parameters (<span style="font-family: Courier New,Courier,monospace;">&lt;command&gt; [parameters]</span>), see <a href="#command">SDB Commands</a>.</p>
-</li>
-<li>To stop the SDB server, use the <span style="font-family: Courier New,Courier,monospace;">kill-server</span> command.
-<p>If the SDB does not respond to a command, try to terminate and restart it to resolve the problem. You can restart the server after stopping it by issuing any SDB command.</p>
-</li>
-</ol>
-
-
-<h2 id="command" name="command">SDB Commands</h2>
-
-<p>The following table lists the commands available for the Smart Development Bridge (SDB).</p>
-
-<table border="1">
-  <caption>Table: SDB commands</caption>
-  <col width="30%"/>
-  <col width="70%"/>
-  <tbody>
-  
-    <tr>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Command</th>
-               <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>       
-       </tr>
-       <tr>
-               <td><span style="font-family: Courier New,Courier,monospace;">sdb devices</span></td>
-               <td>List all connected devices.</td>
-       </tr>
-       <tr>
-               <td><span style="font-family: Courier New,Courier,monospace;">sdb connect &lt;host&gt;[:&lt;port&gt;]</span></td>
-               <td>Connect to a device through TCP/IP.</td>
-       </tr>
-       
-       <tr>
-               <td><span style="font-family: Courier New,Courier,monospace;">sdb disconnect &lt;host&gt;[:&lt;port&gt;]</span></td>
-               <td>Disconnect from a TCP/IP device.
-               <p>Port 26101 is used by default if no port number is specified. Using this command with no additional arguments disconnects from all connected TCP/IP devices.</p></td>
-       </tr>
-       
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb push &lt;local&gt; &lt;remote&gt; [-with-utf8]</span></td>
-                 <td>Copy a file or directory recursively to the device&#39;s data file.
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> parameters refer to the paths to the target files or directories on the development machine (local) and the device instance (remote). The following command shows an example:</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">[-with-utf8]</span> parameter creates the remote file with the UTF-8 character encoding.</p>
-<pre class="prettyprint">$ sdb push data.txt /opt/apps/org.tizen.hellotizen/data/data.txt</pre>
-                 </td>
-               </tr>
-       
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb pull &lt;remote&gt; [&lt;local&gt;]</span></td>
-                 <td>Copy a file or directory recursively from the device&#39;s data file.
-                 <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> parameters refer to the paths to the target files or directories on the device instance (remote) and the development machine (local). The following command shows an example:</p>
-<pre class="prettyprint">$ sdb pull /opt/apps/org.tizen.hellotizen/data/data.txt data.txt</pre></td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb shell</span></td>
-                 <td>Run a remote shell interactively by dropping into a remote shell on an Emulator or device instance.
-<p>To exit the remote shell, press <strong>Ctrl+D</strong> or use the <span style="font-family: Courier New,Courier,monospace;">exit</span> command to end the shell session.</p>
-                 </td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb shell &lt;command&gt;</span></td>
-                 <td>Run a remote shell command without entering the SDB remote shell on the device. The following commands are available:<p><span style="font-family: Courier New,Courier,monospace;">ls</span>, <span style="font-family: Courier New,Courier,monospace;">rm</span>, <span style="font-family: Courier New,Courier,monospace;">mv</span>, <span style="font-family: Courier New,Courier,monospace;">cd</span>, <span style="font-family: Courier New,Courier,monospace;">mkdir</span>, <span style="font-family: Courier New,Courier,monospace;">cp</span>, <span style="font-family: Courier New,Courier,monospace;">touch</span>, <span style="font-family: Courier New,Courier,monospace;">echo</span>, <span style="font-family: Courier New,Courier,monospace;">tar</span>, <span style="font-family: Courier New,Courier,monospace;">grep</span>, <span style="font-family: Courier New,Courier,monospace;">cat</span>, <span style="font-family: Courier New,Courier,monospace;">chmod</span>, <span style="font-family: Courier New,Courier,monospace;">rpm</span>, <span style="font-family: Courier New,Courier,monospace;">find</span>, <span style="font-family: Courier New,Courier,monospace;">uname</span>, <span style="font-family: Courier New,Courier,monospace;">netstat</span>, and <span style="font-family: Courier New,Courier,monospace;">killall</span></p></td>
-               </tr>
-               
-               <tr id="filter">
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb dlog [option] [&lt;filter-spec&gt;]</span></td>
-                 <td>View and follow the content of the device log buffers.
-<p>To view the log output in your development computer or from a remote SDB shell, use the <span style="font-family: Courier New,Courier,monospace;">sdb dlog</span> or <span style="font-family: Courier New,Courier,monospace;">dlogutil</span> command, respectively.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">[&lt;filter-spec&gt;]</span> parameter defines the tag of interest (the system component from which the message originates) and the minimum level of priority to report for that tag. The format is <span style="font-family: Courier New,Courier,monospace;">tag:priority</span>, and multiple filters must be separated with a space. The available priorities (from lowest to highest) are <strong>V</strong> (Verbose), <strong>D</strong> (Debug), <strong>I</strong> (Info), <strong>W</strong> (Warning), <strong>E</strong> (Error), and <strong>F</strong> (Fatal).</p>
-
-<p>For example, to view all log messages of the info priority in addition to the MyApp tag messages of the debug priority, use the following command:</p>
-
-<pre class="prettyprint">$ sdb dlog MyApp:D *:E</pre>
-
-
-<p>For more information about the command options, see <a href="#log">Controlling Log Output</a>.</p>
-                 </td>
-               </tr>
-               
-               <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace;">sdb install &lt;path_to_tpk&gt;</span></td>
-                       <td><p>Push the <span style="font-family: Courier New,Courier,monospace;">tpk</span> package file to the device and install it.</p>
-                       <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;path_to_tpk&gt;</span> parameter defines to the path to the <span style="font-family: Courier New,Courier,monospace;">tpk</span> file. The following command shows an example:</p>
-<pre class="prettyprint">$ sdb install /home/tizen/ko983dw33q-1.0.0-i386.tpk</pre>
-                       </td>
-               </tr>
-               
-               <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace;">sdb uninstall &lt;appid&gt;</span></td>
-                       <td><p>Uninstall the application from the device.</p>
-                       <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;appid&gt;</span> parameter defines the application ID of the application. The following command shows an example:</p>
-                       <pre class="prettyprint">$ sdb uninstall ko983dw33q</pre>
-                       </td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb forward &lt;local&gt; &lt;remote&gt;</span></td>
-                 <td>Set up arbitrary port forwarding of requests from a specific host port to a different port on a device instance.
-<p>The format for the <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> parameters is <span style="font-family: Courier New,Courier,monospace;">tcp:&lt;port&gt;</span>. The following example shows how to forward requests from host port 26102 to device port 9999:</p>
-<pre class="prettyprint">$ sdb forward tcp:26102 tcp:9999</pre>
-
-<p>After setting up port forwarding, development tools between the device and host can work remotely. For example, gdb in a host/gdbserver in a device, and gdbserver in a device open with the tcp:9999 port:</p>
-<pre class="prettyprint">$ sdb shell gdbserver:9999 hellotizen</pre>
-
-<p>gdb in a host connects to localhost:26102</p>
-<pre class="prettyprint">$ gdb hellotizen ... (gdb) target remote localhost:26102</pre>
-
-
-</td>
-               </tr>
-       
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb help</span></td>
-                 <td>Show the help message.</td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb version</span></td>
-                 <td>Show the version number.</td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb start-server</span></td>
-                 <td>Start the server if it is not running.</td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb kill-server</span></td>
-                 <td>Stop the server if it is running.</td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb get-state</span></td>
-                 <td>Print the target device connection status: <span style="font-family: Courier New,Courier,monospace;">device</span> of <span style="font-family: Courier New,Courier,monospace;">offline</span>.</td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb get-serialno</span></td>
-                 <td>Print the serial number of the target device.</td>
-               </tr>
-               
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb status-window</span></td>
-                 <td>Continuously print the connection status for a specified device.</td>
-               </tr>
-               <tr>
-                 <td><span style="font-family: Courier New,Courier,monospace;">sdb root &lt;on|off&gt;</span></td>
-                 <td>Switch between the root and developer account mode.
-                                       <p>The <span style="font-family: Courier New,Courier,monospace;">on</span> value sets the root mode and the <span style="font-family: Courier New,Courier,monospace;">off</span> value sets the developer account mode.</p></td>
-               </tr>
-       </tbody>
-</table>   
-
-<h2 id="log" name="log">Controlling Log Output</h2>
-
-<p>The following list defines the available options for the <span style="font-family: Courier New,Courier,monospace;">sdb dlog</span> and <span style="font-family: Courier New,Courier,monospace;">logutil</span> commands:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">-b &lt;buffer&gt;</span>
-               <p>Alternate log buffer. The main buffer is used as a default buffer.</p>
-       </li>
-       
-       <li><span style="font-family: Courier New,Courier,monospace;">-c</span>
-               <p>Clear the entire log and exit.</p>
-       </li>
-       
-       <li><span style="font-family: Courier New,Courier,monospace;">-d</span>
-               <p>Dump the log and exit.</p>
-       </li>
-       
-       <li><span style="font-family: Courier New,Courier,monospace;">-f &lt;filename&gt;</span>
-               <p>Write the log to the <span style="font-family: Courier New,Courier,monospace;">&lt;filename&gt;</span> file. The default file is <span style="font-family: Courier New,Courier,monospace;">stdout</span>.</p>
-       </li>
-       
-       <li><span style="font-family: Courier New,Courier,monospace;">-g</span>
-               <p>Print the size of the specified log buffer and exit.</p>
-       </li>
-       
-       <li><span style="font-family: Courier New,Courier,monospace;">-n &lt;count&gt;</span>
-               <p>Set the maximum number of rotated logs to &lt;count&gt;. The default value is 4. This option also requires the <span style="font-family: Courier New,Courier,monospace;">-r</span> option.</p>
-       </li>
-       
-       <li><span style="font-family: Courier New,Courier,monospace;">-r &lt;Kbytes&gt;</span>
-               <p>Rotate the log file every &lt;Kbytes&gt; of output. The default value is 16. This option also requires the <span style="font-family: Courier New,Courier,monospace;">-f</span> option.</p>
-       </li>
-       
-       <li><span style="font-family: Courier New,Courier,monospace;">-s</span>
-               <p>Set the default filter to silent.</p>
-       </li>
-       
-       <li><span style="font-family: Courier New,Courier,monospace;">-v &lt;format&gt;</span>
-               <p>Set the output format for log messages.</p>
-<p>You can define which metadata fields (such as <a href="#filter">tag and priority</a>) are included in log messages by setting one of the following output formats:</p> 
-<ul>
-       <li><strong>brief</strong>: Displays the priority/tag and PID of the originating process. This is the default format.</li>
-       <li><strong>process</strong>: Displays the PID only.</li>
-       <li><strong>tag</strong>: Displays the priority/tag only.</li>
-       <li><strong>thread</strong>: Displays the process:thread and priority/tag only.</li>
-       <li><strong>raw</strong>: Displays the raw log message, with no other metadata fields.</li>
-       <li><strong>time</strong>: Displays the date, invocation time, priority/tag, and PID of the originating process.</li>
-       <li><strong>long</strong>: Displays all metadata fields and separate messages with a blank line.</li>
-</ul>
-
-</li>
-</ul>
-
-
-
- 
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>Smart Development Bridge </title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#command">SDB Commands</a></li>\r
+                       <li><a href="#log">Controlling Log Output</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Smart Development Bridge</h1>\r
+\r
+<p>The Smart Development Bridge (SDB) is a device management tool included in the Tizen SDK:</p>\r
+<ul>\r
+       <li>The SDB manages multiple device connections. You can list connected devices and send a command to a specific device with a serial number that is created by the SDB.</li>\r
+       <li>The SDB supplies basic commands for application development, such as file transfer, remote shell command, port forwarding for a debugger, viewing, filtering, and <a href="#log">controlling</a> device log output.</li>\r
+       <li>The SDB also includes the Emulator.</li>\r
+</ul>\r
+\r
+<p>To use the SDB:</p>\r
+<ol>\r
+<li>To use the SDB in a target device, set the device to the SDB mode by going to <strong>Settings &gt; More system settings &gt; Developer options &gt; USB debugging</strong> in the device menu.</li>\r
+<li>Run the SDB with a shell using the following command:\r
+<pre class="prettyprint">&#36; sdb [option] &lt;command&gt; [parameters]</pre>\r
+\r
+<p>Where <span style="font-family: Courier New,Courier,monospace;">[option]</span> can be:</p>\r
+<ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">-d</span>: Directs the command to the only connected USB device and return an error if more than one USB device is present.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">-e</span>: Direct the command to the only running Emulator and return an error if more than one Emulator is present.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">-s &lt;serial number&gt;</span>: Direct the command to the USB device or Emulator with the defined serial number.\r
+<p>If multiple Emulator or device instances are running, you need to specify a target instance in the SDB command.</p>\r
+       </li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">devices</span>: List all connected devices.\r
+<p>Before issuing SDB commands, it is helpful to know which Emulator or device instances are connected to the SDB server. In response to this command option, the SDB prints the serial number (a string created by the SDB to uniquely identify an Emulator or device instance) and connection status for each connected device. The connection status can be offline (the instance is not connected to the SDB or is not responding) or device (the instance is connected to the SDB server).</p>\r
+<p>The following snippet shows an example of the command output:</p>\r
+<pre class="prettyprint">&#36; sdb devices\r
+List of devices attached \r
+emulator-26100 device myemulator1\r
+emulator-26200 device myemulator2\r
+&#36;\r
+</pre>\r
+       \r
+       \r
+       </li>\r
+</ul>\r
+<p>For more information about the available commands and their parameters (<span style="font-family: Courier New,Courier,monospace;">&lt;command&gt; [parameters]</span>), see <a href="#command">SDB Commands</a>.</p>\r
+</li>\r
+<li>To stop the SDB server, use the <span style="font-family: Courier New,Courier,monospace;">kill-server</span> command.\r
+<p>If the SDB does not respond to a command, try to terminate and restart it to resolve the problem. You can restart the server after stopping it by issuing any SDB command.</p>\r
+</li>\r
+</ol>\r
+\r
+\r
+<h2 id="command" name="command">SDB Commands</h2>\r
+\r
+<p>The following table lists the commands available for the Smart Development Bridge (SDB).</p>\r
+\r
+<table border="1">\r
+  <caption>Table: SDB commands</caption>\r
+  <col width="30%"/>\r
+  <col width="70%"/>\r
+  <tbody>\r
+  \r
+    <tr>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Command</th>\r
+               <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>       \r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">sdb devices</span></td>\r
+               <td>List all connected devices.</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">sdb connect &lt;host&gt;[:&lt;port&gt;]</span></td>\r
+               <td>Connect to a device through TCP/IP.</td>\r
+       </tr>\r
+       \r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">sdb disconnect &lt;host&gt;[:&lt;port&gt;]</span></td>\r
+               <td>Disconnect from a TCP/IP device.\r
+               <p>Port 26101 is used by default if no port number is specified. Using this command with no additional arguments disconnects from all connected TCP/IP devices.</p></td>\r
+       </tr>\r
+       \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb push &lt;local&gt; &lt;remote&gt; [-with-utf8]</span></td>\r
+                 <td>Copy a file or directory recursively to the device&#39;s data file.\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> parameters refer to the paths to the target files or directories on the development machine (local) and the device instance (remote). The following command shows an example:</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">[-with-utf8]</span> parameter creates the remote file with the UTF-8 character encoding.</p>\r
+<pre class="prettyprint">$ sdb push data.txt /opt/apps/org.tizen.hellotizen/data/data.txt</pre>\r
+                 </td>\r
+               </tr>\r
+       \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb pull &lt;remote&gt; [&lt;local&gt;]</span></td>\r
+                 <td>Copy a file or directory recursively from the device&#39;s data file.\r
+                 <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> parameters refer to the paths to the target files or directories on the device instance (remote) and the development machine (local). The following command shows an example:</p>\r
+<pre class="prettyprint">$ sdb pull /opt/apps/org.tizen.hellotizen/data/data.txt data.txt</pre></td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb shell</span></td>\r
+                 <td>Run a remote shell interactively by dropping into a remote shell on an Emulator or device instance.\r
+<p>To exit the remote shell, press <strong>Ctrl+D</strong> or use the <span style="font-family: Courier New,Courier,monospace;">exit</span> command to end the shell session.</p>\r
+                 </td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb shell &lt;command&gt;</span></td>\r
+                 <td>Run a remote shell command without entering the SDB remote shell on the device. The following commands are available:<p><span style="font-family: Courier New,Courier,monospace;">ls</span>, <span style="font-family: Courier New,Courier,monospace;">rm</span>, <span style="font-family: Courier New,Courier,monospace;">mv</span>, <span style="font-family: Courier New,Courier,monospace;">cd</span>, <span style="font-family: Courier New,Courier,monospace;">mkdir</span>, <span style="font-family: Courier New,Courier,monospace;">cp</span>, <span style="font-family: Courier New,Courier,monospace;">touch</span>, <span style="font-family: Courier New,Courier,monospace;">echo</span>, <span style="font-family: Courier New,Courier,monospace;">tar</span>, <span style="font-family: Courier New,Courier,monospace;">grep</span>, <span style="font-family: Courier New,Courier,monospace;">cat</span>, <span style="font-family: Courier New,Courier,monospace;">chmod</span>, <span style="font-family: Courier New,Courier,monospace;">rpm</span>, <span style="font-family: Courier New,Courier,monospace;">find</span>, <span style="font-family: Courier New,Courier,monospace;">uname</span>, <span style="font-family: Courier New,Courier,monospace;">netstat</span>, and <span style="font-family: Courier New,Courier,monospace;">killall</span></p></td>\r
+               </tr>\r
+               \r
+               <tr id="filter">\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb dlog [option] [&lt;filter-spec&gt;]</span></td>\r
+                 <td>View and follow the content of the device log buffers.\r
+<p>To view the log output in your development computer or from a remote SDB shell, use the <span style="font-family: Courier New,Courier,monospace;">sdb dlog</span> or <span style="font-family: Courier New,Courier,monospace;">dlogutil</span> command, respectively.</p>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">[&lt;filter-spec&gt;]</span> parameter defines the tag of interest (the system component from which the message originates) and the minimum level of priority to report for that tag. The format is <span style="font-family: Courier New,Courier,monospace;">tag:priority</span>, and multiple filters must be separated with a space. The available priorities (from lowest to highest) are <strong>V</strong> (Verbose), <strong>D</strong> (Debug), <strong>I</strong> (Info), <strong>W</strong> (Warning), <strong>E</strong> (Error), and <strong>F</strong> (Fatal).</p>\r
+\r
+<p>For example, to view all log messages of the info priority in addition to the MyApp tag messages of the debug priority, use the following command:</p>\r
+\r
+<pre class="prettyprint">$ sdb dlog MyApp:D *:E</pre>\r
+\r
+\r
+<p>For more information about the command options, see <a href="#log">Controlling Log Output</a>.</p>\r
+                 </td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                       <td><span style="font-family: Courier New,Courier,monospace;">sdb install &lt;path_to_tpk&gt;</span></td>\r
+                       <td><p>Push the <span style="font-family: Courier New,Courier,monospace;">tpk</span> package file to the device and install it.</p>\r
+                       <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;path_to_tpk&gt;</span> parameter defines to the path to the <span style="font-family: Courier New,Courier,monospace;">tpk</span> file. The following command shows an example:</p>\r
+<pre class="prettyprint">$ sdb install /home/tizen/ko983dw33q-1.0.0-i386.tpk</pre>\r
+                       </td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                       <td><span style="font-family: Courier New,Courier,monospace;">sdb uninstall &lt;appid&gt;</span></td>\r
+                       <td><p>Uninstall the application from the device.</p>\r
+                       <p>The <span style="font-family: Courier New,Courier,monospace;">&lt;appid&gt;</span> parameter defines the application ID of the application. The following command shows an example:</p>\r
+                       <pre class="prettyprint">$ sdb uninstall ko983dw33q</pre>\r
+                       </td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb forward &lt;local&gt; &lt;remote&gt;</span></td>\r
+                 <td>Set up arbitrary port forwarding of requests from a specific host port to a different port on a device instance.\r
+<p>The format for the <span style="font-family: Courier New,Courier,monospace;">&lt;local&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;remote&gt;</span> parameters is <span style="font-family: Courier New,Courier,monospace;">tcp:&lt;port&gt;</span>. The following example shows how to forward requests from host port 26102 to device port 9999:</p>\r
+<pre class="prettyprint">$ sdb forward tcp:26102 tcp:9999</pre>\r
+\r
+<p>After setting up port forwarding, development tools between the device and host can work remotely. For example, gdb in a host/gdbserver in a device, and gdbserver in a device open with the tcp:9999 port:</p>\r
+<pre class="prettyprint">$ sdb shell gdbserver:9999 hellotizen</pre>\r
+\r
+<p>gdb in a host connects to localhost:26102</p>\r
+<pre class="prettyprint">$ gdb hellotizen ... (gdb) target remote localhost:26102</pre>\r
+\r
+\r
+</td>\r
+               </tr>\r
+       \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb help</span></td>\r
+                 <td>Show the help message.</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb version</span></td>\r
+                 <td>Show the version number.</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb start-server</span></td>\r
+                 <td>Start the server if it is not running.</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb kill-server</span></td>\r
+                 <td>Stop the server if it is running.</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb get-state</span></td>\r
+                 <td>Print the target device connection status: <span style="font-family: Courier New,Courier,monospace;">device</span> of <span style="font-family: Courier New,Courier,monospace;">offline</span>.</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb get-serialno</span></td>\r
+                 <td>Print the serial number of the target device.</td>\r
+               </tr>\r
+               \r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb status-window</span></td>\r
+                 <td>Continuously print the connection status for a specified device.</td>\r
+               </tr>\r
+               <tr>\r
+                 <td><span style="font-family: Courier New,Courier,monospace;">sdb root &lt;on|off&gt;</span></td>\r
+                 <td>Switch between the root and developer account mode.\r
+                                       <p>The <span style="font-family: Courier New,Courier,monospace;">on</span> value sets the root mode and the <span style="font-family: Courier New,Courier,monospace;">off</span> value sets the developer account mode.</p></td>\r
+               </tr>\r
+       </tbody>\r
+</table>   \r
+\r
+<h2 id="log" name="log">Controlling Log Output</h2>\r
+\r
+<p>The following list defines the available options for the <span style="font-family: Courier New,Courier,monospace;">sdb dlog</span> and <span style="font-family: Courier New,Courier,monospace;">logutil</span> commands:</p>\r
+<ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">-b &lt;buffer&gt;</span>\r
+               <p>Alternate log buffer. The main buffer is used as a default buffer.</p>\r
+       </li>\r
+       \r
+       <li><span style="font-family: Courier New,Courier,monospace;">-c</span>\r
+               <p>Clear the entire log and exit.</p>\r
+       </li>\r
+       \r
+       <li><span style="font-family: Courier New,Courier,monospace;">-d</span>\r
+               <p>Dump the log and exit.</p>\r
+       </li>\r
+       \r
+       <li><span style="font-family: Courier New,Courier,monospace;">-f &lt;filename&gt;</span>\r
+               <p>Write the log to the <span style="font-family: Courier New,Courier,monospace;">&lt;filename&gt;</span> file. The default file is <span style="font-family: Courier New,Courier,monospace;">stdout</span>.</p>\r
+       </li>\r
+       \r
+       <li><span style="font-family: Courier New,Courier,monospace;">-g</span>\r
+               <p>Print the size of the specified log buffer and exit.</p>\r
+       </li>\r
+       \r
+       <li><span style="font-family: Courier New,Courier,monospace;">-n &lt;count&gt;</span>\r
+               <p>Set the maximum number of rotated logs to &lt;count&gt;. The default value is 4. This option also requires the <span style="font-family: Courier New,Courier,monospace;">-r</span> option.</p>\r
+       </li>\r
+       \r
+       <li><span style="font-family: Courier New,Courier,monospace;">-r &lt;Kbytes&gt;</span>\r
+               <p>Rotate the log file every &lt;Kbytes&gt; of output. The default value is 16. This option also requires the <span style="font-family: Courier New,Courier,monospace;">-f</span> option.</p>\r
+       </li>\r
+       \r
+       <li><span style="font-family: Courier New,Courier,monospace;">-s</span>\r
+               <p>Set the default filter to silent.</p>\r
+       </li>\r
+       \r
+       <li><span style="font-family: Courier New,Courier,monospace;">-v &lt;format&gt;</span>\r
+               <p>Set the output format for log messages.</p>\r
+<p>You can define which metadata fields (such as <a href="#filter">tag and priority</a>) are included in log messages by setting one of the following output formats:</p> \r
+<ul>\r
+       <li><strong>brief</strong>: Displays the priority/tag and PID of the originating process. This is the default format.</li>\r
+       <li><strong>process</strong>: Displays the PID only.</li>\r
+       <li><strong>tag</strong>: Displays the priority/tag only.</li>\r
+       <li><strong>thread</strong>: Displays the process:thread and priority/tag only.</li>\r
+       <li><strong>raw</strong>: Displays the raw log message, with no other metadata fields.</li>\r
+       <li><strong>time</strong>: Displays the date, invocation time, priority/tag, and PID of the originating process.</li>\r
+       <li><strong>long</strong>: Displays all metadata fields and separate messages with a blank line.</li>\r
+</ul>\r
+\r
+</li>\r
+</ul>\r
+\r
+\r
+\r
+ \r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/css/snippet.css b/org.tizen.devtools/html/css/snippet.css
index f880409..2be1b1f 100644 (file)
--- a/org.tizen.devtools/html/css/snippet.css
+++ b/org.tizen.devtools/html/css/snippet.css
@@ -1,52 +1,52 @@
-/* Pretty printing styles. Used with prettify.js. */
-
-/* SPAN elements with the classes below are added by prettyprint. */
-.pln { color: #000 }  /* plain text */
-
-@media screen {
-  .str { color: #793AFF }  /* string content */
-  .kwd { color: #7F0055 }  /* a keyword */
-  .com { color: green}  /* a comment */
-  .typ { color: #1C1C1C }  /* a type name */
-  .lit { color: black }  /* a literal value */
-  /* punctuation, lisp open bracket, lisp close bracket */
-  .pun, .opn, .clo { color: #1C1C1C}
-  .tag { color: #008 }  /* a markup tag name */
-  .atn { color: #606 }  /* a markup attribute name */
-  .atv { color: #080 }  /* a markup attribute value */
-  .dec, .var { color: #606 }  /* a declaration; a variable name */
-  .fun { color: red }  /* a function name */
-}
-
-/* Use higher contrast and text-weight for printable form. */
-@media print, projection {
-  .str { color: #060 }
-  .kwd { color: #006; font-weight: bold }
-  .com { color: #600; font-style: italic }
-  .typ { color: #404; font-weight: bold }
-  .lit { color: #044 }
-  .pun, .opn, .clo { color: #440 }
-  .tag { color: #006; font-weight: bold }
-  .atn { color: #404 }
-  .atv { color: #060 }
-}
-
-/* Put a border around prettyprinted code snippets. */
-pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L5,
-li.L6,
-li.L7,
-li.L8 { list-style-type: none }
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 { background: #eee }
+/* Pretty printing styles. Used with prettify.js. */\r
+\r
+/* SPAN elements with the classes below are added by prettyprint. */\r
+.pln { color: #000 }  /* plain text */\r
+\r
+@media screen {\r
+  .str { color: #793AFF }  /* string content */\r
+  .kwd { color: #7F0055 }  /* a keyword */\r
+  .com { color: green}  /* a comment */\r
+  .typ { color: #1C1C1C }  /* a type name */\r
+  .lit { color: black }  /* a literal value */\r
+  /* punctuation, lisp open bracket, lisp close bracket */\r
+  .pun, .opn, .clo { color: #1C1C1C}\r
+  .tag { color: #008 }  /* a markup tag name */\r
+  .atn { color: #606 }  /* a markup attribute name */\r
+  .atv { color: #080 }  /* a markup attribute value */\r
+  .dec, .var { color: #606 }  /* a declaration; a variable name */\r
+  .fun { color: red }  /* a function name */\r
+}\r
+\r
+/* Use higher contrast and text-weight for printable form. */\r
+@media print, projection {\r
+  .str { color: #060 }\r
+  .kwd { color: #006; font-weight: bold }\r
+  .com { color: #600; font-style: italic }\r
+  .typ { color: #404; font-weight: bold }\r
+  .lit { color: #044 }\r
+  .pun, .opn, .clo { color: #440 }\r
+  .tag { color: #006; font-weight: bold }\r
+  .atn { color: #404 }\r
+  .atv { color: #060 }\r
+}\r
+\r
+/* Put a border around prettyprinted code snippets. */\r
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }\r
+\r
+/* Specify class=linenums on a pre to get line numbering */\r
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */\r
+li.L0,\r
+li.L1,\r
+li.L2,\r
+li.L3,\r
+li.L5,\r
+li.L6,\r
+li.L7,\r
+li.L8 { list-style-type: none }\r
+/* Alternate shading for lines */\r
+li.L1,\r
+li.L3,\r
+li.L5,\r
+li.L7,\r
+li.L9 { background: #eee }\r
diff --git a/org.tizen.devtools/html/css/styles.css b/org.tizen.devtools/html/css/styles.css
index 4c8f5a8..ad7ebcb 100644 (file)
--- a/org.tizen.devtools/html/css/styles.css
+++ b/org.tizen.devtools/html/css/styles.css
@@ -1,756 +1,756 @@
-@charset "utf-8";
-
-body {
-       background: white;
-       color: #1C1C1C;
-       margin-right: 20px;
-       margin-left: 20px;
-       font-size: 9pt;
-       font-weight: normal;
-       font-family: Arial, Helvetica, sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
-       font-family: Arial, Verdana, Helvetica, sans-serif
-       }
-
-/*     Set default font to 9 pt        */
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
-       font-size: 9pt;
-}
-       
-pre, code { 
-       font-family: "Courier New", Courier, monospace;
-       border: 1px solid #719cc7;
-       margin: 6px 1.5px;
-       padding: 1px 1px 1px 1px;
-       font-weight: normal;
-       font-style: normal;
-}
-
-h1 {font-size: 24pt; color: #0E437D;}
-h2 {font-size: 18pt; color: #0E437D;}
-h3 {font-size: 14pt; color: #1C1C1C;}
-h4 {font-size: 12pt; color: #1C1C1C;}
-h5 {font-size: 10pt; color: #1C1C1C;}
-       
-h1, h2, h3, h4, h5 {
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-
-caption, p.caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: left;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-ol  {
-       margin-bottom: 20px;
-}
-
-ul ul , ol ul, ul ol, ol ol{
-       margin-top: 10px;
-}
-
-ul li, ol li {
-       margin-bottom: 10px;
-}
-
-ol.tutorstep li {
-       border-top: 2px solid #719cc7;
-       list-style-position: inside;
-       font-weight: bold;
-       margin-top: 30px;
-       margin-left: -20px;
-       padding-top: 3px;
-       font-size: 12pt;
-}
-
-ol.tutorstep li p{
-       font-size: 9pt;
-       font-weight: normal;
-       margin-top: 10px;
-}
-
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
-       font-size: 9pt;
-       list-style-position: outside; 
-       margin-left: 0px;
-       font-weight: normal;
-}
-
-ol.tutorstep ol li p, ol.tutorstep ul li p {
-       font-size: 9pt;
-       font-weight: normal; 
-       margin-top: 5px;
-}
-
-ol li p, ul li p {
-       font-size: 9pt;
-       font-weight: normal;
-       margin-bottom: 2px;
-       margin-top: 2px;
-}
-
-ol ol , ol.tutorstep ol{
-       font-size: 9pt;
-       font-weight: normal;
-       list-style-type: lower-alpha;
-       color: #1C1C1C; 
-       border-style: none;
-       margin-top: 10px; 
-}
-
-ol.tutorstep ul {
-       margin-top: 10px;
-       font-size: 9pt;
-}
-
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
-       border-style: none;
-       margin-top: 5px;
-       font-size: 9pt;
-}
-
-ul {
-       font-size: 9pt;
-       font-weight: normal;
-       color: #1C1C1C;
-}
-
-
-/*     End of font face declarations   */
-
-/*     Set table borders and heading row background    */
-table {
-       border: 0px;
-       border-collapse: collapse;
-       width: 100%;
-       margin-top: 20px;
-       margin-bottom: 20px;
-       background: white;
-}
-
-th {
-       border-top: 2px solid #719cc7;
-       border-right: 1px solid #c6d9f1;
-       border-left: 1px solid #c6d9f1;
-       background-color: #f3f7fb;
-       padding: 4px;
-       color: #719cc7;
-       font-size: 9pt;
-       font-weight: bold;
-}      
-       
-td {
-       border: 1px solid #c6d9f1;
-       vertical-align:top;
-       padding: 3px 20px 5px 20px;
-       }
-
-td.middle {
-       border: 1px solid #c6d9f1;
-       vertical-align:middle;
-       padding: 3px 20px 5px 20px;
-       }       
-       
-/*     Notes stand out using a light top & bottom borders with yellow background       */
-table.note {
-       border-top: 2px solid #719cc7;
-       border-left: 0px;
-       border-right: 0px;
-       width: 100%;
-}
-
-tr.note {
-       text-align: left;
-}
-
-th.note {
-       text-align: left;
-       background-color: #ddd9c3;
-       background-image: note.gif;
-       border-top: 2px solid #719cc7;
-       border-bottom:1px solid #719cc7;
-       border-right: none;
-
-}
-
-td.note, p.note {
-       background-color: #eeece1;
-       color: #1C1C1C;
-       padding: 5px;
-       margin-top:12px;
-       margin-bottom:12px;
-       border: none;
-}
-       
-/*     Figure titles are centered and bolded   */
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
-       text-align: center;
-       font-weight: bold;
-}
-
-/*     Red background and white text for things that need fixing before release        */
-.fix   {
-       background-color: red;
-       font-weight: bold;
-       color: white;
-       }
-
-/* Classes for creating collapsible content */
-#banner {
-       padding: 8px 4px 8px 4px;
-       /* top right bottom left */
-       border: 1px solid #7f7f7f;
-       width: 100%;
-       background-image: url("banner.png");
-       text-align: left;
-       font-weight: bold;
-       font-size: 9pt;
-       color: #ffffff;
-}
-
-#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
-#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
-#main {width: 75%; height: 90%;}
-#container {width:100%;}
-#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
-body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #toc-navigation {width: auto;}
-body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
-body.no-toc #profile {float: right;right: -32px;}
-body.no-toc #profile p {padding: 0; margin: 0;}
-#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
-       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
-       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
-
-.devicespecs-util {float:right; margin-top:25px;}
-       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
-       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
-       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
-       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
-       .devicespecs-util ul.dutil li a:hover { color:#222; }
-       .devicespecs-util ul.dutil li a:active { color:#222; }
-
-ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
-ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
-ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
-ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
-       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
-
-       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
-       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
-
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
-
-.static-cont {width:100%; margin-bottom:40px;}
-       
-.top {text-align: right;}
-.toc, ul.toc{
-       margin: 10px 0px 0px 0px;
-       padding-left: 13px;
-       list-style: disc;
-       font-size: 9pt;
-       line-height: 115%; 
-       }
-       
-.toc-title {
-       font-size: 12pt;
-       color: #0E437D; 
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-       
-a.top {
-       display:block; 
-       float: right; 
-       position:fixed;
-       width: 28px; 
-       height:89px; 
-       bottom:50px;
-       z-index: 101;
-       right: 19%;
-       }
-
-a img {border: 0;}
-       
-/*     Footer includes space and a gray line above             */
-#footer {
-       position: fixed;
-       /* width: 100%; */
-    bottom: 0px;
-       text-align: center;
-       border-top: 1px solid #CCCCCC;
-       background-color: #FFFFFF;      
-       left: 21px;  right: 21px;
-}
-
-.footer {font-size: 8pt;}
-       
-caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: center;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-div.qindex, div.navpath, div.navtab{
-       background-color: #e8eef2;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       padding: 2px;
-}
-
-div.qindex, div.navpath {
-       width: 100%;
-       line-height: 140%;
-}
-
-div.navtab {
-       margin-right: 15px;
-}
-
-/* @group Link Styling */
-
-a:link {
-       color: #719cc7;
-       text-decoration: underline;
-       font-weight: bold;
-}
-
-a:hover { 
-       color: #0e437d;
-}
-
-a:visited {
-       text-decoration: underline;
-       color: #719cc7;
-       font-weight: bold;
-}
-
-a.qindex {
-       font-weight: bold;
-       padding: 2px;
-}
-
-a.qindex:hover {
-       text-decoration: underline;
-       color: #0e437d;
-       padding: 2px;
-}
-
-a.qindex:visited {
-       text-decoration: underline;
-       font-weight: bold;
-       color: #719cc7;
-       padding: 2px;
-}
-
-a.qindexHL {
-       text-decoration: underline;
-       font-weight: bold;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-       border: 1px double #9295C2;
-}
-
-a.qindexHL:hover {
-       text-decoration: none;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-}
-
-dl.el { 
-       margin-left: -1cm 
-}
-
-.fragment {
-       font-family: monospace, fixed;
-       font-size: 105%;
-}
-
-pre.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 4px 6px;
-       margin: 4px 8px 4px 2px;
-}
-
-div.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 6px;
-}
-
-div.ah { 
-       background-color: black; 
-       font-weight: bold; 
-       color: #ffffff; 
-       margin-bottom: 3px; 
-       margin-top: 3px 
-}
-
-td.md { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-}
-
-td.mdname1 { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-}
-
-td.mdname { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-       width: 600px; 
-}
-
-div.groupHeader {
-       margin-left: 16px;
-       margin-top: 12px;
-       margin-bottom: 6px;
-       font-weight: bold;
-}
-
-div.groupText { 
-       margin-left: 16px; 
-       font-style: italic; 
-}
-
-td.indexkey {
-       background-color: #eeeeff;
-       font-weight: bold;
-       border: 1px solid #CCCCCC;
-       margin: 2px 0px 2px 0;
-       padding: 2px 10px;
-}
-
-td.indexvalue {
-       background-color: #eeeeff;
-       border: 1px solid #CCCCCC;
-       padding: 2px 10px;
-       margin: 2px 0px;
-}
-
-tr.memlist {
-   background-color: #f0f0f0; 
-}
-
-p.formulaDsp { 
-       text-align: center; 
-}
-
-img.formulaDsp { 
-}
-
-img.formulaInl { 
-       vertical-align: middle; 
-}
-
-/* @group Code Colorization */
-
-span.keyword       { color: #008000 }
-span.keywordtype   { color: #604020 }
-span.keywordflow   { color: #e08000 }
-span.comment       { color: #800000 }
-span.preprocessor  { color: #806020 }
-span.stringliteral { color: #002080 }
-span.charliteral   { color: #008080 }
-span.vhdldigit     { color: #ff00ff }
-span.vhdlchar      { color: #000000 }
-span.vhdlkeyword   { color: #700070 }
-span.vhdllogic     { color: #ff0000 }
-
-.mdTable {
-       border: 1px solid #868686;
-       background-color: #F4F4FB;
-}
-
-.mdRow {
-       padding: 8px 10px;
-}
-
-/* @group Member Descriptions */
-
-.mdescLeft, .mdescRight,
-.memItemLeft, .memItemRight,
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-       background-color: #F4F4F4A;
-       border: none;
-       margin: 4px;
-       padding: 3px 8px 4px 8px;
-}
-
-.mdescLeft, .mdescRight {
-       padding: 0px 8px 4px 8px;
-       color: #555;
-}
-
-.memItemLeft, .memItemRight, .memTemplParams {
-       border-top: 1px solid #DBDBDB;
-}
-
-.memTemplParams {
-       color: #606060;
-}
-
-/* @end */
-
-/* @group Member Details */
-
-/* Styles for detailed member documentation */
-
-.memtemplate {
-       font-size: 80%;
-       color: #606060;
-       font-weight: normal;
-       margin-left: 3px;
-}
-
-.memnav {
-       background-color: #eeeeff;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       margin-right: 15px;
-       padding: 2px;
-}
-
-.memitem {
-       padding: 0;
-}
-
-.memname {
-       white-space: nowrap;
-       font-weight: bold;
-}
-
-.memproto, .memdoc {
-       border: 1px solid #9BBCDD;      
-}
-
-.memproto {
-       padding: 0;
-       background-color: #D5E2EF;
-       font-weight: bold;
-       -webkit-border-top-left-radius: 8px;
-       -webkit-border-top-right-radius: 8px;
-       -moz-border-radius-topleft: 8px;
-       -moz-border-radius-topright: 8px;
-}
-
-.memdoc {
-       padding: 2px 5px;
-       background-color: #eef3f5;
-       border-top-width: 0;
-       -webkit-border-bottom-left-radius: 8px;
-       -webkit-border-bottom-right-radius: 8px;
-       -moz-border-radius-bottomleft: 8px;
-       -moz-border-radius-bottomright: 8px;
-}
-
-.memdoc p, .memdoc dl, .memdoc ul {
-       margin: 6px 0;
-}
-
-.paramkey {
-       text-align: right;
-}
-
-.paramtype {
-       white-space: nowrap;
-}
-
-.paramname {
-       color: #853E0E;
-       white-space: nowrap;
-}
-.paramname em {
-       font-style: normal;
-}
-
-/* @end */
-
-.search     { color: #003399;
-              font-weight: bold;
-}
-
-form.search {
-              margin-bottom: 0px;
-              margin-top: 0px;
-}
-
-input.search { font-size: 75%;
-               color: #000080;
-               font-weight: normal;
-               background-color: #eeeeff;
-}
-
-td.tiny { 
-       font-size: 75%;
-}
-
-.highlight {
-        background-color:#E2E2FF;
-}
-
-/*---------- ide-eclipse Styles ---------*/
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
-       margin: 0px 0px;
-       padding: -30px -30px -30px -30px;
-       font-weight: normal;
-       font-style: normal;}
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
-
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
-
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
-.sh_styleFromXML{color:#800000;font-weight:bold;}
-/*-------------------------------------------------------*/
-
-/*-------- Snippet Base Styles ----------*/
-.snippet-wrap {position:relative;}
-*:first-child+html .snippet-wrap {display:inline-block;}
-* html .snippet-wrap {display:inline-block;}
-.snippet-reveal{text-decoration:underline;}
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
-* html .snippet-wrap .snippet-hide {bottom:1px;}
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
--moz-border-radius:0px;
--webkit-border-radius:0px;
-border-radius:0px;
-box-shadow: 1px 1px px #000;
--moz-box-shadow: 2px 2px 1px #000;
--webkit-box-shadow: 1px 1px 1px #000;}
-.snippet-wrap pre.snippet-textonly {padding:1em;}
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
-.snippet-wrap .snippet-num li{padding-left:2px;}
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
-.snippet-wrap li.box-mid {border-width:0 0px !important;}
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}
-
-/* Layout fixing */
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-.clfix {display: inline-block;}
-.clfix {display: block;}
-* html .clfix {height: 1%;} /* Hides from IE-mac */
-.clfix {zoom:1;} /*for IE 5.5-7*/
-
-.fl {float:left !important;}
-.fr {float:right !important;}
-.cl {clear:both;}
-.rel {position:relative;}
-.abs {position:absolute;}
-.ac {text-align:center !important;}
-.ar {text-align:right !important;}
-.al {text-align:left !important;}
-.at {vertical-align:top !important;}
-.am {vertical-align:middle !important;}
-.ab {vertical-align:bottom;}
-.hand {cursor:pointer;}
-.bgnone {background:none !important;}
-.brnone {border:none !important;}
-.b {font-weight:bold !important;}
-.n {font-weight:normal !important;}
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
-.mt5 {margin-top:5px !important;} 
-/* //Layout fixing */
-
-@media print { .hide, .show { display: none; }}
-
-div#profile {
-    position: relative;
-}
-#profile p {
-       text-align: right;
-}
-
-div#toc_border {
-    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
-}
-
-#contents li {
-       padding-top: 3px;
-       margin-top: 5px;
-       /* overflow: auto; */
-}
-
-p {
-       /* overflow: auto; */
-}
-
-div.table {
-       /* overflow: auto; */
+@charset "utf-8";\r
+\r
+body {\r
+       background: white;\r
+       color: #1C1C1C;\r
+       margin-right: 20px;\r
+       margin-left: 20px;\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       font-family: Arial, Helvetica, sans-serif;\r
+}\r
+\r
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {\r
+       font-family: Arial, Verdana, Helvetica, sans-serif\r
+       }\r
+\r
+/*     Set default font to 9 pt        */\r
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {\r
+       font-size: 9pt;\r
+}\r
+       \r
+pre, code { \r
+       font-family: "Courier New", Courier, monospace;\r
+       border: 1px solid #719cc7;\r
+       margin: 6px 1.5px;\r
+       padding: 1px 1px 1px 1px;\r
+       font-weight: normal;\r
+       font-style: normal;\r
+}\r
+\r
+h1 {font-size: 24pt; color: #0E437D;}\r
+h2 {font-size: 18pt; color: #0E437D;}\r
+h3 {font-size: 14pt; color: #1C1C1C;}\r
+h4 {font-size: 12pt; color: #1C1C1C;}\r
+h5 {font-size: 10pt; color: #1C1C1C;}\r
+       \r
+h1, h2, h3, h4, h5 {\r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+\r
+caption, p.caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: left;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+ol  {\r
+       margin-bottom: 20px;\r
+}\r
+\r
+ul ul , ol ul, ul ol, ol ol{\r
+       margin-top: 10px;\r
+}\r
+\r
+ul li, ol li {\r
+       margin-bottom: 10px;\r
+}\r
+\r
+ol.tutorstep li {\r
+       border-top: 2px solid #719cc7;\r
+       list-style-position: inside;\r
+       font-weight: bold;\r
+       margin-top: 30px;\r
+       margin-left: -20px;\r
+       padding-top: 3px;\r
+       font-size: 12pt;\r
+}\r
+\r
+ol.tutorstep li p{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-top: 10px;\r
+}\r
+\r
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {\r
+       font-size: 9pt;\r
+       list-style-position: outside; \r
+       margin-left: 0px;\r
+       font-weight: normal;\r
+}\r
+\r
+ol.tutorstep ol li p, ol.tutorstep ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal; \r
+       margin-top: 5px;\r
+}\r
+\r
+ol li p, ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-bottom: 2px;\r
+       margin-top: 2px;\r
+}\r
+\r
+ol ol , ol.tutorstep ol{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       list-style-type: lower-alpha;\r
+       color: #1C1C1C; \r
+       border-style: none;\r
+       margin-top: 10px; \r
+}\r
+\r
+ol.tutorstep ul {\r
+       margin-top: 10px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {\r
+       border-style: none;\r
+       margin-top: 5px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ul {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       color: #1C1C1C;\r
+}\r
+\r
+\r
+/*     End of font face declarations   */\r
+\r
+/*     Set table borders and heading row background    */\r
+table {\r
+       border: 0px;\r
+       border-collapse: collapse;\r
+       width: 100%;\r
+       margin-top: 20px;\r
+       margin-bottom: 20px;\r
+       background: white;\r
+}\r
+\r
+th {\r
+       border-top: 2px solid #719cc7;\r
+       border-right: 1px solid #c6d9f1;\r
+       border-left: 1px solid #c6d9f1;\r
+       background-color: #f3f7fb;\r
+       padding: 4px;\r
+       color: #719cc7;\r
+       font-size: 9pt;\r
+       font-weight: bold;\r
+}      \r
+       \r
+td {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:top;\r
+       padding: 3px 20px 5px 20px;\r
+       }\r
+\r
+td.middle {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:middle;\r
+       padding: 3px 20px 5px 20px;\r
+       }       \r
+       \r
+/*     Notes stand out using a light top & bottom borders with yellow background       */\r
+table.note {\r
+       border-top: 2px solid #719cc7;\r
+       border-left: 0px;\r
+       border-right: 0px;\r
+       width: 100%;\r
+}\r
+\r
+tr.note {\r
+       text-align: left;\r
+}\r
+\r
+th.note {\r
+       text-align: left;\r
+       background-color: #ddd9c3;\r
+       background-image: note.gif;\r
+       border-top: 2px solid #719cc7;\r
+       border-bottom:1px solid #719cc7;\r
+       border-right: none;\r
+\r
+}\r
+\r
+td.note, p.note {\r
+       background-color: #eeece1;\r
+       color: #1C1C1C;\r
+       padding: 5px;\r
+       margin-top:12px;\r
+       margin-bottom:12px;\r
+       border: none;\r
+}\r
+       \r
+/*     Figure titles are centered and bolded   */\r
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {\r
+       text-align: center;\r
+       font-weight: bold;\r
+}\r
+\r
+/*     Red background and white text for things that need fixing before release        */\r
+.fix   {\r
+       background-color: red;\r
+       font-weight: bold;\r
+       color: white;\r
+       }\r
+\r
+/* Classes for creating collapsible content */\r
+#banner {\r
+       padding: 8px 4px 8px 4px;\r
+       /* top right bottom left */\r
+       border: 1px solid #7f7f7f;\r
+       width: 100%;\r
+       background-image: url("banner.png");\r
+       text-align: left;\r
+       font-weight: bold;\r
+       font-size: 9pt;\r
+       color: #ffffff;\r
+}\r
+\r
+#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}\r
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}\r
+#main {width: 75%; height: 90%;}\r
+#container {width:100%;}\r
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}\r
+body.no-toc #container #contents {right: 0;padding-right:30px;}\r
+body.no-toc #toc-navigation {width: auto;}\r
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}\r
+body.no-toc #profile {float: right;right: -32px;}\r
+body.no-toc #profile p {padding: 0; margin: 0;}\r
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}\r
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}\r
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }\r
+\r
+.devicespecs-util {float:right; margin-top:25px;}\r
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}\r
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}\r
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}\r
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}\r
+       .devicespecs-util ul.dutil li a:hover { color:#222; }\r
+       .devicespecs-util ul.dutil li a:active { color:#222; }\r
+\r
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}\r
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}\r
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}\r
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}\r
+       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}\r
+\r
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }\r
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }\r
+\r
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}\r
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}\r
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}\r
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}\r
+\r
+.static-cont {width:100%; margin-bottom:40px;}\r
+       \r
+.top {text-align: right;}\r
+.toc, ul.toc{\r
+       margin: 10px 0px 0px 0px;\r
+       padding-left: 13px;\r
+       list-style: disc;\r
+       font-size: 9pt;\r
+       line-height: 115%; \r
+       }\r
+       \r
+.toc-title {\r
+       font-size: 12pt;\r
+       color: #0E437D; \r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+       \r
+a.top {\r
+       display:block; \r
+       float: right; \r
+       position:fixed;\r
+       width: 28px; \r
+       height:89px; \r
+       bottom:50px;\r
+       z-index: 101;\r
+       right: 19%;\r
+       }\r
+\r
+a img {border: 0;}\r
+       \r
+/*     Footer includes space and a gray line above             */\r
+#footer {\r
+       position: fixed;\r
+       /* width: 100%; */\r
+    bottom: 0px;\r
+       text-align: center;\r
+       border-top: 1px solid #CCCCCC;\r
+       background-color: #FFFFFF;      \r
+       left: 21px;  right: 21px;\r
+}\r
+\r
+.footer {font-size: 8pt;}\r
+       \r
+caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: center;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+div.qindex, div.navpath, div.navtab{\r
+       background-color: #e8eef2;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       padding: 2px;\r
+}\r
+\r
+div.qindex, div.navpath {\r
+       width: 100%;\r
+       line-height: 140%;\r
+}\r
+\r
+div.navtab {\r
+       margin-right: 15px;\r
+}\r
+\r
+/* @group Link Styling */\r
+\r
+a:link {\r
+       color: #719cc7;\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+}\r
+\r
+a:hover { \r
+       color: #0e437d;\r
+}\r
+\r
+a:visited {\r
+       text-decoration: underline;\r
+       color: #719cc7;\r
+       font-weight: bold;\r
+}\r
+\r
+a.qindex {\r
+       font-weight: bold;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:hover {\r
+       text-decoration: underline;\r
+       color: #0e437d;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:visited {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       color: #719cc7;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindexHL {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+       border: 1px double #9295C2;\r
+}\r
+\r
+a.qindexHL:hover {\r
+       text-decoration: none;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+}\r
+\r
+dl.el { \r
+       margin-left: -1cm \r
+}\r
+\r
+.fragment {\r
+       font-family: monospace, fixed;\r
+       font-size: 105%;\r
+}\r
+\r
+pre.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 4px 6px;\r
+       margin: 4px 8px 4px 2px;\r
+}\r
+\r
+div.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 6px;\r
+}\r
+\r
+div.ah { \r
+       background-color: black; \r
+       font-weight: bold; \r
+       color: #ffffff; \r
+       margin-bottom: 3px; \r
+       margin-top: 3px \r
+}\r
+\r
+td.md { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+}\r
+\r
+td.mdname1 { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+}\r
+\r
+td.mdname { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+       width: 600px; \r
+}\r
+\r
+div.groupHeader {\r
+       margin-left: 16px;\r
+       margin-top: 12px;\r
+       margin-bottom: 6px;\r
+       font-weight: bold;\r
+}\r
+\r
+div.groupText { \r
+       margin-left: 16px; \r
+       font-style: italic; \r
+}\r
+\r
+td.indexkey {\r
+       background-color: #eeeeff;\r
+       font-weight: bold;\r
+       border: 1px solid #CCCCCC;\r
+       margin: 2px 0px 2px 0;\r
+       padding: 2px 10px;\r
+}\r
+\r
+td.indexvalue {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #CCCCCC;\r
+       padding: 2px 10px;\r
+       margin: 2px 0px;\r
+}\r
+\r
+tr.memlist {\r
+   background-color: #f0f0f0; \r
+}\r
+\r
+p.formulaDsp { \r
+       text-align: center; \r
+}\r
+\r
+img.formulaDsp { \r
+}\r
+\r
+img.formulaInl { \r
+       vertical-align: middle; \r
+}\r
+\r
+/* @group Code Colorization */\r
+\r
+span.keyword       { color: #008000 }\r
+span.keywordtype   { color: #604020 }\r
+span.keywordflow   { color: #e08000 }\r
+span.comment       { color: #800000 }\r
+span.preprocessor  { color: #806020 }\r
+span.stringliteral { color: #002080 }\r
+span.charliteral   { color: #008080 }\r
+span.vhdldigit     { color: #ff00ff }\r
+span.vhdlchar      { color: #000000 }\r
+span.vhdlkeyword   { color: #700070 }\r
+span.vhdllogic     { color: #ff0000 }\r
+\r
+.mdTable {\r
+       border: 1px solid #868686;\r
+       background-color: #F4F4FB;\r
+}\r
+\r
+.mdRow {\r
+       padding: 8px 10px;\r
+}\r
+\r
+/* @group Member Descriptions */\r
+\r
+.mdescLeft, .mdescRight,\r
+.memItemLeft, .memItemRight,\r
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {\r
+       background-color: #F4F4F4A;\r
+       border: none;\r
+       margin: 4px;\r
+       padding: 3px 8px 4px 8px;\r
+}\r
+\r
+.mdescLeft, .mdescRight {\r
+       padding: 0px 8px 4px 8px;\r
+       color: #555;\r
+}\r
+\r
+.memItemLeft, .memItemRight, .memTemplParams {\r
+       border-top: 1px solid #DBDBDB;\r
+}\r
+\r
+.memTemplParams {\r
+       color: #606060;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group Member Details */\r
+\r
+/* Styles for detailed member documentation */\r
+\r
+.memtemplate {\r
+       font-size: 80%;\r
+       color: #606060;\r
+       font-weight: normal;\r
+       margin-left: 3px;\r
+}\r
+\r
+.memnav {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       margin-right: 15px;\r
+       padding: 2px;\r
+}\r
+\r
+.memitem {\r
+       padding: 0;\r
+}\r
+\r
+.memname {\r
+       white-space: nowrap;\r
+       font-weight: bold;\r
+}\r
+\r
+.memproto, .memdoc {\r
+       border: 1px solid #9BBCDD;      \r
+}\r
+\r
+.memproto {\r
+       padding: 0;\r
+       background-color: #D5E2EF;\r
+       font-weight: bold;\r
+       -webkit-border-top-left-radius: 8px;\r
+       -webkit-border-top-right-radius: 8px;\r
+       -moz-border-radius-topleft: 8px;\r
+       -moz-border-radius-topright: 8px;\r
+}\r
+\r
+.memdoc {\r
+       padding: 2px 5px;\r
+       background-color: #eef3f5;\r
+       border-top-width: 0;\r
+       -webkit-border-bottom-left-radius: 8px;\r
+       -webkit-border-bottom-right-radius: 8px;\r
+       -moz-border-radius-bottomleft: 8px;\r
+       -moz-border-radius-bottomright: 8px;\r
+}\r
+\r
+.memdoc p, .memdoc dl, .memdoc ul {\r
+       margin: 6px 0;\r
+}\r
+\r
+.paramkey {\r
+       text-align: right;\r
+}\r
+\r
+.paramtype {\r
+       white-space: nowrap;\r
+}\r
+\r
+.paramname {\r
+       color: #853E0E;\r
+       white-space: nowrap;\r
+}\r
+.paramname em {\r
+       font-style: normal;\r
+}\r
+\r
+/* @end */\r
+\r
+.search     { color: #003399;\r
+              font-weight: bold;\r
+}\r
+\r
+form.search {\r
+              margin-bottom: 0px;\r
+              margin-top: 0px;\r
+}\r
+\r
+input.search { font-size: 75%;\r
+               color: #000080;\r
+               font-weight: normal;\r
+               background-color: #eeeeff;\r
+}\r
+\r
+td.tiny { \r
+       font-size: 75%;\r
+}\r
+\r
+.highlight {\r
+        background-color:#E2E2FF;\r
+}\r
+\r
+/*---------- ide-eclipse Styles ---------*/\r
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;\r
+       margin: 0px 0px;\r
+       padding: -30px -30px -30px -30px;\r
+       font-weight: normal;\r
+       font-style: normal;}\r
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}\r
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/\r
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}\r
+\r
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}\r
+\r
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/\r
+.sh_styleFromXML{color:#800000;font-weight:bold;}\r
+/*-------------------------------------------------------*/\r
+\r
+/*-------- Snippet Base Styles ----------*/\r
+.snippet-wrap {position:relative;}\r
+*:first-child+html .snippet-wrap {display:inline-block;}\r
+* html .snippet-wrap {display:inline-block;}\r
+.snippet-reveal{text-decoration:underline;}\r
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}\r
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}\r
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}\r
+* html .snippet-wrap .snippet-hide {bottom:1px;}\r
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}\r
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}\r
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;\r
+-moz-border-radius:0px;\r
+-webkit-border-radius:0px;\r
+border-radius:0px;\r
+box-shadow: 1px 1px px #000;\r
+-moz-box-shadow: 2px 2px 1px #000;\r
+-webkit-box-shadow: 1px 1px 1px #000;}\r
+.snippet-wrap pre.snippet-textonly {padding:1em;}\r
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}\r
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}\r
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}\r
+.snippet-wrap .snippet-num li{padding-left:2px;}\r
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}\r
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}\r
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}\r
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}\r
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}\r
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}\r
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}\r
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}\r
+.snippet-wrap li.box-mid {border-width:0 0px !important;}\r
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}\r
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}\r
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}\r
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}\r
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}\r
+\r
+/* Layout fixing */\r
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+.clfix {display: inline-block;}\r
+.clfix {display: block;}\r
+* html .clfix {height: 1%;} /* Hides from IE-mac */\r
+.clfix {zoom:1;} /*for IE 5.5-7*/\r
+\r
+.fl {float:left !important;}\r
+.fr {float:right !important;}\r
+.cl {clear:both;}\r
+.rel {position:relative;}\r
+.abs {position:absolute;}\r
+.ac {text-align:center !important;}\r
+.ar {text-align:right !important;}\r
+.al {text-align:left !important;}\r
+.at {vertical-align:top !important;}\r
+.am {vertical-align:middle !important;}\r
+.ab {vertical-align:bottom;}\r
+.hand {cursor:pointer;}\r
+.bgnone {background:none !important;}\r
+.brnone {border:none !important;}\r
+.b {font-weight:bold !important;}\r
+.n {font-weight:normal !important;}\r
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}\r
+.mt5 {margin-top:5px !important;} \r
+/* //Layout fixing */\r
+\r
+@media print { .hide, .show { display: none; }}\r
+\r
+div#profile {\r
+    position: relative;\r
+}\r
+#profile p {\r
+       text-align: right;\r
+}\r
+\r
+div#toc_border {\r
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;\r
+}\r
+\r
+#contents li {\r
+       padding-top: 3px;\r
+       margin-top: 5px;\r
+       /* overflow: auto; */\r
+}\r
+\r
+p {\r
+       /* overflow: auto; */\r
+}\r
+\r
+div.table {\r
+       /* overflow: auto; */\r
 }
\ No newline at end of file
diff --git a/org.tizen.devtools/html/images/Thumbs.db b/org.tizen.devtools/html/images/Thumbs.db
new file mode 100644 (file)
index 0000000..02e945d
Binary files /dev/null and b/org.tizen.devtools/html/images/Thumbs.db differ
diff --git a/org.tizen.devtools/html/images/emulator_manager_ide.png b/org.tizen.devtools/html/images/emulator_manager_ide.png
index e562b8c..410b513 100644 (file)
Binary files a/org.tizen.devtools/html/images/emulator_manager_ide.png and b/org.tizen.devtools/html/images/emulator_manager_ide.png differ
diff --git a/org.tizen.devtools/html/images/features.png b/org.tizen.devtools/html/images/features.png
old mode 100755 (executable)
new mode 100644 (file)
diff --git a/org.tizen.devtools/html/images/manifest.png b/org.tizen.devtools/html/images/manifest.png
old mode 100755 (executable)
new mode 100644 (file)
diff --git a/org.tizen.devtools/html/images/privilege.png b/org.tizen.devtools/html/images/privilege.png
old mode 100755 (executable)
new mode 100644 (file)
diff --git a/org.tizen.devtools/html/images/ui_builder_1.png b/org.tizen.devtools/html/images/ui_builder_1.png
deleted file mode 100644 (file)
index 8871bbb..0000000
Binary files a/org.tizen.devtools/html/images/ui_builder_1.png and /dev/null differ
diff --git a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
index 9007a67..818f26b 100644 (file)
--- a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
+++ b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
@@ -1,399 +1,363 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-       <title>Additional Manifest Text Editor Elements</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#appcontrol">&lt;app-control&gt; Element</a>
-                       </li>
-                       <li><a href="#datacontrol">&lt;data-control&gt; Element</a>
-                       </li>
-                       <li><a href="#icon">&lt;icon&gt; Element</a>
-                       </li>
-                       <li><a href="#label">&lt;label&gt; Element</a>
-                       </li>
-                       <li><a href="#metadata">&lt;metadata&gt; Element</a>
-                       </li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Additional Manifest Text Editor Elements</h1> 
-       
-       <h2 name="appcontrol" id="appcontrol">&lt;app-control&gt; Element</h2> 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;app-control&gt;</span> element represents Tizen application control configuration information.</p>
-
-<table border="1"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;app-control&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>Tizen application control configuration information.</p> 
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
-      <ul>
-<li>1 or more (optional)</li> 
-      </ul>
-         <p><strong>Expected children:</strong> </p>      
-           <table border="1" id="feature"><tbody>
-<tr>
-<th width="50%">Child element</th> 
-     <th>Occurrences</th> 
-    </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#operation">&lt;operation&gt;</a></span></td> 
-     <td>1 or more (optional)</td> 
-    </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#uri">&lt;uri&gt;</a></span></td> 
-     <td>1 or more (optional)</td> 
-    </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="#mime">&lt;mime&gt;</a></span></td> 
-     <td>1 or more (optional)</td> 
-    </tr>
-</tbody></table>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="operation"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;operation&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>Operation type of the application control.</p>
-         <p><strong>Attributes:</strong> </p>      
-         <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/call</span></li> 
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span></li> 
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span></li> 
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/dial</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span></li> 
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span></li> 
-       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></li>
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-
-<table border="1" id="uri"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;uri&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>URI scheme of the application control.</p>
-         <p><strong>Attributes:</strong> </p>      
-         <ul>
-<li>URI scheme string</li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="mime"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;mime&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>MIME type of the application control.</p>
-         <p><strong>Attributes:</strong> </p>      
-         <ul>
-<li>MIME type string</li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<p><strong>For example:</strong></p>
-<pre class="prettyprint">&lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/compose&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;testuristring&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/pdf&quot;/&gt;
-&lt;/app-control&gt;
-</pre>
-
- <h2 name="datacontrol" id="datacontrol">&lt;datacontrol&gt; Element</h2> 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element represents configuration information for the Tizen data controls.</p>
-
-<table border="1"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>Set of configuration information for the Tizen data controls.</p> 
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
-      <ul>
-<li>1 or more (optional)</li> 
-      </ul>
-         <p><strong>Attributes:</strong> </p>      
-         <ul>
-       <li><a href="#providerid"><span style="font-family: Courier New,Courier,monospace">providerid</span></a></li>
-       <li><a href="#access"><span style="font-family: Courier New,Courier,monospace">access</span></a></li>
-       <li><a href="#type"><span style="font-family: Courier New,Courier,monospace">type</span></a></li></ul>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="providerid"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">providerid</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>ID of the data control provider.</p>
-         <p><strong>Expected value:</strong> </p>      
-         <ul>
-         <li>String</li>
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="access"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">access</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>Access mode of the data control.</p>
-         <p><strong>Expected value:</strong> </p>      
-         <ul>
-<li>String</li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="type"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">type</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>Type of the data control.</p>
-         <p><strong>Expected value:</strong> </p>      
-         <ul>
-<li>String</li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<p><strong>For example:</strong></p>
-<pre class="prettyprint">&lt;datacontrol access=&quot;WriteOnly&quot; providerid=&quot;http://uiapp.com/datacontrol/provider/uiapp&quot; type=&quot;Sql&quot;/&gt;
-</pre>
-
-  <h2 name="icon" id="icon">&lt;icon&gt; Element</h2> 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span> element represents the icon relative or absolute file path for the Tizen application.</p>
-
-  <table border="1"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>Represents the icon relative or absolute file path.</p>
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
-      <ul>
-<li>1 (optional)</li> 
-      </ul>
-</td> 
-    </tr>
-  <tr>
-   <td>
-<p><strong>Expected value:</strong> </p>      
-         <ul>
-<li>Icon path</li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<p><strong>For example:</strong></p>
-<pre class="prettyprint">
-&lt;icon&gt;testicon.png&lt;/icon&gt;
-</pre>
-
-
-  <h2  name="label" id="label">&lt;label&gt; Element</h2> 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;label&gt;</span> element represents the label value for the Tizen application.</p>
-
-  <table border="1"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;label&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>Set of human readable names for the Tizen application according to the language.</p>
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
-      <ul>
-<li>1 or more (optional)</li> 
-      </ul>
-</td> 
-    </tr>
-  <tr>
-   <td>
-         <p><strong>Attributes:</strong> </p>      
-         <ul>
-<li><a href="#section"><span style="font-family: Courier New,Courier,monospace">xml:lang</span></a></li>
-      </ul>
-<p><strong>Expected value:</strong> </p>      
-         <ul>
-<li>Label value in string</li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="section"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">xml:lang</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>Language of the label.</p>
-         <p><strong>Expected value:</strong> </p>      
-          <ul>
-<li><span style="font-family: Courier New,Courier,monospace">&quot;&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;&quot;</span></li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<p><strong>For example:</strong></p>
-<pre class="prettyprint">
-&lt;label&gt;testlabel&lt;/label&gt;
-&lt;label xml:lang=&quot;en-gb&quot;&gt;testlabel&lt;/label&gt;
-</pre>
-
-<h2  name="metadata" id="metadata">&lt;metadata&gt; Element</h2> 
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;metadata&gt;</span> element represents user-defined key-value pairs for the application.</p>
-
-<table border="1"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;metadata&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>User-defined key-value pairs for the application.</p> 
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
-      <ul>
-<li>1 or more (optional)</li> 
-      </ul>
-         <p><strong>Attributes:</strong> </p>      
-         <ul>
-       <li><a href="#key"><span style="font-family: Courier New,Courier,monospace">key</span></a></li>
-       <li><a href="#value"><span style="font-family: Courier New,Courier,monospace">value</span></a></li></ul>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="key"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">key</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>Key of metadata.</p>
-         <p><strong>Expected value:</strong> </p>      
-         <ul>
-         <li>String</li>
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="value"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">value</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>Value of metadata.</p>
-         <p><strong>Expected value:</strong> </p>      
-         <ul>
-<li>String</li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<p><strong>For example:</strong></p>
-<pre class="prettyprint">&lt;metadata key=&quot;testkey&quot; value=&quot;testvalue&quot;/&gt;
-</pre>
-
-<h2 name="bg-category" id="bg-category">&lt;background-category&gt;</h2>
-<p>The &lt;background-category&gt; element represents category of the application running on the background.</p>
-<div class="table"><table border="1"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element</th> 
-    </tr>
-<tr>
-<td> <p>Category of the application that allowed running on the background</p> 
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
-      <ul>
-<li>1 or more (optional)</li> 
-      </ul>
-         <p><strong>Attributes:</strong> </p>      
-         <ul>
-       
-       <li><a href="#value"><span style="font-family: Courier New,Courier,monospace">value</span></a></li></ul>
-</td> 
-    </tr>
-</tbody></table></div>
-<div class="table"><table border="1" id="value"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">value</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>Value of background category</p>
-         <p><strong>Expected value:</strong> </p>      
-         <ul>
-<li>String</li> 
-      </ul>
-</td> 
-    </tr>
-</tbody></table></div>
-<p><strong>For example:</strong></p><pre class="prettyprint">&lt;background-category value="download"/&gt;
-</pre>
-    
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Additional Manifest Text Editor Elements</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#appcontrol">&lt;app-control&gt; Element</a>\r
+                       </li>\r
+                       <li><a href="#datacontrol">&lt;data-control&gt; Element</a>\r
+                       </li>\r
+                       <li><a href="#icon">&lt;icon&gt; Element</a>\r
+                       </li>\r
+                       <li><a href="#label">&lt;label&gt; Element</a>\r
+                       </li>\r
+                       <li><a href="#metadata">&lt;metadata&gt; Element</a>\r
+                       </li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Additional Manifest Text Editor Elements</h1> \r
+       \r
+       <h2 name="appcontrol" id="appcontrol">&lt;app-control&gt; Element</h2> \r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;app-control&gt;</span> element represents Tizen application control configuration information.</p>\r
+\r
+<table border="1"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;app-control&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Tizen application control configuration information.</p> \r
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> \r
+      <ul>\r
+<li>1 or more (optional)</li> \r
+      </ul>\r
+         <p><strong>Expected children:</strong> </p>      \r
+           <table border="1" id="feature"><tbody>\r
+<tr>\r
+<th width="50%">Child element</th> \r
+     <th>Occurrences</th> \r
+    </tr>\r
+<tr>\r
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#operation">&lt;operation&gt;</a></span></td> \r
+     <td>1 or more (optional)</td> \r
+    </tr>\r
+<tr>\r
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#uri">&lt;uri&gt;</a></span></td> \r
+     <td>1 or more (optional)</td> \r
+    </tr>\r
+<tr>\r
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#mime">&lt;mime&gt;</a></span></td> \r
+     <td>1 or more (optional)</td> \r
+    </tr>\r
+</tbody></table>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<table border="1" id="operation"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;operation&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Operation type of the application control.</p>\r
+         <p><strong>Attributes:</strong> </p>      \r
+         <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/call</span></li> \r
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span></li> \r
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/create_content</span></li> \r
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/dial</span></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/multi_share</span></li> \r
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/share</span></li> \r
+       <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></li>\r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+\r
+<table border="1" id="uri"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;uri&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>URI scheme of the application control.</p>\r
+         <p><strong>Attributes:</strong> </p>      \r
+         <ul>\r
+<li>URI scheme string</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<table border="1" id="mime"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;mime&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>MIME type of the application control.</p>\r
+         <p><strong>Attributes:</strong> </p>      \r
+         <ul>\r
+<li>MIME type string</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<p><strong>For example:</strong></p>\r
+<pre class="prettyprint">&lt;app-control&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/compose&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;testuristring&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/pdf&quot;/&gt;\r
+&lt;/app-control&gt;\r
+</pre>\r
+\r
+ <h2 name="datacontrol" id="datacontrol">&lt;datacontrol&gt; Element</h2> \r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element represents configuration information for the Tizen data controls.</p>\r
+\r
+<table border="1"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Set of configuration information for the Tizen data controls.</p> \r
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> \r
+      <ul>\r
+<li>1 or more (optional)</li> \r
+      </ul>\r
+         <p><strong>Attributes:</strong> </p>      \r
+         <ul>\r
+       <li><a href="#providerid"><span style="font-family: Courier New,Courier,monospace">providerid</span></a></li>\r
+       <li><a href="#access"><span style="font-family: Courier New,Courier,monospace">access</span></a></li>\r
+       <li><a href="#type"><span style="font-family: Courier New,Courier,monospace">type</span></a></li></ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<table border="1" id="providerid"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">providerid</span> attribute</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>ID of the data control provider.</p>\r
+         <p><strong>Expected value:</strong> </p>      \r
+         <ul>\r
+         <li>String</li>\r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<table border="1" id="access"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">access</span> attribute</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Access mode of the data control.</p>\r
+         <p><strong>Expected value:</strong> </p>      \r
+         <ul>\r
+<li>String</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<table border="1" id="type"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">type</span> attribute</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Type of the data control.</p>\r
+         <p><strong>Expected value:</strong> </p>      \r
+         <ul>\r
+<li>String</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<p><strong>For example:</strong></p>\r
+<pre class="prettyprint">&lt;datacontrol access=&quot;WriteOnly&quot; providerid=&quot;http://uiapp.com/datacontrol/provider/uiapp&quot; type=&quot;Sql&quot;/&gt;\r
+</pre>\r
+\r
+  <h2 name="icon" id="icon">&lt;icon&gt; Element</h2> \r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span> element represents the icon relative or absolute file path for the Tizen application.</p>\r
+\r
+  <table border="1"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Represents the icon relative or absolute file path.</p>\r
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> \r
+      <ul>\r
+<li>1 (optional)</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+  <tr>\r
+   <td>\r
+<p><strong>Expected value:</strong> </p>      \r
+         <ul>\r
+<li>Icon path</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<p><strong>For example:</strong></p>\r
+<pre class="prettyprint">\r
+&lt;icon&gt;testicon.png&lt;/icon&gt;\r
+</pre>\r
+\r
+\r
+  <h2  name="label" id="label">&lt;label&gt; Element</h2> \r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;label&gt;</span> element represents the label value for the Tizen application.</p>\r
+\r
+  <table border="1"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;label&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Set of human readable names for the Tizen application according to the language.</p>\r
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> \r
+      <ul>\r
+<li>1 or more (optional)</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+  <tr>\r
+   <td>\r
+         <p><strong>Attributes:</strong> </p>      \r
+         <ul>\r
+<li><a href="#section"><span style="font-family: Courier New,Courier,monospace">xml:lang</span></a></li>\r
+      </ul>\r
+<p><strong>Expected value:</strong> </p>      \r
+         <ul>\r
+<li>Label value in string</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<table border="1" id="section"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">xml:lang</span> attribute</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Language of the label.</p>\r
+         <p><strong>Expected value:</strong> </p>      \r
+          <ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">&quot;&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;&quot;</span></li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<p><strong>For example:</strong></p>\r
+<pre class="prettyprint">\r
+&lt;label&gt;testlabel&lt;/label&gt;\r
+&lt;label xml:lang=&quot;en-gb&quot;&gt;testlabel&lt;/label&gt;\r
+</pre>\r
+\r
+<h2  name="metadata" id="metadata">&lt;metadata&gt; Element</h2> \r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;metadata&gt;</span> element represents user-defined key-value pairs for the application.</p>\r
+\r
+<table border="1"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;metadata&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>User-defined key-value pairs for the application.</p> \r
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> \r
+      <ul>\r
+<li>1 or more (optional)</li> \r
+      </ul>\r
+         <p><strong>Attributes:</strong> </p>      \r
+         <ul>\r
+       <li><a href="#key"><span style="font-family: Courier New,Courier,monospace">key</span></a></li>\r
+       <li><a href="#value"><span style="font-family: Courier New,Courier,monospace">value</span></a></li></ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<table border="1" id="key"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">key</span> attribute</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Key of metadata.</p>\r
+         <p><strong>Expected value:</strong> </p>      \r
+         <ul>\r
+         <li>String</li>\r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<table border="1" id="value"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">value</span> attribute</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Value of metadata.</p>\r
+         <p><strong>Expected value:</strong> </p>      \r
+         <ul>\r
+<li>String</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<p><strong>For example:</strong></p>\r
+<pre class="prettyprint">&lt;metadata key=&quot;testkey&quot; value=&quot;testvalue&quot;/&gt;\r
+</pre>\r
+\r
+    \r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm b/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
index 04965e6..a4174bc 100644 (file)
--- a/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
+++ b/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
@@ -175,12 +175,6 @@
 </td>
        </tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
-               <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span>
-</td>
-       </tr>
-<tr>
 <td style="border:none;"></td>
                <td colspan="6" style="border:none;">
                <span style="font-family: Courier New,Courier,monospace"><a href="#ui">&lt;ui-application&gt;</a></span>
@@ -235,12 +229,6 @@
 </td>
        </tr>
 <tr>
-<td colspan="2" style="border:none;"></td>
-               <td colspan="5" style="border:none;">
-               <span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span>
-</td>
-       </tr>
-<tr>
 <td style="border:none;"></td>
                <td colspan="6" style="border:none;">
                <span style="font-family: Courier New,Courier,monospace"><a href="#account">&lt;account&gt;</a></span>
@@ -630,10 +618,6 @@
 <td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span></td> 
      <td>1 or more (optional)</td> 
     </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span></td> 
-     <td>1 or more (optional)</td> 
-    </tr>
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
          <ul>
@@ -739,7 +723,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, the attribute is not supported in all Tizen devices.</td> 
+     <td class="note">This attribute is not supported in Tizen wearable devices.</td> 
     </tr> 
    </tbody> 
   </table>  
@@ -765,7 +749,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, the attribute is not supported in all Tizen devices.</td> 
+     <td class="note">This attribute is not supported in Tizen wearable devices.</td> 
     </tr> 
    </tbody> 
   </table>  
@@ -836,10 +820,6 @@
 <td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span></td> 
      <td>1 or more (optional)</td> 
     </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span></td> 
-     <td>1 or more (optional)</td> 
-    </tr>
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
          <ul>
@@ -850,6 +830,8 @@
           <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_nodisplay">nodisplay</a></span></li> 
        <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_taskmanage">taskmanage</a></span></li>
        <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_type">type</a></span></li>
+          <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_auto-restart">auto-restart</a></span></li> 
+       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_on-boot">on-boot</a></span></li> 
       </ul>
 </td> 
     </tr>
@@ -961,6 +943,60 @@
     </tr>
 </tbody></table>
 
+<table border="1" id="ui_auto-restart"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">auto-restart</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is relaunched automatically if it is terminated abnormally.</p>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This attribute is not supported in Tizen wearable devices.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+         <p><strong>Expected value:</strong> </p>      
+        <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+<li><span style="font-family: Courier New,Courier,monospace">false</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+<table border="1" id="ui_on-boot"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">on-boot</span> attribute</th> 
+    </tr>
+<tr>
+<td> <p>Indicates whether the application is launched automatically on device booting time or application installation time.</p>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This attribute is not supported in Tizen wearable devices.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+         <p><strong>Expected value:</strong> </p>      
+        <ul>
+<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
+<li><span style="font-family: Courier New,Courier,monospace">false</span></li>
+      </ul>
+</td> 
+    </tr>
+</tbody></table>
+
+
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">&lt;ui-application appid=&quot;org.tizen.uiapp&quot; auto-restart=&quot;false&quot; exec=&quot;uiapp&quot; launch_mode=&quot;single&quot; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple=&quot;false&quot; nodisplay=&quot;false&quot; on-boot=&quot;true&quot; taskmanage=&quot;true&quot; type=&quot;capp&quot;&gt;
@@ -1316,7 +1352,7 @@
 <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>
 <p><strong>Occurrences:</strong> </p> 
       <ul>
-<li>1 (optional)</li> 
+<li>1 or more (optional)</li> 
       </ul>
 <p><strong>Expected children:</strong> </p>      
            <table border="1"><tbody>
@@ -1660,4 +1696,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/t_trace_n.htm b/org.tizen.devtools/html/native_tools/t_trace_n.htm
index 2265145..ff9c737 100644 (file)
--- a/org.tizen.devtools/html/native_tools/t_trace_n.htm
+++ b/org.tizen.devtools/html/native_tools/t_trace_n.htm
@@ -1,258 +1,258 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>T-trace</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#dialog">T-trace Dialog</a></li>
-                       <li><a href="#run">Running the T-trace</a></li>
-                       <li><a href="#result">Viewing the Tracing Result</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-       
-<h1>T-trace</h1>
-
-<p>The T-trace is a profiling tool that allows you to optimize application performance by measuring and visualizing instrumented function calls in the Tizen platform. It helps you to understand what the system is doing while your application is running.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To operate the T-trace, you must first install Python (2.7.x) and Google Chrome&trade; on your computer.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-<h2 id="dialog" name="dialog">T-trace Dialog</h2> 
-
-<p>The following figure illustrates the T-trace dialog elements.</p>
-
-<p class="figure">Figure: T-trace dialog</p> 
-<p style="text-align: center;"> <img alt="T-trace dialog" src="../images/ttrace_dialog.png" /> </p> 
-
-<ol><li><strong>Tags</strong>
-<p>You can define which categories to trace. Currently, the T-trace provides several Tizen platform-specific categories, and a few low level system information categories. The Linux kernel and Tizen platform modules (such as EFL, xorg, and mmfw) support the categories.</p>
-<p>To enable the categories you want, select the applicable check boxes.</p></li>
-<li><strong>Bootup</strong>
-<p>Select the check box to reboot the target and start tracing for the platform boot. When tracing is finished, the result can be displayed on a viewer.</p></li>
-<li><strong>Reset</strong>
-<p>Select the check box to return all tags and options in the T-trace dialog to their default values.</p></li>
-<li><strong>Time(secs)</strong>
-<p>Set the time period to be used for tracing. You can select a predefined value of 10, 30, 60, or 120 seconds, enter a value of your own, or select <strong>manual</strong> (which means that no specific tracing time is set and you stop tracing when you want).</p></li>
-<li><strong>Buffer(kb)</strong>
-<p>Set the target buffer size. You can select a predefined value of 1024, 2048, 4096, or 10240 kb. If the set buffer size is insufficient, the oldest trace data is overwritten to accommodate new data.</p></li>
-<li>Main button
-<p>The main button allows you to control the tracing process based on the current operation state:</p>
-<ul>
-<li><strong>Ready to trace</strong>
-<p>When the <strong>Ready to trace</strong> button is displayed, click it to start tracing based on the selected tags and settings.</p></li>
-<li><strong>No Connection</strong>
-<p>When the <strong>No Connection</strong> button is displayed, you cannot perform any trace operations. Connect a target device to the computer to see the <strong>Ready to trace</strong> button.</p></li>
-<li><strong>Waiting</strong>
-<p>When the <strong>Waiting</strong> button is displayed, the T-trace is working on the target and you must wait for it to finish.</p></li>
-<li><strong>Stop</strong>
-<p>When the <strong>Stop</strong> button is displayed, click it to stop the tracing process. This button is displayed when the trace operation is started with the time period set to <strong>manual</strong>.</p></li>
-<li><strong>Show result</strong>
-<p>When the <strong>Show result</strong> button is displayed, the tracing process is finished. Click the button to run the viewer.</p></li></ul></li></ol>
-
-
-<h2 id="run" name="run">Running the T-trace</h2>
-
-<p>When you run the T-trace, the tracing process gathers traces during a specified time period. After tracing is finished, the T-trace processes the traces and creates a trace report in the HTML format.</p> 
-
-<p>To run the T-trace in the Tizen IDE:</p>
-<ol>
-<li>Set up the target device for the debugging mode and connect it to your computer with a USB cable.</li>
-<li>Install your application on the target device.</li>
-<li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Profile as &gt; Profile With T-trace</strong>.
-<p>The <strong>T-trace for TizenSDK</strong> dialog opens.</p>
-</li>
-<li>In the dialog, set the tracing options and click <strong>Ready to trace</strong>.</li>
-</ol>
-
-<p>You can also run the T-trace from the command line. The T-trace script is located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/ttrace</span> directory, and it requires that Python (2.7.x) or later to be installed on your computer.</p>
-
-<p>To run the T-trace from the command line:</p>
-<ol>
-<li>Open command prompt and move to the T-trace script directory:
-<pre class="prettyprint">
-$ cd TIZEN_SDK_HOME/tools/ttrace</pre>
-</li>
-<li>Run the T-trace script with applicable options:
-<pre class="prettyprint">
-$ python ttrace.py –-time=10 –-buf-size=10240 –o output_filename.html</pre>
-<p>For more information on the command options, access the help:</p>
-<pre class="prettyprint">
-$ python ttrace.py --help</pre>
-</li>
-</ol>
-
-
-<h2 id="result" name="result">Viewing the Tracing Result</h2>
-
-<p>The results are stored in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/ttrace/trace</span> directory. Both a <span style="font-family: Courier New,Courier,monospace">.text</span> binary-format trace file and a <span style="font-family: Courier New,Courier,monospace">.html</span> result report file are generated. The files are named with a timestamp (YYYYMMDDHHMMSS).</p>
-
-<p>You can view the results using the Google Chrome&trade; browser as a viewer. The viewer is launched with the result report when you click <strong>Show result</strong> in the T-trace dialog. If you run the T-trace from the command line, open the result report manually in the viewer.</p>
- 
-<p class="figure">Figure: T-trace viewer</p> 
-<p style="text-align: center;"> <img alt="T-trace viewer" src="../images/ttrace_viewer.png" /> </p>  
-
-<p>The following table lists the keyboard shortcuts available in the viewer.</p>
-
-<table>
-<caption>Table: Viewer keyboard shortcuts</caption>
-<tbody>
-<tr>
- <th>Key</th>
- <th>Description</th>
-</tr>
- <tr>
- <td>w</td>
- <td>Zoom into the trace timeline.</td>
- </tr>
- <tr>
- <td>s</td>
- <td>Zoom out of the trace timeline.</td>
- </tr>
- <tr>
- <td>a</td>
- <td>Pan left on the trace timeline.</td>
- </tr>
- <tr>
- <td>d</td>
- <td>Pan right on the trace timeline.</td>
- </tr>
- <tr>
- <td>e</td>
- <td>Center the trace timeline on the current mouse location.</td>
- </tr>
- <tr>
- <td>g</td>
- <td>Show the grid at the start of the currently selected task.</td>
- </tr>
- <tr>
- <td>Shift+g</td>
- <td>Show the grid at the end of the currently selected task.</td>
- </tr>
- <tr>
- <td>Right arrow</td>
- <td>Select the next event on the currently selected timeline.</td>
- </tr> 
-  <tr>
- <td>Left arrow</td>
- <td>Select the previous event on the currently selected timeline.</td>
- </tr>
-  <tr>
- <td>Double-click</td>
- <td>Zoom into the trace timeline.</td>
- </tr>
-  <tr>
- <td>Shift+Double-click</td>
- <td>Zoom out of the trace timeline.</td>
- </tr>
- </tbody></table>
- 
- <h3>Result Report</h3>
- 
-<p>The result report allows you to analyze various performance aspects of your application. The report shows how your application interacts with the Tizen framework, according to category tags you selected for tracing. The following table shows the kind of information each tag provides.</p>
-
-<table>
-<caption>Table: Tag-specific information</caption>
-<tbody>
-<tr>
- <th>Tag</th>
- <th>Description</th>
-</tr>
- <tr>
- <td>Application manager</td>
- <td>Shows how the application life-cycle management works.</td>
- </tr>
- <tr>
- <td>Camera</td>
- <td>Shows the workflow of the camera module.</td>
- </tr>
- <tr>
- <td>Input</td>
- <td>Shows how to process user input events from, for example, touch and keyboard.</td>
- </tr>
- <tr>
- <td>Video</td>
- <td>Shows the workflow of the video and radio system.</td>
- </tr>
- <!--<tr>
- <td>Web</td>
- <td>Shows the workflow of the Web Runtime and Web Engine.</td>
- </tr>-->
- <tr>
- <td>Window manager</td>
- <td>Shows the state changes of the window system, such as show, hide, resize, and rotation.</td>
- </tr>
- <tr>
- <td>Image</td>
- <td>Shows information on image processing, such as rotation, resize, and encoding.</td>
- </tr> 
- </tbody></table> 
-
- <p><strong>Application life-cycle analysis example:</strong></p>
-
-<p>You can analyze your application life-cycle using the T-trace in native <!--and Web--> applications. The following figure illustrates the various states of a Tizen application. The T-trace shows you the state changes as well as how much time is consumed at each state while the application is launching, running, and terminating.</p>
-
-<p class="figure">Figure: Application life-cycle</p> 
-<p style="text-align: center;"> <img alt="Application life-cycle" src="../images/ttrace_lifecycle.png" /> </p>  
-
-<p>To analyze the application life-cycle, run the T-trace with the <strong>Application manager</strong> tag. <!--For Web applications, enable the  <strong>Web</strong> tag too.--> When the tracing process is finished, the T-trace generates a report, as shown in the following figure.</p>
- 
-<p class="figure">Figure: Application life-cycle report</p> 
-<p style="text-align: center;"> <img alt="Application life-cycle report" src="../images/ttrace_report.png" /> </p> 
-
-<p>In the section for Kernel and application processes, you can see your application state changes and system information, such as the CPU frequency and kernel task scheduling on a common timeline. With this information, you can investigate in which state your application spends unnecessary time and then make changes to optimize the time usage.</p>
-
- 
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>T-trace</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#dialog">T-trace Dialog</a></li>\r
+                       <li><a href="#run">Running the T-trace</a></li>\r
+                       <li><a href="#result">Viewing the Tracing Result</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       \r
+<h1>T-trace</h1>\r
+\r
+<p>The T-trace is a profiling tool that allows you to optimize application performance by measuring and visualizing instrumented function calls in the Tizen platform. It helps you to understand what the system is doing while your application is running.</p>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">To operate the T-trace, you must first install Python (2.7.x) and Google Chrome&trade; on your computer.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  \r
+<h2 id="dialog" name="dialog">T-trace Dialog</h2> \r
+\r
+<p>The following figure illustrates the T-trace dialog elements.</p>\r
+\r
+<p class="figure">Figure: T-trace dialog</p> \r
+<p style="text-align: center;"> <img alt="T-trace dialog" src="../images/ttrace_dialog.png" /> </p> \r
+\r
+<ol><li><strong>Tags</strong>\r
+<p>You can define which categories to trace. Currently, the T-trace provides several Tizen platform-specific categories, and a few low level system information categories. The Linux kernel and Tizen platform modules (such as EFL, xorg, and mmfw) support the categories.</p>\r
+<p>To enable the categories you want, select the applicable check boxes.</p></li>\r
+<li><strong>Bootup</strong>\r
+<p>Select the check box to reboot the target and start tracing for the platform boot. When tracing is finished, the result can be displayed on a viewer.</p></li>\r
+<li><strong>Reset</strong>\r
+<p>Select the check box to return all tags and options in the T-trace dialog to their default values.</p></li>\r
+<li><strong>Time(secs)</strong>\r
+<p>Set the time period to be used for tracing. You can select a predefined value of 10, 30, 60, or 120 seconds, enter a value of your own, or select <strong>manual</strong> (which means that no specific tracing time is set and you stop tracing when you want).</p></li>\r
+<li><strong>Buffer(kb)</strong>\r
+<p>Set the target buffer size. You can select a predefined value of 1024, 2048, 4096, or 10240 kb. If the set buffer size is insufficient, the oldest trace data is overwritten to accommodate new data.</p></li>\r
+<li>Main button\r
+<p>The main button allows you to control the tracing process based on the current operation state:</p>\r
+<ul>\r
+<li><strong>Ready to trace</strong>\r
+<p>When the <strong>Ready to trace</strong> button is displayed, click it to start tracing based on the selected tags and settings.</p></li>\r
+<li><strong>No Connection</strong>\r
+<p>When the <strong>No Connection</strong> button is displayed, you cannot perform any trace operations. Connect a target device to the computer to see the <strong>Ready to trace</strong> button.</p></li>\r
+<li><strong>Waiting</strong>\r
+<p>When the <strong>Waiting</strong> button is displayed, the T-trace is working on the target and you must wait for it to finish.</p></li>\r
+<li><strong>Stop</strong>\r
+<p>When the <strong>Stop</strong> button is displayed, click it to stop the tracing process. This button is displayed when the trace operation is started with the time period set to <strong>manual</strong>.</p></li>\r
+<li><strong>Show result</strong>\r
+<p>When the <strong>Show result</strong> button is displayed, the tracing process is finished. Click the button to run the viewer.</p></li></ul></li></ol>\r
+\r
+\r
+<h2 id="run" name="run">Running the T-trace</h2>\r
+\r
+<p>When you run the T-trace, the tracing process gathers traces during a specified time period. After tracing is finished, the T-trace processes the traces and creates a trace report in the HTML format.</p> \r
+\r
+<p>To run the T-trace in the Tizen IDE:</p>\r
+<ol>\r
+<li>Set up the target device for the debugging mode and connect it to your computer with a USB cable.</li>\r
+<li>Install your application on the target device.</li>\r
+<li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Profile as &gt; Profile With T-trace</strong>.\r
+<p>The <strong>T-trace for TizenSDK</strong> dialog opens.</p>\r
+</li>\r
+<li>In the dialog, set the tracing options and click <strong>Ready to trace</strong>.</li>\r
+</ol>\r
+\r
+<p>You can also run the T-trace from the command line. The T-trace script is located in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/ttrace</span> directory, and it requires that Python (2.7.x) or later to be installed on your computer.</p>\r
+\r
+<p>To run the T-trace from the command line:</p>\r
+<ol>\r
+<li>Open command prompt and move to the T-trace script directory:\r
+<pre class="prettyprint">\r
+$ cd TIZEN_SDK_HOME/tools/ttrace</pre>\r
+</li>\r
+<li>Run the T-trace script with applicable options:\r
+<pre class="prettyprint">\r
+$ python ttrace.py –-time=10 –-buf-size=10240 –o output_filename.html</pre>\r
+<p>For more information on the command options, access the help:</p>\r
+<pre class="prettyprint">\r
+$ python ttrace.py --help</pre>\r
+</li>\r
+</ol>\r
+\r
+\r
+<h2 id="result" name="result">Viewing the Tracing Result</h2>\r
+\r
+<p>The results are stored in the <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/ttrace/trace</span> directory. Both a <span style="font-family: Courier New,Courier,monospace">.text</span> binary-format trace file and a <span style="font-family: Courier New,Courier,monospace">.html</span> result report file are generated. The files are named with a timestamp (YYYYMMDDHHMMSS).</p>\r
+\r
+<p>You can view the results using the Google Chrome&trade; browser as a viewer. The viewer is launched with the result report when you click <strong>Show result</strong> in the T-trace dialog. If you run the T-trace from the command line, open the result report manually in the viewer.</p>\r
+ \r
+<p class="figure">Figure: T-trace viewer</p> \r
+<p style="text-align: center;"> <img alt="T-trace viewer" src="../images/ttrace_viewer.png" /> </p>  \r
+\r
+<p>The following table lists the keyboard shortcuts available in the viewer.</p>\r
+\r
+<table>\r
+<caption>Table: Viewer keyboard shortcuts</caption>\r
+<tbody>\r
+<tr>\r
+ <th>Key</th>\r
+ <th>Description</th>\r
+</tr>\r
+ <tr>\r
+ <td>w</td>\r
+ <td>Zoom into the trace timeline.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>s</td>\r
+ <td>Zoom out of the trace timeline.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>a</td>\r
+ <td>Pan left on the trace timeline.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>d</td>\r
+ <td>Pan right on the trace timeline.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>e</td>\r
+ <td>Center the trace timeline on the current mouse location.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>g</td>\r
+ <td>Show the grid at the start of the currently selected task.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>Shift+g</td>\r
+ <td>Show the grid at the end of the currently selected task.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>Right arrow</td>\r
+ <td>Select the next event on the currently selected timeline.</td>\r
+ </tr> \r
+  <tr>\r
+ <td>Left arrow</td>\r
+ <td>Select the previous event on the currently selected timeline.</td>\r
+ </tr>\r
+  <tr>\r
+ <td>Double-click</td>\r
+ <td>Zoom into the trace timeline.</td>\r
+ </tr>\r
+  <tr>\r
+ <td>Shift+Double-click</td>\r
+ <td>Zoom out of the trace timeline.</td>\r
+ </tr>\r
+ </tbody></table>\r
+ \r
+ <h3>Result Report</h3>\r
+ \r
+<p>The result report allows you to analyze various performance aspects of your application. The report shows how your application interacts with the Tizen framework, according to category tags you selected for tracing. The following table shows the kind of information each tag provides.</p>\r
+\r
+<table>\r
+<caption>Table: Tag-specific information</caption>\r
+<tbody>\r
+<tr>\r
+ <th>Tag</th>\r
+ <th>Description</th>\r
+</tr>\r
+ <tr>\r
+ <td>Application manager</td>\r
+ <td>Shows how the application life-cycle management works.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>Camera</td>\r
+ <td>Shows the workflow of the camera module.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>Input</td>\r
+ <td>Shows how to process user input events from, for example, touch and keyboard.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>Video</td>\r
+ <td>Shows the workflow of the video and radio system.</td>\r
+ </tr>\r
+ <!--<tr>\r
+ <td>Web</td>\r
+ <td>Shows the workflow of the Web Runtime and Web Engine.</td>\r
+ </tr>-->\r
+ <tr>\r
+ <td>Window manager</td>\r
+ <td>Shows the state changes of the window system, such as show, hide, resize, and rotation.</td>\r
+ </tr>\r
+ <tr>\r
+ <td>Image</td>\r
+ <td>Shows information on image processing, such as rotation, resize, and encoding.</td>\r
+ </tr> \r
+ </tbody></table> \r
+\r
+ <p><strong>Application life-cycle analysis example:</strong></p>\r
+\r
+<p>You can analyze your application life-cycle using the T-trace in native <!--and Web--> applications. The following figure illustrates the various states of a Tizen application. The T-trace shows you the state changes as well as how much time is consumed at each state while the application is launching, running, and terminating.</p>\r
+\r
+<p class="figure">Figure: Application life-cycle</p> \r
+<p style="text-align: center;"> <img alt="Application life-cycle" src="../images/ttrace_lifecycle.png" /> </p>  \r
+\r
+<p>To analyze the application life-cycle, run the T-trace with the <strong>Application manager</strong> tag. <!--For Web applications, enable the  <strong>Web</strong> tag too.--> When the tracing process is finished, the T-trace generates a report, as shown in the following figure.</p>\r
+ \r
+<p class="figure">Figure: Application life-cycle report</p> \r
+<p style="text-align: center;"> <img alt="Application life-cycle report" src="../images/ttrace_report.png" /> </p> \r
+\r
+<p>In the section for Kernel and application processes, you can see your application state changes and system information, such as the CPU frequency and kernel task scheduling on a common timeline. With this information, you can investigate in which state your application spends unnecessary time and then make changes to optimize the time usage.</p>\r
+\r
+ \r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.devtools/html/scripts/common.js b/org.tizen.devtools/html/scripts/common.js
index 60250b6..d46479a 100644 (file)
--- a/org.tizen.devtools/html/scripts/common.js
+++ b/org.tizen.devtools/html/scripts/common.js
@@ -1,1752 +1,1752 @@
-$(document).ready(function(){
-       $('#contents table').each(function(){
-               if (!$(this).parent().hasClass('table')) {
-                       $(this).wrap('<div class="table"></div>');
-               }
-       });
-
-       // Lnb Menu Initialize
-       if($('div#contents').find('.lnb').length){
-               if($("ul li.events_news").size() > 0) {
-                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
-               }
-               initLnb();
-               initScript(staticURL + "/js/fixednavbar.js", function(){});
-       }
-
-       //family site
-       if($('div#footer').find('dl#familySlider').length){
-               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
-       }
-
-       // Svn Commit Test
-       
-       // Language Selection
-       if($('div#header').find('.util').length){
-               var $lang = $('div#header').find('.util');
-               $lang.find('a.lang').toggle(function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
-                       },function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
-                       });
-
-               $lang.bind('mouseleave',function(){
-                       $(this).find('ul.language').hide();
-                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-               });
-
-               $lang.find('ul.language').children().last().on("keydown", function(e) {
-                       if(e.which == 9 && e.shiftKey) {
-                               return true;
-                       }
-                       
-                       if(e.which == 9) {
-                               e.preventDefault();
-                               $lang.find('ul.language').hide();
-                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-                               setTimeout(function() {
-                                       $("#searchTop").focus();
-                               }, 1);
-                       }
-               });
-       }
-
-       // Open the Sitemap
-       var $open = $('div#header').find('.bt-open');
-       $open.bind('click',function(){
-               var $self = $(this);
-               var $sitemap = $('div#wrapper').find('div#sitemap');
-               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
-
-               if($sitemap.is(':visible')){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
-
-                       $self.attr('title','open sitemap');
-               }else{
-                       var source = $self.css('background-image').replace('.gif','_.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
-
-                       $self.attr('title','close sitemap');
-               }
-               
-               $self.css('background-image',source);
-               $sitemap.slideToggle('fast');
-               
-               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       $self.css('background-image',source);
-                       $sitemap.slideToggle('fast');
-               });
-
-       });
-
-       // Search Auto Complete
-       var $search = $('div#header').find('fieldset.search');
-       var $searchList = $search.find('#topAutocomplete>ul');
-
-       if($search.length){
-               $search.find('> input').each(function(){
-                       $(this).bind({
-                               keydown : function(e){
-                       
-                                       if(e.type=='keydown'&& $(this).val().length!=0){
-                                               $search.find('#topAutocomplete').show();
-                                               var hei = $searchList.outerHeight();
-                                               if(hei>400){
-                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
-                                               }
-                                       }
-                                       if(e.keyCode==9){
-                                               $search.unbind('focusout.search');
-                                       }
-                                       if(e.keyCode==40){
-                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
-                                               //window.scrollTo(0,0);
-                                       }
-                               },
-                               focusin : function(e){
-                                       if($(this).val()==='Search'){
-                                               $(this).val('');
-                                       }
-                               },
-                               focusout : function(e){
-                                       if($(this).val().length==0) $(this).val('Search');
-                               }
-                       });
-               });
-
-               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
-               //      if(e.keyCode==40){
-               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
-               //      }
-               //});
-
-               $search.find('#topAutocomplete').bind('mouseleave',function(e){
-                       if($search.find('> input').val().length==0){
-                               $search.find('> input').val('Search');
-                       }
-                       $search.find('#topAutocomplete').hide();
-               });
-
-               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
-                       $search.find('> input').val('Search');
-                       $search.find('#topAutocomplete').hide();
-                       
-                       //$search.bind('focusout.search', function(){
-                       //      $(this).find('> input').val('Search');
-                       //      $(this).find('#topAutocomplete').hide();
-                       //});
-               });
-       }
-});
-
-// 비차단 동적 스크립트 로딩
-function initScript(url, callback){
-       var script = document.createElement("script");
-       script.type = "text/javascript";
-
-       if(script.readyState){ // 인터넷 익스플로러
-               script.onreadystatechange = function(){
-                       if(script.readyState=="loaded" || script.readyState=="complete"){
-                               script.onreadystatechange = null;
-                               callback();
-                       }
-               };
-       }else{  // 다른  브라우저
-               script.onload = function(){
-                       callback();
-               };
-       }
-
-       script.src = url;
-       document.getElementsByTagName("head")[0].appendChild(script);
-}
-
-
-// lnb
-function initLnb(){
-       var sMenu = $('.lnb');
-       var sItem = sMenu.find('>li');
-
-       sItem.each(function(){
-               if($(this).find('a').hasClass('more')){
-                       if($(this).find('ul').is(":visible")) {
-                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
-                       } else {
-                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
-                       }
-               }
-       });
-       
-       var setIcoArrText = function(obj) {
-               if(obj.next().is(":visible")) {
-                       obj.text("close submenu");
-               } else {
-                       obj.text("open submenu");
-               }
-       }
-       
-       sItem.find('.ico-arr').on("click", function() {
-               var $that = $(this);
-               var liBox = $that.parent();   
-               var ulBox = $that.next();
-               
-               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
-               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
-               
-               if(liBox.hasClass("on")) {
-                       if(ulBox.is(":visible")) {
-                               ulBox.hide();
-                               $that.addClass("ico-on");
-                       } else {
-                               ulBox.show();
-                               $that.removeClass("ico-on");
-                       }
-                       setIcoArrText($that);
-                       return true;
-               }
-               
-               if(liBox.hasClass("active")) {
-                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
-                       ulBox.hide();
-               } else {
-                       liBox.addClass("active").find("a").eq(0).addClass("bov");
-                       ulBox.show();
-               }
-               setIcoArrText($that);
-       });
-
-       sItem.hover(function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-               $(this).find("a").eq(0).addClass("bov");
-       },function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-                $(this).find("a").eq(0).removeClass("bov");
-
-       });
-}
-
-//footer rolling banner
-function fn_rollToEx(container,objectId,step,auto){
-
-       // 롤링할 객체를 변수에 담아둔다.
-       var el = $('#'+container).find('#'+objectId);
-       var lastChild;
-       var speed = 3000;
-       var timer = 0;
-       var autoplay = false;
-
-       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
-       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
-       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
-       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
-       el.data('animating',false);
-       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
-       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
-
-       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
-
-       if(arguments.length==4){
-               el.data('autoStart', auto);
-       }
-
-       if(el.data('autoStart')){
-               if(timer==0){
-                       timer = setInterval(moveNextSlide, speed);
-                       autoplay = true;
-               }
-       }
-
-       el.bind({
-               mouseenter:function(){
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-
-       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
-       el.data('prev').bind({
-               click:function(e){
-                       e.preventDefault();
-                       movePrevSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
-       el.data('next').bind({
-               click:function(e){
-                       e.preventDefault();
-                       moveNextSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       function movePrevSlide(){
-               if(!el.data('animating')){
-                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
-                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
-                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
-                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
-                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
-               
-                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
-
-                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-    function moveNextSlide(){
-               if(!el.data('animating')){
-                       el.data('animating',true);
-
-                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
-                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
-                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
-                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
-                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
-                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
-
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-}
-
-function fn_slide(options){
-
-       var opts = jQuery.extend({},options);
-
-       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
-       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
-       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
-       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
-       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
-       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
-       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
-       var auto = false;
-       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
-       var time;
-
-
-       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
-       effect = opts.effect;
-       auto = opts.auto;
-
-       if(auto){
-               time = setTimeout('slideShow()',3000);
-       }
-
-       slideShow = function(){
-
-               if(current < len-1){
-                       current++;
-               }else{
-                       current=0;
-               }
-
-               controllStatus();
-
-               moveControl('next');
-
-               time = setTimeout('slideShow()',3000);
-       }
-
-       controllStatus = function(){
-               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
-               if(current>0||current<len-1){                           
-                       $prev.show();
-                       $next.show();
-               }
-               if(current==0){
-                       $prev.hide();
-                       $next.show();
-               }
-               if(current>=len-1){
-                       $prev.show();
-                       $next.hide();
-               }
-       }
-
-       moveControl = function(msg){
-               if(opts.bt!=null){
-                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
-                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
-                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
-               }
-
-               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                       $obj.children().hide();
-                       $obj.children().eq(current).show();
-               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                       $obj.animate({'left':'-'+size*current},'slow');
-               }
-       }
-
-       $obj.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               }
-       });
-
-       //롤링 버튼 클릭시
-       $bt.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
-
-                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
-
-                       controllStatus();
-
-                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                               $obj.children().hide();
-                               $obj.children().eq(current).show();
-                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                               $obj.animate({'left':'-'+size*current},'slow');
-                       }
-
-                       // 모든 롤링 버튼을 비활성화
-                       $bt.each(function(){
-                               var source = $(this).find('img').attr('src').replace('_.png','.png');
-                                $(this).find('img').attr('src',source);
-                       });
-
-                       // 선택한 롤링버튼을 활성화
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-
-                       return false;
-               }
-       });
-
-       //이전 버튼 클릭시
-       $prev.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
-                       current--;                                                      //이미지 인덱스값 1씩 감소
-
-                       moveControl('prev');
-
-                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
-
-                       return false;
-               }
-       });
-
-       //다음 버튼 클릭시
-       $next.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       current++;                                                      //이미지 인덱스값 1씩 증가
-                       
-                       moveControl('next');
-
-                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
-                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
-
-                       return false;
-               }
-       });
-
-}
-
-// main rolling banner
-function slideMotion1(){
-       var $banner = $('#rolling .motionview'),
-               //$nav = $('#rolling ul.nav'),
-               banner = {prev:null, next:null},
-               size = $banner.children().length;
-               index = 1,
-               speed = 3000,
-               timer = null,
-               auto = true,
-               width = parseInt(100/size),
-               rest = parseInt(100%size);
-
-       var $nav = $('<ul class="nav">').insertAfter($banner);
-
-       $banner.children().each(function(index){
-               index++;
-               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
-               if(index==size){
-                       $nav.children().eq(-1).find('a').css('background-image','none');
-               }
-       });
-
-       if(rest>0){
-               width+=rest;
-               $nav.children().eq(-1).css('width',width+'%');
-       }
-
-       $nav.delegate("li",'click',function(){
-               var idx = $nav.children().index(this);
-               index = idx;
-               banner.prev = $banner.find('a.active');
-               banner.next = $banner.find('a').eq(index);
-
-               clearInterval(timer);
-               auto = false;
-               
-               $nav.trigger('change.banner',banner)
-                       .trigger('change.tab',index);
-
-               return false;
-       });
-
-       $nav.bind('change.banner',function(event, banner){
-               aniMotion();
-       });
-
-       $nav.bind('change.tab',function(event, index){
-               $nav.children().find('a').removeClass('sel');
-               $nav.children().eq(index).find('a').addClass('sel');
-       });
-
-       timer = setInterval(autoMotion, speed);
-
-       function autoMotion(){
-               if(index > size-1) index = 0;
-
-               aniMotion();
-       }
-
-       function aniMotion(){
-               if(auto){
-                       banner.prev = $banner.find('a.active');
-                       banner.next = $banner.find('a').eq(index);
-
-                       $nav.children().find('a').removeClass('sel');
-                       $nav.children().eq(index).find('a').addClass('sel');
-               }
-               banner.prev.addClass('last-active');
-               banner.next.css({'opacity':0.0})
-                       .addClass('active')
-                       .animate({'opacity':1.0}, 1000, function(){
-                               banner.prev.removeClass('active last-active');
-
-                               if(auto){
-                                       index++;
-                               }else{
-                                       index++;
-                                       timer = setInterval(autoMotion, speed*1.5);
-                                       auto = true;
-                               }
-                       });
-       }
-}
-
-// forum list show or hide function
-function toggleFunc(){
-       
-       var defaulNum = [2];
-
-       $('.forum-tit').each(function(){
-               var self = $(this);
-
-               var idx = $('.forum-tit').index(this);
-
-               for(i=0;i<=defaulNum.length;i++){
-                       if(idx==defaulNum[i]){
-                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
-                               self.find('a.toggle').css('background-image',source);
-
-                               self.find('a.toggle').text('Show');
-                               self.addClass('mb35').next().hide();
-                       }
-               }
-
-               self.find('a.toggle').click(function(){
-                       
-                       if(self.next().is(':visible')){
-                               var source = $(this).css('background-image').replace('.gif','_.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Show');
-                               self.addClass('mb35').next().hide();
-                       }else{
-                               var source = $(this).css('background-image').replace('_.gif','.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Hide');
-                               self.removeClass('mb35').next().show();
-                       }
-
-                       return false;
-
-               });
-
-       });
-}
-
-// 파일 업로드
-function fileUpload( width ){
-       //var $img = $('.attach input[type=image]');
-       //var width = $img.attr('width');
-
-       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
-       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
-
-       var $file = $('.attach input.upload').css({
-               "position": "absolute",
-               "top": "0px",
-               "right": "0px",
-               "width": w,
-               "cursor": "pointer",
-               "opacity": "0.0",
-               "height": "23px"
-       });
-       $file.off('change');
-       $file.on('change',function(e){
-               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
-                       return;
-               }
-               var idx = $file.index(this);
-               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
-               var fileErrMsg = {
-                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
-                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
-                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
-                           ,ext_ko : "지원하지 않는 확장자 입니다."
-                           ,ext_zh : "不允许上传具有该扩展名的文件。"
-                           ,ext_en : "File extention not allowed for upload."
-               };
-               var initFileInput = function(obj) {
-                       $(obj).parent().find('input.file').val("");
-                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
-                       else $(obj).val("");
-               };
-               
-               var filename = $(this).val();
-               
-               //CHK File ext
-               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
-                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
-                                     , "jpg", "png", "zip"];
-               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
-               var findFlag = false;
-               for(var i = 0; i < imgExts.length; i++) {
-                       if(imgExts[i] == fileExt) {
-                               findFlag = true;
-                               break;
-                       }
-               }
-       
-               if(findFlag == false) {
-                       alert( fileErrMsg["ext_" + localeCode] );
-                       initFileInput(this);
-//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
-                       return;
-               }
-               
-               //CHK File Size
-               if(
-                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
-                               || $.browser.mozilla //FF
-                               || $.browser.safari //Chrome
-               )
-               {
-                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
-                       if( filesize > 200 ) {
-                               alert( fileErrMsg["limit_" + localeCode] );
-                               initFileInput(this);
-                               return;
-                       }
-               }
-               
-               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
-       });
-};
-
-
-// Show or Hide Toggle
-function showToEx(args){
-
-       if(!arguments.length) return false;
-       
-       var bt = $('#'+args.bt);
-       var obj = $('#'+args.obj);
-
-       var source = bt.css('background-image');
-       
-       if(obj.is(':visible')){
-               obj.hide();
-       }
-
-       bt.toggle(function(){
-               var src = source.replace('.gif','_.gif');
-               bt.css('background-image', src);
-               obj.show();
-               
-               return false;
-       },function(){
-               var src = source.replace('_.gif','.gif');
-               bt.css('background-image', src);
-               obj.hide();
-
-               return false;
-       });
-
-}
-
-
-// FAQ 20131016
-function faqToEx(){
-
- var $question = $('#contents').find('.question');
- var $answer = $('#contents').find('.answer');
-
- // All Answer Rows Hide
- $answer.hide().find('.conts').hide();
-
- $question.each(function(){
-  var $self = $(this);
-  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
-  
-  $self.find('a').bind('click',function(){
-   $("#selArea ul").hide();
-   /*
-   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
-
-   $answer.hide().find('.conts').hide();
-   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
-   */
-
-   /* 20120822 hjh modify*/
-   /* if ( this open )?  close : all close, e.target open */
-   var cutTtl  = $(this).parent().children("div").html();
-   var ttl     = $(this).parent().parent().children("td.real_question").html();
-   
-   if($(this).parents('tr').next().find('.answer').is(':visible')){
-    $(this).html(cutTtl);
-    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
-     $answer.hide();
-    });
-   }else{
-    titleInit();
-    $(this).html(ttl);
-    $answer.hide().find('.conts').hide();
-    //$answer.slideUp('normal').find('.conts').hide();
-    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
-   }   
-
-   return false;
-  });
- });
-
- $answer.each(function(){
-  var $self = $(this);
-
-  $(this).find('a.bt-close-faq').bind('click',function(){
-   var question_td = $(this).parent().parent().parent().prev().children("td.question");
-   var cutTtl      = question_td.children("div").html();
-   question_td.children("a").html(cutTtl);
-   
-   $self.find('.conts').slideUp('fast',function(){
-    $self.hide();
-   });
-
-   return false;
-  });
- });
- 
- var titleInit = function() {
-  $question.each(function(i) {
-   $(this).find("a").html($(this).find("div").html());
-  });
- }
-}
-
-
-
-/**
- *  쓰기페이지 Tab 영역 컨트롤
- *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
- */
-function setSwitchTab( selector ) {
-       var tabs = $('.tab-list').find("li");
-       var elements = $( selector );
-
-       $( elements ).each( function( i ) {
-               if( i != 0 )
-               {
-                       $(this).hide();
-               }
-       })
-
-       // Control Tabs
-       $( tabs ).each( function( i ) {
-               $( this ).click( function(){
-                       resetClass();
-
-                       $( this ).find( 'a' ).addClass( "sel" );
-                       $( elements[i] ).show();
-
-                       return false;
-               });
-       });
-
-       // Class 리셋
-       function resetClass()
-       {
-               $( tabs ).each( function( i ) {
-                       $( this ).find( 'a' ).removeClass( 'sel' );
-               });
-
-               $( elements ).each( function( i ) {
-                       $( this ).hide();
-               });
-       }
-}
-
-var SET_ATTACH_LIMIT;
-var SET_ATTACH_WIDTH;
-var SET_ATTACH_BTNNAME;
-
-var firstAddAction = function(obj, limit, w, btnName) {
- var bn            = btnName || 'File';
- var fileAttachStr = "<li class='clfix no-first'>";
- fileAttachStr += '<div class="attach">';
- fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
- fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
- fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
- fileAttachStr += '</div>';
- fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
- fileAttachStr += '</li>';
- obj.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    $("a.remove-btn").eq(0).focus();
-   }, 1);
-  }
- });
- 
- obj.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- 
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-}
-
-var firstRemoveAction = function(id) {
- var obj = $("#" + id);
- var compFile    = $("input[type=file]");
- var compFileCnt = compFile.size();
- var ulObj       = compFile.eq(0).parent().parent().parent();
- if(compFileCnt <= 1) {
-  var firstCompFile = compFile.eq(0);
-  firstCompFile.prev().prev().val("");
-  if ($.browser.msie) {
-               $(obj).parent().find('input.file').val("");
-               firstCompFile.replaceWith( firstCompFile.clone(true) );
-       } else {
-               firstCompFile.val("");
-               firstCompFile.prev().prev().val("");
-  }
- } else {
-  obj.parent().remove();
-  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
-  
-  //add-btn event..
-  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
- }
- 
- ulObj
- .find("li")
- .eq(0)
- .removeClass("no-first")
- .find("a.remove-btn")
- .attr("id", id)
- .unbind("click");
- 
- setTimeout(function() {
-  $("#" + id).focus();
- }, 100);
- 
- $("#" + id).on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   var that = $(this);
-   setTimeout(function() {
-    that.prev().focus();
-   }, 1);
-  }
- });
- 
- $("#" + id).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-/** 
- * File 첨부컨트롤
- * @param limit 최대 파일 첨부 갯수
- * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
- */
-function setAttachFile( limit, width, btnName, removeBtnId )
-{
- var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
- var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
- var inputFile     = $( 'ul.file-att-form input[type=file]' );
- 
- SET_ATTACH_LIMIT = limit;
- SET_ATTACH_WIDTH = w;
- SET_ATTACH_BTNNAME = btnName;
- 
- inputFile.on("keydown", function(e) {
-  var that = $(this);
-  
-  if(e.which == 9 && e.shiftKey) {
-   return true;
-  }
-  
-  if(e.which === 9) {
-   e.preventDefault();
-   setTimeout(function() {
-    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
-   }, 1);
-  }
- });
- 
- inputFile.on("focusin", function(e) {
-  $(this).parent().css("outline", "1px dotted #2d2d2d");
- }).on("focusout", function(e) {
-  $(this).parent().css("outline", "");
- });
- 
- firstAddAction(btnFileAttach, limit, w, btnName);
- 
- /*
- btnFileAttach.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    inputFile.focus();
-   }, 1);
-  }
- });
- 
- btnFileAttach.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
-
- // File 제거 버튼
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- */
- /**
-  *  2012-08-08 전종호 추가
-  *  파일 Input Text 영역 너비를 잡아주는 메서드
-  */
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-
- updateFileField();
- fileUpload( w + 50 );
- 
- $("#" + removeBtnId).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-
-
-/** 
- * [PAGE] device speces list page
- * date : 20120808
- * id : hjh
- */
-function initDevicespecsList (){
-       var isCompareView=false;
-       $("#devicespecs-list > li").each( 
-               function(i){ 
-                       $(".info", this).bind("click", devicespecsListInfoToggle);
-                       $(".xx", this).bind("click", devicespecsListInfoToggle);
-                       
-                       //detail info layer toggle function
-                       function devicespecsListInfoToggle (){
-                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
-                               return false;
-                       }
-       });
-
-
-       /* DEVICE COMPARE 열리는 부분
-       - defualt : close. 
-       - 최초 한번만 열림 
-       - 현재는 compare 버튼에 공통으로 함수 바인딩
-       */
-       function devicespecsCompareOnOff (){
-               if ( isCompareView ) return;
-               var ww = ( isCompareView ) ? "30px":"207px";
-               $("#devicespecs-compare").animate({
-                   height: ww }, 300, "linear", function(){ });
-
-               isCompareView = ( isCompareView ) ? false:true;
-               return false;
-       }
-
-       //compare 버튼 공통으로 클릭 이벤트 걸림 
-       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
-}
-
-/** 
- * [PAGE] device speces view page
- * date : 20120808
- * id : hjh
- */
- function initDevicespecsView (){
-       var isImgView = false;
-       var isView = 0;
-       
-       //thumbnail overevent bind
-       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
-       focusDeviceDetail (1);
-       
-       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.type === "keydown" && e.which == 9) {
-                       setTimeout(function() {
-                               $("#img-viewer-handle a").eq(0).focus();        
-                       }, 1);
-               }
-       });
-       
-       //thumbnail viewarea controll handler bind
-       $("#img-viewer-handle").click(function () {
-               var ww;
-               var src = $("#img-viewer-handle img").attr("src");
-               if ( isImgView ){
-                       ww = "300px";
-                       src = src.replace(".gif", "_.gif");
-                       $("#img-viewer-thumbnail").hide();
-                       $("#device-info").show();
-               }else{
-                       ww = "730px";
-                       src = src.replace("_.gif", ".gif");
-                       $("#img-viewer-thumbnail").show();
-                       $("#device-info").hide();
-                       focusDeviceDetail(1);
-               }
-               
-               $("#img-viewer-handle img").attr("src", src);
-       $("#img-viewer").animate({
-                   width: ww
-                       }, 300, "linear", function(){
-                       if($.browser.msie)
-                               $("#img-inner").css("width", ww);
-               });
-               
-       isImgView = ( isImgView ) ? false:true;
-    });
-
-       //thumbnail overevent function (update date 2012.09.05 kangki)
-       function focusDeviceDetail ( id ) {
-               if ( isView == id ) return;
-
-               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
-               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
-
-               $( "#img-viewer-bic > img").attr("src", imgSrc);
-               isView = (id);          
-       }
-
-       /*toggle devicespecs List*/
-       if($('div#contents').find('.devicespec-tit').length){
-               
-               $('.devicespec-tit').each(function(){
-                       var self = $(this);
-                       $('a', self).bind ("click", fnToggle);
-
-                       function fnToggle(){
-
-                               if ( $(this).parent().parent().next().is(':visible') ){
-                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-                                       self.find('em').text('Show');
-                                       self.next().hide();
-
-                                       return false;
-                               }else{
-                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-                                       self.find('em').text('Hide');
-                                       self.next().show();
-
-                                       return false;
-                               }
-                       }
-                                                       
-               });
-       }
-
-       /*all Show Hide devicespecs List*/
-       if($('div#contents').find('.devicespecs-util').length){
-               var self = $('div#contents').find('.devicespecs-util');
-
-               $('.showA', self).bind ("click", function (){
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( !me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-                                       me.find('em').text('Hide');
-                                       me.next().show();
-                               }
-                       });
-                       return false;
-               })
-               $('.hideA', self).bind ("click", function (){
-                       
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-                                       me.find('em').text('Show');
-                                       me.next().hide();
-                               }
-                                                               
-                       });
-                       return false;
-               })
-       }       
-}
-
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
-function searchInit()
-{
-       var focusTarget = "input";
-
-       $("#searchInput").bind("keydown", checkSearchText);
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-
-       $(".autocomplete").mouseleave(function(){
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".autocomplete").css("visibility", "visible");
-
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-
-                       var hei = $(".autocomplete").find('>ul').outerHeight();
-                       if(hei>400){
-                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
-                       }
-               }
-               else{
-                       $(".autocomplete").css("visibility", "hidden");
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
- */
-
-function setTopScroll(selector) {
-       if ( !selector ) return false;
-       var btn = $( selector );
-       var w = $( window );
-       btn.css( "position", "absolute" );
-
-
-       btn.click( function(){ w.scrollTop( 0 ) } );
-
-       var wheight = w.innerHeight();
-       
-       $(window).resize( function() {
-               wheight = w.innerHeight();
-               redraw();
-       });
-
-       $(window).scroll( function() {
-               redraw();
-       })
-
-       /**
-        *      Top 버튼의 재정렬 메서드
-        */
-       function redraw()
-       {
-               var t = w.scrollTop() + wheight - 289;
-
-               if( t < wheight / 2 && w.scrollTop() == 0 )     {
-                       t = wheight / 2;
-               }
-               
-               btn.clearQueue();
-
-               btn.animate({
-           top: t
-               }, 500, function() {
-           // Animation complete.
-               });
-               //btn.css( "top", t );
-               //console.log( "target : " + t );
-       }
-
-       redraw();
-       /*
-       obj.initTop = position;
-       obj.topLimit = topLimit;
-       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
-
-       obj.style.position = "absolute";
-       obj.top = obj.initTop;
-       // obj.left = obj.initLeft;
-
-       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
-               obj.getTop = function() {
-                       return window.pageYOffset;
-               }
-       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
-               obj.getTop = function() {
-                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
-               }
-       } else {
-               obj.getTop = function() {
-                       return 0;
-               }
-       }
-
-       if ( self.innerHeight ) {       //WebKit
-               obj.getHeight = function() {
-                       return self.innerHeight;
-               }
-       } else if( document.documentElement.clientHeight ) {
-               obj.getHeight = function() {
-                       return document.documentElement.clientHeight;
-               }
-       } else {
-               obj.getHeight = function() {
-                       return 500;
-               }
-       }
-
-       obj.move = setInterval( function() {
-               if ( obj.initTop > 0 ) {
-                       pos = obj.getTop() + obj.initTop;
-               } else {
-                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
-               }
-
-               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
-               if ( pos < obj.topLimit ) pos = obj.topLimit;
-
-               interval = obj.top - pos;
-               obj.top = obj.top - interval / 3;
-               obj.style.top = obj.top + "px";
-       }, 30 )
-       */
-}
-
-
-//popup
-function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
-function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
-
-//popup 중앙에 띄우기
-function pop_center(){ 
-       var x,y; 
-       if (window.innerHeight) { // IE 외 모든 브라우저 
-               x = (screen.availWidth - self.innerWidth) / 2; 
-               y = (screen.availHeight - self.innerHeight) / 2; 
-       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
-               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
-               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
-       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
-               x = (screen.availWidth - document.body.clientWidth) / 2; 
-               y = (screen.availHeight - document.body.clientHeight) / 2; 
-       } 
-       window.moveTo(x,y); 
-}
-
-// Layer Popup Open
-function layer_open(el){
-       var temp = $('#' + el);
-
-       if(!temp.hasClass('sty2')){
-               $('.layer').fadeIn();
-       }
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       if(temp.hasClass('sty2')){
-               temp.fadeIn();
-
-               temp.find('a.cbtn').click(function(e){
-                       temp.fadeOut();
-               });
-               temp.find('a.gbtn').click(function(e){
-                       temp.fadeOut();
-               });
-
-               return false;
-       }
-       // 닫는 버튼 gbtn-c 추가 20130627
-       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
-               $('.layer').fadeOut();
-               return false;
-       });
-}
-
-// background dim - 2013-05-31
-function layer_open2(el){
-       var temp = $('#' + el);
-       $('input').attr('disabled', 'disabled');
-       $('.layerPop').fadeIn();
-       
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
-               $('.layerPop').fadeOut();
-               $('input').removeAttr('disabled');
-               return false;
-       });
-}
-
-
-function pop_account(url){
-       window.open(url,'account','width=619,height=591,scrollbars=yes')
-}
-
-function pop_loadDoc(url){
-       window.open(url,'online','width=850,height=600,scrollbars=yes')
-}
-
-/** 
- *  [PAGE] Tags
- *  date : 20120820
- *  author : 전종호
- */
-function initTags()
-{
-       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
-       // 마지막 아이템은 제외
-       var eleArr = $(".tag-list").find("li");
-
-       $( eleArr ).each( function( i ) {
-               if( i < eleArr.length - 1 )
-               {
-                       var target = $(this).find("a")[0];
-                       var content = $( target ).html();
-
-                       $( target ).html( content + "," );
-               }
-       })
-}
-
-$(document).ready(function(){
-       $(".tip_info").css("cursor","pointer");
-       $(".tip_info > img").mouseover(function(){
-               $(".tip_cont").css("display","block");
-       });
-       $(".tip_info > img").mouseout(function(){
-               $(".tip_cont").css("display","none");
-       });
-});
-
-// new layer popup script by ygh 2013.11.14
-
-var isPopup = false ;
-
-function popupLayerView(id){
-
-       var $L = $("#" + id) ;
-       var $D  = $("#" + id + "down") ;
-
-       $T = $("#" + id) ;
-
-       $L.show();
-       isPopup = true ;
-
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-
-       $("#" + id + "agree").focus() ;
-
-       jQuery(":focusable").focusin(function(e){
-               if (isPopup) {
-                       e.stopPropagation() ;
-                       if ($L.find(jQuery(this)).length > 0) {
-                       } else {
-                               jQuery(this).blur() ;
-                               jQuery("#" + id + " :focusable:first").focus() ;
-                       }
-               }
-       }) ;
-
-       $L.find('.close').click(function(){
-               resetPopup(id) ;
-       });
-
-       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
-}
-
-function resetPopup(T) {
-       $("#" + T + "down").hide();
-       $("#" + T + "agree").attr("checked", false) ;
-       isPopup = false ;
-       $("#" + T).hide() ;
-       $("#" + T + "Btn").focus() ;
-}
-
-function getDownload(T, F, I) {
-       if ($("#" + T + "agree").is(':checked')) {
-               commonDownloadLog(F, I) ;
-               resetPopup(T) ;
-       }
-}
-
-function focusable( element, isTabIndexNotNaN ) {
-       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
-       if ( "area" === nodeName ) {
-               map = element.parentNode;
-               mapName = map.name;
-               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
-               img = $( "img[usemap=#" + mapName + "]" )[0];
-               return !!img && visible( img );
-       }
-       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
-                       visible( element ) ;
-}
-
-function visible( element ) {
-       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
-               return $.css( this, "visibility" ) === "hidden";
-       }).length;
-}
-if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
-
-$.extend( $.expr[ ":" ], {
-       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
-       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
-       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
-});
-// new layer popup script by ygh 2013.11.14
-
-// 2013-11-15 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device1').hide();
-       
-       $('#thumb_view_btn').hover(function() {
-               $('.view_device1').show();
-       },function() {
-               $('.view_device1').hide();
-       });
-               
-});
-
-// 2014-04-22 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device2').hide();
-       
-       $('#thumb_view_btn2').hover(function() {
-               $('.view_device2').show();
-       },function() {
-               $('.view_device2').hide();
-       });
-               
-});
-
-
-function beforePopupLayerView(popId, popId2, popContinue){
-       var $L = $("#" + popId) ;
-       $L.show(100);
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-       $L.find('.close').click(function(){
-               $L.hide();
-       });
-       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
-}
+$(document).ready(function(){\r
+       $('#contents table').each(function(){\r
+               if (!$(this).parent().hasClass('table')) {\r
+                       $(this).wrap('<div class="table"></div>');\r
+               }\r
+       });\r
+\r
+       // Lnb Menu Initialize\r
+       if($('div#contents').find('.lnb').length){\r
+               if($("ul li.events_news").size() > 0) {\r
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");\r
+               }\r
+               initLnb();\r
+               initScript(staticURL + "/js/fixednavbar.js", function(){});\r
+       }\r
+\r
+       //family site\r
+       if($('div#footer').find('dl#familySlider').length){\r
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);\r
+       }\r
+\r
+       // Svn Commit Test\r
+       \r
+       // Language Selection\r
+       if($('div#header').find('.util').length){\r
+               var $lang = $('div#header').find('.util');\r
+               $lang.find('a.lang').toggle(function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();\r
+                       },function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();\r
+                       });\r
+\r
+               $lang.bind('mouseleave',function(){\r
+                       $(this).find('ul.language').hide();\r
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+               });\r
+\r
+               $lang.find('ul.language').children().last().on("keydown", function(e) {\r
+                       if(e.which == 9 && e.shiftKey) {\r
+                               return true;\r
+                       }\r
+                       \r
+                       if(e.which == 9) {\r
+                               e.preventDefault();\r
+                               $lang.find('ul.language').hide();\r
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+                               setTimeout(function() {\r
+                                       $("#searchTop").focus();\r
+                               }, 1);\r
+                       }\r
+               });\r
+       }\r
+\r
+       // Open the Sitemap\r
+       var $open = $('div#header').find('.bt-open');\r
+       $open.bind('click',function(){\r
+               var $self = $(this);\r
+               var $sitemap = $('div#wrapper').find('div#sitemap');\r
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');\r
+\r
+               if($sitemap.is(':visible')){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');\r
+\r
+                       $self.attr('title','open sitemap');\r
+               }else{\r
+                       var source = $self.css('background-image').replace('.gif','_.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');\r
+\r
+                       $self.attr('title','close sitemap');\r
+               }\r
+               \r
+               $self.css('background-image',source);\r
+               $sitemap.slideToggle('fast');\r
+               \r
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       $self.css('background-image',source);\r
+                       $sitemap.slideToggle('fast');\r
+               });\r
+\r
+       });\r
+\r
+       // Search Auto Complete\r
+       var $search = $('div#header').find('fieldset.search');\r
+       var $searchList = $search.find('#topAutocomplete>ul');\r
+\r
+       if($search.length){\r
+               $search.find('> input').each(function(){\r
+                       $(this).bind({\r
+                               keydown : function(e){\r
+                       \r
+                                       if(e.type=='keydown'&& $(this).val().length!=0){\r
+                                               $search.find('#topAutocomplete').show();\r
+                                               var hei = $searchList.outerHeight();\r
+                                               if(hei>400){\r
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});\r
+                                               }\r
+                                       }\r
+                                       if(e.keyCode==9){\r
+                                               $search.unbind('focusout.search');\r
+                                       }\r
+                                       if(e.keyCode==40){\r
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();\r
+                                               //window.scrollTo(0,0);\r
+                                       }\r
+                               },\r
+                               focusin : function(e){\r
+                                       if($(this).val()==='Search'){\r
+                                               $(this).val('');\r
+                                       }\r
+                               },\r
+                               focusout : function(e){\r
+                                       if($(this).val().length==0) $(this).val('Search');\r
+                               }\r
+                       });\r
+               });\r
+\r
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){\r
+               //      if(e.keyCode==40){\r
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();\r
+               //      }\r
+               //});\r
+\r
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){\r
+                       if($search.find('> input').val().length==0){\r
+                               $search.find('> input').val('Search');\r
+                       }\r
+                       $search.find('#topAutocomplete').hide();\r
+               });\r
+\r
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){\r
+                       $search.find('> input').val('Search');\r
+                       $search.find('#topAutocomplete').hide();\r
+                       \r
+                       //$search.bind('focusout.search', function(){\r
+                       //      $(this).find('> input').val('Search');\r
+                       //      $(this).find('#topAutocomplete').hide();\r
+                       //});\r
+               });\r
+       }\r
+});\r
+\r
+// 비차단 동적 스크립트 로딩\r
+function initScript(url, callback){\r
+       var script = document.createElement("script");\r
+       script.type = "text/javascript";\r
+\r
+       if(script.readyState){ // 인터넷 익스플로러\r
+               script.onreadystatechange = function(){\r
+                       if(script.readyState=="loaded" || script.readyState=="complete"){\r
+                               script.onreadystatechange = null;\r
+                               callback();\r
+                       }\r
+               };\r
+       }else{  // 다른  브라우저\r
+               script.onload = function(){\r
+                       callback();\r
+               };\r
+       }\r
+\r
+       script.src = url;\r
+       document.getElementsByTagName("head")[0].appendChild(script);\r
+}\r
+\r
+\r
+// lnb\r
+function initLnb(){\r
+       var sMenu = $('.lnb');\r
+       var sItem = sMenu.find('>li');\r
+\r
+       sItem.each(function(){\r
+               if($(this).find('a').hasClass('more')){\r
+                       if($(this).find('ul').is(":visible")) {\r
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); \r
+                       } else {\r
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));\r
+                       }\r
+               }\r
+       });\r
+       \r
+       var setIcoArrText = function(obj) {\r
+               if(obj.next().is(":visible")) {\r
+                       obj.text("close submenu");\r
+               } else {\r
+                       obj.text("open submenu");\r
+               }\r
+       }\r
+       \r
+       sItem.find('.ico-arr').on("click", function() {\r
+               var $that = $(this);\r
+               var liBox = $that.parent();   \r
+               var ulBox = $that.next();\r
+               \r
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();\r
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");\r
+               \r
+               if(liBox.hasClass("on")) {\r
+                       if(ulBox.is(":visible")) {\r
+                               ulBox.hide();\r
+                               $that.addClass("ico-on");\r
+                       } else {\r
+                               ulBox.show();\r
+                               $that.removeClass("ico-on");\r
+                       }\r
+                       setIcoArrText($that);\r
+                       return true;\r
+               }\r
+               \r
+               if(liBox.hasClass("active")) {\r
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");\r
+                       ulBox.hide();\r
+               } else {\r
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");\r
+                       ulBox.show();\r
+               }\r
+               setIcoArrText($that);\r
+       });\r
+\r
+       sItem.hover(function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+               $(this).find("a").eq(0).addClass("bov");\r
+       },function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+                $(this).find("a").eq(0).removeClass("bov");\r
+\r
+       });\r
+}\r
+\r
+//footer rolling banner\r
+function fn_rollToEx(container,objectId,step,auto){\r
+\r
+       // 롤링할 객체를 변수에 담아둔다.\r
+       var el = $('#'+container).find('#'+objectId);\r
+       var lastChild;\r
+       var speed = 3000;\r
+       var timer = 0;\r
+       var autoplay = false;\r
+\r
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.\r
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수\r
+       el.data('animating',false);\r
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.\r
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.\r
+\r
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.\r
+\r
+       if(arguments.length==4){\r
+               el.data('autoStart', auto);\r
+       }\r
+\r
+       if(el.data('autoStart')){\r
+               if(timer==0){\r
+                       timer = setInterval(moveNextSlide, speed);\r
+                       autoplay = true;\r
+               }\r
+       }\r
+\r
+       el.bind({\r
+               mouseenter:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+\r
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('prev').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       movePrevSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('next').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       moveNextSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       function movePrevSlide(){\r
+               if(!el.data('animating')){\r
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);\r
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.\r
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다\r
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.\r
+               \r
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.\r
+\r
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+    function moveNextSlide(){\r
+               if(!el.data('animating')){\r
+                       el.data('animating',true);\r
+\r
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.\r
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);\r
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.\r
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다\r
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.\r
+\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+}\r
+\r
+function fn_slide(options){\r
+\r
+       var opts = jQuery.extend({},options);\r
+\r
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자\r
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자\r
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자\r
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자\r
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값\r
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수\r
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수\r
+       var auto = false;\r
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수\r
+       var time;\r
+\r
+\r
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정\r
+       effect = opts.effect;\r
+       auto = opts.auto;\r
+\r
+       if(auto){\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       slideShow = function(){\r
+\r
+               if(current < len-1){\r
+                       current++;\r
+               }else{\r
+                       current=0;\r
+               }\r
+\r
+               controllStatus();\r
+\r
+               moveControl('next');\r
+\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       controllStatus = function(){\r
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정\r
+               if(current>0||current<len-1){                           \r
+                       $prev.show();\r
+                       $next.show();\r
+               }\r
+               if(current==0){\r
+                       $prev.hide();\r
+                       $next.show();\r
+               }\r
+               if(current>=len-1){\r
+                       $prev.show();\r
+                       $next.hide();\r
+               }\r
+       }\r
+\r
+       moveControl = function(msg){\r
+               if(opts.bt!=null){\r
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))\r
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화\r
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화\r
+               }\r
+\r
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                       $obj.children().hide();\r
+                       $obj.children().eq(current).show();\r
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                       $obj.animate({'left':'-'+size*current},'slow');\r
+               }\r
+       }\r
+\r
+       $obj.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               }\r
+       });\r
+\r
+       //롤링 버튼 클릭시\r
+       $bt.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장\r
+\r
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정\r
+\r
+                       controllStatus();\r
+\r
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                               $obj.children().hide();\r
+                               $obj.children().eq(current).show();\r
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                               $obj.animate({'left':'-'+size*current},'slow');\r
+                       }\r
+\r
+                       // 모든 롤링 버튼을 비활성화\r
+                       $bt.each(function(){\r
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                                $(this).find('img').attr('src',source);\r
+                       });\r
+\r
+                       // 선택한 롤링버튼을 활성화\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //이전 버튼 클릭시\r
+       $prev.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 \r
+                       current--;                                                      //이미지 인덱스값 1씩 감소\r
+\r
+                       moveControl('prev');\r
+\r
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //다음 버튼 클릭시\r
+       $next.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       current++;                                                      //이미지 인덱스값 1씩 증가\r
+                       \r
+                       moveControl('next');\r
+\r
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화\r
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+}\r
+\r
+// main rolling banner\r
+function slideMotion1(){\r
+       var $banner = $('#rolling .motionview'),\r
+               //$nav = $('#rolling ul.nav'),\r
+               banner = {prev:null, next:null},\r
+               size = $banner.children().length;\r
+               index = 1,\r
+               speed = 3000,\r
+               timer = null,\r
+               auto = true,\r
+               width = parseInt(100/size),\r
+               rest = parseInt(100%size);\r
+\r
+       var $nav = $('<ul class="nav">').insertAfter($banner);\r
+\r
+       $banner.children().each(function(index){\r
+               index++;\r
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);\r
+               if(index==size){\r
+                       $nav.children().eq(-1).find('a').css('background-image','none');\r
+               }\r
+       });\r
+\r
+       if(rest>0){\r
+               width+=rest;\r
+               $nav.children().eq(-1).css('width',width+'%');\r
+       }\r
+\r
+       $nav.delegate("li",'click',function(){\r
+               var idx = $nav.children().index(this);\r
+               index = idx;\r
+               banner.prev = $banner.find('a.active');\r
+               banner.next = $banner.find('a').eq(index);\r
+\r
+               clearInterval(timer);\r
+               auto = false;\r
+               \r
+               $nav.trigger('change.banner',banner)\r
+                       .trigger('change.tab',index);\r
+\r
+               return false;\r
+       });\r
+\r
+       $nav.bind('change.banner',function(event, banner){\r
+               aniMotion();\r
+       });\r
+\r
+       $nav.bind('change.tab',function(event, index){\r
+               $nav.children().find('a').removeClass('sel');\r
+               $nav.children().eq(index).find('a').addClass('sel');\r
+       });\r
+\r
+       timer = setInterval(autoMotion, speed);\r
+\r
+       function autoMotion(){\r
+               if(index > size-1) index = 0;\r
+\r
+               aniMotion();\r
+       }\r
+\r
+       function aniMotion(){\r
+               if(auto){\r
+                       banner.prev = $banner.find('a.active');\r
+                       banner.next = $banner.find('a').eq(index);\r
+\r
+                       $nav.children().find('a').removeClass('sel');\r
+                       $nav.children().eq(index).find('a').addClass('sel');\r
+               }\r
+               banner.prev.addClass('last-active');\r
+               banner.next.css({'opacity':0.0})\r
+                       .addClass('active')\r
+                       .animate({'opacity':1.0}, 1000, function(){\r
+                               banner.prev.removeClass('active last-active');\r
+\r
+                               if(auto){\r
+                                       index++;\r
+                               }else{\r
+                                       index++;\r
+                                       timer = setInterval(autoMotion, speed*1.5);\r
+                                       auto = true;\r
+                               }\r
+                       });\r
+       }\r
+}\r
+\r
+// forum list show or hide function\r
+function toggleFunc(){\r
+       \r
+       var defaulNum = [2];\r
+\r
+       $('.forum-tit').each(function(){\r
+               var self = $(this);\r
+\r
+               var idx = $('.forum-tit').index(this);\r
+\r
+               for(i=0;i<=defaulNum.length;i++){\r
+                       if(idx==defaulNum[i]){\r
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');\r
+                               self.find('a.toggle').css('background-image',source);\r
+\r
+                               self.find('a.toggle').text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }\r
+               }\r
+\r
+               self.find('a.toggle').click(function(){\r
+                       \r
+                       if(self.next().is(':visible')){\r
+                               var source = $(this).css('background-image').replace('.gif','_.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }else{\r
+                               var source = $(this).css('background-image').replace('_.gif','.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Hide');\r
+                               self.removeClass('mb35').next().show();\r
+                       }\r
+\r
+                       return false;\r
+\r
+               });\r
+\r
+       });\r
+}\r
+\r
+// 파일 업로드\r
+function fileUpload( width ){\r
+       //var $img = $('.attach input[type=image]');\r
+       //var width = $img.attr('width');\r
+\r
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅\r
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";\r
+\r
+       var $file = $('.attach input.upload').css({\r
+               "position": "absolute",\r
+               "top": "0px",\r
+               "right": "0px",\r
+               "width": w,\r
+               "cursor": "pointer",\r
+               "opacity": "0.0",\r
+               "height": "23px"\r
+       });\r
+       $file.off('change');\r
+       $file.on('change',function(e){\r
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드\r
+                       return;\r
+               }\r
+               var idx = $file.index(this);\r
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();\r
+               var fileErrMsg = {\r
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"\r
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"\r
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"\r
+                           ,ext_ko : "지원하지 않는 확장자 입니다."\r
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"\r
+                           ,ext_en : "File extention not allowed for upload."\r
+               };\r
+               var initFileInput = function(obj) {\r
+                       $(obj).parent().find('input.file').val("");\r
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );\r
+                       else $(obj).val("");\r
+               };\r
+               \r
+               var filename = $(this).val();\r
+               \r
+               //CHK File ext\r
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"\r
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"\r
+                                     , "jpg", "png", "zip"];\r
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();\r
+               var findFlag = false;\r
+               for(var i = 0; i < imgExts.length; i++) {\r
+                       if(imgExts[i] == fileExt) {\r
+                               findFlag = true;\r
+                               break;\r
+                       }\r
+               }\r
+       \r
+               if(findFlag == false) {\r
+                       alert( fileErrMsg["ext_" + localeCode] );\r
+                       initFileInput(this);\r
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.\r
+                       return;\r
+               }\r
+               \r
+               //CHK File Size\r
+               if(\r
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie\r
+                               || $.browser.mozilla //FF\r
+                               || $.browser.safari //Chrome\r
+               )\r
+               {\r
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;\r
+                       if( filesize > 200 ) {\r
+                               alert( fileErrMsg["limit_" + localeCode] );\r
+                               initFileInput(this);\r
+                               return;\r
+                       }\r
+               }\r
+               \r
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);\r
+       });\r
+};\r
+\r
+\r
+// Show or Hide Toggle\r
+function showToEx(args){\r
+\r
+       if(!arguments.length) return false;\r
+       \r
+       var bt = $('#'+args.bt);\r
+       var obj = $('#'+args.obj);\r
+\r
+       var source = bt.css('background-image');\r
+       \r
+       if(obj.is(':visible')){\r
+               obj.hide();\r
+       }\r
+\r
+       bt.toggle(function(){\r
+               var src = source.replace('.gif','_.gif');\r
+               bt.css('background-image', src);\r
+               obj.show();\r
+               \r
+               return false;\r
+       },function(){\r
+               var src = source.replace('_.gif','.gif');\r
+               bt.css('background-image', src);\r
+               obj.hide();\r
+\r
+               return false;\r
+       });\r
+\r
+}\r
+\r
+\r
+// FAQ 20131016\r
+function faqToEx(){\r
+\r
+ var $question = $('#contents').find('.question');\r
+ var $answer = $('#contents').find('.answer');\r
+\r
+ // All Answer Rows Hide\r
+ $answer.hide().find('.conts').hide();\r
+\r
+ $question.each(function(){\r
+  var $self = $(this);\r
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");\r
+  \r
+  $self.find('a').bind('click',function(){\r
+   $("#selArea ul").hide();\r
+   /*\r
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;\r
+\r
+   $answer.hide().find('.conts').hide();\r
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');\r
+   */\r
+\r
+   /* 20120822 hjh modify*/\r
+   /* if ( this open )?  close : all close, e.target open */\r
+   var cutTtl  = $(this).parent().children("div").html();\r
+   var ttl     = $(this).parent().parent().children("td.real_question").html();\r
+   \r
+   if($(this).parents('tr').next().find('.answer').is(':visible')){\r
+    $(this).html(cutTtl);\r
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){\r
+     $answer.hide();\r
+    });\r
+   }else{\r
+    titleInit();\r
+    $(this).html(ttl);\r
+    $answer.hide().find('.conts').hide();\r
+    //$answer.slideUp('normal').find('.conts').hide();\r
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); \r
+   }   \r
+\r
+   return false;\r
+  });\r
+ });\r
+\r
+ $answer.each(function(){\r
+  var $self = $(this);\r
+\r
+  $(this).find('a.bt-close-faq').bind('click',function(){\r
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");\r
+   var cutTtl      = question_td.children("div").html();\r
+   question_td.children("a").html(cutTtl);\r
+   \r
+   $self.find('.conts').slideUp('fast',function(){\r
+    $self.hide();\r
+   });\r
+\r
+   return false;\r
+  });\r
+ });\r
+ \r
+ var titleInit = function() {\r
+  $question.each(function(i) {\r
+   $(this).find("a").html($(this).find("div").html());\r
+  });\r
+ }\r
+}\r
+\r
+\r
+\r
+/**\r
+ *  쓰기페이지 Tab 영역 컨트롤\r
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'\r
+ */\r
+function setSwitchTab( selector ) {\r
+       var tabs = $('.tab-list').find("li");\r
+       var elements = $( selector );\r
+\r
+       $( elements ).each( function( i ) {\r
+               if( i != 0 )\r
+               {\r
+                       $(this).hide();\r
+               }\r
+       })\r
+\r
+       // Control Tabs\r
+       $( tabs ).each( function( i ) {\r
+               $( this ).click( function(){\r
+                       resetClass();\r
+\r
+                       $( this ).find( 'a' ).addClass( "sel" );\r
+                       $( elements[i] ).show();\r
+\r
+                       return false;\r
+               });\r
+       });\r
+\r
+       // Class 리셋\r
+       function resetClass()\r
+       {\r
+               $( tabs ).each( function( i ) {\r
+                       $( this ).find( 'a' ).removeClass( 'sel' );\r
+               });\r
+\r
+               $( elements ).each( function( i ) {\r
+                       $( this ).hide();\r
+               });\r
+       }\r
+}\r
+\r
+var SET_ATTACH_LIMIT;\r
+var SET_ATTACH_WIDTH;\r
+var SET_ATTACH_BTNNAME;\r
+\r
+var firstAddAction = function(obj, limit, w, btnName) {\r
+ var bn            = btnName || 'File';\r
+ var fileAttachStr = "<li class='clfix no-first'>";\r
+ fileAttachStr += '<div class="attach">';\r
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';\r
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';\r
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';\r
+ fileAttachStr += '</div>';\r
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';\r
+ fileAttachStr += '</li>';\r
+ obj.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    $("a.remove-btn").eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ obj.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ \r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+}\r
+\r
+var firstRemoveAction = function(id) {\r
+ var obj = $("#" + id);\r
+ var compFile    = $("input[type=file]");\r
+ var compFileCnt = compFile.size();\r
+ var ulObj       = compFile.eq(0).parent().parent().parent();\r
+ if(compFileCnt <= 1) {\r
+  var firstCompFile = compFile.eq(0);\r
+  firstCompFile.prev().prev().val("");\r
+  if ($.browser.msie) {\r
+               $(obj).parent().find('input.file').val("");\r
+               firstCompFile.replaceWith( firstCompFile.clone(true) );\r
+       } else {\r
+               firstCompFile.val("");\r
+               firstCompFile.prev().prev().val("");\r
+  }\r
+ } else {\r
+  obj.parent().remove();\r
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");\r
+  \r
+  //add-btn event..\r
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);\r
+ }\r
+ \r
+ ulObj\r
+ .find("li")\r
+ .eq(0)\r
+ .removeClass("no-first")\r
+ .find("a.remove-btn")\r
+ .attr("id", id)\r
+ .unbind("click");\r
+ \r
+ setTimeout(function() {\r
+  $("#" + id).focus();\r
+ }, 100);\r
+ \r
+ $("#" + id).on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   var that = $(this);\r
+   setTimeout(function() {\r
+    that.prev().focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ $("#" + id).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+/** \r
+ * File 첨부컨트롤\r
+ * @param limit 최대 파일 첨부 갯수\r
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가\r
+ */\r
+function setAttachFile( limit, width, btnName, removeBtnId )\r
+{\r
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;\r
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );\r
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );\r
+ \r
+ SET_ATTACH_LIMIT = limit;\r
+ SET_ATTACH_WIDTH = w;\r
+ SET_ATTACH_BTNNAME = btnName;\r
+ \r
+ inputFile.on("keydown", function(e) {\r
+  var that = $(this);\r
+  \r
+  if(e.which == 9 && e.shiftKey) {\r
+   return true;\r
+  }\r
+  \r
+  if(e.which === 9) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ inputFile.on("focusin", function(e) {\r
+  $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+ }).on("focusout", function(e) {\r
+  $(this).parent().css("outline", "");\r
+ });\r
+ \r
+ firstAddAction(btnFileAttach, limit, w, btnName);\r
+ \r
+ /*\r
+ btnFileAttach.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    inputFile.focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ btnFileAttach.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+\r
+ // File 제거 버튼\r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ */\r
+ /**\r
+  *  2012-08-08 전종호 추가\r
+  *  파일 Input Text 영역 너비를 잡아주는 메서드\r
+  */\r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+\r
+ updateFileField();\r
+ fileUpload( w + 50 );\r
+ \r
+ $("#" + removeBtnId).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+\r
+\r
+/** \r
+ * [PAGE] device speces list page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+function initDevicespecsList (){\r
+       var isCompareView=false;\r
+       $("#devicespecs-list > li").each( \r
+               function(i){ \r
+                       $(".info", this).bind("click", devicespecsListInfoToggle);\r
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);\r
+                       \r
+                       //detail info layer toggle function\r
+                       function devicespecsListInfoToggle (){\r
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();\r
+                               return false;\r
+                       }\r
+       });\r
+\r
+\r
+       /* DEVICE COMPARE 열리는 부분\r
+       - defualt : close. \r
+       - 최초 한번만 열림 \r
+       - 현재는 compare 버튼에 공통으로 함수 바인딩\r
+       */\r
+       function devicespecsCompareOnOff (){\r
+               if ( isCompareView ) return;\r
+               var ww = ( isCompareView ) ? "30px":"207px";\r
+               $("#devicespecs-compare").animate({\r
+                   height: ww }, 300, "linear", function(){ });\r
+\r
+               isCompareView = ( isCompareView ) ? false:true;\r
+               return false;\r
+       }\r
+\r
+       //compare 버튼 공통으로 클릭 이벤트 걸림 \r
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });\r
+}\r
+\r
+/** \r
+ * [PAGE] device speces view page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+ function initDevicespecsView (){\r
+       var isImgView = false;\r
+       var isView = 0;\r
+       \r
+       //thumbnail overevent bind\r
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );\r
+       focusDeviceDetail (1);\r
+       \r
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.type === "keydown" && e.which == 9) {\r
+                       setTimeout(function() {\r
+                               $("#img-viewer-handle a").eq(0).focus();        \r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       //thumbnail viewarea controll handler bind\r
+       $("#img-viewer-handle").click(function () {\r
+               var ww;\r
+               var src = $("#img-viewer-handle img").attr("src");\r
+               if ( isImgView ){\r
+                       ww = "300px";\r
+                       src = src.replace(".gif", "_.gif");\r
+                       $("#img-viewer-thumbnail").hide();\r
+                       $("#device-info").show();\r
+               }else{\r
+                       ww = "730px";\r
+                       src = src.replace("_.gif", ".gif");\r
+                       $("#img-viewer-thumbnail").show();\r
+                       $("#device-info").hide();\r
+                       focusDeviceDetail(1);\r
+               }\r
+               \r
+               $("#img-viewer-handle img").attr("src", src);\r
+       $("#img-viewer").animate({\r
+                   width: ww\r
+                       }, 300, "linear", function(){\r
+                       if($.browser.msie)\r
+                               $("#img-inner").css("width", ww);\r
+               });\r
+               \r
+       isImgView = ( isImgView ) ? false:true;\r
+    });\r
+\r
+       //thumbnail overevent function (update date 2012.09.05 kangki)\r
+       function focusDeviceDetail ( id ) {\r
+               if ( isView == id ) return;\r
+\r
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");\r
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');\r
+\r
+               $( "#img-viewer-bic > img").attr("src", imgSrc);\r
+               isView = (id);          \r
+       }\r
+\r
+       /*toggle devicespecs List*/\r
+       if($('div#contents').find('.devicespec-tit').length){\r
+               \r
+               $('.devicespec-tit').each(function(){\r
+                       var self = $(this);\r
+                       $('a', self).bind ("click", fnToggle);\r
+\r
+                       function fnToggle(){\r
+\r
+                               if ( $(this).parent().parent().next().is(':visible') ){\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+                                       self.find('em').text('Show');\r
+                                       self.next().hide();\r
+\r
+                                       return false;\r
+                               }else{\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+                                       self.find('em').text('Hide');\r
+                                       self.next().show();\r
+\r
+                                       return false;\r
+                               }\r
+                       }\r
+                                                       \r
+               });\r
+       }\r
+\r
+       /*all Show Hide devicespecs List*/\r
+       if($('div#contents').find('.devicespecs-util').length){\r
+               var self = $('div#contents').find('.devicespecs-util');\r
+\r
+               $('.showA', self).bind ("click", function (){\r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( !me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+                                       me.find('em').text('Hide');\r
+                                       me.next().show();\r
+                               }\r
+                       });\r
+                       return false;\r
+               })\r
+               $('.hideA', self).bind ("click", function (){\r
+                       \r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+                                       me.find('em').text('Show');\r
+                                       me.next().hide();\r
+                               }\r
+                                                               \r
+                       });\r
+                       return false;\r
+               })\r
+       }       \r
+}\r
+\r
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       $("#searchInput").bind("keydown", checkSearchText);\r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+\r
+       $(".autocomplete").mouseleave(function(){\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".autocomplete").css("visibility", "visible");\r
+\r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+\r
+                       var hei = $(".autocomplete").find('>ul').outerHeight();\r
+                       if(hei>400){\r
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});\r
+                       }\r
+               }\r
+               else{\r
+                       $(".autocomplete").css("visibility", "hidden");\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+ */\r
+\r
+function setTopScroll(selector) {\r
+       if ( !selector ) return false;\r
+       var btn = $( selector );\r
+       var w = $( window );\r
+       btn.css( "position", "absolute" );\r
+\r
+\r
+       btn.click( function(){ w.scrollTop( 0 ) } );\r
+\r
+       var wheight = w.innerHeight();\r
+       \r
+       $(window).resize( function() {\r
+               wheight = w.innerHeight();\r
+               redraw();\r
+       });\r
+\r
+       $(window).scroll( function() {\r
+               redraw();\r
+       })\r
+\r
+       /**\r
+        *      Top 버튼의 재정렬 메서드\r
+        */\r
+       function redraw()\r
+       {\r
+               var t = w.scrollTop() + wheight - 289;\r
+\r
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {\r
+                       t = wheight / 2;\r
+               }\r
+               \r
+               btn.clearQueue();\r
+\r
+               btn.animate({\r
+           top: t\r
+               }, 500, function() {\r
+           // Animation complete.\r
+               });\r
+               //btn.css( "top", t );\r
+               //console.log( "target : " + t );\r
+       }\r
+\r
+       redraw();\r
+       /*\r
+       obj.initTop = position;\r
+       obj.topLimit = topLimit;\r
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;\r
+\r
+       obj.style.position = "absolute";\r
+       obj.top = obj.initTop;\r
+       // obj.left = obj.initLeft;\r
+\r
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit\r
+               obj.getTop = function() {\r
+                       return window.pageYOffset;\r
+               }\r
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {\r
+               obj.getTop = function() {\r
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );\r
+               }\r
+       } else {\r
+               obj.getTop = function() {\r
+                       return 0;\r
+               }\r
+       }\r
+\r
+       if ( self.innerHeight ) {       //WebKit\r
+               obj.getHeight = function() {\r
+                       return self.innerHeight;\r
+               }\r
+       } else if( document.documentElement.clientHeight ) {\r
+               obj.getHeight = function() {\r
+                       return document.documentElement.clientHeight;\r
+               }\r
+       } else {\r
+               obj.getHeight = function() {\r
+                       return 500;\r
+               }\r
+       }\r
+\r
+       obj.move = setInterval( function() {\r
+               if ( obj.initTop > 0 ) {\r
+                       pos = obj.getTop() + obj.initTop;\r
+               } else {\r
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;\r
+               }\r
+\r
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;\r
+               if ( pos < obj.topLimit ) pos = obj.topLimit;\r
+\r
+               interval = obj.top - pos;\r
+               obj.top = obj.top - interval / 3;\r
+               obj.style.top = obj.top + "px";\r
+       }, 30 )\r
+       */\r
+}\r
+\r
+\r
+//popup\r
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)\r
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)\r
+\r
+//popup 중앙에 띄우기\r
+function pop_center(){ \r
+       var x,y; \r
+       if (window.innerHeight) { // IE 외 모든 브라우저 \r
+               x = (screen.availWidth - self.innerWidth) / 2; \r
+               y = (screen.availHeight - self.innerHeight) / 2; \r
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 \r
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; \r
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; \r
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) \r
+               x = (screen.availWidth - document.body.clientWidth) / 2; \r
+               y = (screen.availHeight - document.body.clientHeight) / 2; \r
+       } \r
+       window.moveTo(x,y); \r
+}\r
+\r
+// Layer Popup Open\r
+function layer_open(el){\r
+       var temp = $('#' + el);\r
+\r
+       if(!temp.hasClass('sty2')){\r
+               $('.layer').fadeIn();\r
+       }\r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       if(temp.hasClass('sty2')){\r
+               temp.fadeIn();\r
+\r
+               temp.find('a.cbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+               temp.find('a.gbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+\r
+               return false;\r
+       }\r
+       // 닫는 버튼 gbtn-c 추가 20130627\r
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){\r
+               $('.layer').fadeOut();\r
+               return false;\r
+       });\r
+}\r
+\r
+// background dim - 2013-05-31\r
+function layer_open2(el){\r
+       var temp = $('#' + el);\r
+       $('input').attr('disabled', 'disabled');\r
+       $('.layerPop').fadeIn();\r
+       \r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){\r
+               $('.layerPop').fadeOut();\r
+               $('input').removeAttr('disabled');\r
+               return false;\r
+       });\r
+}\r
+\r
+\r
+function pop_account(url){\r
+       window.open(url,'account','width=619,height=591,scrollbars=yes')\r
+}\r
+\r
+function pop_loadDoc(url){\r
+       window.open(url,'online','width=850,height=600,scrollbars=yes')\r
+}\r
+\r
+/** \r
+ *  [PAGE] Tags\r
+ *  date : 20120820\r
+ *  author : 전종호\r
+ */\r
+function initTags()\r
+{\r
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.\r
+       // 마지막 아이템은 제외\r
+       var eleArr = $(".tag-list").find("li");\r
+\r
+       $( eleArr ).each( function( i ) {\r
+               if( i < eleArr.length - 1 )\r
+               {\r
+                       var target = $(this).find("a")[0];\r
+                       var content = $( target ).html();\r
+\r
+                       $( target ).html( content + "," );\r
+               }\r
+       })\r
+}\r
+\r
+$(document).ready(function(){\r
+       $(".tip_info").css("cursor","pointer");\r
+       $(".tip_info > img").mouseover(function(){\r
+               $(".tip_cont").css("display","block");\r
+       });\r
+       $(".tip_info > img").mouseout(function(){\r
+               $(".tip_cont").css("display","none");\r
+       });\r
+});\r
+\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+var isPopup = false ;\r
+\r
+function popupLayerView(id){\r
+\r
+       var $L = $("#" + id) ;\r
+       var $D  = $("#" + id + "down") ;\r
+\r
+       $T = $("#" + id) ;\r
+\r
+       $L.show();\r
+       isPopup = true ;\r
+\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+\r
+       $("#" + id + "agree").focus() ;\r
+\r
+       jQuery(":focusable").focusin(function(e){\r
+               if (isPopup) {\r
+                       e.stopPropagation() ;\r
+                       if ($L.find(jQuery(this)).length > 0) {\r
+                       } else {\r
+                               jQuery(this).blur() ;\r
+                               jQuery("#" + id + " :focusable:first").focus() ;\r
+                       }\r
+               }\r
+       }) ;\r
+\r
+       $L.find('.close').click(function(){\r
+               resetPopup(id) ;\r
+       });\r
+\r
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });\r
+}\r
+\r
+function resetPopup(T) {\r
+       $("#" + T + "down").hide();\r
+       $("#" + T + "agree").attr("checked", false) ;\r
+       isPopup = false ;\r
+       $("#" + T).hide() ;\r
+       $("#" + T + "Btn").focus() ;\r
+}\r
+\r
+function getDownload(T, F, I) {\r
+       if ($("#" + T + "agree").is(':checked')) {\r
+               commonDownloadLog(F, I) ;\r
+               resetPopup(T) ;\r
+       }\r
+}\r
+\r
+function focusable( element, isTabIndexNotNaN ) {\r
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;\r
+       if ( "area" === nodeName ) {\r
+               map = element.parentNode;\r
+               mapName = map.name;\r
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }\r
+               img = $( "img[usemap=#" + mapName + "]" )[0];\r
+               return !!img && visible( img );\r
+       }\r
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible\r
+                       visible( element ) ;\r
+}\r
+\r
+function visible( element ) {\r
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {\r
+               return $.css( this, "visibility" ) === "hidden";\r
+       }).length;\r
+}\r
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }\r
+\r
+$.extend( $.expr[ ":" ], {\r
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },\r
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },\r
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }\r
+});\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+// 2013-11-15 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device1').hide();\r
+       \r
+       $('#thumb_view_btn').hover(function() {\r
+               $('.view_device1').show();\r
+       },function() {\r
+               $('.view_device1').hide();\r
+       });\r
+               \r
+});\r
+\r
+// 2014-04-22 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device2').hide();\r
+       \r
+       $('#thumb_view_btn2').hover(function() {\r
+               $('.view_device2').show();\r
+       },function() {\r
+               $('.view_device2').hide();\r
+       });\r
+               \r
+});\r
+\r
+\r
+function beforePopupLayerView(popId, popId2, popContinue){\r
+       var $L = $("#" + popId) ;\r
+       $L.show(100);\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+       $L.find('.close').click(function(){\r
+               $L.hide();\r
+       });\r
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });\r
+}\r
diff --git a/org.tizen.devtools/html/scripts/core.js b/org.tizen.devtools/html/scripts/core.js
index 68dea4c..31ad7ff 100644 (file)
--- a/org.tizen.devtools/html/scripts/core.js
+++ b/org.tizen.devtools/html/scripts/core.js
@@ -1,899 +1,899 @@
-// /////////////////////////////////////////////////////////////////////////////////////////////////
-// # com.samsung.devloper common core javascript #
-// # Create Date : 2012.07.10. 
-// # Create By : kangki
-;(function ($) {
-/**
- * Samsung Developer Common JavaScript
- */
-$.SD = {};
-
-/*
- * Method Common
- */
-$.SD.message = function (msg) { if (msg) alert(msg); };
-$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
-$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
-$.SD.typeTest = function (data, datatype) {
-       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
-       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
-       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
-       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
-       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
-       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
-       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
-
-       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
-};
-
-$.SD.toDate = function (date, seperator) {
-       if (!seperator) seperator = '-';
-
-       date = $.SD.replaceAll(date, seperator, '');
-       date = $.SD.replaceAll(date, '/', '');
-
-       if (date.length !== 8) return null;
-       
-       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
-
-       if (date.valueOf().toString() === 'NaN') return null;
-
-       return date;
-};
-
-$.SD.toDateString = function (date, seperator) {
-       if (!seperator) seperator = '/';
-       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
-       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
-
-       var str, dateString = date.getFullYear();
-
-       str             = "0" + (date.getMonth()+1);
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-       str             = "0" + date.getDate();
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-
-       return dateString;
-};
-
-$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
-$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
-$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
-
-$.SD.insertComma = function(num) {
-       var tnum    = num + "";
-       var tarr    = new Array();
-       var dot     = "";
-       var idxDot  = tnum.indexOf(".");
-       var sign    = "";
-       var tinx    = 0;
-       var fnum    = tnum;
-        
-       
-       if(idxDot > -1) {
-               fnum = tnum.substring(0, idxDot);
-               dot  = tnum.substring(idxDot);
-               tnum = fnum;
-       } 
-       
-       if(tnum.indexOf("-") > -1) {
-               fnum = tnum.substring(1);
-               sign = tnum.substring(0, 1);
-       }
-       
-       for(var inx = fnum.length; inx > 0; ) {
-               tarr[tinx++] = fnum.substring(inx, inx - 3);
-               inx = inx - 3;
-       }
-       
-       return sign + tarr.reverse().join(",") + dot;
-}
-
-/**
- * Method Ajax
- */
-$.SD.ajax = {
-       doAjax : function (json) {
-               var param = {
-                       async : json.async,
-                       type : json.type,
-                       dataType : json.dataType,
-                       cache: json.cache,
-                       timeout : json.timeout,
-                       success : json.success,
-                       error : json.error
-               };
-
-               if (param.dataType === 'jsonp') {
-                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
-               } else {
-                       param.url = json.url;
-                       param.data = json.data;
-               }
-               $.ajax(param);
-       },
-       
-       get : function (json) {
-               $.SD.ajax.doAjax({ 
-                       url:json.url,
-                       cache:json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'get', 
-                       dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       },
-       
-       post : function (json) {
-               $.SD.ajax.doAjax({ url:json.url,
-                       cache: json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'post', dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       }
-};
-
-/**
- * SD20 password check
- */
-
-$.SD.isSD20Pwd = function(pwd) {
-       
-       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/[0-9]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
-               return false;
-       }
-       
-       return true;
-};
-
-$.SD.popupCenter = function(popObj) {
-       var scrollbars  = "no";
-       var resizeable  = "no";
-       
-       if(popObj.scrollbars) {
-               scrollbars = popObj.scrollbars; 
-       }
-       
-       if(popObj.resizeable) {
-               resizeable = popObj.resizeable;
-       }
-       
-       var width  = screen.width;
-       var height = screen.height;
-
-       var x = ( width / 2 ) - ( popObj.width / 2 );
-       var y = ( height / 2 ) - ( popObj.height / 2 );
-
-       var opt = "left=" + x +
-                 ",top=" + y +
-                 ",width=" + popObj.width +
-                 ",height=" + popObj.height +
-                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
-                 ",scrollbars=" + scrollbars +
-                 ",resizable=" + resizeable;
-       var pop = window.open(popObj.url, popObj.target, opt);
-       if(pop) {
-               pop.focus();
-       }
-}
-
-$.SD.isValidDate = function(val) {
-       if(val.length != 8) {
-               return false;
-       }
-       
-       var yyyy = Number(val.substring(0, 4)); 
-       var mm   = Number(val.substring(4, 6));
-       var dd   = Number(val.substring(6));
-       
-       if( mm < 1 || mm > 12 ) {
-               return false;
-       }
-       
-       var endDay  = 0;
-       
-       if( mm == 2 ) {
-               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
-                       endDay = 29;
-               } else {
-                       endDay = 28;
-               }
-               
-       } else {
-               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
-               endDay = endDays[mm - 1];
-       }
-       
-       if( dd <= 0 || dd > endDay ) {
-               return false;
-       } 
-       
-       return true;
-       
-}
-
-$.SD.boardDownload = function(option, func) {
-       var jsonData = {
-               url: "/board/ajaxDwnldProc.do",
-               async: false,
-               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
-                               //location.href = $(obj).attr("href");
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.commonDownload = function(fileName, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDwnldProc.do",
-               async: false,
-               data: {fileName: fileName, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               location.href = fileFullPath;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(target == 'new'){
-                                       window.open(fileFullPath, '');
-                               }else{
-                                       location.href = fileFullPath;
-                               }
-                               
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonAllShareClickCountProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonClickCount = function(categoryName, categoryId) {
-       var jsonData = {
-               url: "/common/ajaxCommonClickCountProc.do",
-               data: {categoryName: categoryName, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.getByteLen = function(str) {
-       var resultSize = 0;
-       if(str == null){
-               return 0;
-       }
-       for(var i=0; i<str.length; i++){
-         var c = escape(str.charAt(i));
-         if(c.length == 1){
-                 resultSize ++;
-         }     else if(c.indexOf("%u") != -1) {
-                 resultSize += 2;
-         }     else if(c.indexOf("%") != -1) {
-                 resultSize += c.length/3;
-         }
-       }
-       return resultSize;
-}
-
-$.SD.cutByte = function(str, limit) {
-       var tempStr = new String(str);
-       var len = 0;
-       for ( var i = 0; i < str.length; i++) {
-               var c = escape(str.charAt(i));
-               if (c.length == 1)
-                       len++;
-               else if (c.indexOf("%u") != -1)
-                       len += 2;
-               else if (c.indexOf("%") != -1)
-                       len += c.length / 3;
-               if (len > limit) {
-                       tempStr = tempStr.substring(0, i);
-                       break;
-               }
-       }
-       return tempStr;
-}
-
-$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
-
-/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
-
-/** 
- * Method pagination 
- * */
-$.fn.frontPagination = function (pageInfo, func) {
-       var info = {
-                        prev : 1
-                       ,first : 1
-                       ,begin : pageInfo.begin - 0
-                       ,current : pageInfo.current - 0
-                       ,end : pageInfo.end - 0
-                       ,last : pageInfo.last - 0
-                       ,next : 1
-               },
-               target  = this, 
-               page    = $('<span class="page"></span>'),
-               prev    = "", 
-               next    = "", 
-               i               = 0, 
-               n               = 0;
-
-       info.begin       = info.begin < 1 ? 1 : info.begin;
-       info.current = info.current < 1 ? 1 : info.current;
-       info.end         = info.end < 1 ? 1 : info.end;
-       info.last        = info.last < 1 ? 1 : info.last;
-
-       info.prev = info.current - 1;
-       info.next = info.current + 1;
-
-       target.addClass("pageNumber");
-       target.addClass("mt20");
-       target.children().remove();
-
-       if (info.first < info.begin) {
-               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.first);
-               }));
-       }
-
-       if (info.prev >= info.first) {
-               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.prev);
-               }));
-       }
-
-       i = info.begin;
-       n = info.end;
-       for(; i <= n; i++) {
-               if (i === info.current) {
-                       page.append('<strong>'+i+'</strong>');
-               } else {
-                       (function(index){
-                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
-                                       e.preventDefault();
-                                       func(index);
-                               }));
-                       })(i);
-               }
-       }
-
-       target.append(page);
-
-       if (info.next <= info.last) {
-               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.next);
-               }));
-       }
-       
-       if (info.last > info.end) {
-               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.last);
-               }));
-       }       
-};
-
-/**
- *  Method : popup Show Hide 
- */
-$.fn.popupShow = function(options) {
-       var opts = $.extend({}, $.fn.popupShow.defaults, options);
-       
-       if($("body div#" + opts.maskId).size() == 0) {
-               $("body").append("<div id='" + opts.maskId + "'></div>");
-               $("#" + opts.maskId).css({
-                       "position" : "absolute",
-                       "left"     : "0",
-                       "top"      : "0",
-                       "z-index"  : "9000",
-                       "background-color" : "#000",
-                       "display"  : "none"
-               });
-       }
-       
-       var mask_layer  = $("#" + opts.maskId);
-       var popup_layer = $(this);
-       
-       popup_layer.css("z-index", "9999");
-       
-       var maskHeight = $(document).height();
-       var maskWidth = $(window).width();
-       
-       mask_layer.css({'width':maskWidth,'height':maskHeight});
-       
-       mask_layer.fadeIn(opts.fadeSec);
-       mask_layer.fadeTo(opts.speed, opts.fadeLow);
-       
-       var winH = $(window).height();
-       var winW = $(window).width();
-       
-       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-       
-       popup_layer.fadeIn(opts.fadeSec);
-       
-       var init_num = 0;
-       
-       if(init_num == 0) {
-               mask_layer.click(function() {
-                       $(this).hide();
-                       popup_layer.hide();
-               });
-               
-               
-               $("#" + opts.closeId).click( function(e) {
-                       e.preventDefault();
-                       popup_layer.popupHidden(opts.maskId);
-               });
-               
-               
-               $(window).resize( function() {
-                       var maskHeight = $(document).height();
-                       var maskWidth  = $(window).width();
-                       var winH       = $(window).height();
-                       var winW       = $(window).width();
-                       
-                       mask_layer.css({'width':maskWidth,'height':maskHeight});
-                       
-                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-               });
-               
-               init_num++;
-       }
-};
-
-$.fn.popupHidden = function(maskId) {
-       var id = "#";
-       
-       if(maskId) {
-               id = id + maskId;
-       } else {
-               id = id + $.fn.popupShow.defaults.maskId; 
-       }
-       
-       $(id).hide();
-       $(this).hide();
-};
-
-
-$.fn.popupShow.defaults = {
-       speed : "slow",
-       fadeLow : 0.8,
-       fadeSec : 100,
-       maskId  : "mask",
-       popupId : "layer-pop",
-       closeId : "layer-pop-close"
-};
-
-/**
- *  Method : validate File Ext
- */
-$.fn.isNotValidateFileExt = function(imgExts) {
-       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
-       var that = this;
-       var target = null;
-
-       that.each(function (i, item) {
-               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
-               if (filePath != "") {
-                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
-                       if (!imgExts[fileExt]) {
-                               target = item;
-                               return false;
-                       }
-               }
-       });
-
-       return target;
-}      
-
-/**
- *  Method : validate SD20 Password
- */
-$.validator.addMethod("isSD20Pwd", function(value, element) {
-       return this.optional(element) 
-              || $.SD.isSD20Pwd(value);
-}, "비밀번호를 다시 입력해 주세요.");
-
-$.SD.alterParent = function(options, event) {
-    var label = $(this).data('label');
-    
-    /*
-    if (event && event.type === 'focusin') {
-      label.hide();
-    } else if (event && event.type === 'focusout') {
-      label.css('opacity', options.placeholderOpacity);
-    }
-    */
-    
-    if (event && event.type !== 'keydown') {
-      toggleLabel(this, label);
-    } else {
-      // Use timeout to catch val() just after the key is pressed
-      // Using keyup is too slow.   
-      (function(input) {
-        setTimeout(function() {
-          toggleLabel(input, label);
-        }, 0);
-      })(this);
-    }
-    
-    if (event && event.type === 'focusin') {
-       label.hide();
-    }
-  };
-  
-  var toggleLabel = function(input, label) {
-    if ($(input).val()) {
-      label.hide();
-    } else {
-      label.show();
-    }
-  };
-
-  $.fn.stickyPlaceholders = function(options) {
-    var defaults = {
-      wrapperClass: 'sticky-placeholder-wrapper',
-      wrapperDisplay: 'block',
-      labelClass: 'sticky-placeholder-label',
-      placeholderAttr: 'placeholder',
-      dataAttr: 'data-sticky-placeholder',
-      placeholderColor: '#000',
-      placeholderOpacity: 0.5,
-      placeholderFocusOpacity: 0.25
-    };
-    options = $.extend(defaults, options);
-
-    return this.each(function() {
-      var input       = $(this),
-          placeholder = input.attr(options.placeholderAttr),
-          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
-          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
-          labelStyle;
-
-      // store a reference to each input's label
-      input.data('label', label);
-
-      // remove the placeholder attribute to avoid conflcits
-      input.removeAttr('placeholder');
-      
-      // If the dataAttr is set and it's not equal to the placeholderAttr
-      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
-        input.attr('data-sticky-placeholder', placeholder);
-      }
-
-      labelStyle = {
-        'color': options.placeholderColor,
-        'cursor': 'text',
-        'font-family': input.css('font-family'),
-        'font-weight': input.css('font-weight'),
-        'font-size': input.css('font-size'),
-        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
-        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
-        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
-        'opacity': options.placeholderOpacity,
-        'padding-left': input.css('padding-left'),
-        'padding-top': input.css('padding-top'),
-        'position': 'absolute',
-        'text-transform': input.css('text-transform'),
-        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
-      };
-      label.css(labelStyle);
-      
-      // hide the placeholder if the input already has a value
-      if (input.val()) {
-        label.hide();
-      }
-
-      $(this).bind('keydown input focusin focusout', function(event) {
-        $.SD.alterParent.call(this, options, event);
-      });
-        
-      // prevent click/dblclick from selecting the label text
-      label.bind('mousedown', function(e) {
-        e.preventDefault();
-      });
-      
-      // call alterParent initially without an event to set up the wrapper elements
-      $.SD.alterParent.call(this, options);
-    });
-  };
- 
-$.SD.setInputFileKeyEvent = function(file_id, after_id) {
-       $("#" + file_id).on("keydown", function(e) {
-               var that = $(this);
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.which === 9) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + after_id).focus();
-                       }, 1);
-               }
-       });
-       
-       $("#" + after_id).on("keydown", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + file_id).focus();
-                       }, 1);
-               }
-       });
-}  
-
-$.SD.closeWP = function() {
-       var Browser = navigator.appName;
-       var indexB = Browser.indexOf('Explorer');
-       if (indexB > 0) {
-           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
-           var Version = navigator.userAgent.substring(indexV, indexV + 1);
-           window.opener.focus();
-           if (Version >= 7) {
-               window.open('', '_self', '');
-               window.close();
-           }
-           else if (Version == 6) {
-               window.opener = null;
-               window.close();
-           }
-           else {
-               window.opener = '';
-               window.close();
-           }
-       }
-       else {
-           window.close();
-       }
-}
-
-$.SD.profileFacebook = function() {
-       location.replace("http://facebook.com/profile.php");
-}
-
-/* ------------------------------ END --------------------------------------- */
-window.$SD = $.SD;
-
-})(jQuery);
-
-
-$(document).ready(function(){
-//document rady Start #########################################
-
-// Top menu action Start
-var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
-var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
-var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
-var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
-var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
-var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
-var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
-var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
-var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
-var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
-
-$("#wrapper").on('click', 'a', function(e) {
-        switch($(this).attr('id')) {
-        case 'changeEn': onClickChangeEn(e);  break;
-        case 'changeZh': onClickChangeZh(e); break;
-        case 'changeKo': onClickChangeKo(e); break;
-        case 'signOut': onClickSignOut(e); break;
-        case 'signUp': onClickSignUp(e); break;
-        case 'signIn': onClickSignIn(e); break;
-        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
-        case 'signOff': onClickSignOff(e); break;
-        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
-        case 'deleteAccount' : onClickDeleteAccount(e); break;
-        }
-});
- 
-//Top menu action End
-
-
-$("#sendFacebook, #sendTwitter").click(function(e) {
-       e.preventDefault();
-       var $this = $(this);
-       
-       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
-               var sns = $this.attr("id").substring(4).toLowerCase();
-               switch(sns) {
-               case "facebook" :
-                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
-                       $("div.content img").each(function() {
-                               var that = $(this);
-                               if(that.width() > 200 && that.height() > 200) {
-                                       imgUrl = that.attr("src");
-                                       return false;
-                               }
-                       });
-                       
-                       var data = {
-                               app_id : $("#sd_appId").text(),
-                               link : copyUrl,
-                               picture : imgUrl,
-                               name : $("title").text(),
-                               caption : "developer.samsung.com",
-                               description : $("div.content p").eq(0).text(),
-                               redirectUri : "http://" + location.host + "/board/sns.do"
-                       };
-                       var url = "https://www.facebook.com/dialog/feed?" ;
-                       url += "app_id=" + data.app_id + "&" ;
-                       url += "link=" + data.link + "&" ;
-                       url += "picture=" + data.picture + "&" ;
-                       url += "name=" + encodeURIComponent(data.name) + "&" ;
-                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
-                       url += "description=" + encodeURIComponent(data.description) + "&" ;
-                       url += "redirect_uri=" + data.redirectUri ;
-                       sendSNS(sns, url, 850, 600);
-                       break;
-               case "twitter" :
-                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
-                       break;
-               }
-       }
-       
-       function sendSNS(sns, url, iWidth, iHeight) {
-               var popObj = { url : url
-                                    , width : iWidth
-                                    , height: iHeight
-                                    , target: sns
-                                    , scrollbars: "yes"
-                                    , resizeable: "yes"};
-       
-               $SD.popupCenter(popObj);
-       }
-})
- 
-//document rady End #########################################
- });
-
-;(function(){
-       window.deviceImageError = function(el) {
-               var noImage = noImage || '/images/common/device_details_noimage.gif';
-               if (el.src === noImage) 
-                       return;
-               el.src = noImage;
-       };
-})();
-
-function commonDownload(fileName, categoryId){
-       if (fileName == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!!!")
-               return;
-       }else{
-               $SD.commonDownload(fileName, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLog(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLogTarget(fileFullPath, categoryId, target){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
-               });
-       }
-}
-
-function commonAllShareClickCount(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-/*
-function layer_view(id){
-
-       var $layer = $('#'+id);
-       var $down  = $('.license-layer').find('a#down');
-
-       $layer.show();
-       $layer.find('.close, #down').click(function(){
-               $layer.hide();
-       });
-
-       function countChecked() {
-               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
-       }
-
-       $(":checkbox").click(countChecked);
-}
-*/
+// /////////////////////////////////////////////////////////////////////////////////////////////////\r
+// # com.samsung.devloper common core javascript #\r
+// # Create Date : 2012.07.10. \r
+// # Create By : kangki\r
+;(function ($) {\r
+/**\r
+ * Samsung Developer Common JavaScript\r
+ */\r
+$.SD = {};\r
+\r
+/*\r
+ * Method Common\r
+ */\r
+$.SD.message = function (msg) { if (msg) alert(msg); };\r
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }\r
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };\r
+$.SD.typeTest = function (data, datatype) {\r
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));\r
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));\r
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));\r
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));\r
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));\r
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));\r
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));\r
+\r
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));\r
+};\r
+\r
+$.SD.toDate = function (date, seperator) {\r
+       if (!seperator) seperator = '-';\r
+\r
+       date = $.SD.replaceAll(date, seperator, '');\r
+       date = $.SD.replaceAll(date, '/', '');\r
+\r
+       if (date.length !== 8) return null;\r
+       \r
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));\r
+\r
+       if (date.valueOf().toString() === 'NaN') return null;\r
+\r
+       return date;\r
+};\r
+\r
+$.SD.toDateString = function (date, seperator) {\r
+       if (!seperator) seperator = '/';\r
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);\r
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";\r
+\r
+       var str, dateString = date.getFullYear();\r
+\r
+       str             = "0" + (date.getMonth()+1);\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+       str             = "0" + date.getDate();\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+\r
+       return dateString;\r
+};\r
+\r
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };\r
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };\r
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };\r
+\r
+$.SD.insertComma = function(num) {\r
+       var tnum    = num + "";\r
+       var tarr    = new Array();\r
+       var dot     = "";\r
+       var idxDot  = tnum.indexOf(".");\r
+       var sign    = "";\r
+       var tinx    = 0;\r
+       var fnum    = tnum;\r
+        \r
+       \r
+       if(idxDot > -1) {\r
+               fnum = tnum.substring(0, idxDot);\r
+               dot  = tnum.substring(idxDot);\r
+               tnum = fnum;\r
+       } \r
+       \r
+       if(tnum.indexOf("-") > -1) {\r
+               fnum = tnum.substring(1);\r
+               sign = tnum.substring(0, 1);\r
+       }\r
+       \r
+       for(var inx = fnum.length; inx > 0; ) {\r
+               tarr[tinx++] = fnum.substring(inx, inx - 3);\r
+               inx = inx - 3;\r
+       }\r
+       \r
+       return sign + tarr.reverse().join(",") + dot;\r
+}\r
+\r
+/**\r
+ * Method Ajax\r
+ */\r
+$.SD.ajax = {\r
+       doAjax : function (json) {\r
+               var param = {\r
+                       async : json.async,\r
+                       type : json.type,\r
+                       dataType : json.dataType,\r
+                       cache: json.cache,\r
+                       timeout : json.timeout,\r
+                       success : json.success,\r
+                       error : json.error\r
+               };\r
+\r
+               if (param.dataType === 'jsonp') {\r
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';\r
+               } else {\r
+                       param.url = json.url;\r
+                       param.data = json.data;\r
+               }\r
+               $.ajax(param);\r
+       },\r
+       \r
+       get : function (json) {\r
+               $.SD.ajax.doAjax({ \r
+                       url:json.url,\r
+                       cache:json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'get', \r
+                       dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       },\r
+       \r
+       post : function (json) {\r
+               $.SD.ajax.doAjax({ url:json.url,\r
+                       cache: json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'post', dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       }\r
+};\r
+\r
+/**\r
+ * SD20 password check\r
+ */\r
+\r
+$.SD.isSD20Pwd = function(pwd) {\r
+       \r
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/[0-9]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       return true;\r
+};\r
+\r
+$.SD.popupCenter = function(popObj) {\r
+       var scrollbars  = "no";\r
+       var resizeable  = "no";\r
+       \r
+       if(popObj.scrollbars) {\r
+               scrollbars = popObj.scrollbars; \r
+       }\r
+       \r
+       if(popObj.resizeable) {\r
+               resizeable = popObj.resizeable;\r
+       }\r
+       \r
+       var width  = screen.width;\r
+       var height = screen.height;\r
+\r
+       var x = ( width / 2 ) - ( popObj.width / 2 );\r
+       var y = ( height / 2 ) - ( popObj.height / 2 );\r
+\r
+       var opt = "left=" + x +\r
+                 ",top=" + y +\r
+                 ",width=" + popObj.width +\r
+                 ",height=" + popObj.height +\r
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +\r
+                 ",scrollbars=" + scrollbars +\r
+                 ",resizable=" + resizeable;\r
+       var pop = window.open(popObj.url, popObj.target, opt);\r
+       if(pop) {\r
+               pop.focus();\r
+       }\r
+}\r
+\r
+$.SD.isValidDate = function(val) {\r
+       if(val.length != 8) {\r
+               return false;\r
+       }\r
+       \r
+       var yyyy = Number(val.substring(0, 4)); \r
+       var mm   = Number(val.substring(4, 6));\r
+       var dd   = Number(val.substring(6));\r
+       \r
+       if( mm < 1 || mm > 12 ) {\r
+               return false;\r
+       }\r
+       \r
+       var endDay  = 0;\r
+       \r
+       if( mm == 2 ) {\r
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {\r
+                       endDay = 29;\r
+               } else {\r
+                       endDay = 28;\r
+               }\r
+               \r
+       } else {\r
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);\r
+               endDay = endDays[mm - 1];\r
+       }\r
+       \r
+       if( dd <= 0 || dd > endDay ) {\r
+               return false;\r
+       } \r
+       \r
+       return true;\r
+       \r
+}\r
+\r
+$.SD.boardDownload = function(option, func) {\r
+       var jsonData = {\r
+               url: "/board/ajaxDwnldProc.do",\r
+               async: false,\r
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;\r
+                               //location.href = $(obj).attr("href");\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.commonDownload = function(fileName, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDwnldProc.do",\r
+               async: false,\r
+               data: {fileName: fileName, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               location.href = fileFullPath;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(target == 'new'){\r
+                                       window.open(fileFullPath, '');\r
+                               }else{\r
+                                       location.href = fileFullPath;\r
+                               }\r
+                               \r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonAllShareClickCountProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonClickCount = function(categoryName, categoryId) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonClickCountProc.do",\r
+               data: {categoryName: categoryName, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.getByteLen = function(str) {\r
+       var resultSize = 0;\r
+       if(str == null){\r
+               return 0;\r
+       }\r
+       for(var i=0; i<str.length; i++){\r
+         var c = escape(str.charAt(i));\r
+         if(c.length == 1){\r
+                 resultSize ++;\r
+         }     else if(c.indexOf("%u") != -1) {\r
+                 resultSize += 2;\r
+         }     else if(c.indexOf("%") != -1) {\r
+                 resultSize += c.length/3;\r
+         }\r
+       }\r
+       return resultSize;\r
+}\r
+\r
+$.SD.cutByte = function(str, limit) {\r
+       var tempStr = new String(str);\r
+       var len = 0;\r
+       for ( var i = 0; i < str.length; i++) {\r
+               var c = escape(str.charAt(i));\r
+               if (c.length == 1)\r
+                       len++;\r
+               else if (c.indexOf("%u") != -1)\r
+                       len += 2;\r
+               else if (c.indexOf("%") != -1)\r
+                       len += c.length / 3;\r
+               if (len > limit) {\r
+                       tempStr = tempStr.substring(0, i);\r
+                       break;\r
+               }\r
+       }\r
+       return tempStr;\r
+}\r
+\r
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};\r
+\r
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */\r
+\r
+/** \r
+ * Method pagination \r
+ * */\r
+$.fn.frontPagination = function (pageInfo, func) {\r
+       var info = {\r
+                        prev : 1\r
+                       ,first : 1\r
+                       ,begin : pageInfo.begin - 0\r
+                       ,current : pageInfo.current - 0\r
+                       ,end : pageInfo.end - 0\r
+                       ,last : pageInfo.last - 0\r
+                       ,next : 1\r
+               },\r
+               target  = this, \r
+               page    = $('<span class="page"></span>'),\r
+               prev    = "", \r
+               next    = "", \r
+               i               = 0, \r
+               n               = 0;\r
+\r
+       info.begin       = info.begin < 1 ? 1 : info.begin;\r
+       info.current = info.current < 1 ? 1 : info.current;\r
+       info.end         = info.end < 1 ? 1 : info.end;\r
+       info.last        = info.last < 1 ? 1 : info.last;\r
+\r
+       info.prev = info.current - 1;\r
+       info.next = info.current + 1;\r
+\r
+       target.addClass("pageNumber");\r
+       target.addClass("mt20");\r
+       target.children().remove();\r
+\r
+       if (info.first < info.begin) {\r
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.first);\r
+               }));\r
+       }\r
+\r
+       if (info.prev >= info.first) {\r
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.prev);\r
+               }));\r
+       }\r
+\r
+       i = info.begin;\r
+       n = info.end;\r
+       for(; i <= n; i++) {\r
+               if (i === info.current) {\r
+                       page.append('<strong>'+i+'</strong>');\r
+               } else {\r
+                       (function(index){\r
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){\r
+                                       e.preventDefault();\r
+                                       func(index);\r
+                               }));\r
+                       })(i);\r
+               }\r
+       }\r
+\r
+       target.append(page);\r
+\r
+       if (info.next <= info.last) {\r
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.next);\r
+               }));\r
+       }\r
+       \r
+       if (info.last > info.end) {\r
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.last);\r
+               }));\r
+       }       \r
+};\r
+\r
+/**\r
+ *  Method : popup Show Hide \r
+ */\r
+$.fn.popupShow = function(options) {\r
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);\r
+       \r
+       if($("body div#" + opts.maskId).size() == 0) {\r
+               $("body").append("<div id='" + opts.maskId + "'></div>");\r
+               $("#" + opts.maskId).css({\r
+                       "position" : "absolute",\r
+                       "left"     : "0",\r
+                       "top"      : "0",\r
+                       "z-index"  : "9000",\r
+                       "background-color" : "#000",\r
+                       "display"  : "none"\r
+               });\r
+       }\r
+       \r
+       var mask_layer  = $("#" + opts.maskId);\r
+       var popup_layer = $(this);\r
+       \r
+       popup_layer.css("z-index", "9999");\r
+       \r
+       var maskHeight = $(document).height();\r
+       var maskWidth = $(window).width();\r
+       \r
+       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+       \r
+       mask_layer.fadeIn(opts.fadeSec);\r
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);\r
+       \r
+       var winH = $(window).height();\r
+       var winW = $(window).width();\r
+       \r
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+       \r
+       popup_layer.fadeIn(opts.fadeSec);\r
+       \r
+       var init_num = 0;\r
+       \r
+       if(init_num == 0) {\r
+               mask_layer.click(function() {\r
+                       $(this).hide();\r
+                       popup_layer.hide();\r
+               });\r
+               \r
+               \r
+               $("#" + opts.closeId).click( function(e) {\r
+                       e.preventDefault();\r
+                       popup_layer.popupHidden(opts.maskId);\r
+               });\r
+               \r
+               \r
+               $(window).resize( function() {\r
+                       var maskHeight = $(document).height();\r
+                       var maskWidth  = $(window).width();\r
+                       var winH       = $(window).height();\r
+                       var winW       = $(window).width();\r
+                       \r
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+                       \r
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+               });\r
+               \r
+               init_num++;\r
+       }\r
+};\r
+\r
+$.fn.popupHidden = function(maskId) {\r
+       var id = "#";\r
+       \r
+       if(maskId) {\r
+               id = id + maskId;\r
+       } else {\r
+               id = id + $.fn.popupShow.defaults.maskId; \r
+       }\r
+       \r
+       $(id).hide();\r
+       $(this).hide();\r
+};\r
+\r
+\r
+$.fn.popupShow.defaults = {\r
+       speed : "slow",\r
+       fadeLow : 0.8,\r
+       fadeSec : 100,\r
+       maskId  : "mask",\r
+       popupId : "layer-pop",\r
+       closeId : "layer-pop-close"\r
+};\r
+\r
+/**\r
+ *  Method : validate File Ext\r
+ */\r
+$.fn.isNotValidateFileExt = function(imgExts) {\r
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};\r
+       var that = this;\r
+       var target = null;\r
+\r
+       that.each(function (i, item) {\r
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';\r
+               if (filePath != "") {\r
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();\r
+                       if (!imgExts[fileExt]) {\r
+                               target = item;\r
+                               return false;\r
+                       }\r
+               }\r
+       });\r
+\r
+       return target;\r
+}      \r
+\r
+/**\r
+ *  Method : validate SD20 Password\r
+ */\r
+$.validator.addMethod("isSD20Pwd", function(value, element) {\r
+       return this.optional(element) \r
+              || $.SD.isSD20Pwd(value);\r
+}, "비밀번호를 다시 입력해 주세요.");\r
+\r
+$.SD.alterParent = function(options, event) {\r
+    var label = $(this).data('label');\r
+    \r
+    /*\r
+    if (event && event.type === 'focusin') {\r
+      label.hide();\r
+    } else if (event && event.type === 'focusout') {\r
+      label.css('opacity', options.placeholderOpacity);\r
+    }\r
+    */\r
+    \r
+    if (event && event.type !== 'keydown') {\r
+      toggleLabel(this, label);\r
+    } else {\r
+      // Use timeout to catch val() just after the key is pressed\r
+      // Using keyup is too slow.   \r
+      (function(input) {\r
+        setTimeout(function() {\r
+          toggleLabel(input, label);\r
+        }, 0);\r
+      })(this);\r
+    }\r
+    \r
+    if (event && event.type === 'focusin') {\r
+       label.hide();\r
+    }\r
+  };\r
+  \r
+  var toggleLabel = function(input, label) {\r
+    if ($(input).val()) {\r
+      label.hide();\r
+    } else {\r
+      label.show();\r
+    }\r
+  };\r
+\r
+  $.fn.stickyPlaceholders = function(options) {\r
+    var defaults = {\r
+      wrapperClass: 'sticky-placeholder-wrapper',\r
+      wrapperDisplay: 'block',\r
+      labelClass: 'sticky-placeholder-label',\r
+      placeholderAttr: 'placeholder',\r
+      dataAttr: 'data-sticky-placeholder',\r
+      placeholderColor: '#000',\r
+      placeholderOpacity: 0.5,\r
+      placeholderFocusOpacity: 0.25\r
+    };\r
+    options = $.extend(defaults, options);\r
+\r
+    return this.each(function() {\r
+      var input       = $(this),\r
+          placeholder = input.attr(options.placeholderAttr),\r
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),\r
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),\r
+          labelStyle;\r
+\r
+      // store a reference to each input's label\r
+      input.data('label', label);\r
+\r
+      // remove the placeholder attribute to avoid conflcits\r
+      input.removeAttr('placeholder');\r
+      \r
+      // If the dataAttr is set and it's not equal to the placeholderAttr\r
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {\r
+        input.attr('data-sticky-placeholder', placeholder);\r
+      }\r
+\r
+      labelStyle = {\r
+        'color': options.placeholderColor,\r
+        'cursor': 'text',\r
+        'font-family': input.css('font-family'),\r
+        'font-weight': input.css('font-weight'),\r
+        'font-size': input.css('font-size'),\r
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),\r
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),\r
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671\r
+        'opacity': options.placeholderOpacity,\r
+        'padding-left': input.css('padding-left'),\r
+        'padding-top': input.css('padding-top'),\r
+        'position': 'absolute',\r
+        'text-transform': input.css('text-transform'),\r
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)\r
+      };\r
+      label.css(labelStyle);\r
+      \r
+      // hide the placeholder if the input already has a value\r
+      if (input.val()) {\r
+        label.hide();\r
+      }\r
+\r
+      $(this).bind('keydown input focusin focusout', function(event) {\r
+        $.SD.alterParent.call(this, options, event);\r
+      });\r
+        \r
+      // prevent click/dblclick from selecting the label text\r
+      label.bind('mousedown', function(e) {\r
+        e.preventDefault();\r
+      });\r
+      \r
+      // call alterParent initially without an event to set up the wrapper elements\r
+      $.SD.alterParent.call(this, options);\r
+    });\r
+  };\r
+ \r
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {\r
+       $("#" + file_id).on("keydown", function(e) {\r
+               var that = $(this);\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.which === 9) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + after_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       $("#" + after_id).on("keydown", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + file_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+}  \r
+\r
+$.SD.closeWP = function() {\r
+       var Browser = navigator.appName;\r
+       var indexB = Browser.indexOf('Explorer');\r
+       if (indexB > 0) {\r
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;\r
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);\r
+           window.opener.focus();\r
+           if (Version >= 7) {\r
+               window.open('', '_self', '');\r
+               window.close();\r
+           }\r
+           else if (Version == 6) {\r
+               window.opener = null;\r
+               window.close();\r
+           }\r
+           else {\r
+               window.opener = '';\r
+               window.close();\r
+           }\r
+       }\r
+       else {\r
+           window.close();\r
+       }\r
+}\r
+\r
+$.SD.profileFacebook = function() {\r
+       location.replace("http://facebook.com/profile.php");\r
+}\r
+\r
+/* ------------------------------ END --------------------------------------- */\r
+window.$SD = $.SD;\r
+\r
+})(jQuery);\r
+\r
+\r
+$(document).ready(function(){\r
+//document rady Start #########################################\r
+\r
+// Top menu action Start\r
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };\r
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };\r
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };\r
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };\r
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };\r
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };\r
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };\r
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; \r
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };\r
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };\r
+\r
+$("#wrapper").on('click', 'a', function(e) {\r
+        switch($(this).attr('id')) {\r
+        case 'changeEn': onClickChangeEn(e);  break;\r
+        case 'changeZh': onClickChangeZh(e); break;\r
+        case 'changeKo': onClickChangeKo(e); break;\r
+        case 'signOut': onClickSignOut(e); break;\r
+        case 'signUp': onClickSignUp(e); break;\r
+        case 'signIn': onClickSignIn(e); break;\r
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;\r
+        case 'signOff': onClickSignOff(e); break;\r
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;\r
+        case 'deleteAccount' : onClickDeleteAccount(e); break;\r
+        }\r
+});\r
+ \r
+//Top menu action End\r
+\r
+\r
+$("#sendFacebook, #sendTwitter").click(function(e) {\r
+       e.preventDefault();\r
+       var $this = $(this);\r
+       \r
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {\r
+               var sns = $this.attr("id").substring(4).toLowerCase();\r
+               switch(sns) {\r
+               case "facebook" :\r
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";\r
+                       $("div.content img").each(function() {\r
+                               var that = $(this);\r
+                               if(that.width() > 200 && that.height() > 200) {\r
+                                       imgUrl = that.attr("src");\r
+                                       return false;\r
+                               }\r
+                       });\r
+                       \r
+                       var data = {\r
+                               app_id : $("#sd_appId").text(),\r
+                               link : copyUrl,\r
+                               picture : imgUrl,\r
+                               name : $("title").text(),\r
+                               caption : "developer.samsung.com",\r
+                               description : $("div.content p").eq(0).text(),\r
+                               redirectUri : "http://" + location.host + "/board/sns.do"\r
+                       };\r
+                       var url = "https://www.facebook.com/dialog/feed?" ;\r
+                       url += "app_id=" + data.app_id + "&" ;\r
+                       url += "link=" + data.link + "&" ;\r
+                       url += "picture=" + data.picture + "&" ;\r
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;\r
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;\r
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;\r
+                       url += "redirect_uri=" + data.redirectUri ;\r
+                       sendSNS(sns, url, 850, 600);\r
+                       break;\r
+               case "twitter" :\r
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);\r
+                       break;\r
+               }\r
+       }\r
+       \r
+       function sendSNS(sns, url, iWidth, iHeight) {\r
+               var popObj = { url : url\r
+                                    , width : iWidth\r
+                                    , height: iHeight\r
+                                    , target: sns\r
+                                    , scrollbars: "yes"\r
+                                    , resizeable: "yes"};\r
+       \r
+               $SD.popupCenter(popObj);\r
+       }\r
+})\r
+ \r
+//document rady End #########################################\r
+ });\r
+\r
+;(function(){\r
+       window.deviceImageError = function(el) {\r
+               var noImage = noImage || '/images/common/device_details_noimage.gif';\r
+               if (el.src === noImage) \r
+                       return;\r
+               el.src = noImage;\r
+       };\r
+})();\r
+\r
+function commonDownload(fileName, categoryId){\r
+       if (fileName == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownload(fileName, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLog(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLogTarget(fileFullPath, categoryId, target){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonAllShareClickCount(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+/*\r
+function layer_view(id){\r
+\r
+       var $layer = $('#'+id);\r
+       var $down  = $('.license-layer').find('a#down');\r
+\r
+       $layer.show();\r
+       $layer.find('.close, #down').click(function(){\r
+               $layer.hide();\r
+       });\r
+\r
+       function countChecked() {\r
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()\r
+       }\r
+\r
+       $(":checkbox").click(countChecked);\r
+}\r
+*/\r
diff --git a/org.tizen.devtools/html/scripts/jquery.util.js b/org.tizen.devtools/html/scripts/jquery.util.js
index 3fc3ad0..a8516b0 100644 (file)
--- a/org.tizen.devtools/html/scripts/jquery.util.js
+++ b/org.tizen.devtools/html/scripts/jquery.util.js
@@ -1,1441 +1,1441 @@
-/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
-(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
-
-
-/*! jQuery v1.7.1 jquery.com | jquery.org/license */
-(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
-f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
-{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
-
-/*
- * Metadata - jQuery plugin for parsing metadata from elements
- *
- * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- *
- * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
- *
- */
-
-/**
- * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
- * in the JSON will become a property of the element itself.
- *
- * There are three supported types of metadata storage:
- *
- *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
- *          
- *   class: Inside the class attribute, wrapped in curly braces: { }
- *   
- *   elem:  Inside a child element (e.g. a script tag). The
- *          name parameter indicates *which* element.
- *          
- * The metadata for an element is loaded the first time the element is accessed via jQuery.
- *
- * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
- * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
- * 
- * @name $.metadata.setType
- *
- * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("class")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from the class attribute
- * 
- * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("attr", "data")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a "data" attribute
- * 
- * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
- * @before $.metadata.setType("elem", "script")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a nested script element
- * 
- * @param String type The encoding type
- * @param String name The name of the attribute to be used to get metadata (optional)
- * @cat Plugins/Metadata
- * @descr Sets the type of encoding to be used when loading metadata for the first time
- * @type undefined
- * @see metadata()
- */
-
-(function($) {
-
-$.extend({
-       metadata : {
-               defaults : {
-                       type: 'class',
-                       name: 'metadata',
-                       cre: /({.*})/,
-                       single: 'metadata'
-               },
-               setType: function( type, name ){
-                       this.defaults.type = type;
-                       this.defaults.name = name;
-               },
-               get: function( elem, opts ){
-                       var settings = $.extend({},this.defaults,opts);
-                       // check for empty string in single property
-                       if ( !settings.single.length ) settings.single = 'metadata';
-                       
-                       var data = $.data(elem, settings.single);
-                       // returned cached data if it already exists
-                       if ( data ) return data;
-                       
-                       data = "{}";
-                       
-                       if ( settings.type == "class" ) {
-                               var m = settings.cre.exec( elem.className );
-                               if ( m )
-                                       data = m[1];
-                       } else if ( settings.type == "elem" ) {
-                               if( !elem.getElementsByTagName )
-                                       return undefined;
-                               var e = elem.getElementsByTagName(settings.name);
-                               if ( e.length )
-                                       data = $.trim(e[0].innerHTML);
-                       } else if ( elem.getAttribute != undefined ) {
-                               var attr = elem.getAttribute( settings.name );
-                               if ( attr )
-                                       data = attr;
-                       }
-                       
-                       if ( data.indexOf( '{' ) <0 )
-                       data = "{" + data + "}";
-                       
-                       data = eval("(" + data + ")");
-                       
-                       $.data( elem, settings.single, data );
-                       return data;
-               }
-       }
-});
-
-/**
- * Returns the metadata object for the first member of the jQuery object.
- *
- * @name metadata
- * @descr Returns element's metadata object
- * @param Object opts An object contianing settings to override the defaults
- * @type jQuery
- * @cat Plugins/Metadata
- */
-$.fn.metadata = function( opts ){
-       return $.metadata.get( this[0], opts );
-};
-
-})(jQuery);
-
-
-/**
- * jQuery Validation Plugin 1.9.0
-
- *
- * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- * http://docs.jquery.com/Plugins/Validation
- *
- * Copyright (c) 2006 - 2011 J철rn Zaefferer
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- */
-
-/**
- * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
- */
-
-(function($) {
-
-$.extend($.fn, {
-       // http://docs.jquery.com/Plugins/Validation/validate
-       validate: function( options ) {
-
-               // if nothing is selected, return nothing; can't chain anyway
-               if (!this.length) {
-                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
-                       return;
-               }
-
-               // check if a validator for this form was already created
-               var validator = $.data(this[0], 'validator');
-               if ( validator ) {
-                       return validator;
-               }
-
-               // Add novalidate tag if HTML5.
-               this.attr('novalidate', 'novalidate');
-
-               validator = new $.validator( options, this[0] );
-               $.data(this[0], 'validator', validator);
-
-               if ( validator.settings.onsubmit ) {
-
-                       var inputsAndButtons = this.find("input, button");
-
-                       // allow suppresing validation by adding a cancel class to the submit button
-                       inputsAndButtons.filter(".cancel").click(function () {
-                               validator.cancelSubmit = true;
-                       });
-
-                       // when a submitHandler is used, capture the submitting button
-                       if (validator.settings.submitHandler) {
-                               inputsAndButtons.filter(":submit").click(function () {
-                                       validator.submitButton = this;
-                               });
-                       }
-
-                       // validate the form on submit
-                       this.submit( function( event ) {
-                               if ( validator.settings.debug )
-                                       // prevent form submit to be able to see console output
-                                       event.preventDefault();
-
-                               function handle() {
-                                       if ( validator.settings.submitHandler ) {
-                                               if (validator.submitButton) {
-                                                       // insert a hidden input as a replacement for the missing submit button
-                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
-                                               }
-                                               validator.settings.submitHandler.call( validator, validator.currentForm );
-                                               if (validator.submitButton) {
-                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
-                                                       hidden.remove();
-                                               }
-                                               return false;
-                                       }
-                                       return true;
-                               }
-
-                               // prevent submit for invalid forms or custom submit handlers
-                               if ( validator.cancelSubmit ) {
-                                       validator.cancelSubmit = false;
-                                       return handle();
-                               }
-                               if ( validator.form() ) {
-                                       if ( validator.pendingRequest ) {
-                                               validator.formSubmitted = true;
-                                               return false;
-                                       }
-                                       return handle();
-                               } else {
-                                       validator.focusInvalid();
-                                       return false;
-                               }
-                       });
-               }
-
-               return validator;
-       },
-       // http://docs.jquery.com/Plugins/Validation/valid
-       valid: function() {
-        if ( $(this[0]).is('form')) {
-            return this.validate().form();
-        } else {
-            var valid = true;
-            var validator = $(this[0].form).validate();
-            this.each(function() {
-                               valid &= validator.element(this);
-            });
-            return valid;
-        }
-    },
-       // attributes: space seperated list of attributes to retrieve and remove
-       removeAttrs: function(attributes) {
-               var result = {},
-                       $element = this;
-               $.each(attributes.split(/\s/), function(index, value) {
-                       result[value] = $element.attr(value);
-                       $element.removeAttr(value);
-               });
-               return result;
-       },
-       // http://docs.jquery.com/Plugins/Validation/rules
-       rules: function(command, argument) {
-               var element = this[0];
-
-               if (command) {
-                       var settings = $.data(element.form, 'validator').settings;
-                       var staticRules = settings.rules;
-                       var existingRules = $.validator.staticRules(element);
-                       switch(command) {
-                       case "add":
-                               $.extend(existingRules, $.validator.normalizeRule(argument));
-                               staticRules[element.name] = existingRules;
-                               if (argument.messages)
-                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
-                               break;
-                       case "remove":
-                               if (!argument) {
-                                       delete staticRules[element.name];
-                                       return existingRules;
-                               }
-                               var filtered = {};
-                               $.each(argument.split(/\s/), function(index, method) {
-                                       filtered[method] = existingRules[method];
-                                       delete existingRules[method];
-                               });
-                               return filtered;
-                       }
-               }
-
-               var data = $.validator.normalizeRules(
-               $.extend(
-                       {},
-                       $.validator.metadataRules(element),
-                       $.validator.classRules(element),
-                       $.validator.attributeRules(element),
-                       $.validator.staticRules(element)
-               ), element);
-
-               // make sure required is at front
-               if (data.required) {
-                       var param = data.required;
-                       delete data.required;
-                       data = $.extend({required: param}, data);
-               }
-
-               return data;
-       }
-});
-
-// Custom selectors
-$.extend($.expr[":"], {
-       // http://docs.jquery.com/Plugins/Validation/blank
-       blank: function(a) {return !$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/filled
-       filled: function(a) {return !!$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/unchecked
-       unchecked: function(a) {return !a.checked;}
-});
-
-// constructor for validator
-$.validator = function( options, form ) {
-       this.settings = $.extend( true, {}, $.validator.defaults, options );
-       this.currentForm = form;
-       this.init();
-};
-
-$.validator.format = function(source, params) {
-       if ( arguments.length == 1 )
-               return function() {
-                       var args = $.makeArray(arguments);
-                       args.unshift(source);
-                       return $.validator.format.apply( this, args );
-               };
-       if ( arguments.length > 2 && params.constructor != Array  ) {
-               params = $.makeArray(arguments).slice(1);
-       }
-       if ( params.constructor != Array ) {
-               params = [ params ];
-       }
-       $.each(params, function(i, n) {
-               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
-       });
-       return source;
-};
-
-$.extend($.validator, {
-
-       defaults: {
-               messages: {},
-               groups: {},
-               rules: {},
-               errorClass: "error",
-               validClass: "valid",
-               errorElement: "label",
-               focusInvalid: true,
-               errorContainer: $( [] ),
-               errorLabelContainer: $( [] ),
-               onsubmit: true,
-               ignore: ":hidden",
-               ignoreTitle: false,
-               onfocusin: function(element, event) {
-                       this.lastActive = element;
-
-                       // hide error label and remove error class on focus if enabled
-                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
-                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
-                               this.addWrapper(this.errorsFor(element)).hide();
-                       }
-               },
-               onfocusout: function(element, event) {
-                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
-                               this.element(element);
-                       }
-               },
-               onkeyup: function(element, event) {
-                       if ( element.name in this.submitted || element == this.lastElement ) {
-                               this.element(element);
-                       }
-               },
-               onclick: function(element, event) {
-                       // click on selects, radiobuttons and checkboxes
-                       if ( element.name in this.submitted )
-                               this.element(element);
-                       // or option elements, check parent select in that case
-                       else if (element.parentNode.name in this.submitted)
-                               this.element(element.parentNode);
-               },
-               highlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
-                       } else {
-                               $(element).addClass(errorClass).removeClass(validClass);
-                       }
-               },
-               unhighlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
-                       } else {
-                               $(element).removeClass(errorClass).addClass(validClass);
-                       }
-               }
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
-       setDefaults: function(settings) {
-               $.extend( $.validator.defaults, settings );
-       },
-
-       messages: {
-               required: "This field is required.",
-               remote: "Please fix this field.",
-               email: "Please enter a valid email address.",
-               url: "Please enter a valid URL.",
-               date: "Please enter a valid date.",
-               dateISO: "Please enter a valid date (ISO).",
-               number: "Please enter a valid number.",
-               digits: "Please enter only digits.",
-               creditcard: "Please enter a valid credit card number.",
-               equalTo: "Please enter the same value again.",
-               accept: "Please enter a value with a valid extension.",
-               maxlength: $.validator.format("Please enter no more than {0} characters."),
-               minlength: $.validator.format("Please enter at least {0} characters."),
-               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
-               range: $.validator.format("Please enter a value between {0} and {1}."),
-               max: $.validator.format("Please enter a value less than or equal to {0}."),
-               min: $.validator.format("Please enter a value greater than or equal to {0}.")
-       },
-
-       autoCreateRanges: false,
-
-       prototype: {
-
-               init: function() {
-                       this.labelContainer = $(this.settings.errorLabelContainer);
-                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
-                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
-                       this.submitted = {};
-                       this.valueCache = {};
-                       this.pendingRequest = 0;
-                       this.pending = {};
-                       this.invalid = {};
-                       this.reset();
-
-                       var groups = (this.groups = {});
-                       $.each(this.settings.groups, function(key, value) {
-                               $.each(value.split(/\s/), function(index, name) {
-                                       groups[name] = key;
-                               });
-                       });
-                       var rules = this.settings.rules;
-                       $.each(rules, function(key, value) {
-                               rules[key] = $.validator.normalizeRule(value);
-                       });
-
-                       function delegate(event) {
-                               var validator = $.data(this[0].form, "validator"),
-                                       eventType = "on" + event.type.replace(/^validate/, "");
-                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
-                       }
-                       $(this.currentForm)
-                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
-                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
-                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
-                                               "[type='week'], [type='time'], [type='datetime-local'], " +
-                                               "[type='range'], [type='color'] ",
-                                               "focusin focusout keyup", delegate)
-                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
-
-                       if (this.settings.invalidHandler)
-                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/form
-               form: function() {
-                       this.checkForm();
-                       $.extend(this.submitted, this.errorMap);
-                       this.invalid = $.extend({}, this.errorMap);
-                       if (!this.valid())
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                       this.showErrors();
-                       return this.valid();
-               },
-
-               // 원본소스
-               /*
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               this.check( elements[i] );
-                       }
-                       return this.valid();
-               },
-               */
-
-               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
-                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
-                                               this.check( this.findByName( elements[i].name )[cnt] );
-                                       }
-                               } else {
-                                       this.check( elements[i] );
-                               }
-                       }
-                       return this.valid();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/element
-               element: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-                       this.lastElement = element;
-                       this.prepareElement( element );
-                       this.currentElements = $(element);
-                       var result = this.check( element );
-                       if ( result ) {
-                               delete this.invalid[element.name];
-                       } else {
-                               this.invalid[element.name] = true;
-                       }
-                       if ( !this.numberOfInvalids() ) {
-                               // Hide error containers on last error
-                               this.toHide = this.toHide.add( this.containers );
-                       }
-                       this.showErrors();
-                       return result;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
-               showErrors: function(errors) {
-                       if(errors) {
-                               // add items to error list and map
-                               $.extend( this.errorMap, errors );
-                               this.errorList = [];
-                               for ( var name in errors ) {
-                                       this.errorList.push({
-                                               message: errors[name],
-                                               element: this.findByName(name)[0]
-                                       });
-                               }
-                               // remove items from success list
-                               this.successList = $.grep( this.successList, function(element) {
-                                       return !(element.name in errors);
-                               });
-                       }
-                       this.settings.showErrors
-                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
-                               : this.defaultShowErrors();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
-               resetForm: function() {
-                       if ( $.fn.resetForm )
-                               $( this.currentForm ).resetForm();
-                       this.submitted = {};
-                       this.lastElement = null;
-                       this.prepareForm();
-                       this.hideErrors();
-                       this.elements().removeClass( this.settings.errorClass );
-               },
-
-               numberOfInvalids: function() {
-                       return this.objectLength(this.invalid);
-               },
-
-               objectLength: function( obj ) {
-                       var count = 0;
-                       for ( var i in obj )
-                               count++;
-                       return count;
-               },
-
-               hideErrors: function() {
-                       this.addWrapper( this.toHide ).hide();
-               },
-
-               valid: function() {
-                       return this.size() == 0;
-               },
-
-               size: function() {
-                       return this.errorList.length;
-               },
-
-               focusInvalid: function() {
-                       if( this.settings.focusInvalid ) {
-                               try {
-                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
-                                       .filter(":visible")
-                                       .focus()
-                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
-                                       .trigger("focusin");
-                               } catch(e) {
-                                       // ignore IE throwing errors when focusing hidden elements
-                               }
-                       }
-               },
-
-               findLastActive: function() {
-                       var lastActive = this.lastActive;
-                       return lastActive && $.grep(this.errorList, function(n) {
-                               return n.element.name == lastActive.name;
-                       }).length == 1 && lastActive;
-               },
-
-               elements: function() {
-                       var validator = this,
-                               rulesCache = {};
-
-                       // select all valid inputs inside the form (no submit or reset buttons)
-                       return $(this.currentForm)
-                       .find("input, select, textarea")
-                       .not(":submit, :reset, :image, [disabled]")
-                       .not( this.settings.ignore )
-                       .filter(function() {
-                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
-
-                               // select only the first element for each name, and only those with rules specified
-                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
-                                       return false;
-
-                               rulesCache[this.name] = true;
-                               return true;
-                       });
-               },
-
-               clean: function( selector ) {
-                       return $( selector )[0];
-               },
-
-               errors: function() {
-                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
-               },
-
-               reset: function() {
-                       this.successList = [];
-                       this.errorList = [];
-                       this.errorMap = {};
-                       this.toShow = $([]);
-                       this.toHide = $([]);
-                       this.currentElements = $([]);
-               },
-
-               prepareForm: function() {
-                       this.reset();
-                       this.toHide = this.errors().add( this.containers );
-               },
-
-               prepareElement: function( element ) {
-                       this.reset();
-                       this.toHide = this.errorsFor(element);
-               },
-
-               check: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-
-                       var rules = $(element).rules();
-                       var dependencyMismatch = false;
-                       for (var method in rules ) {
-                               var rule = { method: method, parameters: rules[method] };
-                               try {
-                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
-
-                                       // if a method indicates that the field is optional and therefore valid,
-                                       // don't mark it as valid when there are no other rules
-                                       if ( result == "dependency-mismatch" ) {
-                                               dependencyMismatch = true;
-                                               continue;
-                                       }
-                                       dependencyMismatch = false;
-
-                                       if ( result == "pending" ) {
-                                               this.toHide = this.toHide.not( this.errorsFor(element) );
-                                               return;
-                                       }
-
-                                       if( !result ) {
-                                               this.formatAndAdd( element, rule );
-                                               return false;
-                                       }
-                               } catch(e) {
-                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
-                                                + ", check the '" + rule.method + "' method", e);
-                                       throw e;
-                               }
-                       }
-                       if (dependencyMismatch)
-                               return;
-                       if ( this.objectLength(rules) )
-                               this.successList.push(element);
-                       return true;
-               },
-
-               // return the custom message for the given element and validation method
-               // specified in the element's "messages" metadata
-               customMetaMessage: function(element, method) {
-                       if (!$.metadata)
-                               return;
-
-                       var meta = this.settings.meta
-                               ? $(element).metadata()[this.settings.meta]
-                               : $(element).metadata();
-
-                       return meta && meta.messages && meta.messages[method];
-               },
-
-               // return the custom message for the given element name and validation method
-               customMessage: function( name, method ) {
-                       var m = this.settings.messages[name];
-                       return m && (m.constructor == String
-                               ? m
-                               : m[method]);
-               },
-
-               // return the first defined argument, allowing empty strings
-               findDefined: function() {
-                       for(var i = 0; i < arguments.length; i++) {
-                               if (arguments[i] !== undefined)
-                                       return arguments[i];
-                       }
-                       return undefined;
-               },
-
-               defaultMessage: function( element, method) {
-                       return this.findDefined(
-                               this.customMessage( element.name, method ),
-                               this.customMetaMessage( element, method ),
-                               // title is never undefined, so handle empty string as undefined
-                               !this.settings.ignoreTitle && element.title || undefined,
-                               $.validator.messages[method],
-                               "<strong>Warning: No message defined for " + element.name + "</strong>"
-                       );
-               },
-
-               formatAndAdd: function( element, rule ) {
-                       var message = this.defaultMessage( element, rule.method ),
-                               theregex = /\$?\{(\d+)\}/g;
-                       if ( typeof message == "function" ) {
-                               message = message.call(this, rule.parameters, element);
-                       } else if (theregex.test(message)) {
-                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
-                       }
-                       this.errorList.push({
-                               message: message,
-                               element: element
-                       });
-
-                       this.errorMap[element.name] = message;
-                       this.submitted[element.name] = message;
-               },
-
-               addWrapper: function(toToggle) {
-                       if ( this.settings.wrapper )
-                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
-                       return toToggle;
-               },
-
-               defaultShowErrors: function() {
-                       for ( var i = 0; this.errorList[i]; i++ ) {
-                               var error = this.errorList[i];
-                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
-                               this.showLabel( error.element, error.message );
-                       }
-                       if( this.errorList.length ) {
-                               this.toShow = this.toShow.add( this.containers );
-                       }
-                       if (this.settings.success) {
-                               for ( var i = 0; this.successList[i]; i++ ) {
-                                       this.showLabel( this.successList[i] );
-                               }
-                       }
-                       if (this.settings.unhighlight) {
-                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
-                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
-                               }
-                       }
-                       this.toHide = this.toHide.not( this.toShow );
-                       this.hideErrors();
-                       this.addWrapper( this.toShow ).show();
-               },
-
-               validElements: function() {
-                       return this.currentElements.not(this.invalidElements());
-               },
-
-               invalidElements: function() {
-                       return $(this.errorList).map(function() {
-                               return this.element;
-                       });
-               },
-
-               showLabel: function(element, message) {
-                       var label = this.errorsFor( element );
-                       if ( label.length ) {
-                               // refresh error/success class
-                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
-
-                               // check if we have a generated label, replace the message then
-                               label.attr("generated") && label.html(message);
-                       } else {
-                               // create label
-                               label = $("<" + this.settings.errorElement + "/>")
-                                       .attr({"for":  this.idOrName(element), generated: true})
-                                       .addClass(this.settings.errorClass)
-                                       .html(message || "");
-                               if ( this.settings.wrapper ) {
-                                       // make sure the element is visible, even in IE
-                                       // actually showing the wrapped element is handled elsewhere
-                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
-                               }
-                               if ( !this.labelContainer.append(label).length )
-                                       this.settings.errorPlacement
-                                               ? this.settings.errorPlacement(label, $(element) )
-                                               : label.insertAfter(element);
-                       }
-                       if ( !message && this.settings.success ) {
-                               label.text("");
-                               typeof this.settings.success == "string"
-                                       ? label.addClass( this.settings.success )
-                                       : this.settings.success( label );
-                       }
-                       this.toShow = this.toShow.add(label);
-               },
-
-               errorsFor: function(element) {
-                       var name = this.idOrName(element);
-               return this.errors().filter(function() {
-                               return $(this).attr('for') == name;
-                       });
-               },
-
-               idOrName: function(element) {
-                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
-               },
-
-               validationTargetFor: function(element) {
-                       // if radio/checkbox, validate first element in group instead
-                       if (this.checkable(element)) {
-                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
-                       }
-                       return element;
-               },
-
-               checkable: function( element ) {
-                       return /radio|checkbox/i.test(element.type);
-               },
-
-               findByName: function( name ) {
-                       // select by name and filter by form for performance over form.find("[name=...]")
-                       var form = this.currentForm;
-                       return $(document.getElementsByName(name)).map(function(index, element) {
-                               return element.form == form && element.name == name && element  || null;
-                       });
-               },
-
-               getLength: function(value, element) {
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               return $("option:selected", element).length;
-                       case 'input':
-                               if( this.checkable( element) )
-                                       return this.findByName(element.name).filter(':checked').length;
-                       }
-                       return value.length;
-               },
-
-               depend: function(param, element) {
-                       return this.dependTypes[typeof param]
-                               ? this.dependTypes[typeof param](param, element)
-                               : true;
-               },
-
-               dependTypes: {
-                       "boolean": function(param, element) {
-                               return param;
-                       },
-                       "string": function(param, element) {
-                               return !!$(param, element.form).length;
-                       },
-                       "function": function(param, element) {
-                               return param(element);
-                       }
-               },
-
-               optional: function(element) {
-                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
-               },
-
-               startRequest: function(element) {
-                       if (!this.pending[element.name]) {
-                               this.pendingRequest++;
-                               this.pending[element.name] = true;
-                       }
-               },
-
-               stopRequest: function(element, valid) {
-                       this.pendingRequest--;
-                       // sometimes synchronization fails, make sure pendingRequest is never < 0
-                       if (this.pendingRequest < 0)
-                               this.pendingRequest = 0;
-                       delete this.pending[element.name];
-                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
-                               $(this.currentForm).submit();
-                               this.formSubmitted = false;
-                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                               this.formSubmitted = false;
-                       }
-               },
-
-               previousValue: function(element) {
-                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
-                               old: null,
-                               valid: true,
-                               message: this.defaultMessage( element, "remote" )
-                       });
-               }
-
-       },
-
-       classRuleSettings: {
-               required: {required: true},
-               email: {email: true},
-               url: {url: true},
-               date: {date: true},
-               dateISO: {dateISO: true},
-               dateDE: {dateDE: true},
-               number: {number: true},
-               numberDE: {numberDE: true},
-               digits: {digits: true},
-               creditcard: {creditcard: true}
-       },
-
-       addClassRules: function(className, rules) {
-               className.constructor == String ?
-                       this.classRuleSettings[className] = rules :
-                       $.extend(this.classRuleSettings, className);
-       },
-
-       classRules: function(element) {
-               var rules = {};
-               var classes = $(element).attr('class');
-               classes && $.each(classes.split(' '), function() {
-                       if (this in $.validator.classRuleSettings) {
-                               $.extend(rules, $.validator.classRuleSettings[this]);
-                       }
-               });
-               return rules;
-       },
-
-       attributeRules: function(element) {
-               var rules = {};
-               var $element = $(element);
-
-               for (var method in $.validator.methods) {
-                       var value;
-                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
-                       if (method === 'required' && typeof $.fn.prop === 'function') {
-                               value = $element.prop(method);
-                       } else {
-                               value = $element.attr(method);
-                       }
-                       if (value) {
-                               rules[method] = value;
-                       } else if ($element[0].getAttribute("type") === method) {
-                               rules[method] = true;
-                       }
-               }
-
-               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
-               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
-                       delete rules.maxlength;
-               }
-
-               return rules;
-       },
-
-       metadataRules: function(element) {
-               if (!$.metadata) return {};
-
-               var meta = $.data(element.form, 'validator').settings.meta;
-               return meta ?
-                       $(element).metadata()[meta] :
-                       $(element).metadata();
-       },
-
-       staticRules: function(element) {
-               var rules = {};
-               var validator = $.data(element.form, 'validator');
-               if (validator.settings.rules) {
-                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
-               }
-               return rules;
-       },
-
-       normalizeRules: function(rules, element) {
-               // handle dependency check
-               $.each(rules, function(prop, val) {
-                       // ignore rule when param is explicitly false, eg. required:false
-                       if (val === false) {
-                               delete rules[prop];
-                               return;
-                       }
-                       if (val.param || val.depends) {
-                               var keepRule = true;
-                               switch (typeof val.depends) {
-                                       case "string":
-                                               keepRule = !!$(val.depends, element.form).length;
-                                               break;
-                                       case "function":
-                                               keepRule = val.depends.call(element, element);
-                                               break;
-                               }
-                               if (keepRule) {
-                                       rules[prop] = val.param !== undefined ? val.param : true;
-                               } else {
-                                       delete rules[prop];
-                               }
-                       }
-               });
-
-               // evaluate parameters
-               $.each(rules, function(rule, parameter) {
-                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
-               });
-
-               // clean number parameters
-               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
-                       if (rules[this]) {
-                               rules[this] = Number(rules[this]);
-                       }
-               });
-               $.each(['rangelength', 'range'], function() {
-                       if (rules[this]) {
-                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
-                       }
-               });
-
-               if ($.validator.autoCreateRanges) {
-                       // auto-create ranges
-                       if (rules.min && rules.max) {
-                               rules.range = [rules.min, rules.max];
-                               delete rules.min;
-                               delete rules.max;
-                       }
-                       if (rules.minlength && rules.maxlength) {
-                               rules.rangelength = [rules.minlength, rules.maxlength];
-                               delete rules.minlength;
-                               delete rules.maxlength;
-                       }
-               }
-
-               // To support custom messages in metadata ignore rule methods titled "messages"
-               if (rules.messages) {
-                       delete rules.messages;
-               }
-
-               return rules;
-       },
-
-       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
-       normalizeRule: function(data) {
-               if( typeof data == "string" ) {
-                       var transformed = {};
-                       $.each(data.split(/\s/), function() {
-                               transformed[this] = true;
-                       });
-                       data = transformed;
-               }
-               return data;
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
-       addMethod: function(name, method, message) {
-               $.validator.methods[name] = method;
-               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
-               if (method.length < 3) {
-                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
-               }
-       },
-
-       methods: {
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/required
-               required: function(value, element, param) {
-                       // check if dependency is met
-                       if ( !this.depend(param, element) )
-                               return "dependency-mismatch";
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               // could be an array for select-multiple or a string, both are fine this way
-                               var val = $(element).val();
-                               return val && val.length > 0;
-                       case 'input':
-                               if ( this.checkable(element) )
-                                       return this.getLength(value, element) > 0;
-                       default:
-                               return $.trim(value).length > 0;
-                       }
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/remote
-               remote: function(value, element, param) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-
-                       var previous = this.previousValue(element);
-                       if (!this.settings.messages[element.name] )
-                               this.settings.messages[element.name] = {};
-                       previous.originalMessage = this.settings.messages[element.name].remote;
-                       this.settings.messages[element.name].remote = previous.message;
-
-                       param = typeof param == "string" && {url:param} || param;
-
-                       if ( this.pending[element.name] ) {
-                               return "pending";
-                       }
-                       if ( previous.old === value ) {
-                               return previous.valid;
-                       }
-
-                       previous.old = value;
-                       var validator = this;
-                       this.startRequest(element);
-                       var data = {};
-                       data[element.name] = value;
-                       $.ajax($.extend(true, {
-                               url: param,
-                               mode: "abort",
-                               port: "validate" + element.name,
-                               dataType: "json",
-                               data: data,
-                               success: function(response) {
-                                       validator.settings.messages[element.name].remote = previous.originalMessage;
-                                       var valid = response === true;
-                                       if ( valid ) {
-                                               var submitted = validator.formSubmitted;
-                                               validator.prepareElement(element);
-                                               validator.formSubmitted = submitted;
-                                               validator.successList.push(element);
-                                               validator.showErrors();
-                                       } else {
-                                               var errors = {};
-                                               var message = response || validator.defaultMessage( element, "remote" );
-                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
-                                               validator.showErrors(errors);
-                                       }
-                                       previous.valid = valid;
-                                       validator.stopRequest(element, valid);
-                               }
-                       }, param));
-                       return "pending";
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
-               minlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
-               maxlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
-               rangelength: function(value, element, param) {
-                       var length = this.getLength($.trim(value), element);
-                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/min
-               min: function( value, element, param ) {
-                       return this.optional(element) || value >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/max
-               max: function( value, element, param ) {
-                       return this.optional(element) || value <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/range
-               range: function( value, element, param ) {
-                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/email
-               email: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
-                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/url
-               url: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
-                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/date
-               date: function(value, element) {
-                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
-               dateISO: function(value, element) {
-                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/number
-               number: function(value, element) {
-                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/digits
-               digits: function(value, element) {
-                       return this.optional(element) || /^\d+$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
-               // based on http://en.wikipedia.org/wiki/Luhn
-               creditcard: function(value, element) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-                       // accept only spaces, digits and dashes
-                       if (/[^0-9 -]+/.test(value))
-                               return false;
-                       var nCheck = 0,
-                               nDigit = 0,
-                               bEven = false;
-
-                       value = value.replace(/\D/g, "");
-
-                       for (var n = value.length - 1; n >= 0; n--) {
-                               var cDigit = value.charAt(n);
-                               var nDigit = parseInt(cDigit, 10);
-                               if (bEven) {
-                                       if ((nDigit *= 2) > 9)
-                                               nDigit -= 9;
-                               }
-                               nCheck += nDigit;
-                               bEven = !bEven;
-                       }
-
-                       return (nCheck % 10) == 0;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/accept
-               accept: function(value, element, param) {
-                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
-                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
-               equalTo: function(value, element, param) {
-                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
-                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
-                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
-                               $(element).valid();
-                       });
-                       return value == target.val();
-               }
-
-       }
-
-});
-
-// deprecated, use $.validator.format instead
-$.format = $.validator.format;
-
-})(jQuery);
-
-// ajax mode: abort
-// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
-// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
-;(function($) {
-       var pendingRequests = {};
-       // Use a prefilter if available (1.5+)
-       if ( $.ajaxPrefilter ) {
-               $.ajaxPrefilter(function(settings, _, xhr) {
-                       var port = settings.port;
-                       if (settings.mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               pendingRequests[port] = xhr;
-                       }
-               });
-       } else {
-               // Proxy ajax
-               var ajax = $.ajax;
-               $.ajax = function(settings) {
-                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
-                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
-                       if (mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               return (pendingRequests[port] = ajax.apply(this, arguments));
-                       }
-                       return ajax.apply(this, arguments);
-               };
-       }
-})(jQuery);
-
-// provides cross-browser focusin and focusout events
-// IE has native support, in other browsers, use event caputuring (neither bubbles)
-
-// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
-// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
-;(function($) {
-       // only implement if not provided by jQuery core (since 1.4)
-       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
-       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
-               $.each({
-                       focus: 'focusin',
-                       blur: 'focusout'
-               }, function( original, fix ){
-                       $.event.special[fix] = {
-                               setup:function() {
-                                       this.addEventListener( original, handler, true );
-                               },
-                               teardown:function() {
-                                       this.removeEventListener( original, handler, true );
-                               },
-                               handler: function(e) {
-                                       arguments[0] = $.event.fix(e);
-                                       arguments[0].type = fix;
-                                       return $.event.handle.apply(this, arguments);
-                               }
-                       };
-                       function handler(e) {
-                               e = $.event.fix(e);
-                               e.type = fix;
-                               return $.event.handle.call(this, e);
-                       }
-               });
-       };
-       $.extend($.fn, {
-               validateDelegate: function(delegate, type, handler) {
-                       return this.bind(type, function(event) {
-                               var target = $(event.target);
-                               if (target.is(delegate)) {
-                                       return handler.apply(target, arguments);
-                               }
-                       });
-               }
-       });
-})(jQuery);
-
-/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
- * Licensed under the MIT License (LICENSE.txt).
- *
- * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
- * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
- * Thanks to: Seamus Leahy for adding deltaX and deltaY
- *
- * Version: 3.0.6
- * 
- * Requires: 1.2.2+
- */
-
-(function($) {
-
-var types = ['DOMMouseScroll', 'mousewheel'];
-
-if ($.event.fixHooks) {
-    for ( var i=types.length; i; ) {
-        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
-    }
-}
-
-$.event.special.mousewheel = {
-    setup: function() {
-        if ( this.addEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.addEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = handler;
-        }
-    },
-    
-    teardown: function() {
-        if ( this.removeEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.removeEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = null;
-        }
-    }
-};
-
-$.fn.extend({
-    mousewheel: function(fn) {
-        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-    },
-    
-    unmousewheel: function(fn) {
-        return this.unbind("mousewheel", fn);
-    }
-});
-
-
-function handler(event) {
-    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
-    event = $.event.fix(orgEvent);
-    event.type = "mousewheel";
-    
-    // Old school scrollwheel delta
-    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
-    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
-    
-    // New school multidimensional scroll (touchpads) deltas
-    deltaY = delta;
-    
-    // Gecko
-    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
-        deltaY = 0;
-        deltaX = -1*delta;
-    }
-    
-    // Webkit
-    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
-    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
-    
-    // Add event and delta to the front of the arguments
-    args.unshift(event, delta, deltaX, deltaY);
-    
-    return ($.event.dispatch || $.event.handle).apply(this, args);
-}
-
-})(jQuery);
-
-/*
- * jScrollPane - v2.0.0beta12 - 2012-07-24
- * http://jscrollpane.kelvinluck.com/
- *
- * Copyright (c) 2010 Kelvin Luck
- * Dual licensed under the MIT and GPL licenses.
- */
-(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
-if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
-}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */\r
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);\r
+\r
+\r
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */\r
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};\r
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()\r
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);\r
+\r
+/*\r
+ * Metadata - jQuery plugin for parsing metadata from elements\r
+ *\r
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ *\r
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $\r
+ *\r
+ */\r
+\r
+/**\r
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property\r
+ * in the JSON will become a property of the element itself.\r
+ *\r
+ * There are three supported types of metadata storage:\r
+ *\r
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.\r
+ *          \r
+ *   class: Inside the class attribute, wrapped in curly braces: { }\r
+ *   \r
+ *   elem:  Inside a child element (e.g. a script tag). The\r
+ *          name parameter indicates *which* element.\r
+ *          \r
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.\r
+ *\r
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements\r
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.\r
+ * \r
+ * @name $.metadata.setType\r
+ *\r
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("class")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from the class attribute\r
+ * \r
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("attr", "data")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a "data" attribute\r
+ * \r
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>\r
+ * @before $.metadata.setType("elem", "script")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a nested script element\r
+ * \r
+ * @param String type The encoding type\r
+ * @param String name The name of the attribute to be used to get metadata (optional)\r
+ * @cat Plugins/Metadata\r
+ * @descr Sets the type of encoding to be used when loading metadata for the first time\r
+ * @type undefined\r
+ * @see metadata()\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend({\r
+       metadata : {\r
+               defaults : {\r
+                       type: 'class',\r
+                       name: 'metadata',\r
+                       cre: /({.*})/,\r
+                       single: 'metadata'\r
+               },\r
+               setType: function( type, name ){\r
+                       this.defaults.type = type;\r
+                       this.defaults.name = name;\r
+               },\r
+               get: function( elem, opts ){\r
+                       var settings = $.extend({},this.defaults,opts);\r
+                       // check for empty string in single property\r
+                       if ( !settings.single.length ) settings.single = 'metadata';\r
+                       \r
+                       var data = $.data(elem, settings.single);\r
+                       // returned cached data if it already exists\r
+                       if ( data ) return data;\r
+                       \r
+                       data = "{}";\r
+                       \r
+                       if ( settings.type == "class" ) {\r
+                               var m = settings.cre.exec( elem.className );\r
+                               if ( m )\r
+                                       data = m[1];\r
+                       } else if ( settings.type == "elem" ) {\r
+                               if( !elem.getElementsByTagName )\r
+                                       return undefined;\r
+                               var e = elem.getElementsByTagName(settings.name);\r
+                               if ( e.length )\r
+                                       data = $.trim(e[0].innerHTML);\r
+                       } else if ( elem.getAttribute != undefined ) {\r
+                               var attr = elem.getAttribute( settings.name );\r
+                               if ( attr )\r
+                                       data = attr;\r
+                       }\r
+                       \r
+                       if ( data.indexOf( '{' ) <0 )\r
+                       data = "{" + data + "}";\r
+                       \r
+                       data = eval("(" + data + ")");\r
+                       \r
+                       $.data( elem, settings.single, data );\r
+                       return data;\r
+               }\r
+       }\r
+});\r
+\r
+/**\r
+ * Returns the metadata object for the first member of the jQuery object.\r
+ *\r
+ * @name metadata\r
+ * @descr Returns element's metadata object\r
+ * @param Object opts An object contianing settings to override the defaults\r
+ * @type jQuery\r
+ * @cat Plugins/Metadata\r
+ */\r
+$.fn.metadata = function( opts ){\r
+       return $.metadata.get( this[0], opts );\r
+};\r
+\r
+})(jQuery);\r
+\r
+\r
+/**\r
+ * jQuery Validation Plugin 1.9.0\r
+\r
+ *\r
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/\r
+ * http://docs.jquery.com/Plugins/Validation\r
+ *\r
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ */\r
+\r
+/**\r
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend($.fn, {\r
+       // http://docs.jquery.com/Plugins/Validation/validate\r
+       validate: function( options ) {\r
+\r
+               // if nothing is selected, return nothing; can't chain anyway\r
+               if (!this.length) {\r
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );\r
+                       return;\r
+               }\r
+\r
+               // check if a validator for this form was already created\r
+               var validator = $.data(this[0], 'validator');\r
+               if ( validator ) {\r
+                       return validator;\r
+               }\r
+\r
+               // Add novalidate tag if HTML5.\r
+               this.attr('novalidate', 'novalidate');\r
+\r
+               validator = new $.validator( options, this[0] );\r
+               $.data(this[0], 'validator', validator);\r
+\r
+               if ( validator.settings.onsubmit ) {\r
+\r
+                       var inputsAndButtons = this.find("input, button");\r
+\r
+                       // allow suppresing validation by adding a cancel class to the submit button\r
+                       inputsAndButtons.filter(".cancel").click(function () {\r
+                               validator.cancelSubmit = true;\r
+                       });\r
+\r
+                       // when a submitHandler is used, capture the submitting button\r
+                       if (validator.settings.submitHandler) {\r
+                               inputsAndButtons.filter(":submit").click(function () {\r
+                                       validator.submitButton = this;\r
+                               });\r
+                       }\r
+\r
+                       // validate the form on submit\r
+                       this.submit( function( event ) {\r
+                               if ( validator.settings.debug )\r
+                                       // prevent form submit to be able to see console output\r
+                                       event.preventDefault();\r
+\r
+                               function handle() {\r
+                                       if ( validator.settings.submitHandler ) {\r
+                                               if (validator.submitButton) {\r
+                                                       // insert a hidden input as a replacement for the missing submit button\r
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);\r
+                                               }\r
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );\r
+                                               if (validator.submitButton) {\r
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced\r
+                                                       hidden.remove();\r
+                                               }\r
+                                               return false;\r
+                                       }\r
+                                       return true;\r
+                               }\r
+\r
+                               // prevent submit for invalid forms or custom submit handlers\r
+                               if ( validator.cancelSubmit ) {\r
+                                       validator.cancelSubmit = false;\r
+                                       return handle();\r
+                               }\r
+                               if ( validator.form() ) {\r
+                                       if ( validator.pendingRequest ) {\r
+                                               validator.formSubmitted = true;\r
+                                               return false;\r
+                                       }\r
+                                       return handle();\r
+                               } else {\r
+                                       validator.focusInvalid();\r
+                                       return false;\r
+                               }\r
+                       });\r
+               }\r
+\r
+               return validator;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/valid\r
+       valid: function() {\r
+        if ( $(this[0]).is('form')) {\r
+            return this.validate().form();\r
+        } else {\r
+            var valid = true;\r
+            var validator = $(this[0].form).validate();\r
+            this.each(function() {\r
+                               valid &= validator.element(this);\r
+            });\r
+            return valid;\r
+        }\r
+    },\r
+       // attributes: space seperated list of attributes to retrieve and remove\r
+       removeAttrs: function(attributes) {\r
+               var result = {},\r
+                       $element = this;\r
+               $.each(attributes.split(/\s/), function(index, value) {\r
+                       result[value] = $element.attr(value);\r
+                       $element.removeAttr(value);\r
+               });\r
+               return result;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/rules\r
+       rules: function(command, argument) {\r
+               var element = this[0];\r
+\r
+               if (command) {\r
+                       var settings = $.data(element.form, 'validator').settings;\r
+                       var staticRules = settings.rules;\r
+                       var existingRules = $.validator.staticRules(element);\r
+                       switch(command) {\r
+                       case "add":\r
+                               $.extend(existingRules, $.validator.normalizeRule(argument));\r
+                               staticRules[element.name] = existingRules;\r
+                               if (argument.messages)\r
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );\r
+                               break;\r
+                       case "remove":\r
+                               if (!argument) {\r
+                                       delete staticRules[element.name];\r
+                                       return existingRules;\r
+                               }\r
+                               var filtered = {};\r
+                               $.each(argument.split(/\s/), function(index, method) {\r
+                                       filtered[method] = existingRules[method];\r
+                                       delete existingRules[method];\r
+                               });\r
+                               return filtered;\r
+                       }\r
+               }\r
+\r
+               var data = $.validator.normalizeRules(\r
+               $.extend(\r
+                       {},\r
+                       $.validator.metadataRules(element),\r
+                       $.validator.classRules(element),\r
+                       $.validator.attributeRules(element),\r
+                       $.validator.staticRules(element)\r
+               ), element);\r
+\r
+               // make sure required is at front\r
+               if (data.required) {\r
+                       var param = data.required;\r
+                       delete data.required;\r
+                       data = $.extend({required: param}, data);\r
+               }\r
+\r
+               return data;\r
+       }\r
+});\r
+\r
+// Custom selectors\r
+$.extend($.expr[":"], {\r
+       // http://docs.jquery.com/Plugins/Validation/blank\r
+       blank: function(a) {return !$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/filled\r
+       filled: function(a) {return !!$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/unchecked\r
+       unchecked: function(a) {return !a.checked;}\r
+});\r
+\r
+// constructor for validator\r
+$.validator = function( options, form ) {\r
+       this.settings = $.extend( true, {}, $.validator.defaults, options );\r
+       this.currentForm = form;\r
+       this.init();\r
+};\r
+\r
+$.validator.format = function(source, params) {\r
+       if ( arguments.length == 1 )\r
+               return function() {\r
+                       var args = $.makeArray(arguments);\r
+                       args.unshift(source);\r
+                       return $.validator.format.apply( this, args );\r
+               };\r
+       if ( arguments.length > 2 && params.constructor != Array  ) {\r
+               params = $.makeArray(arguments).slice(1);\r
+       }\r
+       if ( params.constructor != Array ) {\r
+               params = [ params ];\r
+       }\r
+       $.each(params, function(i, n) {\r
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);\r
+       });\r
+       return source;\r
+};\r
+\r
+$.extend($.validator, {\r
+\r
+       defaults: {\r
+               messages: {},\r
+               groups: {},\r
+               rules: {},\r
+               errorClass: "error",\r
+               validClass: "valid",\r
+               errorElement: "label",\r
+               focusInvalid: true,\r
+               errorContainer: $( [] ),\r
+               errorLabelContainer: $( [] ),\r
+               onsubmit: true,\r
+               ignore: ":hidden",\r
+               ignoreTitle: false,\r
+               onfocusin: function(element, event) {\r
+                       this.lastActive = element;\r
+\r
+                       // hide error label and remove error class on focus if enabled\r
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {\r
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );\r
+                               this.addWrapper(this.errorsFor(element)).hide();\r
+                       }\r
+               },\r
+               onfocusout: function(element, event) {\r
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onkeyup: function(element, event) {\r
+                       if ( element.name in this.submitted || element == this.lastElement ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onclick: function(element, event) {\r
+                       // click on selects, radiobuttons and checkboxes\r
+                       if ( element.name in this.submitted )\r
+                               this.element(element);\r
+                       // or option elements, check parent select in that case\r
+                       else if (element.parentNode.name in this.submitted)\r
+                               this.element(element.parentNode);\r
+               },\r
+               highlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);\r
+                       } else {\r
+                               $(element).addClass(errorClass).removeClass(validClass);\r
+                       }\r
+               },\r
+               unhighlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);\r
+                       } else {\r
+                               $(element).removeClass(errorClass).addClass(validClass);\r
+                       }\r
+               }\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults\r
+       setDefaults: function(settings) {\r
+               $.extend( $.validator.defaults, settings );\r
+       },\r
+\r
+       messages: {\r
+               required: "This field is required.",\r
+               remote: "Please fix this field.",\r
+               email: "Please enter a valid email address.",\r
+               url: "Please enter a valid URL.",\r
+               date: "Please enter a valid date.",\r
+               dateISO: "Please enter a valid date (ISO).",\r
+               number: "Please enter a valid number.",\r
+               digits: "Please enter only digits.",\r
+               creditcard: "Please enter a valid credit card number.",\r
+               equalTo: "Please enter the same value again.",\r
+               accept: "Please enter a value with a valid extension.",\r
+               maxlength: $.validator.format("Please enter no more than {0} characters."),\r
+               minlength: $.validator.format("Please enter at least {0} characters."),\r
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),\r
+               range: $.validator.format("Please enter a value between {0} and {1}."),\r
+               max: $.validator.format("Please enter a value less than or equal to {0}."),\r
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")\r
+       },\r
+\r
+       autoCreateRanges: false,\r
+\r
+       prototype: {\r
+\r
+               init: function() {\r
+                       this.labelContainer = $(this.settings.errorLabelContainer);\r
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);\r
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );\r
+                       this.submitted = {};\r
+                       this.valueCache = {};\r
+                       this.pendingRequest = 0;\r
+                       this.pending = {};\r
+                       this.invalid = {};\r
+                       this.reset();\r
+\r
+                       var groups = (this.groups = {});\r
+                       $.each(this.settings.groups, function(key, value) {\r
+                               $.each(value.split(/\s/), function(index, name) {\r
+                                       groups[name] = key;\r
+                               });\r
+                       });\r
+                       var rules = this.settings.rules;\r
+                       $.each(rules, function(key, value) {\r
+                               rules[key] = $.validator.normalizeRule(value);\r
+                       });\r
+\r
+                       function delegate(event) {\r
+                               var validator = $.data(this[0].form, "validator"),\r
+                                       eventType = "on" + event.type.replace(/^validate/, "");\r
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);\r
+                       }\r
+                       $(this.currentForm)\r
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +\r
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +\r
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +\r
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +\r
+                                               "[type='range'], [type='color'] ",\r
+                                               "focusin focusout keyup", delegate)\r
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);\r
+\r
+                       if (this.settings.invalidHandler)\r
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/form\r
+               form: function() {\r
+                       this.checkForm();\r
+                       $.extend(this.submitted, this.errorMap);\r
+                       this.invalid = $.extend({}, this.errorMap);\r
+                       if (!this.valid())\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                       this.showErrors();\r
+                       return this.valid();\r
+               },\r
+\r
+               // 원본소스\r
+               /*\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               this.check( elements[i] );\r
+                       }\r
+                       return this.valid();\r
+               },\r
+               */\r
+\r
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {\r
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {\r
+                                               this.check( this.findByName( elements[i].name )[cnt] );\r
+                                       }\r
+                               } else {\r
+                                       this.check( elements[i] );\r
+                               }\r
+                       }\r
+                       return this.valid();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/element\r
+               element: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+                       this.lastElement = element;\r
+                       this.prepareElement( element );\r
+                       this.currentElements = $(element);\r
+                       var result = this.check( element );\r
+                       if ( result ) {\r
+                               delete this.invalid[element.name];\r
+                       } else {\r
+                               this.invalid[element.name] = true;\r
+                       }\r
+                       if ( !this.numberOfInvalids() ) {\r
+                               // Hide error containers on last error\r
+                               this.toHide = this.toHide.add( this.containers );\r
+                       }\r
+                       this.showErrors();\r
+                       return result;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors\r
+               showErrors: function(errors) {\r
+                       if(errors) {\r
+                               // add items to error list and map\r
+                               $.extend( this.errorMap, errors );\r
+                               this.errorList = [];\r
+                               for ( var name in errors ) {\r
+                                       this.errorList.push({\r
+                                               message: errors[name],\r
+                                               element: this.findByName(name)[0]\r
+                                       });\r
+                               }\r
+                               // remove items from success list\r
+                               this.successList = $.grep( this.successList, function(element) {\r
+                                       return !(element.name in errors);\r
+                               });\r
+                       }\r
+                       this.settings.showErrors\r
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )\r
+                               : this.defaultShowErrors();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm\r
+               resetForm: function() {\r
+                       if ( $.fn.resetForm )\r
+                               $( this.currentForm ).resetForm();\r
+                       this.submitted = {};\r
+                       this.lastElement = null;\r
+                       this.prepareForm();\r
+                       this.hideErrors();\r
+                       this.elements().removeClass( this.settings.errorClass );\r
+               },\r
+\r
+               numberOfInvalids: function() {\r
+                       return this.objectLength(this.invalid);\r
+               },\r
+\r
+               objectLength: function( obj ) {\r
+                       var count = 0;\r
+                       for ( var i in obj )\r
+                               count++;\r
+                       return count;\r
+               },\r
+\r
+               hideErrors: function() {\r
+                       this.addWrapper( this.toHide ).hide();\r
+               },\r
+\r
+               valid: function() {\r
+                       return this.size() == 0;\r
+               },\r
+\r
+               size: function() {\r
+                       return this.errorList.length;\r
+               },\r
+\r
+               focusInvalid: function() {\r
+                       if( this.settings.focusInvalid ) {\r
+                               try {\r
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])\r
+                                       .filter(":visible")\r
+                                       .focus()\r
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find\r
+                                       .trigger("focusin");\r
+                               } catch(e) {\r
+                                       // ignore IE throwing errors when focusing hidden elements\r
+                               }\r
+                       }\r
+               },\r
+\r
+               findLastActive: function() {\r
+                       var lastActive = this.lastActive;\r
+                       return lastActive && $.grep(this.errorList, function(n) {\r
+                               return n.element.name == lastActive.name;\r
+                       }).length == 1 && lastActive;\r
+               },\r
+\r
+               elements: function() {\r
+                       var validator = this,\r
+                               rulesCache = {};\r
+\r
+                       // select all valid inputs inside the form (no submit or reset buttons)\r
+                       return $(this.currentForm)\r
+                       .find("input, select, textarea")\r
+                       .not(":submit, :reset, :image, [disabled]")\r
+                       .not( this.settings.ignore )\r
+                       .filter(function() {\r
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);\r
+\r
+                               // select only the first element for each name, and only those with rules specified\r
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )\r
+                                       return false;\r
+\r
+                               rulesCache[this.name] = true;\r
+                               return true;\r
+                       });\r
+               },\r
+\r
+               clean: function( selector ) {\r
+                       return $( selector )[0];\r
+               },\r
+\r
+               errors: function() {\r
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );\r
+               },\r
+\r
+               reset: function() {\r
+                       this.successList = [];\r
+                       this.errorList = [];\r
+                       this.errorMap = {};\r
+                       this.toShow = $([]);\r
+                       this.toHide = $([]);\r
+                       this.currentElements = $([]);\r
+               },\r
+\r
+               prepareForm: function() {\r
+                       this.reset();\r
+                       this.toHide = this.errors().add( this.containers );\r
+               },\r
+\r
+               prepareElement: function( element ) {\r
+                       this.reset();\r
+                       this.toHide = this.errorsFor(element);\r
+               },\r
+\r
+               check: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+\r
+                       var rules = $(element).rules();\r
+                       var dependencyMismatch = false;\r
+                       for (var method in rules ) {\r
+                               var rule = { method: method, parameters: rules[method] };\r
+                               try {\r
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );\r
+\r
+                                       // if a method indicates that the field is optional and therefore valid,\r
+                                       // don't mark it as valid when there are no other rules\r
+                                       if ( result == "dependency-mismatch" ) {\r
+                                               dependencyMismatch = true;\r
+                                               continue;\r
+                                       }\r
+                                       dependencyMismatch = false;\r
+\r
+                                       if ( result == "pending" ) {\r
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );\r
+                                               return;\r
+                                       }\r
+\r
+                                       if( !result ) {\r
+                                               this.formatAndAdd( element, rule );\r
+                                               return false;\r
+                                       }\r
+                               } catch(e) {\r
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id\r
+                                                + ", check the '" + rule.method + "' method", e);\r
+                                       throw e;\r
+                               }\r
+                       }\r
+                       if (dependencyMismatch)\r
+                               return;\r
+                       if ( this.objectLength(rules) )\r
+                               this.successList.push(element);\r
+                       return true;\r
+               },\r
+\r
+               // return the custom message for the given element and validation method\r
+               // specified in the element's "messages" metadata\r
+               customMetaMessage: function(element, method) {\r
+                       if (!$.metadata)\r
+                               return;\r
+\r
+                       var meta = this.settings.meta\r
+                               ? $(element).metadata()[this.settings.meta]\r
+                               : $(element).metadata();\r
+\r
+                       return meta && meta.messages && meta.messages[method];\r
+               },\r
+\r
+               // return the custom message for the given element name and validation method\r
+               customMessage: function( name, method ) {\r
+                       var m = this.settings.messages[name];\r
+                       return m && (m.constructor == String\r
+                               ? m\r
+                               : m[method]);\r
+               },\r
+\r
+               // return the first defined argument, allowing empty strings\r
+               findDefined: function() {\r
+                       for(var i = 0; i < arguments.length; i++) {\r
+                               if (arguments[i] !== undefined)\r
+                                       return arguments[i];\r
+                       }\r
+                       return undefined;\r
+               },\r
+\r
+               defaultMessage: function( element, method) {\r
+                       return this.findDefined(\r
+                               this.customMessage( element.name, method ),\r
+                               this.customMetaMessage( element, method ),\r
+                               // title is never undefined, so handle empty string as undefined\r
+                               !this.settings.ignoreTitle && element.title || undefined,\r
+                               $.validator.messages[method],\r
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"\r
+                       );\r
+               },\r
+\r
+               formatAndAdd: function( element, rule ) {\r
+                       var message = this.defaultMessage( element, rule.method ),\r
+                               theregex = /\$?\{(\d+)\}/g;\r
+                       if ( typeof message == "function" ) {\r
+                               message = message.call(this, rule.parameters, element);\r
+                       } else if (theregex.test(message)) {\r
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);\r
+                       }\r
+                       this.errorList.push({\r
+                               message: message,\r
+                               element: element\r
+                       });\r
+\r
+                       this.errorMap[element.name] = message;\r
+                       this.submitted[element.name] = message;\r
+               },\r
+\r
+               addWrapper: function(toToggle) {\r
+                       if ( this.settings.wrapper )\r
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );\r
+                       return toToggle;\r
+               },\r
+\r
+               defaultShowErrors: function() {\r
+                       for ( var i = 0; this.errorList[i]; i++ ) {\r
+                               var error = this.errorList[i];\r
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );\r
+                               this.showLabel( error.element, error.message );\r
+                       }\r
+                       if( this.errorList.length ) {\r
+                               this.toShow = this.toShow.add( this.containers );\r
+                       }\r
+                       if (this.settings.success) {\r
+                               for ( var i = 0; this.successList[i]; i++ ) {\r
+                                       this.showLabel( this.successList[i] );\r
+                               }\r
+                       }\r
+                       if (this.settings.unhighlight) {\r
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {\r
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );\r
+                               }\r
+                       }\r
+                       this.toHide = this.toHide.not( this.toShow );\r
+                       this.hideErrors();\r
+                       this.addWrapper( this.toShow ).show();\r
+               },\r
+\r
+               validElements: function() {\r
+                       return this.currentElements.not(this.invalidElements());\r
+               },\r
+\r
+               invalidElements: function() {\r
+                       return $(this.errorList).map(function() {\r
+                               return this.element;\r
+                       });\r
+               },\r
+\r
+               showLabel: function(element, message) {\r
+                       var label = this.errorsFor( element );\r
+                       if ( label.length ) {\r
+                               // refresh error/success class\r
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );\r
+\r
+                               // check if we have a generated label, replace the message then\r
+                               label.attr("generated") && label.html(message);\r
+                       } else {\r
+                               // create label\r
+                               label = $("<" + this.settings.errorElement + "/>")\r
+                                       .attr({"for":  this.idOrName(element), generated: true})\r
+                                       .addClass(this.settings.errorClass)\r
+                                       .html(message || "");\r
+                               if ( this.settings.wrapper ) {\r
+                                       // make sure the element is visible, even in IE\r
+                                       // actually showing the wrapped element is handled elsewhere\r
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();\r
+                               }\r
+                               if ( !this.labelContainer.append(label).length )\r
+                                       this.settings.errorPlacement\r
+                                               ? this.settings.errorPlacement(label, $(element) )\r
+                                               : label.insertAfter(element);\r
+                       }\r
+                       if ( !message && this.settings.success ) {\r
+                               label.text("");\r
+                               typeof this.settings.success == "string"\r
+                                       ? label.addClass( this.settings.success )\r
+                                       : this.settings.success( label );\r
+                       }\r
+                       this.toShow = this.toShow.add(label);\r
+               },\r
+\r
+               errorsFor: function(element) {\r
+                       var name = this.idOrName(element);\r
+               return this.errors().filter(function() {\r
+                               return $(this).attr('for') == name;\r
+                       });\r
+               },\r
+\r
+               idOrName: function(element) {\r
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);\r
+               },\r
+\r
+               validationTargetFor: function(element) {\r
+                       // if radio/checkbox, validate first element in group instead\r
+                       if (this.checkable(element)) {\r
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];\r
+                       }\r
+                       return element;\r
+               },\r
+\r
+               checkable: function( element ) {\r
+                       return /radio|checkbox/i.test(element.type);\r
+               },\r
+\r
+               findByName: function( name ) {\r
+                       // select by name and filter by form for performance over form.find("[name=...]")\r
+                       var form = this.currentForm;\r
+                       return $(document.getElementsByName(name)).map(function(index, element) {\r
+                               return element.form == form && element.name == name && element  || null;\r
+                       });\r
+               },\r
+\r
+               getLength: function(value, element) {\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               return $("option:selected", element).length;\r
+                       case 'input':\r
+                               if( this.checkable( element) )\r
+                                       return this.findByName(element.name).filter(':checked').length;\r
+                       }\r
+                       return value.length;\r
+               },\r
+\r
+               depend: function(param, element) {\r
+                       return this.dependTypes[typeof param]\r
+                               ? this.dependTypes[typeof param](param, element)\r
+                               : true;\r
+               },\r
+\r
+               dependTypes: {\r
+                       "boolean": function(param, element) {\r
+                               return param;\r
+                       },\r
+                       "string": function(param, element) {\r
+                               return !!$(param, element.form).length;\r
+                       },\r
+                       "function": function(param, element) {\r
+                               return param(element);\r
+                       }\r
+               },\r
+\r
+               optional: function(element) {\r
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";\r
+               },\r
+\r
+               startRequest: function(element) {\r
+                       if (!this.pending[element.name]) {\r
+                               this.pendingRequest++;\r
+                               this.pending[element.name] = true;\r
+                       }\r
+               },\r
+\r
+               stopRequest: function(element, valid) {\r
+                       this.pendingRequest--;\r
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0\r
+                       if (this.pendingRequest < 0)\r
+                               this.pendingRequest = 0;\r
+                       delete this.pending[element.name];\r
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {\r
+                               $(this.currentForm).submit();\r
+                               this.formSubmitted = false;\r
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                               this.formSubmitted = false;\r
+                       }\r
+               },\r
+\r
+               previousValue: function(element) {\r
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {\r
+                               old: null,\r
+                               valid: true,\r
+                               message: this.defaultMessage( element, "remote" )\r
+                       });\r
+               }\r
+\r
+       },\r
+\r
+       classRuleSettings: {\r
+               required: {required: true},\r
+               email: {email: true},\r
+               url: {url: true},\r
+               date: {date: true},\r
+               dateISO: {dateISO: true},\r
+               dateDE: {dateDE: true},\r
+               number: {number: true},\r
+               numberDE: {numberDE: true},\r
+               digits: {digits: true},\r
+               creditcard: {creditcard: true}\r
+       },\r
+\r
+       addClassRules: function(className, rules) {\r
+               className.constructor == String ?\r
+                       this.classRuleSettings[className] = rules :\r
+                       $.extend(this.classRuleSettings, className);\r
+       },\r
+\r
+       classRules: function(element) {\r
+               var rules = {};\r
+               var classes = $(element).attr('class');\r
+               classes && $.each(classes.split(' '), function() {\r
+                       if (this in $.validator.classRuleSettings) {\r
+                               $.extend(rules, $.validator.classRuleSettings[this]);\r
+                       }\r
+               });\r
+               return rules;\r
+       },\r
+\r
+       attributeRules: function(element) {\r
+               var rules = {};\r
+               var $element = $(element);\r
+\r
+               for (var method in $.validator.methods) {\r
+                       var value;\r
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required\r
+                       if (method === 'required' && typeof $.fn.prop === 'function') {\r
+                               value = $element.prop(method);\r
+                       } else {\r
+                               value = $element.attr(method);\r
+                       }\r
+                       if (value) {\r
+                               rules[method] = value;\r
+                       } else if ($element[0].getAttribute("type") === method) {\r
+                               rules[method] = true;\r
+                       }\r
+               }\r
+\r
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs\r
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {\r
+                       delete rules.maxlength;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       metadataRules: function(element) {\r
+               if (!$.metadata) return {};\r
+\r
+               var meta = $.data(element.form, 'validator').settings.meta;\r
+               return meta ?\r
+                       $(element).metadata()[meta] :\r
+                       $(element).metadata();\r
+       },\r
+\r
+       staticRules: function(element) {\r
+               var rules = {};\r
+               var validator = $.data(element.form, 'validator');\r
+               if (validator.settings.rules) {\r
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};\r
+               }\r
+               return rules;\r
+       },\r
+\r
+       normalizeRules: function(rules, element) {\r
+               // handle dependency check\r
+               $.each(rules, function(prop, val) {\r
+                       // ignore rule when param is explicitly false, eg. required:false\r
+                       if (val === false) {\r
+                               delete rules[prop];\r
+                               return;\r
+                       }\r
+                       if (val.param || val.depends) {\r
+                               var keepRule = true;\r
+                               switch (typeof val.depends) {\r
+                                       case "string":\r
+                                               keepRule = !!$(val.depends, element.form).length;\r
+                                               break;\r
+                                       case "function":\r
+                                               keepRule = val.depends.call(element, element);\r
+                                               break;\r
+                               }\r
+                               if (keepRule) {\r
+                                       rules[prop] = val.param !== undefined ? val.param : true;\r
+                               } else {\r
+                                       delete rules[prop];\r
+                               }\r
+                       }\r
+               });\r
+\r
+               // evaluate parameters\r
+               $.each(rules, function(rule, parameter) {\r
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;\r
+               });\r
+\r
+               // clean number parameters\r
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = Number(rules[this]);\r
+                       }\r
+               });\r
+               $.each(['rangelength', 'range'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];\r
+                       }\r
+               });\r
+\r
+               if ($.validator.autoCreateRanges) {\r
+                       // auto-create ranges\r
+                       if (rules.min && rules.max) {\r
+                               rules.range = [rules.min, rules.max];\r
+                               delete rules.min;\r
+                               delete rules.max;\r
+                       }\r
+                       if (rules.minlength && rules.maxlength) {\r
+                               rules.rangelength = [rules.minlength, rules.maxlength];\r
+                               delete rules.minlength;\r
+                               delete rules.maxlength;\r
+                       }\r
+               }\r
+\r
+               // To support custom messages in metadata ignore rule methods titled "messages"\r
+               if (rules.messages) {\r
+                       delete rules.messages;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}\r
+       normalizeRule: function(data) {\r
+               if( typeof data == "string" ) {\r
+                       var transformed = {};\r
+                       $.each(data.split(/\s/), function() {\r
+                               transformed[this] = true;\r
+                       });\r
+                       data = transformed;\r
+               }\r
+               return data;\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod\r
+       addMethod: function(name, method, message) {\r
+               $.validator.methods[name] = method;\r
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];\r
+               if (method.length < 3) {\r
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));\r
+               }\r
+       },\r
+\r
+       methods: {\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/required\r
+               required: function(value, element, param) {\r
+                       // check if dependency is met\r
+                       if ( !this.depend(param, element) )\r
+                               return "dependency-mismatch";\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               // could be an array for select-multiple or a string, both are fine this way\r
+                               var val = $(element).val();\r
+                               return val && val.length > 0;\r
+                       case 'input':\r
+                               if ( this.checkable(element) )\r
+                                       return this.getLength(value, element) > 0;\r
+                       default:\r
+                               return $.trim(value).length > 0;\r
+                       }\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote\r
+               remote: function(value, element, param) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+\r
+                       var previous = this.previousValue(element);\r
+                       if (!this.settings.messages[element.name] )\r
+                               this.settings.messages[element.name] = {};\r
+                       previous.originalMessage = this.settings.messages[element.name].remote;\r
+                       this.settings.messages[element.name].remote = previous.message;\r
+\r
+                       param = typeof param == "string" && {url:param} || param;\r
+\r
+                       if ( this.pending[element.name] ) {\r
+                               return "pending";\r
+                       }\r
+                       if ( previous.old === value ) {\r
+                               return previous.valid;\r
+                       }\r
+\r
+                       previous.old = value;\r
+                       var validator = this;\r
+                       this.startRequest(element);\r
+                       var data = {};\r
+                       data[element.name] = value;\r
+                       $.ajax($.extend(true, {\r
+                               url: param,\r
+                               mode: "abort",\r
+                               port: "validate" + element.name,\r
+                               dataType: "json",\r
+                               data: data,\r
+                               success: function(response) {\r
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;\r
+                                       var valid = response === true;\r
+                                       if ( valid ) {\r
+                                               var submitted = validator.formSubmitted;\r
+                                               validator.prepareElement(element);\r
+                                               validator.formSubmitted = submitted;\r
+                                               validator.successList.push(element);\r
+                                               validator.showErrors();\r
+                                       } else {\r
+                                               var errors = {};\r
+                                               var message = response || validator.defaultMessage( element, "remote" );\r
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;\r
+                                               validator.showErrors(errors);\r
+                                       }\r
+                                       previous.valid = valid;\r
+                                       validator.stopRequest(element, valid);\r
+                               }\r
+                       }, param));\r
+                       return "pending";\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength\r
+               minlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength\r
+               maxlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength\r
+               rangelength: function(value, element, param) {\r
+                       var length = this.getLength($.trim(value), element);\r
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/min\r
+               min: function( value, element, param ) {\r
+                       return this.optional(element) || value >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/max\r
+               max: function( value, element, param ) {\r
+                       return this.optional(element) || value <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/range\r
+               range: function( value, element, param ) {\r
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/email\r
+               email: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/\r
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/url\r
+               url: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/\r
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/date\r
+               date: function(value, element) {\r
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO\r
+               dateISO: function(value, element) {\r
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/number\r
+               number: function(value, element) {\r
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits\r
+               digits: function(value, element) {\r
+                       return this.optional(element) || /^\d+$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard\r
+               // based on http://en.wikipedia.org/wiki/Luhn\r
+               creditcard: function(value, element) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+                       // accept only spaces, digits and dashes\r
+                       if (/[^0-9 -]+/.test(value))\r
+                               return false;\r
+                       var nCheck = 0,\r
+                               nDigit = 0,\r
+                               bEven = false;\r
+\r
+                       value = value.replace(/\D/g, "");\r
+\r
+                       for (var n = value.length - 1; n >= 0; n--) {\r
+                               var cDigit = value.charAt(n);\r
+                               var nDigit = parseInt(cDigit, 10);\r
+                               if (bEven) {\r
+                                       if ((nDigit *= 2) > 9)\r
+                                               nDigit -= 9;\r
+                               }\r
+                               nCheck += nDigit;\r
+                               bEven = !bEven;\r
+                       }\r
+\r
+                       return (nCheck % 10) == 0;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept\r
+               accept: function(value, element, param) {\r
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";\r
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo\r
+               equalTo: function(value, element, param) {\r
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated\r
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead\r
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {\r
+                               $(element).valid();\r
+                       });\r
+                       return value == target.val();\r
+               }\r
+\r
+       }\r
+\r
+});\r
+\r
+// deprecated, use $.validator.format instead\r
+$.format = $.validator.format;\r
+\r
+})(jQuery);\r
+\r
+// ajax mode: abort\r
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});\r
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()\r
+;(function($) {\r
+       var pendingRequests = {};\r
+       // Use a prefilter if available (1.5+)\r
+       if ( $.ajaxPrefilter ) {\r
+               $.ajaxPrefilter(function(settings, _, xhr) {\r
+                       var port = settings.port;\r
+                       if (settings.mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               pendingRequests[port] = xhr;\r
+                       }\r
+               });\r
+       } else {\r
+               // Proxy ajax\r
+               var ajax = $.ajax;\r
+               $.ajax = function(settings) {\r
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,\r
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;\r
+                       if (mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               return (pendingRequests[port] = ajax.apply(this, arguments));\r
+                       }\r
+                       return ajax.apply(this, arguments);\r
+               };\r
+       }\r
+})(jQuery);\r
+\r
+// provides cross-browser focusin and focusout events\r
+// IE has native support, in other browsers, use event caputuring (neither bubbles)\r
+\r
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation\r
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target\r
+;(function($) {\r
+       // only implement if not provided by jQuery core (since 1.4)\r
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs\r
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {\r
+               $.each({\r
+                       focus: 'focusin',\r
+                       blur: 'focusout'\r
+               }, function( original, fix ){\r
+                       $.event.special[fix] = {\r
+                               setup:function() {\r
+                                       this.addEventListener( original, handler, true );\r
+                               },\r
+                               teardown:function() {\r
+                                       this.removeEventListener( original, handler, true );\r
+                               },\r
+                               handler: function(e) {\r
+                                       arguments[0] = $.event.fix(e);\r
+                                       arguments[0].type = fix;\r
+                                       return $.event.handle.apply(this, arguments);\r
+                               }\r
+                       };\r
+                       function handler(e) {\r
+                               e = $.event.fix(e);\r
+                               e.type = fix;\r
+                               return $.event.handle.call(this, e);\r
+                       }\r
+               });\r
+       };\r
+       $.extend($.fn, {\r
+               validateDelegate: function(delegate, type, handler) {\r
+                       return this.bind(type, function(event) {\r
+                               var target = $(event.target);\r
+                               if (target.is(delegate)) {\r
+                                       return handler.apply(target, arguments);\r
+                               }\r
+                       });\r
+               }\r
+       });\r
+})(jQuery);\r
+\r
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)\r
+ * Licensed under the MIT License (LICENSE.txt).\r
+ *\r
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.\r
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.\r
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY\r
+ *\r
+ * Version: 3.0.6\r
+ * \r
+ * Requires: 1.2.2+\r
+ */\r
+\r
+(function($) {\r
+\r
+var types = ['DOMMouseScroll', 'mousewheel'];\r
+\r
+if ($.event.fixHooks) {\r
+    for ( var i=types.length; i; ) {\r
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;\r
+    }\r
+}\r
+\r
+$.event.special.mousewheel = {\r
+    setup: function() {\r
+        if ( this.addEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.addEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = handler;\r
+        }\r
+    },\r
+    \r
+    teardown: function() {\r
+        if ( this.removeEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.removeEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = null;\r
+        }\r
+    }\r
+};\r
+\r
+$.fn.extend({\r
+    mousewheel: function(fn) {\r
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");\r
+    },\r
+    \r
+    unmousewheel: function(fn) {\r
+        return this.unbind("mousewheel", fn);\r
+    }\r
+});\r
+\r
+\r
+function handler(event) {\r
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;\r
+    event = $.event.fix(orgEvent);\r
+    event.type = "mousewheel";\r
+    \r
+    // Old school scrollwheel delta\r
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }\r
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }\r
+    \r
+    // New school multidimensional scroll (touchpads) deltas\r
+    deltaY = delta;\r
+    \r
+    // Gecko\r
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {\r
+        deltaY = 0;\r
+        deltaX = -1*delta;\r
+    }\r
+    \r
+    // Webkit\r
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }\r
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }\r
+    \r
+    // Add event and delta to the front of the arguments\r
+    args.unshift(event, delta, deltaX, deltaY);\r
+    \r
+    return ($.event.dispatch || $.event.handle).apply(this, args);\r
+}\r
+\r
+})(jQuery);\r
+\r
+/*\r
+ * jScrollPane - v2.0.0beta12 - 2012-07-24\r
+ * http://jscrollpane.kelvinluck.com/\r
+ *\r
+ * Copyright (c) 2010 Kelvin Luck\r
+ * Dual licensed under the MIT and GPL licenses.\r
+ */\r
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);\r
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)\r
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()\r
 })}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.devtools/html/scripts/jquery.zclip.min.js b/org.tizen.devtools/html/scripts/jquery.zclip.min.js
index 51471a1..3548cc2 100644 (file)
--- a/org.tizen.devtools/html/scripts/jquery.zclip.min.js
+++ b/org.tizen.devtools/html/scripts/jquery.zclip.min.js
@@ -1,12 +1,12 @@
-/*
- * zClip :: jQuery ZeroClipboard v1.1.1
- * http://steamdev.com/zclip
- *
- * Copyright 2011, SteamDev
- * Released under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- *
- * Date: Wed Jun 01, 2011
- */
-
+/*\r
+ * zClip :: jQuery ZeroClipboard v1.1.1\r
+ * http://steamdev.com/zclip\r
+ *\r
+ * Copyright 2011, SteamDev\r
+ * Released under the MIT license.\r
+ * http://www.opensource.org/licenses/mit-license.php\r
+ *\r
+ * Date: Wed Jun 01, 2011\r
+ */\r
+\r
 (function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.devtools/html/scripts/navi.js b/org.tizen.devtools/html/scripts/navi.js
index badc738..e4569c3 100644 (file)
--- a/org.tizen.devtools/html/scripts/navi.js
+++ b/org.tizen.devtools/html/scripts/navi.js
@@ -1,192 +1,192 @@
-//<![CDATA[
-    var staticURL = "http://img-developer.samsung.com";
-       var sslCall = "";
-
-       if('' !== 'N') {
-               var locationStr = location.href;
-               if(locationStr.indexOf("https://") > -1) {
-                       location.href = "http://" + locationStr.substring(8);
-               }     
-    }
-
-//     if( typeof($) === function ) {
-               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
-               //? ??? ?? ?? ??? ?? ?? ???.
-//     }
-    $SD.pagination.alt = {
-               first:"go first",
-               prev:"go prev",
-               next:"go next",
-               last:"go last"
-    };
-    $(document).ready(function(){
-       var myVar;
-           topSearchInit();//top search ??
-           $('#searchTop').attr("autocomplete","off");
-           var searchingBoolean = false;
-           
-           var topSearchChange = function(){
-               
-               if (searchingBoolean) return;
-               
-                       var searchInput = $('#searchTop').val();
-                       
-                       if($('#searchTop').val() != ""){
-                               $("#topAutocomplete").hide();
-                               searchingBoolean = true;
-                               
-                               var jsonData = {
-                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
-                                               async : true,
-                                               data : { searchInput : searchInput},
-                                               success : function(data){
-                                                       if (searchInput == $('#searchTop').val()){
-                                                               var autoComplete = data.kwdNm;
-                                                               var tmpHtml = "";
-                                                               
-                                                               if (autoComplete.length > 0){
-                                                                       $('#topAutocomplete').children().remove();
-                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
-                                                                       $.each(autoComplete, function(i, item){
-                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
-                                                                               a.data('keyword', item.kwdNm);
-                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
-                                                                       });
-                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
-                                                                               if(e.which == 9 && e.shiftKey) {
-                                                                                       return true;
-                                                                               }
-                                                                               
-                                                                               if(e.which == 9) {
-                                                                                       e.preventDefault();
-                                                                                       $('#topAutocomplete').hide();   
-                                                                                       setTimeout(function() {
-                                                                                               $("#searchTopBtn").focus();
-                                                                                       }, 1);
-                                                                               }
-                                                                               
-                                                                       });
-                                                                       $("#searchTopBtn").off("focusout", function(e) {});
-                                                                   $("#searchTopBtn").on("focusout", function(e) {
-                                                                               $('#topAutocomplete').hide();
-                                                                       });
-                                                               }else{
-                                                                       $('#topAutocomplete').children().remove();
-                                                               }
-                                                               if($('#searchTop').val() == ""){
-                                                                       $("#topAutocomplete").hide();
-                                                                       searchingBoolean = false;
-                                                                       return;
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               searchingBoolean = false;
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                               if (autoComplete.length == 0){
-                                                                       $("#topAutocomplete").hide();
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               $("#topAutocomplete").show();
-                                                                               var $searchList = $("#topAutocomplete").find('ul');
-                                                                               var hei = $searchList.outerHeight();
-                                                                               if(hei>180){
-                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
-                                                                               }
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                       }else{
-                                                               searchingBoolean = false;
-                                                               topSearchChange();
-                                                       }
-                                               },
-                                               error : function() {searchingBoolean = false;}
-                                               
-                               };
-                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
-                               $SD.ajax.get(jsonData);
-                               searchingBoolean = false;
-                       }
-                       
-                       //console.log("/search/autoComplete.do end");
-                       //console.groupEnd();
-               };
-               
-               $('#searchTop').keyup(function(e){
-                       if($('#searchTop').val() == ""){
-                               $('#topAutocomplete').children().remove();
-                               $("#topAutocomplete").hide();
-                       }else{
-                               if(e.which == 13){
-                                       search();
-                               }else{
-                                       topSearchChange();
-                               }
-                       }
-               });
-               
-               var search = function(){
-                       if($.trim($('#searchTop').val()) == ""){
-                               alert('Search keyword is required.');
-                       }else{
-                               $('#topSearchForm').submit();
-                       }
-               };
-               $("#topAutocomplete").on('mousedown','ul li a', function(e){
-                       e.preventDefault();
-                       var keyword = $(this).data('keyword');
-                       $("#searchTop").val(keyword);
-                       $('#topSearchForm').submit();
-               });
-               
-               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
-                       if(e.which == 13) {
-                               e.preventDefault();
-                               var keyword = $(this).data('keyword');
-                               $("#searchTop").val(keyword);
-                               $('#topSearchForm').submit();                   
-                       }
-               });
-               
-               $('#searchTopBtn').click(function(e){
-                       search();       
-               });  
-    });
-    
-    function topSearchEnter(){
-       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
-               alert('Search keyword is required.');
-               return false;
-       }else{
-               return true;
-       }
-    }
-
-/* Tracking Code TOTAL */
-               var _gaq = _gaq || [];
-               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
-               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
-               _gaq.push(['_setAccount', 'UA-6892706-3']);
-               _gaq.push(['_setDomainName', 'samsung.com']);
-               _gaq.push(['_setAllowLinker', true]);
-               _gaq.push(['_trackPageview']);
-               (function() {
-                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-               })();
-       
-               <!--// Tracking Code 1 -->
-                       var _gaq = _gaq || [];
-                       _gaq.push(['_setAccount', 'UA-6892706-4']);
-                       _gaq.push(['_trackPageview']);
-                       (function() {
-                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-                       })();
+//<![CDATA[\r
+    var staticURL = "http://img-developer.samsung.com";\r
+       var sslCall = "";\r
+\r
+       if('' !== 'N') {\r
+               var locationStr = location.href;\r
+               if(locationStr.indexOf("https://") > -1) {\r
+                       location.href = "http://" + locationStr.substring(8);\r
+               }     \r
+    }\r
+\r
+//     if( typeof($) === function ) {\r
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.\r
+               //? ??? ?? ?? ??? ?? ?? ???.\r
+//     }\r
+    $SD.pagination.alt = {\r
+               first:"go first",\r
+               prev:"go prev",\r
+               next:"go next",\r
+               last:"go last"\r
+    };\r
+    $(document).ready(function(){\r
+       var myVar;\r
+           topSearchInit();//top search ??\r
+           $('#searchTop').attr("autocomplete","off");\r
+           var searchingBoolean = false;\r
+           \r
+           var topSearchChange = function(){\r
+               \r
+               if (searchingBoolean) return;\r
+               \r
+                       var searchInput = $('#searchTop').val();\r
+                       \r
+                       if($('#searchTop').val() != ""){\r
+                               $("#topAutocomplete").hide();\r
+                               searchingBoolean = true;\r
+                               \r
+                               var jsonData = {\r
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",\r
+                                               async : true,\r
+                                               data : { searchInput : searchInput},\r
+                                               success : function(data){\r
+                                                       if (searchInput == $('#searchTop').val()){\r
+                                                               var autoComplete = data.kwdNm;\r
+                                                               var tmpHtml = "";\r
+                                                               \r
+                                                               if (autoComplete.length > 0){\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));\r
+                                                                       $.each(autoComplete, function(i, item){\r
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");\r
+                                                                               a.data('keyword', item.kwdNm);\r
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));\r
+                                                                       });\r
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {\r
+                                                                               if(e.which == 9 && e.shiftKey) {\r
+                                                                                       return true;\r
+                                                                               }\r
+                                                                               \r
+                                                                               if(e.which == 9) {\r
+                                                                                       e.preventDefault();\r
+                                                                                       $('#topAutocomplete').hide();   \r
+                                                                                       setTimeout(function() {\r
+                                                                                               $("#searchTopBtn").focus();\r
+                                                                                       }, 1);\r
+                                                                               }\r
+                                                                               \r
+                                                                       });\r
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});\r
+                                                                   $("#searchTopBtn").on("focusout", function(e) {\r
+                                                                               $('#topAutocomplete').hide();\r
+                                                                       });\r
+                                                               }else{\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                               }\r
+                                                               if($('#searchTop').val() == ""){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                                       searchingBoolean = false;\r
+                                                                       return;\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               searchingBoolean = false;\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                               if (autoComplete.length == 0){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               $("#topAutocomplete").show();\r
+                                                                               var $searchList = $("#topAutocomplete").find('ul');\r
+                                                                               var hei = $searchList.outerHeight();\r
+                                                                               if(hei>180){\r
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});\r
+                                                                               }\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                       }else{\r
+                                                               searchingBoolean = false;\r
+                                                               topSearchChange();\r
+                                                       }\r
+                                               },\r
+                                               error : function() {searchingBoolean = false;}\r
+                                               \r
+                               };\r
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);\r
+                               $SD.ajax.get(jsonData);\r
+                               searchingBoolean = false;\r
+                       }\r
+                       \r
+                       //console.log("/search/autoComplete.do end");\r
+                       //console.groupEnd();\r
+               };\r
+               \r
+               $('#searchTop').keyup(function(e){\r
+                       if($('#searchTop').val() == ""){\r
+                               $('#topAutocomplete').children().remove();\r
+                               $("#topAutocomplete").hide();\r
+                       }else{\r
+                               if(e.which == 13){\r
+                                       search();\r
+                               }else{\r
+                                       topSearchChange();\r
+                               }\r
+                       }\r
+               });\r
+               \r
+               var search = function(){\r
+                       if($.trim($('#searchTop').val()) == ""){\r
+                               alert('Search keyword is required.');\r
+                       }else{\r
+                               $('#topSearchForm').submit();\r
+                       }\r
+               };\r
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){\r
+                       e.preventDefault();\r
+                       var keyword = $(this).data('keyword');\r
+                       $("#searchTop").val(keyword);\r
+                       $('#topSearchForm').submit();\r
+               });\r
+               \r
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){\r
+                       if(e.which == 13) {\r
+                               e.preventDefault();\r
+                               var keyword = $(this).data('keyword');\r
+                               $("#searchTop").val(keyword);\r
+                               $('#topSearchForm').submit();                   \r
+                       }\r
+               });\r
+               \r
+               $('#searchTopBtn').click(function(e){\r
+                       search();       \r
+               });  \r
+    });\r
+    \r
+    function topSearchEnter(){\r
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){\r
+               alert('Search keyword is required.');\r
+               return false;\r
+       }else{\r
+               return true;\r
+       }\r
+    }\r
+\r
+/* Tracking Code TOTAL */\r
+               var _gaq = _gaq || [];\r
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';\r
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);\r
+               _gaq.push(['_setAccount', 'UA-6892706-3']);\r
+               _gaq.push(['_setDomainName', 'samsung.com']);\r
+               _gaq.push(['_setAllowLinker', true]);\r
+               _gaq.push(['_trackPageview']);\r
+               (function() {\r
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+               })();\r
+       \r
+               <!--// Tracking Code 1 -->\r
+                       var _gaq = _gaq || [];\r
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);\r
+                       _gaq.push(['_trackPageview']);\r
+                       (function() {\r
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+                       })();\r
diff --git a/org.tizen.devtools/html/scripts/search.js b/org.tizen.devtools/html/scripts/search.js
index d1ae5ad..a67a795 100644 (file)
--- a/org.tizen.devtools/html/scripts/search.js
+++ b/org.tizen.devtools/html/scripts/search.js
@@ -1,168 +1,168 @@
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
- */
-function searchInit()
-{
-       var focusTarget = "input";
-
-       //$("#autocomplete").hide();
-
-       //$("#searchInput").bind("keydown", checkSearchText);
-       
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $("#autocomplete").bind("mouseleave",function(){
-               $(this).hide();
-               $("#btnDropdown").removeClass("dropdownoff");
-               $("#btnDropdown").addClass("dropdown");         
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       //$(".autocomplete").css("visibility", "visible");
-                       $("#autocomplete").show();
-                       
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-               }
-               else{
-                       //$(".autocomplete").css("visibility", "hidden");
-                       $("#autocomplete").hide();
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
-
-
-
-function topSearchInit()
-{
-       var focusTarget = "input";
-
-       //$("#searchTop").bind("keydown", checkSearchText);
-       
-       $("#searchTop").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {       
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchTop" ).focusin( function()   {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchTop").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".topAutocomplete").css("visibility", "visible");
-               }else{
-                       $(".topAutocomplete").css("visibility", "hidden");
-                       $("#topAutocomplete").hide();
-               }
-       }
-}
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+ */\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#autocomplete").hide();\r
+\r
+       //$("#searchInput").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $("#autocomplete").bind("mouseleave",function(){\r
+               $(this).hide();\r
+               $("#btnDropdown").removeClass("dropdownoff");\r
+               $("#btnDropdown").addClass("dropdown");         \r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       //$(".autocomplete").css("visibility", "visible");\r
+                       $("#autocomplete").show();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+               }\r
+               else{\r
+                       //$(".autocomplete").css("visibility", "hidden");\r
+                       $("#autocomplete").hide();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+\r
+\r
+\r
+function topSearchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#searchTop").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchTop").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {       \r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchTop" ).focusin( function()   {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchTop").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".topAutocomplete").css("visibility", "visible");\r
+               }else{\r
+                       $(".topAutocomplete").css("visibility", "hidden");\r
+                       $("#topAutocomplete").hide();\r
+               }\r
+       }\r
+}\r
diff --git a/org.tizen.devtools/html/scripts/showhide.js b/org.tizen.devtools/html/scripts/showhide.js
index 2e85407..b882d14 100644 (file)
--- a/org.tizen.devtools/html/scripts/showhide.js
+++ b/org.tizen.devtools/html/scripts/showhide.js
@@ -1,204 +1,204 @@
-/*all Show Hide devicespecs List*/
-if($('div#contents').find('.devicespecs-util').length){
-var self = $('div#contents').find('.devicespecs-util');
-
-$('.showA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-var me = $(this);
-var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-if ( !me.next().is(':visible') ){
-       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-       me.find('em').text('Hide');
-       me.next().show();
-}
-});
-return false;
-})
-$('.hideA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-
-       var me = $(this);
-       var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-       if ( me.next().is(':visible') ){
-               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-               me.find('em').text('Show');
-               me.next().hide();
-       }
-                                       
-});
-return false;
-})
-}      
-
-/*toggle devicespecs List*/
-if($('div#contents').find('.devicespec-tit').length){
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-$('a', self).bind ("click", function(){
-       var idx = $('.devicespec-tit a').index(this);
-
-       if ( $(this).parent().parent().next().is(':visible') ){
-               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-               self.find('em').text('Show');
-               self.next().hide();
-
-               return false;
-       }else{
-               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-               self.find('em').text('Hide');
-
-               self.next().show();
-
-               return false;
-       }
-
-});
-
-});
-}
-
-$('ul.devicespecifications li div.devicespec-con').hide();
-
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-var arrow =  $('a', self);
-
-if(self.next().is(':visible')){
-arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
-self.find('em').text('Hide');
-}else{
-arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
-self.find('em').text('Show');
-}
-
-});
-
-$(document).ready(function(){
-       var openheading = function(target) {
-               var origin = $(target);
-               target = origin.closest('.devicespec-con');
-               if (!(target.length > 0)) {
-                       target = origin.closest('.devicespec-tit');
-               }
-               if (target.length > 0) {
-                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
-                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
-                       }
-               }
-
-               $(window.location.hash)[0].scrollIntoView();
-       };
-
-       $(".opensection").click(function(){
-               var target = $($(this).attr("href"));//.closest('.devicespec-con');
-               openheading(target);
-       });
-
-       if (window.location.hash) {
-               var target = $(window.location.hash);
-               openheading(target);
-               //$(target).focus(); //uncomment if fail to work
-       }
-
-       var isScrolledIntoView = function(elem)
-       {
-               var docViewTop = $('#contents').scrollTop();
-               var docViewBottom = docViewTop + $('#contents').height();
-
-               var elemTop = $(elem).offset().top;
-               var elemBottom = elemTop + $(elem).height();
-
-               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
-                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
-       }
-
-       $('#contents').scroll();
-
-       var checkBreadCrumbs = function() {
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-                       $('.help_breadcrumbs').hide();
-               } else {
-                       $('a.top.sms').hide();
-                       $('.help_breadcrumbs').show();
-               }
-               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
-       }       
-
-       var updateH = function(){
-               checkBreadCrumbs();
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
-
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
-               if ($('a.top').is(':visible'))
-               {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
-               } else {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
-               }
-               $('#toc').css('height', $('#toc').css('height') - 5);
-
-               $('#toc_border').height($('#toc').outerHeight() + 5);
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
-               //$('#toc').css('width', $('#toc_border').width() - 40);
-               $('#toc').css('width', $('#toc_border').width() - 49);
-       };
-
-       var updateH_no_toc = function() {
-               checkBreadCrumbs();
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-               } else {
-                       $('a.top.sms').hide();
-               }
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-       }
-
-       if ($('body').hasClass('no-toc')) {
-               updateH = updateH_no_toc;
-       }
-       $(window).resize(updateH);
-       $('#contents').scroll(updateH);
-       $(window).resize();
-       
-       $('a.top').click(function(){$('#contents').scrollTop(0)});
-
-       var hashchanged = function() {
-               if (window.location.hash.length) {
-                       openheading(window.location.hash);
-                       //$(window.location.hash).scrollTo();
-                       $(window.location.hash)[0].scrollIntoView();
-
-               } else 
-               {
-                       $('#contents').scrollTop(0);
-               }
-       };
-
-       if (("onhashchange" in window) && !($.browser.msie)) { 
-               $(window).bind( 'hashchange',hashchanged);
-       }
-       else { 
-               var prevHash = window.location.hash;
-               window.setInterval(function () {
-                       if (window.location.hash != prevHash) {
-                               hashchanged();
-                               prevHash = window.location.hash;
-                       }
-               }, 100);
-       }
-});
+/*all Show Hide devicespecs List*/\r
+if($('div#contents').find('.devicespecs-util').length){\r
+var self = $('div#contents').find('.devicespecs-util');\r
+\r
+$('.showA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+var me = $(this);\r
+var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+if ( !me.next().is(':visible') ){\r
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+       me.find('em').text('Hide');\r
+       me.next().show();\r
+}\r
+});\r
+return false;\r
+})\r
+$('.hideA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+\r
+       var me = $(this);\r
+       var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+       if ( me.next().is(':visible') ){\r
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+               me.find('em').text('Show');\r
+               me.next().hide();\r
+       }\r
+                                       \r
+});\r
+return false;\r
+})\r
+}      \r
+\r
+/*toggle devicespecs List*/\r
+if($('div#contents').find('.devicespec-tit').length){\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+$('a', self).bind ("click", function(){\r
+       var idx = $('.devicespec-tit a').index(this);\r
+\r
+       if ( $(this).parent().parent().next().is(':visible') ){\r
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+               self.find('em').text('Show');\r
+               self.next().hide();\r
+\r
+               return false;\r
+       }else{\r
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+               self.find('em').text('Hide');\r
+\r
+               self.next().show();\r
+\r
+               return false;\r
+       }\r
+\r
+});\r
+\r
+});\r
+}\r
+\r
+$('ul.devicespecifications li div.devicespec-con').hide();\r
+\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+var arrow =  $('a', self);\r
+\r
+if(self.next().is(':visible')){\r
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));\r
+self.find('em').text('Hide');\r
+}else{\r
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));\r
+self.find('em').text('Show');\r
+}\r
+\r
+});\r
+\r
+$(document).ready(function(){\r
+       var openheading = function(target) {\r
+               var origin = $(target);\r
+               target = origin.closest('.devicespec-con');\r
+               if (!(target.length > 0)) {\r
+                       target = origin.closest('.devicespec-tit');\r
+               }\r
+               if (target.length > 0) {\r
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {\r
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();\r
+                       }\r
+               }\r
+\r
+               $(window.location.hash)[0].scrollIntoView();\r
+       };\r
+\r
+       $(".opensection").click(function(){\r
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');\r
+               openheading(target);\r
+       });\r
+\r
+       if (window.location.hash) {\r
+               var target = $(window.location.hash);\r
+               openheading(target);\r
+               //$(target).focus(); //uncomment if fail to work\r
+       }\r
+\r
+       var isScrolledIntoView = function(elem)\r
+       {\r
+               var docViewTop = $('#contents').scrollTop();\r
+               var docViewBottom = docViewTop + $('#contents').height();\r
+\r
+               var elemTop = $(elem).offset().top;\r
+               var elemBottom = elemTop + $(elem).height();\r
+\r
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)\r
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );\r
+       }\r
+\r
+       $('#contents').scroll();\r
+\r
+       var checkBreadCrumbs = function() {\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+                       $('.help_breadcrumbs').hide();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+                       $('.help_breadcrumbs').show();\r
+               }\r
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));\r
+       }       \r
+\r
+       var updateH = function(){\r
+               checkBreadCrumbs();\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));\r
+\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+\r
+               if ($('a.top').is(':visible'))\r
+               {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);\r
+               } else {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);\r
+               }\r
+               $('#toc').css('height', $('#toc').css('height') - 5);\r
+\r
+               $('#toc_border').height($('#toc').outerHeight() + 5);\r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);\r
+               //$('#toc').css('width', $('#toc_border').width() - 40);\r
+               $('#toc').css('width', $('#toc_border').width() - 49);\r
+       };\r
+\r
+       var updateH_no_toc = function() {\r
+               checkBreadCrumbs();\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+               }\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               \r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+       }\r
+\r
+       if ($('body').hasClass('no-toc')) {\r
+               updateH = updateH_no_toc;\r
+       }\r
+       $(window).resize(updateH);\r
+       $('#contents').scroll(updateH);\r
+       $(window).resize();\r
+       \r
+       $('a.top').click(function(){$('#contents').scrollTop(0)});\r
+\r
+       var hashchanged = function() {\r
+               if (window.location.hash.length) {\r
+                       openheading(window.location.hash);\r
+                       //$(window.location.hash).scrollTo();\r
+                       $(window.location.hash)[0].scrollIntoView();\r
+\r
+               } else \r
+               {\r
+                       $('#contents').scrollTop(0);\r
+               }\r
+       };\r
+\r
+       if (("onhashchange" in window) && !($.browser.msie)) { \r
+               $(window).bind( 'hashchange',hashchanged);\r
+       }\r
+       else { \r
+               var prevHash = window.location.hash;\r
+               window.setInterval(function () {\r
+                       if (window.location.hash != prevHash) {\r
+                               hashchanged();\r
+                               prevHash = window.location.hash;\r
+                       }\r
+               }, 100);\r
+       }\r
+});\r
diff --git a/org.tizen.devtools/html/web_tools/config_editor_w.htm b/org.tizen.devtools/html/web_tools/config_editor_w.htm
index 357c34c..bd5ba25 100644 (file)
--- a/org.tizen.devtools/html/web_tools/config_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/config_editor_w.htm
@@ -1,1325 +1,1325 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-    <script type="text/javascript" src="../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-  <title>Configuration Editor </title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-                       <li><a href="#hierarchy">Configuration Element Hierarchy</a></li>
-                       <li><a href="#elements">Configuration Elements</a></li>
-                       <li><a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a></li>
-                       <li><a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a></li>
-        </ul>
-    </div></div>
-</div>
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Configuration Editor</h1>
-
-  <p>The Tizen Web application configuration file is composed of XML elements, including the <span style="font-family: Courier New,Courier,monospace">&lt;widget&gt;</span> element as its root and other elements representing the application information, such as <a href="#elements">configuration elements</a> and Tizen extending configuration elements for <a href="#mw_extend">mobile</a> and <a href="#ww_extend">wearable</a> applications. Note that although the <span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> element is a W3C element, a modified Tizen extended version of it is used.</p>
-  <p>The configuration file can be edited with the <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#set_widget">Web application configuration editor</a>, or you can modify the XML structure directly using the configuration text editor. To open the Web application configuration editor, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the configuration text editor, right-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the Project Explorer view and select <strong>Open with &gt; Text Editor</strong>.
-   </p>
-   <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> must conform to both the XML file format and the W3C specification requirements. Editing the file XML structure with the configuration text editor is intended for advanced users only.</td>
-    </tr>
-   </tbody>
-  </table>
-  <h2 id="hierarchy" name="hierarchy">Configuration Element Hierarchy</h2>
-  <p>The Tizen Web application configuration file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
-    <table style="border:none;">
-  <col width="5%"/>
-  <col width="5%"/>
-  <col width="5%"/>
-  <col width="85%"/>
-   <tbody>
-    <tr>
-        <td colspan="4" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#widget">&lt;widget&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#name">&lt;name&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#content_element">&lt;content&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> (in <a href="#mw_feature">mobile</a> or <a href="#ww_feature">wearable</a>)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#param">&lt;param&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#license">&lt;license&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#preference">&lt;preference&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#access">&lt;access&gt;</a></span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#mw_account">&lt;tizen:account&gt;</a></span> (in mobile only)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:icon&gt;</span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:display-name&gt;</span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:capability&gt;</span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> (in <a href="#mw_appcontrol">mobile</a> or <a href="#appcontrol">wearable</a>)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:src&gt;</span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:operation&gt;</span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uri&gt;</span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td style="border:none;"></td>
-        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:mime&gt;</span></td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>
-    </tr>
-       
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span> (in <a href="#mw_webapp">mobile</a> or <a href="#ww_tizencontent">wearable</a>)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span> (in <a href="#mw_privilege">mobile</a> or <a href="#ww_privilege">wearable</a>)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span> (in <a href="#mw_setting">mobile</a> or <a href="#ww_setting">wearable</a>)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy&gt;</span> (in <a href="#mw_sec">mobile</a> or <a href="#ww_contentsecpolicy">wearable</a>)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only&gt;</span> (in <a href="#mw_secreport">mobile</a> or <a href="#ww_contentsecpolicyreport">wearable</a>)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation&gt;</span> (in <a href="#mw_navigation">mobile</a> or <a href="#ww_allownavigation">wearable</a>)</td>
-    </tr>
-    <tr>
-        <td style="border:none;"></td>
-        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span> (in <a href="#mw_metadata">mobile</a> or <a href="#ww_metadata">wearable</a>)</td>
-    </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</span> (in <a href="#mw_profile">mobile</a> or <a href="#ww_profile">wearable</a>)</td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_ime">&lt;tizen:ime&gt;</a></span> (in wearable only)</td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uuid&gt;</span></td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:languages&gt;</span></td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_language">&lt;tizen:language&gt;</a></span></td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_category">&lt;tizen:category&gt;</a></span> (in wearable only)</td>
-       </tr>
-
-       <tr>
-               <td style="border:none;"></td>
-               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service">&lt;tizen:service&gt;</a></span> (in wearable only)</td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-name">&lt;tizen:name&gt;</a></span></td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-icon">&lt;tizen:icon&gt;</a></span></td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-content">&lt;tizen:content&gt;</a></span></td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-description">&lt;tizen:description&gt;</a></span></td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-metadata">&lt;tizen:metadata&gt;</a></span></td>
-       </tr>
-       <tr>
-               <td style="border:none;"></td>
-               <td style="border:none;"></td>
-               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-category">&lt;tizen:category&gt;</a></span></td>
-       </tr>   
-   </tbody>
-  </table>
-
- <h2 id="elements" name="elements">Configuration Elements</h2>
-  <p>The following tables define a summary of the W3C configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application. For more information on the W3C element details, see <a href="http://www.w3.org/TR/widgets/" target="_blank">Packaging and XML Configuration</a> (the details of the Tizen extending configuration elements are described in <a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a> and <a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a>). For a quick view of the element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
-
-  <table border="1">
-   <tbody>
-    <tr id="widget" name="widget">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;widget&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Represents the root element of a configuration document.</p> <p><strong>Expected children:</strong> </p>
-<p><span style="font-family: Courier New,Courier,monospace">&lt;name&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;description&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;author&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;license&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;preference&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;access&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:account&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</span></p> <p><strong>Attributes:</strong></p> 
-    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">id</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">version</span>
-    <p>Specific version of the Tizen package. The expected value is <span style="font-family: Courier New,Courier,monospace">[0-255].[0-255].[0-65535]</span>.</p></li>
-    <li><span style="font-family: Courier New,Courier,monospace">height</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">width</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">viewmodes</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">defaultlocale</span></li></ul></td>
-    </tr>
-   </tbody>
-  </table>
-
-   <table border="1">
-   <tbody>
-    <tr id="name" name="name">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;name&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Represents the Web application name used for example, in the application menu.</p> <p><strong>Expected children:</strong> </p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
-    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">short</span></li></ul> </td>
-    </tr>
-   </tbody>
-  </table>
-
-   <table border="1">
-   <tbody>
-    <tr id="description" name="description">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;description&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Represents text describing the purpose of the Web application.</p> <p><strong>Expected children:</strong> </p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
-    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li></ul> </td>
-    </tr>
-   </tbody>
-  </table>
-   <table border="1">
-   <tbody>
-    <tr id="author" name="author">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;author&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Represents the person that created the Web application.</p> <p><strong>Expected children:</strong> </p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">href</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">email</span></li></ul> </td>
-    </tr>
-   </tbody>
-  </table>
-  <table border="1">
-   <tbody>
-    <tr id="content_element" name="content_element">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;content&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Represents the boot-strapping mechanism used to point to the main file of the Web application.</p>  <p><strong>Attributes:</strong></p>
-     <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">encoding</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">src</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">type</span></li></ul> </td>
-    </tr>
-   </tbody>
-  </table>
-  <table border="1">
-   <tbody>
-    <tr id="icon" name="icon">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;icon&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Represents the Web application icon.</p>  <p><strong>Attributes:</strong></p>
-     <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">src</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">width</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">height</span></li></ul> </td>
-    </tr>
-   </tbody>
-  </table>
-  <table border="1">
-   <tbody>
-    <tr id="license" name="license">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;license&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Represents the license under which the Web application is distributed.</p> <p><strong>Expected children:</strong> </p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
-    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">href</span></li></ul></td>
-    </tr>
-   </tbody>
-  </table>
-  <table border="1">
-   <tbody>
-    <tr id="preference" name="preference">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;preference&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Used to declare preferences as key-value pairs for the Web application for use at runtime.</p> <p><strong>Attributes:</strong></p>
-        <ul>
-          <li><span style="font-family: Courier New,Courier,monospace">name</span><p>The maximum length may be limited to 80 bytes.  In that case, leftover bytes are ignored.</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace">value</span><p>The maximum length may be limited to 8192 bytes.  In that case, leftover bytes are ignored.</p></li>
-          <li><span style="font-family: Courier New,Courier,monospace">readonly</span></li>
-         </ul>
- </td>
-    </tr>
-   </tbody>
-  </table>
-  <table border="1">
-   <tbody>
-    <tr id="access" name="access">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;access&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Used to control network access from within a Web application and to request access to certain network resources from the user agent.</p> <p><strong>Attributes:</strong></p> <ul><li><span style="font-family: Courier New,Courier,monospace">origin</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">subdomains</span></li></ul> </td>
-    </tr>
-   </tbody>
-  </table>
-  <table border="1">
-   <tbody>
-    <tr id="span" name="span">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;span&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Represents the generic container used mainly for internationalization.</p> <p><strong>Expected children:</strong> </p>
-    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>
-    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li></ul></td>
-    </tr>
-   </tbody>
-  </table>
-  <table border="1">
-   <tbody>
-    <tr id="param" name="param">
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;param&gt; element</span></th>
-    </tr>
-    <tr>
-     <td> <p>Used to declare parameters to be used with a feature in <a href="#mw_feature">mobile</a> and <a href="#ww_feature">wearable</a> applications.</p> <p><strong>Attributes:</strong></p>
-     <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">name</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">value</span></li></ul> </td>
-    </tr>
-   </tbody>
-  </table>
-
-<h2 id="mw_extend" name="mw_extend">Extending Configuration Elements in Mobile Applications</h2>
- <p>The following sections show additional configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The extension elements are denoted as though the following namespace declaration was in effect: <span style="font-family: Courier New,Courier,monospace;">xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</span>.
-        <p>The maximum length of attribute and element (except <span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span>, W3C preference element) can be limited to 2048 bytes. In this case, leftover bytes are ignored.</p></td>
-    </tr>
-   </tbody>
-  </table>
-
-  <h3 id="mw_account" name="mw_account">Tizen Account</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:account /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to register account provider information.</p>
-
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more</li>
-    </ul>
-    <p><strong>Expected children:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">icon</span> <p>Mandatory. Since the icons are used in the device under <strong>Settings &gt; Accounts</strong>, place them in a shared directory.</p>
-       <p>Attributes:</p>
-       <ul><li><span style="font-family: Courier New,Courier,monospace;">Account</span> - File path of the account provider icon. The icon size is 72 x 72 pixels.</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">AccountSmall</span> - File path of the account provider small icon. The icon size is 45 x 45 pixels. </li></ul></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">display-name</span> <p>Mandatory; display name of the account provider</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">capability</span><p>Optional; capability of the account provider. Capabilities are defined in the <span style="font-family: Courier New,Courier,monospace;">http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</span> IRI format.</p></li>
-      </ul>
-     <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">multiple-account-support</span> <p>Mandatory; indicates whether multiple accounts are supported (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>)</p></li>
-
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:account multiple-account-support=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;Account&quot;&gt;account_provider_icon.png&lt;/tizen:icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;AccountSmall&quot;&gt;account_provider_small_icon.png&lt;/tizen:icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:display-name xml:lang=&quot;en&quot;&gt;AccountProviderExample&lt;/tizen:display-name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:capability&gt;http://tizen.org/account/capability/contact&lt;/tizen:capability&gt;
-&lt;/tizen:account&gt;</pre><p></p></td>
-    </tr>
-   </tbody>
-  </table>
-
-  <h3 id="mw_appcontrol" name="mw_appcontrol">Tizen Application Control</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">Application Controls</a>.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more</li>
-    </ul>
-     <p><strong>Expected children:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; page handling the requests</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;http&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;
-&lt;/tizen:app-control&gt;</pre><p></p></td>
-    </tr>
-   </tbody>
-  </table>
-
-    <h3 id="mw_application" name="mw_application">Tizen Application ID</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to uniquely identify a Tizen application.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>1</li>
-    </ul>
-     <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen application ID, which is a combination of the Tizen package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory; Tizen package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store.</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.1&quot; /&gt;</pre><p></p></td>
-    </tr>
-   </tbody>
-  </table>
-
- 
-  
-    <h3 id="mw_webapp" name="mw_webapp">Tizen-hosted Web Application</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to point to a document which is hosted on an external server and acts as the Web application start page. The Tizen WRT allows the start page to be hosted on an external server.</p>
-     <p>If the start page is contained in the widget package, it is defined with the <a href="#content_element"><span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span> W3C element</a>. If both <span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> elements are defined, the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element is used.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more
-       <p>If more than 1 <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> elements are specified, the first instance of the element is used.</p></li>
-    </ul>
-     <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span><p>Mandatory; URI of the external start page</p></li>
-      </ul>
-
-      <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content src=&quot;https://www.tizen.org/&quot; /&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
-
-    <h3 id="mw_privilege" name="mw_privilege">Tizen Privilege</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to get the required API access privileges for the Web application.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more (if duplicates, the first occurrence is considered and all others ignored)</li>
-    </ul>
-     <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span><p> Mandatory; URI of the Device API privilege</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
-
-    <h3 id="mw_setting" name="mw_setting">Tizen Settings</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to define additional application settings.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more</li>
-    </ul>
-     <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; application execution continues when it is moved to the background (available values <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; context menu is displayed when the user clicks, for example, an image, text, or link (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Web application resources (HTML, JavaScript, and CSS files) are stored encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span><p>Optional; viewport orientation lock (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">landscape</span>), auto-rotation</p>If the system auto rotation setting is on, the Web application viewport orientation is changed accordingly by default.<p></p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; application installation location (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">internal-only, prefer-external</span>)</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available values: <span style="font-family: Courier New,Courier,monospace;">menu</span> and <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>
-
-
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;!--Web application execution is not suspended--&gt;
-&lt;!--when the application is sent to the background--&gt;
-&lt;tizen:setting background-support=&quot;enable&quot; /&gt;
-
-&lt;!--Context menu is not displayed--&gt;
-&lt;tizen:setting context-menu=&quot;disable&quot; /&gt;
-
-&lt;!--Web applications resources are stored encrypted by the WRT--&gt;
-&lt;tizen:setting encryption=&quot;enable&quot; /&gt;
-
-&lt;!--Viewport orientation is locked to &quot;landscape&quot;--&gt;
-&lt;tizen:setting screen-orientation=&quot;landscape&quot; /&gt;
-
-&lt;!--Installation location is set to &quot;internal-only&quot;--&gt;
-&lt;tizen:setting install-location=&quot;internal-only&quot; /&gt;
-
-&lt;!--Hardware key event is sent to the Web application when the hardware key is pressed--&gt;
-&lt;tizen:setting hwkey-event=&quot;enable&quot; /&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
-
-    <h3 id="mw_feature" name="mw_feature">Tizen Feature</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to define hardware and software components for a Tizen application. This attribute is only used in the Tizen Store for filtering purposes. It is ignored by the Web Runtime installation procedure.</p>
-     <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Even though the <span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.
-</td>
-    </tr>
-   </tbody>
-  </table>
-
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more</li>
-    </ul>
-     <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name=&quot;http://tizen.org/feature/network.bluetooth&quot; /&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
-  <h3 id="mw_sec" name="mw_sec">Tizen Content Security Policy</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to define an additional content security policy for a packaged or hosted application.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more
-       <p>If more than 1, the first occurrence is applied.</p></li>
-    </ul>
-<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
-  <h3 id="mw_secreport" name="mw_secreport">Tizen Content Security Policy Report Only</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more
-       <p>If more than 1, the first occurrence is applied.</p></li>
-    </ul>
-<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy-report-only&gt;
-&nbsp;&nbsp;&nbsp;script-src &#39;self&#39;; report-uri=&quot;http://example.com/report.cgi&quot;
-&lt;/tizen:content-security-policy-report-only&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
-  <h3 id="mw_navigation" name="mw_navigation">Tizen Navigation Policy</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to define a list of URL domains that are allowed to be navigated in using the Web application.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more
-       <p>If more than 1, the first occurrence is applied.</p></li>
-    </ul>
-<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:allow-navigation&gt;tizen.org *.tizen.org&lt;tizen:allow-navigation/&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
-  <h3 id="mw_metadata" name="mw_metadata">Tizen Metadata</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more</li>
-    </ul>
-     <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">key</span>
-           <p>Mandatory; unique key string.</p>
-           <p>The maximum length can be limited to 80 bytes.  In this case, leftover bytes are ignored.</p>
-       </li>
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span>
-           <p>Optional; string.</p>
-           <p>The maximum length can be limited to 8192 bytes.  In this case, leftover bytes are ignored.</p>
-       </li>
-
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:metadata key=&quot;key1&quot;/&gt;
-&lt;tizen:metadata key=&quot;key2&quot; value=&quot;value/&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
-  
-<h3 id="mw_profile" name="mw_profile">Tizen Profile</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the application profile.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1</li>
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> 
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;mobile&quot; /&gt;</pre><p></p> </td>
-    </tr> 
-   </tbody> 
-  </table>
-
-
-<h2 id="ww_extend" name="ww_extend">Extending Configuration Elements in Wearable Applications</h2>
- <p>The following sections show additional configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The extension elements are denoted as though the following namespace declaration was in effect: <span style="font-family: Courier New,Courier,monospace;">xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</span>.
-       <p>The maximum length of the attribute and element (except <span style="font-family: Courier New,Courier,monospace;">tizen:metadata</span>, W3C preference element) may be limited to 2048 bytes. In that case, leftover bytes are ignored.</p></td>
-    </tr>
-   </tbody>
-  </table>
-
-    <h3 id="ww_application" name="ww_application">Tizen Application</h3>
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to uniquely identify a Tizen wearable application.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-        <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>              
-       <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory;  Tizen wearable package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">ambient_support</span> <p>Optional; Sets whether the Web application supports the ambient mode (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p><p>If this option is enabled, the application can be shown in the ambient mode.</p></li>
-   <table class="note">
-    <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> option is only used for watch applications, and ignored in all non-watch applications.</td> 
-    </tr> 
-    </tbody>
-    </table> 
-
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;  
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ambient_support=&quot;enable&quot; /&gt;</pre><p></p></td> 
-
-    </tr> 
-   </tbody> 
-  </table> 
-    <h3 id="ww_privilege" name="ww_privilege">Tizen Privilege</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to get the required API access privileges for the Web application.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span><p> Mandatory; URI of the Device API privilege</p></li> 
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-  
-  <h3 id="appcontrol" name="appcontrol">Tizen Application Control</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">Application Controls</a>.</p>
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more</li>
-    </ul>
-     <p><strong>Expected children:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; page handling the requests</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;http&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;
-&lt;/tizen:app-control&gt;</pre><p></p></td>
-    </tr>
-   </tbody>
-  </table>
-
-    <h3 id="ww_setting" name="ww_setting">Tizen Settings</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define additional application settings.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-     
-      <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; Sets whether Web Application is suspended when it goes to the background (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;">  disable</span> (default))</p><p>If this option is enabled, Web Application is not suspended when it goes to the background.</p></li> 
-      <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; Sets whether the context menu is shown (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Sets whether Web Application resources are encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;">  disable</span> (default))</p><p>If this option is enabled, the application resources(HTML, JS and CSS files) are encrypted.</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span> <p>Optional; Sets whether it locks orientation of Web Application (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">  landscape</span>, <span style="font-family: Courier New,Courier,monospace;">  auto-rotation</span>)</p><p>If this option is portrait or landscape, the orientation is locked to portrait or landscape respectively.</p><p>If the option is auto-rotation, it follows device orientation setting.</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; Sets where Web Application is installed (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">  internal-only</span>, <span style="font-family: Courier New,Courier,monospace;">  prefer-external</span>)</p><p>o     auto: the system defined install location.</p><p>o      internal-only: the device internal storage.</p><p>o     prefer-external: the external storage (if exists).</p></li>
-      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available value: <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>
-         
-         </ul><p><strong>Example:</strong> </p><pre class="prettyprint">
-&lt;tizen:setting background-support=&quot;enable&quot; /&gt;
-&lt;tizen:setting context-menu=&quot;disable&quot; /&gt;
-&lt;tizen:setting encryption=&quot;enable&quot; /&gt;
-&lt;tizen:setting screen-orientation=&quot;landscape&quot; /&gt;
-&lt;tizen:setting install-location=&quot;internal-only&quot; /&gt;
-&lt;tizen:setting hwkey-event=&quot;enable&quot; /&gt;
-</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-    <h3 id="ww_tizencontent" name="ww_tizencontent">Tizen Content</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the start page to be hosted on an external server.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more<p>If more than 1, the first occurrence is considered and all others ignored.</p></li>
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-     
-      <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; URI of an external start page</p></li> 
-
-         </ul><p><strong>Example:</strong> </p><pre class="prettyprint">
-&lt;tizen:content src=&quot;https://www.tizen.org&quot;/&gt;</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <h3 id="ww_contentsecpolicy" name="ww_contentsecpolicy">Tizen Content Security Policy</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define an additional content security policy for a packaged or hosted application.</p> 
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more
-          <p>If more than 1, the first occurrence is applied.</p></li> 
-       </ul>
-<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-    <h3 id="ww_contentsecpolicyreport" name="ww_contentsecpolicyreport">Tizen Content Security Policy Report Only</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.</p> 
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more 
-          <p>If more than 1, the first occurrence is applied.</p></li> 
-       </ul>
-<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy-report-only&gt;
-&nbsp;&nbsp;&nbsp;script-src &#39;self&#39;; report-uri=&quot;http://example.com/report.cgi&quot;
-&lt;/tizen:content-security-policy-report-only&gt;</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-      
-  </table>
-  <h3 id="ww_allownavigation" name="ww_allownavigation">Tizen Navigation Policy</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define a list of URL domains that are allowed to be navigated in using the Web application.</p> 
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more 
-          <p>If more than 1, the first occurrence is applied.</p></li> 
-       </ul>
-<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:allow-navigation&gt;tizen.org *.tizen.org&lt;tizen:allow-navigation/&gt;</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <h3 id="ww_metadata" name="ww_metadata">Tizen Metadata</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">key</span>
-           <p>Mandatory; unique key string.</p>
-           <p>The maximum length may be limited to 80 bytes. In that case, leftover bytes are ignored.</p>
-       </li>
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span>
-           <p>Optional; string.</p>
-           <p>The maximum length may be limited to 8192 bytes. In that case, leftover bytes are ignored.</p>
-       </li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:metadata key=&quot;key1&quot;/&gt;
-&lt;tizen:metadata key=&quot;key2&quot; value=&quot;value/&gt;</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <h3 id="ww_ime" name="ww_ime">Tizen IME</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:ime /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to defines the properties of IME (Input Method Editor) type application, which would be used when the developer wants to create his or her own keyboard module for Tizen platform.</p>
-    <table class="note">
-    <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note"><span style="font-family: Courier New,Courier,monospace;">&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</span> should be defined to activate &lt;tizen:ime&gt;</td> 
-    </tr> 
-    </tbody>
-    </table>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or 1</li> 
-       </ul>
-        <p><strong>Expected children:</strong> </p> 
-    <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">uuid</span> <p>Mandatory; universally unique, an unique identifier that distinguishes an IME from each other, displayed in the form of standard UUID (8-4-4-4-12 for a total of 36 characters)</p></li> 
-       <li><span style="font-family: Courier New,Courier,monospace;">languages</span> <p>Mandatory; list of input languages that the current IME supports</p>
-    <table class="note">
-    <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note"><span style="font-family: Courier New,Courier,monospace;">&lt;tizen:language/&gt;</span> elements will be provided as the child elements of this element.</td> 
-    </tr> 
-    </tbody>
-    </table>
-    </li> 
-    </ul>
-         <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:ime&gt;
-    &lt;tizen:uuid&gt;6135122a-a428-40d2-8feb-a75f462c202c&lt;/tizen:uuid&gt;
-    &lt;tizen:languages&gt;
-        &lt;tizen:language&gt;en-us&lt;/tizen:language&gt;
-        &lt;tizen:language&gt;de-de&lt;/tizen:language&gt;
-    &lt;/tizen:languages&gt;
-&lt;/tizen:ime&gt;
-
-&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <table border="1" id="ww_language" name="ww_language"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:language /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the supported input language of the current IME type application.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1 or more</li> 
-       </ul>
-         <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:languages&gt;
-  &lt;tizen:language&gt;en-us&lt;/tizen:language&gt;
-  &lt;tizen:language&gt;de-de&lt;/tizen:language&gt;
-&lt;/tizen:languages&gt;</pre><p></p> </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <h3 id="ww_category" name="ww_category">Tizen Category</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:category /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to define the categories to which the service application belongs.</p>
-         <p><strong>Occurrences:</strong> </p>
-        <ul>
-       <li>0 or more</li>
-        </ul>
-         <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;</pre><p></p></td>
-    </tr>
-   </tbody>
-  </table>
-
-
-  
-      <h3 id="ww_service" name="ww_service">Tizen Service</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:service /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define Web Service Application.</p>
-
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
-       </ul>
-     <p><strong>Expected Children:</strong> </p>
-      <ul> 
-       <li><a href="#ww_service-name">&lt;tizen:name /&gt;</a></li>
-       <li><a href="#ww_service-icon">&lt;tizen:icon /&gt;</a></li>
-       <li><a href="#ww_service-content">&lt;tizen:content /&gt;</a></li>
-       <li><a href="#ww_service-description">&lt;tizen:description /&gt;</a></li>
-       <li><a href="#ww_service-metadata">&lt;tizen:metadata /&gt;</a></li>
-       <li><a href="#ww_service-category">&lt;tizen:category /&gt;</a></li>
-      </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen service ID, which is a combination of the Tizen wearable package ID and service name.</p><p>The service ID is a set of characters (0~9, a~z, A~Z) and unique in the device. The minimum value is 1 byte and maximum value is 52 bytes.</p></li> 
-      </ul>
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">auto-restart</span> <p>Optional; Sets whether service application is re-launched automatically when it is terminated. (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> , <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li> 
-      </ul>
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">on-boot</span> <p>Optional; Sets whether service application is launched automatically on device booting time. (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> , <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li> 
-      </ul>
-      <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:service id=&quot;webService.application&quot; auto-restart=&quot;true&quot; on-boot=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:name&gt;WebService&lt;/tizen:name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:icon src=&quot;service-icon.png&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:content src=&quot;service/service.js&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:description&gt;Web Service Application&lt;/tizen:description&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:metadata key=&quot;key1&quot; value=&quot;value1&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:category name=&quot;http://tizen.org/category/service&quot;/&gt;
-&lt;tizen:service&gt;</pre><p></p> </td>
-    </tr> 
-   </tbody> 
-  </table> 
-
-  <table border="1" id="ww_service-name" name="ww_service-name"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:name /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the name of Web Service Application.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1 or more</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the service name (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li> 
-      </ul>
-       </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <table border="1" id="ww_service-icon" name="ww_service-icon"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:icon /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the icon of Web Service Application.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or 1</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Web Service Application icon. The path is relative to the source Web application directory.</p></li> 
-      </ul>
-       </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <table border="1" id="ww_service-content" name="ww_service-content"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the start page of the Web Service Application.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; start JavaScript file path of the Web Service Application. The path is relative to the source Web application directory.</p></li> 
-      </ul>
-       </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <table border="1" id="ww_service-description" name="ww_service-description"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:description /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the description of the Web Service Application.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or 1</li> 
-       </ul>
-       </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <table border="1" id="ww_service-metadata" name="ww_service-metadata"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define metadata information shared with other Web Applications. The defined metadata can be accessed (read-only) through the Tizen Application API.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">key</span> <p>Mandatory; unique key string</p></li> 
-       <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Optional; string</p></li> 
-      </ul>
-       </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <table border="1" id="ww_service-category" name="ww_service-category"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:category /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the categories that the service application belongs to.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> 
-      </ul>
-       </td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <h3 id="ww_profile" name="ww_profile">Tizen Profile</h3> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile /&gt;</span> element</p></th> 
-    </tr> 
-    <tr> 
-     <td> <p>Used to define the application profile.</p>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1</li>
-       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> 
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;wearable&quot; /&gt;</pre><p></p> </td>
-    </tr> 
-   </tbody> 
-  </table>
-
-
-    <h3 id="ww_feature" name="ww_feature">Tizen Feature</h3>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element</p></th>
-    </tr>
-    <tr>
-     <td> <p>Used to define hardware and software components for a Tizen wearable Web application. This attribute is only used in the Samsung Apps for filtering purposes. It is ignored by the Web Runtime installation procedure.</p>
-     <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Even though the <span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.
-</td>
-    </tr>
-   </tbody>
-  </table>
-
-     <p><strong>Occurrences:</strong> </p>
-    <ul>
-       <li>0 or more</li>
-    </ul>
-     <p><strong>Attributes:</strong> </p>
-      <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name=&quot;http://tizen.org/feature/network.bluetooth&quot; /&gt;</pre><p></p> </td>
-    </tr>
-   </tbody>
-  </table>
- 
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+    <script type="text/javascript" src="../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+  <title>Configuration Editor </title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                       <li><a href="#hierarchy">Configuration Element Hierarchy</a></li>\r
+                       <li><a href="#elements">Configuration Elements</a></li>\r
+                       <li><a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a></li>\r
+                       <li><a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>Configuration Editor</h1>\r
+\r
+  <p>The Tizen Web application configuration file is composed of XML elements, including the <span style="font-family: Courier New,Courier,monospace">&lt;widget&gt;</span> element as its root and other elements representing the application information, such as <a href="#elements">configuration elements</a> and Tizen extending configuration elements for <a href="#mw_extend">mobile</a> and <a href="#ww_extend">wearable</a> applications. Note that although the <span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> element is a W3C element, a modified Tizen extended version of it is used.</p>\r
+  <p>The configuration file can be edited with the <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#set_widget">Web application configuration editor</a>, or you can modify the XML structure directly using the configuration text editor. To open the Web application configuration editor, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the configuration text editor, right-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the Project Explorer view and select <strong>Open with &gt; Text Editor</strong>.\r
+   </p>\r
+   <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace">config.xml</span> must conform to both the XML file format and the W3C specification requirements. Editing the file XML structure with the configuration text editor is intended for advanced users only.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <h2 id="hierarchy" name="hierarchy">Configuration Element Hierarchy</h2>\r
+  <p>The Tizen Web application configuration file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>\r
+    <table style="border:none;">\r
+  <col width="5%"/>\r
+  <col width="5%"/>\r
+  <col width="5%"/>\r
+  <col width="85%"/>\r
+   <tbody>\r
+    <tr>\r
+        <td colspan="4" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#widget">&lt;widget&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#name">&lt;name&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#description">&lt;description&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#author">&lt;author&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#content_element">&lt;content&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span> (in <a href="#mw_feature">mobile</a> or <a href="#ww_feature">wearable</a>)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#param">&lt;param&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#icon">&lt;icon&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#license">&lt;license&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#span">&lt;span&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#preference">&lt;preference&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#access">&lt;access&gt;</a></span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#mw_account">&lt;tizen:account&gt;</a></span> (in mobile only)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:icon&gt;</span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:display-name&gt;</span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:capability&gt;</span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span> (in <a href="#mw_appcontrol">mobile</a> or <a href="#appcontrol">wearable</a>)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:src&gt;</span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:operation&gt;</span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uri&gt;</span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td style="border:none;"></td>\r
+        <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:mime&gt;</span></td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>\r
+    </tr>\r
+       \r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span> (in <a href="#mw_webapp">mobile</a> or <a href="#ww_tizencontent">wearable</a>)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span> (in <a href="#mw_privilege">mobile</a> or <a href="#ww_privilege">wearable</a>)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span> (in <a href="#mw_setting">mobile</a> or <a href="#ww_setting">wearable</a>)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy&gt;</span> (in <a href="#mw_sec">mobile</a> or <a href="#ww_contentsecpolicy">wearable</a>)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only&gt;</span> (in <a href="#mw_secreport">mobile</a> or <a href="#ww_contentsecpolicyreport">wearable</a>)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation&gt;</span> (in <a href="#mw_navigation">mobile</a> or <a href="#ww_allownavigation">wearable</a>)</td>\r
+    </tr>\r
+    <tr>\r
+        <td style="border:none;"></td>\r
+        <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span> (in <a href="#mw_metadata">mobile</a> or <a href="#ww_metadata">wearable</a>)</td>\r
+    </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</span> (in <a href="#mw_profile">mobile</a> or <a href="#ww_profile">wearable</a>)</td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_ime">&lt;tizen:ime&gt;</a></span> (in wearable only)</td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:uuid&gt;</span></td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace">&lt;tizen:languages&gt;</span></td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_language">&lt;tizen:language&gt;</a></span></td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_category">&lt;tizen:category&gt;</a></span> (in wearable only)</td>\r
+       </tr>\r
+\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service">&lt;tizen:service&gt;</a></span> (in wearable only)</td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-name">&lt;tizen:name&gt;</a></span></td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-icon">&lt;tizen:icon&gt;</a></span></td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-content">&lt;tizen:content&gt;</a></span></td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-description">&lt;tizen:description&gt;</a></span></td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-metadata">&lt;tizen:metadata&gt;</a></span></td>\r
+       </tr>\r
+       <tr>\r
+               <td style="border:none;"></td>\r
+               <td style="border:none;"></td>\r
+               <td colspan="2" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#ww_service-category">&lt;tizen:category&gt;</a></span></td>\r
+       </tr>   \r
+   </tbody>\r
+  </table>\r
+\r
+ <h2 id="elements" name="elements">Configuration Elements</h2>\r
+  <p>The following tables define a summary of the W3C configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application. For more information on the W3C element details, see <a href="http://www.w3.org/TR/widgets/" target="_blank">Packaging and XML Configuration</a> (the details of the Tizen extending configuration elements are described in <a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a> and <a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a>). For a quick view of the element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>\r
+\r
+  <table border="1">\r
+   <tbody>\r
+    <tr id="widget" name="widget">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;widget&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Represents the root element of a configuration document.</p> <p><strong>Expected children:</strong> </p>\r
+<p><span style="font-family: Courier New,Courier,monospace">&lt;name&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;description&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;author&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;license&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;icon&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;feature&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;preference&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;access&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:account&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:application&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege&gt;</span>, <span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting&gt;</span>, and <span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile&gt;</span></p> <p><strong>Attributes:</strong></p> \r
+    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">id</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">version</span>\r
+    <p>Specific version of the Tizen package. The expected value is <span style="font-family: Courier New,Courier,monospace">[0-255].[0-255].[0-65535]</span>.</p></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">height</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">width</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">viewmodes</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">defaultlocale</span></li></ul></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+   <table border="1">\r
+   <tbody>\r
+    <tr id="name" name="name">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;name&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Represents the Web application name used for example, in the application menu.</p> <p><strong>Expected children:</strong> </p>\r
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>\r
+    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">short</span></li></ul> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+   <table border="1">\r
+   <tbody>\r
+    <tr id="description" name="description">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;description&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Represents text describing the purpose of the Web application.</p> <p><strong>Expected children:</strong> </p>\r
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>\r
+    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li></ul> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+   <table border="1">\r
+   <tbody>\r
+    <tr id="author" name="author">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;author&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Represents the person that created the Web application.</p> <p><strong>Expected children:</strong> </p>\r
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">href</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">email</span></li></ul> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr id="content_element" name="content_element">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;content&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Represents the boot-strapping mechanism used to point to the main file of the Web application.</p>  <p><strong>Attributes:</strong></p>\r
+     <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">encoding</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">src</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">type</span></li></ul> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr id="icon" name="icon">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;icon&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Represents the Web application icon.</p>  <p><strong>Attributes:</strong></p>\r
+     <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">src</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">width</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">height</span></li></ul> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr id="license" name="license">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;license&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Represents the license under which the Web application is distributed.</p> <p><strong>Expected children:</strong> </p>\r
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>\r
+    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">href</span></li></ul></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr id="preference" name="preference">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;preference&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to declare preferences as key-value pairs for the Web application for use at runtime.</p> <p><strong>Attributes:</strong></p>\r
+        <ul>\r
+          <li><span style="font-family: Courier New,Courier,monospace">name</span><p>The maximum length may be limited to 80 bytes.  In that case, leftover bytes are ignored.</p></li>\r
+          <li><span style="font-family: Courier New,Courier,monospace">value</span><p>The maximum length may be limited to 8192 bytes.  In that case, leftover bytes are ignored.</p></li>\r
+          <li><span style="font-family: Courier New,Courier,monospace">readonly</span></li>\r
+         </ul>\r
+ </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr id="access" name="access">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;access&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to control network access from within a Web application and to request access to certain network resources from the user agent.</p> <p><strong>Attributes:</strong></p> <ul><li><span style="font-family: Courier New,Courier,monospace">origin</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">subdomains</span></li></ul> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr id="span" name="span">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;span&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Represents the generic container used mainly for internationalization.</p> <p><strong>Expected children:</strong> </p>\r
+    <p><span style="font-family: Courier New,Courier,monospace">&lt;span&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;text node&gt;</span></p> <p><strong>Attributes:</strong></p>\r
+    <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li></ul></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr id="param" name="param">\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace">&lt;param&gt; element</span></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to declare parameters to be used with a feature in <a href="#mw_feature">mobile</a> and <a href="#ww_feature">wearable</a> applications.</p> <p><strong>Attributes:</strong></p>\r
+     <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">dir</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">name</span></li>\r
+    <li><span style="font-family: Courier New,Courier,monospace">value</span></li></ul> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<h2 id="mw_extend" name="mw_extend">Extending Configuration Elements in Mobile Applications</h2>\r
+ <p>The following sections show additional configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>\r
+\r
+  <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">The extension elements are denoted as though the following namespace declaration was in effect: <span style="font-family: Courier New,Courier,monospace;">xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</span>.\r
+        <p>The maximum length of attribute and element (except <span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata&gt;</span>, W3C preference element) can be limited to 2048 bytes. In this case, leftover bytes are ignored.</p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+  <h3 id="mw_account" name="mw_account">Tizen Account</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:account /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to register account provider information.</p>\r
+\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more</li>\r
+    </ul>\r
+    <p><strong>Expected children:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">icon</span> <p>Mandatory. Since the icons are used in the device under <strong>Settings &gt; Accounts</strong>, place them in a shared directory.</p>\r
+       <p>Attributes:</p>\r
+       <ul><li><span style="font-family: Courier New,Courier,monospace;">Account</span> - File path of the account provider icon. The icon size is 72 x 72 pixels.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">AccountSmall</span> - File path of the account provider small icon. The icon size is 45 x 45 pixels. </li></ul></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">display-name</span> <p>Mandatory; display name of the account provider</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">capability</span><p>Optional; capability of the account provider. Capabilities are defined in the <span style="font-family: Courier New,Courier,monospace;">http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</span> IRI format.</p></li>\r
+      </ul>\r
+     <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">multiple-account-support</span> <p>Mandatory; indicates whether multiple accounts are supported (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>)</p></li>\r
+\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:account multiple-account-support=&quot;false&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;Account&quot;&gt;account_provider_icon.png&lt;/tizen:icon&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;AccountSmall&quot;&gt;account_provider_small_icon.png&lt;/tizen:icon&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:display-name xml:lang=&quot;en&quot;&gt;AccountProviderExample&lt;/tizen:display-name&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:capability&gt;http://tizen.org/account/capability/contact&lt;/tizen:capability&gt;\r
+&lt;/tizen:account&gt;</pre><p></p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+  <h3 id="mw_appcontrol" name="mw_appcontrol">Tizen Application Control</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">Application Controls</a>.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more</li>\r
+    </ul>\r
+     <p><strong>Expected children:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; page handling the requests</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;http&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;\r
+&lt;/tizen:app-control&gt;</pre><p></p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+    <h3 id="mw_application" name="mw_application">Tizen Application ID</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to uniquely identify a Tizen application.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>1</li>\r
+    </ul>\r
+     <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen application ID, which is a combination of the Tizen package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory; Tizen package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store.</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.1&quot; /&gt;</pre><p></p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+ \r
+  \r
+    <h3 id="mw_webapp" name="mw_webapp">Tizen-hosted Web Application</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to point to a document which is hosted on an external server and acts as the Web application start page. The Tizen WRT allows the start page to be hosted on an external server.</p>\r
+     <p>If the start page is contained in the widget package, it is defined with the <a href="#content_element"><span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span> W3C element</a>. If both <span style="font-family: Courier New,Courier,monospace">&lt;content&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> elements are defined, the <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element is used.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more\r
+       <p>If more than 1 <span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> elements are specified, the first instance of the element is used.</p></li>\r
+    </ul>\r
+     <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span><p>Mandatory; URI of the external start page</p></li>\r
+      </ul>\r
+\r
+      <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content src=&quot;https://www.tizen.org/&quot; /&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+    <h3 id="mw_privilege" name="mw_privilege">Tizen Privilege</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to get the required API access privileges for the Web application.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more (if duplicates, the first occurrence is considered and all others ignored)</li>\r
+    </ul>\r
+     <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span><p> Mandatory; URI of the Device API privilege</p></li>\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+    <h3 id="mw_setting" name="mw_setting">Tizen Settings</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to define additional application settings.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more</li>\r
+    </ul>\r
+     <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; application execution continues when it is moved to the background (available values <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; context menu is displayed when the user clicks, for example, an image, text, or link (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Web application resources (HTML, JavaScript, and CSS files) are stored encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span><p>Optional; viewport orientation lock (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">landscape</span>), auto-rotation</p>If the system auto rotation setting is on, the Web application viewport orientation is changed accordingly by default.<p></p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; application installation location (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">internal-only, prefer-external</span>)</p></li>\r
+      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available values: <span style="font-family: Courier New,Courier,monospace;">menu</span> and <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>\r
+\r
+\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;!--Web application execution is not suspended--&gt;\r
+&lt;!--when the application is sent to the background--&gt;\r
+&lt;tizen:setting background-support=&quot;enable&quot; /&gt;\r
+\r
+&lt;!--Context menu is not displayed--&gt;\r
+&lt;tizen:setting context-menu=&quot;disable&quot; /&gt;\r
+\r
+&lt;!--Web applications resources are stored encrypted by the WRT--&gt;\r
+&lt;tizen:setting encryption=&quot;enable&quot; /&gt;\r
+\r
+&lt;!--Viewport orientation is locked to &quot;landscape&quot;--&gt;\r
+&lt;tizen:setting screen-orientation=&quot;landscape&quot; /&gt;\r
+\r
+&lt;!--Installation location is set to &quot;internal-only&quot;--&gt;\r
+&lt;tizen:setting install-location=&quot;internal-only&quot; /&gt;\r
+\r
+&lt;!--Hardware key event is sent to the Web application when the hardware key is pressed--&gt;\r
+&lt;tizen:setting hwkey-event=&quot;enable&quot; /&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+    <h3 id="mw_feature" name="mw_feature">Tizen Feature</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to define hardware and software components for a Tizen application. This attribute is only used in the Tizen Store for filtering purposes. It is ignored by the Web Runtime installation procedure.</p>\r
+     <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">Even though the <span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.\r
+</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more</li>\r
+    </ul>\r
+     <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name=&quot;http://tizen.org/feature/network.bluetooth&quot; /&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <h3 id="mw_sec" name="mw_sec">Tizen Content Security Policy</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to define an additional content security policy for a packaged or hosted application.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more\r
+       <p>If more than 1, the first occurrence is applied.</p></li>\r
+    </ul>\r
+<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <h3 id="mw_secreport" name="mw_secreport">Tizen Content Security Policy Report Only</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more\r
+       <p>If more than 1, the first occurrence is applied.</p></li>\r
+    </ul>\r
+<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy-report-only&gt;\r
+&nbsp;&nbsp;&nbsp;script-src &#39;self&#39;; report-uri=&quot;http://example.com/report.cgi&quot;\r
+&lt;/tizen:content-security-policy-report-only&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <h3 id="mw_navigation" name="mw_navigation">Tizen Navigation Policy</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to define a list of URL domains that are allowed to be navigated in using the Web application.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more\r
+       <p>If more than 1, the first occurrence is applied.</p></li>\r
+    </ul>\r
+<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:allow-navigation&gt;tizen.org *.tizen.org&lt;tizen:allow-navigation/&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  <h3 id="mw_metadata" name="mw_metadata">Tizen Metadata</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more</li>\r
+    </ul>\r
+     <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">key</span>\r
+           <p>Mandatory; unique key string.</p>\r
+           <p>The maximum length can be limited to 80 bytes.  In this case, leftover bytes are ignored.</p>\r
+       </li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">value</span>\r
+           <p>Optional; string.</p>\r
+           <p>The maximum length can be limited to 8192 bytes.  In this case, leftover bytes are ignored.</p>\r
+       </li>\r
+\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:metadata key=&quot;key1&quot;/&gt;\r
+&lt;tizen:metadata key=&quot;key2&quot; value=&quot;value/&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  \r
+<h3 id="mw_profile" name="mw_profile">Tizen Profile</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the application profile.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>1</li>\r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> \r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;mobile&quot; /&gt;</pre><p></p> </td>\r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+\r
+<h2 id="ww_extend" name="ww_extend">Extending Configuration Elements in Wearable Applications</h2>\r
+ <p>The following sections show additional configuration elements used in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>\r
+\r
+  <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">The extension elements are denoted as though the following namespace declaration was in effect: <span style="font-family: Courier New,Courier,monospace;">xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</span>.\r
+       <p>The maximum length of the attribute and element (except <span style="font-family: Courier New,Courier,monospace;">tizen:metadata</span>, W3C preference element) may be limited to 2048 bytes. In that case, leftover bytes are ignored.</p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+    <h3 id="ww_application" name="ww_application">Tizen Application</h3>\r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:application /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to uniquely identify a Tizen wearable application.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>1</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+        <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>              \r
+       <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory;  Tizen wearable package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">ambient_support</span> <p>Optional; Sets whether the Web application supports the ambient mode (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p><p>If this option is enabled, the application can be shown in the ambient mode.</p></li>\r
+   <table class="note">\r
+    <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> option is only used for watch applications, and ignored in all non-watch applications.</td> \r
+    </tr> \r
+    </tbody>\r
+    </table> \r
+\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;  \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.1&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ambient_support=&quot;enable&quot; /&gt;</pre><p></p></td> \r
+\r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+    <h3 id="ww_privilege" name="ww_privilege">Tizen Privilege</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:privilege /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to get the required API access privileges for the Web application.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span><p> Mandatory; URI of the Device API privilege</p></li> \r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  \r
+  \r
+  <h3 id="appcontrol" name="appcontrol">Tizen Application Control</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:app-control /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">Application Controls</a>.</p>\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more</li>\r
+    </ul>\r
+     <p><strong>Expected children:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; page handling the requests</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;http&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;\r
+&lt;/tizen:app-control&gt;</pre><p></p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+    <h3 id="ww_setting" name="ww_setting">Tizen Settings</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:setting /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define additional application settings.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+     \r
+      <li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; Sets whether Web Application is suspended when it goes to the background (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;">  disable</span> (default))</p><p>If this option is enabled, Web Application is not suspended when it goes to the background.</p></li> \r
+      <li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; Sets whether the context menu is shown (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>\r
+      <li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Sets whether Web Application resources are encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;">  disable</span> (default))</p><p>If this option is enabled, the application resources(HTML, JS and CSS files) are encrypted.</p></li>\r
+      <li><span style="font-family: Courier New,Courier,monospace;">screen-orientation</span> <p>Optional; Sets whether it locks orientation of Web Application (available values: <span style="font-family: Courier New,Courier,monospace;">portrait</span> (default), <span style="font-family: Courier New,Courier,monospace;">  landscape</span>, <span style="font-family: Courier New,Courier,monospace;">  auto-rotation</span>)</p><p>If this option is portrait or landscape, the orientation is locked to portrait or landscape respectively.</p><p>If the option is auto-rotation, it follows device orientation setting.</p></li>\r
+      <li><span style="font-family: Courier New,Courier,monospace;">install-location</span> <p>Optional; Sets where Web Application is installed (available values: <span style="font-family: Courier New,Courier,monospace;">auto</span> (default), <span style="font-family: Courier New,Courier,monospace;">  internal-only</span>, <span style="font-family: Courier New,Courier,monospace;">  prefer-external</span>)</p><p>o     auto: the system defined install location.</p><p>o      internal-only: the device internal storage.</p><p>o     prefer-external: the external storage (if exists).</p></li>\r
+      <li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">  disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available value: <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>\r
+         \r
+         </ul><p><strong>Example:</strong> </p><pre class="prettyprint">\r
+&lt;tizen:setting background-support=&quot;enable&quot; /&gt;\r
+&lt;tizen:setting context-menu=&quot;disable&quot; /&gt;\r
+&lt;tizen:setting encryption=&quot;enable&quot; /&gt;\r
+&lt;tizen:setting screen-orientation=&quot;landscape&quot; /&gt;\r
+&lt;tizen:setting install-location=&quot;internal-only&quot; /&gt;\r
+&lt;tizen:setting hwkey-event=&quot;enable&quot; /&gt;\r
+</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+    <h3 id="ww_tizencontent" name="ww_tizencontent">Tizen Content</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the start page to be hosted on an external server.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more<p>If more than 1, the first occurrence is considered and all others ignored.</p></li>\r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+     \r
+      <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; URI of an external start page</p></li> \r
+\r
+         </ul><p><strong>Example:</strong> </p><pre class="prettyprint">\r
+&lt;tizen:content src=&quot;https://www.tizen.org&quot;/&gt;</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <h3 id="ww_contentsecpolicy" name="ww_contentsecpolicy">Tizen Content Security Policy</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define an additional content security policy for a packaged or hosted application.</p> \r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more\r
+          <p>If more than 1, the first occurrence is applied.</p></li> \r
+       </ul>\r
+<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+    <h3 id="ww_contentsecpolicyreport" name="ww_contentsecpolicyreport">Tizen Content Security Policy Report Only</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content-security-policy-report-only /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.</p> \r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more \r
+          <p>If more than 1, the first occurrence is applied.</p></li> \r
+       </ul>\r
+<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy-report-only&gt;\r
+&nbsp;&nbsp;&nbsp;script-src &#39;self&#39;; report-uri=&quot;http://example.com/report.cgi&quot;\r
+&lt;/tizen:content-security-policy-report-only&gt;</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+      \r
+  </table>\r
+  <h3 id="ww_allownavigation" name="ww_allownavigation">Tizen Navigation Policy</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:allow-navigation /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define a list of URL domains that are allowed to be navigated in using the Web application.</p> \r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more \r
+          <p>If more than 1, the first occurrence is applied.</p></li> \r
+       </ul>\r
+<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:allow-navigation&gt;tizen.org *.tizen.org&lt;tizen:allow-navigation/&gt;</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <h3 id="ww_metadata" name="ww_metadata">Tizen Metadata</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">key</span>\r
+           <p>Mandatory; unique key string.</p>\r
+           <p>The maximum length may be limited to 80 bytes. In that case, leftover bytes are ignored.</p>\r
+       </li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">value</span>\r
+           <p>Optional; string.</p>\r
+           <p>The maximum length may be limited to 8192 bytes. In that case, leftover bytes are ignored.</p>\r
+       </li>\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:metadata key=&quot;key1&quot;/&gt;\r
+&lt;tizen:metadata key=&quot;key2&quot; value=&quot;value/&gt;</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <h3 id="ww_ime" name="ww_ime">Tizen IME</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:ime /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to defines the properties of IME (Input Method Editor) type application, which would be used when the developer wants to create his or her own keyboard module for Tizen platform.</p>\r
+    <table class="note">\r
+    <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note"><span style="font-family: Courier New,Courier,monospace;">&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</span> should be defined to activate &lt;tizen:ime&gt;</td> \r
+    </tr> \r
+    </tbody>\r
+    </table>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or 1</li> \r
+       </ul>\r
+        <p><strong>Expected children:</strong> </p> \r
+    <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">uuid</span> <p>Mandatory; universally unique, an unique identifier that distinguishes an IME from each other, displayed in the form of standard UUID (8-4-4-4-12 for a total of 36 characters)</p></li> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">languages</span> <p>Mandatory; list of input languages that the current IME supports</p>\r
+    <table class="note">\r
+    <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note"><span style="font-family: Courier New,Courier,monospace;">&lt;tizen:language/&gt;</span> elements will be provided as the child elements of this element.</td> \r
+    </tr> \r
+    </tbody>\r
+    </table>\r
+    </li> \r
+    </ul>\r
+         <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:ime&gt;\r
+    &lt;tizen:uuid&gt;6135122a-a428-40d2-8feb-a75f462c202c&lt;/tizen:uuid&gt;\r
+    &lt;tizen:languages&gt;\r
+        &lt;tizen:language&gt;en-us&lt;/tizen:language&gt;\r
+        &lt;tizen:language&gt;de-de&lt;/tizen:language&gt;\r
+    &lt;/tizen:languages&gt;\r
+&lt;/tizen:ime&gt;\r
+\r
+&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <table border="1" id="ww_language" name="ww_language"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:language /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the supported input language of the current IME type application.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>1 or more</li> \r
+       </ul>\r
+         <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:languages&gt;\r
+  &lt;tizen:language&gt;en-us&lt;/tizen:language&gt;\r
+  &lt;tizen:language&gt;de-de&lt;/tizen:language&gt;\r
+&lt;/tizen:languages&gt;</pre><p></p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <h3 id="ww_category" name="ww_category">Tizen Category</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:category /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to define the categories to which the service application belongs.</p>\r
+         <p><strong>Occurrences:</strong> </p>\r
+        <ul>\r
+       <li>0 or more</li>\r
+        </ul>\r
+         <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string</p></li>\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;</pre><p></p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+\r
+  \r
+      <h3 id="ww_service" name="ww_service">Tizen Service</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:service /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define Web Service Application.</p>\r
+\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more</li> \r
+       </ul>\r
+     <p><strong>Expected Children:</strong> </p>\r
+      <ul> \r
+       <li><a href="#ww_service-name">&lt;tizen:name /&gt;</a></li>\r
+       <li><a href="#ww_service-icon">&lt;tizen:icon /&gt;</a></li>\r
+       <li><a href="#ww_service-content">&lt;tizen:content /&gt;</a></li>\r
+       <li><a href="#ww_service-description">&lt;tizen:description /&gt;</a></li>\r
+       <li><a href="#ww_service-metadata">&lt;tizen:metadata /&gt;</a></li>\r
+       <li><a href="#ww_service-category">&lt;tizen:category /&gt;</a></li>\r
+      </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen service ID, which is a combination of the Tizen wearable package ID and service name.</p><p>The service ID is a set of characters (0~9, a~z, A~Z) and unique in the device. The minimum value is 1 byte and maximum value is 52 bytes.</p></li> \r
+      </ul>\r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">auto-restart</span> <p>Optional; Sets whether service application is re-launched automatically when it is terminated. (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> , <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li> \r
+      </ul>\r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">on-boot</span> <p>Optional; Sets whether service application is launched automatically on device booting time. (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> , <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li> \r
+      </ul>\r
+      <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:service id=&quot;webService.application&quot; auto-restart=&quot;true&quot; on-boot=&quot;false&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:name&gt;WebService&lt;/tizen:name&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:icon src=&quot;service-icon.png&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:content src=&quot;service/service.js&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:description&gt;Web Service Application&lt;/tizen:description&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:metadata key=&quot;key1&quot; value=&quot;value1&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;tizen:category name=&quot;http://tizen.org/category/service&quot;/&gt;\r
+&lt;tizen:service&gt;</pre><p></p> </td>\r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+  <table border="1" id="ww_service-name" name="ww_service-name"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:name /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the name of Web Service Application.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>1 or more</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the service name (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li> \r
+      </ul>\r
+       </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <table border="1" id="ww_service-icon" name="ww_service-icon"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:icon /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the icon of Web Service Application.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or 1</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Web Service Application icon. The path is relative to the source Web application directory.</p></li> \r
+      </ul>\r
+       </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <table border="1" id="ww_service-content" name="ww_service-content"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:content /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the start page of the Web Service Application.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>1</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; start JavaScript file path of the Web Service Application. The path is relative to the source Web application directory.</p></li> \r
+      </ul>\r
+       </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <table border="1" id="ww_service-description" name="ww_service-description"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:description /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the description of the Web Service Application.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or 1</li> \r
+       </ul>\r
+       </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <table border="1" id="ww_service-metadata" name="ww_service-metadata"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:metadata /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define metadata information shared with other Web Applications. The defined metadata can be accessed (read-only) through the Tizen Application API.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">key</span> <p>Mandatory; unique key string</p></li> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Optional; string</p></li> \r
+      </ul>\r
+       </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <table border="1" id="ww_service-category" name="ww_service-category"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:category /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the categories that the service application belongs to.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>0 or more</li> \r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> \r
+      </ul>\r
+       </td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <h3 id="ww_profile" name="ww_profile">Tizen Profile</h3> \r
+  <table border="1"> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;tizen:profile /&gt;</span> element</p></th> \r
+    </tr> \r
+    <tr> \r
+     <td> <p>Used to define the application profile.</p>\r
+        <p><strong>Occurrences:</strong> </p> \r
+       <ul> \r
+       <li>1</li>\r
+       </ul>\r
+        <p><strong>Attributes:</strong> </p> \r
+      <ul> \r
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li> \r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;wearable&quot; /&gt;</pre><p></p> </td>\r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+\r
+    <h3 id="ww_feature" name="ww_feature">Tizen Feature</h3>\r
+  <table border="1">\r
+   <tbody>\r
+    <tr>\r
+     <th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element</p></th>\r
+    </tr>\r
+    <tr>\r
+     <td> <p>Used to define hardware and software components for a Tizen wearable Web application. This attribute is only used in the Samsung Apps for filtering purposes. It is ignored by the Web Runtime installation procedure.</p>\r
+     <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">Even though the <span style="font-family: Courier New,Courier,monospace">&lt;feature /&gt;</span> element is defined in the Widget Packaging and XML Configuration guidelines, in Tizen, an extended version is used.\r
+</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+     <p><strong>Occurrences:</strong> </p>\r
+    <ul>\r
+       <li>0 or more</li>\r
+    </ul>\r
+     <p><strong>Attributes:</strong> </p>\r
+      <ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>\r
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name=&quot;http://tizen.org/feature/network.bluetooth&quot; /&gt;</pre><p></p> </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+ \r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/js_log_console_w.htm b/org.tizen.devtools/html/web_tools/js_log_console_w.htm
index 7480a01..e3c903b 100644 (file)
--- a/org.tizen.devtools/html/web_tools/js_log_console_w.htm
+++ b/org.tizen.devtools/html/web_tools/js_log_console_w.htm
@@ -20,7 +20,7 @@
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
-       </div>  
+       </div>  \r
  
   <h1>JavaScript Log Console View</h1> 
   <p>The <strong>JavaScript Log Console</strong> view provides a functionality to view Web application JavaScript logs. The <strong>JavaScript Log Console</strong> view is automatically opened when a Web application is launched.</p> 
diff --git a/org.tizen.devtools/html/web_tools/privilege_checker_w.htm b/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
index a4d2a68..af341b5 100644 (file)
--- a/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
+++ b/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
@@ -1,70 +1,70 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-  <title>Privilege Checker </title> 
- </head> 
- <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
-       </div>
-       
-  <h1>Privilege Checker</h1> 
-  <p>The IDE provides the privilege checker tool to identify potential problems in the application code related to <a href="../../../org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm">privilege usage</a>.</p>
-  <p>You can enable the checks in the <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm">project properties </a> during the <a href="../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm#build">build process</a> or code editing. You can also perform the checks manually in the IDE by selecting <strong>Project &gt; Check Privilege</strong>.</p>
-<p>The Privilege Checker tool is based on the <a href="content_assist_w.htm">Content Assist</a> Engine for Tizen IDE. It is used for codes that do not operate Content Assist and cannot perform checks. Therefore, the check results can possibly have missing (unsound) values.</p>
-<p>The check results are displayed in the <strong>Problems</strong> view and vertical ruler. To resolve an alarm, click the annotation on the vertical ruler and select an entry from the proposal list. The required privilege is automatically added into <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (for a quick fix, use the <strong>Ctrl+1</strong> keyboard shortcut).</p>
-<table border="1">
-  <caption>Table: Privilege check alarms</caption>
-  <tbody> 
-  <tr>
-       <th>Alarm type</th>
-       <th>Description</th>
-       <th>Message format</th>
-       <th>Required actions</th>
-  </tr>
-  <tr>
-       <td>Undefined privilege alarm</td>
-       <td>The application uses a method whose privilege is not specified in the configuration file.</td>
-       <td>The <span style="font-family: Courier New,Courier,monospace">[tizen:Privilege name]</span> privilege is required. <p>For example (in a mobile Web application): <span style="font-family: Courier New,Courier,monospace">[http://tizen.org/privilege/application.launch]</span> privilege is required. </p></td>
-       <td>Assign the privilege in the configuration file in the IDE. Privilege violation is a strong reason for the rejection of an application in the certification process.</td>
-  </tr>
-  </tbody>
- </table>
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+  <title>Privilege Checker </title> \r
+ </head> \r
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+  <h1>Privilege Checker</h1> \r
+  <p>The IDE provides the privilege checker tool to identify potential problems in the application code related to <a href="../../../org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm">privilege usage</a>.</p>\r
+  <p>You can enable the checks in the <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm">project properties </a> during the <a href="../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm#build">build process</a> or code editing. You can also perform the checks manually in the IDE by selecting <strong>Project &gt; Check Privilege</strong>.</p>\r
+<p>The Privilege Checker tool is based on the <a href="content_assist_w.htm">Content Assist</a> Engine for Tizen IDE. It is used for codes that do not operate Content Assist and cannot perform checks. Therefore, the check results can possibly have missing (unsound) values.</p>\r
+<p>The check results are displayed in the <strong>Problems</strong> view and vertical ruler. To resolve an alarm, click the annotation on the vertical ruler and select an entry from the proposal list. The required privilege is automatically added into <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (for a quick fix, use the <strong>Ctrl+1</strong> keyboard shortcut).</p>\r
+<table border="1">\r
+  <caption>Table: Privilege check alarms</caption>\r
+  <tbody> \r
+  <tr>\r
+       <th>Alarm type</th>\r
+       <th>Description</th>\r
+       <th>Message format</th>\r
+       <th>Required actions</th>\r
+  </tr>\r
+  <tr>\r
+       <td>Undefined privilege alarm</td>\r
+       <td>The application uses a method whose privilege is not specified in the configuration file.</td>\r
+       <td>The <span style="font-family: Courier New,Courier,monospace">[tizen:Privilege name]</span> privilege is required. <p>For example (in a mobile Web application): <span style="font-family: Courier New,Courier,monospace">[http://tizen.org/privilege/application.launch]</span> privilege is required. </p></td>\r
+       <td>Assign the privilege in the configuration file in the IDE. Privilege violation is a strong reason for the rejection of an application in the certification process.</td>\r
+  </tr>\r
+  </tbody>\r
+ </table>\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm b/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
index c2beb6e..2778e1d 100644 (file)
--- a/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
+++ b/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
@@ -1,165 +1,165 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-  <title>IDE Preferences </title>
-</head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-       <div id="profile">
-               <p>
-               <img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                  <li><a href="#wid">Widget ID</a></li>
-                  <li><a href="#chrome">Chrome&trade; Browser Path</a></li>
-                  <li><a href="#editor">Editor</a></li>
-                  <li><a href="#config">Configuration Editor</a></li>
-                  <li><a href="#css">CSS Editor</a></li>
-                  <li><a href="#html_editor">HTML Editor</a></li>
-                  <li><a href="#javascript">JavaScript Editor</a></li>
-                  <li><a href="#json">Json Editor</a></li>
-                  <li><a href="#nls">National Language Support (NLS)</a></li>
-                  <li><a href="#launch">Launch</a></li>
-                  <li><a href="#live">Live Editing</a></li>
-               </ul>
-       </div></div>    
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>IDE Preferences</h1>
- 
-  <p>To set Web IDE preferences, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web</strong> in the Tizen IDE menu.</p>
-  <p>You can set the preferences introduced in the following sections.</p>
-
-  <h2 id="wid" name="wid">Widget ID</h2>
-  <p>To set a customized prefix for the widget ID, enter the value in the <strong>Prefix to the Widget ID</strong> field. The default value of this field is <strong>http://yourdomain/</strong>.</p>
-  <p>The value is automatically used in all widget IDs when you create a new Web application in the IDE. You can view the widget ID in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the project.</p>
-
-  <h2 id="chrome" name="chrome">Chrome&trade; Browser Path</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Chrome</strong>.</p>
-  <p>The Google Chrome&trade; browser location is automatically set as default if the Chrome&trade; browser is installed in your system.</p>
-  <p>In case you install the browser in a custom path, the IDE cannot automatically detect the path and you must set the location manually.</p>
-
-  <h2 id="editor" name="editor">Editor</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor</strong>.</p>
-  <p>Tizen SDK provides advanced editor features, such as file path content assist. These features are required to search files in the project.</p>
-  <p><strong>Project Resource Lookup Setting &gt; Excluded Folders</strong>: Specify the folders that you want to exclude from searching files.</p>
-
-  <h2 id="config" name="config">Configuration Editor</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; Configuration Editor</strong>.</p>
-  <p>To stop error messages from being displayed if you incorrectly modify the <span style="font-family: Courier New,Courier,monospace">config.xml</span> source file, select the <strong>Don&#39;t show error message</strong> check box.</p>
-
-  <h2 id="css" name="css">CSS Editor</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; CSS Editor</strong>.</p>
-  <p>Tizen provides the W3C CSS validation parser for checking the CSS syntax.</p>
-  <p>You can set the following validation times:</p>
-  <ul>
-   <li>Build</li>
-   <li>Reconcile</li>
-  </ul>
-  <p>You can set the following check levels:</p>
-  <ul>
-   <li>Ignore</li>
-   <li>Warning</li>
-   <li>Error</li>
-  </ul>
-  <p>You can exclude CSS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, TAU(Tizen Advanced UI), globalize, coderdeck, modernizr</strong>. For instance, since parsing the <span style="font-family: Courier New,Courier,monospace">jquery.mobile-1.0a4.1.min.css</span> file generates many warnings, the default pattern string values exclude the parsing of this CSS file.</p>
-
-  <h2 id="html_editor" name="html_editor">HTML Editor</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; HTML Editor</strong>.</p>
-  <p>You can set the visibility of the breadcrumb control in the HTML editor. If you clear the <strong>Show breadcrumb</strong> checkbox, the breadcrumb control is not visible in the HTML editor.</p>
-
-  <h2 id="javascript" name="javascript">JavaScript Editor</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; JavaScript Editor</strong>.</p>
-  <p>In the JavaScript Editor, you can modify several <a href="http://www.jslint.com/lint.html" target="_blank">JSLint</a> options. JSLint is a JavaScript code quality tool.</p>
-
-  <h2 id="json" name="json">Json Editor</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; Json Editor</strong>.</p>
-  <p>You can insert spaces for tabs in JSON by selecting the <strong>Insert Spaces for Tabs</strong> check box. In the <strong>Number of spaces to indent </strong> field, enter the number of spaces to indent for tabs.</p>
-
-  <h2 id="nls" name="nls">National Language Support</h2>
-  <p>You can view the Tizen IDE in the following languages:</p>
-  <ul>
-   <li>en (English) <p>This is the default language.</p> </li>
-   <li>de (German)</li>
-   <li>es (Spanish)</li>
-   <li>fr (French)</li>
-   <li>it (Italian)</li>
-   <li>ja (Japanese)</li>
-   <li>ko (Korean)</li>
-   <li>pt_BR (Portuguese)</li>
-   <li>zh (Chinese)</li>
-   <li>zh_TW (Chinese Traditional)</li>
-  </ul>
-  <p>To support a language, you must specify the language code. For example, to support the Korean language, edit the <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file, which is located in your <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_HOME&gt;/ide</span> directory.</p>
-  <p>The following snippet shows the current <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file supporting the English language:</p>
-  <pre class="prettyprint">-clean
--nl
-en
--vmargs
-</pre>
-  <p>To support the Korean language, replace <span style="font-family: Courier New,Courier,monospace">en</span> with <span style="font-family: Courier New,Courier,monospace">ko</span> and save the <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file.</p>
-  <pre class="prettyprint">-clean
--nl
-ko
--vmargs
-</pre>
-
-<h2 id="launch" name="launch">Launch</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Launch</strong>.</p>
-  <p>Check the option, if you want to launch the application even when the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file has an error. The option is not checked by default.</p>
-
-  <h2 id="live" name="live">Live Editing</h2>
-  <p>Go to <strong>Tizen SDK &gt; Web &gt; Live Editing</strong>.</p>
-  <p>You can select only 1 preview preference option, which is whether file content or editor content in shown in the application:</p>
-<ul>
-<li>Select <strong>File</strong> to change the application when a file is saved.</li>
-<li>Select <strong>Editor</strong> to change the application when the editor content changes. This means that your changes are reflected without saving the changes.</li>
-<li>Select <strong>None</strong> to perform no synchronization.</li></ul>
-
-<p>The following options are also available:</p>
-<ul>
-               <li><strong>Live highlight</strong>: Check to highlight your cursor in the editor.
-            <p>The option is only available when synchronization with the editor is selected above.</p></li>
-        <li><strong>Enable live-editing as default when emulator is launched</strong>: Check to enable live editing by default whenever running an application.</li>
-</ul>  
-
-                <p class="figure">Figure: Live highlight</p> 
-  <p align="center"><img alt="Live highlight" src="../images/live_highlight.png" /></p>  
- 
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+  <title>IDE Preferences </title>\r
+</head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p>\r
+               <img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                  <li><a href="#wid">Widget ID</a></li>\r
+                  <li><a href="#chrome">Chrome&trade; Browser Path</a></li>\r
+                  <li><a href="#editor">Editor</a></li>\r
+                  <li><a href="#config">Configuration Editor</a></li>\r
+                  <li><a href="#css">CSS Editor</a></li>\r
+                  <li><a href="#html_editor">HTML Editor</a></li>\r
+                  <li><a href="#javascript">JavaScript Editor</a></li>\r
+                  <li><a href="#json">Json Editor</a></li>\r
+                  <li><a href="#nls">National Language Support (NLS)</a></li>\r
+                  <li><a href="#launch">Launch</a></li>\r
+                  <li><a href="#live">Live Editing</a></li>\r
+               </ul>\r
+       </div></div>    \r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>IDE Preferences</h1>\r
+ \r
+  <p>To set Web IDE preferences, go to <strong>Window &gt; Preferences &gt; Tizen SDK &gt; Web</strong> in the Tizen IDE menu.</p>\r
+  <p>You can set the preferences introduced in the following sections.</p>\r
+\r
+  <h2 id="wid" name="wid">Widget ID</h2>\r
+  <p>To set a customized prefix for the widget ID, enter the value in the <strong>Prefix to the Widget ID</strong> field. The default value of this field is <strong>http://yourdomain/</strong>.</p>\r
+  <p>The value is automatically used in all widget IDs when you create a new Web application in the IDE. You can view the widget ID in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the project.</p>\r
+\r
+  <h2 id="chrome" name="chrome">Chrome&trade; Browser Path</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Chrome</strong>.</p>\r
+  <p>The Google Chrome&trade; browser location is automatically set as default if the Chrome&trade; browser is installed in your system.</p>\r
+  <p>In case you install the browser in a custom path, the IDE cannot automatically detect the path and you must set the location manually.</p>\r
+\r
+  <h2 id="editor" name="editor">Editor</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor</strong>.</p>\r
+  <p>Tizen SDK provides advanced editor features, such as file path content assist. These features are required to search files in the project.</p>\r
+  <p><strong>Project Resource Lookup Setting &gt; Excluded Folders</strong>: Specify the folders that you want to exclude from searching files.</p>\r
+\r
+  <h2 id="config" name="config">Configuration Editor</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; Configuration Editor</strong>.</p>\r
+  <p>To stop error messages from being displayed if you incorrectly modify the <span style="font-family: Courier New,Courier,monospace">config.xml</span> source file, select the <strong>Don&#39;t show error message</strong> check box.</p>\r
+\r
+  <h2 id="css" name="css">CSS Editor</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; CSS Editor</strong>.</p>\r
+  <p>Tizen provides the W3C CSS validation parser for checking the CSS syntax.</p>\r
+  <p>You can set the following validation times:</p>\r
+  <ul>\r
+   <li>Build</li>\r
+   <li>Reconcile</li>\r
+  </ul>\r
+  <p>You can set the following check levels:</p>\r
+  <ul>\r
+   <li>Ignore</li>\r
+   <li>Warning</li>\r
+   <li>Error</li>\r
+  </ul>\r
+  <p>You can exclude CSS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, TAU(Tizen Advanced UI), globalize, coderdeck, modernizr</strong>. For instance, since parsing the <span style="font-family: Courier New,Courier,monospace">jquery.mobile-1.0a4.1.min.css</span> file generates many warnings, the default pattern string values exclude the parsing of this CSS file.</p>\r
+\r
+  <h2 id="html_editor" name="html_editor">HTML Editor</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; HTML Editor</strong>.</p>\r
+  <p>You can set the visibility of the breadcrumb control in the HTML editor. If you clear the <strong>Show breadcrumb</strong> checkbox, the breadcrumb control is not visible in the HTML editor.</p>\r
+\r
+  <h2 id="javascript" name="javascript">JavaScript Editor</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; JavaScript Editor</strong>.</p>\r
+  <p>In the JavaScript Editor, you can modify several <a href="http://www.jslint.com/lint.html" target="_blank">JSLint</a> options. JSLint is a JavaScript code quality tool.</p>\r
+\r
+  <h2 id="json" name="json">Json Editor</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Editor &gt; Json Editor</strong>.</p>\r
+  <p>You can insert spaces for tabs in JSON by selecting the <strong>Insert Spaces for Tabs</strong> check box. In the <strong>Number of spaces to indent </strong> field, enter the number of spaces to indent for tabs.</p>\r
+\r
+  <h2 id="nls" name="nls">National Language Support</h2>\r
+  <p>You can view the Tizen IDE in the following languages:</p>\r
+  <ul>\r
+   <li>en (English) <p>This is the default language.</p> </li>\r
+   <li>de (German)</li>\r
+   <li>es (Spanish)</li>\r
+   <li>fr (French)</li>\r
+   <li>it (Italian)</li>\r
+   <li>ja (Japanese)</li>\r
+   <li>ko (Korean)</li>\r
+   <li>pt_BR (Portuguese)</li>\r
+   <li>zh (Chinese)</li>\r
+   <li>zh_TW (Chinese Traditional)</li>\r
+  </ul>\r
+  <p>To support a language, you must specify the language code. For example, to support the Korean language, edit the <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file, which is located in your <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_HOME&gt;/ide</span> directory.</p>\r
+  <p>The following snippet shows the current <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file supporting the English language:</p>\r
+  <pre class="prettyprint">-clean\r
+-nl\r
+en\r
+-vmargs\r
+</pre>\r
+  <p>To support the Korean language, replace <span style="font-family: Courier New,Courier,monospace">en</span> with <span style="font-family: Courier New,Courier,monospace">ko</span> and save the <span style="font-family: Courier New,Courier,monospace">eclipse.ini</span> file.</p>\r
+  <pre class="prettyprint">-clean\r
+-nl\r
+ko\r
+-vmargs\r
+</pre>\r
+\r
+<h2 id="launch" name="launch">Launch</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Launch</strong>.</p>\r
+  <p>Check the option, if you want to launch the application even when the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file has an error. The option is not checked by default.</p>\r
+\r
+  <h2 id="live" name="live">Live Editing</h2>\r
+  <p>Go to <strong>Tizen SDK &gt; Web &gt; Live Editing</strong>.</p>\r
+  <p>You can select only 1 preview preference option, which is whether file content or editor content in shown in the application:</p>\r
+<ul>\r
+<li>Select <strong>File</strong> to change the application when a file is saved.</li>\r
+<li>Select <strong>Editor</strong> to change the application when the editor content changes. This means that your changes are reflected without saving the changes.</li>\r
+<li>Select <strong>None</strong> to perform no synchronization.</li></ul>\r
+\r
+<p>The following options are also available:</p>\r
+<ul>\r
+               <li><strong>Live highlight</strong>: Check to highlight your cursor in the editor.\r
+            <p>The option is only available when synchronization with the editor is selected above.</p></li>\r
+        <li><strong>Enable live-editing as default when emulator is launched</strong>: Check to enable live editing by default whenever running an application.</li>\r
+</ul>  \r
+\r
+                <p class="figure">Figure: Live highlight</p> \r
+  <p align="center"><img alt="Live highlight" src="../images/live_highlight.png" /></p>  \r
+ \r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.devtools/plugin.xml b/org.tizen.devtools/plugin.xml
index 90140e5..4c22a91 100644 (file)
--- a/org.tizen.devtools/plugin.xml
+++ b/org.tizen.devtools/plugin.xml
@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?eclipse version="3.0"?>
-
-<plugin>
-       <extension point="org.eclipse.help.toc">
-               <toc file="index.xml" primary="true" />
-       </extension>
-</plugin>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<?eclipse version="3.0"?>\r
+\r
+<plugin>\r
+       <extension point="org.eclipse.help.toc">\r
+               <toc file="index.xml" primary="true" />\r
+       </extension>\r
+</plugin>\r
diff --git a/org.tizen.gettingstarted/.project b/org.tizen.gettingstarted/.project
index 9222ca6..0bd68f6 100644 (file)
--- a/org.tizen.gettingstarted/.project
+++ b/org.tizen.gettingstarted/.project
@@ -1,22 +1,22 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-       <name>org.tizen.gettingstarted_2.4.0</name>
-       <comment></comment>
-       <projects>
-       </projects>
-       <buildSpec>
-               <buildCommand>
-                       <name>org.eclipse.pde.ManifestBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.eclipse.pde.SchemaBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-       </buildSpec>
-       <natures>
-               <nature>org.eclipse.pde.PluginNature</nature>
-       </natures>
-</projectDescription>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<projectDescription>\r
+       <name>org.tizen.gettingstarted_2.4.0</name>\r
+       <comment></comment>\r
+       <projects>\r
+       </projects>\r
+       <buildSpec>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.ManifestBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.SchemaBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+       </buildSpec>\r
+       <natures>\r
+               <nature>org.eclipse.pde.PluginNature</nature>\r
+       </natures>\r
+</projectDescription>\r
diff --git a/org.tizen.gettingstarted/META-INF/MANIFEST.MF b/org.tizen.gettingstarted/META-INF/MANIFEST.MF
index f7c2773..765732d 100644 (file)
--- a/org.tizen.gettingstarted/META-INF/MANIFEST.MF
+++ b/org.tizen.gettingstarted/META-INF/MANIFEST.MF
@@ -1,7 +1,7 @@
-Manifest-Version: 1.0
-Bundle-ManifestVersion: 1
-Bundle-Name: Getting Started with Tizen
-Bundle-SymbolicName: org.tizen.gettingstarted;singleton=true
-Bundle-Version: 2.4.0
-Bundle-Vendor: The Linux Foundation
-
+Manifest-Version: 1.0\r
+Bundle-ManifestVersion: 1\r
+Bundle-Name: Getting Started with Tizen\r
+Bundle-SymbolicName: org.tizen.gettingstarted;singleton=true\r
+Bundle-Version: 2.4.0\r
+Bundle-Vendor: The Linux Foundation\r
+\r
diff --git a/org.tizen.gettingstarted/build.properties b/org.tizen.gettingstarted/build.properties
index 2694af2..375dc32 100644 (file)
--- a/org.tizen.gettingstarted/build.properties
+++ b/org.tizen.gettingstarted/build.properties
@@ -1,11 +1,11 @@
-bin.includes = plugin.xml,\
-               META-INF/,\
-               html/,\
-               build.properties,\
-               .project,\
-               index.xml,\
-               about.html
-                          
-                                  
-
-
+bin.includes = plugin.xml,\\r
+               META-INF/,\\r
+               html/,\\r
+               build.properties,\\r
+               .project,\\r
+               index.xml,\\r
+               about.html\r
+                          \r
+                                  \r
+\r
+\r
diff --git a/org.tizen.gettingstarted/html/cover_page.htm b/org.tizen.gettingstarted/html/cover_page.htm
index d7b2b17..b3a9939 100644 (file)
--- a/org.tizen.gettingstarted/html/cover_page.htm
+++ b/org.tizen.gettingstarted/html/cover_page.htm
@@ -47,7 +47,7 @@
 
 <p>For more information about developing Tizen applications, see:</p>
 <ul>
-<!--<li><a href="../../org.tizen.ui.guides/html/cover_page.htm">Tizen UI Guides</a></li>-->
+<li><a href="../../org.tizen.ui.guides/html/cover_page.htm">Tizen UI Guides</a></li>
 <li><a href="../../org.tizen.tutorials/html/cover_page.htm">Tizen Tutorials</a></li>
 <li><a href="../../org.tizen.guides/html/cover_page.htm">Tizen Guides</a></li>
 <li><a href="../../org.tizen.web.apireference/html/cover_page.htm">Tizen API References</a></li>
diff --git a/org.tizen.gettingstarted/html/css/snippet.css b/org.tizen.gettingstarted/html/css/snippet.css
index f880409..2be1b1f 100644 (file)
--- a/org.tizen.gettingstarted/html/css/snippet.css
+++ b/org.tizen.gettingstarted/html/css/snippet.css
@@ -1,52 +1,52 @@
-/* Pretty printing styles. Used with prettify.js. */
-
-/* SPAN elements with the classes below are added by prettyprint. */
-.pln { color: #000 }  /* plain text */
-
-@media screen {
-  .str { color: #793AFF }  /* string content */
-  .kwd { color: #7F0055 }  /* a keyword */
-  .com { color: green}  /* a comment */
-  .typ { color: #1C1C1C }  /* a type name */
-  .lit { color: black }  /* a literal value */
-  /* punctuation, lisp open bracket, lisp close bracket */
-  .pun, .opn, .clo { color: #1C1C1C}
-  .tag { color: #008 }  /* a markup tag name */
-  .atn { color: #606 }  /* a markup attribute name */
-  .atv { color: #080 }  /* a markup attribute value */
-  .dec, .var { color: #606 }  /* a declaration; a variable name */
-  .fun { color: red }  /* a function name */
-}
-
-/* Use higher contrast and text-weight for printable form. */
-@media print, projection {
-  .str { color: #060 }
-  .kwd { color: #006; font-weight: bold }
-  .com { color: #600; font-style: italic }
-  .typ { color: #404; font-weight: bold }
-  .lit { color: #044 }
-  .pun, .opn, .clo { color: #440 }
-  .tag { color: #006; font-weight: bold }
-  .atn { color: #404 }
-  .atv { color: #060 }
-}
-
-/* Put a border around prettyprinted code snippets. */
-pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L5,
-li.L6,
-li.L7,
-li.L8 { list-style-type: none }
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 { background: #eee }
+/* Pretty printing styles. Used with prettify.js. */\r
+\r
+/* SPAN elements with the classes below are added by prettyprint. */\r
+.pln { color: #000 }  /* plain text */\r
+\r
+@media screen {\r
+  .str { color: #793AFF }  /* string content */\r
+  .kwd { color: #7F0055 }  /* a keyword */\r
+  .com { color: green}  /* a comment */\r
+  .typ { color: #1C1C1C }  /* a type name */\r
+  .lit { color: black }  /* a literal value */\r
+  /* punctuation, lisp open bracket, lisp close bracket */\r
+  .pun, .opn, .clo { color: #1C1C1C}\r
+  .tag { color: #008 }  /* a markup tag name */\r
+  .atn { color: #606 }  /* a markup attribute name */\r
+  .atv { color: #080 }  /* a markup attribute value */\r
+  .dec, .var { color: #606 }  /* a declaration; a variable name */\r
+  .fun { color: red }  /* a function name */\r
+}\r
+\r
+/* Use higher contrast and text-weight for printable form. */\r
+@media print, projection {\r
+  .str { color: #060 }\r
+  .kwd { color: #006; font-weight: bold }\r
+  .com { color: #600; font-style: italic }\r
+  .typ { color: #404; font-weight: bold }\r
+  .lit { color: #044 }\r
+  .pun, .opn, .clo { color: #440 }\r
+  .tag { color: #006; font-weight: bold }\r
+  .atn { color: #404 }\r
+  .atv { color: #060 }\r
+}\r
+\r
+/* Put a border around prettyprinted code snippets. */\r
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }\r
+\r
+/* Specify class=linenums on a pre to get line numbering */\r
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */\r
+li.L0,\r
+li.L1,\r
+li.L2,\r
+li.L3,\r
+li.L5,\r
+li.L6,\r
+li.L7,\r
+li.L8 { list-style-type: none }\r
+/* Alternate shading for lines */\r
+li.L1,\r
+li.L3,\r
+li.L5,\r
+li.L7,\r
+li.L9 { background: #eee }\r
diff --git a/org.tizen.gettingstarted/html/css/styles.css b/org.tizen.gettingstarted/html/css/styles.css
index 4c8f5a8..ad7ebcb 100644 (file)
--- a/org.tizen.gettingstarted/html/css/styles.css
+++ b/org.tizen.gettingstarted/html/css/styles.css
@@ -1,756 +1,756 @@
-@charset "utf-8";
-
-body {
-       background: white;
-       color: #1C1C1C;
-       margin-right: 20px;
-       margin-left: 20px;
-       font-size: 9pt;
-       font-weight: normal;
-       font-family: Arial, Helvetica, sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
-       font-family: Arial, Verdana, Helvetica, sans-serif
-       }
-
-/*     Set default font to 9 pt        */
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
-       font-size: 9pt;
-}
-       
-pre, code { 
-       font-family: "Courier New", Courier, monospace;
-       border: 1px solid #719cc7;
-       margin: 6px 1.5px;
-       padding: 1px 1px 1px 1px;
-       font-weight: normal;
-       font-style: normal;
-}
-
-h1 {font-size: 24pt; color: #0E437D;}
-h2 {font-size: 18pt; color: #0E437D;}
-h3 {font-size: 14pt; color: #1C1C1C;}
-h4 {font-size: 12pt; color: #1C1C1C;}
-h5 {font-size: 10pt; color: #1C1C1C;}
-       
-h1, h2, h3, h4, h5 {
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-
-caption, p.caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: left;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-ol  {
-       margin-bottom: 20px;
-}
-
-ul ul , ol ul, ul ol, ol ol{
-       margin-top: 10px;
-}
-
-ul li, ol li {
-       margin-bottom: 10px;
-}
-
-ol.tutorstep li {
-       border-top: 2px solid #719cc7;
-       list-style-position: inside;
-       font-weight: bold;
-       margin-top: 30px;
-       margin-left: -20px;
-       padding-top: 3px;
-       font-size: 12pt;
-}
-
-ol.tutorstep li p{
-       font-size: 9pt;
-       font-weight: normal;
-       margin-top: 10px;
-}
-
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
-       font-size: 9pt;
-       list-style-position: outside; 
-       margin-left: 0px;
-       font-weight: normal;
-}
-
-ol.tutorstep ol li p, ol.tutorstep ul li p {
-       font-size: 9pt;
-       font-weight: normal; 
-       margin-top: 5px;
-}
-
-ol li p, ul li p {
-       font-size: 9pt;
-       font-weight: normal;
-       margin-bottom: 2px;
-       margin-top: 2px;
-}
-
-ol ol , ol.tutorstep ol{
-       font-size: 9pt;
-       font-weight: normal;
-       list-style-type: lower-alpha;
-       color: #1C1C1C; 
-       border-style: none;
-       margin-top: 10px; 
-}
-
-ol.tutorstep ul {
-       margin-top: 10px;
-       font-size: 9pt;
-}
-
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
-       border-style: none;
-       margin-top: 5px;
-       font-size: 9pt;
-}
-
-ul {
-       font-size: 9pt;
-       font-weight: normal;
-       color: #1C1C1C;
-}
-
-
-/*     End of font face declarations   */
-
-/*     Set table borders and heading row background    */
-table {
-       border: 0px;
-       border-collapse: collapse;
-       width: 100%;
-       margin-top: 20px;
-       margin-bottom: 20px;
-       background: white;
-}
-
-th {
-       border-top: 2px solid #719cc7;
-       border-right: 1px solid #c6d9f1;
-       border-left: 1px solid #c6d9f1;
-       background-color: #f3f7fb;
-       padding: 4px;
-       color: #719cc7;
-       font-size: 9pt;
-       font-weight: bold;
-}      
-       
-td {
-       border: 1px solid #c6d9f1;
-       vertical-align:top;
-       padding: 3px 20px 5px 20px;
-       }
-
-td.middle {
-       border: 1px solid #c6d9f1;
-       vertical-align:middle;
-       padding: 3px 20px 5px 20px;
-       }       
-       
-/*     Notes stand out using a light top & bottom borders with yellow background       */
-table.note {
-       border-top: 2px solid #719cc7;
-       border-left: 0px;
-       border-right: 0px;
-       width: 100%;
-}
-
-tr.note {
-       text-align: left;
-}
-
-th.note {
-       text-align: left;
-       background-color: #ddd9c3;
-       background-image: note.gif;
-       border-top: 2px solid #719cc7;
-       border-bottom:1px solid #719cc7;
-       border-right: none;
-
-}
-
-td.note, p.note {
-       background-color: #eeece1;
-       color: #1C1C1C;
-       padding: 5px;
-       margin-top:12px;
-       margin-bottom:12px;
-       border: none;
-}
-       
-/*     Figure titles are centered and bolded   */
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
-       text-align: center;
-       font-weight: bold;
-}
-
-/*     Red background and white text for things that need fixing before release        */
-.fix   {
-       background-color: red;
-       font-weight: bold;
-       color: white;
-       }
-
-/* Classes for creating collapsible content */
-#banner {
-       padding: 8px 4px 8px 4px;
-       /* top right bottom left */
-       border: 1px solid #7f7f7f;
-       width: 100%;
-       background-image: url("banner.png");
-       text-align: left;
-       font-weight: bold;
-       font-size: 9pt;
-       color: #ffffff;
-}
-
-#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
-#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
-#main {width: 75%; height: 90%;}
-#container {width:100%;}
-#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
-body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #toc-navigation {width: auto;}
-body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
-body.no-toc #profile {float: right;right: -32px;}
-body.no-toc #profile p {padding: 0; margin: 0;}
-#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
-       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
-       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
-
-.devicespecs-util {float:right; margin-top:25px;}
-       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
-       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
-       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
-       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
-       .devicespecs-util ul.dutil li a:hover { color:#222; }
-       .devicespecs-util ul.dutil li a:active { color:#222; }
-
-ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
-ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
-ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
-ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
-       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
-
-       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
-       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
-
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
-
-.static-cont {width:100%; margin-bottom:40px;}
-       
-.top {text-align: right;}
-.toc, ul.toc{
-       margin: 10px 0px 0px 0px;
-       padding-left: 13px;
-       list-style: disc;
-       font-size: 9pt;
-       line-height: 115%; 
-       }
-       
-.toc-title {
-       font-size: 12pt;
-       color: #0E437D; 
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-       
-a.top {
-       display:block; 
-       float: right; 
-       position:fixed;
-       width: 28px; 
-       height:89px; 
-       bottom:50px;
-       z-index: 101;
-       right: 19%;
-       }
-
-a img {border: 0;}
-       
-/*     Footer includes space and a gray line above             */
-#footer {
-       position: fixed;
-       /* width: 100%; */
-    bottom: 0px;
-       text-align: center;
-       border-top: 1px solid #CCCCCC;
-       background-color: #FFFFFF;      
-       left: 21px;  right: 21px;
-}
-
-.footer {font-size: 8pt;}
-       
-caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: center;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-div.qindex, div.navpath, div.navtab{
-       background-color: #e8eef2;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       padding: 2px;
-}
-
-div.qindex, div.navpath {
-       width: 100%;
-       line-height: 140%;
-}
-
-div.navtab {
-       margin-right: 15px;
-}
-
-/* @group Link Styling */
-
-a:link {
-       color: #719cc7;
-       text-decoration: underline;
-       font-weight: bold;
-}
-
-a:hover { 
-       color: #0e437d;
-}
-
-a:visited {
-       text-decoration: underline;
-       color: #719cc7;
-       font-weight: bold;
-}
-
-a.qindex {
-       font-weight: bold;
-       padding: 2px;
-}
-
-a.qindex:hover {
-       text-decoration: underline;
-       color: #0e437d;
-       padding: 2px;
-}
-
-a.qindex:visited {
-       text-decoration: underline;
-       font-weight: bold;
-       color: #719cc7;
-       padding: 2px;
-}
-
-a.qindexHL {
-       text-decoration: underline;
-       font-weight: bold;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-       border: 1px double #9295C2;
-}
-
-a.qindexHL:hover {
-       text-decoration: none;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-}
-
-dl.el { 
-       margin-left: -1cm 
-}
-
-.fragment {
-       font-family: monospace, fixed;
-       font-size: 105%;
-}
-
-pre.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 4px 6px;
-       margin: 4px 8px 4px 2px;
-}
-
-div.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 6px;
-}
-
-div.ah { 
-       background-color: black; 
-       font-weight: bold; 
-       color: #ffffff; 
-       margin-bottom: 3px; 
-       margin-top: 3px 
-}
-
-td.md { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-}
-
-td.mdname1 { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-}
-
-td.mdname { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-       width: 600px; 
-}
-
-div.groupHeader {
-       margin-left: 16px;
-       margin-top: 12px;
-       margin-bottom: 6px;
-       font-weight: bold;
-}
-
-div.groupText { 
-       margin-left: 16px; 
-       font-style: italic; 
-}
-
-td.indexkey {
-       background-color: #eeeeff;
-       font-weight: bold;
-       border: 1px solid #CCCCCC;
-       margin: 2px 0px 2px 0;
-       padding: 2px 10px;
-}
-
-td.indexvalue {
-       background-color: #eeeeff;
-       border: 1px solid #CCCCCC;
-       padding: 2px 10px;
-       margin: 2px 0px;
-}
-
-tr.memlist {
-   background-color: #f0f0f0; 
-}
-
-p.formulaDsp { 
-       text-align: center; 
-}
-
-img.formulaDsp { 
-}
-
-img.formulaInl { 
-       vertical-align: middle; 
-}
-
-/* @group Code Colorization */
-
-span.keyword       { color: #008000 }
-span.keywordtype   { color: #604020 }
-span.keywordflow   { color: #e08000 }
-span.comment       { color: #800000 }
-span.preprocessor  { color: #806020 }
-span.stringliteral { color: #002080 }
-span.charliteral   { color: #008080 }
-span.vhdldigit     { color: #ff00ff }
-span.vhdlchar      { color: #000000 }
-span.vhdlkeyword   { color: #700070 }
-span.vhdllogic     { color: #ff0000 }
-
-.mdTable {
-       border: 1px solid #868686;
-       background-color: #F4F4FB;
-}
-
-.mdRow {
-       padding: 8px 10px;
-}
-
-/* @group Member Descriptions */
-
-.mdescLeft, .mdescRight,
-.memItemLeft, .memItemRight,
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-       background-color: #F4F4F4A;
-       border: none;
-       margin: 4px;
-       padding: 3px 8px 4px 8px;
-}
-
-.mdescLeft, .mdescRight {
-       padding: 0px 8px 4px 8px;
-       color: #555;
-}
-
-.memItemLeft, .memItemRight, .memTemplParams {
-       border-top: 1px solid #DBDBDB;
-}
-
-.memTemplParams {
-       color: #606060;
-}
-
-/* @end */
-
-/* @group Member Details */
-
-/* Styles for detailed member documentation */
-
-.memtemplate {
-       font-size: 80%;
-       color: #606060;
-       font-weight: normal;
-       margin-left: 3px;
-}
-
-.memnav {
-       background-color: #eeeeff;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       margin-right: 15px;
-       padding: 2px;
-}
-
-.memitem {
-       padding: 0;
-}
-
-.memname {
-       white-space: nowrap;
-       font-weight: bold;
-}
-
-.memproto, .memdoc {
-       border: 1px solid #9BBCDD;      
-}
-
-.memproto {
-       padding: 0;
-       background-color: #D5E2EF;
-       font-weight: bold;
-       -webkit-border-top-left-radius: 8px;
-       -webkit-border-top-right-radius: 8px;
-       -moz-border-radius-topleft: 8px;
-       -moz-border-radius-topright: 8px;
-}
-
-.memdoc {
-       padding: 2px 5px;
-       background-color: #eef3f5;
-       border-top-width: 0;
-       -webkit-border-bottom-left-radius: 8px;
-       -webkit-border-bottom-right-radius: 8px;
-       -moz-border-radius-bottomleft: 8px;
-       -moz-border-radius-bottomright: 8px;
-}
-
-.memdoc p, .memdoc dl, .memdoc ul {
-       margin: 6px 0;
-}
-
-.paramkey {
-       text-align: right;
-}
-
-.paramtype {
-       white-space: nowrap;
-}
-
-.paramname {
-       color: #853E0E;
-       white-space: nowrap;
-}
-.paramname em {
-       font-style: normal;
-}
-
-/* @end */
-
-.search     { color: #003399;
-              font-weight: bold;
-}
-
-form.search {
-              margin-bottom: 0px;
-              margin-top: 0px;
-}
-
-input.search { font-size: 75%;
-               color: #000080;
-               font-weight: normal;
-               background-color: #eeeeff;
-}
-
-td.tiny { 
-       font-size: 75%;
-}
-
-.highlight {
-        background-color:#E2E2FF;
-}
-
-/*---------- ide-eclipse Styles ---------*/
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
-       margin: 0px 0px;
-       padding: -30px -30px -30px -30px;
-       font-weight: normal;
-       font-style: normal;}
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
-
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
-
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
-.sh_styleFromXML{color:#800000;font-weight:bold;}
-/*-------------------------------------------------------*/
-
-/*-------- Snippet Base Styles ----------*/
-.snippet-wrap {position:relative;}
-*:first-child+html .snippet-wrap {display:inline-block;}
-* html .snippet-wrap {display:inline-block;}
-.snippet-reveal{text-decoration:underline;}
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
-* html .snippet-wrap .snippet-hide {bottom:1px;}
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
--moz-border-radius:0px;
--webkit-border-radius:0px;
-border-radius:0px;
-box-shadow: 1px 1px px #000;
--moz-box-shadow: 2px 2px 1px #000;
--webkit-box-shadow: 1px 1px 1px #000;}
-.snippet-wrap pre.snippet-textonly {padding:1em;}
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
-.snippet-wrap .snippet-num li{padding-left:2px;}
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
-.snippet-wrap li.box-mid {border-width:0 0px !important;}
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}
-
-/* Layout fixing */
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-.clfix {display: inline-block;}
-.clfix {display: block;}
-* html .clfix {height: 1%;} /* Hides from IE-mac */
-.clfix {zoom:1;} /*for IE 5.5-7*/
-
-.fl {float:left !important;}
-.fr {float:right !important;}
-.cl {clear:both;}
-.rel {position:relative;}
-.abs {position:absolute;}
-.ac {text-align:center !important;}
-.ar {text-align:right !important;}
-.al {text-align:left !important;}
-.at {vertical-align:top !important;}
-.am {vertical-align:middle !important;}
-.ab {vertical-align:bottom;}
-.hand {cursor:pointer;}
-.bgnone {background:none !important;}
-.brnone {border:none !important;}
-.b {font-weight:bold !important;}
-.n {font-weight:normal !important;}
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
-.mt5 {margin-top:5px !important;} 
-/* //Layout fixing */
-
-@media print { .hide, .show { display: none; }}
-
-div#profile {
-    position: relative;
-}
-#profile p {
-       text-align: right;
-}
-
-div#toc_border {
-    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
-}
-
-#contents li {
-       padding-top: 3px;
-       margin-top: 5px;
-       /* overflow: auto; */
-}
-
-p {
-       /* overflow: auto; */
-}
-
-div.table {
-       /* overflow: auto; */
+@charset "utf-8";\r
+\r
+body {\r
+       background: white;\r
+       color: #1C1C1C;\r
+       margin-right: 20px;\r
+       margin-left: 20px;\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       font-family: Arial, Helvetica, sans-serif;\r
+}\r
+\r
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {\r
+       font-family: Arial, Verdana, Helvetica, sans-serif\r
+       }\r
+\r
+/*     Set default font to 9 pt        */\r
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {\r
+       font-size: 9pt;\r
+}\r
+       \r
+pre, code { \r
+       font-family: "Courier New", Courier, monospace;\r
+       border: 1px solid #719cc7;\r
+       margin: 6px 1.5px;\r
+       padding: 1px 1px 1px 1px;\r
+       font-weight: normal;\r
+       font-style: normal;\r
+}\r
+\r
+h1 {font-size: 24pt; color: #0E437D;}\r
+h2 {font-size: 18pt; color: #0E437D;}\r
+h3 {font-size: 14pt; color: #1C1C1C;}\r
+h4 {font-size: 12pt; color: #1C1C1C;}\r
+h5 {font-size: 10pt; color: #1C1C1C;}\r
+       \r
+h1, h2, h3, h4, h5 {\r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+\r
+caption, p.caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: left;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+ol  {\r
+       margin-bottom: 20px;\r
+}\r
+\r
+ul ul , ol ul, ul ol, ol ol{\r
+       margin-top: 10px;\r
+}\r
+\r
+ul li, ol li {\r
+       margin-bottom: 10px;\r
+}\r
+\r
+ol.tutorstep li {\r
+       border-top: 2px solid #719cc7;\r
+       list-style-position: inside;\r
+       font-weight: bold;\r
+       margin-top: 30px;\r
+       margin-left: -20px;\r
+       padding-top: 3px;\r
+       font-size: 12pt;\r
+}\r
+\r
+ol.tutorstep li p{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-top: 10px;\r
+}\r
+\r
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {\r
+       font-size: 9pt;\r
+       list-style-position: outside; \r
+       margin-left: 0px;\r
+       font-weight: normal;\r
+}\r
+\r
+ol.tutorstep ol li p, ol.tutorstep ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal; \r
+       margin-top: 5px;\r
+}\r
+\r
+ol li p, ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-bottom: 2px;\r
+       margin-top: 2px;\r
+}\r
+\r
+ol ol , ol.tutorstep ol{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       list-style-type: lower-alpha;\r
+       color: #1C1C1C; \r
+       border-style: none;\r
+       margin-top: 10px; \r
+}\r
+\r
+ol.tutorstep ul {\r
+       margin-top: 10px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {\r
+       border-style: none;\r
+       margin-top: 5px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ul {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       color: #1C1C1C;\r
+}\r
+\r
+\r
+/*     End of font face declarations   */\r
+\r
+/*     Set table borders and heading row background    */\r
+table {\r
+       border: 0px;\r
+       border-collapse: collapse;\r
+       width: 100%;\r
+       margin-top: 20px;\r
+       margin-bottom: 20px;\r
+       background: white;\r
+}\r
+\r
+th {\r
+       border-top: 2px solid #719cc7;\r
+       border-right: 1px solid #c6d9f1;\r
+       border-left: 1px solid #c6d9f1;\r
+       background-color: #f3f7fb;\r
+       padding: 4px;\r
+       color: #719cc7;\r
+       font-size: 9pt;\r
+       font-weight: bold;\r
+}      \r
+       \r
+td {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:top;\r
+       padding: 3px 20px 5px 20px;\r
+       }\r
+\r
+td.middle {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:middle;\r
+       padding: 3px 20px 5px 20px;\r
+       }       \r
+       \r
+/*     Notes stand out using a light top & bottom borders with yellow background       */\r
+table.note {\r
+       border-top: 2px solid #719cc7;\r
+       border-left: 0px;\r
+       border-right: 0px;\r
+       width: 100%;\r
+}\r
+\r
+tr.note {\r
+       text-align: left;\r
+}\r
+\r
+th.note {\r
+       text-align: left;\r
+       background-color: #ddd9c3;\r
+       background-image: note.gif;\r
+       border-top: 2px solid #719cc7;\r
+       border-bottom:1px solid #719cc7;\r
+       border-right: none;\r
+\r
+}\r
+\r
+td.note, p.note {\r
+       background-color: #eeece1;\r
+       color: #1C1C1C;\r
+       padding: 5px;\r
+       margin-top:12px;\r
+       margin-bottom:12px;\r
+       border: none;\r
+}\r
+       \r
+/*     Figure titles are centered and bolded   */\r
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {\r
+       text-align: center;\r
+       font-weight: bold;\r
+}\r
+\r
+/*     Red background and white text for things that need fixing before release        */\r
+.fix   {\r
+       background-color: red;\r
+       font-weight: bold;\r
+       color: white;\r
+       }\r
+\r
+/* Classes for creating collapsible content */\r
+#banner {\r
+       padding: 8px 4px 8px 4px;\r
+       /* top right bottom left */\r
+       border: 1px solid #7f7f7f;\r
+       width: 100%;\r
+       background-image: url("banner.png");\r
+       text-align: left;\r
+       font-weight: bold;\r
+       font-size: 9pt;\r
+       color: #ffffff;\r
+}\r
+\r
+#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}\r
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}\r
+#main {width: 75%; height: 90%;}\r
+#container {width:100%;}\r
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}\r
+body.no-toc #container #contents {right: 0;padding-right:30px;}\r
+body.no-toc #toc-navigation {width: auto;}\r
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}\r
+body.no-toc #profile {float: right;right: -32px;}\r
+body.no-toc #profile p {padding: 0; margin: 0;}\r
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}\r
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}\r
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }\r
+\r
+.devicespecs-util {float:right; margin-top:25px;}\r
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}\r
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}\r
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}\r
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}\r
+       .devicespecs-util ul.dutil li a:hover { color:#222; }\r
+       .devicespecs-util ul.dutil li a:active { color:#222; }\r
+\r
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}\r
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}\r
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}\r
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}\r
+       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}\r
+\r
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }\r
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }\r
+\r
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}\r
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}\r
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}\r
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}\r
+\r
+.static-cont {width:100%; margin-bottom:40px;}\r
+       \r
+.top {text-align: right;}\r
+.toc, ul.toc{\r
+       margin: 10px 0px 0px 0px;\r
+       padding-left: 13px;\r
+       list-style: disc;\r
+       font-size: 9pt;\r
+       line-height: 115%; \r
+       }\r
+       \r
+.toc-title {\r
+       font-size: 12pt;\r
+       color: #0E437D; \r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+       \r
+a.top {\r
+       display:block; \r
+       float: right; \r
+       position:fixed;\r
+       width: 28px; \r
+       height:89px; \r
+       bottom:50px;\r
+       z-index: 101;\r
+       right: 19%;\r
+       }\r
+\r
+a img {border: 0;}\r
+       \r
+/*     Footer includes space and a gray line above             */\r
+#footer {\r
+       position: fixed;\r
+       /* width: 100%; */\r
+    bottom: 0px;\r
+       text-align: center;\r
+       border-top: 1px solid #CCCCCC;\r
+       background-color: #FFFFFF;      \r
+       left: 21px;  right: 21px;\r
+}\r
+\r
+.footer {font-size: 8pt;}\r
+       \r
+caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: center;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+div.qindex, div.navpath, div.navtab{\r
+       background-color: #e8eef2;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       padding: 2px;\r
+}\r
+\r
+div.qindex, div.navpath {\r
+       width: 100%;\r
+       line-height: 140%;\r
+}\r
+\r
+div.navtab {\r
+       margin-right: 15px;\r
+}\r
+\r
+/* @group Link Styling */\r
+\r
+a:link {\r
+       color: #719cc7;\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+}\r
+\r
+a:hover { \r
+       color: #0e437d;\r
+}\r
+\r
+a:visited {\r
+       text-decoration: underline;\r
+       color: #719cc7;\r
+       font-weight: bold;\r
+}\r
+\r
+a.qindex {\r
+       font-weight: bold;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:hover {\r
+       text-decoration: underline;\r
+       color: #0e437d;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:visited {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       color: #719cc7;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindexHL {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+       border: 1px double #9295C2;\r
+}\r
+\r
+a.qindexHL:hover {\r
+       text-decoration: none;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+}\r
+\r
+dl.el { \r
+       margin-left: -1cm \r
+}\r
+\r
+.fragment {\r
+       font-family: monospace, fixed;\r
+       font-size: 105%;\r
+}\r
+\r
+pre.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 4px 6px;\r
+       margin: 4px 8px 4px 2px;\r
+}\r
+\r
+div.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 6px;\r
+}\r
+\r
+div.ah { \r
+       background-color: black; \r
+       font-weight: bold; \r
+       color: #ffffff; \r
+       margin-bottom: 3px; \r
+       margin-top: 3px \r
+}\r
+\r
+td.md { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+}\r
+\r
+td.mdname1 { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+}\r
+\r
+td.mdname { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+       width: 600px; \r
+}\r
+\r
+div.groupHeader {\r
+       margin-left: 16px;\r
+       margin-top: 12px;\r
+       margin-bottom: 6px;\r
+       font-weight: bold;\r
+}\r
+\r
+div.groupText { \r
+       margin-left: 16px; \r
+       font-style: italic; \r
+}\r
+\r
+td.indexkey {\r
+       background-color: #eeeeff;\r
+       font-weight: bold;\r
+       border: 1px solid #CCCCCC;\r
+       margin: 2px 0px 2px 0;\r
+       padding: 2px 10px;\r
+}\r
+\r
+td.indexvalue {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #CCCCCC;\r
+       padding: 2px 10px;\r
+       margin: 2px 0px;\r
+}\r
+\r
+tr.memlist {\r
+   background-color: #f0f0f0; \r
+}\r
+\r
+p.formulaDsp { \r
+       text-align: center; \r
+}\r
+\r
+img.formulaDsp { \r
+}\r
+\r
+img.formulaInl { \r
+       vertical-align: middle; \r
+}\r
+\r
+/* @group Code Colorization */\r
+\r
+span.keyword       { color: #008000 }\r
+span.keywordtype   { color: #604020 }\r
+span.keywordflow   { color: #e08000 }\r
+span.comment       { color: #800000 }\r
+span.preprocessor  { color: #806020 }\r
+span.stringliteral { color: #002080 }\r
+span.charliteral   { color: #008080 }\r
+span.vhdldigit     { color: #ff00ff }\r
+span.vhdlchar      { color: #000000 }\r
+span.vhdlkeyword   { color: #700070 }\r
+span.vhdllogic     { color: #ff0000 }\r
+\r
+.mdTable {\r
+       border: 1px solid #868686;\r
+       background-color: #F4F4FB;\r
+}\r
+\r
+.mdRow {\r
+       padding: 8px 10px;\r
+}\r
+\r
+/* @group Member Descriptions */\r
+\r
+.mdescLeft, .mdescRight,\r
+.memItemLeft, .memItemRight,\r
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {\r
+       background-color: #F4F4F4A;\r
+       border: none;\r
+       margin: 4px;\r
+       padding: 3px 8px 4px 8px;\r
+}\r
+\r
+.mdescLeft, .mdescRight {\r
+       padding: 0px 8px 4px 8px;\r
+       color: #555;\r
+}\r
+\r
+.memItemLeft, .memItemRight, .memTemplParams {\r
+       border-top: 1px solid #DBDBDB;\r
+}\r
+\r
+.memTemplParams {\r
+       color: #606060;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group Member Details */\r
+\r
+/* Styles for detailed member documentation */\r
+\r
+.memtemplate {\r
+       font-size: 80%;\r
+       color: #606060;\r
+       font-weight: normal;\r
+       margin-left: 3px;\r
+}\r
+\r
+.memnav {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       margin-right: 15px;\r
+       padding: 2px;\r
+}\r
+\r
+.memitem {\r
+       padding: 0;\r
+}\r
+\r
+.memname {\r
+       white-space: nowrap;\r
+       font-weight: bold;\r
+}\r
+\r
+.memproto, .memdoc {\r
+       border: 1px solid #9BBCDD;      \r
+}\r
+\r
+.memproto {\r
+       padding: 0;\r
+       background-color: #D5E2EF;\r
+       font-weight: bold;\r
+       -webkit-border-top-left-radius: 8px;\r
+       -webkit-border-top-right-radius: 8px;\r
+       -moz-border-radius-topleft: 8px;\r
+       -moz-border-radius-topright: 8px;\r
+}\r
+\r
+.memdoc {\r
+       padding: 2px 5px;\r
+       background-color: #eef3f5;\r
+       border-top-width: 0;\r
+       -webkit-border-bottom-left-radius: 8px;\r
+       -webkit-border-bottom-right-radius: 8px;\r
+       -moz-border-radius-bottomleft: 8px;\r
+       -moz-border-radius-bottomright: 8px;\r
+}\r
+\r
+.memdoc p, .memdoc dl, .memdoc ul {\r
+       margin: 6px 0;\r
+}\r
+\r
+.paramkey {\r
+       text-align: right;\r
+}\r
+\r
+.paramtype {\r
+       white-space: nowrap;\r
+}\r
+\r
+.paramname {\r
+       color: #853E0E;\r
+       white-space: nowrap;\r
+}\r
+.paramname em {\r
+       font-style: normal;\r
+}\r
+\r
+/* @end */\r
+\r
+.search     { color: #003399;\r
+              font-weight: bold;\r
+}\r
+\r
+form.search {\r
+              margin-bottom: 0px;\r
+              margin-top: 0px;\r
+}\r
+\r
+input.search { font-size: 75%;\r
+               color: #000080;\r
+               font-weight: normal;\r
+               background-color: #eeeeff;\r
+}\r
+\r
+td.tiny { \r
+       font-size: 75%;\r
+}\r
+\r
+.highlight {\r
+        background-color:#E2E2FF;\r
+}\r
+\r
+/*---------- ide-eclipse Styles ---------*/\r
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;\r
+       margin: 0px 0px;\r
+       padding: -30px -30px -30px -30px;\r
+       font-weight: normal;\r
+       font-style: normal;}\r
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}\r
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/\r
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}\r
+\r
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}\r
+\r
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/\r
+.sh_styleFromXML{color:#800000;font-weight:bold;}\r
+/*-------------------------------------------------------*/\r
+\r
+/*-------- Snippet Base Styles ----------*/\r
+.snippet-wrap {position:relative;}\r
+*:first-child+html .snippet-wrap {display:inline-block;}\r
+* html .snippet-wrap {display:inline-block;}\r
+.snippet-reveal{text-decoration:underline;}\r
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}\r
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}\r
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}\r
+* html .snippet-wrap .snippet-hide {bottom:1px;}\r
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}\r
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}\r
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;\r
+-moz-border-radius:0px;\r
+-webkit-border-radius:0px;\r
+border-radius:0px;\r
+box-shadow: 1px 1px px #000;\r
+-moz-box-shadow: 2px 2px 1px #000;\r
+-webkit-box-shadow: 1px 1px 1px #000;}\r
+.snippet-wrap pre.snippet-textonly {padding:1em;}\r
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}\r
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}\r
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}\r
+.snippet-wrap .snippet-num li{padding-left:2px;}\r
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}\r
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}\r
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}\r
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}\r
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}\r
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}\r
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}\r
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}\r
+.snippet-wrap li.box-mid {border-width:0 0px !important;}\r
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}\r
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}\r
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}\r
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}\r
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}\r
+\r
+/* Layout fixing */\r
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+.clfix {display: inline-block;}\r
+.clfix {display: block;}\r
+* html .clfix {height: 1%;} /* Hides from IE-mac */\r
+.clfix {zoom:1;} /*for IE 5.5-7*/\r
+\r
+.fl {float:left !important;}\r
+.fr {float:right !important;}\r
+.cl {clear:both;}\r
+.rel {position:relative;}\r
+.abs {position:absolute;}\r
+.ac {text-align:center !important;}\r
+.ar {text-align:right !important;}\r
+.al {text-align:left !important;}\r
+.at {vertical-align:top !important;}\r
+.am {vertical-align:middle !important;}\r
+.ab {vertical-align:bottom;}\r
+.hand {cursor:pointer;}\r
+.bgnone {background:none !important;}\r
+.brnone {border:none !important;}\r
+.b {font-weight:bold !important;}\r
+.n {font-weight:normal !important;}\r
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}\r
+.mt5 {margin-top:5px !important;} \r
+/* //Layout fixing */\r
+\r
+@media print { .hide, .show { display: none; }}\r
+\r
+div#profile {\r
+    position: relative;\r
+}\r
+#profile p {\r
+       text-align: right;\r
+}\r
+\r
+div#toc_border {\r
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;\r
+}\r
+\r
+#contents li {\r
+       padding-top: 3px;\r
+       margin-top: 5px;\r
+       /* overflow: auto; */\r
+}\r
+\r
+p {\r
+       /* overflow: auto; */\r
+}\r
+\r
+div.table {\r
+       /* overflow: auto; */\r
 }
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/images/native_api_layout.png b/org.tizen.gettingstarted/html/images/native_api_layout.png
deleted file mode 100755 (executable)
index 7772e25..0000000
Binary files a/org.tizen.gettingstarted/html/images/native_api_layout.png and /dev/null differ
diff --git a/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm b/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm
index 4995e18..ae77fe5 100644 (file)
--- a/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm
+++ b/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm
@@ -66,7 +66,9 @@ These devices have constraints, such as relatively small screen sizes and lack o
     <li><p>A system event (such as an incoming phone call) occurs and causes a resident application with a higher priority to become active and temporarily hide your application.</p></li>
     <li><p>An alarm is triggered for another application, which becomes the top-most window and hides your application.</p> </li>
   </ul>
-<p>Since Tizen 2.4, the application on the background will go into the suspended state. In the suspended state, the application process will executed with limited CPU resources. In other words, the platform will not allow running the background application except some applications such as Media, Download and etc. that should necessary to work on the background. In this case, the application can designate their background category as allowed categories to avoid changing the suspended state. See <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#allow_bg">Allowing Applications to Run on the Background</a> for more information.</p>
+
+<p>Since Tizen 2.4, the application on the background goes into a suspended state. In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work on the background. In this case, the application can <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>  
+  
 <p>When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace;">app_resume_cb()</span> callback is invoked. The visibility returns, when:</p>
 
   <ul>
@@ -80,7 +82,8 @@ These devices have constraints, such as relatively small screen sizes and lack o
     <li><p>Your application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace;">ui_app_exit()</span> or <span style="font-family: Courier New,Courier,monospace;">service_app_exit()</span> function to terminate the event loop.</p></li>
     <li><p>The low memory killer is terminating your application in a low memory situation.</p></li>
   </ul>
-<p>Because the service application has no UI, it also has no pause state. Since Tizen 2.4, the service application could go into the suspended state. Basically, the service application is running on the background by its nature; so the platform will not allow running the service application unless designated as a background category application. However, when the UI application that is packaged with the service application is running in foreground, the service application is also regarded as a foreground application and it can be run without designating background category.</p>
+
+ <p>Because the service application has no UI, it also has no pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
   
 <p>Application state changes are managed by the underlying framework. 
        For more information about application state transitions, see <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#state_trans">Managing Application States and Transitions</a>.</p>
diff --git a/org.tizen.gettingstarted/html/native/details/event_handling_n.htm b/org.tizen.gettingstarted/html/native/details/event_handling_n.htm
index 9b822d4..251dcf8 100644 (file)
--- a/org.tizen.gettingstarted/html/native/details/event_handling_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/event_handling_n.htm
@@ -44,7 +44,7 @@
       <th class="note">Note</th>
     </tr>
     <tr>
-      <td class="note">For more information on using Efl Extension for <strong>Menu</strong> key, <strong>Back</strong> key, and rotary events, see the <a href="../../../../org.tizen.guides/html/native/ui/efl_extension_n.htm">Efl Extension</a> guide.</td>
+      <td class="note">For more information on using Efl Extension for <strong>Menu</strong> key, <strong>Back</strong> key, and rotary events, see the <a href="../../../../org.tizen.ui.guides/html/native/efl/hw_input_n.htm">Hardware Input Handling</a> UI guide.</td>
     </tr>
   </tbody>
 </table>
diff --git a/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm b/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm
index bf5f141..3eff5e9 100644 (file)
--- a/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm
@@ -70,25 +70,13 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
 <td rowspan="1" colspan="1"><p>Setting alarms</p></td> 
-<td rowspan="1" colspan="1"><p>The application can set alarms and wake the device up at scheduled times.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/apphistory.read</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Reading application usage statistics</p></td>
-<td rowspan="1" colspan="1"><p>The application can read the statistics of application usage, such as which applications have been used frequently or recently.</p></td>
+<td rowspan="1" colspan="1"><p>The application can set alarms and wake the device up at scheduled times.</p></td> 
 </tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill</span></p></td> 
 <td rowspan="1" colspan="1"><p>platform</p></td>
 <td rowspan="1" colspan="1"><p>Closing applications</p></td> 
-<td rowspan="1" colspan="1"><p>The application can close other applications.</p></td> 
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill.bgapp</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Closing background applications</p></td>
-<td rowspan="1" colspan="1"><p>This application can request to close applications running in the background.</p></td>
+<td rowspan="1" colspan="1"><p>The application can close other applications..</p></td> 
 </tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></p></td>
@@ -208,25 +196,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/healthinfo</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
 <td rowspan="1" colspan="1"><p>Reading health information</p></td> 
-<td rowspan="1" colspan="1"><p>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/ime</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p></p>Providing input methods</td>
-<td rowspan="1" colspan="1"><p></p>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/imemanager</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Managing input methods</p></td>
-<td rowspan="1" colspan="1"><p>This application can manage installed input methods.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/inputgenerator</span></p></td>
-<td rowspan="1" colspan="1"><p>platform</p></td>
-<td rowspan="1" colspan="1"><p>Generating touch and key events</p></td>
-<td rowspan="1" colspan="1"><p>This application can simulate keys being pressed and touch interactions with the screen.</p></td>
+<td rowspan="1" colspan="1"><p>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</p></td> 
 </tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></p></td>
@@ -238,8 +208,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager.admin</span></p></td>
 <td rowspan="1" colspan="1"><p>platform</p></td>
 <td rowspan="1" colspan="1"><p>Locking/unlocking secure repository</p></td> 
-<td rowspan="1" colspan="1"><p>The application can lock and unlock a password-protected storage, and manage password changes for it.</p>
-<p><strong>Deprecated since 2.4.</strong></p></td> 
+<td rowspan="1" colspan="1"><p>The application can lock and unlock a password-protected storage, and manage password changes for it.</p></td> 
 </tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></p></td>
@@ -259,30 +228,6 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p>Managing location settings</p></td> 
 <td rowspan="1" colspan="1"><p>The application can control your location service settings.</p></td> 
 </tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mapservice</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Using map services</p></td>
-<td rowspan="1" colspan="1"><p>The application can use map services such as Geocoder, Places, and Route (Direction).</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.client</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Controlling media player</p></td>
-<td rowspan="1" colspan="1"><p>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.server</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Accepting remote controls</p></td>
-<td rowspan="1" colspan="1"><p>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediahistory.read</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Reading media playback statistics</p></td>
-<td rowspan="1" colspan="1"><p>The application can read the statistics concerning the music and videos played on the device, such as the peak times for playing music or videos.</p></td>
-</tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
@@ -295,12 +240,6 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p>Sending text and multimedia messages and updating their statuses</p></td> 
 <td rowspan="1" colspan="1"><p>The application can write, send, delete, and move text and multimedia messages, and change the settings and statuses of the messages, such as read or unread.</p></td> 
 </tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/minicontrol.provider</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Showing toolbar</p></td>
-<td rowspan="1" colspan="1"><p>The application can show a small toolbar on the notification panel or lock screen while it is open.</p></td>
-</tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
@@ -346,14 +285,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.admin</span></p></td>
 <td rowspan="1" colspan="1"><p>platform</p></td>
-<td rowspan="1" colspan="1"><p>Installing/and uninstalling application packages</p></td> 
-<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages.</p></td> 
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.clearcache</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Clearing other applications' caches</p></td>
-<td rowspan="1" colspan="1"><p>The application can clear other applications' caches.</p></td>
+<td rowspan="1" colspan="1"><p>Installing/and uninstalling application packages and clearing caches</p></td> 
+<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages, and clear application caches.</p></td> 
 </tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></p></td>
@@ -403,18 +336,11 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p>Managing shortcuts</p></td> 
 <td rowspan="1" colspan="1"><p>The application can create and delete shortcuts.</p></td> 
 </tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemmonitor</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Monitoring system resources</p></td>
-<td rowspan="1" colspan="1"><p>The application can read system information, including information from the CPU and RAM.</p></td>
-</tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
 <td rowspan="1" colspan="1"><p>Managing unrestricted system settings</p></td> 
-<td rowspan="1" colspan="1"><p>The application can read and write unrestricted system settings.</p>
-<p><strong>Deprecated since 2.3.1.</strong></p></td> 
+<td rowspan="1" colspan="1"><p>The application can read and write unrestricted system settings. This privilege was deprecated after the Tizen version 2.3.</p></td> 
 </tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings.admin</span></p></td>
@@ -481,19 +407,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <th>Level</th>
 <th>Display name</th> 
 <th>Description</th> 
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Reading accounts</p></td>
-<td rowspan="1" colspan="1"><p>This application can read accounts.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Managing accounts</p></td>
-<td rowspan="1" colspan="1"><p>This application can create, edit, and delete accounts.</p></td>
-</tr>
+</tr> 
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.get</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
@@ -512,12 +426,6 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p>Closing applications</p></td> 
 <td rowspan="1" colspan="1"><p>The application can close other applications.</p></td> 
 </tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill.bgapp</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Closing background applications</p></td>
-<td rowspan="1" colspan="1"><p>This application can request to close applications running in the background.</p></td>
-</tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
@@ -596,24 +504,6 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p>Reading health information</p></td> 
 <td rowspan="1" colspan="1"><p>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</p></td> 
 </tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/ime</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p></p>Providing input methods</td>
-<td rowspan="1" colspan="1"><p></p>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/imemanager</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Managing input methods</p></td>
-<td rowspan="1" colspan="1"><p>This application can manage installed input methods.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/inputgenerator</span></p></td>
-<td rowspan="1" colspan="1"><p>platform</p></td>
-<td rowspan="1" colspan="1"><p>Generating touch and key events</p></td>
-<td rowspan="1" colspan="1"><p>This application can simulate keys being pressed and touch interactions with the screen.</p></td>
-</tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
@@ -624,8 +514,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager.admin</span></p></td>
 <td rowspan="1" colspan="1"><p>platform</p></td>
 <td rowspan="1" colspan="1"><p>Locking/unlocking secure repository</p></td> 
-<td rowspan="1" colspan="1"><p>The application can lock and unlock a password-protected storage, and manage password changes for it.</p>
-<p><strong>Deprecated since 2.4</strong></p></td> 
+<td rowspan="1" colspan="1"><p>The application can lock and unlock a password-protected storage, and manage password changes for it.</p></td> 
 </tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></p></td>
@@ -645,24 +534,6 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p>Managing location settings</p></td> 
 <td rowspan="1" colspan="1"><p>The application can control your location service settings.</p></td> 
 </tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mapservice</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Using map services</p></td>
-<td rowspan="1" colspan="1"><p>The application can use map services such as Geocoder, Places, and Route (Direction).</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.client</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Controlling media player</p></td>
-<td rowspan="1" colspan="1"><p>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.server</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Accepting remote controls</p></td>
-<td rowspan="1" colspan="1"><p>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</p></td>
-</tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
@@ -675,12 +546,6 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p>Sending text and multimedia messages and updating their statuses</p></td> 
 <td rowspan="1" colspan="1"><p>The application can write, send, delete, and move text and multimedia messages, and change the settings and statuses of the messages, such as read or unread.</p></td> 
 </tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/minicontrol.provider</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Showing toolbar</p></td>
-<td rowspan="1" colspan="1"><p>The application can show a small toolbar on the notification panel or lock screen while it is open.</p></td>
-</tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></p></td>
 <td rowspan="1" colspan="1"><p>public</p></td>
@@ -725,16 +590,9 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.admin</span></p></td>
 <td rowspan="1" colspan="1"><p>platform</p></td>
-<td rowspan="1" colspan="1"><p>Installing/uninstalling application packages
+<td rowspan="1" colspan="1"><p>Installing/uninstalling application packages and clearing caches
 </p></td> 
-<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages.</p></td> 
-</tr>
-<tr> 
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.clearcache</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Clearing other applications' caches
-</p></td> 
-<td rowspan="1" colspan="1"><p>The application can clear other applications' caches.</p></td> 
+<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages, and clear application caches.</p></td> 
 </tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></p></td>
@@ -778,12 +636,6 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td rowspan="1" colspan="1"><p>Accessing secure elements</p></td> 
 <td rowspan="1" colspan="1"><p>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</p></td> 
 </tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemmonitor</span></p></td>
-<td rowspan="1" colspan="1"><p>public</p></td>
-<td rowspan="1" colspan="1"><p>Monitoring system resources</p></td>
-<td rowspan="1" colspan="1"><p>The application can read system information, including information from the CPU and RAM.</p></td>
-</tr>
 <tr> 
 <td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings.admin</span></p></td>
 <td rowspan="1" colspan="1"><p>platform</p></td>
diff --git a/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm b/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm
old mode 100755 (executable)
new mode 100644 (file)
index 4171b27..84c6460
--- a/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm
@@ -34,22 +34,10 @@
 
 <p>There are 2 types of submodules - Tizen native modules and open source modules. The integration of open source modules in the native API structure allows you to add additional features by using well-known open source libraries. This is particularly advantageous for developers who are familiar with certain libraries because they can quickly add features and use previously written code in certain cases.</p>
 
-<p>The following figure and tables define the Tizen native API layout. The tables describe the API modules and the functionality of all their submodule APIs within that module. The tables also act as reference sources for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
+<p>The following figure and table define the mobile native API layout. The table describes the API modules and the functionality of all their submodule APIs within that module. The table also acts as a reference source for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
 
-
-<p class="figure" id="layout">Figure: Native API layout</p> 
-<p align="center"><img alt="Native API layout" src="../../images/native_api_layout.png" /></p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Except as noted, the mobile native APIs are available since Tizen 2.3</td>
-    </tr>
-   </tbody>
-  </table>
+<p class="figure" id="layout">Figure: Mobile native API layout</p> 
+<p align="center"><img alt="Mobile native API layout" src="../../images/mobile_api_layout.png" /></p>
 
 <table border="1" style="width: 100%"> 
          <caption>Table: Mobile native API modules</caption>
@@ -60,29 +48,6 @@
                        <th>API submodule</th> 
                        <th>Functionality</th> 
                </tr>   
-
-
-
-       <tr>
-               <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account</a></td>
-                <td rowspan="3">The account
-               <p>Documentation:</p>
-               <ul>
-               <li>Guides: </li>
-               <li>Tutorials: </li></ul>
-               </td>
-               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
-                       <td>The account APIs provide CRUD (Create, Read, Update, Delete) account management functionality.</td>
-        </tr>
-       <tr>
-               <td><a href="../../../../group__CAPI__OAUTH2__MODULE.html">OAuth 2.0</a><br><strong>(since 2.4)</strong></td>
-               <td>The OAuth 2.0 APIs provide easy way to gain access token between server and client.</td>
-        </tr>
-        <tr>
-               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a><br><strong>(since 2.4)</strong></td>
-               <td>The Sync Manager API helps applications in scheduling their data sync operations.</td>
-        </tr>
-
                <tr>
                        <td rowspan="11"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
                        <td rowspan="11">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user&#39;s application preferences.
@@ -129,15 +94,16 @@
         </tr>  
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
-                       <td>Adds application shortcuts to the device home screen, which is the main landing screen of the device.</td>
+                       <td>Adds application shortcuts to the device home screen, which is the main landing screen of the device.
+</td>
         </tr> 
         <tr>
-            <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget</a><br><strong>(since 2.3.1)</strong></td>
+            <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget</a></td>
             <td>Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.</td>
         </tr>          
                <tr>
-                       <td rowspan="9"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
-                       <td rowspan="9">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
+                       <td rowspan="8"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
+                       <td rowspan="8">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base</a></li>
@@ -146,13 +112,8 @@
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
                        <td>Standard C++ library.</td>
         </tr>
-       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__ZLIB__FRAMEWORK.html">zlib</a><br><strong>(since 2.4)</strong></td>
-         <td>zlib is used for in-memory compression and decompression.</td>
-       </tr>
-
                <tr>
-       <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">Glibc</a></td>
+       <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">EGlibc</a></td>
                        <td>Standard C library.</td>
         </tr>     
                <tr>
@@ -179,10 +140,9 @@
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite</a></td>
                        <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
         </tr> 
-
                <tr>
-                       <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
-                       <td rowspan="4">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
+                       <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
+                       <td rowspan="3">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
@@ -197,15 +157,10 @@
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
                        <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
-        </tr>
-        <tr>
-                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor</a><br><strong>(since 2.4)</strong></td>
-                        <td>The Service Adaptor API provides developer with common interfaces like using local service for various service infra.</td>
-        </tr>
-
+        </tr>                  
                <tr>
-                       <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
-                       <td rowspan="4">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
+                       <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
+                       <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context</a></li>
@@ -217,19 +172,9 @@
                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition</a></td>
                        <td>Detects user gestures on devices, such as tilt, snap, and double-tap.</td>
                </tr>
-
-                <tr>
-                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__HISTORY__MODULE.html">Contextual History</a><br><strong>(since 2.4)</strong></td>
-                        <td>Allows you to query statistics and patterns derived from contextual history data.</td>
-                </tr>
-                <tr>
-                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__TRIGGER__MODULE.html">Contextual Trigger</a><br><strong>(since 2.4)</strong></td>
-                        <td>The contextual trigger API provides a way to define rules, each of which can trigger a specified action when the rule is satisfied.</td>
-                </tr>
-
                <tr>
-                       <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
-                       <td rowspan="3">The Location API module allows the geographical position of a device to be determined for use with location-based services.
+                       <td rowspan="1"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
+                       <td rowspan="1">The Location API module allows the geographical position of a device to be determined for use with location-based services.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location</a></li>
@@ -237,15 +182,6 @@
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a></td>
                        <td>Acquires information about the geographical location of the device. It also allows the receiving of notifications about position changes, velocity changes, and when a given geographical area is left.</td>
         </tr>
-       <tr>
-               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html">Geofence Manager</a><br><strong>(since 2.4)</strong></td>
-               <td>This Geofence Manager API provides service related to geofence(geo-fence).</td>
-       </tr>
-       <tr>
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service</a><br><strong>(since 2.4)</strong></td>
-              <td>Maps API provides a developer with a set of functions, helping to create Maps aware applications.</td>
-       </tr>
-       
                <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
                 <td rowspan="3">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device.
@@ -268,8 +204,8 @@
         </tr>
                                
                                <tr>
-         <td rowspan="20"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
-                <td rowspan="20">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
+         <td rowspan="15"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
+                <td rowspan="15">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia</a></li>
@@ -293,10 +229,6 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
          <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
         </tr>
-       <tr>
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__MODULE.html">Media Controller</a><br><strong>(since 2.4)</strong></td>
-              <td>The Media Controller API provides functions for communication between the media controller server and the media controller client.</td>
-       </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a></td>
          <td>Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.</td>
@@ -305,14 +237,6 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
          <td>Extracts metadata information from an input media file.</td>
         </tr>
-       <tr>    
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor</a><br><strong>(since 2.4)</strong></td>
-              <td>The Metadata Editor API provides functions for editing the metadata of several popular audio format.</td>
-       </tr>
-       <tr>    
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision</a><br><strong>(since 2.4)</strong></td>
-              <td>Media Vision library provides functionality for barcodes detection and generation.</td>
-       </tr>   
                <tr>            
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
          <td>Efficiently renders multichannel 3D audio.</td>
@@ -329,18 +253,10 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a></td>
          <td>Controls the recording of multimedia content. Recording process attributes, such as setting the recording filename and file format, can also be configured with this API submodule.</td>
         </tr>        
-       <tr>
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html">Screen Mirroring</a><br><strong>(since 2.4)</strong></td>
-              <td>The Screen Mirroring API provides functions for screen mirroring as sink.</td>
-       </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
          <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
         </tr>
-       <tr>    
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util</a><br><strong>(since 2.4)</strong></td>
-              <td>The Thumbnail Util API provides functions for creating the thumbnail from an input media file.</td>
-       </tr>   
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
          <td>Plays and stops tones.</td>
@@ -386,7 +302,7 @@
          <td>Manages the settings of Wi-Fi Direct&trade;. This submodule API also provides functions to connect and disconnect remote devices that use Wi-Fi Direct&trade;.</td>
         </tr>  
                <tr>
-               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard</a><br><strong>(since 2.3.1)</strong></td>
+               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard</a></td>
                <td>Provides application communication to the SE applet methods.</td>
                </tr>         
         <tr>
@@ -417,6 +333,7 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
          <td>An account is a collection of information representing the user of a specific account provider. This API submodule creates and manages accounts, retrieves account information, and receives account change notifications.</td>
         </tr>
+        <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a></td>
          <td>Manages calendars, including events and tasks. It also stores and queries calendar information.</td>
         </tr>
@@ -425,8 +342,8 @@
          <td>Manages phone contact information, such as address books, persons, and phone logs.</td>
         </tr>
                                <tr>
-         <td rowspan="10"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
-                <td rowspan="10">The System API module contains submodule APIs for system management.
+         <td rowspan="8"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
+                <td rowspan="8">The System API module contains submodule APIs for system management.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/system/system_guide_n.htm">System</a></li>
@@ -435,10 +352,6 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
          <td>Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.</td>
         </tr>
-       <tr>
-                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">Feedback</a><br><strong>(since 2.4)</strong></td>
-                <td>The Feedback API provides functions to play sound or vibration associated with properties.</td>
-       </tr>
 <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
          <td>Provides methods to handle media keys from external devices that are connected to the Tizen device, such as the volume control buttons on a headset.</td>
@@ -464,17 +377,13 @@
          <td>Manages system settings, such as the lock screen settings.</td>
         </tr>                                       
         <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace</a><br><strong>(since 2.4)</strong></td>
-         <td>The T-trace API provides functions for writing trace message to the system trace buffer.</td>
-        </tr>
-        <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
          <td>Sends log output and filters log messages from the dlog logging service.</td>
         </tr>
 
         <tr>
-         <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
-                <td rowspan="2">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
+         <td rowspan="1"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
+                <td rowspan="1">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony</a></li>
@@ -482,55 +391,41 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a></td>
          <td>Obtains call, network, and SIM information.</td>
         </tr>   
-        <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber Utils</a><br><strong>(since 2.4)</strong></td>
-         <td>The phonenumber utils API provides methods for parsing and formatting phone numbers.</td>
-        </tr>
-
 <tr>
-         <td rowspan="8"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
-                <td rowspan="8">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
+         <td rowspan="6"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
+                <td rowspan="6">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
                 <p>Documentation:</p>
                        <ul>
+                       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a></li>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics</a> and <a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics</a> and <a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework</a></li></ul></td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
-         <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality. Cairo EvasGL APIs have been newly added since 2.3.1</td>
+         <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality.</td>
         </tr>
 <tr>
-<td><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL</a></td>
+<td><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL</a></td>
          <td>EFL is a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
 </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
          <td>Gets and sets the priority order of notification windows.</td>
         </tr>
- <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">EFL Extension</a><br><strong>(since 2.3.1)</strong></td>
-         <td>EFL Extension provides functionalities to enhance the EFL libraries. It includes device-specific features (like support for hard back key).</td>
-        </tr>
-                       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager</a><br><strong>(since 2.4)</strong></td>
-         <td>The External Output Manager provides APIs for external outputs.</td>
-      </tr>        
 <tr>
-       
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
          <td>A text rendering library and font-handling library to let applications find a font or closely matching font.</td>
         </tr>
-                       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol</a><br><strong>(since 2.4)</strong></td>
-         <td>Provides functions for creating EFL socket window and displaying EFL socket window.</td>
-      </tr>            
-
+       <tr>
+         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES 1.1 and 2.0</a></td>
+         <td>Library for rendering 3D and 2D graphics in embedded systems.</td>
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
          <td>The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.</td>
         </tr>
 
         <tr>
-         <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
-                <td rowspan="4">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
+         <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
+                <td rowspan="2">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
@@ -542,14 +437,7 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
          <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
         </tr>
-                       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method</a><br><strong>(since 2.4)</strong></td>
-         <td>The Input Method API provides the functions for starting IME application lifecycle, methods to interact with current UI state of IME, and getting attributes/events.</td>
-      </tr>        
-                       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control</a><br><strong>(since 2.4)</strong></td>
-         <td>The Voice control API provides functions for registering command and getting notification when registered command is recognized.</td>
-      </tr>                                                    
+                               <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
                 <td rowspan="3">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
                 <p>Documentation:</p>
@@ -570,19 +458,22 @@
                    </tbody> 
                  </table>
 
-<p>The following table describes the API modules in the wearable profile and the functionality of all their submodule APIs.</p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Except as noted, the wearable native APIs are available since Tizen 2.3.1</td>
-    </tr>
-   </tbody>
-  </table>
-  
+<p>The following figure and table define the wearable native API layout. The table describes the API modules and the functionality of all their submodule APIs within that module. The table also acts as a reference source for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The wearable native profile is available since Tizen 2.3.1.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p class="figure" id="layout_w">Figure: Wearable native API layout</p> 
+<p align="center"><img alt="Wearable native API layout" src="../../images/wearable_api_layout.png" /></p>
+         
 <table border="1" style="width: 100%"> 
          <caption>Table: Wearable native API modules</caption>
        <tbody> 
@@ -592,25 +483,6 @@
                        <th>API submodule</th> 
                        <th>Functionality</th> 
                </tr>   
-       <tr>
-               <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account</a></td>
-                <td rowspan="3">The account
-               <p>Documentation:</p>
-               <ul>
-               <li>Guides: </li>
-               <li>Tutorials: </li></ul>
-               </td>
-               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
-                       <td>The account APIs provide CRUD (Create, Read, Update, Delete) account management functionality.</td>
-        </tr>
-       <tr>
-               <td><a href="../../../../group__CAPI__OAUTH2__MODULE.html">OAuth 2.0</a><br><strong>(since 2.4)</strong></td>
-               <td>The OAuth 2.0 APIs provide easy way to gain access token between server and client.</td>
-        </tr>
-        <tr>
-               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a><br><strong>(since 2.4)</strong></td>
-               <td>The Sync Manager API helps applications in scheduling their data sync operations.</td>
-  </tr>                
                <tr>
                        <td rowspan="11"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
                        <td rowspan="11">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user&#39;s application preferences.
@@ -665,8 +537,8 @@
             <td>Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.</td>
         </tr>          
                <tr>
-                       <td rowspan="9"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
-                       <td rowspan="9">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
+                       <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
+                       <td rowspan="8">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base</a></li>
@@ -675,12 +547,8 @@
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
                        <td>Standard C++ library.</td>
         </tr>
-       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__ZLIB__FRAMEWORK.html">zlib</a><br><strong>(since 2.4)</strong></td>
-         <td>zlib is used for in-memory compression and decompression.</td>
-       </tr>        
                <tr>
-       <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">Glibc</a></td>
+       <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">EGlibc</a></td>
                        <td>Standard C library.</td>
         </tr>     
                <tr>
@@ -708,8 +576,8 @@
                        <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
         </tr> 
                <tr>
-                       <td rowspan="3"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
-                       <td rowspan="3">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists and access the EXIF information of an image file.
+                       <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
+                       <td rowspan="2">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
@@ -721,10 +589,6 @@
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
                        <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
         </tr>                  
-  <tr>
-                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a><br><strong>(Since 2.4)</strong></td>
-                       <td>Creates and manages one or more download requests. Content is downloaded from servers through an HTTP connection.</td>
-  </tr>        
                <tr>
                        <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
                        <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
@@ -740,8 +604,8 @@
                        <td>Detects user gestures on devices, such as tilt, snap, and double-tap.</td>
                </tr>
                <tr>
-                       <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
-                       <td rowspan="2">The Location API module allows the geographical position of a device to be determined for use with location-based services.
+                       <td rowspan="1"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
+                       <td rowspan="1">The Location API module allows the geographical position of a device to be determined for use with location-based services.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location</a></li>
@@ -749,13 +613,9 @@
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a></td>
                        <td>Acquires information about the geographical location of the device. It also allows the receiving of notifications about position changes, velocity changes, and when a given geographical area is left.</td>
         </tr>
-       <tr>
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service</a><br><strong>(since 2.4)</strong></td>
-              <td>Maps API provides a developer with a set of functions, helping to create Maps aware applications.</td>
-       </tr>        
                <tr>
          <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
-                <td rowspan="2">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS of the device.
+                <td rowspan="2">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device.
                <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging</a></li>
@@ -771,8 +631,8 @@
         </tr>
                                
                                <tr>
-         <td rowspan="18"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
-                <td rowspan="18">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
+         <td rowspan="14"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
+                <td rowspan="14">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia</a></li>
@@ -796,10 +656,6 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
          <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
         </tr>
-       <tr>
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__MODULE.html">Media Controller</a><br><strong>(since 2.4)</strong></td>
-              <td>The Media Controller API provides functions for communication between the media controller server and the media controller client.</td>
-       </tr>        
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a></td>
          <td>Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.</td>
@@ -808,14 +664,6 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
          <td>Extracts metadata information from an input media file.</td>
         </tr>
-       <tr>    
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor</a><br><strong>(since 2.4)</strong></td>
-              <td>The Metadata Editor API provides functions for editing the metadata of several popular audio format.</td>
-       </tr>        
-       <tr>    
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision</a><br><strong>(since 2.4)</strong></td>
-              <td>Media Vision library provides functionality for barcodes detection and generation.</td>
-       </tr>   
                <tr>            
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
          <td>Efficiently renders multichannel 3D audio.</td>
@@ -831,15 +679,11 @@
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a></td>
          <td>Controls the recording of multimedia content. Recording process attributes, such as setting the recording filename and file format, can also be configured with this API submodule.</td>
-        </tr>    
+        </tr>        
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
          <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
         </tr>
-       <tr>    
-              <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util</a><br><strong>(since 2.4)</strong></td>
-              <td>The Thumbnail Util API provides functions for creating the thumbnail from an input media file.</td>
-       </tr>         
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
          <td>Plays and stops tones.</td>
@@ -899,17 +743,8 @@
          <td>Retrieves and displays privilege information. This can be used to show a user the privileges that an application contains when they are downloading it onto their device. This is so that they are aware of the resources which the application may access. </td>
         </tr>
                                <tr>
-         <td rowspan="1"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social</a></td>
-                <td rowspan="1">The Social API module contains submodule APIs to manage personal data, such as contacts on a device.
-                <p>Documentation:</p>
-                       <ul>
-                       <li>Guides: <a href="../../../../org.tizen.guides/html/native/social/contact_n.htm">Contact</a></li>
-                       <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/social/contact_tutorial_n.htm">Contact</a></li></ul></td>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a><br><strong>(Since 2.4)</strong></td>
-         <td>Manages phone contact information, such as address books, persons, and phone logs.</td>
-        </tr>                                  
-         <td rowspan="10"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
-                <td rowspan="10">The System API module contains submodule APIs for system management.
+         <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
+                <td rowspan="8">The System API module contains submodule APIs for system management.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/system/system_guide_n.htm">System</a></li>
@@ -918,11 +753,7 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
          <td>Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.</td>
         </tr>
-       <tr>
-                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">Feedback</a><br><strong>(since 2.4)</strong></td>
-                <td>The Feedback API provides functions to play sound or vibration associated with properties.</td>
-       </tr>         
-       <tr>
+<tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
          <td>Provides methods to handle media keys from external devices that are connected to the Tizen device, such as the volume control buttons on a headset.</td>
         </tr>
@@ -945,19 +776,15 @@
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a></td>
          <td>Manages system settings, such as the lock screen settings.</td>
-        </tr>                     
-        <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace</a><br><strong>(since 2.4)</strong></td>
-         <td>The T-trace API provides functions for writing trace message to the system trace buffer.</td>
-        </tr>                               
+        </tr>                                       
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
          <td>Sends log output and filters log messages from the dlog logging service.</td>
         </tr>
 
         <tr>
-         <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
-                <td rowspan="2">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
+         <td rowspan="1"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
+                <td rowspan="1">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony</a></li>
@@ -965,52 +792,41 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a></td>
          <td>Obtains call, network, and SIM information.</td>
         </tr>   
-        <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber Utils</a><br><strong>(since 2.4)</strong></td>
-         <td>The phonenumber utils API provides methods for parsing and formatting phone numbers.</td>
-        </tr>        
 <tr>
-         <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
-                <td rowspan="8">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
+         <td rowspan="6"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
+                <td rowspan="6">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
                 <p>Documentation:</p>
                        <ul>
+                       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a></li>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics</a> and <a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics</a> and <a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework</a></li></ul></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
-         <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality. This module also includes Cairo EvasGL APIs which have been designed to support hardware-accelerated rendering.</td>
+         <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality.</td>
         </tr>
 <tr>
-<td><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL</a></td>
+<td><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL</a></td>
          <td>EFL is a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
 </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
          <td>Gets and sets the priority order of notification windows.</td>
         </tr>
-               <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">EFL Extension</a></td>
-         <td>EFL Extension provides functionalities to enhance the EFL libraries. It includes device-specific features (like support for hard back key).</td>
-        </tr>
-                       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager</a><br><strong>(since 2.4)</strong></td>
-         <td>The External Output Manager provides APIs for external outputs.</td>
-      </tr>          
 <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
          <td>A text rendering library and font-handling library to let applications find a font or closely matching font.</td>
         </tr>
-                       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol</a><br><strong>(since 2.4)</strong></td>
-         <td>Provides functions for creating EFL socket window and displaying EFL socket window.</td>
-      </tr>  
+       <tr>
+         <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES 1.1 and 2.0</a></td>
+         <td>Library for rendering 3D and 2D graphics in embedded systems.</td>
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
          <td>The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.</td>
         </tr>
 
         <tr>
-         <td rowspan="4"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
-                <td rowspan="4">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
+         <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
+                <td rowspan="2">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
@@ -1022,14 +838,6 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
          <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
         </tr>
-                       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method</a><br><strong>(since 2.4)</strong></td>
-         <td>The Input Method API provides the functions for starting IME application lifecycle, methods to interact with current UI state of IME, and getting attributes/events.</td>
-      </tr>    
-                       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control</a><br><strong>(since 2.4)</strong></td>
-         <td>The Voice control API provides functions for registering command and getting notification when registered command is recognized.</td>
-      </tr>                 
                                <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
                 <td rowspan="3">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
diff --git a/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm b/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm
index d25f912..b67aa2f 100644 (file)
--- a/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm
+++ b/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm
@@ -1,373 +1,373 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Creating Your First Tizen Application</title>  
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-<h1>Creating Your First Tizen Application</h1>
-
-<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>
-                               
-<p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p> 
-  <p>When you are developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/native_tools/tools_n.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p> 
-  <h2 id="create_n" name="create_n">To Create a HelloWorld Application</h2> 
-  <ol class="tutorstep"> 
-   <li>Creating the HelloWorld Project 
-    <ol type="a"> 
-     <li>Launch the <strong>Tizen IDE</strong>.</li> 
-     <li><a href="../process/app_dev_process_n.htm#creating">Create the application project in the IDE</a>. 
-        <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Native Project</strong> window, select <strong>Template &gt; MOBILE|WEARABLE-&lt;version&gt; &gt; Basic UI Application</strong>.</p> </li> 
-     <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li></ol>
-
-<p class="figure">Figure: Creating the helloworld project</p> 
- <p align="center"><img alt="Creating the helloworld project" src="../../images/hello_world_n.png" /></p>
-  
-     
-       <p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> configuration file as well as in several other project files, including:</p>                  
-       <ul> 
-     <li><span style="font-family: Courier New,Courier,monospace">inc</span> folder: Application header file directory</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">src</span> folder: C files directory</li> 
-    </ul>
-</li>
-
-<li>Configuring the Application and Creating the Application Code 
-    <p>To configure the application:</p>
-       <ol type="a">
-      <li><a href="../process/setting_properties_n.htm#manifest">Set the project properties</a> by modifying the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</li>
-         <li>Implement the application code in the <span style="font-family: Courier New,Courier,monospace">helloworld.c</span> file.</li>
-       </ol> 
-
-       <p>When coding the application, note that the Tizen Native API follows the basic principles listed below:</p>
-
-<ul><li>Ownership of returned strings
-<p>All strings returned as pointers must be freed by the caller unless stated otherwise.</p>
-<p>To not free memory can lead to memory leaks. Insufficient system memory triggers a system low memory notification and some applications can be killed. As a heuristic algorithm selects the process to be killed, it can destabilize the system.</p>
- 
-<pre class="prettyprint">
-char *app_id_string = NULL;
-if (!app_get_id(&amp;app_id_string))
-{
-&nbsp;&nbsp;&nbsp;// Use app_id_string
-&nbsp;&nbsp;&nbsp;if (app_id_string != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(app_id_string);
-}
-</pre></li>
-
-<li>Handles
-<p>A handle provides means to manage an instance associated with it. Handles are widely used in Tizen Native API for API compatibility reasons. Creation and destruction functions (create/destroy) are provided for each handle type. They do not create and destroy the handle itself, but they operate on the instance associated with a given handle. It means that a handle is not valid until a corresponding create function has been called and the handle is not valid after a corresponding destroy function has been called. Also accessor functions (getters/setters) are provided to access members of the hidden structure identified by a given handle.</p>
-<pre class="prettyprint">// Text message is represented by a handle
-messages_message_h sms_msg;
-
-// Create message and associate it with this handle
-messages_create_message(MESSAGES_TYPE_SMS, &amp;sms_msg);
-
-// Destroy message
-messages_destroy_message(sms_msg);
-
-// Change the properties of the text message
-messages_set_text(sms_msg,&quot;Hello, how are you?&quot;); 
-messages_add_address (sms_msg,&quot;01020157919&quot;, MESSAGE_RECIPIENT_TO);
-</pre></li>
-
-<li>Asynchronous function calls
-<p>Some of Tizen native API functions are asynchronous.</p>
-<p>An asynchronous function starts the processing and returns before this processing is finished. However, sometimes one should know, when this processing is finished. In such cases, waiting for the processing completion notification must be properly implemented.</p>
-</li>
-<li>Code assist
-<p>Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient.</p>
-<p>Press CTRL+SPACE while editing your codes to see available APIs as follows:</p>
-
-<p class="figure">Figure: Code assist</p> 
-  <p align="center"><img src="../../images/code_assist.png" alt="Code assist" /></p>   
-</li></ul>     
-</li>
-
-<li>Creating the Application UI with EFL
-<p> The <a href="../../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">EFL</a> is the native graphical toolkit for Tizen.</p>
-
-<p>To create the application UI:</p>
-<ol type="a">
-<li>Add an interface
-
-<p>In this tutorial, there are the following exercises:</p>
-<ul>
-<li>a window to hold everything</li>
-<li>a conformant, which shows the virtual keyboard (required by Tizen guidelines)</li>
-<li>a naviframe used for applications, which show multiple screens through their lives with back and forth transitions between them (required by Tizen guidelines)</li>
-<li>a horizontal box with
-       <ul>
-       <li>a label with several lines of text</li>
-       <li>a button</li>
-       </ul>
-</li>
-</ul>
-</li>
-
-<li>Add an application skeleton with appcore
-<p>A pointer to important objects is stored in the following data structure.</p>
-<pre class="prettyprint">typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;// All graphical objects here are pointers to the value of the type Evas_Object
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
-&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
-} appdata_s;
-</pre>
-<p>The pointer is created and initialized to contain only zeros in the <span style="font-family: Courier New,Courier,monospace">main()</span> function. The same applies for the structure of the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> type, which holds the app-core related callbacks.</p>
-
-<pre class="prettyprint">static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_gui(ad);
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
-&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
-
-&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">For more information on Appcore, see <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm#fundamentals">Handling the Application Fundamentals</a>.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-</li>
-<li>Create the GUI objects
-<p>The GUI is created with the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. It receives a pointer to fill in the &quot;ad&quot; structure.</p>
-<p>Create the function and mark it static, since it is reachable only from the current compilation unit (which allows the compiler to produce faster and smaller code).</p>
-<p>Inside the function, create a window and set its name and title to &quot;Hello World&quot;. Add a callback on the &quot;delete,request&quot; event (when the window is to be closed).</p>
-
-<pre class="prettyprint">static void
-create_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Create the window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;// Advertise which rotations are supported by the application; the
-&nbsp;&nbsp;&nbsp;// device_orientation callback is used to do the actual rotation when
-&nbsp;&nbsp;&nbsp;// the system detects the device&#39;s orientation has changed
-&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Add a callback on the &quot;delete,request&quot; event; it is emitted when
-&nbsp;&nbsp;&nbsp;// the system closes the window 
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Alternatively, elm_win_autodel_set() can be used to close
-&nbsp;&nbsp;&nbsp;// the window (not the application) automatically 
-&nbsp;&nbsp;&nbsp;// with the Back button, for example
-&nbsp;&nbsp;&nbsp;// elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-</pre>
-
-<p>The conformant goes inside the window first. Everything created from now on is inside it.</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the conformant
-&nbsp;&nbsp;&nbsp;ad-&gt;conformant = elm_conformant_add(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;// Set the conformant use as much horizontal and vertical space as
-&nbsp;&nbsp;&nbsp;// possible, that is, expand in both directions
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-
-&nbsp;&nbsp;&nbsp;// Set the conformant as the resize object for the window:
-&nbsp;&nbsp;&nbsp;// the window and the conformant grow together 
-&nbsp;&nbsp;&nbsp;// in proportion to each other
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conformant);
-
-&nbsp;&nbsp;&nbsp;// Show the conformant since all UI components are hidden by default
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conformant);
-</pre>
-
-<p>The naviframe is useful for applications showing multiple screens: it enables displaying a screen, switching to another, moving back to the first (and doing the same with several screens).</p>
-<p>Only one screen is built: the naviframe is created and put inside the conformant.</p>
-
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;naviframe = elm_naviframe_add(ad-&gt;conformant);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conformant, ad-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;// Show the box
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conformant);
-</pre>
-
-<p>The box is probably the most common container; it arranges a set of UI components in a vertical or horizontal way.</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the box
-&nbsp;&nbsp;&nbsp;Evas_Object *box = elm_box_add(ad-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;// Set the box vertical
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);
-
-&nbsp;&nbsp;&nbsp;// The box expands when its contents need more space
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-
-&nbsp;&nbsp;&nbsp;// The box fills the available space
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
-
-&nbsp;&nbsp;&nbsp;// Add the box in the naviframe container
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;naviframe, &quot;Hello World&quot;, NULL, NULL, box, NULL);
-
-&nbsp;&nbsp;&nbsp;// Show the box
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-</pre>
-
-<p>Labels hold text with formatting and over multiple lines.</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the label
-&nbsp;&nbsp;&nbsp;Evas_Object *label = elm_label_add(box);
-&nbsp;&nbsp;&nbsp;// The label expands when its contents need more space
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;// The box fills the available space on the horizontal axis and is
-&nbsp;&nbsp;&nbsp;// centered on the vertical axis (placed at 0.5 vertically, that is, in the
-&nbsp;&nbsp;&nbsp;// middle)
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(label, EVAS_HINT_FILL, 0.5);
-
-&nbsp;&nbsp;&nbsp;// Set the text for the label and set formatting through the HTML tags:
-&nbsp;&nbsp;&nbsp;// - &quot;Hello World!&quot; centered on the first line
-&nbsp;&nbsp;&nbsp;// - skip a line
-&nbsp;&nbsp;&nbsp;// - Add a longer text that does not fit on a single line but wraps at
-&nbsp;&nbsp;&nbsp;//   the word boundaries
-&nbsp;&nbsp;&nbsp;elm_object_text_set(label,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;align=center&gt;Hello World!&lt;/align&gt;&lt;br&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;br&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;wrap = word&gt;Clicking on the button below closes the application.&lt;/wrap&gt;&quot;);
-
-&nbsp;&nbsp;&nbsp;// Add the label at the end of the box
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, label);
-
-&nbsp;&nbsp;&nbsp;// Show the label
-&nbsp;&nbsp;&nbsp;evas_object_show(label);
-</pre>
-<p>The last UI component is the button. It exits the application when clicked.</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the button
-&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(box);
-
-&nbsp;&nbsp;&nbsp;// The box expands when its contents need more space
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-
-&nbsp;&nbsp;&nbsp;// The button fills the available space on the horizontal axis and is
-&nbsp;&nbsp;&nbsp;// placed at the bottom of the vertical axis (1 is the end of the axis,
-&nbsp;&nbsp;&nbsp;// the coordinates start at (0, 0) on the top-left corner
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);
-
-&nbsp;&nbsp;&nbsp;// Set the text for the button
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Close!&quot;);
-
-&nbsp;&nbsp;&nbsp;// Add a callback on the button for the &quot;clicked&quot; event; implementation of
-&nbsp;&nbsp;&nbsp;// the callback is below
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Add the UI component at the end of the box; since the axis starts in the top left
-&nbsp;&nbsp;&nbsp;// corner and the box is vertical, the end of the box is below the label
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-
-&nbsp;&nbsp;&nbsp;// Show the button
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-</pre>
-
-<p>This is how to set the window displaying everything on screen at once.</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Show window after the GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-</pre> 
-</li>
-<li>Exit the GUI
-
-<p>The <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function exits the Elementary; the prototype of the function is common to all callbacks given to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>. Put the <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function above the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. </p>
-<p>For more details on the callbacks, see the <a href="../../../../org.tizen.guides/html/native/ui/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>
-<pre class="prettyprint">static void
-clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;elm_exit();
-}
-</pre>
-</li>
-</ol>
-</li>
-  
-  <li>Building and Packaging the Application  
-    <p>After you have finished implementing your application, you must <a href="../process/building_app_n.htm">build it</a>.</p>
-       
-       <p>After building, the Tizen IDE automatically packages the project.</p>
-</li>
-
-<li>Running and Debugging the Application  
-    <p>You can run the HelloWorld application on the <a href="../process/running_app_n.htm">Emulator</a>. </p>
-       
-       <p>The following figure shows the application running in the Emulator.</p> <p class="figure">Figure: Running the project</p> 
-  <p align="center"><img alt="Running the project" src="../../images/hello.png" /></p>
-</li>
-
-</ol>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Creating Your First Tizen Application</title>  \r
+</head>\r
+\r
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+<h1>Creating Your First Tizen Application</h1>\r
+\r
+<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>\r
+                               \r
+<p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p> \r
+  <p>When you are developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/native_tools/tools_n.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p> \r
+  <h2 id="create_n" name="create_n">To Create a HelloWorld Application</h2> \r
+  <ol class="tutorstep"> \r
+   <li>Creating the HelloWorld Project \r
+    <ol type="a"> \r
+     <li>Launch the <strong>Tizen IDE</strong>.</li> \r
+     <li><a href="../process/app_dev_process_n.htm#creating">Create the application project in the IDE</a>. \r
+        <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Native Project</strong> window, select <strong>Template &gt; MOBILE|WEARABLE-&lt;version&gt; &gt; Basic UI Application</strong>.</p> </li> \r
+     <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li></ol>\r
+\r
+<p class="figure">Figure: Creating the helloworld project</p> \r
+ <p align="center"><img alt="Creating the helloworld project" src="../../images/hello_world_n.png" /></p>\r
+  \r
+     \r
+       <p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> configuration file as well as in several other project files, including:</p>                  \r
+       <ul> \r
+     <li><span style="font-family: Courier New,Courier,monospace">inc</span> folder: Application header file directory</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">src</span> folder: C files directory</li> \r
+    </ul>\r
+</li>\r
+\r
+<li>Configuring the Application and Creating the Application Code \r
+    <p>To configure the application:</p>\r
+       <ol type="a">\r
+      <li><a href="../process/setting_properties_n.htm#manifest">Set the project properties</a> by modifying the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</li>\r
+         <li>Implement the application code in the <span style="font-family: Courier New,Courier,monospace">helloworld.c</span> file.</li>\r
+       </ol> \r
+\r
+       <p>When coding the application, note that the Tizen Native API follows the basic principles listed below:</p>\r
+\r
+<ul><li>Ownership of returned strings\r
+<p>All strings returned as pointers must be freed by the caller unless stated otherwise.</p>\r
+<p>To not free memory can lead to memory leaks. Insufficient system memory triggers a system low memory notification and some applications can be killed. As a heuristic algorithm selects the process to be killed, it can destabilize the system.</p>\r
+ \r
+<pre class="prettyprint">\r
+char *app_id_string = NULL;\r
+if (!app_get_id(&amp;app_id_string))\r
+{\r
+&nbsp;&nbsp;&nbsp;// Use app_id_string\r
+&nbsp;&nbsp;&nbsp;if (app_id_string != NULL)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(app_id_string);\r
+}\r
+</pre></li>\r
+\r
+<li>Handles\r
+<p>A handle provides means to manage an instance associated with it. Handles are widely used in Tizen Native API for API compatibility reasons. Creation and destruction functions (create/destroy) are provided for each handle type. They do not create and destroy the handle itself, but they operate on the instance associated with a given handle. It means that a handle is not valid until a corresponding create function has been called and the handle is not valid after a corresponding destroy function has been called. Also accessor functions (getters/setters) are provided to access members of the hidden structure identified by a given handle.</p>\r
+<pre class="prettyprint">// Text message is represented by a handle\r
+messages_message_h sms_msg;\r
+\r
+// Create message and associate it with this handle\r
+messages_create_message(MESSAGES_TYPE_SMS, &amp;sms_msg);\r
+\r
+// Destroy message\r
+messages_destroy_message(sms_msg);\r
+\r
+// Change the properties of the text message\r
+messages_set_text(sms_msg,&quot;Hello, how are you?&quot;); \r
+messages_add_address (sms_msg,&quot;01020157919&quot;, MESSAGE_RECIPIENT_TO);\r
+</pre></li>\r
+\r
+<li>Asynchronous function calls\r
+<p>Some of Tizen native API functions are asynchronous.</p>\r
+<p>An asynchronous function starts the processing and returns before this processing is finished. However, sometimes one should know, when this processing is finished. In such cases, waiting for the processing completion notification must be properly implemented.</p>\r
+</li>\r
+<li>Code assist\r
+<p>Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient.</p>\r
+<p>Press CTRL+SPACE while editing your codes to see available APIs as follows:</p>\r
+\r
+<p class="figure">Figure: Code assist</p> \r
+  <p align="center"><img src="../../images/code_assist.png" alt="Code assist" /></p>   \r
+</li></ul>     \r
+</li>\r
+\r
+<li>Creating the Application UI with EFL\r
+<p> The <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a> is the native graphical toolkit for Tizen.</p>\r
+\r
+<p>To create the application UI:</p>\r
+<ol type="a">\r
+<li>Add an interface\r
+\r
+<p>In this tutorial, there are the following exercises:</p>\r
+<ul>\r
+<li>a window to hold everything</li>\r
+<li>a conformant, which shows the virtual keyboard (required by Tizen guidelines)</li>\r
+<li>a naviframe used for applications, which show multiple screens through their lives with back and forth transitions between them (required by Tizen guidelines)</li>\r
+<li>a horizontal box with\r
+       <ul>\r
+       <li>a label with several lines of text</li>\r
+       <li>a button</li>\r
+       </ul>\r
+</li>\r
+</ul>\r
+</li>\r
+\r
+<li>Add an application skeleton with appcore\r
+<p>A pointer to important objects is stored in the following data structure.</p>\r
+<pre class="prettyprint">typedef struct appdata \r
+{\r
+&nbsp;&nbsp;&nbsp;// All graphical objects here are pointers to the value of the type Evas_Object\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *conformant;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;\r
+} appdata_s;\r
+</pre>\r
+<p>The pointer is created and initialized to contain only zeros in the <span style="font-family: Courier New,Courier,monospace">main()</span> function. The same applies for the structure of the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> type, which holds the app-core related callbacks.</p>\r
+\r
+<pre class="prettyprint">static bool\r
+app_create(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;create_gui(ad);\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+\r
+int\r
+main(int argc, char *argv[])\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};\r
+&nbsp;&nbsp;&nbsp;int ret = 0;\r
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};\r
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};\r
+\r
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;\r
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;\r
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;\r
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;\r
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;\r
+\r
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);\r
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);\r
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);\r
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);\r
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);\r
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);\r
+\r
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);\r
+\r
+&nbsp;&nbsp;&nbsp;return ret;\r
+}\r
+</pre>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+  <tr> \r
+   <th class="note">Note</th> \r
+  </tr> \r
+  <tr> \r
+   <td class="note">For more information on Appcore, see <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm#fundamentals">Handling the Application Fundamentals</a>.</td> \r
+  </tr> \r
+   </tbody> \r
+  </table> \r
+</li>\r
+<li>Create the GUI objects\r
+<p>The GUI is created with the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. It receives a pointer to fill in the &quot;ad&quot; structure.</p>\r
+<p>Create the function and mark it static, since it is reachable only from the current compilation unit (which allows the compiler to produce faster and smaller code).</p>\r
+<p>Inside the function, create a window and set its name and title to &quot;Hello World&quot;. Add a callback on the &quot;delete,request&quot; event (when the window is to be closed).</p>\r
+\r
+<pre class="prettyprint">static void\r
+create_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Create the window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);\r
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;// Advertise which rotations are supported by the application; the\r
+&nbsp;&nbsp;&nbsp;// device_orientation callback is used to do the actual rotation when\r
+&nbsp;&nbsp;&nbsp;// the system detects the device&#39;s orientation has changed\r
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;// Add a callback on the &quot;delete,request&quot; event; it is emitted when\r
+&nbsp;&nbsp;&nbsp;// the system closes the window \r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Alternatively, elm_win_autodel_set() can be used to close\r
+&nbsp;&nbsp;&nbsp;// the window (not the application) automatically \r
+&nbsp;&nbsp;&nbsp;// with the Back button, for example\r
+&nbsp;&nbsp;&nbsp;// elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+</pre>\r
+\r
+<p>The conformant goes inside the window first. Everything created from now on is inside it.</p>\r
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the conformant\r
+&nbsp;&nbsp;&nbsp;ad-&gt;conformant = elm_conformant_add(ad-&gt;win);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set the conformant use as much horizontal and vertical space as\r
+&nbsp;&nbsp;&nbsp;// possible, that is, expand in both directions\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set the conformant as the resize object for the window:\r
+&nbsp;&nbsp;&nbsp;// the window and the conformant grow together \r
+&nbsp;&nbsp;&nbsp;// in proportion to each other\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conformant);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the conformant since all widgets are hidden by default\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conformant);\r
+</pre>\r
+\r
+<p>The naviframe is useful for applications showing multiple screens: it enables displaying a screen, switching to another, moving back to the first (and doing the same with several screens).</p>\r
+<p>Only one screen is built: the naviframe is created and put inside the conformant.</p>\r
+\r
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the naviframe\r
+&nbsp;&nbsp;&nbsp;ad-&gt;naviframe = elm_naviframe_add(ad-&gt;conformant);\r
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conformant, ad-&gt;naviframe);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the box\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conformant);\r
+</pre>\r
+\r
+<p>The box is probably the most common container; it arranges a set of widgets in a vertical or horizontal way.</p>\r
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the box\r
+&nbsp;&nbsp;&nbsp;Evas_Object *box = elm_box_add(ad-&gt;naviframe);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set the box vertical\r
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);\r
+\r
+&nbsp;&nbsp;&nbsp;// The box expands when its contents need more space\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+\r
+&nbsp;&nbsp;&nbsp;// The box fills the available space\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add the box in the naviframe container\r
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;naviframe, &quot;Hello World&quot;, NULL, NULL, box, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the box\r
+&nbsp;&nbsp;&nbsp;evas_object_show(box);\r
+</pre>\r
+\r
+<p>Labels hold text with formatting and over multiple lines.</p>\r
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the label\r
+&nbsp;&nbsp;&nbsp;Evas_Object *label = elm_label_add(box);\r
+&nbsp;&nbsp;&nbsp;// The label expands when its contents need more space\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;// The box fills the available space on the horizontal axis and is\r
+&nbsp;&nbsp;&nbsp;// centered on the vertical axis (placed at 0.5 vertically, that is, in the\r
+&nbsp;&nbsp;&nbsp;// middle)\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(label, EVAS_HINT_FILL, 0.5);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set the text for the label and set formatting through the HTML tags:\r
+&nbsp;&nbsp;&nbsp;// - &quot;Hello World!&quot; centered on the first line\r
+&nbsp;&nbsp;&nbsp;// - skip a line\r
+&nbsp;&nbsp;&nbsp;// - Add a longer text that does not fit on a single line but wraps at\r
+&nbsp;&nbsp;&nbsp;//   the word boundaries\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(label,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;align=center&gt;Hello World!&lt;/align&gt;&lt;br&gt;&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;br&gt;&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;wrap = word&gt;Clicking on the button below closes the application.&lt;/wrap&gt;&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add the label at the end of the box\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, label);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the label\r
+&nbsp;&nbsp;&nbsp;evas_object_show(label);\r
+</pre>\r
+<p>The last widget is the button. It exits the application when clicked.</p>\r
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Create the button\r
+&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(box);\r
+\r
+&nbsp;&nbsp;&nbsp;// The box expands when its contents need more space\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+\r
+&nbsp;&nbsp;&nbsp;// The button fills the available space on the horizontal axis and is\r
+&nbsp;&nbsp;&nbsp;// placed at the bottom of the vertical axis (1 is the end of the axis,\r
+&nbsp;&nbsp;&nbsp;// the coordinates start at (0, 0) on the top-left corner\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set the text for the button\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Close!&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add a callback on the button for the &quot;clicked&quot; event; implementation of\r
+&nbsp;&nbsp;&nbsp;// the callback is below\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add the widget at the end of the box; since the axis starts in the top left\r
+&nbsp;&nbsp;&nbsp;// corner and the box is vertical, the end of the box is below the label\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the button\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+</pre>\r
+\r
+<p>This is how to set the window displaying everything on screen at once.</p>\r
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Show window after the GUI is set up\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);\r
+}\r
+</pre> \r
+</li>\r
+<li>Exit the GUI\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function exits the Elementary; the prototype of the function is common to all callbacks given to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>. Put the <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function above the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. </p>\r
+<p>For more details on the callbacks, see the <a href="../../../../org.tizen.ui.guides/html/native/efl/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>\r
+<pre class="prettyprint">static void\r
+clicked_cb(void *user_data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;elm_exit();\r
+}\r
+</pre>\r
+</li>\r
+</ol>\r
+</li>\r
+  \r
+  <li>Building and Packaging the Application  \r
+    <p>After you have finished implementing your application, you must <a href="../process/building_app_n.htm">build it</a>.</p>\r
+       \r
+       <p>After building, the Tizen IDE automatically packages the project.</p>\r
+</li>\r
+\r
+<li>Running and Debugging the Application  \r
+    <p>You can run the HelloWorld application on the <a href="../process/running_app_n.htm">Emulator</a>. </p>\r
+       \r
+       <p>The following figure shows the widget running in the Emulator.</p> <p class="figure">Figure: Running the project</p> \r
+  <p align="center"><img alt="Running the project" src="../../images/hello.png" /></p>\r
+</li>\r
+\r
+</ol>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm b/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm
index 2bfe9d2..619f415 100644 (file)
--- a/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm
@@ -212,15 +212,15 @@ void view1_button1_onclicked(uib_view1_view_context *vc, Evas_object *obj, void
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
   <!--start--> 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   <!--end-->  
  </body>
diff --git a/org.tizen.gettingstarted/html/native/process/performance_n.htm b/org.tizen.gettingstarted/html/native/process/performance_n.htm
index adf4167..d2fd954 100644 (file)
--- a/org.tizen.gettingstarted/html/native/process/performance_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/performance_n.htm
@@ -1,514 +1,514 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Optimizing Application Performance</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#measure">Measuring Application Performance</a></li>
-                       <li><a href="#performance">Performance Tips</a></li>
-                       <li><a href="#dynamic_analysis">Dynamic Analysis</a></li>
-                       <li><a href="#valgrind_analysis">Valgrind Analysis</a></li>                     
-               </ul>
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.devtools/html/native_tools/da_overview_n.htm">Dynamic Analyzer</a></li>
-                       <li><a href="../../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Optimizing Application Performance</h1> 
-  
-  <p>The application performance optimization features include measuring and improving application performance.</p>
-  
-  <p>If an application performs poorly and gives delayed responses to user actions, the user experience can suffer. To avoid this situation, some parts of the code must be optimized.</p>
-  
-  <p>Most processors that are used today in mobile phones are based on multi-core technologies and so you must consider utilizing this hardware feature. To effectively utilize multi-core capabilities, you need to divide your code to run on several cores simultaneously. Traditionally, this is done by using <span style="font-family: Courier New,Courier,monospace">pthreads</span>, but this method has an overhead of initialization and termination of threads, and can generate potential runtime errors. Several solutions exist to exploit multi-core capabilities easily. These solutions abstract <span style="font-family: Courier New,Courier,monospace">pthreads</span>, allowing you to focus on the native application development without worrying about thread level management.</p> 
-
-  <p>To improve the performance of an application:</p> 
-  <ol> 
-   <li>Identify the bottlenecks which need to be optimized.</li> 
-   <li>Optimize the bottlenecks by code refactoring.</li> 
-   <li><a href="#measure">Measure performance</a> to compare refactoring gains.</li> 
-   <li>If the performance goal is met, you can stop the process, else go to step 2 and repeat till the goal is met.</li> 
-  </ol> 
-  <h2 id="measure" name="measure">Measuring Application Performance</h2> 
-  <p>Tizen SDK supports various tools which help to measure performance and increase performance at runtime:</p> 
-  <ul>
-       <li><a href="../../../../org.tizen.devtools/html/native_tools/da_overview_n.htm">Dynamic Analyzer</a>
-       <p>Dynamic Analyzer helps to identify bottlenecks and improve resource usage patterns in native applications. For more information on its usage, see <a href="#dynamic_analysis">Dynamic Analysis</a>.</p></li>
-
-       <li><a href="../../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a> <p>Valgrind detects memory errors or leaks. This tool helps to improve memory usage patterns in native applications. For more information on its usage, see <a href="#valgrind_analysis">Valgrind Analysis</a>.</p></li>
-  </ul>
-  <p>Measuring performance allows you to identify bottlenecks that take a critical amount of time during the program execution and to compare the code execution time before and after optimization.</p> 
-  <p>Profiling can show unexpected bottleneck locations that you have not noticed otherwise. Once bottlenecks are identified, you can consider applying threading mechanism to clear them. This solution does not work in all situations or for all algorithms, but it can be worth spending your time to investigate the possibilities. Code refactoring is required to apply the threading mechanism.</p> 
-  
-  <h2 id="performance" name="performance">Performance Tips</h2> 
-  <p>A faster application can increase battery life. If your application is not as fast as expected, you can look at profiling data to identify bottlenecks. Fixing these bottlenecks increases the application speed with minimal effort.</p> 
-  <p>Some general tips to improve the performance of your application are:</p> 
-  <ul> 
-   <li>Select the right algorithm and data structures.</li> 
-   <li>High-level optimization is important because it can change the order of complexity. If your code includes <span style="font-family: Courier New,Courier,monospace">sort</span>, <span style="font-family: Courier New,Courier,monospace">search</span>, or <span style="font-family: Courier New,Courier,monospace">compare</span>, use optimal algorithms and data structures.</li> 
-   <li>Split a task which contains both high and low priority jobs to prevent low priority jobs delaying high priority jobs. Running high and low priority jobs in a single task causes delays.</li> 
-   <li>Do not run heavy calculations in the same thread as your GUI.</li> 
-   <li>Use optimization options provided by toolchains.</li> 
-  </ul> 
-
- 
- 
- <h2 id="dynamic_analysis" name="dynamic_analysis">Dynamic Analysis</h2> 
-  <p>To make your applications powerful, faster, and more stable, you need to analyze their performance to recognize and fix bottlenecks, bugs, and memory and resource leaks.</p> 
-  <p>The following instructions and examples help you to use the dynamic analyzer effectively:</p> 
-  <ul> 
-   <li><a href="#running">Running Dynamic Analyzer</a> <p>Describes how to launch the dynamic analyzer.</p></li> 
-   <li><a href="#result">Using the Analysis Result</a> <p>Describes how to utilize the dynamic analyzer for various improvement purposes.</p></li> 
-   
-  </ul>
-  
-    <h3 id="running" name="running">Running Dynamic Analyzer</h3> 
-  <p>You can launch the dynamic analyzer in the IDE or as a standalone application from the Tizen SDK submenu.</p> 
-  <p>To launch the dynamic analyzer in the IDE:</p> 
-  <ol> 
-   <li>Right-click your project in the Tizen IDE <strong>Project Explorer</strong> view.</li> 
-   <li>Select <strong>Profile As &gt; Profile with Dynamic Analyzer</strong>. <p>The selected project is built, packaged, and installed on the target device. The dynamic analyzer is launched and the profiling starts automatically.</p></li> 
-  </ol> 
-  <p>To run the dynamic analyzer as a standalone from the Tizen SDK menu:</p> 
-  <ol> 
-   <li>Launch the dynamic analyzer from the SDK submenu.</li> 
-   <li>Select the target device and the application to be traced from the combo box in the dynamic analyzer toolbar.</li> 
-   <li>Click the <strong>Trace Start</strong> button.</li> 
-  </ol> 
-  <p>The performance details of your application retrieved during tracing are stored in trace files. You can manage the trace files through the <strong>Toolbar</strong>.</p> 
-  <p>The following figure illustrates the components of the <strong>Toolbar</strong> used for running the dynamic analyzer.</p> 
-  <p class="figure">Figure: Toolbar</p> 
-  <p align="center"> <img alt="Toolbar" src="../../images/coolbar.png" /> </p> 
-  <ol> 
-   <li><strong>Target</strong> 
-   <p>The <strong>Target</strong> combo box shows a serial number (if the target is a device), or the Emulator name (if the target is the Emulator).</p> </li>
-   <li><strong>Application</strong> 
-   <p>The <strong>Application</strong> combo box contains a list of applications in the selected target.</p> 
-   <p>If the <strong>Target</strong> combo box is empty or disabled, the <strong>Application</strong> combo box is disabled.</p></li> 
-   <li><strong>Start/Stop</strong>
-   <p>The <strong>Start/Stop</strong> button starts or stops the tracing of the selected application. While tracing, the trace result and UI sequence is automatically recorded and temporarily saved. To store the record permanently, click <strong>Save Trace</strong>.</p> </li> 
-   <li><strong>Timer</strong>
-   <p>The timer starts when you click the <strong>Start</strong> button and updates every second. It shows the current running time of the dynamic analyzer. If you click <strong>Stop</strong>, the timer stops when the analysis processing is complete.</p> </li> 
-   <li><strong>Save Trace</strong>
-   <p>Clicking the <strong>Save Trace</strong> button saves the trace data permanently.</p> </li> 
-   <li><strong>Open Trace</strong> 
-   <p>Clicking the <strong>Open Trace</strong> button loads and displays the saved trace data.</p> 
-   <p align="center"> <img alt="Open Trace window" src="../../images/open_trace.png" /> </p> 
-   <p>The <strong>Open Trace</strong> window consists of the following panels:</p> 
-   <ul> 
-    <li><strong>Saved file</strong> 
-    <p>Shows the trace saved by clicking the <strong>Save Trace</strong> button.</p> 
-    <p>An invalid save version trace is shown in orange color and cannot be opened. A valid trace is shown in black color. The currently opened trace is shown in blue color.</p> </li>
-    <li><strong>Temporary file</strong>
-    <p>Shows the temporary traces. A temporary trace refers to a trace that has not been saved and is deleted when the program exits.</p> </li> 
-    <li><strong>Trace details</strong> 
-    <p>Shows trace information of the saved traces from the <strong>Saved file</strong> and <strong>Temporary file</strong> panels.</p> </li>
-   </ul> 
-   <p>To open a trace, double-click the trace or select the trace and click <strong>Open</strong>.</p> 
-   <p>To delete a trace, select the trace and click the delete key on your keyboard.</p> </li>
-   <li><strong>Replay</strong>
-   <p>Clicking <strong>Replay</strong> repeats a previous analysis. You can use data from a previous dynamic analyzer instance or a saved trace data file. If the target or application do not match, the button is disabled.</p> </li> 
-   <li><strong>Process</strong>
-   <p>The <strong>Process</strong> combo box has a process list of the application being traced. By default, the dynamic analyzer shows the analysis results of all processes. If you select a process in the list, the dynamic analyzer shows the analysis result of that process only.</p></li>
-    <li><strong>View Source</strong>
-   <p>The <strong>View Source</strong> button displays the source code. If you click the button and the mouse is on the method name in any table-like view, the source code is displayed as a tooltip. By double-clicking the tooltip you can see the source code in the IDE. Apart from the Callstack view, the source code displayed is the caller part of the selected API, not the API definition.</p>
-
- <p>If an API is called from a shared library, the source code is not displayed as the source code of the shared library is not available.</p> 
-
-  <p>In the <strong>Callstack</strong> view, the source code corresponding to the address of the selected callstack unit is displayed.</p> 
-
-        <table class="note"> 
-         <tbody> 
-          <tr> 
-           <th class="note">Note</th> 
-          </tr> 
-          <tr> 
-           <td class="note"> <p>If the source code exists outside Tizen IDE, for example, in a built-in application on a device, the <strong>View Source</strong> button is disabled. The source view is available only for applications which are built as normal native projects in the IDE on the local machine.</p></td> 
-          </tr> 
-         </tbody> 
-        </table></li> 
-       <li><strong>Capture screen</strong>
-   <p>The <strong>Capture screen</strong> button captures the screen of the target at the time. The screenshot is shown in the <strong>Snapshot</strong> view.</p></li>  
-  <li><strong>Settings</strong>
-   <p>The <strong>Settings</strong> button opens the <strong>Settings</strong> window. It supports the runtime configuration feature and other settings.</p></li>
-   <li><strong>About</strong> 
-   <p>The <strong>About</strong> button opens the <strong>About</strong> window, which displays the dynamic analyzer version, build time, and license.</p> </li>
-  </ol> 
- 
-<h3 id="result" name="result">Using the Analysis Result</h3> 
-  <p>After the profiling is terminated by the dynamic analyzer, analyze the result. The dynamic analyzer provides a variety of information collected while your application was run. Use the result selectively to meet your improvement purposes.</p>
-  <p>The following instructions help you to utilize the analysis result:</p>
-  <ul>
-   <li><a href="#performance_analysis">Performance Analysis</a> <p>Describes how to analyze application performance.</p></li> 
-
-   <li><a href="#detecting">Detecting Leaks</a> <p>Describes how to detect memory and resource leaks.</p></li> 
-   <li><a href="#multithread">Multi-threaded Application and Synchronization Analysis</a> <p>Describes how to analyze threads and synchronization.</p></li> 
-  </ul>
-
-<h4 id="performance_analysis" name="performance_analysis">Performance Analysis</h4> 
-  <p>You can use the dynamic analyzer to analyze application performance and identify bottlenecks. After identifying bottlenecks, you can modify the code to eliminate them, which increases application performance significantly, and extends the battery life of the device running the application.</p> 
- 
-  <p>To analyze performance of the application with the dynamic analyzer, use the following features:</p> 
-  <ul> 
-   <li>User Function Profiling 
-    <p>When analyzing application performance, execution time of each method is one of the most significant factors. You can improve the performance of an application by identifying unexpected bottleneck locations, and analyzing and optimizing the most used methods in the dynamic analyzer.</p> 
-  <p>To detect and fix the methods consuming the most time:</p> 
-  <ol> 
-   <li>Select the <a href="../../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab and view the <strong>Function Usage Profiling</strong> view displaying the methods consuming the most time. Click the title of a column to view the sorted results.</li> 
-
-   <li>To view the execution time of the methods called within a specific time period, use the <a href="../../../../org.tizen.devtools/html/native_tools/da_range_info_n.htm">range information feature</a> of the dynamic analyzer. 
-       <p>The time consumed by UI-related methods is displayed on the <strong>UI Function Profiling</strong> view of the <strong>UI</strong> tab.</p> </li>
-  </ol>  
-   </li> 
-   <li>Timeline CPU Chart 
-   <p>When analyzing application performance, the CPU load is one of the most significant factors. A CPU load peak can result in a performance bottleneck. High CPU load leads to increased memory consumption, which shortens the battery life of the device running the application. To avoid this, you need to optimize your code.</p> 
-  <p class="figure">Figure: Timeline CPU chart</p> 
-  <p align="center"><img alt="Timeline CPU chart" src="../../images/timeline_cpu_chart.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  <p>To detect and fix CPU load peaks with the CPU load feature of the dynamic analyzer:</p> 
-  <ol> 
-   <li>Select the <strong>Timeline</strong> tab and view the CPU chart.</li> 
-   <li>Hover the mouse on a CPU peak to view the CPU load value in a tooltip.</li> 
-   <li>Click the CPU peak to highlight the last user method called before the peak in the <strong>Call Trace</strong> view.</li> 
-   <li>Click the <strong>View Source</strong> button and place the mouse on the highlighted method. The source code is displayed as a tooltip. To investigate the method, double-click on it, and the source code is displayed in the IDE.</li> 
-   <li>Modify the code in the IDE, re-build, and re-analyze the application to see if the bottleneck has been eliminated.</li> 
-  </ol> 
-   
-   </li> 
-   <li>Thread Load 
-     <p>If you use threads in your application code, you need to analyze the load of each thread during the application execution. The thread load feature helps to distribute the thread load. You can modify the code to optimize the thread load, while maintaining a single thread.</p> 
-  <p>The thread load is displayed in the <strong>Thread</strong> tab.</p> 
-  <p class="figure">Figure: Thread load</p> 
-  <p align="center"><img alt="Thread load" src="../../images/thread_load.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  <p>The thread line displayed in blue indicates the thread load within a time frame. The darker the color, the higher the load.</p>
-   
-   </li> 
-  </ul> 
-  <p>When modifying the application code to improve its performance, consider the following:</p> 
-  <ul> 
-   <li>Select the right algorithm and data structures.</li> 
-   <li>High-level optimization is important because it can change the order of complexity. If your code includes <span style="font-family: Courier New,Courier,monospace">sort</span>, <span style="font-family: Courier New,Courier,monospace">search</span>, or <span style="font-family: Courier New,Courier,monospace">compare</span>, use optimal algorithms and data structures.</li> 
-   <li>Running high and low priority jobs in a single task causes delays. Split the jobs into multiple tasks.</li> 
-   <li>Do not run heavy calculations in the same thread with your GUI.</li> 
-   <li>Use optimization options provided by toolchains.</li> 
-  </ul> 
-
- 
- <h4 id="detecting" name="detecting">Detecting Leaks</h4> 
-  <p>To improve the performance of your application, you can use the dynamic analyzer to detect memory leaks.</p> 
-
-  <p>Memory leaks occur when memory capacity that is dynamically allocated during application execution is not returned after the execution stops. Severe or accumulating memory leaks can affect the performance of other applications and programs.</p> 
-  <p>To detect and fix memory leaks using the dynamic analyzer:</p> 
-  <ol> 
-   <li>To view the memory leaks occurring during application analysis, select the <a href="../../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab.
-  <p align="center"><img alt="Memory leaks" src="../../images/memory_leaks.png" /></p> 
-   <p>All the listed items are not memory leaks. To identify actual memory leaks, look for applications that are already terminated but have not returned the allocated memory. When these leaks are fixed, they disappear from the list.</p></li> 
-   <li>Click the <strong>View Source</strong> icon in the toolbar. 
-   <p align="center"><img alt="View source" src="../../images/view_source.png" /></p></li> 
-   <li>Move the mouse pointer to the list item you want to check. The source code is displayed as a tooltip. The part causing the memory leak is displayed in red. 
-       <p align="center"><img alt="Source View" src="../../images/source_view.png" /></p>
-       </li> 
-   <li>To view the entire source code in the IDE and fix the leak, double-click the list item. If the IDE is not running the dynamic analyzer launches it automatically.</li> 
-  </ol> 
- 
- <h4 id="multithread" name="multithread">Multi-threaded Application and Synchronization Analysis</h4> 
-  <p>Understanding the thread execution in multi-threaded applications can be challenging. The GDB (GNU Debugger) supports the process of debugging multi-threaded applications, but since it uses synchronization objects, the debugging can be quite difficult. 
-       The dynamic analyzer, on the other hand, provides effective thread analysis features.</p> 
-  <p>You can use the dynamic analyzer to:</p> 
-  <ul> 
-   <li><a href="#life">Analyze thread life-cycle</a></li> 
-   <li><a href="#concurrency">Analyze thread concurrency</a></li> 
-   <li><a href="#sync">Analyze synchronization</a></li> 
-  </ul> 
-  <h5 id="life" name="life">Analyzing Thread Life-cycle</h5> 
-  <p>Testing threads is difficult as they are nondeterministic. Visualizing the thread life-cycle is an effective method for analyzing the thread life-cycle. </p> 
-  <p>The dynamic analyzer has 3 types of user threads:</p> 
-  <ul> 
-   <li><strong>Main thread</strong> created from the system for running applications</li> 
-   <li><strong>Tizen threads</strong> including worker threads and event-driven threads</li> 
-   <li><strong>pthread</strong></li> 
-  </ul> 
-  <p>In the thread chart, the thread life-cycle is displayed as follows:</p> 
-  <ul> 
-   <li><strong>Thread creation</strong>: When an API is called to create the thread, a yellow bar is displayed and a new chart item is created with a <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. <p class="figure">Figure: Creating a thread</p> 
-<p align="center"><img alt="thread create" src="../../images/thread_create.png" /></p></li> 
-   <li><strong>Thread exiting</strong>: When a thread exits, a purple bar is displayed with a joined <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. If another thread calls the API of the exited thread, a yellow bar is displayed. <p class="figure">Figure: Exiting a thread</p> 
-<p align="center"><img alt="thread exit" src="../../images/thread_exit.png" /></p></li> 
-  </ul> 
-  <p>A new thread is created in a joinable state. Otherwise, memory and resource leaks can occur until the process ends. To make the process faster, set the thread to the detach state, or call the detach API. You can check the state of the thread on the <strong>Thread</strong> tab.</p> 
-  <h5 id="concurrency" name="concurrency">Analyzing Thread Concurrency</h5> 
-  <p>The number of live threads and their resource usage can be used to determine an efficient thread concurrency.</p> 
-  <p>The thread chart displays the relationship and progress between threads and allows you to check the number of live threads. The CPU load of a thread is also displayed.</p> 
-  <h5 id="sync" name="sync">Analyzing Synchronization</h5> 
-  <p>When multiple threads access the same resources, data race occurs. To avoid this, threads must be synchronized.</p> 
-  <p>The synchronization chart in the dynamic analyzer has the following synchronization objects:</p> 
-  <ul> 
-   <li>Tizen mutex</li> 
-   <li>Tizen monitor</li> 
-   <li>Tizen semaphore</li> 
-   <li>pthread mutex</li> 
-   <li>pthread condition variable</li> 
-  </ul> 
-  <p>You can view the synchronization chart based on the thread, or the synchronization status:</p> 
-  <ul> 
-   <li> To view the child of each thread chart item, select <strong>Thread</strong> in the synchronization chart combo box. </li> 
-   <li>To view the parent item with the thread for each usage showing the child items, select <strong>Sync</strong>.</li> 
-  </ul> 
-  <p class="figure">Figure: Synchronization chart types</p> 
-  <p align="center"><img alt="Synchronization chart types" src="../../images/sync_chart.png" /></p> 
-  <p>A synchronization object can be checked using the synchronization chart. When a synchronization object acquires a lock, the thread enters the critical section. The dynamic analyzer analyzes the critical section duration and waiting time. </p> 
-  <p>If the critical section duration increases, the thread stops working concurrently and affects the performance. If a thread acquires a lock, the critical section waiting time of the other threads increases. To avoid potential dead lock, reduce the waiting time.</p> 
-  <p class="figure">Figure: Dead lock warning</p> 
- <p align="center"><img alt="Dead lock warning" src="../../images/dead_lock_warning.png" /></p> 
-  
-<h2 id="valgrind_analysis" name="valgrind_analysis">Valgrind Analysis</h2> 
-  <p>Valgrind helps you to detect memory errors or leaks in your application at runtime.</p> 
-  <p>The following instructions and examples help you to use the Valgrind effectively:</p> 
-  <ul> 
-   <li><a href="#running_valgrind">Running Valgrind</a> <p>Describes how to launch the Valgrind with your application.</p></li> 
-   <li><a href="#valgrind_result">Viewing Valgrind Result</a> <p>Describes the information of the result analyzed by Valgrind.</p></li> 
-  </ul> 
-
- <h3 id="running_valgrind" name="running_valgrind">Running Valgrind</h3> 
-   <p>To set the Valgrind options for your application:</p> 
-  <ol> 
-   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Profile As</strong> &gt; <strong>Profile Configurations</strong>.</li> 
-   <li>In the <strong>Profile Configurations</strong> window, right-click the <strong>Profile with Valgrind</strong> and select <strong>New</strong>.</li> 
-   <li>Select the created configuration.</li> 
-   <li>Go to <strong>Memory Profile Options &gt; Collect data</strong> tab: <p>Select from 2 types of memory profiling settings:</p> 
-    <ul> 
-     <li>Memory error and memory leak checking <p>This option uses the <strong>Memcheck</strong> tool to profile your application.</p> </li> 
-     <li>Heap memory profiling <p>This option uses the <strong>Massif</strong> tool to profile your application. 
-       </p></li> 
-    </ul></li> 
-   <li><p>On the <strong>General setting</strong> tab, set the general Valgrind options. These options are used for both <strong>Memcheck</strong> and <strong>Massif</strong> profiling.</p> <p class="figure">Figure: Memory error and memory leak data options</p> 
-<p align="center"><img alt="Memory error and memory leak data options" src="../../images/valgrind_general.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-    <table style="width: 100%" border="1"> 
-     <caption>
-       Table: General setting options 
-     </caption> 
-     <tbody> 
-      <tr> 
-       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
-       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-      </tr> 
-      <tr> 
-       <td>trace children on exec</td> 
-       <td><p>When enabled, Valgrind traces into sub-processes initiated through the exec system call. This is necessary for multi-project applications. Valgrind does trace into the child of a fork (it would be difficult not to, since fork makes an identical copy of a process), so this option is arguably badly named. However, most children of fork calls immediately call exec anyway.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>run <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> on exit</td> 
-       <td><p>This option is only relevant when running Valgrind on Linux.</p> <p>The GNU C library (<span style="font-family: Courier New,Courier,monospace;">libc.so</span>), which is used by all applications, can allocate memory for its own uses. Usually it does not free that memory when the application ends, since the Linux kernel reclaims all process resources when a process exits anyway. The glibc authors realized that this behavior causes leak checkers, such as Valgrind, to falsely report leaks in glibc, when a leak check is done at exit. In order to avoid this, they provided a routine called <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> specifically to make glibc release all memory it has allocated. <strong>Memcheck</strong> therefore tries to run <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> at exit. Unfortunately, in some very old versions of glibc, <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> is sufficiently buggy to cause segmentation faults. This was particularly noticeable on Red Hat 7.1. So this option is provided in order to inhibit the run of <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span>. If your application seems to run fine on Valgrind, but segfaults at exit, disabling this option can fix the problem, although at the cost of possibly falsely reporting space leaks in <span style="font-family: Courier New,Courier,monospace;">libc.so</span>. </p></td> 
-      </tr> 
-      <tr> 
-       <td>demangle C++ names</td> 
-       <td><p>Automatic demangling (decoding) of C++ names is enabled by default. When enabled, Valgrind attempts to translate encoded C++ names back to something approaching the original. The demangler handles symbols mangled by g++ versions 2.X, 3.X, and 4.X.</p> <p>An important fact about demangling is that method names mentioned in suppressions files must be in their mangled form. Valgrind does not demangle method names when searching for applicable suppressions, because to do otherwise would make suppression file contents dependent on the state of Valgrind&#39;s demangling machinery, and also slow down suppression matching.</p></td> 
-      </tr> 
-      <tr> 
-       <td>num callers in stack trace</td> 
-       <td>This option specifies the maximum number of entries shown in stack traces that identify application locations. Errors are commoned up using only the top four method locations (the place in the current method, and that of its 3 immediate callers). So this does not affect the total number of errors reported.<p></p> <p>The maximum value for this option is 50. Note that higher settings make Valgrind run more slowly and take more memory, but can be useful when working with applications with deeply-nested call chains.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>limit errors reported</td> 
-       <td><p>When enabled, Valgrind stops reporting errors after 10,000,000 in total, or 1,000 different ones, have been seen. This is to stop the error tracking machinery from becoming a huge performance overhead in applications with many errors.</p></td> 
-      </tr> 
-      <tr> 
-       <td>show errors below main</td> 
-       <td><p>By default, stack traces for errors do not show any methods that appear beneath <span style="font-family: Courier New,Courier,monospace;">main()</span>. Alternatively, if <span style="font-family: Courier New,Courier,monospace;">main()</span> is not present in the stack trace, it does not show any methods below <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods, such as glibc&#39;s <span style="font-family: Courier New,Courier,monospace;">__libc_start_main()</span>. Furthermore, if <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods are present in the trace, they are normalized as (below <span style="font-family: Courier New,Courier,monospace;">main()</span>), in order to make the output more deterministic. If this option is enabled, all stack trace entries are shown and <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods are not normalized.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>max size of stack frame</td> 
-       <td><p>This option specifies the maximum size of a stack frame. If the stack pointer moves by more than this amount, Valgrind assumes that the application is switching to a different stack.</p> <p>You can to use this option if your application has large stack-allocated arrays. Valgrind keeps track of your application&#39;s stack pointer. If it changes by more than the threshold amount, Valgrind assumes your application is switching to a different stack, and <strong>Memcheck</strong> behaves differently than it would for a stack pointer change smaller than the threshold. Usually this heuristic works well. However, if your application allocates large structures on the stack, this heuristic is fooled, and <strong>Memcheck</strong> subsequently reports large numbers of invalid stack accesses. This option allows you to change the threshold to a different value.</p> <p>You must only consider the use of this option if Valgrind&#39;s debug output directs you to do so. In that case, it tells you the new threshold you must specify.</p> <p>In general, allocating large structures on the stack is a bad idea, because you can easily run out of stack space, especially on systems with limited memory or which expect to support large numbers of threads each with a small stack, and also because the error checking performed by <strong>Memcheck</strong> is more effective for heap-allocated data than for stack-allocated data. If you have to use this option, consider rewriting your code to allocate on the heap rather than on the stack.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>suppressions file</td> 
-       <td><p>This option specifies an extra file from which to read descriptions of errors to suppress. You can use up to 100 extra suppression files.</p></td> 
-      </tr> 
-     </tbody> 
-    </table></li> 
-   <li><p>On the <strong>Tool Advanced setting</strong> tab, set the advanced options.</p> <p>The tab content depends on the selection you have made on the <strong>Collect data</strong> tab.</p> 
-    <table style="width: 100%" border="1"> 
-     <caption>
-       Table: Tool Advanced setting options for memory error and memory leak profiling 
-     </caption> 
-     <tbody> 
-      <tr> 
-       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
-       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-      </tr> 
-      <tr> 
-       <td>leak check</td> 
-       <td><p>This option, when enabled, searches for memory leaks when the client application finishes. If set to summary, it lists out how many leaks occurred. If set to full or yes, it also gives details of each individual leak.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>leak resolution</td> 
-       <td><p>When performing leak checks, this option determines how willing <strong>Memcheck</strong> is to consider different backtraces to be the same for the purposes of merging multiple leaks into a single leak report. When set to low, only the first 2 entries need match. When set to med, 4 entries have to match. When high, all entries need to match.</p> <p>For hardcore leak debugging, you probably want to use --leak-resolution=high together with --num-callers=40 or a similar large number. The --leak-resolution setting does not affect <strong>Memcheck</strong>&#39;s ability to find leaks. It only changes how the results are presented.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>freelist size (blocks)</td> 
-       <td><p>When the client application releases memory using free (in C) or delete (C++), that memory is not immediately made available for re-allocation. Instead, it is marked inaccessible and placed in a queue of freed blocks. The purpose is to defer as long as possible the point at which freed-up memory comes back into circulation. This increases the chance that <strong>Memcheck</strong> is able to detect invalid accesses to blocks for some significant period of time after they have been freed.</p> <p>This option specifies the maximum total size, in bytes, of the blocks in the queue. The default value is 20 million bytes. Increasing this increases the total amount of memory used by <strong>Memcheck</strong>, but can result in the detection of invalid uses of freed blocks which would otherwise go undetected.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>show reachable blocks</td> 
-       <td><p>When disabled, the memory leak detector only shows &quot;definitely lost&quot; and &quot;possibly lost&quot; blocks. When enabled, the leak detector also shows &quot;reachable&quot; and &quot;indirectly lost&quot; blocks. It shows all blocks, except suppressed ones, so --show-all would be a better name for it.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>allow partial loads</td> 
-       <td><p>This option controls how <strong>Memcheck</strong> handles word-sized, word-aligned loads from addresses for which some bytes are addressable and others are not. When set to yes, such loads do not produce an address error. Instead, loaded bytes originating from illegal addresses are marked as uninitialized, and those corresponding to legal addresses are handled in the normal way.</p> <p>When set to no, loads from partially invalid addresses are treated the same as loads from completely invalid addresses, an illegal-address error is issued, and the resulting bytes are marked as initialized.</p> <p>The code that behaves in this way is in violation of the ISO C/C++ standards, and must be considered broken. If at all possible, such code must be fixed. This option must be used only as a last resort.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>undef value errors</td> 
-       <td>This option controls whether <strong>Memcheck</strong> reports uses of undefined value errors. If you do not want to see undefined value errors, set this to no. It also has the side effect of slightly speeding up <strong>Memcheck</strong>.<p></p> </td> 
-      </tr> 
-     </tbody> 
-    </table> 
-    <table style="width: 100%" border="1"> 
-     <caption>
-       Table: Tool Advanced setting options for heap memory profiling 
-     </caption> 
-     <tbody> 
-      <tr> 
-       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
-       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-      </tr> 
-      <tr> 
-       <td>profile heap</td> 
-       <td><p>This option specifies whether heap profiling is done.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>administrative bytes per block</td> 
-       <td><p>If heap profiling is enabled, this option gives the number of administrative bytes per block to use. This must be an estimate of the average, since it can vary. For example, the allocator used by glibc on Linux requires somewhere between 4 to 15 bytes per block, depending on various factors. That allocator also requires admin space for freed blocks, but <strong>Massif</strong> cannot account for this.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>profile stack</td> 
-       <td><p>This option specifies whether stack profiling must be done. This option slows <strong>Massif</strong> down greatly, and so is off by default. <strong>Massif</strong> assumes that the main stack has size zero at start-up. This is not true, but doing otherwise accurately is difficult. Furthermore, starting at zero better indicates the size of the part of the main stack that a user application actually has control over.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>allocation tree depth</td> 
-        <td><p>The maximum depth of the allocation trees recorded for detailed snapshots. Increasing it makes <strong>Massif</strong> run somewhat more slowly, use more memory, and produce bigger output files.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>heap allocation threshold</td> 
-       <td><p>The significance threshold for heap allocations is a percentage of the total memory size. The allocation tree entries that account for less than this are aggregated. This must be specified in tandem with ms_print&#39;s option of the same name.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>allocation peak inaccuracy</td> 
-       <td><p><strong>Massif</strong> does not necessarily record the actual global memory allocation peak. By default, it records a peak only when the global memory allocation size exceeds the previous peak by at least 1.0%. This is because there can be many local allocation peaks along the way, and doing a detailed snapshot for every one is expensive and wasteful, as all but one of them are later discarded. This inaccuracy can be changed (even to 0.0%) through this option, but <strong>Massif</strong> runs drastically slower as the number approaches zero.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>time unit</td> 
-       <td><p>This option specifies the time unit used for the profiling. There are 3 possibilities: </p> 
-        <ul> 
-         <li>Instructions executed (i) <p>Good for most cases</p> </li> 
-         <li>Real (wall clock) time (in milliseconds) <p>It is useful sometimes</p> </li> 
-         <li>Bytes allocated/deallocated on the heap and/or stack (B) <p>It is useful for very short-run programs, and for testing purposes, because it is the most reproducible across different machines.</p> </li> 
-        </ul></td> 
-      </tr> 
-      <tr> 
-       <td>detailed snapshot frequency</td> 
-       <td><p>This option specifies the frequency of detailed snapshots. With --detailed-freq=1, every snapshot is detailed.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>max snapshots</td> 
-       <td><p>This option specifies the maximum number of snapshots recorded. If set to N, for all programs except very short-running ones, the final number of snapshots is between N/2 and N.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>minimum heap block alignment</td> 
-       <td><p>By default, Valgrind&#39;s malloc, realloc, and so on return a block whose starting address is 8-byte-aligned or 16-byte-aligned. The value depends on the platform and matches the platform default. This option allows you to specify a different alignment. The supplied value must be greater than or equal to the default, less than or equal to 4096, and must be a power of 2.</p> </td> 
-      </tr> 
-      <tr> 
-       <td>allocation functions</td> 
-       <td><p>Methods specified with this option are treated as though they were a heap allocation method, such as malloc. This is useful for methods that are wrappers to malloc or new, which can fill up the allocation trees with uninteresting information. This option can be specified multiple times on the command line, to name multiple methods.</p> <p>The named method is only treated this way if it is the top entry in a stack trace, or just below another method treated this way. For example, if you have a method malloc1 that wraps malloc, and malloc2 that wraps malloc1, just specifying --alloc-fn=malloc2 has no effect. You need to specify --alloc-fn=malloc1 as well. This is a little inconvenient, but the reason is that checking for allocation method is slow, and it saves a lot of time if <strong>Massif</strong> can stop looking through the stack trace entries as soon as it finds one that does not match rather than having to continue through all the entries.</p> </td> 
-      </tr> 
-     </tbody> 
-    </table> </li> 
-   <li>To save the settings, click <strong>Apply</strong>.</li> 
-   <li>To run Valgrind, click <strong>Profile</strong>.</li> 
-  </ol>
- 
-<h3 id="valgrind_result" name="valgrind_result">Viewing Valgrind Result</h3> 
-  <p>After the <a href="#running_valgrind">memory profiling</a> is terminated, you can view the profiling results.</p> 
-  <h4 id="memleak" name="memleak">Memory Error and Leak Results</h4> 
-  <p>The memory error table displays memory leaks that occurred during the profiling process.</p> 
-
-  <ul> 
-   <li><strong>Memory error</strong> or <strong>Memory leak</strong> is the error or leak type.</li> 
-   <li><strong>Function name</strong> is the location where the error occurred.</li> 
-   <li><strong>Sizes</strong> is the memory size of the error.</li> 
-   <li><strong>Address</strong> is the code memory address.</li> 
-   <li><strong>Location</strong> is the source or executable path, or library path, where the error occurred.</li> 
-   <li><strong>pid</strong> is the process ID, and <strong>tid</strong> is the thread ID.<p></p> </li> 
-  </ul> 
-  <p>If you expand an error entry, you can see the callstack of the method.</p> 
-  <h4 id="heap" name="heap">Heap Memory Profiling Results</h4> 
-  <p>The heap memory profiling table displays the heap memory consumed and allocated during the profiling process.</p> 
-  <p class="figure">Figure: Heap memory profiling results</p> 
-  <p align="center"><img alt="Heap memory profiling results" src="../../images/valgrind_heap.png" /></p> 
-  <ul> 
-   <li><strong>Snapshot</strong> is the index number of the snapshot.</li> 
-   <li><strong>Time (i)</strong> is the number of instructions being executed.</li> 
-   <li><strong>Total (B)</strong> is the total heap memory consumption byte size.</li> 
-   <li><strong>Useful Heap (B)</strong> is the size of the heap memory used by the program.</li> 
-   <li><strong>Extra Heap (B)</strong> is the size of the heap memory allocated in excess of what the program is using. The source of extra heap memory is: 
-    <ul> 
-     <li>Administrative bytes of the heap memory block</li> 
-     <li>Aligned bytes of the requested memory size</li> 
-    </ul> </li> 
-   <li><strong>Stack (B)</strong> is the size of the stacks. By default, stack profiling is disabled as it slows profiling. It is enabled using the <strong>profile stack</strong> option.</li> 
-  </ul> 
-  <p>A snapshot with a green icon in front has a heap tree with a callstack. Double-click the entry to see the callstack details.</p> 
-  <p>For information on executing Valgrind on the command line interface, see the <a href="http://valgrind.org/docs/manual/manual.html" target="_blank">Valgrind User Manual</a>.</p>
-
-  <h4 id="manage" name="manage">Managing Results</h4>
-  <p>To save a Valgrind profiling result, click <strong>Save file</strong> on the Valgrind result view toolbar.</p> 
-
-  <p>To load a saved Valgrind result file, select <strong>File &gt; Open File</strong> in the IDE menu.</p>  
-  
-   
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Optimizing Application Performance</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#measure">Measuring Application Performance</a></li>\r
+                       <li><a href="#performance">Performance Tips</a></li>\r
+                       <li><a href="#dynamic_analysis">Dynamic Analysis</a></li>\r
+                       <li><a href="#valgrind_analysis">Valgrind Analysis</a></li>                     \r
+               </ul>\r
+               \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.devtools/html/native_tools/da_overview_n.htm">Dynamic Analyzer</a></li>\r
+                       <li><a href="../../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Optimizing Application Performance</h1> \r
+  \r
+  <p>The application performance optimization features include measuring and improving application performance.</p>\r
+  \r
+  <p>If an application performs poorly and gives delayed responses to user actions, the user experience can suffer. To avoid this situation, some parts of the code must be optimized.</p>\r
+  \r
+  <p>Most processors that are used today in mobile phones are based on multi-core technologies and so you must consider utilizing this hardware feature. To effectively utilize multi-core capabilities, you need to divide your code to run on several cores simultaneously. Traditionally, this is done by using <span style="font-family: Courier New,Courier,monospace">pthreads</span>, but this method has an overhead of initialization and termination of threads, and can generate potential runtime errors. Several solutions exist to exploit multi-core capabilities easily. These solutions abstract <span style="font-family: Courier New,Courier,monospace">pthreads</span>, allowing you to focus on the native application development without worrying about thread level management.</p> \r
+\r
+  <p>To improve the performance of an application:</p> \r
+  <ol> \r
+   <li>Identify the bottlenecks which need to be optimized.</li> \r
+   <li>Optimize the bottlenecks by code refactoring.</li> \r
+   <li><a href="#measure">Measure performance</a> to compare refactoring gains.</li> \r
+   <li>If the performance goal is met, you can stop the process, else go to step 2 and repeat till the goal is met.</li> \r
+  </ol> \r
+  <h2 id="measure" name="measure">Measuring Application Performance</h2> \r
+  <p>Tizen SDK supports various tools which help to measure performance and increase performance at runtime:</p> \r
+  <ul>\r
+       <li><a href="../../../../org.tizen.devtools/html/native_tools/da_overview_n.htm">Dynamic Analyzer</a>\r
+       <p>Dynamic Analyzer helps to identify bottlenecks and improve resource usage patterns in native applications. For more information on its usage, see <a href="#dynamic_analysis">Dynamic Analysis</a>.</p></li>\r
+\r
+       <li><a href="../../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a> <p>Valgrind detects memory errors or leaks. This tool helps to improve memory usage patterns in native applications. For more information on its usage, see <a href="#valgrind_analysis">Valgrind Analysis</a>.</p></li>\r
+  </ul>\r
+  <p>Measuring performance allows you to identify bottlenecks that take a critical amount of time during the program execution and to compare the code execution time before and after optimization.</p> \r
+  <p>Profiling can show unexpected bottleneck locations that you have not noticed otherwise. Once bottlenecks are identified, you can consider applying threading mechanism to clear them. This solution does not work in all situations or for all algorithms, but it can be worth spending your time to investigate the possibilities. Code refactoring is required to apply the threading mechanism.</p> \r
+  \r
+  <h2 id="performance" name="performance">Performance Tips</h2> \r
+  <p>A faster application can increase battery life. If your application is not as fast as expected, you can look at profiling data to identify bottlenecks. Fixing these bottlenecks increases the application speed with minimal effort.</p> \r
+  <p>Some general tips to improve the performance of your application are:</p> \r
+  <ul> \r
+   <li>Select the right algorithm and data structures.</li> \r
+   <li>High-level optimization is important because it can change the order of complexity. If your code includes <span style="font-family: Courier New,Courier,monospace">sort</span>, <span style="font-family: Courier New,Courier,monospace">search</span>, or <span style="font-family: Courier New,Courier,monospace">compare</span>, use optimal algorithms and data structures.</li> \r
+   <li>Split a task which contains both high and low priority jobs to prevent low priority jobs delaying high priority jobs. Running high and low priority jobs in a single task causes delays.</li> \r
+   <li>Do not run heavy calculations in the same thread as your GUI.</li> \r
+   <li>Use optimization options provided by toolchains.</li> \r
+  </ul> \r
+\r
+ \r
+ \r
+ <h2 id="dynamic_analysis" name="dynamic_analysis">Dynamic Analysis</h2> \r
+  <p>To make your applications powerful, faster, and more stable, you need to analyze their performance to recognize and fix bottlenecks, bugs, and memory and resource leaks.</p> \r
+  <p>The following instructions and examples help you to use the dynamic analyzer effectively:</p> \r
+  <ul> \r
+   <li><a href="#running">Running Dynamic Analyzer</a> <p>Describes how to launch the dynamic analyzer.</p></li> \r
+   <li><a href="#result">Using the Analysis Result</a> <p>Describes how to utilize the dynamic analyzer for various improvement purposes.</p></li> \r
+   \r
+  </ul>\r
+  \r
+    <h3 id="running" name="running">Running Dynamic Analyzer</h3> \r
+  <p>You can launch the dynamic analyzer in the IDE or as a standalone application from the Tizen SDK submenu.</p> \r
+  <p>To launch the dynamic analyzer in the IDE:</p> \r
+  <ol> \r
+   <li>Right-click your project in the Tizen IDE <strong>Project Explorer</strong> view.</li> \r
+   <li>Select <strong>Profile As &gt; Profile with Dynamic Analyzer</strong>. <p>The selected project is built, packaged, and installed on the target device. The dynamic analyzer is launched and the profiling starts automatically.</p></li> \r
+  </ol> \r
+  <p>To run the dynamic analyzer as a standalone from the Tizen SDK menu:</p> \r
+  <ol> \r
+   <li>Launch the dynamic analyzer from the SDK submenu.</li> \r
+   <li>Select the target device and the application to be traced from the combo box in the dynamic analyzer toolbar.</li> \r
+   <li>Click the <strong>Trace Start</strong> button.</li> \r
+  </ol> \r
+  <p>The performance details of your application retrieved during tracing are stored in trace files. You can manage the trace files through the <strong>Toolbar</strong>.</p> \r
+  <p>The following figure illustrates the components of the <strong>Toolbar</strong> used for running the dynamic analyzer.</p> \r
+  <p class="figure">Figure: Toolbar</p> \r
+  <p align="center"> <img alt="Toolbar" src="../../images/coolbar.png" /> </p> \r
+  <ol> \r
+   <li><strong>Target</strong> \r
+   <p>The <strong>Target</strong> combo box shows a serial number (if the target is a device), or the Emulator name (if the target is the Emulator).</p> </li>\r
+   <li><strong>Application</strong> \r
+   <p>The <strong>Application</strong> combo box contains a list of applications in the selected target.</p> \r
+   <p>If the <strong>Target</strong> combo box is empty or disabled, the <strong>Application</strong> combo box is disabled.</p></li> \r
+   <li><strong>Start/Stop</strong>\r
+   <p>The <strong>Start/Stop</strong> button starts or stops the tracing of the selected application. While tracing, the trace result and UI sequence is automatically recorded and temporarily saved. To store the record permanently, click <strong>Save Trace</strong>.</p> </li> \r
+   <li><strong>Timer</strong>\r
+   <p>The timer starts when you click the <strong>Start</strong> button and updates every second. It shows the current running time of the dynamic analyzer. If you click <strong>Stop</strong>, the timer stops when the analysis processing is complete.</p> </li> \r
+   <li><strong>Save Trace</strong>\r
+   <p>Clicking the <strong>Save Trace</strong> button saves the trace data permanently.</p> </li> \r
+   <li><strong>Open Trace</strong> \r
+   <p>Clicking the <strong>Open Trace</strong> button loads and displays the saved trace data.</p> \r
+   <p align="center"> <img alt="Open Trace window" src="../../images/open_trace.png" /> </p> \r
+   <p>The <strong>Open Trace</strong> window consists of the following panels:</p> \r
+   <ul> \r
+    <li><strong>Saved file</strong> \r
+    <p>Shows the trace saved by clicking the <strong>Save Trace</strong> button.</p> \r
+    <p>An invalid save version trace is shown in orange color and cannot be opened. A valid trace is shown in black color. The currently opened trace is shown in blue color.</p> </li>\r
+    <li><strong>Temporary file</strong>\r
+    <p>Shows the temporary traces. A temporary trace refers to a trace that has not been saved and is deleted when the program exits.</p> </li> \r
+    <li><strong>Trace details</strong> \r
+    <p>Shows trace information of the saved traces from the <strong>Saved file</strong> and <strong>Temporary file</strong> panels.</p> </li>\r
+   </ul> \r
+   <p>To open a trace, double-click the trace or select the trace and click <strong>Open</strong>.</p> \r
+   <p>To delete a trace, select the trace and click the delete key on your keyboard.</p> </li>\r
+   <li><strong>Replay</strong>\r
+   <p>Clicking <strong>Replay</strong> repeats a previous analysis. You can use data from a previous dynamic analyzer instance or a saved trace data file. If the target or application do not match, the button is disabled.</p> </li> \r
+   <li><strong>Process</strong>\r
+   <p>The <strong>Process</strong> combo box has a process list of the application being traced. By default, the dynamic analyzer shows the analysis results of all processes. If you select a process in the list, the dynamic analyzer shows the analysis result of that process only.</p></li>\r
+    <li><strong>View Source</strong>\r
+   <p>The <strong>View Source</strong> button displays the source code. If you click the button and the mouse is on the method name in any table-like view, the source code is displayed as a tooltip. By double-clicking the tooltip you can see the source code in the IDE. Apart from the Callstack view, the source code displayed is the caller part of the selected API, not the API definition.</p>\r
+\r
+ <p>If an API is called from a shared library, the source code is not displayed as the source code of the shared library is not available.</p> \r
+\r
+  <p>In the <strong>Callstack</strong> view, the source code corresponding to the address of the selected callstack unit is displayed.</p> \r
+\r
+        <table class="note"> \r
+         <tbody> \r
+          <tr> \r
+           <th class="note">Note</th> \r
+          </tr> \r
+          <tr> \r
+           <td class="note"> <p>If the source code exists outside Tizen IDE, for example, in a built-in application on a device, the <strong>View Source</strong> button is disabled. The source view is available only for applications which are built as normal native projects in the IDE on the local machine.</p></td> \r
+          </tr> \r
+         </tbody> \r
+        </table></li> \r
+       <li><strong>Capture screen</strong>\r
+   <p>The <strong>Capture screen</strong> button captures the screen of the target at the time. The screenshot is shown in the <strong>Snapshot</strong> view.</p></li>  \r
+  <li><strong>Settings</strong>\r
+   <p>The <strong>Settings</strong> button opens the <strong>Settings</strong> window. It supports the runtime configuration feature and other settings.</p></li>\r
+   <li><strong>About</strong> \r
+   <p>The <strong>About</strong> button opens the <strong>About</strong> window, which displays the dynamic analyzer version, build time, and license.</p> </li>\r
+  </ol> \r
+ \r
+<h3 id="result" name="result">Using the Analysis Result</h3> \r
+  <p>After the profiling is terminated by the dynamic analyzer, analyze the result. The dynamic analyzer provides a variety of information collected while your application was run. Use the result selectively to meet your improvement purposes.</p>\r
+  <p>The following instructions help you to utilize the analysis result:</p>\r
+  <ul>\r
+   <li><a href="#performance_analysis">Performance Analysis</a> <p>Describes how to analyze application performance.</p></li> \r
+\r
+   <li><a href="#detecting">Detecting Leaks</a> <p>Describes how to detect memory and resource leaks.</p></li> \r
+   <li><a href="#multithread">Multi-threaded Application and Synchronization Analysis</a> <p>Describes how to analyze threads and synchronization.</p></li> \r
+  </ul>\r
+\r
+<h4 id="performance_analysis" name="performance_analysis">Performance Analysis</h4> \r
+  <p>You can use the dynamic analyzer to analyze application performance and identify bottlenecks. After identifying bottlenecks, you can modify the code to eliminate them, which increases application performance significantly, and extends the battery life of the device running the application.</p> \r
+ \r
+  <p>To analyze performance of the application with the dynamic analyzer, use the following features:</p> \r
+  <ul> \r
+   <li>User Function Profiling \r
+    <p>When analyzing application performance, execution time of each method is one of the most significant factors. You can improve the performance of an application by identifying unexpected bottleneck locations, and analyzing and optimizing the most used methods in the dynamic analyzer.</p> \r
+  <p>To detect and fix the methods consuming the most time:</p> \r
+  <ol> \r
+   <li>Select the <a href="../../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab and view the <strong>Function Usage Profiling</strong> view displaying the methods consuming the most time. Click the title of a column to view the sorted results.</li> \r
+\r
+   <li>To view the execution time of the methods called within a specific time period, use the <a href="../../../../org.tizen.devtools/html/native_tools/da_range_info_n.htm">range information feature</a> of the dynamic analyzer. \r
+       <p>The time consumed by UI-related methods is displayed on the <strong>UI Function Profiling</strong> view of the <strong>UI</strong> tab.</p> </li>\r
+  </ol>  \r
+   </li> \r
+   <li>Timeline CPU Chart \r
+   <p>When analyzing application performance, the CPU load is one of the most significant factors. A CPU load peak can result in a performance bottleneck. High CPU load leads to increased memory consumption, which shortens the battery life of the device running the application. To avoid this, you need to optimize your code.</p> \r
+  <p class="figure">Figure: Timeline CPU chart</p> \r
+  <p align="center"><img alt="Timeline CPU chart" src="../../images/timeline_cpu_chart.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> \r
+  <p>To detect and fix CPU load peaks with the CPU load feature of the dynamic analyzer:</p> \r
+  <ol> \r
+   <li>Select the <strong>Timeline</strong> tab and view the CPU chart.</li> \r
+   <li>Hover the mouse on a CPU peak to view the CPU load value in a tooltip.</li> \r
+   <li>Click the CPU peak to highlight the last user method called before the peak in the <strong>Call Trace</strong> view.</li> \r
+   <li>Click the <strong>View Source</strong> button and place the mouse on the highlighted method. The source code is displayed as a tooltip. To investigate the method, double-click on it, and the source code is displayed in the IDE.</li> \r
+   <li>Modify the code in the IDE, re-build, and re-analyze the application to see if the bottleneck has been eliminated.</li> \r
+  </ol> \r
+   \r
+   </li> \r
+   <li>Thread Load \r
+     <p>If you use threads in your application code, you need to analyze the load of each thread during the application execution. The thread load feature helps to distribute the thread load. You can modify the code to optimize the thread load, while maintaining a single thread.</p> \r
+  <p>The thread load is displayed in the <strong>Thread</strong> tab.</p> \r
+  <p class="figure">Figure: Thread load</p> \r
+  <p align="center"><img alt="Thread load" src="../../images/thread_load.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> \r
+  <p>The thread line displayed in blue indicates the thread load within a time frame. The darker the color, the higher the load.</p>\r
+   \r
+   </li> \r
+  </ul> \r
+  <p>When modifying the application code to improve its performance, consider the following:</p> \r
+  <ul> \r
+   <li>Select the right algorithm and data structures.</li> \r
+   <li>High-level optimization is important because it can change the order of complexity. If your code includes <span style="font-family: Courier New,Courier,monospace">sort</span>, <span style="font-family: Courier New,Courier,monospace">search</span>, or <span style="font-family: Courier New,Courier,monospace">compare</span>, use optimal algorithms and data structures.</li> \r
+   <li>Running high and low priority jobs in a single task causes delays. Split the jobs into multiple tasks.</li> \r
+   <li>Do not run heavy calculations in the same thread with your GUI.</li> \r
+   <li>Use optimization options provided by toolchains.</li> \r
+  </ul> \r
+\r
+ \r
+ <h4 id="detecting" name="detecting">Detecting Leaks</h4> \r
+  <p>To improve the performance of your application, you can use the dynamic analyzer to detect memory leaks.</p> \r
+\r
+  <p>Memory leaks occur when memory capacity that is dynamically allocated during application execution is not returned after the execution stops. Severe or accumulating memory leaks can affect the performance of other applications and programs.</p> \r
+  <p>To detect and fix memory leaks using the dynamic analyzer:</p> \r
+  <ol> \r
+   <li>To view the memory leaks occurring during application analysis, select the <a href="../../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab.\r
+  <p align="center"><img alt="Memory leaks" src="../../images/memory_leaks.png" /></p> \r
+   <p>All the listed items are not memory leaks. To identify actual memory leaks, look for applications that are already terminated but have not returned the allocated memory. When these leaks are fixed, they disappear from the list.</p></li> \r
+   <li>Click the <strong>View Source</strong> icon in the toolbar. \r
+   <p align="center"><img alt="View source" src="../../images/view_source.png" /></p></li> \r
+   <li>Move the mouse pointer to the list item you want to check. The source code is displayed as a tooltip. The part causing the memory leak is displayed in red. \r
+       <p align="center"><img alt="Source View" src="../../images/source_view.png" /></p>\r
+       </li> \r
+   <li>To view the entire source code in the IDE and fix the leak, double-click the list item. If the IDE is not running the dynamic analyzer launches it automatically.</li> \r
+  </ol> \r
+ \r
+ <h4 id="multithread" name="multithread">Multi-threaded Application and Synchronization Analysis</h4> \r
+  <p>Understanding the thread execution in multi-threaded applications can be challenging. The GDB (GNU Debugger) supports the process of debugging multi-threaded applications, but since it uses synchronization objects, the debugging can be quite difficult. \r
+       The dynamic analyzer, on the other hand, provides effective thread analysis features.</p> \r
+  <p>You can use the dynamic analyzer to:</p> \r
+  <ul> \r
+   <li><a href="#life">Analyze thread life-cycle</a></li> \r
+   <li><a href="#concurrency">Analyze thread concurrency</a></li> \r
+   <li><a href="#sync">Analyze synchronization</a></li> \r
+  </ul> \r
+  <h5 id="life" name="life">Analyzing Thread Life-cycle</h5> \r
+  <p>Testing threads is difficult as they are nondeterministic. Visualizing the thread life-cycle is an effective method for analyzing the thread life-cycle. </p> \r
+  <p>The dynamic analyzer has 3 types of user threads:</p> \r
+  <ul> \r
+   <li><strong>Main thread</strong> created from the system for running applications</li> \r
+   <li><strong>Tizen threads</strong> including worker threads and event-driven threads</li> \r
+   <li><strong>pthread</strong></li> \r
+  </ul> \r
+  <p>In the thread chart, the thread life-cycle is displayed as follows:</p> \r
+  <ul> \r
+   <li><strong>Thread creation</strong>: When an API is called to create the thread, a yellow bar is displayed and a new chart item is created with a <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. <p class="figure">Figure: Creating a thread</p> \r
+<p align="center"><img alt="thread create" src="../../images/thread_create.png" /></p></li> \r
+   <li><strong>Thread exiting</strong>: When a thread exits, a purple bar is displayed with a joined <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. If another thread calls the API of the exited thread, a yellow bar is displayed. <p class="figure">Figure: Exiting a thread</p> \r
+<p align="center"><img alt="thread exit" src="../../images/thread_exit.png" /></p></li> \r
+  </ul> \r
+  <p>A new thread is created in a joinable state. Otherwise, memory and resource leaks can occur until the process ends. To make the process faster, set the thread to the detach state, or call the detach API. You can check the state of the thread on the <strong>Thread</strong> tab.</p> \r
+  <h5 id="concurrency" name="concurrency">Analyzing Thread Concurrency</h5> \r
+  <p>The number of live threads and their resource usage can be used to determine an efficient thread concurrency.</p> \r
+  <p>The thread chart displays the relationship and progress between threads and allows you to check the number of live threads. The CPU load of a thread is also displayed.</p> \r
+  <h5 id="sync" name="sync">Analyzing Synchronization</h5> \r
+  <p>When multiple threads access the same resources, data race occurs. To avoid this, threads must be synchronized.</p> \r
+  <p>The synchronization chart in the dynamic analyzer has the following synchronization objects:</p> \r
+  <ul> \r
+   <li>Tizen mutex</li> \r
+   <li>Tizen monitor</li> \r
+   <li>Tizen semaphore</li> \r
+   <li>pthread mutex</li> \r
+   <li>pthread condition variable</li> \r
+  </ul> \r
+  <p>You can view the synchronization chart based on the thread, or the synchronization status:</p> \r
+  <ul> \r
+   <li> To view the child of each thread chart item, select <strong>Thread</strong> in the synchronization chart combo box. </li> \r
+   <li>To view the parent item with the thread for each usage showing the child items, select <strong>Sync</strong>.</li> \r
+  </ul> \r
+  <p class="figure">Figure: Synchronization chart types</p> \r
+  <p align="center"><img alt="Synchronization chart types" src="../../images/sync_chart.png" /></p> \r
+  <p>A synchronization object can be checked using the synchronization chart. When a synchronization object acquires a lock, the thread enters the critical section. The dynamic analyzer analyzes the critical section duration and waiting time. </p> \r
+  <p>If the critical section duration increases, the thread stops working concurrently and affects the performance. If a thread acquires a lock, the critical section waiting time of the other threads increases. To avoid potential dead lock, reduce the waiting time.</p> \r
+  <p class="figure">Figure: Dead lock warning</p> \r
+ <p align="center"><img alt="Dead lock warning" src="../../images/dead_lock_warning.png" /></p> \r
+  \r
+<h2 id="valgrind_analysis" name="valgrind_analysis">Valgrind Analysis</h2> \r
+  <p>Valgrind helps you to detect memory errors or leaks in your application at runtime.</p> \r
+  <p>The following instructions and examples help you to use the Valgrind effectively:</p> \r
+  <ul> \r
+   <li><a href="#running_valgrind">Running Valgrind</a> <p>Describes how to launch the Valgrind with your application.</p></li> \r
+   <li><a href="#valgrind_result">Viewing Valgrind Result</a> <p>Describes the information of the result analyzed by Valgrind.</p></li> \r
+  </ul> \r
+\r
+ <h3 id="running_valgrind" name="running_valgrind">Running Valgrind</h3> \r
+   <p>To set the Valgrind options for your application:</p> \r
+  <ol> \r
+   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Profile As</strong> &gt; <strong>Profile Configurations</strong>.</li> \r
+   <li>In the <strong>Profile Configurations</strong> window, right-click the <strong>Profile with Valgrind</strong> and select <strong>New</strong>.</li> \r
+   <li>Select the created configuration.</li> \r
+   <li>Go to <strong>Memory Profile Options &gt; Collect data</strong> tab: <p>Select from 2 types of memory profiling settings:</p> \r
+    <ul> \r
+     <li>Memory error and memory leak checking <p>This option uses the <strong>Memcheck</strong> tool to profile your application.</p> </li> \r
+     <li>Heap memory profiling <p>This option uses the <strong>Massif</strong> tool to profile your application. \r
+       </p></li> \r
+    </ul></li> \r
+   <li><p>On the <strong>General setting</strong> tab, set the general Valgrind options. These options are used for both <strong>Memcheck</strong> and <strong>Massif</strong> profiling.</p> <p class="figure">Figure: Memory error and memory leak data options</p> \r
+<p align="center"><img alt="Memory error and memory leak data options" src="../../images/valgrind_general.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> \r
+    <table style="width: 100%" border="1"> \r
+     <caption>\r
+       Table: General setting options \r
+     </caption> \r
+     <tbody> \r
+      <tr> \r
+       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> \r
+       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> \r
+      </tr> \r
+      <tr> \r
+       <td>trace children on exec</td> \r
+       <td><p>When enabled, Valgrind traces into sub-processes initiated through the exec system call. This is necessary for multi-project applications. Valgrind does trace into the child of a fork (it would be difficult not to, since fork makes an identical copy of a process), so this option is arguably badly named. However, most children of fork calls immediately call exec anyway.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>run <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> on exit</td> \r
+       <td><p>This option is only relevant when running Valgrind on Linux.</p> <p>The GNU C library (<span style="font-family: Courier New,Courier,monospace;">libc.so</span>), which is used by all applications, can allocate memory for its own uses. Usually it does not free that memory when the application ends, since the Linux kernel reclaims all process resources when a process exits anyway. The glibc authors realized that this behavior causes leak checkers, such as Valgrind, to falsely report leaks in glibc, when a leak check is done at exit. In order to avoid this, they provided a routine called <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> specifically to make glibc release all memory it has allocated. <strong>Memcheck</strong> therefore tries to run <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> at exit. Unfortunately, in some very old versions of glibc, <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span> is sufficiently buggy to cause segmentation faults. This was particularly noticeable on Red Hat 7.1. So this option is provided in order to inhibit the run of <span style="font-family: Courier New,Courier,monospace;">__libc_freeres()</span>. If your application seems to run fine on Valgrind, but segfaults at exit, disabling this option can fix the problem, although at the cost of possibly falsely reporting space leaks in <span style="font-family: Courier New,Courier,monospace;">libc.so</span>. </p></td> \r
+      </tr> \r
+      <tr> \r
+       <td>demangle C++ names</td> \r
+       <td><p>Automatic demangling (decoding) of C++ names is enabled by default. When enabled, Valgrind attempts to translate encoded C++ names back to something approaching the original. The demangler handles symbols mangled by g++ versions 2.X, 3.X, and 4.X.</p> <p>An important fact about demangling is that method names mentioned in suppressions files must be in their mangled form. Valgrind does not demangle method names when searching for applicable suppressions, because to do otherwise would make suppression file contents dependent on the state of Valgrind&#39;s demangling machinery, and also slow down suppression matching.</p></td> \r
+      </tr> \r
+      <tr> \r
+       <td>num callers in stack trace</td> \r
+       <td>This option specifies the maximum number of entries shown in stack traces that identify application locations. Errors are commoned up using only the top four method locations (the place in the current method, and that of its 3 immediate callers). So this does not affect the total number of errors reported.<p></p> <p>The maximum value for this option is 50. Note that higher settings make Valgrind run more slowly and take more memory, but can be useful when working with applications with deeply-nested call chains.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>limit errors reported</td> \r
+       <td><p>When enabled, Valgrind stops reporting errors after 10,000,000 in total, or 1,000 different ones, have been seen. This is to stop the error tracking machinery from becoming a huge performance overhead in applications with many errors.</p></td> \r
+      </tr> \r
+      <tr> \r
+       <td>show errors below main</td> \r
+       <td><p>By default, stack traces for errors do not show any methods that appear beneath <span style="font-family: Courier New,Courier,monospace;">main()</span>. Alternatively, if <span style="font-family: Courier New,Courier,monospace;">main()</span> is not present in the stack trace, it does not show any methods below <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods, such as glibc&#39;s <span style="font-family: Courier New,Courier,monospace;">__libc_start_main()</span>. Furthermore, if <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods are present in the trace, they are normalized as (below <span style="font-family: Courier New,Courier,monospace;">main()</span>), in order to make the output more deterministic. If this option is enabled, all stack trace entries are shown and <span style="font-family: Courier New,Courier,monospace;">main()</span>-like methods are not normalized.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>max size of stack frame</td> \r
+       <td><p>This option specifies the maximum size of a stack frame. If the stack pointer moves by more than this amount, Valgrind assumes that the application is switching to a different stack.</p> <p>You can to use this option if your application has large stack-allocated arrays. Valgrind keeps track of your application&#39;s stack pointer. If it changes by more than the threshold amount, Valgrind assumes your application is switching to a different stack, and <strong>Memcheck</strong> behaves differently than it would for a stack pointer change smaller than the threshold. Usually this heuristic works well. However, if your application allocates large structures on the stack, this heuristic is fooled, and <strong>Memcheck</strong> subsequently reports large numbers of invalid stack accesses. This option allows you to change the threshold to a different value.</p> <p>You must only consider the use of this option if Valgrind&#39;s debug output directs you to do so. In that case, it tells you the new threshold you must specify.</p> <p>In general, allocating large structures on the stack is a bad idea, because you can easily run out of stack space, especially on systems with limited memory or which expect to support large numbers of threads each with a small stack, and also because the error checking performed by <strong>Memcheck</strong> is more effective for heap-allocated data than for stack-allocated data. If you have to use this option, consider rewriting your code to allocate on the heap rather than on the stack.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>suppressions file</td> \r
+       <td><p>This option specifies an extra file from which to read descriptions of errors to suppress. You can use up to 100 extra suppression files.</p></td> \r
+      </tr> \r
+     </tbody> \r
+    </table></li> \r
+   <li><p>On the <strong>Tool Advanced setting</strong> tab, set the advanced options.</p> <p>The tab content depends on the selection you have made on the <strong>Collect data</strong> tab.</p> \r
+    <table style="width: 100%" border="1"> \r
+     <caption>\r
+       Table: Tool Advanced setting options for memory error and memory leak profiling \r
+     </caption> \r
+     <tbody> \r
+      <tr> \r
+       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> \r
+       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> \r
+      </tr> \r
+      <tr> \r
+       <td>leak check</td> \r
+       <td><p>This option, when enabled, searches for memory leaks when the client application finishes. If set to summary, it lists out how many leaks occurred. If set to full or yes, it also gives details of each individual leak.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>leak resolution</td> \r
+       <td><p>When performing leak checks, this option determines how willing <strong>Memcheck</strong> is to consider different backtraces to be the same for the purposes of merging multiple leaks into a single leak report. When set to low, only the first 2 entries need match. When set to med, 4 entries have to match. When high, all entries need to match.</p> <p>For hardcore leak debugging, you probably want to use --leak-resolution=high together with --num-callers=40 or a similar large number. The --leak-resolution setting does not affect <strong>Memcheck</strong>&#39;s ability to find leaks. It only changes how the results are presented.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>freelist size (blocks)</td> \r
+       <td><p>When the client application releases memory using free (in C) or delete (C++), that memory is not immediately made available for re-allocation. Instead, it is marked inaccessible and placed in a queue of freed blocks. The purpose is to defer as long as possible the point at which freed-up memory comes back into circulation. This increases the chance that <strong>Memcheck</strong> is able to detect invalid accesses to blocks for some significant period of time after they have been freed.</p> <p>This option specifies the maximum total size, in bytes, of the blocks in the queue. The default value is 20 million bytes. Increasing this increases the total amount of memory used by <strong>Memcheck</strong>, but can result in the detection of invalid uses of freed blocks which would otherwise go undetected.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>show reachable blocks</td> \r
+       <td><p>When disabled, the memory leak detector only shows &quot;definitely lost&quot; and &quot;possibly lost&quot; blocks. When enabled, the leak detector also shows &quot;reachable&quot; and &quot;indirectly lost&quot; blocks. It shows all blocks, except suppressed ones, so --show-all would be a better name for it.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>allow partial loads</td> \r
+       <td><p>This option controls how <strong>Memcheck</strong> handles word-sized, word-aligned loads from addresses for which some bytes are addressable and others are not. When set to yes, such loads do not produce an address error. Instead, loaded bytes originating from illegal addresses are marked as uninitialized, and those corresponding to legal addresses are handled in the normal way.</p> <p>When set to no, loads from partially invalid addresses are treated the same as loads from completely invalid addresses, an illegal-address error is issued, and the resulting bytes are marked as initialized.</p> <p>The code that behaves in this way is in violation of the ISO C/C++ standards, and must be considered broken. If at all possible, such code must be fixed. This option must be used only as a last resort.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>undef value errors</td> \r
+       <td>This option controls whether <strong>Memcheck</strong> reports uses of undefined value errors. If you do not want to see undefined value errors, set this to no. It also has the side effect of slightly speeding up <strong>Memcheck</strong>.<p></p> </td> \r
+      </tr> \r
+     </tbody> \r
+    </table> \r
+    <table style="width: 100%" border="1"> \r
+     <caption>\r
+       Table: Tool Advanced setting options for heap memory profiling \r
+     </caption> \r
+     <tbody> \r
+      <tr> \r
+       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> \r
+       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> \r
+      </tr> \r
+      <tr> \r
+       <td>profile heap</td> \r
+       <td><p>This option specifies whether heap profiling is done.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>administrative bytes per block</td> \r
+       <td><p>If heap profiling is enabled, this option gives the number of administrative bytes per block to use. This must be an estimate of the average, since it can vary. For example, the allocator used by glibc on Linux requires somewhere between 4 to 15 bytes per block, depending on various factors. That allocator also requires admin space for freed blocks, but <strong>Massif</strong> cannot account for this.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>profile stack</td> \r
+       <td><p>This option specifies whether stack profiling must be done. This option slows <strong>Massif</strong> down greatly, and so is off by default. <strong>Massif</strong> assumes that the main stack has size zero at start-up. This is not true, but doing otherwise accurately is difficult. Furthermore, starting at zero better indicates the size of the part of the main stack that a user application actually has control over.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>allocation tree depth</td> \r
+        <td><p>The maximum depth of the allocation trees recorded for detailed snapshots. Increasing it makes <strong>Massif</strong> run somewhat more slowly, use more memory, and produce bigger output files.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>heap allocation threshold</td> \r
+       <td><p>The significance threshold for heap allocations is a percentage of the total memory size. The allocation tree entries that account for less than this are aggregated. This must be specified in tandem with ms_print&#39;s option of the same name.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>allocation peak inaccuracy</td> \r
+       <td><p><strong>Massif</strong> does not necessarily record the actual global memory allocation peak. By default, it records a peak only when the global memory allocation size exceeds the previous peak by at least 1.0%. This is because there can be many local allocation peaks along the way, and doing a detailed snapshot for every one is expensive and wasteful, as all but one of them are later discarded. This inaccuracy can be changed (even to 0.0%) through this option, but <strong>Massif</strong> runs drastically slower as the number approaches zero.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>time unit</td> \r
+       <td><p>This option specifies the time unit used for the profiling. There are 3 possibilities: </p> \r
+        <ul> \r
+         <li>Instructions executed (i) <p>Good for most cases</p> </li> \r
+         <li>Real (wall clock) time (in milliseconds) <p>It is useful sometimes</p> </li> \r
+         <li>Bytes allocated/deallocated on the heap and/or stack (B) <p>It is useful for very short-run programs, and for testing purposes, because it is the most reproducible across different machines.</p> </li> \r
+        </ul></td> \r
+      </tr> \r
+      <tr> \r
+       <td>detailed snapshot frequency</td> \r
+       <td><p>This option specifies the frequency of detailed snapshots. With --detailed-freq=1, every snapshot is detailed.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>max snapshots</td> \r
+       <td><p>This option specifies the maximum number of snapshots recorded. If set to N, for all programs except very short-running ones, the final number of snapshots is between N/2 and N.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>minimum heap block alignment</td> \r
+       <td><p>By default, Valgrind&#39;s malloc, realloc, and so on return a block whose starting address is 8-byte-aligned or 16-byte-aligned. The value depends on the platform and matches the platform default. This option allows you to specify a different alignment. The supplied value must be greater than or equal to the default, less than or equal to 4096, and must be a power of 2.</p> </td> \r
+      </tr> \r
+      <tr> \r
+       <td>allocation functions</td> \r
+       <td><p>Methods specified with this option are treated as though they were a heap allocation method, such as malloc. This is useful for methods that are wrappers to malloc or new, which can fill up the allocation trees with uninteresting information. This option can be specified multiple times on the command line, to name multiple methods.</p> <p>The named method is only treated this way if it is the top entry in a stack trace, or just below another method treated this way. For example, if you have a method malloc1 that wraps malloc, and malloc2 that wraps malloc1, just specifying --alloc-fn=malloc2 has no effect. You need to specify --alloc-fn=malloc1 as well. This is a little inconvenient, but the reason is that checking for allocation method is slow, and it saves a lot of time if <strong>Massif</strong> can stop looking through the stack trace entries as soon as it finds one that does not match rather than having to continue through all the entries.</p> </td> \r
+      </tr> \r
+     </tbody> \r
+    </table> </li> \r
+   <li>To save the settings, click <strong>Apply</strong>.</li> \r
+   <li>To run Valgrind, click <strong>Profile</strong>.</li> \r
+  </ol>\r
+ \r
+<h3 id="valgrind_result" name="valgrind_result">Viewing Valgrind Result</h3> \r
+  <p>After the <a href="#running_valgrind">memory profiling</a> is terminated, you can view the profiling results.</p> \r
+  <h4 id="memleak" name="memleak">Memory Error and Leak Results</h4> \r
+  <p>The memory error table displays memory leaks that occurred during the profiling process.</p> \r
+\r
+  <ul> \r
+   <li><strong>Memory error</strong> or <strong>Memory leak</strong> is the error or leak type.</li> \r
+   <li><strong>Function name</strong> is the location where the error occurred.</li> \r
+   <li><strong>Sizes</strong> is the memory size of the error.</li> \r
+   <li><strong>Address</strong> is the code memory address.</li> \r
+   <li><strong>Location</strong> is the source or executable path, or library path, where the error occurred.</li> \r
+   <li><strong>pid</strong> is the process ID, and <strong>tid</strong> is the thread ID.<p></p> </li> \r
+  </ul> \r
+  <p>If you expand an error entry, you can see the callstack of the method.</p> \r
+  <h4 id="heap" name="heap">Heap Memory Profiling Results</h4> \r
+  <p>The heap memory profiling table displays the heap memory consumed and allocated during the profiling process.</p> \r
+  <p class="figure">Figure: Heap memory profiling results</p> \r
+  <p align="center"><img alt="Heap memory profiling results" src="../../images/valgrind_heap.png" /></p> \r
+  <ul> \r
+   <li><strong>Snapshot</strong> is the index number of the snapshot.</li> \r
+   <li><strong>Time (i)</strong> is the number of instructions being executed.</li> \r
+   <li><strong>Total (B)</strong> is the total heap memory consumption byte size.</li> \r
+   <li><strong>Useful Heap (B)</strong> is the size of the heap memory used by the program.</li> \r
+   <li><strong>Extra Heap (B)</strong> is the size of the heap memory allocated in excess of what the program is using. The source of extra heap memory is: \r
+    <ul> \r
+     <li>Administrative bytes of the heap memory block</li> \r
+     <li>Aligned bytes of the requested memory size</li> \r
+    </ul> </li> \r
+   <li><strong>Stack (B)</strong> is the size of the stacks. By default, stack profiling is disabled as it slows profiling. It is enabled using the <strong>profile stack</strong> option.</li> \r
+  </ul> \r
+  <p>A snapshot with a green icon in front has a heap tree with a callstack. Double-click the entry to see the callstack details.</p> \r
+  <p>For information on executing Valgrind on the command line interface, see the <a href="http://valgrind.org/docs/manual/manual.html" target="_blank">Valgrind User Manual</a>.</p>\r
+\r
+  <h4 id="manage" name="manage">Managing Results</h4>\r
+  <p>To save a Valgrind profiling result, click <strong>Save file</strong> on the Valgrind result view toolbar.</p> \r
+\r
+  <p>To load a saved Valgrind result file, select <strong>File &gt; Open File</strong> in the IDE menu.</p>  \r
+  \r
+   \r
+  \r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm b/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm
index 125b64a..cf36ba0 100644 (file)
--- a/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm
@@ -200,7 +200,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">The auto-restart and on-boot attributes are not supported in Tizen wearable devices. Since Tizen 2.4, both attributes are not supported in all Tizen devices.</td> 
+     <td class="note">The auto-restart and on-boot attributes are not supported in Tizen wearable devices.</td> 
     </tr> 
    </tbody> 
   </table>     
@@ -326,8 +326,7 @@
 </table>
 </li>
    <li>Export DataControl functionality. <p>You can <a href="../../../../org.tizen.guides/html/native/app/data_control_n.htm#export">export data functionalities</a> of your Tizen native application.</p> <p>To define a data control used to export application data, click <strong>Add</strong> and define the data control details.</p> </li> 
-   <li>Add background category type(since Tizen 2.4).<p>You can <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#bg-category">describe background category</a> of your Tizen native application.</p> <p>To add background category types to allow run on the background, click <strong>Add</strong> and select the category type.</p> </li>
-
+  <li>Add the background category type (since Tizen 2.4). <p>You can <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#bg-category">describe the background category</a> of your Tizen native application.</p> <p>To add background category types to allow running on the background, click <strong>Add</strong> and select the category type.</p> </li>
   </ul>
 
 <h3 id="source" name="source">Editing the tizen-manifest.xml File in the tizen-manifest.xml Tab</h3>
diff --git a/org.tizen.gettingstarted/html/preface.htm b/org.tizen.gettingstarted/html/preface.htm
index 2c43f09..3335898 100644 (file)
--- a/org.tizen.gettingstarted/html/preface.htm
+++ b/org.tizen.gettingstarted/html/preface.htm
@@ -1,138 +1,138 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
-       <script type="text/javascript" src="scripts/snippet.js"></script>       
-       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
-
-       <title>Preface</title>  
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/>  <img alt="Wearable native" src="images/wn_icon.png"/></p>
-       </div>
-       
-<h1>Preface</h1>
-
-<p>Welcome to Tizen!</p>
-
-<p>Tizen is an open-source project that allows you to create feature-rich applications for multiple device categories.</p>
-
-<p>The Tizen platform supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you use the Web or native framework to create them.</p>
-
-<p>The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile and wearable native profile can be used to develop native applications for mobile and wearable devices.</p>
-
-<p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. &quot;N&quot; in the icon stands for the native application profiles and &quot;W&quot; stands for the Web application profiles.</p>
-
-<table border="1"> 
-   <caption>
-     Table: Tizen profiles 
-   </caption> 
-   <colgroup> 
-    <col width="20%" /> 
-    <col width="40%" /> 
-    <col width="40%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Profile</th> 
-     <th>Icon</th> 
-    </tr>
-       <tr> 
-     <td>Mobile Web</td> 
-     <td><img alt="Mobile Web" src="images/mw_icon.png"/> or <img alt="Optional Mobile Web" src="images/mw_icon_optional.png"/></td> 
-    </tr>
-       <tr> 
-     <td>Wearable Web</td> 
-     <td><img alt="Wearable Web" src="images/ww_icon.png"/> or <img alt="Optional Wearable Web" src="images/ww_icon_optional.png"/></td> 
-    </tr>
-       <tr> 
-     <td>Mobile Native</td> 
-     <td><img alt="Mobile Native" src="images/mn_icon.png"/></td> 
-    </tr>
-       <tr> 
-     <td>Wearable Native</td> 
-     <td><img alt="Wearable Native" src="images/wn_icon.png"/></td> 
-    </tr>      
-   </tbody> 
-  </table>
-  
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. The gray profile icon (as shown in the table above) refers to an optional API.
-<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-  
-
-
-<h2 id="tizen_doc" name="tizen_doc">Tizen Documentation</h2>
-
-<p>To make the most of your Tizen applications, get familiar with the Tizen documentation:</p>
-
-<ul>
-       <li><a href="cover_page.htm">Getting Started</a>
-       <p>The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.</p>
-       </li>
-<!--   <li><a href="../../org.tizen.ui.guides/html/cover_page.htm">UI Guides</a>
-       <p>The Tizen UI guides instruct you in planning and developing a user interface for your application. The guides introduce all the available UI toolkit frameworks.</p>
-       </li>   -->
-       <li><a href="../../org.tizen.tutorials/html/cover_page.htm">Tutorials</a>
-       <p>The Tizen tutorials teach you how to incorporate Tizen features into your application. The tutorials contain detailed code examples to help you write the required code in practice.</p>
-       </li>
-       <li><a href="../../org.tizen.guides/html/cover_page.htm">Guides</a>
-       <p>The Tizen developer guides introduce the various features that you can use in creating Tizen applications. You can select an API domain to implement its functionalities into your Tizen application.</p>
-       </li>
-       <li><a href="../../org.tizen.web.apireference/html/cover_page.htm">API References</a>
-       <p>The Tizen API References provide descriptions of all the Tizen API domains, subdomains, classes, interfaces, and methods.</p>
-       </li>
-       <li><a href="../../org.tizen.sampledescriptions/html/cover_page.htm">Sample Descriptions</a>
-       <p>The Tizen sample descriptions introduce the sample applications provided in the SDK.</p>
-       </li>
-       <li><a href="../../org.tizen.devtools/html/cover_page.htm">Tools</a>
-       <p>The Tizen tools introduce the Tizen software development kit (SDK) and related tools you can use when developing your Tizen application.</p>
-       </li>
-</ul>
-  
-<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />\r
+       <script type="text/javascript" src="scripts/snippet.js"></script>       \r
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Preface</title>  \r
+</head>\r
+\r
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/>  <img alt="Wearable native" src="images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+<h1>Preface</h1>\r
+\r
+<p>Welcome to Tizen!</p>\r
+\r
+<p>Tizen is an open-source project that allows you to create feature-rich applications for multiple device categories.</p>\r
+\r
+<p>The Tizen platform supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you use the Web or native framework to create them.</p>\r
+\r
+<p>The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile and wearable native profile can be used to develop native applications for mobile and wearable devices.</p>\r
+\r
+<p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. &quot;N&quot; in the icon stands for the native application profiles and &quot;W&quot; stands for the Web application profiles.</p>\r
+\r
+<table border="1"> \r
+   <caption>\r
+     Table: Tizen profiles \r
+   </caption> \r
+   <colgroup> \r
+    <col width="20%" /> \r
+    <col width="40%" /> \r
+    <col width="40%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Profile</th> \r
+     <th>Icon</th> \r
+    </tr>\r
+       <tr> \r
+     <td>Mobile Web</td> \r
+     <td><img alt="Mobile Web" src="images/mw_icon.png"/> or <img alt="Optional Mobile Web" src="images/mw_icon_optional.png"/></td> \r
+    </tr>\r
+       <tr> \r
+     <td>Wearable Web</td> \r
+     <td><img alt="Wearable Web" src="images/ww_icon.png"/> or <img alt="Optional Wearable Web" src="images/ww_icon_optional.png"/></td> \r
+    </tr>\r
+       <tr> \r
+     <td>Mobile Native</td> \r
+     <td><img alt="Mobile Native" src="images/mn_icon.png"/></td> \r
+    </tr>\r
+       <tr> \r
+     <td>Wearable Native</td> \r
+     <td><img alt="Wearable Native" src="images/wn_icon.png"/></td> \r
+    </tr>      \r
+   </tbody> \r
+  </table>\r
+  \r
+    <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. The gray profile icon (as shown in the table above) refers to an optional API.\r
+<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices.</p></td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  \r
+  \r
+\r
+\r
+<h2 id="tizen_doc" name="tizen_doc">Tizen Documentation</h2>\r
+\r
+<p>To make the most of your Tizen applications, get familiar with the Tizen documentation:</p>\r
+\r
+<ul>\r
+       <li><a href="cover_page.htm">Getting Started</a>\r
+       <p>The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.</p>\r
+       </li>\r
+       <li><a href="../../org.tizen.ui.guides/html/cover_page.htm">UI Guides</a>\r
+       <p>The Tizen UI guides instruct you in planning and developing a user interface for your application. The guides introduce all the available UI toolkit frameworks.</p>\r
+       </li>\r
+       <li><a href="../../org.tizen.tutorials/html/cover_page.htm">Tutorials</a>\r
+       <p>The Tizen tutorials teach you how to incorporate Tizen features into your application. The tutorials contain detailed code examples to help you write the required code in practice.</p>\r
+       </li>\r
+       <li><a href="../../org.tizen.guides/html/cover_page.htm">Guides</a>\r
+       <p>The Tizen developer guides introduce the various features that you can use in creating Tizen applications. You can select an API domain to implement its functionalities into your Tizen application.</p>\r
+       </li>\r
+       <li><a href="../../org.tizen.web.apireference/html/cover_page.htm">API References</a>\r
+       <p>The Tizen API References provide descriptions of all the Tizen API domains, subdomains, classes, interfaces, and methods.</p>\r
+       </li>\r
+       <li><a href="../../org.tizen.sampledescriptions/html/cover_page.htm">Sample Descriptions</a>\r
+       <p>The Tizen sample descriptions introduce the sample applications provided in the SDK.</p>\r
+       </li>\r
+       <li><a href="../../org.tizen.devtools/html/cover_page.htm">Tools</a>\r
+       <p>The Tizen tools introduce the Tizen software development kit (SDK) and related tools you can use when developing your Tizen application.</p>\r
+       </li>\r
+</ul>\r
+  \r
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.gettingstarted/html/scripts/common.js b/org.tizen.gettingstarted/html/scripts/common.js
index 60250b6..d46479a 100644 (file)
--- a/org.tizen.gettingstarted/html/scripts/common.js
+++ b/org.tizen.gettingstarted/html/scripts/common.js
@@ -1,1752 +1,1752 @@
-$(document).ready(function(){
-       $('#contents table').each(function(){
-               if (!$(this).parent().hasClass('table')) {
-                       $(this).wrap('<div class="table"></div>');
-               }
-       });
-
-       // Lnb Menu Initialize
-       if($('div#contents').find('.lnb').length){
-               if($("ul li.events_news").size() > 0) {
-                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
-               }
-               initLnb();
-               initScript(staticURL + "/js/fixednavbar.js", function(){});
-       }
-
-       //family site
-       if($('div#footer').find('dl#familySlider').length){
-               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
-       }
-
-       // Svn Commit Test
-       
-       // Language Selection
-       if($('div#header').find('.util').length){
-               var $lang = $('div#header').find('.util');
-               $lang.find('a.lang').toggle(function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
-                       },function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
-                       });
-
-               $lang.bind('mouseleave',function(){
-                       $(this).find('ul.language').hide();
-                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-               });
-
-               $lang.find('ul.language').children().last().on("keydown", function(e) {
-                       if(e.which == 9 && e.shiftKey) {
-                               return true;
-                       }
-                       
-                       if(e.which == 9) {
-                               e.preventDefault();
-                               $lang.find('ul.language').hide();
-                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-                               setTimeout(function() {
-                                       $("#searchTop").focus();
-                               }, 1);
-                       }
-               });
-       }
-
-       // Open the Sitemap
-       var $open = $('div#header').find('.bt-open');
-       $open.bind('click',function(){
-               var $self = $(this);
-               var $sitemap = $('div#wrapper').find('div#sitemap');
-               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
-
-               if($sitemap.is(':visible')){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
-
-                       $self.attr('title','open sitemap');
-               }else{
-                       var source = $self.css('background-image').replace('.gif','_.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
-
-                       $self.attr('title','close sitemap');
-               }
-               
-               $self.css('background-image',source);
-               $sitemap.slideToggle('fast');
-               
-               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       $self.css('background-image',source);
-                       $sitemap.slideToggle('fast');
-               });
-
-       });
-
-       // Search Auto Complete
-       var $search = $('div#header').find('fieldset.search');
-       var $searchList = $search.find('#topAutocomplete>ul');
-
-       if($search.length){
-               $search.find('> input').each(function(){
-                       $(this).bind({
-                               keydown : function(e){
-                       
-                                       if(e.type=='keydown'&& $(this).val().length!=0){
-                                               $search.find('#topAutocomplete').show();
-                                               var hei = $searchList.outerHeight();
-                                               if(hei>400){
-                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
-                                               }
-                                       }
-                                       if(e.keyCode==9){
-                                               $search.unbind('focusout.search');
-                                       }
-                                       if(e.keyCode==40){
-                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
-                                               //window.scrollTo(0,0);
-                                       }
-                               },
-                               focusin : function(e){
-                                       if($(this).val()==='Search'){
-                                               $(this).val('');
-                                       }
-                               },
-                               focusout : function(e){
-                                       if($(this).val().length==0) $(this).val('Search');
-                               }
-                       });
-               });
-
-               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
-               //      if(e.keyCode==40){
-               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
-               //      }
-               //});
-
-               $search.find('#topAutocomplete').bind('mouseleave',function(e){
-                       if($search.find('> input').val().length==0){
-                               $search.find('> input').val('Search');
-                       }
-                       $search.find('#topAutocomplete').hide();
-               });
-
-               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
-                       $search.find('> input').val('Search');
-                       $search.find('#topAutocomplete').hide();
-                       
-                       //$search.bind('focusout.search', function(){
-                       //      $(this).find('> input').val('Search');
-                       //      $(this).find('#topAutocomplete').hide();
-                       //});
-               });
-       }
-});
-
-// 비차단 동적 스크립트 로딩
-function initScript(url, callback){
-       var script = document.createElement("script");
-       script.type = "text/javascript";
-
-       if(script.readyState){ // 인터넷 익스플로러
-               script.onreadystatechange = function(){
-                       if(script.readyState=="loaded" || script.readyState=="complete"){
-                               script.onreadystatechange = null;
-                               callback();
-                       }
-               };
-       }else{  // 다른  브라우저
-               script.onload = function(){
-                       callback();
-               };
-       }
-
-       script.src = url;
-       document.getElementsByTagName("head")[0].appendChild(script);
-}
-
-
-// lnb
-function initLnb(){
-       var sMenu = $('.lnb');
-       var sItem = sMenu.find('>li');
-
-       sItem.each(function(){
-               if($(this).find('a').hasClass('more')){
-                       if($(this).find('ul').is(":visible")) {
-                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
-                       } else {
-                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
-                       }
-               }
-       });
-       
-       var setIcoArrText = function(obj) {
-               if(obj.next().is(":visible")) {
-                       obj.text("close submenu");
-               } else {
-                       obj.text("open submenu");
-               }
-       }
-       
-       sItem.find('.ico-arr').on("click", function() {
-               var $that = $(this);
-               var liBox = $that.parent();   
-               var ulBox = $that.next();
-               
-               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
-               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
-               
-               if(liBox.hasClass("on")) {
-                       if(ulBox.is(":visible")) {
-                               ulBox.hide();
-                               $that.addClass("ico-on");
-                       } else {
-                               ulBox.show();
-                               $that.removeClass("ico-on");
-                       }
-                       setIcoArrText($that);
-                       return true;
-               }
-               
-               if(liBox.hasClass("active")) {
-                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
-                       ulBox.hide();
-               } else {
-                       liBox.addClass("active").find("a").eq(0).addClass("bov");
-                       ulBox.show();
-               }
-               setIcoArrText($that);
-       });
-
-       sItem.hover(function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-               $(this).find("a").eq(0).addClass("bov");
-       },function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-                $(this).find("a").eq(0).removeClass("bov");
-
-       });
-}
-
-//footer rolling banner
-function fn_rollToEx(container,objectId,step,auto){
-
-       // 롤링할 객체를 변수에 담아둔다.
-       var el = $('#'+container).find('#'+objectId);
-       var lastChild;
-       var speed = 3000;
-       var timer = 0;
-       var autoplay = false;
-
-       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
-       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
-       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
-       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
-       el.data('animating',false);
-       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
-       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
-
-       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
-
-       if(arguments.length==4){
-               el.data('autoStart', auto);
-       }
-
-       if(el.data('autoStart')){
-               if(timer==0){
-                       timer = setInterval(moveNextSlide, speed);
-                       autoplay = true;
-               }
-       }
-
-       el.bind({
-               mouseenter:function(){
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-
-       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
-       el.data('prev').bind({
-               click:function(e){
-                       e.preventDefault();
-                       movePrevSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
-       el.data('next').bind({
-               click:function(e){
-                       e.preventDefault();
-                       moveNextSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       function movePrevSlide(){
-               if(!el.data('animating')){
-                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
-                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
-                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
-                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
-                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
-               
-                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
-
-                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-    function moveNextSlide(){
-               if(!el.data('animating')){
-                       el.data('animating',true);
-
-                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
-                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
-                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
-                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
-                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
-                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
-
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-}
-
-function fn_slide(options){
-
-       var opts = jQuery.extend({},options);
-
-       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
-       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
-       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
-       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
-       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
-       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
-       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
-       var auto = false;
-       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
-       var time;
-
-
-       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
-       effect = opts.effect;
-       auto = opts.auto;
-
-       if(auto){
-               time = setTimeout('slideShow()',3000);
-       }
-
-       slideShow = function(){
-
-               if(current < len-1){
-                       current++;
-               }else{
-                       current=0;
-               }
-
-               controllStatus();
-
-               moveControl('next');
-
-               time = setTimeout('slideShow()',3000);
-       }
-
-       controllStatus = function(){
-               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
-               if(current>0||current<len-1){                           
-                       $prev.show();
-                       $next.show();
-               }
-               if(current==0){
-                       $prev.hide();
-                       $next.show();
-               }
-               if(current>=len-1){
-                       $prev.show();
-                       $next.hide();
-               }
-       }
-
-       moveControl = function(msg){
-               if(opts.bt!=null){
-                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
-                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
-                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
-               }
-
-               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                       $obj.children().hide();
-                       $obj.children().eq(current).show();
-               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                       $obj.animate({'left':'-'+size*current},'slow');
-               }
-       }
-
-       $obj.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               }
-       });
-
-       //롤링 버튼 클릭시
-       $bt.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
-
-                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
-
-                       controllStatus();
-
-                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                               $obj.children().hide();
-                               $obj.children().eq(current).show();
-                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                               $obj.animate({'left':'-'+size*current},'slow');
-                       }
-
-                       // 모든 롤링 버튼을 비활성화
-                       $bt.each(function(){
-                               var source = $(this).find('img').attr('src').replace('_.png','.png');
-                                $(this).find('img').attr('src',source);
-                       });
-
-                       // 선택한 롤링버튼을 활성화
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-
-                       return false;
-               }
-       });
-
-       //이전 버튼 클릭시
-       $prev.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
-                       current--;                                                      //이미지 인덱스값 1씩 감소
-
-                       moveControl('prev');
-
-                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
-
-                       return false;
-               }
-       });
-
-       //다음 버튼 클릭시
-       $next.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       current++;                                                      //이미지 인덱스값 1씩 증가
-                       
-                       moveControl('next');
-
-                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
-                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
-
-                       return false;
-               }
-       });
-
-}
-
-// main rolling banner
-function slideMotion1(){
-       var $banner = $('#rolling .motionview'),
-               //$nav = $('#rolling ul.nav'),
-               banner = {prev:null, next:null},
-               size = $banner.children().length;
-               index = 1,
-               speed = 3000,
-               timer = null,
-               auto = true,
-               width = parseInt(100/size),
-               rest = parseInt(100%size);
-
-       var $nav = $('<ul class="nav">').insertAfter($banner);
-
-       $banner.children().each(function(index){
-               index++;
-               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
-               if(index==size){
-                       $nav.children().eq(-1).find('a').css('background-image','none');
-               }
-       });
-
-       if(rest>0){
-               width+=rest;
-               $nav.children().eq(-1).css('width',width+'%');
-       }
-
-       $nav.delegate("li",'click',function(){
-               var idx = $nav.children().index(this);
-               index = idx;
-               banner.prev = $banner.find('a.active');
-               banner.next = $banner.find('a').eq(index);
-
-               clearInterval(timer);
-               auto = false;
-               
-               $nav.trigger('change.banner',banner)
-                       .trigger('change.tab',index);
-
-               return false;
-       });
-
-       $nav.bind('change.banner',function(event, banner){
-               aniMotion();
-       });
-
-       $nav.bind('change.tab',function(event, index){
-               $nav.children().find('a').removeClass('sel');
-               $nav.children().eq(index).find('a').addClass('sel');
-       });
-
-       timer = setInterval(autoMotion, speed);
-
-       function autoMotion(){
-               if(index > size-1) index = 0;
-
-               aniMotion();
-       }
-
-       function aniMotion(){
-               if(auto){
-                       banner.prev = $banner.find('a.active');
-                       banner.next = $banner.find('a').eq(index);
-
-                       $nav.children().find('a').removeClass('sel');
-                       $nav.children().eq(index).find('a').addClass('sel');
-               }
-               banner.prev.addClass('last-active');
-               banner.next.css({'opacity':0.0})
-                       .addClass('active')
-                       .animate({'opacity':1.0}, 1000, function(){
-                               banner.prev.removeClass('active last-active');
-
-                               if(auto){
-                                       index++;
-                               }else{
-                                       index++;
-                                       timer = setInterval(autoMotion, speed*1.5);
-                                       auto = true;
-                               }
-                       });
-       }
-}
-
-// forum list show or hide function
-function toggleFunc(){
-       
-       var defaulNum = [2];
-
-       $('.forum-tit').each(function(){
-               var self = $(this);
-
-               var idx = $('.forum-tit').index(this);
-
-               for(i=0;i<=defaulNum.length;i++){
-                       if(idx==defaulNum[i]){
-                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
-                               self.find('a.toggle').css('background-image',source);
-
-                               self.find('a.toggle').text('Show');
-                               self.addClass('mb35').next().hide();
-                       }
-               }
-
-               self.find('a.toggle').click(function(){
-                       
-                       if(self.next().is(':visible')){
-                               var source = $(this).css('background-image').replace('.gif','_.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Show');
-                               self.addClass('mb35').next().hide();
-                       }else{
-                               var source = $(this).css('background-image').replace('_.gif','.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Hide');
-                               self.removeClass('mb35').next().show();
-                       }
-
-                       return false;
-
-               });
-
-       });
-}
-
-// 파일 업로드
-function fileUpload( width ){
-       //var $img = $('.attach input[type=image]');
-       //var width = $img.attr('width');
-
-       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
-       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
-
-       var $file = $('.attach input.upload').css({
-               "position": "absolute",
-               "top": "0px",
-               "right": "0px",
-               "width": w,
-               "cursor": "pointer",
-               "opacity": "0.0",
-               "height": "23px"
-       });
-       $file.off('change');
-       $file.on('change',function(e){
-               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
-                       return;
-               }
-               var idx = $file.index(this);
-               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
-               var fileErrMsg = {
-                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
-                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
-                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
-                           ,ext_ko : "지원하지 않는 확장자 입니다."
-                           ,ext_zh : "不允许上传具有该扩展名的文件。"
-                           ,ext_en : "File extention not allowed for upload."
-               };
-               var initFileInput = function(obj) {
-                       $(obj).parent().find('input.file').val("");
-                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
-                       else $(obj).val("");
-               };
-               
-               var filename = $(this).val();
-               
-               //CHK File ext
-               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
-                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
-                                     , "jpg", "png", "zip"];
-               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
-               var findFlag = false;
-               for(var i = 0; i < imgExts.length; i++) {
-                       if(imgExts[i] == fileExt) {
-                               findFlag = true;
-                               break;
-                       }
-               }
-       
-               if(findFlag == false) {
-                       alert( fileErrMsg["ext_" + localeCode] );
-                       initFileInput(this);
-//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
-                       return;
-               }
-               
-               //CHK File Size
-               if(
-                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
-                               || $.browser.mozilla //FF
-                               || $.browser.safari //Chrome
-               )
-               {
-                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
-                       if( filesize > 200 ) {
-                               alert( fileErrMsg["limit_" + localeCode] );
-                               initFileInput(this);
-                               return;
-                       }
-               }
-               
-               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
-       });
-};
-
-
-// Show or Hide Toggle
-function showToEx(args){
-
-       if(!arguments.length) return false;
-       
-       var bt = $('#'+args.bt);
-       var obj = $('#'+args.obj);
-
-       var source = bt.css('background-image');
-       
-       if(obj.is(':visible')){
-               obj.hide();
-       }
-
-       bt.toggle(function(){
-               var src = source.replace('.gif','_.gif');
-               bt.css('background-image', src);
-               obj.show();
-               
-               return false;
-       },function(){
-               var src = source.replace('_.gif','.gif');
-               bt.css('background-image', src);
-               obj.hide();
-
-               return false;
-       });
-
-}
-
-
-// FAQ 20131016
-function faqToEx(){
-
- var $question = $('#contents').find('.question');
- var $answer = $('#contents').find('.answer');
-
- // All Answer Rows Hide
- $answer.hide().find('.conts').hide();
-
- $question.each(function(){
-  var $self = $(this);
-  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
-  
-  $self.find('a').bind('click',function(){
-   $("#selArea ul").hide();
-   /*
-   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
-
-   $answer.hide().find('.conts').hide();
-   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
-   */
-
-   /* 20120822 hjh modify*/
-   /* if ( this open )?  close : all close, e.target open */
-   var cutTtl  = $(this).parent().children("div").html();
-   var ttl     = $(this).parent().parent().children("td.real_question").html();
-   
-   if($(this).parents('tr').next().find('.answer').is(':visible')){
-    $(this).html(cutTtl);
-    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
-     $answer.hide();
-    });
-   }else{
-    titleInit();
-    $(this).html(ttl);
-    $answer.hide().find('.conts').hide();
-    //$answer.slideUp('normal').find('.conts').hide();
-    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
-   }   
-
-   return false;
-  });
- });
-
- $answer.each(function(){
-  var $self = $(this);
-
-  $(this).find('a.bt-close-faq').bind('click',function(){
-   var question_td = $(this).parent().parent().parent().prev().children("td.question");
-   var cutTtl      = question_td.children("div").html();
-   question_td.children("a").html(cutTtl);
-   
-   $self.find('.conts').slideUp('fast',function(){
-    $self.hide();
-   });
-
-   return false;
-  });
- });
- 
- var titleInit = function() {
-  $question.each(function(i) {
-   $(this).find("a").html($(this).find("div").html());
-  });
- }
-}
-
-
-
-/**
- *  쓰기페이지 Tab 영역 컨트롤
- *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
- */
-function setSwitchTab( selector ) {
-       var tabs = $('.tab-list').find("li");
-       var elements = $( selector );
-
-       $( elements ).each( function( i ) {
-               if( i != 0 )
-               {
-                       $(this).hide();
-               }
-       })
-
-       // Control Tabs
-       $( tabs ).each( function( i ) {
-               $( this ).click( function(){
-                       resetClass();
-
-                       $( this ).find( 'a' ).addClass( "sel" );
-                       $( elements[i] ).show();
-
-                       return false;
-               });
-       });
-
-       // Class 리셋
-       function resetClass()
-       {
-               $( tabs ).each( function( i ) {
-                       $( this ).find( 'a' ).removeClass( 'sel' );
-               });
-
-               $( elements ).each( function( i ) {
-                       $( this ).hide();
-               });
-       }
-}
-
-var SET_ATTACH_LIMIT;
-var SET_ATTACH_WIDTH;
-var SET_ATTACH_BTNNAME;
-
-var firstAddAction = function(obj, limit, w, btnName) {
- var bn            = btnName || 'File';
- var fileAttachStr = "<li class='clfix no-first'>";
- fileAttachStr += '<div class="attach">';
- fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
- fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
- fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
- fileAttachStr += '</div>';
- fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
- fileAttachStr += '</li>';
- obj.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    $("a.remove-btn").eq(0).focus();
-   }, 1);
-  }
- });
- 
- obj.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- 
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-}
-
-var firstRemoveAction = function(id) {
- var obj = $("#" + id);
- var compFile    = $("input[type=file]");
- var compFileCnt = compFile.size();
- var ulObj       = compFile.eq(0).parent().parent().parent();
- if(compFileCnt <= 1) {
-  var firstCompFile = compFile.eq(0);
-  firstCompFile.prev().prev().val("");
-  if ($.browser.msie) {
-               $(obj).parent().find('input.file').val("");
-               firstCompFile.replaceWith( firstCompFile.clone(true) );
-       } else {
-               firstCompFile.val("");
-               firstCompFile.prev().prev().val("");
-  }
- } else {
-  obj.parent().remove();
-  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
-  
-  //add-btn event..
-  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
- }
- 
- ulObj
- .find("li")
- .eq(0)
- .removeClass("no-first")
- .find("a.remove-btn")
- .attr("id", id)
- .unbind("click");
- 
- setTimeout(function() {
-  $("#" + id).focus();
- }, 100);
- 
- $("#" + id).on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   var that = $(this);
-   setTimeout(function() {
-    that.prev().focus();
-   }, 1);
-  }
- });
- 
- $("#" + id).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-/** 
- * File 첨부컨트롤
- * @param limit 최대 파일 첨부 갯수
- * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
- */
-function setAttachFile( limit, width, btnName, removeBtnId )
-{
- var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
- var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
- var inputFile     = $( 'ul.file-att-form input[type=file]' );
- 
- SET_ATTACH_LIMIT = limit;
- SET_ATTACH_WIDTH = w;
- SET_ATTACH_BTNNAME = btnName;
- 
- inputFile.on("keydown", function(e) {
-  var that = $(this);
-  
-  if(e.which == 9 && e.shiftKey) {
-   return true;
-  }
-  
-  if(e.which === 9) {
-   e.preventDefault();
-   setTimeout(function() {
-    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
-   }, 1);
-  }
- });
- 
- inputFile.on("focusin", function(e) {
-  $(this).parent().css("outline", "1px dotted #2d2d2d");
- }).on("focusout", function(e) {
-  $(this).parent().css("outline", "");
- });
- 
- firstAddAction(btnFileAttach, limit, w, btnName);
- 
- /*
- btnFileAttach.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    inputFile.focus();
-   }, 1);
-  }
- });
- 
- btnFileAttach.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
-
- // File 제거 버튼
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- */
- /**
-  *  2012-08-08 전종호 추가
-  *  파일 Input Text 영역 너비를 잡아주는 메서드
-  */
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-
- updateFileField();
- fileUpload( w + 50 );
- 
- $("#" + removeBtnId).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-
-
-/** 
- * [PAGE] device speces list page
- * date : 20120808
- * id : hjh
- */
-function initDevicespecsList (){
-       var isCompareView=false;
-       $("#devicespecs-list > li").each( 
-               function(i){ 
-                       $(".info", this).bind("click", devicespecsListInfoToggle);
-                       $(".xx", this).bind("click", devicespecsListInfoToggle);
-                       
-                       //detail info layer toggle function
-                       function devicespecsListInfoToggle (){
-                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
-                               return false;
-                       }
-       });
-
-
-       /* DEVICE COMPARE 열리는 부분
-       - defualt : close. 
-       - 최초 한번만 열림 
-       - 현재는 compare 버튼에 공통으로 함수 바인딩
-       */
-       function devicespecsCompareOnOff (){
-               if ( isCompareView ) return;
-               var ww = ( isCompareView ) ? "30px":"207px";
-               $("#devicespecs-compare").animate({
-                   height: ww }, 300, "linear", function(){ });
-
-               isCompareView = ( isCompareView ) ? false:true;
-               return false;
-       }
-
-       //compare 버튼 공통으로 클릭 이벤트 걸림 
-       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
-}
-
-/** 
- * [PAGE] device speces view page
- * date : 20120808
- * id : hjh
- */
- function initDevicespecsView (){
-       var isImgView = false;
-       var isView = 0;
-       
-       //thumbnail overevent bind
-       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
-       focusDeviceDetail (1);
-       
-       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.type === "keydown" && e.which == 9) {
-                       setTimeout(function() {
-                               $("#img-viewer-handle a").eq(0).focus();        
-                       }, 1);
-               }
-       });
-       
-       //thumbnail viewarea controll handler bind
-       $("#img-viewer-handle").click(function () {
-               var ww;
-               var src = $("#img-viewer-handle img").attr("src");
-               if ( isImgView ){
-                       ww = "300px";
-                       src = src.replace(".gif", "_.gif");
-                       $("#img-viewer-thumbnail").hide();
-                       $("#device-info").show();
-               }else{
-                       ww = "730px";
-                       src = src.replace("_.gif", ".gif");
-                       $("#img-viewer-thumbnail").show();
-                       $("#device-info").hide();
-                       focusDeviceDetail(1);
-               }
-               
-               $("#img-viewer-handle img").attr("src", src);
-       $("#img-viewer").animate({
-                   width: ww
-                       }, 300, "linear", function(){
-                       if($.browser.msie)
-                               $("#img-inner").css("width", ww);
-               });
-               
-       isImgView = ( isImgView ) ? false:true;
-    });
-
-       //thumbnail overevent function (update date 2012.09.05 kangki)
-       function focusDeviceDetail ( id ) {
-               if ( isView == id ) return;
-
-               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
-               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
-
-               $( "#img-viewer-bic > img").attr("src", imgSrc);
-               isView = (id);          
-       }
-
-       /*toggle devicespecs List*/
-       if($('div#contents').find('.devicespec-tit').length){
-               
-               $('.devicespec-tit').each(function(){
-                       var self = $(this);
-                       $('a', self).bind ("click", fnToggle);
-
-                       function fnToggle(){
-
-                               if ( $(this).parent().parent().next().is(':visible') ){
-                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-                                       self.find('em').text('Show');
-                                       self.next().hide();
-
-                                       return false;
-                               }else{
-                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-                                       self.find('em').text('Hide');
-                                       self.next().show();
-
-                                       return false;
-                               }
-                       }
-                                                       
-               });
-       }
-
-       /*all Show Hide devicespecs List*/
-       if($('div#contents').find('.devicespecs-util').length){
-               var self = $('div#contents').find('.devicespecs-util');
-
-               $('.showA', self).bind ("click", function (){
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( !me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-                                       me.find('em').text('Hide');
-                                       me.next().show();
-                               }
-                       });
-                       return false;
-               })
-               $('.hideA', self).bind ("click", function (){
-                       
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-                                       me.find('em').text('Show');
-                                       me.next().hide();
-                               }
-                                                               
-                       });
-                       return false;
-               })
-       }       
-}
-
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
-function searchInit()
-{
-       var focusTarget = "input";
-
-       $("#searchInput").bind("keydown", checkSearchText);
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-
-       $(".autocomplete").mouseleave(function(){
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".autocomplete").css("visibility", "visible");
-
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-
-                       var hei = $(".autocomplete").find('>ul').outerHeight();
-                       if(hei>400){
-                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
-                       }
-               }
-               else{
-                       $(".autocomplete").css("visibility", "hidden");
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
- */
-
-function setTopScroll(selector) {
-       if ( !selector ) return false;
-       var btn = $( selector );
-       var w = $( window );
-       btn.css( "position", "absolute" );
-
-
-       btn.click( function(){ w.scrollTop( 0 ) } );
-
-       var wheight = w.innerHeight();
-       
-       $(window).resize( function() {
-               wheight = w.innerHeight();
-               redraw();
-       });
-
-       $(window).scroll( function() {
-               redraw();
-       })
-
-       /**
-        *      Top 버튼의 재정렬 메서드
-        */
-       function redraw()
-       {
-               var t = w.scrollTop() + wheight - 289;
-
-               if( t < wheight / 2 && w.scrollTop() == 0 )     {
-                       t = wheight / 2;
-               }
-               
-               btn.clearQueue();
-
-               btn.animate({
-           top: t
-               }, 500, function() {
-           // Animation complete.
-               });
-               //btn.css( "top", t );
-               //console.log( "target : " + t );
-       }
-
-       redraw();
-       /*
-       obj.initTop = position;
-       obj.topLimit = topLimit;
-       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
-
-       obj.style.position = "absolute";
-       obj.top = obj.initTop;
-       // obj.left = obj.initLeft;
-
-       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
-               obj.getTop = function() {
-                       return window.pageYOffset;
-               }
-       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
-               obj.getTop = function() {
-                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
-               }
-       } else {
-               obj.getTop = function() {
-                       return 0;
-               }
-       }
-
-       if ( self.innerHeight ) {       //WebKit
-               obj.getHeight = function() {
-                       return self.innerHeight;
-               }
-       } else if( document.documentElement.clientHeight ) {
-               obj.getHeight = function() {
-                       return document.documentElement.clientHeight;
-               }
-       } else {
-               obj.getHeight = function() {
-                       return 500;
-               }
-       }
-
-       obj.move = setInterval( function() {
-               if ( obj.initTop > 0 ) {
-                       pos = obj.getTop() + obj.initTop;
-               } else {
-                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
-               }
-
-               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
-               if ( pos < obj.topLimit ) pos = obj.topLimit;
-
-               interval = obj.top - pos;
-               obj.top = obj.top - interval / 3;
-               obj.style.top = obj.top + "px";
-       }, 30 )
-       */
-}
-
-
-//popup
-function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
-function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
-
-//popup 중앙에 띄우기
-function pop_center(){ 
-       var x,y; 
-       if (window.innerHeight) { // IE 외 모든 브라우저 
-               x = (screen.availWidth - self.innerWidth) / 2; 
-               y = (screen.availHeight - self.innerHeight) / 2; 
-       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
-               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
-               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
-       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
-               x = (screen.availWidth - document.body.clientWidth) / 2; 
-               y = (screen.availHeight - document.body.clientHeight) / 2; 
-       } 
-       window.moveTo(x,y); 
-}
-
-// Layer Popup Open
-function layer_open(el){
-       var temp = $('#' + el);
-
-       if(!temp.hasClass('sty2')){
-               $('.layer').fadeIn();
-       }
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       if(temp.hasClass('sty2')){
-               temp.fadeIn();
-
-               temp.find('a.cbtn').click(function(e){
-                       temp.fadeOut();
-               });
-               temp.find('a.gbtn').click(function(e){
-                       temp.fadeOut();
-               });
-
-               return false;
-       }
-       // 닫는 버튼 gbtn-c 추가 20130627
-       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
-               $('.layer').fadeOut();
-               return false;
-       });
-}
-
-// background dim - 2013-05-31
-function layer_open2(el){
-       var temp = $('#' + el);
-       $('input').attr('disabled', 'disabled');
-       $('.layerPop').fadeIn();
-       
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
-               $('.layerPop').fadeOut();
-               $('input').removeAttr('disabled');
-               return false;
-       });
-}
-
-
-function pop_account(url){
-       window.open(url,'account','width=619,height=591,scrollbars=yes')
-}
-
-function pop_loadDoc(url){
-       window.open(url,'online','width=850,height=600,scrollbars=yes')
-}
-
-/** 
- *  [PAGE] Tags
- *  date : 20120820
- *  author : 전종호
- */
-function initTags()
-{
-       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
-       // 마지막 아이템은 제외
-       var eleArr = $(".tag-list").find("li");
-
-       $( eleArr ).each( function( i ) {
-               if( i < eleArr.length - 1 )
-               {
-                       var target = $(this).find("a")[0];
-                       var content = $( target ).html();
-
-                       $( target ).html( content + "," );
-               }
-       })
-}
-
-$(document).ready(function(){
-       $(".tip_info").css("cursor","pointer");
-       $(".tip_info > img").mouseover(function(){
-               $(".tip_cont").css("display","block");
-       });
-       $(".tip_info > img").mouseout(function(){
-               $(".tip_cont").css("display","none");
-       });
-});
-
-// new layer popup script by ygh 2013.11.14
-
-var isPopup = false ;
-
-function popupLayerView(id){
-
-       var $L = $("#" + id) ;
-       var $D  = $("#" + id + "down") ;
-
-       $T = $("#" + id) ;
-
-       $L.show();
-       isPopup = true ;
-
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-
-       $("#" + id + "agree").focus() ;
-
-       jQuery(":focusable").focusin(function(e){
-               if (isPopup) {
-                       e.stopPropagation() ;
-                       if ($L.find(jQuery(this)).length > 0) {
-                       } else {
-                               jQuery(this).blur() ;
-                               jQuery("#" + id + " :focusable:first").focus() ;
-                       }
-               }
-       }) ;
-
-       $L.find('.close').click(function(){
-               resetPopup(id) ;
-       });
-
-       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
-}
-
-function resetPopup(T) {
-       $("#" + T + "down").hide();
-       $("#" + T + "agree").attr("checked", false) ;
-       isPopup = false ;
-       $("#" + T).hide() ;
-       $("#" + T + "Btn").focus() ;
-}
-
-function getDownload(T, F, I) {
-       if ($("#" + T + "agree").is(':checked')) {
-               commonDownloadLog(F, I) ;
-               resetPopup(T) ;
-       }
-}
-
-function focusable( element, isTabIndexNotNaN ) {
-       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
-       if ( "area" === nodeName ) {
-               map = element.parentNode;
-               mapName = map.name;
-               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
-               img = $( "img[usemap=#" + mapName + "]" )[0];
-               return !!img && visible( img );
-       }
-       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
-                       visible( element ) ;
-}
-
-function visible( element ) {
-       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
-               return $.css( this, "visibility" ) === "hidden";
-       }).length;
-}
-if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
-
-$.extend( $.expr[ ":" ], {
-       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
-       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
-       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
-});
-// new layer popup script by ygh 2013.11.14
-
-// 2013-11-15 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device1').hide();
-       
-       $('#thumb_view_btn').hover(function() {
-               $('.view_device1').show();
-       },function() {
-               $('.view_device1').hide();
-       });
-               
-});
-
-// 2014-04-22 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device2').hide();
-       
-       $('#thumb_view_btn2').hover(function() {
-               $('.view_device2').show();
-       },function() {
-               $('.view_device2').hide();
-       });
-               
-});
-
-
-function beforePopupLayerView(popId, popId2, popContinue){
-       var $L = $("#" + popId) ;
-       $L.show(100);
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-       $L.find('.close').click(function(){
-               $L.hide();
-       });
-       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
-}
+$(document).ready(function(){\r
+       $('#contents table').each(function(){\r
+               if (!$(this).parent().hasClass('table')) {\r
+                       $(this).wrap('<div class="table"></div>');\r
+               }\r
+       });\r
+\r
+       // Lnb Menu Initialize\r
+       if($('div#contents').find('.lnb').length){\r
+               if($("ul li.events_news").size() > 0) {\r
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");\r
+               }\r
+               initLnb();\r
+               initScript(staticURL + "/js/fixednavbar.js", function(){});\r
+       }\r
+\r
+       //family site\r
+       if($('div#footer').find('dl#familySlider').length){\r
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);\r
+       }\r
+\r
+       // Svn Commit Test\r
+       \r
+       // Language Selection\r
+       if($('div#header').find('.util').length){\r
+               var $lang = $('div#header').find('.util');\r
+               $lang.find('a.lang').toggle(function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();\r
+                       },function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();\r
+                       });\r
+\r
+               $lang.bind('mouseleave',function(){\r
+                       $(this).find('ul.language').hide();\r
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+               });\r
+\r
+               $lang.find('ul.language').children().last().on("keydown", function(e) {\r
+                       if(e.which == 9 && e.shiftKey) {\r
+                               return true;\r
+                       }\r
+                       \r
+                       if(e.which == 9) {\r
+                               e.preventDefault();\r
+                               $lang.find('ul.language').hide();\r
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+                               setTimeout(function() {\r
+                                       $("#searchTop").focus();\r
+                               }, 1);\r
+                       }\r
+               });\r
+       }\r
+\r
+       // Open the Sitemap\r
+       var $open = $('div#header').find('.bt-open');\r
+       $open.bind('click',function(){\r
+               var $self = $(this);\r
+               var $sitemap = $('div#wrapper').find('div#sitemap');\r
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');\r
+\r
+               if($sitemap.is(':visible')){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');\r
+\r
+                       $self.attr('title','open sitemap');\r
+               }else{\r
+                       var source = $self.css('background-image').replace('.gif','_.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');\r
+\r
+                       $self.attr('title','close sitemap');\r
+               }\r
+               \r
+               $self.css('background-image',source);\r
+               $sitemap.slideToggle('fast');\r
+               \r
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       $self.css('background-image',source);\r
+                       $sitemap.slideToggle('fast');\r
+               });\r
+\r
+       });\r
+\r
+       // Search Auto Complete\r
+       var $search = $('div#header').find('fieldset.search');\r
+       var $searchList = $search.find('#topAutocomplete>ul');\r
+\r
+       if($search.length){\r
+               $search.find('> input').each(function(){\r
+                       $(this).bind({\r
+                               keydown : function(e){\r
+                       \r
+                                       if(e.type=='keydown'&& $(this).val().length!=0){\r
+                                               $search.find('#topAutocomplete').show();\r
+                                               var hei = $searchList.outerHeight();\r
+                                               if(hei>400){\r
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});\r
+                                               }\r
+                                       }\r
+                                       if(e.keyCode==9){\r
+                                               $search.unbind('focusout.search');\r
+                                       }\r
+                                       if(e.keyCode==40){\r
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();\r
+                                               //window.scrollTo(0,0);\r
+                                       }\r
+                               },\r
+                               focusin : function(e){\r
+                                       if($(this).val()==='Search'){\r
+                                               $(this).val('');\r
+                                       }\r
+                               },\r
+                               focusout : function(e){\r
+                                       if($(this).val().length==0) $(this).val('Search');\r
+                               }\r
+                       });\r
+               });\r
+\r
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){\r
+               //      if(e.keyCode==40){\r
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();\r
+               //      }\r
+               //});\r
+\r
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){\r
+                       if($search.find('> input').val().length==0){\r
+                               $search.find('> input').val('Search');\r
+                       }\r
+                       $search.find('#topAutocomplete').hide();\r
+               });\r
+\r
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){\r
+                       $search.find('> input').val('Search');\r
+                       $search.find('#topAutocomplete').hide();\r
+                       \r
+                       //$search.bind('focusout.search', function(){\r
+                       //      $(this).find('> input').val('Search');\r
+                       //      $(this).find('#topAutocomplete').hide();\r
+                       //});\r
+               });\r
+       }\r
+});\r
+\r
+// 비차단 동적 스크립트 로딩\r
+function initScript(url, callback){\r
+       var script = document.createElement("script");\r
+       script.type = "text/javascript";\r
+\r
+       if(script.readyState){ // 인터넷 익스플로러\r
+               script.onreadystatechange = function(){\r
+                       if(script.readyState=="loaded" || script.readyState=="complete"){\r
+                               script.onreadystatechange = null;\r
+                               callback();\r
+                       }\r
+               };\r
+       }else{  // 다른  브라우저\r
+               script.onload = function(){\r
+                       callback();\r
+               };\r
+       }\r
+\r
+       script.src = url;\r
+       document.getElementsByTagName("head")[0].appendChild(script);\r
+}\r
+\r
+\r
+// lnb\r
+function initLnb(){\r
+       var sMenu = $('.lnb');\r
+       var sItem = sMenu.find('>li');\r
+\r
+       sItem.each(function(){\r
+               if($(this).find('a').hasClass('more')){\r
+                       if($(this).find('ul').is(":visible")) {\r
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); \r
+                       } else {\r
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));\r
+                       }\r
+               }\r
+       });\r
+       \r
+       var setIcoArrText = function(obj) {\r
+               if(obj.next().is(":visible")) {\r
+                       obj.text("close submenu");\r
+               } else {\r
+                       obj.text("open submenu");\r
+               }\r
+       }\r
+       \r
+       sItem.find('.ico-arr').on("click", function() {\r
+               var $that = $(this);\r
+               var liBox = $that.parent();   \r
+               var ulBox = $that.next();\r
+               \r
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();\r
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");\r
+               \r
+               if(liBox.hasClass("on")) {\r
+                       if(ulBox.is(":visible")) {\r
+                               ulBox.hide();\r
+                               $that.addClass("ico-on");\r
+                       } else {\r
+                               ulBox.show();\r
+                               $that.removeClass("ico-on");\r
+                       }\r
+                       setIcoArrText($that);\r
+                       return true;\r
+               }\r
+               \r
+               if(liBox.hasClass("active")) {\r
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");\r
+                       ulBox.hide();\r
+               } else {\r
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");\r
+                       ulBox.show();\r
+               }\r
+               setIcoArrText($that);\r
+       });\r
+\r
+       sItem.hover(function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+               $(this).find("a").eq(0).addClass("bov");\r
+       },function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+                $(this).find("a").eq(0).removeClass("bov");\r
+\r
+       });\r
+}\r
+\r
+//footer rolling banner\r
+function fn_rollToEx(container,objectId,step,auto){\r
+\r
+       // 롤링할 객체를 변수에 담아둔다.\r
+       var el = $('#'+container).find('#'+objectId);\r
+       var lastChild;\r
+       var speed = 3000;\r
+       var timer = 0;\r
+       var autoplay = false;\r
+\r
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.\r
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수\r
+       el.data('animating',false);\r
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.\r
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.\r
+\r
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.\r
+\r
+       if(arguments.length==4){\r
+               el.data('autoStart', auto);\r
+       }\r
+\r
+       if(el.data('autoStart')){\r
+               if(timer==0){\r
+                       timer = setInterval(moveNextSlide, speed);\r
+                       autoplay = true;\r
+               }\r
+       }\r
+\r
+       el.bind({\r
+               mouseenter:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+\r
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('prev').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       movePrevSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('next').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       moveNextSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       function movePrevSlide(){\r
+               if(!el.data('animating')){\r
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);\r
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.\r
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다\r
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.\r
+               \r
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.\r
+\r
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+    function moveNextSlide(){\r
+               if(!el.data('animating')){\r
+                       el.data('animating',true);\r
+\r
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.\r
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);\r
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.\r
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다\r
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.\r
+\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+}\r
+\r
+function fn_slide(options){\r
+\r
+       var opts = jQuery.extend({},options);\r
+\r
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자\r
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자\r
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자\r
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자\r
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값\r
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수\r
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수\r
+       var auto = false;\r
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수\r
+       var time;\r
+\r
+\r
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정\r
+       effect = opts.effect;\r
+       auto = opts.auto;\r
+\r
+       if(auto){\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       slideShow = function(){\r
+\r
+               if(current < len-1){\r
+                       current++;\r
+               }else{\r
+                       current=0;\r
+               }\r
+\r
+               controllStatus();\r
+\r
+               moveControl('next');\r
+\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       controllStatus = function(){\r
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정\r
+               if(current>0||current<len-1){                           \r
+                       $prev.show();\r
+                       $next.show();\r
+               }\r
+               if(current==0){\r
+                       $prev.hide();\r
+                       $next.show();\r
+               }\r
+               if(current>=len-1){\r
+                       $prev.show();\r
+                       $next.hide();\r
+               }\r
+       }\r
+\r
+       moveControl = function(msg){\r
+               if(opts.bt!=null){\r
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))\r
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화\r
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화\r
+               }\r
+\r
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                       $obj.children().hide();\r
+                       $obj.children().eq(current).show();\r
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                       $obj.animate({'left':'-'+size*current},'slow');\r
+               }\r
+       }\r
+\r
+       $obj.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               }\r
+       });\r
+\r
+       //롤링 버튼 클릭시\r
+       $bt.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장\r
+\r
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정\r
+\r
+                       controllStatus();\r
+\r
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                               $obj.children().hide();\r
+                               $obj.children().eq(current).show();\r
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                               $obj.animate({'left':'-'+size*current},'slow');\r
+                       }\r
+\r
+                       // 모든 롤링 버튼을 비활성화\r
+                       $bt.each(function(){\r
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                                $(this).find('img').attr('src',source);\r
+                       });\r
+\r
+                       // 선택한 롤링버튼을 활성화\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //이전 버튼 클릭시\r
+       $prev.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 \r
+                       current--;                                                      //이미지 인덱스값 1씩 감소\r
+\r
+                       moveControl('prev');\r
+\r
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //다음 버튼 클릭시\r
+       $next.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       current++;                                                      //이미지 인덱스값 1씩 증가\r
+                       \r
+                       moveControl('next');\r
+\r
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화\r
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+}\r
+\r
+// main rolling banner\r
+function slideMotion1(){\r
+       var $banner = $('#rolling .motionview'),\r
+               //$nav = $('#rolling ul.nav'),\r
+               banner = {prev:null, next:null},\r
+               size = $banner.children().length;\r
+               index = 1,\r
+               speed = 3000,\r
+               timer = null,\r
+               auto = true,\r
+               width = parseInt(100/size),\r
+               rest = parseInt(100%size);\r
+\r
+       var $nav = $('<ul class="nav">').insertAfter($banner);\r
+\r
+       $banner.children().each(function(index){\r
+               index++;\r
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);\r
+               if(index==size){\r
+                       $nav.children().eq(-1).find('a').css('background-image','none');\r
+               }\r
+       });\r
+\r
+       if(rest>0){\r
+               width+=rest;\r
+               $nav.children().eq(-1).css('width',width+'%');\r
+       }\r
+\r
+       $nav.delegate("li",'click',function(){\r
+               var idx = $nav.children().index(this);\r
+               index = idx;\r
+               banner.prev = $banner.find('a.active');\r
+               banner.next = $banner.find('a').eq(index);\r
+\r
+               clearInterval(timer);\r
+               auto = false;\r
+               \r
+               $nav.trigger('change.banner',banner)\r
+                       .trigger('change.tab',index);\r
+\r
+               return false;\r
+       });\r
+\r
+       $nav.bind('change.banner',function(event, banner){\r
+               aniMotion();\r
+       });\r
+\r
+       $nav.bind('change.tab',function(event, index){\r
+               $nav.children().find('a').removeClass('sel');\r
+               $nav.children().eq(index).find('a').addClass('sel');\r
+       });\r
+\r
+       timer = setInterval(autoMotion, speed);\r
+\r
+       function autoMotion(){\r
+               if(index > size-1) index = 0;\r
+\r
+               aniMotion();\r
+       }\r
+\r
+       function aniMotion(){\r
+               if(auto){\r
+                       banner.prev = $banner.find('a.active');\r
+                       banner.next = $banner.find('a').eq(index);\r
+\r
+                       $nav.children().find('a').removeClass('sel');\r
+                       $nav.children().eq(index).find('a').addClass('sel');\r
+               }\r
+               banner.prev.addClass('last-active');\r
+               banner.next.css({'opacity':0.0})\r
+                       .addClass('active')\r
+                       .animate({'opacity':1.0}, 1000, function(){\r
+                               banner.prev.removeClass('active last-active');\r
+\r
+                               if(auto){\r
+                                       index++;\r
+                               }else{\r
+                                       index++;\r
+                                       timer = setInterval(autoMotion, speed*1.5);\r
+                                       auto = true;\r
+                               }\r
+                       });\r
+       }\r
+}\r
+\r
+// forum list show or hide function\r
+function toggleFunc(){\r
+       \r
+       var defaulNum = [2];\r
+\r
+       $('.forum-tit').each(function(){\r
+               var self = $(this);\r
+\r
+               var idx = $('.forum-tit').index(this);\r
+\r
+               for(i=0;i<=defaulNum.length;i++){\r
+                       if(idx==defaulNum[i]){\r
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');\r
+                               self.find('a.toggle').css('background-image',source);\r
+\r
+                               self.find('a.toggle').text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }\r
+               }\r
+\r
+               self.find('a.toggle').click(function(){\r
+                       \r
+                       if(self.next().is(':visible')){\r
+                               var source = $(this).css('background-image').replace('.gif','_.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }else{\r
+                               var source = $(this).css('background-image').replace('_.gif','.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Hide');\r
+                               self.removeClass('mb35').next().show();\r
+                       }\r
+\r
+                       return false;\r
+\r
+               });\r
+\r
+       });\r
+}\r
+\r
+// 파일 업로드\r
+function fileUpload( width ){\r
+       //var $img = $('.attach input[type=image]');\r
+       //var width = $img.attr('width');\r
+\r
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅\r
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";\r
+\r
+       var $file = $('.attach input.upload').css({\r
+               "position": "absolute",\r
+               "top": "0px",\r
+               "right": "0px",\r
+               "width": w,\r
+               "cursor": "pointer",\r
+               "opacity": "0.0",\r
+               "height": "23px"\r
+       });\r
+       $file.off('change');\r
+       $file.on('change',function(e){\r
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드\r
+                       return;\r
+               }\r
+               var idx = $file.index(this);\r
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();\r
+               var fileErrMsg = {\r
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"\r
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"\r
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"\r
+                           ,ext_ko : "지원하지 않는 확장자 입니다."\r
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"\r
+                           ,ext_en : "File extention not allowed for upload."\r
+               };\r
+               var initFileInput = function(obj) {\r
+                       $(obj).parent().find('input.file').val("");\r
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );\r
+                       else $(obj).val("");\r
+               };\r
+               \r
+               var filename = $(this).val();\r
+               \r
+               //CHK File ext\r
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"\r
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"\r
+                                     , "jpg", "png", "zip"];\r
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();\r
+               var findFlag = false;\r
+               for(var i = 0; i < imgExts.length; i++) {\r
+                       if(imgExts[i] == fileExt) {\r
+                               findFlag = true;\r
+                               break;\r
+                       }\r
+               }\r
+       \r
+               if(findFlag == false) {\r
+                       alert( fileErrMsg["ext_" + localeCode] );\r
+                       initFileInput(this);\r
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.\r
+                       return;\r
+               }\r
+               \r
+               //CHK File Size\r
+               if(\r
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie\r
+                               || $.browser.mozilla //FF\r
+                               || $.browser.safari //Chrome\r
+               )\r
+               {\r
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;\r
+                       if( filesize > 200 ) {\r
+                               alert( fileErrMsg["limit_" + localeCode] );\r
+                               initFileInput(this);\r
+                               return;\r
+                       }\r
+               }\r
+               \r
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);\r
+       });\r
+};\r
+\r
+\r
+// Show or Hide Toggle\r
+function showToEx(args){\r
+\r
+       if(!arguments.length) return false;\r
+       \r
+       var bt = $('#'+args.bt);\r
+       var obj = $('#'+args.obj);\r
+\r
+       var source = bt.css('background-image');\r
+       \r
+       if(obj.is(':visible')){\r
+               obj.hide();\r
+       }\r
+\r
+       bt.toggle(function(){\r
+               var src = source.replace('.gif','_.gif');\r
+               bt.css('background-image', src);\r
+               obj.show();\r
+               \r
+               return false;\r
+       },function(){\r
+               var src = source.replace('_.gif','.gif');\r
+               bt.css('background-image', src);\r
+               obj.hide();\r
+\r
+               return false;\r
+       });\r
+\r
+}\r
+\r
+\r
+// FAQ 20131016\r
+function faqToEx(){\r
+\r
+ var $question = $('#contents').find('.question');\r
+ var $answer = $('#contents').find('.answer');\r
+\r
+ // All Answer Rows Hide\r
+ $answer.hide().find('.conts').hide();\r
+\r
+ $question.each(function(){\r
+  var $self = $(this);\r
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");\r
+  \r
+  $self.find('a').bind('click',function(){\r
+   $("#selArea ul").hide();\r
+   /*\r
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;\r
+\r
+   $answer.hide().find('.conts').hide();\r
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');\r
+   */\r
+\r
+   /* 20120822 hjh modify*/\r
+   /* if ( this open )?  close : all close, e.target open */\r
+   var cutTtl  = $(this).parent().children("div").html();\r
+   var ttl     = $(this).parent().parent().children("td.real_question").html();\r
+   \r
+   if($(this).parents('tr').next().find('.answer').is(':visible')){\r
+    $(this).html(cutTtl);\r
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){\r
+     $answer.hide();\r
+    });\r
+   }else{\r
+    titleInit();\r
+    $(this).html(ttl);\r
+    $answer.hide().find('.conts').hide();\r
+    //$answer.slideUp('normal').find('.conts').hide();\r
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); \r
+   }   \r
+\r
+   return false;\r
+  });\r
+ });\r
+\r
+ $answer.each(function(){\r
+  var $self = $(this);\r
+\r
+  $(this).find('a.bt-close-faq').bind('click',function(){\r
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");\r
+   var cutTtl      = question_td.children("div").html();\r
+   question_td.children("a").html(cutTtl);\r
+   \r
+   $self.find('.conts').slideUp('fast',function(){\r
+    $self.hide();\r
+   });\r
+\r
+   return false;\r
+  });\r
+ });\r
+ \r
+ var titleInit = function() {\r
+  $question.each(function(i) {\r
+   $(this).find("a").html($(this).find("div").html());\r
+  });\r
+ }\r
+}\r
+\r
+\r
+\r
+/**\r
+ *  쓰기페이지 Tab 영역 컨트롤\r
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'\r
+ */\r
+function setSwitchTab( selector ) {\r
+       var tabs = $('.tab-list').find("li");\r
+       var elements = $( selector );\r
+\r
+       $( elements ).each( function( i ) {\r
+               if( i != 0 )\r
+               {\r
+                       $(this).hide();\r
+               }\r
+       })\r
+\r
+       // Control Tabs\r
+       $( tabs ).each( function( i ) {\r
+               $( this ).click( function(){\r
+                       resetClass();\r
+\r
+                       $( this ).find( 'a' ).addClass( "sel" );\r
+                       $( elements[i] ).show();\r
+\r
+                       return false;\r
+               });\r
+       });\r
+\r
+       // Class 리셋\r
+       function resetClass()\r
+       {\r
+               $( tabs ).each( function( i ) {\r
+                       $( this ).find( 'a' ).removeClass( 'sel' );\r
+               });\r
+\r
+               $( elements ).each( function( i ) {\r
+                       $( this ).hide();\r
+               });\r
+       }\r
+}\r
+\r
+var SET_ATTACH_LIMIT;\r
+var SET_ATTACH_WIDTH;\r
+var SET_ATTACH_BTNNAME;\r
+\r
+var firstAddAction = function(obj, limit, w, btnName) {\r
+ var bn            = btnName || 'File';\r
+ var fileAttachStr = "<li class='clfix no-first'>";\r
+ fileAttachStr += '<div class="attach">';\r
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';\r
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';\r
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';\r
+ fileAttachStr += '</div>';\r
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';\r
+ fileAttachStr += '</li>';\r
+ obj.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    $("a.remove-btn").eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ obj.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ \r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+}\r
+\r
+var firstRemoveAction = function(id) {\r
+ var obj = $("#" + id);\r
+ var compFile    = $("input[type=file]");\r
+ var compFileCnt = compFile.size();\r
+ var ulObj       = compFile.eq(0).parent().parent().parent();\r
+ if(compFileCnt <= 1) {\r
+  var firstCompFile = compFile.eq(0);\r
+  firstCompFile.prev().prev().val("");\r
+  if ($.browser.msie) {\r
+               $(obj).parent().find('input.file').val("");\r
+               firstCompFile.replaceWith( firstCompFile.clone(true) );\r
+       } else {\r
+               firstCompFile.val("");\r
+               firstCompFile.prev().prev().val("");\r
+  }\r
+ } else {\r
+  obj.parent().remove();\r
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");\r
+  \r
+  //add-btn event..\r
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);\r
+ }\r
+ \r
+ ulObj\r
+ .find("li")\r
+ .eq(0)\r
+ .removeClass("no-first")\r
+ .find("a.remove-btn")\r
+ .attr("id", id)\r
+ .unbind("click");\r
+ \r
+ setTimeout(function() {\r
+  $("#" + id).focus();\r
+ }, 100);\r
+ \r
+ $("#" + id).on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   var that = $(this);\r
+   setTimeout(function() {\r
+    that.prev().focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ $("#" + id).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+/** \r
+ * File 첨부컨트롤\r
+ * @param limit 최대 파일 첨부 갯수\r
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가\r
+ */\r
+function setAttachFile( limit, width, btnName, removeBtnId )\r
+{\r
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;\r
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );\r
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );\r
+ \r
+ SET_ATTACH_LIMIT = limit;\r
+ SET_ATTACH_WIDTH = w;\r
+ SET_ATTACH_BTNNAME = btnName;\r
+ \r
+ inputFile.on("keydown", function(e) {\r
+  var that = $(this);\r
+  \r
+  if(e.which == 9 && e.shiftKey) {\r
+   return true;\r
+  }\r
+  \r
+  if(e.which === 9) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ inputFile.on("focusin", function(e) {\r
+  $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+ }).on("focusout", function(e) {\r
+  $(this).parent().css("outline", "");\r
+ });\r
+ \r
+ firstAddAction(btnFileAttach, limit, w, btnName);\r
+ \r
+ /*\r
+ btnFileAttach.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    inputFile.focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ btnFileAttach.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+\r
+ // File 제거 버튼\r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ */\r
+ /**\r
+  *  2012-08-08 전종호 추가\r
+  *  파일 Input Text 영역 너비를 잡아주는 메서드\r
+  */\r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+\r
+ updateFileField();\r
+ fileUpload( w + 50 );\r
+ \r
+ $("#" + removeBtnId).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+\r
+\r
+/** \r
+ * [PAGE] device speces list page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+function initDevicespecsList (){\r
+       var isCompareView=false;\r
+       $("#devicespecs-list > li").each( \r
+               function(i){ \r
+                       $(".info", this).bind("click", devicespecsListInfoToggle);\r
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);\r
+                       \r
+                       //detail info layer toggle function\r
+                       function devicespecsListInfoToggle (){\r
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();\r
+                               return false;\r
+                       }\r
+       });\r
+\r
+\r
+       /* DEVICE COMPARE 열리는 부분\r
+       - defualt : close. \r
+       - 최초 한번만 열림 \r
+       - 현재는 compare 버튼에 공통으로 함수 바인딩\r
+       */\r
+       function devicespecsCompareOnOff (){\r
+               if ( isCompareView ) return;\r
+               var ww = ( isCompareView ) ? "30px":"207px";\r
+               $("#devicespecs-compare").animate({\r
+                   height: ww }, 300, "linear", function(){ });\r
+\r
+               isCompareView = ( isCompareView ) ? false:true;\r
+               return false;\r
+       }\r
+\r
+       //compare 버튼 공통으로 클릭 이벤트 걸림 \r
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });\r
+}\r
+\r
+/** \r
+ * [PAGE] device speces view page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+ function initDevicespecsView (){\r
+       var isImgView = false;\r
+       var isView = 0;\r
+       \r
+       //thumbnail overevent bind\r
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );\r
+       focusDeviceDetail (1);\r
+       \r
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.type === "keydown" && e.which == 9) {\r
+                       setTimeout(function() {\r
+                               $("#img-viewer-handle a").eq(0).focus();        \r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       //thumbnail viewarea controll handler bind\r
+       $("#img-viewer-handle").click(function () {\r
+               var ww;\r
+               var src = $("#img-viewer-handle img").attr("src");\r
+               if ( isImgView ){\r
+                       ww = "300px";\r
+                       src = src.replace(".gif", "_.gif");\r
+                       $("#img-viewer-thumbnail").hide();\r
+                       $("#device-info").show();\r
+               }else{\r
+                       ww = "730px";\r
+                       src = src.replace("_.gif", ".gif");\r
+                       $("#img-viewer-thumbnail").show();\r
+                       $("#device-info").hide();\r
+                       focusDeviceDetail(1);\r
+               }\r
+               \r
+               $("#img-viewer-handle img").attr("src", src);\r
+       $("#img-viewer").animate({\r
+                   width: ww\r
+                       }, 300, "linear", function(){\r
+                       if($.browser.msie)\r
+                               $("#img-inner").css("width", ww);\r
+               });\r
+               \r
+       isImgView = ( isImgView ) ? false:true;\r
+    });\r
+\r
+       //thumbnail overevent function (update date 2012.09.05 kangki)\r
+       function focusDeviceDetail ( id ) {\r
+               if ( isView == id ) return;\r
+\r
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");\r
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');\r
+\r
+               $( "#img-viewer-bic > img").attr("src", imgSrc);\r
+               isView = (id);          \r
+       }\r
+\r
+       /*toggle devicespecs List*/\r
+       if($('div#contents').find('.devicespec-tit').length){\r
+               \r
+               $('.devicespec-tit').each(function(){\r
+                       var self = $(this);\r
+                       $('a', self).bind ("click", fnToggle);\r
+\r
+                       function fnToggle(){\r
+\r
+                               if ( $(this).parent().parent().next().is(':visible') ){\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+                                       self.find('em').text('Show');\r
+                                       self.next().hide();\r
+\r
+                                       return false;\r
+                               }else{\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+                                       self.find('em').text('Hide');\r
+                                       self.next().show();\r
+\r
+                                       return false;\r
+                               }\r
+                       }\r
+                                                       \r
+               });\r
+       }\r
+\r
+       /*all Show Hide devicespecs List*/\r
+       if($('div#contents').find('.devicespecs-util').length){\r
+               var self = $('div#contents').find('.devicespecs-util');\r
+\r
+               $('.showA', self).bind ("click", function (){\r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( !me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+                                       me.find('em').text('Hide');\r
+                                       me.next().show();\r
+                               }\r
+                       });\r
+                       return false;\r
+               })\r
+               $('.hideA', self).bind ("click", function (){\r
+                       \r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+                                       me.find('em').text('Show');\r
+                                       me.next().hide();\r
+                               }\r
+                                                               \r
+                       });\r
+                       return false;\r
+               })\r
+       }       \r
+}\r
+\r
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       $("#searchInput").bind("keydown", checkSearchText);\r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+\r
+       $(".autocomplete").mouseleave(function(){\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".autocomplete").css("visibility", "visible");\r
+\r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+\r
+                       var hei = $(".autocomplete").find('>ul').outerHeight();\r
+                       if(hei>400){\r
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});\r
+                       }\r
+               }\r
+               else{\r
+                       $(".autocomplete").css("visibility", "hidden");\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+ */\r
+\r
+function setTopScroll(selector) {\r
+       if ( !selector ) return false;\r
+       var btn = $( selector );\r
+       var w = $( window );\r
+       btn.css( "position", "absolute" );\r
+\r
+\r
+       btn.click( function(){ w.scrollTop( 0 ) } );\r
+\r
+       var wheight = w.innerHeight();\r
+       \r
+       $(window).resize( function() {\r
+               wheight = w.innerHeight();\r
+               redraw();\r
+       });\r
+\r
+       $(window).scroll( function() {\r
+               redraw();\r
+       })\r
+\r
+       /**\r
+        *      Top 버튼의 재정렬 메서드\r
+        */\r
+       function redraw()\r
+       {\r
+               var t = w.scrollTop() + wheight - 289;\r
+\r
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {\r
+                       t = wheight / 2;\r
+               }\r
+               \r
+               btn.clearQueue();\r
+\r
+               btn.animate({\r
+           top: t\r
+               }, 500, function() {\r
+           // Animation complete.\r
+               });\r
+               //btn.css( "top", t );\r
+               //console.log( "target : " + t );\r
+       }\r
+\r
+       redraw();\r
+       /*\r
+       obj.initTop = position;\r
+       obj.topLimit = topLimit;\r
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;\r
+\r
+       obj.style.position = "absolute";\r
+       obj.top = obj.initTop;\r
+       // obj.left = obj.initLeft;\r
+\r
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit\r
+               obj.getTop = function() {\r
+                       return window.pageYOffset;\r
+               }\r
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {\r
+               obj.getTop = function() {\r
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );\r
+               }\r
+       } else {\r
+               obj.getTop = function() {\r
+                       return 0;\r
+               }\r
+       }\r
+\r
+       if ( self.innerHeight ) {       //WebKit\r
+               obj.getHeight = function() {\r
+                       return self.innerHeight;\r
+               }\r
+       } else if( document.documentElement.clientHeight ) {\r
+               obj.getHeight = function() {\r
+                       return document.documentElement.clientHeight;\r
+               }\r
+       } else {\r
+               obj.getHeight = function() {\r
+                       return 500;\r
+               }\r
+       }\r
+\r
+       obj.move = setInterval( function() {\r
+               if ( obj.initTop > 0 ) {\r
+                       pos = obj.getTop() + obj.initTop;\r
+               } else {\r
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;\r
+               }\r
+\r
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;\r
+               if ( pos < obj.topLimit ) pos = obj.topLimit;\r
+\r
+               interval = obj.top - pos;\r
+               obj.top = obj.top - interval / 3;\r
+               obj.style.top = obj.top + "px";\r
+       }, 30 )\r
+       */\r
+}\r
+\r
+\r
+//popup\r
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)\r
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)\r
+\r
+//popup 중앙에 띄우기\r
+function pop_center(){ \r
+       var x,y; \r
+       if (window.innerHeight) { // IE 외 모든 브라우저 \r
+               x = (screen.availWidth - self.innerWidth) / 2; \r
+               y = (screen.availHeight - self.innerHeight) / 2; \r
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 \r
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; \r
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; \r
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) \r
+               x = (screen.availWidth - document.body.clientWidth) / 2; \r
+               y = (screen.availHeight - document.body.clientHeight) / 2; \r
+       } \r
+       window.moveTo(x,y); \r
+}\r
+\r
+// Layer Popup Open\r
+function layer_open(el){\r
+       var temp = $('#' + el);\r
+\r
+       if(!temp.hasClass('sty2')){\r
+               $('.layer').fadeIn();\r
+       }\r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       if(temp.hasClass('sty2')){\r
+               temp.fadeIn();\r
+\r
+               temp.find('a.cbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+               temp.find('a.gbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+\r
+               return false;\r
+       }\r
+       // 닫는 버튼 gbtn-c 추가 20130627\r
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){\r
+               $('.layer').fadeOut();\r
+               return false;\r
+       });\r
+}\r
+\r
+// background dim - 2013-05-31\r
+function layer_open2(el){\r
+       var temp = $('#' + el);\r
+       $('input').attr('disabled', 'disabled');\r
+       $('.layerPop').fadeIn();\r
+       \r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){\r
+               $('.layerPop').fadeOut();\r
+               $('input').removeAttr('disabled');\r
+               return false;\r
+       });\r
+}\r
+\r
+\r
+function pop_account(url){\r
+       window.open(url,'account','width=619,height=591,scrollbars=yes')\r
+}\r
+\r
+function pop_loadDoc(url){\r
+       window.open(url,'online','width=850,height=600,scrollbars=yes')\r
+}\r
+\r
+/** \r
+ *  [PAGE] Tags\r
+ *  date : 20120820\r
+ *  author : 전종호\r
+ */\r
+function initTags()\r
+{\r
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.\r
+       // 마지막 아이템은 제외\r
+       var eleArr = $(".tag-list").find("li");\r
+\r
+       $( eleArr ).each( function( i ) {\r
+               if( i < eleArr.length - 1 )\r
+               {\r
+                       var target = $(this).find("a")[0];\r
+                       var content = $( target ).html();\r
+\r
+                       $( target ).html( content + "," );\r
+               }\r
+       })\r
+}\r
+\r
+$(document).ready(function(){\r
+       $(".tip_info").css("cursor","pointer");\r
+       $(".tip_info > img").mouseover(function(){\r
+               $(".tip_cont").css("display","block");\r
+       });\r
+       $(".tip_info > img").mouseout(function(){\r
+               $(".tip_cont").css("display","none");\r
+       });\r
+});\r
+\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+var isPopup = false ;\r
+\r
+function popupLayerView(id){\r
+\r
+       var $L = $("#" + id) ;\r
+       var $D  = $("#" + id + "down") ;\r
+\r
+       $T = $("#" + id) ;\r
+\r
+       $L.show();\r
+       isPopup = true ;\r
+\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+\r
+       $("#" + id + "agree").focus() ;\r
+\r
+       jQuery(":focusable").focusin(function(e){\r
+               if (isPopup) {\r
+                       e.stopPropagation() ;\r
+                       if ($L.find(jQuery(this)).length > 0) {\r
+                       } else {\r
+                               jQuery(this).blur() ;\r
+                               jQuery("#" + id + " :focusable:first").focus() ;\r
+                       }\r
+               }\r
+       }) ;\r
+\r
+       $L.find('.close').click(function(){\r
+               resetPopup(id) ;\r
+       });\r
+\r
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });\r
+}\r
+\r
+function resetPopup(T) {\r
+       $("#" + T + "down").hide();\r
+       $("#" + T + "agree").attr("checked", false) ;\r
+       isPopup = false ;\r
+       $("#" + T).hide() ;\r
+       $("#" + T + "Btn").focus() ;\r
+}\r
+\r
+function getDownload(T, F, I) {\r
+       if ($("#" + T + "agree").is(':checked')) {\r
+               commonDownloadLog(F, I) ;\r
+               resetPopup(T) ;\r
+       }\r
+}\r
+\r
+function focusable( element, isTabIndexNotNaN ) {\r
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;\r
+       if ( "area" === nodeName ) {\r
+               map = element.parentNode;\r
+               mapName = map.name;\r
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }\r
+               img = $( "img[usemap=#" + mapName + "]" )[0];\r
+               return !!img && visible( img );\r
+       }\r
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible\r
+                       visible( element ) ;\r
+}\r
+\r
+function visible( element ) {\r
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {\r
+               return $.css( this, "visibility" ) === "hidden";\r
+       }).length;\r
+}\r
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }\r
+\r
+$.extend( $.expr[ ":" ], {\r
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },\r
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },\r
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }\r
+});\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+// 2013-11-15 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device1').hide();\r
+       \r
+       $('#thumb_view_btn').hover(function() {\r
+               $('.view_device1').show();\r
+       },function() {\r
+               $('.view_device1').hide();\r
+       });\r
+               \r
+});\r
+\r
+// 2014-04-22 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device2').hide();\r
+       \r
+       $('#thumb_view_btn2').hover(function() {\r
+               $('.view_device2').show();\r
+       },function() {\r
+               $('.view_device2').hide();\r
+       });\r
+               \r
+});\r
+\r
+\r
+function beforePopupLayerView(popId, popId2, popContinue){\r
+       var $L = $("#" + popId) ;\r
+       $L.show(100);\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+       $L.find('.close').click(function(){\r
+               $L.hide();\r
+       });\r
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });\r
+}\r
diff --git a/org.tizen.gettingstarted/html/scripts/core.js b/org.tizen.gettingstarted/html/scripts/core.js
index 68dea4c..31ad7ff 100644 (file)
--- a/org.tizen.gettingstarted/html/scripts/core.js
+++ b/org.tizen.gettingstarted/html/scripts/core.js
@@ -1,899 +1,899 @@
-// /////////////////////////////////////////////////////////////////////////////////////////////////
-// # com.samsung.devloper common core javascript #
-// # Create Date : 2012.07.10. 
-// # Create By : kangki
-;(function ($) {
-/**
- * Samsung Developer Common JavaScript
- */
-$.SD = {};
-
-/*
- * Method Common
- */
-$.SD.message = function (msg) { if (msg) alert(msg); };
-$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
-$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
-$.SD.typeTest = function (data, datatype) {
-       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
-       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
-       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
-       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
-       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
-       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
-       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
-
-       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
-};
-
-$.SD.toDate = function (date, seperator) {
-       if (!seperator) seperator = '-';
-
-       date = $.SD.replaceAll(date, seperator, '');
-       date = $.SD.replaceAll(date, '/', '');
-
-       if (date.length !== 8) return null;
-       
-       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
-
-       if (date.valueOf().toString() === 'NaN') return null;
-
-       return date;
-};
-
-$.SD.toDateString = function (date, seperator) {
-       if (!seperator) seperator = '/';
-       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
-       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
-
-       var str, dateString = date.getFullYear();
-
-       str             = "0" + (date.getMonth()+1);
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-       str             = "0" + date.getDate();
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-
-       return dateString;
-};
-
-$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
-$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
-$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
-
-$.SD.insertComma = function(num) {
-       var tnum    = num + "";
-       var tarr    = new Array();
-       var dot     = "";
-       var idxDot  = tnum.indexOf(".");
-       var sign    = "";
-       var tinx    = 0;
-       var fnum    = tnum;
-        
-       
-       if(idxDot > -1) {
-               fnum = tnum.substring(0, idxDot);
-               dot  = tnum.substring(idxDot);
-               tnum = fnum;
-       } 
-       
-       if(tnum.indexOf("-") > -1) {
-               fnum = tnum.substring(1);
-               sign = tnum.substring(0, 1);
-       }
-       
-       for(var inx = fnum.length; inx > 0; ) {
-               tarr[tinx++] = fnum.substring(inx, inx - 3);
-               inx = inx - 3;
-       }
-       
-       return sign + tarr.reverse().join(",") + dot;
-}
-
-/**
- * Method Ajax
- */
-$.SD.ajax = {
-       doAjax : function (json) {
-               var param = {
-                       async : json.async,
-                       type : json.type,
-                       dataType : json.dataType,
-                       cache: json.cache,
-                       timeout : json.timeout,
-                       success : json.success,
-                       error : json.error
-               };
-
-               if (param.dataType === 'jsonp') {
-                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
-               } else {
-                       param.url = json.url;
-                       param.data = json.data;
-               }
-               $.ajax(param);
-       },
-       
-       get : function (json) {
-               $.SD.ajax.doAjax({ 
-                       url:json.url,
-                       cache:json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'get', 
-                       dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       },
-       
-       post : function (json) {
-               $.SD.ajax.doAjax({ url:json.url,
-                       cache: json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'post', dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       }
-};
-
-/**
- * SD20 password check
- */
-
-$.SD.isSD20Pwd = function(pwd) {
-       
-       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/[0-9]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
-               return false;
-       }
-       
-       return true;
-};
-
-$.SD.popupCenter = function(popObj) {
-       var scrollbars  = "no";
-       var resizeable  = "no";
-       
-       if(popObj.scrollbars) {
-               scrollbars = popObj.scrollbars; 
-       }
-       
-       if(popObj.resizeable) {
-               resizeable = popObj.resizeable;
-       }
-       
-       var width  = screen.width;
-       var height = screen.height;
-
-       var x = ( width / 2 ) - ( popObj.width / 2 );
-       var y = ( height / 2 ) - ( popObj.height / 2 );
-
-       var opt = "left=" + x +
-                 ",top=" + y +
-                 ",width=" + popObj.width +
-                 ",height=" + popObj.height +
-                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
-                 ",scrollbars=" + scrollbars +
-                 ",resizable=" + resizeable;
-       var pop = window.open(popObj.url, popObj.target, opt);
-       if(pop) {
-               pop.focus();
-       }
-}
-
-$.SD.isValidDate = function(val) {
-       if(val.length != 8) {
-               return false;
-       }
-       
-       var yyyy = Number(val.substring(0, 4)); 
-       var mm   = Number(val.substring(4, 6));
-       var dd   = Number(val.substring(6));
-       
-       if( mm < 1 || mm > 12 ) {
-               return false;
-       }
-       
-       var endDay  = 0;
-       
-       if( mm == 2 ) {
-               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
-                       endDay = 29;
-               } else {
-                       endDay = 28;
-               }
-               
-       } else {
-               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
-               endDay = endDays[mm - 1];
-       }
-       
-       if( dd <= 0 || dd > endDay ) {
-               return false;
-       } 
-       
-       return true;
-       
-}
-
-$.SD.boardDownload = function(option, func) {
-       var jsonData = {
-               url: "/board/ajaxDwnldProc.do",
-               async: false,
-               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
-                               //location.href = $(obj).attr("href");
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.commonDownload = function(fileName, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDwnldProc.do",
-               async: false,
-               data: {fileName: fileName, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               location.href = fileFullPath;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(target == 'new'){
-                                       window.open(fileFullPath, '');
-                               }else{
-                                       location.href = fileFullPath;
-                               }
-                               
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonAllShareClickCountProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonClickCount = function(categoryName, categoryId) {
-       var jsonData = {
-               url: "/common/ajaxCommonClickCountProc.do",
-               data: {categoryName: categoryName, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.getByteLen = function(str) {
-       var resultSize = 0;
-       if(str == null){
-               return 0;
-       }
-       for(var i=0; i<str.length; i++){
-         var c = escape(str.charAt(i));
-         if(c.length == 1){
-                 resultSize ++;
-         }     else if(c.indexOf("%u") != -1) {
-                 resultSize += 2;
-         }     else if(c.indexOf("%") != -1) {
-                 resultSize += c.length/3;
-         }
-       }
-       return resultSize;
-}
-
-$.SD.cutByte = function(str, limit) {
-       var tempStr = new String(str);
-       var len = 0;
-       for ( var i = 0; i < str.length; i++) {
-               var c = escape(str.charAt(i));
-               if (c.length == 1)
-                       len++;
-               else if (c.indexOf("%u") != -1)
-                       len += 2;
-               else if (c.indexOf("%") != -1)
-                       len += c.length / 3;
-               if (len > limit) {
-                       tempStr = tempStr.substring(0, i);
-                       break;
-               }
-       }
-       return tempStr;
-}
-
-$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
-
-/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
-
-/** 
- * Method pagination 
- * */
-$.fn.frontPagination = function (pageInfo, func) {
-       var info = {
-                        prev : 1
-                       ,first : 1
-                       ,begin : pageInfo.begin - 0
-                       ,current : pageInfo.current - 0
-                       ,end : pageInfo.end - 0
-                       ,last : pageInfo.last - 0
-                       ,next : 1
-               },
-               target  = this, 
-               page    = $('<span class="page"></span>'),
-               prev    = "", 
-               next    = "", 
-               i               = 0, 
-               n               = 0;
-
-       info.begin       = info.begin < 1 ? 1 : info.begin;
-       info.current = info.current < 1 ? 1 : info.current;
-       info.end         = info.end < 1 ? 1 : info.end;
-       info.last        = info.last < 1 ? 1 : info.last;
-
-       info.prev = info.current - 1;
-       info.next = info.current + 1;
-
-       target.addClass("pageNumber");
-       target.addClass("mt20");
-       target.children().remove();
-
-       if (info.first < info.begin) {
-               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.first);
-               }));
-       }
-
-       if (info.prev >= info.first) {
-               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.prev);
-               }));
-       }
-
-       i = info.begin;
-       n = info.end;
-       for(; i <= n; i++) {
-               if (i === info.current) {
-                       page.append('<strong>'+i+'</strong>');
-               } else {
-                       (function(index){
-                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
-                                       e.preventDefault();
-                                       func(index);
-                               }));
-                       })(i);
-               }
-       }
-
-       target.append(page);
-
-       if (info.next <= info.last) {
-               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.next);
-               }));
-       }
-       
-       if (info.last > info.end) {
-               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.last);
-               }));
-       }       
-};
-
-/**
- *  Method : popup Show Hide 
- */
-$.fn.popupShow = function(options) {
-       var opts = $.extend({}, $.fn.popupShow.defaults, options);
-       
-       if($("body div#" + opts.maskId).size() == 0) {
-               $("body").append("<div id='" + opts.maskId + "'></div>");
-               $("#" + opts.maskId).css({
-                       "position" : "absolute",
-                       "left"     : "0",
-                       "top"      : "0",
-                       "z-index"  : "9000",
-                       "background-color" : "#000",
-                       "display"  : "none"
-               });
-       }
-       
-       var mask_layer  = $("#" + opts.maskId);
-       var popup_layer = $(this);
-       
-       popup_layer.css("z-index", "9999");
-       
-       var maskHeight = $(document).height();
-       var maskWidth = $(window).width();
-       
-       mask_layer.css({'width':maskWidth,'height':maskHeight});
-       
-       mask_layer.fadeIn(opts.fadeSec);
-       mask_layer.fadeTo(opts.speed, opts.fadeLow);
-       
-       var winH = $(window).height();
-       var winW = $(window).width();
-       
-       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-       
-       popup_layer.fadeIn(opts.fadeSec);
-       
-       var init_num = 0;
-       
-       if(init_num == 0) {
-               mask_layer.click(function() {
-                       $(this).hide();
-                       popup_layer.hide();
-               });
-               
-               
-               $("#" + opts.closeId).click( function(e) {
-                       e.preventDefault();
-                       popup_layer.popupHidden(opts.maskId);
-               });
-               
-               
-               $(window).resize( function() {
-                       var maskHeight = $(document).height();
-                       var maskWidth  = $(window).width();
-                       var winH       = $(window).height();
-                       var winW       = $(window).width();
-                       
-                       mask_layer.css({'width':maskWidth,'height':maskHeight});
-                       
-                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-               });
-               
-               init_num++;
-       }
-};
-
-$.fn.popupHidden = function(maskId) {
-       var id = "#";
-       
-       if(maskId) {
-               id = id + maskId;
-       } else {
-               id = id + $.fn.popupShow.defaults.maskId; 
-       }
-       
-       $(id).hide();
-       $(this).hide();
-};
-
-
-$.fn.popupShow.defaults = {
-       speed : "slow",
-       fadeLow : 0.8,
-       fadeSec : 100,
-       maskId  : "mask",
-       popupId : "layer-pop",
-       closeId : "layer-pop-close"
-};
-
-/**
- *  Method : validate File Ext
- */
-$.fn.isNotValidateFileExt = function(imgExts) {
-       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
-       var that = this;
-       var target = null;
-
-       that.each(function (i, item) {
-               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
-               if (filePath != "") {
-                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
-                       if (!imgExts[fileExt]) {
-                               target = item;
-                               return false;
-                       }
-               }
-       });
-
-       return target;
-}      
-
-/**
- *  Method : validate SD20 Password
- */
-$.validator.addMethod("isSD20Pwd", function(value, element) {
-       return this.optional(element) 
-              || $.SD.isSD20Pwd(value);
-}, "비밀번호를 다시 입력해 주세요.");
-
-$.SD.alterParent = function(options, event) {
-    var label = $(this).data('label');
-    
-    /*
-    if (event && event.type === 'focusin') {
-      label.hide();
-    } else if (event && event.type === 'focusout') {
-      label.css('opacity', options.placeholderOpacity);
-    }
-    */
-    
-    if (event && event.type !== 'keydown') {
-      toggleLabel(this, label);
-    } else {
-      // Use timeout to catch val() just after the key is pressed
-      // Using keyup is too slow.   
-      (function(input) {
-        setTimeout(function() {
-          toggleLabel(input, label);
-        }, 0);
-      })(this);
-    }
-    
-    if (event && event.type === 'focusin') {
-       label.hide();
-    }
-  };
-  
-  var toggleLabel = function(input, label) {
-    if ($(input).val()) {
-      label.hide();
-    } else {
-      label.show();
-    }
-  };
-
-  $.fn.stickyPlaceholders = function(options) {
-    var defaults = {
-      wrapperClass: 'sticky-placeholder-wrapper',
-      wrapperDisplay: 'block',
-      labelClass: 'sticky-placeholder-label',
-      placeholderAttr: 'placeholder',
-      dataAttr: 'data-sticky-placeholder',
-      placeholderColor: '#000',
-      placeholderOpacity: 0.5,
-      placeholderFocusOpacity: 0.25
-    };
-    options = $.extend(defaults, options);
-
-    return this.each(function() {
-      var input       = $(this),
-          placeholder = input.attr(options.placeholderAttr),
-          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
-          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
-          labelStyle;
-
-      // store a reference to each input's label
-      input.data('label', label);
-
-      // remove the placeholder attribute to avoid conflcits
-      input.removeAttr('placeholder');
-      
-      // If the dataAttr is set and it's not equal to the placeholderAttr
-      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
-        input.attr('data-sticky-placeholder', placeholder);
-      }
-
-      labelStyle = {
-        'color': options.placeholderColor,
-        'cursor': 'text',
-        'font-family': input.css('font-family'),
-        'font-weight': input.css('font-weight'),
-        'font-size': input.css('font-size'),
-        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
-        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
-        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
-        'opacity': options.placeholderOpacity,
-        'padding-left': input.css('padding-left'),
-        'padding-top': input.css('padding-top'),
-        'position': 'absolute',
-        'text-transform': input.css('text-transform'),
-        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
-      };
-      label.css(labelStyle);
-      
-      // hide the placeholder if the input already has a value
-      if (input.val()) {
-        label.hide();
-      }
-
-      $(this).bind('keydown input focusin focusout', function(event) {
-        $.SD.alterParent.call(this, options, event);
-      });
-        
-      // prevent click/dblclick from selecting the label text
-      label.bind('mousedown', function(e) {
-        e.preventDefault();
-      });
-      
-      // call alterParent initially without an event to set up the wrapper elements
-      $.SD.alterParent.call(this, options);
-    });
-  };
- 
-$.SD.setInputFileKeyEvent = function(file_id, after_id) {
-       $("#" + file_id).on("keydown", function(e) {
-               var that = $(this);
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.which === 9) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + after_id).focus();
-                       }, 1);
-               }
-       });
-       
-       $("#" + after_id).on("keydown", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + file_id).focus();
-                       }, 1);
-               }
-       });
-}  
-
-$.SD.closeWP = function() {
-       var Browser = navigator.appName;
-       var indexB = Browser.indexOf('Explorer');
-       if (indexB > 0) {
-           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
-           var Version = navigator.userAgent.substring(indexV, indexV + 1);
-           window.opener.focus();
-           if (Version >= 7) {
-               window.open('', '_self', '');
-               window.close();
-           }
-           else if (Version == 6) {
-               window.opener = null;
-               window.close();
-           }
-           else {
-               window.opener = '';
-               window.close();
-           }
-       }
-       else {
-           window.close();
-       }
-}
-
-$.SD.profileFacebook = function() {
-       location.replace("http://facebook.com/profile.php");
-}
-
-/* ------------------------------ END --------------------------------------- */
-window.$SD = $.SD;
-
-})(jQuery);
-
-
-$(document).ready(function(){
-//document rady Start #########################################
-
-// Top menu action Start
-var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
-var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
-var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
-var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
-var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
-var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
-var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
-var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
-var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
-var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
-
-$("#wrapper").on('click', 'a', function(e) {
-        switch($(this).attr('id')) {
-        case 'changeEn': onClickChangeEn(e);  break;
-        case 'changeZh': onClickChangeZh(e); break;
-        case 'changeKo': onClickChangeKo(e); break;
-        case 'signOut': onClickSignOut(e); break;
-        case 'signUp': onClickSignUp(e); break;
-        case 'signIn': onClickSignIn(e); break;
-        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
-        case 'signOff': onClickSignOff(e); break;
-        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
-        case 'deleteAccount' : onClickDeleteAccount(e); break;
-        }
-});
- 
-//Top menu action End
-
-
-$("#sendFacebook, #sendTwitter").click(function(e) {
-       e.preventDefault();
-       var $this = $(this);
-       
-       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
-               var sns = $this.attr("id").substring(4).toLowerCase();
-               switch(sns) {
-               case "facebook" :
-                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
-                       $("div.content img").each(function() {
-                               var that = $(this);
-                               if(that.width() > 200 && that.height() > 200) {
-                                       imgUrl = that.attr("src");
-                                       return false;
-                               }
-                       });
-                       
-                       var data = {
-                               app_id : $("#sd_appId").text(),
-                               link : copyUrl,
-                               picture : imgUrl,
-                               name : $("title").text(),
-                               caption : "developer.samsung.com",
-                               description : $("div.content p").eq(0).text(),
-                               redirectUri : "http://" + location.host + "/board/sns.do"
-                       };
-                       var url = "https://www.facebook.com/dialog/feed?" ;
-                       url += "app_id=" + data.app_id + "&" ;
-                       url += "link=" + data.link + "&" ;
-                       url += "picture=" + data.picture + "&" ;
-                       url += "name=" + encodeURIComponent(data.name) + "&" ;
-                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
-                       url += "description=" + encodeURIComponent(data.description) + "&" ;
-                       url += "redirect_uri=" + data.redirectUri ;
-                       sendSNS(sns, url, 850, 600);
-                       break;
-               case "twitter" :
-                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
-                       break;
-               }
-       }
-       
-       function sendSNS(sns, url, iWidth, iHeight) {
-               var popObj = { url : url
-                                    , width : iWidth
-                                    , height: iHeight
-                                    , target: sns
-                                    , scrollbars: "yes"
-                                    , resizeable: "yes"};
-       
-               $SD.popupCenter(popObj);
-       }
-})
- 
-//document rady End #########################################
- });
-
-;(function(){
-       window.deviceImageError = function(el) {
-               var noImage = noImage || '/images/common/device_details_noimage.gif';
-               if (el.src === noImage) 
-                       return;
-               el.src = noImage;
-       };
-})();
-
-function commonDownload(fileName, categoryId){
-       if (fileName == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!!!")
-               return;
-       }else{
-               $SD.commonDownload(fileName, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLog(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLogTarget(fileFullPath, categoryId, target){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
-               });
-       }
-}
-
-function commonAllShareClickCount(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-/*
-function layer_view(id){
-
-       var $layer = $('#'+id);
-       var $down  = $('.license-layer').find('a#down');
-
-       $layer.show();
-       $layer.find('.close, #down').click(function(){
-               $layer.hide();
-       });
-
-       function countChecked() {
-               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
-       }
-
-       $(":checkbox").click(countChecked);
-}
-*/
+// /////////////////////////////////////////////////////////////////////////////////////////////////\r
+// # com.samsung.devloper common core javascript #\r
+// # Create Date : 2012.07.10. \r
+// # Create By : kangki\r
+;(function ($) {\r
+/**\r
+ * Samsung Developer Common JavaScript\r
+ */\r
+$.SD = {};\r
+\r
+/*\r
+ * Method Common\r
+ */\r
+$.SD.message = function (msg) { if (msg) alert(msg); };\r
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }\r
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };\r
+$.SD.typeTest = function (data, datatype) {\r
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));\r
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));\r
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));\r
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));\r
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));\r
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));\r
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));\r
+\r
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));\r
+};\r
+\r
+$.SD.toDate = function (date, seperator) {\r
+       if (!seperator) seperator = '-';\r
+\r
+       date = $.SD.replaceAll(date, seperator, '');\r
+       date = $.SD.replaceAll(date, '/', '');\r
+\r
+       if (date.length !== 8) return null;\r
+       \r
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));\r
+\r
+       if (date.valueOf().toString() === 'NaN') return null;\r
+\r
+       return date;\r
+};\r
+\r
+$.SD.toDateString = function (date, seperator) {\r
+       if (!seperator) seperator = '/';\r
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);\r
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";\r
+\r
+       var str, dateString = date.getFullYear();\r
+\r
+       str             = "0" + (date.getMonth()+1);\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+       str             = "0" + date.getDate();\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+\r
+       return dateString;\r
+};\r
+\r
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };\r
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };\r
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };\r
+\r
+$.SD.insertComma = function(num) {\r
+       var tnum    = num + "";\r
+       var tarr    = new Array();\r
+       var dot     = "";\r
+       var idxDot  = tnum.indexOf(".");\r
+       var sign    = "";\r
+       var tinx    = 0;\r
+       var fnum    = tnum;\r
+        \r
+       \r
+       if(idxDot > -1) {\r
+               fnum = tnum.substring(0, idxDot);\r
+               dot  = tnum.substring(idxDot);\r
+               tnum = fnum;\r
+       } \r
+       \r
+       if(tnum.indexOf("-") > -1) {\r
+               fnum = tnum.substring(1);\r
+               sign = tnum.substring(0, 1);\r
+       }\r
+       \r
+       for(var inx = fnum.length; inx > 0; ) {\r
+               tarr[tinx++] = fnum.substring(inx, inx - 3);\r
+               inx = inx - 3;\r
+       }\r
+       \r
+       return sign + tarr.reverse().join(",") + dot;\r
+}\r
+\r
+/**\r
+ * Method Ajax\r
+ */\r
+$.SD.ajax = {\r
+       doAjax : function (json) {\r
+               var param = {\r
+                       async : json.async,\r
+                       type : json.type,\r
+                       dataType : json.dataType,\r
+                       cache: json.cache,\r
+                       timeout : json.timeout,\r
+                       success : json.success,\r
+                       error : json.error\r
+               };\r
+\r
+               if (param.dataType === 'jsonp') {\r
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';\r
+               } else {\r
+                       param.url = json.url;\r
+                       param.data = json.data;\r
+               }\r
+               $.ajax(param);\r
+       },\r
+       \r
+       get : function (json) {\r
+               $.SD.ajax.doAjax({ \r
+                       url:json.url,\r
+                       cache:json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'get', \r
+                       dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       },\r
+       \r
+       post : function (json) {\r
+               $.SD.ajax.doAjax({ url:json.url,\r
+                       cache: json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'post', dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       }\r
+};\r
+\r
+/**\r
+ * SD20 password check\r
+ */\r
+\r
+$.SD.isSD20Pwd = function(pwd) {\r
+       \r
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/[0-9]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       return true;\r
+};\r
+\r
+$.SD.popupCenter = function(popObj) {\r
+       var scrollbars  = "no";\r
+       var resizeable  = "no";\r
+       \r
+       if(popObj.scrollbars) {\r
+               scrollbars = popObj.scrollbars; \r
+       }\r
+       \r
+       if(popObj.resizeable) {\r
+               resizeable = popObj.resizeable;\r
+       }\r
+       \r
+       var width  = screen.width;\r
+       var height = screen.height;\r
+\r
+       var x = ( width / 2 ) - ( popObj.width / 2 );\r
+       var y = ( height / 2 ) - ( popObj.height / 2 );\r
+\r
+       var opt = "left=" + x +\r
+                 ",top=" + y +\r
+                 ",width=" + popObj.width +\r
+                 ",height=" + popObj.height +\r
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +\r
+                 ",scrollbars=" + scrollbars +\r
+                 ",resizable=" + resizeable;\r
+       var pop = window.open(popObj.url, popObj.target, opt);\r
+       if(pop) {\r
+               pop.focus();\r
+       }\r
+}\r
+\r
+$.SD.isValidDate = function(val) {\r
+       if(val.length != 8) {\r
+               return false;\r
+       }\r
+       \r
+       var yyyy = Number(val.substring(0, 4)); \r
+       var mm   = Number(val.substring(4, 6));\r
+       var dd   = Number(val.substring(6));\r
+       \r
+       if( mm < 1 || mm > 12 ) {\r
+               return false;\r
+       }\r
+       \r
+       var endDay  = 0;\r
+       \r
+       if( mm == 2 ) {\r
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {\r
+                       endDay = 29;\r
+               } else {\r
+                       endDay = 28;\r
+               }\r
+               \r
+       } else {\r
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);\r
+               endDay = endDays[mm - 1];\r
+       }\r
+       \r
+       if( dd <= 0 || dd > endDay ) {\r
+               return false;\r
+       } \r
+       \r
+       return true;\r
+       \r
+}\r
+\r
+$.SD.boardDownload = function(option, func) {\r
+       var jsonData = {\r
+               url: "/board/ajaxDwnldProc.do",\r
+               async: false,\r
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;\r
+                               //location.href = $(obj).attr("href");\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.commonDownload = function(fileName, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDwnldProc.do",\r
+               async: false,\r
+               data: {fileName: fileName, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               location.href = fileFullPath;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(target == 'new'){\r
+                                       window.open(fileFullPath, '');\r
+                               }else{\r
+                                       location.href = fileFullPath;\r
+                               }\r
+                               \r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonAllShareClickCountProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonClickCount = function(categoryName, categoryId) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonClickCountProc.do",\r
+               data: {categoryName: categoryName, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.getByteLen = function(str) {\r
+       var resultSize = 0;\r
+       if(str == null){\r
+               return 0;\r
+       }\r
+       for(var i=0; i<str.length; i++){\r
+         var c = escape(str.charAt(i));\r
+         if(c.length == 1){\r
+                 resultSize ++;\r
+         }     else if(c.indexOf("%u") != -1) {\r
+                 resultSize += 2;\r
+         }     else if(c.indexOf("%") != -1) {\r
+                 resultSize += c.length/3;\r
+         }\r
+       }\r
+       return resultSize;\r
+}\r
+\r
+$.SD.cutByte = function(str, limit) {\r
+       var tempStr = new String(str);\r
+       var len = 0;\r
+       for ( var i = 0; i < str.length; i++) {\r
+               var c = escape(str.charAt(i));\r
+               if (c.length == 1)\r
+                       len++;\r
+               else if (c.indexOf("%u") != -1)\r
+                       len += 2;\r
+               else if (c.indexOf("%") != -1)\r
+                       len += c.length / 3;\r
+               if (len > limit) {\r
+                       tempStr = tempStr.substring(0, i);\r
+                       break;\r
+               }\r
+       }\r
+       return tempStr;\r
+}\r
+\r
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};\r
+\r
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */\r
+\r
+/** \r
+ * Method pagination \r
+ * */\r
+$.fn.frontPagination = function (pageInfo, func) {\r
+       var info = {\r
+                        prev : 1\r
+                       ,first : 1\r
+                       ,begin : pageInfo.begin - 0\r
+                       ,current : pageInfo.current - 0\r
+                       ,end : pageInfo.end - 0\r
+                       ,last : pageInfo.last - 0\r
+                       ,next : 1\r
+               },\r
+               target  = this, \r
+               page    = $('<span class="page"></span>'),\r
+               prev    = "", \r
+               next    = "", \r
+               i               = 0, \r
+               n               = 0;\r
+\r
+       info.begin       = info.begin < 1 ? 1 : info.begin;\r
+       info.current = info.current < 1 ? 1 : info.current;\r
+       info.end         = info.end < 1 ? 1 : info.end;\r
+       info.last        = info.last < 1 ? 1 : info.last;\r
+\r
+       info.prev = info.current - 1;\r
+       info.next = info.current + 1;\r
+\r
+       target.addClass("pageNumber");\r
+       target.addClass("mt20");\r
+       target.children().remove();\r
+\r
+       if (info.first < info.begin) {\r
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.first);\r
+               }));\r
+       }\r
+\r
+       if (info.prev >= info.first) {\r
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.prev);\r
+               }));\r
+       }\r
+\r
+       i = info.begin;\r
+       n = info.end;\r
+       for(; i <= n; i++) {\r
+               if (i === info.current) {\r
+                       page.append('<strong>'+i+'</strong>');\r
+               } else {\r
+                       (function(index){\r
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){\r
+                                       e.preventDefault();\r
+                                       func(index);\r
+                               }));\r
+                       })(i);\r
+               }\r
+       }\r
+\r
+       target.append(page);\r
+\r
+       if (info.next <= info.last) {\r
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.next);\r
+               }));\r
+       }\r
+       \r
+       if (info.last > info.end) {\r
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.last);\r
+               }));\r
+       }       \r
+};\r
+\r
+/**\r
+ *  Method : popup Show Hide \r
+ */\r
+$.fn.popupShow = function(options) {\r
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);\r
+       \r
+       if($("body div#" + opts.maskId).size() == 0) {\r
+               $("body").append("<div id='" + opts.maskId + "'></div>");\r
+               $("#" + opts.maskId).css({\r
+                       "position" : "absolute",\r
+                       "left"     : "0",\r
+                       "top"      : "0",\r
+                       "z-index"  : "9000",\r
+                       "background-color" : "#000",\r
+                       "display"  : "none"\r
+               });\r
+       }\r
+       \r
+       var mask_layer  = $("#" + opts.maskId);\r
+       var popup_layer = $(this);\r
+       \r
+       popup_layer.css("z-index", "9999");\r
+       \r
+       var maskHeight = $(document).height();\r
+       var maskWidth = $(window).width();\r
+       \r
+       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+       \r
+       mask_layer.fadeIn(opts.fadeSec);\r
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);\r
+       \r
+       var winH = $(window).height();\r
+       var winW = $(window).width();\r
+       \r
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+       \r
+       popup_layer.fadeIn(opts.fadeSec);\r
+       \r
+       var init_num = 0;\r
+       \r
+       if(init_num == 0) {\r
+               mask_layer.click(function() {\r
+                       $(this).hide();\r
+                       popup_layer.hide();\r
+               });\r
+               \r
+               \r
+               $("#" + opts.closeId).click( function(e) {\r
+                       e.preventDefault();\r
+                       popup_layer.popupHidden(opts.maskId);\r
+               });\r
+               \r
+               \r
+               $(window).resize( function() {\r
+                       var maskHeight = $(document).height();\r
+                       var maskWidth  = $(window).width();\r
+                       var winH       = $(window).height();\r
+                       var winW       = $(window).width();\r
+                       \r
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+                       \r
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+               });\r
+               \r
+               init_num++;\r
+       }\r
+};\r
+\r
+$.fn.popupHidden = function(maskId) {\r
+       var id = "#";\r
+       \r
+       if(maskId) {\r
+               id = id + maskId;\r
+       } else {\r
+               id = id + $.fn.popupShow.defaults.maskId; \r
+       }\r
+       \r
+       $(id).hide();\r
+       $(this).hide();\r
+};\r
+\r
+\r
+$.fn.popupShow.defaults = {\r
+       speed : "slow",\r
+       fadeLow : 0.8,\r
+       fadeSec : 100,\r
+       maskId  : "mask",\r
+       popupId : "layer-pop",\r
+       closeId : "layer-pop-close"\r
+};\r
+\r
+/**\r
+ *  Method : validate File Ext\r
+ */\r
+$.fn.isNotValidateFileExt = function(imgExts) {\r
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};\r
+       var that = this;\r
+       var target = null;\r
+\r
+       that.each(function (i, item) {\r
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';\r
+               if (filePath != "") {\r
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();\r
+                       if (!imgExts[fileExt]) {\r
+                               target = item;\r
+                               return false;\r
+                       }\r
+               }\r
+       });\r
+\r
+       return target;\r
+}      \r
+\r
+/**\r
+ *  Method : validate SD20 Password\r
+ */\r
+$.validator.addMethod("isSD20Pwd", function(value, element) {\r
+       return this.optional(element) \r
+              || $.SD.isSD20Pwd(value);\r
+}, "비밀번호를 다시 입력해 주세요.");\r
+\r
+$.SD.alterParent = function(options, event) {\r
+    var label = $(this).data('label');\r
+    \r
+    /*\r
+    if (event && event.type === 'focusin') {\r
+      label.hide();\r
+    } else if (event && event.type === 'focusout') {\r
+      label.css('opacity', options.placeholderOpacity);\r
+    }\r
+    */\r
+    \r
+    if (event && event.type !== 'keydown') {\r
+      toggleLabel(this, label);\r
+    } else {\r
+      // Use timeout to catch val() just after the key is pressed\r
+      // Using keyup is too slow.   \r
+      (function(input) {\r
+        setTimeout(function() {\r
+          toggleLabel(input, label);\r
+        }, 0);\r
+      })(this);\r
+    }\r
+    \r
+    if (event && event.type === 'focusin') {\r
+       label.hide();\r
+    }\r
+  };\r
+  \r
+  var toggleLabel = function(input, label) {\r
+    if ($(input).val()) {\r
+      label.hide();\r
+    } else {\r
+      label.show();\r
+    }\r
+  };\r
+\r
+  $.fn.stickyPlaceholders = function(options) {\r
+    var defaults = {\r
+      wrapperClass: 'sticky-placeholder-wrapper',\r
+      wrapperDisplay: 'block',\r
+      labelClass: 'sticky-placeholder-label',\r
+      placeholderAttr: 'placeholder',\r
+      dataAttr: 'data-sticky-placeholder',\r
+      placeholderColor: '#000',\r
+      placeholderOpacity: 0.5,\r
+      placeholderFocusOpacity: 0.25\r
+    };\r
+    options = $.extend(defaults, options);\r
+\r
+    return this.each(function() {\r
+      var input       = $(this),\r
+          placeholder = input.attr(options.placeholderAttr),\r
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),\r
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),\r
+          labelStyle;\r
+\r
+      // store a reference to each input's label\r
+      input.data('label', label);\r
+\r
+      // remove the placeholder attribute to avoid conflcits\r
+      input.removeAttr('placeholder');\r
+      \r
+      // If the dataAttr is set and it's not equal to the placeholderAttr\r
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {\r
+        input.attr('data-sticky-placeholder', placeholder);\r
+      }\r
+\r
+      labelStyle = {\r
+        'color': options.placeholderColor,\r
+        'cursor': 'text',\r
+        'font-family': input.css('font-family'),\r
+        'font-weight': input.css('font-weight'),\r
+        'font-size': input.css('font-size'),\r
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),\r
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),\r
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671\r
+        'opacity': options.placeholderOpacity,\r
+        'padding-left': input.css('padding-left'),\r
+        'padding-top': input.css('padding-top'),\r
+        'position': 'absolute',\r
+        'text-transform': input.css('text-transform'),\r
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)\r
+      };\r
+      label.css(labelStyle);\r
+      \r
+      // hide the placeholder if the input already has a value\r
+      if (input.val()) {\r
+        label.hide();\r
+      }\r
+\r
+      $(this).bind('keydown input focusin focusout', function(event) {\r
+        $.SD.alterParent.call(this, options, event);\r
+      });\r
+        \r
+      // prevent click/dblclick from selecting the label text\r
+      label.bind('mousedown', function(e) {\r
+        e.preventDefault();\r
+      });\r
+      \r
+      // call alterParent initially without an event to set up the wrapper elements\r
+      $.SD.alterParent.call(this, options);\r
+    });\r
+  };\r
+ \r
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {\r
+       $("#" + file_id).on("keydown", function(e) {\r
+               var that = $(this);\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.which === 9) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + after_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       $("#" + after_id).on("keydown", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + file_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+}  \r
+\r
+$.SD.closeWP = function() {\r
+       var Browser = navigator.appName;\r
+       var indexB = Browser.indexOf('Explorer');\r
+       if (indexB > 0) {\r
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;\r
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);\r
+           window.opener.focus();\r
+           if (Version >= 7) {\r
+               window.open('', '_self', '');\r
+               window.close();\r
+           }\r
+           else if (Version == 6) {\r
+               window.opener = null;\r
+               window.close();\r
+           }\r
+           else {\r
+               window.opener = '';\r
+               window.close();\r
+           }\r
+       }\r
+       else {\r
+           window.close();\r
+       }\r
+}\r
+\r
+$.SD.profileFacebook = function() {\r
+       location.replace("http://facebook.com/profile.php");\r
+}\r
+\r
+/* ------------------------------ END --------------------------------------- */\r
+window.$SD = $.SD;\r
+\r
+})(jQuery);\r
+\r
+\r
+$(document).ready(function(){\r
+//document rady Start #########################################\r
+\r
+// Top menu action Start\r
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };\r
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };\r
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };\r
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };\r
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };\r
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };\r
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };\r
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; \r
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };\r
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };\r
+\r
+$("#wrapper").on('click', 'a', function(e) {\r
+        switch($(this).attr('id')) {\r
+        case 'changeEn': onClickChangeEn(e);  break;\r
+        case 'changeZh': onClickChangeZh(e); break;\r
+        case 'changeKo': onClickChangeKo(e); break;\r
+        case 'signOut': onClickSignOut(e); break;\r
+        case 'signUp': onClickSignUp(e); break;\r
+        case 'signIn': onClickSignIn(e); break;\r
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;\r
+        case 'signOff': onClickSignOff(e); break;\r
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;\r
+        case 'deleteAccount' : onClickDeleteAccount(e); break;\r
+        }\r
+});\r
+ \r
+//Top menu action End\r
+\r
+\r
+$("#sendFacebook, #sendTwitter").click(function(e) {\r
+       e.preventDefault();\r
+       var $this = $(this);\r
+       \r
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {\r
+               var sns = $this.attr("id").substring(4).toLowerCase();\r
+               switch(sns) {\r
+               case "facebook" :\r
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";\r
+                       $("div.content img").each(function() {\r
+                               var that = $(this);\r
+                               if(that.width() > 200 && that.height() > 200) {\r
+                                       imgUrl = that.attr("src");\r
+                                       return false;\r
+                               }\r
+                       });\r
+                       \r
+                       var data = {\r
+                               app_id : $("#sd_appId").text(),\r
+                               link : copyUrl,\r
+                               picture : imgUrl,\r
+                               name : $("title").text(),\r
+                               caption : "developer.samsung.com",\r
+                               description : $("div.content p").eq(0).text(),\r
+                               redirectUri : "http://" + location.host + "/board/sns.do"\r
+                       };\r
+                       var url = "https://www.facebook.com/dialog/feed?" ;\r
+                       url += "app_id=" + data.app_id + "&" ;\r
+                       url += "link=" + data.link + "&" ;\r
+                       url += "picture=" + data.picture + "&" ;\r
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;\r
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;\r
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;\r
+                       url += "redirect_uri=" + data.redirectUri ;\r
+                       sendSNS(sns, url, 850, 600);\r
+                       break;\r
+               case "twitter" :\r
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);\r
+                       break;\r
+               }\r
+       }\r
+       \r
+       function sendSNS(sns, url, iWidth, iHeight) {\r
+               var popObj = { url : url\r
+                                    , width : iWidth\r
+                                    , height: iHeight\r
+                                    , target: sns\r
+                                    , scrollbars: "yes"\r
+                                    , resizeable: "yes"};\r
+       \r
+               $SD.popupCenter(popObj);\r
+       }\r
+})\r
+ \r
+//document rady End #########################################\r
+ });\r
+\r
+;(function(){\r
+       window.deviceImageError = function(el) {\r
+               var noImage = noImage || '/images/common/device_details_noimage.gif';\r
+               if (el.src === noImage) \r
+                       return;\r
+               el.src = noImage;\r
+       };\r
+})();\r
+\r
+function commonDownload(fileName, categoryId){\r
+       if (fileName == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownload(fileName, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLog(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLogTarget(fileFullPath, categoryId, target){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonAllShareClickCount(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+/*\r
+function layer_view(id){\r
+\r
+       var $layer = $('#'+id);\r
+       var $down  = $('.license-layer').find('a#down');\r
+\r
+       $layer.show();\r
+       $layer.find('.close, #down').click(function(){\r
+               $layer.hide();\r
+       });\r
+\r
+       function countChecked() {\r
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()\r
+       }\r
+\r
+       $(":checkbox").click(countChecked);\r
+}\r
+*/\r
diff --git a/org.tizen.gettingstarted/html/scripts/jquery.util.js b/org.tizen.gettingstarted/html/scripts/jquery.util.js
index 3fc3ad0..a8516b0 100644 (file)
--- a/org.tizen.gettingstarted/html/scripts/jquery.util.js
+++ b/org.tizen.gettingstarted/html/scripts/jquery.util.js
@@ -1,1441 +1,1441 @@
-/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
-(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
-
-
-/*! jQuery v1.7.1 jquery.com | jquery.org/license */
-(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
-f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
-{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
-
-/*
- * Metadata - jQuery plugin for parsing metadata from elements
- *
- * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- *
- * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
- *
- */
-
-/**
- * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
- * in the JSON will become a property of the element itself.
- *
- * There are three supported types of metadata storage:
- *
- *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
- *          
- *   class: Inside the class attribute, wrapped in curly braces: { }
- *   
- *   elem:  Inside a child element (e.g. a script tag). The
- *          name parameter indicates *which* element.
- *          
- * The metadata for an element is loaded the first time the element is accessed via jQuery.
- *
- * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
- * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
- * 
- * @name $.metadata.setType
- *
- * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("class")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from the class attribute
- * 
- * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("attr", "data")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a "data" attribute
- * 
- * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
- * @before $.metadata.setType("elem", "script")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a nested script element
- * 
- * @param String type The encoding type
- * @param String name The name of the attribute to be used to get metadata (optional)
- * @cat Plugins/Metadata
- * @descr Sets the type of encoding to be used when loading metadata for the first time
- * @type undefined
- * @see metadata()
- */
-
-(function($) {
-
-$.extend({
-       metadata : {
-               defaults : {
-                       type: 'class',
-                       name: 'metadata',
-                       cre: /({.*})/,
-                       single: 'metadata'
-               },
-               setType: function( type, name ){
-                       this.defaults.type = type;
-                       this.defaults.name = name;
-               },
-               get: function( elem, opts ){
-                       var settings = $.extend({},this.defaults,opts);
-                       // check for empty string in single property
-                       if ( !settings.single.length ) settings.single = 'metadata';
-                       
-                       var data = $.data(elem, settings.single);
-                       // returned cached data if it already exists
-                       if ( data ) return data;
-                       
-                       data = "{}";
-                       
-                       if ( settings.type == "class" ) {
-                               var m = settings.cre.exec( elem.className );
-                               if ( m )
-                                       data = m[1];
-                       } else if ( settings.type == "elem" ) {
-                               if( !elem.getElementsByTagName )
-                                       return undefined;
-                               var e = elem.getElementsByTagName(settings.name);
-                               if ( e.length )
-                                       data = $.trim(e[0].innerHTML);
-                       } else if ( elem.getAttribute != undefined ) {
-                               var attr = elem.getAttribute( settings.name );
-                               if ( attr )
-                                       data = attr;
-                       }
-                       
-                       if ( data.indexOf( '{' ) <0 )
-                       data = "{" + data + "}";
-                       
-                       data = eval("(" + data + ")");
-                       
-                       $.data( elem, settings.single, data );
-                       return data;
-               }
-       }
-});
-
-/**
- * Returns the metadata object for the first member of the jQuery object.
- *
- * @name metadata
- * @descr Returns element's metadata object
- * @param Object opts An object contianing settings to override the defaults
- * @type jQuery
- * @cat Plugins/Metadata
- */
-$.fn.metadata = function( opts ){
-       return $.metadata.get( this[0], opts );
-};
-
-})(jQuery);
-
-
-/**
- * jQuery Validation Plugin 1.9.0
-
- *
- * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- * http://docs.jquery.com/Plugins/Validation
- *
- * Copyright (c) 2006 - 2011 J철rn Zaefferer
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- */
-
-/**
- * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
- */
-
-(function($) {
-
-$.extend($.fn, {
-       // http://docs.jquery.com/Plugins/Validation/validate
-       validate: function( options ) {
-
-               // if nothing is selected, return nothing; can't chain anyway
-               if (!this.length) {
-                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
-                       return;
-               }
-
-               // check if a validator for this form was already created
-               var validator = $.data(this[0], 'validator');
-               if ( validator ) {
-                       return validator;
-               }
-
-               // Add novalidate tag if HTML5.
-               this.attr('novalidate', 'novalidate');
-
-               validator = new $.validator( options, this[0] );
-               $.data(this[0], 'validator', validator);
-
-               if ( validator.settings.onsubmit ) {
-
-                       var inputsAndButtons = this.find("input, button");
-
-                       // allow suppresing validation by adding a cancel class to the submit button
-                       inputsAndButtons.filter(".cancel").click(function () {
-                               validator.cancelSubmit = true;
-                       });
-
-                       // when a submitHandler is used, capture the submitting button
-                       if (validator.settings.submitHandler) {
-                               inputsAndButtons.filter(":submit").click(function () {
-                                       validator.submitButton = this;
-                               });
-                       }
-
-                       // validate the form on submit
-                       this.submit( function( event ) {
-                               if ( validator.settings.debug )
-                                       // prevent form submit to be able to see console output
-                                       event.preventDefault();
-
-                               function handle() {
-                                       if ( validator.settings.submitHandler ) {
-                                               if (validator.submitButton) {
-                                                       // insert a hidden input as a replacement for the missing submit button
-                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
-                                               }
-                                               validator.settings.submitHandler.call( validator, validator.currentForm );
-                                               if (validator.submitButton) {
-                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
-                                                       hidden.remove();
-                                               }
-                                               return false;
-                                       }
-                                       return true;
-                               }
-
-                               // prevent submit for invalid forms or custom submit handlers
-                               if ( validator.cancelSubmit ) {
-                                       validator.cancelSubmit = false;
-                                       return handle();
-                               }
-                               if ( validator.form() ) {
-                                       if ( validator.pendingRequest ) {
-                                               validator.formSubmitted = true;
-                                               return false;
-                                       }
-                                       return handle();
-                               } else {
-                                       validator.focusInvalid();
-                                       return false;
-                               }
-                       });
-               }
-
-               return validator;
-       },
-       // http://docs.jquery.com/Plugins/Validation/valid
-       valid: function() {
-        if ( $(this[0]).is('form')) {
-            return this.validate().form();
-        } else {
-            var valid = true;
-            var validator = $(this[0].form).validate();
-            this.each(function() {
-                               valid &= validator.element(this);
-            });
-            return valid;
-        }
-    },
-       // attributes: space seperated list of attributes to retrieve and remove
-       removeAttrs: function(attributes) {
-               var result = {},
-                       $element = this;
-               $.each(attributes.split(/\s/), function(index, value) {
-                       result[value] = $element.attr(value);
-                       $element.removeAttr(value);
-               });
-               return result;
-       },
-       // http://docs.jquery.com/Plugins/Validation/rules
-       rules: function(command, argument) {
-               var element = this[0];
-
-               if (command) {
-                       var settings = $.data(element.form, 'validator').settings;
-                       var staticRules = settings.rules;
-                       var existingRules = $.validator.staticRules(element);
-                       switch(command) {
-                       case "add":
-                               $.extend(existingRules, $.validator.normalizeRule(argument));
-                               staticRules[element.name] = existingRules;
-                               if (argument.messages)
-                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
-                               break;
-                       case "remove":
-                               if (!argument) {
-                                       delete staticRules[element.name];
-                                       return existingRules;
-                               }
-                               var filtered = {};
-                               $.each(argument.split(/\s/), function(index, method) {
-                                       filtered[method] = existingRules[method];
-                                       delete existingRules[method];
-                               });
-                               return filtered;
-                       }
-               }
-
-               var data = $.validator.normalizeRules(
-               $.extend(
-                       {},
-                       $.validator.metadataRules(element),
-                       $.validator.classRules(element),
-                       $.validator.attributeRules(element),
-                       $.validator.staticRules(element)
-               ), element);
-
-               // make sure required is at front
-               if (data.required) {
-                       var param = data.required;
-                       delete data.required;
-                       data = $.extend({required: param}, data);
-               }
-
-               return data;
-       }
-});
-
-// Custom selectors
-$.extend($.expr[":"], {
-       // http://docs.jquery.com/Plugins/Validation/blank
-       blank: function(a) {return !$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/filled
-       filled: function(a) {return !!$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/unchecked
-       unchecked: function(a) {return !a.checked;}
-});
-
-// constructor for validator
-$.validator = function( options, form ) {
-       this.settings = $.extend( true, {}, $.validator.defaults, options );
-       this.currentForm = form;
-       this.init();
-};
-
-$.validator.format = function(source, params) {
-       if ( arguments.length == 1 )
-               return function() {
-                       var args = $.makeArray(arguments);
-                       args.unshift(source);
-                       return $.validator.format.apply( this, args );
-               };
-       if ( arguments.length > 2 && params.constructor != Array  ) {
-               params = $.makeArray(arguments).slice(1);
-       }
-       if ( params.constructor != Array ) {
-               params = [ params ];
-       }
-       $.each(params, function(i, n) {
-               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
-       });
-       return source;
-};
-
-$.extend($.validator, {
-
-       defaults: {
-               messages: {},
-               groups: {},
-               rules: {},
-               errorClass: "error",
-               validClass: "valid",
-               errorElement: "label",
-               focusInvalid: true,
-               errorContainer: $( [] ),
-               errorLabelContainer: $( [] ),
-               onsubmit: true,
-               ignore: ":hidden",
-               ignoreTitle: false,
-               onfocusin: function(element, event) {
-                       this.lastActive = element;
-
-                       // hide error label and remove error class on focus if enabled
-                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
-                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
-                               this.addWrapper(this.errorsFor(element)).hide();
-                       }
-               },
-               onfocusout: function(element, event) {
-                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
-                               this.element(element);
-                       }
-               },
-               onkeyup: function(element, event) {
-                       if ( element.name in this.submitted || element == this.lastElement ) {
-                               this.element(element);
-                       }
-               },
-               onclick: function(element, event) {
-                       // click on selects, radiobuttons and checkboxes
-                       if ( element.name in this.submitted )
-                               this.element(element);
-                       // or option elements, check parent select in that case
-                       else if (element.parentNode.name in this.submitted)
-                               this.element(element.parentNode);
-               },
-               highlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
-                       } else {
-                               $(element).addClass(errorClass).removeClass(validClass);
-                       }
-               },
-               unhighlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
-                       } else {
-                               $(element).removeClass(errorClass).addClass(validClass);
-                       }
-               }
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
-       setDefaults: function(settings) {
-               $.extend( $.validator.defaults, settings );
-       },
-
-       messages: {
-               required: "This field is required.",
-               remote: "Please fix this field.",
-               email: "Please enter a valid email address.",
-               url: "Please enter a valid URL.",
-               date: "Please enter a valid date.",
-               dateISO: "Please enter a valid date (ISO).",
-               number: "Please enter a valid number.",
-               digits: "Please enter only digits.",
-               creditcard: "Please enter a valid credit card number.",
-               equalTo: "Please enter the same value again.",
-               accept: "Please enter a value with a valid extension.",
-               maxlength: $.validator.format("Please enter no more than {0} characters."),
-               minlength: $.validator.format("Please enter at least {0} characters."),
-               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
-               range: $.validator.format("Please enter a value between {0} and {1}."),
-               max: $.validator.format("Please enter a value less than or equal to {0}."),
-               min: $.validator.format("Please enter a value greater than or equal to {0}.")
-       },
-
-       autoCreateRanges: false,
-
-       prototype: {
-
-               init: function() {
-                       this.labelContainer = $(this.settings.errorLabelContainer);
-                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
-                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
-                       this.submitted = {};
-                       this.valueCache = {};
-                       this.pendingRequest = 0;
-                       this.pending = {};
-                       this.invalid = {};
-                       this.reset();
-
-                       var groups = (this.groups = {});
-                       $.each(this.settings.groups, function(key, value) {
-                               $.each(value.split(/\s/), function(index, name) {
-                                       groups[name] = key;
-                               });
-                       });
-                       var rules = this.settings.rules;
-                       $.each(rules, function(key, value) {
-                               rules[key] = $.validator.normalizeRule(value);
-                       });
-
-                       function delegate(event) {
-                               var validator = $.data(this[0].form, "validator"),
-                                       eventType = "on" + event.type.replace(/^validate/, "");
-                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
-                       }
-                       $(this.currentForm)
-                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
-                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
-                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
-                                               "[type='week'], [type='time'], [type='datetime-local'], " +
-                                               "[type='range'], [type='color'] ",
-                                               "focusin focusout keyup", delegate)
-                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
-
-                       if (this.settings.invalidHandler)
-                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/form
-               form: function() {
-                       this.checkForm();
-                       $.extend(this.submitted, this.errorMap);
-                       this.invalid = $.extend({}, this.errorMap);
-                       if (!this.valid())
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                       this.showErrors();
-                       return this.valid();
-               },
-
-               // 원본소스
-               /*
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               this.check( elements[i] );
-                       }
-                       return this.valid();
-               },
-               */
-
-               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
-                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
-                                               this.check( this.findByName( elements[i].name )[cnt] );
-                                       }
-                               } else {
-                                       this.check( elements[i] );
-                               }
-                       }
-                       return this.valid();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/element
-               element: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-                       this.lastElement = element;
-                       this.prepareElement( element );
-                       this.currentElements = $(element);
-                       var result = this.check( element );
-                       if ( result ) {
-                               delete this.invalid[element.name];
-                       } else {
-                               this.invalid[element.name] = true;
-                       }
-                       if ( !this.numberOfInvalids() ) {
-                               // Hide error containers on last error
-                               this.toHide = this.toHide.add( this.containers );
-                       }
-                       this.showErrors();
-                       return result;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
-               showErrors: function(errors) {
-                       if(errors) {
-                               // add items to error list and map
-                               $.extend( this.errorMap, errors );
-                               this.errorList = [];
-                               for ( var name in errors ) {
-                                       this.errorList.push({
-                                               message: errors[name],
-                                               element: this.findByName(name)[0]
-                                       });
-                               }
-                               // remove items from success list
-                               this.successList = $.grep( this.successList, function(element) {
-                                       return !(element.name in errors);
-                               });
-                       }
-                       this.settings.showErrors
-                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
-                               : this.defaultShowErrors();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
-               resetForm: function() {
-                       if ( $.fn.resetForm )
-                               $( this.currentForm ).resetForm();
-                       this.submitted = {};
-                       this.lastElement = null;
-                       this.prepareForm();
-                       this.hideErrors();
-                       this.elements().removeClass( this.settings.errorClass );
-               },
-
-               numberOfInvalids: function() {
-                       return this.objectLength(this.invalid);
-               },
-
-               objectLength: function( obj ) {
-                       var count = 0;
-                       for ( var i in obj )
-                               count++;
-                       return count;
-               },
-
-               hideErrors: function() {
-                       this.addWrapper( this.toHide ).hide();
-               },
-
-               valid: function() {
-                       return this.size() == 0;
-               },
-
-               size: function() {
-                       return this.errorList.length;
-               },
-
-               focusInvalid: function() {
-                       if( this.settings.focusInvalid ) {
-                               try {
-                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
-                                       .filter(":visible")
-                                       .focus()
-                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
-                                       .trigger("focusin");
-                               } catch(e) {
-                                       // ignore IE throwing errors when focusing hidden elements
-                               }
-                       }
-               },
-
-               findLastActive: function() {
-                       var lastActive = this.lastActive;
-                       return lastActive && $.grep(this.errorList, function(n) {
-                               return n.element.name == lastActive.name;
-                       }).length == 1 && lastActive;
-               },
-
-               elements: function() {
-                       var validator = this,
-                               rulesCache = {};
-
-                       // select all valid inputs inside the form (no submit or reset buttons)
-                       return $(this.currentForm)
-                       .find("input, select, textarea")
-                       .not(":submit, :reset, :image, [disabled]")
-                       .not( this.settings.ignore )
-                       .filter(function() {
-                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
-
-                               // select only the first element for each name, and only those with rules specified
-                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
-                                       return false;
-
-                               rulesCache[this.name] = true;
-                               return true;
-                       });
-               },
-
-               clean: function( selector ) {
-                       return $( selector )[0];
-               },
-
-               errors: function() {
-                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
-               },
-
-               reset: function() {
-                       this.successList = [];
-                       this.errorList = [];
-                       this.errorMap = {};
-                       this.toShow = $([]);
-                       this.toHide = $([]);
-                       this.currentElements = $([]);
-               },
-
-               prepareForm: function() {
-                       this.reset();
-                       this.toHide = this.errors().add( this.containers );
-               },
-
-               prepareElement: function( element ) {
-                       this.reset();
-                       this.toHide = this.errorsFor(element);
-               },
-
-               check: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-
-                       var rules = $(element).rules();
-                       var dependencyMismatch = false;
-                       for (var method in rules ) {
-                               var rule = { method: method, parameters: rules[method] };
-                               try {
-                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
-
-                                       // if a method indicates that the field is optional and therefore valid,
-                                       // don't mark it as valid when there are no other rules
-                                       if ( result == "dependency-mismatch" ) {
-                                               dependencyMismatch = true;
-                                               continue;
-                                       }
-                                       dependencyMismatch = false;
-
-                                       if ( result == "pending" ) {
-                                               this.toHide = this.toHide.not( this.errorsFor(element) );
-                                               return;
-                                       }
-
-                                       if( !result ) {
-                                               this.formatAndAdd( element, rule );
-                                               return false;
-                                       }
-                               } catch(e) {
-                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
-                                                + ", check the '" + rule.method + "' method", e);
-                                       throw e;
-                               }
-                       }
-                       if (dependencyMismatch)
-                               return;
-                       if ( this.objectLength(rules) )
-                               this.successList.push(element);
-                       return true;
-               },
-
-               // return the custom message for the given element and validation method
-               // specified in the element's "messages" metadata
-               customMetaMessage: function(element, method) {
-                       if (!$.metadata)
-                               return;
-
-                       var meta = this.settings.meta
-                               ? $(element).metadata()[this.settings.meta]
-                               : $(element).metadata();
-
-                       return meta && meta.messages && meta.messages[method];
-               },
-
-               // return the custom message for the given element name and validation method
-               customMessage: function( name, method ) {
-                       var m = this.settings.messages[name];
-                       return m && (m.constructor == String
-                               ? m
-                               : m[method]);
-               },
-
-               // return the first defined argument, allowing empty strings
-               findDefined: function() {
-                       for(var i = 0; i < arguments.length; i++) {
-                               if (arguments[i] !== undefined)
-                                       return arguments[i];
-                       }
-                       return undefined;
-               },
-
-               defaultMessage: function( element, method) {
-                       return this.findDefined(
-                               this.customMessage( element.name, method ),
-                               this.customMetaMessage( element, method ),
-                               // title is never undefined, so handle empty string as undefined
-                               !this.settings.ignoreTitle && element.title || undefined,
-                               $.validator.messages[method],
-                               "<strong>Warning: No message defined for " + element.name + "</strong>"
-                       );
-               },
-
-               formatAndAdd: function( element, rule ) {
-                       var message = this.defaultMessage( element, rule.method ),
-                               theregex = /\$?\{(\d+)\}/g;
-                       if ( typeof message == "function" ) {
-                               message = message.call(this, rule.parameters, element);
-                       } else if (theregex.test(message)) {
-                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
-                       }
-                       this.errorList.push({
-                               message: message,
-                               element: element
-                       });
-
-                       this.errorMap[element.name] = message;
-                       this.submitted[element.name] = message;
-               },
-
-               addWrapper: function(toToggle) {
-                       if ( this.settings.wrapper )
-                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
-                       return toToggle;
-               },
-
-               defaultShowErrors: function() {
-                       for ( var i = 0; this.errorList[i]; i++ ) {
-                               var error = this.errorList[i];
-                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
-                               this.showLabel( error.element, error.message );
-                       }
-                       if( this.errorList.length ) {
-                               this.toShow = this.toShow.add( this.containers );
-                       }
-                       if (this.settings.success) {
-                               for ( var i = 0; this.successList[i]; i++ ) {
-                                       this.showLabel( this.successList[i] );
-                               }
-                       }
-                       if (this.settings.unhighlight) {
-                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
-                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
-                               }
-                       }
-                       this.toHide = this.toHide.not( this.toShow );
-                       this.hideErrors();
-                       this.addWrapper( this.toShow ).show();
-               },
-
-               validElements: function() {
-                       return this.currentElements.not(this.invalidElements());
-               },
-
-               invalidElements: function() {
-                       return $(this.errorList).map(function() {
-                               return this.element;
-                       });
-               },
-
-               showLabel: function(element, message) {
-                       var label = this.errorsFor( element );
-                       if ( label.length ) {
-                               // refresh error/success class
-                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
-
-                               // check if we have a generated label, replace the message then
-                               label.attr("generated") && label.html(message);
-                       } else {
-                               // create label
-                               label = $("<" + this.settings.errorElement + "/>")
-                                       .attr({"for":  this.idOrName(element), generated: true})
-                                       .addClass(this.settings.errorClass)
-                                       .html(message || "");
-                               if ( this.settings.wrapper ) {
-                                       // make sure the element is visible, even in IE
-                                       // actually showing the wrapped element is handled elsewhere
-                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
-                               }
-                               if ( !this.labelContainer.append(label).length )
-                                       this.settings.errorPlacement
-                                               ? this.settings.errorPlacement(label, $(element) )
-                                               : label.insertAfter(element);
-                       }
-                       if ( !message && this.settings.success ) {
-                               label.text("");
-                               typeof this.settings.success == "string"
-                                       ? label.addClass( this.settings.success )
-                                       : this.settings.success( label );
-                       }
-                       this.toShow = this.toShow.add(label);
-               },
-
-               errorsFor: function(element) {
-                       var name = this.idOrName(element);
-               return this.errors().filter(function() {
-                               return $(this).attr('for') == name;
-                       });
-               },
-
-               idOrName: function(element) {
-                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
-               },
-
-               validationTargetFor: function(element) {
-                       // if radio/checkbox, validate first element in group instead
-                       if (this.checkable(element)) {
-                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
-                       }
-                       return element;
-               },
-
-               checkable: function( element ) {
-                       return /radio|checkbox/i.test(element.type);
-               },
-
-               findByName: function( name ) {
-                       // select by name and filter by form for performance over form.find("[name=...]")
-                       var form = this.currentForm;
-                       return $(document.getElementsByName(name)).map(function(index, element) {
-                               return element.form == form && element.name == name && element  || null;
-                       });
-               },
-
-               getLength: function(value, element) {
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               return $("option:selected", element).length;
-                       case 'input':
-                               if( this.checkable( element) )
-                                       return this.findByName(element.name).filter(':checked').length;
-                       }
-                       return value.length;
-               },
-
-               depend: function(param, element) {
-                       return this.dependTypes[typeof param]
-                               ? this.dependTypes[typeof param](param, element)
-                               : true;
-               },
-
-               dependTypes: {
-                       "boolean": function(param, element) {
-                               return param;
-                       },
-                       "string": function(param, element) {
-                               return !!$(param, element.form).length;
-                       },
-                       "function": function(param, element) {
-                               return param(element);
-                       }
-               },
-
-               optional: function(element) {
-                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
-               },
-
-               startRequest: function(element) {
-                       if (!this.pending[element.name]) {
-                               this.pendingRequest++;
-                               this.pending[element.name] = true;
-                       }
-               },
-
-               stopRequest: function(element, valid) {
-                       this.pendingRequest--;
-                       // sometimes synchronization fails, make sure pendingRequest is never < 0
-                       if (this.pendingRequest < 0)
-                               this.pendingRequest = 0;
-                       delete this.pending[element.name];
-                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
-                               $(this.currentForm).submit();
-                               this.formSubmitted = false;
-                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                               this.formSubmitted = false;
-                       }
-               },
-
-               previousValue: function(element) {
-                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
-                               old: null,
-                               valid: true,
-                               message: this.defaultMessage( element, "remote" )
-                       });
-               }
-
-       },
-
-       classRuleSettings: {
-               required: {required: true},
-               email: {email: true},
-               url: {url: true},
-               date: {date: true},
-               dateISO: {dateISO: true},
-               dateDE: {dateDE: true},
-               number: {number: true},
-               numberDE: {numberDE: true},
-               digits: {digits: true},
-               creditcard: {creditcard: true}
-       },
-
-       addClassRules: function(className, rules) {
-               className.constructor == String ?
-                       this.classRuleSettings[className] = rules :
-                       $.extend(this.classRuleSettings, className);
-       },
-
-       classRules: function(element) {
-               var rules = {};
-               var classes = $(element).attr('class');
-               classes && $.each(classes.split(' '), function() {
-                       if (this in $.validator.classRuleSettings) {
-                               $.extend(rules, $.validator.classRuleSettings[this]);
-                       }
-               });
-               return rules;
-       },
-
-       attributeRules: function(element) {
-               var rules = {};
-               var $element = $(element);
-
-               for (var method in $.validator.methods) {
-                       var value;
-                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
-                       if (method === 'required' && typeof $.fn.prop === 'function') {
-                               value = $element.prop(method);
-                       } else {
-                               value = $element.attr(method);
-                       }
-                       if (value) {
-                               rules[method] = value;
-                       } else if ($element[0].getAttribute("type") === method) {
-                               rules[method] = true;
-                       }
-               }
-
-               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
-               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
-                       delete rules.maxlength;
-               }
-
-               return rules;
-       },
-
-       metadataRules: function(element) {
-               if (!$.metadata) return {};
-
-               var meta = $.data(element.form, 'validator').settings.meta;
-               return meta ?
-                       $(element).metadata()[meta] :
-                       $(element).metadata();
-       },
-
-       staticRules: function(element) {
-               var rules = {};
-               var validator = $.data(element.form, 'validator');
-               if (validator.settings.rules) {
-                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
-               }
-               return rules;
-       },
-
-       normalizeRules: function(rules, element) {
-               // handle dependency check
-               $.each(rules, function(prop, val) {
-                       // ignore rule when param is explicitly false, eg. required:false
-                       if (val === false) {
-                               delete rules[prop];
-                               return;
-                       }
-                       if (val.param || val.depends) {
-                               var keepRule = true;
-                               switch (typeof val.depends) {
-                                       case "string":
-                                               keepRule = !!$(val.depends, element.form).length;
-                                               break;
-                                       case "function":
-                                               keepRule = val.depends.call(element, element);
-                                               break;
-                               }
-                               if (keepRule) {
-                                       rules[prop] = val.param !== undefined ? val.param : true;
-                               } else {
-                                       delete rules[prop];
-                               }
-                       }
-               });
-
-               // evaluate parameters
-               $.each(rules, function(rule, parameter) {
-                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
-               });
-
-               // clean number parameters
-               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
-                       if (rules[this]) {
-                               rules[this] = Number(rules[this]);
-                       }
-               });
-               $.each(['rangelength', 'range'], function() {
-                       if (rules[this]) {
-                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
-                       }
-               });
-
-               if ($.validator.autoCreateRanges) {
-                       // auto-create ranges
-                       if (rules.min && rules.max) {
-                               rules.range = [rules.min, rules.max];
-                               delete rules.min;
-                               delete rules.max;
-                       }
-                       if (rules.minlength && rules.maxlength) {
-                               rules.rangelength = [rules.minlength, rules.maxlength];
-                               delete rules.minlength;
-                               delete rules.maxlength;
-                       }
-               }
-
-               // To support custom messages in metadata ignore rule methods titled "messages"
-               if (rules.messages) {
-                       delete rules.messages;
-               }
-
-               return rules;
-       },
-
-       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
-       normalizeRule: function(data) {
-               if( typeof data == "string" ) {
-                       var transformed = {};
-                       $.each(data.split(/\s/), function() {
-                               transformed[this] = true;
-                       });
-                       data = transformed;
-               }
-               return data;
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
-       addMethod: function(name, method, message) {
-               $.validator.methods[name] = method;
-               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
-               if (method.length < 3) {
-                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
-               }
-       },
-
-       methods: {
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/required
-               required: function(value, element, param) {
-                       // check if dependency is met
-                       if ( !this.depend(param, element) )
-                               return "dependency-mismatch";
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               // could be an array for select-multiple or a string, both are fine this way
-                               var val = $(element).val();
-                               return val && val.length > 0;
-                       case 'input':
-                               if ( this.checkable(element) )
-                                       return this.getLength(value, element) > 0;
-                       default:
-                               return $.trim(value).length > 0;
-                       }
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/remote
-               remote: function(value, element, param) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-
-                       var previous = this.previousValue(element);
-                       if (!this.settings.messages[element.name] )
-                               this.settings.messages[element.name] = {};
-                       previous.originalMessage = this.settings.messages[element.name].remote;
-                       this.settings.messages[element.name].remote = previous.message;
-
-                       param = typeof param == "string" && {url:param} || param;
-
-                       if ( this.pending[element.name] ) {
-                               return "pending";
-                       }
-                       if ( previous.old === value ) {
-                               return previous.valid;
-                       }
-
-                       previous.old = value;
-                       var validator = this;
-                       this.startRequest(element);
-                       var data = {};
-                       data[element.name] = value;
-                       $.ajax($.extend(true, {
-                               url: param,
-                               mode: "abort",
-                               port: "validate" + element.name,
-                               dataType: "json",
-                               data: data,
-                               success: function(response) {
-                                       validator.settings.messages[element.name].remote = previous.originalMessage;
-                                       var valid = response === true;
-                                       if ( valid ) {
-                                               var submitted = validator.formSubmitted;
-                                               validator.prepareElement(element);
-                                               validator.formSubmitted = submitted;
-                                               validator.successList.push(element);
-                                               validator.showErrors();
-                                       } else {
-                                               var errors = {};
-                                               var message = response || validator.defaultMessage( element, "remote" );
-                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
-                                               validator.showErrors(errors);
-                                       }
-                                       previous.valid = valid;
-                                       validator.stopRequest(element, valid);
-                               }
-                       }, param));
-                       return "pending";
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
-               minlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
-               maxlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
-               rangelength: function(value, element, param) {
-                       var length = this.getLength($.trim(value), element);
-                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/min
-               min: function( value, element, param ) {
-                       return this.optional(element) || value >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/max
-               max: function( value, element, param ) {
-                       return this.optional(element) || value <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/range
-               range: function( value, element, param ) {
-                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/email
-               email: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
-                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/url
-               url: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
-                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/date
-               date: function(value, element) {
-                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
-               dateISO: function(value, element) {
-                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/number
-               number: function(value, element) {
-                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/digits
-               digits: function(value, element) {
-                       return this.optional(element) || /^\d+$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
-               // based on http://en.wikipedia.org/wiki/Luhn
-               creditcard: function(value, element) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-                       // accept only spaces, digits and dashes
-                       if (/[^0-9 -]+/.test(value))
-                               return false;
-                       var nCheck = 0,
-                               nDigit = 0,
-                               bEven = false;
-
-                       value = value.replace(/\D/g, "");
-
-                       for (var n = value.length - 1; n >= 0; n--) {
-                               var cDigit = value.charAt(n);
-                               var nDigit = parseInt(cDigit, 10);
-                               if (bEven) {
-                                       if ((nDigit *= 2) > 9)
-                                               nDigit -= 9;
-                               }
-                               nCheck += nDigit;
-                               bEven = !bEven;
-                       }
-
-                       return (nCheck % 10) == 0;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/accept
-               accept: function(value, element, param) {
-                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
-                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
-               equalTo: function(value, element, param) {
-                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
-                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
-                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
-                               $(element).valid();
-                       });
-                       return value == target.val();
-               }
-
-       }
-
-});
-
-// deprecated, use $.validator.format instead
-$.format = $.validator.format;
-
-})(jQuery);
-
-// ajax mode: abort
-// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
-// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
-;(function($) {
-       var pendingRequests = {};
-       // Use a prefilter if available (1.5+)
-       if ( $.ajaxPrefilter ) {
-               $.ajaxPrefilter(function(settings, _, xhr) {
-                       var port = settings.port;
-                       if (settings.mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               pendingRequests[port] = xhr;
-                       }
-               });
-       } else {
-               // Proxy ajax
-               var ajax = $.ajax;
-               $.ajax = function(settings) {
-                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
-                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
-                       if (mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               return (pendingRequests[port] = ajax.apply(this, arguments));
-                       }
-                       return ajax.apply(this, arguments);
-               };
-       }
-})(jQuery);
-
-// provides cross-browser focusin and focusout events
-// IE has native support, in other browsers, use event caputuring (neither bubbles)
-
-// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
-// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
-;(function($) {
-       // only implement if not provided by jQuery core (since 1.4)
-       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
-       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
-               $.each({
-                       focus: 'focusin',
-                       blur: 'focusout'
-               }, function( original, fix ){
-                       $.event.special[fix] = {
-                               setup:function() {
-                                       this.addEventListener( original, handler, true );
-                               },
-                               teardown:function() {
-                                       this.removeEventListener( original, handler, true );
-                               },
-                               handler: function(e) {
-                                       arguments[0] = $.event.fix(e);
-                                       arguments[0].type = fix;
-                                       return $.event.handle.apply(this, arguments);
-                               }
-                       };
-                       function handler(e) {
-                               e = $.event.fix(e);
-                               e.type = fix;
-                               return $.event.handle.call(this, e);
-                       }
-               });
-       };
-       $.extend($.fn, {
-               validateDelegate: function(delegate, type, handler) {
-                       return this.bind(type, function(event) {
-                               var target = $(event.target);
-                               if (target.is(delegate)) {
-                                       return handler.apply(target, arguments);
-                               }
-                       });
-               }
-       });
-})(jQuery);
-
-/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
- * Licensed under the MIT License (LICENSE.txt).
- *
- * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
- * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
- * Thanks to: Seamus Leahy for adding deltaX and deltaY
- *
- * Version: 3.0.6
- * 
- * Requires: 1.2.2+
- */
-
-(function($) {
-
-var types = ['DOMMouseScroll', 'mousewheel'];
-
-if ($.event.fixHooks) {
-    for ( var i=types.length; i; ) {
-        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
-    }
-}
-
-$.event.special.mousewheel = {
-    setup: function() {
-        if ( this.addEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.addEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = handler;
-        }
-    },
-    
-    teardown: function() {
-        if ( this.removeEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.removeEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = null;
-        }
-    }
-};
-
-$.fn.extend({
-    mousewheel: function(fn) {
-        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-    },
-    
-    unmousewheel: function(fn) {
-        return this.unbind("mousewheel", fn);
-    }
-});
-
-
-function handler(event) {
-    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
-    event = $.event.fix(orgEvent);
-    event.type = "mousewheel";
-    
-    // Old school scrollwheel delta
-    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
-    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
-    
-    // New school multidimensional scroll (touchpads) deltas
-    deltaY = delta;
-    
-    // Gecko
-    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
-        deltaY = 0;
-        deltaX = -1*delta;
-    }
-    
-    // Webkit
-    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
-    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
-    
-    // Add event and delta to the front of the arguments
-    args.unshift(event, delta, deltaX, deltaY);
-    
-    return ($.event.dispatch || $.event.handle).apply(this, args);
-}
-
-})(jQuery);
-
-/*
- * jScrollPane - v2.0.0beta12 - 2012-07-24
- * http://jscrollpane.kelvinluck.com/
- *
- * Copyright (c) 2010 Kelvin Luck
- * Dual licensed under the MIT and GPL licenses.
- */
-(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
-if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
-}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */\r
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);\r
+\r
+\r
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */\r
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};\r
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()\r
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);\r
+\r
+/*\r
+ * Metadata - jQuery plugin for parsing metadata from elements\r
+ *\r
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ *\r
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $\r
+ *\r
+ */\r
+\r
+/**\r
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property\r
+ * in the JSON will become a property of the element itself.\r
+ *\r
+ * There are three supported types of metadata storage:\r
+ *\r
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.\r
+ *          \r
+ *   class: Inside the class attribute, wrapped in curly braces: { }\r
+ *   \r
+ *   elem:  Inside a child element (e.g. a script tag). The\r
+ *          name parameter indicates *which* element.\r
+ *          \r
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.\r
+ *\r
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements\r
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.\r
+ * \r
+ * @name $.metadata.setType\r
+ *\r
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("class")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from the class attribute\r
+ * \r
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("attr", "data")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a "data" attribute\r
+ * \r
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>\r
+ * @before $.metadata.setType("elem", "script")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a nested script element\r
+ * \r
+ * @param String type The encoding type\r
+ * @param String name The name of the attribute to be used to get metadata (optional)\r
+ * @cat Plugins/Metadata\r
+ * @descr Sets the type of encoding to be used when loading metadata for the first time\r
+ * @type undefined\r
+ * @see metadata()\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend({\r
+       metadata : {\r
+               defaults : {\r
+                       type: 'class',\r
+                       name: 'metadata',\r
+                       cre: /({.*})/,\r
+                       single: 'metadata'\r
+               },\r
+               setType: function( type, name ){\r
+                       this.defaults.type = type;\r
+                       this.defaults.name = name;\r
+               },\r
+               get: function( elem, opts ){\r
+                       var settings = $.extend({},this.defaults,opts);\r
+                       // check for empty string in single property\r
+                       if ( !settings.single.length ) settings.single = 'metadata';\r
+                       \r
+                       var data = $.data(elem, settings.single);\r
+                       // returned cached data if it already exists\r
+                       if ( data ) return data;\r
+                       \r
+                       data = "{}";\r
+                       \r
+                       if ( settings.type == "class" ) {\r
+                               var m = settings.cre.exec( elem.className );\r
+                               if ( m )\r
+                                       data = m[1];\r
+                       } else if ( settings.type == "elem" ) {\r
+                               if( !elem.getElementsByTagName )\r
+                                       return undefined;\r
+                               var e = elem.getElementsByTagName(settings.name);\r
+                               if ( e.length )\r
+                                       data = $.trim(e[0].innerHTML);\r
+                       } else if ( elem.getAttribute != undefined ) {\r
+                               var attr = elem.getAttribute( settings.name );\r
+                               if ( attr )\r
+                                       data = attr;\r
+                       }\r
+                       \r
+                       if ( data.indexOf( '{' ) <0 )\r
+                       data = "{" + data + "}";\r
+                       \r
+                       data = eval("(" + data + ")");\r
+                       \r
+                       $.data( elem, settings.single, data );\r
+                       return data;\r
+               }\r
+       }\r
+});\r
+\r
+/**\r
+ * Returns the metadata object for the first member of the jQuery object.\r
+ *\r
+ * @name metadata\r
+ * @descr Returns element's metadata object\r
+ * @param Object opts An object contianing settings to override the defaults\r
+ * @type jQuery\r
+ * @cat Plugins/Metadata\r
+ */\r
+$.fn.metadata = function( opts ){\r
+       return $.metadata.get( this[0], opts );\r
+};\r
+\r
+})(jQuery);\r
+\r
+\r
+/**\r
+ * jQuery Validation Plugin 1.9.0\r
+\r
+ *\r
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/\r
+ * http://docs.jquery.com/Plugins/Validation\r
+ *\r
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ */\r
+\r
+/**\r
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend($.fn, {\r
+       // http://docs.jquery.com/Plugins/Validation/validate\r
+       validate: function( options ) {\r
+\r
+               // if nothing is selected, return nothing; can't chain anyway\r
+               if (!this.length) {\r
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );\r
+                       return;\r
+               }\r
+\r
+               // check if a validator for this form was already created\r
+               var validator = $.data(this[0], 'validator');\r
+               if ( validator ) {\r
+                       return validator;\r
+               }\r
+\r
+               // Add novalidate tag if HTML5.\r
+               this.attr('novalidate', 'novalidate');\r
+\r
+               validator = new $.validator( options, this[0] );\r
+               $.data(this[0], 'validator', validator);\r
+\r
+               if ( validator.settings.onsubmit ) {\r
+\r
+                       var inputsAndButtons = this.find("input, button");\r
+\r
+                       // allow suppresing validation by adding a cancel class to the submit button\r
+                       inputsAndButtons.filter(".cancel").click(function () {\r
+                               validator.cancelSubmit = true;\r
+                       });\r
+\r
+                       // when a submitHandler is used, capture the submitting button\r
+                       if (validator.settings.submitHandler) {\r
+                               inputsAndButtons.filter(":submit").click(function () {\r
+                                       validator.submitButton = this;\r
+                               });\r
+                       }\r
+\r
+                       // validate the form on submit\r
+                       this.submit( function( event ) {\r
+                               if ( validator.settings.debug )\r
+                                       // prevent form submit to be able to see console output\r
+                                       event.preventDefault();\r
+\r
+                               function handle() {\r
+                                       if ( validator.settings.submitHandler ) {\r
+                                               if (validator.submitButton) {\r
+                                                       // insert a hidden input as a replacement for the missing submit button\r
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);\r
+                                               }\r
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );\r
+                                               if (validator.submitButton) {\r
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced\r
+                                                       hidden.remove();\r
+                                               }\r
+                                               return false;\r
+                                       }\r
+                                       return true;\r
+                               }\r
+\r
+                               // prevent submit for invalid forms or custom submit handlers\r
+                               if ( validator.cancelSubmit ) {\r
+                                       validator.cancelSubmit = false;\r
+                                       return handle();\r
+                               }\r
+                               if ( validator.form() ) {\r
+                                       if ( validator.pendingRequest ) {\r
+                                               validator.formSubmitted = true;\r
+                                               return false;\r
+                                       }\r
+                                       return handle();\r
+                               } else {\r
+                                       validator.focusInvalid();\r
+                                       return false;\r
+                               }\r
+                       });\r
+               }\r
+\r
+               return validator;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/valid\r
+       valid: function() {\r
+        if ( $(this[0]).is('form')) {\r
+            return this.validate().form();\r
+        } else {\r
+            var valid = true;\r
+            var validator = $(this[0].form).validate();\r
+            this.each(function() {\r
+                               valid &= validator.element(this);\r
+            });\r
+            return valid;\r
+        }\r
+    },\r
+       // attributes: space seperated list of attributes to retrieve and remove\r
+       removeAttrs: function(attributes) {\r
+               var result = {},\r
+                       $element = this;\r
+               $.each(attributes.split(/\s/), function(index, value) {\r
+                       result[value] = $element.attr(value);\r
+                       $element.removeAttr(value);\r
+               });\r
+               return result;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/rules\r
+       rules: function(command, argument) {\r
+               var element = this[0];\r
+\r
+               if (command) {\r
+                       var settings = $.data(element.form, 'validator').settings;\r
+                       var staticRules = settings.rules;\r
+                       var existingRules = $.validator.staticRules(element);\r
+                       switch(command) {\r
+                       case "add":\r
+                               $.extend(existingRules, $.validator.normalizeRule(argument));\r
+                               staticRules[element.name] = existingRules;\r
+                               if (argument.messages)\r
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );\r
+                               break;\r
+                       case "remove":\r
+                               if (!argument) {\r
+                                       delete staticRules[element.name];\r
+                                       return existingRules;\r
+                               }\r
+                               var filtered = {};\r
+                               $.each(argument.split(/\s/), function(index, method) {\r
+                                       filtered[method] = existingRules[method];\r
+                                       delete existingRules[method];\r
+                               });\r
+                               return filtered;\r
+                       }\r
+               }\r
+\r
+               var data = $.validator.normalizeRules(\r
+               $.extend(\r
+                       {},\r
+                       $.validator.metadataRules(element),\r
+                       $.validator.classRules(element),\r
+                       $.validator.attributeRules(element),\r
+                       $.validator.staticRules(element)\r
+               ), element);\r
+\r
+               // make sure required is at front\r
+               if (data.required) {\r
+                       var param = data.required;\r
+                       delete data.required;\r
+                       data = $.extend({required: param}, data);\r
+               }\r
+\r
+               return data;\r
+       }\r
+});\r
+\r
+// Custom selectors\r
+$.extend($.expr[":"], {\r
+       // http://docs.jquery.com/Plugins/Validation/blank\r
+       blank: function(a) {return !$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/filled\r
+       filled: function(a) {return !!$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/unchecked\r
+       unchecked: function(a) {return !a.checked;}\r
+});\r
+\r
+// constructor for validator\r
+$.validator = function( options, form ) {\r
+       this.settings = $.extend( true, {}, $.validator.defaults, options );\r
+       this.currentForm = form;\r
+       this.init();\r
+};\r
+\r
+$.validator.format = function(source, params) {\r
+       if ( arguments.length == 1 )\r
+               return function() {\r
+                       var args = $.makeArray(arguments);\r
+                       args.unshift(source);\r
+                       return $.validator.format.apply( this, args );\r
+               };\r
+       if ( arguments.length > 2 && params.constructor != Array  ) {\r
+               params = $.makeArray(arguments).slice(1);\r
+       }\r
+       if ( params.constructor != Array ) {\r
+               params = [ params ];\r
+       }\r
+       $.each(params, function(i, n) {\r
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);\r
+       });\r
+       return source;\r
+};\r
+\r
+$.extend($.validator, {\r
+\r
+       defaults: {\r
+               messages: {},\r
+               groups: {},\r
+               rules: {},\r
+               errorClass: "error",\r
+               validClass: "valid",\r
+               errorElement: "label",\r
+               focusInvalid: true,\r
+               errorContainer: $( [] ),\r
+               errorLabelContainer: $( [] ),\r
+               onsubmit: true,\r
+               ignore: ":hidden",\r
+               ignoreTitle: false,\r
+               onfocusin: function(element, event) {\r
+                       this.lastActive = element;\r
+\r
+                       // hide error label and remove error class on focus if enabled\r
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {\r
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );\r
+                               this.addWrapper(this.errorsFor(element)).hide();\r
+                       }\r
+               },\r
+               onfocusout: function(element, event) {\r
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onkeyup: function(element, event) {\r
+                       if ( element.name in this.submitted || element == this.lastElement ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onclick: function(element, event) {\r
+                       // click on selects, radiobuttons and checkboxes\r
+                       if ( element.name in this.submitted )\r
+                               this.element(element);\r
+                       // or option elements, check parent select in that case\r
+                       else if (element.parentNode.name in this.submitted)\r
+                               this.element(element.parentNode);\r
+               },\r
+               highlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);\r
+                       } else {\r
+                               $(element).addClass(errorClass).removeClass(validClass);\r
+                       }\r
+               },\r
+               unhighlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);\r
+                       } else {\r
+                               $(element).removeClass(errorClass).addClass(validClass);\r
+                       }\r
+               }\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults\r
+       setDefaults: function(settings) {\r
+               $.extend( $.validator.defaults, settings );\r
+       },\r
+\r
+       messages: {\r
+               required: "This field is required.",\r
+               remote: "Please fix this field.",\r
+               email: "Please enter a valid email address.",\r
+               url: "Please enter a valid URL.",\r
+               date: "Please enter a valid date.",\r
+               dateISO: "Please enter a valid date (ISO).",\r
+               number: "Please enter a valid number.",\r
+               digits: "Please enter only digits.",\r
+               creditcard: "Please enter a valid credit card number.",\r
+               equalTo: "Please enter the same value again.",\r
+               accept: "Please enter a value with a valid extension.",\r
+               maxlength: $.validator.format("Please enter no more than {0} characters."),\r
+               minlength: $.validator.format("Please enter at least {0} characters."),\r
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),\r
+               range: $.validator.format("Please enter a value between {0} and {1}."),\r
+               max: $.validator.format("Please enter a value less than or equal to {0}."),\r
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")\r
+       },\r
+\r
+       autoCreateRanges: false,\r
+\r
+       prototype: {\r
+\r
+               init: function() {\r
+                       this.labelContainer = $(this.settings.errorLabelContainer);\r
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);\r
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );\r
+                       this.submitted = {};\r
+                       this.valueCache = {};\r
+                       this.pendingRequest = 0;\r
+                       this.pending = {};\r
+                       this.invalid = {};\r
+                       this.reset();\r
+\r
+                       var groups = (this.groups = {});\r
+                       $.each(this.settings.groups, function(key, value) {\r
+                               $.each(value.split(/\s/), function(index, name) {\r
+                                       groups[name] = key;\r
+                               });\r
+                       });\r
+                       var rules = this.settings.rules;\r
+                       $.each(rules, function(key, value) {\r
+                               rules[key] = $.validator.normalizeRule(value);\r
+                       });\r
+\r
+                       function delegate(event) {\r
+                               var validator = $.data(this[0].form, "validator"),\r
+                                       eventType = "on" + event.type.replace(/^validate/, "");\r
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);\r
+                       }\r
+                       $(this.currentForm)\r
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +\r
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +\r
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +\r
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +\r
+                                               "[type='range'], [type='color'] ",\r
+                                               "focusin focusout keyup", delegate)\r
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);\r
+\r
+                       if (this.settings.invalidHandler)\r
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/form\r
+               form: function() {\r
+                       this.checkForm();\r
+                       $.extend(this.submitted, this.errorMap);\r
+                       this.invalid = $.extend({}, this.errorMap);\r
+                       if (!this.valid())\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                       this.showErrors();\r
+                       return this.valid();\r
+               },\r
+\r
+               // 원본소스\r
+               /*\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               this.check( elements[i] );\r
+                       }\r
+                       return this.valid();\r
+               },\r
+               */\r
+\r
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {\r
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {\r
+                                               this.check( this.findByName( elements[i].name )[cnt] );\r
+                                       }\r
+                               } else {\r
+                                       this.check( elements[i] );\r
+                               }\r
+                       }\r
+                       return this.valid();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/element\r
+               element: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+                       this.lastElement = element;\r
+                       this.prepareElement( element );\r
+                       this.currentElements = $(element);\r
+                       var result = this.check( element );\r
+                       if ( result ) {\r
+                               delete this.invalid[element.name];\r
+                       } else {\r
+                               this.invalid[element.name] = true;\r
+                       }\r
+                       if ( !this.numberOfInvalids() ) {\r
+                               // Hide error containers on last error\r
+                               this.toHide = this.toHide.add( this.containers );\r
+                       }\r
+                       this.showErrors();\r
+                       return result;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors\r
+               showErrors: function(errors) {\r
+                       if(errors) {\r
+                               // add items to error list and map\r
+                               $.extend( this.errorMap, errors );\r
+                               this.errorList = [];\r
+                               for ( var name in errors ) {\r
+                                       this.errorList.push({\r
+                                               message: errors[name],\r
+                                               element: this.findByName(name)[0]\r
+                                       });\r
+                               }\r
+                               // remove items from success list\r
+                               this.successList = $.grep( this.successList, function(element) {\r
+                                       return !(element.name in errors);\r
+                               });\r
+                       }\r
+                       this.settings.showErrors\r
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )\r
+                               : this.defaultShowErrors();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm\r
+               resetForm: function() {\r
+                       if ( $.fn.resetForm )\r
+                               $( this.currentForm ).resetForm();\r
+                       this.submitted = {};\r
+                       this.lastElement = null;\r
+                       this.prepareForm();\r
+                       this.hideErrors();\r
+                       this.elements().removeClass( this.settings.errorClass );\r
+               },\r
+\r
+               numberOfInvalids: function() {\r
+                       return this.objectLength(this.invalid);\r
+               },\r
+\r
+               objectLength: function( obj ) {\r
+                       var count = 0;\r
+                       for ( var i in obj )\r
+                               count++;\r
+                       return count;\r
+               },\r
+\r
+               hideErrors: function() {\r
+                       this.addWrapper( this.toHide ).hide();\r
+               },\r
+\r
+               valid: function() {\r
+                       return this.size() == 0;\r
+               },\r
+\r
+               size: function() {\r
+                       return this.errorList.length;\r
+               },\r
+\r
+               focusInvalid: function() {\r
+                       if( this.settings.focusInvalid ) {\r
+                               try {\r
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])\r
+                                       .filter(":visible")\r
+                                       .focus()\r
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find\r
+                                       .trigger("focusin");\r
+                               } catch(e) {\r
+                                       // ignore IE throwing errors when focusing hidden elements\r
+                               }\r
+                       }\r
+               },\r
+\r
+               findLastActive: function() {\r
+                       var lastActive = this.lastActive;\r
+                       return lastActive && $.grep(this.errorList, function(n) {\r
+                               return n.element.name == lastActive.name;\r
+                       }).length == 1 && lastActive;\r
+               },\r
+\r
+               elements: function() {\r
+                       var validator = this,\r
+                               rulesCache = {};\r
+\r
+                       // select all valid inputs inside the form (no submit or reset buttons)\r
+                       return $(this.currentForm)\r
+                       .find("input, select, textarea")\r
+                       .not(":submit, :reset, :image, [disabled]")\r
+                       .not( this.settings.ignore )\r
+                       .filter(function() {\r
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);\r
+\r
+                               // select only the first element for each name, and only those with rules specified\r
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )\r
+                                       return false;\r
+\r
+                               rulesCache[this.name] = true;\r
+                               return true;\r
+                       });\r
+               },\r
+\r
+               clean: function( selector ) {\r
+                       return $( selector )[0];\r
+               },\r
+\r
+               errors: function() {\r
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );\r
+               },\r
+\r
+               reset: function() {\r
+                       this.successList = [];\r
+                       this.errorList = [];\r
+                       this.errorMap = {};\r
+                       this.toShow = $([]);\r
+                       this.toHide = $([]);\r
+                       this.currentElements = $([]);\r
+               },\r
+\r
+               prepareForm: function() {\r
+                       this.reset();\r
+                       this.toHide = this.errors().add( this.containers );\r
+               },\r
+\r
+               prepareElement: function( element ) {\r
+                       this.reset();\r
+                       this.toHide = this.errorsFor(element);\r
+               },\r
+\r
+               check: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+\r
+                       var rules = $(element).rules();\r
+                       var dependencyMismatch = false;\r
+                       for (var method in rules ) {\r
+                               var rule = { method: method, parameters: rules[method] };\r
+                               try {\r
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );\r
+\r
+                                       // if a method indicates that the field is optional and therefore valid,\r
+                                       // don't mark it as valid when there are no other rules\r
+                                       if ( result == "dependency-mismatch" ) {\r
+                                               dependencyMismatch = true;\r
+                                               continue;\r
+                                       }\r
+                                       dependencyMismatch = false;\r
+\r
+                                       if ( result == "pending" ) {\r
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );\r
+                                               return;\r
+                                       }\r
+\r
+                                       if( !result ) {\r
+                                               this.formatAndAdd( element, rule );\r
+                                               return false;\r
+                                       }\r
+                               } catch(e) {\r
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id\r
+                                                + ", check the '" + rule.method + "' method", e);\r
+                                       throw e;\r
+                               }\r
+                       }\r
+                       if (dependencyMismatch)\r
+                               return;\r
+                       if ( this.objectLength(rules) )\r
+                               this.successList.push(element);\r
+                       return true;\r
+               },\r
+\r
+               // return the custom message for the given element and validation method\r
+               // specified in the element's "messages" metadata\r
+               customMetaMessage: function(element, method) {\r
+                       if (!$.metadata)\r
+                               return;\r
+\r
+                       var meta = this.settings.meta\r
+                               ? $(element).metadata()[this.settings.meta]\r
+                               : $(element).metadata();\r
+\r
+                       return meta && meta.messages && meta.messages[method];\r
+               },\r
+\r
+               // return the custom message for the given element name and validation method\r
+               customMessage: function( name, method ) {\r
+                       var m = this.settings.messages[name];\r
+                       return m && (m.constructor == String\r
+                               ? m\r
+                               : m[method]);\r
+               },\r
+\r
+               // return the first defined argument, allowing empty strings\r
+               findDefined: function() {\r
+                       for(var i = 0; i < arguments.length; i++) {\r
+                               if (arguments[i] !== undefined)\r
+                                       return arguments[i];\r
+                       }\r
+                       return undefined;\r
+               },\r
+\r
+               defaultMessage: function( element, method) {\r
+                       return this.findDefined(\r
+                               this.customMessage( element.name, method ),\r
+                               this.customMetaMessage( element, method ),\r
+                               // title is never undefined, so handle empty string as undefined\r
+                               !this.settings.ignoreTitle && element.title || undefined,\r
+                               $.validator.messages[method],\r
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"\r
+                       );\r
+               },\r
+\r
+               formatAndAdd: function( element, rule ) {\r
+                       var message = this.defaultMessage( element, rule.method ),\r
+                               theregex = /\$?\{(\d+)\}/g;\r
+                       if ( typeof message == "function" ) {\r
+                               message = message.call(this, rule.parameters, element);\r
+                       } else if (theregex.test(message)) {\r
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);\r
+                       }\r
+                       this.errorList.push({\r
+                               message: message,\r
+                               element: element\r
+                       });\r
+\r
+                       this.errorMap[element.name] = message;\r
+                       this.submitted[element.name] = message;\r
+               },\r
+\r
+               addWrapper: function(toToggle) {\r
+                       if ( this.settings.wrapper )\r
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );\r
+                       return toToggle;\r
+               },\r
+\r
+               defaultShowErrors: function() {\r
+                       for ( var i = 0; this.errorList[i]; i++ ) {\r
+                               var error = this.errorList[i];\r
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );\r
+                               this.showLabel( error.element, error.message );\r
+                       }\r
+                       if( this.errorList.length ) {\r
+                               this.toShow = this.toShow.add( this.containers );\r
+                       }\r
+                       if (this.settings.success) {\r
+                               for ( var i = 0; this.successList[i]; i++ ) {\r
+                                       this.showLabel( this.successList[i] );\r
+                               }\r
+                       }\r
+                       if (this.settings.unhighlight) {\r
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {\r
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );\r
+                               }\r
+                       }\r
+                       this.toHide = this.toHide.not( this.toShow );\r
+                       this.hideErrors();\r
+                       this.addWrapper( this.toShow ).show();\r
+               },\r
+\r
+               validElements: function() {\r
+                       return this.currentElements.not(this.invalidElements());\r
+               },\r
+\r
+               invalidElements: function() {\r
+                       return $(this.errorList).map(function() {\r
+                               return this.element;\r
+                       });\r
+               },\r
+\r
+               showLabel: function(element, message) {\r
+                       var label = this.errorsFor( element );\r
+                       if ( label.length ) {\r
+                               // refresh error/success class\r
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );\r
+\r
+                               // check if we have a generated label, replace the message then\r
+                               label.attr("generated") && label.html(message);\r
+                       } else {\r
+                               // create label\r
+                               label = $("<" + this.settings.errorElement + "/>")\r
+                                       .attr({"for":  this.idOrName(element), generated: true})\r
+                                       .addClass(this.settings.errorClass)\r
+                                       .html(message || "");\r
+                               if ( this.settings.wrapper ) {\r
+                                       // make sure the element is visible, even in IE\r
+                                       // actually showing the wrapped element is handled elsewhere\r
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();\r
+                               }\r
+                               if ( !this.labelContainer.append(label).length )\r
+                                       this.settings.errorPlacement\r
+                                               ? this.settings.errorPlacement(label, $(element) )\r
+                                               : label.insertAfter(element);\r
+                       }\r
+                       if ( !message && this.settings.success ) {\r
+                               label.text("");\r
+                               typeof this.settings.success == "string"\r
+                                       ? label.addClass( this.settings.success )\r
+                                       : this.settings.success( label );\r
+                       }\r
+                       this.toShow = this.toShow.add(label);\r
+               },\r
+\r
+               errorsFor: function(element) {\r
+                       var name = this.idOrName(element);\r
+               return this.errors().filter(function() {\r
+                               return $(this).attr('for') == name;\r
+                       });\r
+               },\r
+\r
+               idOrName: function(element) {\r
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);\r
+               },\r
+\r
+               validationTargetFor: function(element) {\r
+                       // if radio/checkbox, validate first element in group instead\r
+                       if (this.checkable(element)) {\r
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];\r
+                       }\r
+                       return element;\r
+               },\r
+\r
+               checkable: function( element ) {\r
+                       return /radio|checkbox/i.test(element.type);\r
+               },\r
+\r
+               findByName: function( name ) {\r
+                       // select by name and filter by form for performance over form.find("[name=...]")\r
+                       var form = this.currentForm;\r
+                       return $(document.getElementsByName(name)).map(function(index, element) {\r
+                               return element.form == form && element.name == name && element  || null;\r
+                       });\r
+               },\r
+\r
+               getLength: function(value, element) {\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               return $("option:selected", element).length;\r
+                       case 'input':\r
+                               if( this.checkable( element) )\r
+                                       return this.findByName(element.name).filter(':checked').length;\r
+                       }\r
+                       return value.length;\r
+               },\r
+\r
+               depend: function(param, element) {\r
+                       return this.dependTypes[typeof param]\r
+                               ? this.dependTypes[typeof param](param, element)\r
+                               : true;\r
+               },\r
+\r
+               dependTypes: {\r
+                       "boolean": function(param, element) {\r
+                               return param;\r
+                       },\r
+                       "string": function(param, element) {\r
+                               return !!$(param, element.form).length;\r
+                       },\r
+                       "function": function(param, element) {\r
+                               return param(element);\r
+                       }\r
+               },\r
+\r
+               optional: function(element) {\r
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";\r
+               },\r
+\r
+               startRequest: function(element) {\r
+                       if (!this.pending[element.name]) {\r
+                               this.pendingRequest++;\r
+                               this.pending[element.name] = true;\r
+                       }\r
+               },\r
+\r
+               stopRequest: function(element, valid) {\r
+                       this.pendingRequest--;\r
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0\r
+                       if (this.pendingRequest < 0)\r
+                               this.pendingRequest = 0;\r
+                       delete this.pending[element.name];\r
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {\r
+                               $(this.currentForm).submit();\r
+                               this.formSubmitted = false;\r
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                               this.formSubmitted = false;\r
+                       }\r
+               },\r
+\r
+               previousValue: function(element) {\r
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {\r
+                               old: null,\r
+                               valid: true,\r
+                               message: this.defaultMessage( element, "remote" )\r
+                       });\r
+               }\r
+\r
+       },\r
+\r
+       classRuleSettings: {\r
+               required: {required: true},\r
+               email: {email: true},\r
+               url: {url: true},\r
+               date: {date: true},\r
+               dateISO: {dateISO: true},\r
+               dateDE: {dateDE: true},\r
+               number: {number: true},\r
+               numberDE: {numberDE: true},\r
+               digits: {digits: true},\r
+               creditcard: {creditcard: true}\r
+       },\r
+\r
+       addClassRules: function(className, rules) {\r
+               className.constructor == String ?\r
+                       this.classRuleSettings[className] = rules :\r
+                       $.extend(this.classRuleSettings, className);\r
+       },\r
+\r
+       classRules: function(element) {\r
+               var rules = {};\r
+               var classes = $(element).attr('class');\r
+               classes && $.each(classes.split(' '), function() {\r
+                       if (this in $.validator.classRuleSettings) {\r
+                               $.extend(rules, $.validator.classRuleSettings[this]);\r
+                       }\r
+               });\r
+               return rules;\r
+       },\r
+\r
+       attributeRules: function(element) {\r
+               var rules = {};\r
+               var $element = $(element);\r
+\r
+               for (var method in $.validator.methods) {\r
+                       var value;\r
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required\r
+                       if (method === 'required' && typeof $.fn.prop === 'function') {\r
+                               value = $element.prop(method);\r
+                       } else {\r
+                               value = $element.attr(method);\r
+                       }\r
+                       if (value) {\r
+                               rules[method] = value;\r
+                       } else if ($element[0].getAttribute("type") === method) {\r
+                               rules[method] = true;\r
+                       }\r
+               }\r
+\r
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs\r
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {\r
+                       delete rules.maxlength;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       metadataRules: function(element) {\r
+               if (!$.metadata) return {};\r
+\r
+               var meta = $.data(element.form, 'validator').settings.meta;\r
+               return meta ?\r
+                       $(element).metadata()[meta] :\r
+                       $(element).metadata();\r
+       },\r
+\r
+       staticRules: function(element) {\r
+               var rules = {};\r
+               var validator = $.data(element.form, 'validator');\r
+               if (validator.settings.rules) {\r
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};\r
+               }\r
+               return rules;\r
+       },\r
+\r
+       normalizeRules: function(rules, element) {\r
+               // handle dependency check\r
+               $.each(rules, function(prop, val) {\r
+                       // ignore rule when param is explicitly false, eg. required:false\r
+                       if (val === false) {\r
+                               delete rules[prop];\r
+                               return;\r
+                       }\r
+                       if (val.param || val.depends) {\r
+                               var keepRule = true;\r
+                               switch (typeof val.depends) {\r
+                                       case "string":\r
+                                               keepRule = !!$(val.depends, element.form).length;\r
+                                               break;\r
+                                       case "function":\r
+                                               keepRule = val.depends.call(element, element);\r
+                                               break;\r
+                               }\r
+                               if (keepRule) {\r
+                                       rules[prop] = val.param !== undefined ? val.param : true;\r
+                               } else {\r
+                                       delete rules[prop];\r
+                               }\r
+                       }\r
+               });\r
+\r
+               // evaluate parameters\r
+               $.each(rules, function(rule, parameter) {\r
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;\r
+               });\r
+\r
+               // clean number parameters\r
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = Number(rules[this]);\r
+                       }\r
+               });\r
+               $.each(['rangelength', 'range'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];\r
+                       }\r
+               });\r
+\r
+               if ($.validator.autoCreateRanges) {\r
+                       // auto-create ranges\r
+                       if (rules.min && rules.max) {\r
+                               rules.range = [rules.min, rules.max];\r
+                               delete rules.min;\r
+                               delete rules.max;\r
+                       }\r
+                       if (rules.minlength && rules.maxlength) {\r
+                               rules.rangelength = [rules.minlength, rules.maxlength];\r
+                               delete rules.minlength;\r
+                               delete rules.maxlength;\r
+                       }\r
+               }\r
+\r
+               // To support custom messages in metadata ignore rule methods titled "messages"\r
+               if (rules.messages) {\r
+                       delete rules.messages;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}\r
+       normalizeRule: function(data) {\r
+               if( typeof data == "string" ) {\r
+                       var transformed = {};\r
+                       $.each(data.split(/\s/), function() {\r
+                               transformed[this] = true;\r
+                       });\r
+                       data = transformed;\r
+               }\r
+               return data;\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod\r
+       addMethod: function(name, method, message) {\r
+               $.validator.methods[name] = method;\r
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];\r
+               if (method.length < 3) {\r
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));\r
+               }\r
+       },\r
+\r
+       methods: {\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/required\r
+               required: function(value, element, param) {\r
+                       // check if dependency is met\r
+                       if ( !this.depend(param, element) )\r
+                               return "dependency-mismatch";\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               // could be an array for select-multiple or a string, both are fine this way\r
+                               var val = $(element).val();\r
+                               return val && val.length > 0;\r
+                       case 'input':\r
+                               if ( this.checkable(element) )\r
+                                       return this.getLength(value, element) > 0;\r
+                       default:\r
+                               return $.trim(value).length > 0;\r
+                       }\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote\r
+               remote: function(value, element, param) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+\r
+                       var previous = this.previousValue(element);\r
+                       if (!this.settings.messages[element.name] )\r
+                               this.settings.messages[element.name] = {};\r
+                       previous.originalMessage = this.settings.messages[element.name].remote;\r
+                       this.settings.messages[element.name].remote = previous.message;\r
+\r
+                       param = typeof param == "string" && {url:param} || param;\r
+\r
+                       if ( this.pending[element.name] ) {\r
+                               return "pending";\r
+                       }\r
+                       if ( previous.old === value ) {\r
+                               return previous.valid;\r
+                       }\r
+\r
+                       previous.old = value;\r
+                       var validator = this;\r
+                       this.startRequest(element);\r
+                       var data = {};\r
+                       data[element.name] = value;\r
+                       $.ajax($.extend(true, {\r
+                               url: param,\r
+                               mode: "abort",\r
+                               port: "validate" + element.name,\r
+                               dataType: "json",\r
+                               data: data,\r
+                               success: function(response) {\r
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;\r
+                                       var valid = response === true;\r
+                                       if ( valid ) {\r
+                                               var submitted = validator.formSubmitted;\r
+                                               validator.prepareElement(element);\r
+                                               validator.formSubmitted = submitted;\r
+                                               validator.successList.push(element);\r
+                                               validator.showErrors();\r
+                                       } else {\r
+                                               var errors = {};\r
+                                               var message = response || validator.defaultMessage( element, "remote" );\r
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;\r
+                                               validator.showErrors(errors);\r
+                                       }\r
+                                       previous.valid = valid;\r
+                                       validator.stopRequest(element, valid);\r
+                               }\r
+                       }, param));\r
+                       return "pending";\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength\r
+               minlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength\r
+               maxlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength\r
+               rangelength: function(value, element, param) {\r
+                       var length = this.getLength($.trim(value), element);\r
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/min\r
+               min: function( value, element, param ) {\r
+                       return this.optional(element) || value >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/max\r
+               max: function( value, element, param ) {\r
+                       return this.optional(element) || value <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/range\r
+               range: function( value, element, param ) {\r
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/email\r
+               email: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/\r
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/url\r
+               url: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/\r
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/date\r
+               date: function(value, element) {\r
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO\r
+               dateISO: function(value, element) {\r
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/number\r
+               number: function(value, element) {\r
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits\r
+               digits: function(value, element) {\r
+                       return this.optional(element) || /^\d+$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard\r
+               // based on http://en.wikipedia.org/wiki/Luhn\r
+               creditcard: function(value, element) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+                       // accept only spaces, digits and dashes\r
+                       if (/[^0-9 -]+/.test(value))\r
+                               return false;\r
+                       var nCheck = 0,\r
+                               nDigit = 0,\r
+                               bEven = false;\r
+\r
+                       value = value.replace(/\D/g, "");\r
+\r
+                       for (var n = value.length - 1; n >= 0; n--) {\r
+                               var cDigit = value.charAt(n);\r
+                               var nDigit = parseInt(cDigit, 10);\r
+                               if (bEven) {\r
+                                       if ((nDigit *= 2) > 9)\r
+                                               nDigit -= 9;\r
+                               }\r
+                               nCheck += nDigit;\r
+                               bEven = !bEven;\r
+                       }\r
+\r
+                       return (nCheck % 10) == 0;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept\r
+               accept: function(value, element, param) {\r
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";\r
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo\r
+               equalTo: function(value, element, param) {\r
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated\r
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead\r
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {\r
+                               $(element).valid();\r
+                       });\r
+                       return value == target.val();\r
+               }\r
+\r
+       }\r
+\r
+});\r
+\r
+// deprecated, use $.validator.format instead\r
+$.format = $.validator.format;\r
+\r
+})(jQuery);\r
+\r
+// ajax mode: abort\r
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});\r
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()\r
+;(function($) {\r
+       var pendingRequests = {};\r
+       // Use a prefilter if available (1.5+)\r
+       if ( $.ajaxPrefilter ) {\r
+               $.ajaxPrefilter(function(settings, _, xhr) {\r
+                       var port = settings.port;\r
+                       if (settings.mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               pendingRequests[port] = xhr;\r
+                       }\r
+               });\r
+       } else {\r
+               // Proxy ajax\r
+               var ajax = $.ajax;\r
+               $.ajax = function(settings) {\r
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,\r
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;\r
+                       if (mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               return (pendingRequests[port] = ajax.apply(this, arguments));\r
+                       }\r
+                       return ajax.apply(this, arguments);\r
+               };\r
+       }\r
+})(jQuery);\r
+\r
+// provides cross-browser focusin and focusout events\r
+// IE has native support, in other browsers, use event caputuring (neither bubbles)\r
+\r
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation\r
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target\r
+;(function($) {\r
+       // only implement if not provided by jQuery core (since 1.4)\r
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs\r
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {\r
+               $.each({\r
+                       focus: 'focusin',\r
+                       blur: 'focusout'\r
+               }, function( original, fix ){\r
+                       $.event.special[fix] = {\r
+                               setup:function() {\r
+                                       this.addEventListener( original, handler, true );\r
+                               },\r
+                               teardown:function() {\r
+                                       this.removeEventListener( original, handler, true );\r
+                               },\r
+                               handler: function(e) {\r
+                                       arguments[0] = $.event.fix(e);\r
+                                       arguments[0].type = fix;\r
+                                       return $.event.handle.apply(this, arguments);\r
+                               }\r
+                       };\r
+                       function handler(e) {\r
+                               e = $.event.fix(e);\r
+                               e.type = fix;\r
+                               return $.event.handle.call(this, e);\r
+                       }\r
+               });\r
+       };\r
+       $.extend($.fn, {\r
+               validateDelegate: function(delegate, type, handler) {\r
+                       return this.bind(type, function(event) {\r
+                               var target = $(event.target);\r
+                               if (target.is(delegate)) {\r
+                                       return handler.apply(target, arguments);\r
+                               }\r
+                       });\r
+               }\r
+       });\r
+})(jQuery);\r
+\r
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)\r
+ * Licensed under the MIT License (LICENSE.txt).\r
+ *\r
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.\r
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.\r
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY\r
+ *\r
+ * Version: 3.0.6\r
+ * \r
+ * Requires: 1.2.2+\r
+ */\r
+\r
+(function($) {\r
+\r
+var types = ['DOMMouseScroll', 'mousewheel'];\r
+\r
+if ($.event.fixHooks) {\r
+    for ( var i=types.length; i; ) {\r
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;\r
+    }\r
+}\r
+\r
+$.event.special.mousewheel = {\r
+    setup: function() {\r
+        if ( this.addEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.addEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = handler;\r
+        }\r
+    },\r
+    \r
+    teardown: function() {\r
+        if ( this.removeEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.removeEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = null;\r
+        }\r
+    }\r
+};\r
+\r
+$.fn.extend({\r
+    mousewheel: function(fn) {\r
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");\r
+    },\r
+    \r
+    unmousewheel: function(fn) {\r
+        return this.unbind("mousewheel", fn);\r
+    }\r
+});\r
+\r
+\r
+function handler(event) {\r
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;\r
+    event = $.event.fix(orgEvent);\r
+    event.type = "mousewheel";\r
+    \r
+    // Old school scrollwheel delta\r
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }\r
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }\r
+    \r
+    // New school multidimensional scroll (touchpads) deltas\r
+    deltaY = delta;\r
+    \r
+    // Gecko\r
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {\r
+        deltaY = 0;\r
+        deltaX = -1*delta;\r
+    }\r
+    \r
+    // Webkit\r
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }\r
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }\r
+    \r
+    // Add event and delta to the front of the arguments\r
+    args.unshift(event, delta, deltaX, deltaY);\r
+    \r
+    return ($.event.dispatch || $.event.handle).apply(this, args);\r
+}\r
+\r
+})(jQuery);\r
+\r
+/*\r
+ * jScrollPane - v2.0.0beta12 - 2012-07-24\r
+ * http://jscrollpane.kelvinluck.com/\r
+ *\r
+ * Copyright (c) 2010 Kelvin Luck\r
+ * Dual licensed under the MIT and GPL licenses.\r
+ */\r
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);\r
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)\r
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()\r
 })}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js b/org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js
index 51471a1..3548cc2 100644 (file)
--- a/org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js
+++ b/org.tizen.gettingstarted/html/scripts/jquery.zclip.min.js
@@ -1,12 +1,12 @@
-/*
- * zClip :: jQuery ZeroClipboard v1.1.1
- * http://steamdev.com/zclip
- *
- * Copyright 2011, SteamDev
- * Released under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- *
- * Date: Wed Jun 01, 2011
- */
-
+/*\r
+ * zClip :: jQuery ZeroClipboard v1.1.1\r
+ * http://steamdev.com/zclip\r
+ *\r
+ * Copyright 2011, SteamDev\r
+ * Released under the MIT license.\r
+ * http://www.opensource.org/licenses/mit-license.php\r
+ *\r
+ * Date: Wed Jun 01, 2011\r
+ */\r
+\r
 (function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/html/scripts/navi.js b/org.tizen.gettingstarted/html/scripts/navi.js
index badc738..e4569c3 100644 (file)
--- a/org.tizen.gettingstarted/html/scripts/navi.js
+++ b/org.tizen.gettingstarted/html/scripts/navi.js
@@ -1,192 +1,192 @@
-//<![CDATA[
-    var staticURL = "http://img-developer.samsung.com";
-       var sslCall = "";
-
-       if('' !== 'N') {
-               var locationStr = location.href;
-               if(locationStr.indexOf("https://") > -1) {
-                       location.href = "http://" + locationStr.substring(8);
-               }     
-    }
-
-//     if( typeof($) === function ) {
-               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
-               //? ??? ?? ?? ??? ?? ?? ???.
-//     }
-    $SD.pagination.alt = {
-               first:"go first",
-               prev:"go prev",
-               next:"go next",
-               last:"go last"
-    };
-    $(document).ready(function(){
-       var myVar;
-           topSearchInit();//top search ??
-           $('#searchTop').attr("autocomplete","off");
-           var searchingBoolean = false;
-           
-           var topSearchChange = function(){
-               
-               if (searchingBoolean) return;
-               
-                       var searchInput = $('#searchTop').val();
-                       
-                       if($('#searchTop').val() != ""){
-                               $("#topAutocomplete").hide();
-                               searchingBoolean = true;
-                               
-                               var jsonData = {
-                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
-                                               async : true,
-                                               data : { searchInput : searchInput},
-                                               success : function(data){
-                                                       if (searchInput == $('#searchTop').val()){
-                                                               var autoComplete = data.kwdNm;
-                                                               var tmpHtml = "";
-                                                               
-                                                               if (autoComplete.length > 0){
-                                                                       $('#topAutocomplete').children().remove();
-                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
-                                                                       $.each(autoComplete, function(i, item){
-                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
-                                                                               a.data('keyword', item.kwdNm);
-                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
-                                                                       });
-                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
-                                                                               if(e.which == 9 && e.shiftKey) {
-                                                                                       return true;
-                                                                               }
-                                                                               
-                                                                               if(e.which == 9) {
-                                                                                       e.preventDefault();
-                                                                                       $('#topAutocomplete').hide();   
-                                                                                       setTimeout(function() {
-                                                                                               $("#searchTopBtn").focus();
-                                                                                       }, 1);
-                                                                               }
-                                                                               
-                                                                       });
-                                                                       $("#searchTopBtn").off("focusout", function(e) {});
-                                                                   $("#searchTopBtn").on("focusout", function(e) {
-                                                                               $('#topAutocomplete').hide();
-                                                                       });
-                                                               }else{
-                                                                       $('#topAutocomplete').children().remove();
-                                                               }
-                                                               if($('#searchTop').val() == ""){
-                                                                       $("#topAutocomplete").hide();
-                                                                       searchingBoolean = false;
-                                                                       return;
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               searchingBoolean = false;
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                               if (autoComplete.length == 0){
-                                                                       $("#topAutocomplete").hide();
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               $("#topAutocomplete").show();
-                                                                               var $searchList = $("#topAutocomplete").find('ul');
-                                                                               var hei = $searchList.outerHeight();
-                                                                               if(hei>180){
-                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
-                                                                               }
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                       }else{
-                                                               searchingBoolean = false;
-                                                               topSearchChange();
-                                                       }
-                                               },
-                                               error : function() {searchingBoolean = false;}
-                                               
-                               };
-                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
-                               $SD.ajax.get(jsonData);
-                               searchingBoolean = false;
-                       }
-                       
-                       //console.log("/search/autoComplete.do end");
-                       //console.groupEnd();
-               };
-               
-               $('#searchTop').keyup(function(e){
-                       if($('#searchTop').val() == ""){
-                               $('#topAutocomplete').children().remove();
-                               $("#topAutocomplete").hide();
-                       }else{
-                               if(e.which == 13){
-                                       search();
-                               }else{
-                                       topSearchChange();
-                               }
-                       }
-               });
-               
-               var search = function(){
-                       if($.trim($('#searchTop').val()) == ""){
-                               alert('Search keyword is required.');
-                       }else{
-                               $('#topSearchForm').submit();
-                       }
-               };
-               $("#topAutocomplete").on('mousedown','ul li a', function(e){
-                       e.preventDefault();
-                       var keyword = $(this).data('keyword');
-                       $("#searchTop").val(keyword);
-                       $('#topSearchForm').submit();
-               });
-               
-               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
-                       if(e.which == 13) {
-                               e.preventDefault();
-                               var keyword = $(this).data('keyword');
-                               $("#searchTop").val(keyword);
-                               $('#topSearchForm').submit();                   
-                       }
-               });
-               
-               $('#searchTopBtn').click(function(e){
-                       search();       
-               });  
-    });
-    
-    function topSearchEnter(){
-       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
-               alert('Search keyword is required.');
-               return false;
-       }else{
-               return true;
-       }
-    }
-
-/* Tracking Code TOTAL */
-               var _gaq = _gaq || [];
-               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
-               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
-               _gaq.push(['_setAccount', 'UA-6892706-3']);
-               _gaq.push(['_setDomainName', 'samsung.com']);
-               _gaq.push(['_setAllowLinker', true]);
-               _gaq.push(['_trackPageview']);
-               (function() {
-                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-               })();
-       
-               <!--// Tracking Code 1 -->
-                       var _gaq = _gaq || [];
-                       _gaq.push(['_setAccount', 'UA-6892706-4']);
-                       _gaq.push(['_trackPageview']);
-                       (function() {
-                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-                       })();
+//<![CDATA[\r
+    var staticURL = "http://img-developer.samsung.com";\r
+       var sslCall = "";\r
+\r
+       if('' !== 'N') {\r
+               var locationStr = location.href;\r
+               if(locationStr.indexOf("https://") > -1) {\r
+                       location.href = "http://" + locationStr.substring(8);\r
+               }     \r
+    }\r
+\r
+//     if( typeof($) === function ) {\r
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.\r
+               //? ??? ?? ?? ??? ?? ?? ???.\r
+//     }\r
+    $SD.pagination.alt = {\r
+               first:"go first",\r
+               prev:"go prev",\r
+               next:"go next",\r
+               last:"go last"\r
+    };\r
+    $(document).ready(function(){\r
+       var myVar;\r
+           topSearchInit();//top search ??\r
+           $('#searchTop').attr("autocomplete","off");\r
+           var searchingBoolean = false;\r
+           \r
+           var topSearchChange = function(){\r
+               \r
+               if (searchingBoolean) return;\r
+               \r
+                       var searchInput = $('#searchTop').val();\r
+                       \r
+                       if($('#searchTop').val() != ""){\r
+                               $("#topAutocomplete").hide();\r
+                               searchingBoolean = true;\r
+                               \r
+                               var jsonData = {\r
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",\r
+                                               async : true,\r
+                                               data : { searchInput : searchInput},\r
+                                               success : function(data){\r
+                                                       if (searchInput == $('#searchTop').val()){\r
+                                                               var autoComplete = data.kwdNm;\r
+                                                               var tmpHtml = "";\r
+                                                               \r
+                                                               if (autoComplete.length > 0){\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));\r
+                                                                       $.each(autoComplete, function(i, item){\r
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");\r
+                                                                               a.data('keyword', item.kwdNm);\r
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));\r
+                                                                       });\r
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {\r
+                                                                               if(e.which == 9 && e.shiftKey) {\r
+                                                                                       return true;\r
+                                                                               }\r
+                                                                               \r
+                                                                               if(e.which == 9) {\r
+                                                                                       e.preventDefault();\r
+                                                                                       $('#topAutocomplete').hide();   \r
+                                                                                       setTimeout(function() {\r
+                                                                                               $("#searchTopBtn").focus();\r
+                                                                                       }, 1);\r
+                                                                               }\r
+                                                                               \r
+                                                                       });\r
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});\r
+                                                                   $("#searchTopBtn").on("focusout", function(e) {\r
+                                                                               $('#topAutocomplete').hide();\r
+                                                                       });\r
+                                                               }else{\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                               }\r
+                                                               if($('#searchTop').val() == ""){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                                       searchingBoolean = false;\r
+                                                                       return;\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               searchingBoolean = false;\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                               if (autoComplete.length == 0){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               $("#topAutocomplete").show();\r
+                                                                               var $searchList = $("#topAutocomplete").find('ul');\r
+                                                                               var hei = $searchList.outerHeight();\r
+                                                                               if(hei>180){\r
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});\r
+                                                                               }\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                       }else{\r
+                                                               searchingBoolean = false;\r
+                                                               topSearchChange();\r
+                                                       }\r
+                                               },\r
+                                               error : function() {searchingBoolean = false;}\r
+                                               \r
+                               };\r
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);\r
+                               $SD.ajax.get(jsonData);\r
+                               searchingBoolean = false;\r
+                       }\r
+                       \r
+                       //console.log("/search/autoComplete.do end");\r
+                       //console.groupEnd();\r
+               };\r
+               \r
+               $('#searchTop').keyup(function(e){\r
+                       if($('#searchTop').val() == ""){\r
+                               $('#topAutocomplete').children().remove();\r
+                               $("#topAutocomplete").hide();\r
+                       }else{\r
+                               if(e.which == 13){\r
+                                       search();\r
+                               }else{\r
+                                       topSearchChange();\r
+                               }\r
+                       }\r
+               });\r
+               \r
+               var search = function(){\r
+                       if($.trim($('#searchTop').val()) == ""){\r
+                               alert('Search keyword is required.');\r
+                       }else{\r
+                               $('#topSearchForm').submit();\r
+                       }\r
+               };\r
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){\r
+                       e.preventDefault();\r
+                       var keyword = $(this).data('keyword');\r
+                       $("#searchTop").val(keyword);\r
+                       $('#topSearchForm').submit();\r
+               });\r
+               \r
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){\r
+                       if(e.which == 13) {\r
+                               e.preventDefault();\r
+                               var keyword = $(this).data('keyword');\r
+                               $("#searchTop").val(keyword);\r
+                               $('#topSearchForm').submit();                   \r
+                       }\r
+               });\r
+               \r
+               $('#searchTopBtn').click(function(e){\r
+                       search();       \r
+               });  \r
+    });\r
+    \r
+    function topSearchEnter(){\r
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){\r
+               alert('Search keyword is required.');\r
+               return false;\r
+       }else{\r
+               return true;\r
+       }\r
+    }\r
+\r
+/* Tracking Code TOTAL */\r
+               var _gaq = _gaq || [];\r
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';\r
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);\r
+               _gaq.push(['_setAccount', 'UA-6892706-3']);\r
+               _gaq.push(['_setDomainName', 'samsung.com']);\r
+               _gaq.push(['_setAllowLinker', true]);\r
+               _gaq.push(['_trackPageview']);\r
+               (function() {\r
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+               })();\r
+       \r
+               <!--// Tracking Code 1 -->\r
+                       var _gaq = _gaq || [];\r
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);\r
+                       _gaq.push(['_trackPageview']);\r
+                       (function() {\r
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+                       })();\r
diff --git a/org.tizen.gettingstarted/html/scripts/search.js b/org.tizen.gettingstarted/html/scripts/search.js
index d1ae5ad..a67a795 100644 (file)
--- a/org.tizen.gettingstarted/html/scripts/search.js
+++ b/org.tizen.gettingstarted/html/scripts/search.js
@@ -1,168 +1,168 @@
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
- */
-function searchInit()
-{
-       var focusTarget = "input";
-
-       //$("#autocomplete").hide();
-
-       //$("#searchInput").bind("keydown", checkSearchText);
-       
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $("#autocomplete").bind("mouseleave",function(){
-               $(this).hide();
-               $("#btnDropdown").removeClass("dropdownoff");
-               $("#btnDropdown").addClass("dropdown");         
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       //$(".autocomplete").css("visibility", "visible");
-                       $("#autocomplete").show();
-                       
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-               }
-               else{
-                       //$(".autocomplete").css("visibility", "hidden");
-                       $("#autocomplete").hide();
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
-
-
-
-function topSearchInit()
-{
-       var focusTarget = "input";
-
-       //$("#searchTop").bind("keydown", checkSearchText);
-       
-       $("#searchTop").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {       
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchTop" ).focusin( function()   {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchTop").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".topAutocomplete").css("visibility", "visible");
-               }else{
-                       $(".topAutocomplete").css("visibility", "hidden");
-                       $("#topAutocomplete").hide();
-               }
-       }
-}
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+ */\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#autocomplete").hide();\r
+\r
+       //$("#searchInput").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $("#autocomplete").bind("mouseleave",function(){\r
+               $(this).hide();\r
+               $("#btnDropdown").removeClass("dropdownoff");\r
+               $("#btnDropdown").addClass("dropdown");         \r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       //$(".autocomplete").css("visibility", "visible");\r
+                       $("#autocomplete").show();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+               }\r
+               else{\r
+                       //$(".autocomplete").css("visibility", "hidden");\r
+                       $("#autocomplete").hide();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+\r
+\r
+\r
+function topSearchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#searchTop").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchTop").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {       \r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchTop" ).focusin( function()   {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchTop").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".topAutocomplete").css("visibility", "visible");\r
+               }else{\r
+                       $(".topAutocomplete").css("visibility", "hidden");\r
+                       $("#topAutocomplete").hide();\r
+               }\r
+       }\r
+}\r
diff --git a/org.tizen.gettingstarted/html/scripts/showhide.js b/org.tizen.gettingstarted/html/scripts/showhide.js
index 2e85407..b882d14 100644 (file)
--- a/org.tizen.gettingstarted/html/scripts/showhide.js
+++ b/org.tizen.gettingstarted/html/scripts/showhide.js
@@ -1,204 +1,204 @@
-/*all Show Hide devicespecs List*/
-if($('div#contents').find('.devicespecs-util').length){
-var self = $('div#contents').find('.devicespecs-util');
-
-$('.showA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-var me = $(this);
-var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-if ( !me.next().is(':visible') ){
-       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-       me.find('em').text('Hide');
-       me.next().show();
-}
-});
-return false;
-})
-$('.hideA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-
-       var me = $(this);
-       var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-       if ( me.next().is(':visible') ){
-               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-               me.find('em').text('Show');
-               me.next().hide();
-       }
-                                       
-});
-return false;
-})
-}      
-
-/*toggle devicespecs List*/
-if($('div#contents').find('.devicespec-tit').length){
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-$('a', self).bind ("click", function(){
-       var idx = $('.devicespec-tit a').index(this);
-
-       if ( $(this).parent().parent().next().is(':visible') ){
-               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-               self.find('em').text('Show');
-               self.next().hide();
-
-               return false;
-       }else{
-               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-               self.find('em').text('Hide');
-
-               self.next().show();
-
-               return false;
-       }
-
-});
-
-});
-}
-
-$('ul.devicespecifications li div.devicespec-con').hide();
-
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-var arrow =  $('a', self);
-
-if(self.next().is(':visible')){
-arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
-self.find('em').text('Hide');
-}else{
-arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
-self.find('em').text('Show');
-}
-
-});
-
-$(document).ready(function(){
-       var openheading = function(target) {
-               var origin = $(target);
-               target = origin.closest('.devicespec-con');
-               if (!(target.length > 0)) {
-                       target = origin.closest('.devicespec-tit');
-               }
-               if (target.length > 0) {
-                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
-                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
-                       }
-               }
-
-               $(window.location.hash)[0].scrollIntoView();
-       };
-
-       $(".opensection").click(function(){
-               var target = $($(this).attr("href"));//.closest('.devicespec-con');
-               openheading(target);
-       });
-
-       if (window.location.hash) {
-               var target = $(window.location.hash);
-               openheading(target);
-               //$(target).focus(); //uncomment if fail to work
-       }
-
-       var isScrolledIntoView = function(elem)
-       {
-               var docViewTop = $('#contents').scrollTop();
-               var docViewBottom = docViewTop + $('#contents').height();
-
-               var elemTop = $(elem).offset().top;
-               var elemBottom = elemTop + $(elem).height();
-
-               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
-                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
-       }
-
-       $('#contents').scroll();
-
-       var checkBreadCrumbs = function() {
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-                       $('.help_breadcrumbs').hide();
-               } else {
-                       $('a.top.sms').hide();
-                       $('.help_breadcrumbs').show();
-               }
-               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
-       }       
-
-       var updateH = function(){
-               checkBreadCrumbs();
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
-
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
-               if ($('a.top').is(':visible'))
-               {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
-               } else {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
-               }
-               $('#toc').css('height', $('#toc').css('height') - 5);
-
-               $('#toc_border').height($('#toc').outerHeight() + 5);
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
-               //$('#toc').css('width', $('#toc_border').width() - 40);
-               $('#toc').css('width', $('#toc_border').width() - 49);
-       };
-
-       var updateH_no_toc = function() {
-               checkBreadCrumbs();
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-               } else {
-                       $('a.top.sms').hide();
-               }
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-       }
-
-       if ($('body').hasClass('no-toc')) {
-               updateH = updateH_no_toc;
-       }
-       $(window).resize(updateH);
-       $('#contents').scroll(updateH);
-       $(window).resize();
-       
-       $('a.top').click(function(){$('#contents').scrollTop(0)});
-
-       var hashchanged = function() {
-               if (window.location.hash.length) {
-                       openheading(window.location.hash);
-                       //$(window.location.hash).scrollTo();
-                       $(window.location.hash)[0].scrollIntoView();
-
-               } else 
-               {
-                       $('#contents').scrollTop(0);
-               }
-       };
-
-       if (("onhashchange" in window) && !($.browser.msie)) { 
-               $(window).bind( 'hashchange',hashchanged);
-       }
-       else { 
-               var prevHash = window.location.hash;
-               window.setInterval(function () {
-                       if (window.location.hash != prevHash) {
-                               hashchanged();
-                               prevHash = window.location.hash;
-                       }
-               }, 100);
-       }
-});
+/*all Show Hide devicespecs List*/\r
+if($('div#contents').find('.devicespecs-util').length){\r
+var self = $('div#contents').find('.devicespecs-util');\r
+\r
+$('.showA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+var me = $(this);\r
+var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+if ( !me.next().is(':visible') ){\r
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+       me.find('em').text('Hide');\r
+       me.next().show();\r
+}\r
+});\r
+return false;\r
+})\r
+$('.hideA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+\r
+       var me = $(this);\r
+       var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+       if ( me.next().is(':visible') ){\r
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+               me.find('em').text('Show');\r
+               me.next().hide();\r
+       }\r
+                                       \r
+});\r
+return false;\r
+})\r
+}      \r
+\r
+/*toggle devicespecs List*/\r
+if($('div#contents').find('.devicespec-tit').length){\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+$('a', self).bind ("click", function(){\r
+       var idx = $('.devicespec-tit a').index(this);\r
+\r
+       if ( $(this).parent().parent().next().is(':visible') ){\r
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+               self.find('em').text('Show');\r
+               self.next().hide();\r
+\r
+               return false;\r
+       }else{\r
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+               self.find('em').text('Hide');\r
+\r
+               self.next().show();\r
+\r
+               return false;\r
+       }\r
+\r
+});\r
+\r
+});\r
+}\r
+\r
+$('ul.devicespecifications li div.devicespec-con').hide();\r
+\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+var arrow =  $('a', self);\r
+\r
+if(self.next().is(':visible')){\r
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));\r
+self.find('em').text('Hide');\r
+}else{\r
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));\r
+self.find('em').text('Show');\r
+}\r
+\r
+});\r
+\r
+$(document).ready(function(){\r
+       var openheading = function(target) {\r
+               var origin = $(target);\r
+               target = origin.closest('.devicespec-con');\r
+               if (!(target.length > 0)) {\r
+                       target = origin.closest('.devicespec-tit');\r
+               }\r
+               if (target.length > 0) {\r
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {\r
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();\r
+                       }\r
+               }\r
+\r
+               $(window.location.hash)[0].scrollIntoView();\r
+       };\r
+\r
+       $(".opensection").click(function(){\r
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');\r
+               openheading(target);\r
+       });\r
+\r
+       if (window.location.hash) {\r
+               var target = $(window.location.hash);\r
+               openheading(target);\r
+               //$(target).focus(); //uncomment if fail to work\r
+       }\r
+\r
+       var isScrolledIntoView = function(elem)\r
+       {\r
+               var docViewTop = $('#contents').scrollTop();\r
+               var docViewBottom = docViewTop + $('#contents').height();\r
+\r
+               var elemTop = $(elem).offset().top;\r
+               var elemBottom = elemTop + $(elem).height();\r
+\r
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)\r
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );\r
+       }\r
+\r
+       $('#contents').scroll();\r
+\r
+       var checkBreadCrumbs = function() {\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+                       $('.help_breadcrumbs').hide();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+                       $('.help_breadcrumbs').show();\r
+               }\r
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));\r
+       }       \r
+\r
+       var updateH = function(){\r
+               checkBreadCrumbs();\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));\r
+\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+\r
+               if ($('a.top').is(':visible'))\r
+               {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);\r
+               } else {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);\r
+               }\r
+               $('#toc').css('height', $('#toc').css('height') - 5);\r
+\r
+               $('#toc_border').height($('#toc').outerHeight() + 5);\r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);\r
+               //$('#toc').css('width', $('#toc_border').width() - 40);\r
+               $('#toc').css('width', $('#toc_border').width() - 49);\r
+       };\r
+\r
+       var updateH_no_toc = function() {\r
+               checkBreadCrumbs();\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+               }\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               \r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+       }\r
+\r
+       if ($('body').hasClass('no-toc')) {\r
+               updateH = updateH_no_toc;\r
+       }\r
+       $(window).resize(updateH);\r
+       $('#contents').scroll(updateH);\r
+       $(window).resize();\r
+       \r
+       $('a.top').click(function(){$('#contents').scrollTop(0)});\r
+\r
+       var hashchanged = function() {\r
+               if (window.location.hash.length) {\r
+                       openheading(window.location.hash);\r
+                       //$(window.location.hash).scrollTo();\r
+                       $(window.location.hash)[0].scrollIntoView();\r
+\r
+               } else \r
+               {\r
+                       $('#contents').scrollTop(0);\r
+               }\r
+       };\r
+\r
+       if (("onhashchange" in window) && !($.browser.msie)) { \r
+               $(window).bind( 'hashchange',hashchanged);\r
+       }\r
+       else { \r
+               var prevHash = window.location.hash;\r
+               window.setInterval(function () {\r
+                       if (window.location.hash != prevHash) {\r
+                               hashchanged();\r
+                               prevHash = window.location.hash;\r
+                       }\r
+               }, 100);\r
+       }\r
+});\r
diff --git a/org.tizen.gettingstarted/html/tizen_websites.htm b/org.tizen.gettingstarted/html/tizen_websites.htm
index ea58e60..bc5f83a 100644 (file)
--- a/org.tizen.gettingstarted/html/tizen_websites.htm
+++ b/org.tizen.gettingstarted/html/tizen_websites.htm
@@ -9,7 +9,7 @@
        <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>\r
 
   <title>Tizen Web Sites </title>
 </head>
diff --git a/org.tizen.gettingstarted/html/web/details/details_w.htm b/org.tizen.gettingstarted/html/web/details/details_w.htm
index cf78fde..de7b12f 100644 (file)
--- a/org.tizen.gettingstarted/html/web/details/details_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/details_w.htm
@@ -43,7 +43,7 @@
        <li><a href="sec_privileges_w.htm">Security and API Privileges</a></li>
        <li><a href="app_filtering_w.htm">Application Filtering</a></li>
        <li><a href="web_runtime_w.htm">Web Runtime</a></li>
-       <li><a href="event_handling_w.htm">Event Handling</a> (in <span style="color: red">wearable applications only</span>)</li>      
+       <li><a href="event_handling_w.htm">Event Handling</a> (in <strong>wearable applications only</strong>)</li>     
 </ul>
 
 <h2 id="platform" name="platform">Tizen Platform Introduction</h2> 
diff --git a/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm b/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm
index 201c258..f800843 100644 (file)
--- a/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm
@@ -223,22 +223,10 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>The application can read the user&#39;s health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
 </tr>
 <tr>
-       <td class="key">http://tizen.org/privilege/ime</td>
-       <td>public</td>
-       <td>Providing input methods</td>
-       <td>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/keymanager</td>
-       <td>public</td>
-       <td>Using secure repository</td>
-       <td>The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.</td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/led</td>
+       <td class="key">http://tizen.org/privilege/internet</td>
        <td>public</td>
-       <td>Managing LEDs</td>
-       <td>The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.</td>
+       <td>Accessing Internet</td>
+       <td>The application can access the Internet.This can result in additional charges depending on the user&#39;s payment plan.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/location</td>
@@ -247,18 +235,6 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>The application can read the user&#39;s location information.</td>
 </tr>
 <tr>
-       <td class="key">http://tizen.org/privilege/mediacontroller.client</td>
-       <td>public</td>
-       <td>Controlling media player</td>
-       <td>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/mediacontroller.server</td>
-       <td>public</td>
-       <td>Accepting remote controls</td>
-       <td>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</td>
-</tr>
-<tr>
        <td class="key">http://tizen.org/privilege/messaging.read</td>
        <td>public</td>
        <td>Accessing messages</td>
@@ -358,14 +334,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td class="key">http://tizen.org/privilege/systemmanager</td>
        <td>partner</td>
        <td>Reading secure system information</td>
-       <td>The application can read secure system information.<strong>Deprecated since 2.3.1: Use "h
-ttp://tizen.org/privilege/telephony" instead.</strong></td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/telphony</td>
-       <td>partner</td>
-       <td>Accessing telephony information</td>
-       <td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.</strong></td>
+       <td>The application can read secure system information.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/volume.set</td>
@@ -377,7 +346,7 @@ ttp://tizen.org/privilege/telephony" instead.</strong></td>
        <td class="key">http://tizen.org/privilege/websetting</td>
        <td>public</td>
        <td>Managing web application settings</td>
-       <td>The application can change its Web application settings, including deleting cookies. <strong>Deprecated since 2.4.</strong></td>
+       <td>The application can change its Web application settings, including deleting cookies.</td>
 </tr>
 </tbody>
 </table>
@@ -488,36 +457,6 @@ ttp://tizen.org/privilege/telephony" instead.</strong></td>
        <td>The application can close other applications.</td>
 </tr>
 <tr>
-       <td class="key">http://tizen.org/privilege/bluetooth.admin</td>
-       <td>public</td>
-       <td>Managing Bluetooth general settings</td>
-       <td>The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name.</td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/bluetooth.gap</td>
-       <td>public</td>
-       <td>Using Bluetooth GAP</td>
-       <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices.</td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/bluetooth.health</td>
-       <td>public</td>
-       <td>Using Bluetooth HDP</td>
-       <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information.</td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/bluetooth.spp</td>
-       <td>public</td>
-       <td>Using Bluetooth SPP</td>
-       <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data.</td>
-</tr>
-<tr class="platform-level">
-       <td class="key">http://tizen.org/privilege/bluetoothmanager</td>
-       <td>platform</td>
-       <td>Managing Bluetooth system settings</td>
-       <td>The application can change Bluetooth system settings related to privacy and security, such as the visibility mode.</td>
-</tr>
-<tr>
        <td class="key">http://tizen.org/privilege/call</td>
        <td>public</td>
        <td>Making phone calls</td>
@@ -560,36 +499,12 @@ ttp://tizen.org/privilege/telephony" instead.</strong></td>
        <td>The application can read the user&#39;s health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
 </tr>
 <tr>
-       <td class="key">http://tizen.org/privilege/ime</td>
-       <td>public</td>
-       <td>Providing input methods</td>
-       <td>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/keymanager</td>
-       <td>public</td>
-       <td>Using secure repository</td>
-       <td>The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.</td>
-</tr>
-<tr>
        <td class="key">http://tizen.org/privilege/location</td>
        <td>public</td>
        <td>Using user location</td>
        <td>The application can read the user&#39;s location information.</td>
 </tr>
 <tr>
-       <td class="key">http://tizen.org/privilege/mediacontroller.client</td>
-       <td>public</td>
-       <td>Controlling media player</td>
-       <td>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/mediacontroller.server</td>
-       <td>public</td>
-       <td>Accepting remote controls</td>
-       <td>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</td>
-</tr>
-<tr>
        <td class="key">http://tizen.org/privilege/nfc.admin</td>
        <td>public</td>
        <td>Managing NFC general settings</td>
@@ -671,14 +586,7 @@ ttp://tizen.org/privilege/telephony" instead.</strong></td>
        <td class="key">http://tizen.org/privilege/systemmanager</td>
        <td>partner</td>
        <td>Reading secure system information</td>
-       <td>The application can read secure system information.<strong>Deprecated since 2.3.1: Use "h
-ttp://tizen.org/privilege/telephony" instead.</strong></td>
-</tr>
-<tr>
-       <td class="key">http://tizen.org/privilege/telphony</td>
-       <td>partner</td>
-       <td>Accessing telephony information</td>
-       <td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.</strong></td>
+       <td>The application can read secure system information.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/volume.set</td>
diff --git a/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm b/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm
index b73a16a..1baf132 100644 (file)
--- a/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm
@@ -150,12 +150,11 @@
        <tr> 
      <td>Web UI Framework</td> 
      <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features. 
-        <p>You can create and manage various kinds of UI widgets.</p></td> 
+        <p>You can create and manage various kinds of UI components.</p></td> 
      <td> 
       <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a></li>
-          <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW)</a></li>       
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Advanced UI Framework</a></li>     
+       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU</a></li> 
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Advanced UI Framework</a></li>      
       </ul></td> 
     </tr>      
    </tbody> 
@@ -268,12 +267,11 @@
        <tr> 
      <td>Web UI Framework</td> 
      <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features. 
-        <p>You can create and manage various kinds of UI widgets.</p></td> 
+        <p>You can create and manage various kinds of UI components.</p></td> 
      <td> 
       <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a></li>
-          <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW)</a></li>       
-          <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Advanced UI Framework</a></li>          
+       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU</a></li> 
+          <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Advanced UI Framework</a></li>           
       </ul></td> 
     </tr>      
    </tbody> 
@@ -300,8 +298,7 @@
      <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible and multi-column layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td> 
      <td> 
       <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a></li> 
-       <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</a></li>  
+       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
        <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles</a></li> 
       </ul></td> 
     </tr>
@@ -370,8 +367,7 @@
      <td>These APIs enable you to copy content and paste it in an editable area, create and manage draggable elements, and implement drag events.</td> 
      <td> 
       <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">UI</a></li> 
-       <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm">UI</a></li>  
+       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
        <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI</a></li> 
       </ul></td> 
     </tr>
@@ -430,8 +426,7 @@
      <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td> 
      <td> 
       <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a></li> 
-       <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</a></li>  
+       <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a></li>  
        <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles</a></li> 
       </ul></td> 
     </tr>
diff --git a/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm b/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm
index 44a2c9f..7d814f0 100644 (file)
--- a/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm
@@ -174,7 +174,7 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
                        <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacapture</span></td>
                </tr>
                <tr>
-                       <td>Web Notifications (<span style="color: red">in mobile applications only</span>)</td>
+                       <td>Web Notifications (<strong>in mobile applications only</strong>)</td>
                        <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></td>
                        <td rowspan="2"><strong>Local domain</strong>: Grant permission if defined, otherwise popup user prompt.<p><strong>Remote domain</strong>: Popup user prompt.</p></td>
                </tr>
@@ -183,18 +183,18 @@ The <span style="font-family: Courier New,Courier,monospace;">&lt;feature&gt;</s
                        <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/unlimitedstorage</span></td>
                </tr>
                <tr>
-                       <td>FullScreen (<span style="color: red">in mobile applications only</span>)</td>
+                       <td>FullScreen (<strong>in mobile applications only</strong>)</td>
                        <td><span style="font-family: Courier New,Courier,monospace;">hhttp://tizen.org/privilege/fullscreen</span></td>
                        <td>If defined, launch in fullscreen mode. If not defined, launch fullscreen mode according to user input (which depends on the content).</td>
                </tr>
                <tr>
-                       <td>Audio Recording (<span style="color: red">in wearable applications only</span>)</td>
+                       <td>Audio Recording (<strong>in wearable applications only</strong>)</td>
                        <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/audiorecorder</span></td>
                        <td rowspan="2"><strong>Local domain</strong>: Grant permission if defined, otherwise block execution.<p><strong>Remote domain</strong>: Block execution. </p>
 </td>
                </tr>
                <tr>
-                       <td>Video Recording (<span style="color: red">in wearable applications only</span>)</td>
+                       <td>Video Recording (<strong>in wearable applications only</strong>)</td>
                        <td><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></td>     
                </tr>
        </tbody>
diff --git a/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm b/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm
index 16c0852..439bab2 100644 (file)
--- a/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm
+++ b/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm
@@ -1,161 +1,161 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Creating Your First Tizen Application</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#webapp">Creating Your First Mobile Web App</a></li>
-                       <li><a href="#wearapp">Creating Your First Wearable Web App</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Creating Your First Tizen Application</h1>
-
-<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>
-               
-
-<h2 id="webapp" name="webapp">Creating Your First Mobile Web App</h2>
-
-  <p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p> 
-  <p>When you are developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p> 
-  <h3 id="create" name="create">To Create a HelloWorld Application</h3> 
-  <ol class="tutorstep"> 
-   <li>Creating the HelloWorld Project 
-    <ol type="a"> 
-     <li>Launch the <strong>Tizen IDE</strong>.</li> 
-     <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Web Project</strong> window, select <strong>Template &gt; MOBILE-&lt;version&gt; &gt; Basic Application</strong>.</p> </li> 
-     <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li> 
-    </ol> <p>The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p> 
-    <ul> 
-     <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS files directory</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript files directory</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">config.xml</span> file: Application configuration file</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">icon.png</span> file: Icon file</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">index.html</span> file: Default HTML file</li> 
-    </ul> </li> 
-   <li>Configuring the Application and Creating the Application Code 
-   <p>The Web project source files already contain the basic application functionality.</p> 
-   <p>The automatically-included code creates an application with the title &quot;Application Name&quot;. To change the title to HelloWorld, take the following steps (illustrated in the following figure):</p> 
-    <ol type="a"> 
-     <li>Open <span style="font-family: Courier New,Courier,monospace">index.html</span> (1). </li> 
-     <li>Locate the title in the code and change &quot;Application Name&quot; into &quot;HelloWorld&quot; (2).</li> 
-    </ol> <p class="figure">Figure: HelloWorld project</p> <p align="center"> <img alt="HelloWorld project" src="../../images/helloworld_index.png" /> </p> 
-       <p>You also have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#design">design the application UI</a>.</p> </li> 
-       
-   <li>Building and Packaging the Application 
-   <p>After you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> 
-   <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> file.</p> </li> 
-   
-   <li>Running and Debugging the Application on the Emulator 
-   <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a>, <a href="../process/run_debug_app_w.htm#simulator">Simulator</a>, or <a href="../process/run_debug_app_w.htm#target">real target device</a>.</p>
-   <p>The following figure shows the Web application running in the Emulator.</p> <p class="figure">Figure: Running the project</p> <p align="center"> <img alt="Running the project" src="../../images/running_project.png" /> </p> 
-   <p>On a real target device, you can use the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li> 
-  </ol> 
-
-  <h2 id="wearapp" name="wearapp">Creating Your First Wearable Web App</h2>
-
-  <p>This tutorial demonstrates how you can create a simple Hello application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web <a href="../process/app_dev_process_w.htm">application development process</a> and use the Tizen SDK, installing the created application on the Emulator or a target device.</p> 
-  <p>When developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to make creating functionality and designing the application UI easier.</p> 
-
-  <h3 id="create_ww" name="create_ww">To Create a Hello Application</h3>
-  <ol class="tutorstep"> 
-   <li>Creating the Hello Project 
-    <ol type="a"> 
-     <li>Launch the <strong>Tizen IDE</strong>.</li> 
-     <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>To use the Wearable UI project template, in the <strong>New Tizen Wearable Web Project</strong> window, select <strong>Template &gt; WEARABLE-&lt;version&gt; &gt; Basic</strong>.</p> </li> 
-     <li>Define <strong>Hello</strong> as the name of your project and click <strong>Finish</strong>.</li> 
-    </ol> 
-<p class="figure">Figure: Creating the Hello project</p> <p align="center"> <img alt="Creating the Hello project" src="../../images/hello_wearable.png" /> </p>  
-
-<p> The new <strong>Hello</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p> 
-    <ul> 
-     <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS file directory</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript file directory</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">lib</span> folder: Tizen wearable UI framework directory
-               <ul>
-         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/default/tau.min.css</span>: Release version of the Tizen wearable UI theme </li>
-         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/wearable/js/tau.min.js</span>: Release version of the Tizen wearable UI library </li>
-         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/default/tau.css</span>: Debug version of the Tizen wearable UI theme </li>
-        <li><span style="font-family: Courier New,Courier,monospace">lib/tau/wearable/js/tau.js</span>: Debug version of the Tizen wearable UI library </li>
-               </ul>
-     </li> 
-     <li><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Icon file</li> 
-     <li><span style="font-family: Courier New,Courier,monospace">index.html</span>: Default HTML file</li> 
-       
-    </ul> </li>
-   <li>Configuring the Application and Creating the Application Code 
-    <p>The Web project source files already contain the basic application functionality.</p>
-       <ol type="a">
-      <li>Open the <span style="font-family: Courier New,Courier,monospace">index.html</span> file (1).</li>
-         <li>Set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag (2).</li>
-         <li>Add the <span style="font-family: Courier New,Courier,monospace">tau.min.css</span> file (3).
-         <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li>
-         <li>Add a link to the <span style="font-family: Courier New,Courier,monospace">tau.min.js</span> file in the <span style="font-family: Courier New,Courier,monospace">script</span> element (4).
-         <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li></ol>
-
-<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace">index.html</span> file</p> <p align="center"> <img alt="index.html file" src="../../images/hello_wearable_js.png" /> </p>  
-
-
-    <p>You have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#code">code the application features</a>.</p> </li> 
-  
-
-  <li>Creating a Layout using the Wearable UI Theme 
-  <p>In the Wearable UI, each scene is named a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">page</a>. When you include the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class attribute in a <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.</p>
-<p>For more information about the Tizen wearable UI layout and components, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework Reference</a>.</p> </li>
-
- <li>Building and Packaging the Application 
- <p>When you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> package file.</p> </li> 
-   <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a> or a real <a href="../process/run_debug_app_w.htm#target">target device</a>. </p><p>The following figure shows the Web application running in the Emulator.</p> 
-   
-   <p class="figure">Figure: Running the project</p> <p align="center"> <img alt="Running the project" src="../../images/hello_wearable_emulator.png" /> </p> 
-   
-   <p>On a real target device, you can use the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li> 
-  </ol>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Creating Your First Tizen Application</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#webapp">Creating Your First Mobile Web App</a></li>\r
+                       <li><a href="#wearapp">Creating Your First Wearable Web App</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Creating Your First Tizen Application</h1>\r
+\r
+<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>\r
+               \r
+\r
+<h2 id="webapp" name="webapp">Creating Your First Mobile Web App</h2>\r
+\r
+  <p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p> \r
+  <p>When you are developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p> \r
+  <h3 id="create" name="create">To Create a HelloWorld Application</h3> \r
+  <ol class="tutorstep"> \r
+   <li>Creating the HelloWorld Project \r
+    <ol type="a"> \r
+     <li>Launch the <strong>Tizen IDE</strong>.</li> \r
+     <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Web Project</strong> window, select <strong>Template &gt; MOBILE-&lt;version&gt; &gt; Basic Application</strong>.</p> </li> \r
+     <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li> \r
+    </ol> <p>The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p> \r
+    <ul> \r
+     <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS files directory</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript files directory</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">config.xml</span> file: Application configuration file</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">icon.png</span> file: Icon file</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">index.html</span> file: Default HTML file</li> \r
+    </ul> </li> \r
+   <li>Configuring the Application and Creating the Application Code \r
+   <p>The Web project source files already contain the basic application functionality.</p> \r
+   <p>The automatically-included code creates an application with the title &quot;Application Name&quot;. To change the title to HelloWorld, take the following steps (illustrated in the following figure):</p> \r
+    <ol type="a"> \r
+     <li>Open <span style="font-family: Courier New,Courier,monospace">index.html</span> (1). </li> \r
+     <li>Locate the title in the code and change &quot;Application Name&quot; into &quot;HelloWorld&quot; (2).</li> \r
+    </ol> <p class="figure">Figure: HelloWorld project</p> <p align="center"> <img alt="HelloWorld project" src="../../images/helloworld_index.png" /> </p> \r
+       <p>You also have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#design">design the application UI</a>.</p> </li> \r
+       \r
+   <li>Building and Packaging the Application \r
+   <p>After you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> \r
+   <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> file.</p> </li> \r
+   \r
+   <li>Running and Debugging the Application on the Emulator \r
+   <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a>, <a href="../process/run_debug_app_w.htm#simulator">Simulator</a>, or <a href="../process/run_debug_app_w.htm#target">real target device</a>.</p>\r
+   <p>The following figure shows the Web application running in the Emulator.</p> <p class="figure">Figure: Running the project</p> <p align="center"> <img alt="Running the project" src="../../images/running_project.png" /> </p> \r
+   <p>On a real target device, you can use the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li> \r
+  </ol> \r
+\r
+  <h2 id="wearapp" name="wearapp">Creating Your First Wearable Web App</h2>\r
+\r
+  <p>This tutorial demonstrates how you can create a simple Hello application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web <a href="../process/app_dev_process_w.htm">application development process</a> and use the Tizen SDK, installing the created application on the Emulator or a target device.</p> \r
+  <p>When developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to make creating functionality and designing the application UI easier.</p> \r
+\r
+  <h3 id="create_ww" name="create_ww">To Create a Hello Application</h3>\r
+  <ol class="tutorstep"> \r
+   <li>Creating the Hello Project \r
+    <ol type="a"> \r
+     <li>Launch the <strong>Tizen IDE</strong>.</li> \r
+     <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>To use the Wearable UI project template, in the <strong>New Tizen Wearable Web Project</strong> window, select <strong>Template &gt; WEARABLE-&lt;version&gt; &gt; Basic</strong>.</p> </li> \r
+     <li>Define <strong>Hello</strong> as the name of your project and click <strong>Finish</strong>.</li> \r
+    </ol> \r
+<p class="figure">Figure: Creating the Hello project</p> <p align="center"> <img alt="Creating the Hello project" src="../../images/hello_wearable.png" /> </p>  \r
+\r
+<p> The new <strong>Hello</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p> \r
+    <ul> \r
+     <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS file directory</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript file directory</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">lib</span> folder: Tizen wearable UI framework directory\r
+               <ul>\r
+         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/default/tau.min.css</span>: Release version of the Tizen wearable UI theme </li>\r
+         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/wearable/js/tau.min.js</span>: Release version of the Tizen wearable UI library </li>\r
+         <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/default/tau.css</span>: Debug version of the Tizen wearable UI theme </li>\r
+        <li><span style="font-family: Courier New,Courier,monospace">lib/tau/wearable/js/tau.js</span>: Debug version of the Tizen wearable UI library </li>\r
+               </ul>\r
+     </li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Icon file</li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">index.html</span>: Default HTML file</li> \r
+       \r
+    </ul> </li>\r
+   <li>Configuring the Application and Creating the Application Code \r
+    <p>The Web project source files already contain the basic application functionality.</p>\r
+       <ol type="a">\r
+      <li>Open the <span style="font-family: Courier New,Courier,monospace">index.html</span> file (1).</li>\r
+         <li>Set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag (2).</li>\r
+         <li>Add the <span style="font-family: Courier New,Courier,monospace">tau.min.css</span> file (3).\r
+         <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li>\r
+         <li>Add a link to the <span style="font-family: Courier New,Courier,monospace">tau.min.js</span> file in the <span style="font-family: Courier New,Courier,monospace">script</span> element (4).\r
+         <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li></ol>\r
+\r
+<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace">index.html</span> file</p> <p align="center"> <img alt="index.html file" src="../../images/hello_wearable_js.png" /> </p>  \r
+\r
+\r
+    <p>You have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#code">code the application features</a>.</p> </li> \r
+  \r
+\r
+  <li>Creating a Layout using the Wearable UI Theme \r
+  <p>In the Wearable UI, each scene is named a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">page</a>. When you include the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class attribute in a <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.</p>\r
+<p>For more information about the Tizen wearable UI layout and components, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework Reference</a>.</p> </li>\r
+\r
+ <li>Building and Packaging the Application \r
+ <p>When you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> package file.</p> </li> \r
+   <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a> or a real <a href="../process/run_debug_app_w.htm#target">target device</a>. </p><p>The following figure shows the Web application running in the Emulator.</p> \r
+   \r
+   <p class="figure">Figure: Running the project</p> <p align="center"> <img alt="Running the project" src="../../images/hello_wearable_emulator.png" /> </p> \r
+   \r
+   <p>On a real target device, you can use the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li> \r
+  </ol>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm b/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm
index ece17bb..d992d3b 100644 (file)
--- a/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm
@@ -65,7 +65,7 @@
 
 <h2 id="design" name="design" >Designing the Application UI</h2>
 
-<p>You can design the application UI using the components defined in the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Web UI Framework Reference</a>.</p>
+<p>You can design the application UI using the UI components defined in the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a>.</p>
 
 <h2 id="code" name="code">Coding the Application</h2>
 
@@ -243,15 +243,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
   <!--start--> 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   <!--end-->  
  </body>
diff --git a/org.tizen.gettingstarted/html/web/process/coding_app_w.htm b/org.tizen.gettingstarted/html/web/process/coding_app_w.htm
index 4fe810d..882a048 100644 (file)
--- a/org.tizen.gettingstarted/html/web/process/coding_app_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/coding_app_w.htm
@@ -83,15 +83,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
   <!--start--> 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   <!--end-->  
  </body>
diff --git a/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm b/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm
index 6910f82..f5e4302 100644 (file)
--- a/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm
@@ -149,15 +149,15 @@
 </div>
 
   <!--start--> 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   <!--end-->  
  </body>
diff --git a/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm b/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm
index 0e1954e..f8e4acf 100644 (file)
--- a/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm
@@ -227,15 +227,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
   <!--start--> 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   <!--end-->  
  </body>
diff --git a/org.tizen.gettingstarted/plugin.xml b/org.tizen.gettingstarted/plugin.xml
index 4e5954f..ceb36b2 100644 (file)
--- a/org.tizen.gettingstarted/plugin.xml
+++ b/org.tizen.gettingstarted/plugin.xml
@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?eclipse version="3.0"?>
-
-<plugin>
-       <extension point="org.eclipse.help.toc">
-               <toc file="index.xml" primary="true" />
-       </extension>    
-</plugin>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<?eclipse version="3.0"?>\r
+\r
+<plugin>\r
+       <extension point="org.eclipse.help.toc">\r
+               <toc file="index.xml" primary="true" />\r
+       </extension>    \r
+</plugin>\r
diff --git a/org.tizen.guides/.project b/org.tizen.guides/.project
index 70df182..ca51e3b 100644 (file)
--- a/org.tizen.guides/.project
+++ b/org.tizen.guides/.project
@@ -1,22 +1,22 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-       <name>org.tizen.guides_2.4.0</name>
-       <comment></comment>
-       <projects>
-       </projects>
-       <buildSpec>
-               <buildCommand>
-                       <name>org.eclipse.pde.ManifestBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.eclipse.pde.SchemaBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-       </buildSpec>
-       <natures>
-               <nature>org.eclipse.pde.PluginNature</nature>
-       </natures>
-</projectDescription>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<projectDescription>\r
+       <name>org.tizen.guides_2.4.0</name>\r
+       <comment></comment>\r
+       <projects>\r
+       </projects>\r
+       <buildSpec>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.ManifestBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.SchemaBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+       </buildSpec>\r
+       <natures>\r
+               <nature>org.eclipse.pde.PluginNature</nature>\r
+       </natures>\r
+</projectDescription>\r
diff --git a/org.tizen.guides/META-INF/MANIFEST.MF b/org.tizen.guides/META-INF/MANIFEST.MF
index be4b85a..eac406e 100644 (file)
--- a/org.tizen.guides/META-INF/MANIFEST.MF
+++ b/org.tizen.guides/META-INF/MANIFEST.MF
@@ -1,7 +1,7 @@
-Manifest-Version: 1.0
-Bundle-ManifestVersion: 1
-Bundle-Name: Tizen Guides
-Bundle-SymbolicName: org.tizen.guides;singleton=true
-Bundle-Version: 2.4.0
-Bundle-Vendor: The Linux Foundation
-
+Manifest-Version: 1.0\r
+Bundle-ManifestVersion: 1\r
+Bundle-Name: Tizen Guides\r
+Bundle-SymbolicName: org.tizen.guides;singleton=true\r
+Bundle-Version: 2.4.0\r
+Bundle-Vendor: The Linux Foundation\r
+\r
diff --git a/org.tizen.guides/build.properties b/org.tizen.guides/build.properties
index b84ff38..264c2a1 100644 (file)
--- a/org.tizen.guides/build.properties
+++ b/org.tizen.guides/build.properties
@@ -1,8 +1,8 @@
-bin.includes = plugin.xml,\
-               META-INF/,\
-               html/,\
-               build.properties,\
-               .project,\
-                          about.html,\
-               index.xml
-
+bin.includes = plugin.xml,\\r
+               META-INF/,\\r
+               html/,\\r
+               build.properties,\\r
+               .project,\\r
+                          about.html,\\r
+               index.xml\r
+\r
diff --git a/org.tizen.guides/html/css/snippet.css b/org.tizen.guides/html/css/snippet.css
index f880409..2be1b1f 100644 (file)
--- a/org.tizen.guides/html/css/snippet.css
+++ b/org.tizen.guides/html/css/snippet.css
@@ -1,52 +1,52 @@
-/* Pretty printing styles. Used with prettify.js. */
-
-/* SPAN elements with the classes below are added by prettyprint. */
-.pln { color: #000 }  /* plain text */
-
-@media screen {
-  .str { color: #793AFF }  /* string content */
-  .kwd { color: #7F0055 }  /* a keyword */
-  .com { color: green}  /* a comment */
-  .typ { color: #1C1C1C }  /* a type name */
-  .lit { color: black }  /* a literal value */
-  /* punctuation, lisp open bracket, lisp close bracket */
-  .pun, .opn, .clo { color: #1C1C1C}
-  .tag { color: #008 }  /* a markup tag name */
-  .atn { color: #606 }  /* a markup attribute name */
-  .atv { color: #080 }  /* a markup attribute value */
-  .dec, .var { color: #606 }  /* a declaration; a variable name */
-  .fun { color: red }  /* a function name */
-}
-
-/* Use higher contrast and text-weight for printable form. */
-@media print, projection {
-  .str { color: #060 }
-  .kwd { color: #006; font-weight: bold }
-  .com { color: #600; font-style: italic }
-  .typ { color: #404; font-weight: bold }
-  .lit { color: #044 }
-  .pun, .opn, .clo { color: #440 }
-  .tag { color: #006; font-weight: bold }
-  .atn { color: #404 }
-  .atv { color: #060 }
-}
-
-/* Put a border around prettyprinted code snippets. */
-pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L5,
-li.L6,
-li.L7,
-li.L8 { list-style-type: none }
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 { background: #eee }
+/* Pretty printing styles. Used with prettify.js. */\r
+\r
+/* SPAN elements with the classes below are added by prettyprint. */\r
+.pln { color: #000 }  /* plain text */\r
+\r
+@media screen {\r
+  .str { color: #793AFF }  /* string content */\r
+  .kwd { color: #7F0055 }  /* a keyword */\r
+  .com { color: green}  /* a comment */\r
+  .typ { color: #1C1C1C }  /* a type name */\r
+  .lit { color: black }  /* a literal value */\r
+  /* punctuation, lisp open bracket, lisp close bracket */\r
+  .pun, .opn, .clo { color: #1C1C1C}\r
+  .tag { color: #008 }  /* a markup tag name */\r
+  .atn { color: #606 }  /* a markup attribute name */\r
+  .atv { color: #080 }  /* a markup attribute value */\r
+  .dec, .var { color: #606 }  /* a declaration; a variable name */\r
+  .fun { color: red }  /* a function name */\r
+}\r
+\r
+/* Use higher contrast and text-weight for printable form. */\r
+@media print, projection {\r
+  .str { color: #060 }\r
+  .kwd { color: #006; font-weight: bold }\r
+  .com { color: #600; font-style: italic }\r
+  .typ { color: #404; font-weight: bold }\r
+  .lit { color: #044 }\r
+  .pun, .opn, .clo { color: #440 }\r
+  .tag { color: #006; font-weight: bold }\r
+  .atn { color: #404 }\r
+  .atv { color: #060 }\r
+}\r
+\r
+/* Put a border around prettyprinted code snippets. */\r
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }\r
+\r
+/* Specify class=linenums on a pre to get line numbering */\r
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */\r
+li.L0,\r
+li.L1,\r
+li.L2,\r
+li.L3,\r
+li.L5,\r
+li.L6,\r
+li.L7,\r
+li.L8 { list-style-type: none }\r
+/* Alternate shading for lines */\r
+li.L1,\r
+li.L3,\r
+li.L5,\r
+li.L7,\r
+li.L9 { background: #eee }\r
diff --git a/org.tizen.guides/html/css/styles.css b/org.tizen.guides/html/css/styles.css
index c279fcf..ad7ebcb 100644 (file)
--- a/org.tizen.guides/html/css/styles.css
+++ b/org.tizen.guides/html/css/styles.css
@@ -1,780 +1,756 @@
-@charset "utf-8";
-
-body {
-       background: white;
-       color: #1C1C1C;
-       margin-right: 20px;
-       margin-left: 20px;
-       font-size: 9pt;
-       font-weight: normal;
-       font-family: Arial, Helvetica, sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
-       font-family: Arial, Verdana, Helvetica, sans-serif
-       }
-
-/*     Set default font to 9 pt        */
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
-       font-size: 9pt;
-}
-       
-pre, code { 
-       font-family: "Courier New", Courier, monospace;
-       border: 1px solid #719cc7;
-       margin: 6px 1.5px;
-       padding: 1px 1px 1px 1px;
-       font-weight: normal;
-       font-style: normal;
-}
-
-h1 {font-size: 24pt; color: #0E437D;}
-h2 {font-size: 18pt; color: #0E437D;}
-h3 {font-size: 14pt; color: #1C1C1C;}
-h4 {font-size: 12pt; color: #1C1C1C;}
-h5 {font-size: 10pt; color: #1C1C1C;}
-       
-h1, h2, h3, h4, h5 {
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-
-caption, p.caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: left;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-ol  {
-       margin-bottom: 20px;
-}
-
-ul ul , ol ul, ul ol, ol ol{
-       margin-top: 10px;
-}
-
-ul li, ol li {
-       margin-bottom: 10px;
-}
-
-ol.tutorstep li {
-       border-top: 2px solid #719cc7;
-       list-style-position: inside;
-       font-weight: bold;
-       margin-top: 30px;
-       margin-left: -20px;
-       padding-top: 3px;
-       font-size: 12pt;
-}
-
-ol.tutorstep li p{
-       font-size: 9pt;
-       font-weight: normal;
-       margin-top: 10px;
-}
-
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
-       font-size: 9pt;
-       list-style-position: outside; 
-       margin-left: 0px;
-       font-weight: normal;
-}
-
-ol.tutorstep ol li p, ol.tutorstep ul li p {
-       font-size: 9pt;
-       font-weight: normal; 
-       margin-top: 5px;
-}
-
-ol li p, ul li p {
-       font-size: 9pt;
-       font-weight: normal;
-       margin-bottom: 2px;
-       margin-top: 2px;
-}
-
-ol ol , ol.tutorstep ol{
-       font-size: 9pt;
-       font-weight: normal;
-       list-style-type: lower-alpha;
-       color: #1C1C1C; 
-       border-style: none;
-       margin-top: 10px; 
-}
-
-ol.tutorstep ul {
-       margin-top: 10px;
-       font-size: 9pt;
-}
-
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
-       border-style: none;
-       margin-top: 5px;
-       font-size: 9pt;
-}
-
-ul {
-       font-size: 9pt;
-       font-weight: normal;
-       color: #1C1C1C;
-}
-
-
-/*     End of font face declarations   */
-
-/*     Set table borders and heading row background    */
-table {
-       border: 0px;
-       border-collapse: collapse;
-       width: 100%;
-       margin-top: 20px;
-       margin-bottom: 20px;
-       background: white;
-}
-
-th {
-       border-top: 2px solid #719cc7;
-       border-right: 1px solid #c6d9f1;
-       border-left: 1px solid #c6d9f1;
-       background-color: #f3f7fb;
-       padding: 4px;
-       color: #719cc7;
-       font-size: 9pt;
-       font-weight: bold;
-}      
-       
-td {
-       border: 1px solid #c6d9f1;
-       vertical-align:top;
-       padding: 3px 20px 5px 20px;
-       }
-
-td.middle {
-       border: 1px solid #c6d9f1;
-       vertical-align:middle;
-       padding: 3px 20px 5px 20px;
-       }       
-       
-/*     Notes stand out using a light top & bottom borders with yellow background       */
-table.note {
-       border-top: 2px solid #719cc7;
-       border-left: 0px;
-       border-right: 0px;
-       width: 100%;
-}
-
-tr.note {
-       text-align: left;
-}
-
-th.note {
-       text-align: left;
-       background-color: #ddd9c3;
-       background-image: note.gif;
-       border-top: 2px solid #719cc7;
-       border-bottom:1px solid #719cc7;
-       border-right: none;
-
-}
-
-td.note, p.note {
-       background-color: #eeece1;
-       color: #1C1C1C;
-       padding: 5px;
-       margin-top:12px;
-       margin-bottom:12px;
-       border: none;
-}
-       
-/*     Figure titles are centered and bolded   */
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
-       text-align: center;
-       font-weight: bold;
-}
-
-/*     Red background and white text for things that need fixing before release        */
-.fix   {
-       background-color: red;
-       font-weight: bold;
-       color: white;
-       }
-
-/* Classes for creating collapsible content */
-#banner {
-       padding: 8px 4px 8px 4px;
-       /* top right bottom left */
-       border: 1px solid #7f7f7f;
-       width: 100%;
-       background-image: url("banner.png");
-       text-align: left;
-       font-weight: bold;
-       font-size: 9pt;
-       color: #ffffff;
-}
-
-#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
-#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
-#main {width: 75%; height: 90%;}
-#container {width:100%;}
-#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
-body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #toc-navigation {width: auto;}
-body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
-body.no-toc #profile {float: right;right: -32px;}
-body.no-toc #profile p {padding: 0; margin: 0;}
-#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
-       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
-       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
-
-.devicespecs-util {float:right; margin-top:25px;}
-       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
-       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
-       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
-       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
-       .devicespecs-util ul.dutil li a:hover { color:#222; }
-       .devicespecs-util ul.dutil li a:active { color:#222; }
-
-ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
-ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
-ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
-ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
-       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
-
-       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
-       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
-
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
-
-.static-cont {width:100%; margin-bottom:40px;}
-       
-.top {text-align: right;}
-.toc, ul.toc{
-       margin: 10px 0px 0px 0px;
-       padding-left: 13px;
-       list-style: disc;
-       font-size: 9pt;
-       line-height: 115%; 
-       }
-       
-.toc-title {
-       font-size: 12pt;
-       color: #0E437D; 
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-       
-a.top {
-       display:block; 
-       float: right; 
-       position:fixed;
-       width: 28px; 
-       height:89px; 
-       bottom:50px;
-       z-index: 101;
-       right: 19%;
-       }
-
-a img {border: 0;}
-       
-/*     Footer includes space and a gray line above             */
-#footer {
-       position: fixed;
-       /* width: 100%; */
-    bottom: 0px;
-       text-align: center;
-       border-top: 1px solid #CCCCCC;
-       background-color: #FFFFFF;      
-       left: 21px;  right: 21px;
-}
-
-.footer {font-size: 8pt;}
-       
-caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: center;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-div.qindex, div.navpath, div.navtab{
-       background-color: #e8eef2;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       padding: 2px;
-}
-
-div.qindex, div.navpath {
-       width: 100%;
-       line-height: 140%;
-}
-
-div.navtab {
-       margin-right: 15px;
-}
-
-/* @group Link Styling */
-
-a:link {
-       color: #719cc7;
-       text-decoration: underline;
-       font-weight: bold;
-}
-
-a:hover { 
-       color: #0e437d;
-}
-
-a:visited {
-       text-decoration: underline;
-       color: #719cc7;
-       font-weight: bold;
-}
-
-a.qindex {
-       font-weight: bold;
-       padding: 2px;
-}
-
-a.qindex:hover {
-       text-decoration: underline;
-       color: #0e437d;
-       padding: 2px;
-}
-
-a.qindex:visited {
-       text-decoration: underline;
-       font-weight: bold;
-       color: #719cc7;
-       padding: 2px;
-}
-
-a.qindexHL {
-       text-decoration: underline;
-       font-weight: bold;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-       border: 1px double #9295C2;
-}
-
-a.qindexHL:hover {
-       text-decoration: none;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-}
-
-dl.el { 
-       margin-left: -1cm 
-}
-
-.fragment {
-       font-family: monospace, fixed;
-       font-size: 105%;
-}
-
-pre.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 4px 6px;
-       margin: 4px 8px 4px 2px;
-}
-
-div.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 6px;
-}
-
-div.ah { 
-       background-color: black; 
-       font-weight: bold; 
-       color: #ffffff; 
-       margin-bottom: 3px; 
-       margin-top: 3px 
-}
-
-td.md { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-}
-
-td.mdname1 { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-}
-
-td.mdname { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-       width: 600px; 
-}
-
-div.groupHeader {
-       margin-left: 16px;
-       margin-top: 12px;
-       margin-bottom: 6px;
-       font-weight: bold;
-}
-
-div.groupText { 
-       margin-left: 16px; 
-       font-style: italic; 
-}
-
-td.indexkey {
-       background-color: #eeeeff;
-       font-weight: bold;
-       border: 1px solid #CCCCCC;
-       margin: 2px 0px 2px 0;
-       padding: 2px 10px;
-}
-
-td.indexvalue {
-       background-color: #eeeeff;
-       border: 1px solid #CCCCCC;
-       padding: 2px 10px;
-       margin: 2px 0px;
-}
-
-tr.memlist {
-   background-color: #f0f0f0; 
-}
-
-p.formulaDsp { 
-       text-align: center; 
-}
-
-img.formulaDsp { 
-}
-
-img.formulaInl { 
-       vertical-align: middle; 
-}
-
-/* @group Code Colorization */
-
-span.keyword       { color: #008000 }
-span.keywordtype   { color: #604020 }
-span.keywordflow   { color: #e08000 }
-span.comment       { color: #800000 }
-span.preprocessor  { color: #806020 }
-span.stringliteral { color: #002080 }
-span.charliteral   { color: #008080 }
-span.vhdldigit     { color: #ff00ff }
-span.vhdlchar      { color: #000000 }
-span.vhdlkeyword   { color: #700070 }
-span.vhdllogic     { color: #ff0000 }
-
-.mdTable {
-       border: 1px solid #868686;
-       background-color: #F4F4FB;
-}
-
-.mdRow {
-       padding: 8px 10px;
-}
-
-/* @group Member Descriptions */
-
-.mdescLeft, .mdescRight,
-.memItemLeft, .memItemRight,
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-       background-color: #F4F4F4A;
-       border: none;
-       margin: 4px;
-       padding: 3px 8px 4px 8px;
-}
-
-.mdescLeft, .mdescRight {
-       padding: 0px 8px 4px 8px;
-       color: #555;
-}
-
-.memItemLeft, .memItemRight, .memTemplParams {
-       border-top: 1px solid #DBDBDB;
-}
-
-.memTemplParams {
-       color: #606060;
-}
-
-/* @end */
-
-/* @group Member Details */
-
-/* Styles for detailed member documentation */
-
-.memtemplate {
-       font-size: 80%;
-       color: #606060;
-       font-weight: normal;
-       margin-left: 3px;
-}
-
-.memnav {
-       background-color: #eeeeff;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       margin-right: 15px;
-       padding: 2px;
-}
-
-.memitem {
-       padding: 0;
-}
-
-.memname {
-       white-space: nowrap;
-       font-weight: bold;
-}
-
-.memproto, .memdoc {
-       border: 1px solid #9BBCDD;      
-}
-
-.memproto {
-       padding: 0;
-       background-color: #D5E2EF;
-       font-weight: bold;
-       -webkit-border-top-left-radius: 8px;
-       -webkit-border-top-right-radius: 8px;
-       -moz-border-radius-topleft: 8px;
-       -moz-border-radius-topright: 8px;
-}
-
-.memdoc {
-       padding: 2px 5px;
-       background-color: #eef3f5;
-       border-top-width: 0;
-       -webkit-border-bottom-left-radius: 8px;
-       -webkit-border-bottom-right-radius: 8px;
-       -moz-border-radius-bottomleft: 8px;
-       -moz-border-radius-bottomright: 8px;
-}
-
-.memdoc p, .memdoc dl, .memdoc ul {
-       margin: 6px 0;
-}
-
-.paramkey {
-       text-align: right;
-}
-
-.paramtype {
-       white-space: nowrap;
-}
-
-.paramname {
-       color: #853E0E;
-       white-space: nowrap;
-}
-.paramname em {
-       font-style: normal;
-}
-
-/* @end */
-
-.search     { color: #003399;
-              font-weight: bold;
-}
-
-form.search {
-              margin-bottom: 0px;
-              margin-top: 0px;
-}
-
-input.search { font-size: 75%;
-               color: #000080;
-               font-weight: normal;
-               background-color: #eeeeff;
-}
-
-td.tiny { 
-       font-size: 75%;
-}
-
-.highlight {
-        background-color:#E2E2FF;
-}
-
-/*---------- ide-eclipse Styles ---------*/
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
-       margin: 0px 0px;
-       padding: -30px -30px -30px -30px;
-       font-weight: normal;
-       font-style: normal;}
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
-
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
-
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
-.sh_styleFromXML{color:#800000;font-weight:bold;}
-/*-------------------------------------------------------*/
-
-/*-------- Snippet Base Styles ----------*/
-.snippet-wrap {position:relative;}
-*:first-child+html .snippet-wrap {display:inline-block;}
-* html .snippet-wrap {display:inline-block;}
-.snippet-reveal{text-decoration:underline;}
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
-* html .snippet-wrap .snippet-hide {bottom:1px;}
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
--moz-border-radius:0px;
--webkit-border-radius:0px;
-border-radius:0px;
-box-shadow: 1px 1px px #000;
--moz-box-shadow: 2px 2px 1px #000;
--webkit-box-shadow: 1px 1px 1px #000;}
-.snippet-wrap pre.snippet-textonly {padding:1em;}
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
-.snippet-wrap .snippet-num li{padding-left:2px;}
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
-.snippet-wrap li.box-mid {border-width:0 0px !important;}
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}
-
-/* Layout fixing */
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-.clfix {display: inline-block;}
-.clfix {display: block;}
-* html .clfix {height: 1%;} /* Hides from IE-mac */
-.clfix {zoom:1;} /*for IE 5.5-7*/
-
-.fl {float:left !important;}
-.fr {float:right !important;}
-.cl {clear:both;}
-.rel {position:relative;}
-.abs {position:absolute;}
-.ac {text-align:center !important;}
-.ar {text-align:right !important;}
-.al {text-align:left !important;}
-.at {vertical-align:top !important;}
-.am {vertical-align:middle !important;}
-.ab {vertical-align:bottom;}
-.hand {cursor:pointer;}
-.bgnone {background:none !important;}
-.brnone {border:none !important;}
-.b {font-weight:bold !important;}
-.n {font-weight:normal !important;}
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
-.mt5 {margin-top:5px !important;} 
-/* //Layout fixing */
-
-@media print { .hide, .show { display: none; }}
-
-div#profile {
-    position: relative;
-}
-#profile p {
-       text-align: right;
-}
-
-div#toc_border {
-    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
-}
-
-#contents li {
-       padding-top: 3px;
-       margin-top: 5px;
-       /* overflow: auto; */
-}
-
-p {
-       /* overflow: auto; */
-}
-
-div.table {
-       /* overflow: auto; */
-}
-
-#tau tr {
-       height: 45px;
-}
-#tau td {
-       vertical-align: middle;
-}
-#tau-circular {
-       width: 40%;
-}
-#tau-circular td {
-       text-align: center;
-}
-.tau-method code {
-       border: none;
-}
-.tau-method #method-value {
-       font-style: italic;
-       font-weight: bold;
-       font-size: 16px;
-}
-pre.tau-prettyprint {
-       border: none;
+@charset "utf-8";\r
+\r
+body {\r
+       background: white;\r
+       color: #1C1C1C;\r
+       margin-right: 20px;\r
+       margin-left: 20px;\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       font-family: Arial, Helvetica, sans-serif;\r
+}\r
+\r
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {\r
+       font-family: Arial, Verdana, Helvetica, sans-serif\r
+       }\r
+\r
+/*     Set default font to 9 pt        */\r
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {\r
+       font-size: 9pt;\r
+}\r
+       \r
+pre, code { \r
+       font-family: "Courier New", Courier, monospace;\r
+       border: 1px solid #719cc7;\r
+       margin: 6px 1.5px;\r
+       padding: 1px 1px 1px 1px;\r
+       font-weight: normal;\r
+       font-style: normal;\r
+}\r
+\r
+h1 {font-size: 24pt; color: #0E437D;}\r
+h2 {font-size: 18pt; color: #0E437D;}\r
+h3 {font-size: 14pt; color: #1C1C1C;}\r
+h4 {font-size: 12pt; color: #1C1C1C;}\r
+h5 {font-size: 10pt; color: #1C1C1C;}\r
+       \r
+h1, h2, h3, h4, h5 {\r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+\r
+caption, p.caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: left;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+ol  {\r
+       margin-bottom: 20px;\r
+}\r
+\r
+ul ul , ol ul, ul ol, ol ol{\r
+       margin-top: 10px;\r
+}\r
+\r
+ul li, ol li {\r
+       margin-bottom: 10px;\r
+}\r
+\r
+ol.tutorstep li {\r
+       border-top: 2px solid #719cc7;\r
+       list-style-position: inside;\r
+       font-weight: bold;\r
+       margin-top: 30px;\r
+       margin-left: -20px;\r
+       padding-top: 3px;\r
+       font-size: 12pt;\r
+}\r
+\r
+ol.tutorstep li p{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-top: 10px;\r
+}\r
+\r
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {\r
+       font-size: 9pt;\r
+       list-style-position: outside; \r
+       margin-left: 0px;\r
+       font-weight: normal;\r
+}\r
+\r
+ol.tutorstep ol li p, ol.tutorstep ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal; \r
+       margin-top: 5px;\r
+}\r
+\r
+ol li p, ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-bottom: 2px;\r
+       margin-top: 2px;\r
+}\r
+\r
+ol ol , ol.tutorstep ol{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       list-style-type: lower-alpha;\r
+       color: #1C1C1C; \r
+       border-style: none;\r
+       margin-top: 10px; \r
+}\r
+\r
+ol.tutorstep ul {\r
+       margin-top: 10px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {\r
+       border-style: none;\r
+       margin-top: 5px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ul {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       color: #1C1C1C;\r
+}\r
+\r
+\r
+/*     End of font face declarations   */\r
+\r
+/*     Set table borders and heading row background    */\r
+table {\r
+       border: 0px;\r
+       border-collapse: collapse;\r
+       width: 100%;\r
+       margin-top: 20px;\r
+       margin-bottom: 20px;\r
+       background: white;\r
+}\r
+\r
+th {\r
+       border-top: 2px solid #719cc7;\r
+       border-right: 1px solid #c6d9f1;\r
+       border-left: 1px solid #c6d9f1;\r
+       background-color: #f3f7fb;\r
+       padding: 4px;\r
+       color: #719cc7;\r
+       font-size: 9pt;\r
+       font-weight: bold;\r
+}      \r
+       \r
+td {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:top;\r
+       padding: 3px 20px 5px 20px;\r
+       }\r
+\r
+td.middle {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:middle;\r
+       padding: 3px 20px 5px 20px;\r
+       }       \r
+       \r
+/*     Notes stand out using a light top & bottom borders with yellow background       */\r
+table.note {\r
+       border-top: 2px solid #719cc7;\r
+       border-left: 0px;\r
+       border-right: 0px;\r
+       width: 100%;\r
+}\r
+\r
+tr.note {\r
+       text-align: left;\r
+}\r
+\r
+th.note {\r
+       text-align: left;\r
+       background-color: #ddd9c3;\r
+       background-image: note.gif;\r
+       border-top: 2px solid #719cc7;\r
+       border-bottom:1px solid #719cc7;\r
+       border-right: none;\r
+\r
+}\r
+\r
+td.note, p.note {\r
+       background-color: #eeece1;\r
+       color: #1C1C1C;\r
+       padding: 5px;\r
+       margin-top:12px;\r
+       margin-bottom:12px;\r
+       border: none;\r
+}\r
+       \r
+/*     Figure titles are centered and bolded   */\r
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {\r
+       text-align: center;\r
+       font-weight: bold;\r
+}\r
+\r
+/*     Red background and white text for things that need fixing before release        */\r
+.fix   {\r
+       background-color: red;\r
+       font-weight: bold;\r
+       color: white;\r
+       }\r
+\r
+/* Classes for creating collapsible content */\r
+#banner {\r
+       padding: 8px 4px 8px 4px;\r
+       /* top right bottom left */\r
+       border: 1px solid #7f7f7f;\r
+       width: 100%;\r
+       background-image: url("banner.png");\r
+       text-align: left;\r
+       font-weight: bold;\r
+       font-size: 9pt;\r
+       color: #ffffff;\r
+}\r
+\r
+#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}\r
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}\r
+#main {width: 75%; height: 90%;}\r
+#container {width:100%;}\r
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}\r
+body.no-toc #container #contents {right: 0;padding-right:30px;}\r
+body.no-toc #toc-navigation {width: auto;}\r
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}\r
+body.no-toc #profile {float: right;right: -32px;}\r
+body.no-toc #profile p {padding: 0; margin: 0;}\r
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}\r
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}\r
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }\r
+\r
+.devicespecs-util {float:right; margin-top:25px;}\r
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}\r
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}\r
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}\r
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}\r
+       .devicespecs-util ul.dutil li a:hover { color:#222; }\r
+       .devicespecs-util ul.dutil li a:active { color:#222; }\r
+\r
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}\r
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}\r
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}\r
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}\r
+       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}\r
+\r
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }\r
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }\r
+\r
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}\r
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}\r
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}\r
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}\r
+\r
+.static-cont {width:100%; margin-bottom:40px;}\r
+       \r
+.top {text-align: right;}\r
+.toc, ul.toc{\r
+       margin: 10px 0px 0px 0px;\r
+       padding-left: 13px;\r
+       list-style: disc;\r
+       font-size: 9pt;\r
+       line-height: 115%; \r
+       }\r
+       \r
+.toc-title {\r
+       font-size: 12pt;\r
+       color: #0E437D; \r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+       \r
+a.top {\r
+       display:block; \r
+       float: right; \r
+       position:fixed;\r
+       width: 28px; \r
+       height:89px; \r
+       bottom:50px;\r
+       z-index: 101;\r
+       right: 19%;\r
+       }\r
+\r
+a img {border: 0;}\r
+       \r
+/*     Footer includes space and a gray line above             */\r
+#footer {\r
+       position: fixed;\r
+       /* width: 100%; */\r
+    bottom: 0px;\r
+       text-align: center;\r
+       border-top: 1px solid #CCCCCC;\r
+       background-color: #FFFFFF;      \r
+       left: 21px;  right: 21px;\r
+}\r
+\r
+.footer {font-size: 8pt;}\r
+       \r
+caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: center;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+div.qindex, div.navpath, div.navtab{\r
+       background-color: #e8eef2;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       padding: 2px;\r
+}\r
+\r
+div.qindex, div.navpath {\r
+       width: 100%;\r
+       line-height: 140%;\r
+}\r
+\r
+div.navtab {\r
+       margin-right: 15px;\r
+}\r
+\r
+/* @group Link Styling */\r
+\r
+a:link {\r
+       color: #719cc7;\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+}\r
+\r
+a:hover { \r
+       color: #0e437d;\r
+}\r
+\r
+a:visited {\r
+       text-decoration: underline;\r
+       color: #719cc7;\r
+       font-weight: bold;\r
+}\r
+\r
+a.qindex {\r
+       font-weight: bold;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:hover {\r
+       text-decoration: underline;\r
+       color: #0e437d;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:visited {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       color: #719cc7;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindexHL {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+       border: 1px double #9295C2;\r
+}\r
+\r
+a.qindexHL:hover {\r
+       text-decoration: none;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+}\r
+\r
+dl.el { \r
+       margin-left: -1cm \r
+}\r
+\r
+.fragment {\r
+       font-family: monospace, fixed;\r
+       font-size: 105%;\r
+}\r
+\r
+pre.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 4px 6px;\r
+       margin: 4px 8px 4px 2px;\r
+}\r
+\r
+div.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 6px;\r
+}\r
+\r
+div.ah { \r
+       background-color: black; \r
+       font-weight: bold; \r
+       color: #ffffff; \r
+       margin-bottom: 3px; \r
+       margin-top: 3px \r
+}\r
+\r
+td.md { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+}\r
+\r
+td.mdname1 { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+}\r
+\r
+td.mdname { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+       width: 600px; \r
+}\r
+\r
+div.groupHeader {\r
+       margin-left: 16px;\r
+       margin-top: 12px;\r
+       margin-bottom: 6px;\r
+       font-weight: bold;\r
+}\r
+\r
+div.groupText { \r
+       margin-left: 16px; \r
+       font-style: italic; \r
+}\r
+\r
+td.indexkey {\r
+       background-color: #eeeeff;\r
+       font-weight: bold;\r
+       border: 1px solid #CCCCCC;\r
+       margin: 2px 0px 2px 0;\r
+       padding: 2px 10px;\r
+}\r
+\r
+td.indexvalue {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #CCCCCC;\r
+       padding: 2px 10px;\r
+       margin: 2px 0px;\r
+}\r
+\r
+tr.memlist {\r
+   background-color: #f0f0f0; \r
+}\r
+\r
+p.formulaDsp { \r
+       text-align: center; \r
+}\r
+\r
+img.formulaDsp { \r
+}\r
+\r
+img.formulaInl { \r
+       vertical-align: middle; \r
+}\r
+\r
+/* @group Code Colorization */\r
+\r
+span.keyword       { color: #008000 }\r
+span.keywordtype   { color: #604020 }\r
+span.keywordflow   { color: #e08000 }\r
+span.comment       { color: #800000 }\r
+span.preprocessor  { color: #806020 }\r
+span.stringliteral { color: #002080 }\r
+span.charliteral   { color: #008080 }\r
+span.vhdldigit     { color: #ff00ff }\r
+span.vhdlchar      { color: #000000 }\r
+span.vhdlkeyword   { color: #700070 }\r
+span.vhdllogic     { color: #ff0000 }\r
+\r
+.mdTable {\r
+       border: 1px solid #868686;\r
+       background-color: #F4F4FB;\r
+}\r
+\r
+.mdRow {\r
+       padding: 8px 10px;\r
+}\r
+\r
+/* @group Member Descriptions */\r
+\r
+.mdescLeft, .mdescRight,\r
+.memItemLeft, .memItemRight,\r
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {\r
+       background-color: #F4F4F4A;\r
+       border: none;\r
+       margin: 4px;\r
+       padding: 3px 8px 4px 8px;\r
+}\r
+\r
+.mdescLeft, .mdescRight {\r
+       padding: 0px 8px 4px 8px;\r
+       color: #555;\r
+}\r
+\r
+.memItemLeft, .memItemRight, .memTemplParams {\r
+       border-top: 1px solid #DBDBDB;\r
+}\r
+\r
+.memTemplParams {\r
+       color: #606060;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group Member Details */\r
+\r
+/* Styles for detailed member documentation */\r
+\r
+.memtemplate {\r
+       font-size: 80%;\r
+       color: #606060;\r
+       font-weight: normal;\r
+       margin-left: 3px;\r
+}\r
+\r
+.memnav {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       margin-right: 15px;\r
+       padding: 2px;\r
+}\r
+\r
+.memitem {\r
+       padding: 0;\r
+}\r
+\r
+.memname {\r
+       white-space: nowrap;\r
+       font-weight: bold;\r
+}\r
+\r
+.memproto, .memdoc {\r
+       border: 1px solid #9BBCDD;      \r
+}\r
+\r
+.memproto {\r
+       padding: 0;\r
+       background-color: #D5E2EF;\r
+       font-weight: bold;\r
+       -webkit-border-top-left-radius: 8px;\r
+       -webkit-border-top-right-radius: 8px;\r
+       -moz-border-radius-topleft: 8px;\r
+       -moz-border-radius-topright: 8px;\r
+}\r
+\r
+.memdoc {\r
+       padding: 2px 5px;\r
+       background-color: #eef3f5;\r
+       border-top-width: 0;\r
+       -webkit-border-bottom-left-radius: 8px;\r
+       -webkit-border-bottom-right-radius: 8px;\r
+       -moz-border-radius-bottomleft: 8px;\r
+       -moz-border-radius-bottomright: 8px;\r
+}\r
+\r
+.memdoc p, .memdoc dl, .memdoc ul {\r
+       margin: 6px 0;\r
+}\r
+\r
+.paramkey {\r
+       text-align: right;\r
+}\r
+\r
+.paramtype {\r
+       white-space: nowrap;\r
+}\r
+\r
+.paramname {\r
+       color: #853E0E;\r
+       white-space: nowrap;\r
+}\r
+.paramname em {\r
+       font-style: normal;\r
+}\r
+\r
+/* @end */\r
+\r
+.search     { color: #003399;\r
+              font-weight: bold;\r
+}\r
+\r
+form.search {\r
+              margin-bottom: 0px;\r
+              margin-top: 0px;\r
+}\r
+\r
+input.search { font-size: 75%;\r
+               color: #000080;\r
+               font-weight: normal;\r
+               background-color: #eeeeff;\r
+}\r
+\r
+td.tiny { \r
+       font-size: 75%;\r
+}\r
+\r
+.highlight {\r
+        background-color:#E2E2FF;\r
+}\r
+\r
+/*---------- ide-eclipse Styles ---------*/\r
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;\r
+       margin: 0px 0px;\r
+       padding: -30px -30px -30px -30px;\r
+       font-weight: normal;\r
+       font-style: normal;}\r
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}\r
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/\r
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}\r
+\r
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}\r
+\r
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/\r
+.sh_styleFromXML{color:#800000;font-weight:bold;}\r
+/*-------------------------------------------------------*/\r
+\r
+/*-------- Snippet Base Styles ----------*/\r
+.snippet-wrap {position:relative;}\r
+*:first-child+html .snippet-wrap {display:inline-block;}\r
+* html .snippet-wrap {display:inline-block;}\r
+.snippet-reveal{text-decoration:underline;}\r
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}\r
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}\r
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}\r
+* html .snippet-wrap .snippet-hide {bottom:1px;}\r
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}\r
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}\r
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;\r
+-moz-border-radius:0px;\r
+-webkit-border-radius:0px;\r
+border-radius:0px;\r
+box-shadow: 1px 1px px #000;\r
+-moz-box-shadow: 2px 2px 1px #000;\r
+-webkit-box-shadow: 1px 1px 1px #000;}\r
+.snippet-wrap pre.snippet-textonly {padding:1em;}\r
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}\r
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}\r
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}\r
+.snippet-wrap .snippet-num li{padding-left:2px;}\r
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}\r
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}\r
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}\r
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}\r
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}\r
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}\r
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}\r
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}\r
+.snippet-wrap li.box-mid {border-width:0 0px !important;}\r
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}\r
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}\r
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}\r
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}\r
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}\r
+\r
+/* Layout fixing */\r
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+.clfix {display: inline-block;}\r
+.clfix {display: block;}\r
+* html .clfix {height: 1%;} /* Hides from IE-mac */\r
+.clfix {zoom:1;} /*for IE 5.5-7*/\r
+\r
+.fl {float:left !important;}\r
+.fr {float:right !important;}\r
+.cl {clear:both;}\r
+.rel {position:relative;}\r
+.abs {position:absolute;}\r
+.ac {text-align:center !important;}\r
+.ar {text-align:right !important;}\r
+.al {text-align:left !important;}\r
+.at {vertical-align:top !important;}\r
+.am {vertical-align:middle !important;}\r
+.ab {vertical-align:bottom;}\r
+.hand {cursor:pointer;}\r
+.bgnone {background:none !important;}\r
+.brnone {border:none !important;}\r
+.b {font-weight:bold !important;}\r
+.n {font-weight:normal !important;}\r
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}\r
+.mt5 {margin-top:5px !important;} \r
+/* //Layout fixing */\r
+\r
+@media print { .hide, .show { display: none; }}\r
+\r
+div#profile {\r
+    position: relative;\r
+}\r
+#profile p {\r
+       text-align: right;\r
+}\r
+\r
+div#toc_border {\r
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;\r
+}\r
+\r
+#contents li {\r
+       padding-top: 3px;\r
+       margin-top: 5px;\r
+       /* overflow: auto; */\r
+}\r
+\r
+p {\r
+       /* overflow: auto; */\r
+}\r
+\r
+div.table {\r
+       /* overflow: auto; */\r
 }
\ No newline at end of file
diff --git a/org.tizen.guides/html/images/button_bottom.png b/org.tizen.guides/html/images/button_bottom.png
deleted file mode 100644 (file)
index 2d66145..0000000
Binary files a/org.tizen.guides/html/images/button_bottom.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/circular_support.png b/org.tizen.guides/html/images/circular_support.png
deleted file mode 100644 (file)
index 5055250..0000000
Binary files a/org.tizen.guides/html/images/circular_support.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/eom_mode.png b/org.tizen.guides/html/images/eom_mode.png
deleted file mode 100755 (executable)
index 1e7b9eb..0000000
Binary files a/org.tizen.guides/html/images/eom_mode.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/evas_map.png b/org.tizen.guides/html/images/evas_map.png
deleted file mode 100644 (file)
index 5d3484d..0000000
Binary files a/org.tizen.guides/html/images/evas_map.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/form_0.png b/org.tizen.guides/html/images/form_0.png
deleted file mode 100644 (file)
index 03531dd..0000000
Binary files a/org.tizen.guides/html/images/form_0.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/form_1.png b/org.tizen.guides/html/images/form_1.png
deleted file mode 100644 (file)
index 2e061eb..0000000
Binary files a/org.tizen.guides/html/images/form_1.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/form_2.png b/org.tizen.guides/html/images/form_2.png
deleted file mode 100644 (file)
index 4ae9376..0000000
Binary files a/org.tizen.guides/html/images/form_2.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/form_3.png b/org.tizen.guides/html/images/form_3.png
deleted file mode 100644 (file)
index bcb2cf1..0000000
Binary files a/org.tizen.guides/html/images/form_3.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/form_4.png b/org.tizen.guides/html/images/form_4.png
deleted file mode 100644 (file)
index b564c0c..0000000
Binary files a/org.tizen.guides/html/images/form_4.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/form_5.png b/org.tizen.guides/html/images/form_5.png
deleted file mode 100644 (file)
index af160a5..0000000
Binary files a/org.tizen.guides/html/images/form_5.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/form_6.png b/org.tizen.guides/html/images/form_6.png
deleted file mode 100644 (file)
index 8d57347..0000000
Binary files a/org.tizen.guides/html/images/form_6.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/form_7.png b/org.tizen.guides/html/images/form_7.png
deleted file mode 100644 (file)
index 84d461e..0000000
Binary files a/org.tizen.guides/html/images/form_7.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/localize_widget.png b/org.tizen.guides/html/images/localize_widget.png
deleted file mode 100644 (file)
index 9d446df..0000000
Binary files a/org.tizen.guides/html/images/localize_widget.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/notification_layout_desc.png b/org.tizen.guides/html/images/notification_layout_desc.png
new file mode 100644 (file)
index 0000000..2270988
Binary files /dev/null and b/org.tizen.guides/html/images/notification_layout_desc.png differ
diff --git a/org.tizen.guides/html/index.htm b/org.tizen.guides/html/index.htm
index f07701d..42ea7d8 100644 (file)
--- a/org.tizen.guides/html/index.htm
+++ b/org.tizen.guides/html/index.htm
@@ -95,44 +95,12 @@
                                        </ul>
                                </li>                           
                                <li><a href="web/tizen/localization/localization_w.htm">Localization</a></li>
-                               <li><a href="web/tizen/TAU/tau.htm">Tizen Advaced UI Framework (TAU)</a>
-                                       <ul>
-                                               <li><a href="web/tizen/TAU/overview.htm">Overview</a></li>
-                                               <li><a href="web/tizen/TAU/helloWorld.htm">Hello World</a></li>
-                                               <li><a href="web/tizen/TAU/managingPage.htm">Managing Page</a></li>
-                                               <li><a href="web/tizen/TAU/eventHandling.htm">Tizen Event Handling</a></li>
-                                               <li><a href="web/tizen/TAU/uiComponent.htm">UI Component</a></li>
-                                               <li><a href="web/tizen/TAU/tutorialNotepad.htm">How to Creating Notepad Application</a></li>
-                                               <li><a href="web/tizen/TAU/circularUI.htm">Circular UI (Wearable)</a></li>
-                                               <li><a href="web/tizen/TAU/accessibility.htm">Accessibility</a></li>
-                                               <li><a href="web/tizen/TAU/globalization.htm">Globalization</a></li>
-                                       </ul>
-                               </li>
                                <li><a href="web/tizen/service/service_w.htm">Service Application</a></li>
                                <li><a href="web/tizen/ime/ime_w.htm">IME Application</a></li>                          
             </ul>              
                </li>
                <li><a href="web/w3c/guides_w3c_w.htm">W3C/HTML5/Supplementary Features</a>
                        <ul>
-                               <li><a href="web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a>
-                                       <ul>
-                                               <li><a href="web/w3c/dom/animation_w.htm">CSS Animations Module Level 3</a></li>
-                                               <li><a href="web/w3c/dom/background_w.htm">CSS Backgrounds and Borders Module Level 3</a></li>
-                                               <li><a href="web/w3c/dom/basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></li>
-                                               <li><a href="web/w3c/dom/color_w.htm">CSS Color Module Level 3</a></li>
-                                               <li><a href="web/w3c/dom/flexible_w.htm">CSS Flexible Box Layout Module</a></li>
-                                               <li><a href="web/w3c/dom/transform_w.htm">CSS Transforms</a></li>
-                                               <li><a href="web/w3c/dom/transition_w.htm">CSS Transitions Module Level 3</a></li>
-                                               <li><a href="web/w3c/dom/font_w.htm">CSS Fonts Module Level 3</a></li>
-                                               <li><a href="web/w3c/dom/text_module_w.htm">CSS Text Module Level 3</a></li>
-                                               <li><a href="web/w3c/dom/woff_w.htm">WOFF File Format 1.0</a></li>
-                                               <li><a href="web/w3c/dom/html5forms_w.htm">HTML5 Forms</a></li>
-                                               <li><a href="web/w3c/dom/media_query_w.htm">Media Queries</a></li>
-                                               <li><a href="web/w3c/dom/selector_w.htm">Selectors API Level 1 and Level 2</a></li>
-                                               <li><a href="web/w3c/dom/session_history_w.htm">HTML5 session history of browsing contexts</a></li>
-                                               <li><a href="web/w3c/dom/multi_w.htm">CSS Multi-column Layout Module</a></li>   
-                                       </ul>
-                               </li>
                                <li><a href="web/w3c/device/device_guide_w.htm">Device</a>
                                        <ul>
                                                <li><a href="web/w3c/device/battery_w.htm">Battery Status</a></li>
@@ -198,20 +166,10 @@
                                                <li><a href="web/w3c/location/geolocation_w.htm">Geolocation API Specification</a></li>
                                        </ul>
                                </li>
-                               <li><a href="web/w3c/ui/ui_guide_w.htm">UI</a>
-                                       <ul>
-                                               <li><a href="web/w3c/ui/clipboard_w.htm">Clipboard API and events</a></li>
-                                               <li><a href="web/w3c/ui/drag_drop_w.htm">HTML5 Drag and drop</a></li>
-                                       </ul>
-                               </li>                           
                                <li><a href="web/w3c/useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a>
                                        <ul>
-                                               <li><a href="web/w3c/useful/html_priority_w.htm">HTML Priorities</a></li>                                               
-                                               <li><a href="web/w3c/useful/multiple_screens_w.htm">Multiple Screen Support</a></li>
-                                               <li><a href="web/w3c/useful/frame_flattening_w.htm">Frame Flattening</a></li>           
                                                <li><a href="web/w3c/useful/sound_policy_w.htm">Tizen WebKit Tap Sound Policy</a></li>
                                                <li><a href="web/w3c/useful/performance_w.htm">Performance Improvement</a></li>
-                                               <li><a href="web/w3c/useful/ui_layout_w.htm">Multiple UI Layouts</a></li>
                                        </ul>
                                </li>                                   
                                <li><a href="web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a>
@@ -246,7 +204,7 @@
                                <li><a href="native/app/notification_n.htm">Notification</a></li>
                                <li><a href="native/app/package_n.htm">Package Manager</a></li>
                                <li><a href="native/app/service_app_n.htm">Service Application</a></li>
-                               <li><a href="native/app/widget_n.htm">Widget</a></li>                           
+                               <li><a href="native/app/widget_n.htm">Widget Application</a></li>                               
                                <li><a href="native/app/shortcut_n.htm">Shortcut</a></li>
                                <li><a href="native/app/watch_n.htm">Watch Application</a></li>
                        </ul>
@@ -284,7 +242,6 @@
                                <li><a href="native/location/geofence_n.htm">Geofence</a></li>  
                                <li><a href="native/location/maps_n.htm">Maps Service</a></li>                          
                        </ul>
-               </li>
                <li><a href="native/messaging/messaging_guide_n.htm">Messaging</a>
                        <ul>
                                <li><a href="native/messaging/messages_n.htm">Messages</a></li>
@@ -359,64 +316,6 @@
                </li>
                <li><a href="native/ui/ui_guide_n.htm">UI Framework</a>
                        <ul>
-                               <li><a href="native/ui/efl_n.htm">EFL</a></li>
-                               <li><a href="native/ui/eina_n.htm">Eina</a>
-                                       <ul>
-                                               <li><a href="native/ui/data_types_n.htm">Data Types</a></li>
-                                               <li><a href="native/ui/eina_tools_n.htm">Eina Tools</a></li>
-                                       </ul>
-                               </li>
-                               <li><a href="native/ui/evas_n.htm">Evas</a></li>
-                               <li><a href="native/ui/edje_n.htm">Edje</a>
-                                       <ul>
-                                               <li><a href="native/ui/edc_part_block_n.htm">Edje Parts and Blocks</a></li>
-                                       </ul>
-                               </li>
-                               <li><a href="native/ui/ecore_n.htm">Ecore</a>
-                                       <ul>
-                                               <li><a href="native/ui/main_loop_n.htm">Main Loop</a></li>
-                                               <li><a href="native/ui/threads_n.htm">Thread Usage</a></li>                                             
-                                       </ul>
-                               </li>                           
-                               <li><a href="native/ui/events_effects_n.htm">Event and Effect</a>
-                                       <ul>
-                                               <li><a href="native/ui/event_types_n.htm">Event Types</a></li>
-                                               <li><a href="native/ui/animations_effects_n.htm">Animation and Effect Types</a></li>                                            
-                                       </ul>
-                               </li>           
-                               <li><a href="native/ui/ui_component_n.htm">UI Components</a>
-                                       <ul>
-                                               <li><a href="native/ui/ui_component_mn.htm">Mobile Native</a>
-                                                       <ul>
-                                                               <li><a href="native/ui/elementary_mn.htm">Elementary</a>
-                                                                       <ul>
-                                                                               <li><a href="native/ui/containers_mn.htm">Containers</a></li>
-                                                                               <li><a href="native/ui/components_mn.htm">Components</a></li>
-                                                                               <li><a href="native/ui/styles_mn.htm">UI Component Styles</a></li>
-                                                                       </ul>
-                                                               </li>
-                                                       </ul>
-                                               </li>
-                                               <li><a href="native/ui/ui_component_wn.htm">Wearable Native</a>
-                                                       <ul>
-                                                               <li><a href="native/ui/elementary_wn.htm">Elementary</a>
-                                                                       <ul>
-                                                                               <li><a href="native/ui/containers_wn.htm">Containers</a></li>
-                                                                               <li><a href="native/ui/components_wn.htm">Components</a></li>
-                                                                               <li><a href="native/ui/styles_wn.htm">UI Component Styles</a></li>
-                                                                       </ul>
-                                                               </li>
-                                                               <li><a href="native/ui/circle_components_wn.htm">Circle Components</a></li>     
-                                                       </ul>
-                                               </li>                                           
-                                               <li><a href="native/ui/preferences_n.htm">UI Component Preferences</a></li>     
-                                       </ul>
-                               </li>                           
-                               <li><a href="native/ui/efl_extension_n.htm">Efl Extension</a></li>
-                               <li><a href="native/ui/font_setting_n.htm">Font Setting</a></li>
-                               <li><a href="native/ui/efl_util_n.htm">EFL UTIL</a></li>
-                               <li><a href="native/ui/multiple_screens_n.htm">Multiple Screen Support</a></li>
-                               <li><a href="native/ui/scalability_n.htm">Scalability Support</a></li>
                                <li><a href="native/ui/eom_n.htm">External Output Manager</a></li>
                        </ul>
                </li>
diff --git a/org.tizen.guides/html/native/account/account_guide_n.htm b/org.tizen.guides/html/native/account/account_guide_n.htm
index 30478be..ac60e65 100644 (file)
--- a/org.tizen.guides/html/native/account/account_guide_n.htm
+++ b/org.tizen.guides/html/native/account/account_guide_n.htm
@@ -1,76 +1,76 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Account</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/account/account_tutorials_n.htm">Account Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Account</h1> 
-       <p>Account features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the oauth2 authorization.</p>
-
-<p>The main account features are:</p>
-<ul>
-<li><p><a href="oauth2_n.htm">oauth2</a></p>
-<p>Enables you to obtain an access token by using the oauth2 authorization.</p></li>
-</ul>
-
-               
- 
- <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p> 
- 
- <ul>
-       <li><p><a href="sync_manager_n.htm">Sync Manager</a></p>
-       <p>Enables you to receive notifications in your application about syncing operations between a server and the device.</p></li>
- </ul>
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Account</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/account/account_tutorials_n.htm">Account Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Account</h1> \r
+       <p>Account features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the oauth2 authorization.</p>\r
+\r
+<p>The main account features are:</p>\r
+<ul>\r
+<li><p><a href="oauth2_n.htm">oauth2</a></p>\r
+<p>Enables you to obtain an access token by using the oauth2 authorization.</p></li>\r
+</ul>\r
+\r
+               \r
+ \r
+ <p>The following guides apply in <strong>mobile applications only</strong>:</p> \r
+ \r
+ <ul>\r
+       <li><p><a href="sync_manager_n.htm">Sync Manager</a></p>\r
+       <p>Enables you to receive notifications in your application about syncing operations between a server and the device.</p></li>\r
+ </ul>\r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.guides/html/native/app/app_guide_n.htm b/org.tizen.guides/html/native/app/app_guide_n.htm
index 4ff8624..7ee0561 100644 (file)
--- a/org.tizen.guides/html/native/app/app_guide_n.htm
+++ b/org.tizen.guides/html/native/app/app_guide_n.htm
@@ -42,15 +42,15 @@
     <li><a href="data_control_n.htm">Data Control</a> <p>Allows your applications to exchange data.</p></li>    
        <li><a href="message_port_n.htm">Message Port</a><p>Enables your applications to communicate with each other using message port communication.</p></li>
        <li><a href="notification_n.htm">Notification</a> <p>Allows you to create and manage notifications.</p> </li>
-   <li><a href="package_n.htm">Package Manager</a> <p>Allows you to install, unistall, and update packages, and store their information.</p></li> 
+   <li><a href="package_n.htm">Package Manager</a> <p>Allows you to install, uninstall, and update packages, and store their information.</p></li> 
    <li><a href="service_app_n.htm">Service Application</a> <p>Allows you to create and manage native service applications.</p></li>
-   <li><a href="widget_n.htm">Widget</a> <p>Allows you to create and manage widget applications.</p></li>
+   <li><a href="widget_n.htm">Widget Application</a> <p>Allows you to create and manage widget applications.</p></li>
    </ul>
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>
        <ul>
    <li><a href="shortcut_n.htm">Shortcut</a> <p>Allows you to add a shortcut for the Home application.</p></li>  
   </ul> 
-  <p>The following guides apply in <span style="color: red">wearable applications only</span>:</p>
+  <p>The following guides apply in <strong>wearable applications only</strong>:</p>
        <ul>
    <li><a href="watch_n.htm">Watch Application</a> <p>Allows you to manage a watch application and display the current date and time accurately.</p></li>  
   </ul> 
diff --git a/org.tizen.guides/html/native/app/app_manager_n.htm b/org.tizen.guides/html/native/app/app_manager_n.htm
index 6fd12cb..694532e 100644 (file)
--- a/org.tizen.guides/html/native/app/app_manager_n.htm
+++ b/org.tizen.guides/html/native/app/app_manager_n.htm
@@ -1,68 +1,68 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Application Manager</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm">Application Manager Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Wearable Native</a></li> 
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Application Manager</h1>
-
-<p>The application manager provides information about installed and running applications. It provides functions for obtaining the application name and absolute path to share files among all applications.</p>
-
-<p>The application manager uses 2 types of application handles:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">app_context_h</span> is related to the running applications. 
-<p>For more information on the functions that use the <span style="font-family: Courier New,Courier,monospace">app_context_h</span> handle, see the Application Context API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTEXT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTEXT__MODULE.html">wearable</a> applications).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">app_info_h</span> is related to the available applications (installed, but not necessarily running). 
-<p>For more information on the functions that use the <span style="font-family: Courier New,Courier,monospace">app_info_h</span> handle, see the Application Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__INFO__MODULE.html">wearable</a> applications).</p></li></ul>
- 
-<p>Iterator functions are used to travel through a list of applications. The <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_context()</span> function is used in running applications and the <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_info()</span> function is used in available applications. Each function calls a callback function (<span style="font-family: Courier New,Courier,monospace">app_manager_app_context_cb()</span> or <span style="font-family: Courier New,Courier,monospace">app_manager_app_info_cb()</span>), passing the handle for each application.</p> 
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Application Manager</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm">Application Manager Tutorial</a></li> \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Wearable Native</a></li> \r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Application Manager</h1>\r
+\r
+<p>The application manager provides information about installed and running applications. It provides functions for obtaining the application name and absolute path to share files among all applications.</p>\r
+\r
+<p>The application manager uses 2 types of application handles:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">app_context_h</span> is related to the running applications. \r
+<p>For more information on the functions that use the <span style="font-family: Courier New,Courier,monospace">app_context_h</span> handle, see the Application Context API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTEXT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTEXT__MODULE.html">wearable</a> applications).</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">app_info_h</span> is related to the available applications (installed, but not necessarily running). \r
+<p>For more information on the functions that use the <span style="font-family: Courier New,Courier,monospace">app_info_h</span> handle, see the Application Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__INFO__MODULE.html">wearable</a> applications).</p></li></ul>\r
+ \r
+<p>Iterator functions are used to travel through a list of applications. The <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_context()</span> function is used in running applications and the <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_info()</span> function is used in available applications. Each function calls a callback function (<span style="font-family: Courier New,Courier,monospace">app_manager_app_context_cb()</span> or <span style="font-family: Courier New,Courier,monospace">app_manager_app_info_cb()</span>), passing the handle for each application.</p> \r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/appgroup_n.htm b/org.tizen.guides/html/native/app/appgroup_n.htm
index 456b6f3..350906d 100644 (file)
--- a/org.tizen.guides/html/native/app/appgroup_n.htm
+++ b/org.tizen.guides/html/native/app/appgroup_n.htm
@@ -1,78 +1,78 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Application Group</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/appgroup_tutorial_n.htm">Application Group Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__GROUP__MODULE.html">Application Group API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__GROUP__MODULE.html">Application Group API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Application Group</h1>
-<p>You can define the application launch mode and group your applications into entities that can be managed together.</p>
-
-  <p>The main features of the Application Group API include:</p>
-  <ul>
-       <li>Defining the application launch mode
-       <p>When an application is launched through an app control, its launch mode defines its behavior:</p>
-               <ul><li>The single launch mode means that the application is launched as a main application (in a new group).</li>
-               <li>The caller launch mode means that the application is launched as a sub application belonging to the same group as the caller application who is causing the application to be launched.</li></ul>
-       <p>You can set the application launch mode <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#launch_mode">in the manifest file</a> using the <span style="font-family: Courier New,Courier,monospace">launch_mode</span> attribute of the <span style="font-family: Courier New,Courier,monospace">&lt;ui-application&gt;</span> element. If the launch mode is set to <span style="font-family: Courier New,Courier,monospace">caller</span>, the application that calls the app control can define the launch mode for the called application using the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function. However, if the called application has set its launch mode in its manifest file to <span style="font-family: Courier New,Courier,monospace">single</span>, that setting overrides the caller application&#39;s launch mode request.</p>
-       </li>
-       <li>Managing the application group
-       <p>Applications in a same group act as if they are in 1 stack. For example, if an application A wants to send an email using an email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the home button, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.</p>
-       <p>If an application is launched in a group, it can be terminated by the main (first) application in the group. If the main application is terminated or killed, the sub applications in the group are terminated automatically (they can be terminated by the framework even if they are hidden).</p>
-
-       <p class="figure">Figure: Group behavior</p> 
-<p align="center"><img alt="Group behavior" src="../../images/app_group_behavior.png" /></p> 
-       
-       </li>
-</ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Application Group</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/appgroup_tutorial_n.htm">Application Group Tutorial</a></li> \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__GROUP__MODULE.html">Application Group API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__GROUP__MODULE.html">Application Group API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Application Group</h1>\r
+<p>You can define the application launch mode and group your applications into entities that can be managed together.</p>\r
+\r
+  <p>The main features of the Application Group API include:</p>\r
+  <ul>\r
+       <li>Defining the application launch mode\r
+       <p>When an application is launched through an app control, its launch mode defines its behavior:</p>\r
+               <ul><li>The single launch mode means that the application is launched as a main application (in a new group).</li>\r
+               <li>The caller launch mode means that the application is launched as a sub application belonging to the same group as the caller application who is causing the application to be launched.</li></ul>\r
+       <p>You can set the application launch mode <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#launch_mode">in the manifest file</a> using the <span style="font-family: Courier New,Courier,monospace">launch_mode</span> attribute of the <span style="font-family: Courier New,Courier,monospace">&lt;ui-application&gt;</span> element. If the launch mode is set to <span style="font-family: Courier New,Courier,monospace">caller</span>, the application that calls the app control can define the launch mode for the called application using the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function. However, if the called application has set its launch mode in its manifest file to <span style="font-family: Courier New,Courier,monospace">single</span>, that setting overrides the caller application&#39;s launch mode request.</p>\r
+       </li>\r
+       <li>Managing the application group\r
+       <p>Applications in a same group act as if they are in 1 stack. For example, if an application A wants to send an email using an email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the home button, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.</p>\r
+       <p>If an application is launched in a group, it can be terminated by the main (first) application in the group. If the main application is terminated or killed, the sub applications in the group are terminated automatically (they can be terminated by the framework even if they are hidden).</p>\r
+\r
+       <p class="figure">Figure: Group behavior</p> \r
+<p align="center"><img alt="Group behavior" src="../../images/app_group_behavior.png" /></p> \r
+       \r
+       </li>\r
+</ul>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/application_n.htm b/org.tizen.guides/html/native/app/application_n.htm
index ab95063..24d76bb 100644 (file)
--- a/org.tizen.guides/html/native/app/application_n.htm
+++ b/org.tizen.guides/html/native/app/application_n.htm
@@ -1,965 +1,961 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Application</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-        <ul class="toc">
-                       <li><a href="#loop">Managing the Event Loop</a></li>
-                       <li><a href="#callback">Registering Callbacks for Events</a></li>
-                       <li><a href="#app_controls">Launching Applications</a></li>
-                       <li><a href="#alarms">Handling Alarms</a></li>
-                       <li><a href="#state_trans">Managing Application States and Transitions</a></li>
-                       <li><a href="#allow_bg">Allowing Application to Run on the Background</a></li>
-                       <li><a href="#app_strings">Localizing Application Strings</a></li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">Application Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>   
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li> 
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Application</h1> 
-<p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile devices. The additional features have constraints, such as a relatively small screen size and lack of system resources compared to a larger system. For example, for power management reasons, the application can take actions to reduce usage when it finds out that it has its display window covered over by another application window. State change events are delivered to make it possible to detect these situations.</p>
-
-<p>The Application API provides interfaces for the following categories:</p>
-<ul>
-  <li><a href="#loop">Starting or exiting the main event loop</a> (mandatory for every Tizen native application)</li>
-  <li><a href="#callback">Registering callbacks for application state change events</a></li>
-  <li><a href="#callback">Registering callbacks for basic system events</a></li>
-  <li><a href="#app_controls">Launching applications</a></li>
-  <li><a href="#alarms">Handling alarms</a></li>
-  <li><a href="#state_trans">Managing application states and transitions</a></li>
-  <li><a href="#app_strings">Localizing application strings</a></li>
-</ul>
-  
-  <h2 id="loop" name="loop">Managing the Event Loop</h2>
-<p>In order for an application to operate successfully, it must receive events from the platform. For this, it must start the main event loop - this is mandatory for all Tizen native applications.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function is used to start the event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s structure</span> variable, which is passed to the function.</p>
-
-<p>For more information about launching applications, see <a href="#app_controls">Launching Applications</a>.</p>
-
-<h2 id="callback" name="callback">Registering Callbacks for Events</h2>
-<p>The following table lists the application state change events.</p>
-
-  <table> 
-   <caption>
-     Table: Application state change events
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Callback</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">app_create_cb()</span></td> 
-     <td>Used to take necessary actions before the main event loop starts. Place the UI generation code here to prevent missing any events from your application UI.</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span></td> 
-     <td>Used to take necessary actions when the application becomes invisible. For example, release memory resources so other applications can use them. Do not starve the foreground application that is interacting with the user.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span></td> 
-     <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the  <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback, re-allocate those resources here before the application resumes.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span></td> 
-     <td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully use any shared resources.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
-<p>For more information, see <a href="#state_trans">Managing Application States and Transitions</a>.</p>
-
-<p>To listen to system events, use the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function. The system events are triggered with the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback function. The following table lists the event types.</p>
-
-  <table> 
-   <caption>
-     Table: Event types
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Event type</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_MEMORY</span></td> 
-     <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The callback function must also release any cached data in the main memory to secure more free memory.</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_BATTERY</span></td> 
-     <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The callback function must also stop heavy CPU consumption or power consumption activities to save the remaining power.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span></td> 
-     <td>Event type for the callback function that is responsible for changing the display orientation to match the device orientation.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LANGUAGE_CHANGED</span></td> 
-     <td>Event type for the callback function that is responsible for refreshing the display into the new language.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_REGION_FORMAT_CHANGED</span></td> 
-     <td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-  
-  <h2 id="app_controls" name="app_controls">Launching Applications</h2> 
-<p>An application can be launched by the user from the Launcher or by another application.</p>
-<p>The App Control can be used to describe either an action to be performed by other applications, or the results of the operation performed by a launched application. The application can receive results from the launched application.</p>
-<p>Regardless of how an application is launched, the application framework starts the application by creating a new process and calling the entry point of the application. Like a conventional Linux application, the main function of the application is its entry point. In the Tizen application, the main task is to hand over control to the application framework by calling the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function:</p>
-  
-<pre class="prettyprint">
-bool app_create(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Take necessary actions before the main event loop starts
-&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data
-&nbsp;&nbsp;&nbsp;// If this function returns true, the application main loop starts
-&nbsp;&nbsp;&nbsp;// If this function returns false, the application terminates
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-void app_control(app_control_h app_control, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Handle the launch request
-}
-
-void app_pause(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes invisible
-}
-
-void app_resume(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes visible
-}
-
-void app_terminate(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Release all resources
-}
-
-int main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;struct appdata ad;
- 
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback;
-     
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
-
-&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function initializes the application and starts the main loop. It takes 4 parameters and uses them to initialize the application. The <span style="font-family: Courier New,Courier,monospace">argc</span> and <span style="font-family: Courier New,Courier,monospace">argv</span> parameters contain the values from the application framework, and you must never change their values. The third parameter is a state transition handler that is responsible for managing the state transitions the application goes through while it is running. The fourth parameter is application data to be passed to each state handler.</p>
-<p>When the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> is first invoked, the application moves from the ready state to the created state. The application has to initialize itself. During this transition, the application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> state transition callback just before the application enters the main loop. Within the registered callback, you must initialize the application resources and create the main window.</p>
-<p>If the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, the application moves to the terminated state. If it returns <span style="font-family: Courier New,Courier,monospace">true</span>, the application enters the main loop.</p>
-
- <h3 id="options" name="options">Handling the Launch Options</h3>
-<p>The application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback just after the application enters the main loop. This callback is passed to the <span style="font-family: Courier New,Courier,monospace">app_control</span> containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by other application. In all of these cases, the application is responsible for checking the content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> and responding appropriately. The content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> can be empty, if the application is launched by the user from the Launcher.</p>
-
-<pre class="prettyprint">static void app_control(app_control_h app_control, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
-&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;char *uri;
-&nbsp;&nbsp;&nbsp;char *mime_type;
- 
-&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, operation);
- 
-&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_uri(app_control, &amp;uri);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime_type);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (uri &amp;&amp; !strcmp(mime_type, &quot;image/jpg&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display_image_file(ad, uri); // Display a specific image file
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
- 
-&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_activate(ad-&gt;win);
-}
-</pre>
-<h3 id="controls" name="controls">Application Controls</h3>
-<p>The App control API provides functions for launching other applications with a specific operation, URI, and MIME type. The requesting application can get a result back from the launched application.</p>
-<p>To launch an application with the App control API, create an <span style="font-family: Courier New,Courier,monospace">app_control</span> handle and add information to that handle. You can set the following information:</p>
-<ul>
-   <li>Operation: Action to be performed by the app control.</li>
-   <li>URI: Data itself to be performed.</li>
-   <li>MIME type: Specific type of the URI.</li>
-   <li>Application ID: ID of the application to be launched.</li>
-   <li>Extra data: Key-value pairs to provide additional information for the launch request and the result of the request.</li>
-</ul>
-<p>The operation is mandatory information for sending the launch request. The app control API provides several functions to get and set the above information to the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle.</p>
-<p>To launch an application with the app control API, use one of the following methods:</p>
-<ul>   
-   <li><a href="#explicit">Explicit launch</a>: Launch the application with the application ID.</li>
-   <li><a href="#implicit">Implicit launch</a>: Launch the application with an operation, URI, or MIME type.</li>
-</ul>
-<p>The application launched by the app control can return the result to the caller application.</p>
-
-<p>You can take advantage of the Tizen <a href="#platform_appcontrol">base application functionalities</a> through the app control feature. You can also <a href="#export_appcontrol">export your application functionality</a> to allow other applications to launch your application.</p>
-
-<h4 id="explicit" name="explicit">Explicit Launch</h4>
-
-<p>When you request an explicit launch:</p>
-
-<ul>
-   <li>If the underlying application launcher framework finds an application matched with the given application ID in the installed application list, it launches the application in a new process. If the matched application is not found, the framework returns the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_APP_NOT_FOUND</span> result. Additional information (such as operation, URI, or MIME type) is not be used to select an application for an explicit launch.</li>
-   <li>If the operation setting in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle is set to <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span>, the application ID must be set. Otherwise the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_INVALID_PARAMETER</span> result is returned.</li>
-</ul>
-<p>The following code example launches a calculator application explicitly with the application ID:</p>
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
- 
-#define TAG "MY_TAG"
-
-app_control_h app_control;
- 
-app_control_create(&amp;app_control);
-app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
-app_control_set_app_id(app_control, &quot;org.tizen.calculator&quot;);
- 
-if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a calculator app.&quot;);
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a calculator app.&quot;);
-}
- 
-app_control_destroy(app_control);
-</pre>
-
-<h4 id="implicit" name="explicit">Implicit Launch</h4>
-
-<p>When you request an implicit launch:</p>
-
-<ul>
-<li>Only 3 data categories are used to determine which application can be launched: Operation, URI scheme, and MIME type.</li>
-<li>The application launcher framework iterates the desktop files of installed applications on the device to find applications where the 3 categories are exactly matched.</li>
-<li>If only one application is matched for the given categories, that application is launched. If multiple matching  applications are found, the application selector is shown and the user can select the proper application.</li>
-<li>Each app control requires a different combination of the 3 categories. For some, only one category is necessary (for example, URI), for others, all 3 can be needed. Check the app control list and required data in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> to determine the needed categories.</li>
-</ul>
-<p>To allow the application launcher framework to find and select matching applications, each application must describe its operation, URI, or MIME type correctly.</p>
-
-<p>The following code example launches a camera application with the operation and MIME type:</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
-
-#define TAG "MY_TAG"
-
-app_control_h app_control;
- 
-app_control_create(&amp;app_control);
-app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);
-app_control_set_mime(app_control, &quot;image/jpg&quot;);
-if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
-}
- 
-app_control_destroy(app_control);
-</pre>
-
-<p>The following code example launches a gallery application with the operation, URI, and MIME type:</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
-
-#define TAG "MY_TAG"
- 
-app_control_h app_control;
- 
-app_control_create(&amp;app_control);
-app_control_set_operation(app_control, APP_CONTROL_OPERATION_VIEW);
-app_control_set_uri(app_control, &quot;file:///home/myhome/Photos/1_photo.jpg&quot;);
-app_control_set_mime(app_control, &quot;image/*&quot;);
- 
-if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
-}
- 
-app_control_destroy(app_control);
-</pre>
-
-<h4 id="results" name="results">Getting the App Control Results</h4>
-<p>The app control result from the requested application is delivered to the caller application in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle with extra data. For some cases, the App control API provides pre-defined extra data keys.</p>
-<p>If you cannot find a proper key, you can define your own key. However, the customized key must be shared between the caller and callee applications.</p>
-
-<p>The following code example gets the result of an app control request by implementing an <span style="font-family: Courier New,Courier,monospace">app_control</span> result callback:</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
- 
-#define TAG &quot;MY_TAG&quot;
- 
-// Callback function to get result
-static void app_control_result(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data) 
-{
-&nbsp;&nbsp;&nbsp;char *value;
- 
-&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;value) == APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;[app_control_result_cb] Succeeded: value(%s)&quot;, value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] Failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
- 
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] APP_CONTROL_RESULT_FAILED.&quot;);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The following code example requests the launch of another application:</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;dlog.h&gt;
-
-#define TAG &quot;MY_TAG&quot;
-
-app_control_h app_control;
- 
-app_control_create(&amp;app_control);
- 
-app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);
-app_control_set_mime(app_control, &quot;text/plain&quot;);
- 
-if (app_control_send_launch_request(app_control, app_control_result, NULL) == APP_CONTROL_ERROR_NONE) 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded: the application is launched.&quot;);
-} 
-else 
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch an application.&quot;);
-}
- 
-app_control_destroy(app_control);
-</pre>
-
-<p>The following code example implements an <span style="font-family: Courier New,Courier,monospace">app_control</span> callback in the callee application:</p>
-
-<pre class="prettyprint">
-static void app_control(app_control_h app_control, void *user_data) 
-{
-&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
-&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;char *mime;
-&nbsp;&nbsp;&nbsp;app_control_h reply;
-&nbsp;&nbsp;&nbsp;char *app_id;
- 
-&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, &amp;operation);
- 
-&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_CREATE_CONTENT)) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(mime, &quot;text/plain&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;reply);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_app_id(&amp;app_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(reply, APP_CONTROL_DATA_SELECTED, app_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_reply_to_launch_request(reply, app_control, APP_CONTROL_RESULT_SUCCEEDED);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(reply);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3 id="export_appcontrol" name="export_appcontrol">Exporting AppControl Functionality</h3>
-<p>You can export functionalities of your application to be used in another application. However, if the other application uses the application control functionality implicitly without the
-               application ID, it must declare the application control information in its manifest file:</p>
-       <pre class="prettyprint">
-&lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/xhtml+xml&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;http://test.com&quot;/&gt;
-&lt;/app-control&gt;
-&lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/call&quot;/&gt;
-&lt;/app-control&gt;
-</pre>
-       <p>
-               The resolution filter is used when resolving the application control. Each entry of the resolution filter has the <span style="font-family: Courier New, Courier, monospace">&lt;app-control&gt;</span>
-               element and forms an application resolution unit. The additional URI or MIME type information must contain the associated operation ID, and the retrieved application control must have the specified
-               application ID and operation ID when resolving the application control.
-       </p>
-       <p>
-               You can specify the application control information of your application in the <a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE; an
-               operation ID must be specified for the application control.
-       </p>  
-
-<h3 id="platform_appcontrol" name="platform_appcontrol">Using Platform Application Controls</h3>
-
-<p>Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the App Control module (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), you can take advantage of the Tizen base application functionalities.</p> 
-
-<p>The Tizen platform provides the platform application controls for the following base applications:</p>
-<ul>
-<li>FileManager</li>
-<li>ImageViewer</li>
-<li>Internet</li>
-<li>MusicPlayer</li>
-<li>VideoPlayer</li>
-</ul>
-<p>The following table defines the details of each platform application control.</p>
-  <table> 
-   <caption>
-     Table: Tizen base application services 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Service</th> 
-     <th>Operation</th> 
-     <th>Scheme</th> 
-     <th>MIME</th> 
-    </tr> 
-    <tr> 
-     <td>Browsing a Web page</td> 
-     <td rowspan="4"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td> 
-     <td>
-               <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">https</span></li> 
-               </ul>
-        </td>
-        <td>-</td> 
-    </tr> 
-    <tr> 
-     <td>Displaying an image</td> 
-     
-     <td>              
-        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">file</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">https</span></li> 
-       </ul>
-       </td> 
-     <td>       
-        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">image/bmp</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">image/gif</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">image/jpeg</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">image/png</span></li>
-        </ul>
-        </td> 
-    </tr> 
-       <tr> 
-     <td>Playing a sound file</td> 
-        <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">file</span></td> 
-     <td>
-        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">audio/aac</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">audio/amr</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">audio/mp3</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">audio/wav</span></li>
-        </ul>
-        </td> 
-    </tr> 
-    <tr> 
-     <td>Playing a video file</td> 
-     
-       <td>
-        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">video/mp4</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">video/3gpp</span></li>
-        </ul>
-        </td> 
-    </tr> 
-    <tr> 
-     <td>Selecting a file</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td> 
-     <td>
-        <ul>
-               <li><span style="font-family: Courier New,Courier,monospace">*/*</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
-               <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
-        </ul>
-        </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-
-    <table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Tizen provides support for the defined MIME types of the base application services depending on the platform implementation.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-
-
-  
-  
-  <h2 id="alarms" name="alarms">Handling Alarms</h2>
-
-<p>The Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications) provides functions to launch an application at a specific time. The mechanism involved in launching the application is the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications).</p>
-<p>The AppControl API allows launching an application explicitly, giving its package name, or providing certain criteria that the application must meet. For example, the criteria can include the type of data on which the application must be able to operate. The structure containing the criteria is called an appcontrol.</p>
-<p>For more information, see the <a href="#app_controls">Launching Applications</a> guide.</p>
-  
-<h2 id="state_trans" name="state_trans">Managing Application States and Transitions</h2> 
-
-<p>The Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. As the application is starting, the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback is executed and the main event loop starts. The application now normally becomes the frontmost window, with focus. When the application loses the frontmost or focus status, the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback is invoked and your application goes into a pause state. The pause state means that the application is not terminated but is running in the background. The application can go into a pause state because:</p>
-<ul>
-  <li>A new application is launched from the request of your application.</li>
-  <li>The user requests to go to the home screen.</li>
-  <li>A system event occurs and causes a resident application with a higher priority (such as an incoming phone call) to become active and hide your application temporarily.</li>
-  <li>An alarm is triggered for another application, which becomes the top-most window and hides your application.</li>
-</ul> 
-<p>When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span> callback is invoked. This happens because:</p>
-<ul>
-  <li>Another application requests your application to run (perhaps the Task Navigator, which shows all running applications and lets the user select any application to run).</li>
-  <li>All applications on top of your application in the window stack finish.</li>
-  <li>An alarm is triggered for your application, so it becomes the top-most window and hides other applications.</li>
-</ul>
-
-<p>When your application starts exiting, the <span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span> callback is invoked. Your application terminates because:</p>
-<ul>
-  <li>Your application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace">app_exit()</span> function to terminate the event loop.</li>
-  <li>The Low Memory Killer is killing your application in a low memory situation.</li>
-</ul>
-<p>The application state changes are managed by the underlying framework. The following figure and table illustrate the application states.</p>
-
-  <p class="figure">Figure: Application states</p> 
-  <p align="center"><img alt="Application state transitions" src="../../images/app_states.png" /></p>  
-  
-  <table> 
-   <caption>
-     Table: Application states
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>State</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">READY</span></td> 
-     <td>Application is launched.</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td> 
-     <td>Application starts the main loop.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td> 
-     <td>Application is running and visible to the user.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">PAUSED</span></td> 
-     <td>Application is running but invisible to the user.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td> 
-     <td>Application is terminated.</td> 
-    </tr> 
-   </tbody> 
-  </table>   
-  
-  <p>The Application API defines 5 states with corresponding transition handlers. The state transition is notified through a state transition callback function, whether the application is created, running, paused, resumed, or terminated. The application must react to each state change appropriately.</p>
-  
-  <p class="figure">Figure: Application state transitions</p> 
-  <p align="center"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>
-
-<h2 id="allow_bg" name="allow_bg">Allowing Applications to Run on the Background</h2>
-<p>Since Tizen 2.4, the application is not allowed to run on the background except declared to run on the background explicitly. The following table lists the supported background categories.
-</p>
-<div class="table"><table>
-   <caption>
-     Table: Allowed Background Application Policy
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Background Category</th> 
-     <th>Description</th>
-<th>Related APIs</th>
-<th>Manifest background-category value</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Media</span></td> 
-     <td>Playing audio, recording, and outputting streaming video in background</td>
-<td>Multimedia API</td>
-<td>media</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Download</span></td> 
-     <td>Downloading data with the Tizen download-manager API</td>
-<td>Download-manager API</td>
-<td>download</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Background network</span></td> 
-     <td>Processing general network operation in background (Sync-manager, IM / VOIP)</td>
-<td>Sync-manager, Socket, Curl</td>
-<td>background-network</td> 
-    </tr>
-<tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Location</span></td> 
-     <td>Processing location data in background</td>
-<td>Location API</td>
-<td>location</td> 
-    </tr>
-<tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Sensor (context)</span></td> 
-     <td>Processing context data from the sensors such as gesture</td>
-<td>Sensor API</td>
-<td>sensor</td> 
-    </tr>
-<tr> 
-  <td><span style="font-family: Courier New,Courier,monospace">IoT Communication/Connectivity</span></td> 
-     <td>Communicating between external devices in background such as Wi-Fi, Bluetooth</td>
-<td>Wi-Fi, Bluetooth API</td>
-<td>iot-communication</td> 
-    </tr>
- 
-     
-     
-   </tbody> 
-  </table></div>
-
-  <p></p><h3 id="bg-category" name="bg-category">Describing Background Category</h3>
-<p>An application with background running capability should declare the background category in its manifest file:</p>
-
-<pre class="prettyprint"><span class="tag">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
-<span class="pln">&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;manifest</span><span class="pln"> </span><span class="atn">xmlns</span><span class="pun">=</span><span class="atv">"http://tizen.org/ns/packages"</span><span class="pin"> </span><span class="atn">api-version</span><span class="pun">=</span><span class="atv">"2.4"</span><span class="pin"> </span><span class="atn">package</span><span class="pun">=</span><span class="atv">"org.tizen.test"</span><span class="pin"> </span><span class="atn">version</span><span class="pun">=</span><span class="atv">"1.0.0"</span><span class="tag">&gt;</span><span class="pln"></span>
-<span class="pln">&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;ui-application</span><span class="pln"> </span><span class="atn">appid</span><span class="pun">=</span><span class="atv">"org.tizen.test"</span><span class="pin"> </span><span class="atn">exec</span><span class="pun">=</span><span class="atv">"text"</span><span class="pin"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"capp"</span><span class="pin"> </span><span class="atn">multiple</span><span class="pun">=</span><span class="atv">"false"</span><span class="pin"> </span><span class="atn">taskmanage</span><span class="pun">=</span><span class="atv">"true"</span><span class="pin"> </span><span class="atn">nodisplay</span><span class="pun">=</span><span class="atv">"false"</span><span class="tag">&gt;</span><span class="pln"></span>
-<span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;icon&gt;</span>rest.png<span class="tag">&lt;/icon&gt;</span>
-<span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;label&gt;</span>rest<span class="tag">&lt;/label&gt;</span>
-<span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;background-category</span><span class="pin"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"media"</span><span class="tag">/&gt;</span>
-<span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;background-category</span><span class="pin"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"download"</span><span class="tag">/&gt;</span>
-<span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;background-category</span><span class="pin"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"background-network"</span><span class="tag">/&gt;</span>
-<span class="pin">&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;/ui-application&gt;</span>
-<span class="pin">&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;service-application</span><span class="pin"> </span><span class="atn">appid</span><span class="pun">=</span><span class="atv">"org.tizen.test-service"</span><span class="pin"> </span><span class="atn">exec</span><span class="pun">=</span><span class="atv">"test-service"</span><span class="pin"> </span><span class="atn">multiple</span><span class="pun">=</span><span class="atv">"false"</span><span class="pin"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"capp"</span><span class="tag">/&gt;</span>
-<span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;background-category</span><span class="pin"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"background-network"</span><span class="tag">/&gt;</span>
-<span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;background-category</span><span class="pin"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"location"</span><span class="tag">/&gt;</span>
-<span class="pin">&nbsp;&nbsp;&nbsp;</span><span class="tag">&lt;/service-application&gt;</span>
-<span class="pin"></span><span class="tag">&lt;/manifest&gt;</span>
-</pre>
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-    <tr>
-      <td class="note"><p><span class="tag">&lt;background-category&gt;</span> element is  supported for the API version equal or higher than 2.4</p></td> 
-    </tr>
-  </tbody>
-</table>
-<p>The background category of your application can be specified in the
-<a href="file:///home/kilio/spin/sdk/doc/online-doc/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE.</p>
-
-
-
-  <h2 id="app_strings" name="app_strings">Localizing Application Strings</h2> 
-       <p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them  in .po (portable object) files.</p> 
-
-<table class="note">
-  <tbody>
-    <tr>
-      <th class="note">Note</th>
-    </tr>
-    <tr>
-      <td class="note"><p>The .po files must be placed in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory of the application. The files can be edited using the <a href="../../../../org.tizen.devtools/html/native_tools/po_file_editor_n.htm">PO File Editor</a> provided by the Tizen SDK.</p></td> 
-    </tr>
-  </tbody>
-</table>
-
-<p>Depending on the device&#39;s locale information, your application must load the proper resource set. If no matching resource set is found for the device&#39;s current locale, the default resource set is used.</p>                 
-
-<p>To get the localized value of a string, use the <span style="font-family: Courier New,Courier,monospace">MsgID</span> shown in the PO File Editor, prefaced with an underscore <span style="font-family: Courier New,Courier,monospace">_</span> (for example, <span style="font-family: Courier New,Courier,monospace">_(&lt;MsgID&gt;)</span>). The underlying implementation calls the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function to retrieve the localized value:</p>
-
-<pre class="prettyprint">
-char *hello_text = i18n_get_text(&quot;Hello&quot;);
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">hello_text</span> variable is set to the localized text for &quot;Hello&quot; for the current locale of the device.</p>
-<p>When you change the language setting on the device, the text changes in the application according to the current language.</p>
-
-<h3 id="marking" name="marking">Marking Text Parts as Translatable</h3>
-<p>The most common way to use a translation involves the following APIs: </p>
-
-<pre class="prettyprint">
-elm_object_translatable_text_set(Evas_Object *obj, const char *text)
-elm_object_item_translatable_text_set(Elm_Object_Item *it, const char *text)
-</pre>
-
-<p>They set the untranslated string for the &quot;default&quot; part of the given <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> or <span style="font-family: Courier New,Courier,monospace;">Elm_Object_Item</span> and mark the string as translatable.</p>
-
-<p>Similar functions are available if you wish to set the text for a part that is not &quot;default&quot;: </p>
-
-<pre class="prettyprint">
-elm_object_translatable_part_text_set(Evas_Object *obj, const char *part, const char *text)
-elm_object_item_translatable_part_text_set(Elm_Object_Item *it, const char *part, const char *text)
-</pre>
-
-<p>It is important to provide the untranslated string to these functions, because the EFLs trigger the translation themselves and re-translate the strings automatically, if the system language changes.</p>
-
-
-<h3 id="translating" name="translating">Translating Texts Directly</h3>
-
-<p>The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary UI components.</p>
-
-<p>It is possible to retrieve the translation for a given text through the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> function from <span style="font-family: Courier New,Courier,monospace;">app_i18n.h</span>.</p>
-
-<pre class="prettyprint">
-char *i18n_get_text(const char *msgid);
-</pre>
-
-<p>This function takes as input a string (that is copied to an <span style="font-family: Courier New,Courier,monospace;">msgid</span> field in the .po files) and returns the translation (the corresponding <span style="font-family: Courier New,Courier,monospace;">msgstr</span> field).</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Do not modify or free the return value of these functions. They are statically allocated.</td>
-</tr>
-</tbody>
-</table> 
-
-<p>When giving the text for a genlist item, you can use it in a similar manner as in the example below.</p>
-
-<pre class="prettyprint">
-#include &quot;app_i18n.h&quot;
-static char *_genlist_text_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;return strdup(i18n_get_text(&quot;Some Text&quot;));
-}
-</pre>
-
-<h4>Plurals</h4>
-<p>Plurals are handled through the <span style="font-family: Courier New,Courier,monospace;">ngettext()</span> function. Its prototype is shown below.</p>
-
-<pre class="prettyprint">
-char *ngettext(const char *msgid, const char *msgid_plural, unsigned long int n);
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">msgid</span> is the same as before, that is, the untranslated string</li>
-<li><span style="font-family: Courier New,Courier,monospace;">msgid_plural</span> is the plural form of <span style="font-family: Courier New,Courier,monospace;">msgid</span></li>
-<li>the quantity (in English, 1 is singular and anything else is plural)</li>
-</ul>
-
-<p>A matching fr.po file contains the following lines.</p>
-
-<pre class="prettyprint">
-msgid &quot;%d Comment&quot;
-msgid_plural &quot;%d Comments&quot;
-msgstr[0] &quot;%d commentaire&quot;
-msgstr[1] &quot;%d commentaires&quot;
-</pre>
-
-<h4>Several Plurals</h4>
-<p>It is possible to have several plural forms. For instance, the .po file for Polish could contain the following lines.</p>
-
-<pre class="prettyprint">
-msgid &quot;%d Comment&quot;
-msgid_plural &quot;%d Comments&quot;
-msgstr[0] &quot;%d Komentarz&quot;
-msgstr[1] &quot;%d Komentarze&quot;
-msgstr[2] &quot;%d Komentarzy&quot;
-</pre>
-
-<p>The index values after <span style="font-family: Courier New,Courier,monospace;">msgstr</span> are defined in system-wide settings. The ones for Polish are given below:</p>
-
-<pre class="prettyprint">
-&quot;Plural-Forms: nplurals = 3; plural = n = = 1 ? 0 : n%10&gt; = 2 &amp;&amp; n%10&lt; = 4 &amp;&amp; (n%100&lt;10 | | n%100&gt; = 20) ? 1 : 2;\n&quot;
-</pre>
-
-<p>There are three forms (including singular). The index is 0 (singular), if the given integer n is 1. Then, if <span style="font-family: Courier New,Courier,monospace;">(n % 10 &gt;= 2 &amp;&amp; % 10 &lt;= 4 &amp;&amp; (n % 100 &lt; 10 | | n % 100 &gt;= 20)</span>, the index is 1, otherwise it is 2.</p>
-
-<h4>Handling Language Changes at Runtime</h4>
-
-<p>The user can change the system language settings at any time. When that is done, the framework notifies the application, which changes the language used in the Elementary. The UI components receive a &quot;language,changed&quot; signal and reset their text.</p>
-
-<p>This is how to handle the framework event:</p>
-
-<pre class="prettyprint">
-static void
-_app_language_changed(void *data)
-{
-&nbsp;&nbsp;&nbsp;char *language;
-&nbsp;&nbsp;&nbsp;// Retrieve the current system language
-&nbsp;&nbsp;&nbsp;system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &amp;language);
-&nbsp;&nbsp;&nbsp;// Set the language in elementary
-&nbsp;&nbsp;&nbsp;elm_language_set(language);
-&nbsp;&nbsp;&nbsp;free(language);
-}
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, _app_language_changed, &amp;ad);
-}
-</pre>
-
-<p>The call to <span style="font-family: Courier New,Courier,monospace;">elm_language_set()</span> above triggers the emission of the &quot;language,changed&quot; signal, which is handled the same way as the typical smart event signals.</p>
-
-<h3 id="extracting" name="extracting">Extracting Messages for Translation</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">xgettext</span> tool extracts strings to translate to a .pot file (po template), while <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> maintains the existing .po files. The typical workflow is as follows:</p>
-<ul>
-<li>run <span style="font-family: Courier New,Courier,monospace;">xgettext</span> once; it generates a .pot file</li>
-<li>when adding a new translation, copy the .pot file to &lt;locale&gt;.po and translate that file</li>
-<li>new runs of <span style="font-family: Courier New,Courier,monospace;">xgettext</span> update the existing .pot file and <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> updates the .po files</li>
-</ul>
-
-<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">xgettext</span>.</p>
-
-<pre class="prettyprint">
-xgettext --directory = src --output-dir = res/po --keyword = _ --keyword = N_ --keyword = elm_object_translatable_text_set:2 --keyword = elm_object_item_translatable_text_set:2 --add-comments = --from-code = utf-8 --foreign-use
-</pre>
-
-<p>This extracts all strings that are used inside the <span style="font-family: Courier New,Courier,monospace;">_()</span> function (as an optional short-hand for <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span>), use UTF-8 as the encoding and add the comments right before the strings to the output files).</p>
-
-<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">msgmerge</span>.</p>
-
-<pre class="prettyprint">
-msgmerge --width=120 --update res/po/fr.po res/po/ref.pot
-</pre>
-
-<h3 id="tips" name="tips">Internationalization Tips</h3>
-
-<h4 id="assumptions" name="assumptions">Do Not Make Assumptions about Languages</h4>
-
-<p>Languages vary greatly and even if you knew several of them, do not assume there is any common logic to them.</p>
-
-<p>For example, with English typography, no character must appear before colons and semicolons (&#39;:&#39; and &#39;;&#39;). However, with French typography, there must be &quot;espace fine insécable&quot;, that is, a non-breakable space (HTML&#39;s &amp;nbsp;) that is narrower that regular spaces.</p>
-
-<p>This prevents proper translation in the following construct:</p>
-
-<pre class="prettyprint">
-snprintf(buf, some_size, &quot;%s: %s&quot;, i18n_get_text(error), i18n_get_text(reason));
-</pre>
-
-<p>The correct way to translate it is to use a single string and let the translators manage the punctuation. This means translating the format string instead:</p>
-
-<pre class="prettyprint">
-snprintf(buf, some_size, i18n_get_text(&quot;%s: %s&quot;), i18n_get_text(error), i18n_get_text(reason));
-</pre>
-
-<p>It is not always possible, but aim for this unless a specific issue arises.</p>
-
-<h4 id="length" name="length">Translations Are of Different Lengths</h4>
-<p>Depending on the language, the translation has a different length on screen. In some cases, a language has a shorter construct than another, while the situation is reversed in another case; a language may have a word for a specific concept, while another does not and requires a circumlocution (designating something by using several words).</p>
-
-<h4 id="source" name="source">For Source Control, Do Not Commit .po If Only Line Indicators Have Changed</h4>
-
-<p>From the example above, a translation block looks like:</p>
-
-<pre class="prettyprint">
-#: some_file.c:43 another_file.c:41
-msgid &quot;Click Here&quot;
-msgstr &quot;Cliquez ici&quot;
-</pre>
-
-<p>In case you insert a new line at the top of &quot;some_file.c&quot;, the line indicator changes to look like this:</p>
-
-<pre class="prettyprint">
-#: some_file.c:44 another_file.c:41
-</pre>
-
-<p>Obviously, on non-trivial projects, such changes often happen. If you use source control and commit such changes even though no actual translation change has happened, each commit probably contains a change to .po files. This hampers readability of the change history, and in case several people are working in parallel and need to merge their changes, this creates huge merge conflicts each time.</p>
-
-<p>Only commit changes to .po files when there are actual translation changes, not because line comments have changed.</p>
-
-<h4 id="shorthand" name="shorthand">Using <span style="font-family: Courier New,Courier,monospace;">_()</span> as Shorthand to the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> Function</h4>
-
-<p>Since calling <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> may often happen, it is abbreviated to <span style="font-family: Courier New,Courier,monospace;">_()</span>. The Tizen SDK provides this abbreviation by default.</p>
-
-<h4 id="sorting" name="sorting">Proper Sorting: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span></h4>
-<p>There is a string comparison tailored for sorting data for display: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span>. It works the same way as <span style="font-family: Courier New,Courier,monospace;">strcmp()</span> but sorts the data according to the current locale settings.</p>
-
-<pre class="prettyprint">
-int strcmp(const char *s1, const char *s2);
-int strcoll(const char *s1, const char *s2);
-</pre>
-
-<p>The function prototype is a standard one and indicates how to order strings. A detailed explanation is out of scope for this guide, but use the <span style="font-family: Courier New,Courier,monospace;">strcoll()</span> function as the comparison function for sorting the data set you are using.</p>
-
-<h4 id="translators" name="translators">Working with Translators</h4>
-<p>The system described above is a common one and is likely to be known to translators, meaning that giving its name (<span style="font-family: Courier New,Courier,monospace;">gettext</span>) may be enough to explain how it works. In addition to this documentation, there is extensive additional documentation as well as questions and answers on the topic in the Internet.</p>
-
-<p>Do not hesitate to put comments in your code above the strings to be translated, since they can be extracted along with the strings and saved in the .po files for the translator to see them.</p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>        
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Application</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                       <li><a href="#loop">Managing the Event Loop</a></li>\r
+                       <li><a href="#callback">Registering Callbacks for Events</a></li>\r
+                       <li><a href="#app_controls">Launching Applications</a></li>\r
+                       <li><a href="#alarms">Handling Alarms</a></li>\r
+                       <li><a href="#state_trans">Managing Application States and Transitions</a></li>\r
+                       <li><a href="#allow_bg">Allowing Applications to Run on the Background</a></li>\r
+                       <li><a href="#app_strings">Localizing Application Strings</a></li>\r
+        </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">Application Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>   \r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li> \r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Application</h1> \r
+<p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile devices. The additional features have constraints, such as a relatively small screen size and lack of system resources compared to a larger system. For example, for power management reasons, the application can take actions to reduce usage when it finds out that it has its display window covered over by another application window. State change events are delivered to make it possible to detect these situations.</p>\r
+\r
+<p>The Application API provides interfaces for the following categories:</p>\r
+<ul>\r
+  <li><a href="#loop">Starting or exiting the main event loop</a> (mandatory for every Tizen native application)</li>\r
+  <li><a href="#callback">Registering callbacks for application state change events</a></li>\r
+  <li><a href="#callback">Registering callbacks for basic system events</a></li>\r
+  <li><a href="#app_controls">Launching applications</a></li>\r
+  <li><a href="#alarms">Handling alarms</a></li>\r
+  <li><a href="#state_trans">Managing application states and transitions</a></li>\r
+  <li><a href="#allow_bg">Allowing applications to run on the background</a></li>\r
+  <li><a href="#app_strings">Localizing application strings</a></li>\r
+</ul>\r
+  \r
+  <h2 id="loop" name="loop">Managing the Event Loop</h2>\r
+<p>In order for an application to operate successfully, it must receive events from the platform. For this, it must start the main event loop - this is mandatory for all Tizen native applications.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function is used to start the event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s structure</span> variable, which is passed to the function.</p>\r
+\r
+<p>For more information about launching applications, see <a href="#app_controls">Launching Applications</a>.</p>\r
+\r
+<h2 id="callback" name="callback">Registering Callbacks for Events</h2>\r
+<p>The following table lists the application state change events.</p>\r
+\r
+  <table> \r
+   <caption>\r
+     Table: Application state change events\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Callback</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">app_create_cb()</span></td> \r
+     <td>Used to take necessary actions before the main event loop starts. Place the UI generation code here to prevent missing any events from your application UI.</td> \r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span></td> \r
+     <td>Used to take necessary actions when the application becomes invisible. For example, release memory resources so other applications can use them. Do not starve the foreground application that is interacting with the user.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span></td> \r
+     <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the  <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback, re-allocate those resources here before the application resumes.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span></td> \r
+     <td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully use any shared resources.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+<p>For more information, see <a href="#state_trans">Managing Application States and Transitions</a>.</p>\r
+\r
+<p>To listen to system events, use the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function. The system events are triggered with the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback function. The following table lists the event types.</p>\r
+\r
+  <table> \r
+   <caption>\r
+     Table: Event types\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Event type</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_MEMORY</span></td> \r
+     <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The callback function must also release any cached data in the main memory to secure more free memory.</td> \r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_BATTERY</span></td> \r
+     <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The callback function must also stop heavy CPU consumption or power consumption activities to save the remaining power.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span></td> \r
+     <td>Event type for the callback function that is responsible for changing the display orientation to match the device orientation.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LANGUAGE_CHANGED</span></td> \r
+     <td>Event type for the callback function that is responsible for refreshing the display into the new language.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_REGION_FORMAT_CHANGED</span></td> \r
+     <td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>  \r
+  \r
+  <h2 id="app_controls" name="app_controls">Launching Applications</h2> \r
+<p>An application can be launched by the user from the Launcher or by another application.</p>\r
+<p>The App Control can be used to describe either an action to be performed by other applications, or the results of the operation performed by a launched application. The application can receive results from the launched application.</p>\r
+<p>Regardless of how an application is launched, the application framework starts the application by creating a new process and calling the entry point of the application. Like a conventional Linux application, the main function of the application is its entry point. In the Tizen application, the main task is to hand over control to the application framework by calling the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function:</p>\r
+  \r
+<pre class="prettyprint">\r
+bool app_create(void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Take necessary actions before the main event loop starts\r
+&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data\r
+&nbsp;&nbsp;&nbsp;// If this function returns true, the application main loop starts\r
+&nbsp;&nbsp;&nbsp;// If this function returns false, the application terminates\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+\r
+void app_control(app_control_h app_control, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Handle the launch request\r
+}\r
+\r
+void app_pause(void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes invisible\r
+}\r
+\r
+void app_resume(void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Take necessary actions when application becomes visible\r
+}\r
+\r
+void app_terminate(void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Release all resources\r
+}\r
+\r
+int main(int argc, char *argv[])\r
+{\r
+&nbsp;&nbsp;&nbsp;struct appdata ad;\r
+ \r
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback;\r
+     \r
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;\r
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;\r
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;\r
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;\r
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;\r
+\r
+&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));\r
+\r
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);\r
+}\r
+</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function initializes the application and starts the main loop. It takes 4 parameters and uses them to initialize the application. The <span style="font-family: Courier New,Courier,monospace">argc</span> and <span style="font-family: Courier New,Courier,monospace">argv</span> parameters contain the values from the application framework, and you must never change their values. The third parameter is a state transition handler that is responsible for managing the state transitions the application goes through while it is running. The fourth parameter is application data to be passed to each state handler.</p>\r
+<p>When the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> is first invoked, the application moves from the ready state to the created state. The application has to initialize itself. During this transition, the application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> state transition callback just before the application enters the main loop. Within the registered callback, you must initialize the application resources and create the main window.</p>\r
+<p>If the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback function returns <span style="font-family: Courier New,Courier,monospace">false</span>, the application moves to the terminated state. If it returns <span style="font-family: Courier New,Courier,monospace">true</span>, the application enters the main loop.</p>\r
+\r
+ <h3 id="options" name="options">Handling the Launch Options</h3>\r
+<p>The application framework calls the application&#39;s <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback just after the application enters the main loop. This callback is passed to the <span style="font-family: Courier New,Courier,monospace">app_control</span> containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by other application. In all of these cases, the application is responsible for checking the content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> and responding appropriately. The content of the <span style="font-family: Courier New,Courier,monospace">app_control</span> can be empty, if the application is launched by the user from the Launcher.</p>\r
+\r
+<pre class="prettyprint">static void app_control(app_control_h app_control, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;\r
+&nbsp;&nbsp;&nbsp;char *operation;\r
+&nbsp;&nbsp;&nbsp;char *uri;\r
+&nbsp;&nbsp;&nbsp;char *mime_type;\r
+ \r
+&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, operation);\r
+ \r
+&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_uri(app_control, &amp;uri);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime_type);\r
+ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (uri &amp;&amp; !strcmp(mime_type, &quot;image/jpg&quot;))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display_image_file(ad, uri); // Display a specific image file\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+ \r
+&nbsp;&nbsp;&nbsp;if (ad-&gt;win)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_activate(ad-&gt;win);\r
+}\r
+</pre>\r
+<h3 id="controls" name="controls">Application Controls</h3>\r
+<p>The App control API provides functions for launching other applications with a specific operation, URI, and MIME type. The requesting application can get a result back from the launched application.</p>\r
+<p>To launch an application with the App control API, create an <span style="font-family: Courier New,Courier,monospace">app_control</span> handle and add information to that handle. You can set the following information:</p>\r
+<ul>\r
+   <li>Operation: Action to be performed by the app control.</li>\r
+   <li>URI: Data itself to be performed.</li>\r
+   <li>MIME type: Specific type of the URI.</li>\r
+   <li>Application ID: ID of the application to be launched.</li>\r
+   <li>Extra data: Key-value pairs to provide additional information for the launch request and the result of the request.</li>\r
+</ul>\r
+<p>The operation is mandatory information for sending the launch request. The app control API provides several functions to get and set the above information to the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle.</p>\r
+<p>To launch an application with the app control API, use one of the following methods:</p>\r
+<ul>   \r
+   <li><a href="#explicit">Explicit launch</a>: Launch the application with the application ID.</li>\r
+   <li><a href="#implicit">Implicit launch</a>: Launch the application with an operation, URI, or MIME type.</li>\r
+</ul>\r
+<p>The application launched by the app control can return the result to the caller application.</p>\r
+\r
+<p>You can take advantage of the Tizen <a href="#platform_appcontrol">base application functionalities</a> through the app control feature. You can also <a href="#export_appcontrol">export your application functionality</a> to allow other applications to launch your application.</p>\r
+\r
+<h4 id="explicit" name="explicit">Explicit Launch</h4>\r
+\r
+<p>When you request an explicit launch:</p>\r
+\r
+<ul>\r
+   <li>If the underlying application launcher framework finds an application matched with the given application ID in the installed application list, it launches the application in a new process. If the matched application is not found, the framework returns the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_APP_NOT_FOUND</span> result. Additional information (such as operation, URI, or MIME type) is not be used to select an application for an explicit launch.</li>\r
+   <li>If the operation setting in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle is set to <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span>, the application ID must be set. Otherwise the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_ERROR_INVALID_PARAMETER</span> result is returned.</li>\r
+</ul>\r
+<p>The following code example launches a calculator application explicitly with the application ID:</p>\r
+<pre class="prettyprint">\r
+#include &lt;app.h&gt;\r
+#include &lt;dlog.h&gt;\r
+ \r
+#define TAG "MY_TAG"\r
+\r
+app_control_h app_control;\r
+ \r
+app_control_create(&amp;app_control);\r
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);\r
+app_control_set_app_id(app_control, &quot;org.tizen.calculator&quot;);\r
+ \r
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) \r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a calculator app.&quot;);\r
+} \r
+else \r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a calculator app.&quot;);\r
+}\r
+ \r
+app_control_destroy(app_control);\r
+</pre>\r
+\r
+<h4 id="implicit" name="explicit">Implicit Launch</h4>\r
+\r
+<p>When you request an implicit launch:</p>\r
+\r
+<ul>\r
+<li>Only 3 data categories are used to determine which application can be launched: Operation, URI scheme, and MIME type.</li>\r
+<li>The application launcher framework iterates the desktop files of installed applications on the device to find applications where the 3 categories are exactly matched.</li>\r
+<li>If only one application is matched for the given categories, that application is launched. If multiple matching  applications are found, the application selector is shown and the user can select the proper application.</li>\r
+<li>Each app control requires a different combination of the 3 categories. For some, only one category is necessary (for example, URI), for others, all 3 can be needed. Check the app control list and required data in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> to determine the needed categories.</li>\r
+</ul>\r
+<p>To allow the application launcher framework to find and select matching applications, each application must describe its operation, URI, or MIME type correctly.</p>\r
+\r
+<p>The following code example launches a camera application with the operation and MIME type:</p>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;app.h&gt;\r
+#include &lt;dlog.h&gt;\r
+\r
+#define TAG "MY_TAG"\r
+\r
+app_control_h app_control;\r
+ \r
+app_control_create(&amp;app_control);\r
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);\r
+app_control_set_mime(app_control, &quot;image/jpg&quot;);\r
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) \r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);\r
+} \r
+else \r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);\r
+}\r
+ \r
+app_control_destroy(app_control);\r
+</pre>\r
+\r
+<p>The following code example launches a gallery application with the operation, URI, and MIME type:</p>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;app.h&gt;\r
+#include &lt;dlog.h&gt;\r
+\r
+#define TAG "MY_TAG"\r
+ \r
+app_control_h app_control;\r
+ \r
+app_control_create(&amp;app_control);\r
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_VIEW);\r
+app_control_set_uri(app_control, &quot;file:///home/myhome/Photos/1_photo.jpg&quot;);\r
+app_control_set_mime(app_control, &quot;image/*&quot;);\r
+ \r
+if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE) \r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);\r
+} \r
+else \r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);\r
+}\r
+ \r
+app_control_destroy(app_control);\r
+</pre>\r
+\r
+<h4 id="results" name="results">Getting the App Control Results</h4>\r
+<p>The app control result from the requested application is delivered to the caller application in the <span style="font-family: Courier New,Courier,monospace">app_control</span> handle with extra data. For some cases, the App control API provides pre-defined extra data keys.</p>\r
+<p>If you cannot find a proper key, you can define your own key. However, the customized key must be shared between the caller and callee applications.</p>\r
+\r
+<p>The following code example gets the result of an app control request by implementing an <span style="font-family: Courier New,Courier,monospace">app_control</span> result callback:</p>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;app.h&gt;\r
+#include &lt;dlog.h&gt;\r
+ \r
+#define TAG &quot;MY_TAG&quot;\r
+ \r
+// Callback function to get result\r
+static void app_control_result(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data) \r
+{\r
+&nbsp;&nbsp;&nbsp;char *value;\r
+ \r
+&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;value) == APP_CONTROL_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;[app_control_result_cb] Succeeded: value(%s)&quot;, value);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] Failed&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+ \r
+&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] APP_CONTROL_RESULT_FAILED.&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+\r
+<p>The following code example requests the launch of another application:</p>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;app.h&gt;\r
+#include &lt;dlog.h&gt;\r
+\r
+#define TAG &quot;MY_TAG&quot;\r
+\r
+app_control_h app_control;\r
+ \r
+app_control_create(&amp;app_control);\r
+ \r
+app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);\r
+app_control_set_mime(app_control, &quot;text/plain&quot;);\r
+ \r
+if (app_control_send_launch_request(app_control, app_control_result, NULL) == APP_CONTROL_ERROR_NONE) \r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded: the application is launched.&quot;);\r
+} \r
+else \r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch an application.&quot;);\r
+}\r
+ \r
+app_control_destroy(app_control);\r
+</pre>\r
+\r
+<p>The following code example implements an <span style="font-family: Courier New,Courier,monospace">app_control</span> callback in the callee application:</p>\r
+\r
+<pre class="prettyprint">\r
+static void app_control(app_control_h app_control, void *user_data) \r
+{\r
+&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;\r
+&nbsp;&nbsp;&nbsp;char *operation;\r
+&nbsp;&nbsp;&nbsp;char *mime;\r
+&nbsp;&nbsp;&nbsp;app_control_h reply;\r
+&nbsp;&nbsp;&nbsp;char *app_id;\r
+ \r
+&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, &amp;operation);\r
+ \r
+&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_CREATE_CONTENT)) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime);\r
+ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(mime, &quot;text/plain&quot;)) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;reply);\r
+ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_app_id(&amp;app_id);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(reply, APP_CONTROL_DATA_SELECTED, app_id);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_reply_to_launch_request(reply, app_control, APP_CONTROL_RESULT_SUCCEEDED);\r
+ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(reply);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+\r
+<h3 id="export_appcontrol" name="export_appcontrol">Exporting AppControl Functionality</h3>\r
+<p>You can export functionalities of your application to be used in another application. However, if the other application uses the application control functionality implicitly without the\r
+               application ID, it must declare the application control information in its manifest file:</p>\r
+       <pre class="prettyprint">\r
+&lt;app-control&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/xhtml+xml&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;http://test.com&quot;/&gt;\r
+&lt;/app-control&gt;\r
+&lt;app-control&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/call&quot;/&gt;\r
+&lt;/app-control&gt;\r
+</pre>\r
+       <p>\r
+               The resolution filter is used when resolving the application control. Each entry of the resolution filter has the <span style="font-family: Courier New, Courier, monospace">&lt;app-control&gt;</span>\r
+               element and forms an application resolution unit. The additional URI or MIME type information must contain the associated operation ID, and the retrieved application control must have the specified\r
+               application ID and operation ID when resolving the application control.\r
+       </p>\r
+       <p>\r
+               You can specify the application control information of your application in the <a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE; an\r
+               operation ID must be specified for the application control.\r
+       </p>  \r
+\r
+<h3 id="platform_appcontrol" name="platform_appcontrol">Using Platform Application Controls</h3>\r
+\r
+<p>Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the App Control module (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), you can take advantage of the Tizen base application functionalities.</p> \r
+\r
+<p>The Tizen platform provides the platform application controls for the following base applications:</p>\r
+<ul>\r
+<li>FileManager</li>\r
+<li>ImageViewer</li>\r
+<li>Internet</li>\r
+<li>MusicPlayer</li>\r
+<li>VideoPlayer</li>\r
+</ul>\r
+<p>The following table defines the details of each platform application control.</p>\r
+  <table> \r
+   <caption>\r
+     Table: Tizen base application services \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Service</th> \r
+     <th>Operation</th> \r
+     <th>Scheme</th> \r
+     <th>MIME</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Browsing a Web page</td> \r
+     <td rowspan="4"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td> \r
+     <td>\r
+               <ul>\r
+               <li><span style="font-family: Courier New,Courier,monospace">http</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">https</span></li> \r
+               </ul>\r
+        </td>\r
+        <td>-</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Displaying an image</td> \r
+     \r
+     <td>              \r
+        <ul>\r
+               <li><span style="font-family: Courier New,Courier,monospace">file</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">http</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">https</span></li> \r
+       </ul>\r
+       </td> \r
+     <td>       \r
+        <ul>\r
+               <li><span style="font-family: Courier New,Courier,monospace">image/bmp</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">image/gif</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">image/jpeg</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">image/png</span></li>\r
+        </ul>\r
+        </td> \r
+    </tr> \r
+       <tr> \r
+     <td>Playing a sound file</td> \r
+        <td rowspan="3"><span style="font-family: Courier New,Courier,monospace">file</span></td> \r
+     <td>\r
+        <ul>\r
+               <li><span style="font-family: Courier New,Courier,monospace">audio/aac</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">audio/amr</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">audio/mp3</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">audio/wav</span></li>\r
+        </ul>\r
+        </td> \r
+    </tr> \r
+    <tr> \r
+     <td>Playing a video file</td> \r
+     \r
+       <td>\r
+        <ul>\r
+               <li><span style="font-family: Courier New,Courier,monospace">video/mp4</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">video/3gpp</span></li>\r
+        </ul>\r
+        </td> \r
+    </tr> \r
+    <tr> \r
+     <td>Selecting a file</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td> \r
+     <td>\r
+        <ul>\r
+               <li><span style="font-family: Courier New,Courier,monospace">*/*</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>\r
+               <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>\r
+        </ul>\r
+        </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  \r
+\r
+    <table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">Tizen provides support for the defined MIME types of the base application services depending on the platform implementation.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+\r
+\r
+  \r
+  \r
+  <h2 id="alarms" name="alarms">Handling Alarms</h2>\r
+\r
+<p>The Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications) provides functions to launch an application at a specific time. The mechanism involved in launching the application is the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications).</p>\r
+<p>The AppControl API allows launching an application explicitly, giving its package name, or providing certain criteria that the application must meet. For example, the criteria can include the type of data on which the application must be able to operate. The structure containing the criteria is called an appcontrol.</p>\r
+<p>For more information, see the <a href="#app_controls">Launching Applications</a> guide.</p>\r
+  \r
+<h2 id="state_trans" name="state_trans">Managing Application States and Transitions</h2> \r
+\r
+<p>The Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. As the application is starting, the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback is executed and the main event loop starts. The application now normally becomes the frontmost window, with focus. When the application loses the frontmost or focus status, the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback is invoked and your application goes into a pause state. The pause state means that the application is not terminated but is running in the background. The application can go into a pause state because:</p>\r
+<ul>\r
+  <li>A new application is launched from the request of your application.</li>\r
+  <li>The user requests to go to the home screen.</li>\r
+  <li>A system event occurs and causes a resident application with a higher priority (such as an incoming phone call) to become active and hide your application temporarily.</li>\r
+  <li>An alarm is triggered for another application, which becomes the top-most window and hides your application.</li>\r
+</ul> \r
+<p>When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span> callback is invoked. This happens because:</p>\r
+<ul>\r
+  <li>Another application requests your application to run (perhaps the Task Navigator, which shows all running applications and lets the user select any application to run).</li>\r
+  <li>All applications on top of your application in the window stack finish.</li>\r
+  <li>An alarm is triggered for your application, so it becomes the top-most window and hides other applications.</li>\r
+</ul>\r
+\r
+<p>When your application starts exiting, the <span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span> callback is invoked. Your application terminates because:</p>\r
+<ul>\r
+  <li>Your application itself requests to exit by calling the <span style="font-family: Courier New,Courier,monospace">app_exit()</span> function to terminate the event loop.</li>\r
+  <li>The Low Memory Killer is killing your application in a low memory situation.</li>\r
+</ul>\r
+<p>The application state changes are managed by the underlying framework. The following figure and table illustrate the application states.</p>\r
+\r
+  <p class="figure">Figure: Application states</p> \r
+  <p align="center"><img alt="Application state transitions" src="../../images/app_states.png" /></p>  \r
+  \r
+  <table> \r
+   <caption>\r
+     Table: Application states\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>State</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">READY</span></td> \r
+     <td>Application is launched.</td> \r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td> \r
+     <td>Application starts the main loop.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td> \r
+     <td>Application is running and visible to the user.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">PAUSED</span></td> \r
+     <td>Application is running but invisible to the user.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td> \r
+     <td>Application is terminated.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>   \r
+  \r
+  <p>The Application API defines 5 states with corresponding transition handlers. The state transition is notified through a state transition callback function, whether the application is created, running, paused, resumed, or terminated. The application must react to each state change appropriately.</p>\r
+  \r
+  <p class="figure">Figure: Application state transitions</p> \r
+  <p align="center"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>\r
+ \r
+<h2 id="allow_bg" name="allow_bg">Allowing Applications to Run on the Background</h2>\r
+\r
+<p>Since Tizen 2.4, the application is not allowed to run on the background except when it is explicitly declared to do so. The following table lists the background categories that allow the application to run on the background.</p>\r
+\r
+<table>\r
+   <caption>Table: Allowed Background Application Policy</caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Background category</th> \r
+     <th>Description</th>\r
+<th>Related APIs</th>\r
+<th>Manifest file &lt;background-category&gt; element value</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Media</td> \r
+     <td>Playing audio, recording, and outputting streaming video on the background</td>\r
+<td>Multimedia API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">wearable</a> applications)</td>\r
+<td><span style="font-family: Courier New,Courier,monospace">media</span></td> \r
+    </tr> \r
+     <tr> \r
+     <td>Download</td> \r
+     <td>Downloading data with the Tizen Download-manager API</td>\r
+<td>Download-manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">wearable</a> applications)</td>\r
+<td><span style="font-family: Courier New,Courier,monospace">download</span></td> \r
+    </tr> \r
+    <tr> \r
+     <td>Background network</td> \r
+     <td>Processing general network operations on the background (such as sync-manager, IM, and VOIP)</td>\r
+<td>Sync-manager (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> applications), Socket, and Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications)</td>\r
+<td><span style="font-family: Courier New,Courier,monospace">background-network</span></td> \r
+    </tr>\r
+<tr> \r
+     <td>Location</td> \r
+     <td>Processing location data on the background</td>\r
+<td>Location API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">wearable</a> applications)</td>\r
+<td><span style="font-family: Courier New,Courier,monospace">location</span></td> \r
+    </tr>\r
+<tr> \r
+     <td>Sensor (context)</td> \r
+     <td>Processing context data from the sensors, such as gesture</td>\r
+<td>Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications)</td>\r
+<td><span style="font-family: Courier New,Courier,monospace">sensor</span></td> \r
+    </tr>\r
+<tr> \r
+  <td>IoT Communication/Connectivity</td> \r
+     <td>Communicating between external devices on the background (such as Wi-Fi and Bluetooth)</td>\r
+<td>Wi-Fi (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">wearable</a> applications) and Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications)</td>\r
+<td><span style="font-family: Courier New,Courier,monospace">iot-communication</span></td> \r
+    </tr>\r
+  </tbody> \r
+  </table>\r
+\r
+<h3 id="bg-category" name="bg-category">Describing the Background Category</h3>\r
+<p>An application with a background running capability must declare the background category in its manifest file:</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r
+&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.4&quot; package=&quot;org.tizen.test&quot; version=&quot;1.0.0&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.test&quot; exec=&quot;text&quot; type=&quot;capp&quot; multiple=&quot;false&quot; taskmanage=&quot;true&quot; nodisplay=&quot;false&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;rest.png&lt;/icon&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;rest&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;media&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;download&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;background-network&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;service-application appid=&quot;org.tizen.test-service&quot; exec=&quot;test-service&quot; multiple=&quot;false&quot; type=&quot;capp&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;background-network&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;location&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;\r
+&lt;/manifest&gt;\r
+</pre>\r
+<table class="note">\r
+  <tbody>\r
+    <tr>\r
+      <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+      <td class="note"><p>The <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element is supported for the API version equal or higher than 2.4.</p></td> \r
+    </tr>\r
+  </tbody>\r
+</table>\r
+<p>The background category of your application can be specified in the\r
+<a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE.</p>\r
+\r
+  <h2 id="app_strings" name="app_strings">Localizing Application Strings</h2> \r
+       <p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them  in .po (portable object) files.</p> \r
+\r
+<table class="note">\r
+  <tbody>\r
+    <tr>\r
+      <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+      <td class="note"><p>The .po files must be placed in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory of the application. The files can be edited using the <a href="../../../../org.tizen.devtools/html/native_tools/po_file_editor_n.htm">PO File Editor</a> provided by the Tizen SDK.</p></td> \r
+    </tr>\r
+  </tbody>\r
+</table>\r
+\r
+<p>Depending on the device&#39;s locale information, your application must load the proper resource set. If no matching resource set is found for the device&#39;s current locale, the default resource set is used.</p>                 \r
+\r
+<p>To get the localized value of a string, use the <span style="font-family: Courier New,Courier,monospace">MsgID</span> shown in the PO File Editor, prefaced with an underscore <span style="font-family: Courier New,Courier,monospace">_</span> (for example, <span style="font-family: Courier New,Courier,monospace">_(&lt;MsgID&gt;)</span>). The underlying implementation calls the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function to retrieve the localized value:</p>\r
+\r
+<pre class="prettyprint">\r
+char *hello_text = i18n_get_text(&quot;Hello&quot;);\r
+</pre>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">hello_text</span> variable is set to the localized text for &quot;Hello&quot; for the current locale of the device.</p>\r
+<p>When you change the language setting on the device, the text changes in the application according to the current language.</p>\r
+\r
+<h3 id="marking" name="marking">Marking Text Parts as Translatable</h3>\r
+<p>The most common way to use a translation involves the following APIs: </p>\r
+\r
+<pre class="prettyprint">\r
+elm_object_translatable_text_set(Evas_Object *obj, const char *text)\r
+elm_object_item_translatable_text_set(Elm_Object_Item *it, const char *text)\r
+</pre>\r
+\r
+<p>They set the untranslated string for the &quot;default&quot; part of the given <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> or <span style="font-family: Courier New,Courier,monospace;">Elm_Object_Item</span> and mark the string as translatable.</p>\r
+\r
+<p>Similar functions are available if you wish to set the text for a part that is not &quot;default&quot;: </p>\r
+\r
+<pre class="prettyprint">\r
+elm_object_translatable_part_text_set(Evas_Object *obj, const char *part, const char *text)\r
+elm_object_item_translatable_part_text_set(Elm_Object_Item *it, const char *part, const char *text)\r
+</pre>\r
+\r
+<p>It is important to provide the untranslated string to these functions, because the EFLs trigger the translation themselves and re-translate the strings automatically, if the system language changes.</p>\r
+\r
+\r
+<h3 id="translating" name="translating">Translating Texts Directly</h3>\r
+\r
+<p>The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary UI components.</p>\r
+\r
+<p>It is possible to retrieve the translation for a given text through the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> function from <span style="font-family: Courier New,Courier,monospace;">app_i18n.h</span>.</p>\r
+\r
+<pre class="prettyprint">\r
+char *i18n_get_text(const char *msgid);\r
+</pre>\r
+\r
+<p>This function takes as input a string (that is copied to an <span style="font-family: Courier New,Courier,monospace;">msgid</span> field in the .po files) and returns the translation (the corresponding <span style="font-family: Courier New,Courier,monospace;">msgstr</span> field).</p>\r
+\r
+<table class="note">\r
+<tbody>\r
+<tr>\r
+<th class="note">Note</th>\r
+</tr>\r
+<tr>\r
+<td class="note">Do not modify or free the return value of these functions. They are statically allocated.</td>\r
+</tr>\r
+</tbody>\r
+</table> \r
+\r
+<p>When giving the text for a genlist item, you can use it in a similar manner as in the example below.</p>\r
+\r
+<pre class="prettyprint">\r
+#include &quot;app_i18n.h&quot;\r
+static char *_genlist_text_get(void *data, Evas_Object *obj, const char *part)\r
+{\r
+&nbsp;&nbsp;&nbsp;return strdup(i18n_get_text(&quot;Some Text&quot;));\r
+}\r
+</pre>\r
+\r
+<h4>Plurals</h4>\r
+<p>Plurals are handled through the <span style="font-family: Courier New,Courier,monospace;">ngettext()</span> function. Its prototype is shown below.</p>\r
+\r
+<pre class="prettyprint">\r
+char *ngettext(const char *msgid, const char *msgid_plural, unsigned long int n);\r
+</pre>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">msgid</span> is the same as before, that is, the untranslated string</li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">msgid_plural</span> is the plural form of <span style="font-family: Courier New,Courier,monospace;">msgid</span></li>\r
+<li>the quantity (in English, 1 is singular and anything else is plural)</li>\r
+</ul>\r
+\r
+<p>A matching fr.po file contains the following lines.</p>\r
+\r
+<pre class="prettyprint">\r
+msgid &quot;%d Comment&quot;\r
+msgid_plural &quot;%d Comments&quot;\r
+msgstr[0] &quot;%d commentaire&quot;\r
+msgstr[1] &quot;%d commentaires&quot;\r
+</pre>\r
+\r
+<h4>Several Plurals</h4>\r
+<p>It is possible to have several plural forms. For instance, the .po file for Polish could contain the following lines.</p>\r
+\r
+<pre class="prettyprint">\r
+msgid &quot;%d Comment&quot;\r
+msgid_plural &quot;%d Comments&quot;\r
+msgstr[0] &quot;%d Komentarz&quot;\r
+msgstr[1] &quot;%d Komentarze&quot;\r
+msgstr[2] &quot;%d Komentarzy&quot;\r
+</pre>\r
+\r
+<p>The index values after <span style="font-family: Courier New,Courier,monospace;">msgstr</span> are defined in system-wide settings. The ones for Polish are given below:</p>\r
+\r
+<pre class="prettyprint">\r
+&quot;Plural-Forms: nplurals = 3; plural = n = = 1 ? 0 : n%10&gt; = 2 &amp;&amp; n%10&lt; = 4 &amp;&amp; (n%100&lt;10 | | n%100&gt; = 20) ? 1 : 2;\n&quot;\r
+</pre>\r
+\r
+<p>There are three forms (including singular). The index is 0 (singular), if the given integer n is 1. Then, if <span style="font-family: Courier New,Courier,monospace;">(n % 10 &gt;= 2 &amp;&amp; % 10 &lt;= 4 &amp;&amp; (n % 100 &lt; 10 | | n % 100 &gt;= 20)</span>, the index is 1, otherwise it is 2.</p>\r
+\r
+<h4>Handling Language Changes at Runtime</h4>\r
+\r
+<p>The user can change the system language settings at any time. When that is done, the framework notifies the application, which changes the language used in the Elementary. The UI components receive a &quot;language,changed&quot; signal and reset their text.</p>\r
+\r
+<p>This is how to handle the framework event:</p>\r
+\r
+<pre class="prettyprint">\r
+static void\r
+_app_language_changed(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;char *language;\r
+&nbsp;&nbsp;&nbsp;// Retrieve the current system language\r
+&nbsp;&nbsp;&nbsp;system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &amp;language);\r
+&nbsp;&nbsp;&nbsp;// Set the language in elementary\r
+&nbsp;&nbsp;&nbsp;elm_language_set(language);\r
+&nbsp;&nbsp;&nbsp;free(language);\r
+}\r
+int\r
+main(int argc, char *argv[])\r
+{\r
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, _app_language_changed, &amp;ad);\r
+}\r
+</pre>\r
+\r
+<p>The call to <span style="font-family: Courier New,Courier,monospace;">elm_language_set()</span> above triggers the emission of the &quot;language,changed&quot; signal, which is handled the same way as the typical smart event signals.</p>\r
+\r
+<h3 id="extracting" name="extracting">Extracting Messages for Translation</h3>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">xgettext</span> tool extracts strings to translate to a .pot file (po template), while <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> maintains the existing .po files. The typical workflow is as follows:</p>\r
+<ul>\r
+<li>run <span style="font-family: Courier New,Courier,monospace;">xgettext</span> once; it generates a .pot file</li>\r
+<li>when adding a new translation, copy the .pot file to &lt;locale&gt;.po and translate that file</li>\r
+<li>new runs of <span style="font-family: Courier New,Courier,monospace;">xgettext</span> update the existing .pot file and <span style="font-family: Courier New,Courier,monospace;">msgmerge</span> updates the .po files</li>\r
+</ul>\r
+\r
+<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">xgettext</span>.</p>\r
+\r
+<pre class="prettyprint">\r
+xgettext --directory = src --output-dir = res/po --keyword = _ --keyword = N_ --keyword = elm_object_translatable_text_set:2 --keyword = elm_object_item_translatable_text_set:2 --add-comments = --from-code = utf-8 --foreign-use\r
+</pre>\r
+\r
+<p>This extracts all strings that are used inside the <span style="font-family: Courier New,Courier,monospace;">_()</span> function (as an optional short-hand for <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span>), use UTF-8 as the encoding and add the comments right before the strings to the output files).</p>\r
+\r
+<p>The following example is a typical call to <span style="font-family: Courier New,Courier,monospace;">msgmerge</span>.</p>\r
+\r
+<pre class="prettyprint">\r
+msgmerge --width=120 --update res/po/fr.po res/po/ref.pot\r
+</pre>\r
+\r
+<h3 id="tips" name="tips">Internationalization Tips</h3>\r
+\r
+<h4 id="assumptions" name="assumptions">Do Not Make Assumptions about Languages</h4>\r
+\r
+<p>Languages vary greatly and even if you knew several of them, do not assume there is any common logic to them.</p>\r
+\r
+<p>For example, with English typography, no character must appear before colons and semicolons (&#39;:&#39; and &#39;;&#39;). However, with French typography, there must be &quot;espace fine insécable&quot;, that is, a non-breakable space (HTML&#39;s &amp;nbsp;) that is narrower that regular spaces.</p>\r
+\r
+<p>This prevents proper translation in the following construct:</p>\r
+\r
+<pre class="prettyprint">\r
+snprintf(buf, some_size, &quot;%s: %s&quot;, i18n_get_text(error), i18n_get_text(reason));\r
+</pre>\r
+\r
+<p>The correct way to translate it is to use a single string and let the translators manage the punctuation. This means translating the format string instead:</p>\r
+\r
+<pre class="prettyprint">\r
+snprintf(buf, some_size, i18n_get_text(&quot;%s: %s&quot;), i18n_get_text(error), i18n_get_text(reason));\r
+</pre>\r
+\r
+<p>It is not always possible, but aim for this unless a specific issue arises.</p>\r
+\r
+<h4 id="length" name="length">Translations Are of Different Lengths</h4>\r
+<p>Depending on the language, the translation has a different length on screen. In some cases, a language has a shorter construct than another, while the situation is reversed in another case; a language may have a word for a specific concept, while another does not and requires a circumlocution (designating something by using several words).</p>\r
+\r
+<h4 id="source" name="source">For Source Control, Do Not Commit .po If Only Line Indicators Have Changed</h4>\r
+\r
+<p>From the example above, a translation block looks like:</p>\r
+\r
+<pre class="prettyprint">\r
+#: some_file.c:43 another_file.c:41\r
+msgid &quot;Click Here&quot;\r
+msgstr &quot;Cliquez ici&quot;\r
+</pre>\r
+\r
+<p>In case you insert a new line at the top of &quot;some_file.c&quot;, the line indicator changes to look like this:</p>\r
+\r
+<pre class="prettyprint">\r
+#: some_file.c:44 another_file.c:41\r
+</pre>\r
+\r
+<p>Obviously, on non-trivial projects, such changes often happen. If you use source control and commit such changes even though no actual translation change has happened, each commit probably contains a change to .po files. This hampers readability of the change history, and in case several people are working in parallel and need to merge their changes, this creates huge merge conflicts each time.</p>\r
+\r
+<p>Only commit changes to .po files when there are actual translation changes, not because line comments have changed.</p>\r
+\r
+<h4 id="shorthand" name="shorthand">Using <span style="font-family: Courier New,Courier,monospace;">_()</span> as Shorthand to the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> Function</h4>\r
+\r
+<p>Since calling <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> may often happen, it is abbreviated to <span style="font-family: Courier New,Courier,monospace;">_()</span>. The Tizen SDK provides this abbreviation by default.</p>\r
+\r
+<h4 id="sorting" name="sorting">Proper Sorting: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span></h4>\r
+<p>There is a string comparison tailored for sorting data for display: <span style="font-family: Courier New,Courier,monospace;">strcoll()</span>. It works the same way as <span style="font-family: Courier New,Courier,monospace;">strcmp()</span> but sorts the data according to the current locale settings.</p>\r
+\r
+<pre class="prettyprint">\r
+int strcmp(const char *s1, const char *s2);\r
+int strcoll(const char *s1, const char *s2);\r
+</pre>\r
+\r
+<p>The function prototype is a standard one and indicates how to order strings. A detailed explanation is out of scope for this guide, but use the <span style="font-family: Courier New,Courier,monospace;">strcoll()</span> function as the comparison function for sorting the data set you are using.</p>\r
+\r
+<h4 id="translators" name="translators">Working with Translators</h4>\r
+<p>The system described above is a common one and is likely to be known to translators, meaning that giving its name (<span style="font-family: Courier New,Courier,monospace;">gettext</span>) may be enough to explain how it works. In addition to this documentation, there is extensive additional documentation as well as questions and answers on the topic in the Internet.</p>\r
+\r
+<p>Do not hesitate to put comments in your code above the strings to be translated, since they can be extracted along with the strings and saved in the .po files for the translator to see them.</p>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/badge_n.htm b/org.tizen.guides/html/native/app/badge_n.htm
index 59138f2..2fd179d 100644 (file)
--- a/org.tizen.guides/html/native/app/badge_n.htm
+++ b/org.tizen.guides/html/native/app/badge_n.htm
@@ -1,67 +1,67 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Badge</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm">Badge Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">Badge API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Badge</h1>
-<p>A badge is an image displayed on the application icon, which informs the user about notifications and events.</p>
-
-   <p class="figure">Figure: Badge</p> 
-   <p align="center"><img alt="Badge" src="../../images/badge.png" /></p> 
-
-
-<p>To create a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method. The application that creates the badge can also update and remove it. When applications are signed with the same certificate, they can control each other&#39;s badges.</p>
-<p>If an application not signed with the same certificate must be allowed manage a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method with a writable application ID. The writable application ID enables another application to control your application to manage the badge. You can also configure your application to handle the badge itself.</p>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Badge</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm">Badge Tutorial</a></li> \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">Badge API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Badge</h1>\r
+<p>A badge is an image displayed on the application icon, which informs the user about notifications and events.</p>\r
+\r
+   <p class="figure">Figure: Badge</p> \r
+   <p align="center"><img alt="Badge" src="../../images/badge.png" /></p> \r
+\r
+\r
+<p>To create a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method. The application that creates the badge can also update and remove it. When applications are signed with the same certificate, they can control each other&#39;s badges.</p>\r
+<p>If an application not signed with the same certificate must be allowed manage a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method with a writable application ID. The writable application ID enables another application to control your application to manage the badge. You can also configure your application to handle the badge itself.</p>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/bundle_n.htm b/org.tizen.guides/html/native/app/bundle_n.htm
index 8bef6eb..513de53 100644 (file)
--- a/org.tizen.guides/html/native/app/bundle_n.htm
+++ b/org.tizen.guides/html/native/app/bundle_n.htm
@@ -1,73 +1,73 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Bundle</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm">Bundle Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
- <h1>Bundle</h1> 
-  
-<p>A bundle is a string-based dictionary abstract data type (ADT).</p>
-<p>A dictionary is an ordered or unordered list of key-value pairs, where keys are used to locate elements in the list. The key is always a string.</p>
-
-<p>The main features of the Bundle API include:</p>
-<ul><li>Creating a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_create() </span> function.</li>
-<li>Adding content to a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_add_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_add_str_array()</span>, or <span style="font-family: Courier New,Courier,monospace">bundle_add_byte() </span> function.</li>
-<li>Managing the bundle content using the following functions:
-<ul><li>Deleting: <span style="font-family: Courier New,Courier,monospace">bundle_del() </span> </li>
-<li>Retrieving content: <span style="font-family: Courier New,Courier,monospace">bundle_get_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_str_array()</span>, and <span style="font-family: Courier New,Courier,monospace">bundle_get_byte()</span></li>
-<li>Retrieving details: <span style="font-family: Courier New,Courier,monospace">bundle_get_type()</span> and <span style="font-family: Courier New,Courier,monospace">bundle_get_count() </span></li></ul></li>
-<li>Iterating a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function.</li>
-<li>Encoding and decoding a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_encode()</span> and <span style="font-family: Courier New,Courier,monospace">bundle_decode() </span> functions.</li>
-</ul>
-
-<p>When no longer needed, release the bundle by calling the <span style="font-family: Courier New,Courier,monospace">bundle_free()</span> function.</p> 
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Bundle</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm">Bundle Tutorial</a></li> \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>Bundle</h1> \r
+  \r
+<p>A bundle is a string-based dictionary abstract data type (ADT).</p>\r
+<p>A dictionary is an ordered or unordered list of key-value pairs, where keys are used to locate elements in the list. The key is always a string.</p>\r
+\r
+<p>The main features of the Bundle API include:</p>\r
+<ul><li>Creating a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_create() </span> function.</li>\r
+<li>Adding content to a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_add_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_add_str_array()</span>, or <span style="font-family: Courier New,Courier,monospace">bundle_add_byte() </span> function.</li>\r
+<li>Managing the bundle content using the following functions:\r
+<ul><li>Deleting: <span style="font-family: Courier New,Courier,monospace">bundle_del() </span> </li>\r
+<li>Retrieving content: <span style="font-family: Courier New,Courier,monospace">bundle_get_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_str_array()</span>, and <span style="font-family: Courier New,Courier,monospace">bundle_get_byte()</span></li>\r
+<li>Retrieving details: <span style="font-family: Courier New,Courier,monospace">bundle_get_type()</span> and <span style="font-family: Courier New,Courier,monospace">bundle_get_count() </span></li></ul></li>\r
+<li>Iterating a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function.</li>\r
+<li>Encoding and decoding a bundle using the <span style="font-family: Courier New,Courier,monospace">bundle_encode()</span> and <span style="font-family: Courier New,Courier,monospace">bundle_decode() </span> functions.</li>\r
+</ul>\r
+\r
+<p>When no longer needed, release the bundle by calling the <span style="font-family: Courier New,Courier,monospace">bundle_free()</span> function.</p> \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/data_control_n.htm b/org.tizen.guides/html/native/app/data_control_n.htm
index 2cb7a33..8adbb73 100644 (file)
--- a/org.tizen.guides/html/native/app/data_control_n.htm
+++ b/org.tizen.guides/html/native/app/data_control_n.htm
@@ -1,216 +1,216 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Data Control</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#use">Using Data Controls</a></li> 
-                       <li><a href="#develop">Developing with Data Controls</a></li>
-                       <li><a href="#export">Exporting DataControl Functionality</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm">Data Control Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1 id="data_controls" name="data_controls">Data Control</h1>
-<p>Data control is a standard mechanism for exchanging specific data between applications.</p>
- 
-  <p class="figure">Figure: Data control mechanism</p> 
-  <p align="center"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>
- 
-<p>All applications can request data shared by other applications using a data control. However, only service applications can provide their own data.</p>
-<p>There are 2 types of data controls:</p>
-<ul><li>DATA_CONTROL_SQL
-<p>Allows you to use an SQL-type data control to access specific data exported by other service applications. You can also define an SQL-type data control provider to export specific data from your service application.</p></li>
-<li>DATA_CONTROL_MAP
-<p>Allows you to use a key-value-type data control to access data exported by other service applications. You can also define a key-value-type data control provider to export specific data from your service application.</p></li></ul>
-<p>Data controls can supply operations to access shared data and get back results.</p>
-<p>The data control requires the following provider information:</p>
-<ul><li>Provider ID
-<p>Unique provider ID to identify the data control for a specific provider.</p>
-<p>Format:</p>
-<ul><li>Provider ID must consist of alpha-numeric letters separated with the period (&quot;.&quot;) character, and it must start with letters.</li>
-<li>Custom provider ID must start with a vendor name to avoid conflicts with other developers.</li>
-<li>IRI format: <span style="font-family: Courier New,Courier,monospace">http://{provider URI}/datacontrol/provider/{provider name}</span></li></ul></li>
-<li>Data ID
-<p>String ID for identifying specific data, usually a database table name or a registry section name.</p>
-<p>Format:</p>
-<ul><li>Data ID consists of one or more components, separated by a slash (&quot;/&quot;) character.</li></ul></li></ul>
-
-
-<h2 id="use" name="use">Using Data Controls</h2>
-<p>You can get a <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance from the <span style="font-family: Courier New,Courier,monospace">datacontrol_map_create()</span> or <span style="font-family: Courier New,Courier,monospace">datacontrol_sql_create()</span> function.</p>
-<ul><li>Map type data control
-<p>If you specify the <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance using the <span style="font-family: Courier New,Courier,monospace">data_control_map_create()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_set_provider_id()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_map_set_data_id()</span> function, you can get the specific map-type data control uniquely. </p>
-<p>After resolving the data control, call the data control map APIs, such as <span style="font-family: Courier New,Courier,monospace">data_control_map_set()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_get()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_add()</span>, and <span style="font-family: Courier New,Courier,monospace">data_control_map_remove()</span>.</p>
-<p>The result is returned by a response callback, such as <span style="font-family: Courier New,Courier,monospace">data_control_map_get_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_set_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_add_response_cb()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_map_remove_response_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">data_control_map_response_cb struct</span>. The response callback is invoked when a service application finishes its operation.</p></li>
-<li>Sql type data control
-<p>If you specify the <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance using the <span style="font-family: Courier New,Courier,monospace">data_control_sql_create()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_provider_id()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_data_id()</span> function, you can get the specific SQL-type data control uniquely. </p>
-<p>After resolving the data control, call the data control SQL APIs, such as  <span style="font-family: Courier New,Courier,monospace">datacontrol_sql_select()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_insert()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_update()</span>, and <span style="font-family: Courier New,Courier,monospace">data_control_sql_delete()</span>.</p>
-<p>The result is returned by a response callback, such as <span style="font-family: Courier New,Courier,monospace">data_control_sql_select_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_insert_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_update_response_cb()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_sql_delete_response_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">data_control_sql_response_cb struct</span>. The response callback is invoked when a service application finishes its operation.</p>
-<p>Once you get the <span style="font-family: Courier New,Courier,monospace">result_set_cursor</span> using the <span style="font-family: Courier New,Courier,monospace">data_control_sql_select_response_cb()</span> callback, you can use the following functions to get information:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_first()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_last()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_next()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_set_previous()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_count()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_name()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_item_size()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_item_type()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_blob_data()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_int_data()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_int64_data()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_double_data()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_text_data()</span></li></ul></li></ul>
-
-<h2 id="develop" name="develop">Developing with Data Controls</h2>
-<p>You can develop with data controls by adding the <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
-<p>The following code example describes how to add the <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element:</p>
-<pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; package=&quot;@PACKAGE_NAME@&quot; version=&quot;@VERSION@&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;install-location=&quot;internal-only&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;datacontrolprovider&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;author email=&quot;PUT YOUR EMAIL&quot; href=&quot;www.tizen.org&quot;&gt;PUT YOUR NAME&lt;/author&gt;
-&nbsp;&nbsp;&nbsp;&lt;description&gt;datacontrolprovider&lt;/description&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.datacontrolprovider&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exec=&quot;datacontrolprovider&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;true&quot; multiple=&quot;false&quot; type=&quot;capp&quot; taskmanage=&quot;true&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;auto-restart=&quot;false&quot; on-boot=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;datacontrol providerid = &quot;Your Provider ID&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;access=&quot;ReadWrite&quot; type=&quot;Sql&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;datacontrol providerid = &quot;Your Provider ID&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;access=&quot;ReadWrite&quot; type=&quot;Map&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
-&lt;/manifest&gt;
-</pre>
-
-<p>The service application providing its own database file must register the provider callback using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_sql_register_cb()</span> function. Similarly, the service application providing its own registry file or key-value pairs data set must register the provider callback using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_map_register_cb()</span> function.</p>
-<p>The service application sends the SQL- or map-type data control result to the other application by using functions, such as <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_select_result()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_insert_result()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_update_result()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_delete_result()</span>.</p>
- 
-
-<p>You can <a href="#export">export the data of your service application</a> to other applications.</p> 
- 
-       
-       <h2 id="export" name="export">Exporting DataControl Functionality</h2> 
-
-<p>You can export functionalities of your Tizen native application in the <a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE. The provider ID, type, and accessibility must be specified for the data control.</p> 
-  <p class="figure">Figure: Exporting data control</p> 
-  <p align="center"><img alt="Exporting data control" src="../../images/exporting_datacontrol.png"/></p> 
-  <h3 id="data" name="data">Data Model</h3> 
-  <p>The data model must be opened to the public to help other applications to use the exported data controls. The data model consists of the following data:</p> 
-  <ul>
-<li>Provider ID 
-    <ul>
-<li>It is used for identifying a data control provider.</li> 
-     <li>It must be unique and use a fully qualified domain name.</li> 
-     <li>Platform-defined data control provider is defined in the format: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/datacontrol/provider/&lt;application name&gt;</span>
-</li> 
-     <li>User-defined data control provider is defined in the format: <span style="font-family: Courier New,Courier,monospace">http://&lt;vendor.com&gt;/datacontrol/provider/&lt;application name&gt;</span>
-</li> 
-    </ul>
-</li> 
-   <li>Data ID 
-    <ul>
-<li>It is used for identifying data exported by the data control provider.</li> 
-     <li>It must be unique in the data control provider and it is given as a string with a slash as a delimiter.</li> 
-    </ul>
-</li> 
-   <li>Type 
-    <ul>
-<li>You can use Tizen native applications that provide their own data structure table and implement the SQL-type data control provider using the database file.</li> 
-     <li>You can use Tizen native applications that provide their own key-value pairs data structure map and implement the map-type data control provider using registry file or collection map classes.</li> 
-    </ul>
-</li> 
-   <li>Data schema 
-    <ul>
-<li>SQL-type data control exports column names and types of the data structure table.</li> 
-     <li>Map-type data control exports key names and types of the data structure map.</li> 
-    </ul>
-</li> 
-   <li>Data accessibility <p>Tizen native applications can control read and write access from other applications by allowing data control accessibility.</p> </li> 
-  </ul>
-<table border="1" style="width: 100%">
-<caption>
-     Table: Data model example of a data control provider 
-   </caption> 
-   <tbody>
-<tr>
-<th style="text-align:center;margin-left:auto;margin-right:auto;">Data control type</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data control provider ID</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data control data ID</th> 
-     <th colspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Data schema</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data accessibility</th> 
-    </tr>
-<tr>
-<td>SQL</td> 
-     <td>http://&lt;vendor.com&gt;/datacontrol/provider/sample</td> 
-     <td>data1</td> 
-     <td>
-<p>column1<br/> (type: <span style="font-family: Courier New,Courier,monospace">Integer</span>)</p> </td> 
-     <td>
-<p>column2<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</p> </td> 
-     <td>Read-Only</td> 
-    </tr>
-<tr>
-<td>Map</td> 
-     <td>http://&lt;vendor.com&gt;/datacontrol/provider/sample2</td> 
-     <td>data2</td> 
-     <td>
-<p>key1<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</p> </td> 
-     <td>
-<p>key2<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</p> </td> 
-     <td>Read-Write</td> 
-    </tr>
-</tbody>
-</table>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Data Control</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#use">Using Data Controls</a></li> \r
+                       <li><a href="#develop">Developing with Data Controls</a></li>\r
+                       <li><a href="#export">Exporting DataControl Functionality</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm">Data Control Tutorial</a></li> \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1 id="data_controls" name="data_controls">Data Control</h1>\r
+<p>Data control is a standard mechanism for exchanging specific data between applications.</p>\r
+ \r
+  <p class="figure">Figure: Data control mechanism</p> \r
+  <p align="center"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>\r
+ \r
+<p>All applications can request data shared by other applications using a data control. However, only service applications can provide their own data.</p>\r
+<p>There are 2 types of data controls:</p>\r
+<ul><li>DATA_CONTROL_SQL\r
+<p>Allows you to use an SQL-type data control to access specific data exported by other service applications. You can also define an SQL-type data control provider to export specific data from your service application.</p></li>\r
+<li>DATA_CONTROL_MAP\r
+<p>Allows you to use a key-value-type data control to access data exported by other service applications. You can also define a key-value-type data control provider to export specific data from your service application.</p></li></ul>\r
+<p>Data controls can supply operations to access shared data and get back results.</p>\r
+<p>The data control requires the following provider information:</p>\r
+<ul><li>Provider ID\r
+<p>Unique provider ID to identify the data control for a specific provider.</p>\r
+<p>Format:</p>\r
+<ul><li>Provider ID must consist of alpha-numeric letters separated with the period (&quot;.&quot;) character, and it must start with letters.</li>\r
+<li>Custom provider ID must start with a vendor name to avoid conflicts with other developers.</li>\r
+<li>IRI format: <span style="font-family: Courier New,Courier,monospace">http://{provider URI}/datacontrol/provider/{provider name}</span></li></ul></li>\r
+<li>Data ID\r
+<p>String ID for identifying specific data, usually a database table name or a registry section name.</p>\r
+<p>Format:</p>\r
+<ul><li>Data ID consists of one or more components, separated by a slash (&quot;/&quot;) character.</li></ul></li></ul>\r
+\r
+\r
+<h2 id="use" name="use">Using Data Controls</h2>\r
+<p>You can get a <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance from the <span style="font-family: Courier New,Courier,monospace">datacontrol_map_create()</span> or <span style="font-family: Courier New,Courier,monospace">datacontrol_sql_create()</span> function.</p>\r
+<ul><li>Map type data control\r
+<p>If you specify the <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance using the <span style="font-family: Courier New,Courier,monospace">data_control_map_create()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_set_provider_id()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_map_set_data_id()</span> function, you can get the specific map-type data control uniquely. </p>\r
+<p>After resolving the data control, call the data control map APIs, such as <span style="font-family: Courier New,Courier,monospace">data_control_map_set()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_get()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_add()</span>, and <span style="font-family: Courier New,Courier,monospace">data_control_map_remove()</span>.</p>\r
+<p>The result is returned by a response callback, such as <span style="font-family: Courier New,Courier,monospace">data_control_map_get_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_set_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_map_add_response_cb()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_map_remove_response_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">data_control_map_response_cb struct</span>. The response callback is invoked when a service application finishes its operation.</p></li>\r
+<li>Sql type data control\r
+<p>If you specify the <span style="font-family: Courier New,Courier,monospace">datacontrol_h</span> instance using the <span style="font-family: Courier New,Courier,monospace">data_control_sql_create()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_provider_id()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_sql_set_data_id()</span> function, you can get the specific SQL-type data control uniquely. </p>\r
+<p>After resolving the data control, call the data control SQL APIs, such as  <span style="font-family: Courier New,Courier,monospace">datacontrol_sql_select()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_insert()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_update()</span>, and <span style="font-family: Courier New,Courier,monospace">data_control_sql_delete()</span>.</p>\r
+<p>The result is returned by a response callback, such as <span style="font-family: Courier New,Courier,monospace">data_control_sql_select_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_insert_response_cb()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_sql_update_response_cb()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_sql_delete_response_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">data_control_sql_response_cb struct</span>. The response callback is invoked when a service application finishes its operation.</p>\r
+<p>Once you get the <span style="font-family: Courier New,Courier,monospace">result_set_cursor</span> using the <span style="font-family: Courier New,Courier,monospace">data_control_sql_select_response_cb()</span> callback, you can use the following functions to get information:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_first()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_last()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_step_next()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_set_previous()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_count()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_name()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_item_size()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_column_item_type()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_blob_data()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_int_data()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_int64_data()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_double_data()</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">data_control_sql_get_text_data()</span></li></ul></li></ul>\r
+\r
+<h2 id="develop" name="develop">Developing with Data Controls</h2>\r
+<p>You can develop with data controls by adding the <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>\r
+<p>The following code example describes how to add the <span style="font-family: Courier New,Courier,monospace">&lt;datacontrol&gt;</span> element:</p>\r
+<pre class="prettyprint">\r
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r
+&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; package=&quot;@PACKAGE_NAME@&quot; version=&quot;@VERSION@&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;install-location=&quot;internal-only&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;datacontrolprovider&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;author email=&quot;PUT YOUR EMAIL&quot; href=&quot;www.tizen.org&quot;&gt;PUT YOUR NAME&lt;/author&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;description&gt;datacontrolprovider&lt;/description&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.datacontrolprovider&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exec=&quot;datacontrolprovider&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;true&quot; multiple=&quot;false&quot; type=&quot;capp&quot; taskmanage=&quot;true&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;auto-restart=&quot;false&quot; on-boot=&quot;false&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;datacontrol providerid = &quot;Your Provider ID&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;access=&quot;ReadWrite&quot; type=&quot;Sql&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;datacontrol providerid = &quot;Your Provider ID&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;access=&quot;ReadWrite&quot; type=&quot;Map&quot;/&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;\r
+&lt;/manifest&gt;\r
+</pre>\r
+\r
+<p>The service application providing its own database file must register the provider callback using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_sql_register_cb()</span> function. Similarly, the service application providing its own registry file or key-value pairs data set must register the provider callback using the <span style="font-family: Courier New,Courier,monospace">data_control_provider_map_register_cb()</span> function.</p>\r
+<p>The service application sends the SQL- or map-type data control result to the other application by using functions, such as <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_select_result()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_insert_result()</span>, <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_update_result()</span>, or <span style="font-family: Courier New,Courier,monospace">data_control_provider_send_delete_result()</span>.</p>\r
+ \r
+\r
+<p>You can <a href="#export">export the data of your service application</a> to other applications.</p> \r
+ \r
+       \r
+       <h2 id="export" name="export">Exporting DataControl Functionality</h2> \r
+\r
+<p>You can export functionalities of your Tizen native application in the <a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE. The provider ID, type, and accessibility must be specified for the data control.</p> \r
+  <p class="figure">Figure: Exporting data control</p> \r
+  <p align="center"><img alt="Exporting data control" src="../../images/exporting_datacontrol.png"/></p> \r
+  <h3 id="data" name="data">Data Model</h3> \r
+  <p>The data model must be opened to the public to help other applications to use the exported data controls. The data model consists of the following data:</p> \r
+  <ul>\r
+<li>Provider ID \r
+    <ul>\r
+<li>It is used for identifying a data control provider.</li> \r
+     <li>It must be unique and use a fully qualified domain name.</li> \r
+     <li>Platform-defined data control provider is defined in the format: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/datacontrol/provider/&lt;application name&gt;</span>\r
+</li> \r
+     <li>User-defined data control provider is defined in the format: <span style="font-family: Courier New,Courier,monospace">http://&lt;vendor.com&gt;/datacontrol/provider/&lt;application name&gt;</span>\r
+</li> \r
+    </ul>\r
+</li> \r
+   <li>Data ID \r
+    <ul>\r
+<li>It is used for identifying data exported by the data control provider.</li> \r
+     <li>It must be unique in the data control provider and it is given as a string with a slash as a delimiter.</li> \r
+    </ul>\r
+</li> \r
+   <li>Type \r
+    <ul>\r
+<li>You can use Tizen native applications that provide their own data structure table and implement the SQL-type data control provider using the database file.</li> \r
+     <li>You can use Tizen native applications that provide their own key-value pairs data structure map and implement the map-type data control provider using registry file or collection map classes.</li> \r
+    </ul>\r
+</li> \r
+   <li>Data schema \r
+    <ul>\r
+<li>SQL-type data control exports column names and types of the data structure table.</li> \r
+     <li>Map-type data control exports key names and types of the data structure map.</li> \r
+    </ul>\r
+</li> \r
+   <li>Data accessibility <p>Tizen native applications can control read and write access from other applications by allowing data control accessibility.</p> </li> \r
+  </ul>\r
+<table border="1" style="width: 100%">\r
+<caption>\r
+     Table: Data model example of a data control provider \r
+   </caption> \r
+   <tbody>\r
+<tr>\r
+<th style="text-align:center;margin-left:auto;margin-right:auto;">Data control type</th> \r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data control provider ID</th> \r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data control data ID</th> \r
+     <th colspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Data schema</th> \r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data accessibility</th> \r
+    </tr>\r
+<tr>\r
+<td>SQL</td> \r
+     <td>http://&lt;vendor.com&gt;/datacontrol/provider/sample</td> \r
+     <td>data1</td> \r
+     <td>\r
+<p>column1<br/> (type: <span style="font-family: Courier New,Courier,monospace">Integer</span>)</p> </td> \r
+     <td>\r
+<p>column2<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</p> </td> \r
+     <td>Read-Only</td> \r
+    </tr>\r
+<tr>\r
+<td>Map</td> \r
+     <td>http://&lt;vendor.com&gt;/datacontrol/provider/sample2</td> \r
+     <td>data2</td> \r
+     <td>\r
+<p>key1<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</p> </td> \r
+     <td>\r
+<p>key2<br/> (type: <span style="font-family: Courier New,Courier,monospace">String</span>)</p> </td> \r
+     <td>Read-Write</td> \r
+    </tr>\r
+</tbody>\r
+</table>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/message_port_n.htm b/org.tizen.guides/html/native/app/message_port_n.htm
index ce535dd..4197041 100644 (file)
--- a/org.tizen.guides/html/native/app/message_port_n.htm
+++ b/org.tizen.guides/html/native/app/message_port_n.htm
@@ -1,83 +1,83 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Message Port</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm">Message Port Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Mobile Native</a></li>      
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1 id="message_port" name="message_port">Message Port</h1>
-<p>Tizen applications can communicate with each other using message ports. Applications can send and receive messages through message port communication. The message data type for communication is a map data which consists of a bundle (key and value pair).</p>
-<p>You can communicate between applications using 2 types of message port:</p>
-<ul><li>Local port is used to register your message port and prepare to receive messages from another application.
-<p>To receive messages from the another application, set the callback from the local message port.</p></li>
-<li>Remote port is used to send messages to other applications. The local message port information can be sent to the other application for bi-directional communication.</li></ul>
-<p>A message port supports 2 communication methods:</p>
-<ul><li>Uni-directional communication 
-<ul><li>Check whether the message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>
-<li>A Tizen application can send messages to another application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function.</li> 
-<li>Another application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</li></ul>
-  <p class="figure">Figure: Uni-directional communication</p> 
-  <p align="center"><img alt="Uni-directional communication" src="../../images/unidirection.png" /></p> </li>
-<li>Bi-directional communication 
-<ul><li>Check whether the trusted message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>
-<li>A Tizen application can send messages and local message port information to another application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function. This local message port information can be used to send the response messages from the other application which receives these messages.</li> 
-<li>Another application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function. The remote message port information can be used to send response messages to the application which sends the messages.</li></ul>
-  <p class="figure">Figure: Bi-directional communication</p> 
-  <p align="center"><img alt="Bi-directional communication" src="../../images/bidirection.png" /></p> </li></ul>
-
-<h2 id="trusted" name="trusted">Trusted Communication</h2>
-<p>You can send and receive trusted messages through message port APIs. The trusted message port instance can be retrieved using the <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> function. Communication over the trusted message port is allowed only if both applications are signed with a certificate that is uniquely assigned to its developer. </p>
-  <p class="figure">Figure: Trusted message port communication</p> 
-  <p align="center"><img alt="Trusted message port communication" src="../../images/trusted_communication.png" /></p>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Message Port</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm">Message Port Tutorial</a></li> \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Mobile Native</a></li>      \r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1 id="message_port" name="message_port">Message Port</h1>\r
+<p>Tizen applications can communicate with each other using message ports. Applications can send and receive messages through message port communication. The message data type for communication is a map data which consists of a bundle (key and value pair).</p>\r
+<p>You can communicate between applications using 2 types of message port:</p>\r
+<ul><li>Local port is used to register your message port and prepare to receive messages from another application.\r
+<p>To receive messages from the another application, set the callback from the local message port.</p></li>\r
+<li>Remote port is used to send messages to other applications. The local message port information can be sent to the other application for bi-directional communication.</li></ul>\r
+<p>A message port supports 2 communication methods:</p>\r
+<ul><li>Uni-directional communication \r
+<ul><li>Check whether the message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>\r
+<li>A Tizen application can send messages to another application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function.</li> \r
+<li>Another application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</li></ul>\r
+  <p class="figure">Figure: Uni-directional communication</p> \r
+  <p align="center"><img alt="Uni-directional communication" src="../../images/unidirection.png" /></p> </li>\r
+<li>Bi-directional communication \r
+<ul><li>Check whether the trusted message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>\r
+<li>A Tizen application can send messages and local message port information to another application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function. This local message port information can be used to send the response messages from the other application which receives these messages.</li> \r
+<li>Another application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function. The remote message port information can be used to send response messages to the application which sends the messages.</li></ul>\r
+  <p class="figure">Figure: Bi-directional communication</p> \r
+  <p align="center"><img alt="Bi-directional communication" src="../../images/bidirection.png" /></p> </li></ul>\r
+\r
+<h2 id="trusted" name="trusted">Trusted Communication</h2>\r
+<p>You can send and receive trusted messages through message port APIs. The trusted message port instance can be retrieved using the <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> function. Communication over the trusted message port is allowed only if both applications are signed with a certificate that is uniquely assigned to its developer. </p>\r
+  <p class="figure">Figure: Trusted message port communication</p> \r
+  <p align="center"><img alt="Trusted message port communication" src="../../images/trusted_communication.png" /></p>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/notification_n.htm b/org.tizen.guides/html/native/app/notification_n.htm
index 5ee3dce..7dcace0 100644 (file)
--- a/org.tizen.guides/html/native/app/notification_n.htm
+++ b/org.tizen.guides/html/native/app/notification_n.htm
@@ -1,84 +1,103 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Notification</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm">Notification Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">Notification API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Notification</h1>
-  <p>An application can create notifications for the user.</p>
-<p>The Tizen Notification API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span> privilege.</p>
-
-<p>To use the notification feature:</p>
-<ul><li>To post a simple notification, use the <span style="font-family: Courier New,Courier,monospace">notification_post(</span>) function, which accepts a notification handle as a parameter.
-<p>The posted notification has a default notification icon and the application name as the title.</p></li>
-<li>To control the detailed behavior of the notification or to show the progress bar in the on-going activity area, use the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function to get a notification handle and set the details.</li></ul>
-
-<h2 id="type" name="type">Notification Types</h2>
-<p>Tizen provides notifications by using a combination of any of the following notification types:</p>
-
-<ul><li>Ticker</li> 
-<li>Quick panel </li>
-<li>Badge number </li>
-<li>Sound </li></ul>
-
-<p>You can specify the message for the ticker or quick panel, and the badge number for the notification. The display area for quick panel notifications can be one of the following:</p>
-<ul><li>Notification area 
-<p>The notification area is the reserved space for displaying all notifications, except the on-going notifications.</p></li>
-<li>On-going area 
-<p>The on-going area is the application screen area and is only used to display notifications for the currently running application.</p></li></ul>
-
-   <p class="figure">Figure: Notification and on-going areas</p> 
-   <p align="center"><img alt="Notification and on-going areas" src="../../images/notification.png" /></p>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Notification</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+       <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                               <li><a href="#type">Notification Types</a></li>\r
+                               <li><a href="#layout">Notification Layouts</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm">Notification Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">Notification API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Notification</h1>\r
+  <p>An application can create notifications for the user.</p>\r
+<p>The Tizen Notification API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span> privilege.</p>\r
+\r
+<p>To use the notification feature:</p>\r
+<ul><li>To post a simple notification, use the <span style="font-family: Courier New,Courier,monospace">notification_post(</span>) function, which accepts a notification handle as a parameter.\r
+<p>The posted notification has a default notification icon and the application name as the title.</p></li>\r
+<li>To control the detailed behavior of the notification or to show the progress bar in the on-going activity area, use the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function to get a notification handle and set the details.</li></ul>\r
+\r
+<h2 id="type" name="type">Notification Types</h2>\r
+<p>Tizen provides notifications by using a combination of any of the following notification types:</p>\r
+\r
+<ul><li>Indicator</li> \r
+<li>Quick panel</li>\r
+<li>Sound </li></ul>\r
+\r
+<p>You can specify the message for the indicator or quick panel. The display area for quick panel notifications can be one of the following:</p>\r
+<ul><li>Notification area \r
+<p>The notification area is the reserved space for displaying all notifications, except the on-going notifications.</p></li>\r
+<li>On-going area \r
+<p>The on-going area is the application screen area and is only used to display notifications for the currently running application.</p></li></ul>\r
+\r
+   <p class="figure">Figure: Notification and on-going areas</p> \r
+   <p align="center"><img alt="Notification and on-going areas" src="../../images/notification.png" /></p>\r
+\r
+<h2 id="layout" name="layout">Notification Layouts</h2>\r
+<p>The following notification layouts are provided:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_EVENT_SINGLE</span> \r
+<p>Layout for a single event notification.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_EVENT_MULTIPLE</span> \r
+<p>Layout for a multiple event notification.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_THUMBNAIL</span> \r
+<p>Layout for a notification displaying images.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_ONGOING_EVENT</span> \r
+<p>Layout for an ongoing notification displaying a text message.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_ONGOING_PROGRESS</span> \r
+<p>Layout for an ongoing notification displaying progress.</p></li></ul>\r
+\r
+   <p class="figure">Figure: Notification layouts</p> \r
+   <p align="center"><img alt="Notification layouts" src="../../images/notification_layout_desc.png" /></p>\r
+ \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/package_n.htm b/org.tizen.guides/html/native/app/package_n.htm
index da65446..a4192be 100644 (file)
--- a/org.tizen.guides/html/native/app/package_n.htm
+++ b/org.tizen.guides/html/native/app/package_n.htm
@@ -1,61 +1,61 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Package Manager</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm">Package Manager Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Package Manager</h1>
-
-<p>The package manager is used to retrieve detailed information of the installed packages on the device. This information includes the package name, label, path to the icon image, version, type, and installed storage.</p>
-<p>To retrieve package information, get the <span style="font-family: Courier New,Courier,monospace">package_info_h</span> object using the <span style="font-family: Courier New,Courier,monospace">package_info_create()</span> or <span style="font-family: Courier New,Courier,monospace">package_manager_get_package_info()</span> function.</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info()</span> function to retrieve the package information of all installed packages. As a result, the <span style="font-family: Courier New,Courier,monospace">package_manager_package_info_cb()</span> callback is invoked and you can get package information.</p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Package Manager</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm">Package Manager Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Package Manager</h1>\r
+\r
+<p>The package manager is used to retrieve detailed information of the installed packages on the device. This information includes the package name, label, path to the icon image, version, type, and installed storage.</p>\r
+<p>To retrieve package information, get the <span style="font-family: Courier New,Courier,monospace">package_info_h</span> object using the <span style="font-family: Courier New,Courier,monospace">package_info_create()</span> or <span style="font-family: Courier New,Courier,monospace">package_manager_get_package_info()</span> function.</p>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info()</span> function to retrieve the package information of all installed packages. As a result, the <span style="font-family: Courier New,Courier,monospace">package_manager_package_info_cb()</span> callback is invoked and you can get package information.</p>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/service_app_n.htm b/org.tizen.guides/html/native/app/service_app_n.htm
index fab1470..6e2f5aa 100644 (file)
--- a/org.tizen.guides/html/native/app/service_app_n.htm
+++ b/org.tizen.guides/html/native/app/service_app_n.htm
@@ -1,257 +1,257 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Service Application</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-        <ul class="toc">
-                       <li><a href="#register">Registering Callbacks for Service Application Events</a></li>
-                       <li><a href="#attribute">Application Attributes</a></li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">Service Application Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Mobile Native</a></li> 
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Service Application</h1> 
-
-<p>Service applications are Tizen native applications with no graphical user interface that run in the background. They can be very useful in performing activities (such as getting sensor data in the background) that need to run periodically or continuously, but do not require any user intervention.</p>
-<p>Service applications can be explicitly launched by a UI application. They can also be launched conditionally.</p>
-
-<p>The user can check the running service applications in the task switcher; however, no events occur if the user selects a service application from the task switcher. The main menu does not contain icons for service applications. Multiple service applications can be running simultaneously with other service and UI applications.</p>
-
-<p>The following figure and table describe the service application states.</p>
-
-    <p class="figure">Figure: Running service applications</p>
-    <p align="center"><img alt="Running service applications" src="../../images/app_run.png" /></p>
-
-    <table>
-   <caption>
-     Table: Service application states
-   </caption>
-   <tbody>
-    <tr>
-     <th>State</th>
-     <th>Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>
-     <td>Application is launched.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>
-     <td>Application runs in the background.</td>
-    </tr>
-
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>
-     <td>Application is terminated.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<h2 id="register" name="register">Registering Callbacks for Service Application Events</h2>
-<p>The following table lists the application state change events.</p>
-
-    <table>
-   <caption>
-     Table: Application states
-   </caption>
-   <tbody>
-    <tr>
-     <th>Callback</th>
-     <th>Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">service_app_create_cb()</span></td>
-     <td>Used to take necessary actions before the main event loop starts. Place the initialization code (such as setting up the dbus connection) here.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">service_app_control_cb()</span></td>
-     <td>Used to take necessary actions when a service call arrives from another application.</td>
-    </tr>
-
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">service_app_terminate_cb()</span></td>
-     <td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully any shared resources. </td>
-    </tr>
-   </tbody>
-  </table>
-
-<p>The following table lists the system event events.</p>
-
-    <table>
-   <caption>
-     Table: Application states
-   </caption>
-   <tbody>
-    <tr>
-     <th>Callback</th>
-     <th>Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">service_app_low_memory_cb()</span></td>
-     <td><p>Used to take necessary actions in low memory situations. </p>
-        <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. Release any cached data in the main memory to secure more free memory.</p></td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">service_app_low_battery_cb()</span></td>
-     <td><p>Used to take necessary actions in low battery situations.</p>
-               <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the power goes off completely. Stop heavy CPU consumption or power consumption activities to save the remaining power.</p></td>
-    </tr>
-   </tbody>
-  </table>
-
-<h2 id="attribute" name="attribute">Application Attributes</h2>
-<p>Describe your service application attributes in the manifest file. The attributes determine the application behavior. The following code example illustrates how you can define the attributes:</p>
-
-<pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; package=&quot;org.tizen.message&quot; version=&quot;0.2.7&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;install-location=&quot;internal-only&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Message&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;description&gt;Message Application&lt;/description&gt;
-&nbsp;&nbsp;&nbsp;&lt;service-application appid=&quot;org.tizen.message&quot; exec=&quot;/usr/apps/org.tizen.message/bin/message&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;true&quot; multiple=&quot;false&quot; type=&quot;capp&quot; taskmanage=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;org.tizen.message.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Message&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Consumer--&gt;
-&nbsp;&nbsp;&nbsp;&lt;service-application component-type=&quot;svcapp&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appid=&quot;org.tizen.message.consumer&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exec=&quot;/usr/apps/org.tizen.message/bin/msg-consumer-service&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;true&quot;  multiple=&quot;false&quot; type=&quot;capp&quot; taskmanage=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;
-&lt;/manifest&gt;
-</pre>
-
-<p>Pay specific attention to the following attributes:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">component-type</span>
-<p>Set your service application component type to <span style="font-family: Courier New,Courier,monospace">svcapp</span> to define the application as a service application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">auto-restart</span>
-<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, the attribute is not supported in all Tizen devices.</td> 
-    </tr> 
-   </tbody> 
-  </table>  </li>
-<li><span style="font-family: Courier New,Courier,monospace">on-boot</span>
-<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, the attribute is not supported in all Tizen devices.</td> 
-    </tr> 
-   </tbody> 
-  </table>  </li></ul>
-
-<p>The following table defines the behaviors resulting from the attribute combinations:</p>
-
-<table>
-   <caption>
-     Table: Attribute combinations
-   </caption>
-   <tbody>
-    <tr>
-     <th><span style="font-family: Courier New,Courier,monospace">auto-restart</span></th>
-     <th><span style="font-family: Courier New,Courier,monospace">on-boot</span></th>
-     <th>After normal termination</th>
-     <th>On forced close</th>
-     <th>On Reboot</th>
-     <th>After package installation</th>
-     <th>After package update</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
-     <td>Not launched automatically</td>
-        <td>Not launched automatically</td>
-        <td>Not launched after reboot</td>
-        <td>Not launched</td>
-        <td>Not launched automatically</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
-     <td>Not launched automatically</td>
-        <td>Not launched automatically</td>
-        <td>Launched automatically after reboot</td>
-        <td>Launched</td>
-        <td>Launched automatically</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>
-     <td>Launched automatically</td>
-        <td>Launched automatically</td>
-        <td>Not launched after reboot</td>
-        <td>Not launched</td>
-        <td>Launched automatically</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>
-     <td>Launched automatically</td>
-        <td>Launched automatically</td>
-        <td>Launched automatically after reboot</td>
-        <td>Launched</td>
-        <td>Launched automatically</td>
-    </tr>
-   </tbody>
-  </table>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>        
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Service Application</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                       <li><a href="#register">Registering Callbacks for Service Application Events</a></li>\r
+                       <li><a href="#attribute">Application Attributes</a></li>\r
+        </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">Service Application Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Mobile Native</a></li> \r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Service Application</h1> \r
+\r
+<p>Service applications are Tizen native applications with no graphical user interface that run in the background. They can be very useful in performing activities (such as getting sensor data in the background) that need to run periodically or continuously, but do not require any user intervention.</p>\r
+<p>Service applications can be explicitly launched by a UI application. They can also be launched conditionally.</p>\r
+\r
+<p>The user can check the running service applications in the task switcher; however, no events occur if the user selects a service application from the task switcher. The main menu does not contain icons for service applications. Multiple service applications can be running simultaneously with other service and UI applications.</p>\r
+\r
+<p>The following figure and table describe the service application states.</p>\r
+\r
+    <p class="figure">Figure: Running service applications</p>\r
+    <p align="center"><img alt="Running service applications" src="../../images/app_run.png" /></p>\r
+\r
+    <table>\r
+   <caption>\r
+     Table: Service application states\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>State</th>\r
+     <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>\r
+     <td>Application is launched.</td>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>\r
+     <td>Application runs in the background.</td>\r
+    </tr>\r
+\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>\r
+     <td>Application is terminated.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<h2 id="register" name="register">Registering Callbacks for Service Application Events</h2>\r
+<p>The following table lists the application state change events.</p>\r
+\r
+    <table>\r
+   <caption>\r
+     Table: Application states\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Callback</th>\r
+     <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_create_cb()</span></td>\r
+     <td>Used to take necessary actions before the main event loop starts. Place the initialization code (such as setting up the dbus connection) here.</td>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_control_cb()</span></td>\r
+     <td>Used to take necessary actions when a service call arrives from another application.</td>\r
+    </tr>\r
+\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_terminate_cb()</span></td>\r
+     <td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully any shared resources. </td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<p>The following table lists the system event events.</p>\r
+\r
+    <table>\r
+   <caption>\r
+     Table: Application states\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Callback</th>\r
+     <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_low_memory_cb()</span></td>\r
+     <td><p>Used to take necessary actions in low memory situations. </p>\r
+        <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. Release any cached data in the main memory to secure more free memory.</p></td>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">service_app_low_battery_cb()</span></td>\r
+     <td><p>Used to take necessary actions in low battery situations.</p>\r
+               <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the power goes off completely. Stop heavy CPU consumption or power consumption activities to save the remaining power.</p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<h2 id="attribute" name="attribute">Application Attributes</h2>\r
+<p>Describe your service application attributes in the manifest file. The attributes determine the application behavior. The following code example illustrates how you can define the attributes:</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r
+&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; package=&quot;org.tizen.message&quot; version=&quot;0.2.7&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;install-location=&quot;internal-only&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Message&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;description&gt;Message Application&lt;/description&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;service-application appid=&quot;org.tizen.message&quot; exec=&quot;/usr/apps/org.tizen.message/bin/message&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;true&quot; multiple=&quot;false&quot; type=&quot;capp&quot; taskmanage=&quot;true&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;org.tizen.message.png&lt;/icon&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Message&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;!--Consumer--&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;service-application component-type=&quot;svcapp&quot; auto-restart=&quot;true&quot; on-boot=&quot;true&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appid=&quot;org.tizen.message.consumer&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exec=&quot;/usr/apps/org.tizen.message/bin/msg-consumer-service&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;true&quot;  multiple=&quot;false&quot; type=&quot;capp&quot; taskmanage=&quot;false&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;\r
+&lt;/manifest&gt;\r
+</pre>\r
+\r
+<p>Pay specific attention to the following attributes:</p>\r
+\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">component-type</span>\r
+<p>Set your service application component type to <span style="font-family: Courier New,Courier,monospace">svcapp</span> to define the application as a service application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">auto-restart</span>\r
+<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.</p>\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This attribute is not supported in Tizen wearable devices.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>  </li>\r
+<li><span style="font-family: Courier New,Courier,monospace">on-boot</span>\r
+<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.</p>\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This attribute is not supported in Tizen wearable devices.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>  </li></ul>\r
+\r
+<p>The following table defines the behaviors resulting from the attribute combinations:</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: Attribute combinations\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th><span style="font-family: Courier New,Courier,monospace">auto-restart</span></th>\r
+     <th><span style="font-family: Courier New,Courier,monospace">on-boot</span></th>\r
+     <th>After normal termination</th>\r
+     <th>On forced close</th>\r
+     <th>On Reboot</th>\r
+     <th>After package installation</th>\r
+     <th>After package update</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>\r
+     <td>Not launched automatically</td>\r
+        <td>Not launched automatically</td>\r
+        <td>Not launched after reboot</td>\r
+        <td>Not launched</td>\r
+        <td>Not launched automatically</td>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>\r
+     <td>Not launched automatically</td>\r
+        <td>Not launched automatically</td>\r
+        <td>Launched automatically after reboot</td>\r
+        <td>Launched</td>\r
+        <td>Launched automatically</td>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">FALSE</span></td>\r
+     <td>Launched automatically</td>\r
+        <td>Launched automatically</td>\r
+        <td>Not launched after reboot</td>\r
+        <td>Not launched</td>\r
+        <td>Launched automatically</td>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">TRUE</span></td>\r
+     <td>Launched automatically</td>\r
+        <td>Launched automatically</td>\r
+        <td>Launched automatically after reboot</td>\r
+        <td>Launched</td>\r
+        <td>Launched automatically</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/shortcut_n.htm b/org.tizen.guides/html/native/app/shortcut_n.htm
index 4e8d513..c0fdfb2 100644 (file)
--- a/org.tizen.guides/html/native/app/shortcut_n.htm
+++ b/org.tizen.guides/html/native/app/shortcut_n.htm
@@ -1,73 +1,73 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Shortcut</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm">Shortcut Tutorial</a></li>   
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API for Mobile Native</a></li>
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
- <h1>Shortcut</h1> 
-  
-<p>You can add your shortcut for the Home application. The Tizen Shortcut API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/shortcut</span> privilege.</p>
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>To use the shortcut feature:</p>
-<ul><li>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function, which requests the Home application to add a new shortcut.</li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Shortcut</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm">Shortcut Tutorial</a></li>   \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API for Mobile Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>Shortcut</h1> \r
+  \r
+<p>You can add your shortcut for the Home application. The Tizen Shortcut API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/shortcut</span> privilege.</p>\r
+\r
+  <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<p>To use the shortcut feature:</p>\r
+<ul><li>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function, which requests the Home application to add a new shortcut.</li>\r
+</ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/watch_n.htm b/org.tizen.guides/html/native/app/watch_n.htm
index 1f784ec..2f0e86c 100644 (file)
--- a/org.tizen.guides/html/native/app/watch_n.htm
+++ b/org.tizen.guides/html/native/app/watch_n.htm
@@ -1,170 +1,170 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Watch Application</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-                       <ul class="toc">
-                               <li><a href="#register">Application States and Events</a></li>
-                               <li><a href="#menu">Changing the Watch UI</a></li>
-                       </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm">Watch Application Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Watch Application</h1>
-<p>Tizen allows you to create a watch application and manage its life-cycle to display the current date and time accurately on the screen.</p>
-
-       <table class="note">
-               <tbody>
-               <tr>
-                       <th class="note">Note</th>
-               </tr>
-               <tr>
-                          <td class="note">This feature is supported in wearable applications only.</td>
-               </tr>
-               </tbody>
-       </table>
-          
-<p>The main features of the Watch Application API include:</p>
-<ul>
-<li>Managing the application life-cycle
-<p>You can create and initialize a watch application with the <span style="font-family: Courier New,Courier,monospace">main()</span> function.</p>
-<p>To start an event loop, use the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure variable, which contains the required event callbacks.</p>
-<p>When initializing the application, <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#watch_app">edit the manifest file</a> to define the watch application settings.</p>
-</li>
-<li>Managing the time handle and displaying the time
-<p>To draw an accurate clock in various formats on the screen, use the Watch Application getter APIs with the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> time handle. You can get the handle with the <span style="font-family: Courier New,Courier,monospace">watch_time_get_current_time()</span> function.</p></li>
-<li>Managing the ambient mode
-<p>In a low-powered wearable device, an ambient mode is available. In this mode, the watch application shows a limited UI and receives only the ambient tick event every minute to reduce power consumption.</p>
-<p>The details of the limited UI drawn in the ambient mode depend on the device. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 20% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient-support</span> attribute to <span style="font-family: Courier New,Courier,monospace">false</span> in the watch application <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#watch_app">manifest file</a> to allow the platform to show a default ambient mode UI.</p>
-
-<p>To use the ambient mode, the user must enable it in the device settings.</p>
-
-</li>
-</ul>
-
-<h2 id="register" name="register">Application States and Events</h2>
-
-<p>The following figure illustrates the watch application states during the application life-cycle:</p>
-<ul>
-<li>Before the main loop of the application starts, the application is in the Created state.</li>
-<li>When the application is running, it is in the Running state.</li>
-<li>When the application is invisible, it is in the Paused state.</li>
-<li>When the application is in the ambient mode, it is in the Ambient state.</li>
-<li>When the application exits, it is in the Terminated state.</li>
-</ul>
-       <p class="figure">Figure: Watch application life-cycle</p>
-       <p align="center"><img alt="Watch application life-cycle" src="../../images/watch_app_lifecycle.png" /></p>
-
-
-<p>The following table lists the callbacks you can use as the application state changes.</p>
-
-<table>
-          <caption>
-                          Table: Application state change callbacks
-          </caption>
-          <tbody>
-         <tr>
-                          <th>Callback</th>
-                          <th>Description</th>
-          </tr>
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">app_create()</span></td>
-                          <td>Called before the main loop of the application starts. In this callback, you can initialize application resources, such as window creation and data structure.</td>
-          </tr>
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">app_control()</span></td>
-                          <td>Used to take necessary actions when a service call arrives from another application.</td>
-          </tr>
-
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">app_pause()</span></td>
-                          <td>Called when the application is completely obscured by another application and becomes invisible.</td>
-          </tr>
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">app_resume()</span></td>
-                          <td>Called when the application becomes visible.</td>
-          </tr>
-
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">app_terminate()</span></td>
-                          <td>Called when the application main loop exits. </td>
-          </tr>
-
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">app_time_tick()</span></td>
-                          <td>Called at least once per second. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> handle and draw the normal watch.</td>
-          </tr>
-
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">app_ambient_tick()</span></td>
-                          <td>Called at least once per minute or when the device enters the ambient mode. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> handle and draw the ambient mode watch.</td>
-          </tr>
-
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">app_ambient_changed()</span></td>
-                          <td>Called when the device enters or exits the ambient mode.</td>
-          </tr>
-
-          </tbody>
-</table>
-
-
-       <h2 id="menu" name="menu">Changing the Watch UI</h2>
-
-<p>The user can change the watch application UI in the Clock menu through the device setting menu.</p>
-<p>When a watch application is successfully installed on a device, its UI is visible in the clock menu of the watch settings.</p>
-
-       <p class="figure">Figure: Clock menu</p>
-       <p align="center">
-                  <img alt="Clock menu" src="../../images/setting_to_clock.png" />
-       </p>
-         
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Watch Application</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+                       <ul class="toc">\r
+                               <li><a href="#register">Application States and Events</a></li>\r
+                               <li><a href="#menu">Changing the Watch UI</a></li>\r
+                       </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm">Watch Application Tutorial</a></li> \r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Watch Application</h1>\r
+<p>Tizen allows you to create a watch application and manage its life-cycle to display the current date and time accurately on the screen.</p>\r
+\r
+       <table class="note">\r
+               <tbody>\r
+               <tr>\r
+                       <th class="note">Note</th>\r
+               </tr>\r
+               <tr>\r
+                          <td class="note">This feature is supported in wearable applications only.</td>\r
+               </tr>\r
+               </tbody>\r
+       </table>\r
+          \r
+<p>The main features of the Watch Application API include:</p>\r
+<ul>\r
+<li>Managing the application life-cycle\r
+<p>You can create and initialize a watch application with the <span style="font-family: Courier New,Courier,monospace">main()</span> function.</p>\r
+<p>To start an event loop, use the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure variable, which contains the required event callbacks.</p>\r
+<p>When initializing the application, <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#watch_app">edit the manifest file</a> to define the watch application settings.</p>\r
+</li>\r
+<li>Managing the time handle and displaying the time\r
+<p>To draw an accurate clock in various formats on the screen, use the Watch Application getter APIs with the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> time handle. You can get the handle with the <span style="font-family: Courier New,Courier,monospace">watch_time_get_current_time()</span> function.</p></li>\r
+<li>Managing the ambient mode\r
+<p>In a low-powered wearable device, an ambient mode is available. In this mode, the watch application shows a limited UI and receives only the ambient tick event every minute to reduce power consumption.</p>\r
+<p>The details of the limited UI drawn in the ambient mode depend on the device. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 20% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient-support</span> attribute to <span style="font-family: Courier New,Courier,monospace">false</span> in the watch application <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#watch_app">manifest file</a> to allow the platform to show a default ambient mode UI.</p>\r
+\r
+<p>To use the ambient mode, the user must enable it in the device settings.</p>\r
+\r
+</li>\r
+</ul>\r
+\r
+<h2 id="register" name="register">Application States and Events</h2>\r
+\r
+<p>The following figure illustrates the watch application states during the application life-cycle:</p>\r
+<ul>\r
+<li>Before the main loop of the application starts, the application is in the Created state.</li>\r
+<li>When the application is running, it is in the Running state.</li>\r
+<li>When the application is invisible, it is in the Paused state.</li>\r
+<li>When the application is in the ambient mode, it is in the Ambient state.</li>\r
+<li>When the application exits, it is in the Terminated state.</li>\r
+</ul>\r
+       <p class="figure">Figure: Watch application life-cycle</p>\r
+       <p align="center"><img alt="Watch application life-cycle" src="../../images/watch_app_lifecycle.png" /></p>\r
+\r
+\r
+<p>The following table lists the callbacks you can use as the application state changes.</p>\r
+\r
+<table>\r
+          <caption>\r
+                          Table: Application state change callbacks\r
+          </caption>\r
+          <tbody>\r
+         <tr>\r
+                          <th>Callback</th>\r
+                          <th>Description</th>\r
+          </tr>\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">app_create()</span></td>\r
+                          <td>Called before the main loop of the application starts. In this callback, you can initialize application resources, such as window creation and data structure.</td>\r
+          </tr>\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">app_control()</span></td>\r
+                          <td>Used to take necessary actions when a service call arrives from another application.</td>\r
+          </tr>\r
+\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">app_pause()</span></td>\r
+                          <td>Called when the application is completely obscured by another application and becomes invisible.</td>\r
+          </tr>\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">app_resume()</span></td>\r
+                          <td>Called when the application becomes visible.</td>\r
+          </tr>\r
+\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">app_terminate()</span></td>\r
+                          <td>Called when the application main loop exits. </td>\r
+          </tr>\r
+\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">app_time_tick()</span></td>\r
+                          <td>Called at least once per second. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> handle and draw the normal watch.</td>\r
+          </tr>\r
+\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">app_ambient_tick()</span></td>\r
+                          <td>Called at least once per minute or when the device enters the ambient mode. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> handle and draw the ambient mode watch.</td>\r
+          </tr>\r
+\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">app_ambient_changed()</span></td>\r
+                          <td>Called when the device enters or exits the ambient mode.</td>\r
+          </tr>\r
+\r
+          </tbody>\r
+</table>\r
+\r
+\r
+       <h2 id="menu" name="menu">Changing the Watch UI</h2>\r
+\r
+<p>The user can change the watch application UI in the Clock menu through the device setting menu.</p>\r
+<p>When a watch application is successfully installed on a device, its UI is visible in the clock menu of the watch settings.</p>\r
+\r
+       <p class="figure">Figure: Clock menu</p>\r
+       <p align="center">\r
+                  <img alt="Clock menu" src="../../images/setting_to_clock.png" />\r
+       </p>\r
+         \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app/widget_n.htm b/org.tizen.guides/html/native/app/widget_n.htm
index 3cf3c49..4417f4e 100644 (file)
--- a/org.tizen.guides/html/native/app/widget_n.htm
+++ b/org.tizen.guides/html/native/app/widget_n.htm
@@ -1,188 +1,188 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Widget</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-                       <ul class="toc">
-                               <li><a href="#app">Widget Application States and Events</a></li>
-                               <li><a href="#instance">Widget Instance States and Events</a></li>
-                       </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm">Widget Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget API for Wearable Native</a></li>
-
-                       </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Widget</h1>
-<p>Widget applications are Tizen native applications shown on the home screen. They are launched by the home screen when the user selects them in the <strong>Add Widget</strong> menu.</p>
-
-  <p>The main features of the Widget API include:</p>
-  <ul>
-       <li>Managing multiple widget instances
-       <p>Each widget application usually has 1 process for maintaining the main loop. Within that process, the application can create multiple widget instances that can share the same resources.</p></li>
-       <li>Managing the life-cycle
-       <p>You can manage the widget application and widget instance life-cycles through callbacks that are triggered as the application or instance state changes.</p>
-       <p>The widget application starts with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, which initializes the application. The <span style="font-family: Courier New,Courier,monospace">widget_app_main()</span> function is used to start the application event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">widget_app_lifecycle_callback_s</span> structure variable, which is passed to the function.</p>
-       <p>To ensure that the application runs smoothly, you must <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#widget_app">edit the application manifest file</a> to define the widget settings.</p>
-       </li>
-       <li>Creating the widget UI
-       <p>The widget application can draw a UI on the home screen. To do this, you must get the window object of the home screen and attach UI components to it. You can use the <span style="font-family: Courier New,Courier,monospace">widget_app_get_elm_win()</span> function to <a href="../../../../org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm#get_window">create an EFL object for widget window</a>.</p></li>
-       </ul>
-
-<h2 id="app" name="app">Widget Application States and Events</h2>
-
-<p>The following figure illustrates the widget application states during the application life-cycle:</p>
-<ul>
-<li>When the application is launched, it is in the Ready state.</li>
-<li>When the application is running on the background, it is in the Running state.</li>
-<li>When the application exits, it is in the Terminated state.</li>
-</ul>
-       <p class="figure">Figure: Widget application life-cycle</p>
-       <p align="center"><img alt="Widget application life-cycle" src="../../images/widget_app_lifecycle.png" /></p>
-
-
-<p>The following table lists the callbacks you can use as the application state changes.</p>
-
-<table>
-          <caption>
-                          Table: Application state change callbacks
-          </caption>
-          <tbody>
-         <tr>
-                          <th>Callback</th>
-                          <th>Description</th>
-          </tr>
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">widget_app_create_cb()</span></td>
-                          <td>Called before the main loop of the application starts.</td>
-          </tr>
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">widget_app_terminate_cb()</span></td>
-                          <td>Called after the main loop of the application exits.</td>
-          </tr>
-          </tbody>
-</table>
-       
-<h2 id="instance" name="instance">Widget Instance States and Events</h2>
-
-<p>The following figure illustrates the widget instance states during the instance life-cycle:</p>
-<ul>
-<li>When the application is in the Ready state, the instance does not exist.</li>
-<li>When the instance is created, it is in the Created state.</li>
-<li>When the instance is visible, it is in the Running state.</li>
-<li>When the instance is invisible, it is in the Paused state.</li>
-<li>When the instance is destroyed, it is in the Destroyed state.</li>
-</ul>
-       <p class="figure">Figure: Widget instance life-cycle</p>
-       <p align="center"><img alt="Widget instance life-cycle" src="../../images/widget_instance_lifecycle.png" /></p>
-
-
-<p>The following table lists the callbacks you can use as the instance state changes.</p>
-
-<table>
-          <caption>
-                          Table: Instance state change callbacks
-          </caption>
-          <tbody>
-         <tr>
-                          <th>Callback</th>
-                          <th>Description</th>
-          </tr>
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_create_cb()</span></td>
-                          <td>Called after the widget instance is created.</td>
-          </tr>
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_destroy_cb()</span></td>
-                          <td>Called before the widget instance is destroyed.</td>
-          </tr>
-
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_pause_cb()</span></td>
-                          <td>Called when the widget is invisible.</td>
-          </tr>
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_resume_cb()</span></td>
-                          <td>Called when the widget is visible.</td>
-          </tr>
-
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_resize_cb()</span></td>
-                          <td>Called before the widget size is changed.</td>
-          </tr>
-
-          <tr>
-                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_update_cb()</span></td>
-                          <td>Called when an event for updating the widget is received.</td>
-          </tr>
-          </tbody>
-</table>       
-       
-<p>To register widget instance callbacks, use the <span style="font-family: Courier New,Courier,monospace">widget_app_class_create()</span> function within the <span style="font-family: Courier New,Courier,monospace">widget_app_create_cb()</span> callback function:</p>  
-
-<pre class="prettyprint">
-static widget_class_h
-widget_app_create(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s ops = 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.create = widget_instance_create,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.destroy = widget_instance_destroy,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.pause = widget_instance_pause,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resume = widget_instance_resume,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.update = widget_instance_update,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resize = widget_instance_resize,
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;return widget_app_class_create(ops);
-}
-</pre>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Widget Application</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+                       <ul class="toc">\r
+                               <li><a href="#app">Widget Application States and Events</a></li>\r
+                               <li><a href="#instance">Widget Instance States and Events</a></li>\r
+                       </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm">Widget Application Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application API for Wearable Native</a></li>\r
+\r
+                       </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Widget Application</h1>\r
+<p>Widget applications are Tizen native applications shown on the home screen. They are launched by the home screen when the user selects them in the <strong>Add Widget</strong> menu.</p>\r
+\r
+  <p>The main features of the Widget Application API include:</p>\r
+  <ul>\r
+       <li>Managing multiple widget instances\r
+       <p>Each widget application usually has 1 process for maintaining the main loop. Within that process, the application can create multiple widget instances that can share the same resources.</p></li>\r
+       <li>Managing the life-cycle\r
+       <p>You can manage the widget application and widget instance life-cycles through callbacks that are triggered as the application or instance state changes.</p>\r
+       <p>The widget application starts with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, which initializes the application. The <span style="font-family: Courier New,Courier,monospace">widget_app_main()</span> function is used to start the application event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">widget_app_lifecycle_callback_s</span> structure variable, which is passed to the function.</p>\r
+       <p>To ensure that the application runs smoothly, you must <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#widget_app">edit the application manifest file</a> to define the widget settings.</p>\r
+       </li>\r
+       <li>Creating the widget UI\r
+       <p>The widget application can draw a UI on the home screen. To do this, you must get the window object of the home screen and attach UI components to it. You can use the <span style="font-family: Courier New,Courier,monospace">widget_app_get_elm_win()</span> function to <a href="../../../../org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm#get_window">create an EFL object for widget window</a>.</p></li>\r
+       </ul>\r
+\r
+<h2 id="app" name="app">Widget Application States and Events</h2>\r
+\r
+<p>The following figure illustrates the widget application states during the application life-cycle:</p>\r
+<ul>\r
+<li>When the application is launched, it is in the Ready state.</li>\r
+<li>When the application is running on the background, it is in the Running state.</li>\r
+<li>When the application exits, it is in the Terminated state.</li>\r
+</ul>\r
+       <p class="figure">Figure: Widget application life-cycle</p>\r
+       <p align="center"><img alt="Widget application life-cycle" src="../../images/widget_app_lifecycle.png" /></p>\r
+\r
+\r
+<p>The following table lists the callbacks you can use as the application state changes.</p>\r
+\r
+<table>\r
+          <caption>\r
+                          Table: Application state change callbacks\r
+          </caption>\r
+          <tbody>\r
+         <tr>\r
+                          <th>Callback</th>\r
+                          <th>Description</th>\r
+          </tr>\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">widget_app_create_cb()</span></td>\r
+                          <td>Called before the main loop of the application starts.</td>\r
+          </tr>\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">widget_app_terminate_cb()</span></td>\r
+                          <td>Called after the main loop of the application exits.</td>\r
+          </tr>\r
+          </tbody>\r
+</table>\r
+       \r
+<h2 id="instance" name="instance">Widget Instance States and Events</h2>\r
+\r
+<p>The following figure illustrates the widget instance states during the instance life-cycle:</p>\r
+<ul>\r
+<li>When the application is in the Ready state, the instance does not exist.</li>\r
+<li>When the instance is created, it is in the Created state.</li>\r
+<li>When the instance is visible, it is in the Running state.</li>\r
+<li>When the instance is invisible, it is in the Paused state.</li>\r
+<li>When the instance is destroyed, it is in the Destroyed state.</li>\r
+</ul>\r
+       <p class="figure">Figure: Widget instance life-cycle</p>\r
+       <p align="center"><img alt="Widget instance life-cycle" src="../../images/widget_instance_lifecycle.png" /></p>\r
+\r
+\r
+<p>The following table lists the callbacks you can use as the instance state changes.</p>\r
+\r
+<table>\r
+          <caption>\r
+                          Table: Instance state change callbacks\r
+          </caption>\r
+          <tbody>\r
+         <tr>\r
+                          <th>Callback</th>\r
+                          <th>Description</th>\r
+          </tr>\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_create_cb()</span></td>\r
+                          <td>Called after the widget instance is created.</td>\r
+          </tr>\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_destroy_cb()</span></td>\r
+                          <td>Called before the widget instance is destroyed.</td>\r
+          </tr>\r
+\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_pause_cb()</span></td>\r
+                          <td>Called when the widget is invisible.</td>\r
+          </tr>\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_resume_cb()</span></td>\r
+                          <td>Called when the widget is visible.</td>\r
+          </tr>\r
+\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_resize_cb()</span></td>\r
+                          <td>Called before the widget size is changed.</td>\r
+          </tr>\r
+\r
+          <tr>\r
+                          <td><span style="font-family: Courier New,Courier,monospace">widget_instance_update_cb()</span></td>\r
+                          <td>Called when an event for updating the widget is received.</td>\r
+          </tr>\r
+          </tbody>\r
+</table>       \r
+       \r
+<p>To register widget instance callbacks, use the <span style="font-family: Courier New,Courier,monospace">widget_app_class_create()</span> function within the <span style="font-family: Courier New,Courier,monospace">widget_app_create_cb()</span> callback function:</p>  \r
+\r
+<pre class="prettyprint">\r
+static widget_class_h\r
+widget_app_create(void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s ops = \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.create = widget_instance_create,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.destroy = widget_instance_destroy,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.pause = widget_instance_pause,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resume = widget_instance_resume,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.update = widget_instance_update,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resize = widget_instance_resize,\r
+&nbsp;&nbsp;&nbsp;};\r
+\r
+&nbsp;&nbsp;&nbsp;return widget_app_class_create(ops, user_data);\r
+}\r
+</pre>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>        
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/base/base_guide_n.htm b/org.tizen.guides/html/native/base/base_guide_n.htm
index 2e5f921..fd4f83a 100644 (file)
--- a/org.tizen.guides/html/native/base/base_guide_n.htm
+++ b/org.tizen.guides/html/native/base/base_guide_n.htm
@@ -1,70 +1,70 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Base</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Base</h1> 
-       <p>The base features include formatting locale-sensitive information, such as time, and managing Web content in your application.</p>
-       <p>Locale refers to the set of information that is specific to a language and a country. It affects the numeric formats (decimal and list separators), date formats, and the character sorting order. It determines how a locale-specific functionality behaves; for example, how numbers are displayed or strings converted to dates.</p>
-
-<p>The main base features are:</p>
-<ul>
-<li><p><a href="i18n_n.htm">i18n</a></p>
-<p>Enables you to localize your application to generate flexible number or date format patterns.</p></li>
-</ul>
-
-
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Base</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Base</h1> \r
+       <p>The base features include formatting locale-sensitive information, such as time, and managing Web content in your application.</p>\r
+       <p>Locale refers to the set of information that is specific to a language and a country. It affects the numeric formats (decimal and list separators), date formats, and the character sorting order. It determines how a locale-specific functionality behaves; for example, how numbers are displayed or strings converted to dates.</p>\r
+\r
+<p>The main base features are:</p>\r
+<ul>\r
+<li><p><a href="i18n_n.htm">i18n</a></p>\r
+<p>Enables you to localize your application to generate flexible number or date format patterns.</p></li>\r
+</ul>\r
+\r
+\r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.guides/html/native/base/i18n_n.htm b/org.tizen.guides/html/native/base/i18n_n.htm
index 2e9be3e..2446296 100644 (file)
--- a/org.tizen.guides/html/native/base/i18n_n.htm
+++ b/org.tizen.guides/html/native/base/i18n_n.htm
@@ -1,429 +1,429 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>i18n</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#ubrk">Ubrk</a></li>
-                       <li><a href="#ucalendar">Ucalendar</a></li>
-                       <li><a href="#uchar">Uchar</a></li>
-                       <li><a href="#ucoll">Ucollator</a></li>
-                       <li><a href="#udate">Udate</a></li>
-                       <li><a href="#udatepg">Udatepg</a></li>
-                       <li><a href="#uenumeration">Uenumeration</a></li>
-                       <li><a href="#ulocale">Ulocale</a></li>
-                       <li><a href="#unormal">Unormalization</a></li>
-                       <li><a href="#unumber">Unumber</a></li>
-                       <li><a href="#usearch">Usearch</a></li>
-                       <li><a href="#uset">Uset</a></li>
-                       <li><a href="#ustring">Ustring</a></li>                         
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm">i18n Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>i18n</h1>
-
-<p>You can generate flexible number or date format patterns and format and parse dates and numbers for any locale. The i18n API is implemented by using the ICU library.</p>
-
-<h2 id="ubrk" name="ubrk">Ubrk</h2>
-<p>The Ubrk API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">wearable</a> applications) is used to find the location of boundaries in text. The <span style="font-family: Courier New,Courier,monospace">i18n_ubreak_iterator_h</span> handle maintains a current position and scans over the text returning the index of characters where the boundaries occur.</p>
-<p>The following boundary analyzing methods are available:</p>
-<ul>
-       <li>Line boundary analysis determines where a text string can be broken when line-wrapping. The mechanism correctly handles punctuation and hyphenated words.</li>
-       <li>Sentence boundary analysis allows selection with correct interpretation of periods within numbers and abbreviations, and trailing punctuation marks, such as quotation marks and parentheses.</li>
-       <li>Word boundary analysis is used by search and replace functions, as well as within text editing applications that allow the user to select words with a double-click. Word selection provides correct interpretation of punctuation marks within and following words. Characters that are not part of a word, such as symbols or punctuation marks, have word-breaks on both sides.</li>
-       <li>Character boundary analysis identifies the boundaries of Extended Grapheme Clusters, which are groupings of codepoints that must be treated as character-like units for many text operations. For additional information on grapheme clusters and guidelines on their use, see <a href="http://www.unicode.org/reports/tr29/" target="_blank">Unicode Standard Annex #29, Unicode Text Segmentation</a>.</li>
-       <li>Title boundary analysis locates all positions, typically starts of words, that must be set to Title Case when title casing the text.</li>
-       <li>The text boundary positions are found according to the rules described in <a href="http://www.unicode.org/reports/tr29/" target="_blank">Unicode Standard Annex #29, Text Boundaries</a>, and <a href="http://www.unicode.org/reports/tr14/" target="_blank">Unicode Standard Annex #14, Line Breaking Properties</a>.</li>
-</ul>
-
-
-<h2 id="ucalendar" name="ucalendar">Ucalendar</h2>
-
-<p>The Ucalendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">wearable</a> applications) is used for converting between a Udate object and a set of integer fields such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_HOUR</span>. A <a href="#udate">Udate</a> object represents a specific instant in time with one millisecond precision.</p>
-<p>The types of Ucalendar interpret a Udate according to the rules of a specific calendar system, such as the gregorian or traditional system.</p>
-<p>A Ucalendar object can produce all the time field values needed to implement the date-time formatting for a particular language and calendar style (for example, Japanese-Gregorian, Japanese-Traditional).</p>
-
-<p>When computing a Udate from the time fields, 2 special circumstances can arise. The information can be insufficient to compute the Udate (you have only the year and the month, but not the day of the month), or the information can be inconsistent (such as &quot;Tuesday, July 15, 1996&quot; even though July 15, 1996 is actually a Monday).</p>
-<ul>
-<li><strong>Insufficient information</strong> <p>The calendar uses the default information to specify the missing fields. This can vary by calendar: for the Gregorian calendar, the default for a field is the same as that of the start of the epoch, such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR = 1970</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_ MONTH = JANUARY</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_ DATE = 1</span>.</p></li>
-<li><strong>Inconsistent information</strong> <p>If the fields conflict, the calendar prefers the most recently set fields. For example, when determining the day, the calendar looks for one of the following field combinations listed in the following table. The most recent combination, as determined by the most recently set single field, is used.</p></li>
-</ul>
-<table> 
-   <caption>
-     Table: Combinations of the calendar fields to determine the day 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Combinations of the calendar fields</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_MONTH</span>
-<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_WEEK_OF_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_WEEK_IN_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_YEAR</span></p>
-<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_WEEK + I18N_UCALENDAR_WEEK_OF_YEAR</span></p></td>
-</tr> 
-   </tbody> 
-  </table>
-
-<p>For the time of day:</p>
-<table> 
-   <caption>
-     Table: Combinations of calendar fields to determine the time of the day 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Combinations of the calendar fields</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR_OF_DAY</span>
-        <p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_AM_PM + I18N_UCALENDAR_HOUR</span></p></td>
-    </tr> 
-   </tbody> 
-  </table> 
-
-         <table class="note"> 
-          <tbody> 
-               <tr> 
-                <th class="note">Note</th> 
-               </tr> 
-               <tr> 
-                <td class="note">For some non-Gregorian calendars, different fields are necessary for complete disambiguation. For example, a full specification of the historical
-    Arabic astronomical calendar requires the year, month, day-of-month and day-of-week in some cases.</td> 
-               </tr> 
-          </tbody> 
-         </table> 
-
-<h2 id="uchar" name="uchar">Uchar</h2>
-<p>The Uchar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">wearable</a> applications) provides a low-level access to the Unicode Character Database.</p>
-<p>Unicode assigns each code point (not just the assigned character) values for several properties. Most of them are simple boolean flags, or constants from a small enumerated list. For some properties, values are strings or other relatively more complex types.</p>
-<p>For more information, see <a href="http://www.unicode.org/ucd/" target="_blank">About the Unicode Character Database</a> and <a href="http://icu-project.org/userguide/properties.html" target="_blank">ICU User Guide chapter on Properties</a>.
-</p>
-
-<h2 id="ucoll" name="ucoll">Ucollator</h2>
-<p>The Ucollator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">wearable</a> applications) performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the <a href="http://www.unicode.org/reports/tr35/tr35-collation.html#Root_Collation" target="_blank">CLDR root sort order</a>. The sorting order can be customized by providing your own set of rules. For more information, see the <a href="http://userguide.icu-project.org/collation/customization" target="_blank">ICU Collation Customization</a> section of the User Guide.</p>
-
-<h2 id="udate" name="udate">Udate</h2>
-<p>The Udate API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">wearable</a> applications) consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (<span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span>), which can handle practically all normal date formatting and parsing actions.</p>
-<p>The Udate format helps you to format and parse dates for any locale. Your code can be completely independent of the locale conventions for months, days of the week, or even the lunar or solar calendar format.</p>
-<p>You can pass in different options for the arguments for date and time style to control the length of the result; you can select from <span style="font-family: Courier New,Courier,monospace">SHORT</span>, <span style="font-family: Courier New,Courier,monospace">MEDIUM</span>, <span style="font-family: Courier New,Courier,monospace">LONG</span>, and <span style="font-family: Courier New,Courier,monospace">FULL</span>. The exact result depends on the locale.</p>
-
-<ul>
-    <li>
-        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_SHORT</span> is completely numeric, such as 12/13/52 or 3:30pm
-    </li>
-    <li>
-        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_MEDIUM</span> is longer, such as Jan 12, 1952
-    </li>
-    <li>
-        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_LONG</span> is longer, such as January 12, 1952 or 3:30:32pm
-    </li>
-    <li>
-        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_FULL</span>
-        is completely specified, such as Tuesday, April 12, 1952 AD or 3:30:42pm PST.
-    </li>
-</ul>
-
-<h3 id="pattern" name="pattern">Date and Time Patterns</h3>
-<p>The date and time formats are specified by the <span style="font-family: Courier New,Courier,monospace">date and time pattern</span> strings. Within the date and time pattern strings, all unquoted ASCII letters (A-Z and a-z) are reserved as pattern letters representing calendar fields. The <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span> handle supports the date and time formatting algorithm and pattern letters defined by the <a href="http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table" target="_blank">UTS#35 Unicode Locale Data Markup Language (LDML)</a>. It is further documented in the <a href="https://sites.google.com/site/icuprojectuserguide/formatparse/datetime?pli=1#TOC-Date-Field-Symbol-Table" target="_blank">ICU User Guide</a>.</p>
-
-<h2 id="udatepg" name="udatepg">Udatepg</h2>
-<p>The Udatepg API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">wearable</a> applications) enables flexible generation of date format patterns, such as "yy-MM-dd". The user can build up the generator by adding successive patterns. After this, a query can be made using a pattern that includes only the desired fields and lengths. The generator returns the a pattern that is most similar to it.
-</p>
-<p>The main method is the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_get_best_pattern()</span> function, since normally the Udatepg API is pre-built with data from a particular locale. However, generators can be built directly from other data as well.
-</p>
-
-<h2 id="uenumeration" name="uenumeration">Uenumeration</h2>
-
-<p>The Uenumeration API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">wearable</a> applications) enables you to create an enumeration object out of a given set of strings. The object can be created out of an array of <span style="font-family: Courier New,Courier,monospace">const char*</span> strings or an array of <span style="font-family: Courier New,Courier,monospace">i18n_uchar*</span> strings.</p>
-<p>The enumeration object enables navigation through the enumeration values, with the use of the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_next()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_unext()</span> function (depending on the type used for creating the enumeration object), and with the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_reset()</span> function.</p>
-<p>You can get the number of values stored in the enumeration object with the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_count()</span> function.</p>
-
-
-<h2 id="ulocale" name="ulocale">Ulocale</h2>
-<p>The Ulocale API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">wearable</a> applications) represents a specific geographical, political, or cultural region. Locale-sensitive operations use the Ulocale functions to tailor information for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user&#39;s native country, region, or culture.
-</p>
-<p>You create a locale with one of the options listed below. Each component is separated by an underscore in the locale string:</p>
-
-<table> 
-   <caption>
-     Table: Options for creating a locale
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Options for creating a locale</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">newLanguage</span>
-        <p><span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry</span></p>
-        <p><span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry + newVariant</span></p></td>
-    </tr>
-   </tbody>
-  </table>
-  
-<p>The first option is a valid <a href="http://www.loc.gov/standards/iso639-2/php/code_list.php" target="_blank">ISO Language Code</a>. These codes are the lower-case two-letter codes as defined by the ISO-639 standard.
-</p>
-<p>The second option includes an additional <a href="http://www.chemie.fu-berlin.de/diverse/doc/ISO_3166.html" target="_blank">ISO Country Code</a>.
-</p>
-<p>The third option requires additional information on the variant. The variant codes are vendor and browser-specific. For example, use <span style="font-family: Courier New,Courier,monospace">WIN</span> for Windows, <span style="font-family: Courier New,Courier,monospace">MAC</span> for Macintosh, and <span style="font-family: Courier New,Courier,monospace">POSIX</span> for POSIX. Where there are two variants, separate them with an underscore, and put the most important one first. For example, a Traditional Spanish collation might be referenced, with <span style="font-family: Courier New,Courier,monospace">ES</span>, <span style="font-family: Courier New,Courier,monospace">ES</span>, <span style="font-family: Courier New,Courier,monospace">Traditional_WIN</span>.
-</p>
-<p>Because a locale is just an identifier for a region, no validity check is performed when you specify a locale. If you want to see whether particular resources are available for the locale you asked for, you must query those resources.
-</p>
-<p> Once you have specified a locale you can query it for information about itself. Use <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> to get the ISO Language Code. You can use <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_name()</span> to get the name of the language suitable for display to the user.
-</p>
-
-<h2 id="unormal" name="unormal">Unormalization</h2>
-
-<p> The Unicode normalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications) is for the standard unicode normalization. All instances of <span style="font-family: Courier New,Courier,monospace">i18n_unormalizer_s</span> are unmodifiable and immutable. Instances returned by <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> are singletons that must not be deleted by the caller.</p>
-
-
-<h2 id="unumber" name="unumber">Unumber</h2>
-<p>The Unumber API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">wearable</a> applications) helps you to format and parse numbers for any locale. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.</p>
-
-<h2 id="usearch" name="usearch">Usearch</h2>
-<p>The Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications) provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct.</p>
-
-<h2 id="uset" name="uset">Uset</h2>
-<p>Uset is a mutable set of Unicode characters and multicharacter strings. The sets represent character classes used in regular expressions. A character specifies a subset of the Unicode code points. The legal code points are U+0000 to U+10FFFF, inclusive.</p>
-<p>The set supports 2 functions:</p>
-<ul><li>The operand function allows the caller to modify the value of the set. The operand function works similarly to the boolean logic: a boolean OR is implemented by add, a boolean AND is implemented by retain, a boolean XOR is implemented by a complement taking an argument, and a boolean NOT is implemented by a complement with no argument. In terms of traditional set theory function names, add is a union, retain is an intersection, remove is an asymmetric difference, and complement with no argument is a set complement with respect to the superset range <span style="font-family: Courier New,Courier,monospace">MIN_VALUE-MAX_VALUE</span>.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_uset_to_pattern()</span> function. Unlike the functions that add characters or categories, and control the logic of the set, the <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> function sets all attributes of a set at once, based on a string pattern.</li></ul>
-
-<h3 id="pattern_syntax" name="pattern_syntax">Pattern Syntax</h3>
-
-<p>Patterns are accepted by the <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_pattern()</span>, <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_pattern_options()</span>, and <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> functions and returned by the <span style="font-family: Courier New,Courier,monospace">i18n_uset_to_pattern()</span> function. The patterns follow a syntax similar to that employed by version 8 regular expression character classes.</p>
-<table>
-   <caption>
-     Table: Examples of simple pattern syntaxes
-   </caption> 
-    <tbody>
-               <tr>
-            <th>Pattern</th>
-            <th>Description</th>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[]</span></td>
-            <td>No characters</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[a]</span></td>
-            <td>Character &#39;a&#39;</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[ae]</span></td>
-            <td>Characters &#39;a&#39; and &#39;e&#39;</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[a-e]</span></td>
-            <td>Characters &#39;a&#39; through &#39;e&#39; inclusive, in Unicode code point order</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[\u4E01]</span></td>
-            <td>Character U+4E01</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[a{ab}{ac}]</span></td>
-            <td>Character &#39;a&#39; and the multicharacter strings &#39;ab&#39; and &#39;ac&#39;</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[\p{Lu}]</span></td>
-            <td>All characters in the general category &#39;uppercase letter&#39;</td>
-        </tr>
-    </tbody>
-</table>
-<p>Any character can be preceded by a backslash in order to remove any special meaning. Whitespace characters are ignored, unless they are escaped.</p>
-<p>Property patterns specify a set of characters having a certain property as defined by the Unicode standard. Both the POSIX-like <span style="font-family: Courier New,Courier,monospace">[:Lu:]</span> and the Perl-like syntax <span style="font-family: Courier New,Courier,monospace">\\p{Lu}</span> are recognized.</p>
-<p>Patterns specify individual characters, ranges of characters, and Unicode property sets. When the elements are concatenated, they specify their union. To complement a set, place a &#39;^&#39; immediately after the opening &#39;[&#39;. Property patterns are inverted by modifying their delimiters, <span style="font-family: Courier New,Courier,monospace">[:^foo]</span> and <span style="font-family: Courier New,Courier,monospace">\\P{foo}</span>. In any other location, &#39;^&#39; has no special meaning.</p>
-<p>Ranges are indicated by placing a &#39;-&#39; between 2 characters, as in &quot;a-z&quot;. This specifies the range of all characters from the left to the right, in Unicode order. If the left character is greater than or equal to the right character, it is a syntax error. If a &#39;-&#39; occurs as the first character after the opening &#39;[&#39; or &#39;[^&#39;, or if it occurs as the last character before the closing &#39;]&#39;, it is taken as a literal. This means that <span style="font-family: Courier New,Courier,monospace">[a\-b]</span>, <span style="font-family: Courier New,Courier,monospace">[-ab]</span>, and <span style="font-family: Courier New,Courier,monospace">[ab-]</span> all indicate the same set of three characters, &#39;a&#39;, &#39;b&#39;, and &#39;-&#39;.</p>
-<p>Sets can be intersected using the &#39;&amp;&#39; operator or the asymmetric set difference can be taken using the &#39;-&#39; operator. For example, <span style="font-family: Courier New,Courier,monospace">[[:L:]&amp;[\\u0000-\\u0FFF]]</span> indicates the set of all Unicode letters with values less than 4096. Operators (&#39;&amp;&#39; and &#39;|&#39;) have equal precedence and bind left-to-right. This means that <span style="font-family: Courier New,Courier,monospace">[[:L:]-[a-z]-[\\u0100-\\u01FF]]</span> is equivalent to <span style="font-family: Courier New,Courier,monospace">[[[:L:]-[a-z]]-[\\u0100-\\u01FF]]</span>. This only really matters for difference; intersection is commutative.</p>
-<table>
-   <caption>
-     Table: Examples of set syntaxes
-   </caption> 
-    <tbody>
-               <tr>
-            <th>Set</th>
-            <th>Description</th>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[a]</span></td>
-            <td>Set containing &#39;a&#39;</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[a-z]</span></td>
-            <td>Set containing &#39;a&#39; through &#39;z&#39; and all letters in between, in Unicode order</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[^a-z]</span></td>
-            <td>Set containing all characters but &#39;a&#39; through &#39;z&#39;, that is, U+0000 through &#39;a&#39;-1 and &#39;z&#39;+1 through U+10FFFF</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[[pat1][pat2]]</span></td>
-            <td>Union of sets specified by pat1 and pat2</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[[[pat1]&amp;[pat2]]</span></td>
-            <td>Intersection of sets specified by pat1 and pat2</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[[pat1]-[pat2]]</span></td>
-            <td>Asymmetric difference of sets specified by pat1 and pat2</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[:Lu:]</span> or <span style="font-family: Courier New,Courier,monospace">\p{Lu}</span></td>
-            <td>Set of characters having the specified Unicode property, in this case Unicode uppercase letters</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">[:^Lu:]</span> or <span style="font-family: Courier New,Courier,monospace">\P{Lu}</span></td>
-            <td>Set of characters not having the given Unicode property</td>
-        </tr>
-    </tbody>
-</table>
-
-  <table class="note"> 
-          <tbody> 
-               <tr> 
-                <th class="note">Note</th> 
-               </tr> 
-               <tr> 
-                <td class="note">You cannot add an empty string (&quot;&quot;) to a set.</td> 
-               </tr> 
-          </tbody> 
-         </table> 
-
-
-<h3 id="formal_syntax" name="formal_syntax">Formal Syntax</h3>
-
-<p>The following table provide examples of formal syntax patterns.</p>
-
-<table>
-   <caption>
-     Table: Formal syntax patterns 
-   </caption> 
-    <tbody>
-               <tr>
-            <th>Pattern</th>
-            <th>Description</th>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">pattern :=</span></td>
-            <td>(&#39;[&#39; &#39;^&#39;? item* &#39;]&#39;) | property</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">item :=</span></td>
-            <td>char | (char &#39;-&#39; char) | pattern-expr</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">pattern-expr :=</span></td>
-            <td>pattern | pattern-expr pattern | pattern-expr or pattern</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">op :=</span></td>
-            <td>&#39;&amp;&#39; | &#39;-&#39;</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">special :=</span></td>
-            <td>&#39;[&#39; | &#39;]&#39; | &#39;-&#39;</td>
-               </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">char :=</span></td>
-            <td>Any character that is not special | (&#39;\&#39; any character) | (&#39;\u&#39; hex hex hex hex)</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">property :=</span></td>
-            <td>Unicode property set pattern</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">a := b</span></td>
-            <td>a can be replaced by b</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">a?</span></td>
-            <td>0 or 1 instance of a</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">a*</span></td>
-            <td>1 or more instances of a</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">a | b</span></td>
-            <td>Either a or b</td>
-        </tr>
-        <tr>
-            <td><span style="font-family: Courier New,Courier,monospace">&#39;a&#39;</span></td>
-            <td>Literal string between the quotes</td>
-        </tr>
-    </tbody>
-</table>
-
-
-
-<h2 id="ustring" name="ustring">Ustring</h2>
-<p>The Ustring API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">wearable</a> applications) provides general unicode string handling. Some functions are similar in name, signature, and behavior to the ANSI C <span style="font-family: Courier New,Courier,monospace">&lt;string.h&gt;</span> functions, and other functions provide more Unicode-specific functionality.</p>
-<p>The i18n uses 16-bit Unicode (UTF-16) in the form of arrays of <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. UTF-16 encodes each Unicode code point with either 1 or 2 <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. This is the default form of Unicode, and a forward-compatible extension of the original, fixed-width form that was known as UCS-2. UTF-16 superseded UCS-2 with Unicode 2.0 in 1996.</p>
-<p>The i18n also handles 16-bit Unicode text with unpaired surrogates. Such text is not well-formed UTF-16. Code-point-related functions treat unpaired surrogates as surrogate code points, such as separate units.</p>
-<p>Although UTF-16 is a variable-width encoding form, such as some legacy multi-byte encodings, it is much more efficient even for random access because the code unit values for single-unit characters versus lead units versus trail units are completely disjoint. This means that it is easy to determine character (code point) boundaries from random offsets in the string.</p>
-<p>Unicode (UTF-16) string processing is optimized for the single-unit case. Although it is important to support supplementary characters, which use pairs of lead/trail code units called &quot;surrogates&quot;, their occurrence is rare. Almost all characters in modern use require only a single <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code unit (such as their code point values are &lt;=0xffff).</p>
-
- <h3 id="map" name="map">Character Set Mapping Tables</h3>
-<p>The i18n API provides a character set conversion with mapping tables for a number of important codepages. The default tables are a subset of IBM&#39;s CDRA conversion table repository. ICU&#39;s <a href="http://demo.icu-project.org/icu-bin/convexp" target="_blank">Converter Explorer</a> shows aliases and codepage charts for the default tables that are built into a standard ICU distribution.</p>
-<p>Conversions for most codepages are implemented differently on different platforms. We are providing  mapping tables here from many different sources, so that the i18n users and others can use these tables to get the same conversion behavior as on the original platforms.</p>
-<p>The mapping tables and some of the source code of the tools that collected these tables are checked into a <a href="http://source.icu-project.org/repos/icu/data/trunk/charset/data/ucm/" target="_blank">CVS repository</a>.
-</p>
-<p>For more information about character sets, codepages and encodings, see <a href="http://www.ibm.com/software/globalization/topics/charsets/" target="_blank">Coded Character Sets</a> on the IBM site.
-</p>
-
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>i18n</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#ubrk">Ubrk</a></li>\r
+                       <li><a href="#ucalendar">Ucalendar</a></li>\r
+                       <li><a href="#uchar">Uchar</a></li>\r
+                       <li><a href="#ucoll">Ucollator</a></li>\r
+                       <li><a href="#udate">Udate</a></li>\r
+                       <li><a href="#udatepg">Udatepg</a></li>\r
+                       <li><a href="#uenumeration">Uenumeration</a></li>\r
+                       <li><a href="#ulocale">Ulocale</a></li>\r
+                       <li><a href="#unormal">Unormalization</a></li>\r
+                       <li><a href="#unumber">Unumber</a></li>\r
+                       <li><a href="#usearch">Usearch</a></li>\r
+                       <li><a href="#uset">Uset</a></li>\r
+                       <li><a href="#ustring">Ustring</a></li>                         \r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm">i18n Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>i18n</h1>\r
+\r
+<p>You can generate flexible number or date format patterns and format and parse dates and numbers for any locale. The i18n API is implemented by using the ICU library.</p>\r
+\r
+<h2 id="ubrk" name="ubrk">Ubrk</h2>\r
+<p>The Ubrk API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">wearable</a> applications) is used to find the location of boundaries in text. The <span style="font-family: Courier New,Courier,monospace">i18n_ubreak_iterator_h</span> handle maintains a current position and scans over the text returning the index of characters where the boundaries occur.</p>\r
+<p>The following boundary analyzing methods are available:</p>\r
+<ul>\r
+       <li>Line boundary analysis determines where a text string can be broken when line-wrapping. The mechanism correctly handles punctuation and hyphenated words.</li>\r
+       <li>Sentence boundary analysis allows selection with correct interpretation of periods within numbers and abbreviations, and trailing punctuation marks, such as quotation marks and parentheses.</li>\r
+       <li>Word boundary analysis is used by search and replace functions, as well as within text editing applications that allow the user to select words with a double-click. Word selection provides correct interpretation of punctuation marks within and following words. Characters that are not part of a word, such as symbols or punctuation marks, have word-breaks on both sides.</li>\r
+       <li>Character boundary analysis identifies the boundaries of Extended Grapheme Clusters, which are groupings of codepoints that must be treated as character-like units for many text operations. For additional information on grapheme clusters and guidelines on their use, see <a href="http://www.unicode.org/reports/tr29/" target="_blank">Unicode Standard Annex #29, Unicode Text Segmentation</a>.</li>\r
+       <li>Title boundary analysis locates all positions, typically starts of words, that must be set to Title Case when title casing the text.</li>\r
+       <li>The text boundary positions are found according to the rules described in <a href="http://www.unicode.org/reports/tr29/" target="_blank">Unicode Standard Annex #29, Text Boundaries</a>, and <a href="http://www.unicode.org/reports/tr14/" target="_blank">Unicode Standard Annex #14, Line Breaking Properties</a>.</li>\r
+</ul>\r
+\r
+\r
+<h2 id="ucalendar" name="ucalendar">Ucalendar</h2>\r
+\r
+<p>The Ucalendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">wearable</a> applications) is used for converting between a Udate object and a set of integer fields such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_HOUR</span>. A <a href="#udate">Udate</a> object represents a specific instant in time with one millisecond precision.</p>\r
+<p>The types of Ucalendar interpret a Udate according to the rules of a specific calendar system, such as the gregorian or traditional system.</p>\r
+<p>A Ucalendar object can produce all the time field values needed to implement the date-time formatting for a particular language and calendar style (for example, Japanese-Gregorian, Japanese-Traditional).</p>\r
+\r
+<p>When computing a Udate from the time fields, 2 special circumstances can arise. The information can be insufficient to compute the Udate (you have only the year and the month, but not the day of the month), or the information can be inconsistent (such as &quot;Tuesday, July 15, 1996&quot; even though July 15, 1996 is actually a Monday).</p>\r
+<ul>\r
+<li><strong>Insufficient information</strong> <p>The calendar uses the default information to specify the missing fields. This can vary by calendar: for the Gregorian calendar, the default for a field is the same as that of the start of the epoch, such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR = 1970</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_ MONTH = JANUARY</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_ DATE = 1</span>.</p></li>\r
+<li><strong>Inconsistent information</strong> <p>If the fields conflict, the calendar prefers the most recently set fields. For example, when determining the day, the calendar looks for one of the following field combinations listed in the following table. The most recent combination, as determined by the most recently set single field, is used.</p></li>\r
+</ul>\r
+<table> \r
+   <caption>\r
+     Table: Combinations of the calendar fields to determine the day \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Combinations of the calendar fields</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_MONTH</span>\r
+<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_WEEK_OF_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span></p>\r
+<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_WEEK_IN_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span></p>\r
+<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_YEAR</span></p>\r
+<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_WEEK + I18N_UCALENDAR_WEEK_OF_YEAR</span></p></td>\r
+</tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<p>For the time of day:</p>\r
+<table> \r
+   <caption>\r
+     Table: Combinations of calendar fields to determine the time of the day \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Combinations of the calendar fields</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR_OF_DAY</span>\r
+        <p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_AM_PM + I18N_UCALENDAR_HOUR</span></p></td>\r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+         <table class="note"> \r
+          <tbody> \r
+               <tr> \r
+                <th class="note">Note</th> \r
+               </tr> \r
+               <tr> \r
+                <td class="note">For some non-Gregorian calendars, different fields are necessary for complete disambiguation. For example, a full specification of the historical\r
+    Arabic astronomical calendar requires the year, month, day-of-month and day-of-week in some cases.</td> \r
+               </tr> \r
+          </tbody> \r
+         </table> \r
+\r
+<h2 id="uchar" name="uchar">Uchar</h2>\r
+<p>The Uchar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">wearable</a> applications) provides a low-level access to the Unicode Character Database.</p>\r
+<p>Unicode assigns each code point (not just the assigned character) values for several properties. Most of them are simple boolean flags, or constants from a small enumerated list. For some properties, values are strings or other relatively more complex types.</p>\r
+<p>For more information, see <a href="http://www.unicode.org/ucd/" target="_blank">About the Unicode Character Database</a> and <a href="http://icu-project.org/userguide/properties.html" target="_blank">ICU User Guide chapter on Properties</a>.\r
+</p>\r
+\r
+<h2 id="ucoll" name="ucoll">Ucollator</h2>\r
+<p>The Ucollator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">wearable</a> applications) performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the <a href="http://www.unicode.org/reports/tr35/tr35-collation.html#Root_Collation" target="_blank">CLDR root sort order</a>. The sorting order can be customized by providing your own set of rules. For more information, see the <a href="http://userguide.icu-project.org/collation/customization" target="_blank">ICU Collation Customization</a> section of the User Guide.</p>\r
+\r
+<h2 id="udate" name="udate">Udate</h2>\r
+<p>The Udate API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">wearable</a> applications) consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (<span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span>), which can handle practically all normal date formatting and parsing actions.</p>\r
+<p>The Udate format helps you to format and parse dates for any locale. Your code can be completely independent of the locale conventions for months, days of the week, or even the lunar or solar calendar format.</p>\r
+<p>You can pass in different options for the arguments for date and time style to control the length of the result; you can select from <span style="font-family: Courier New,Courier,monospace">SHORT</span>, <span style="font-family: Courier New,Courier,monospace">MEDIUM</span>, <span style="font-family: Courier New,Courier,monospace">LONG</span>, and <span style="font-family: Courier New,Courier,monospace">FULL</span>. The exact result depends on the locale.</p>\r
+\r
+<ul>\r
+    <li>\r
+        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_SHORT</span> is completely numeric, such as 12/13/52 or 3:30pm\r
+    </li>\r
+    <li>\r
+        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_MEDIUM</span> is longer, such as Jan 12, 1952\r
+    </li>\r
+    <li>\r
+        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_LONG</span> is longer, such as January 12, 1952 or 3:30:32pm\r
+    </li>\r
+    <li>\r
+        <span style="font-family: Courier New,Courier,monospace">I18N_UDATE_FULL</span>\r
+        is completely specified, such as Tuesday, April 12, 1952 AD or 3:30:42pm PST.\r
+    </li>\r
+</ul>\r
+\r
+<h3 id="pattern" name="pattern">Date and Time Patterns</h3>\r
+<p>The date and time formats are specified by the <span style="font-family: Courier New,Courier,monospace">date and time pattern</span> strings. Within the date and time pattern strings, all unquoted ASCII letters (A-Z and a-z) are reserved as pattern letters representing calendar fields. The <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span> handle supports the date and time formatting algorithm and pattern letters defined by the <a href="http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table" target="_blank">UTS#35 Unicode Locale Data Markup Language (LDML)</a>. It is further documented in the <a href="https://sites.google.com/site/icuprojectuserguide/formatparse/datetime?pli=1#TOC-Date-Field-Symbol-Table" target="_blank">ICU User Guide</a>.</p>\r
+\r
+<h2 id="udatepg" name="udatepg">Udatepg</h2>\r
+<p>The Udatepg API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">wearable</a> applications) enables flexible generation of date format patterns, such as "yy-MM-dd". The user can build up the generator by adding successive patterns. After this, a query can be made using a pattern that includes only the desired fields and lengths. The generator returns the a pattern that is most similar to it.\r
+</p>\r
+<p>The main method is the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_get_best_pattern()</span> function, since normally the Udatepg API is pre-built with data from a particular locale. However, generators can be built directly from other data as well.\r
+</p>\r
+\r
+<h2 id="uenumeration" name="uenumeration">Uenumeration</h2>\r
+\r
+<p>The Uenumeration API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">wearable</a> applications) enables you to create an enumeration object out of a given set of strings. The object can be created out of an array of <span style="font-family: Courier New,Courier,monospace">const char*</span> strings or an array of <span style="font-family: Courier New,Courier,monospace">i18n_uchar*</span> strings.</p>\r
+<p>The enumeration object enables navigation through the enumeration values, with the use of the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_next()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_unext()</span> function (depending on the type used for creating the enumeration object), and with the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_reset()</span> function.</p>\r
+<p>You can get the number of values stored in the enumeration object with the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_count()</span> function.</p>\r
+\r
+\r
+<h2 id="ulocale" name="ulocale">Ulocale</h2>\r
+<p>The Ulocale API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">wearable</a> applications) represents a specific geographical, political, or cultural region. Locale-sensitive operations use the Ulocale functions to tailor information for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user&#39;s native country, region, or culture.\r
+</p>\r
+<p>You create a locale with one of the options listed below. Each component is separated by an underscore in the locale string:</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Options for creating a locale\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Options for creating a locale</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">newLanguage</span>\r
+        <p><span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry</span></p>\r
+        <p><span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry + newVariant</span></p></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  \r
+<p>The first option is a valid <a href="http://www.loc.gov/standards/iso639-2/php/code_list.php" target="_blank">ISO Language Code</a>. These codes are the lower-case two-letter codes as defined by the ISO-639 standard.\r
+</p>\r
+<p>The second option includes an additional <a href="http://www.chemie.fu-berlin.de/diverse/doc/ISO_3166.html" target="_blank">ISO Country Code</a>.\r
+</p>\r
+<p>The third option requires additional information on the variant. The variant codes are vendor and browser-specific. For example, use <span style="font-family: Courier New,Courier,monospace">WIN</span> for Windows, <span style="font-family: Courier New,Courier,monospace">MAC</span> for Macintosh, and <span style="font-family: Courier New,Courier,monospace">POSIX</span> for POSIX. Where there are two variants, separate them with an underscore, and put the most important one first. For example, a Traditional Spanish collation might be referenced, with <span style="font-family: Courier New,Courier,monospace">ES</span>, <span style="font-family: Courier New,Courier,monospace">ES</span>, <span style="font-family: Courier New,Courier,monospace">Traditional_WIN</span>.\r
+</p>\r
+<p>Because a locale is just an identifier for a region, no validity check is performed when you specify a locale. If you want to see whether particular resources are available for the locale you asked for, you must query those resources.\r
+</p>\r
+<p> Once you have specified a locale you can query it for information about itself. Use <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> to get the ISO Language Code. You can use <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_display_name()</span> to get the name of the language suitable for display to the user.\r
+</p>\r
+\r
+<h2 id="unormal" name="unormal">Unormalization</h2>\r
+\r
+<p> The Unicode normalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications) is for the standard unicode normalization. All instances of <span style="font-family: Courier New,Courier,monospace">i18n_unormalizer_s</span> are unmodifiable and immutable. Instances returned by <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> are singletons that must not be deleted by the caller.</p>\r
+\r
+\r
+<h2 id="unumber" name="unumber">Unumber</h2>\r
+<p>The Unumber API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">wearable</a> applications) helps you to format and parse numbers for any locale. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.</p>\r
+\r
+<h2 id="usearch" name="usearch">Usearch</h2>\r
+<p>The Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications) provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct.</p>\r
+\r
+<h2 id="uset" name="uset">Uset</h2>\r
+<p>Uset is a mutable set of Unicode characters and multicharacter strings. The sets represent character classes used in regular expressions. A character specifies a subset of the Unicode code points. The legal code points are U+0000 to U+10FFFF, inclusive.</p>\r
+<p>The set supports 2 functions:</p>\r
+<ul><li>The operand function allows the caller to modify the value of the set. The operand function works similarly to the boolean logic: a boolean OR is implemented by add, a boolean AND is implemented by retain, a boolean XOR is implemented by a complement taking an argument, and a boolean NOT is implemented by a complement with no argument. In terms of traditional set theory function names, add is a union, retain is an intersection, remove is an asymmetric difference, and complement with no argument is a set complement with respect to the superset range <span style="font-family: Courier New,Courier,monospace">MIN_VALUE-MAX_VALUE</span>.</li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_uset_to_pattern()</span> function. Unlike the functions that add characters or categories, and control the logic of the set, the <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> function sets all attributes of a set at once, based on a string pattern.</li></ul>\r
+\r
+<h3 id="pattern_syntax" name="pattern_syntax">Pattern Syntax</h3>\r
+\r
+<p>Patterns are accepted by the <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_pattern()</span>, <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_pattern_options()</span>, and <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> functions and returned by the <span style="font-family: Courier New,Courier,monospace">i18n_uset_to_pattern()</span> function. The patterns follow a syntax similar to that employed by version 8 regular expression character classes.</p>\r
+<table>\r
+   <caption>\r
+     Table: Examples of simple pattern syntaxes\r
+   </caption> \r
+    <tbody>\r
+               <tr>\r
+            <th>Pattern</th>\r
+            <th>Description</th>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[]</span></td>\r
+            <td>No characters</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[a]</span></td>\r
+            <td>Character &#39;a&#39;</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[ae]</span></td>\r
+            <td>Characters &#39;a&#39; and &#39;e&#39;</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[a-e]</span></td>\r
+            <td>Characters &#39;a&#39; through &#39;e&#39; inclusive, in Unicode code point order</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[\u4E01]</span></td>\r
+            <td>Character U+4E01</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[a{ab}{ac}]</span></td>\r
+            <td>Character &#39;a&#39; and the multicharacter strings &#39;ab&#39; and &#39;ac&#39;</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[\p{Lu}]</span></td>\r
+            <td>All characters in the general category &#39;uppercase letter&#39;</td>\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+<p>Any character can be preceded by a backslash in order to remove any special meaning. Whitespace characters are ignored, unless they are escaped.</p>\r
+<p>Property patterns specify a set of characters having a certain property as defined by the Unicode standard. Both the POSIX-like <span style="font-family: Courier New,Courier,monospace">[:Lu:]</span> and the Perl-like syntax <span style="font-family: Courier New,Courier,monospace">\\p{Lu}</span> are recognized.</p>\r
+<p>Patterns specify individual characters, ranges of characters, and Unicode property sets. When the elements are concatenated, they specify their union. To complement a set, place a &#39;^&#39; immediately after the opening &#39;[&#39;. Property patterns are inverted by modifying their delimiters, <span style="font-family: Courier New,Courier,monospace">[:^foo]</span> and <span style="font-family: Courier New,Courier,monospace">\\P{foo}</span>. In any other location, &#39;^&#39; has no special meaning.</p>\r
+<p>Ranges are indicated by placing a &#39;-&#39; between 2 characters, as in &quot;a-z&quot;. This specifies the range of all characters from the left to the right, in Unicode order. If the left character is greater than or equal to the right character, it is a syntax error. If a &#39;-&#39; occurs as the first character after the opening &#39;[&#39; or &#39;[^&#39;, or if it occurs as the last character before the closing &#39;]&#39;, it is taken as a literal. This means that <span style="font-family: Courier New,Courier,monospace">[a\-b]</span>, <span style="font-family: Courier New,Courier,monospace">[-ab]</span>, and <span style="font-family: Courier New,Courier,monospace">[ab-]</span> all indicate the same set of three characters, &#39;a&#39;, &#39;b&#39;, and &#39;-&#39;.</p>\r
+<p>Sets can be intersected using the &#39;&amp;&#39; operator or the asymmetric set difference can be taken using the &#39;-&#39; operator. For example, <span style="font-family: Courier New,Courier,monospace">[[:L:]&amp;[\\u0000-\\u0FFF]]</span> indicates the set of all Unicode letters with values less than 4096. Operators (&#39;&amp;&#39; and &#39;|&#39;) have equal precedence and bind left-to-right. This means that <span style="font-family: Courier New,Courier,monospace">[[:L:]-[a-z]-[\\u0100-\\u01FF]]</span> is equivalent to <span style="font-family: Courier New,Courier,monospace">[[[:L:]-[a-z]]-[\\u0100-\\u01FF]]</span>. This only really matters for difference; intersection is commutative.</p>\r
+<table>\r
+   <caption>\r
+     Table: Examples of set syntaxes\r
+   </caption> \r
+    <tbody>\r
+               <tr>\r
+            <th>Set</th>\r
+            <th>Description</th>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[a]</span></td>\r
+            <td>Set containing &#39;a&#39;</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[a-z]</span></td>\r
+            <td>Set containing &#39;a&#39; through &#39;z&#39; and all letters in between, in Unicode order</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[^a-z]</span></td>\r
+            <td>Set containing all characters but &#39;a&#39; through &#39;z&#39;, that is, U+0000 through &#39;a&#39;-1 and &#39;z&#39;+1 through U+10FFFF</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[[pat1][pat2]]</span></td>\r
+            <td>Union of sets specified by pat1 and pat2</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[[[pat1]&amp;[pat2]]</span></td>\r
+            <td>Intersection of sets specified by pat1 and pat2</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[[pat1]-[pat2]]</span></td>\r
+            <td>Asymmetric difference of sets specified by pat1 and pat2</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[:Lu:]</span> or <span style="font-family: Courier New,Courier,monospace">\p{Lu}</span></td>\r
+            <td>Set of characters having the specified Unicode property, in this case Unicode uppercase letters</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">[:^Lu:]</span> or <span style="font-family: Courier New,Courier,monospace">\P{Lu}</span></td>\r
+            <td>Set of characters not having the given Unicode property</td>\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+\r
+  <table class="note"> \r
+          <tbody> \r
+               <tr> \r
+                <th class="note">Note</th> \r
+               </tr> \r
+               <tr> \r
+                <td class="note">You cannot add an empty string (&quot;&quot;) to a set.</td> \r
+               </tr> \r
+          </tbody> \r
+         </table> \r
+\r
+\r
+<h3 id="formal_syntax" name="formal_syntax">Formal Syntax</h3>\r
+\r
+<p>The following table provide examples of formal syntax patterns.</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: Formal syntax patterns \r
+   </caption> \r
+    <tbody>\r
+               <tr>\r
+            <th>Pattern</th>\r
+            <th>Description</th>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">pattern :=</span></td>\r
+            <td>(&#39;[&#39; &#39;^&#39;? item* &#39;]&#39;) | property</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">item :=</span></td>\r
+            <td>char | (char &#39;-&#39; char) | pattern-expr</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">pattern-expr :=</span></td>\r
+            <td>pattern | pattern-expr pattern | pattern-expr or pattern</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">op :=</span></td>\r
+            <td>&#39;&amp;&#39; | &#39;-&#39;</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">special :=</span></td>\r
+            <td>&#39;[&#39; | &#39;]&#39; | &#39;-&#39;</td>\r
+               </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">char :=</span></td>\r
+            <td>Any character that is not special | (&#39;\&#39; any character) | (&#39;\u&#39; hex hex hex hex)</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">property :=</span></td>\r
+            <td>Unicode property set pattern</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">a := b</span></td>\r
+            <td>a can be replaced by b</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">a?</span></td>\r
+            <td>0 or 1 instance of a</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">a*</span></td>\r
+            <td>1 or more instances of a</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">a | b</span></td>\r
+            <td>Either a or b</td>\r
+        </tr>\r
+        <tr>\r
+            <td><span style="font-family: Courier New,Courier,monospace">&#39;a&#39;</span></td>\r
+            <td>Literal string between the quotes</td>\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+\r
+\r
+\r
+<h2 id="ustring" name="ustring">Ustring</h2>\r
+<p>The Ustring API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">wearable</a> applications) provides general unicode string handling. Some functions are similar in name, signature, and behavior to the ANSI C <span style="font-family: Courier New,Courier,monospace">&lt;string.h&gt;</span> functions, and other functions provide more Unicode-specific functionality.</p>\r
+<p>The i18n uses 16-bit Unicode (UTF-16) in the form of arrays of <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. UTF-16 encodes each Unicode code point with either 1 or 2 <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. This is the default form of Unicode, and a forward-compatible extension of the original, fixed-width form that was known as UCS-2. UTF-16 superseded UCS-2 with Unicode 2.0 in 1996.</p>\r
+<p>The i18n also handles 16-bit Unicode text with unpaired surrogates. Such text is not well-formed UTF-16. Code-point-related functions treat unpaired surrogates as surrogate code points, such as separate units.</p>\r
+<p>Although UTF-16 is a variable-width encoding form, such as some legacy multi-byte encodings, it is much more efficient even for random access because the code unit values for single-unit characters versus lead units versus trail units are completely disjoint. This means that it is easy to determine character (code point) boundaries from random offsets in the string.</p>\r
+<p>Unicode (UTF-16) string processing is optimized for the single-unit case. Although it is important to support supplementary characters, which use pairs of lead/trail code units called &quot;surrogates&quot;, their occurrence is rare. Almost all characters in modern use require only a single <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code unit (such as their code point values are &lt;=0xffff).</p>\r
+\r
+ <h3 id="map" name="map">Character Set Mapping Tables</h3>\r
+<p>The i18n API provides a character set conversion with mapping tables for a number of important codepages. The default tables are a subset of IBM&#39;s CDRA conversion table repository. ICU&#39;s <a href="http://demo.icu-project.org/icu-bin/convexp" target="_blank">Converter Explorer</a> shows aliases and codepage charts for the default tables that are built into a standard ICU distribution.</p>\r
+<p>Conversions for most codepages are implemented differently on different platforms. We are providing  mapping tables here from many different sources, so that the i18n users and others can use these tables to get the same conversion behavior as on the original platforms.</p>\r
+<p>The mapping tables and some of the source code of the tools that collected these tables are checked into a <a href="http://source.icu-project.org/repos/icu/data/trunk/charset/data/ucm/" target="_blank">CVS repository</a>.\r
+</p>\r
+<p>For more information about character sets, codepages and encodings, see <a href="http://www.ibm.com/software/globalization/topics/charsets/" target="_blank">Coded Character Sets</a> on the IBM site.\r
+</p>\r
+\r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.guides/html/native/content/content_guide_n.htm b/org.tizen.guides/html/native/content/content_guide_n.htm
index 52c6026..68b8e75 100644 (file)
--- a/org.tizen.guides/html/native/content/content_guide_n.htm
+++ b/org.tizen.guides/html/native/content/content_guide_n.htm
@@ -43,7 +43,7 @@
         <li><a href="mime_type_n.htm">MIME type</a> <p>Enables you to get the MIME type of a file extension and get a list of associated extensions.</p></li>
         
   </ul>
-  <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+  <p>The following guides apply in <strong>mobile applications only</strong>:</p>
        <ul>
         <li><a href="download_n.htm">Download</a>  <p>Enables you to download files from the Internet and monitor the download progress and status.</p></li>
        </ul>
diff --git a/org.tizen.guides/html/native/content/download_n.htm b/org.tizen.guides/html/native/content/download_n.htm
index e771827..e85e247 100644 (file)
--- a/org.tizen.guides/html/native/content/download_n.htm
+++ b/org.tizen.guides/html/native/content/download_n.htm
@@ -1,148 +1,148 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Download</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">             
-                       <li><a href="#state">Download States</a></li>
-                       <li><a href="#stop">Stopping and Destroying a Download</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-        <li><a href="../../../../org.tizen.tutorials/html/native/content/download_tutorial_n.htm">Download Tutorial</a></li>
-               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download API for Mobile Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-   
-   <h1>Download</h1>
- <p>You can create and manage one or more download requests. Tizen allows you to create a new download process, configure the download URL or destination, and launch the process.</p>
- 
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
- <h2 id="state" name="state">Download States</h2>
- 
- <p>The following figure illustrates the download states (such as READY and DOWNLOADING), and API functions (such as <span style="font-family: Courier New,Courier,monospace">download_start()</span>) which cause transitions between those states. Functions can be called only from specific states. Every possible scenario must be handled in the code to avoid undefined behavior in the application.</p>
- 
-
-  <p class="figure">Figure: Download states</p> 
-  <p align="center"><img alt="Download states" src="../../images/download_state.png" /></p> 
-
-  <p>The following table defines the download state enumerator values.</p>
-<table> 
-   <caption>
-     Table: Download state enumerator values
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Enumerator value</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_NONE</span></td> 
-     <td>Default value.</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_READY</span></td> 
-     <td>Ready to download.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_QUEUED</span></td> 
-     <td>Queued to start downloading.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_DOWNLOADING</span></td> 
-     <td>Download is currently running.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_PAUSED</span></td> 
-     <td>Download is waiting to resume.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_COMPLETED</span></td> 
-     <td>Download is complete.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_FAILED</span></td> 
-     <td>Download failed.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_CANCELED</span></td> 
-     <td>Download was cancelled by the user.</td> 
-    </tr> 
-   
-   </tbody> 
-  </table> 
-
-<p>The following figure illustrates the user scenario for the download.</p>
- 
-
-  <p class="figure">Figure: User scenario</p> 
-  <p align="center"><img alt="User scenario" src="../../images/user_scenario.png" /></p> 
-
-   <h2 id="stop" name="stop">Stopping and Destroying a Download</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">download_cancel()</span> function can be used to stop downloading a file. The function changes the download state to DOWNLOAD_STATE_CANCELED. From this state, the <span style="font-family: Courier New,Courier,monospace">download_start()</span> function can be called to restart the download. </p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">download_destroy()</span> function can be called to unload all data concerning a <span style="font-family: Courier New,Courier,monospace">download_id</span> handle from the memory. The <span style="font-family: Courier New,Courier,monospace">download_id</span> handle is stored for 48 hours (even if the device is powered off), unless the <span style="font-family: Courier New,Courier,monospace">download_destroy()</span> is called.</p>
-  
-
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Download</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">             \r
+                       <li><a href="#state">Download States</a></li>\r
+                       <li><a href="#stop">Stopping and Destroying a Download</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+        <li><a href="../../../../org.tizen.tutorials/html/native/content/download_tutorial_n.htm">Download Tutorial</a></li>\r
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download API for Mobile Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+   \r
+   <h1>Download</h1>\r
+ <p>You can create and manage one or more download requests. Tizen allows you to create a new download process, configure the download URL or destination, and launch the process.</p>\r
+ \r
+   <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+ <h2 id="state" name="state">Download States</h2>\r
+ \r
+ <p>The following figure illustrates the download states (such as READY and DOWNLOADING), and API functions (such as <span style="font-family: Courier New,Courier,monospace">download_start()</span>) which cause transitions between those states. Functions can be called only from specific states. Every possible scenario must be handled in the code to avoid undefined behavior in the application.</p>\r
+ \r
+\r
+  <p class="figure">Figure: Download states</p> \r
+  <p align="center"><img alt="Download states" src="../../images/download_state.png" /></p> \r
+\r
+  <p>The following table defines the download state enumerator values.</p>\r
+<table> \r
+   <caption>\r
+     Table: Download state enumerator values\r
+   </caption> \r
+   <colgroup> \r
+    <col /> \r
+    <col /> \r
+    <col /> \r
+    <col /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Enumerator value</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_NONE</span></td> \r
+     <td>Default value.</td> \r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_READY</span></td> \r
+     <td>Ready to download.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_QUEUED</span></td> \r
+     <td>Queued to start downloading.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_DOWNLOADING</span></td> \r
+     <td>Download is currently running.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_PAUSED</span></td> \r
+     <td>Download is waiting to resume.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_COMPLETED</span></td> \r
+     <td>Download is complete.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_FAILED</span></td> \r
+     <td>Download failed.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DOWNLOAD_STATE_CANCELED</span></td> \r
+     <td>Download was cancelled by the user.</td> \r
+    </tr> \r
+   \r
+   </tbody> \r
+  </table> \r
+\r
+<p>The following figure illustrates the user scenario for the download.</p>\r
+ \r
+\r
+  <p class="figure">Figure: User scenario</p> \r
+  <p align="center"><img alt="User scenario" src="../../images/user_scenario.png" /></p> \r
+\r
+   <h2 id="stop" name="stop">Stopping and Destroying a Download</h2>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">download_cancel()</span> function can be used to stop downloading a file. The function changes the download state to DOWNLOAD_STATE_CANCELED. From this state, the <span style="font-family: Courier New,Courier,monospace">download_start()</span> function can be called to restart the download. </p>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">download_destroy()</span> function can be called to unload all data concerning a <span style="font-family: Courier New,Courier,monospace">download_id</span> handle from the memory. The <span style="font-family: Courier New,Courier,monospace">download_id</span> handle is stored for 48 hours (even if the device is powered off), unless the <span style="font-family: Courier New,Courier,monospace">download_destroy()</span> is called.</p>\r
+  \r
+\r
+   \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/content/media_content_n.htm b/org.tizen.guides/html/native/content/media_content_n.htm
index 5798c59..f739372 100644 (file)
--- a/org.tizen.guides/html/native/content/media_content_n.htm
+++ b/org.tizen.guides/html/native/content/media_content_n.htm
@@ -1,432 +1,432 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Media Content</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-        <li><a href="../../../../org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm">Media Content Tutorials</a></li>
-               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API for Mobile Native</a></li>
-               <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Media Content</h1>
-   
-   <p>You can get information about media content from the metadata in the content, such as an ID3 or MP4 tag. You can obtain or update data from the media database, which stores metadata for the media files (such as images, videos, and audio) in the device.</p>
-  
-  <p class="figure">Figure: Media content of the device</p> 
-  <p align="center"><img alt="Media content of the device" src="../../images/content.png" /></p>   
- 
-<p>The media files are updated using an application (by calling the Content API) or a media scanner. When updating the files in the media scanner, the following limitations apply:</p>
-<ul><li>SD card insertion and removal: Media files are updated only in the SD card.</li>
-<li>Rebooting the device: Media files are updated in the internal memory and SD card in the device.</li></ul>
-
-<p>Media content is available to only use the files located in the specific paths. You can get the paths by using the <span style="font-family: Courier New,Courier,monospace">int storage_get_directory(int storage_id, storage_directory_e type, char **path);</span> function. For more information, see the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications).</p>
-
-
-<p>The main features of the Content module include:</p>
-<ul>
-<li>Media content
-<p>To obtain information from the media database, make sure you are connected to it. When the connection is no longer needed, remember to disconnect from the media database.</p>
-<p>You can update database details due to file (or directory) creation or deletion. If a received file (or directory) does not exist in the file system, it is removed from the database.</p>
-<p>You can also set an alarm to get notifications of media database changes.</p></li>
-<li><a href="#media_info">Media information</a>
-<p>You can update the media database due to file creation, deletion, or update in the device.</p></li>
-<li>Media bookmarks
-<p>You can manage a bookmark of the video and audio files.</p></li>
-<li>Media playlists
-<p>You can add or delete a playlist of the video and audio files, and add media files to a created playlist.</p></li>
-<li>Media tags
-<p>You can get tag information of the media files.</p></li>
-<li>Media albums
-<p>You can manage an album of the audio file.</p></li>
-<li><a href="mime_type_n.htm">Mapping MIME types</a>
-<p>You can map a file&#39;s MIME types to file extensions and vice versa.</p></li>
-</ul>
-
-<p>You can also <a href="download_n.htm">manage downloads</a>, for example, create a new download process, configure the download URL or destination, and launch the process.</p>
-
-   <h2 id="media_info" name="media_info">Getting Media Information</h2>
-<p>You can get the media data from the media database using the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function.</p>
-<p>After that, you can get the general information of media and specific information of each media type.</p>
-
-<p>The following tables list the information available about the media files.</p>
-
-<table> 
-   <caption>
-     Table: General information 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Metadata name</th>
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td>
-     <td>ID of the media content</td>
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">File path</span></td>
-     <td>Path of the media content</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">Display name</span></td>
-     <td>Display name of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Media type</span></td> 
-     <td>The media type of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Mime type</span></td> 
-     <td>Mime type of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Size</span></td> 
-     <td>File size of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Added time</span></td> 
-     <td>The time the media content was added in the database</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Modified time</span></td> 
-     <td>The last modification time of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Timeline</span></td> 
-     <td>The time the media content was created<br/>You can use this value to sort the content.</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Thumbnail path</span></td> 
-     <td>Path of the stored thumbnail image of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Description</span></td> 
-     <td>Description of the media content</td>
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Longitude</span></td> 
-     <td>Longitude of the media content</td>
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Latitude</span></td> 
-     <td>Latitude of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Altitude</span></td> 
-     <td>Altitude of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Weather</span></td> 
-     <td>Weather information of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Rating</span></td> 
-     <td>Rating of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Favorite</span></td> 
-     <td>Favorite of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Author</span></td> 
-     <td>The author of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Provider</span></td> 
-     <td>Provider of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Content name</span></td> 
-     <td>Content name of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Title</span></td> 
-     <td>Title of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Category</span></td> 
-     <td>Category of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Location tag</span></td> 
-     <td>Location tag of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Age rating</span></td> 
-     <td>Age rating of the media content</td>
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Keyword</span></td> 
-     <td>Keyword of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Is DRM</span></td> 
-     <td>Check flag for DRM content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Storage type</span></td> 
-     <td>Storage type of the media content</td>
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Played count</span></td> 
-     <td>Played count of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Played time</span></td> 
-     <td>Last played time of the media content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Played position</span></td> 
-     <td>Last played position of the media content</td>
-    </tr> 
-       
-   </tbody> 
-  </table> 
-
-<p>For metadata of an audio file, call the <span style="font-family: Courier New,Courier,monospace">media_info_get_audio()</span> function with the media handle.</p>
- <table> 
-   <caption>
-     Table: Audio metadata (only for audio files)
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Metadata name</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> 
-     <td>Media ID of the audio content<br/> This value is same as the media ID in general information</td>
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Album</span></td> 
-     <td>Album information of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Artist</span></td> 
-     <td>Artist of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Album Artist</span></td> 
-     <td>Album artist of the audio content <br/> The artist and album artist can be the same.</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Genre</span></td> 
-     <td>Genre of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Composer</span></td> 
-     <td>Composer of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Year</span></td> 
-     <td>The year the audio content was created</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Recorded date</span></td> 
-     <td>The date the audio content was recorded</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Copyright</span></td> 
-     <td>Copyright information of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Track number</span></td> 
-     <td>Track number of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Bit rate</span></td> 
-     <td>Bit rate of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Bit per sample</span></td> 
-     <td>Bit per sample of the audio content <br/> The bit per sample is the same as the sample format. <br/>The sample format is the number of digits in the digital representation of each sample.</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Sample rate</span></td> 
-     <td>Sample rate of the audio content</td>
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Channel</span></td> 
-     <td>Channel information of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Duration</span></td> 
-     <td>Duration of the audio content</td>
-    </tr> 
-   </tbody> 
-  </table>
- 
-<p>For metadata of an image file, call the <span style="font-family: Courier New,Courier,monospace">media_info_get_image()</span> function with the media handle.</p>  
-
- <table> 
-   <caption>
-     Table: Image metadata (only for image files)
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Metadata name</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> 
-     <td>Media ID of the image<br/>This value is the same as the media ID in the general information.</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Width</span></td> 
-     <td>Width of the image</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Height</span></td> 
-     <td>Height of the image</td>
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Exposure time</span></td> 
-     <td>Exposure time of the image</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">F-number</span></td> 
-     <td>F-number of the image</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">ISO</span></td> 
-     <td>ISO information of the image</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Model</span></td> 
-     <td>Model name of the image</td>
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Orientation</span></td> 
-     <td>Orientation information of the image</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Date taken</span></td> 
-     <td>The time the image was created<br/>You can get this information from the EXIF tag. <br/>If there is no EXIF tag for the image, set the created time in the file system.</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Is burstshot</span></td> 
-     <td>Check flag for a burst shot of the image<br/> The burst shot is a continuous shooting mode.</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Burstshot ID</span></td> 
-     <td>ID of a burst shot image <br/>Assign the same ID to the burst shooting mode.</td>
-    </tr> 
-   </tbody> 
-  </table>  
-<p>For metadata of a video file, call <span style="font-family: Courier New,Courier,monospace">withmedia_info_get_video()</span> function with the media handle.</p>  
-  
-  <table> 
-   <caption>
-     Table: Video metadata (only for video files)
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Metadata name</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> 
-     <td>The media ID of the video content<br/>This value is same with media ID of general information</td>
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Album</span></td> 
-     <td>Album of the video content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Artist</span></td> 
-     <td>Artist of the video content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Album artist</span></td> 
-     <td>Album artist of the video content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Genre</span></td> 
-     <td>Genre of the video content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Composer</span></td> 
-     <td>Media composer of the video content</td>
-    </tr> 
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">Year</span></td> 
-     <td>The year the video content was created</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Recorded date</span></td> 
-     <td>The date the video content was recorded</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Copyright</span></td> 
-     <td>Copyright of the video content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Track number</span></td> 
-     <td>Track number of the video content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Bit rate</span></td> 
-     <td>Bit rate of the video content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Duration</span></td> 
-     <td>Duration of the video content</td>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Width</span></td> 
-     <td>Width of the video content</td>
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">Height</span></td> 
-     <td>Height of the video content</td>
-    </tr> 
-   </tbody> 
-  </table>  
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Media Content</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+        <li><a href="../../../../org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm">Media Content Tutorials</a></li>\r
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API for Mobile Native</a></li>\r
+               <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>Media Content</h1>\r
+   \r
+   <p>You can get information about media content from the metadata in the content, such as an ID3 or MP4 tag. You can obtain or update data from the media database, which stores metadata for the media files (such as images, videos, and audio) in the device.</p>\r
+  \r
+  <p class="figure">Figure: Media content of the device</p> \r
+  <p align="center"><img alt="Media content of the device" src="../../images/content.png" /></p>   \r
+ \r
+<p>The media files are updated using an application (by calling the Content API) or a media scanner. When updating the files in the media scanner, the following limitations apply:</p>\r
+<ul><li>SD card insertion and removal: Media files are updated only in the SD card.</li>\r
+<li>Rebooting the device: Media files are updated in the internal memory and SD card in the device.</li></ul>\r
+\r
+<p>Media content is available to only use the files located in the specific paths. You can get the paths by using the <span style="font-family: Courier New,Courier,monospace">int storage_get_directory(int storage_id, storage_directory_e type, char **path);</span> function. For more information, see the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications).</p>\r
+\r
+\r
+<p>The main features of the Content module include:</p>\r
+<ul>\r
+<li>Media content\r
+<p>To obtain information from the media database, make sure you are connected to it. When the connection is no longer needed, remember to disconnect from the media database.</p>\r
+<p>You can update database details due to file (or directory) creation or deletion. If a received file (or directory) does not exist in the file system, it is removed from the database.</p>\r
+<p>You can also set an alarm to get notifications of media database changes.</p></li>\r
+<li><a href="#media_info">Media information</a>\r
+<p>You can update the media database due to file creation, deletion, or update in the device.</p></li>\r
+<li>Media bookmarks\r
+<p>You can manage a bookmark of the video and audio files.</p></li>\r
+<li>Media playlists\r
+<p>You can add or delete a playlist of the video and audio files, and add media files to a created playlist.</p></li>\r
+<li>Media tags\r
+<p>You can get tag information of the media files.</p></li>\r
+<li>Media albums\r
+<p>You can manage an album of the audio file.</p></li>\r
+<li><a href="mime_type_n.htm">Mapping MIME types</a>\r
+<p>You can map a file&#39;s MIME types to file extensions and vice versa.</p></li>\r
+</ul>\r
+\r
+<p>You can also <a href="download_n.htm">manage downloads</a>, for example, create a new download process, configure the download URL or destination, and launch the process.</p>\r
+\r
+   <h2 id="media_info" name="media_info">Getting Media Information</h2>\r
+<p>You can get the media data from the media database using the <span style="font-family: Courier New,Courier,monospace">media_info_foreach_media_from_db()</span> function.</p>\r
+<p>After that, you can get the general information of media and specific information of each media type.</p>\r
+\r
+<p>The following tables list the information available about the media files.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: General information \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Metadata name</th>\r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td>\r
+     <td>ID of the media content</td>\r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">File path</span></td>\r
+     <td>Path of the media content</td>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">Display name</span></td>\r
+     <td>Display name of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Media type</span></td> \r
+     <td>The media type of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Mime type</span></td> \r
+     <td>Mime type of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Size</span></td> \r
+     <td>File size of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Added time</span></td> \r
+     <td>The time the media content was added in the database</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Modified time</span></td> \r
+     <td>The last modification time of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Timeline</span></td> \r
+     <td>The time the media content was created<br/>You can use this value to sort the content.</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Thumbnail path</span></td> \r
+     <td>Path of the stored thumbnail image of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Description</span></td> \r
+     <td>Description of the media content</td>\r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Longitude</span></td> \r
+     <td>Longitude of the media content</td>\r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Latitude</span></td> \r
+     <td>Latitude of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Altitude</span></td> \r
+     <td>Altitude of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Weather</span></td> \r
+     <td>Weather information of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Rating</span></td> \r
+     <td>Rating of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Favorite</span></td> \r
+     <td>Favorite of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Author</span></td> \r
+     <td>The author of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Provider</span></td> \r
+     <td>Provider of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Content name</span></td> \r
+     <td>Content name of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Title</span></td> \r
+     <td>Title of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Category</span></td> \r
+     <td>Category of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Location tag</span></td> \r
+     <td>Location tag of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Age rating</span></td> \r
+     <td>Age rating of the media content</td>\r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Keyword</span></td> \r
+     <td>Keyword of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Is DRM</span></td> \r
+     <td>Check flag for DRM content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Storage type</span></td> \r
+     <td>Storage type of the media content</td>\r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Played count</span></td> \r
+     <td>Played count of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Played time</span></td> \r
+     <td>Last played time of the media content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Played position</span></td> \r
+     <td>Last played position of the media content</td>\r
+    </tr> \r
+       \r
+   </tbody> \r
+  </table> \r
+\r
+<p>For metadata of an audio file, call the <span style="font-family: Courier New,Courier,monospace">media_info_get_audio()</span> function with the media handle.</p>\r
+ <table> \r
+   <caption>\r
+     Table: Audio metadata (only for audio files)\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Metadata name</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> \r
+     <td>Media ID of the audio content<br/> This value is same as the media ID in general information</td>\r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Album</span></td> \r
+     <td>Album information of the audio content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Artist</span></td> \r
+     <td>Artist of the audio content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Album Artist</span></td> \r
+     <td>Album artist of the audio content <br/> The artist and album artist can be the same.</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Genre</span></td> \r
+     <td>Genre of the audio content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Composer</span></td> \r
+     <td>Composer of the audio content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Year</span></td> \r
+     <td>The year the audio content was created</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Recorded date</span></td> \r
+     <td>The date the audio content was recorded</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Copyright</span></td> \r
+     <td>Copyright information of the audio content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Track number</span></td> \r
+     <td>Track number of the audio content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Bit rate</span></td> \r
+     <td>Bit rate of the audio content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Bit per sample</span></td> \r
+     <td>Bit per sample of the audio content <br/> The bit per sample is the same as the sample format. <br/>The sample format is the number of digits in the digital representation of each sample.</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Sample rate</span></td> \r
+     <td>Sample rate of the audio content</td>\r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Channel</span></td> \r
+     <td>Channel information of the audio content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Duration</span></td> \r
+     <td>Duration of the audio content</td>\r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+<p>For metadata of an image file, call the <span style="font-family: Courier New,Courier,monospace">media_info_get_image()</span> function with the media handle.</p>  \r
+\r
+ <table> \r
+   <caption>\r
+     Table: Image metadata (only for image files)\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Metadata name</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> \r
+     <td>Media ID of the image<br/>This value is the same as the media ID in the general information.</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Width</span></td> \r
+     <td>Width of the image</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Height</span></td> \r
+     <td>Height of the image</td>\r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Exposure time</span></td> \r
+     <td>Exposure time of the image</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">F-number</span></td> \r
+     <td>F-number of the image</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">ISO</span></td> \r
+     <td>ISO information of the image</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Model</span></td> \r
+     <td>Model name of the image</td>\r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Orientation</span></td> \r
+     <td>Orientation information of the image</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Date taken</span></td> \r
+     <td>The time the image was created<br/>You can get this information from the EXIF tag. <br/>If there is no EXIF tag for the image, set the created time in the file system.</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Is burstshot</span></td> \r
+     <td>Check flag for a burst shot of the image<br/> The burst shot is a continuous shooting mode.</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Burstshot ID</span></td> \r
+     <td>ID of a burst shot image <br/>Assign the same ID to the burst shooting mode.</td>\r
+    </tr> \r
+   </tbody> \r
+  </table>  \r
+<p>For metadata of a video file, call <span style="font-family: Courier New,Courier,monospace">withmedia_info_get_video()</span> function with the media handle.</p>  \r
+  \r
+  <table> \r
+   <caption>\r
+     Table: Video metadata (only for video files)\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Metadata name</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Media ID</span></td> \r
+     <td>The media ID of the video content<br/>This value is same with media ID of general information</td>\r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Album</span></td> \r
+     <td>Album of the video content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Artist</span></td> \r
+     <td>Artist of the video content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Album artist</span></td> \r
+     <td>Album artist of the video content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Genre</span></td> \r
+     <td>Genre of the video content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Composer</span></td> \r
+     <td>Media composer of the video content</td>\r
+    </tr> \r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">Year</span></td> \r
+     <td>The year the video content was created</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Recorded date</span></td> \r
+     <td>The date the video content was recorded</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Copyright</span></td> \r
+     <td>Copyright of the video content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Track number</span></td> \r
+     <td>Track number of the video content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Bit rate</span></td> \r
+     <td>Bit rate of the video content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Duration</span></td> \r
+     <td>Duration of the video content</td>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Width</span></td> \r
+     <td>Width of the video content</td>\r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">Height</span></td> \r
+     <td>Height of the video content</td>\r
+    </tr> \r
+   </tbody> \r
+  </table>  \r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/content/mime_type_n.htm b/org.tizen.guides/html/native/content/mime_type_n.htm
index e1b909c..5c37a57 100644 (file)
--- a/org.tizen.guides/html/native/content/mime_type_n.htm
+++ b/org.tizen.guides/html/native/content/mime_type_n.htm
@@ -1,67 +1,69 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>MIME Type</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-        <li><a href="../../../../org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm">MIME Type Tutorial</a></li>
-               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Mobile Native</a></li>
-               <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>MIME Type</h1> 
-  
-<p>The main features of the MIME Type API include:</p>
- 
-<ul><li>Getting the MIME type 
-<p>To get a MIME type for a file extension, use the <span style="font-family: Courier New,Courier,monospace">mime_type_get_mime_type()</span> function. The MIME type is &#39;application/octet-stream&#39;, if the given file extension is not associated with any specific file format.</p></li>
-
-<li>Getting associated extensions
-<p>To get a list of extensions associated, for example, with an image or a JPEG MIME type, use the <span style="font-family: Courier New,Courier,monospace">mime_type_get_file_extension()</span> function.</p></li></ul>
-
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>MIME Type</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+        <li><a href="../../../../org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm">MIME Type Tutorial</a></li>\r
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Mobile Native</a></li>\r
+               <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>MIME Type</h1> \r
+  \r
+<p>You can retrieve various information related to the MIME type.</p>  \r
+  \r
+<p>The main features of the MIME Type API include:</p>\r
+ \r
+<ul><li>Getting the MIME type \r
+<p>To get a MIME type for a file extension, use the <span style="font-family: Courier New,Courier,monospace">mime_type_get_mime_type()</span> function. The MIME type is &#39;application/octet-stream&#39;, if the given file extension is not associated with any specific file format.</p></li>\r
+\r
+<li>Getting associated extensions\r
+<p>To get a list of extensions associated, for example, with an image or a JPEG MIME type, use the <span style="font-family: Courier New,Courier,monospace">mime_type_get_file_extension()</span> function.</p></li></ul>\r
+\r
+   \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/context/activity_recognition_n.htm b/org.tizen.guides/html/native/context/activity_recognition_n.htm
index bbcd18f..0c24403 100644 (file)
--- a/org.tizen.guides/html/native/context/activity_recognition_n.htm
+++ b/org.tizen.guides/html/native/context/activity_recognition_n.htm
@@ -1,72 +1,72 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Activity Recognition</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/context/activity_tutorial_n.htm">Activity Recognition Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-  <h1>Activity Recognition</h1>
-
-
-<p>The activity recognizer can detect walking and running activity. It also recognizes the stationary state and activities on a moving vehicle.</p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">You can test the activity recognition functionality only on a target device. The Emulator does not support this feature.</td>
-    </tr>
-   </tbody>
-  </table>
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+    <title>Activity Recognition</title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/context/activity_tutorial_n.htm">Activity Recognition Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+\r
+  <h1>Activity Recognition</h1>\r
+\r
+\r
+<p>The activity recognizer can detect walking and running activity. It also recognizes the stationary state and activities on a moving vehicle.</p>\r
+\r
+  <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">You can test the activity recognition functionality only on a target device. The Emulator does not support this feature.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/context/context_guide_n.htm b/org.tizen.guides/html/native/context/context_guide_n.htm
index fdbac12..e51fe3f 100644 (file)
--- a/org.tizen.guides/html/native/context/context_guide_n.htm
+++ b/org.tizen.guides/html/native/context/context_guide_n.htm
@@ -1,79 +1,79 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Context</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/context/context_tutorials_n.htm">Context Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-  <h1>Context</h1>
-
-  <p>Context features include recognizing activities and gestures, triggering tasks by contextual events and conditions, and getting usage profiles on the device.</p>
-
-  <p>The main context features are:</p>
-  <ul>
-   <li><a href="activity_recognition_n.htm">Activity Recognition</a>
-       <p>Enables you to monitor user activities, such as walking and running.</p></li>
-       <li><a href="gesture_recognition_n.htm">Gesture Recognition</a>
-       <p>Enables you to monitor user gestures, such as double-tap.</p></li>
-  </ul>
-
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
-       <li><a href="trigger_n.htm">Contextual Trigger</a>
-       <p>Enables you to compose rules to trigger a task based on contextual events and conditions.</p></li>
-       <li><a href="history_n.htm">Contextual History</a>
-       <p>Enables you to get usage profiles, such as information about frequently used applications.</p></li>
-</ul>
-
-  
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+    <title>Context</title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/context/context_tutorials_n.htm">Context Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+\r
+  <h1>Context</h1>\r
+\r
+  <p>Context features include recognizing activities and gestures, triggering tasks by contextual events and conditions, and getting usage profiles on the device.</p>\r
+\r
+  <p>The main context features are:</p>\r
+  <ul>\r
+   <li><a href="activity_recognition_n.htm">Activity Recognition</a>\r
+       <p>Enables you to monitor user activities, such as walking and running.</p></li>\r
+       <li><a href="gesture_recognition_n.htm">Gesture Recognition</a>\r
+       <p>Enables you to monitor user gestures, such as double-tap.</p></li>\r
+  </ul>\r
+\r
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>\r
+<ul>\r
+       <li><a href="trigger_n.htm">Contextual Trigger</a>\r
+       <p>Enables you to compose rules to trigger a task based on contextual events and conditions.</p></li>\r
+       <li><a href="history_n.htm">Contextual History</a>\r
+       <p>Enables you to get usage profiles, such as information about frequently used applications.</p></li>\r
+</ul>\r
+\r
+  \r
+  \r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/context/gesture_recognition_n.htm b/org.tizen.guides/html/native/context/gesture_recognition_n.htm
index d5c547a..1b38559 100644 (file)
--- a/org.tizen.guides/html/native/context/gesture_recognition_n.htm
+++ b/org.tizen.guides/html/native/context/gesture_recognition_n.htm
@@ -1,123 +1,123 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Gesture Recognition</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm">Gesture Recognition Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-  <h1>Gesture Recognition</h1>
-
-<p>With gesture recognition, you can receive notifications about different device movement patterns, identify device states, and trigger events when the sensor data meets predefined conditions. In some cases, you can also listen to different states (started, in-progress, and ended).</p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">You can test the gesture recognition functionality only on a target device. The Emulator does not support this feature.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<p>The following gesture events are supported in Tizen devices:</p>
-  
-<ul>
-<li>Double-tap
-<p>The device is tapped twice.</p>
-     </li>
-<li>Move to ear
-<p>The device is moved near to an ear. The event is detected using the acceleration and proximity sensors.</p>
-<p class="figure">Figure: Move-to-ear event</p> 
-<p align="center"><img alt="Move-to-ear event" src="../../images/move_ear.png" /></p></li>
-<li>No move
-<p>The device is not moved for a while.</p></li>
-<li>Pick-up
-<p>The device is picked up.</p></li>
-<li>Shake
-<p>The device is quickly moved back and forth.</p>
-<p class="figure">Figure: Shake event</p> 
-<p align="center"><img alt="Shake event" src="../../images/shake.png" /></p></li>
-<li>Snap
-<p>The device is moved along a particular axis.</p>
-<p class="figure">Figure: Axes of the device</p> 
-<p align="center"><img alt="Axes of the device" src="../../images/device_axes.png" /></p>
-<p>The movement is measured with 6 discrete events: +X, -X, +Y, -Y, +Z, and -Z:</p>
-<ul><li>With the display in the portrait mode, the +X, -X, +Z, and -Z snaps are active.</li>
-<li>With the display in the landscape mode, the +Y, -Y, +Z, and -Z snaps are active.</li></ul>
-<p class="figure">Figure: Snap events +X, +Y, and +Z</p> 
-<p align="center"><img alt="Snap events +X, +Y, and +Z" src="../../images/snap.png" /></p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The snap motion does not operate correctly if the device is tilted improperly. For example, the device must be held straight in a portrait mode for best accuracy. Similarly, when the device is tilted 90 degrees along the Z axis from the above position (+X or -X points to the earth), the snap motion in a landscape mode works best. This means that when a user lies down holding the device, the snap motion may not work accurately.</td> 
-    </tr> 
-   </tbody> 
-  </table>   
-  </li>
-<li>Tilt
-<p>The device is tilted. The event provides changes of the slopes on the X and Y axes, not the current angle of each axis.</p>
-<p class="figure">Figure: Tilt event</p> 
-<p align="center"><img alt="Tilt event" src="../../images/tilt.png" /></p></li>
-<li>Turn face down
-<p>The device is turned over and the screen is facing downwards.</p>
-<p class="figure">Figure: Face-down event</p> 
-<p align="center"><img alt="Face-down event" src="../../images/face_down.png" /></p></li>
- <li>Wrist up
-<p>The event occurs when wrist-up gesture is performed (in case of a watch device).</p>
-<p class="figure">Figure: Wrist-up event</p>
-<p align="center"><img alt="Wrist-up event" src="../../images/wrist_up.png" /></p></li>
-  </ul>   
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+    <title>Gesture Recognition</title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm">Gesture Recognition Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+\r
+  <h1>Gesture Recognition</h1>\r
+\r
+<p>With gesture recognition, you can receive notifications about different device movement patterns, identify device states, and trigger events when the sensor data meets predefined conditions. In some cases, you can also listen to different states (started, in-progress, and ended).</p>\r
+\r
+  <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">You can test the gesture recognition functionality only on a target device. The Emulator does not support this feature.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<p>The following gesture events are supported in Tizen devices:</p>\r
+  \r
+<ul>\r
+<li>Double-tap\r
+<p>The device is tapped twice.</p>\r
+     </li>\r
+<li>Move to ear\r
+<p>The device is moved near to an ear. The event is detected using the acceleration and proximity sensors.</p>\r
+<p class="figure">Figure: Move-to-ear event</p> \r
+<p align="center"><img alt="Move-to-ear event" src="../../images/move_ear.png" /></p></li>\r
+<li>No move\r
+<p>The device is not moved for a while.</p></li>\r
+<li>Pick-up\r
+<p>The device is picked up.</p></li>\r
+<li>Shake\r
+<p>The device is quickly moved back and forth.</p>\r
+<p class="figure">Figure: Shake event</p> \r
+<p align="center"><img alt="Shake event" src="../../images/shake.png" /></p></li>\r
+<li>Snap\r
+<p>The device is moved along a particular axis.</p>\r
+<p class="figure">Figure: Axes of the device</p> \r
+<p align="center"><img alt="Axes of the device" src="../../images/device_axes.png" /></p>\r
+<p>The movement is measured with 6 discrete events: +X, -X, +Y, -Y, +Z, and -Z:</p>\r
+<ul><li>With the display in the portrait mode, the +X, -X, +Z, and -Z snaps are active.</li>\r
+<li>With the display in the landscape mode, the +Y, -Y, +Z, and -Z snaps are active.</li></ul>\r
+<p class="figure">Figure: Snap events +X, +Y, and +Z</p> \r
+<p align="center"><img alt="Snap events +X, +Y, and +Z" src="../../images/snap.png" /></p>\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The snap motion does not operate correctly if the device is tilted improperly. For example, the device must be held straight in a portrait mode for best accuracy. Similarly, when the device is tilted 90 degrees along the Z axis from the above position (+X or -X points to the earth), the snap motion in a landscape mode works best. This means that when a user lies down holding the device, the snap motion may not work accurately.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>   \r
+  </li>\r
+<li>Tilt\r
+<p>The device is tilted. The event provides changes of the slopes on the X and Y axes, not the current angle of each axis.</p>\r
+<p class="figure">Figure: Tilt event</p> \r
+<p align="center"><img alt="Tilt event" src="../../images/tilt.png" /></p></li>\r
+<li>Turn face down\r
+<p>The device is turned over and the screen is facing downwards.</p>\r
+<p class="figure">Figure: Face-down event</p> \r
+<p align="center"><img alt="Face-down event" src="../../images/face_down.png" /></p></li>\r
+ <li>Wrist up\r
+<p>The event occurs when wrist-up gesture is performed (in case of a watch device).</p>\r
+<p class="figure">Figure: Wrist-up event</p>\r
+<p align="center"><img alt="Wrist-up event" src="../../images/wrist_up.png" /></p></li>\r
+  </ul>   \r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/context/history_n.htm b/org.tizen.guides/html/native/context/history_n.htm
index 90a1596..abb4866 100644 (file)
--- a/org.tizen.guides/html/native/context/history_n.htm
+++ b/org.tizen.guides/html/native/context/history_n.htm
@@ -50,7 +50,7 @@
    </tbody> 
   </table>
 
-<p>The Contextual History API provides history data about application usage, media playback, communications, and device settings. When an application reads each type of history data, the application can set filters to specify the necessary statistics. The following example shows how to get information about the 5 most frequently used applications from the last 30 days.</p>
+<p>The Contextual History API provides history data about application usage, media playback, communications, and device settings. When an application reads each type of history data, the application must set filters (mandatory and optional) to specify the necessary statistics. The following example shows how to get information about the 5 most frequently used applications from the last 30 days.</p>
 <pre class="prettyprint">
 // Setting filter key and values
 context_history_filter_set_int(filter, CONTEXT_HISTORY_FILTER_RESULT_SIZE, 5);
@@ -65,7 +65,7 @@ Once the <span style="font-family: Courier New, Courier, monospace">context_hist
 
 <h2 id="datatypes" name="datatypes">History Data Types</h2>
 
-<p>Through contextual history, you can mainly retrieve statistics for 3 categories of usages logs, including application usage, media playback, and communications. The following table summarizes the available history data types and required privileges.</p>
+<p>Through contextual history, you can mainly retrieve statistics for 3 types of usages logs, including application usage, media playback, and communications. The following table summarizes the available history data types and required privileges.</p>
 
 <table>
        <caption>Table: History data types and required privileges</caption>
@@ -154,7 +154,7 @@ Once the <span style="font-family: Courier New, Courier, monospace">context_hist
                        <th>Description</th>
                </tr>
                <tr>
-                       <td rowspan="2">
+                       <td rowspan="3">
                                All types
                        </td>
                        <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_TIME_SPAN</span></td>
@@ -174,12 +174,6 @@ Once the <span style="font-family: Courier New, Courier, monospace">context_hist
                        </td>
                </tr>
                <tr>
-                       <td>
-                               All types <em>EXCEPT</em>:
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span></p>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</span></p>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</span></p>
-                       </td>
                        <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_RESULT_SIZE</span></td>
                        <td>Integer</td>
                        <td>
@@ -207,27 +201,36 @@ Once the <span style="font-family: Courier New, Courier, monospace">context_hist
                        </td>
                </tr>
                <tr>
-                       <td>
+                       <td rowspan="2">
                                <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span></o>
+                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</span></p>
+                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</span></p>
                        </td>
                        <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_APP_ID</span></td>
                        <td>String</td>
                        <td>
-                               Use this filter to compute the peak time (or the common settings) for a specific application. Without this filter, the peak time (or the common setting) is computed from the usage history of all applications.
+                               Use the <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span> filter to compute the peak time for a specific application. Without this filter, the peak time is computed from the usage history of all applications.
+                               <p>In case of the peak time for music or video playbacks, these filters can be used to restrict the application that is used to play the media contents. Without this filter, playback logs from all applications are used to get the statistics.</p>
                                <p>For more information on the application IDs, see the <a href="../app/app_guide_n.htm">Application Framework</a> guide.</p>
                        </td>
                </tr>
                <tr>
-                       <td>
-                               <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</span></o>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</span></o>
-                       </td>
                        <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK</span></td>
                        <td>Integer</td>
                        <td>
-                               Use this filter to get usage patterns on weekdays or weekends. The filter value can be either <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS</span>, <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS</span>, or <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL</span>. By default, data from both weekdays and weekends are used if this filter is not set.
+                               Use this filter to get application usage patterns on weekdays or weekends. The filter value can be either <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS</span>, <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS</span>, or <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL</span>. By default, data from both weekdays and weekends are used if this filter is not set.
+                       </td>
+               </tr>
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span>
+                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</span></p>
+                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</span></p>
+                       </td>
+                       <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_APP_ID</span></td>
+                       <td>String</td>
+                       <td>
+                               Use this filter to retrieve the most common setting values for a specific application.
+                               <p>In case of music or video playback history, this filter can be used to get the common setting values when listening to music or watching videos using a specific application.</p>
                        </td>
                </tr>
                <tr>
diff --git a/org.tizen.guides/html/native/graphics/cairo_n.htm b/org.tizen.guides/html/native/graphics/cairo_n.htm
index 525d272..a49f437 100644 (file)
--- a/org.tizen.guides/html/native/graphics/cairo_n.htm
+++ b/org.tizen.guides/html/native/graphics/cairo_n.htm
@@ -1,179 +1,179 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Cairo</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#create">Creating an Evas_Object Image</a></li>
-                       <li><a href="#link">Linking Evas_Object Images to Cairo</a></li>
-                       <li><a href="#paint">Drawing with Cairo</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm">Cairo Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
- 
-  <h1>Cairo</h1>
-  
-<p><a href="http://cairographics.org" target="_blank">Cairo</a> is an open source library for 2D vector graphics with support for multiple output devices. In Tizen, Cairo can support output to 2 different backends, such as the image and evas-gl (similar to gl) backend. This guide explains how you can link the Cairo image backend with Evas (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">wearable</a> applications), so that Cairo can draw on the image surface and an Evas object can get the image data from the Cairo image buffer.</p> 
-
-
-<h2 id="create" name="create">Creating an Evas_Object Image</h2>
-
-<p>Cairo and Evas have completely different concepts:</p>
-<ul><li>Evas knows the state of each object on the screen and manipulates the state. So when you create, for example, a rectangle with the <span style="font-family: Courier New,Courier,monospace">evas_object_rectangle_add()</span> function, it is not rendered on the screen when the function is called. In the rendering stage, the rectangle can be overlaid by an opaque image and never be rendered on the canvas.</li>
-<li>Cairo draws as a person on a paper sheet. Once something is drawn on the Cairo surface, it is rendered on the screen.</li></ul>
-
-<p>First, as shown in the following code snippet, you can define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure, which contains all the pointers to the objects to be manipulated:</p>
- 
-<pre class="prettyprint">
-typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *img;
-&nbsp;&nbsp;&nbsp;cairo_surface_t *surface;
-&nbsp;&nbsp;&nbsp;cairo_t *cairo;
-&nbsp;&nbsp;&nbsp;unsigned char *pixels;
-} appdata_s;
-</pre>
-
-<p>To create a new <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> image, use the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function. The image object can be used for displaying as pixels on the screen:</p>
- 
-<pre class="prettyprint">
-appdata_s * ad;
-ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-evas_object_show(ad-&gt;win);
-ad-&gt;img = evas_object_image_add(evas_object_evas_get(ad-&gt;win));
-evas_object_show(ad-&gt;img);
-</pre>
-
-<h2 id="link" name="link">Linking Evas_Object Images to Cairo</h2>
-
-<p>You can now create a Cairo image surface for the provided pixel and other data by using the <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create_for_data()</span> function. The pixel data is a pointer to a buffer supplied by the application in which you want to write content.</p>
-<p>The size of the row stride is called by the <span style="font-family: Courier New,Courier,monospace">cairo_format_stride_for_width()</span> function. The function provides a stride value that respects all alignment requirements of the accelerated image-rendering code within Cairo.</p>
-
-<pre class="prettyprint">
-int row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);
-ad-&gt;pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
-ad-&gt;surface = cairo_image_surface_create_for_data(ad-&gt;pixels,CAIRO_FORMAT_ARGB32, WIDTH, HEIGHT, row_stride);
-</pre>
-
-<p>To create the Cairo context used for all operations, use the following code.</p>
-<pre class="prettyprint">
-cairo = cairo_create(ad-&gt;surface);
-</pre>
-
-<p>Associate the pixels (as raw data) to given image object. The pixels must be of the same size and colorspace as the image object.</p>
-<pre class="prettyprint">
-evas_object_image_data_set(ad-&gt;img, ad-&gt;pixels);
-</pre>
-
-<p>Once you finish painting by using Cairo, Evas renders a particular rectangular region to be redrawn on the screen:</p>
-<pre class="prettyprint">
-evas_object_image_data_update_add(ad-&gt;img, 0, 0, WIDTH, HEIGHT);
-</pre>
-
-<h2 id="paint" name="paint">Drawing with Cairo</h2>
-
-<p>Before drawing a line, set the current line width or color as a style. For example, you can set the line width as 2 and the line color as opaque red:</p>
-<pre class="prettyprint">
-cairo_set_line_width(ad-&gt;cairo, 2);
-cairo_set_source_rgba(ad-&gt;cairo, 1.0, 0.0, 0.0, 1.0);</pre>
-
-<p>You can draw various lines:</p>
-<ul> 
-<li><p>To set the start position with a user-specific offset, use the <span style="font-family: Courier New,Courier,monospace">cairo_translate()</span> function. It modifies the current transformation matrix (CTM) by translating the user-space origin by (x, y).</p>
-<pre class="prettyprint">
-cairo_translate(ad-&gt;cairo, 40, 40);</pre></li>
-
-<li><p>Cairo uses a connect-the-dots style system when creating a path. To draw a line between 2 points (100,100 and 200,150) on the surface, use the <span style="font-family: Courier New,Courier,monospace">cairo_move_to()</span> and <span style="font-family: Courier New,Courier,monospace">cairo_line_to()</span> functions:</p>
-<pre class="prettyprint">
-cairo_move_to(ad-&gt;cairo, 100, 100);
-cairo_line_to(ad-&gt;cairo, 200, 150);</pre></li>
-
-<li><p>To draw a line from the endpoint of the current path, use the <span style="font-family: Courier New,Courier,monospace">cairo_rel_line_to()</span> function. The offset by (dx, dy) must be specified as (100, -50).</p>
-<pre class="prettyprint">
-cairo_rel_line_to(ad-&gt;cairo, 100, -50);</pre></li>
-
-<li><p>To draw a circular arc of the given radius (100 * sqrt(2)) to the current path, use the <span style="font-family: Courier New,Courier,monospace">cairo_arc()</span> function.</p>
-<p>The arc is centered at (200, 200), begins at angle1 (-0.25 * M_PI) and proceeds in the direction of increasing angles to end at angle2 (0.25 * M_PI). If angle2 is less than angle1, it is progressively increased by 2*M_PI until it is greater than angle1.</p>
-<pre class="prettyprint">
-cairo_arc(ad-&gt;cairo, 200, 200, 100 * sqrt(2), -0.25 * M_PI, 0.25 * M_PI);</pre></li>
-
-<li><p>To draw a cubic Bézier spline to the path from the end position of the previous path, use the <span style="font-family: Courier New,Courier,monospace">cairo_rel_curve_to()</span> function. You can use the points offset by (-100, -50) and (-100, 50) as the control points. After the call, the current point is offset by (-200, 0).</p>
-<pre class="prettyprint">
-cairo_rel_curve_to(ad-&gt;cairo, -100, -50, -100, 50, -200, 0);</pre></li>
-
-<li><p>You can add a line segment to the path from the current point to the beginning of the current sub-path. After this call, the current point is at the joined endpoint of the sub-path. The <span style="font-family: Courier New,Courier,monospace">cairo_close_path()</span> function differs from simply calling the <span style="font-family: Courier New,Courier,monospace">cairo_line_to()</span> function with the equivalent coordinate in the case of stroking: there is a line join connecting the final and initial segments of the sub-path.</p>
-<pre class="prettyprint">
-cairo_close_path(ad-&gt;cairo);</pre></li>
-
-<li><p>To create a rectangle, use the <span style="font-family: Courier New,Courier,monospace">cairo_rectangle()</span> function. This call draws a rectangle with 400 px in width and height from point (0, 0).</p>
-<pre class="prettyprint">
-cairo_rectangle(ad-&gt;cairo, 0, 0, 400, 400);</pre></li>
-
-<li><p>To stroke the paths, use the <span style="font-family: Courier New,Courier,monospace">cairo_stroke()</span> function. It is a drawing operator that strokes the current path according to the current line width, line join, line cap, and dash settings. After the function call, the current path is cleared from the cairo context.</p>
-<pre class="prettyprint">
-cairo_stroke(ad-&gt;cairo);</pre></li>
-
-<li><p>To ensure that any pending Cairo operation are drawn, use the <span style="font-family: Courier New,Courier,monospace">cairo_surface_flush()</span> function after finishing the Cairo drawing:</p>
-
-<pre class="prettyprint">
-cairo_surface_flush(ad-&gt;surface);</pre></li></ul>
-
-<p>You need to destroy Cairo objects before terminating your application:</p> 
-<pre class="prettyprint">
-cairo_destroy(ad-&gt;cairo);
-cairo_surface_destroy(ad-&gt;surface);</pre>
-
-  <p class="figure">Figure: Drawing paths and a rectangle with Cairo</p> 
-  <p align="center"><img alt="Drawing paths and a rectangle with Cairo" src="../../images/cairo.png" /></p>
-
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Cairo</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+            <li><a href="#create">Creating an Evas_Object Image</a></li>\r
+                       <li><a href="#link">Linking Evas_Object Images to Cairo</a></li>\r
+                       <li><a href="#paint">Drawing with Cairo</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm">Cairo Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ \r
+  <h1>Cairo</h1>\r
+  \r
+<p><a href="http://cairographics.org" target="_blank">Cairo</a> is an open source library for 2D vector graphics with support for multiple output devices. In Tizen, Cairo can support output to 2 different backends, such as the image and evas-gl (similar to gl) backend. This guide explains how you can link the Cairo image backend with Evas (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">wearable</a> applications), so that Cairo can draw on the image surface and an Evas object can get the image data from the Cairo image buffer.</p> \r
+\r
+\r
+<h2 id="create" name="create">Creating an Evas_Object Image</h2>\r
+\r
+<p>Cairo and Evas have completely different concepts:</p>\r
+<ul><li>Evas knows the state of each object on the screen and manipulates the state. So when you create, for example, a rectangle with the <span style="font-family: Courier New,Courier,monospace">evas_object_rectangle_add()</span> function, it is not rendered on the screen when the function is called. In the rendering stage, the rectangle can be overlaid by an opaque image and never be rendered on the canvas.</li>\r
+<li>Cairo draws as a person on a paper sheet. Once something is drawn on the Cairo surface, it is rendered on the screen.</li></ul>\r
+\r
+<p>First, as shown in the following code snippet, you can define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure, which contains all the pointers to the objects to be manipulated:</p>\r
+ \r
+<pre class="prettyprint">\r
+typedef struct appdata \r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img;\r
+&nbsp;&nbsp;&nbsp;cairo_surface_t *surface;\r
+&nbsp;&nbsp;&nbsp;cairo_t *cairo;\r
+&nbsp;&nbsp;&nbsp;unsigned char *pixels;\r
+} appdata_s;\r
+</pre>\r
+\r
+<p>To create a new <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> image, use the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function. The image object can be used for displaying as pixels on the screen:</p>\r
+ \r
+<pre class="prettyprint">\r
+appdata_s * ad;\r
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);\r
+evas_object_show(ad-&gt;win);\r
+ad-&gt;img = evas_object_image_add(evas_object_evas_get(ad-&gt;win));\r
+evas_object_show(ad-&gt;img);\r
+</pre>\r
+\r
+<h2 id="link" name="link">Linking Evas_Object Images to Cairo</h2>\r
+\r
+<p>You can now create a Cairo image surface for the provided pixel and other data by using the <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create_for_data()</span> function. The pixel data is a pointer to a buffer supplied by the application in which you want to write content.</p>\r
+<p>The size of the row stride is called by the <span style="font-family: Courier New,Courier,monospace">cairo_format_stride_for_width()</span> function. The function provides a stride value that respects all alignment requirements of the accelerated image-rendering code within Cairo.</p>\r
+\r
+<pre class="prettyprint">\r
+int row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);\r
+ad-&gt;pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);\r
+ad-&gt;surface = cairo_image_surface_create_for_data(ad-&gt;pixels,CAIRO_FORMAT_ARGB32, WIDTH, HEIGHT, row_stride);\r
+</pre>\r
+\r
+<p>To create the Cairo context used for all operations, use the following code.</p>\r
+<pre class="prettyprint">\r
+cairo = cairo_create(ad-&gt;surface);\r
+</pre>\r
+\r
+<p>Associate the pixels (as raw data) to given image object. The pixels must be of the same size and colorspace as the image object.</p>\r
+<pre class="prettyprint">\r
+evas_object_image_data_set(ad-&gt;img, ad-&gt;pixels);\r
+</pre>\r
+\r
+<p>Once you finish painting by using Cairo, Evas renders a particular rectangular region to be redrawn on the screen:</p>\r
+<pre class="prettyprint">\r
+evas_object_image_data_update_add(ad-&gt;img, 0, 0, WIDTH, HEIGHT);\r
+</pre>\r
+\r
+<h2 id="paint" name="paint">Drawing with Cairo</h2>\r
+\r
+<p>Before drawing a line, set the current line width or color as a style. For example, you can set the line width as 2 and the line color as opaque red:</p>\r
+<pre class="prettyprint">\r
+cairo_set_line_width(ad-&gt;cairo, 2);\r
+cairo_set_source_rgba(ad-&gt;cairo, 1.0, 0.0, 0.0, 1.0);</pre>\r
+\r
+<p>You can draw various lines:</p>\r
+<ul> \r
+<li><p>To set the start position with a user-specific offset, use the <span style="font-family: Courier New,Courier,monospace">cairo_translate()</span> function. It modifies the current transformation matrix (CTM) by translating the user-space origin by (x, y).</p>\r
+<pre class="prettyprint">\r
+cairo_translate(ad-&gt;cairo, 40, 40);</pre></li>\r
+\r
+<li><p>Cairo uses a connect-the-dots style system when creating a path. To draw a line between 2 points (100,100 and 200,150) on the surface, use the <span style="font-family: Courier New,Courier,monospace">cairo_move_to()</span> and <span style="font-family: Courier New,Courier,monospace">cairo_line_to()</span> functions:</p>\r
+<pre class="prettyprint">\r
+cairo_move_to(ad-&gt;cairo, 100, 100);\r
+cairo_line_to(ad-&gt;cairo, 200, 150);</pre></li>\r
+\r
+<li><p>To draw a line from the endpoint of the current path, use the <span style="font-family: Courier New,Courier,monospace">cairo_rel_line_to()</span> function. The offset by (dx, dy) must be specified as (100, -50).</p>\r
+<pre class="prettyprint">\r
+cairo_rel_line_to(ad-&gt;cairo, 100, -50);</pre></li>\r
+\r
+<li><p>To draw a circular arc of the given radius (100 * sqrt(2)) to the current path, use the <span style="font-family: Courier New,Courier,monospace">cairo_arc()</span> function.</p>\r
+<p>The arc is centered at (200, 200), begins at angle1 (-0.25 * M_PI) and proceeds in the direction of increasing angles to end at angle2 (0.25 * M_PI). If angle2 is less than angle1, it is progressively increased by 2*M_PI until it is greater than angle1.</p>\r
+<pre class="prettyprint">\r
+cairo_arc(ad-&gt;cairo, 200, 200, 100 * sqrt(2), -0.25 * M_PI, 0.25 * M_PI);</pre></li>\r
+\r
+<li><p>To draw a cubic Bézier spline to the path from the end position of the previous path, use the <span style="font-family: Courier New,Courier,monospace">cairo_rel_curve_to()</span> function. You can use the points offset by (-100, -50) and (-100, 50) as the control points. After the call, the current point is offset by (-200, 0).</p>\r
+<pre class="prettyprint">\r
+cairo_rel_curve_to(ad-&gt;cairo, -100, -50, -100, 50, -200, 0);</pre></li>\r
+\r
+<li><p>You can add a line segment to the path from the current point to the beginning of the current sub-path. After this call, the current point is at the joined endpoint of the sub-path. The <span style="font-family: Courier New,Courier,monospace">cairo_close_path()</span> function differs from simply calling the <span style="font-family: Courier New,Courier,monospace">cairo_line_to()</span> function with the equivalent coordinate in the case of stroking: there is a line join connecting the final and initial segments of the sub-path.</p>\r
+<pre class="prettyprint">\r
+cairo_close_path(ad-&gt;cairo);</pre></li>\r
+\r
+<li><p>To create a rectangle, use the <span style="font-family: Courier New,Courier,monospace">cairo_rectangle()</span> function. This call draws a rectangle with 400 px in width and height from point (0, 0).</p>\r
+<pre class="prettyprint">\r
+cairo_rectangle(ad-&gt;cairo, 0, 0, 400, 400);</pre></li>\r
+\r
+<li><p>To stroke the paths, use the <span style="font-family: Courier New,Courier,monospace">cairo_stroke()</span> function. It is a drawing operator that strokes the current path according to the current line width, line join, line cap, and dash settings. After the function call, the current path is cleared from the cairo context.</p>\r
+<pre class="prettyprint">\r
+cairo_stroke(ad-&gt;cairo);</pre></li>\r
+\r
+<li><p>To ensure that any pending Cairo operation are drawn, use the <span style="font-family: Courier New,Courier,monospace">cairo_surface_flush()</span> function after finishing the Cairo drawing:</p>\r
+\r
+<pre class="prettyprint">\r
+cairo_surface_flush(ad-&gt;surface);</pre></li></ul>\r
+\r
+<p>You need to destroy Cairo objects before terminating your application:</p> \r
+<pre class="prettyprint">\r
+cairo_destroy(ad-&gt;cairo);\r
+cairo_surface_destroy(ad-&gt;surface);</pre>\r
+\r
+  <p class="figure">Figure: Drawing paths and a rectangle with Cairo</p> \r
+  <p align="center"><img alt="Drawing paths and a rectangle with Cairo" src="../../images/cairo.png" /></p>\r
+\r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer"> \r
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> \r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/graphics/graphics_guide_n.htm b/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
index 0dcb928..d84feb9 100644 (file)
--- a/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
+++ b/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
@@ -1,67 +1,67 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Graphics</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Graphics</h1>
-    <p>Graphics features include using OpenGL ES in various ways, and handling vector graphics and graphic buffers.</p>
-  <p>The main graphics features are:</p>
-  <ul>
-   <li><a href="opengles_n.htm">OpenGL ES</a> <p>Enables you to create OpenGL ES applications in Tizen with the EGL layer.</p></li>
-   <li><a href="tbm_n.htm">TBM Surface</a> <p>Provides Tizen Buffer Manager (TBM) surface functions for the graphic buffer in Tizen.</p></li>
-   <li><a href="cairo_n.htm">Cairo</a> <p>Allows you to use Cairo to draw on the image surface and Evas objects to get the image data.</p></li>
-   
-  </ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Graphics</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Graphics</h1>\r
+    <p>Graphics features include using OpenGL ES in various ways, and handling vector graphics and graphic buffers.</p>\r
+  <p>The main graphics features are:</p>\r
+  <ul>\r
+   <li><a href="opengles_n.htm">OpenGL ES</a> <p>Enables you to create OpenGL ES applications in Tizen with the EGL layer.</p></li>\r
+   <li><a href="tbm_n.htm">TBM Surface</a> <p>Provides Tizen Buffer Manager (TBM) surface functions for the graphic buffer in Tizen.</p></li>\r
+   <li><a href="cairo_n.htm">Cairo</a> <p>Allows you to use Cairo to draw on the image surface and Evas objects to get the image data.</p></li>\r
+   \r
+  </ul>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/graphics/opengles_n.htm b/org.tizen.guides/html/native/graphics/opengles_n.htm
index 466ce70..60060f7 100644 (file)
--- a/org.tizen.guides/html/native/graphics/opengles_n.htm
+++ b/org.tizen.guides/html/native/graphics/opengles_n.htm
@@ -1,450 +1,450 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>OpenGL ES</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#tizen">OpenGL ES in Tizen</a></li>
-            <li><a href="#glview">GLView Programming Guide</a></li>
-                       <li><a href="#evasgl">EvasGL Programming Guide</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm">OpenGL ES Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>OpenGL ES</h1>  
- 
-<p>The OpenGL ES overview shows the interaction among Graphics subsystems, OpenGL ES, and EGL defined by the <a href="http://www.khronos.org" target="_blank">Khronos Group</a>.</p>
-
-<p>OpenGL ES is a standard specification defining a cross-language, cross-platform OpenGL ES API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">wearable</a> applications) for writing applications that produce 2D and 3D computer graphics. OpenGL ES 1.1 and 2.0 are supported in Tizen 2.3. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>
-
-<p>EGL is an adhesive layer between OpenGL ES and the underlying native platform window system. EGL communicates with the Window system to get information on the application window, creates the drawing surface, and manages rendering context and resources.</p>
-
-  <p class="figure">Figure: OpenGL ES structure</p> 
-  <p align="center"><img alt="OpenGL&reg; ES structure" src="../../images/opengl1.png" /></p>   
-
-<h2 id="tizen" name="tizen">OpenGL ES in Tizen</h2>
-
-<p>Building an OpenGL ES application in Tizen requires knowledge about <a href="../../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">designing UI applications with EFL</a>.</p>
-
-<p>Tizen native applications do not depend on the Window system, because the Window system is an internal Tizen module, which can be enhanced or replaced. EFL provides a method that draws the OpenGL ES content and encapsulates the EGL and the native Window system.</p>
-
-  <p class="figure">Figure: OpenGL ES and EFL</p> 
-  <p align="center"><img alt="OpenGL&reg; ES and EFL" src="../../images/opengl2.png" /></p>   
-
-<p>A GLView creates a drawable GL surface for the application, and sets up all the required callbacks. The application can use GLView with various UI components, such as toolbar or button.</p>
-
-<p>GLView internally uses EvasGL. It is an abstraction layer on top of EGL, which provides the necessary features for most applications in a platform-independent way. Since the goal of EvasGL is to abstract the underlying platform, only a subset of the features can be used by applications.</p>
-
-<p>Using GLView is recommended for usual OpenGL ES programs, such as 3D game applications. But if you need pbuffer surface or extension functions, you have to understand EvasGL.</p>
-
-<h3>EvasGL vs. GLView</h3>
-
-<p>While it is possible to create an OpenGL application by just using EvasGL, it could be difficult to comprehend due to the low-level nature of these APIs. However, it enables detailed operations.</p>
-
-<h2 id="glview" name="glview">GLView Programming Guide</h2>
-
-<h3>Setting up an OpenGL ES Surface</h3>
-
-<p>The easiest way to use OpenGL ES within a Tizen application is to rely on the GLView component.</p>
-
-<p>GLView is a simple Elementary UI component that sets up an OpenGL ES target surface and a context, and allows you to embed it in any Tizen application. GLView is basically a wrapper around EvasGL, the OpenGL-ES/EGL abstraction layer of EFL.</p>
-
-<p>To create a basic application:</p>
-
-<p>To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set</span> before creating a window. It makes an application to use GPU. To use the Direct Rendering mode, you have to set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function  and to a GLView object using the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function. If the GLView object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled.</p>
-
-<p>First, you should declare the global variable using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>, then create a GLView object and use <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE(glview)</span>. Now, you can call GL functions.</p>
-
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;Elementary_GL_Helpers.h&gt;
-
-ELEMENTARY_GLVIEW_GLOBAL_DEFINE()
-
-typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *glview;
-&nbsp;&nbsp;&nbsp;unsigned int program;
-&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
-&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
-&nbsp;&nbsp;&nbsp;unsigned int vbo;
-} appdata_s;
-
-static Evas_Object *glview_create(Evas_Object *win);
-static void glview_start(Evas_Object *glview);
-
-// GLView callback functions
-static void draw_gl(Evas_Object *obj);
-static void init_gl(Evas_Object *obj);
-static void resize_gl(Evas_Object *obj);
-static void del_gl(Evas_Object *obj);
-
-static bool app_create(void *data) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;gl&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;GLView example&quot;, &quot;GLView example&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;ad-&gt;glview = ad-&gt;glview_create(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);
-&nbsp;&nbsp;&nbsp;glview_start(ad-&gt;glview);
-
-&nbsp;&nbsp;&nbsp;return true;
-}</pre>
-
-<p>Add the OpenGL ES view to the application:</p>
-
-<pre class="prettyprint">
-// This is the GL initialization function
-static Evas_Object *glview_create(Evas_Object *win)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *glview;
-
-&nbsp;&nbsp;&nbsp;// This creates the UI component itself
-&nbsp;&nbsp;&nbsp;glview = elm_glview_add(win);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, glview);
-
-&nbsp;&nbsp;&nbsp;// Request a surface with Depth and Stencil support (default buffer sizes)
-&nbsp;&nbsp;&nbsp;elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH | ELM_GLVIEW_STENCIL);
-
-&nbsp;&nbsp;&nbsp;// Set the basic policies to handle the view transparently
-&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
-&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
-
-&nbsp;&nbsp;&nbsp;// Set the 4 main callbacks
-&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(glview, init_gl);
-&nbsp;&nbsp;&nbsp;elm_glview_del_func_set(glview, del_gl);
-&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(glview, draw_gl);
-&nbsp;&nbsp;&nbsp;elm_glview_resize_func_set(glview, resize_gl);
-
-&nbsp;&nbsp;&nbsp;// Finally show this view
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(glview, 250, 250);
-&nbsp;&nbsp;&nbsp;evas_object_show(glview);
-
-&nbsp;&nbsp;&nbsp;return glview;
-}</pre>
-
-<h3>Setting up the Callbacks</h3>
-
-<p>To set up callbacks:</p>
-
-<ol>
-       <li>Callback for initialization
-       <p>The initialization callback will be called when the GLView is created, after a valid openGL ES context and surface are created. Initialization, resizing, drawing, and deleting callback are called in the main loop.</p>
-
-       <pre class="prettyprint">
-// GL Init function
-static void init_gl(Evas_Object *glview)
-{
-&nbsp;&nbsp;&nbsp;glClearColor(0, 0, 0, 0);
-&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);
-
-&nbsp;&nbsp;&nbsp;// Do any form of OpenGL ES initialization here
-&nbsp;&nbsp;&nbsp;// init_shaders();
-&nbsp;&nbsp;&nbsp;// init_vertices();
-}</pre>
-       </li>
-       <li>Callback for resizing
-       <p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport.</p>
-
-       <pre class="prettyprint">
-// GLView resize function
-static void resize_gl(Evas_Object *glview)
-{
-&nbsp;&nbsp;&nbsp;int w, h;
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(glview, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
-}</pre>
-       </li>
-       <li>Callback for drawing
-       <p>The drawing callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy.</p>
-
-       <pre class="prettyprint">
-elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
-
-       <p>Another policy is ELM_GLVIEW_POLICY_ALWAYS, which requests render always even when it is not visible. So on demand policy is probably what you are looking for. The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created.</p>
-
-       <pre class="prettyprint">
-// GL draw callback
-static void draw_gl(Evas_Object *glview)
-{
-&nbsp;&nbsp;&nbsp;// Paint it blue
-&nbsp;&nbsp;&nbsp;glClearColor(0.2, 0.2, 0.6, 1.0);
-&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);
-
-&nbsp;&nbsp;&nbsp;// The usual OpenGL ES draw commands come here
-&nbsp;&nbsp;&nbsp;// draw_scene();
-}</pre>
-       </li>
-       <li>Callback for deleting
-       <p>The delete callback is triggered when the GLView is being destroyed, from the main loop, and no other callback can be called on the same object afterwards.</p>
-
-       <pre class="prettyprint">
-// Delete GLView callback
-static void del_gl(Evas_Object *glview)
-{
-&nbsp;&nbsp;&nbsp;// Destroy all the OpenGL ES resources here
-&nbsp;&nbsp;&nbsp;// destroy_shaders();
-&nbsp;&nbsp;&nbsp;// destroy_objects();
-}</pre>
-       </li>
-       <li>Add an animator.
-       <p>The application above is technically working but the scene does not get updated unless the frame is marked as dirty. Game applications might need to use an animator to obtain continuous update of the scenes. Here is an example for a default update refresh rate:</p>
-
-       <pre class="prettyprint">
-static Eina_Bool anim_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *glview = data;
-&nbsp;&nbsp;&nbsp;elm_glview_changed_set(glview);
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-
-static void glview_start(Evas_Object *glview)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_add(anim_cb, glview);
-}</pre>
-
-       <p>Any other event can be used to refresh the view, for example user input if the view need to be updated.</p>
-       </li>
-</ol>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Since the Evas rendering engine uses its own GL context internally, the application has to call the gl functions inside the 4 GLView callback functions (initialization, resizing, drawing, deleting) to be guaranteed rendering correctness.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-
-<p>While GLView is an abstraction above EvasGL, it is possible to use EvasGL directly for more low-level and advanced features, such as:</p>
-
-<ul>
-       <li>Creating new contexts</li>
-       <li>Creating new surfaces</li>
-       <li>Creating PBuffer surfaces</li>
-       <li>Calling extensions</li>
-</ul>
-
-<p>For all those reasons, a direct access to the EvasGL object is required. When you use GLView, you can use the following code:</p>
-
-<pre class="prettyprint">
-Evas_GL *evgl = elm_glview_evas_gl_get(glview);
-// Then it is possible to call any evas_gl function with it, for example:
-Evas_GL_Context *ctx = evas_gl_current_context_get(evgl);
-Evas_GL_Surface *pbuf = evas_gl_pbuffer_surface_create(evgl, cfg, w, h, NULL);</pre>
-
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Do not destroy the EvasGL object. Its life-cycle is defined by the GLView object.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2 id="evasgl" name="evasgl">EvasGL Programming Guide</h2>
-
-<p>This guide assumes that the application uses EvasGL directly instead of using the GLView. (If the application uses a GLView, EvasGL is created internally.)</p>
-
-<h3>Declaration of EvasGL Objects</h3>
-
-<p>This is how to define the application data structure to hold all the objects for your EvasGL application:</p>
-
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *img</span>: OpenGL ES canvas.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL *evasgl</span>: EvasGL Object for rendering gl in Evas.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_API *glapi</span>: EvasGL API object that contains the GL APIs to be used in Evas GL.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Context *ctx</span>: EvasGL Context object, a GL rendering context in Evas GL.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface *sfc</span>: EvasGL Surface object, a GL rendering target in Evas GL.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Config *cfg</span>: EvasGL Surface configuration object for surface creation.</li>
-</ul>
-
-<pre class="prettyprint">
-typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *img;
-
-&nbsp;&nbsp;&nbsp;Evas_GL *evasgl;
-&nbsp;&nbsp;&nbsp;Evas_GL_API *glapi;
-&nbsp;&nbsp;&nbsp;Evas_GL_Context *ctx;
-&nbsp;&nbsp;&nbsp;Evas_GL_Surface *sfc;
-&nbsp;&nbsp;&nbsp;Evas_GL_Config *cfg;
-
-&nbsp;&nbsp;&nbsp;unsigned int program;
-&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
-&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
-&nbsp;&nbsp;&nbsp;unsigned int vbo;
-} appdata_s;</pre>
-
-<h3>Creating EvasGL</h3>
-
-<p>We can create our EvasGL handler using <span style="font-family: Courier New,Courier,monospace">evas_gl_new(Evas * e)</span>. This initializer takes the Evas canvas that OpenGL ES is to be used on as a parameter. When developing an application with Elementary, we can use the canvas of our window:</p>
-
-<pre class="prettyprint">
-ad-&gt;win = elm_win_util_standard_add(&quot;Evas_GL Example&quot;, &quot;Evas_GL Example&quot;);
-ad-&gt;evasgl = evas_gl_new(evas_object_evas_get(ad-&gt;win));</pre>
-
-<p>To free the memory allocated to this handler, use <span style="font-family: Courier New,Courier,monospace">evas_gl_free(Evas_GL *evas_gl)</span>.</p>
-
-<h3>Getting OpenGL ES APIs</h3>
-
-<p>You can get the API for rendering OpenGL ES with <span style="font-family: Courier New,Courier,monospace">evas_gl_api_get(Evas_GL *evas_gl_)</span>. This function returns a structure that contains all the OpenGL ES functions you can use to render in Evas. These functions consist of all the standard OpenGL ES2.0 functions and any extra ones Evas has decided to provide in addition. If you have your code ported to OpenGL ES 2.0, it is easy to render to Evas. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>
-
-<pre class="prettyprint">
-ad-&gt;glapi = evas_gl_api_get(ad-&gt;evasgl);</pre>
-
-<h3>Creating a Surface</h3>
-
-<p>We must allocate a new config object to fill it out using <span style="font-family: Courier New,Courier,monospace">evas_gl_config_new()</span>. As long as Evas creates a config object for the user, it takes care of the backward compatibility issue. Once we have our config object, we can specify the surface settings:</p>
-
-<pre class="prettyprint">
-appdata_s *ad;
-ad-&gt;cfg = evas_gl_config_new();
-ad-&gt;cfg-&gt;color_format = EVAS_GL_RGBA_8888; // Surface Color Format
-ad-&gt;cfg-&gt;depth_bits = EVAS_GL_DEPTH_BIT_24; // Surface Depth Format
-ad-&gt;cfg-&gt;stencil_bits = EVAS_GL_STENCIL_NONE; // Surface Stencil Format
-ad-&gt;cfg-&gt;options_bits = EVAS_GL_OPTIONS_NONE; // Configuration options (here, no extra options)</pre>
-
-<p>Once we have configured the surface behavior, we must initialize the surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_create(Evas_GL* evas_gl, Evas_GL_Config * cfg, int w, int h)</span>. This function takes the given Evas_GL object as the first parameter and the pixel format, and configuration of the rendering surface as the second parameter. The last two parameters are the width and height of the surface, which we recover directly from the window.</p>
-
-<pre class="prettyprint">
-Evas_Coord w, h;
-evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;w, &amp;h);
-ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, w, h);</pre>
-
-<p>To manually delete a GL surface, use <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_destroy(Evas_GL *evas_gl, Evas_GL_Surface *surf)</span>.</p>
-
-<h3>Creating Context</h3>
-
-<p>Here, we create a context for Evas_GL using <span style="font-family: Courier New,Courier,monospace">evas_gl_context_create(Evas_GL * evas_gl, Evas_GL_Context * share_ctx)</span>. You can merge the context with a higher context definition you must pass as a second parameter.</p>
-
-<pre class="prettyprint">
-ad-&gt;ctx = evas_gl_context_create(ad-&gt;evasgl, NULL);</pre>
-
-<p>To delete the context later, use <span style="font-family: Courier New,Courier,monospace">evas_gl_context_destroy(Evas_GL *evas_gl, Evas_GL_Context *ctx)</span>. To delete the entire configuration object, use <span style="font-family: Courier New,Courier,monospace">evas_gl_config_free(Evas_GL_Config *cfg)</span> instead.</p>
-
-<h3>Callbacks</h3>
-
-<p>Now that we have configured the EvasGL environment, we declare a UI component in which all the OpenGL ES transformation takes place. In the example below, we selected the image component because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.</p>
-
-<pre class="prettyprint">
-ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));</pre>
-
-<p>We define the &quot;OpenGL ES main loop&quot; function that is called every time the program attempts to have pixels from the image. We put all the OpenGL ES statements in charge of rendering the scene in this callback.</p>
-
-<pre class="prettyprint">
-evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixels_get_cb, ad);</pre>
-
-<p>To define a function that takes care of the drawing using EvasGL (called the OpenGL ES main loop), use:</p>
-
-<pre class="prettyprint">
-static void
-img_pixels_get_cb(void *data, Evas_Object *obj)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Evas_GL_API *gl = ad-&gt;glapi;
-
-&nbsp;&nbsp;&nbsp;// Rendering process
-&nbsp;&nbsp;&nbsp;evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);
-&nbsp;&nbsp;&nbsp;// Paint it blue
-&nbsp;&nbsp;&nbsp;gl-&gt;glClearColor(0.2, 0.2, 0.6, 1.0);
-&nbsp;&nbsp;&nbsp;gl-&gt;glClear(GL_COLOR_BUFFER_BIT);
-&nbsp;&nbsp;&nbsp;// The usual OpenGL ES draw commands come here
-&nbsp;&nbsp;&nbsp;// draw_scene();
-}</pre>
-
-<p>At every tick, we must set the given context as a current context for the given surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_make_current(Evas_GL *evas_gl, Evas_GL_Surface *surf, Evas_GL_Context *ctx)</span>.</p>
-
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> to define the OpenGL ES main loop. To do so, create a callback that is called on every animation tick. This animation callback is used only to mark the image as &quot;dirty&quot;, meaning that it needs an update next time Evas renders. It calls the pixel get callback that redraws the scene.</p>
-
-<pre class="prettyprint">
-static Eina_Bool
-animate_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *img = data;
-&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(img, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-
-ecore_animator_add(animate_cb, ad-&gt;img);</pre>
-
-<p>You can define several other callbacks that have an impact on the drawing depending on the mouse, resize, and deletion events.</p>
-
-<pre class="prettyprint">
-evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_DEL, img_del_cb, ad);
-evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
-evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
-evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
-evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);</pre>
-
-<h3>Setting a Surface into the Image Object</h3>
-
-<p>We can also fill in the native Surface information from the given EvasGL surface. For example, to adapt the surface to the target image when the size of the canvas changes, use the following code.</p>
-
-<pre class="prettyprint">
-Evas_Native_Surface ns;
-evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
-evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);</pre>
-
-         
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>OpenGL ES</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+            <li><a href="#tizen">OpenGL ES in Tizen</a></li>\r
+            <li><a href="#glview">GLView Programming Guide</a></li>\r
+                       <li><a href="#evasgl">EvasGL Programming Guide</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm">OpenGL ES Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>OpenGL ES</h1>  \r
+ \r
+<p>The OpenGL ES overview shows the interaction among Graphics subsystems, OpenGL ES, and EGL defined by the <a href="http://www.khronos.org" target="_blank">Khronos Group</a>.</p>\r
+\r
+<p>OpenGL ES is a standard specification defining a cross-language, cross-platform OpenGL ES API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">wearable</a> applications) for writing applications that produce 2D and 3D computer graphics. OpenGL ES 1.1 and 2.0 are supported in Tizen 2.3. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>\r
+\r
+<p>EGL is an adhesive layer between OpenGL ES and the underlying native platform window system. EGL communicates with the Window system to get information on the application window, creates the drawing surface, and manages rendering context and resources.</p>\r
+\r
+  <p class="figure">Figure: OpenGL ES structure</p> \r
+  <p align="center"><img alt="OpenGL&reg; ES structure" src="../../images/opengl1.png" /></p>   \r
+\r
+<h2 id="tizen" name="tizen">OpenGL ES in Tizen</h2>\r
+\r
+<p>Building an OpenGL ES application in Tizen requires knowledge about <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">designing UI applications with EFL</a>.</p>\r
+\r
+<p>Tizen native applications do not depend on the Window system, because the Window system is an internal Tizen module, which can be enhanced or replaced. EFL provides a method that draws the OpenGL ES content and encapsulates the EGL and the native Window system.</p>\r
+\r
+  <p class="figure">Figure: OpenGL ES and EFL</p> \r
+  <p align="center"><img alt="OpenGL&reg; ES and EFL" src="../../images/opengl2.png" /></p>   \r
+\r
+<p>A GLView creates a drawable GL surface for the application, and sets up all the required callbacks. The application can use GLView with various UI components, such as toolbar or button.</p>\r
+\r
+<p>GLView internally uses EvasGL. It is an abstraction layer on top of EGL, which provides the necessary features for most applications in a platform-independent way. Since the goal of EvasGL is to abstract the underlying platform, only a subset of the features can be used by applications.</p>\r
+\r
+<p>Using GLView is recommended for usual OpenGL ES programs, such as 3D game applications. But if you need pbuffer surface or extension functions, you have to understand EvasGL.</p>\r
+\r
+<h3>EvasGL vs. GLView</h3>\r
+\r
+<p>While it is possible to create an OpenGL application by just using EvasGL, it could be difficult to comprehend due to the low-level nature of these APIs. However, it enables detailed operations.</p>\r
+\r
+<h2 id="glview" name="glview">GLView Programming Guide</h2>\r
+\r
+<h3>Setting up an OpenGL ES Surface</h3>\r
+\r
+<p>The easiest way to use OpenGL ES within a Tizen application is to rely on the GLView component.</p>\r
+\r
+<p>GLView is a simple Elementary UI component that sets up an OpenGL ES target surface and a context, and allows you to embed it in any Tizen application. GLView is basically a wrapper around EvasGL, the OpenGL-ES/EGL abstraction layer of EFL.</p>\r
+\r
+<p>To create a basic application:</p>\r
+\r
+<p>To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set</span> before creating a window. It makes an application to use GPU. To use the Direct Rendering mode, you have to set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function  and to a GLView object using the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function. If the GLView object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled.</p>\r
+\r
+<p>First, you should declare the global variable using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>, then create a GLView object and use <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE(glview)</span>. Now, you can call GL functions.</p>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;app.h&gt;\r
+#include &lt;Elementary_GL_Helpers.h&gt;\r
+\r
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE()\r
+\r
+typedef struct appdata \r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *glview;\r
+&nbsp;&nbsp;&nbsp;unsigned int program;\r
+&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;\r
+&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;\r
+&nbsp;&nbsp;&nbsp;unsigned int vbo;\r
+} appdata_s;\r
+\r
+static Evas_Object *glview_create(Evas_Object *win);\r
+static void glview_start(Evas_Object *glview);\r
+\r
+// GLView callback functions\r
+static void draw_gl(Evas_Object *obj);\r
+static void init_gl(Evas_Object *obj);\r
+static void resize_gl(Evas_Object *obj);\r
+static void del_gl(Evas_Object *obj);\r
+\r
+static bool app_create(void *data) \r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;gl&quot;);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;GLView example&quot;, &quot;GLView example&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;glview = ad-&gt;glview_create(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);\r
+&nbsp;&nbsp;&nbsp;glview_start(ad-&gt;glview);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}</pre>\r
+\r
+<p>Add the OpenGL ES view to the application:</p>\r
+\r
+<pre class="prettyprint">\r
+// This is the GL initialization function\r
+static Evas_Object *glview_create(Evas_Object *win)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *glview;\r
+\r
+&nbsp;&nbsp;&nbsp;// This creates the UI component itself\r
+&nbsp;&nbsp;&nbsp;glview = elm_glview_add(win);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, glview);\r
+\r
+&nbsp;&nbsp;&nbsp;// Request a surface with Depth and Stencil support (default buffer sizes)\r
+&nbsp;&nbsp;&nbsp;elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH | ELM_GLVIEW_STENCIL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set the basic policies to handle the view transparently\r
+&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);\r
+&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set the 4 main callbacks\r
+&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(glview, init_gl);\r
+&nbsp;&nbsp;&nbsp;elm_glview_del_func_set(glview, del_gl);\r
+&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(glview, draw_gl);\r
+&nbsp;&nbsp;&nbsp;elm_glview_resize_func_set(glview, resize_gl);\r
+\r
+&nbsp;&nbsp;&nbsp;// Finally show this view\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(glview, 250, 250);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(glview);\r
+\r
+&nbsp;&nbsp;&nbsp;return glview;\r
+}</pre>\r
+\r
+<h3>Setting up the Callbacks</h3>\r
+\r
+<p>To set up callbacks:</p>\r
+\r
+<ol>\r
+       <li>Callback for initialization\r
+       <p>The initialization callback will be called when the GLView is created, after a valid openGL ES context and surface are created. Initialization, resizing, drawing, and deleting callback are called in the main loop.</p>\r
+\r
+       <pre class="prettyprint">\r
+// GL Init function\r
+static void init_gl(Evas_Object *glview)\r
+{\r
+&nbsp;&nbsp;&nbsp;glClearColor(0, 0, 0, 0);\r
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);\r
+\r
+&nbsp;&nbsp;&nbsp;// Do any form of OpenGL ES initialization here\r
+&nbsp;&nbsp;&nbsp;// init_shaders();\r
+&nbsp;&nbsp;&nbsp;// init_vertices();\r
+}</pre>\r
+       </li>\r
+       <li>Callback for resizing\r
+       <p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport.</p>\r
+\r
+       <pre class="prettyprint">\r
+// GLView resize function\r
+static void resize_gl(Evas_Object *glview)\r
+{\r
+&nbsp;&nbsp;&nbsp;int w, h;\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(glview, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);\r
+}</pre>\r
+       </li>\r
+       <li>Callback for drawing\r
+       <p>The drawing callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy.</p>\r
+\r
+       <pre class="prettyprint">\r
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>\r
+\r
+       <p>Another policy is ELM_GLVIEW_POLICY_ALWAYS, which requests render always even when it is not visible. So on demand policy is probably what you are looking for. The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created.</p>\r
+\r
+       <pre class="prettyprint">\r
+// GL draw callback\r
+static void draw_gl(Evas_Object *glview)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Paint it blue\r
+&nbsp;&nbsp;&nbsp;glClearColor(0.2, 0.2, 0.6, 1.0);\r
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);\r
+\r
+&nbsp;&nbsp;&nbsp;// The usual OpenGL ES draw commands come here\r
+&nbsp;&nbsp;&nbsp;// draw_scene();\r
+}</pre>\r
+       </li>\r
+       <li>Callback for deleting\r
+       <p>The delete callback is triggered when the GLView is being destroyed, from the main loop, and no other callback can be called on the same object afterwards.</p>\r
+\r
+       <pre class="prettyprint">\r
+// Delete GLView callback\r
+static void del_gl(Evas_Object *glview)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Destroy all the OpenGL ES resources here\r
+&nbsp;&nbsp;&nbsp;// destroy_shaders();\r
+&nbsp;&nbsp;&nbsp;// destroy_objects();\r
+}</pre>\r
+       </li>\r
+       <li>Add an animator.\r
+       <p>The application above is technically working but the scene does not get updated unless the frame is marked as dirty. Game applications might need to use an animator to obtain continuous update of the scenes. Here is an example for a default update refresh rate:</p>\r
+\r
+       <pre class="prettyprint">\r
+static Eina_Bool anim_cb(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *glview = data;\r
+&nbsp;&nbsp;&nbsp;elm_glview_changed_set(glview);\r
+\r
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;\r
+}\r
+\r
+static void glview_start(Evas_Object *glview)\r
+{\r
+&nbsp;&nbsp;&nbsp;ecore_animator_add(anim_cb, glview);\r
+}</pre>\r
+\r
+       <p>Any other event can be used to refresh the view, for example user input if the view need to be updated.</p>\r
+       </li>\r
+</ol>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Since the Evas rendering engine uses its own GL context internally, the application has to call the gl functions inside the 4 GLView callback functions (initialization, resizing, drawing, deleting) to be guaranteed rendering correctness.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+\r
+<p>While GLView is an abstraction above EvasGL, it is possible to use EvasGL directly for more low-level and advanced features, such as:</p>\r
+\r
+<ul>\r
+       <li>Creating new contexts</li>\r
+       <li>Creating new surfaces</li>\r
+       <li>Creating PBuffer surfaces</li>\r
+       <li>Calling extensions</li>\r
+</ul>\r
+\r
+<p>For all those reasons, a direct access to the EvasGL object is required. When you use GLView, you can use the following code:</p>\r
+\r
+<pre class="prettyprint">\r
+Evas_GL *evgl = elm_glview_evas_gl_get(glview);\r
+// Then it is possible to call any evas_gl function with it, for example:\r
+Evas_GL_Context *ctx = evas_gl_current_context_get(evgl);\r
+Evas_GL_Surface *pbuf = evas_gl_pbuffer_surface_create(evgl, cfg, w, h, NULL);</pre>\r
+\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Do not destroy the EvasGL object. Its life-cycle is defined by the GLView object.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<h2 id="evasgl" name="evasgl">EvasGL Programming Guide</h2>\r
+\r
+<p>This guide assumes that the application uses EvasGL directly instead of using the GLView. (If the application uses a GLView, EvasGL is created internally.)</p>\r
+\r
+<h3>Declaration of EvasGL Objects</h3>\r
+\r
+<p>This is how to define the application data structure to hold all the objects for your EvasGL application:</p>\r
+\r
+<ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *img</span>: OpenGL ES canvas.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL *evasgl</span>: EvasGL Object for rendering gl in Evas.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_API *glapi</span>: EvasGL API object that contains the GL APIs to be used in Evas GL.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Context *ctx</span>: EvasGL Context object, a GL rendering context in Evas GL.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface *sfc</span>: EvasGL Surface object, a GL rendering target in Evas GL.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Config *cfg</span>: EvasGL Surface configuration object for surface creation.</li>\r
+</ul>\r
+\r
+<pre class="prettyprint">\r
+typedef struct appdata \r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img;\r
+\r
+&nbsp;&nbsp;&nbsp;Evas_GL *evasgl;\r
+&nbsp;&nbsp;&nbsp;Evas_GL_API *glapi;\r
+&nbsp;&nbsp;&nbsp;Evas_GL_Context *ctx;\r
+&nbsp;&nbsp;&nbsp;Evas_GL_Surface *sfc;\r
+&nbsp;&nbsp;&nbsp;Evas_GL_Config *cfg;\r
+\r
+&nbsp;&nbsp;&nbsp;unsigned int program;\r
+&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;\r
+&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;\r
+&nbsp;&nbsp;&nbsp;unsigned int vbo;\r
+} appdata_s;</pre>\r
+\r
+<h3>Creating EvasGL</h3>\r
+\r
+<p>We can create our EvasGL handler using <span style="font-family: Courier New,Courier,monospace">evas_gl_new(Evas * e)</span>. This initializer takes the Evas canvas that OpenGL ES is to be used on as a parameter. When developing an application with Elementary, we can use the canvas of our window:</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;win = elm_win_util_standard_add(&quot;Evas_GL Example&quot;, &quot;Evas_GL Example&quot;);\r
+ad-&gt;evasgl = evas_gl_new(evas_object_evas_get(ad-&gt;win));</pre>\r
+\r
+<p>To free the memory allocated to this handler, use <span style="font-family: Courier New,Courier,monospace">evas_gl_free(Evas_GL *evas_gl)</span>.</p>\r
+\r
+<h3>Getting OpenGL ES APIs</h3>\r
+\r
+<p>You can get the API for rendering OpenGL ES with <span style="font-family: Courier New,Courier,monospace">evas_gl_api_get(Evas_GL *evas_gl_)</span>. This function returns a structure that contains all the OpenGL ES functions you can use to render in Evas. These functions consist of all the standard OpenGL ES2.0 functions and any extra ones Evas has decided to provide in addition. If you have your code ported to OpenGL ES 2.0, it is easy to render to Evas. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;glapi = evas_gl_api_get(ad-&gt;evasgl);</pre>\r
+\r
+<h3>Creating a Surface</h3>\r
+\r
+<p>We must allocate a new config object to fill it out using <span style="font-family: Courier New,Courier,monospace">evas_gl_config_new()</span>. As long as Evas creates a config object for the user, it takes care of the backward compatibility issue. Once we have our config object, we can specify the surface settings:</p>\r
+\r
+<pre class="prettyprint">\r
+appdata_s *ad;\r
+ad-&gt;cfg = evas_gl_config_new();\r
+ad-&gt;cfg-&gt;color_format = EVAS_GL_RGBA_8888; // Surface Color Format\r
+ad-&gt;cfg-&gt;depth_bits = EVAS_GL_DEPTH_BIT_24; // Surface Depth Format\r
+ad-&gt;cfg-&gt;stencil_bits = EVAS_GL_STENCIL_NONE; // Surface Stencil Format\r
+ad-&gt;cfg-&gt;options_bits = EVAS_GL_OPTIONS_NONE; // Configuration options (here, no extra options)</pre>\r
+\r
+<p>Once we have configured the surface behavior, we must initialize the surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_create(Evas_GL* evas_gl, Evas_GL_Config * cfg, int w, int h)</span>. This function takes the given Evas_GL object as the first parameter and the pixel format, and configuration of the rendering surface as the second parameter. The last two parameters are the width and height of the surface, which we recover directly from the window.</p>\r
+\r
+<pre class="prettyprint">\r
+Evas_Coord w, h;\r
+evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;w, &amp;h);\r
+ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, w, h);</pre>\r
+\r
+<p>To manually delete a GL surface, use <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_destroy(Evas_GL *evas_gl, Evas_GL_Surface *surf)</span>.</p>\r
+\r
+<h3>Creating Context</h3>\r
+\r
+<p>Here, we create a context for Evas_GL using <span style="font-family: Courier New,Courier,monospace">evas_gl_context_create(Evas_GL * evas_gl, Evas_GL_Context * share_ctx)</span>. You can merge the context with a higher context definition you must pass as a second parameter.</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;ctx = evas_gl_context_create(ad-&gt;evasgl, NULL);</pre>\r
+\r
+<p>To delete the context later, use <span style="font-family: Courier New,Courier,monospace">evas_gl_context_destroy(Evas_GL *evas_gl, Evas_GL_Context *ctx)</span>. To delete the entire configuration object, use <span style="font-family: Courier New,Courier,monospace">evas_gl_config_free(Evas_GL_Config *cfg)</span> instead.</p>\r
+\r
+<h3>Callbacks</h3>\r
+\r
+<p>Now that we have configured the EvasGL environment, we declare a UI component in which all the OpenGL ES transformation takes place. In the example below, we selected the image component because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));</pre>\r
+\r
+<p>We define the &quot;OpenGL ES main loop&quot; function that is called every time the program attempts to have pixels from the image. We put all the OpenGL ES statements in charge of rendering the scene in this callback.</p>\r
+\r
+<pre class="prettyprint">\r
+evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixels_get_cb, ad);</pre>\r
+\r
+<p>To define a function that takes care of the drawing using EvasGL (called the OpenGL ES main loop), use:</p>\r
+\r
+<pre class="prettyprint">\r
+static void\r
+img_pixels_get_cb(void *data, Evas_Object *obj)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;Evas_GL_API *gl = ad-&gt;glapi;\r
+\r
+&nbsp;&nbsp;&nbsp;// Rendering process\r
+&nbsp;&nbsp;&nbsp;evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);\r
+&nbsp;&nbsp;&nbsp;// Paint it blue\r
+&nbsp;&nbsp;&nbsp;gl-&gt;glClearColor(0.2, 0.2, 0.6, 1.0);\r
+&nbsp;&nbsp;&nbsp;gl-&gt;glClear(GL_COLOR_BUFFER_BIT);\r
+&nbsp;&nbsp;&nbsp;// The usual OpenGL ES draw commands come here\r
+&nbsp;&nbsp;&nbsp;// draw_scene();\r
+}</pre>\r
+\r
+<p>At every tick, we must set the given context as a current context for the given surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_make_current(Evas_GL *evas_gl, Evas_GL_Surface *surf, Evas_GL_Context *ctx)</span>.</p>\r
+\r
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> to define the OpenGL ES main loop. To do so, create a callback that is called on every animation tick. This animation callback is used only to mark the image as &quot;dirty&quot;, meaning that it needs an update next time Evas renders. It calls the pixel get callback that redraws the scene.</p>\r
+\r
+<pre class="prettyprint">\r
+static Eina_Bool\r
+animate_cb(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img = data;\r
+&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(img, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;\r
+}\r
+\r
+ecore_animator_add(animate_cb, ad-&gt;img);</pre>\r
+\r
+<p>You can define several other callbacks that have an impact on the drawing depending on the mouse, resize, and deletion events.</p>\r
+\r
+<pre class="prettyprint">\r
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_DEL, img_del_cb, ad);\r
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);\r
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);\r
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);\r
+evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);</pre>\r
+\r
+<h3>Setting a Surface into the Image Object</h3>\r
+\r
+<p>We can also fill in the native Surface information from the given EvasGL surface. For example, to adapt the surface to the target image when the size of the canvas changes, use the following code.</p>\r
+\r
+<pre class="prettyprint">\r
+Evas_Native_Surface ns;\r
+evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);\r
+evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);</pre>\r
+\r
+         \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/graphics/tbm_n.htm b/org.tizen.guides/html/native/graphics/tbm_n.htm
index 61525ea..f3cb78d 100644 (file)
--- a/org.tizen.guides/html/native/graphics/tbm_n.htm
+++ b/org.tizen.guides/html/native/graphics/tbm_n.htm
@@ -1,136 +1,136 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>TBM Surface</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm">TBM Surface Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-<h1>TBM Surface</h1>
- 
- <p>The Tizen Buffer Manager (TBM) surface provides functions for the graphic buffer in Tizen. It provides the abstraction interface for the graphic buffer and the user interface for the TBM surface. It supports the RGB and YUV graphic formats, as well as multiple plane graphic buffers.</p>
-
-<p>The TBM surface provides the following main features:</p>
-<ul>
-       <li>Creating a surface with defined width, height, and format</li>
-       <li>Getting a format list</li>
-       <li>Accessing the surface</li>
-       <li>Getting surface and plane information</li>
-</ul>
-
-<p>The TBM surface provides various format typedefs. However, check that the system supports the graphic format in question.</p>
-
-<p>Get surface and plane information using the <span style="font-family: Courier New,Courier,monospace">tbm_surface_map()</span> or the <span style="font-family: Courier New,Courier,monospace">tbm_surface_get_info()</span> function. The information of surface is assigned in the struct of <span style="font-family: Courier New,Courier,monospace">tbm_surface_info_s</span>.</p>
-
-<p>Get a plane pointer in the surface and store data in the low level graphic buffer using the pointer of each plane.</p>
-
-<table> 
-   <caption>
-     Table: Surface information 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">width</span></td> 
-     <td>Surface width</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">height</span></td> 
-     <td>Surface height</td> 
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">bpp</span></td> 
-     <td>Surface BPP</td> 
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">size</span></td> 
-     <td>Surface size</td> 
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">num_planes</span></td> 
-     <td>Number of planes</td> 
-    </tr> 
-       </tbody> 
-  </table>
-
-<table> 
-   <caption>
-     Table: Plane information 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">size</span></td> 
-     <td>Plane size</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">offset</span></td> 
-     <td>Plane offset</td> 
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">stride</span></td> 
-     <td>Plane stride</td> 
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">ptr</span></td> 
-     <td>Plane pointer</td> 
-    </tr> 
-       </tbody> 
-  </table>
- 
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>TBM Surface</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm">TBM Surface Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+\r
+<h1>TBM Surface</h1>\r
+ \r
+ <p>The Tizen Buffer Manager (TBM) surface provides functions for the graphic buffer in Tizen. It provides the abstraction interface for the graphic buffer and the user interface for the TBM surface. It supports the RGB and YUV graphic formats, as well as multiple plane graphic buffers.</p>\r
+\r
+<p>The TBM surface provides the following main features:</p>\r
+<ul>\r
+       <li>Creating a surface with defined width, height, and format</li>\r
+       <li>Getting a format list</li>\r
+       <li>Accessing the surface</li>\r
+       <li>Getting surface and plane information</li>\r
+</ul>\r
+\r
+<p>The TBM surface provides various format typedefs. However, check that the system supports the graphic format in question.</p>\r
+\r
+<p>Get surface and plane information using the <span style="font-family: Courier New,Courier,monospace">tbm_surface_map()</span> or the <span style="font-family: Courier New,Courier,monospace">tbm_surface_get_info()</span> function. The information of surface is assigned in the struct of <span style="font-family: Courier New,Courier,monospace">tbm_surface_info_s</span>.</p>\r
+\r
+<p>Get a plane pointer in the surface and store data in the low level graphic buffer using the pointer of each plane.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Surface information \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Information</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">width</span></td> \r
+     <td>Surface width</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">height</span></td> \r
+     <td>Surface height</td> \r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bpp</span></td> \r
+     <td>Surface BPP</td> \r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">size</span></td> \r
+     <td>Surface size</td> \r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">num_planes</span></td> \r
+     <td>Number of planes</td> \r
+    </tr> \r
+       </tbody> \r
+  </table>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Plane information \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Information</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">size</span></td> \r
+     <td>Plane size</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">offset</span></td> \r
+     <td>Plane offset</td> \r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">stride</span></td> \r
+     <td>Plane stride</td> \r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">ptr</span></td> \r
+     <td>Plane pointer</td> \r
+    </tr> \r
+       </tbody> \r
+  </table>\r
+ \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/guides_n.htm b/org.tizen.guides/html/native/guides_n.htm
index e9b2fac..08e1cdf 100644 (file)
--- a/org.tizen.guides/html/native/guides_n.htm
+++ b/org.tizen.guides/html/native/guides_n.htm
@@ -76,7 +76,7 @@
 
 <p>For information about features not implemented by a specific API:</p>
 <ul>   
-       <li><a href="porting/porting_n.htm">Porting</a> <span style="color: red">in mobile applications only</span>
+       <li><a href="porting/porting_n.htm">Porting</a> <strong>in mobile applications only</strong>
        <p>Enables you to port your current 2.2.1 native API-based applications to the new 2.3 native API.</p></li>
 </ul>
     
diff --git a/org.tizen.guides/html/native/location/location_guide_n.htm b/org.tizen.guides/html/native/location/location_guide_n.htm
index 56f32a0..59cd731 100644 (file)
--- a/org.tizen.guides/html/native/location/location_guide_n.htm
+++ b/org.tizen.guides/html/native/location/location_guide_n.htm
@@ -1,75 +1,75 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Location</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-  <h1>Location</h1>
-  <p>Location features include access to the device positioning capabilities.</p>
-  
- <p>The main location features are:</p>
-<ul>
-<li><a href="location_n.htm">Location</a> 
-       <p>Provides the geographical location of the device.</p></li>
-</ul>
-
-
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
-<li><a href="geofence_n.htm">Geofence</a>
-       <p>Allows you to create and use geofences.</p></li>
-<li><a href="maps_n.htm">Maps Service</a>
-    <p>Allows you to create and use the maps services, such as geocoder, place searching, and routing.</p></li>
-</ul>
-
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+    <title>Location</title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+\r
+  <h1>Location</h1>\r
+  <p>Location features include access to the device positioning capabilities.</p>\r
+  \r
+ <p>The main location features are:</p>\r
+<ul>\r
+<li><a href="location_n.htm">Location</a> \r
+       <p>Provides the geographical location of the device.</p></li>\r
+</ul>\r
+\r
+\r
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>\r
+<ul>\r
+<li><a href="geofence_n.htm">Geofence</a>\r
+       <p>Allows you to create and use geofences.</p></li>\r
+<li><a href="maps_n.htm">Maps Service</a>\r
+    <p>Allows you to create and use the maps services, such as geocoder, place searching, and routing.</p></li>\r
+</ul>\r
+\r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/messaging/email_n.htm b/org.tizen.guides/html/native/messaging/email_n.htm
index a647c6e..1ae9a57 100644 (file)
--- a/org.tizen.guides/html/native/messaging/email_n.htm
+++ b/org.tizen.guides/html/native/messaging/email_n.htm
@@ -1,86 +1,86 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Email</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm">Email Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API for Mobile Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-       
-       <h1>Email</h1>
-<p>Email is a method of exchanging digital messages. Email systems are based on a store-and-forward model, in which email server computer systems accept, forward, deliver, and store messages on behalf of users, who only need to connect to the email infrastructure, typically an email server, with a network-enabled device for the duration of a message submission or retrieval.</p>
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-<p>Email provides features for composing, saving, and sending email messages using an SMTP (SMTP used for sending emails through the Internet is described in the RFC5321/5322 standards). It provides services to applications that make use of the email service.</p>
-
-<p>The Email API can be utilized by any component in the application layer which facilitates the end user to perform email messaging. For example, the Email APIs can be invoked by a multimedia module when the user wants to send a media file through email, or by an email application when the user tries to send an email message.</p>
-  
-  <p class="figure">Figure: Email service architecture</p> 
-  <p align="center"><img alt="Email service architecture" src="../../images/email_architecture.png" /></p>   
-  
-
-<p>The main features of the Email API include:</p>
-
-<ul><li>Preparing email messages: set the subject, body, and recipients of the message, and the file path for any attachments.</li>
-<li>Sending email messages.</li>
-<li>Registering a callback function to be notified of the message status.</li></ul>
- 
-<p>Email sending is asynchronous and the application must not wait for the result. The process can be slow (connections must be established), and even if the mail server is not available a message sending is not a failure if a spooling mechanism exists. Use the callback function to receive the status when the message has been sent.</p>
-<p>Note that once the <span style="font-family: Courier New,Courier,monospace">email_send_message()</span> function is called, the message content is out of the application&#39;s control. Even if the message appears not to have finished sending, it can no longer be modified.</p>
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Email</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm">Email Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API for Mobile Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       \r
+       <h1>Email</h1>\r
+<p>Email is a method of exchanging digital messages. Email systems are based on a store-and-forward model, in which email server computer systems accept, forward, deliver, and store messages on behalf of users, who only need to connect to the email infrastructure, typically an email server, with a network-enabled device for the duration of a message submission or retrieval.</p>\r
+\r
+  <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  \r
+<p>Email provides features for composing, saving, and sending email messages using an SMTP (SMTP used for sending emails through the Internet is described in the RFC5321/5322 standards). It provides services to applications that make use of the email service.</p>\r
+\r
+<p>The Email API can be utilized by any component in the application layer which facilitates the end user to perform email messaging. For example, the Email APIs can be invoked by a multimedia module when the user wants to send a media file through email, or by an email application when the user tries to send an email message.</p>\r
+  \r
+  <p class="figure">Figure: Email service architecture</p> \r
+  <p align="center"><img alt="Email service architecture" src="../../images/email_architecture.png" /></p>   \r
+  \r
+\r
+<p>The main features of the Email API include:</p>\r
+\r
+<ul><li>Preparing email messages: set the subject, body, and recipients of the message, and the file path for any attachments.</li>\r
+<li>Sending email messages.</li>\r
+<li>Registering a callback function to be notified of the message status.</li></ul>\r
+ \r
+<p>Email sending is asynchronous and the application must not wait for the result. The process can be slow (connections must be established), and even if the mail server is not available a message sending is not a failure if a spooling mechanism exists. Use the callback function to receive the status when the message has been sent.</p>\r
+<p>Note that once the <span style="font-family: Courier New,Courier,monospace">email_send_message()</span> function is called, the message content is out of the application&#39;s control. Even if the message appears not to have finished sending, it can no longer be modified.</p>\r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/messaging/messages_n.htm b/org.tizen.guides/html/native/messaging/messages_n.htm
index 63acb27..321ab8d 100644 (file)
--- a/org.tizen.guides/html/native/messaging/messages_n.htm
+++ b/org.tizen.guides/html/native/messaging/messages_n.htm
@@ -1,70 +1,70 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Messages</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">Messages Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Messages</h1>
-       
-       <p>Tizen provides you with access to the device messaging capabilities, including sending SMS and MMS messages.</p>
-
-<p>The main messaging features include:</p>
-<ul><li>Text messaging (SMS)
-<p>You can <a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">create a message, send it, and receive the sent status</a>. You can also receive incoming messages, and search for messages within a message list. </p></li>
-<li>Multimedia messaging (MMS)
-<p>You can <a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">create and send MMS messages</a>. An image, audio, video, vCard, vCalendar, or a combination of them is supported as an attachment type in MMS messages. An image or audio attachment cannot be combined with video attachments.</p></li>
-<li>Messaging notifications
-<p>You can register and unregister callback functions to be notified when an outgoing message is successfully sent or an incoming message has been received.</p></li></ul>
-
-<p>The sent status of SMS and MMS can be checked asynchronously. You receive a separate status report for each SMS recipient, and one status report regardless of the number of MMS recipients.</p> 
-       
-       
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Messages</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">Messages Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Messages</h1>\r
+       \r
+       <p>Tizen provides you with access to the device messaging capabilities, including sending SMS and MMS messages.</p>\r
+\r
+<p>The main messaging features include:</p>\r
+<ul><li>Text messaging (SMS)\r
+<p>You can <a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">create a message, send it, and receive the sent status</a>. You can also receive incoming messages, and search for messages within a message list. </p></li>\r
+<li>Multimedia messaging (MMS)\r
+<p>You can <a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">create and send MMS messages</a>. An image, audio, video, vCard, vCalendar, or a combination of them is supported as an attachment type in MMS messages. An image or audio attachment cannot be combined with video attachments.</p></li>\r
+<li>Messaging notifications\r
+<p>You can register and unregister callback functions to be notified when an outgoing message is successfully sent or an incoming message has been received.</p></li></ul>\r
+\r
+<p>The sent status of SMS and MMS can be checked asynchronously. You receive a separate status report for each SMS recipient, and one status report regardless of the number of MMS recipients.</p> \r
+       \r
+       \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/messaging/messaging_guide_n.htm b/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
index 6d5f543..a4c4311 100644 (file)
--- a/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
+++ b/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
@@ -1,69 +1,69 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Messaging</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Messaging</h1>
-  <p>Messaging features include access to the device messaging capabilities.</p>
-
-  <p>The main messaging features are:</p>
-  <ul>
-       <li><a href="messages_n.htm">Messages</a> <p>Provides you with access to the device text and multimedia messaging capabilities.</p></li>
-       <li><a href="push_n.htm">Push</a><p>Allows you to push events from an application server to your application on a Tizen device.</p></li>
-  </ul>
-  <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-       <ul>
-       <li><a href="email_n.htm">Email</a><p>Allows you to create and send emails.</p></li>
-       </ul>
-  
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Messaging</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Messaging</h1>\r
+  <p>Messaging features include access to the device messaging capabilities.</p>\r
+\r
+  <p>The main messaging features are:</p>\r
+  <ul>\r
+       <li><a href="messages_n.htm">Messages</a> <p>Provides you with access to the device text and multimedia messaging capabilities.</p></li>\r
+       <li><a href="push_n.htm">Push</a><p>Allows you to push events from an application server to your application on a Tizen device.</p></li>\r
+  </ul>\r
+  <p>The following guides apply in <strong>mobile applications only</strong>:</p>\r
+       <ul>\r
+       <li><a href="email_n.htm">Email</a><p>Allows you to create and send emails.</p></li>\r
+       </ul>\r
+  \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/messaging/push_n.htm b/org.tizen.guides/html/native/messaging/push_n.htm
index 4d3b7b6..0b9a195 100644 (file)
--- a/org.tizen.guides/html/native/messaging/push_n.htm
+++ b/org.tizen.guides/html/native/messaging/push_n.htm
@@ -1,144 +1,144 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Push</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-               
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm">Push Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Push</h1>
-
-<p>Push enables you to push events from an application server to your application on a Tizen device.</p> 
-  <p class="figure">Figure: Push messaging service</p> 
-  <p align="center"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p> 
-  <p>Once your application is successfully registered in the push server through the push daemon on the device, your application server can send push messages to the application in that particular device.</p> 
-  <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the daemon makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a <span style="font-family: Courier New,Courier,monospace">LAUNCH</span> option. In this case, the daemon forcibly launches the application and hands over the message to the application as an <a href="../app/application_n.htm#app_controls">app control</a>.</p>
-
-<p>To use the push messaging service, the application needs the permission to access Tizen push server. Request the permission from the Tizen push service team by email (<a href="mailto:push.tizen@samsung.com">push.tizen@samsung.com</a>), including the information listed in the following table. When the team approves your request, you receive a push app ID corresponding to your package ID.</p>
-
-<table>
-<caption>Table: Request form details</caption>
-   <colgroup> 
-    <col width="25%" /> 
-    <col width="75%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th colspan="2">Developer information</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p>Email address</p> </td> 
-     <td rowspan="1" colspan="1"> <p>Your email address to receive the approval response.</p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p>Last name</p> </td> 
-     <td rowspan="1" colspan="1"> <p>Your last name.</p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p>First name</p></td> 
-     <td rowspan="1" colspan="1"> <p>Your first name.</p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p>Country</p> </td> 
-     <td rowspan="1" colspan="1"> <p>Your country of residence.</p> </td> 
-       </tr>
-    <tr> 
-     <th colspan="2">Application information</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> Package ID </p> </td> 
-     <td rowspan="1" colspan="1"> <p> The ID of the application package that uses the push messaging service. The package ID can be obtained from the <span style="font-family: Courier New,Courier,monospace">.xml</span> file in the Tizen SDK.  </p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> Application name </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Name of the application that uses the push service. </p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> Testing purpose </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes or no. If you request the service for testing purposes only, the duration of the push service is limited to 3 weeks. </p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> Purpose of the push notification usage </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Description of how you plan to use the push service, including the situations in which you want to use it. </p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> App launch date </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Application launch date in the YYYY/MM/DD format.<br />For example: 2012/08/01. </p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> Service area / country </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Service area (such as Asia, Africa, America, or Europe) or the country where the application is used. </p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> Daily push requests </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Estimated total number of daily notifications. </p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> Transactions per second </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Estimated peak number of transactions per second (the recommendation is below 100). </p> </td> 
-       </tr>
-</tbody>
-</table>
-
-  <h2 id="service" name="service">Service Architecture</h2> 
-  <p>The following figure illustrates the service architecture of the Tizen push messaging service.</p> 
-  <p class="figure">Figure: Service architecture</p> 
-  <p align="center"><img alt="Service architecture" src="../../images/service_architecture.png" /></p> 
-  <p>The following steps illustrate a typical scenario for using the push messaging service on a Tizen device:</p> 
-  <ol> 
-   <li>The application on the device registers for the push messaging service.</li> 
-   <li>The device establishes a push session with the Tizen Server. <p>The push session is managed by the Tizen server and device platform, so there is no need to create any code to manage it within the application.</p></li> 
-   <li>If the registration succeeds, the application receives a registration ID, which is a unique key for identifying the device and routing the push message. <p>The application delivers the identifier to the application server.</p></li> 
-   <li>When the application server needs to send a push message to the application, it calls the Tizen server&#39;s open API. <p>A text message of up to 1024 bytes can be sent in a push message. If the application needs to download a large amount of data, the application server sends a link to the data in the push message.</p></li> 
-   <li>The Tizen Server routes the push message to the target device with a given registration ID.</li> 
-   <li>The application receives the push message.</li> 
-  </ol>        
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Push</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+               \r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm">Push Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Push</h1>\r
+\r
+<p>Push enables you to push events from an application server to your application on a Tizen device.</p> \r
+  <p class="figure">Figure: Push messaging service</p> \r
+  <p align="center"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p> \r
+  <p>Once your application is successfully registered in the push server through the push daemon on the device, your application server can send push messages to the application in that particular device.</p> \r
+  <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the daemon makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a <span style="font-family: Courier New,Courier,monospace">LAUNCH</span> option. In this case, the daemon forcibly launches the application and hands over the message to the application as an <a href="../app/application_n.htm#app_controls">app control</a>.</p>\r
+\r
+<p>To use the push messaging service, the application needs the permission to access Tizen push server. Request the permission from the Tizen push service team by email (<a href="mailto:push.tizen@samsung.com">push.tizen@samsung.com</a>), including the information listed in the following table. When the team approves your request, you receive a push app ID corresponding to your package ID.</p>\r
+\r
+<table>\r
+<caption>Table: Request form details</caption>\r
+   <colgroup> \r
+    <col width="25%" /> \r
+    <col width="75%" /> \r
+   </colgroup> \r
+<tbody>\r
+    <tr> \r
+     <th colspan="2">Developer information</th> \r
+    </tr> \r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p>Email address</p> </td> \r
+     <td rowspan="1" colspan="1"> <p>Your email address to receive the approval response.</p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p>Last name</p> </td> \r
+     <td rowspan="1" colspan="1"> <p>Your last name.</p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p>First name</p></td> \r
+     <td rowspan="1" colspan="1"> <p>Your first name.</p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p>Country</p> </td> \r
+     <td rowspan="1" colspan="1"> <p>Your country of residence.</p> </td> \r
+       </tr>\r
+    <tr> \r
+     <th colspan="2">Application information</th> \r
+    </tr> \r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p> Package ID </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> The ID of the application package that uses the push messaging service. The package ID can be obtained from the <span style="font-family: Courier New,Courier,monospace">.xml</span> file in the Tizen SDK.  </p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p> Application name </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Name of the application that uses the push service. </p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p> Testing purpose </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes or no. If you request the service for testing purposes only, the duration of the push service is limited to 3 weeks. </p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p> Purpose of the push notification usage </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Description of how you plan to use the push service, including the situations in which you want to use it. </p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p> App launch date </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Application launch date in the YYYY/MM/DD format.<br />For example: 2012/08/01. </p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p> Service area / country </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Service area (such as Asia, Africa, America, or Europe) or the country where the application is used. </p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p> Daily push requests </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Estimated total number of daily notifications. </p> </td> \r
+       </tr>\r
+        <tr> \r
+     <td rowspan="1" colspan="1"> <p> Transactions per second </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Estimated peak number of transactions per second (the recommendation is below 100). </p> </td> \r
+       </tr>\r
+</tbody>\r
+</table>\r
+\r
+  <h2 id="service" name="service">Service Architecture</h2> \r
+  <p>The following figure illustrates the service architecture of the Tizen push messaging service.</p> \r
+  <p class="figure">Figure: Service architecture</p> \r
+  <p align="center"><img alt="Service architecture" src="../../images/service_architecture.png" /></p> \r
+  <p>The following steps illustrate a typical scenario for using the push messaging service on a Tizen device:</p> \r
+  <ol> \r
+   <li>The application on the device registers for the push messaging service.</li> \r
+   <li>The device establishes a push session with the Tizen Server. <p>The push session is managed by the Tizen server and device platform, so there is no need to create any code to manage it within the application.</p></li> \r
+   <li>If the registration succeeds, the application receives a registration ID, which is a unique key for identifying the device and routing the push message. <p>The application delivers the identifier to the application server.</p></li> \r
+   <li>When the application server needs to send a push message to the application, it calls the Tizen server&#39;s open API. <p>A text message of up to 1024 bytes can be sent in a push message. If the application needs to download a large amount of data, the application server sends a link to the data in the push message.</p></li> \r
+   <li>The Tizen Server routes the push message to the target device with a given registration ID.</li> \r
+   <li>The application receives the push message.</li> \r
+  </ol>        \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/audio_io_n.htm b/org.tizen.guides/html/native/multimedia/audio_io_n.htm
index 1464735..c01d19b 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/audio_io_n.htm
+++ b/org.tizen.guides/html/native/multimedia/audio_io_n.htm
@@ -1,159 +1,159 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Audio I/O</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#record_pcm">Recording Uncompressed Audio</a></li>
-                       <li><a href="#play_pcm">Playing Uncompressed Audio</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm">Audio I/O Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Audio I/O</h1>
-
- <p>Audio I/O enables your application to manage various media handles.</p> 
-  <p>The main features of the Audio I/O API include:</p> 
-  <ul> 
-       <li><a href="#record_pcm">Recording uncompressed audio</a>
-       <p>Enables you to capture uncompressed PCM data from audio device.</p></li>  
-   <li><a href="#play_pcm">Playing uncompressed audio</a>
-       <p>Enables you to create a multimedia application to play uncompressed PCM data.</p></li>  
-  </ul> 
-  
-<h2 id="record_pcm" name="record_pcm">Recording Uncompressed Audio</h2>
-<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. The Audio Input API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">wearable</a> applications) enables your application to record such data from a microphone type input device.</p>
-  <p>Audio data is captured periodically, so to receive the audio PCM data from the input device, you must implement the audio input interface to notify the application of audio data events, such as the end of filling audio data.</p>
-  <p>Before recording audio, you must define the following PCM data settings:</p>
-  <ul>
-   <li>Input device type:
-    <ul>
-     <li>Microphone</li>
-    </ul> </li>
-   <li>Audio channels:
-    <ul>
-     <li>Mono (1 channel)</li>
-     <li>Stereo (2 channels)</li>
-    </ul> </li>
-   <li>Audio sample type:
-    <ul>
-     <li>Unsigned 8-bit PCM</li>
-     <li>Signed 16-bit little endian PCM</li>
-    </ul> </li>
-   <li>Audio sample rate:
-   <ul>
-    <li>8000 ~ 48000 Hz</li>
-   </ul></li>
-  </ul>
-  <p>To minimize the overhead of the audio input API, use the optimal channel type, sample type and sampling rate, which can be retrieved using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_channel()</span>, <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_type()</span> and <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_rate()</span> functions, respectively.</p>
-
-
-  <p>The following figures illustrate the general audio input states, and how the state changes when the audio input is interrupted by the system.</p>
-  <p class="figure">Figure: Audio input states</p>
-  <p align="center"><img src="../../images/audio_input.png" alt="Audio input states" /></p>
-  <p class="figure">Figure: Audio input states when interrupted by system</p>
-   <p align="center"><img src="../../images/audio_input_interrupt_state.png" alt="Audio input states when interrupted by system" /></p>
-
-  
-  <h2 id="play_pcm" name="play_pcm">Playing Uncompressed Audio</h2>
-<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. The Audio Output API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">wearable</a> applications) enables your application to play such data using output devices.</p>
-  <p>To play the audio PCM data, the application must call the <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> function to initialize the audio output handle.</p>
-  <p>Before playing audio, your application must define the following PCM data settings:</p>
-  <ul>
-   <li>Audio channels:
-    <ul>
-     <li>Mono (1 channel)</li>
-     <li>Stereo (2 channels)</li>
-    </ul> </li>
-   <li>Audio sample type:
-    <ul>
-     <li>Unsigned 8-bit PCM</li>
-     <li>Signed 16-bit little endian PCM</li>
-    </ul> </li>
-   <li>Audio sample rate:
-   <ul>
-    <li>8000 ~ 48000 Hz</li>
-   </ul> </li>
-  </ul>
-  
-  <p>The following figures illustrate the general audio output states, and how the state changes when the audio output is interrupted by the system.</p>
-  <p class="figure">Figure: Audio output states</p>
-  <p align="center"><img src="../../images/audio_output.png" alt="Audio output states" /></p>
-  <p class="figure">Figure: Audio output states when interrupted by system</p>
-  <p align="center"><img src="../../images/audio_output_interrupt_state.png" alt="Audio output states when interrupted by system" /></p>
-  
-  <h3 id="use" name="use">Using Audio Output</h3>
-  <p>For supporting various low-end Tizen devices, the application must follow certain guidelines:</p>
-  <ul>
-   <li>Do not use multiple instances of the Audio Output excessively.
-   <p>Using excessive multiple instances of the Audio Output has a negative effect on the application, because the audio data processing for re-sampling and mixing imposes a heavy burden on the system. </p> </li>
-   <li>Use device-preferred PCM format.
-   <ul>
-
-    <li><p>To reduce the processing overhead, use the target device-preferred PCM format (for example, use 16-bit little endian, 44.1 kHz, stereo for Wave and Wave M).</p></li>
-    <li><p>Using the preferred format reduces internal operations, such as converting audio samples from mono to stereo or re-sampling audio frequency to fit the target device&#39;s input sample rate.</p></li>
-   </ul> </li>
-   <li>Do not call the Audio Output functions too frequently.
-   <ul>
-    <li><p>The Audio Output functions require more time while repeated in the order of <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> &gt; <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> &gt; <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> &gt; <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span>. Therefore, keep the frequency of calling these functions to a minimum. Note that the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> functions are much faster than <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span>.</p></li>
-</ul></li>
-   <li>Reduce event delay and remove glitches.
-   <ul>
-    <li><p>The Audio Output API works recursively with events. The smaller the buffer size, the more often are events generated. If you use the Audio Output API with the smallest buffer and other resources (for example, a timer or sensor), the application is negatively influenced by the delay of the event. To prevent problems, set the write buffer size properly based on the other resources you need.</p></li>
-    <li><p>To guarantee the working events of the Audio Output API independently, an instance of the Audio Output API needs to be created and worked on the event thread.</p></li> 
-   </ul> </li>
-   <li>Use double-buffering.
-   <ul>
-    <li><p>Use the double buffering mechanism to reduce latency. The mechanism works by first writing data twice before starting. After starting, whenever the listener (event) is called, you can write additional data.</p></li>
-   </ul> </li>
-  </ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Audio I/O</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#record_pcm">Recording Uncompressed Audio</a></li>\r
+                       <li><a href="#play_pcm">Playing Uncompressed Audio</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm">Audio I/O Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Audio I/O</h1>\r
+\r
+ <p>Audio I/O enables your application to manage various media handles.</p> \r
+  <p>The main features of the Audio I/O API include:</p> \r
+  <ul> \r
+       <li><a href="#record_pcm">Recording uncompressed audio</a>\r
+       <p>Enables you to capture uncompressed PCM data from audio device.</p></li>  \r
+   <li><a href="#play_pcm">Playing uncompressed audio</a>\r
+       <p>Enables you to create a multimedia application to play uncompressed PCM data.</p></li>  \r
+  </ul> \r
+  \r
+<h2 id="record_pcm" name="record_pcm">Recording Uncompressed Audio</h2>\r
+<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. The Audio Input API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">wearable</a> applications) enables your application to record such data from a microphone type input device.</p>\r
+  <p>Audio data is captured periodically, so to receive the audio PCM data from the input device, you must implement the audio input interface to notify the application of audio data events, such as the end of filling audio data.</p>\r
+  <p>Before recording audio, you must define the following PCM data settings:</p>\r
+  <ul>\r
+   <li>Input device type:\r
+    <ul>\r
+     <li>Microphone</li>\r
+    </ul> </li>\r
+   <li>Audio channels:\r
+    <ul>\r
+     <li>Mono (1 channel)</li>\r
+     <li>Stereo (2 channels)</li>\r
+    </ul> </li>\r
+   <li>Audio sample type:\r
+    <ul>\r
+     <li>Unsigned 8-bit PCM</li>\r
+     <li>Signed 16-bit little endian PCM</li>\r
+    </ul> </li>\r
+   <li>Audio sample rate:\r
+   <ul>\r
+    <li>8000 ~ 48000 Hz</li>\r
+   </ul></li>\r
+  </ul>\r
+  <p>To minimize the overhead of the audio input API, use the optimal channel type, sample type and sampling rate, which can be retrieved using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_channel()</span>, <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_type()</span> and <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_rate()</span> functions, respectively.</p>\r
+\r
+\r
+  <p>The following figures illustrate the general audio input states, and how the state changes when the audio input is interrupted by the system.</p>\r
+  <p class="figure">Figure: Audio input states</p>\r
+  <p align="center"><img src="../../images/audio_input.png" alt="Audio input states" /></p>\r
+  <p class="figure">Figure: Audio input states when interrupted by system</p>\r
+   <p align="center"><img src="../../images/audio_input_interrupt_state.png" alt="Audio input states when interrupted by system" /></p>\r
+\r
+  \r
+  <h2 id="play_pcm" name="play_pcm">Playing Uncompressed Audio</h2>\r
+<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. The Audio Output API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">wearable</a> applications) enables your application to play such data using output devices.</p>\r
+  <p>To play the audio PCM data, the application must call the <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> function to initialize the audio output handle.</p>\r
+  <p>Before playing audio, your application must define the following PCM data settings:</p>\r
+  <ul>\r
+   <li>Audio channels:\r
+    <ul>\r
+     <li>Mono (1 channel)</li>\r
+     <li>Stereo (2 channels)</li>\r
+    </ul> </li>\r
+   <li>Audio sample type:\r
+    <ul>\r
+     <li>Unsigned 8-bit PCM</li>\r
+     <li>Signed 16-bit little endian PCM</li>\r
+    </ul> </li>\r
+   <li>Audio sample rate:\r
+   <ul>\r
+    <li>8000 ~ 48000 Hz</li>\r
+   </ul> </li>\r
+  </ul>\r
+  \r
+  <p>The following figures illustrate the general audio output states, and how the state changes when the audio output is interrupted by the system.</p>\r
+  <p class="figure">Figure: Audio output states</p>\r
+  <p align="center"><img src="../../images/audio_output.png" alt="Audio output states" /></p>\r
+  <p class="figure">Figure: Audio output states when interrupted by system</p>\r
+  <p align="center"><img src="../../images/audio_output_interrupt_state.png" alt="Audio output states when interrupted by system" /></p>\r
+  \r
+  <h3 id="use" name="use">Using Audio Output</h3>\r
+  <p>For supporting various low-end Tizen devices, the application must follow certain guidelines:</p>\r
+  <ul>\r
+   <li>Do not use multiple instances of the Audio Output excessively.\r
+   <p>Using excessive multiple instances of the Audio Output has a negative effect on the application, because the audio data processing for re-sampling and mixing imposes a heavy burden on the system. </p> </li>\r
+   <li>Use device-preferred PCM format.\r
+   <ul>\r
+\r
+    <li><p>To reduce the processing overhead, use the target device-preferred PCM format (for example, use 16-bit little endian, 44.1 kHz, stereo for Wave and Wave M).</p></li>\r
+    <li><p>Using the preferred format reduces internal operations, such as converting audio samples from mono to stereo or re-sampling audio frequency to fit the target device&#39;s input sample rate.</p></li>\r
+   </ul> </li>\r
+   <li>Do not call the Audio Output functions too frequently.\r
+   <ul>\r
+    <li><p>The Audio Output functions require more time while repeated in the order of <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> &gt; <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> &gt; <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> &gt; <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span>. Therefore, keep the frequency of calling these functions to a minimum. Note that the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> functions are much faster than <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span>.</p></li>\r
+</ul></li>\r
+   <li>Reduce event delay and remove glitches.\r
+   <ul>\r
+    <li><p>The Audio Output API works recursively with events. The smaller the buffer size, the more often are events generated. If you use the Audio Output API with the smallest buffer and other resources (for example, a timer or sensor), the application is negatively influenced by the delay of the event. To prevent problems, set the write buffer size properly based on the other resources you need.</p></li>\r
+    <li><p>To guarantee the working events of the Audio Output API independently, an instance of the Audio Output API needs to be created and worked on the event thread.</p></li> \r
+   </ul> </li>\r
+   <li>Use double-buffering.\r
+   <ul>\r
+    <li><p>Use the double buffering mechanism to reduce latency. The mechanism works by first writing data twice before starting. After starting, whenever the listener (event) is called, you can write additional data.</p></li>\r
+   </ul> </li>\r
+  </ul>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/camera_n.htm b/org.tizen.guides/html/native/multimedia/camera_n.htm
index 65f191c..d1eff57 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/camera_n.htm
+++ b/org.tizen.guides/html/native/multimedia/camera_n.htm
@@ -1,109 +1,109 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Camera</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm">Camera Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Camera</h1>
-
- <p>Tizen offers basic camera features, including preview and capture. It allows you to capture still images with the device&#39;s internal camera and keep images on your target device.</p> 
- 
- <p class="figure">Figure: Camera image examples</p> 
- <p align="center"><img src="../../images/camera_images.png" alt="Camera image examples" /></p>
- 
-  <p>The main features of the Camera API include:</p> 
-  <ul> 
-   <li>Preview images in real time 
-    <ul> 
-     <li>Support for several pixel formats, such as NV12, NV12T, NV16, NV21, YUYV, UYVY, and YUV420P</li> 
-     <li>Preview at the frame rate</li> 
-     <li>Rotate and flip the preview</li> 
-    </ul> </li> 
-   <li>Capture and save images</li> 
-   <li>Control the following camera settings: 
-    <ul class="indent"> 
-     <li>Contrast</li> 
-     <li>Exposure</li> 
-     <li>Brightness</li> 
-     <li>Effects</li> 
-     <li>ISO</li> 
-     <li>White balance</li> 
-     <li>Zoom</li> 
-     <li>Flash</li> 
-     <li>Focus</li> 
-     <li>Metering</li> 
-        <li>EXIF tag (geo, orientation, software info and description)</li> 
-        <li>Scene mode, HDR, theater</li> 
-        <li>Image quality</li> 
-    </ul> </li> 
-  </ul>
-
- <p>Depending on the camera device type, the device can support different orientations, resolutions, or preview and capture formats. You can obtain this information from the device using the <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_resolution()</span>, <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_format()</span>, or other <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_xxx()</span> functions.</p>  
-  
-  <p>Since devices can have multiple camera sensors with different capabilities, create a <span style="font-family: Courier New,Courier,monospace">Camera</span> with a proper <span style="font-family: Courier New,Courier,monospace">camera_device_e</span> value, determining which camera sensor is used. Usually the primary sensor is located on the back side and the secondary sensor on the front side of the device. Once the camera sensor is selected, the selected sensor starts working.</p> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Simultaneous use of multiple camera sensors is not allowed.  <p>The target device often supports more functionalities than the Emulator.</p> <p>The behavior of the shutter sound can differ according to the legislation of each country.</p></td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-  <p>The following figure illustrates the camera state changes in the normal mode:</p> 
-  <p class="figure">Figure: Camera states in the normal mode</p> 
-  <p align="center"><img src="../../images/using_camera_states.png" alt="Camera states in the normal mode" /></p> 
-  
-  <p>To display the camera preview, use the <span style="font-family: Courier New,Courier,monospace">StartPreview()</span> function.</p> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Camera</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm">Camera Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Camera</h1>\r
+\r
+ <p>Tizen offers basic camera features, including preview and capture. It allows you to capture still images with the device&#39;s internal camera and keep images on your target device.</p> \r
+ \r
+ <p class="figure">Figure: Camera image examples</p> \r
+ <p align="center"><img src="../../images/camera_images.png" alt="Camera image examples" /></p>\r
+ \r
+  <p>The main features of the Camera API include:</p> \r
+  <ul> \r
+   <li>Preview images in real time \r
+    <ul> \r
+     <li>Support for several pixel formats, such as NV12, NV12T, NV16, NV21, YUYV, UYVY, and YUV420P</li> \r
+     <li>Preview at the frame rate</li> \r
+     <li>Rotate and flip the preview</li> \r
+    </ul> </li> \r
+   <li>Capture and save images</li> \r
+   <li>Control the following camera settings: \r
+    <ul class="indent"> \r
+     <li>Contrast</li> \r
+     <li>Exposure</li> \r
+     <li>Brightness</li> \r
+     <li>Effects</li> \r
+     <li>ISO</li> \r
+     <li>White balance</li> \r
+     <li>Zoom</li> \r
+     <li>Flash</li> \r
+     <li>Focus</li> \r
+     <li>Metering</li> \r
+        <li>EXIF tag (geo, orientation, software info and description)</li> \r
+        <li>Scene mode, HDR, theater</li> \r
+        <li>Image quality</li> \r
+    </ul> </li> \r
+  </ul>\r
+\r
+ <p>Depending on the camera device type, the device can support different orientations, resolutions, or preview and capture formats. You can obtain this information from the device using the <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_resolution()</span>, <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_preview_format()</span>, or other <span style="font-family: Courier New,Courier,monospace">camera_foreach_supported_xxx()</span> functions.</p>  \r
+  \r
+  <p>Since devices can have multiple camera sensors with different capabilities, create a <span style="font-family: Courier New,Courier,monospace">Camera</span> with a proper <span style="font-family: Courier New,Courier,monospace">camera_device_e</span> value, determining which camera sensor is used. Usually the primary sensor is located on the back side and the secondary sensor on the front side of the device. Once the camera sensor is selected, the selected sensor starts working.</p> \r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Simultaneous use of multiple camera sensors is not allowed.  <p>The target device often supports more functionalities than the Emulator.</p> <p>The behavior of the shutter sound can differ according to the legislation of each country.</p></td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+  <p>The following figure illustrates the camera state changes in the normal mode:</p> \r
+  <p class="figure">Figure: Camera states in the normal mode</p> \r
+  <p align="center"><img src="../../images/using_camera_states.png" alt="Camera states in the normal mode" /></p> \r
+  \r
+  <p>To display the camera preview, use the <span style="font-family: Courier New,Courier,monospace">StartPreview()</span> function.</p> \r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/image_util_n.htm b/org.tizen.guides/html/native/multimedia/image_util_n.htm
index 481d65c..519f941 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/image_util_n.htm
+++ b/org.tizen.guides/html/native/multimedia/image_util_n.htm
@@ -1,228 +1,228 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Image Util</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm">Image Util Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Image Util</h1>
-
-<p>Tizen offers the following image processing features:</p>
- 
- <ul>
- <li>Conversion
- <p>You can change the colorspace format. The following tables define the supported formats.</p>
-
-   <table> 
-   <caption>
-     Table: RGB pixel formats 
-   </caption> 
-   <tbody> 
-    <tr> 
-               <th>Label</th> 
-               <th>FOURCC in hex</th> 
-               <th>Bits per pixel</th> 
-               <th>Description</th>     
-    </tr> 
-    <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#BI_RGB" target="blank">RGB</a></td> 
-     <td>0x32424752</td> 
-        <td>1, 4, 8, 16, 24, 32</td> 
-        <td>Alias for BI_RGB</td> 
-    </tr> 
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">RGBA</a></td> 
-     <td>0x41424752</td> 
-        <td>16, 32</td> 
-        <td>Raw RGB with alpha. Sample precision and packing is arbitrary and determined using bit masks for each component, as for BI_BITFIELDS.</td> 
-    </tr>
-   </tbody> 
-  </table> 
- 
-    <table> 
-   <caption>
-     Table: Packed YUV formats 
-   </caption> 
-   <tbody> 
-    <tr> 
-               <th>Label</th> 
-               <th>FOURCC in hex</th> 
-               <th>Bits per pixel</th> 
-               <th>Description</th>     
-    </tr> 
-    <tr> 
-     <td><a href="http://www.fourcc.org/yuv.php#UYVY" target="blank">UYVY</a></td> 
-     <td>0x59565955</td> 
-        <td>16</td> 
-        <td>YUV 4:2:2 (Y sample at every pixel, U and V sampled at every second pixel horizontally on each line). A macropixel contains 2 pixels in 1 u_int32.</td> 
-    </tr> 
-     <tr> 
-     <td><a href="http://www.fourcc.org/yuv.php#YUYV" target="blank">YUYV</a></td> 
-     <td>0x56595559</td> 
-        <td>16</td> 
-        <td>Duplicate of YUY2.</td> 
-    </tr>
-   </tbody> 
-  </table>                     
-
-    <table> 
-   <caption>
-     Table: Planar YUV formats 
-   </caption> 
-   <tbody> 
-    <tr> 
-               <th>Label</th> 
-               <th>FOURCC in hex</th> 
-               <th>Bits per pixel</th> 
-               <th>Description</th>     
-    </tr> 
-    <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#BI_RGB" target="blank">YV16</a></td> 
-     <td>0x36315659</td> 
-        <td>16</td> 
-        <td>8-bit Y plane followed by 8-bit 2x1 subsampled V and U planes.</td> 
-    </tr> 
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">YV12</a></td> 
-     <td>0x32315659</td> 
-        <td>12</td> 
-        <td>8-bit Y plane followed by 8-bit 2x2 subsampled V and U planes.</td> 
-    </tr>
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">I420</a></td> 
-     <td>0x30323449</td> 
-        <td>12</td> 
-        <td>8-bit Y plane followed by 8-bit 2x2 subsampled U and V planes.</td> 
-    </tr>
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">NV12</a></td> 
-     <td>0x3231564E</td> 
-        <td>12</td> 
-        <td>8-bit Y plane followed by an interleaved U/V plane with 2x2 subsampling.</td> 
-    </tr>
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">NV21</a></td> 
-     <td>0x3132564E</td> 
-        <td>12</td> 
-        <td>As NV12 with U and V reversed in the interleaved plane.</td> 
-    </tr>      
-   </tbody> 
-  </table> 
- </li>
- <li>Resizing
-<p>You can change the image resolution.</p></li>
-<li>Rotation
-<p>You can change the image angle around the x or y axis.</p></li>
-<li>Crop
-<p>You can remove the outer parts of an image or change the aspect ratio.</p></li></ul>
-
- 
-<p>You can decode and encode images with the following formats:</p>
-
-<ul><li>Bitmap formats:
-<ul><li>YUV420, YUV422, RGB888, RGBA8888, BGRA8888, ARGB8888</li></ul></li>
-<li>Input image formats for decoding: 
-<ul><li>Only JPEG is supported when using image util</li></ul></li>
-<li>Output image formats for encoding: 
-<ul><li>JPEG</li>
-<li>Quality vs. size
-
-    <table> 
-   <caption>
-     Table: Quality and size comparison
-   </caption> 
-   <tbody> 
-    <tr> 
-               <th>Image</th> 
-               <th>Quality</th> 
-               <th>Size (bytes)</th> 
-               <th>Compression ratio</th>
-               <th>Description</th>     
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_highest.png" alt="Highest quality image" /></td> 
-     <td>Highest quality (Q = 100)</td> 
-        <td>83,261</td> 
-        <td>2.6:1</td> 
-         <td>Extremely minor artifacts</td>
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_high.png" alt="High quality image" /></td> 
-     <td>High quality (Q = 50)</td> 
-        <td>15,138</td> 
-        <td>15:1</td> 
-         <td>Initial signs of subimage artifacts</td>
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_medium.png" alt="Medium quality image" /></td> 
-     <td>Medium quality (Q = 25)</td> 
-        <td>9,553</td> 
-        <td>23:1</td> 
-         <td>Stronger artifacts; loss of high-frequency information</td>
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_low.png" alt="Low quality image" /></td> 
-     <td>Low quality (Q = 10)</td> 
-        <td>4,787</td> 
-        <td>46:1</td> 
-         <td>Severe high frequency loss; artifacts on subimage boundaries (&quot;macroblocking&quot;) are obvious</td>
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_lowest.png" alt="Lowest quality image" /></td> 
-     <td>Lowest quality</td> 
-        <td></td> 
-        <td></td> 
-         <td></td>
-    </tr>      
-   </tbody> 
-  </table>     
-</li></ul></li></ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Image Util</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm">Image Util Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Image Util</h1>\r
+\r
+<p>Tizen offers the following image processing features:</p>\r
+ \r
+ <ul>\r
+ <li>Conversion\r
+ <p>You can change the colorspace format. The following tables define the supported formats.</p>\r
+\r
+   <table> \r
+   <caption>\r
+     Table: RGB pixel formats \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+               <th>Label</th> \r
+               <th>FOURCC in hex</th> \r
+               <th>Bits per pixel</th> \r
+               <th>Description</th>     \r
+    </tr> \r
+    <tr> \r
+     <td><a href="http://www.fourcc.org/rgb.php#BI_RGB" target="blank">RGB</a></td> \r
+     <td>0x32424752</td> \r
+        <td>1, 4, 8, 16, 24, 32</td> \r
+        <td>Alias for BI_RGB</td> \r
+    </tr> \r
+     <tr> \r
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">RGBA</a></td> \r
+     <td>0x41424752</td> \r
+        <td>16, 32</td> \r
+        <td>Raw RGB with alpha. Sample precision and packing is arbitrary and determined using bit masks for each component, as for BI_BITFIELDS.</td> \r
+    </tr>\r
+   </tbody> \r
+  </table> \r
+ \r
+    <table> \r
+   <caption>\r
+     Table: Packed YUV formats \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+               <th>Label</th> \r
+               <th>FOURCC in hex</th> \r
+               <th>Bits per pixel</th> \r
+               <th>Description</th>     \r
+    </tr> \r
+    <tr> \r
+     <td><a href="http://www.fourcc.org/yuv.php#UYVY" target="blank">UYVY</a></td> \r
+     <td>0x59565955</td> \r
+        <td>16</td> \r
+        <td>YUV 4:2:2 (Y sample at every pixel, U and V sampled at every second pixel horizontally on each line). A macropixel contains 2 pixels in 1 u_int32.</td> \r
+    </tr> \r
+     <tr> \r
+     <td><a href="http://www.fourcc.org/yuv.php#YUYV" target="blank">YUYV</a></td> \r
+     <td>0x56595559</td> \r
+        <td>16</td> \r
+        <td>Duplicate of YUY2.</td> \r
+    </tr>\r
+   </tbody> \r
+  </table>                     \r
+\r
+    <table> \r
+   <caption>\r
+     Table: Planar YUV formats \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+               <th>Label</th> \r
+               <th>FOURCC in hex</th> \r
+               <th>Bits per pixel</th> \r
+               <th>Description</th>     \r
+    </tr> \r
+    <tr> \r
+     <td><a href="http://www.fourcc.org/rgb.php#BI_RGB" target="blank">YV16</a></td> \r
+     <td>0x36315659</td> \r
+        <td>16</td> \r
+        <td>8-bit Y plane followed by 8-bit 2x1 subsampled V and U planes.</td> \r
+    </tr> \r
+     <tr> \r
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">YV12</a></td> \r
+     <td>0x32315659</td> \r
+        <td>12</td> \r
+        <td>8-bit Y plane followed by 8-bit 2x2 subsampled V and U planes.</td> \r
+    </tr>\r
+     <tr> \r
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">I420</a></td> \r
+     <td>0x30323449</td> \r
+        <td>12</td> \r
+        <td>8-bit Y plane followed by 8-bit 2x2 subsampled U and V planes.</td> \r
+    </tr>\r
+     <tr> \r
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">NV12</a></td> \r
+     <td>0x3231564E</td> \r
+        <td>12</td> \r
+        <td>8-bit Y plane followed by an interleaved U/V plane with 2x2 subsampling.</td> \r
+    </tr>\r
+     <tr> \r
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">NV21</a></td> \r
+     <td>0x3132564E</td> \r
+        <td>12</td> \r
+        <td>As NV12 with U and V reversed in the interleaved plane.</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+ </li>\r
+ <li>Resizing\r
+<p>You can change the image resolution.</p></li>\r
+<li>Rotation\r
+<p>You can change the image angle around the x or y axis.</p></li>\r
+<li>Crop\r
+<p>You can remove the outer parts of an image or change the aspect ratio.</p></li></ul>\r
+\r
+ \r
+<p>You can decode and encode images with the following formats:</p>\r
+\r
+<ul><li>Bitmap formats:\r
+<ul><li>YUV420, YUV422, RGB888, RGBA8888, BGRA8888, ARGB8888</li></ul></li>\r
+<li>Input image formats for decoding: \r
+<ul><li>Only JPEG is supported when using image util</li></ul></li>\r
+<li>Output image formats for encoding: \r
+<ul><li>JPEG</li>\r
+<li>Quality vs. size\r
+\r
+    <table> \r
+   <caption>\r
+     Table: Quality and size comparison\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+               <th>Image</th> \r
+               <th>Quality</th> \r
+               <th>Size (bytes)</th> \r
+               <th>Compression ratio</th>\r
+               <th>Description</th>     \r
+    </tr> \r
+    <tr> \r
+     <td><img src="../../images/quality_highest.png" alt="Highest quality image" /></td> \r
+     <td>Highest quality (Q = 100)</td> \r
+        <td>83,261</td> \r
+        <td>2.6:1</td> \r
+         <td>Extremely minor artifacts</td>\r
+    </tr> \r
+    <tr> \r
+     <td><img src="../../images/quality_high.png" alt="High quality image" /></td> \r
+     <td>High quality (Q = 50)</td> \r
+        <td>15,138</td> \r
+        <td>15:1</td> \r
+         <td>Initial signs of subimage artifacts</td>\r
+    </tr> \r
+    <tr> \r
+     <td><img src="../../images/quality_medium.png" alt="Medium quality image" /></td> \r
+     <td>Medium quality (Q = 25)</td> \r
+        <td>9,553</td> \r
+        <td>23:1</td> \r
+         <td>Stronger artifacts; loss of high-frequency information</td>\r
+    </tr> \r
+    <tr> \r
+     <td><img src="../../images/quality_low.png" alt="Low quality image" /></td> \r
+     <td>Low quality (Q = 10)</td> \r
+        <td>4,787</td> \r
+        <td>46:1</td> \r
+         <td>Severe high frequency loss; artifacts on subimage boundaries (&quot;macroblocking&quot;) are obvious</td>\r
+    </tr> \r
+    <tr> \r
+     <td><img src="../../images/quality_lowest.png" alt="Lowest quality image" /></td> \r
+     <td>Lowest quality</td> \r
+        <td></td> \r
+        <td></td> \r
+         <td></td>\r
+    </tr>      \r
+   </tbody> \r
+  </table>     \r
+</li></ul></li></ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/media_codecs_n.htm b/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
index ed8fda8..d600b8a 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
+++ b/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
@@ -1,75 +1,75 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Media Codec</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm">Media Codec Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Media Codec</h1>
-
-<p>Media codec provides interfaces for encoding and decoding audio and video data.</p> 
-
-<p>To use codecs:</p>  
-  
-<ol><li><p>Create a handle for the codec instance with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_create()</span> function. After a successful handle creation, your system can use the codec. </p></li>
-
-<li><p>Set the codec configuration with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_codec()</span>, and <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_vdec_info()</span> or <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_venc_info()</span> functions. </p>
-<p>You can also prepare for the available ready state with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_prepare()</span> function.</p></li>
-
-<li><p>Decode and encode with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_process_input()</span> and <span style="font-family: Courier New,Courier,monospace;">mediacodec_get_output()</span> functions.</p></li></ol>
-
-<p>A single <span style="font-family: Courier New,Courier,monospace;">MediaCodec</span> instance handles 1 specific type of data (such as aac audio or H.264 video), and can encode or decode. The codec operates on &quot;raw&quot; data, so strip off any file headers (such as ID3 tags).</p>
-
-  
-  <p>The following figures illustrate the general media state changes.</p> 
-  <p class="figure">Figure: Media state changes</p> 
-  <p align="center"><img src="../../images/codec_state.png" alt="Media state changes" /></p> 
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Media Codec</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm">Media Codec Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Media Codec</h1>\r
+\r
+<p>Media codec provides interfaces for encoding and decoding audio and video data.</p> \r
+\r
+<p>To use codecs:</p>  \r
+  \r
+<ol><li><p>Create a handle for the codec instance with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_create()</span> function. After a successful handle creation, your system can use the codec. </p></li>\r
+\r
+<li><p>Set the codec configuration with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_codec()</span>, and <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_vdec_info()</span> or <span style="font-family: Courier New,Courier,monospace;">mediacodec_set_venc_info()</span> functions. </p>\r
+<p>You can also prepare for the available ready state with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_prepare()</span> function.</p></li>\r
+\r
+<li><p>Decode and encode with the <span style="font-family: Courier New,Courier,monospace;">mediacodec_process_input()</span> and <span style="font-family: Courier New,Courier,monospace;">mediacodec_get_output()</span> functions.</p></li></ol>\r
+\r
+<p>A single <span style="font-family: Courier New,Courier,monospace;">MediaCodec</span> instance handles 1 specific type of data (such as aac audio or H.264 video), and can encode or decode. The codec operates on &quot;raw&quot; data, so strip off any file headers (such as ID3 tags).</p>\r
+\r
+  \r
+  <p>The following figures illustrate the general media state changes.</p> \r
+  <p class="figure">Figure: Media state changes</p> \r
+  <p align="center"><img src="../../images/codec_state.png" alt="Media state changes" /></p> \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/media_tools_n.htm b/org.tizen.guides/html/native/multimedia/media_tools_n.htm
index 99b2046..46fae74 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/media_tools_n.htm
+++ b/org.tizen.guides/html/native/multimedia/media_tools_n.htm
@@ -1,165 +1,165 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Media Tool</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm">Media Tool Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Media Tool</h1>
-
- <p>Media tool enables your application to manage various media handles.</p> 
-  <p>The main features of the Media Tool API include:</p> 
-  <ul> 
-   <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle to specify video or audio information.</p>
-   <p>You can set and get video or audio information using the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle. </p></li>   
-   <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle to include metadata (such as pts, dts, and duration) and allocate a buffer to the heap or TBM surface.</p>
-   <p>You can set and get the metadata using the created <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle. Some <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> metadata are NOT filled after creating the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle: pts, dts, duration, extradata, codec data, codec data size, and buffer flags.</p>
-   </li>   
-  </ul> 
-  
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle is created by the caller, who can set and get the video or audio information. The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle creates the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle and allocates the buffer. The caller can set and get the metadata with the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle.</p>
-
-<p>The following table describes the reference count design of the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle.</p>
-
-<table border="1"> 
-   <caption>
-     Table: Media format handle reference count design
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Function</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Reference count number</th> 
-        <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_format_h fmt1, fmt2, tmp;</span><br/>
-<span style="font-family: Courier New,Courier,monospace;">media_packet_h pkt1, pkt2;</span><br/>
-<span style="font-family: Courier New,Courier,monospace;">media_format_create(&amp;fmt1);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>
-        <td>Define the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> and <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handles.
-        <p>Create the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> handle and set the <span style="font-family: Courier New,Courier,monospace;">media_format_video_mime()</span> or <span style="font-family: Courier New,Courier,monospace;">media_format_audio_mime()</span> function.</p></td>
-    </tr>
-<tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_create(&amp;pkt1, fmt1);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>
-        <td>After the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function, you must use the <span style="font-family: Courier New,Courier,monospace;">media_format_unref()</span> function, because the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function increases the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> reference count.</td>
-    </tr>
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt1);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>
-        <td>If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> is currently owned by the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> only.</td>
-    </tr>
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_copy(pkt1, &amp;pkt2);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>
-        <td>Copy the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> metadata to <span style="font-family: Courier New,Courier,monospace;">pkt2</span>, except the allocated buffer and buffer size. <span style="font-family: Courier New,Courier,monospace;">pkt2</span> refers to <span style="font-family: Courier New,Courier,monospace;">fmt1</span>, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is increased.</td>
-    </tr>
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &amp;tmp);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>
-        <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is increased by the <span style="font-family: Courier New,Courier,monospace;">media_packet_get_format()</span> function.</td>
-    </tr>
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime(tmp, ...);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>
-        <td>If you try to modify the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data (call the <span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime()</span> function) for <span style="font-family: Courier New,Courier,monospace;">fmt1</span> (=<span style="font-family: Courier New,Courier,monospace;">tmp</span>), the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is bigger than 1, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> cannot be modified. 
-        <p>To modify the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data, call the <span style="font-family: Courier New,Courier,monospace;">media_format_make_writable()</span> function.</p></td>
-    </tr>
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_format_make_writable(tmp, &amp;fmt2);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>
-        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
-        <td>If called, the <span style="font-family: Courier New,Courier,monospace;">tmp</span> (<span style="font-family: Courier New,Courier,monospace;">fmt1</span>) <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. Creates the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> handle and copies the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data to <span style="font-family: Courier New,Courier,monospace;">fmt2</span>.</td>
-    </tr>
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime(fmt2, ...);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>
-        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
-        <td><span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, which means that you can modify the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> data.</td>
-    </tr>
-
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_set_format(pkt2, fmt2);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2
-        <br/>
-        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 2</td>
-        <td>Set the modified <span style="font-family: Courier New,Courier,monospace;">fmt2</span> to the <span style="font-family: Courier New,Courier,monospace;">pkt2</span> handle. You must call the <span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2)</span> function.</td>
-    </tr>
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(tmp);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1
-        <br/>
-        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 2</td>
-        <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &amp;tmp)</span> function call.</td>
-    </tr>      
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1<br/>
-        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
-        <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_set_format(pkt2, fmt2)</span> function call.</td>
-    </tr>      
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt1);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1 &gt; finalize<br/>
-        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
-        <td>If you destroy the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> handle, the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> becomes 0, <span style="font-family: Courier New,Courier,monospace;">fmt1</span> is freed.</td>
-    </tr>      
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt2);</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1  &gt; finalize<br/>
-        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 0 &gt; finalize</td>
-        <td>If you destroy the <span style="font-family: Courier New,Courier,monospace;">pkt2</span> handle, the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> becomes 0, <span style="font-family: Courier New,Courier,monospace;">fmt2</span> is freed.</td>
-    </tr>              
-   </tbody> 
-  </table> 
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Media Tool</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm">Media Tool Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Media Tool</h1>\r
+\r
+ <p>Media tool enables your application to manage various media handles.</p> \r
+  <p>The main features of the Media Tool API include:</p> \r
+  <ul> \r
+   <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle to specify video or audio information.</p>\r
+   <p>You can set and get video or audio information using the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle. </p></li>   \r
+   <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle to include metadata (such as pts, dts, and duration) and allocate a buffer to the heap or TBM surface.</p>\r
+   <p>You can set and get the metadata using the created <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle. Some <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> metadata are NOT filled after creating the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle: pts, dts, duration, extradata, codec data, codec data size, and buffer flags.</p>\r
+   </li>   \r
+  </ul> \r
+  \r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle is created by the caller, who can set and get the video or audio information. The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle creates the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle and allocates the buffer. The caller can set and get the metadata with the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle.</p>\r
+\r
+<p>The following table describes the reference count design of the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle.</p>\r
+\r
+<table border="1"> \r
+   <caption>\r
+     Table: Media format handle reference count design\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Function</th> \r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Reference count number</th> \r
+        <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> \r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_h fmt1, fmt2, tmp;</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace;">media_packet_h pkt1, pkt2;</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace;">media_format_create(&amp;fmt1);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>\r
+        <td>Define the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> and <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handles.\r
+        <p>Create the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> handle and set the <span style="font-family: Courier New,Courier,monospace;">media_format_video_mime()</span> or <span style="font-family: Courier New,Courier,monospace;">media_format_audio_mime()</span> function.</p></td>\r
+    </tr>\r
+<tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_create(&amp;pkt1, fmt1);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>\r
+        <td>After the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function, you must use the <span style="font-family: Courier New,Courier,monospace;">media_format_unref()</span> function, because the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function increases the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> reference count.</td>\r
+    </tr>\r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt1);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>\r
+        <td>If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> is currently owned by the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> only.</td>\r
+    </tr>\r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_copy(pkt1, &amp;pkt2);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>\r
+        <td>Copy the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> metadata to <span style="font-family: Courier New,Courier,monospace;">pkt2</span>, except the allocated buffer and buffer size. <span style="font-family: Courier New,Courier,monospace;">pkt2</span> refers to <span style="font-family: Courier New,Courier,monospace;">fmt1</span>, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is increased.</td>\r
+    </tr>\r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &amp;tmp);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>\r
+        <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is increased by the <span style="font-family: Courier New,Courier,monospace;">media_packet_get_format()</span> function.</td>\r
+    </tr>\r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime(tmp, ...);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>\r
+        <td>If you try to modify the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data (call the <span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime()</span> function) for <span style="font-family: Courier New,Courier,monospace;">fmt1</span> (=<span style="font-family: Courier New,Courier,monospace;">tmp</span>), the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is bigger than 1, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> cannot be modified. \r
+        <p>To modify the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data, call the <span style="font-family: Courier New,Courier,monospace;">media_format_make_writable()</span> function.</p></td>\r
+    </tr>\r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_make_writable(tmp, &amp;fmt2);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>\r
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>\r
+        <td>If called, the <span style="font-family: Courier New,Courier,monospace;">tmp</span> (<span style="font-family: Courier New,Courier,monospace;">fmt1</span>) <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. Creates the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> handle and copies the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data to <span style="font-family: Courier New,Courier,monospace;">fmt2</span>.</td>\r
+    </tr>\r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime(fmt2, ...);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>\r
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>\r
+        <td><span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, which means that you can modify the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> data.</td>\r
+    </tr>\r
+\r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_set_format(pkt2, fmt2);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2\r
+        <br/>\r
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 2</td>\r
+        <td>Set the modified <span style="font-family: Courier New,Courier,monospace;">fmt2</span> to the <span style="font-family: Courier New,Courier,monospace;">pkt2</span> handle. You must call the <span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2)</span> function.</td>\r
+    </tr>\r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(tmp);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1\r
+        <br/>\r
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 2</td>\r
+        <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &amp;tmp)</span> function call.</td>\r
+    </tr>      \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1<br/>\r
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>\r
+        <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_set_format(pkt2, fmt2)</span> function call.</td>\r
+    </tr>      \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt1);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1 &gt; finalize<br/>\r
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>\r
+        <td>If you destroy the <span style="font-family: Courier New,Courier,monospace;">pkt1</span> handle, the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> becomes 0, <span style="font-family: Courier New,Courier,monospace;">fmt1</span> is freed.</td>\r
+    </tr>      \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt2);</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1  &gt; finalize<br/>\r
+        <span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 0 &gt; finalize</td>\r
+        <td>If you destroy the <span style="font-family: Courier New,Courier,monospace;">pkt2</span> handle, the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. If the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> becomes 0, <span style="font-family: Courier New,Courier,monospace;">fmt2</span> is freed.</td>\r
+    </tr>              \r
+   </tbody> \r
+  </table> \r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm b/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
index b3f0469..ad6e406 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
+++ b/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
@@ -1,207 +1,207 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Metadata Extractor</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-        <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm">Metadata Extractor Tutorials</a></li>
-               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Mobile Native</a></li>
-               <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Metadata Extractor</h1>
-<p>Media files, such as mp3 and mp4 files, contain metadata. Metadata extractor enables you to extract metadata from the media files.</p>
- 
- <p class="figure">Figure: Getting metadata</p> 
- <p align="center"><img src="../../images/metadata.png" alt="Getting metadata" /></p>
- 
-  <p>The metadata extractor can only be used with video and audio files only. It is not supported in the image files.</p>
-  <p>The following table lists the extractable metadata.</p>
-  
-  <table> 
-   <caption>
-     Table: Metadata extractor attributes 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DURATION</span></td> 
-     <td>Duration of the content</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_BITRATE</span></td> 
-     <td>Bitrate of the video content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_FPS</span></td> 
-     <td>FPS of the video content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_WIDTH</span></td> 
-     <td>Width of the video content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_HEIGHT</span></td> 
-     <td>Height of the video content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_HAS_VIDEO</span></td> 
-     <td>Whether the content has video stream</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_BITRATE</span></td> 
-     <td>Bitrate of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_CHANNELS</span></td> 
-     <td>Channel of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_SAMPLERATE</span></td> 
-     <td>Sample rate of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_BITPERSAMPLE</span></td> 
-     <td>Bit per sample of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_HAS_AUDIO</span></td> 
-     <td>Whether the content has audio stream</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ARTIST</span></td> 
-     <td>Artist of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_TITLE</span></td> 
-     <td>Title of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALBUM</span></td> 
-     <td>Album of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALBUM_ARTIST</span></td> 
-     <td>Album artist of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_GENRE</span></td> 
-     <td>Genre of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUTHOR</span></td> 
-     <td>Author of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_COPYRIGHT</span></td> 
-     <td>Copyright of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DATE</span></td> 
-     <td>Date of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DESCRIPTION</span></td> 
-     <td>Description of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_COMMENT</span></td> 
-     <td>Comment about the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_TRACK_NUM</span></td> 
-     <td>Track number of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_CLASSIFICATION</span></td> 
-     <td>Classification of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_RATING</span></td> 
-     <td>Rating of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_LONGITUDE</span></td> 
-     <td>Longitude of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_LATITUDE</span></td> 
-     <td>Latitude of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALTITUDE</span></td> 
-     <td>Altitude of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_CONDUCTOR</span></td> 
-     <td>Conductor of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_UNSYNCLYRICS</span></td> 
-     <td>Asynchronous lyrics of the content</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_SYNCLYRICS_NUM</span></td> 
-     <td>Synchronous lyrics of the content</td> 
-    </tr>      
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_RECDATE</span></td> 
-     <td>Recorded date of the content</td> 
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ROTATE</span></td> 
-     <td>Orientation of the content</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Metadata Extractor</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+        <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm">Metadata Extractor Tutorials</a></li>\r
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Mobile Native</a></li>\r
+               <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Metadata Extractor</h1>\r
+<p>Media files, such as mp3 and mp4 files, contain metadata. Metadata extractor enables you to extract metadata from the media files.</p>\r
+ \r
+ <p class="figure">Figure: Getting metadata</p> \r
+ <p align="center"><img src="../../images/metadata.png" alt="Getting metadata" /></p>\r
+ \r
+  <p>The metadata extractor can only be used with video and audio files only. It is not supported in the image files.</p>\r
+  <p>The following table lists the extractable metadata.</p>\r
+  \r
+  <table> \r
+   <caption>\r
+     Table: Metadata extractor attributes \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DURATION</span></td> \r
+     <td>Duration of the content</td> \r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_BITRATE</span></td> \r
+     <td>Bitrate of the video content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_FPS</span></td> \r
+     <td>FPS of the video content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_WIDTH</span></td> \r
+     <td>Width of the video content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_VIDEO_HEIGHT</span></td> \r
+     <td>Height of the video content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_HAS_VIDEO</span></td> \r
+     <td>Whether the content has video stream</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_BITRATE</span></td> \r
+     <td>Bitrate of the audio content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_CHANNELS</span></td> \r
+     <td>Channel of the audio content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_SAMPLERATE</span></td> \r
+     <td>Sample rate of the audio content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUDIO_BITPERSAMPLE</span></td> \r
+     <td>Bit per sample of the audio content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_HAS_AUDIO</span></td> \r
+     <td>Whether the content has audio stream</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ARTIST</span></td> \r
+     <td>Artist of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_TITLE</span></td> \r
+     <td>Title of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALBUM</span></td> \r
+     <td>Album of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALBUM_ARTIST</span></td> \r
+     <td>Album artist of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_GENRE</span></td> \r
+     <td>Genre of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_AUTHOR</span></td> \r
+     <td>Author of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_COPYRIGHT</span></td> \r
+     <td>Copyright of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DATE</span></td> \r
+     <td>Date of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_DESCRIPTION</span></td> \r
+     <td>Description of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_COMMENT</span></td> \r
+     <td>Comment about the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_TRACK_NUM</span></td> \r
+     <td>Track number of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_CLASSIFICATION</span></td> \r
+     <td>Classification of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_RATING</span></td> \r
+     <td>Rating of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_LONGITUDE</span></td> \r
+     <td>Longitude of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_LATITUDE</span></td> \r
+     <td>Latitude of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ALTITUDE</span></td> \r
+     <td>Altitude of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_CONDUCTOR</span></td> \r
+     <td>Conductor of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_UNSYNCLYRICS</span></td> \r
+     <td>Asynchronous lyrics of the content</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_SYNCLYRICS_NUM</span></td> \r
+     <td>Synchronous lyrics of the content</td> \r
+    </tr>      \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_RECDATE</span></td> \r
+     <td>Recorded date of the content</td> \r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">METADATA_ROTATE</span></td> \r
+     <td>Orientation of the content</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  \r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm b/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
index 5a8c0b4..c7d342a 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
+++ b/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
@@ -1,99 +1,99 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Multimedia</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-<div id="container"><div id="contents"><div class="content">
-<h1>Multimedia</h1>
-<p>Multimedia features capture and play or display still images, video, and sounds.</p> 
-  <p>The main multimedia features are:</p> 
-  <ul>
-       <li><a href="audio_io_n.htm">Audio I/O</a>
-       <p>Enables you to record and play uncompressed PCM audio data.</p></li>
-       <li><a href="camera_n.htm">Camera</a> 
-       <p>Enables you to launch the camera and control or adjust camera sensors of the device to preview or capture still images.</p></li>
-       <li><a href="image_util_n.htm">Image Util</a> 
-       <p>Enables you to view and process (decode, encode, convert, and compress) bitmap images in the <span style="font-family: Courier New,Courier,monospace">JPEG</span> format. </p></li>
-       <li><a href="media_codecs_n.htm">Media Codec</a> 
-       <p>Enables you to use codecs to encode and decode video and audio data.</p></li>        
-    <li><a href="media_controller_n.htm">Media Controller</a> 
-    <p>Enables you to communicate between the media controller server and the media controller client.</p></li>   <li><a href="media_tools_n.htm">Media Tool</a> 
-       <p>Enables you to use media tools to manage various media handles.</p></li>     
-       <li><a href="media_vision_n.htm">Media Vision</a> 
-       <p>Enables you to use create and read barcodes.</p></li>        
-    <li><a href="metadata_editor_n.htm">Metadata Editor</a> 
-    <p>Enables you to edit the metadata of several popular audio formats.</p></li>     
-       <li><a href="metadata_extractor_n.htm">Metadata Extractor</a> <p>Enables you to extract metadata from the media files.</p></li>
-       <li><a href="player_n.htm">Player</a>
-       <p>Enables you to play audio and manage the state of the media player.</p></li> 
-       <li><a href="radio_n.htm">Radio</a>
-       <p>Enables you to control the radio hardware on your system.</p></li>
-       <li><a href="recorder_n.htm">Recorder</a> 
-       <p>Enables you to record audio data to a file with compressed or uncompressed format and generate compressed video files with video data from camera and audio data from audio input device.</p></li>
-       <li><a href="thumbnail_util_n.htm">Thumbnail Util</a> 
-    <p>Enables you to create a thumbnail from an input media file.</p></li>    
-       <li><a href="tone_player_n.htm">Tone Player</a> 
-       <p>Enables you to play tones.</p></li>
-       <li><a href="wav_player_n.htm">WAV Player</a> 
-       <p>Enables you to play WAV files.</p></li>      
-       <li><a href="sound_manager_n.htm">Sound Manager</a> 
-       <p>Enables you to control the audio behavior of your application.</p></li>
-       <li><a href="screen_mirroring_n.htm">Screen Mirroring Sink</a> 
-       <p>Enables you to mirror the device screen and sound to another device wirelessly.</p></li>     
-</ul>
- 
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-       <ul>
-       <li><a href="video_util_n.htm">Video Util</a> 
-       <p>Enables you to use video transcoding features, such as multi-format codec and output format.</p></li>
-       </ul>
-
-       
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Multimedia</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Multimedia</h1>\r
+<p>Multimedia features capture and play or display still images, video, and sounds.</p> \r
+  <p>The main multimedia features are:</p> \r
+  <ul>\r
+       <li><a href="audio_io_n.htm">Audio I/O</a>\r
+       <p>Enables you to record and play uncompressed PCM audio data.</p></li>\r
+       <li><a href="camera_n.htm">Camera</a> \r
+       <p>Enables you to launch the camera and control or adjust camera sensors of the device to preview or capture still images.</p></li>\r
+       <li><a href="image_util_n.htm">Image Util</a> \r
+       <p>Enables you to view and process (decode, encode, convert, and compress) bitmap images in the <span style="font-family: Courier New,Courier,monospace">JPEG</span> format. </p></li>\r
+       <li><a href="media_codecs_n.htm">Media Codec</a> \r
+       <p>Enables you to use codecs to encode and decode video and audio data.</p></li>        \r
+    <li><a href="media_controller_n.htm">Media Controller</a> \r
+    <p>Enables you to communicate between the media controller server and the media controller client.</p></li>   <li><a href="media_tools_n.htm">Media Tool</a> \r
+       <p>Enables you to use media tools to manage various media handles.</p></li>     \r
+       <li><a href="media_vision_n.htm">Media Vision</a> \r
+       <p>Enables you to use create and read barcodes.</p></li>        \r
+    <li><a href="metadata_editor_n.htm">Metadata Editor</a> \r
+    <p>Enables you to edit the metadata of several popular audio formats.</p></li>     \r
+       <li><a href="metadata_extractor_n.htm">Metadata Extractor</a> <p>Enables you to extract metadata from the media files.</p></li>\r
+       <li><a href="player_n.htm">Player</a>\r
+       <p>Enables you to play audio and manage the state of the media player.</p></li> \r
+       <li><a href="radio_n.htm">Radio</a>\r
+       <p>Enables you to control the radio hardware on your system.</p></li>\r
+       <li><a href="recorder_n.htm">Recorder</a> \r
+       <p>Enables you to record audio data to a file with compressed or uncompressed format and generate compressed video files with video data from camera and audio data from audio input device.</p></li>\r
+       <li><a href="thumbnail_util_n.htm">Thumbnail Util</a> \r
+    <p>Enables you to create a thumbnail from an input media file.</p></li>    \r
+       <li><a href="tone_player_n.htm">Tone Player</a> \r
+       <p>Enables you to play tones.</p></li>\r
+       <li><a href="wav_player_n.htm">WAV Player</a> \r
+       <p>Enables you to play WAV files.</p></li>      \r
+       <li><a href="sound_manager_n.htm">Sound Manager</a> \r
+       <p>Enables you to control the audio behavior of your application.</p></li>\r
+</ul>\r
+ \r
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>\r
+       <ul>\r
+       <li><a href="screen_mirroring_n.htm">Screen Mirroring Sink</a> \r
+       <p>Enables you to mirror the device screen and sound to another device wirelessly.</p></li>     \r
+       <li><a href="video_util_n.htm">Video Util</a> \r
+       <p>Enables you to use video transcoding features, such as multi-format codec and output format.</p></li>\r
+       </ul>\r
+\r
+       \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/player_n.htm b/org.tizen.guides/html/native/multimedia/player_n.htm
index 97a8858..b1dbac0 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/player_n.htm
@@ -1,191 +1,191 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Player</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-                       <li><a href="#audio">Handling Audio</a></li>
-                       <li><a href="#video">Handling Video</a></li>
-                       <li><a href="#features">Features</a></li>
-                       <li><a href="#stream">Streaming Playback</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm">Player Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-<div id="container"><div id="contents"><div class="content">
-<h1>Player</h1>
-<p>You can play audio, video, and tones in your application.</p> 
-  <p>The main player features are:</p> 
-  <ul>
-    <li><a href="#audio">Handling audio</a> 
-       <p>Enables you to play audio and control the playback.</p></li>
-       <li><a href="#video">Handling video</a>
-       <p>Enables you to play video.</p></li>
-       <li><a href="#features">Using player features</a>
-       <p>Enables you control the player volume, sound mode, display, stream info, and audio effects.</p></li>
-       <li><a href="#stream">Streaming playback</a>
-       <p>Enables you to set specific URLs for streaming media playback.</p></li>      
-</ul>
-   
-<p>The Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications) enables your application to play video and sound. It supports 3 content formats: file, network stream, and memory. It also provides the following features:</p>
-
-<ul><li>Operating general controls for the <a href="#audio">audio</a> or <a href="#video">video</a> content, such as play, pause, resume, and stop</li> 
-<li>Moving the audio or video content based on time</li>
-<li>Controlling the volume of the audio or video content based on each instance</li>
-<li>Looping the audio or video content</li>
-<li>Getting information of the audio or video content</li>
-<li>Playing multiple <a href="#stream">audio streams</a></li></ul>
-
-<p>The maximum count of a player instance is limited by the system and multimedia resources. The maximum count is a system-wide count and it can be applied depending on the CPU model, CPU speed, CPU core number, CPU load from other applications, and the available memory. Thus, the exact count can be smaller than the maximum count, in which case the prepare functions fail. A reasonable working player count is under 10.</p>
-<p>The player works based on the audio session manager policy. This means that an application can be interrupted by another application if a resource is in conflict or it has an audio policy rule to follow. You can change the session's property directly by using the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications).</p>
-<p>The callback interface specifies the functions used to notify the player status during playback events. Since the player engine works asynchronously, you must implement this listener to ensure that the player flows correctly. When each player operation is completed, an event is generated, and the <span style="font-family: Courier New,Courier,monospace;">player_completed_cb()</span> function is called. If an error occurs in the player engine, you are notified if you have registered the <span style="font-family: Courier New,Courier,monospace;">player_error_cb()</span> callback.</p>
-<p>If the player state is changed to <span style="font-family: Courier New,Courier,monospace;">ready</span>, the multimedia resource is available and you can get content information of the media. You can also get content information in a playing state in some cases of playback streaming.</p>
-
- 
-  <h2 id="audio" name="audio">Handling Audio</h2> 
-  <p>Tizen enables your application to play audio and provides controlling functions for using audio resources. The resources can be media files stored on the device or they can be streamed from a streaming server (defined with a URI) through the network.</p> 
-  
-  <p>The audio formats your application can use include MP3, AAC, WMA, M4A, 3GA, WAV, and AMR. The available formats depend on the target device.</p>
-
-  
-  <p>The <span style="font-family: Courier New,Courier,monospace;">player_interrupted_cb()</span> function is called when an application is interrupted by another application. The player is paused or moved to an idle state according to the audio policy. You must check the state of the current instance and take appropriate action. If the player is changed to a paused state due to an interruption, the <span style="font-family: Courier New,Courier,monospace;">PLAYER_INTERRUPTED_COMPLETED</span> can be called at the end of the interruption. For example, if the application is interrupted by a call, alarm, or notification, the completed message is posted. However, no messages are posted if the interruption has other causes. Make sure you handle the application accordingly when audio switching occurs between various applications.</p>
-  
-  <p>Multiple instances of the player can be used to play several audio data streams concurrently. This means that your application can play multiple uncompressed audio files at the same time.</p> 
-
-  <p>The following figure illustrates the general player state changes:</p> 
-  <p class="figure">Figure: Player state changes</p> 
-  <p align="center"><img src="../../images/using_players_state_changes.png" alt="Player state changes" style="display: block; text-align: center; margin-left: auto; margin-right: auto;"/></p> 
-  <p>The following figure illustrates what happens when the player gets interrupted by the system:</p> 
-  <p class="figure">Figure: Player states when interrupted by system</p> 
-  <p align="center"><img alt="Player states when interrupted by system" src="../../images/using_players_interrupted_state.png"/></p> 
-  
-  <h2 id="video" name="video">Handling Video</h2> 
-  <p>Tizen enables your application to play video, and it uses its own user surface. The surface requires a drawing area, so you have to get an overlay region and set it to the player instance to display the drawing area:</p> 
-  <ol> 
-     <li>Get the overlay region or Evas from the Graphics module.
-        <p>You can display video on a UI layer with the Evas object as well as on an overlay layer.</p></li> 
-     <li>Create the player instance.</li> 
-     <li>Set the surface type and display a handle to the player using the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function.</li> 
-    </ol>
-  <p>The video formats your application can use include: </p> 
-  <ul> 
-   <li>WMV, ASF, MP4, 3GP, AVI, MKV, OGG
-   <p>The available formats depend on the target device.</p></li> 
-  </ul> 
-
-  <p>In case of a video interruption, the state can be <span style="font-family: Courier New,Courier,monospace;">READY</span> due to the resource restriction in the system. </p> 
-  
-  <p>The following figure illustrates what happens when the player gets interrupted by the system.</p> 
-<p class="figure">Figure: Player states when interrupted by system</p> 
-<p align="center"><img alt="Player states when interrupted by system" src="../../images/using_videoplayer_interrupted_state.png"/></p>
-<h2 id="features" name="features">Features</h2>
-The main features of the Player API include:
-<ul>
-  <li>Player
-  <p>Use the Player API to control audio and video stream.</p>
-  <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, properties such as volume, sound type, latency mode, mute mode, and looping mode can be adjusted.</p>
-    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm">Player Tutorial</a>.</p>
-    </li>
-  <li>Display
-<p>Use the Display API to play video stream.</p>
-<p>After changing to the <span style="font-family: Courier New,Courier,monospace;">IDLE</span> state, create the display handle and set the display type.</p>
-<p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#set_parameters">Setting Display Parameters</a>.</p>
-</li>
-  <li>Stream Info
-  <p>Use the Stream Info API to play video stream.</p>
-    <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, you can retrieve stream information.</p>
-    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#get_stream">Getting Stream Information</a>.</p>
-    </li>
-
-  <li>Audio Effect
-    <p>Use the Audio Effect API to set and get the audio effect.</p>
-<p>After changing to the <span style="font-family: Courier New,Courier,monospace;">IDLE</span> state, you can adjust the audio effect.</p>
-    </li>
-  <li>Subtitle
-    <p>Use the Subtitle API to read the subtitle track.</p>
-    <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, the subtitle can be read.</p>
-    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#insert">Inserting Subtitles</a>.</p>
-    </li>
-  </ul>
- 
-<h2 id="stream" name="stream">Streaming Playback</h2> 
-  <p>You can set specific URLs for streaming media playback by using the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function.</p> 
-  <p>Both Hypertext Transfer Protocol (HTTP) and Real Time Streaming Protocol (RTSP) protocols support streaming media   playback. The HTTP request header supports the playback of both complete and download-in-progress media files. The index table (atoms) must be moved in front of the file for progressive download.</p> 
- 
- <p>In case of HTTP streaming, buffering can happen when the player is prepared. You can get the status using the <span style="font-family: Courier New,Courier,monospace;">player_set_buffering_cb()</span> function.</p>
- 
- <h3 id="protocol" name="protocol">Streaming Protocol Features</h3>
-<p>The following table lists the streaming protocol features supported by the player.</p>
-
-  <table> 
-   <caption>
-     Table: Supported streaming protocol features 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Streaming protocol</th> 
-     <th>Supported feature</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="3">Hypertext Transfer Protocol (HTTP)</td> 
-     <td>HTTP Streaming</td> 
-    </tr> 
-    <tr> 
-     <td>HTTP Live Streaming</td> 
-    </tr> 
-    <tr> 
-     <td>HTTP Progressive Download Play</td> 
-    </tr>      
-    <tr> 
-     <td>Real Time Streaming Protocol (RTSP)</td> 
-     <td>RTSP Streaming</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Player</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                       <li><a href="#audio">Handling Audio</a></li>\r
+                       <li><a href="#video">Handling Video</a></li>\r
+                       <li><a href="#features">Features</a></li>\r
+                       <li><a href="#stream">Streaming Playback</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm">Player Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Player</h1>\r
+<p>You can play audio, video, and tones in your application.</p> \r
+  <p>The main player features are:</p> \r
+  <ul>\r
+    <li><a href="#audio">Handling audio</a> \r
+       <p>Enables you to play audio and control the playback.</p></li>\r
+       <li><a href="#video">Handling video</a>\r
+       <p>Enables you to play video.</p></li>\r
+       <li><a href="#features">Using player features</a>\r
+       <p>Enables you control the player volume, sound mode, display, stream info, and audio effects.</p></li>\r
+       <li><a href="#stream">Streaming playback</a>\r
+       <p>Enables you to set specific URLs for streaming media playback.</p></li>      \r
+</ul>\r
+   \r
+<p>The Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications) enables your application to play video and sound. It supports 3 content formats: file, network stream, and memory. It also provides the following features:</p>\r
+\r
+<ul><li>Operating general controls for the <a href="#audio">audio</a> or <a href="#video">video</a> content, such as play, pause, resume, and stop</li> \r
+<li>Moving the audio or video content based on time</li>\r
+<li>Controlling the volume of the audio or video content based on each instance</li>\r
+<li>Looping the audio or video content</li>\r
+<li>Getting information of the audio or video content</li>\r
+<li>Playing multiple <a href="#stream">audio streams</a></li></ul>\r
+\r
+<p>The maximum count of a player instance is limited by the system and multimedia resources. The maximum count is a system-wide count and it can be applied depending on the CPU model, CPU speed, CPU core number, CPU load from other applications, and the available memory. Thus, the exact count can be smaller than the maximum count, in which case the prepare functions fail. A reasonable working player count is under 10.</p>\r
+<p>The player works based on the audio session manager policy. This means that an application can be interrupted by another application if a resource is in conflict or it has an audio policy rule to follow. You can change the session's property directly by using the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications).</p>\r
+<p>The callback interface specifies the functions used to notify the player status during playback events. Since the player engine works asynchronously, you must implement this listener to ensure that the player flows correctly. When each player operation is completed, an event is generated, and the <span style="font-family: Courier New,Courier,monospace;">player_completed_cb()</span> function is called. If an error occurs in the player engine, you are notified if you have registered the <span style="font-family: Courier New,Courier,monospace;">player_error_cb()</span> callback.</p>\r
+<p>If the player state is changed to <span style="font-family: Courier New,Courier,monospace;">ready</span>, the multimedia resource is available and you can get content information of the media. You can also get content information in a playing state in some cases of playback streaming.</p>\r
+\r
+ \r
+  <h2 id="audio" name="audio">Handling Audio</h2> \r
+  <p>Tizen enables your application to play audio and provides controlling functions for using audio resources. The resources can be media files stored on the device or they can be streamed from a streaming server (defined with a URI) through the network.</p> \r
+  \r
+  <p>The audio formats your application can use include MP3, AAC, WMA, M4A, 3GA, WAV, and AMR. The available formats depend on the target device.</p>\r
+\r
+  \r
+  <p>The <span style="font-family: Courier New,Courier,monospace;">player_interrupted_cb()</span> function is called when an application is interrupted by another application. The player is paused or moved to an idle state according to the audio policy. You must check the state of the current instance and take appropriate action. If the player is changed to a paused state due to an interruption, the <span style="font-family: Courier New,Courier,monospace;">PLAYER_INTERRUPTED_COMPLETED</span> can be called at the end of the interruption. For example, if the application is interrupted by a call, alarm, or notification, the completed message is posted. However, no messages are posted if the interruption has other causes. Make sure you handle the application accordingly when audio switching occurs between various applications.</p>\r
+  \r
+  <p>Multiple instances of the player can be used to play several audio data streams concurrently. This means that your application can play multiple uncompressed audio files at the same time.</p> \r
+\r
+  <p>The following figure illustrates the general player state changes:</p> \r
+  <p class="figure">Figure: Player state changes</p> \r
+  <p align="center"><img src="../../images/using_players_state_changes.png" alt="Player state changes" style="display: block; text-align: center; margin-left: auto; margin-right: auto;"/></p> \r
+  <p>The following figure illustrates what happens when the player gets interrupted by the system:</p> \r
+  <p class="figure">Figure: Player states when interrupted by system</p> \r
+  <p align="center"><img alt="Player states when interrupted by system" src="../../images/using_players_interrupted_state.png"/></p> \r
+  \r
+  <h2 id="video" name="video">Handling Video</h2> \r
+  <p>Tizen enables your application to play video, and it uses its own user surface. The surface requires a drawing area, so you have to get an overlay region and set it to the player instance to display the drawing area:</p> \r
+  <ol> \r
+     <li>Get the overlay region or Evas from the Graphics module.\r
+        <p>You can display video on a UI layer with the Evas object as well as on an overlay layer.</p></li> \r
+     <li>Create the player instance.</li> \r
+     <li>Set the surface type and display a handle to the player using the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function.</li> \r
+    </ol>\r
+  <p>The video formats your application can use include: </p> \r
+  <ul> \r
+   <li>WMV, ASF, MP4, 3GP, AVI, MKV, OGG\r
+   <p>The available formats depend on the target device.</p></li> \r
+  </ul> \r
+\r
+  <p>In case of a video interruption, the state can be <span style="font-family: Courier New,Courier,monospace;">READY</span> due to the resource restriction in the system. </p> \r
+  \r
+  <p>The following figure illustrates what happens when the player gets interrupted by the system.</p> \r
+<p class="figure">Figure: Player states when interrupted by system</p> \r
+<p align="center"><img alt="Player states when interrupted by system" src="../../images/using_videoplayer_interrupted_state.png"/></p>\r
+<h2 id="features" name="features">Features</h2>\r
+The main features of the Player API include:\r
+<ul>\r
+  <li>Player\r
+  <p>Use the Player API to control audio and video stream.</p>\r
+  <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, properties such as volume, sound type, latency mode, mute mode, and looping mode can be adjusted.</p>\r
+    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm">Player Tutorial</a>.</p>\r
+    </li>\r
+  <li>Display\r
+<p>Use the Display API to play video stream.</p>\r
+<p>After changing to the <span style="font-family: Courier New,Courier,monospace;">IDLE</span> state, create the display handle and set the display type.</p>\r
+<p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#set_parameters">Setting Display Parameters</a>.</p>\r
+</li>\r
+  <li>Stream Info\r
+  <p>Use the Stream Info API to play video stream.</p>\r
+    <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, you can retrieve stream information.</p>\r
+    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#get_stream">Getting Stream Information</a>.</p>\r
+    </li>\r
+\r
+  <li>Audio Effect\r
+    <p>Use the Audio Effect API to set and get the audio effect.</p>\r
+<p>After changing to the <span style="font-family: Courier New,Courier,monospace;">IDLE</span> state, you can adjust the audio effect.</p>\r
+    </li>\r
+  <li>Subtitle\r
+    <p>Use the Subtitle API to read the subtitle track.</p>\r
+    <p>After changing to the <span style="font-family: Courier New,Courier,monospace;">READY</span> state, the subtitle can be read.</p>\r
+    <p>To learn about these features, see the <a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm#insert">Inserting Subtitles</a>.</p>\r
+    </li>\r
+  </ul>\r
+ \r
+<h2 id="stream" name="stream">Streaming Playback</h2> \r
+  <p>You can set specific URLs for streaming media playback by using the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function.</p> \r
+  <p>Both Hypertext Transfer Protocol (HTTP) and Real Time Streaming Protocol (RTSP) protocols support streaming media   playback. The HTTP request header supports the playback of both complete and download-in-progress media files. The index table (atoms) must be moved in front of the file for progressive download.</p> \r
+ \r
+ <p>In case of HTTP streaming, buffering can happen when the player is prepared. You can get the status using the <span style="font-family: Courier New,Courier,monospace;">player_set_buffering_cb()</span> function.</p>\r
+ \r
+ <h3 id="protocol" name="protocol">Streaming Protocol Features</h3>\r
+<p>The following table lists the streaming protocol features supported by the player.</p>\r
+\r
+  <table> \r
+   <caption>\r
+     Table: Supported streaming protocol features \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Streaming protocol</th> \r
+     <th>Supported feature</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="3">Hypertext Transfer Protocol (HTTP)</td> \r
+     <td>HTTP Streaming</td> \r
+    </tr> \r
+    <tr> \r
+     <td>HTTP Live Streaming</td> \r
+    </tr> \r
+    <tr> \r
+     <td>HTTP Progressive Download Play</td> \r
+    </tr>      \r
+    <tr> \r
+     <td>Real Time Streaming Protocol (RTSP)</td> \r
+     <td>RTSP Streaming</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/radio_n.htm b/org.tizen.guides/html/native/multimedia/radio_n.htm
index 3add0fb..7319310 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/radio_n.htm
+++ b/org.tizen.guides/html/native/multimedia/radio_n.htm
@@ -1,76 +1,76 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Radio</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm">Radio Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Radio</h1>
-
-<p>Tizen provides functions for controlling radio hardware on your system.</p>
-
-<p>The main features of the Radio API include:</p>  
-  
-<ul>
-  <li>Switching the radio on and off</li>
-  <li>Seeking radio frequency</li>
-  <li>Scanning radio signals</li>
-  <li>Setting the state of the radio</li>
-</ul>
-  
-<p>A handle for radio instance is created using the <span style="font-family: Courier New,Courier,monospace;">radio_create()</span> function. A successful creation of the handle requires a radio tuner. You can switch the radio on and off using the <span style="font-family: Courier New,Courier,monospace;">radio_start()</span> and <span style="font-family: Courier New,Courier,monospace;">radio_stop()</span> functions. Select the radio frequency using the <span style="font-family: Courier New,Courier,monospace;">radio_set_frequency()</span> function or <span style="font-family: Courier New,Courier,monospace;">radio_seek_up()</span> and <span style="font-family: Courier New,Courier,monospace;">radio_seek_down()</span> functions.</p>
-
-<p>The Radio API allows only one instance at the time. Radio playback can be interrupted by another radio application.</p>
-
-<p>The following figure illustrates the general radio state changes.</p>
-
-  <p class="figure">Figure: Radio state changes</p> 
-  <p align="center"><img src="../../images/radio_state_changes.png" alt="Radio state changes" /></p> 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Radio</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm">Radio Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Radio</h1>\r
+\r
+<p>Tizen provides functions for controlling radio hardware on your system.</p>\r
+\r
+<p>The main features of the Radio API include:</p>  \r
+  \r
+<ul>\r
+  <li>Switching the radio on and off</li>\r
+  <li>Seeking radio frequency</li>\r
+  <li>Scanning radio signals</li>\r
+  <li>Setting the state of the radio</li>\r
+</ul>\r
+  \r
+<p>A handle for radio instance is created using the <span style="font-family: Courier New,Courier,monospace;">radio_create()</span> function. A successful creation of the handle requires a radio tuner. You can switch the radio on and off using the <span style="font-family: Courier New,Courier,monospace;">radio_start()</span> and <span style="font-family: Courier New,Courier,monospace;">radio_stop()</span> functions. Select the radio frequency using the <span style="font-family: Courier New,Courier,monospace;">radio_set_frequency()</span> function or <span style="font-family: Courier New,Courier,monospace;">radio_seek_up()</span> and <span style="font-family: Courier New,Courier,monospace;">radio_seek_down()</span> functions.</p>\r
+\r
+<p>The Radio API allows only one instance at the time. Radio playback can be interrupted by another radio application.</p>\r
+\r
+<p>The following figure illustrates the general radio state changes.</p>\r
+\r
+  <p class="figure">Figure: Radio state changes</p> \r
+  <p align="center"><img src="../../images/radio_state_changes.png" alt="Radio state changes" /></p> \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/recorder_n.htm b/org.tizen.guides/html/native/multimedia/recorder_n.htm
index 4f9a14a..b3e54b7 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/recorder_n.htm
+++ b/org.tizen.guides/html/native/multimedia/recorder_n.htm
@@ -1,94 +1,94 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Recorder</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm">Recorder Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Recorder</h1>
-
-<p>Tizen offers basic recorder features, including an audio and video recorder.</p>
- 
-  <p>The main features of the Recorder API include:</p> 
-  <ul> 
-    <li>Basic recording functionalities (record, stop, pause, cancel, and mute).
-       </li>   
-    <li>Setting the maximum recording time and size</li>
-       <li>Controlling the system volume level</li>    
-  </ul>
-  
-  <p>The following file formats are supported:</p>
-       <ul> 
-    <li>Video: <span style="font-family: Courier New,Courier,monospace">mp4</span> and <span style="font-family: Courier New,Courier,monospace">3gp</span></li>
-       <li>Audio: <span style="font-family: Courier New,Courier,monospace">m4a</span> and <span style="font-family: Courier New,Courier,monospace">amr</span></li> 
-   </ul>
-  <p>Valid input sources consist of internal and external microphones and a camera. The used input audio or video source depends on the currently connected audio path and camera module of the device. The operations of the Recorder APIs can work in asynchronous mode, which means that callbacks are required to pass an event notification to the application. The recorder APIs in the video recorder serve as the interface with the hardware. Input is processed through that handle.</p>
-
-  <p>During testing, you can use the Emulator to imitate audio or video recording, as long as your computer has a proper input source device.</p> 
-
-  <p>The following figure illustrates the general recorder state changes.</p> 
-  <p class="figure">Figure: Recorder states</p> 
-  <p align="center"><img src="../../images/using_recorder_states.png" alt="Recorder states" /></p> 
-  
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">While running applications on the Emulator, audio-video synchronization errors can occur due to the computer performance.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Recorder</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm">Recorder Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Recorder</h1>\r
+\r
+<p>Tizen offers basic recorder features, including an audio and video recorder.</p>\r
+ \r
+  <p>The main features of the Recorder API include:</p> \r
+  <ul> \r
+    <li>Basic recording functionalities (record, stop, pause, cancel, and mute).\r
+       </li>   \r
+    <li>Setting the maximum recording time and size</li>\r
+       <li>Controlling the system volume level</li>    \r
+  </ul>\r
+  \r
+  <p>The following file formats are supported:</p>\r
+       <ul> \r
+    <li>Video: <span style="font-family: Courier New,Courier,monospace">mp4</span> and <span style="font-family: Courier New,Courier,monospace">3gp</span></li>\r
+       <li>Audio: <span style="font-family: Courier New,Courier,monospace">m4a</span> and <span style="font-family: Courier New,Courier,monospace">amr</span></li> \r
+   </ul>\r
+  <p>Valid input sources consist of internal and external microphones and a camera. The used input audio or video source depends on the currently connected audio path and camera module of the device. The operations of the Recorder APIs can work in asynchronous mode, which means that callbacks are required to pass an event notification to the application. The recorder APIs in the video recorder serve as the interface with the hardware. Input is processed through that handle.</p>\r
+\r
+  <p>During testing, you can use the Emulator to imitate audio or video recording, as long as your computer has a proper input source device.</p> \r
+\r
+  <p>The following figure illustrates the general recorder state changes.</p> \r
+  <p class="figure">Figure: Recorder states</p> \r
+  <p align="center"><img src="../../images/using_recorder_states.png" alt="Recorder states" /></p> \r
+  \r
+    <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">While running applications on the Emulator, audio-video synchronization errors can occur due to the computer performance.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm b/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
old mode 100755 (executable)
new mode 100644 (file)
index 2cb4135..d8deaad
--- a/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
+++ b/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
@@ -16,7 +16,7 @@
 
  <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
     </div>
 
     <div id="toc_border"><div id="toc">
@@ -24,7 +24,6 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm">Screen Mirroring Sink Tutorial</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Wearable Native</a></li>
         </ul>
     </div></div>
 </div>
@@ -33,6 +32,18 @@
 <h1>Screen Mirroring Sink</h1>
 
  <p>You can mirror the device screen and sound to another device wirelessly using the screen mirroring feature. It follows the Wi-Fi Display Technical Specification and supports the feature as a sink, which receives shared data from a source device that supports the Wi-Fi Display, and displays it.</p>
+
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
   <p>The main features of the Screen Mirroring Sink API include:</p>
   <ul>
    <li>Managing the connection to the screen mirroring source
diff --git a/org.tizen.guides/html/native/multimedia/sound_manager_n.htm b/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
index 8ce710a..3bee14b 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
+++ b/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
@@ -1,121 +1,121 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Sound Manager</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-                       <li><a href="#volume">Volume Control</a></li>
-                       <li><a href="#type">Sound Session Types</a></li>
-                       <li><a href="#query">Sound Device Query</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm">Sound Manager Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Sound Manager</h1>
-
-<p>The sound manager allows you to control the audio behavior of your application.</p>
-
-<p>The main features of the Sound Manager API include:</p>
-
-<ul>
-<li><a href="#volume">Volume control</a>
-<p>Control the output volume by managing the sound type and its volume level.</p></li>
-
-<li><a href="#type">Sound session types</a>
-<p>Set the sound session type, which specifies the behavior of your application sound across the system.</p></li>
-
-<li><a href="#query">Sound device query</a>
-<p>Using the query functions, you can get various information, such as the state of the sound devices.</p></li>
-</ul>
-
-<h2 id="volume" name="volume">Volume Control</h2>
-
-<p>You can manage the volume level of a particular sound type. With the Sound Manager API, you can set and get a volume level and a maximum volume level of a particular sound type. </p>
-
-<p>Normally, if there is an active output stream, the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_sound_type()</span> function returns the sound type of that stream, and if not, it returns an error message. However, you can set a particular sound type as current using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_current_sound_type()</span> function. This enables other applications, such as a volume application, to manage the volume level of the particular sound type even though it is not currently playing.</p>
-
- <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Setting the current sound type affects the entire system. When no longer needed, unset the current sound type using the <span style="font-family: Courier New,Courier,monospace">sound_manager_unset_current_sound_type()</span> function.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2 id="type" name="type">Sound Session Types</h2>
-
-<p>The Sound Manager API offers 5 different sound session types: media, alarm, notification, emergency and VOIP. According to these types, your application&#39;s audio works in a specific way to mix with sounds of other applications or to respond to an audio interruption made by another application.</p>
-
-<p>The alarm, notification, emergency, and VOIP sessions are prioritized over the media session. For example, when an alarm is activated while you are playing a media file, the system pauses the media session, and the alarm session gets the permission to play its sound.</p>
-
-<p>You can set options for how to start a new media session or respond to an audio interruption during an active media session using the <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_start_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">wearable</a> applications) and <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_during_play_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">wearable</a> applications) enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.</p>
-
-<p>You can also set options for resuming the media session when the interruption ends by using the <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_resumption_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">wearable</a> applications). The sound system notifies the media session when the interruption ends, and you are able to resume your session.</p>
-
-<h2 id="query" name="query">Sound Device Query</h2>
-<p>The audio behavior of your application must differ in accordance with the various sound devices that are connected.</p>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_device_list()</span> function to get the list handle of the currently connected sound devices. With the sequential search of this device list, you can get the device handle of each device on the list. You can use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_next_device()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_get_prev_device()</span> functions for a sequential search of the device list.</p>
-
-<p>With the device handle, you can query the sound device information with the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">sound_manger_get_device_type()</span>: To get the device type.</li>
-<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_io_direction()</span>: To get the device IO direction.</li>
-<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_id()</span>: To get the device ID.</li>
-<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_name()</span>: To get the device name.</li>
-<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_state()</span>: To get the device state.</li></ul>
-
-<p>To get a notification when the sound device connection or information has changed, register the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_connected_cb()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_information_changed_cb()</span> callbacks. The initial state of the connected sound device is deactivated.</p>
-
-<p>When getting a sound device list or setting callbacks, use the <span style="font-family: Courier New, Courier, monospace">sound_device_mask_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">wearable</a> applications) to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need.</p>   
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Sound Manager</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                       <li><a href="#volume">Volume Control</a></li>\r
+                       <li><a href="#type">Sound Session Types</a></li>\r
+                       <li><a href="#query">Sound Device Query</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm">Sound Manager Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Sound Manager</h1>\r
+\r
+<p>The sound manager allows you to control the audio behavior of your application.</p>\r
+\r
+<p>The main features of the Sound Manager API include:</p>\r
+\r
+<ul>\r
+<li><a href="#volume">Volume control</a>\r
+<p>Control the output volume by managing the sound type and its volume level.</p></li>\r
+\r
+<li><a href="#type">Sound session types</a>\r
+<p>Set the sound session type, which specifies the behavior of your application sound across the system.</p></li>\r
+\r
+<li><a href="#query">Sound device query</a>\r
+<p>Using the query functions, you can get various information, such as the state of the sound devices.</p></li>\r
+</ul>\r
+\r
+<h2 id="volume" name="volume">Volume Control</h2>\r
+\r
+<p>You can manage the volume level of a particular sound type. With the Sound Manager API, you can set and get a volume level and a maximum volume level of a particular sound type. </p>\r
+\r
+<p>Normally, if there is an active output stream, the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_sound_type()</span> function returns the sound type of that stream, and if not, it returns an error message. However, you can set a particular sound type as current using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_current_sound_type()</span> function. This enables other applications, such as a volume application, to manage the volume level of the particular sound type even though it is not currently playing.</p>\r
+\r
+ <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Setting the current sound type affects the entire system. When no longer needed, unset the current sound type using the <span style="font-family: Courier New,Courier,monospace">sound_manager_unset_current_sound_type()</span> function.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<h2 id="type" name="type">Sound Session Types</h2>\r
+\r
+<p>The Sound Manager API offers 5 different sound session types: media, alarm, notification, emergency and VOIP. According to these types, your application&#39;s audio works in a specific way to mix with sounds of other applications or to respond to an audio interruption made by another application.</p>\r
+\r
+<p>The alarm, notification, emergency, and VOIP sessions are prioritized over the media session. For example, when an alarm is activated while you are playing a media file, the system pauses the media session, and the alarm session gets the permission to play its sound.</p>\r
+\r
+<p>You can set options for how to start a new media session or respond to an audio interruption during an active media session using the <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_start_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">wearable</a> applications) and <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_during_play_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">wearable</a> applications) enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.</p>\r
+\r
+<p>You can also set options for resuming the media session when the interruption ends by using the <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_resumption_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">wearable</a> applications). The sound system notifies the media session when the interruption ends, and you are able to resume your session.</p>\r
+\r
+<h2 id="query" name="query">Sound Device Query</h2>\r
+<p>The audio behavior of your application must differ in accordance with the various sound devices that are connected.</p>\r
+\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_current_device_list()</span> function to get the list handle of the currently connected sound devices. With the sequential search of this device list, you can get the device handle of each device on the list. You can use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_next_device()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_get_prev_device()</span> functions for a sequential search of the device list.</p>\r
+\r
+<p>With the device handle, you can query the sound device information with the following functions:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">sound_manger_get_device_type()</span>: To get the device type.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_io_direction()</span>: To get the device IO direction.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_id()</span>: To get the device ID.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_name()</span>: To get the device name.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">sound_manager_get_device_state()</span>: To get the device state.</li></ul>\r
+\r
+<p>To get a notification when the sound device connection or information has changed, register the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_connected_cb()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_information_changed_cb()</span> callbacks. The initial state of the connected sound device is deactivated.</p>\r
+\r
+<p>When getting a sound device list or setting callbacks, use the <span style="font-family: Courier New, Courier, monospace">sound_device_mask_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">wearable</a> applications) to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need.</p>   \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/tone_player_n.htm b/org.tizen.guides/html/native/multimedia/tone_player_n.htm
index 4576ef1..86089ab 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/tone_player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/tone_player_n.htm
@@ -1,69 +1,69 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Tone Player</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm">Tone Player Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Tone Player</h1>
-
-<p>Tizen enables your application to play a tone or a list of tones.</p> 
-  <p>You can generate tones in 2 ways: </p> 
-  <ul> 
-   <li><p>Specify the frequency values. You can specify either 1 or 2 frequencies.</p></li> 
-   <li><p>Use a DTMF (Dual Tone Multi Frequency) preset frequency value of the <span style="font-family: Courier New,Courier,monospace;">tone_type_e</span>.</p></li> 
-  </ul> 
-
-  <p>The following figures illustrate the general tone player states, and how the state changes when your application calls the Tone player API.</p> 
-  <p class="figure">Figure: Tone player states</p> 
-  <p align="center"><img src="../../images/tone.png" alt="Tone player states" /></p>    
-
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Tone Player</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm">Tone Player Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Tone Player</h1>\r
+\r
+<p>Tizen enables your application to play a tone or a list of tones.</p> \r
+  <p>You can generate tones in 2 ways: </p> \r
+  <ul> \r
+   <li><p>Specify the frequency values. You can specify either 1 or 2 frequencies.</p></li> \r
+   <li><p>Use a DTMF (Dual Tone Multi Frequency) preset frequency value of the <span style="font-family: Courier New,Courier,monospace;">tone_type_e</span>.</p></li> \r
+  </ul> \r
+\r
+  <p>The following figures illustrate the general tone player states, and how the state changes when your application calls the Tone player API.</p> \r
+  <p class="figure">Figure: Tone player states</p> \r
+  <p align="center"><img src="../../images/tone.png" alt="Tone player states" /></p>    \r
+\r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/video_util_n.htm b/org.tizen.guides/html/native/multimedia/video_util_n.htm
index bb09088..51f91dd 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/video_util_n.htm
+++ b/org.tizen.guides/html/native/multimedia/video_util_n.htm
@@ -1,171 +1,171 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Video Util</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm">Video Util Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util API for Mobile Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Video Util</h1>
-
-<p>Tizen offers the following video transcoding features:</p>
-
- <ul><li>Make container and codec type changes
-<p>Content compatibility is supported between same devices.</p></li>
-<li>Make scale and frame rate changes
-<p>Since video file size and format changes are possible, there is attachment flexibility for email, MMS, and SMS messaging. You can also extract a thumbnail from certain video chapters, and chapter previews are available.</p></li>
-<li>Trim
-<p>A trim chapter is available in the video editor.</p></li></ul> 
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>The following figure shows the result of the video file size change (due to scaling and container and codec format change).</p>
-
- <p class="figure">Figure: Transcoder</p> 
- <p align="center"><img src="../../images/transcoder.png" alt="Transcoder" /></p>
-
- 
- <p>The following table lists the supported audio and video codecs (decoder).</p>
- 
- <table border="1">
-  <caption>Table: Decoders</caption>
-  <tbody>
-    <tr>
-      <th style="text-align:center;margin-left:auto;margin-right:auto;">Audio codec</th>
-         <th style="text-align:center;margin-left:auto;margin-right:auto;">Video codec</th>
-    </tr>
-       <tr>
-         <td>AAC LC</td>
-         <td>MPEG-1</td>
-    </tr>
-    <tr>
-      <td>AAC+</td>
-         <td>MPEG-4 part 2</td>
-    </tr>
-       <tr>
-      <td>Enhanced AAC+</td>
-         <td>H.263</td>
-    </tr>
-       <tr>
-      <td>MP3</td>
-         <td>H.264</td>
-       </tr>
-       <tr>
-      <td>WMA7 / 8</td>
-         <td>VC-1 (WMV9)</td>
-    </tr>
-       <tr>
-      <td>WAV</td>
-         <td>On2 VP3</td>
-    </tr>
-       <tr>
-      <td>Vorbis</td>
-         <td>Theora</td>
-    </tr>
-       <tr>
-      <td>AMR-NB</td>
-         <td> </td>
-    </tr>
-       <tr>
-      <td>AMR-WB</td>
-         <td> </td> 
-    </tr>
-  </tbody>
-</table>
-
- <p>The following table lists the supported audio and video codecs (encoder).</p>
-
- <table border="1">
-  <caption>Table: Encoders</caption>
-  <tbody>
-    <tr>
-      <th style="text-align:center;margin-left:auto;margin-right:auto;">Audio codec</th>
-         <th style="text-align:center;margin-left:auto;margin-right:auto;">Video codec</th>
-     </tr>
-       <tr>    
-         <td>AAC LC</td>
-      <td>MPEG-1</td>
-    </tr>
-    <tr>
-      <td>Vorbis</td>
-         <td>MPEG-4 part 2</td>
-    </tr>
-       <tr>
-      <td>AMR-NB</td>
-         <td>H.263</td>
-       </tr>
-       <tr>
-         <td> </td>
-         <td>H.264</td>
-       </tr>
-       <tr>
-         <td> </td>
-      <td>VC-1 (WMV9)</td>
-    </tr>
-       <tr>
-         <td> </td>
-      <td>On2 VP3</td>
-    </tr>
-       <tr>
-         <td> </td>
-      <td>Theora</td>
-       </tr>
-  </tbody>
-</table>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Video Util</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm">Video Util Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util API for Mobile Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Video Util</h1>\r
+\r
+<p>Tizen offers the following video transcoding features:</p>\r
+\r
+ <ul><li>Make container and codec type changes\r
+<p>Content compatibility is supported between same devices.</p></li>\r
+<li>Make scale and frame rate changes\r
+<p>Since video file size and format changes are possible, there is attachment flexibility for email, MMS, and SMS messaging. You can also extract a thumbnail from certain video chapters, and chapter previews are available.</p></li>\r
+<li>Trim\r
+<p>A trim chapter is available in the video editor.</p></li></ul> \r
+\r
+  <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<p>The following figure shows the result of the video file size change (due to scaling and container and codec format change).</p>\r
+\r
+ <p class="figure">Figure: Transcoder</p> \r
+ <p align="center"><img src="../../images/transcoder.png" alt="Transcoder" /></p>\r
+\r
+ \r
+ <p>The following table lists the supported audio and video codecs (decoder).</p>\r
+ \r
+ <table border="1">\r
+  <caption>Table: Decoders</caption>\r
+  <tbody>\r
+    <tr>\r
+      <th style="text-align:center;margin-left:auto;margin-right:auto;">Audio codec</th>\r
+         <th style="text-align:center;margin-left:auto;margin-right:auto;">Video codec</th>\r
+    </tr>\r
+       <tr>\r
+         <td>AAC LC</td>\r
+         <td>MPEG-1</td>\r
+    </tr>\r
+    <tr>\r
+      <td>AAC+</td>\r
+         <td>MPEG-4 part 2</td>\r
+    </tr>\r
+       <tr>\r
+      <td>Enhanced AAC+</td>\r
+         <td>H.263</td>\r
+    </tr>\r
+       <tr>\r
+      <td>MP3</td>\r
+         <td>H.264</td>\r
+       </tr>\r
+       <tr>\r
+      <td>WMA7 / 8</td>\r
+         <td>VC-1 (WMV9)</td>\r
+    </tr>\r
+       <tr>\r
+      <td>WAV</td>\r
+         <td>On2 VP3</td>\r
+    </tr>\r
+       <tr>\r
+      <td>Vorbis</td>\r
+         <td>Theora</td>\r
+    </tr>\r
+       <tr>\r
+      <td>AMR-NB</td>\r
+         <td> </td>\r
+    </tr>\r
+       <tr>\r
+      <td>AMR-WB</td>\r
+         <td> </td> \r
+    </tr>\r
+  </tbody>\r
+</table>\r
+\r
+ <p>The following table lists the supported audio and video codecs (encoder).</p>\r
+\r
+ <table border="1">\r
+  <caption>Table: Encoders</caption>\r
+  <tbody>\r
+    <tr>\r
+      <th style="text-align:center;margin-left:auto;margin-right:auto;">Audio codec</th>\r
+         <th style="text-align:center;margin-left:auto;margin-right:auto;">Video codec</th>\r
+     </tr>\r
+       <tr>    \r
+         <td>AAC LC</td>\r
+      <td>MPEG-1</td>\r
+    </tr>\r
+    <tr>\r
+      <td>Vorbis</td>\r
+         <td>MPEG-4 part 2</td>\r
+    </tr>\r
+       <tr>\r
+      <td>AMR-NB</td>\r
+         <td>H.263</td>\r
+       </tr>\r
+       <tr>\r
+         <td> </td>\r
+         <td>H.264</td>\r
+       </tr>\r
+       <tr>\r
+         <td> </td>\r
+      <td>VC-1 (WMV9)</td>\r
+    </tr>\r
+       <tr>\r
+         <td> </td>\r
+      <td>On2 VP3</td>\r
+    </tr>\r
+       <tr>\r
+         <td> </td>\r
+      <td>Theora</td>\r
+       </tr>\r
+  </tbody>\r
+</table>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/multimedia/wav_player_n.htm b/org.tizen.guides/html/native/multimedia/wav_player_n.htm
index dcf5875..bff16d6 100644 (file)
--- a/org.tizen.guides/html/native/multimedia/wav_player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/wav_player_n.htm
@@ -1,85 +1,85 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>WAV Player</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm">WAV Player Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>WAV Player</h1>
-
-<p>Tizen enables your application to play audio in 1 of 2 ways: </p> 
-  <ul> 
-   <li>Audio player AppControl <p>When using the audio application control, the device standard media player application is launched to play audio. </p> </li> 
-   <li><span style="font-family: Courier New,Courier,monospace">wav player header</span> <p>When using the <span style="font-family: Courier New,Courier,monospace">wav player header</span>, your application uses its own user interface.</p> </li> 
-  </ul> 
-  <p>The WAV Player API provides controlling functions for using audio resources. The resources can be a media file stored in the device.</p> 
-  <p>Use the WAV Player API to enable your application to play audio and control playback. The audio features of this API include: </p> 
-  <ul> 
-   <li>Playing audio media from local files</li> 
-   <li>Controlling playback using play and stop</li> 
-  </ul> 
-
-  <p>The audio formats your application can use with the WAV Player API include:</p> 
-  <ul> 
-   <li>WAV, OGG</li> 
-  </ul> 
-  <p>Most operations of the WAV Player API work in synchronous mode The WAV Player API requires a callback to notify the application of the operational status of the player. The callback must be implemented and passed to stop the WAV playback.</p> 
-  <p>Multiple instances of the <span style="font-family: Courier New,Courier,monospace">wav player</span> can be used to play several audio data streams concurrently. This means that your application can play multiple uncompressed audio files, such as WAV, at the same time.</p> 
-  <p>The most common audio uses of the WAV Player API include: </p> 
-  <ul> 
-   <li>Playing an audio file and controlling the playback</li> 
-   <li>Handling player controls</li> 
-  </ul> 
-  
-  <p>The following figure illustrates the general WAV player state changes.</p> 
-  <p class="figure">Figure: WAV player state changes</p> 
-  <p align="center"><img src="../../images/wav_player_state_changes.png" alt="WAV player state changes" /></p> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>WAV Player</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm">WAV Player Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>WAV Player</h1>\r
+\r
+<p>Tizen enables your application to play audio in 1 of 2 ways: </p> \r
+  <ul> \r
+   <li>Audio player AppControl <p>When using the audio application control, the device standard media player application is launched to play audio. </p> </li> \r
+   <li><span style="font-family: Courier New,Courier,monospace">wav player header</span> <p>When using the <span style="font-family: Courier New,Courier,monospace">wav player header</span>, your application uses its own user interface.</p> </li> \r
+  </ul> \r
+  <p>The WAV Player API provides controlling functions for using audio resources. The resources can be a media file stored in the device.</p> \r
+  <p>Use the WAV Player API to enable your application to play audio and control playback. The audio features of this API include: </p> \r
+  <ul> \r
+   <li>Playing audio media from local files</li> \r
+   <li>Controlling playback using play and stop</li> \r
+  </ul> \r
+\r
+  <p>The audio formats your application can use with the WAV Player API include:</p> \r
+  <ul> \r
+   <li>WAV, OGG</li> \r
+  </ul> \r
+  <p>Most operations of the WAV Player API work in synchronous mode The WAV Player API requires a callback to notify the application of the operational status of the player. The callback must be implemented and passed to stop the WAV playback.</p> \r
+  <p>Multiple instances of the <span style="font-family: Courier New,Courier,monospace">wav player</span> can be used to play several audio data streams concurrently. This means that your application can play multiple uncompressed audio files, such as WAV, at the same time.</p> \r
+  <p>The most common audio uses of the WAV Player API include: </p> \r
+  <ul> \r
+   <li>Playing an audio file and controlling the playback</li> \r
+   <li>Handling player controls</li> \r
+  </ul> \r
+  \r
+  <p>The following figure illustrates the general WAV player state changes.</p> \r
+  <p class="figure">Figure: WAV player state changes</p> \r
+  <p align="center"><img src="../../images/wav_player_state_changes.png" alt="WAV player state changes" /></p> \r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/bluetooth_n.htm b/org.tizen.guides/html/native/network/bluetooth_n.htm
index 5b4df2b..66fd95e 100644 (file)
--- a/org.tizen.guides/html/native/network/bluetooth_n.htm
+++ b/org.tizen.guides/html/native/network/bluetooth_n.htm
@@ -1,99 +1,99 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Bluetooth</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm">Bluetooth Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Bluetooth</h1>
-
-<p>Tizen enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices. The Bluetooth standard provides a peer-to-peer (P2P) data exchange functionality over short distance between compliant devices.</p>
-<p>The main features of the Bluetooth API include:</p>
-
-<ul>
-       <li>Managing the local Bluetooth adapter 
-       <p>The Bluetooth Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html">wearable</a> applications) provides functions for setting up Bluetooth and discovering other devices. The API is used to control the Bluetooth adapter: you must enable the adapter before any other Bluetooth actions, and when you no longer need it, disable it to save device power.</p>
-       <p>You can control the visibility of the device, meaning whether its name appears to others searching for Bluetooth devices. In addition, you  discover neighboring Bluetooth devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>
-       </li>
-       <li>Discovering devices 
-       <p>The Bluetooth Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__DEVICE__MODULE.html">wearable</a> applications) provides functions for managing bonds with other devices and searching for supported services. The API is used to handle the connection with other devices and to search for services available on remote devices.</p>
-       <p>You can discover other Bluetooth devices. The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones.</p>
-       </li>
-       <li>Creating a bonding with a Bluetooth device 
-       <p>You can create a bonding with another device. The bonding allows the 2 devices to establish a connection.</p>
-       <p>Connected devices exchange keys needed for encrypted communication, but each connection has to be approved by the latest application user. You can also set authorization of other devices. Authorized devices are connected automatically without the latest user being asked for authorization.</p>
-       </li>
-       <li>Connecting to and exchanging data with a Bluetooth device using a Bluetooth socket
-       <p>The Bluetooth Socket API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__SOCKET__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__SOCKET__MODULE.html">wearable</a> applications) provides functions for managing connections to other devices and exchanging data. The API is used for exchanging data between 2 Bluetooth devices, where your device can have the role both of a server (service provider) and client (service user). The connection creation process differs based on the role. After the connection is established, the processes for exchanging data and disconnecting are the same for both roles.</p>
-       <p>When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> instance with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p>
-       </li>
-       <li>Connecting to audio devices with Bluetooth
-       <p>Connect to Bluetooth audio devices, such as headset, hand-free, and headphone.</p></li>
-       <li>Handling attributes with Bluetooth GATT
-       <p>The Bluetooth GATT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__GATT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__GATT__MODULE.html">wearable</a> applications) provides functions for discovering, reading, and modifying attributes.</p>
-       <p>As a client, you can connect to and use a specific service on the server device. Once the connection is established, the client can manage the service attributes.</p></li>
-       <li>Connecting to health devices with Bluetooth HDP
-       <p>Manage connections to health devices and exchange data.</p></li>
-       <li>Connecting to devices with Bluetooth HID
-       <p>Connect to a Bluetooth HID, such as a keyboard or mouse.</p></li>
-       <li>Sending and receiving objects with the Bluetooth OPP client and server
-       <p>Push and accept objects, such as pictures.</p></li>
-       <li>Exchanging data with Bluetooth LE
-       <p>The Bluetooth LE Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html">wearable</a> applications) provides functions for managing the Bluetooth Low Energy (BLE) connections with other BLE devices and exchanging data between them.</p>
-       <p>You can control the visibility of the BLE device, meaning whether its name appears to others searching for BLE devices. In addition, you  discover neighboring BLE devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>    
-       </li>   
-       <li>Controlling remote audio and video devices with Bluetooth AVRCP
-       <p>The Bluetooth AVRCP feature (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications) provides functions for remotely controlling audio and video devices.</p>
-       <p>Bluetooth AVRCP is used with A2DP. You can handle remote controls (such as play, pause, stop, equalizer, repeat, shuffle, and scan) through AVRCP.</p></li>  
-</ul>
-
-<p>Bluetooth use is based on profiles. Tizen Bluetooth features support the Audio, GATT, HDP, HID, and OPP client and server profiles.</p>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Bluetooth</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm">Bluetooth Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Bluetooth</h1>\r
+\r
+<p>Tizen enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices. The Bluetooth standard provides a peer-to-peer (P2P) data exchange functionality over short distance between compliant devices.</p>\r
+<p>The main features of the Bluetooth API include:</p>\r
+\r
+<ul>\r
+       <li>Managing the local Bluetooth adapter \r
+       <p>The Bluetooth Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html">wearable</a> applications) provides functions for setting up Bluetooth and discovering other devices. The API is used to control the Bluetooth adapter: you must enable the adapter before any other Bluetooth actions, and when you no longer need it, disable it to save device power.</p>\r
+       <p>You can control the visibility of the device, meaning whether its name appears to others searching for Bluetooth devices. In addition, you  discover neighboring Bluetooth devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>\r
+       </li>\r
+       <li>Discovering devices \r
+       <p>The Bluetooth Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__DEVICE__MODULE.html">wearable</a> applications) provides functions for managing bonds with other devices and searching for supported services. The API is used to handle the connection with other devices and to search for services available on remote devices.</p>\r
+       <p>You can discover other Bluetooth devices. The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones.</p>\r
+       </li>\r
+       <li>Creating a bonding with a Bluetooth device \r
+       <p>You can create a bonding with another device. The bonding allows the 2 devices to establish a connection.</p>\r
+       <p>Connected devices exchange keys needed for encrypted communication, but each connection has to be approved by the latest application user. You can also set authorization of other devices. Authorized devices are connected automatically without the latest user being asked for authorization.</p>\r
+       </li>\r
+       <li>Connecting to and exchanging data with a Bluetooth device using a Bluetooth socket\r
+       <p>The Bluetooth Socket API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__SOCKET__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__SOCKET__MODULE.html">wearable</a> applications) provides functions for managing connections to other devices and exchanging data. The API is used for exchanging data between 2 Bluetooth devices, where your device can have the role both of a server (service provider) and client (service user). The connection creation process differs based on the role. After the connection is established, the processes for exchanging data and disconnecting are the same for both roles.</p>\r
+       <p>When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> instance with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p>\r
+       </li>\r
+       <li>Connecting to audio devices with Bluetooth\r
+       <p>Connect to Bluetooth audio devices, such as headset, hand-free, and headphone.</p></li>\r
+       <li>Handling attributes with Bluetooth GATT\r
+       <p>The Bluetooth GATT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__GATT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__GATT__MODULE.html">wearable</a> applications) provides functions for discovering, reading, and modifying attributes.</p>\r
+       <p>As a client, you can connect to and use a specific service on the server device. Once the connection is established, the client can manage the service attributes.</p></li>\r
+       <li>Connecting to health devices with Bluetooth HDP\r
+       <p>Manage connections to health devices and exchange data.</p></li>\r
+       <li>Connecting to devices with Bluetooth HID\r
+       <p>Connect to a Bluetooth HID, such as a keyboard or mouse.</p></li>\r
+       <li>Sending and receiving objects with the Bluetooth OPP client and server\r
+       <p>Push and accept objects, such as pictures.</p></li>\r
+       <li>Exchanging data with Bluetooth LE\r
+       <p>The Bluetooth LE Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html">wearable</a> applications) provides functions for managing the Bluetooth Low Energy (BLE) connections with other BLE devices and exchanging data between them.</p>\r
+       <p>You can control the visibility of the BLE device, meaning whether its name appears to others searching for BLE devices. In addition, you  discover neighboring BLE devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>    \r
+       </li>   \r
+       <li>Controlling remote audio and video devices with Bluetooth AVRCP\r
+       <p>The Bluetooth AVRCP feature (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications) provides functions for remotely controlling audio and video devices.</p>\r
+       <p>Bluetooth AVRCP is used with A2DP. You can handle remote controls (such as play, pause, stop, equalizer, repeat, shuffle, and scan) through AVRCP.</p></li>  \r
+</ul>\r
+\r
+<p>Bluetooth use is based on profiles. Tizen Bluetooth features support the Audio, GATT, HDP, HID, and OPP client and server profiles.</p>\r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/connection_n.htm b/org.tizen.guides/html/native/network/connection_n.htm
index f48d866..5a8141f 100644 (file)
--- a/org.tizen.guides/html/native/network/connection_n.htm
+++ b/org.tizen.guides/html/native/network/connection_n.htm
@@ -1,309 +1,309 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Connection</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-                       <li><a href="#manager">Connection Manager</a></li>
-                       <li><a href="#con_profile">Connection Profile</a></li>
-                       <li><a href="#statistics">Connection Statistics</a></li>                
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/network/connection_tutorial_n.htm">Connection Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Connection</h1>
-
-<p>The connection features enable you to create a network connection and perform various operations over the connection. The application can access connection details, such as the IP address, proxy information, gateway information, and connection statistics.</p>
-
-<table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">Within the Network Programming Guide, the term &quot;network&quot; refers to IP network connections. For information on telephony connections, see the <a href="../telephony/telephony_guide_n.htm">Telephony</a> guide.</td>
-      </tr>
-     </tbody>
-    </table>
-
-<h2 id="manager" name="manager">Connection Manager</h2>
-<p>The Connection Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">wearable</a> applications) provides functions for managing data connections. It allows you to get a state of the connection interface such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.</p>
-
-<p>The Connection Manager API is related with <a href="http://curl.haxx.se/libcurl/" target="_blank">libcurl</a> and sockets. After a network connection is established, you can create a socket on the kernel Linux stack to be used directly or by libcurl or any other network library. If you want to create a socket directly without libcurl, you must check whether you are using the IPv4 or IPv6 environment, and create an applicable IP socket.</p>
-
-<p>The Connection Manager provides the following typedefs and enumerators for managing data connections:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">connection_h</span>
-<p>Connection handle for all connection functions. To use the Connection Manager API, first create a connection handle using the <span style="font-family: Courier New,Courier,monospace">connection_create()</span> function. Afterwards, you can obtain network information.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">connection_profile_h</span>
-<p>Profile handle, which provides information according to the connection type.</p></li>
-<li>Connection state enumerators
-<p>One of the following states is returned by the <span style="font-family: Courier New,Courier,monospace">connection_get_[interface]_state()</span> function:</p> 
-<ul><li><span style="font-family: Courier New,Courier,monospace">connection_bt_state_e</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">connection_cellular_state_e</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">connection_wifi_state_e</span></li></ul>
-<p>The Connection Manager supports getting the connection state for Bluetooth, cellular and Wi-Fi.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">connection_address_family_e</span>
-<p>Enumeration for the address family. It provides IPv4 and IPv6. You can use it as a parameter when you get the IP address of the current connection or proxy.</p></li></ul>
-
-<h2 id="con_profile" name="con_profile">Connection Profile</h2>
-<p>The Connection Profile API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">wearable</a> applications) provides functions for mapping a connection profile. It allows you to use a <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle for getting details about the connection.</p>
-
-<p>Each profile is defined by a set of configuration information defined in the <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle. The profile provides different information according to the connection type (such as Bluetooth, cellular, ethernet, and Wi-Fi).</p>
-
-<p>The following tables define the available profile information, which you can get using the <span style="font-family: Courier New,Courier,monospace">connection_profile_get_*()</span> function.</p>
-
-<table> 
-   <caption>
-     Table: Common information 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>Profile type</td> 
-     <td>Profile type indicating the network connection type</td> 
-    </tr> 
-    <tr> 
-     <td>Profile ID</td> 
-     <td>Unique profile ID; when you create a new profile, this value is determined</td> 
-    </tr>
-    <tr> 
-     <td>Profile name</td> 
-     <td>Profile name associated with the profile ID</td> 
-    </tr>
-    <tr> 
-     <td>Profile state</td> 
-     <td>Profile state, such as disconnected, association, configuration, or connected</td> 
-    </tr>
-    <tr> 
-     <td>DNS address</td> 
-     <td>DNS address; you can get the first and second DNS address</td> 
-    </tr>
-    <tr> 
-     <td>Gateway address</td> 
-     <td>Gateway address</td> 
-    </tr>
-    <tr> 
-     <td>Subnet mask</td> 
-     <td>Subnet mask</td> 
-    </tr>
-    <tr> 
-     <td>Proxy address</td> 
-     <td>Proxy address</td> 
-    </tr>
-    <tr> 
-     <td>Proxy type</td> 
-     <td>Proxy method, such as direct or auto</td> 
-    </tr>      
-    <tr> 
-     <td>Network interface name</td> 
-     <td>Name of the network interface, such as eth0 or pdp0</td> 
-    </tr> 
-    <tr> 
-     <td>IP address</td> 
-     <td>IP address</td> 
-    </tr> 
-    <tr> 
-     <td>IP configuration type</td> 
-     <td>IP address configuration type, such as static, dynamic, auto, or fixed</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-
-<table> 
-   <caption>
-     Table: Profile-specific information for Wi-Fi 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>Essid</td> 
-     <td>Extended service set identifier</td> 
-    </tr>
-    <tr> 
-     <td>Bssid</td> 
-     <td>Basic service set identifier</td> 
-    </tr> 
-    <tr> 
-     <td>Encryption type</td> 
-     <td>Type for encryption modes, such as WEP, TKIP, AES or TKIP/AES mixed</td> 
-    </tr> 
-    <tr> 
-     <td>Frequency</td> 
-     <td>Frequency (in MHz)</td> 
-    </tr> 
-    <tr> 
-     <td>Max speed</td> 
-     <td>Maximum speed (in Mbps)</td> 
-    </tr> 
-    <tr> 
-     <td>Passphrase required</td> 
-     <td>Passphrase compulsion</td> 
-    </tr> 
-       <tr>
-        <td>WPS supported</td>
-        <td>WPS (Wi-Fi Protected Setup) support</td>
-       </tr>
-    <tr> 
-     <td>Security type</td> 
-     <td>Wi-Fi security type; supports WEP, WPA-PSK, WPA2-PSK, and EAP</td> 
-    </tr> 
-    <tr> 
-     <td>Rssi</td> 
-     <td>Received signal strength indication</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-
-<table> 
-   <caption>
-     Table: Profile-specific information for cellular
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>APN</td> 
-     <td>Access Point Name</td> 
-    </tr> 
-           <tr> 
-     <td>Cellular authentication info</td> 
-     <td>Authentication information, including user name and password</td> 
-    </tr>
-           <tr> 
-     <td>Cellular home URL</td> 
-     <td>Home URL</td> 
-    </tr>
-           <tr> 
-     <td>Service type</td> 
-     <td>Cellular service type</td> 
-    </tr>
-   </tbody> 
-  </table> 
-       
-
-<h2 id="statistics" name="statistics">Connection Statistics</h2>
-
-<p>Use the Connection Statistics API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">wearable</a> applications) to gather and reset statistics on the network usage, such as the amount of sent or received data. The statistics also provide functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Only Wi-Fi and cellular connections are supported in the statistics.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-  <p>The following table lists the connection type constants.</p>
-  
-  <table> 
-   <caption>
-     Table: Connection type constants
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Constant</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_WIFI</span></td> 
-     <td>Wi-Fi type</td> 
-    </tr> 
-           <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_CELLULAR</span></td> 
-     <td>Cellular type</td> 
-    </tr>
-   </tbody> 
-  </table> 
-  
-<p>The following table lists the statistics constants.</p>
-  <table> 
-   <caption>
-     Table: Statistics constants
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Constant</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA</span></td> 
-     <td>Last received data</td> 
-    </tr> 
-           <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA</span></td> 
-     <td>Last sent data</td> 
-    </tr>
-           <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA</span></td> 
-     <td>Total received data</td> 
-    </tr>
-           <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA</span></td> 
-     <td>Total sent data</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">connection_reset_statistics()</span> function to re-initialize the statistics.</p> 
-       
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Connection</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                       <li><a href="#manager">Connection Manager</a></li>\r
+                       <li><a href="#con_profile">Connection Profile</a></li>\r
+                       <li><a href="#statistics">Connection Statistics</a></li>                \r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/connection_tutorial_n.htm">Connection Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Connection</h1>\r
+\r
+<p>The connection features enable you to create a network connection and perform various operations over the connection. The application can access connection details, such as the IP address, proxy information, gateway information, and connection statistics.</p>\r
+\r
+<table class="note">\r
+     <tbody>\r
+      <tr>\r
+       <th class="note">Note</th>\r
+      </tr>\r
+      <tr>\r
+       <td class="note">Within the Network Programming Guide, the term &quot;network&quot; refers to IP network connections. For information on telephony connections, see the <a href="../telephony/telephony_guide_n.htm">Telephony</a> guide.</td>\r
+      </tr>\r
+     </tbody>\r
+    </table>\r
+\r
+<h2 id="manager" name="manager">Connection Manager</h2>\r
+<p>The Connection Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">wearable</a> applications) provides functions for managing data connections. It allows you to get a state of the connection interface such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.</p>\r
+\r
+<p>The Connection Manager API is related with <a href="http://curl.haxx.se/libcurl/" target="_blank">libcurl</a> and sockets. After a network connection is established, you can create a socket on the kernel Linux stack to be used directly or by libcurl or any other network library. If you want to create a socket directly without libcurl, you must check whether you are using the IPv4 or IPv6 environment, and create an applicable IP socket.</p>\r
+\r
+<p>The Connection Manager provides the following typedefs and enumerators for managing data connections:</p>\r
+\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">connection_h</span>\r
+<p>Connection handle for all connection functions. To use the Connection Manager API, first create a connection handle using the <span style="font-family: Courier New,Courier,monospace">connection_create()</span> function. Afterwards, you can obtain network information.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">connection_profile_h</span>\r
+<p>Profile handle, which provides information according to the connection type.</p></li>\r
+<li>Connection state enumerators\r
+<p>One of the following states is returned by the <span style="font-family: Courier New,Courier,monospace">connection_get_[interface]_state()</span> function:</p> \r
+<ul><li><span style="font-family: Courier New,Courier,monospace">connection_bt_state_e</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">connection_cellular_state_e</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">connection_wifi_state_e</span></li></ul>\r
+<p>The Connection Manager supports getting the connection state for Bluetooth, cellular and Wi-Fi.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">connection_address_family_e</span>\r
+<p>Enumeration for the address family. It provides IPv4 and IPv6. You can use it as a parameter when you get the IP address of the current connection or proxy.</p></li></ul>\r
+\r
+<h2 id="con_profile" name="con_profile">Connection Profile</h2>\r
+<p>The Connection Profile API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">wearable</a> applications) provides functions for mapping a connection profile. It allows you to use a <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle for getting details about the connection.</p>\r
+\r
+<p>Each profile is defined by a set of configuration information defined in the <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle. The profile provides different information according to the connection type (such as Bluetooth, cellular, ethernet, and Wi-Fi).</p>\r
+\r
+<p>The following tables define the available profile information, which you can get using the <span style="font-family: Courier New,Courier,monospace">connection_profile_get_*()</span> function.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Common information \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Information</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Profile type</td> \r
+     <td>Profile type indicating the network connection type</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Profile ID</td> \r
+     <td>Unique profile ID; when you create a new profile, this value is determined</td> \r
+    </tr>\r
+    <tr> \r
+     <td>Profile name</td> \r
+     <td>Profile name associated with the profile ID</td> \r
+    </tr>\r
+    <tr> \r
+     <td>Profile state</td> \r
+     <td>Profile state, such as disconnected, association, configuration, or connected</td> \r
+    </tr>\r
+    <tr> \r
+     <td>DNS address</td> \r
+     <td>DNS address; you can get the first and second DNS address</td> \r
+    </tr>\r
+    <tr> \r
+     <td>Gateway address</td> \r
+     <td>Gateway address</td> \r
+    </tr>\r
+    <tr> \r
+     <td>Subnet mask</td> \r
+     <td>Subnet mask</td> \r
+    </tr>\r
+    <tr> \r
+     <td>Proxy address</td> \r
+     <td>Proxy address</td> \r
+    </tr>\r
+    <tr> \r
+     <td>Proxy type</td> \r
+     <td>Proxy method, such as direct or auto</td> \r
+    </tr>      \r
+    <tr> \r
+     <td>Network interface name</td> \r
+     <td>Name of the network interface, such as eth0 or pdp0</td> \r
+    </tr> \r
+    <tr> \r
+     <td>IP address</td> \r
+     <td>IP address</td> \r
+    </tr> \r
+    <tr> \r
+     <td>IP configuration type</td> \r
+     <td>IP address configuration type, such as static, dynamic, auto, or fixed</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+\r
+<table> \r
+   <caption>\r
+     Table: Profile-specific information for Wi-Fi \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Information</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Essid</td> \r
+     <td>Extended service set identifier</td> \r
+    </tr>\r
+    <tr> \r
+     <td>Bssid</td> \r
+     <td>Basic service set identifier</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Encryption type</td> \r
+     <td>Type for encryption modes, such as WEP, TKIP, AES or TKIP/AES mixed</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Frequency</td> \r
+     <td>Frequency (in MHz)</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Max speed</td> \r
+     <td>Maximum speed (in Mbps)</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Passphrase required</td> \r
+     <td>Passphrase compulsion</td> \r
+    </tr> \r
+       <tr>\r
+        <td>WPS supported</td>\r
+        <td>WPS (Wi-Fi Protected Setup) support</td>\r
+       </tr>\r
+    <tr> \r
+     <td>Security type</td> \r
+     <td>Wi-Fi security type; supports WEP, WPA-PSK, WPA2-PSK, and EAP</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Rssi</td> \r
+     <td>Received signal strength indication</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+\r
+<table> \r
+   <caption>\r
+     Table: Profile-specific information for cellular\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Information</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td>APN</td> \r
+     <td>Access Point Name</td> \r
+    </tr> \r
+           <tr> \r
+     <td>Cellular authentication info</td> \r
+     <td>Authentication information, including user name and password</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Cellular home URL</td> \r
+     <td>Home URL</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Service type</td> \r
+     <td>Cellular service type</td> \r
+    </tr>\r
+   </tbody> \r
+  </table> \r
+       \r
+\r
+<h2 id="statistics" name="statistics">Connection Statistics</h2>\r
+\r
+<p>Use the Connection Statistics API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">wearable</a> applications) to gather and reset statistics on the network usage, such as the amount of sent or received data. The statistics also provide functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).</p>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Only Wi-Fi and cellular connections are supported in the statistics.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+  <p>The following table lists the connection type constants.</p>\r
+  \r
+  <table> \r
+   <caption>\r
+     Table: Connection type constants\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Constant</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_WIFI</span></td> \r
+     <td>Wi-Fi type</td> \r
+    </tr> \r
+           <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_TYPE_CELLULAR</span></td> \r
+     <td>Cellular type</td> \r
+    </tr>\r
+   </tbody> \r
+  </table> \r
+  \r
+<p>The following table lists the statistics constants.</p>\r
+  <table> \r
+   <caption>\r
+     Table: Statistics constants\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Constant</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA</span></td> \r
+     <td>Last received data</td> \r
+    </tr> \r
+           <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA</span></td> \r
+     <td>Last sent data</td> \r
+    </tr>\r
+           <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA</span></td> \r
+     <td>Total received data</td> \r
+    </tr>\r
+           <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA</span></td> \r
+     <td>Total sent data</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">connection_reset_statistics()</span> function to re-initialize the statistics.</p> \r
+       \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/network_guide_n.htm b/org.tizen.guides/html/native/network/network_guide_n.htm
index 442d745..3094b7d 100644 (file)
--- a/org.tizen.guides/html/native/network/network_guide_n.htm
+++ b/org.tizen.guides/html/native/network/network_guide_n.htm
@@ -1,71 +1,71 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Network</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Network</h1>
-  <p>Network features include information on how your application can send data to networks and other applications, and receive data back from them.</p>
-
-  <p>The main network features are:</p>
-  <ul>
-       <li><a href="connection_n.htm">Connection</a> <p>Enables you to get information about the connected network, set up and configure network connections, and track information, such as sent and received size.</p></li>
-       <li><a href="bluetooth_n.htm">Bluetooth</a><p>Enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices.</p></li>
-       <li><a href="nfc_n.htm">NFC</a><p>Enables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card.</p></li>
-       <li><a href="smartcard_n.htm">SmartCard</a><p>Enables you to access secure elements (SE) through smart card features.</p></li>
-       <li><a href="wifi_n.htm">Wi-Fi</a><p>Enables you to connect to a Wireless Local Area Network (WLAN) and transfer data over the network.</p></li>
-       </ul>
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-       <ul>
-       <li><a href="wifi_direct_n.htm">Wi-Fi Direct</a><p>Enables you to connect to Wi-Fi Direct&trade; devices and manage Wi-Fi Direct&trade; connections.</p></li>
-  </ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Network</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Network</h1>\r
+  <p>Network features include information on how your application can send data to networks and other applications, and receive data back from them.</p>\r
+\r
+  <p>The main network features are:</p>\r
+  <ul>\r
+       <li><a href="connection_n.htm">Connection</a> <p>Enables you to get information about the connected network, set up and configure network connections, and track information, such as sent and received size.</p></li>\r
+       <li><a href="bluetooth_n.htm">Bluetooth</a><p>Enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices.</p></li>\r
+       <li><a href="nfc_n.htm">NFC</a><p>Enables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card.</p></li>\r
+       <li><a href="smartcard_n.htm">SmartCard</a><p>Enables you to access secure elements (SE) through smart card features.</p></li>\r
+       <li><a href="wifi_n.htm">Wi-Fi</a><p>Enables you to connect to a Wireless Local Area Network (WLAN) and transfer data over the network.</p></li>\r
+       </ul>\r
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>\r
+       <ul>\r
+       <li><a href="wifi_direct_n.htm">Wi-Fi Direct</a><p>Enables you to connect to Wi-Fi Direct&trade; devices and manage Wi-Fi Direct&trade; connections.</p></li>\r
+  </ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/nfc_n.htm b/org.tizen.guides/html/native/network/nfc_n.htm
index f1055bc..77c0b17 100644 (file)
--- a/org.tizen.guides/html/native/network/nfc_n.htm
+++ b/org.tizen.guides/html/native/network/nfc_n.htm
@@ -1,175 +1,175 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>NFC</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm">NFC Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>NFC</h1>
-
-<p>Tizen enables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card. NFC is an international standard that specifies an interface and a protocol for simple wireless interconnection of closely coupled devices. For more information, see the <a href="http://nfc-forum.org/" target="blank">NFC Forum</a>.</p>
-
-<p>The main features of the NFC API include:</p>
-
-<ul>
-    <li>NFC management
-               <p>The Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html">wearable</a> applications) provides functions, for example, for:</p>
-<ul>
-    <li>Initializing and deinitializing NFC</li>
-    <li>Enabling and disabling NFC</li>
-    <li>Setting callbacks for NFC events</li>
-       <li>Managing NFC connections</li>
-</ul>
-    </li>
-    <li>NDEF support
-               
-<p>The NFC Data Exchange Format (NDEF) is a packet message format used in the reader/writer and peer-to-peer modes.</p>
-
-<p>The NDEF API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">wearable</a> applications) provides functions for:</p>
-
-<ul>
-    <li>Creating NDEF records</li>
-    <li>Retrieving a specific field of an NDEF record</li>
-    <li>Creating NDEF messages</li>
-    <li>Inserting and removing NDEF records to and from an NDEF message</li>
-</ul>
-    </li>
-    <li>Reader/writer mode
-       <p>The TAG API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html">wearable</a> applications) provides functions, for example, for:</p>
-
-<ul>
-    <li>Retrieving the tag type</li>
-    <li>Reading an NDEF message from a tag</li>
-    <li>Writing an NDEF message to a tag</li>
-    <li>Formatting a tag for using NDEF</li>
-    <li>Handling type-specific tag operations (currently only MIFARE)</li>
-</ul>  
-    </li>
-    <li>Peer-to-peer mode
-       <p>The Peer to Peer API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">wearable</a> applications) provides functions for:</p>
-
-<ul>
-    <li>Sending an NDEF message to a peer device</li>
-    <li>Receiving an NDEF message from a peer device</li>
-</ul>  
-    </li>
-    <li>Card emulation mode
-               <p>The card emulation mode allows an NFC device to function as a smart card. The mode provides access to secure elements (SEs).</p>
-<p>The NFC controller in the device routes all data from the reader directly to the secure element, and an applet handles all of the data in the SE. The user does not participate at all in the operation.</p>
-
-<p class="figure">Figure: Traditional card emulation</p> 
-<p align="center"> <img alt="Traditional card emulation" src="../../images/nfc_card_emulation.png" /> </p> 
-               
-<p>The Card Emulation API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">wearable</a> applications) provides functions for:</p>
-
-<ul>
-    <li>Enabling and disabling the card emulation mode</li>
-    <li>Retrieving the card emulation status</li>
-    <li>Opening and closing a secure element</li>
-    <li>Sending an application protocol data unit (APDU) to a secure element</li>
-    <li>Retrieving an Answer To Reset (ATR) from a secure element</li>
-</ul>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Pay attention to the following:
-                       <ul><li>Secure element access is not supported in Tizen 2.3. The Card Emulation API of Tizen 2.3 only supports enabling and disabling the NFC card emulation mode, and retrieving the card emulation status.</li>
-                       <li>Security problems can occur in some Card Emulation APIs. The security level can be determined by the manufacturer usage. If a security issue occurs, contact the product manufacturer. For more information on the security levels, see the <a href="http://www.gsma.com/digitalcommerce/wp-content/uploads/2013/12/GSMA-NFC05-NFC-Handset-APIs-Requirement-Specification-version-4-1.pdf" target ="blank">GSMA specification</a>.</li></ul>
-                       </td>
-        </tr>
-    </tbody>
-</table>
-    </li>
-       <li>Host-based card emulation (HCE) 
-<p>HCE is on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element (SE). The data is routed to the user space on which Tizen applications reside, instead of routing the data to a secure element.</p> 
- 
-<p class="figure">Figure: Card emulation with HCE</p> 
-<p align="center"> <img alt="Card emulation with HCE" src="../../images/nfc_card_emulation_hce.png" /> </p>  
-<p>HCE allows you to create your own card emulation system and bypass the SE. This approach brings 2 advantages:</p>
-
-<ul>
-<li>In case of UICC type SE, the mobile service provider is involved in the card emulation behavior. With HCE, you are free from the provider influence.</li>
-<li>You do not need SE hardware chips within the device.</li></ul>
-
-<p>The understand HCE behavior, mainly how data is internally routed to the correct application, consider how Tizen handles NFC routing:</p>
-
-<ol><li>Assume that the user has an HCE application or installs one.
-<p>The application has a &quot;AID&quot; value, which is stored in NFC routing table (blue arrow in the following figure).</p></li>
-<li>When the NFC reader attempts card emulation, the NFC controller checks the routing table to find the application to which the data is sent for emulation (red arrows in the following figure).</li> 
-<li>When the application is uninstalled, the AID value is deleted from the routing table.</li></ol>
-
-<p class="figure">Figure: HCE routing</p> 
-<p align="center"> <img alt="HCE routing" src="../../images/nfc_hce_routing.png" /> </p> 
-       </li>
-</ul>
-
-<p>NFC applications can be launched by a card emulation transaction using the application control functionalities. NFC devices can communicate with the point of sales (POS) terminals using the card emulation functionality to, for example, make a payment.</p> 
-<p>If an application control with a following operation is defined in the configuration file and an event caused by the card emulation functionality occurs, the NFC application is launched:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span>
-<p>A transaction caused by the card emulation functionality occurs.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span>
-<p>The user selects a default wallet in Tap&amp;Pay.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span>
-<p>A host APDU service (HCE) APDU event occurs.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span>
-<p>An off-host APDU service (eSE, UICC) APDU event occurs.</p>
-</li>
-</ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>NFC</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm">NFC Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>NFC</h1>\r
+\r
+<p>Tizen enables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card. NFC is an international standard that specifies an interface and a protocol for simple wireless interconnection of closely coupled devices. For more information, see the <a href="http://nfc-forum.org/" target="blank">NFC Forum</a>.</p>\r
+\r
+<p>The main features of the NFC API include:</p>\r
+\r
+<ul>\r
+    <li>NFC management\r
+               <p>The Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html">wearable</a> applications) provides functions, for example, for:</p>\r
+<ul>\r
+    <li>Initializing and deinitializing NFC</li>\r
+    <li>Enabling and disabling NFC</li>\r
+    <li>Setting callbacks for NFC events</li>\r
+       <li>Managing NFC connections</li>\r
+</ul>\r
+    </li>\r
+    <li>NDEF support\r
+               \r
+<p>The NFC Data Exchange Format (NDEF) is a packet message format used in the reader/writer and peer-to-peer modes.</p>\r
+\r
+<p>The NDEF API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">wearable</a> applications) provides functions for:</p>\r
+\r
+<ul>\r
+    <li>Creating NDEF records</li>\r
+    <li>Retrieving a specific field of an NDEF record</li>\r
+    <li>Creating NDEF messages</li>\r
+    <li>Inserting and removing NDEF records to and from an NDEF message</li>\r
+</ul>\r
+    </li>\r
+    <li>Reader/writer mode\r
+       <p>The TAG API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html">wearable</a> applications) provides functions, for example, for:</p>\r
+\r
+<ul>\r
+    <li>Retrieving the tag type</li>\r
+    <li>Reading an NDEF message from a tag</li>\r
+    <li>Writing an NDEF message to a tag</li>\r
+    <li>Formatting a tag for using NDEF</li>\r
+    <li>Handling type-specific tag operations (currently only MIFARE)</li>\r
+</ul>  \r
+    </li>\r
+    <li>Peer-to-peer mode\r
+       <p>The Peer to Peer API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">wearable</a> applications) provides functions for:</p>\r
+\r
+<ul>\r
+    <li>Sending an NDEF message to a peer device</li>\r
+    <li>Receiving an NDEF message from a peer device</li>\r
+</ul>  \r
+    </li>\r
+    <li>Card emulation mode\r
+               <p>The card emulation mode allows an NFC device to function as a smart card. The mode provides access to secure elements (SEs).</p>\r
+<p>The NFC controller in the device routes all data from the reader directly to the secure element, and an applet handles all of the data in the SE. The user does not participate at all in the operation.</p>\r
+\r
+<p class="figure">Figure: Traditional card emulation</p> \r
+<p align="center"> <img alt="Traditional card emulation" src="../../images/nfc_card_emulation.png" /> </p> \r
+               \r
+<p>The Card Emulation API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">wearable</a> applications) provides functions for:</p>\r
+\r
+<ul>\r
+    <li>Enabling and disabling the card emulation mode</li>\r
+    <li>Retrieving the card emulation status</li>\r
+    <li>Opening and closing a secure element</li>\r
+    <li>Sending an application protocol data unit (APDU) to a secure element</li>\r
+    <li>Retrieving an Answer To Reset (ATR) from a secure element</li>\r
+</ul>\r
+\r
+<table class="note">\r
+    <tbody>\r
+        <tr>\r
+            <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+            <td class="note">Pay attention to the following:\r
+                       <ul><li>Secure element access is not supported in Tizen 2.3. The Card Emulation API of Tizen 2.3 only supports enabling and disabling the NFC card emulation mode, and retrieving the card emulation status.</li>\r
+                       <li>Security problems can occur in some Card Emulation APIs. The security level can be determined by the manufacturer usage. If a security issue occurs, contact the product manufacturer. For more information on the security levels, see the <a href="http://www.gsma.com/digitalcommerce/wp-content/uploads/2013/12/GSMA-NFC05-NFC-Handset-APIs-Requirement-Specification-version-4-1.pdf" target ="blank">GSMA specification</a>.</li></ul>\r
+                       </td>\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+    </li>\r
+       <li>Host-based card emulation (HCE) \r
+<p>HCE is on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element (SE). The data is routed to the user space on which Tizen applications reside, instead of routing the data to a secure element.</p> \r
+ \r
+<p class="figure">Figure: Card emulation with HCE</p> \r
+<p align="center"> <img alt="Card emulation with HCE" src="../../images/nfc_card_emulation_hce.png" /> </p>  \r
+<p>HCE allows you to create your own card emulation system and bypass the SE. This approach brings 2 advantages:</p>\r
+\r
+<ul>\r
+<li>In case of UICC type SE, the mobile service provider is involved in the card emulation behavior. With HCE, you are free from the provider influence.</li>\r
+<li>You do not need SE hardware chips within the device.</li></ul>\r
+\r
+<p>The understand HCE behavior, mainly how data is internally routed to the correct application, consider how Tizen handles NFC routing:</p>\r
+\r
+<ol><li>Assume that the user has an HCE application or installs one.\r
+<p>The application has a &quot;AID&quot; value, which is stored in NFC routing table (blue arrow in the following figure).</p></li>\r
+<li>When the NFC reader attempts card emulation, the NFC controller checks the routing table to find the application to which the data is sent for emulation (red arrows in the following figure).</li> \r
+<li>When the application is uninstalled, the AID value is deleted from the routing table.</li></ol>\r
+\r
+<p class="figure">Figure: HCE routing</p> \r
+<p align="center"> <img alt="HCE routing" src="../../images/nfc_hce_routing.png" /> </p> \r
+       </li>\r
+</ul>\r
+\r
+<p>NFC applications can be launched by a card emulation transaction using the application control functionalities. NFC devices can communicate with the point of sales (POS) terminals using the card emulation functionality to, for example, make a payment.</p> \r
+<p>If an application control with a following operation is defined in the configuration file and an event caused by the card emulation functionality occurs, the NFC application is launched:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span>\r
+<p>A transaction caused by the card emulation functionality occurs.</p>\r
+</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span>\r
+<p>The user selects a default wallet in Tap&amp;Pay.</p>\r
+</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span>\r
+<p>A host APDU service (HCE) APDU event occurs.</p>\r
+</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span>\r
+<p>An off-host APDU service (eSE, UICC) APDU event occurs.</p>\r
+</li>\r
+</ul>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/smartcard_n.htm b/org.tizen.guides/html/native/network/smartcard_n.htm
index 071b94f..6acc7fc 100644 (file)
--- a/org.tizen.guides/html/native/network/smartcard_n.htm
+++ b/org.tizen.guides/html/native/network/smartcard_n.htm
@@ -1,89 +1,89 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>SmartCard</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm">SmartCard Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>SmartCard</h1>
-
-<p>Tizen enables you to use smart card functionalities, such as accessing a secure element (SE). Before using the SmartCard API, make sure you have a secure element on the device. The smart card service allow you to open a session on an SE, open a channel to the applet in the SE, send a command to the channel, and finally receive a response to the command.</p>
-
-<p>The main components of the SmartCard API include:</p>
-
-<ul>
-    <li>SE service
-               <p>The SE Service API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__SE__SERVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__SE__SERVICE__MODULE.html">wearable</a> applications) allows you to initialize and deinitialize the smart card features, and get the available readers. The SE service functions as a connector to the SE framework system.</p>
-    </li>
-    <li>Reader
-<p>The Reader API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">wearable</a> applications) allows you to access the SE connected with the selected reader. You can get the reader name and open and close sessions.</p>         
-    </li>
-    <li>Session
-       <p>A session is an open connection between an application on the device and a SE. The Session API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__SESSION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__SESSION__MODULE.html">wearable</a> applications) allows you to open and close basic and logical channels, and get ATR (answer to reset).</p>
-    </li>
-    <li>Channel
-       <p>A channel is an open connection between an application on the device and an applet on the SE. The Channel API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__CHANNEL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__CHANNEL__MODULE.html">wearable</a> applications) allows you to close channels and transmit application protocol data units (APDU).</p>
-    </li>
-</ul>
-
-<p>The following figure illustrates the smart card service architecture in Tizen. The smart card service sends and receives data through the terminal of each SE.</p>
-<p class="figure">Figure: Smart card service architecture</p> 
-<p align="center"> <img alt="Smart card service architecture" src="../../images/smartcard_architecture.png" /> </p>  
-
-<p>The SmartCard API is a reference implementation of the SIMalliance Open Mobile 3.0 API specification that enables Tizen applications to communicate with secure elements. For more information, see the <a href="http://simalliance.org/" target="_blank">SimAlliance</a>. The Tizen implementation differs from the original as follows:</p>
-
-<ul><li>Only the transport layer is provided. There is no service layer support in Tizen.</li>
-<li>The &quot;get version&quot; function does not exist. In Tizen, version management is not performed through a function.</li>
-<li>Allocation style differs dramatically. 
-The Open Mobile API can facilitate the memory management by calling the API twice (for an example, see section 6.3.1, Usage pattern, in the SIMalliance Open Mobile 3.0 API specification). However, Tizen SmartCard API does not follow this allocation style.</li>
-<li>For the <span style="font-family: Courier New,Courier,monospace;">SE Service</span> object management, Tizen provides functions for initialization and deinitialization.</li></ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>SmartCard</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm">SmartCard Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>SmartCard</h1>\r
+\r
+<p>Tizen enables you to use smart card functionalities, such as accessing a secure element (SE). Before using the SmartCard API, make sure you have a secure element on the device. The smart card service allow you to open a session on an SE, open a channel to the applet in the SE, send a command to the channel, and finally receive a response to the command.</p>\r
+\r
+<p>The main components of the SmartCard API include:</p>\r
+\r
+<ul>\r
+    <li>SE service\r
+               <p>The SE Service API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__SE__SERVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__SE__SERVICE__MODULE.html">wearable</a> applications) allows you to initialize and deinitialize the smart card features, and get the available readers. The SE service functions as a connector to the SE framework system.</p>\r
+    </li>\r
+    <li>Reader\r
+<p>The Reader API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">wearable</a> applications) allows you to access the SE connected with the selected reader. You can get the reader name and open and close sessions.</p>         \r
+    </li>\r
+    <li>Session\r
+       <p>A session is an open connection between an application on the device and a SE. The Session API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__SESSION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__SESSION__MODULE.html">wearable</a> applications) allows you to open and close basic and logical channels, and get ATR (answer to reset).</p>\r
+    </li>\r
+    <li>Channel\r
+       <p>A channel is an open connection between an application on the device and an applet on the SE. The Channel API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__CHANNEL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__CHANNEL__MODULE.html">wearable</a> applications) allows you to close channels and transmit application protocol data units (APDU).</p>\r
+    </li>\r
+</ul>\r
+\r
+<p>The following figure illustrates the smart card service architecture in Tizen. The smart card service sends and receives data through the terminal of each SE.</p>\r
+<p class="figure">Figure: Smart card service architecture</p> \r
+<p align="center"> <img alt="Smart card service architecture" src="../../images/smartcard_architecture.png" /> </p>  \r
+\r
+<p>The SmartCard API is a reference implementation of the SIMalliance Open Mobile 3.0 API specification that enables Tizen applications to communicate with secure elements. For more information, see the <a href="http://simalliance.org/" target="_blank">SimAlliance</a>. The Tizen implementation differs from the original as follows:</p>\r
+\r
+<ul><li>Only the transport layer is provided. There is no service layer support in Tizen.</li>\r
+<li>The &quot;get version&quot; function does not exist. In Tizen, version management is not performed through a function.</li>\r
+<li>Allocation style differs dramatically. \r
+The Open Mobile API can facilitate the memory management by calling the API twice (for an example, see section 6.3.1, Usage pattern, in the SIMalliance Open Mobile 3.0 API specification). However, Tizen SmartCard API does not follow this allocation style.</li>\r
+<li>For the <span style="font-family: Courier New,Courier,monospace;">SE Service</span> object management, Tizen provides functions for initialization and deinitialization.</li></ul>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/wifi_direct_n.htm b/org.tizen.guides/html/native/network/wifi_direct_n.htm
index ca256c0..d51697b 100644 (file)
--- a/org.tizen.guides/html/native/network/wifi_direct_n.htm
+++ b/org.tizen.guides/html/native/network/wifi_direct_n.htm
@@ -1,92 +1,92 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Wi-Fi Direct</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm">Wi-Fi Direct Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct API for Mobile Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Wi-Fi Direct</h1>
-
-<p>Wi-Fi Direct&trade; (synonym for Wi-Fi P2P (Peer-to-Peer)) is a technology that allows you to find nearby Wi-Fi Direct&trade; devices and form a Wi-Fi Direct&trade; group to communicate over a peer-to-peer link without wireless access points (base stations) in the infrastructure mode.</p>
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>In a Wi-Fi Direct&trade; group, the group owner works as an access point in the Wi-Fi infrastructure mode and the other devices join the group as clients. A group can be created either by negotiation between 2 devices or in an autonomous mode by a single group owner device. In a negotiation-based group creation, 2 devices compete based on the group owner intent value and the higher intent device becomes a group owner, while the other device becomes a group client. In an autonomous group creation, a device becomes a group owner by itself without any group client.</p>
-
-<p>A Wi-Fi Direct&trade; device can join an existing group by associating itself with the group owner, as long as the allowed number of clients is not exceeded.</p>
-
-<p>The main features of the Wi-FI Direct&trade; include:</p>
-<ul>
-<li>Activating and deactivating a local Wi-Fi Direct&trade; device.</li>
-<li>Discovering Wi-Fi Direct&trade; peer devices and showing Wi-Fi Direct&trade; peer device information.</li>
-<li>Connecting to a specific Wi-Fi Direct&trade; device and disconnecting from a specific Wi-Fi Direct&trade; device.</li>
-<li>Creating a Wi-Fi Direct&trade; group, and manage group.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">You can test the Wi-Fi Direct&trade; functionality only on target devices. The <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> currently does not support this feature.</td>
-</tr>
-</tbody>
-</table> 
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Wi-Fi Direct</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm">Wi-Fi Direct Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct API for Mobile Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Wi-Fi Direct</h1>\r
+\r
+<p>Wi-Fi Direct&trade; (synonym for Wi-Fi P2P (Peer-to-Peer)) is a technology that allows you to find nearby Wi-Fi Direct&trade; devices and form a Wi-Fi Direct&trade; group to communicate over a peer-to-peer link without wireless access points (base stations) in the infrastructure mode.</p>\r
+\r
+  <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<p>In a Wi-Fi Direct&trade; group, the group owner works as an access point in the Wi-Fi infrastructure mode and the other devices join the group as clients. A group can be created either by negotiation between 2 devices or in an autonomous mode by a single group owner device. In a negotiation-based group creation, 2 devices compete based on the group owner intent value and the higher intent device becomes a group owner, while the other device becomes a group client. In an autonomous group creation, a device becomes a group owner by itself without any group client.</p>\r
+\r
+<p>A Wi-Fi Direct&trade; device can join an existing group by associating itself with the group owner, as long as the allowed number of clients is not exceeded.</p>\r
+\r
+<p>The main features of the Wi-FI Direct&trade; include:</p>\r
+<ul>\r
+<li>Activating and deactivating a local Wi-Fi Direct&trade; device.</li>\r
+<li>Discovering Wi-Fi Direct&trade; peer devices and showing Wi-Fi Direct&trade; peer device information.</li>\r
+<li>Connecting to a specific Wi-Fi Direct&trade; device and disconnecting from a specific Wi-Fi Direct&trade; device.</li>\r
+<li>Creating a Wi-Fi Direct&trade; group, and manage group.</li>\r
+</ul>\r
+\r
+<table class="note">\r
+<tbody>\r
+<tr>\r
+<th class="note">Note</th>\r
+</tr>\r
+<tr>\r
+<td class="note">You can test the Wi-Fi Direct&trade; functionality only on target devices. The <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> currently does not support this feature.</td>\r
+</tr>\r
+</tbody>\r
+</table> \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/network/wifi_n.htm b/org.tizen.guides/html/native/network/wifi_n.htm
index 1b1e66a..8c4ab8b 100644 (file)
--- a/org.tizen.guides/html/native/network/wifi_n.htm
+++ b/org.tizen.guides/html/native/network/wifi_n.htm
@@ -1,280 +1,280 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Wi-Fi</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-                       <ul class="toc">
-                               <li><a href="#wifi_manager">Wi-Fi Manager</a></li>
-                               <li><a href="#ap">Access Point</a></li>
-                               <li><a href="#wifi_monitor">Wi-Fi Monitor</a></li>
-                       </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm">Wi-Fi Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Wi-Fi</h1>
-
-<p>Tizen allows your application to connect to a Wireless Local Area Network (WLAN) and transfer data over the network. The Wi-Fi Manager enables your application to activate and deactivate a local Wi-Fi device, and to connect to a WLAN network in the infrastructure mode.</p>
-<p>The main features of the Wi-Fi API include:</p>
-<ul><li>Wi-Fi device and connection management using the <a href="#wifi_manager">Wi-Fi Manager</a></li>
-<li><a href="#ap">Access point</a> management
-<p>You can manage the Wi-Fi account and security information.</p>
-<p>The infrastructure mode is used to connect to a wireless local area network (WLAN). The infrastructure mode requires a wireless access point. To connect to a WLAN, a client must be configured to use the same service set identifier (SSID) as the access point.</p></li>
-<li>Wi-Fi state monitoring using the <a href="#wifi_monitor">Wi-Fi Monitor</a></li>
-</ul>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">You can test the Wi-Fi functionality only on a target device. The Emulator does not support this feature.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-  
-<h2 id="wifi_manager" name="wifi_manager">Wi-Fi Manager</h2>  
-
-<p>The Tizen Wi-Fi Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">wearable</a> applications) provides functions for managing Wi-Fi connection. </p>
-<p>Using the Wi-Fi Manager, you can implement features that allow the users of your application to:</p>
-
-<ul><li>Activate and deactivate a Wi-Fi device
-<p>You can activate and deactivate a local Wi-Fi device using the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_deactivate()</span> functions. Both functions have a callback function as the first parameter. The callback function is called after the activation or deactivation is completed. You can use  the <span style="font-family: Courier New,Courier,monospace">NULL</span> value, if you want no notifications.</p>
-</li>
-<li>Connect to an access point
-<p>You can connect to an access point asynchronously using the <span style="font-family: Courier New,Courier,monospace">wifi_connect()</span> function.</p>
-</li>
-<li>Scan the access points
-<p>To scan access points, use the <span style="font-family: Courier New,Courier,monospace">wifi_scan()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> functions.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">wifi_scan()</span> function starts the scan asynchronously. When the scan is finished, a callback function is called. The <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function allows you to get the result of the scan. It also invokes a callback function.</p></li></ul>
-
- 
-  <h2 id="ap" name="ap">Access Point</h2> 
-
-<p>The Access Point API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">wearable</a> applications) provides functions for managing access points (AP). You need to create an AP handle (<span style="font-family: Courier New,Courier,monospace">wifi_ap_h</span>) for using the API functions. </p>
-
-<p>The Access Point API supports the following main features:</p>
-<ul><li>Creating and destroying an AP handle</li>
-<li>Getting the network information</li>
-<li>Getting the security information</li></ul>
-
-<p>The following table lists the network information details you can access with the Network Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">wearable</a> applications).</p>
-<table> 
-   <caption>
-     Table: Network information details
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>Bssid</td> 
-     <td>Basic service set identifier</td> 
-    </tr> 
-           <tr> 
-     <td>Connection state</td> 
-     <td>Connection state</td> 
-    </tr>
-           <tr> 
-     <td>DNS address</td> 
-     <td>DNS address</td> 
-    </tr>
-           <tr> 
-     <td>Essid</td> 
-     <td>Extended service set identifier</td> 
-    </tr>
-           <tr> 
-     <td>Frequency</td> 
-     <td>Frequency (in MHz)</td> 
-    </tr>
-           <tr> 
-     <td>IP address</td> 
-     <td>IP address</td> 
-    </tr>
-           <tr> 
-     <td>IP config type</td> 
-     <td>Net IP configuration type</td> 
-    </tr>
-           <tr> 
-     <td>Max speed</td> 
-     <td>Maximum speed (in Mbps)</td> 
-    </tr>
-           <tr> 
-     <td>Proxy address</td> 
-     <td>Proxy address</td> 
-    </tr>
-           <tr> 
-     <td>Proxy type</td> 
-     <td>Proxy method type</td> 
-    </tr>
-           <tr> 
-     <td>Rssi</td> 
-     <td>Received signal strength indication</td> 
-    </tr>
-           <tr> 
-     <td>Subnet mask</td> 
-     <td>Subnet mask</td> 
-    </tr>
-   </tbody> 
-  </table> 
-
-
-<p>The following table lists the security information details you can access with the Security Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">wearable</a> applications).</p>
-<table> 
-   <caption>
-     Table: Security information details
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-       <tr> 
-     <td>Encryption type</td> 
-     <td>Wi-Fi encryption type, used in the infrastructure and ad-hoc mode</td> 
-    </tr>
-       <tr> 
-     <td>Security type</td> 
-     <td>Wi-Fi security type</td> 
-    </tr>
-       <tr> 
-     <td>Passphrase required</td> 
-     <td>Whether the passphrase is required</td> 
-    </tr>
-           <tr> 
-     <td>WPS supported</td> 
-     <td>Whether the WPS (Wi-Fi Protected Setup) is supported</td> 
-    </tr>
-   </tbody> 
-  </table> 
-
-<p>You can also obtain the EAP information listed in the following table.</p>
-<table> 
-   <caption>
-     Table: EAP information details
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-           <tr> 
-     <td>Authentication type</td> 
-     <td>Type of EAP phase2 authentication of Wi-Fi</td> 
-    </tr>
-                   <tr> 
-     <td>CA certificate</td> 
-     <td>EAP CA certificate (valid only if the EAP type is TLS)</td> 
-    </tr>
-                   <tr> 
-     <td>Client Certificate</td> 
-     <td>EAP client certificate (valid only if the EAP type is TLS)</td> 
-    </tr>
-                   <tr> 
-     <td>Passphrase</td> 
-     <td>EAP passphrase (valid if the EAP type is PEAP or TTLS)</td>
-    </tr>
-                   <tr> 
-     <td>Private key file</td> 
-     <td>EAP private key file (valid only if the EAP type is TLS)</td> 
-    </tr>
-           <tr> 
-     <td>EAP type</td> 
-     <td>EAP type of Wi-Fi</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-
-<h2 id="wifi_monitor" name="wifi_monitor">Wi-Fi Monitor</h2> 
-
-<p>The Wi-Fi Monitor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">wearable</a> applications) provides functions for monitoring the Wi-Fi connection state.</p>
-
-<p>The Wi-Fi Monitor allows you to get the state of the Wi-Fi connection. The state can be:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_FAILURE</span>
-<p>Connection failed.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_DISCONNECTED</span>
-<p>Disconnected.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_ASSOCIATION</span>
-<p>Association.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_CONFIGURATION</span>
-<p>Configuration.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_CONNECTED</span>
-<p>Connected.</p></li></ul>
-
-<p>The Wi-Fi Monitor also allows monitoring the changes in Wi-Fi. With the Wi-Fi Monitor, you can register callback functions, which notify you when Wi-Fi properties change. The property changes resulting in notifications are listed in the following table.</p>
-
-<table> 
-   <caption>
-     Table: Property changes
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Change in</th> 
-     <th>Description</th> 
-    </tr> 
-       <tr> 
-     <td>Connection state</td> 
-     <td>The callback is called when the connection state is changed.</td> 
-    </tr>
-       <tr> 
-     <td>Device state</td> 
-     <td>The callback is called when the device state changes.</td> 
-    </tr>
-       <tr> 
-     <td>RSSI level</td> 
-     <td>The callback is called when the RSSI of the connected Wi-Fi changes.</td> 
-    </tr>      
-   </tbody> 
-  </table>     
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Wi-Fi</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+                       <ul class="toc">\r
+                               <li><a href="#wifi_manager">Wi-Fi Manager</a></li>\r
+                               <li><a href="#ap">Access Point</a></li>\r
+                               <li><a href="#wifi_monitor">Wi-Fi Monitor</a></li>\r
+                       </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm">Wi-Fi Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Wi-Fi</h1>\r
+\r
+<p>Tizen allows your application to connect to a Wireless Local Area Network (WLAN) and transfer data over the network. The Wi-Fi Manager enables your application to activate and deactivate a local Wi-Fi device, and to connect to a WLAN network in the infrastructure mode.</p>\r
+<p>The main features of the Wi-Fi API include:</p>\r
+<ul><li>Wi-Fi device and connection management using the <a href="#wifi_manager">Wi-Fi Manager</a></li>\r
+<li><a href="#ap">Access point</a> management\r
+<p>You can manage the Wi-Fi account and security information.</p>\r
+<p>The infrastructure mode is used to connect to a wireless local area network (WLAN). The infrastructure mode requires a wireless access point. To connect to a WLAN, a client must be configured to use the same service set identifier (SSID) as the access point.</p></li>\r
+<li>Wi-Fi state monitoring using the <a href="#wifi_monitor">Wi-Fi Monitor</a></li>\r
+</ul>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">You can test the Wi-Fi functionality only on a target device. The Emulator does not support this feature.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+  \r
+<h2 id="wifi_manager" name="wifi_manager">Wi-Fi Manager</h2>  \r
+\r
+<p>The Tizen Wi-Fi Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">wearable</a> applications) provides functions for managing Wi-Fi connection. </p>\r
+<p>Using the Wi-Fi Manager, you can implement features that allow the users of your application to:</p>\r
+\r
+<ul><li>Activate and deactivate a Wi-Fi device\r
+<p>You can activate and deactivate a local Wi-Fi device using the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_deactivate()</span> functions. Both functions have a callback function as the first parameter. The callback function is called after the activation or deactivation is completed. You can use  the <span style="font-family: Courier New,Courier,monospace">NULL</span> value, if you want no notifications.</p>\r
+</li>\r
+<li>Connect to an access point\r
+<p>You can connect to an access point asynchronously using the <span style="font-family: Courier New,Courier,monospace">wifi_connect()</span> function.</p>\r
+</li>\r
+<li>Scan the access points\r
+<p>To scan access points, use the <span style="font-family: Courier New,Courier,monospace">wifi_scan()</span> and <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> functions.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">wifi_scan()</span> function starts the scan asynchronously. When the scan is finished, a callback function is called. The <span style="font-family: Courier New,Courier,monospace">wifi_foreach_found_aps()</span> function allows you to get the result of the scan. It also invokes a callback function.</p></li></ul>\r
+\r
+ \r
+  <h2 id="ap" name="ap">Access Point</h2> \r
+\r
+<p>The Access Point API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">wearable</a> applications) provides functions for managing access points (AP). You need to create an AP handle (<span style="font-family: Courier New,Courier,monospace">wifi_ap_h</span>) for using the API functions. </p>\r
+\r
+<p>The Access Point API supports the following main features:</p>\r
+<ul><li>Creating and destroying an AP handle</li>\r
+<li>Getting the network information</li>\r
+<li>Getting the security information</li></ul>\r
+\r
+<p>The following table lists the network information details you can access with the Network Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">wearable</a> applications).</p>\r
+<table> \r
+   <caption>\r
+     Table: Network information details\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Information</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Bssid</td> \r
+     <td>Basic service set identifier</td> \r
+    </tr> \r
+           <tr> \r
+     <td>Connection state</td> \r
+     <td>Connection state</td> \r
+    </tr>\r
+           <tr> \r
+     <td>DNS address</td> \r
+     <td>DNS address</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Essid</td> \r
+     <td>Extended service set identifier</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Frequency</td> \r
+     <td>Frequency (in MHz)</td> \r
+    </tr>\r
+           <tr> \r
+     <td>IP address</td> \r
+     <td>IP address</td> \r
+    </tr>\r
+           <tr> \r
+     <td>IP config type</td> \r
+     <td>Net IP configuration type</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Max speed</td> \r
+     <td>Maximum speed (in Mbps)</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Proxy address</td> \r
+     <td>Proxy address</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Proxy type</td> \r
+     <td>Proxy method type</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Rssi</td> \r
+     <td>Received signal strength indication</td> \r
+    </tr>\r
+           <tr> \r
+     <td>Subnet mask</td> \r
+     <td>Subnet mask</td> \r
+    </tr>\r
+   </tbody> \r
+  </table> \r
+\r
+\r
+<p>The following table lists the security information details you can access with the Security Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">wearable</a> applications).</p>\r
+<table> \r
+   <caption>\r
+     Table: Security information details\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Information</th> \r
+     <th>Description</th> \r
+    </tr> \r
+       <tr> \r
+     <td>Encryption type</td> \r
+     <td>Wi-Fi encryption type, used in the infrastructure and ad-hoc mode</td> \r
+    </tr>\r
+       <tr> \r
+     <td>Security type</td> \r
+     <td>Wi-Fi security type</td> \r
+    </tr>\r
+       <tr> \r
+     <td>Passphrase required</td> \r
+     <td>Whether the passphrase is required</td> \r
+    </tr>\r
+           <tr> \r
+     <td>WPS supported</td> \r
+     <td>Whether the WPS (Wi-Fi Protected Setup) is supported</td> \r
+    </tr>\r
+   </tbody> \r
+  </table> \r
+\r
+<p>You can also obtain the EAP information listed in the following table.</p>\r
+<table> \r
+   <caption>\r
+     Table: EAP information details\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Information</th> \r
+     <th>Description</th> \r
+    </tr> \r
+           <tr> \r
+     <td>Authentication type</td> \r
+     <td>Type of EAP phase2 authentication of Wi-Fi</td> \r
+    </tr>\r
+                   <tr> \r
+     <td>CA certificate</td> \r
+     <td>EAP CA certificate (valid only if the EAP type is TLS)</td> \r
+    </tr>\r
+                   <tr> \r
+     <td>Client Certificate</td> \r
+     <td>EAP client certificate (valid only if the EAP type is TLS)</td> \r
+    </tr>\r
+                   <tr> \r
+     <td>Passphrase</td> \r
+     <td>EAP passphrase (valid if the EAP type is PEAP or TTLS)</td>\r
+    </tr>\r
+                   <tr> \r
+     <td>Private key file</td> \r
+     <td>EAP private key file (valid only if the EAP type is TLS)</td> \r
+    </tr>\r
+           <tr> \r
+     <td>EAP type</td> \r
+     <td>EAP type of Wi-Fi</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+\r
+<h2 id="wifi_monitor" name="wifi_monitor">Wi-Fi Monitor</h2> \r
+\r
+<p>The Wi-Fi Monitor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">wearable</a> applications) provides functions for monitoring the Wi-Fi connection state.</p>\r
+\r
+<p>The Wi-Fi Monitor allows you to get the state of the Wi-Fi connection. The state can be:</p>\r
+\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_FAILURE</span>\r
+<p>Connection failed.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_DISCONNECTED</span>\r
+<p>Disconnected.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_ASSOCIATION</span>\r
+<p>Association.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_CONFIGURATION</span>\r
+<p>Configuration.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">WIFI_CONNECTION_STATE_CONNECTED</span>\r
+<p>Connected.</p></li></ul>\r
+\r
+<p>The Wi-Fi Monitor also allows monitoring the changes in Wi-Fi. With the Wi-Fi Monitor, you can register callback functions, which notify you when Wi-Fi properties change. The property changes resulting in notifications are listed in the following table.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Property changes\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Change in</th> \r
+     <th>Description</th> \r
+    </tr> \r
+       <tr> \r
+     <td>Connection state</td> \r
+     <td>The callback is called when the connection state is changed.</td> \r
+    </tr>\r
+       <tr> \r
+     <td>Device state</td> \r
+     <td>The callback is called when the device state changes.</td> \r
+    </tr>\r
+       <tr> \r
+     <td>RSSI level</td> \r
+     <td>The callback is called when the RSSI of the connected Wi-Fi changes.</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table>     \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/porting/porting_n.htm b/org.tizen.guides/html/native/porting/porting_n.htm
index 28435ea..8f96592 100644 (file)
--- a/org.tizen.guides/html/native/porting/porting_n.htm
+++ b/org.tizen.guides/html/native/porting/porting_n.htm
@@ -203,10 +203,10 @@ if (uri != NULL)
 <p>When the memory levels in the system are extremely low, the system terminates the application and removes it from the memory. However, it is possible to save the application state or context right before this happens. In the 2.2.1 version, it was done using the <span style="font-family: Courier New,Courier,monospace">Tizen::App::IAppCheckpointEventListener</span> interface. In the new native API, every time when the low level memory situation occurs on the device and the system wants to terminate some application, the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback in that application is called. When you create your application, remember to place the code that must be executed in case of a low memory level in this callback and set the callback using the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function.</p>
 
 <h2 id="scene" name="scene">Scene Transitions</h2>
-<p>In the old 2.2.1 model, the UI scene transitions were handled by specific listeners, such as the <span style="font-family: Courier New,Courier,monospace">Tizen::Ui::Controls::IFormBackEventListener</span> and its <span style="font-family: Courier New,Courier,monospace">OnFormBackRequested()</span> event handler to listen to the <strong>Back </strong>key events for a backward scene transition. In the 2.3 model, all such actions are handled using the EFL and <a href="../ui/efl_extension_n.htm">EFL Extension</a>. The EFL has its own view manager for applications, called naviframe. A naviframe is a stack which holds views or pages as its items. When another view is launched, it is pushed on the top of the stack. Only the topmost view is displayed. The old views are stored on the stack. The EFL Extension provides functions to send key events to the naviframe top item or to pop it. Every time the user presses the <strong>Back</strong> key, the current view is removed from the stack and the view that was right under it becomes the topmost view and is displayed. The transition animation between views is handled by the EFL and depends on the theme applied to the UI component.</p>
+<p>In the old 2.2.1 model, the UI scene transitions were handled by specific listeners, such as the <span style="font-family: Courier New,Courier,monospace">Tizen::Ui::Controls::IFormBackEventListener</span> and its <span style="font-family: Courier New,Courier,monospace">OnFormBackRequested()</span> event handler to listen to the <strong>Back </strong>key events for a backward scene transition. In the 2.3 model, all such actions are handled using the EFL and <a href="../../../../org.tizen.ui.guides/html/native/efl/hw_input_n.htm">Hardware Input Handling</a>. The EFL has its own view manager for applications, called naviframe. A naviframe is a stack which holds views or pages as its items. When another view is launched, it is pushed on the top of the stack. Only the topmost view is displayed. The old views are stored on the stack. The EFL Extension provides functions to send key events to the naviframe top item or to pop it. Every time the user presses the <strong>Back</strong> key, the current view is removed from the stack and the view that was right under it becomes the topmost view and is displayed. The transition animation between views is handled by the EFL and depends on the theme applied to the UI component.</p>
 
 <h2 id="keys" name="keys">Hardware Keys</h2>
-<p>With the arrival of the EFL, handling the hardware key events has changed. Until now, the 2.2.1 model provided the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.apireference/classTizen_1_1Ui_1_1Controls_1_1IFormMenuEventListener.html" target="_blank">Tizen::Ui::Controls::IFormMenuEventListener</a> interface. This interface delivered the <span style="font-family: Courier New,Courier,monospace">OnFormMenuRequested()</span> event handler to listen to the hardware <strong>Menu</strong> key events. Now, all this functionality is obtained using the EFL. In the <a href="../ui/efl_extension_n.htm">EFL Extension</a> documentation, find functions which enable you to manipulate the key modifiers. Use them to add handling for the hardware key events.</p>
+<p>With the arrival of the EFL, handling the hardware key events has changed. Until now, the 2.2.1 model provided the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.apireference/classTizen_1_1Ui_1_1Controls_1_1IFormMenuEventListener.html" target="_blank">Tizen::Ui::Controls::IFormMenuEventListener</a> interface. This interface delivered the <span style="font-family: Courier New,Courier,monospace">OnFormMenuRequested()</span> event handler to listen to the hardware <strong>Menu</strong> key events. Now, all this functionality is obtained using the EFL. In the <a href="../../../../org.tizen.ui.guides/html/native/efl/key_events_n.htm">Managing Menu and Back Key Events</a> documentation, find functions which enable you to manipulate the key modifiers. Use them to add handling for the hardware key events.</p>
 
 <h2 id="ex" name="ex">Exceptions</h2>
 <p>Normally in the 2.3 API version, the exceptions model functions return an integer which indicates an error value. Usually, the value is 0 if there are no errors and the name format for this value is MODULE_NAME_ERROR_NONE. As in 2.2.1, the current API provides functions to get and set the last error value in the thread. In the 2.3 version, this functionality and the error enumerations are in the Base module. The following example shows how the current native API returns errors.</p>
diff --git a/org.tizen.guides/html/native/security/key_manager_n.htm b/org.tizen.guides/html/native/security/key_manager_n.htm
index b303d1a..020f0a2 100644 (file)
--- a/org.tizen.guides/html/native/security/key_manager_n.htm
+++ b/org.tizen.guides/html/native/security/key_manager_n.htm
@@ -1,124 +1,124 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Key Manager</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm">Key Manager Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Key Manager</h1>
-
-<p>The key manager provides functions to securely store keys, certificates, and sensitive data related to users and their password-protected APPs. Additionally, it provides secure cryptographic operations for non-exportable keys without revealing the key values to clients.</p>
-
-   <p class="figure">Figure: Key manager process</p> 
-   <p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p> 
-
-<p> A key manager stores keys, certificates, and sensitive user data in a central secure repository. The central secure repository is protected by a password.</p>
-
-<p>The main features of the Key Manager API include:</p>
-
-<ul>
-<li>Data store policy
-<p>A client can specify simple access rules when storing data in the key manager:</p>
-<ul>
-<li>Extractable or non-extractable
-       <ul>
-       <li>Only for data tagged as extractable, the key manager returns the raw value of the data.</li>
-       <li>If data is tagged as non-extractable, the key manager does not return its raw value. In that case, the key manager provides secure cryptographic operations for non-exportable keys without revealing the key values to the clients.</li></ul></li>
-<li>Per key password
-       <ul>
-       <li>All data in the key manager is protected by a user password.</li>
-       <li>A client can encrypt its data using their own password additionally.</li>
-       <li>If a client provides a password when storing data, the data is encrypted with the password. This password must be provided when getting the data from the key manager.</li></ul></li>
-       </ul>
-</li>
-<li>User login
-
-<p>The user login control is implemented as follows:</p>
-
-<ul>
-<li>A user&#39;s database file is encrypted by the user&#39;s DKEK (domain key encryption key). A DKEK of a user is randomly generated and stored as encrypted with a user password when a user logs in for the first time.</li>
-<li>When a user logs in, the key manager decrypts the user DKEK with a user password. During the login session, any client can access the data which is protected by a user password. When a user logs out, the key manager removes the user DKEK from the memory.</li>
-<li>When a user logs in, logs out, or changes their password, the key manager must be notified. Only privileged APPs, such as LockScreen APP or Setting APP, can notify the key manager.</li>
-<li>When a user changes their password, the key manager re-encrypts the user DKEK with the new password.</li>
-</ul>
-</li>
-
-<li>Data access control
-
-<p>By default, only the owner of a data can access to the data. If the owner grants the access to other applications, those applications can read or delete the data from the key manager database.</p>
-<p>When an application is deleted, the data and access control information granted by the application are also removed.</p>
-</li>
-</ul>
-
-
-<p>The key manager provides 2 types of APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications):</p>
-<ul>
-<li>Secure repository APIs <p>All APPs can use the secure repository APIs to:</p>
-<ul>
-<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingkey">Save, get, or remove a key</a></li>
-
-<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingcert">Save, get, or remove a certificate</a></li>
-
-<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingdata">Save, get, or remove data</a></li>
-</ul></li>
-<li>Secure crypto APIs <p>The key manager provides the secure crypto APIs for the non-extractable keys and certificates to:</p>
-<ul>
-<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#creatingkey">Create key pairs</a></li>
-
-<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#creatingsignat">Create or verify signatures</a></li>
-
-<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#verifying">Verify or get a certificate chain</a></li>
-
-<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#pkcs">Load a certificate or a PKCS#12 file</a></li>
-</ul>
-</li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Key Manager</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm">Key Manager Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Key Manager</h1>\r
+\r
+<p>The key manager provides functions to securely store keys, certificates, and sensitive data related to users and their password-protected APPs. Additionally, it provides secure cryptographic operations for non-exportable keys without revealing the key values to clients.</p>\r
+\r
+   <p class="figure">Figure: Key manager process</p> \r
+   <p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p> \r
+\r
+<p> A key manager stores keys, certificates, and sensitive user data in a central secure repository. The central secure repository is protected by a password.</p>\r
+\r
+<p>The main features of the Key Manager API include:</p>\r
+\r
+<ul>\r
+<li>Data store policy\r
+<p>A client can specify simple access rules when storing data in the key manager:</p>\r
+<ul>\r
+<li>Extractable or non-extractable\r
+       <ul>\r
+       <li>Only for data tagged as extractable, the key manager returns the raw value of the data.</li>\r
+       <li>If data is tagged as non-extractable, the key manager does not return its raw value. In that case, the key manager provides secure cryptographic operations for non-exportable keys without revealing the key values to the clients.</li></ul></li>\r
+<li>Per key password\r
+       <ul>\r
+       <li>All data in the key manager is protected by a user password.</li>\r
+       <li>A client can encrypt its data using their own password additionally.</li>\r
+       <li>If a client provides a password when storing data, the data is encrypted with the password. This password must be provided when getting the data from the key manager.</li></ul></li>\r
+       </ul>\r
+</li>\r
+<li>User login\r
+\r
+<p>The user login control is implemented as follows:</p>\r
+\r
+<ul>\r
+<li>A user&#39;s database file is encrypted by the user&#39;s DKEK (domain key encryption key). A DKEK of a user is randomly generated and stored as encrypted with a user password when a user logs in for the first time.</li>\r
+<li>When a user logs in, the key manager decrypts the user DKEK with a user password. During the login session, any client can access the data which is protected by a user password. When a user logs out, the key manager removes the user DKEK from the memory.</li>\r
+<li>When a user logs in, logs out, or changes their password, the key manager must be notified. Only privileged APPs, such as LockScreen APP or Setting APP, can notify the key manager.</li>\r
+<li>When a user changes their password, the key manager re-encrypts the user DKEK with the new password.</li>\r
+</ul>\r
+</li>\r
+\r
+<li>Data access control\r
+\r
+<p>By default, only the owner of a data can access to the data. If the owner grants the access to other applications, those applications can read or delete the data from the key manager database.</p>\r
+<p>When an application is deleted, the data and access control information granted by the application are also removed.</p>\r
+</li>\r
+</ul>\r
+\r
+\r
+<p>The key manager provides 2 types of APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications):</p>\r
+<ul>\r
+<li>Secure repository APIs <p>All APPs can use the secure repository APIs to:</p>\r
+<ul>\r
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingkey">Save, get, or remove a key</a></li>\r
+\r
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingcert">Save, get, or remove a certificate</a></li>\r
+\r
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#savingdata">Save, get, or remove data</a></li>\r
+</ul></li>\r
+<li>Secure crypto APIs <p>The key manager provides the secure crypto APIs for the non-extractable keys and certificates to:</p>\r
+<ul>\r
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#creatingkey">Create key pairs</a></li>\r
+\r
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#creatingsignat">Create or verify signatures</a></li>\r
+\r
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#verifying">Verify or get a certificate chain</a></li>\r
+\r
+<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm#pkcs">Load a certificate or a PKCS#12 file</a></li>\r
+</ul>\r
+</li>\r
+</ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/security/privilege_n.htm b/org.tizen.guides/html/native/security/privilege_n.htm
index 72f84b4..17e2b55 100644 (file)
--- a/org.tizen.guides/html/native/security/privilege_n.htm
+++ b/org.tizen.guides/html/native/security/privilege_n.htm
@@ -1,65 +1,65 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Privilege Info</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm">Privilege Info Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Privilege Info</h1>
-
-<p>Tizen provides <a href="../../../../org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm">privilege</a> information for user notification.</p>
-
-<p>The following information can be retrieved:</p>
-<ul>
-<li>Privilege name: Privilege description in a simple present participle form.</li>
-<li>Privilege description: Detailed information on permissions, including accessible resources and functionality, that the application can get with this privilege. It also contains information related to billing or device performance, such as cost or increase battery usage.</li>
-</ul> 
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Privilege Info</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm">Privilege Info Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Privilege Info</h1>\r
+\r
+<p>Tizen provides <a href="../../../../org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm">privilege</a> information for user notification.</p>\r
+\r
+<p>The following information can be retrieved:</p>\r
+<ul>\r
+<li>Privilege name: Privilege description in a simple present participle form.</li>\r
+<li>Privilege description: Detailed information on permissions, including accessible resources and functionality, that the application can get with this privilege. It also contains information related to billing or device performance, such as cost or increase battery usage.</li>\r
+</ul> \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/security/security_guide_n.htm b/org.tizen.guides/html/native/security/security_guide_n.htm
index fbab149..ea26b3c 100644 (file)
--- a/org.tizen.guides/html/native/security/security_guide_n.htm
+++ b/org.tizen.guides/html/native/security/security_guide_n.htm
@@ -1,65 +1,65 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Security</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security Tutorials</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Wearable Native</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Security</h1> 
-  <p>Security features include basic cryptographic functions and information on privileges for user notification. You can also use various utility functions provided by the OpenSSL open source library.</p>
-
-  <p>The main security features are:</p>
-  <ul> 
-  <li><a href="key_manager_n.htm">Key Manager</a> <p>Enables you to provide a secure repository for keys, certificates, and sensitive data related to users and their password-protected applications.</p></li>
-  <li><a href="privilege_n.htm">Privilege Info</a> <p>Enables you to get information about permissions granted by a privilege.</p></li>
-  </ul> 
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Security</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security Tutorials</a></li> \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Wearable Native</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>Security</h1> \r
+  <p>Security features include basic cryptographic functions and information on privileges for user notification. You can also use various utility functions provided by the OpenSSL open source library.</p>\r
+\r
+  <p>The main security features are:</p>\r
+  <ul> \r
+  <li><a href="key_manager_n.htm">Key Manager</a> <p>Enables you to provide a secure repository for keys, certificates, and sensitive data related to users and their password-protected applications.</p></li>\r
+  <li><a href="privilege_n.htm">Privilege Info</a> <p>Enables you to get information about permissions granted by a privilege.</p></li>\r
+  </ul> \r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/social/account_manager_n.htm b/org.tizen.guides/html/native/social/account_manager_n.htm
index 5c02faf..e2a793c 100644 (file)
--- a/org.tizen.guides/html/native/social/account_manager_n.htm
+++ b/org.tizen.guides/html/native/social/account_manager_n.htm
@@ -1,366 +1,366 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Account Manager</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-                               <li><a href="#provider">Account Providers</a></li>
-                               <li><a href="#appcontrol">Account Application Control</a></li>          
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/social/account_tutorial_n.htm">Account Manager Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Mobile Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-  <h1>Account Manager</h1>
-       
- <p>An account is a collection of information representing the user of a specific provider.</p> 
- 
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
-  <p>The main features of the Account Manager API include:
-</p> 
-  <ul> 
-   <li>Creating and managing accounts</li> 
-   <li>Retrieving account information</li>
-   <li>Receiving account change notifications</li> 
-  </ul> 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To add, update, or remove an account, you must <a href="#provider">register your account provider</a> for all your applications belonging to the same package.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-  <p>The <span style="font-family: Courier New,Courier,monospace">account.h</span> header file handles account-related information. The following table lists the account properties that can be modified.</p> 
-  <table border="1"> 
-   <caption>
-     Table: Account properties 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Account property</th> 
-     <th>Data type</th> 
-        <th>Mandatory</th>
-        <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>User name</td> 
-        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-        <td>Yes</td>
-     <td>Identity of an account.
-         <p>If the display name and email address are not set for an account, the user name is shown for the account on the Accounts screen in the Setting application.</p>
-        </td>
-    </tr>
-    <tr>
-     <td>Display name</td>
-        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-        <td>No</td>
-     <td>Display name of an account.
-        <p>Display name is shown for the account on the Accounts screen in the Setting application.</p>
-        </td>
-    </tr>
-    <tr>
-     <td>Email address</td>
-        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-     <td>No</td>
-        <td>Email address of an account.
-         <p>If the display name is not set for an account, the email address is shown for the account on the Accounts screen in the Setting application.</p>
-        </td>
-    </tr>
-       <tr>
-     <td>Package name</td>
-        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-     <td>No</td>
-        <td>One of an account package IDs, like the app ID.
-         <p>If the package name is not set for an account, the app ID is used as a package name.</p>
-        </td>
-   </tr>
-       <tr>
-     <td>Icon path</td>
-        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-         <td>No</td>
-     <td>Icon path of an account.
-         <p>The icon is shown through the registered icon path as an account icon on the Accounts screen in the Setting application.</p>
-        </td>
-    </tr>
-       <tr>
-     <td>Domain name</td>
-        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-         <td>No</td>
-     <td>Domain name of an account.
-        </td>
-    </tr>  
-       <tr>
-     <td>Access token</td> 
-        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-         <td>No</td>
-     <td>Access token of an account.
-        </td>
-    </tr>  
-       <tr>
-     <td>Auth type</td> 
-        <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
-         <td>No</td>
-     <td>Authentication type, such as oauth or xauth.
-        </td>
-    </tr>  
-       <tr>
-     <td>Capability</td> 
-        <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span>-<span style="font-family: Courier New,Courier,monospace">integer</span> pairs</td>
-         <td>No</td>
-     <td>Capability of an account.
-       </td> 
-    </tr>  
-       <tr>
-     <td>Secret</td> 
-        <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
-         <td>No</td>
-     <td>The secret value is used to decide whether the account is shown on the Accounts screen in the Setting application.
-        </td>
-    </tr>  
-       <tr>
-     <td>Sync support</td> 
-        <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
-         <td>No</td>
-     <td>Current synchronization status.</td>
-    </tr>
-       <tr>
-     <td>Source</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-         <td>No</td>
-       <td>Source of an account.
-        </td>
-    </tr>
-       <tr>
-     <td>User text</td> 
-        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
-         <td>No</td>
-     <td>String array which you can use freely.
-        </td>
-    </tr>  
-       <tr>
-     <td>User int</td> 
-        <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
-         <td>No</td>
-     <td>Integer array which you can use freely.
-        </td> 
-    </tr>
-       <tr>
-     <td>Custom</td> 
-        <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span> pairs</td>
-         <td>No</td>
-     <td>Key-value pairs which you can use freely.
-        </td>
-    </tr>
-   </tbody> 
-  </table> 
-    
-<h2 id="provider" name="provider">Account Providers</h2> 
-  <p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p> 
-  <p>To register an account provider, define the account provider information in the <strong>Account</strong> tab of the manifest editor, as described in the following table, and implement the <a href="#appcontrol">account application control</a>.</p> 
-  <table border="1"> 
-   <caption>
-     Table: Account provider properties 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Account property</th> 
-     <th>Data type</th> 
-        <th>Mandatory</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>Multiple accounts support</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span> </td> 
-        <td>Yes</td>
-     <td>Indicates whether multiple accounts are supported.</td> 
-    </tr> 
-    <tr> 
-     <td>Icon</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
-        <td>Yes</td>
-     <td>File path of the account provider icon.
-        <p>The icon size is:</p>
-        <ul>
-               <li>72 x 72 for Xhigh (HD)</li>
-               <li>48 x 48 for High (WVGA)</li>
-        </ul>
-        <p>Since the icon is used in <strong>Settings &gt; Accounts</strong>, place the icon in a shared directory.</p></td> 
-    </tr> 
-    <tr> 
-     <td>Small icon</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
-        <td>Yes</td>
-     <td>File path of the account provider icon.
-        <p>The icon size is:</p>
-        <ul>
-               <li>45 x 45 for Xhigh (HD)</li>
-               <li>30 x 30 for High (WVGA)</li>
-        </ul>
-        <p>Since the small icon is used in other applications, place the icon in a shared directory.</p></td> 
-    </tr> 
-    <tr> 
-     <td>Display name</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
-        <td>Yes</td>
-     <td>Display name of the account provider.</td> 
-    </tr> 
-    <tr> 
-     <td>Capabilities</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> 
-        <td>No</td>
-     <td>Capability of the account provider.
-         <p>Capability can be a liaison between an account application and another application. If an account application registers a capability in the manifest file, other applications know that the account application has the capability. And if an account application gives an account a capability, other applications know that the account has the capability.</p>
-         <p>Several service-specific capabilities are defined for the Account Manager in Tizen:</p>
-
-      <ul>
-       <li>Contact capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or &quot;http://tizen.org/account/capability/contact&quot;</span></p>
-           <p>If you register this capability in the manifest file, the user using the contact application can see a list of accounts with the account of your service in the contact application.</p>
-          </li> 
-       <li>Calendar capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or &quot;http://tizen.org/account/capability/calendar&quot;</span></p>
-           <p>If you register this capability in the manifest file, the user using the calendar application can see a list of accounts with the account of your service in the calendar application.</p>
-          </li>
-       <li>Email capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or &quot;http://tizen.org/account/capability/email&quot;</span></p>
-          </li>
-       <li>Photo capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or &quot;http://tizen.org/account/capability/photo&quot;</span></p>
-          </li>
-       <li>Video capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or &quot;http://tizen.org/account/capability/video&quot;</span></p>
-          </li>
-       <li>Music capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or &quot;http://tizen.org/account/capability/music&quot;</span></p>
-          </li>
-       <li>Document capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or &quot;http://tizen.org/account/capability/document&quot;</span></p>
-          </li>
-       <li>Message capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or &quot;http://tizen.org/account/capability/message&quot;</span></p>
-          </li>
-       <li>Game capability:
-          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_GAME or &quot;http://tizen.org/account/capability/game&quot;</span></p>
-          </li>
-</ul>    
-       </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-  <p>If the application has defined the account provider information and implements the appcontrol for the account provider, the account provider is automatically registered when the application is installed.</p>   
-  
-<h2 id="appcontrol" name="appcontrol">Account Application Control</h2> 
-  <p>The account application control, which allows the user to add and configure accounts, must be implemented in all applications that define an account provider. You are not required to define the application control information in the <strong>Application Control</strong> tab of the manifest editor.</p> 
-  
-  <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operations.</p> 
- 
-  <h3 id="ADD" name="ADD">ACCOUNT_OPERATION_SIGNIN Operation</h3>
-  <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> operation enables the user to add a new account for a specific account provider. With the operation, the login page for the specific account provider can be displayed. In <strong>Settings &gt; Accounts</strong>, if the account provider is clicked for adding a new account, this operation is launched.</p>
-
-  <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
-  
-  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p> 
-  <p>The following table shows the ACCOUNT_OPERATION_SIGNIN (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span>) operation.</p> 
-  <table border="1"> 
-   <caption>
-     Table: ACCOUNT_OPERATION_SIGNIN operation 
-   </caption> 
- 
-    <tbody>
-    <tr>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span></td>
-     <td>Account ID of the added account.</td>
-    </tr>
-   </tbody>
-
-  </table> 
-  <h3 id="CONFIG" name="CONFIG">ACCOUNT_OPERATION_VIEW Operation</h3>
-  <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operation enables the user to set account information, such as synchronization settings. The delete button must be included for removing accounts.</p> 
-  <p>In <strong>Settings &gt; Accounts</strong>, if the specific account is clicked for setting the account information, this operation is launched.</p>
-  <p> You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>. </p>
-  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p>
-  <p>The following table shows the ACCOUNT_OPERATION_VIEW (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span>) operation.</p>
-  
-  <table border="1"> 
-   <caption>
-     Table: ACCOUNT_OPERATION_VIEW operation 
-   </caption> 
-    <tbody>
-    <tr>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_VIEW</span></td>
-     <td>Account ID for setting account information.</td>
-    </tr>
-   </tbody>
-
-  </table>       
-  
-  <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+    <title>Account Manager</title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                               <li><a href="#provider">Account Providers</a></li>\r
+                               <li><a href="#appcontrol">Account Application Control</a></li>          \r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/social/account_tutorial_n.htm">Account Manager Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Mobile Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+\r
+  <h1>Account Manager</h1>\r
+       \r
+ <p>An account is a collection of information representing the user of a specific provider.</p> \r
+ \r
+   <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+  <p>The main features of the Account Manager API include:\r
+</p> \r
+  <ul> \r
+   <li>Creating and managing accounts</li> \r
+   <li>Retrieving account information</li>\r
+   <li>Receiving account change notifications</li> \r
+  </ul> \r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">To add, update, or remove an account, you must <a href="#provider">register your account provider</a> for all your applications belonging to the same package.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  \r
+  <p>The <span style="font-family: Courier New,Courier,monospace">account.h</span> header file handles account-related information. The following table lists the account properties that can be modified.</p> \r
+  <table border="1"> \r
+   <caption>\r
+     Table: Account properties \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Account property</th> \r
+     <th>Data type</th> \r
+        <th>Mandatory</th>\r
+        <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td>User name</td> \r
+        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+        <td>Yes</td>\r
+     <td>Identity of an account.\r
+         <p>If the display name and email address are not set for an account, the user name is shown for the account on the Accounts screen in the Setting application.</p>\r
+        </td>\r
+    </tr>\r
+    <tr>\r
+     <td>Display name</td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+        <td>No</td>\r
+     <td>Display name of an account.\r
+        <p>Display name is shown for the account on the Accounts screen in the Setting application.</p>\r
+        </td>\r
+    </tr>\r
+    <tr>\r
+     <td>Email address</td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+     <td>No</td>\r
+        <td>Email address of an account.\r
+         <p>If the display name is not set for an account, the email address is shown for the account on the Accounts screen in the Setting application.</p>\r
+        </td>\r
+    </tr>\r
+       <tr>\r
+     <td>Package name</td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+     <td>No</td>\r
+        <td>One of an account package IDs, like the app ID.\r
+         <p>If the package name is not set for an account, the app ID is used as a package name.</p>\r
+        </td>\r
+   </tr>\r
+       <tr>\r
+     <td>Icon path</td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+         <td>No</td>\r
+     <td>Icon path of an account.\r
+         <p>The icon is shown through the registered icon path as an account icon on the Accounts screen in the Setting application.</p>\r
+        </td>\r
+    </tr>\r
+       <tr>\r
+     <td>Domain name</td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+         <td>No</td>\r
+     <td>Domain name of an account.\r
+        </td>\r
+    </tr>  \r
+       <tr>\r
+     <td>Access token</td> \r
+        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+         <td>No</td>\r
+     <td>Access token of an account.\r
+        </td>\r
+    </tr>  \r
+       <tr>\r
+     <td>Auth type</td> \r
+        <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>\r
+         <td>No</td>\r
+     <td>Authentication type, such as oauth or xauth.\r
+        </td>\r
+    </tr>  \r
+       <tr>\r
+     <td>Capability</td> \r
+        <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span>-<span style="font-family: Courier New,Courier,monospace">integer</span> pairs</td>\r
+         <td>No</td>\r
+     <td>Capability of an account.\r
+       </td> \r
+    </tr>  \r
+       <tr>\r
+     <td>Secret</td> \r
+        <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>\r
+         <td>No</td>\r
+     <td>The secret value is used to decide whether the account is shown on the Accounts screen in the Setting application.\r
+        </td>\r
+    </tr>  \r
+       <tr>\r
+     <td>Sync support</td> \r
+        <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>\r
+         <td>No</td>\r
+     <td>Current synchronization status.</td>\r
+    </tr>\r
+       <tr>\r
+     <td>Source</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+         <td>No</td>\r
+       <td>Source of an account.\r
+        </td>\r
+    </tr>\r
+       <tr>\r
+     <td>User text</td> \r
+        <td><span style="font-family: Courier New,Courier,monospace">String</span></td>\r
+         <td>No</td>\r
+     <td>String array which you can use freely.\r
+        </td>\r
+    </tr>  \r
+       <tr>\r
+     <td>User int</td> \r
+        <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>\r
+         <td>No</td>\r
+     <td>Integer array which you can use freely.\r
+        </td> \r
+    </tr>\r
+       <tr>\r
+     <td>Custom</td> \r
+        <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span> pairs</td>\r
+         <td>No</td>\r
+     <td>Key-value pairs which you can use freely.\r
+        </td>\r
+    </tr>\r
+   </tbody> \r
+  </table> \r
+    \r
+<h2 id="provider" name="provider">Account Providers</h2> \r
+  <p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p> \r
+  <p>To register an account provider, define the account provider information in the <strong>Account</strong> tab of the manifest editor, as described in the following table, and implement the <a href="#appcontrol">account application control</a>.</p> \r
+  <table border="1"> \r
+   <caption>\r
+     Table: Account provider properties \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Account property</th> \r
+     <th>Data type</th> \r
+        <th>Mandatory</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Multiple accounts support</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span> </td> \r
+        <td>Yes</td>\r
+     <td>Indicates whether multiple accounts are supported.</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Icon</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> \r
+        <td>Yes</td>\r
+     <td>File path of the account provider icon.\r
+        <p>The icon size is:</p>\r
+        <ul>\r
+               <li>72 x 72 for Xhigh (HD)</li>\r
+               <li>48 x 48 for High (WVGA)</li>\r
+        </ul>\r
+        <p>Since the icon is used in <strong>Settings &gt; Accounts</strong>, place the icon in a shared directory.</p></td> \r
+    </tr> \r
+    <tr> \r
+     <td>Small icon</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> \r
+        <td>Yes</td>\r
+     <td>File path of the account provider icon.\r
+        <p>The icon size is:</p>\r
+        <ul>\r
+               <li>45 x 45 for Xhigh (HD)</li>\r
+               <li>30 x 30 for High (WVGA)</li>\r
+        </ul>\r
+        <p>Since the small icon is used in other applications, place the icon in a shared directory.</p></td> \r
+    </tr> \r
+    <tr> \r
+     <td>Display name</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> \r
+        <td>Yes</td>\r
+     <td>Display name of the account provider.</td> \r
+    </tr> \r
+    <tr> \r
+     <td>Capabilities</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">String</span></td> \r
+        <td>No</td>\r
+     <td>Capability of the account provider.\r
+         <p>Capability can be a liaison between an account application and another application. If an account application registers a capability in the manifest file, other applications know that the account application has the capability. And if an account application gives an account a capability, other applications know that the account has the capability.</p>\r
+         <p>Several service-specific capabilities are defined for the Account Manager in Tizen:</p>\r
+\r
+      <ul>\r
+       <li>Contact capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or &quot;http://tizen.org/account/capability/contact&quot;</span></p>\r
+           <p>If you register this capability in the manifest file, the user using the contact application can see a list of accounts with the account of your service in the contact application.</p>\r
+          </li> \r
+       <li>Calendar capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or &quot;http://tizen.org/account/capability/calendar&quot;</span></p>\r
+           <p>If you register this capability in the manifest file, the user using the calendar application can see a list of accounts with the account of your service in the calendar application.</p>\r
+          </li>\r
+       <li>Email capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or &quot;http://tizen.org/account/capability/email&quot;</span></p>\r
+          </li>\r
+       <li>Photo capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or &quot;http://tizen.org/account/capability/photo&quot;</span></p>\r
+          </li>\r
+       <li>Video capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or &quot;http://tizen.org/account/capability/video&quot;</span></p>\r
+          </li>\r
+       <li>Music capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or &quot;http://tizen.org/account/capability/music&quot;</span></p>\r
+          </li>\r
+       <li>Document capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or &quot;http://tizen.org/account/capability/document&quot;</span></p>\r
+          </li>\r
+       <li>Message capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or &quot;http://tizen.org/account/capability/message&quot;</span></p>\r
+          </li>\r
+       <li>Game capability:\r
+          <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_GAME or &quot;http://tizen.org/account/capability/game&quot;</span></p>\r
+          </li>\r
+</ul>    \r
+       </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  \r
+  <p>If the application has defined the account provider information and implements the appcontrol for the account provider, the account provider is automatically registered when the application is installed.</p>   \r
+  \r
+<h2 id="appcontrol" name="appcontrol">Account Application Control</h2> \r
+  <p>The account application control, which allows the user to add and configure accounts, must be implemented in all applications that define an account provider. You are not required to define the application control information in the <strong>Application Control</strong> tab of the manifest editor.</p> \r
+  \r
+  <p>This application control supports the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operations.</p> \r
+ \r
+  <h3 id="ADD" name="ADD">ACCOUNT_OPERATION_SIGNIN Operation</h3>\r
+  <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> operation enables the user to add a new account for a specific account provider. With the operation, the login page for the specific account provider can be displayed. In <strong>Settings &gt; Accounts</strong>, if the account provider is clicked for adding a new account, this operation is launched.</p>\r
+\r
+  <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>\r
+  \r
+  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p> \r
+  <p>The following table shows the ACCOUNT_OPERATION_SIGNIN (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span>) operation.</p> \r
+  <table border="1"> \r
+   <caption>\r
+     Table: ACCOUNT_OPERATION_SIGNIN operation \r
+   </caption> \r
+ \r
+    <tbody>\r
+    <tr>\r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>\r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span></td>\r
+     <td>Account ID of the added account.</td>\r
+    </tr>\r
+   </tbody>\r
+\r
+  </table> \r
+  <h3 id="CONFIG" name="CONFIG">ACCOUNT_OPERATION_VIEW Operation</h3>\r
+  <p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operation enables the user to set account information, such as synchronization settings. The delete button must be included for removing accounts.</p> \r
+  <p>In <strong>Settings &gt; Accounts</strong>, if the specific account is clicked for setting the account information, this operation is launched.</p>\r
+  <p> You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>. </p>\r
+  <p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p>\r
+  <p>The following table shows the ACCOUNT_OPERATION_VIEW (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span>) operation.</p>\r
+  \r
+  <table border="1"> \r
+   <caption>\r
+     Table: ACCOUNT_OPERATION_VIEW operation \r
+   </caption> \r
+    <tbody>\r
+    <tr>\r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>\r
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_VIEW</span></td>\r
+     <td>Account ID for setting account information.</td>\r
+    </tr>\r
+   </tbody>\r
+\r
+  </table>       \r
+  \r
+  <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/social/calendar_n.htm b/org.tizen.guides/html/native/social/calendar_n.htm
index daf8dfc..b4af62e 100644 (file)
--- a/org.tizen.guides/html/native/social/calendar_n.htm
+++ b/org.tizen.guides/html/native/social/calendar_n.htm
@@ -1,742 +1,742 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Calendar</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-                               <li><a href="#book">Calendar Books</a></li>
-                               <li><a href="#change">Database Change Notifications</a></li>
-                               <li><a href="#event">Events and Instances</a></li>
-                               <li><a href="#filter2">Filters and Queries</a></li>
-                               <li><a href="#record2">Records</a></li> 
-                               <li><a href="#remind">Reminders</a></li>
-                               <li><a href="#time">Time Structure</a></li>
-                               <li><a href="#view2">Views and Properties</a></li> 
-                               <li><a href="#vcal">vCalendar</a></li>  
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm">Calendar Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API for Mobile Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-  <h1>Calendar</h1>
-       
-<p>A calendar is a system of organizing days for social purposes. It is composed of <a href="#record2">records</a>, such as events and todos. The records consist of subrecords, such as alarms, attendees, or extensions. For example, if an event has a recurrence rule (meaning that it happens multiple times), separate instances are generated for each time the event occurs.</p>
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
-  <p class="figure">Figure: Calendar model</p> 
-  <p align="center"><img alt="Calendar model" src="../../images/calendar_model.png" /></p>
-  
-  <p>The Calendar Service supports <a href="#vcal">vCalendars</a>.</p>
-
-<p>The main features of the Calendar API include:</p>
-       <ul>
-               <li><a href="#book">Calendar books</a>
-               <ul>
-                       <li>Determine where the events and todos belong.</li>
-                       <li>Create calendar books using the local device (with no account), service providers, such as Google or Yahoo (with an account), or applications, such as ChatON, Joyn, or Facebook.</li>
-                       <li>Search and organize events using <a href="#filter2">filters and queries</a>.</li>
-                       <li>Monitor <a href="#change">database changes</a>.</li>
-               </ul>
-               <p>Each account can have multiple calendar books. The calendar book name does not need to be unique on the device because it is handled with an ID. Since the local device address book has no account, its related account ID is zero.</p>
-               </li>
-               <li><a href="#event">Events and tasks</a>
-               <ul>
-                       <li>Set properties, such as summary, start time, and description.</li>
-                       <li>Set <a href="#remind">reminders</a>.</li>
-                       </ul>
-               </li>
-               <li><a href="#time">Time management</a>
-               <ul>
-                       <li>Define the calendar UTC time and date.</li>
-                       </ul>
-               </li>
-       </ul>
-
-<p>The following figure illustrates the different Calendar entities and their relationships.</p> 
-
-  <p class="figure">Figure: Calendar entities</p> 
-  <p align="center"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>  
-
-<p>vCalendar supports ver1.0 (vcs) and 2.0 (ics). For more information about vCalendar, see <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">rfc2445</a>.</p>
-
-<p>The calendar service module works in a way similar to client-service architecture. In this architecture, the Tizen application is the client side and has to connect to service before using calendar service APIs. Use <span style="font-family: Courier New,Courier,monospace">calendar_connect()</span> and <span style="font-family: Courier New,Courier,monospace">calendar_disconnect()</span> for connecting and disconnecting.</p>
-<pre class="prettyprint">
-calendar_connect();
-
-// Jobs for records
-
-calendar_disconnect();
-</pre>
-
-<h2 id="book" name="book">Calendar Books</h2>
-
-<p>A calendar book is a placeholder for other records in the Calendar API. Every event and todo has to belong to a calendar book. There are 3 built-in calendar books, as shown in the following table.</p>
-
-<table> 
-   <caption>
-     Table: Calendar books
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Book</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_EVENT_CALENDAR_BOOK_ID</span></td> 
-     <td>Event book</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_TODO_CALENDAR_BOOK_ID</span></td> 
-     <td>Todo book</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</span></td> 
-     <td>Birthday book</td> 
-    </tr>  
-   </tbody> 
-  </table> 
-  
-The following code example sets a calendar book ID.
-<pre class="prettyprint">
-calendar_record_h event = NULL;
-
-calendar_record_create(_calendar_event._uri, &amp;event);
-
-// Set default calendar book id
-calendar_record_set_int(event, _calendar_event.calendar_id, DEFAULT_EVENT_CALENDAR_BOOK_ID);
-
-// Set other fields
-
-int event_id = 0;
-calendar_db_insert_record(event &amp;event_id);
-
-// Destroy
-calendar_record_destroy(event, true);
-</pre>
-
-       
-<p>To receive a list of existing calendar books, use the following code:</p>
-<pre class="prettyprint">calendar_list_h calendar_book_list = NULL;
-calendar_db_get_all_records(_calendar_calendar_book._uri, 0, 0, &amp;calendar_book_list);</pre>
-
-<p>In the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_all_records()</span> function, you need as parameters the URI of the view to get records from, the index from which results are received, the maximum number of results, and the record list.</p>
-
-<h2 id="change" name="change">Database Change Notifications</h2>
-
-<p>To detect the calendar database changes, register a callback with the <span style="font-family: Courier New,Courier,monospace">calendar_db_add_changed_cb()</span> function. To unregister the callback and ignore database changes, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_remove_changed_cb()</span> function.</p>
-<p>Clients wait calendar change notifications on the client side. If the calendar is changed by another module, the server publishes an inotify event. The Inotify module broadcasts to the subscribed modules, and an internal inotify handler is called at the client side. A user callback function is called with the user data.</p>
-<pre class="prettyprint">// Add callback function
-void __event_changed_ cb(const char *view_uri, void *user_data) {}
-// Add change notification callback
-calendar_db_add_changed_cb(_calendar_event._uri, __event_changed_cb, NULL);</pre>
-
-<h2 id="event" name="event">Events and Instances</h2>
-<p>An event record describes various properties, such as description, categories, and priority. It also contains information on when the event takes place. In a recurring event, there are more than one instance of the event. Each instance has its corresponding instance record.</p>
-<p>If an event is inserted with rrule (recurrence rule), alarm, and attendee, its data is saved to each database. Generated instances based on the rrule are also stored in the instance database.</p>
- 
-  <p class="figure">Figure: Views and databases</p> 
-  <p align="center"><img alt="Views and databases" src="../../images/calendar_db.png" /></p>  
-
-<p>The following table illustrates and example of a recurring event and its instances.</p>
-
-<table> 
-   <caption>
-     Table: Event and instance example 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Event</th> 
-     <th>Instances</th> 
-    </tr> 
-    <tr> 
-     <td>Recurrence rules:
-        <ul><li>Start date on 2012-10-09 (Tuesday)</li>
-        <li>Frequency set to WEEKLY</li>
-<li>Interval set to 1</li>
-<li>Count set to 3</li></ul></td> 
-     <td>2012-10-09 Tuesday
-<p>2012-10-16 Tuesday</p>
-<p>2012-10-22 Tuesday</p></td> 
-    </tr> 
-   </tbody> 
-  </table> 
-<p>The recurrence model in the Calendar API is compliant with the <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">iCalendar specification</a>. The following event properties have the same functionality as their corresponding values in iCalendar:</p>
-
-<table> 
-   <caption>
-     Table: Recurrence rules 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Recurrence rule property</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>freq</td> 
-     <td>Yearly, monthly, weekly, or daily</td> 
-    </tr> 
-     <tr> 
-     <td>count</td> 
-     <td>Until count. If the count is 3, 3 instances are generated.</td> 
-    </tr> 
-     <tr> 
-     <td>interval</td> 
-     <td>Interval is a positive integer representing how often the recurrence rule repeats</td> 
-    </tr> 
-     <tr> 
-     <td>byday</td> 
-     <td>MO, TU, WE, TH, FR, SA, or SU</td> 
-    </tr> 
-     <tr> 
-     <td>bymonthday</td> 
-     <td>Days of the month</td> 
-    </tr> 
-     <tr> 
-     <td>byyearday</td> 
-     <td>Days of the year</td> 
-    </tr> 
-     <tr> 
-     <td>byweekno</td> 
-     <td>Ordinals specifying weeks of the year</td> 
-    </tr> 
-     <tr> 
-     <td>bymonth</td> 
-     <td>Months of the year</td> 
-    </tr>
-     <tr> 
-     <td>bysetpos</td> 
-     <td>Values which correspond to the n<sup>th</sup> occurrence within the set of events</td> 
-    </tr>      
-     <tr> 
-     <td>wkst</td> 
-     <td>Day on which the workweek starts</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-
-<h3 name="exception_rule" id="exception_rule">Exceptions</h3>
-<p>If one of the instances of a recurring event is modified (such as its summary or date) or deleted, it is called an exception. For example, if 2<sup>nd</sup> instance date is modified from 16<sup>th</sup> to 17<sup>th</sup>, 17<sup>th</sup> is the exception.</p>
-
-
-<table> 
-   <caption>
-     Table: Exception example
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Event</th> 
-     <th>Instances</th>
-        <th>Exceptions</th>     
-    </tr> 
-    <tr> 
-     <td>Recurrence rules:
-        <ul><li>Start date on 2012-10-09 (Tuesday)</li>
-        <li>Frequency set to WEEKLY</li>
-<li>Interval set to 1</li>
-<li>Count set to 3</li></ul>
-</td>  
-     <td>2012-10-09 Tuesday
-<p>2012-10-16 Tuesday &gt; modified</p>
-<p>2012-10-22 Tuesday</p></td> 
-<td>2012-10-17 Tuesday</td>
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>To get the changes in an exception, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function. The instances and exceptions are deleted together when the original event is deleted.</p>
-
-<h2 id="filter2" name="filter2">Filters and Queries</h2>
-<p>Queries are used to retrieve data which satisfies a given criteria, like an integer property being greater than a given value, or a string property containing a given substring. The criteria are defined by creating filters and adding conditions to them, joining them with logical operators. Also, instead of a condition, another filter can be added to create more complex filters.</p>
-<p>When a filter is ready, it can be set as a property of a query. Other query properties allow configuring how the returned results are grouped and sorted.</p>
-<p>The operator precedence in filters is determined by the order in which the conditions and filters are added. The following table shows an example of how the operator precedence works.</p>
-
-<table> 
-   <caption>
-     Table: Filter conditions
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Condition</th> 
-     <th>Result</th> 
-    </tr> 
-    <tr> 
-     <td>Condition C1<br/>
-OR<br/>
-Condition C2<br/>
-AND<br/>
-Condition C3</td> 
-     <td>(C1 OR C2) AND C3</td> 
-    </tr> 
-     <tr> 
-     <td><strong>Filter F1</strong>:<br/>
- Condition C1<br/>
- OR<br/>
- Condition C2<br/>
- <br/>
-<strong>Filter F2</strong>:<br/>
- Condition C3<br/>
- OR<br/>
- Condition C4<br/>
-<br/>
-<strong>Filter F3</strong>:<br/>
- Condition C5<br/>
- AND<br/>
- F1<br/>
- AND<br/>
- F2</td> 
-     <td>(C5 AND F1) AND F2<br/>
-Meaning (C5 AND (C1 OR C2)) AND (C3 OR C4)</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>The following code creates a filter, accepting events with high priority or those that include the word &quot;meeting&quot; in their description.</p>
-<pre class="prettyprint">calendar_filter_h filter = NULL;
- 
-// Create a filter returning event type records
-calendar_filter_create(_calendar_event._uri, &amp;filter);
- 
-// Add a &#39;priority equals high&#39; condition
-calendar_filter_add_int(filter, _calendar_event.priority, CALENDAR_MATCH_EQUAL, CALENDAR_EVENT_PRIORITY_HIGH);
- 
-// Add OR operator
-calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_OR);
- 
-// Add a &#39;description contains &quot;meeting&quot;&#39; condition
-calendar_filter_add_str(filter, _calendar_event.description, CALENDAR_MATCH_CONTAINS, &quot;meeting&quot;);</pre>
-                
-<p>Insert the filter into the query and execute the query:</p>
-
-<pre class="prettyprint">calendar_query_h query = NULL;
-calendar_list_h list = NULL;
- 
-// Create a query returning event type records
-calendar_query_create(_calendar_event._uri, &amp;query);
- 
-// Add the filter
-calendar_query_set_filter(query, filter);
- 
-// Execute the query, results are returned in a list
-calendar_db_get_records_with_query(query, 0, 0, &amp;list);
- 
-calendar_filter_destroy(filter);
-calendar_query_destroy(query);
- 
-// Use the list
- 
-calendar_list_destroy(list, true);</pre>
-
-<h3 id="proj" name="proj">Projections</h3>
-<p>Projection is related to searching with filters and queries. A projection allows you to query the data for just those specific properties of a record that you actually need, at lower latency and cost than retrieving the entire set of properties.</p>
-
-<p>The following example code creates a filter that gets only the event ID, summary, and start time from those records whose summary has &quot;test&quot; (string filter). It creates a query, adds the filter to it, and receives the results in a list.</p>
-
-<pre class="prettyprint">calendar_query_h query = NULL;
-calendar_filter_h filter = NULL;
-
-// Set query with filter
-calendar_query_create(_calendar_event_calendar_book_attendee._uri, &amp;query);
-calendar_filter_create(_calendar_event_calendar_book_attendee._uri, &amp;filter);
-calendar_filter_add_str(filter, _calendar_event.summary, CALENDAR_MATCH_CONTAINS, &quot;test&quot;);
-calendar_query_set_filter(query, filter);
-
-// Set projection
-unsigned int projection[3];
-projection[0] = _calendar_event_calendar_book_attendee.event_id;
-projection[1] = _calendar_event_calendar_book_attendee.summary;
-projection[2] = _calendar_event_calendar_book_attendee.start_time;
-
-// Get list
-calendar_query_set_projection(query, projection, 3);
-calendar_db_get_records_with_query(query, 0, 0, &amp;list);
-
-// Destroy handle
-calendar_filter_destroy(filter);
-calendar_query_destroy(query);
-calendar_list_destroy(list, true);</pre>
-
-<h2 id="record2" name="record2">Records</h2>
-
-<p>An important concept in the Calendar Service APIs is a record. Although a record represents an actual record in the internal database, you can consider it as a structure describing a single (but complex) entity, like a calendar event or a time zone.</p>
-
-<p>A record has many properties, for example, a todo record has the todo description, priority, progress, creation time, last modified and completed time, and many others.</p>
-<p>A record can also contain an identifier field, which holds an ID of another record. Setting this field&#39;s value establishes a relation between the records, for example, a calendar event contains the ID of a calendar book to which it belongs.</p>
-
-<h3 id="uri" name="uri">URI</h3>
-<p>A record type is identified by a structure called the view. For example, the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view describes the properties of the calendar event record. Every view has a special field - <span style="font-family: Courier New,Courier,monospace">_uri</span> - that uniquely identifies the view. In many cases, you must provide the <span style="font-family: Courier New,Courier,monospace">_uri</span> value to indicate what type of record you want to create or operate on.</p>
-<pre class="prettyprint">// Create an event with _calendar_event view
-calendar_record_h record = NULL;
-calendar_record_create(_calendar_event._uri, &amp;record);
-</pre>
-
-<h3 id="handle" name="handle">Record Handle</h3>
-<p>To use a record, you must obtain its handle. You can use many methods to obtain the handle, for example, you can create a new record or refer to the child records of a record.</p>
-<pre class="prettyprint">// Create an event and get a handle
-calendar_record_h event = NULL;
-calendar_record_create(_calendar_event._uri, &amp;event);
-
-// Get the record handle with ID
-calendar_record_h event2 = NULL;
-calendar_db_get_record(_calendar_event._uri, event_id, &amp;event2);</pre>
-
-<h3 id="types" name="types">Basic Types</h3>
-<p>Records contain properties of basic types: <span style="font-family: Courier New,Courier,monospace">integer</span>, <span style="font-family: Courier New,Courier,monospace">lli</span> (long integer, long long int), <span style="font-family: Courier New,Courier,monospace">double</span>, <span style="font-family: Courier New,Courier,monospace">string</span>, <span style="font-family: Courier New,Courier,monospace">bool</span>, and <span style="font-family: Courier New,Courier,monospace">time</span>. The <span style="font-family: Courier New,Courier,monospace">time</span> type holds either a long long int, or 3 integers (year, month, day).</p> 
-
-<p>The following table lists the setter and getter functions for each type.</p>
-<table> 
-   <caption>
-     Table: Setter and getter functions 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Property</th> 
-     <th>Setter</th> 
-        <th>Getter</th>
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">integer</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_int</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_int</span></td>
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_lli</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_lli</span></td>
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">double</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_double</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_double</span></td>
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">string</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_str</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_str</span></td>
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">calendar_time_s</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_caltime</span></td>
-    </tr>      
-   </tbody> 
-  </table> 
-
-<h3 id="children" name="children">Children</h3> 
-<p>Certain type of records hold &quot;child list&quot; properties. If a record has a property of this type, it can be a parent of other records, called child records. For example, the attendee records can hold an event identifier in their <span style="font-family: Courier New,Courier,monospace">event_id</span> property. The event is the parent record of the child attendee records.</p>
-
-<p>The following code example creates an event and inserts it into the default event book.</p>
-
-<pre class="prettyprint">// Create an event
-calendar_record_h event = NULL;
-calendar_record_create(_calendar_event._uri, &amp;event);
- 
-// Set event summary
-calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);
- 
-// Put the event into the default calendar book for events
-calendar_record_set_int(event, _calendar_event.calendar_book_id, book_id);
- 
-// Insert calendar book into the database
-int event_id = 0;
-calendar_db_insert_record(event, &amp;event_id);
-
-// Destroy
-calendar_record_destroy(event, true);</pre>
-
-<h2 id="remind" name="remind">Reminders</h2>
-
-<p>When an alarm is triggered, the calendar service sends a notification to the package which is registered in the reminder database table by using the <span style="font-family: Courier New,Courier,monospace">calendar_reminder_add_receiver()</span> function.</p>
-
-<p>The following figure illustrates how the alarm process works.</p>
- 
-  <p class="figure">Figure: Alarm process</p> 
-  <p align="center"><img alt="Alarm process" src="../../images/calendar_alarm.png" /></p>
-
-<p>After you add a receiver, the registered alarm is triggered at the reserved time if you insert the alarm as a child to an event record:</p>
-<pre class="prettyprint">// Set alarm
-calendar_record_h alarm = NULL;
-calendar_record_create(_calendar_alarm._uri, &amp;alarm);
-calendar_record_set_int(alarm, _calendar_alarm.tick_unit, CALENDAR_ALARM_TIME_UNIT_SPECIFIC);
-calendar_record_set_lli(alarm, _calendar_alarm.time, (1404036000 - 60)); // Before 60 sec
-
-// Add alarm as child
-calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);</pre>
-
-
-
-
-<h2 id="time" name="time">Time Structure</h2>
-<p>The calendar time structure, <span style="font-family: Courier New,Courier,monospace">calendar_caltime_s</span>, is defined as follows:</p>
-<pre class="prettyprint">typedef struct
-{
-&nbsp;&nbsp;&nbsp;calendar_time_type_e type;
-&nbsp;&nbsp;&nbsp;union 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long int utime;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int year;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int month;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int mday;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} date;
-&nbsp;&nbsp;&nbsp;} time;
-} calendar_time_s;</pre>
-<p>Use this structure when setting the calendar time (<span style="font-family: Courier New,Courier,monospace">_CALENDAR_PROPERTY_CALTIME</span>) properties of the records.</p>
-<p>The time structure can hold 2 types of data: UTC time (long long int) and date, given as year, month, and day of the month (3 integers). These types are identified by the values of the <span style="font-family: Courier New,Courier,monospace">calendar_time_type_e</span> variable, and they determine the usage of the structure.</p>
-
-<table> 
-   <caption>
-     Table: Data types
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Identifier</th> 
-     <th>Type</th> 
-     <th>Name</th>
-     <th>Purpose</th>
-        </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span></td> 
-     <td>long long int</td> 
-        <td>utime</td> 
-        <td>UTC time, used to describe non-all-day events</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span></td> 
-     <td>struct</td> 
-        <td>date</td> 
-        <td>Date only (year, month, and day of the month), used to describe all day events.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h3 id="utc" name="utc">UTC Time Usage</h3>
-<p>Structures with UTC time are used for non-all-day events. In such cases, you must convert local time to UTC time. The local time zone identifier must be stored in the record, in the corresponding property.</p>
-<p>For example, when setting the start time of an event, the local time zone must be stored in the <span style="font-family: Courier New,Courier,monospace">start_tzid</span> property.</p>
-<p>When converting local time to UTC time, use the function illustrated in the following example. It converts the given date and time to the corresponding UTC time, considering the given time zone (first argument). The function uses the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a> API.</p>
-
-<pre class="prettyprint">#define ms2sec(ms) (long long int)(ms / 1000.0)
- 
-long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int min, int s)
-{
-&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;i18n_uchar utf16_timezone[64] = {0};
-&nbsp;&nbsp;&nbsp;i18n_ustring_copy_ua_n(utf16_timezone, tzid, sizeof(utf16_timezone)/sizeof(i18n_uchar));
-
-&nbsp;&nbsp;&nbsp;i18n_ucalendar_h ucal = NULL;
-&nbsp;&nbsp;&nbsp;char *loc_default = NULL;
-
-&nbsp;&nbsp;&nbsp;i18n_ulocale_get_default((const char **)&amp;loc_default);
-&nbsp;&nbsp;&nbsp;ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default, I18N_UCALENDAR_GREGORIAN, &amp;ucal);
-&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;i18n_ucalendar_create() is failed (%d)\n&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;i18n_ucalendar_set_date_time(ucal, y, mon - 1, d, h, min, s);
-
-&nbsp;&nbsp;&nbsp;i18n_udate date;
-&nbsp;&nbsp;&nbsp;ret = i18n_ucalendar_get_milliseconds(ucal, &amp;date);
-&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;i18n_ucalendar_create() is failed (%d)\n&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i18n_ucalendar_destroy(ucal);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;i18n_ucalendar_destroy(ucal);
-
-&nbsp;&nbsp;&nbsp;return ms2sec(date);
-}</pre>
-
-
-<pre class="prettyprint">// Fill calendar time structures (start and end time)
-calendar_time_s st = {0};
-calendar_time_s et = {0};
- 
-st.type = CALENDAR_TIME_UTIME;
-st.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 2012, 9, 15, 11, 0, 0);
- 
-et.type = CALENDAR_TIME_UTIME;
-et.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 2012, 9, 15, 12, 0, 0);
- 
-// Create an event record
- 
-// Set local time zone of start time
-calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);
- 
-// Set start time
-calendar_record_set_caltime(event, _calendar_event.start_time, st);
- 
-// Set local time zone of end time
-calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);
- 
-// Set end time
-calendar_record_set_caltime(event, _calendar_event.end_time, et);</pre>
-
-<h3 id="date" name="date">Date Usage</h3>
-<p>Another usage of the time structure is an all day event. In case of such events, the structure type field must be set to <span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span>. Only the date (no time) is stored. Such structures can be used to set the start and end time of an event.</p>
-<p>Both start and end time of the event must be set, and they do not have to be equal. If they are not, the event lasts more than 1 day. Note that in such cases there are no instances created, as this is still a non-recurring event.</p>
-
-<h2 id="view2" name="view2">Views and Properties</h2>
-
-<p>Generic access functions can be used (according to data-view declarations) to access calendar views. A data-view is almost the same as a database &quot;VIEW&quot;, which limits access and guarantees performance. A &quot;record&quot; represents a single row of the data-views.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal</span> and <span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday</span> views are not offered, but combinations with another views are provided.</p>
-
-<table> 
-   <caption>
-     Table: Calendar views 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Editable view</th> 
-     <th>Read-only view</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_event</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_todo</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_timezone</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_alarm</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_extended_property</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_todo_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book_attendee</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday_calendar_book</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book_extended</span><br/>
-<span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday_calendar_book_extended</span></td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>The <span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span> view is used when identifying record changes depending on the version. The other read-only views are a combination of editable views for UI convenience:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book_attendee</span></li></ul>
-
-<h3 id="property" name="property">Properties</h3>
-<p>The record types that have <span style="font-family: Courier New,Courier,monospace">*_id</span> as their property hold identifiers of other records. For example, the attendee and alarm views hold the ID of their corresponding events or todos in the <span style="font-family: Courier New,Courier,monospace">event_id</span> or <span style="font-family: Courier New,Courier,monospace">todo_id</span> property (as children of the corresponding event or todo records).</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">record</span> type properties are other records. For example, an event record has <span style="font-family: Courier New,Courier,monospace">attendee</span> and <span style="font-family: Courier New,Courier,monospace">alarm</span> properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> header file.</p>
- 
-  <p class="figure">Figure: Properties</p> 
-  <p align="center"><img alt="Properties" src="../../images/calendar_property.png" /></p>  
-
-<pre class="prettyprint">// Create an event with _calendar_event view
-calendar_record_h event = NULL;
-calendar_record_create(_calendar_event._uri, &amp;event);
- 
-// Set event summary to _calendar_event view
-calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);
-</pre>
-
-<h3 id="version" name="version">Version</h3>
-<p>The calendar service uses a version system in the following APIs:</p>
-<pre class="prettyprint">int calendar_db_get_current_version(int *calendar_db_version);
-int calendar_db_get_changes_by_version(..., int *current_calendar_db_version);
-int calendar_db_get_last_change_version(int *last_change_version);
-int calendar_db_get_changes_exception_by_version(..., int calendar_db_version, ...);</pre>
-
-<p>Whenever modifications are made in the database, the version number is increased. If sync applications, such as Google or Facebook, sync at version 13 and try to sync again every 1 minute, they want to get the changes from version 14 to the current version.</p>
-<p>To get the current version, the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_current_version()</span> function is used. The <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_by_version()</span> function retrieves the modified record list. The <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function is used to get <a href="#exception_rule">modified instances in a recurring event</a>.</p>
-
-<h2 id="vcal" name="vcal">vCalendar</h2>
-<p>Use vCalendar to exchange personal calendar and schedule information. In order to avoid confusion with this referenced work, this is to be known as the vCalendar specification. vCalendar ver2.0 is known as iCalendar. The following snippet shows an example of the vCalendar.</p>
-<pre class="prettyprint">
-BEGIN:VCALENDAR
-VERSION:2.0
-PRODID:-//hacksw/handcal//NONSGML v1.0//EN
-BEGIN:VEVENT
-DTSTART:19970714T170000Z
-DTEND:19970715T035959Z
-SUMMARY:Bastille Day Party
-END:VEVENT
-END:VCALENDAR
-</pre>
-
-<p>The calendar service provides APIs to compose a vCalendar stream. With the stream, it is possible to create files transmit data with JSON data.</p>
-<pre class="prettyprint">
-calendar_list_h list = NULL;
-// Create or get list to make vcalendar stream
-
-char *stream = NULL;
-calendar_vcalendar_make_from_records(list, &amp;stream);
-
-// Jobs for stream
-
-// Free
-free(stream);
-</pre>
-
-<p>vCalendar can be parsed with calendar service APIs as well.</p>
-<pre class="prettyprint">
-// Read stream from file
-
-calendar_list_h list = NULL;
-calendar_vcalendar_parse_to_calendar(stream, &amp;list);
-
-// Jobs for list
-calendar_list_destroy(list, true);
-</pre>
-  
-  <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+    <title>Calendar</title>\r
+</head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                               <li><a href="#book">Calendar Books</a></li>\r
+                               <li><a href="#change">Database Change Notifications</a></li>\r
+                               <li><a href="#event">Events and Instances</a></li>\r
+                               <li><a href="#filter2">Filters and Queries</a></li>\r
+                               <li><a href="#record2">Records</a></li> \r
+                               <li><a href="#remind">Reminders</a></li>\r
+                               <li><a href="#time">Time Structure</a></li>\r
+                               <li><a href="#view2">Views and Properties</a></li> \r
+                               <li><a href="#vcal">vCalendar</a></li>  \r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm">Calendar Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API for Mobile Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+\r
+  <h1>Calendar</h1>\r
+       \r
+<p>A calendar is a system of organizing days for social purposes. It is composed of <a href="#record2">records</a>, such as events and todos. The records consist of subrecords, such as alarms, attendees, or extensions. For example, if an event has a recurrence rule (meaning that it happens multiple times), separate instances are generated for each time the event occurs.</p>\r
+\r
+  <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+  <p class="figure">Figure: Calendar model</p> \r
+  <p align="center"><img alt="Calendar model" src="../../images/calendar_model.png" /></p>\r
+  \r
+  <p>The Calendar Service supports <a href="#vcal">vCalendars</a>.</p>\r
+\r
+<p>The main features of the Calendar API include:</p>\r
+       <ul>\r
+               <li><a href="#book">Calendar books</a>\r
+               <ul>\r
+                       <li>Determine where the events and todos belong.</li>\r
+                       <li>Create calendar books using the local device (with no account), service providers, such as Google or Yahoo (with an account), or applications, such as ChatON, Joyn, or Facebook.</li>\r
+                       <li>Search and organize events using <a href="#filter2">filters and queries</a>.</li>\r
+                       <li>Monitor <a href="#change">database changes</a>.</li>\r
+               </ul>\r
+               <p>Each account can have multiple calendar books. The calendar book name does not need to be unique on the device because it is handled with an ID. Since the local device address book has no account, its related account ID is zero.</p>\r
+               </li>\r
+               <li><a href="#event">Events and tasks</a>\r
+               <ul>\r
+                       <li>Set properties, such as summary, start time, and description.</li>\r
+                       <li>Set <a href="#remind">reminders</a>.</li>\r
+                       </ul>\r
+               </li>\r
+               <li><a href="#time">Time management</a>\r
+               <ul>\r
+                       <li>Define the calendar UTC time and date.</li>\r
+                       </ul>\r
+               </li>\r
+       </ul>\r
+\r
+<p>The following figure illustrates the different Calendar entities and their relationships.</p> \r
+\r
+  <p class="figure">Figure: Calendar entities</p> \r
+  <p align="center"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>  \r
+\r
+<p>vCalendar supports ver1.0 (vcs) and 2.0 (ics). For more information about vCalendar, see <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">rfc2445</a>.</p>\r
+\r
+<p>The calendar service module works in a way similar to client-service architecture. In this architecture, the Tizen application is the client side and has to connect to service before using calendar service APIs. Use <span style="font-family: Courier New,Courier,monospace">calendar_connect()</span> and <span style="font-family: Courier New,Courier,monospace">calendar_disconnect()</span> for connecting and disconnecting.</p>\r
+<pre class="prettyprint">\r
+calendar_connect();\r
+\r
+// Jobs for records\r
+\r
+calendar_disconnect();\r
+</pre>\r
+\r
+<h2 id="book" name="book">Calendar Books</h2>\r
+\r
+<p>A calendar book is a placeholder for other records in the Calendar API. Every event and todo has to belong to a calendar book. There are 3 built-in calendar books, as shown in the following table.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Calendar books\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Book</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_EVENT_CALENDAR_BOOK_ID</span></td> \r
+     <td>Event book</td> \r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_TODO_CALENDAR_BOOK_ID</span></td> \r
+     <td>Todo book</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</span></td> \r
+     <td>Birthday book</td> \r
+    </tr>  \r
+   </tbody> \r
+  </table> \r
+  \r
+The following code example sets a calendar book ID.\r
+<pre class="prettyprint">\r
+calendar_record_h event = NULL;\r
+\r
+calendar_record_create(_calendar_event._uri, &amp;event);\r
+\r
+// Set default calendar book id\r
+calendar_record_set_int(event, _calendar_event.calendar_id, DEFAULT_EVENT_CALENDAR_BOOK_ID);\r
+\r
+// Set other fields\r
+\r
+int event_id = 0;\r
+calendar_db_insert_record(event &amp;event_id);\r
+\r
+// Destroy\r
+calendar_record_destroy(event, true);\r
+</pre>\r
+\r
+       \r
+<p>To receive a list of existing calendar books, use the following code:</p>\r
+<pre class="prettyprint">calendar_list_h calendar_book_list = NULL;\r
+calendar_db_get_all_records(_calendar_calendar_book._uri, 0, 0, &amp;calendar_book_list);</pre>\r
+\r
+<p>In the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_all_records()</span> function, you need as parameters the URI of the view to get records from, the index from which results are received, the maximum number of results, and the record list.</p>\r
+\r
+<h2 id="change" name="change">Database Change Notifications</h2>\r
+\r
+<p>To detect the calendar database changes, register a callback with the <span style="font-family: Courier New,Courier,monospace">calendar_db_add_changed_cb()</span> function. To unregister the callback and ignore database changes, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_remove_changed_cb()</span> function.</p>\r
+<p>Clients wait calendar change notifications on the client side. If the calendar is changed by another module, the server publishes an inotify event. The Inotify module broadcasts to the subscribed modules, and an internal inotify handler is called at the client side. A user callback function is called with the user data.</p>\r
+<pre class="prettyprint">// Add callback function\r
+void __event_changed_ cb(const char *view_uri, void *user_data) {}\r
+// Add change notification callback\r
+calendar_db_add_changed_cb(_calendar_event._uri, __event_changed_cb, NULL);</pre>\r
+\r
+<h2 id="event" name="event">Events and Instances</h2>\r
+<p>An event record describes various properties, such as description, categories, and priority. It also contains information on when the event takes place. In a recurring event, there are more than one instance of the event. Each instance has its corresponding instance record.</p>\r
+<p>If an event is inserted with rrule (recurrence rule), alarm, and attendee, its data is saved to each database. Generated instances based on the rrule are also stored in the instance database.</p>\r
+ \r
+  <p class="figure">Figure: Views and databases</p> \r
+  <p align="center"><img alt="Views and databases" src="../../images/calendar_db.png" /></p>  \r
+\r
+<p>The following table illustrates and example of a recurring event and its instances.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Event and instance example \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Event</th> \r
+     <th>Instances</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Recurrence rules:\r
+        <ul><li>Start date on 2012-10-09 (Tuesday)</li>\r
+        <li>Frequency set to WEEKLY</li>\r
+<li>Interval set to 1</li>\r
+<li>Count set to 3</li></ul></td> \r
+     <td>2012-10-09 Tuesday\r
+<p>2012-10-16 Tuesday</p>\r
+<p>2012-10-22 Tuesday</p></td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+<p>The recurrence model in the Calendar API is compliant with the <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">iCalendar specification</a>. The following event properties have the same functionality as their corresponding values in iCalendar:</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Recurrence rules \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Recurrence rule property</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td>freq</td> \r
+     <td>Yearly, monthly, weekly, or daily</td> \r
+    </tr> \r
+     <tr> \r
+     <td>count</td> \r
+     <td>Until count. If the count is 3, 3 instances are generated.</td> \r
+    </tr> \r
+     <tr> \r
+     <td>interval</td> \r
+     <td>Interval is a positive integer representing how often the recurrence rule repeats</td> \r
+    </tr> \r
+     <tr> \r
+     <td>byday</td> \r
+     <td>MO, TU, WE, TH, FR, SA, or SU</td> \r
+    </tr> \r
+     <tr> \r
+     <td>bymonthday</td> \r
+     <td>Days of the month</td> \r
+    </tr> \r
+     <tr> \r
+     <td>byyearday</td> \r
+     <td>Days of the year</td> \r
+    </tr> \r
+     <tr> \r
+     <td>byweekno</td> \r
+     <td>Ordinals specifying weeks of the year</td> \r
+    </tr> \r
+     <tr> \r
+     <td>bymonth</td> \r
+     <td>Months of the year</td> \r
+    </tr>\r
+     <tr> \r
+     <td>bysetpos</td> \r
+     <td>Values which correspond to the n<sup>th</sup> occurrence within the set of events</td> \r
+    </tr>      \r
+     <tr> \r
+     <td>wkst</td> \r
+     <td>Day on which the workweek starts</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+\r
+<h3 name="exception_rule" id="exception_rule">Exceptions</h3>\r
+<p>If one of the instances of a recurring event is modified (such as its summary or date) or deleted, it is called an exception. For example, if 2<sup>nd</sup> instance date is modified from 16<sup>th</sup> to 17<sup>th</sup>, 17<sup>th</sup> is the exception.</p>\r
+\r
+\r
+<table> \r
+   <caption>\r
+     Table: Exception example\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Event</th> \r
+     <th>Instances</th>\r
+        <th>Exceptions</th>     \r
+    </tr> \r
+    <tr> \r
+     <td>Recurrence rules:\r
+        <ul><li>Start date on 2012-10-09 (Tuesday)</li>\r
+        <li>Frequency set to WEEKLY</li>\r
+<li>Interval set to 1</li>\r
+<li>Count set to 3</li></ul>\r
+</td>  \r
+     <td>2012-10-09 Tuesday\r
+<p>2012-10-16 Tuesday &gt; modified</p>\r
+<p>2012-10-22 Tuesday</p></td> \r
+<td>2012-10-17 Tuesday</td>\r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<p>To get the changes in an exception, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function. The instances and exceptions are deleted together when the original event is deleted.</p>\r
+\r
+<h2 id="filter2" name="filter2">Filters and Queries</h2>\r
+<p>Queries are used to retrieve data which satisfies a given criteria, like an integer property being greater than a given value, or a string property containing a given substring. The criteria are defined by creating filters and adding conditions to them, joining them with logical operators. Also, instead of a condition, another filter can be added to create more complex filters.</p>\r
+<p>When a filter is ready, it can be set as a property of a query. Other query properties allow configuring how the returned results are grouped and sorted.</p>\r
+<p>The operator precedence in filters is determined by the order in which the conditions and filters are added. The following table shows an example of how the operator precedence works.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Filter conditions\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Condition</th> \r
+     <th>Result</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Condition C1<br/>\r
+OR<br/>\r
+Condition C2<br/>\r
+AND<br/>\r
+Condition C3</td> \r
+     <td>(C1 OR C2) AND C3</td> \r
+    </tr> \r
+     <tr> \r
+     <td><strong>Filter F1</strong>:<br/>\r
+ Condition C1<br/>\r
+ OR<br/>\r
+ Condition C2<br/>\r
+ <br/>\r
+<strong>Filter F2</strong>:<br/>\r
+ Condition C3<br/>\r
+ OR<br/>\r
+ Condition C4<br/>\r
+<br/>\r
+<strong>Filter F3</strong>:<br/>\r
+ Condition C5<br/>\r
+ AND<br/>\r
+ F1<br/>\r
+ AND<br/>\r
+ F2</td> \r
+     <td>(C5 AND F1) AND F2<br/>\r
+Meaning (C5 AND (C1 OR C2)) AND (C3 OR C4)</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<p>The following code creates a filter, accepting events with high priority or those that include the word &quot;meeting&quot; in their description.</p>\r
+<pre class="prettyprint">calendar_filter_h filter = NULL;\r
+ \r
+// Create a filter returning event type records\r
+calendar_filter_create(_calendar_event._uri, &amp;filter);\r
+ \r
+// Add a &#39;priority equals high&#39; condition\r
+calendar_filter_add_int(filter, _calendar_event.priority, CALENDAR_MATCH_EQUAL, CALENDAR_EVENT_PRIORITY_HIGH);\r
+ \r
+// Add OR operator\r
+calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_OR);\r
+ \r
+// Add a &#39;description contains &quot;meeting&quot;&#39; condition\r
+calendar_filter_add_str(filter, _calendar_event.description, CALENDAR_MATCH_CONTAINS, &quot;meeting&quot;);</pre>\r
+                \r
+<p>Insert the filter into the query and execute the query:</p>\r
+\r
+<pre class="prettyprint">calendar_query_h query = NULL;\r
+calendar_list_h list = NULL;\r
+ \r
+// Create a query returning event type records\r
+calendar_query_create(_calendar_event._uri, &amp;query);\r
+ \r
+// Add the filter\r
+calendar_query_set_filter(query, filter);\r
+ \r
+// Execute the query, results are returned in a list\r
+calendar_db_get_records_with_query(query, 0, 0, &amp;list);\r
+ \r
+calendar_filter_destroy(filter);\r
+calendar_query_destroy(query);\r
+ \r
+// Use the list\r
+ \r
+calendar_list_destroy(list, true);</pre>\r
+\r
+<h3 id="proj" name="proj">Projections</h3>\r
+<p>Projection is related to searching with filters and queries. A projection allows you to query the data for just those specific properties of a record that you actually need, at lower latency and cost than retrieving the entire set of properties.</p>\r
+\r
+<p>The following example code creates a filter that gets only the event ID, summary, and start time from those records whose summary has &quot;test&quot; (string filter). It creates a query, adds the filter to it, and receives the results in a list.</p>\r
+\r
+<pre class="prettyprint">calendar_query_h query = NULL;\r
+calendar_filter_h filter = NULL;\r
+\r
+// Set query with filter\r
+calendar_query_create(_calendar_event_calendar_book_attendee._uri, &amp;query);\r
+calendar_filter_create(_calendar_event_calendar_book_attendee._uri, &amp;filter);\r
+calendar_filter_add_str(filter, _calendar_event.summary, CALENDAR_MATCH_CONTAINS, &quot;test&quot;);\r
+calendar_query_set_filter(query, filter);\r
+\r
+// Set projection\r
+unsigned int projection[3];\r
+projection[0] = _calendar_event_calendar_book_attendee.event_id;\r
+projection[1] = _calendar_event_calendar_book_attendee.summary;\r
+projection[2] = _calendar_event_calendar_book_attendee.start_time;\r
+\r
+// Get list\r
+calendar_query_set_projection(query, projection, 3);\r
+calendar_db_get_records_with_query(query, 0, 0, &amp;list);\r
+\r
+// Destroy handle\r
+calendar_filter_destroy(filter);\r
+calendar_query_destroy(query);\r
+calendar_list_destroy(list, true);</pre>\r
+\r
+<h2 id="record2" name="record2">Records</h2>\r
+\r
+<p>An important concept in the Calendar Service APIs is a record. Although a record represents an actual record in the internal database, you can consider it as a structure describing a single (but complex) entity, like a calendar event or a time zone.</p>\r
+\r
+<p>A record has many properties, for example, a todo record has the todo description, priority, progress, creation time, last modified and completed time, and many others.</p>\r
+<p>A record can also contain an identifier field, which holds an ID of another record. Setting this field&#39;s value establishes a relation between the records, for example, a calendar event contains the ID of a calendar book to which it belongs.</p>\r
+\r
+<h3 id="uri" name="uri">URI</h3>\r
+<p>A record type is identified by a structure called the view. For example, the <span style="font-family: Courier New,Courier,monospace">_calendar_event</span> view describes the properties of the calendar event record. Every view has a special field - <span style="font-family: Courier New,Courier,monospace">_uri</span> - that uniquely identifies the view. In many cases, you must provide the <span style="font-family: Courier New,Courier,monospace">_uri</span> value to indicate what type of record you want to create or operate on.</p>\r
+<pre class="prettyprint">// Create an event with _calendar_event view\r
+calendar_record_h record = NULL;\r
+calendar_record_create(_calendar_event._uri, &amp;record);\r
+</pre>\r
+\r
+<h3 id="handle" name="handle">Record Handle</h3>\r
+<p>To use a record, you must obtain its handle. You can use many methods to obtain the handle, for example, you can create a new record or refer to the child records of a record.</p>\r
+<pre class="prettyprint">// Create an event and get a handle\r
+calendar_record_h event = NULL;\r
+calendar_record_create(_calendar_event._uri, &amp;event);\r
+\r
+// Get the record handle with ID\r
+calendar_record_h event2 = NULL;\r
+calendar_db_get_record(_calendar_event._uri, event_id, &amp;event2);</pre>\r
+\r
+<h3 id="types" name="types">Basic Types</h3>\r
+<p>Records contain properties of basic types: <span style="font-family: Courier New,Courier,monospace">integer</span>, <span style="font-family: Courier New,Courier,monospace">lli</span> (long integer, long long int), <span style="font-family: Courier New,Courier,monospace">double</span>, <span style="font-family: Courier New,Courier,monospace">string</span>, <span style="font-family: Courier New,Courier,monospace">bool</span>, and <span style="font-family: Courier New,Courier,monospace">time</span>. The <span style="font-family: Courier New,Courier,monospace">time</span> type holds either a long long int, or 3 integers (year, month, day).</p> \r
+\r
+<p>The following table lists the setter and getter functions for each type.</p>\r
+<table> \r
+   <caption>\r
+     Table: Setter and getter functions \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Property</th> \r
+     <th>Setter</th> \r
+        <th>Getter</th>\r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">integer</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_int</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_int</span></td>\r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">long long integer</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_lli</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_lli</span></td>\r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">double</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_double</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_double</span></td>\r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">string</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_str</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_str</span></td>\r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_time_s</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime</span></td>\r
+        <td><span style="font-family: Courier New,Courier,monospace">calendar_record_get_caltime</span></td>\r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+\r
+<h3 id="children" name="children">Children</h3> \r
+<p>Certain type of records hold &quot;child list&quot; properties. If a record has a property of this type, it can be a parent of other records, called child records. For example, the attendee records can hold an event identifier in their <span style="font-family: Courier New,Courier,monospace">event_id</span> property. The event is the parent record of the child attendee records.</p>\r
+\r
+<p>The following code example creates an event and inserts it into the default event book.</p>\r
+\r
+<pre class="prettyprint">// Create an event\r
+calendar_record_h event = NULL;\r
+calendar_record_create(_calendar_event._uri, &amp;event);\r
+ \r
+// Set event summary\r
+calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);\r
+ \r
+// Put the event into the default calendar book for events\r
+calendar_record_set_int(event, _calendar_event.calendar_book_id, book_id);\r
+ \r
+// Insert calendar book into the database\r
+int event_id = 0;\r
+calendar_db_insert_record(event, &amp;event_id);\r
+\r
+// Destroy\r
+calendar_record_destroy(event, true);</pre>\r
+\r
+<h2 id="remind" name="remind">Reminders</h2>\r
+\r
+<p>When an alarm is triggered, the calendar service sends a notification to the package which is registered in the reminder database table by using the <span style="font-family: Courier New,Courier,monospace">calendar_reminder_add_receiver()</span> function.</p>\r
+\r
+<p>The following figure illustrates how the alarm process works.</p>\r
+ \r
+  <p class="figure">Figure: Alarm process</p> \r
+  <p align="center"><img alt="Alarm process" src="../../images/calendar_alarm.png" /></p>\r
+\r
+<p>After you add a receiver, the registered alarm is triggered at the reserved time if you insert the alarm as a child to an event record:</p>\r
+<pre class="prettyprint">// Set alarm\r
+calendar_record_h alarm = NULL;\r
+calendar_record_create(_calendar_alarm._uri, &amp;alarm);\r
+calendar_record_set_int(alarm, _calendar_alarm.tick_unit, CALENDAR_ALARM_TIME_UNIT_SPECIFIC);\r
+calendar_record_set_lli(alarm, _calendar_alarm.time, (1404036000 - 60)); // Before 60 sec\r
+\r
+// Add alarm as child\r
+calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);</pre>\r
+\r
+\r
+\r
+\r
+<h2 id="time" name="time">Time Structure</h2>\r
+<p>The calendar time structure, <span style="font-family: Courier New,Courier,monospace">calendar_caltime_s</span>, is defined as follows:</p>\r
+<pre class="prettyprint">typedef struct\r
+{\r
+&nbsp;&nbsp;&nbsp;calendar_time_type_e type;\r
+&nbsp;&nbsp;&nbsp;union \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long int utime;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int year;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int month;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int mday;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} date;\r
+&nbsp;&nbsp;&nbsp;} time;\r
+} calendar_time_s;</pre>\r
+<p>Use this structure when setting the calendar time (<span style="font-family: Courier New,Courier,monospace">_CALENDAR_PROPERTY_CALTIME</span>) properties of the records.</p>\r
+<p>The time structure can hold 2 types of data: UTC time (long long int) and date, given as year, month, and day of the month (3 integers). These types are identified by the values of the <span style="font-family: Courier New,Courier,monospace">calendar_time_type_e</span> variable, and they determine the usage of the structure.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Data types\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Identifier</th> \r
+     <th>Type</th> \r
+     <th>Name</th>\r
+     <th>Purpose</th>\r
+        </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span></td> \r
+     <td>long long int</td> \r
+        <td>utime</td> \r
+        <td>UTC time, used to describe non-all-day events</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span></td> \r
+     <td>struct</td> \r
+        <td>date</td> \r
+        <td>Date only (year, month, and day of the month), used to describe all day events.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<h3 id="utc" name="utc">UTC Time Usage</h3>\r
+<p>Structures with UTC time are used for non-all-day events. In such cases, you must convert local time to UTC time. The local time zone identifier must be stored in the record, in the corresponding property.</p>\r
+<p>For example, when setting the start time of an event, the local time zone must be stored in the <span style="font-family: Courier New,Courier,monospace">start_tzid</span> property.</p>\r
+<p>When converting local time to UTC time, use the function illustrated in the following example. It converts the given date and time to the corresponding UTC time, considering the given time zone (first argument). The function uses the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a> API.</p>\r
+\r
+<pre class="prettyprint">#define ms2sec(ms) (long long int)(ms / 1000.0)\r
+ \r
+long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int min, int s)\r
+{\r
+&nbsp;&nbsp;&nbsp;int ret = 0;\r
+&nbsp;&nbsp;&nbsp;i18n_uchar utf16_timezone[64] = {0};\r
+&nbsp;&nbsp;&nbsp;i18n_ustring_copy_ua_n(utf16_timezone, tzid, sizeof(utf16_timezone)/sizeof(i18n_uchar));\r
+\r
+&nbsp;&nbsp;&nbsp;i18n_ucalendar_h ucal = NULL;\r
+&nbsp;&nbsp;&nbsp;char *loc_default = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;i18n_ulocale_get_default((const char **)&amp;loc_default);\r
+&nbsp;&nbsp;&nbsp;ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default, I18N_UCALENDAR_GREGORIAN, &amp;ucal);\r
+&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;i18n_ucalendar_create() is failed (%d)\n&quot;, ret);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;i18n_ucalendar_set_date_time(ucal, y, mon - 1, d, h, min, s);\r
+\r
+&nbsp;&nbsp;&nbsp;i18n_udate date;\r
+&nbsp;&nbsp;&nbsp;ret = i18n_ucalendar_get_milliseconds(ucal, &amp;date);\r
+&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;i18n_ucalendar_create() is failed (%d)\n&quot;, ret);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i18n_ucalendar_destroy(ucal);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;i18n_ucalendar_destroy(ucal);\r
+\r
+&nbsp;&nbsp;&nbsp;return ms2sec(date);\r
+}</pre>\r
+\r
+\r
+<pre class="prettyprint">// Fill calendar time structures (start and end time)\r
+calendar_time_s st = {0};\r
+calendar_time_s et = {0};\r
+ \r
+st.type = CALENDAR_TIME_UTIME;\r
+st.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 2012, 9, 15, 11, 0, 0);\r
+ \r
+et.type = CALENDAR_TIME_UTIME;\r
+et.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 2012, 9, 15, 12, 0, 0);\r
+ \r
+// Create an event record\r
+ \r
+// Set local time zone of start time\r
+calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);\r
+ \r
+// Set start time\r
+calendar_record_set_caltime(event, _calendar_event.start_time, st);\r
+ \r
+// Set local time zone of end time\r
+calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);\r
+ \r
+// Set end time\r
+calendar_record_set_caltime(event, _calendar_event.end_time, et);</pre>\r
+\r
+<h3 id="date" name="date">Date Usage</h3>\r
+<p>Another usage of the time structure is an all day event. In case of such events, the structure type field must be set to <span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span>. Only the date (no time) is stored. Such structures can be used to set the start and end time of an event.</p>\r
+<p>Both start and end time of the event must be set, and they do not have to be equal. If they are not, the event lasts more than 1 day. Note that in such cases there are no instances created, as this is still a non-recurring event.</p>\r
+\r
+<h2 id="view2" name="view2">Views and Properties</h2>\r
+\r
+<p>Generic access functions can be used (according to data-view declarations) to access calendar views. A data-view is almost the same as a database &quot;VIEW&quot;, which limits access and guarantees performance. A &quot;record&quot; represents a single row of the data-views.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal</span> and <span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday</span> views are not offered, but combinations with another views are provided.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Calendar views \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Editable view</th> \r
+     <th>Read-only view</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">_calendar_book</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_event</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_todo</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_timezone</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_alarm</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_extended_property</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_todo_calendar_book</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book_attendee</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday_calendar_book</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book_extended</span><br/>\r
+<span style="font-family: Courier New,Courier,monospace">_calendar_instance_allday_calendar_book_extended</span></td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">_calendar_updated_info</span> view is used when identifying record changes depending on the version. The other read-only views are a combination of editable views for UI convenience:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_instance_normal_calendar_book</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">_calendar_event</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_book</span> + <span style="font-family: Courier New,Courier,monospace">_calendar_attendee</span> = <span style="font-family: Courier New,Courier,monospace">_calendar_event_calendar_book_attendee</span></li></ul>\r
+\r
+<h3 id="property" name="property">Properties</h3>\r
+<p>The record types that have <span style="font-family: Courier New,Courier,monospace">*_id</span> as their property hold identifiers of other records. For example, the attendee and alarm views hold the ID of their corresponding events or todos in the <span style="font-family: Courier New,Courier,monospace">event_id</span> or <span style="font-family: Courier New,Courier,monospace">todo_id</span> property (as children of the corresponding event or todo records).</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">record</span> type properties are other records. For example, an event record has <span style="font-family: Courier New,Courier,monospace">attendee</span> and <span style="font-family: Courier New,Courier,monospace">alarm</span> properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> header file.</p>\r
+ \r
+  <p class="figure">Figure: Properties</p> \r
+  <p align="center"><img alt="Properties" src="../../images/calendar_property.png" /></p>  \r
+\r
+<pre class="prettyprint">// Create an event with _calendar_event view\r
+calendar_record_h event = NULL;\r
+calendar_record_create(_calendar_event._uri, &amp;event);\r
+ \r
+// Set event summary to _calendar_event view\r
+calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);\r
+</pre>\r
+\r
+<h3 id="version" name="version">Version</h3>\r
+<p>The calendar service uses a version system in the following APIs:</p>\r
+<pre class="prettyprint">int calendar_db_get_current_version(int *calendar_db_version);\r
+int calendar_db_get_changes_by_version(..., int *current_calendar_db_version);\r
+int calendar_db_get_last_change_version(int *last_change_version);\r
+int calendar_db_get_changes_exception_by_version(..., int calendar_db_version, ...);</pre>\r
+\r
+<p>Whenever modifications are made in the database, the version number is increased. If sync applications, such as Google or Facebook, sync at version 13 and try to sync again every 1 minute, they want to get the changes from version 14 to the current version.</p>\r
+<p>To get the current version, the <span style="font-family: Courier New,Courier,monospace">calendar_db_get_current_version()</span> function is used. The <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_by_version()</span> function retrieves the modified record list. The <span style="font-family: Courier New,Courier,monospace">calendar_db_get_changes_exception_by_version()</span> function is used to get <a href="#exception_rule">modified instances in a recurring event</a>.</p>\r
+\r
+<h2 id="vcal" name="vcal">vCalendar</h2>\r
+<p>Use vCalendar to exchange personal calendar and schedule information. In order to avoid confusion with this referenced work, this is to be known as the vCalendar specification. vCalendar ver2.0 is known as iCalendar. The following snippet shows an example of the vCalendar.</p>\r
+<pre class="prettyprint">\r
+BEGIN:VCALENDAR\r
+VERSION:2.0\r
+PRODID:-//hacksw/handcal//NONSGML v1.0//EN\r
+BEGIN:VEVENT\r
+DTSTART:19970714T170000Z\r
+DTEND:19970715T035959Z\r
+SUMMARY:Bastille Day Party\r
+END:VEVENT\r
+END:VCALENDAR\r
+</pre>\r
+\r
+<p>The calendar service provides APIs to compose a vCalendar stream. With the stream, it is possible to create files transmit data with JSON data.</p>\r
+<pre class="prettyprint">\r
+calendar_list_h list = NULL;\r
+// Create or get list to make vcalendar stream\r
+\r
+char *stream = NULL;\r
+calendar_vcalendar_make_from_records(list, &amp;stream);\r
+\r
+// Jobs for stream\r
+\r
+// Free\r
+free(stream);\r
+</pre>\r
+\r
+<p>vCalendar can be parsed with calendar service APIs as well.</p>\r
+<pre class="prettyprint">\r
+// Read stream from file\r
+\r
+calendar_list_h list = NULL;\r
+calendar_vcalendar_parse_to_calendar(stream, &amp;list);\r
+\r
+// Jobs for list\r
+calendar_list_destroy(list, true);\r
+</pre>\r
+  \r
+  <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/social/service_adaptor_n.htm b/org.tizen.guides/html/native/social/service_adaptor_n.htm
index 1968cf9..7f2236f 100644 (file)
--- a/org.tizen.guides/html/native/social/service_adaptor_n.htm
+++ b/org.tizen.guides/html/native/social/service_adaptor_n.htm
@@ -38,17 +38,17 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Service Adaptor</h1>
 
-<p>You can manage adaptors, which function as agents between the Service Adaptor Client and the related plugins, to take advantage of various services. For example, the Auth and Storage adaptors allow you to access the Auth and Service Plugins to use services, such as Amazon, Box, Dropbox, Gogledrive, Onedrive, and Sugarsync.</p>
+<p>You can manage adaptors, which function as agents between the Service Adaptor Client and the related plugins, to take advantage of various services. For example, the Auth and Storage adaptors allow you to access the Auth and Service Plugins to use services, such as Amazon, Box, Dropbox, Googledrive, Onedrive, and Sugarsync.</p>
 
 <p class="figure">Figure: Service adaptor structure</p>
 <p style="text-align:center;"><img alt="Service adaptor structure" src="../../images/service_adaptor_structure.png"/></p>
 
 <p>The main feature of the Service Adaptor API is to connect adaptors to and disconnect them from the Service Adaptor Client though D-Bus. The Service adaptor uses 2 path types:</p>
     <ul>
-        <li><b>Logical path</b>
+        <li><strong>Logical path</strong>
 <p>The path of the root file system. It starts from the root path (&quot;/&quot;), and you can use the path like in Linux (for example, &quot;/folder1/image1.jpg&quot;).</p>
         </li>
-        <li><b>Physical path</b>
+        <li><strong>Physical path</strong>
 <p>A specific URI used for the cloud server. Some clouds use a logical path, but others use a specific key or URL (for example, &quot;/&quot; is &quot;ZmNhMWY2MTZlY2M1NDg4OGJmZDY4O&quot; and &quot;/folder1&quot; is &quot;2JI32UNJDWQEQWQWEADSSAD&quot;).</p>
         </li>
     </ul>
@@ -81,9 +81,9 @@
         <li>Reset contact information in the Contact server and upload native contact information of the device to the server.</li>
         <li>Synchronize native contact information of the device with the Contact server according to the <span style="font-family: Courier New,Courier,monospace">[type]</span> field of each contact.</li>
         <li>Get contact profiles and service registration information.</li>
-        <li>Set and update device profile in the server.</li>
+        <li>Set and update the device profile in the server.</li>
         <li>Upload and delete profile image meta in the File server and set the my profile image to the Profile server.</li>
-        <li>Set and get my profile privacy level</li>
+        <li>Set and get the my profile privacy level</li>
         <li>Set my presence ON/OFF information to the Presence server.</li>
     </ul>
 </li>
@@ -125,7 +125,8 @@
 
 <p>The following example starts all installed Auth and Storage plugins appending each <span style="font-family: Courier New,Courier,monospace">plugin_uri</span> to the <span style="font-family: Courier New,Courier,monospace">list</span> object:</p>
 <pre class="prettyprint">
-bool _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data);
+bool 
+_plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data);
 
 service_adaptor_h service_adaptor = NULL;
 ret = service_adaptor_create(&amp;service_adaptor);
@@ -133,7 +134,8 @@ ret = service_adaptor_create(&amp;service_adaptor);
 Evas_Object *list;
 ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb, (void *)list);
 
-bool _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
+bool 
+_plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *list = (Evas_Object *)user_data;
 
diff --git a/org.tizen.guides/html/native/social/social_guide_n.htm b/org.tizen.guides/html/native/social/social_guide_n.htm
index df58d54..569140d 100644 (file)
--- a/org.tizen.guides/html/native/social/social_guide_n.htm
+++ b/org.tizen.guides/html/native/social/social_guide_n.htm
@@ -39,10 +39,10 @@
   <p>The main social features are:</p>
   <ul>
        <li><a href="service_adaptor_n.htm">Service Adaptor</a> 
-       <p>Allows you to manage adaptors between the Service Adaptor Client and related plugins.</p></li>       
+       <p>Allows you to work with cloud storages and services by managing authentication, contact information and file transfers to and from the cloud.</p></li>       
   </ul>
   
- <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p> 
+ <p>The following guides apply in <strong>mobile applications only</strong>:</p> 
   
   <ul>
    <li><a href="account_manager_n.htm">Account Manager</a> 
diff --git a/org.tizen.guides/html/native/system/device_n.htm b/org.tizen.guides/html/native/system/device_n.htm
index 15beed2..56080fd 100644 (file)
--- a/org.tizen.guides/html/native/system/device_n.htm
+++ b/org.tizen.guides/html/native/system/device_n.htm
@@ -1,71 +1,71 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Device</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/system/device_tutorial_n.htm">Device Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Device</h1>
-
-   <p>Device features provide functions to control attached devices. The following functionalities are supported:</p>
-   <ul><li>Battery
-   <p>Get the current percentage, the charging state, and the current level state using the Battery API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">wearable</a> applications).</p></li>
-   <li>Display
-   <p>Get the number of displays, the maximum brightness of the display, the current brightness, and the display state. You can also change the current brightness and the display state using the Display API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">wearable</a> applications).</p></li>
-   <li>Haptic
-   <p>Get the number of haptic devices. You can also open or close the haptic handle, and request the vibration effects to play or stop using the Haptic API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">wearable</a> applications).</p></li>
-   <li>LED
-   <p>Get the maximum and current brightness of the camera flash LED. You can also change the current brightness of the camera flash LED, and request the service LED to play or stop effects using the Led API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">wearable</a> applications).</p></li>
-   <li>Power
-   <p>Request the power state to be locked or unlocked, and change the power state using the Power API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">wearable</a> applications).</p></li></ul>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Device</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/device_tutorial_n.htm">Device Tutorial</a></li> \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Device</h1>\r
+\r
+   <p>Device features provide functions to control attached devices. The following functionalities are supported:</p>\r
+   <ul><li>Battery\r
+   <p>Get the current percentage, the charging state, and the current level state using the Battery API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">wearable</a> applications).</p></li>\r
+   <li>Display\r
+   <p>Get the number of displays, the maximum brightness of the display, the current brightness, and the display state. You can also change the current brightness and the display state using the Display API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">wearable</a> applications).</p></li>\r
+   <li>Haptic\r
+   <p>Get the number of haptic devices. You can also open or close the haptic handle, and request the vibration effects to play or stop using the Haptic API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">wearable</a> applications).</p></li>\r
+   <li>LED\r
+   <p>Get the maximum and current brightness of the camera flash LED. You can also change the current brightness of the camera flash LED, and request the service LED to play or stop effects using the Led API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">wearable</a> applications).</p></li>\r
+   <li>Power\r
+   <p>Request the power state to be locked or unlocked, and change the power state using the Power API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">wearable</a> applications).</p></li></ul>\r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/dlog_n.htm b/org.tizen.guides/html/native/system/dlog_n.htm
index 7f9cff9..32a3b33 100644 (file)
--- a/org.tizen.guides/html/native/system/dlog_n.htm
+++ b/org.tizen.guides/html/native/system/dlog_n.htm
@@ -1,323 +1,323 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>dlog</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-                               <li><a href="#priority">Priority</a></li>
-                               <li><a href="#tag">Tag</a></li>
-                               <li><a href="#error">Error Type</a></li>
-                               <li><a href="#handling">Error Handling with dlog</a></li>
-                               <li><a href="#dlogutil">dlogutil</a></li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm">dlog Tutorial</a></li>     
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>dlog</h1>
-
-<p>The dlog logging service consists of the dlogutil dlog library, and it supports sending log messages to a circular log device. The log device is a circular buffer used to collect log messages from various applications and the system.</p>
-
-<p class="figure">Figure: Architecture</p>
-
-<p align="center"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p> 
-
-<p>The dlog service sends a log message to the circular buffer with APIs, including <strong>Priority</strong> and <strong>Tag</strong> information. With this information, it is easy to filter and check the messages with dlogutil.</p>
-
-<p>Before using dlog, you should know which priorities and tags to use and where to write (format, buffer).</p>
-
-<h2 id="priority" name="priority">Priority</h2>
-
-
-<p>The priority level indicates the urgency of the log message.</p>
-
-<table> 
-   <caption>
-     Table: Priority levels 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Priority</th> 
-     <th>Description</th>       
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DLOG_DEBUG</span></td> 
-     <td>Log message which the developer wants to check</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DLOG_INFO</span></td> 
-     <td>Normal operational message</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DLOG_WARN</span></td> 
-     <td>Not an error, but a warning that an error will occur if action is not taken   
-       </td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR</span></td> 
-     <td>An error</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>For each log level (info, debug, and error), there is a separate macro:</p>
-
-<ul>
-  <li>Info
-    <p> Use dlog_print(or dlog_vprint) function with DLOG_INFO priority when you need info messages to be displayed with a specified tag.</p>
-    <pre class="prettyprint">
-// Print the &quot;Initialization successful.&quot; info message with the tag to the console
-dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;Initialization successful.&quot;);</pre></li>
-  <li>Debug
-    <p> Use dlog_print(or dlog_vprint) function with DLOG_DEBUG priority when you need debug messages to be displayed with a specified tag.</p>
-    <pre class="prettyprint">
-// Print the debug message &quot;string: Test&quot; to the console
-dlog_print(DLOG_DEBUG, &quot;MyTag&quot;, &quot;string:&quot;,&quot;%s&quot;, &quot;Test&quot;);
-</pre></li>
-  <li>Error
-    <p> Use dlog_print(or dlog_vprint) function with DLOG_ERROR priority when you need error messages to be displayed with a specified tag.</p>
-    <pre class="prettyprint">
-if (something_wrong)
-{
-&nbsp;&nbsp;&nbsp;// Print the error message with the tag to the console
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, &quot;MyTag&quot;, &quot;An unexpected error occurred&quot;);     
-}
-</pre></li>
-  <li>Warning
-    <p> Use dlog_print(or dlog_vprint) function with DLOG_WARN priority when you need warning messages to be displayed with a specified tag.</p>
-    <pre class="prettyprint">
-// Print the warning message with the tag to the console
-dlog_print(DLOG_WARN, &quot;MyTag&quot;, &quot;warning!&quot;);     
-</pre></li>
-</ul>
-
-<p>Log macros belong to Info, Debug, Error, and Warn log levels. To filter logs based on their levels, select the applicable log type in the Log view. You can also search logs by keywords, such as Pid, Tid, Tag, and Message. The following figure shows the output of a log macro.</p>
-<p class="figure">Figure: Log macro output</p>
-<p align="center"><img width="70%" alt="Figure: Log macro output"  src="../../images/debugging.png"/></p>
-
-<h2 id="tag" name="tag">Tag</h2>
-<p>A tag is used to identify the source of the log message.</p>
-
-<p>There are no naming limitations, but do not forget that the tag is an identification of a module.</p>
-
-<p>Each tag must be unique.</p>
-
-
-<h2 id="error" name="error">Error Type</h2>
-<table> 
-   <caption>
-     Table: dlog error types 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Numerator</th> 
-     <th>Description</th>       
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_NONE</span></td> 
-     <td>Successful</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_INVALID_PARAMETER</span></td> 
-     <td>Invalid parameter</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_NOT_PERMITTED</span></td> 
-     <td>Operation not permitted</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-
-
-<p>To send a log message:</p>
-
-<pre class="prettyprint">
-#include &lt;dlog.h&gt;
-int main(void)
-{
-&nbsp;&nbsp;&nbsp;int integer = 21;
-&nbsp;&nbsp;&nbsp;char string[] = &quot;test dlog&quot;;
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;USR_TAG&quot;, &quot;test dlog&quot;);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;USR_TAG&quot;, &quot;%s, %d&quot;, string, integer);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}</pre>
-
-<pre class="prettyprint">
-#include &lt;dlog.h&gt;
-void my_debug_print(char *format, ...)
-{
-&nbsp;&nbsp;&nbsp;va_list ap;
-&nbsp;&nbsp;&nbsp;va_start(ap, format);
-&nbsp;&nbsp;&nbsp;dlog_vprint(DLOG_INFO, &quot;USR_TAG&quot;, format, ap);
-&nbsp;&nbsp;&nbsp;va_end(ap);
-}
-
-int main(void)
-{
-&nbsp;&nbsp;&nbsp;my_debug_print(&quot;%s&quot;, &quot;test dlog&quot;);
-&nbsp;&nbsp;&nbsp;my_debug_print(&quot;%s, %d&quot;, &quot;test dlog&quot;, 21);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-  <h2 id="handling" name="handling">Error Handling with dlog</h2>
-<p> Typical error handling example is as follows:</p>
-<pre class="prettyprint">
-location_manager_h location_handle;
-int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);
-if (result != LOCATIONS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;Creation of the location manager failed.&quot;);
-
-&nbsp;&nbsp;&nbsp;return false;
-}
-</pre>
-
-<p>While working with the SDK this information is available in the Log tab. While working with the target device, one can also use dlogutil utility.</p>
-
-<h2 id="dlogutil" name="dlogutil">dlogutil</h2>
-<p>You can collect and print out logs with logutil. Logutil supports filtering, and managing the log device.</p>
-
-<h3 id="commands" name="commands">Using Logutil Commands</h3>
-<p>You can use a logutil command to view and follow the content of the log buffers. The general usage is:</p>
-
-<pre class="prettyprint">
-dlogutil [&lt;option&gt;] ... [&lt;filter-spec&gt;] ...
-</pre>
-
-<h3 id="filter_output" name="filter_output">Filtering Log Output</h3>
-<p>Every log message has a tag and a priority associated with it.</p>
-
-<p>The filter expression follows the <span style="font-family: Courier New,Courier,monospace">tag:priority</span> format, where the tag indicates the tag of interest and the priority indicates the minimum level of priority to report for that tag. You can add any number of <span style="font-family: Courier New,Courier,monospace">tag:priority</span> specifications in a single filter expression.</p>
-
-<p>The tag of a log message is a short name indicating the system component from which the message originates.</p>
-<p>The priority is one of the following character values, ordered from the lowest to the highest priority:</p>
-<ul><li>D - debug</li>
-<li>I - info</li>
-<li>W - warning</li>
-<li>E - Error</li></ul>
-
-<p>For example, if you want to see all log messages with the MyApp tag that are above the debug priority:</p>
-
-<pre class="prettyprint"># dlogutil MyApp:D</pre>
-
-<p>If you want to see all log messages above the info priority:</p>
-
-<pre class="prettyprint"># dlogutil *:I</pre>
-
-<h3 id="control_output" name="control_output">Controlling Log Output Format</h3>
-<p>The log messages contain a number of metadata fields in addition to tag and priority. You can modify the output format for messages so that they display a specific metadata field. To do so, use the <span style="font-family: Courier New,Courier,monospace">-v</span> option when starting dlogutil and specify one of the supported output formats:</p>
-
-<ul>
-       <li>brief: Displays the priority/tag and PID of the originating process (the default format)</li>
-       <li>process: Displays the PID only</li> 
-       <li>tag: Displays the priority/tag only</li>
-       <li>thread: Displays the process:thread and priority/tag only</li> 
-       <li>raw: Displays the raw log message, with no other metadata fields</li> 
-       <li>time: Displays the date, invocation time, priority/tag, and PID of the originating process</li> 
-       <li>long: Displays all metadata fields and separates messages with blank lines</li>
-</ul>
-
-<pre class="prettyprint"># dlogutil [-v &lt;format&gt;]</pre>
-
-<h3 id="list_output" name="list_output">List of Logutil Command Options</h3>
-<table> 
-   <caption>
-     Table: Logutil command options 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Option</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-b &lt;buffer&gt;</span></td> 
-     <td>Alternates the log buffer. The main buffer is used by the default buffer.</td> 
-    </tr> 
-     <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-c</span></td> 
-     <td>Clears the entire log and exits</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-d</span></td> 
-     <td>Dumps the log and exits</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-f &lt;filename&gt;</span></td> 
-     <td>Writes the log to &lt;filename&gt;. The default filename is stdout.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-g</span></td> 
-     <td>Prints the size of the specified log buffer and exits</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-n &lt;count&gt;</span></td> 
-     <td>Sets the maximum number of rotated logs to &lt;count&gt;. The default value is 4. Requires the <span style="font-family: Courier New,Courier,monospace">-r</span> option.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-r &lt;Kbytes&gt;</span></td> 
-     <td>Rotates the log file every &lt;Kbytes&gt; of output. The default value is 16. Requires the <span style="font-family: Courier New,Courier,monospace">-f</span> option.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-s</span></td> 
-     <td>Sets the default filter spec to silent</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">-v &lt;format&gt;</span></td> 
-     <td>Sets the output format for log messages. The default format is brief.</td> 
-    </tr>      
-   </tbody> 
-  </table>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>dlog</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                               <li><a href="#priority">Priority</a></li>\r
+                               <li><a href="#tag">Tag</a></li>\r
+                               <li><a href="#error">Error Type</a></li>\r
+                               <li><a href="#handling">Error Handling with dlog</a></li>\r
+                               <li><a href="#dlogutil">dlogutil</a></li>\r
+        </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm">dlog Tutorial</a></li>     \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>dlog</h1>\r
+\r
+<p>The dlog logging service consists of the dlogutil dlog library, and it supports sending log messages to a circular log device. The log device is a circular buffer used to collect log messages from various applications and the system.</p>\r
+\r
+<p class="figure">Figure: Architecture</p>\r
+\r
+<p align="center"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p> \r
+\r
+<p>The dlog service sends a log message to the circular buffer with APIs, including <strong>Priority</strong> and <strong>Tag</strong> information. With this information, it is easy to filter and check the messages with dlogutil.</p>\r
+\r
+<p>Before using dlog, you should know which priorities and tags to use and where to write (format, buffer).</p>\r
+\r
+<h2 id="priority" name="priority">Priority</h2>\r
+\r
+\r
+<p>The priority level indicates the urgency of the log message.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Priority levels \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Priority</th> \r
+     <th>Description</th>       \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_DEBUG</span></td> \r
+     <td>Log message which the developer wants to check</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_INFO</span></td> \r
+     <td>Normal operational message</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_WARN</span></td> \r
+     <td>Not an error, but a warning that an error will occur if action is not taken   \r
+       </td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR</span></td> \r
+     <td>An error</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<p>For each log level (info, debug, and error), there is a separate macro:</p>\r
+\r
+<ul>\r
+  <li>Info\r
+    <p> Use dlog_print(or dlog_vprint) function with DLOG_INFO priority when you need info messages to be displayed with a specified tag.</p>\r
+    <pre class="prettyprint">\r
+// Print the &quot;Initialization successful.&quot; info message with the tag to the console\r
+dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;Initialization successful.&quot;);</pre></li>\r
+  <li>Debug\r
+    <p> Use dlog_print(or dlog_vprint) function with DLOG_DEBUG priority when you need debug messages to be displayed with a specified tag.</p>\r
+    <pre class="prettyprint">\r
+// Print the debug message &quot;string: Test&quot; to the console\r
+dlog_print(DLOG_DEBUG, &quot;MyTag&quot;, &quot;string:&quot;,&quot;%s&quot;, &quot;Test&quot;);\r
+</pre></li>\r
+  <li>Error\r
+    <p> Use dlog_print(or dlog_vprint) function with DLOG_ERROR priority when you need error messages to be displayed with a specified tag.</p>\r
+    <pre class="prettyprint">\r
+if (something_wrong)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Print the error message with the tag to the console\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, &quot;MyTag&quot;, &quot;An unexpected error occurred&quot;);     \r
+}\r
+</pre></li>\r
+  <li>Warning\r
+    <p> Use dlog_print(or dlog_vprint) function with DLOG_WARN priority when you need warning messages to be displayed with a specified tag.</p>\r
+    <pre class="prettyprint">\r
+// Print the warning message with the tag to the console\r
+dlog_print(DLOG_WARN, &quot;MyTag&quot;, &quot;warning!&quot;);     \r
+</pre></li>\r
+</ul>\r
+\r
+<p>Log macros belong to Info, Debug, Error, and Warn log levels. To filter logs based on their levels, select the applicable log type in the Log view. You can also search logs by keywords, such as Pid, Tid, Tag, and Message. The following figure shows the output of a log macro.</p>\r
+<p class="figure">Figure: Log macro output</p>\r
+<p align="center"><img width="70%" alt="Figure: Log macro output"  src="../../images/debugging.png"/></p>\r
+\r
+<h2 id="tag" name="tag">Tag</h2>\r
+<p>A tag is used to identify the source of the log message.</p>\r
+\r
+<p>There are no naming limitations, but do not forget that the tag is an identification of a module.</p>\r
+\r
+<p>Each tag must be unique.</p>\r
+\r
+\r
+<h2 id="error" name="error">Error Type</h2>\r
+<table> \r
+   <caption>\r
+     Table: dlog error types \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Numerator</th> \r
+     <th>Description</th>       \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_NONE</span></td> \r
+     <td>Successful</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_INVALID_PARAMETER</span></td> \r
+     <td>Invalid parameter</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">DLOG_ERROR_NOT_PERMITTED</span></td> \r
+     <td>Operation not permitted</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+\r
+\r
+<p>To send a log message:</p>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;dlog.h&gt;\r
+int main(void)\r
+{\r
+&nbsp;&nbsp;&nbsp;int integer = 21;\r
+&nbsp;&nbsp;&nbsp;char string[] = &quot;test dlog&quot;;\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;USR_TAG&quot;, &quot;test dlog&quot;);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;USR_TAG&quot;, &quot;%s, %d&quot;, string, integer);\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}</pre>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;dlog.h&gt;\r
+void my_debug_print(char *format, ...)\r
+{\r
+&nbsp;&nbsp;&nbsp;va_list ap;\r
+&nbsp;&nbsp;&nbsp;va_start(ap, format);\r
+&nbsp;&nbsp;&nbsp;dlog_vprint(DLOG_INFO, &quot;USR_TAG&quot;, format, ap);\r
+&nbsp;&nbsp;&nbsp;va_end(ap);\r
+}\r
+\r
+int main(void)\r
+{\r
+&nbsp;&nbsp;&nbsp;my_debug_print(&quot;%s&quot;, &quot;test dlog&quot;);\r
+&nbsp;&nbsp;&nbsp;my_debug_print(&quot;%s, %d&quot;, &quot;test dlog&quot;, 21);\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}\r
+</pre>\r
+\r
+  <h2 id="handling" name="handling">Error Handling with dlog</h2>\r
+<p> Typical error handling example is as follows:</p>\r
+<pre class="prettyprint">\r
+location_manager_h location_handle;\r
+int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);\r
+if (result != LOCATIONS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;Creation of the location manager failed.&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;return false;\r
+}\r
+</pre>\r
+\r
+<p>While working with the SDK this information is available in the Log tab. While working with the target device, one can also use dlogutil utility.</p>\r
+\r
+<h2 id="dlogutil" name="dlogutil">dlogutil</h2>\r
+<p>You can collect and print out logs with logutil. Logutil supports filtering, and managing the log device.</p>\r
+\r
+<h3 id="commands" name="commands">Using Logutil Commands</h3>\r
+<p>You can use a logutil command to view and follow the content of the log buffers. The general usage is:</p>\r
+\r
+<pre class="prettyprint">\r
+dlogutil [&lt;option&gt;] ... [&lt;filter-spec&gt;] ...\r
+</pre>\r
+\r
+<h3 id="filter_output" name="filter_output">Filtering Log Output</h3>\r
+<p>Every log message has a tag and a priority associated with it.</p>\r
+\r
+<p>The filter expression follows the <span style="font-family: Courier New,Courier,monospace">tag:priority</span> format, where the tag indicates the tag of interest and the priority indicates the minimum level of priority to report for that tag. You can add any number of <span style="font-family: Courier New,Courier,monospace">tag:priority</span> specifications in a single filter expression.</p>\r
+\r
+<p>The tag of a log message is a short name indicating the system component from which the message originates.</p>\r
+<p>The priority is one of the following character values, ordered from the lowest to the highest priority:</p>\r
+<ul><li>D - debug</li>\r
+<li>I - info</li>\r
+<li>W - warning</li>\r
+<li>E - Error</li></ul>\r
+\r
+<p>For example, if you want to see all log messages with the MyApp tag that are above the debug priority:</p>\r
+\r
+<pre class="prettyprint"># dlogutil MyApp:D</pre>\r
+\r
+<p>If you want to see all log messages above the info priority:</p>\r
+\r
+<pre class="prettyprint"># dlogutil *:I</pre>\r
+\r
+<h3 id="control_output" name="control_output">Controlling Log Output Format</h3>\r
+<p>The log messages contain a number of metadata fields in addition to tag and priority. You can modify the output format for messages so that they display a specific metadata field. To do so, use the <span style="font-family: Courier New,Courier,monospace">-v</span> option when starting dlogutil and specify one of the supported output formats:</p>\r
+\r
+<ul>\r
+       <li>brief: Displays the priority/tag and PID of the originating process (the default format)</li>\r
+       <li>process: Displays the PID only</li> \r
+       <li>tag: Displays the priority/tag only</li>\r
+       <li>thread: Displays the process:thread and priority/tag only</li> \r
+       <li>raw: Displays the raw log message, with no other metadata fields</li> \r
+       <li>time: Displays the date, invocation time, priority/tag, and PID of the originating process</li> \r
+       <li>long: Displays all metadata fields and separates messages with blank lines</li>\r
+</ul>\r
+\r
+<pre class="prettyprint"># dlogutil [-v &lt;format&gt;]</pre>\r
+\r
+<h3 id="list_output" name="list_output">List of Logutil Command Options</h3>\r
+<table> \r
+   <caption>\r
+     Table: Logutil command options \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Option</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-b &lt;buffer&gt;</span></td> \r
+     <td>Alternates the log buffer. The main buffer is used by the default buffer.</td> \r
+    </tr> \r
+     <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-c</span></td> \r
+     <td>Clears the entire log and exits</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-d</span></td> \r
+     <td>Dumps the log and exits</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-f &lt;filename&gt;</span></td> \r
+     <td>Writes the log to &lt;filename&gt;. The default filename is stdout.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-g</span></td> \r
+     <td>Prints the size of the specified log buffer and exits</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-n &lt;count&gt;</span></td> \r
+     <td>Sets the maximum number of rotated logs to &lt;count&gt;. The default value is 4. Requires the <span style="font-family: Courier New,Courier,monospace">-r</span> option.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-r &lt;Kbytes&gt;</span></td> \r
+     <td>Rotates the log file every &lt;Kbytes&gt; of output. The default value is 16. Requires the <span style="font-family: Courier New,Courier,monospace">-f</span> option.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-s</span></td> \r
+     <td>Sets the default filter spec to silent</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">-v &lt;format&gt;</span></td> \r
+     <td>Sets the output format for log messages. The default format is brief.</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table>\r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/media_keys_n.htm b/org.tizen.guides/html/native/system/media_keys_n.htm
index 23c6eac..3e25776 100644 (file)
--- a/org.tizen.guides/html/native/system/media_keys_n.htm
+++ b/org.tizen.guides/html/native/system/media_keys_n.htm
@@ -1,67 +1,67 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Media key</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm">Media key Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Media key</h1>
-
-  <p>Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The <span style="font-family: Courier New, Courier, monospace">media_key_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">wearable</a> applications) defines the available key types.</p> 
-  
-  <p>The main features of the Media key API include:</p> 
-  <ul> 
-   <li>Registering a callback 
-   <p>You can register a callback for media key events using the <span style="font-family: Courier New,Courier,monospace">media_key_reserve()</span> function. The first parameter of the function defines the <span style="font-family: Courier New,Courier,monospace">media_key_event_cb</span> type callback, which you can implement to perform any actions you need. </p>
-   </li> 
-   <li>Unregistering a callback 
-   <p>You can unregister a callback for media key events using the <span style="font-family: Courier New,Courier,monospace">media_key_release()</span> function.</p> </li></ul>
-   
-   <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Media key</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm">Media key Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Media key</h1>\r
+\r
+  <p>Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The <span style="font-family: Courier New, Courier, monospace">media_key_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">wearable</a> applications) defines the available key types.</p> \r
+  \r
+  <p>The main features of the Media key API include:</p> \r
+  <ul> \r
+   <li>Registering a callback \r
+   <p>You can register a callback for media key events using the <span style="font-family: Courier New,Courier,monospace">media_key_reserve()</span> function. The first parameter of the function defines the <span style="font-family: Courier New,Courier,monospace">media_key_event_cb</span> type callback, which you can implement to perform any actions you need. </p>\r
+   </li> \r
+   <li>Unregistering a callback \r
+   <p>You can unregister a callback for media key events using the <span style="font-family: Courier New,Courier,monospace">media_key_release()</span> function.</p> </li></ul>\r
+   \r
+   <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/runtime_info_n.htm b/org.tizen.guides/html/native/system/runtime_info_n.htm
index a420bc4..361e892 100644 (file)
--- a/org.tizen.guides/html/native/system/runtime_info_n.htm
+++ b/org.tizen.guides/html/native/system/runtime_info_n.htm
@@ -1,160 +1,160 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Runtime information</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm">Runtime information Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Mobile Native</a></li>               
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Wearable Native</a></li>                           
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Runtime information</h1>
-
-  <p>The <span style="font-family: Courier New,Courier,monospace">capi-system-runtime-info</span> enables your application to get various runtime information.</p> 
-  <p>To obtain the information, query a runtime info key. The keys are listed in the following table.
-</p> 
-  <table id="runtime_information_keys" border="1"> 
-   <caption>
-     Table: Runtime information keys 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Key</th> 
-     <th>Type</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether Bluetooth is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_WIFI_HOTSPOT_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether a Wi-Fi hotspot is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_TETHERING_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether Bluetooth tethering is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_TETHERING_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether USB tethering is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_LOCATION_SERVICE_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether the location service is allowed to use location data from GPS satellites.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_LOCATION_NETWORK_POSITION_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether the location service is allowed to use location data from cellular and Wi-Fi.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_PACKET_DATA_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether the packet data through 3G network is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_DATA_ROAMING_ENABLE</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether data roaming is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_VIBRATION_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether vibration is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_CONNECTED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether an audio jack is connected.</td> 
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_GPS_STATUS</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> 
-     <td>Indicates the current status of GPS.</td> 
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BATTERY_IS_CHARGING</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether the battery is currently charging.</td> 
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_TV_OUT_CONNECTED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether TV out is connected.</td> 
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> 
-     <td>Indicates the current status of the audio jack.</td> 
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether USB is connected.</td> 
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_CHARGER_CONNECTED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether a charger is connected.</td> 
-    </tr>
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUTO_ROTATION_ENABLED</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> 
-     <td>Indicates whether auto-rotation is enabled.</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Runtime information</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm">Runtime information Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Mobile Native</a></li>               \r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Wearable Native</a></li>                           \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Runtime information</h1>\r
+\r
+  <p>The <span style="font-family: Courier New,Courier,monospace">capi-system-runtime-info</span> enables your application to get various runtime information.</p> \r
+  <p>To obtain the information, query a runtime info key. The keys are listed in the following table.\r
+</p> \r
+  <table id="runtime_information_keys" border="1"> \r
+   <caption>\r
+     Table: Runtime information keys \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Key</th> \r
+     <th>Type</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether Bluetooth is enabled.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_WIFI_HOTSPOT_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether a Wi-Fi hotspot is enabled.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BLUETOOTH_TETHERING_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether Bluetooth tethering is enabled.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_TETHERING_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether USB tethering is enabled.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_LOCATION_SERVICE_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether the location service is allowed to use location data from GPS satellites.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_LOCATION_NETWORK_POSITION_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether the location service is allowed to use location data from cellular and Wi-Fi.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_PACKET_DATA_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether the packet data through 3G network is enabled.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_DATA_ROAMING_ENABLE</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether data roaming is enabled.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_VIBRATION_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether vibration is enabled.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_CONNECTED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether an audio jack is connected.</td> \r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_GPS_STATUS</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> \r
+     <td>Indicates the current status of GPS.</td> \r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_BATTERY_IS_CHARGING</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether the battery is currently charging.</td> \r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_TV_OUT_CONNECTED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether TV out is connected.</td> \r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">int</span></td> \r
+     <td>Indicates the current status of the audio jack.</td> \r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_USB_CONNECTED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether USB is connected.</td> \r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_CHARGER_CONNECTED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether a charger is connected.</td> \r
+    </tr>\r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">RUNTIME_INFO_KEY_AUTO_ROTATION_ENABLED</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td> \r
+     <td>Indicates whether auto-rotation is enabled.</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/settings_n.htm b/org.tizen.guides/html/native/system/settings_n.htm
index d6b4390..6e88570 100644 (file)
--- a/org.tizen.guides/html/native/system/settings_n.htm
+++ b/org.tizen.guides/html/native/system/settings_n.htm
@@ -1,291 +1,291 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>System Settings</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm">System Settings Tutorial</a></li>        
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>System Settings</h1>
-
-<p>Tizen provides functions for getting the system configuration related to user preferences.</p>
-
-<p>The main features of the System Settings API include accessing system-wide configurations, such as ringtone, wallpaper, and font.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> enumerator defines all enumerations that work as arguments for the System Settings API.</p>
-<p>The System Settings API provides 2 function types listed in the following table. Certain functions support both types, whereas others only support the getter function.</p>
-
-<table>
-<caption>Table: System Settings API function types</caption>
-<tbody>
-<tr>
- <th>Function type</th>
- <th>Methods</th>
- <th>Description</th>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace">GETTER</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_bool</span>
- <p><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_int</span></p>
- <p><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_string</span></p></td>
- <td>Get the user-defined values by data type (bool, int, or string).</td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace">NOTIFIER</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">system_settings_set_changed_cb</span><p><span style="font-family: Courier New,Courier,monospace">system_settings_unset_changed_cb</span></p></td>
- <td>Register and unregister callback functions when the <span style="font-family: Courier New,Courier,monospace">SETTER</span> related to the key is called.</td>
-</tr></tbody>
-</table>
-
-<p>The following table lists the system settings details.</p>
-  <table id="input" border="1"> 
-   <caption>
-     Table: System settings keys
-   </caption>  
-   <tbody> 
-    <tr> 
-     <th>Key</th>
-        <th>Type</th>
-        <th>Supporting API type </th> 
-        <th>Description</th> 
-    </tr> 
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER</span></td>
-       <td>Current system default font type.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEVICE_NAME</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Device name.</td>
-       </tr>
-       
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DISPLAY_SCREEN_ROTATION_AUTO</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether rotation control is automatic.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_EMAIL_ALERT_RINGTONE</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>File path of the current email alert ringtone.</td>
-       </tr>
-       
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_SIZE</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Current system font size.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_TYPE</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Current system font type.</td>
-       </tr>   
-       
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>File path of the current ringtone.</td>
-       </tr>   
-       
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_COUNTRY</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Current country setting in the &lt;LANGUAGE&gt;_&lt;REGION&gt; syntax. The country setting is in the ISO 639-2 format, and the region setting is in the ISO 3166-1 alpha-2 format.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Current language setting in the &lt;LANGUAGE&gt;_&lt;REGION&gt; syntax. The language setting is in the ISO 639-2 format and the region setting is in the ISO 3166-1 alpha-2 format.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEFORMAT_24HOUR</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether the 24-hour clock is used. If the value is <span style="font-family: Courier New,Courier,monospace">false</span>, the 12-hour clock is used.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEZONE</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Current time zone.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether the motion service is activated.</td>
-       </tr>
-       
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_NETWORK_FLIGHT_MODE</span></td>                        
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether the device is in the flight mode.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_NETWORK_WIFI_NOTIFICATION</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether Wi-Fi-related notifications are enabled on the device.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SCREEN_BACKLIGHT_TIME</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Backlight time (in seconds).</td>
-       </tr>
-       <tr>
-       
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_LOCK</span></td>                                 
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether the screen lock sound is enabled on the device (for example, whether the LCD on/off sound is enabled). </td>
-       </tr>
-       
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>File path of the current notification tone set by the user. </td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION_REPETITION_PERIOD</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Time period for notification repetitions.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</span></td>                  
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether the device is in the silent mode.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_TOUCH</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether the screen touch sound is enabled on the device.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_TIME_CHANGED</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">NOTIFIER</span></td>
-       <td>Event that occurs when the system changes time to notify you about the time change.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_USB_DEBUGGING_ENABLED</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>Indicates whether the USB debugging is enabled.</td>
-       </tr>
-       
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>File path of the current home screen wallpaper.</td>
-       </tr>
-
-       <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
-       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>
-       <td>File path of the current lock screen wallpaper.</td>
-       </tr>
-   </tbody> 
-  </table>
-
-<p>The following example shows a typical use case: An application sees the name of the current wallpaper and you want to print out a message when the wallpaper changes:</p>
-
-<pre class="prettyprint">
-void _img_cb (system_settings_key_e key, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;THIS IS CALLED BY USER APPLICATION WHEN THE WALLPAPER CHANGES \n&quot;);
-}
-
-// NOTIFIER 1 - Registering a callback function
-system_settings_set_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, _img_cb, NULL);
-char * path;
-
-// GETTER
-system_settings_get_value_string(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, &amp;path);
-printf (&quot;path of the current wallpaper is %s \n&quot;, path);
-
-// NOTIFIER 2 - Deregistering a callback function
-system_settings_unset_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN);
-</pre>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>System Settings</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm">System Settings Tutorial</a></li>        \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>System Settings</h1>\r
+\r
+<p>Tizen provides functions for getting the system configuration related to user preferences.</p>\r
+\r
+<p>The main features of the System Settings API include accessing system-wide configurations, such as ringtone, wallpaper, and font.</p>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> enumerator defines all enumerations that work as arguments for the System Settings API.</p>\r
+<p>The System Settings API provides 2 function types listed in the following table. Certain functions support both types, whereas others only support the getter function.</p>\r
+\r
+<table>\r
+<caption>Table: System Settings API function types</caption>\r
+<tbody>\r
+<tr>\r
+ <th>Function type</th>\r
+ <th>Methods</th>\r
+ <th>Description</th>\r
+</tr>\r
+<tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">GETTER</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_bool</span>\r
+ <p><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_int</span></p>\r
+ <p><span style="font-family: Courier New,Courier,monospace">system_settings_get_value_string</span></p></td>\r
+ <td>Get the user-defined values by data type (bool, int, or string).</td>\r
+</tr>\r
+<tr>\r
+ <td><span style="font-family: Courier New,Courier,monospace">NOTIFIER</span></td>\r
+ <td><span style="font-family: Courier New,Courier,monospace">system_settings_set_changed_cb</span><p><span style="font-family: Courier New,Courier,monospace">system_settings_unset_changed_cb</span></p></td>\r
+ <td>Register and unregister callback functions when the <span style="font-family: Courier New,Courier,monospace">SETTER</span> related to the key is called.</td>\r
+</tr></tbody>\r
+</table>\r
+\r
+<p>The following table lists the system settings details.</p>\r
+  <table id="input" border="1"> \r
+   <caption>\r
+     Table: System settings keys\r
+   </caption>  \r
+   <tbody> \r
+    <tr> \r
+     <th>Key</th>\r
+        <th>Type</th>\r
+        <th>Supporting API type </th> \r
+        <th>Description</th> \r
+    </tr> \r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER</span></td>\r
+       <td>Current system default font type.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEVICE_NAME</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Device name.</td>\r
+       </tr>\r
+       \r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DISPLAY_SCREEN_ROTATION_AUTO</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether rotation control is automatic.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_EMAIL_ALERT_RINGTONE</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>File path of the current email alert ringtone.</td>\r
+       </tr>\r
+       \r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_SIZE</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Current system font size.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_FONT_TYPE</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Current system font type.</td>\r
+       </tr>   \r
+       \r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>File path of the current ringtone.</td>\r
+       </tr>   \r
+       \r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_COUNTRY</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Current country setting in the &lt;LANGUAGE&gt;_&lt;REGION&gt; syntax. The country setting is in the ISO 639-2 format, and the region setting is in the ISO 3166-1 alpha-2 format.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Current language setting in the &lt;LANGUAGE&gt;_&lt;REGION&gt; syntax. The language setting is in the ISO 639-2 format and the region setting is in the ISO 3166-1 alpha-2 format.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEFORMAT_24HOUR</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether the 24-hour clock is used. If the value is <span style="font-family: Courier New,Courier,monospace">false</span>, the 12-hour clock is used.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_LOCALE_TIMEZONE</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Current time zone.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether the motion service is activated.</td>\r
+       </tr>\r
+       \r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_NETWORK_FLIGHT_MODE</span></td>                        \r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether the device is in the flight mode.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_NETWORK_WIFI_NOTIFICATION</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether Wi-Fi-related notifications are enabled on the device.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SCREEN_BACKLIGHT_TIME</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Backlight time (in seconds).</td>\r
+       </tr>\r
+       <tr>\r
+       \r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_LOCK</span></td>                                 \r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether the screen lock sound is enabled on the device (for example, whether the LCD on/off sound is enabled). </td>\r
+       </tr>\r
+       \r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>File path of the current notification tone set by the user. </td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION_REPETITION_PERIOD</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Time period for notification repetitions.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</span></td>                  \r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether the device is in the silent mode.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_SOUND_TOUCH</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether the screen touch sound is enabled on the device.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_TIME_CHANGED</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">int</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">NOTIFIER</span></td>\r
+       <td>Event that occurs when the system changes time to notify you about the time change.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_USB_DEBUGGING_ENABLED</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>Indicates whether the USB debugging is enabled.</td>\r
+       </tr>\r
+       \r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>File path of the current home screen wallpaper.</td>\r
+       </tr>\r
+\r
+       <tr>\r
+       <td><span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">string</span></td>\r
+       <td><span style="font-family: Courier New,Courier,monospace">GETTER, NOTIFIER</span></td>\r
+       <td>File path of the current lock screen wallpaper.</td>\r
+       </tr>\r
+   </tbody> \r
+  </table>\r
+\r
+<p>The following example shows a typical use case: An application sees the name of the current wallpaper and you want to print out a message when the wallpaper changes:</p>\r
+\r
+<pre class="prettyprint">\r
+void _img_cb (system_settings_key_e key, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;printf(&quot;THIS IS CALLED BY USER APPLICATION WHEN THE WALLPAPER CHANGES \n&quot;);\r
+}\r
+\r
+// NOTIFIER 1 - Registering a callback function\r
+system_settings_set_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, _img_cb, NULL);\r
+char * path;\r
+\r
+// GETTER\r
+system_settings_get_value_string(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, &amp;path);\r
+printf (&quot;path of the current wallpaper is %s \n&quot;, path);\r
+\r
+// NOTIFIER 2 - Deregistering a callback function\r
+system_settings_unset_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN);\r
+</pre>\r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/storage_n.htm b/org.tizen.guides/html/native/system/storage_n.htm
index 2928c76..a17d8ea 100644 (file)
--- a/org.tizen.guides/html/native/system/storage_n.htm
+++ b/org.tizen.guides/html/native/system/storage_n.htm
@@ -1,117 +1,117 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Storage</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/system/storage_tutorial_n.htm">Storage Tutorial</a></li>       
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Storage</h1>
-
-  <p>Tizen enables you to get storage information and manage directories.</p> 
-  <p>The Storage API provides access to accessible parts of the file system, which are represented as virtual root locations. The virtual roots form a collection of locations that function as a single virtual device file system. The following table lists the supported virtual roots.</p> 
-  <table border="1" style="width: 100%"> 
-   <caption>
-     Table: Filesystem virtual roots 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Virtual root</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">images</span></td> 
-     <td>Location for storing images.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">sounds</span></td> 
-     <td>Location for storing sound files.</td> 
-    </tr>      
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">videos</span></td> 
-     <td>Location for storing videos.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">camera</span></td> 
-     <td>Location for storing camera files.</td> 
-    </tr>      
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">downloads</span></td> 
-     <td>Location for storing downloaded items.</td> 
-    </tr>      
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">music</span></td> 
-     <td>Location for storing audio files.</td> 
-    </tr> 
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">documents</span></td> 
-     <td>Location for storing documents.</td> 
-    </tr>      
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">others</span></td> 
-     <td>Location for storing other files.</td> 
-    </tr> 
-       <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace">ringtones</span></td> 
-     <td>Location for ringtones (read-only location).</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-  <p>The main features of the Storage API include:</p> 
-  <ul> 
-   <li>Storage management <p>You can manage different storages on the device with the Storage APIs.</p> <p>You can retrieve additional information about the storages, including which storage is supported in the device using the <span style="font-family: Courier New,Courier,monospace">storage_foreach_device_supported()</span> function. The callback function returns the storage type, mount state, and virtual root path.</p>
-   </li> 
-   <li>Storage space management 
-   <p>You can get the available and total space size of the storage with the  <span style="font-family: Courier New,Courier,monospace">storage_get_total_space()</span> and <span style="font-family: Courier New,Courier,monospace">storage_get_available_space()</span> functions. They return the storage size, excluding the minimum memory size to launch the low memory pop-up in case of a low memory situation. Consequently, the available size must be less than the original available size, and you must use these functions to get the memory size. For the same reason, you cannot use the <span style="font-family: Courier New,Courier,monospace">statvfs</span> function directly in Tizen. Instead, use <span style="font-family: Courier New,Courier,monospace">storage_get_internal_memory_size()</span> and <span style="font-family: Courier New,Courier,monospace">storage_get_external_memory_size()</span>. The Statvfs structure has a different structure size defined by &quot;__USE_FILE_OFFSET64&quot;. However, you can ignore this, since the Storage API uses a proper function automatically.</p></li></ul>
-  
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Storage</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/system/storage_tutorial_n.htm">Storage Tutorial</a></li>       \r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Storage</h1>\r
+\r
+  <p>Tizen enables you to get storage information and manage directories.</p> \r
+  <p>The Storage API provides access to accessible parts of the file system, which are represented as virtual root locations. The virtual roots form a collection of locations that function as a single virtual device file system. The following table lists the supported virtual roots.</p> \r
+  <table border="1" style="width: 100%"> \r
+   <caption>\r
+     Table: Filesystem virtual roots \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Virtual root</th> \r
+     <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">images</span></td> \r
+     <td>Location for storing images.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">sounds</span></td> \r
+     <td>Location for storing sound files.</td> \r
+    </tr>      \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">videos</span></td> \r
+     <td>Location for storing videos.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">camera</span></td> \r
+     <td>Location for storing camera files.</td> \r
+    </tr>      \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">downloads</span></td> \r
+     <td>Location for storing downloaded items.</td> \r
+    </tr>      \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">music</span></td> \r
+     <td>Location for storing audio files.</td> \r
+    </tr> \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">documents</span></td> \r
+     <td>Location for storing documents.</td> \r
+    </tr>      \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">others</span></td> \r
+     <td>Location for storing other files.</td> \r
+    </tr> \r
+       <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace">ringtones</span></td> \r
+     <td>Location for ringtones (read-only location).</td> \r
+    </tr>      \r
+   </tbody> \r
+  </table> \r
+  <p>The main features of the Storage API include:</p> \r
+  <ul> \r
+   <li>Storage management <p>You can manage different storages on the device with the Storage APIs.</p> <p>You can retrieve additional information about the storages, including which storage is supported in the device using the <span style="font-family: Courier New,Courier,monospace">storage_foreach_device_supported()</span> function. The callback function returns the storage type, mount state, and virtual root path.</p>\r
+   </li> \r
+   <li>Storage space management \r
+   <p>You can get the available and total space size of the storage with the  <span style="font-family: Courier New,Courier,monospace">storage_get_total_space()</span> and <span style="font-family: Courier New,Courier,monospace">storage_get_available_space()</span> functions. They return the storage size, excluding the minimum memory size to launch the low memory pop-up in case of a low memory situation. Consequently, the available size must be less than the original available size, and you must use these functions to get the memory size. For the same reason, you cannot use the <span style="font-family: Courier New,Courier,monospace">statvfs</span> function directly in Tizen. Instead, use <span style="font-family: Courier New,Courier,monospace">storage_get_internal_memory_size()</span> and <span style="font-family: Courier New,Courier,monospace">storage_get_external_memory_size()</span>. The Statvfs structure has a different structure size defined by &quot;__USE_FILE_OFFSET64&quot;. However, you can ignore this, since the Storage API uses a proper function automatically.</p></li></ul>\r
+  \r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/system/sysinfo_n.htm b/org.tizen.guides/html/native/system/sysinfo_n.htm
index fbb3527..f476908 100644 (file)
--- a/org.tizen.guides/html/native/system/sysinfo_n.htm
+++ b/org.tizen.guides/html/native/system/sysinfo_n.htm
@@ -805,22 +805,7 @@ the Tizen reference implementation.</td>
        <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
      <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
         <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the heart rate monitor.</td>
-        </tr>
-       <tr>
-        <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_green</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the led green of the heart rate monitor.</td>
-       </tr>
-       <tr>
-        <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the led ir of the heart rate monitor.</td>
-       </tr>
-       <tr>
-        <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_red</span></td>
-        <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
-        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the led red of the heart rate monitor.</td>
-       </tr>
+    </tr>
        <tr>
        <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
      <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
diff --git a/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm b/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm
index daaeaf9..663cf79 100644 (file)
--- a/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm
+++ b/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm
@@ -1,68 +1,68 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Phonenumber utils</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm">Phonenumber utils Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber utils API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber utils API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Phonenumber utils</h1>
-
-<p>Tizen enables you to parse and format phone numbers. The Phonenumber utils APIs are implemented with the libphonenumber opensource library.</p>
-
-<p>The main features of the Phonenumber utils API include:</p>
-
-<ul><li>Retrieving the location information
-<p>You can get the location based on the phone number, region, and language using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_location_from_number()</span> function. If the function cannot provide the location with the passed language, it uses English.</p></li>
-
-<li>Formatting the phone number
-<p>You can format the phone number string based on the region using the dash (&quot;-&quot;) and space (&quot; &quot;) characters using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_formatted_number()</span> function.</p></li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Phonenumber utils</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm">Phonenumber utils Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber utils API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber utils API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Phonenumber utils</h1>\r
+\r
+<p>Tizen enables you to parse and format phone numbers. The Phonenumber utils APIs are implemented with the libphonenumber opensource library.</p>\r
+\r
+<p>The main features of the Phonenumber utils API include:</p>\r
+\r
+<ul><li>Retrieving the location information\r
+<p>You can get the location based on the phone number, region, and language using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_location_from_number()</span> function. If the function cannot provide the location with the passed language, it uses English.</p></li>\r
+\r
+<li>Formatting the phone number\r
+<p>You can format the phone number string based on the region using the dash (&quot;-&quot;) and space (&quot; &quot;) characters using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_formatted_number()</span> function.</p></li>\r
+</ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/telephony/telephony_guide_n.htm b/org.tizen.guides/html/native/telephony/telephony_guide_n.htm
index 52feb2b..46cb284 100644 (file)
--- a/org.tizen.guides/html/native/telephony/telephony_guide_n.htm
+++ b/org.tizen.guides/html/native/telephony/telephony_guide_n.htm
@@ -1,67 +1,67 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Telephony</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Telephony</h1>
-  <p>Telephony features include managing phone numbers and information related to the Telephony Service.</p>
-
-  <p>The main telephony features are:</p>
-  <ul>
-       <li><a href="phonenumber_util_n.htm">Phonenumber utils</a> 
-       <p>Allows you to parse and format phone numbers.</p></li>
-       <li><a href="telephony_info_n.htm">Telephony Information</a> 
-       <p>Allows you to manage call, SIM, network, and modem information.</p></li>     
-  </ul>
-  
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Telephony</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Telephony</h1>\r
+  <p>Telephony features include managing phone numbers and information related to the Telephony Service.</p>\r
+\r
+  <p>The main telephony features are:</p>\r
+  <ul>\r
+       <li><a href="phonenumber_util_n.htm">Phonenumber utils</a> \r
+       <p>Allows you to parse and format phone numbers.</p></li>\r
+       <li><a href="telephony_info_n.htm">Telephony Information</a> \r
+       <p>Allows you to manage call, SIM, network, and modem information.</p></li>     \r
+  </ul>\r
+  \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/telephony/telephony_info_n.htm b/org.tizen.guides/html/native/telephony/telephony_info_n.htm
index b4303da..a0496c7 100644 (file)
--- a/org.tizen.guides/html/native/telephony/telephony_info_n.htm
+++ b/org.tizen.guides/html/native/telephony/telephony_info_n.htm
@@ -1,330 +1,330 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Telephony Information</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#call">Call Information</a></li>
-                               <li><a href="#sim">SIM Information</a></li>
-                               <li><a href="#net">Network Information</a></li>
-                               <li><a href="#modem">Modem Information</a></li>
-               </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm">Telephony Information Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Telephony Information</h1>
-  <p>Telephony information features include call, SIM, network, and modem information using the Telephony Service.</p>
-
- 
-<p>The main telephony information features are:</p>
-
-<ul><li><a href="#call">Call information</a>
-<p>Get the voice and video call states. You can use this information in call-related actions.</p></li>
-
-<li><a href="#sim">SIM information</a>
-<p>Extract information stored on a SIM card without changing the information.</p></li>
-
-<li><a href="#net">Network information</a>
-<p>Access (without changing) information about the current cellular network and telephony service. </p></li>
-
-<li><a href="#modem">Modem information</a>
-<p>Access (without changing) IMEI information.</p></li></ul>
-
-<p>The following figure illustrates the Telephony Service and APIs.</p>
-
-  <p class="figure">Figure: Telephony APIs and Telephony Service</p> 
-  <p align="center"><img alt="Telephony APIs and Telephony Service" src="../../images/telephony.png" /></p>
-
-<h2 id="call" name="call">Call Information</h2>
-
-<p>The Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications) provides the following functions:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_preferred_voice_subscription()</span>
-<p>Gets the current value for the preferred voice call subscription. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_preferred_voice_subs_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span>
-<p>Gets the list of the current call. It returns the current call count and the call handle.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span>
-<p>Releases the list allocated to the call handle. When the call handle is no longer needed, this function must be called to free the handle.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_handle_id()</span>
-<p>Gets the call handle ID.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_number()</span>
-<p>Gets the call number.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_type()</span>
-<p>Gets the call type. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_type_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_status()</span>
-<p>Gets the call status. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_status_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_direction()</span>
-<p>Gets the call direction: MO (Mobile Originated) or MT (Mobile Terminated). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_direction_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_conference_status()</span>
-<p>Determines whether the call is conference call. It returns <span style="font-family: Courier New,Courier,monospace">true</span> for a conference call or <span style="font-family: Courier New,Courier,monospace">false</span> for a single call.</p></li></ul>
-
-<p>To get call state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
-
-<p>The following table defines the available notification IDs.</p>
-
-<table> 
-   <caption>
-     Table: Call information notification IDs 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Change in state</th> 
-     <th>Notification ID</th> 
-    </tr> 
-    <tr> 
-     <td>Voice status idle</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE</span></td>
-    </tr>
-    <tr>
-     <td>Voice status active</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE</span></td>
-    </tr>
-    <tr>
-     <td>Voice status held</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD</span></td>
-    </tr>
-    <tr>
-     <td>Voice status dialing</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING</span></td>
-    </tr>
-    <tr>
-     <td>Voice status alerting</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING</span></td>
-    </tr>
-    <tr>
-     <td>Voice status incoming</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING</span></td>
-    </tr>
-     <tr>
-     <td>Video status idle</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_IDLE</span></td>
-    </tr>
-    <tr>
-     <td>Video status active</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ACTIVE</span></td>
-    </tr>
-    <tr>
-     <td>Video status dialing</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_DIALING</span></td>
-    </tr>
-    <tr>
-     <td>Video status alerting</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ALERTING</span></td>
-    </tr>
-    <tr>
-     <td>Video status incoming</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_INCOMING</span></td>
-    </tr>
-    <tr>
-     <td>Preferred voice subscription</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_CALL_PREFERRED_VOICE_SUBSCRIPTION</span></td>
-    </tr>
-   </tbody> 
-  </table>
-
-
-<h2 id="sim" name="sim">SIM Information</h2>
-
-<p>The SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_icc_id()</span>
-<p>Gets the Integrated Circuit Card IDentification (ICC-ID). You get the ICC-ID as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_operator()</span>
-<p>Gets the SIM operator (MCC + MNC). You get the operator information as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_msin()</span>
-<p>Gets the Mobile Subscription Identification Number (MSIN) of the SIM provider. You get the MSIN as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_spn()</span>
-<p>Gets the Service Provider Name (SPN) of the SIM card. You get the SPN as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_cphs_operator_name()</span>
-<p>Gets the Operator Name String (ONS) of the Common PCN Handset Specification (CPHS) in the SIM card. You get the CPHS as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_number()</span>
-<p>Gets the subscriber number embedded in the SIM card. This value contains the MSISDN related to the subscriber. You get the subscriber number as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span>
-<p>Gets the state of the SIM. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values.</p></li> 
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_is_changed()</span>
-<p>Checks whether the current SIM card differs from the previous SIM card.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_application_list()</span>
-<p>Gets the application list on the UICC. It returns one of the masking (<span style="font-family: Courier New,Courier,monospace">telephony_sim_application_type_e</span>) values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_id()</span>
-<p>Gets the subscriber ID as a string, which needs to be freed by the application.</p></li>
-</ul>
-
-<p>To get SIM state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
-
-<p>The following table defines the available notification IDs.</p>
-
-<table> 
-   <caption>
-     Table: SIM information notification IDs 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Change in state</th> 
-     <th>Notification ID</th> 
-    </tr> 
-    <tr> 
-     <td>SIM state</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_SIM_STATUS</span></td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Before retrieving information from the SIM card, you must retrieve the state of the SIM card. You can get SIM-related information only if the SIM state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-
-
-<h2 id="net" name="net">Network Information</h2>
-
-<p>The Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_lac()</span>
-<p>Gets the LAC (Location Area Code) of the current network.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_cell_id()</span>
-<p>Gets the cell identification number.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_rssi()</span>
-<p>Gets the RSSI (Received Signal Strength Indicator).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_roaming_status()</span>
-<p>Gets the roaming state (<span style="font-family: Courier New,Courier,monospace">true</span> = roaming and <span style="font-family: Courier New,Courier,monospace">false</span> = not roaming).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mcc()</span>
-<p>Gets the MCC (Mobile Country Code) of the current registered network. You get the MCC as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mnc()</span>
-<p>Gets the MNC (Mobile Network Code) of the current registered network. You get the MNC as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name()</span>
-<p>Gets the name of the current registered network. You get the network name as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_type()</span>
-<p>Gets the network service type of the current registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_type_e</span> values. </p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span>
-<p>Gets the current network state of the telephony service. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_ps_type()</span>
-<p>Gets the packet service type of the currently registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_ps_type_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name_option()</span>
-<p>Gets the network name option of the currently registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_name_option_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_data_subscription()</span>
-<p>Gets the current default subscription for the data service (packet-switched). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_default_data_subs_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_subscription()</span>
-<p>Gets the current default subscription for the voice service (circuit-switched). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_default_subs_e</span> values.</p></li>
-</ul>
-
-<p>To get network-related information change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
-
-<p>The following table defines the available notification IDs.</p>
-
-<table> 
-   <caption>
-     Table: Network information notification IDs 
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Change in state</th> 
-     <th>Notification ID</th> 
-    </tr> 
-    <tr> 
-     <td>Network service state</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span></td> 
-    </tr>
-       <tr>
-     <td>Cell ID</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span></td> 
-    </tr>
-       <tr>
-     <td>Roaming status</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span></td>
-    </tr>
-       <tr>
-     <td>Signal strength</td> 
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span></td> 
-    </tr>
-    <tr>
-     <td>Network name</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span></td>
-    </tr>
-    <tr>
-     <td>Packet-switched type</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span></td>
-    </tr>
-    <tr>
-     <td>Default data subscription</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span></td>
-    </tr>
-    <tr>
-     <td>Default subscription</td>
-     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span></td>
-   </tr>
-   </tbody> 
-  </table>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Before retrieving information from the network, you must retrieve the network service state. You can get network-related information only if the network service state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-  
-<h2 id="modem" name="modem">Modem Information</h2>
-
-<p>The Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span>
-<p>Gets the IMEI (International Mobile Station Equipment Identity) of the mobile phone. You get the IMEI as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_power_status()</span>
-<p>Gets the power status of the modem. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_modem_power_status_e</span> values.</p></li>
-</ul>  
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Telephony Information</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                               <li><a href="#call">Call Information</a></li>\r
+                               <li><a href="#sim">SIM Information</a></li>\r
+                               <li><a href="#net">Network Information</a></li>\r
+                               <li><a href="#modem">Modem Information</a></li>\r
+               </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm">Telephony Information Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Telephony Information</h1>\r
+  <p>Telephony information features include call, SIM, network, and modem information using the Telephony Service.</p>\r
+\r
+ \r
+<p>The main telephony information features are:</p>\r
+\r
+<ul><li><a href="#call">Call information</a>\r
+<p>Get the voice and video call states. You can use this information in call-related actions.</p></li>\r
+\r
+<li><a href="#sim">SIM information</a>\r
+<p>Extract information stored on a SIM card without changing the information.</p></li>\r
+\r
+<li><a href="#net">Network information</a>\r
+<p>Access (without changing) information about the current cellular network and telephony service. </p></li>\r
+\r
+<li><a href="#modem">Modem information</a>\r
+<p>Access (without changing) IMEI information.</p></li></ul>\r
+\r
+<p>The following figure illustrates the Telephony Service and APIs.</p>\r
+\r
+  <p class="figure">Figure: Telephony APIs and Telephony Service</p> \r
+  <p align="center"><img alt="Telephony APIs and Telephony Service" src="../../images/telephony.png" /></p>\r
+\r
+<h2 id="call" name="call">Call Information</h2>\r
+\r
+<p>The Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications) provides the following functions:</p>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_preferred_voice_subscription()</span>\r
+<p>Gets the current value for the preferred voice call subscription. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_preferred_voice_subs_e</span> values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span>\r
+<p>Gets the list of the current call. It returns the current call count and the call handle.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span>\r
+<p>Releases the list allocated to the call handle. When the call handle is no longer needed, this function must be called to free the handle.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_handle_id()</span>\r
+<p>Gets the call handle ID.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_number()</span>\r
+<p>Gets the call number.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_type()</span>\r
+<p>Gets the call type. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_type_e</span> values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_status()</span>\r
+<p>Gets the call status. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_status_e</span> values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_direction()</span>\r
+<p>Gets the call direction: MO (Mobile Originated) or MT (Mobile Terminated). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_direction_e</span> values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_conference_status()</span>\r
+<p>Determines whether the call is conference call. It returns <span style="font-family: Courier New,Courier,monospace">true</span> for a conference call or <span style="font-family: Courier New,Courier,monospace">false</span> for a single call.</p></li></ul>\r
+\r
+<p>To get call state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>\r
+\r
+<p>The following table defines the available notification IDs.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Call information notification IDs \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Change in state</th> \r
+     <th>Notification ID</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Voice status idle</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Voice status active</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Voice status held</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Voice status dialing</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Voice status alerting</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Voice status incoming</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING</span></td>\r
+    </tr>\r
+     <tr>\r
+     <td>Video status idle</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_IDLE</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Video status active</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ACTIVE</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Video status dialing</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_DIALING</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Video status alerting</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ALERTING</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Video status incoming</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_INCOMING</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Preferred voice subscription</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_CALL_PREFERRED_VOICE_SUBSCRIPTION</span></td>\r
+    </tr>\r
+   </tbody> \r
+  </table>\r
+\r
+\r
+<h2 id="sim" name="sim">SIM Information</h2>\r
+\r
+<p>The SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications) provides the following functions:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_icc_id()</span>\r
+<p>Gets the Integrated Circuit Card IDentification (ICC-ID). You get the ICC-ID as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_operator()</span>\r
+<p>Gets the SIM operator (MCC + MNC). You get the operator information as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_msin()</span>\r
+<p>Gets the Mobile Subscription Identification Number (MSIN) of the SIM provider. You get the MSIN as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_spn()</span>\r
+<p>Gets the Service Provider Name (SPN) of the SIM card. You get the SPN as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_cphs_operator_name()</span>\r
+<p>Gets the Operator Name String (ONS) of the Common PCN Handset Specification (CPHS) in the SIM card. You get the CPHS as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_number()</span>\r
+<p>Gets the subscriber number embedded in the SIM card. This value contains the MSISDN related to the subscriber. You get the subscriber number as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span>\r
+<p>Gets the state of the SIM. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values.</p></li> \r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_is_changed()</span>\r
+<p>Checks whether the current SIM card differs from the previous SIM card.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_application_list()</span>\r
+<p>Gets the application list on the UICC. It returns one of the masking (<span style="font-family: Courier New,Courier,monospace">telephony_sim_application_type_e</span>) values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_id()</span>\r
+<p>Gets the subscriber ID as a string, which needs to be freed by the application.</p></li>\r
+</ul>\r
+\r
+<p>To get SIM state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>\r
+\r
+<p>The following table defines the available notification IDs.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: SIM information notification IDs \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Change in state</th> \r
+     <th>Notification ID</th> \r
+    </tr> \r
+    <tr> \r
+     <td>SIM state</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_SIM_STATUS</span></td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">Before retrieving information from the SIM card, you must retrieve the state of the SIM card. You can get SIM-related information only if the SIM state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+\r
+\r
+<h2 id="net" name="net">Network Information</h2>\r
+\r
+<p>The Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications) provides the following functions:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_lac()</span>\r
+<p>Gets the LAC (Location Area Code) of the current network.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_cell_id()</span>\r
+<p>Gets the cell identification number.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_rssi()</span>\r
+<p>Gets the RSSI (Received Signal Strength Indicator).</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_roaming_status()</span>\r
+<p>Gets the roaming state (<span style="font-family: Courier New,Courier,monospace">true</span> = roaming and <span style="font-family: Courier New,Courier,monospace">false</span> = not roaming).</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mcc()</span>\r
+<p>Gets the MCC (Mobile Country Code) of the current registered network. You get the MCC as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mnc()</span>\r
+<p>Gets the MNC (Mobile Network Code) of the current registered network. You get the MNC as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name()</span>\r
+<p>Gets the name of the current registered network. You get the network name as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_type()</span>\r
+<p>Gets the network service type of the current registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_type_e</span> values. </p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span>\r
+<p>Gets the current network state of the telephony service. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_ps_type()</span>\r
+<p>Gets the packet service type of the currently registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_ps_type_e</span> values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name_option()</span>\r
+<p>Gets the network name option of the currently registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_name_option_e</span> values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_data_subscription()</span>\r
+<p>Gets the current default subscription for the data service (packet-switched). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_default_data_subs_e</span> values.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_subscription()</span>\r
+<p>Gets the current default subscription for the voice service (circuit-switched). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_default_subs_e</span> values.</p></li>\r
+</ul>\r
+\r
+<p>To get network-related information change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>\r
+\r
+<p>The following table defines the available notification IDs.</p>\r
+\r
+<table> \r
+   <caption>\r
+     Table: Network information notification IDs \r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Change in state</th> \r
+     <th>Notification ID</th> \r
+    </tr> \r
+    <tr> \r
+     <td>Network service state</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span></td> \r
+    </tr>\r
+       <tr>\r
+     <td>Cell ID</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span></td> \r
+    </tr>\r
+       <tr>\r
+     <td>Roaming status</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span></td>\r
+    </tr>\r
+       <tr>\r
+     <td>Signal strength</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span></td> \r
+    </tr>\r
+    <tr>\r
+     <td>Network name</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Packet-switched type</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Default data subscription</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span></td>\r
+    </tr>\r
+    <tr>\r
+     <td>Default subscription</td>\r
+     <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span></td>\r
+   </tr>\r
+   </tbody> \r
+  </table>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">Before retrieving information from the network, you must retrieve the network service state. You can get network-related information only if the network service state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+  \r
+<h2 id="modem" name="modem">Modem Information</h2>\r
+\r
+<p>The Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications) provides the following functions:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span>\r
+<p>Gets the IMEI (International Mobile Station Equipment Identity) of the mobile phone. You get the IMEI as a string, which needs to be freed by the application.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_power_status()</span>\r
+<p>Gets the power status of the modem. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_modem_power_status_e</span> values.</p></li>\r
+</ul>  \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/animations_effects_n.htm b/org.tizen.guides/html/native/ui/animations_effects_n.htm
deleted file mode 100644 (file)
index 90be4f3..0000000
--- a/org.tizen.guides/html/native/ui/animations_effects_n.htm
+++ /dev/null
@@ -1,2009 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Animation and Effect Types</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#ecore_animation">Ecore Animator</a></li>
-                               <li><a href="#edje_animation">Edje Animation</a></li>
-                               <li><a href="#elm_transit">Elementary Animations</a></li>
-                               <li><a href="#evas_map_animation">Evas Map Effects</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>     
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li> 
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Animation and Effect Types</h1> 
-
-               <h2 id="ecore_animation" name="ecore_animation">Ecore Animator</h2>
-
-<p>Ecore provides a facility for animations called <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span>. Ecore animators use the Ecore main loop for creating animations, running a specific action on each tick of a timer in the main loop.</p>
-
-<p>To create an Ecore animation:</p>
-<ol>
-    <li>Determine the duration of the animation.</li>
-    <li>Define a callback function that performs the animation with that duration.</li>
-</ol>
-
-<p>To use Ecore animators in your application, you must include the <span style="font-family: Courier New,Courier,monospace;">&lt;Ecore.h&gt;</span> file. This file is included by default if you are already using the <span style="font-family: Courier New,Courier,monospace;">&lt;Elementary.h&gt;</span> file in your application. You then declare an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator*</span> variable and use the variable in the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_*</span> functions.</p>
-
-<p>The following example shows how to create a simple animation with a finite duration:</p>
-
-<pre class="prettyprint">
-static Eina_Bool
-_do_animation(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;evas_object_move(data, 100 * pos, 100 * pos);
-&nbsp;&nbsp;&nbsp;// Do some more animating...
-}
-ecore_animator_timeline_add(2, _do_animation, my_evas_object);
-</pre>
-
-<p>In the above example, we create a linear transition to move <span style="font-family: Courier New,Courier,monospace;">my_evas_object</span> from position (0,0) to position (100,100) in 2 seconds.</p>
-
-<h3>Creating an Animation with a Finite Duration</h3>
-
-<p>Most of the time, you will want to create animations that last for a predefined time.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function allows you to define an animator that is automatically deleted after the animation is finished:</p>
-
-<pre class="prettyprint">ecore_animator_timeline_add(double runtime, Ecore_Timeline_Cb func, const void *data)</pre>
-
-<ul>
-<li>The first argument is the duration of the animation in seconds. The duration is not affected by frame rate.</li>
-<li>The second argument is the callback function that performs the animation.</li>
-<li>The third argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The callback function can return <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to keep the animator running or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to stop the animator and have it be deleted automatically at any time. The callback function is also passed a timeline position parameter with a value between 0.0 (start) to 1.0 (end) to indicate where along the timeline the animator is running.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example performs a linear horizontal translation of 500 pixels in 8 seconds:</p>
-<pre class="prettyprint">
-static Eina_Bool
-_my_animation(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
-&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
-&nbsp;&nbsp;&nbsp;evas_object_move(obj, 500 * pos, y); // Linear translation of the Evas object
-}
-ecore_animator_timeline_add(8, _my_animation, my_evas_object);
-</pre>
-
-<h3>Position Mappings</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">Ecore_Pos_Map</span> position mappings are used to define the evolution of a given position in accordance with the desired effects. The value ranges from 0.0 to 1.0 on a given timeline. This position variation allows you to apply dynamic changes to any attribute of your Evas object, such as position, width, height, scale, angle, and color.</p>
-
-<p>Ecore supports the following position mappings (with the listed v1 and v2 parameters):</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear 0.0 - 1.0
-    <ul>
-        <li>v1: not used</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up
-    <ul>
-        <li>v1: not used</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down
-    <ul>
-        <li>v1: not used</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end
-    <ul>
-        <li>v1: not used</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up
-    <ul>
-        <li>v1: power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), 4.0 is cubed, and so on</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down
-    <ul>
-        <li>v1: power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), 3.0 is cubed, and so on</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end
-    <ul>
-        <li>v1: power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.1 is a much more pronounced sinusoidal (squared), 3.0 is cubed, and so on</li>
-        <li>v2: not used</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient * v1, interpolated via power of v2 curve
-    <ul>
-        <li>v1: multiplication factor for gradient</li>
-        <li>v2: curve value</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then &quot;drop&quot; like a ball bouncing to the ground at 1.0, and bounce v2 times, with a decay factor of v1
-    <ul>
-        <li>v1: bounce decay factor</li>
-        <li>v2: number of bounces</li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then &quot;wobble&quot; like a spring until rest position at 1.0, and wobble v2 times, with a decay factor of v1
-    <ul>
-        <li>v1: wobble decay factor</li>
-        <li>v2: number of wobbles</li>
-    </ul>
-</li>
-</ul>
-
-<p class="figure">Figure: Position mappings</p>
-<p align="center"><img alt="Position mappings" src="../../images/pos_map_all.png" /></p>
-
-<h3>Using Position Mappings</h3>
-<p>When using the animation callback function, the animator passes a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running.</p>
-
-<p>If you want to create a non-linear animation, map the position value to one of several curves and mappings:</p>
-<pre class="prettyprint">ecore_animator_pos_map(double pos, Ecore_Pos_Map map, double v1, double v2)</pre>
-<ul>
-<li>The first argument is the current position value, which ranges from 0.0 to 1.0.</li>
-<li>The second argument is the position mapping you want to apply.</li>
-<li>The third argument is the first parameter (v1) to pass to the position mapping.</li>
-<li>The fourth argument is the second parameter (v2) to pass to the position mapping.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The v1 and v2 arguments are specific to the chosen position mapping. For example, if you are using <span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>, v1 represents the bouncing level and v2 the number of bounces.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example performs a transition that bounces 7 times, diminishing by a factor of 1.8 over 5 seconds:</p>
-
-<pre class="prettyprint">static Eina_Bool
-_my_animation_callback(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
-&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
-&nbsp;&nbsp;&nbsp;double frame = pos; // Actual position variation
-&nbsp;&nbsp;&nbsp;// Get frame relative position depending on desired effect
-&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
-&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame); // Move the Evas object according to desired effect
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-ecore_animator_timeline_add(5, _my_animation_callback, my_evas_object);</pre>
-
-<h3>Creating an Infinite Animation</h3>
-
-<p>If you want the animation to run for an unspecified amount of time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function. This function works the same way as the <span style="font-family: Courier New,Courier,monospace;">ecore_animation_timeline_add()</span> function, except its interval is based on frame rate. Using frame rate as the basis benefits performance, especially if you define multiple animations, since you may want to have a different timer for each callback function.</p>
-
-<pre class="prettyprint">
-ecore_animator_add(Ecore_Task_Cb func, const void *data)
-</pre>
-
-<ul>
-<li>The first argument is the callback function that performs the animation.</li>
-<li>The second argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The function returns a pointer to an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object, which you can use to adjust the animation.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example creates a rectangle sliding from left to right and back again. When the rectangle hits one edge of the screen, it changes direction.</p>
-
-<pre class="prettyprint">static Eina_Bool
-_slide_back_and_forth(void *data)
-{
-&nbsp;&nbsp;&nbsp;typedef enum {LEFT, RIGHT} direction_t; // Direction datatype
-&nbsp;&nbsp;&nbsp;static int x = 0; // Initial position
-&nbsp;&nbsp;&nbsp;static direction_t direction = RIGHT; // Initial direction
-&nbsp;&nbsp;&nbsp;if (x &gt;= 250)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = LEFT; // Change direction
-&nbsp;&nbsp;&nbsp;else if (x &lt;= 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = RIGHT; // Change direction
-&nbsp;&nbsp;&nbsp;if (direction == RIGHT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, ++x, 350); // Slide to right
-&nbsp;&nbsp;&nbsp;else if (direction == LEFT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, --x, 350); // Slide to left
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;// Declarations
-
-&nbsp;&nbsp;&nbsp;// Ecore Evas init
-
-&nbsp;&nbsp;&nbsp;// Draw Evas objects
-
-&nbsp;&nbsp;&nbsp;// Animations go here
-&nbsp;&nbsp;&nbsp;anim = ecore_animator_add(_slide_back_and_forth, rectangle);
-&nbsp;&nbsp;&nbsp;// Ecore main loop
-
-&nbsp;&nbsp;&nbsp;// Free memory
-}</pre>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">To use this code, you have to merge it with the Ecore transition example above.</td>
-</tr>
-</tbody>
-</table>
-
-<h3>Chaining Animations</h3>
-
-<p>You may sometimes want to delay animating an object. This can be useful if, for example, you want to start an animation only after another one has finished.</p>
-
-<p>You can simply set a delay to the second animation equal to the duration of the first animation:</p>
-
-<pre class="prettyprint">
-static int runtime = 5;
-static int delay = runtime;
-static Eina_Bool
-_start_fold_animation(void *data)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _fold_animation, data);
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-static Eina_Bool
-_start_unfold_animation(void *data)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _unfold_animation, data);
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-_start_fold_animation(my_evas_object);
-ecore_timer_add(delay, _start_unfold_animation, my_evas_object);
-</pre>
-
-<h3>Pausing and Resuming Animations</h3>
-
-<p>You can pause and resume Ecore animations. To pause a running animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function:</p>
-
-<pre class="prettyprint">ecore_animator_freeze(Ecore_Animator *animator)</pre>
-
-<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to pause.</p>
-
-<p>To resume the paused animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function:</p>
-
-<pre class="prettyprint">ecore_animation_thaw(Ecore_Animator *animator)</pre>
-
-<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to resume.</p>
-
-<p>The following example pauses a transition after 5 seconds and resumes it after 5 more seconds:</p>
-
-<pre class="prettyprint">
-static Eina_Bool
-_freeze_animation(void *data)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_freeze(data);
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-static Eina_Bool
-_thaw_animation(void *data)
-{
-&nbsp;&nbsp;&nbsp;ecore_animator_thaw(data);
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-ecore_timer_add(5, _freeze_animation, animator);
-ecore_timer_add(10, _thaw_animation, animator);
-</pre>
-
-<h3>Freeing Up Memory</h3>
-
-<p>When you create an animation that does not have a timeout, you will have to manually free up the memory allocated to the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. By comparison, if the animation has a timeout, Ecore implements the mechanisms to automatically delete the animator from the list of pointers: When your animation callback returns 0 or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>, the animator manager takes care of freeing up the allocated memory.</p>
-
-<p>To manually free up the memory, delete the pointer by using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function:</p>
-
-<pre class="prettyprint">ecore_animator_del(Ecore_Animator *animator)</pre>
-
-<p>The argument is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> whose memory allocation to free up.</p>
-
-<p>Regardless of the type of animation, it is good practice to always ensure that the allocated memory is freed up before the program exits:</p>
-
-<pre class="prettyprint">if (animator != NULL)
-&nbsp;&nbsp;&nbsp;ecore_animator_del(animator);</pre>
-
-<h3>Frametime</h3>
-<p>In most cases, you will want to use the default timer <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_TIMER</span>. This timer ticks every &quot;frametime&quot; seconds and allows you to perform transitions within a predefined timeline. The timer uses the system clock to tick over every Nth second, with the default being 1/30th of a second.</p>
-
-<p>To tweak performance, you can change the frametime value:</p>
-
-<pre class="prettyprint">ecore_animator_frametime_set(double frametime)</pre>
-
-<p>The argument is the new frametime value.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Too small a value can cause performance issues, whereas too high a value can cause your animation to seem jerky.</td>
-</tr>
-</tbody>
-</table>
-
-<p>If you want to get the current frametime value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</p>
-
-<h3>Custom Timer</h3>
-
-<p>You may want to specify a custom timer to match your animation to third-party events. For example, the filling speed of a progress bar will mainly depend on the time it takes for a task to complete and the velocity at which the remaining time estimation evolves. This kind of animation requires you to use a custom timer.</p>
-
-<p>To use a custom timer, first set <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_CUSTOM</span> as the timer source, and then drive the timer based on an input tick source (such as another application via IPC or a vertical blanking interrupt):</p>
-
-<pre class="prettyprint">ecore_animator_custom_source_tick_begin_callback_set(Ecore_Cb func, const void *data)</pre>
-
-<p>The first argument is the callback function to call on the tick start. The second argument is the data to pass to the callback function.</p>
-
-<pre class="prettyprint">ecore_animator_custom_source_tick_end_callback_set(Ecore_Cb func, const void *data)</pre>
-
-<p>The first argument is the callback function to call on the tick end. The second argument is the data to pass to the callback function to set the functions that will be called to start and stop the ticking source.</p>
-
-<p>Next, trigger a tick over one frame:</p>
-
-<pre class="prettyprint">ecore_animator_custom_tick(void)</pre>
-
-<p>The following example supposes a progress bar that will be refreshed every time some progress occurs:</p>
-
-<pre class="prettyprint">ecore_animator_source_set(ECORE_ANIMATOR_SOURCE_CUSTOM);
-void _on_progress_update()
-{
-&nbsp;&nbsp;&nbsp;// Called when some progress occurs
-&nbsp;&nbsp;&nbsp;ecore_animator_custom_tick(); // Tick (next frame in progress bar animation)
-}</pre>
-
-<p>Finally, to get the current animator source, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_source_get()</span> function.</p>
-  
-  
-  
-  <h2 id="edje_animation" name="edje_animation">Edje Animation</h2>
-
-<p>The Edje animations are based on a very simple principle: going from one state to another. If you want to animate something with Edje, you must define two states and move from the first state to the second.</p>
-
-<h3 id="Animating_Rectangle" name="Animating_Rectangle">Animating a Rectangle</h3>
-
-<p>This example shows how to animate a rectangle. It is positioned in the top left corner of the window and is moved to the bottom right corner in five seconds. To do that with Edje, define a <span style="font-family: Courier New,Courier,monospace;">part</span> called &quot;rectangle&quot; with the <span style="font-family: Courier New,Courier,monospace;">type RECT:</span> this part has two descriptions (or states). In the first state, the rectangle is in is the top left corner. In the second state, it is in is the bottom right corner. To create the transition, set this EDC code for Edje to switch the object from its current state to another.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.3 0.1;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.7 0.9;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The &quot;rectangle&quot; part has two descriptions that share the same name, but have a different &quot;version&quot;.</p>
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The program defines when and how to move from one state to another. A program is called upon reception of a signal from a source. Here the program is called when the signal load is received from any source.</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-}
-</pre>
-
-<p>An action is performed upon the signal reception. In this example, the state is changed.</p>
-
-<pre class="prettyprint">
-action: STATE_SET &quot;default&quot; 0.5;
-</pre>
-
-<p>The program has a target, here the &quot;rectangle&quot;.</p>
-
-<pre class="prettyprint">
-target: &quot;rectangle&quot;;
-</pre>
-
-<p>The program uses a transition to perform the action.</p>
-
-<pre class="prettyprint">
-transition: LINEAR 5;
-</pre>
-
-<p>This example produces a blue rectangle that moves from the upper left to the lower right corner with a linear transition in five seconds.</p>
-
-<h3 id="Actions" name="Actions">Actions</h3>
-
-<p>The Edje programs are not only for animations. There are different actions, for example <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> and <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>. You may also send signals with <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action changes the state of the &quot;target&quot;.</p>
-
-<p>In the following example, the state of the part named &quot;image&quot; changes to &quot;default&quot; &quot;0.0&quot;.</p>
-
-<pre class="prettyprint">
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;animate&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;animate&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 3.0;
-&nbsp;&nbsp;&nbsp;target: &quot;image&quot;;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span> stops the program specified by &quot;target&quot;.</p>
-
-<pre class="prettyprint">
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;animate_stop&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;animate_stop&quot;;
-&nbsp;&nbsp;&nbsp;action: ACTION_STOP;
-&nbsp;&nbsp;&nbsp;target: &quot;animate_loop&quot;;
-}
-</pre>
-
-<p>The previous example stops the program defined as &quot;target&quot; named <span style="font-family: Courier New,Courier,monospace;">animate_loop</span>. This program runs on the <span style="font-family: Courier New,Courier,monospace;">animate_stop</span> signal.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span> emits a signal that is used to communicate with the application directly from the theme.</p>
-
-<p>The following example emits a signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when it receives the signal <span style="font-family: Courier New,Courier,monospace;">mouse,down,*</span> from the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part. In other words, it sends the signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when the mouse is pressed in the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part.</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;video_move_start&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,down,*&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;video_mover&quot;;
-&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;frame_move&quot; &quot;start&quot;;
-}
-</pre>
-
-<h3 id="Transitions" name="Transitions">Transitions</h3>
-
-<p>The transitions available are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span>: makes a linear transition and takes the duration in seconds as the parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span>: makes a sinusoidal transition and takes the duration in seconds as the parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span>: makes an accelerated transition and takes the duration in seconds as the parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span>: makes a decelerated transition and takes the duration in seconds as the parameter</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span>: makes an accelerated transition and takes the duration and the factor as the parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span>: makes a decelerated transition and takes the duration and the factor as the parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span>: makes a sinusoidal transition and takes the duration and the factor as the parameters</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span>: takes 3 parameters:
-       <ul>
-               <li>the duration</li>
-        <li>the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, and so on)</li>
-        <li>an integer factor that defines how much the value swings outside the gradient to come back to the final resting spot at the end. 0.0 for the third parameter is equivalent to linear interpolation. Note that DIVIS may exceed 1.0.</li>
-       </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>: makes a bounce transition and takes 3 parameters:
-       <ul>
-        <li>the duration</li>
-        <li>how much the bounce decays, with 0.0 giving linear decay per bounce, and higher values giving more decay</li>
-        <li>the number of bounces (rounded down to the nearest integer value)</li>
-       </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SPRING</span>: makes a spring transition and takes 3 parameters:
-       <ul>
-        <li>the duration</li>
-        <li>the decay, with the level exceeding 1.0 on the outer swings</li>
-        <li>the number of spring swings</li>
-       </ul>
-</li>
-</ul>
-
-<p>There are graphical representations of these effects in the <span style="font-family: Courier New,Courier,monospace;">Ecore_Evas</span> section above.</p>
-
-<h3 id="Chaining" name="Chaining">Chaining Edje Programs</h3>
-
-<p>To define a couple of Edje programs and chain them, we can, for example, create a program to make the rectangle return to its initial state with another transition (such as <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>).</p>
-
-<p>Use the statement <span style="font-family: Courier New,Courier,monospace;">after</span> in the first <span style="font-family: Courier New,Courier,monospace;">program</span>. <span style="font-family: Courier New,Courier,monospace;">after</span> takes the name of the transition to run when the program is done.</p>
-
-<pre class="prettyprint">
-after: &quot;animation,state0&quot;;
-</pre>
-
-<p>This is how to add the bounce animation. To return the blue rectangle to its initial position with a <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> transition: it bounces with a factor of 1.8, six times. This program is only to be used at the end of the first one, so it does not have any signal statement.</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: BOUNCE 5 1.8 6;
-}
-</pre>
-
-<h3 id="Playing_Signals" name="Playing_Signals">Playing on Signals</h3>
-
-<p>The programs start when they receive a signal from a source. Edje handles many kind of signals, including mouse events.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">To show the signals, use <span style="font-family: Courier New,Courier,monospace;">edje_player -p myfile.edj</span>.</td>
-</tr>
-</tbody>
-</table> 
-
-<p>For example, in another transition the rectangle is left clicked. The corresponding signal name is <span style="font-family: Courier New,Courier,monospace;">mouse,clicked,1</span>.</p>
-
-<p>For this transition, define a new state. This state changes the color and the position of the rectangle.</p>
-
-<pre class="prettyprint">
-// To be placed in the &quot;part&quot; definition
-description 
-{ 
-&nbsp;&nbsp;&nbsp;state: &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
-&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
-&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-}
-</pre>
-
-<p>The program is as follows:</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 2;
-}
-</pre>
-
-<p>This starts when the rectangle is left clicked.</p>
-
-<p>If you want to send a signal from your application when you use signals to start transitions, create a program waiting for your own special signal. For example:</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-}
-</pre>
-
-<p>This program changes the state of the target named <span style="font-family: Courier New,Courier,monospace;">animation,menu_side,hide</span> to <span style="font-family: Courier New,Courier,monospace;">&quot;default&quot; 1.0</span>. It waits for the <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> signal emitted by a source called <span style="font-family: Courier New,Courier,monospace;">MenuButton</span>.</p>
-
-<pre class="prettyprint">
-edje_object_signal_emit(layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
-</pre>
-
-<p>This statement sends a signal named <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> with a source named <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> to the object called <span style="font-family: Courier New,Courier,monospace;">layout</span>.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> function emits a signal on an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> part of the application.</p>
-
-<pre class="prettyprint">
-edje_object_signal_emit(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *emission,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *source)
-</pre>
-
-<ul>
-<li>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>, which emits the signal (<span style="font-family: Courier New,Courier,monospace;">layout</span> in the example).</li>
-<li>The second parameter is the <span style="font-family: Courier New,Courier,monospace;">emission</span> string (the name of the signal <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> in the example).</li>
-<li>The third parameter is the <span style="font-family: Courier New,Courier,monospace;">source</span> of the signal (the name of the source, <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> in the example).</li>
-</ul>
-
-<p>If you use the Elementary in the application, you can use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span>. It functions exactly the same way as <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> and takes the same parameters.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">To find a complete example, use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span> in the <a href="../../../../org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm">Menu Tutorial</a>.</td>
-</tr>
-</tbody>
-</table> 
-
-<h3 id="Rotate" name="Rotate">Rotate with Edje</h3>
-
-<p>The Edje library allows you to rotate objects, using the <span style="font-family: Courier New,Courier,monospace;">map</span> statement. For example, if you want to rotate the blue rectangle on a right click, you must define a new rotate state. To enable the <span style="font-family: Courier New,Courier,monospace;">map</span> on you object you must add a <span style="font-family: Courier New,Courier,monospace;">map</span> part to your default state.</p>
-
-<pre class="prettyprint">
-map 
-{
-&nbsp;&nbsp;&nbsp;on: 1;
-&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;rotation.x: 0;
-&nbsp;&nbsp;&nbsp;rotation.y: 0;
-&nbsp;&nbsp;&nbsp;rotation.z: 0;
-}
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">on</span>: 1; enables the map on the object</li>
-<li><span style="font-family: Courier New,Courier,monospace;">perspective_on</span>: 1, enables the perspective when rotating, even without a perspective point object</li>
-<li><span style="font-family: Courier New,Courier,monospace;">smooth</span>: 1; enables a smooth map rendering</li>
-<li>The rotation statements define the default rotation of the object on x, y, and z axes.</li>
-</ul>
-
-<p>To add a new rotate state with a rotation around any axis, do the following.</p>
-
-<pre class="prettyprint">
-description 
-{ 
-&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
-}
-</pre>
-
-<p>This rotate state inherits all the default state properties, but changes the value of <span style="font-family: Courier New,Courier,monospace;">map.rotation.z</span> from 0&deg; to 120&deg;.</p>
-
-<p>To set a program to run the rotate state, do the following.</p>
-
-<pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: LIN 5;
-}
-</pre>
-
-<p>This program runs on a right click on the rectangle object.</p>
-
-<p>The complete code of this example is as follows.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.3 0.1;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.7 0.9;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,state0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: BOUNCE 2 1.8 26;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SIN 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LIN 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<h2 id="elm_transit" name="elm_transit">Elementary Animations</h2>
-
-<p>Elementary transitions (<span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>) allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
-
-<p>To use Elementary transitions, you must create an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object and define the desired transitions using the methods of this object. After the transitions are registered, they will be automatically managed: their callback functions will be called for the set duration, and they will be deleted upon completion.</p>
-
-<p>Use Elementary transitions only when Edje animations are not sufficient. Edje animations are better at handling transitions, have more flexibility, and can be manipulated inside themes. The only drawback is that Edje animations have their own definition language. If you want to code with the C language, use Elementary transitions.</p>
-
-<h3 id="Getting_Started" name="Getting_Started">Getting Started</h3>
-<p>The first thing you need to do when creating an transition with <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to build your transit object using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_add()</span> function:</p>
-
-<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();</pre>
-
-<p>You now have an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that will allow you to perform transitions on one or more objects. The transit object holds the information about the target objects and the transition effects that will be used. The transit object also contains information about animation duration, number of repetitions, auto-reverse, and so on. The transit object starts playing as soon as the application enters the main loop.</p>
-
-<h3 id="Adding_Objects" name="Adding_Objects">Adding Objects to an Animation</h3>
-
-<p>You can add your Evas objects to your transition using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_object_add()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_object_add(Elm_Transit *transit, Evas_Object *obj)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to animate.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note"><p>The Evas object can be a low-level component, such as a rectangle, but also a UI component, such as a button, image, or calendar.</p>
-<p>If you want to animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.</p></td>
-</tr>
-</tbody>
-</table>
-
-<p>If you want to know which objects are currently in your transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_objects_get()</span> function. You will get a list of all the objects that are subject to the transition.</p>
-
-<p>At any time, you can remove objects from the transition:</p>
-
-<pre class="prettyprint">elm_transit_object_remove(Elm_Transit *transit, Evas_Object *obj)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to remove from the transition.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">After you have added at least one Evas object to your transition, if the list of objects gets emptied somehow, be it because the transition has been terminated or all objects have been deleted, the transition will be automatically deleted. Otherwise, you will have to delete the transition by yourself using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del()</span> function. If you delete the transit while the transition is running, the transition will stop.</td>
-</tr>
-</tbody>
-</table>
-
-<h4>Adding Images to an Animation</h4>
-
-<p>If you do not want to manage UI components for animating images, <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for directly manipulating images:</p>
-
-<pre class="prettyprint">
-elm_transit_effect_image_animation_add(Elm_Transit *transit, Eina_List *images)
-</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is a list of the image paths.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">This list and its contents will be deleted after the effect ends by the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_context_free()</span> function.</td>
-</tr>
-</tbody>
-</table>
-
-<p>You can now define your image transitions exactly the same way as with any Evas object.</p>
-
-<p>The following example shows how to use <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> with images:</p>
-
-<pre class="prettyprint">char buf[PATH_MAX];
-Eina_List *images = NULL;
-Elm_Transit *transit = elm_transit_add();
-snprintf(buf, sizeof(buf), &quot;%s/images/btn_default.png&quot;, PACKAGE_DATA_DIR);
-images = eina_list_append(images, eina_stringshare_add(buf));
-snprintf(buf, sizeof(buf), &quot;%s/images/btn_hover.png&quot;, PACKAGE_DATA_DIR);
-images = eina_list_append(images, eina_stringshare_add(buf));
-elm_transit_effect_image_animation_add(transit, images);</pre>
-
-<h3 id="Animation_Duration" name="Animation_Duration">Animation Duration</h3>
-
-<p>With <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, setting the transition duration is mandatory. To set the duration, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_set()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_duration_set(Elm_Transit *transit, double duration)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the duration in seconds.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The purpose of <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to abstract the low-level details of object interpolation, so you cannot create an infinite transition by specifying the duration. However, you can make your transition last forever using the repeat function.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example shows how to make a complete revolution of the target Evas object in 2 seconds:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_rotation_add(transit, 0.0, 360);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<p>To get the duration of the transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_get()</span> function.</p>
-
-<h3 id="Acceleration_Mode" name="Acceleration_Mode">Animation Acceleration Mode ("Tween Mode")</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> supports a number of built-in interpolation methods. By default, all interpolations are linear. If you want to change the animation&#39;s dynamics, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_set()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_tween_mode_set(Elm_Transit *transit, Elm_Transit_Tween_Mode tween_mode)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the tween mode of the transition, which can be one of the following:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_LINEAR</span>: The default mode.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_SINUSOIDAL</span>: The transition starts with acceleration and ends with deceleration.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_DECELERATE</span>: The transition decelerates over time.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_ACCELERATE</span>: The transition accelerates over time.</li>
-</ul>
-
-<p>To get the current tween mode, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_get()</span> function.</p>
-
-<h3 id="Animation_Repeat" name="Animation_Repeat">Animation Repeat</h3>
-
-<p>To set a transition to repeat, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_set()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_repeat_times_set(Elm_Transit *transit, int repeat)</pre>
-
-<p>The function takes the following arguments:</p>
-<ul>
-<li>The transition you want to repeat.</li>
-<li>The number of times the transition repeats.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">If the <span style="font-family: Courier New,Courier,monospace;">repeat</span> argument is set to 0, the transition will not loop at all. If set to 1, the transition will run twice. If set to a negative value, the transition will repeat forever.</td>
-</tr>
-</tbody>
-</table>
-
-<p>To get the repeat value, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_get()</span> function. The default value is 0.</p>
-
-<p>The following example shows how to make an Evas object spin for 3 complete revolutions in 6 seconds:</p>
-
-<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_rotation_add(transit, 0.0, 360);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_repeat_set(transit, 3.0);
-elm_transit_go(transit);</pre>
-
-<h3 id="Auto_Reverse" name="Auto_Reverse">Animation Auto-reverse</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for automatically reversing the transition once it finishes:</p>
-
-<pre class="prettyprint">elm_transit_auto_reverse_set(Elm_Transit *transit, Eina_Bool reverse)</pre>
-
-<p>The first argument is the transition you want to reverse. The second argument is the reverse state. If the reverse state is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, this function will perform the same transition backwards as soon as the first transition is complete.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">
-    <p>Reversing the transition doubles the duration of the transition. Moreover, if the transition is set to repeat, the transition will run back and forth until the repeat count is finished.</p>
-    <p>You can calculate the duration as follows if both auto-reverse and repeat are set: 2 * duration * repeat.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example shows how to make an object perform half a turn and then reverse the animation to its original position in 4 seconds:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_rotation_add(transit, 0.0, 360);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_auto_reverse_set(transit, EINA_TRUE);
-elm_transit_go(transit);
-</pre>
-
-<p>To determine whether the auto-reverse mode is enabled, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_auto_reverse_get()</span> function.</p>
-
-<h3 id="Transitions2" name="Transitions2">Transitions</h3>
-
-<p>We distinguish two main transition types:</p>
-<ul>
-<li>Transitions that are applied to the properties of objects, such as position, size, angle, and color.</li>
-<li>Transitions from one object to another, where the first object is hidden to let the second one appear.</li>
-</ul>
-<p>All transitions are based on the same principle: we set the starting and the ending values for the properties we want to animate, we then set the lifespan of the animation, and finally we inquire the preferred interpolation method (such as linear, acceleration, or bounce).</p>
-
-<p>You must declare the transitions after the parent window has been created, since the transition effects make use of the geometric properties of the parent window. If the parent window does not yet exist when calculating the interpolation, the interpolation may end up being based on wrong information.</p>
-
-<h3 id="Built-in_Transitions" name="Built-in_Transitions">Built-in Transitions</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides several built-in transition definitions that are useful for the most common cases, so you that will not have to code them from scratch.</p>
-
-<p>All these built-in effects are implemented as follows:</p>
-
-<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
-elm_transit_effect_add(transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_op,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_context_new(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_context_free);</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object that contains the target Evas objects and all the information needed to setup the transition.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_op</span>: The callback function that performs the transition (resizing interpolation in this example).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_new()</span>: The callback function that returns the context used in the transition for calculations. In this example, the context is the coordinates of the before and after objects.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_free</span>: The callback function that frees up the memory once the transition is complete.</li>
-</ul>
-
-<p>All the definitions above can be rewritten as follows:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_effect_translation_add(transit, from_x, from_y, to_x, to_y);
-</pre>
-
-<h4>Translation</h4>
-<p>To perform a translation on an Evas object, use the following method:</p>
-
-<pre class="prettyprint">
-elm_transit_effect_translation_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_dx,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_dy,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_dx,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_dy)
-</pre>
-
-<ul>
-<li>The first argument is the transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_dx</span>: The starting X coordinate (source).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_dy</span>: The starting Y coordinate (source).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_dx</span>: The ending X coordinate (destination).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_dy</span>: The ending Y coordinate (destination).</li>
-</ul>
-
-<p>The following example shows how to slide an Evas object (a rectangle) on a 45-degree diagonal, from bottom-left to top-right, at a constant speed, and in 1 second:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, rectangle);
-elm_transit_effect_translation_add(transit, 0, 0, 280, 280);
-elm_transit_duration_set(transit, 1);
-elm_transit_go(transit);
-</pre>
-
-<h4>Color Transition</h4>
-
-<p>Color transitions allow you to dynamically change the color of Evas objects. The first argument is the transit object, while the other arguments will be used to define the color transition using RGB colors. There is also an alpha channel that controls the opacity of the color (the background of the object, not the object itself).</p>
-
-<pre class="prettyprint">
-elm_transit_effect_color_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int from_r,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int from_g,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int from_b,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int from_a,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int to_r,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int to_g,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int to_b,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int to_a)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_r</span>: The start value for &quot;Red&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_g</span>: The start value for &quot;Green&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_b</span>: The start value for &quot;Blue&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_a</span>: The start value for &quot;Alpha&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_r</span>: The end value for &quot;Red&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_g</span>: The end value for &quot;Green&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_b</span>: The end value for &quot;Blue&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_a</span>: The end value for &quot;Alpha&quot;.</li>
-</ul>
-
-<p>The following example shows how to transit a rectangle from red to blue in 3 seconds:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, rectangle);
-elm_transit_effect_color_add(transit, // Target object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255, 0, 0, 255, // From color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 0, 255, 255); // To color
-elm_transit_duration_set(transit, 3);
-elm_transit_go(transit);
-</pre>
-
-<h4>Rotation</h4>
-
-<pre class="prettyprint">elm_transit_effect_rotation_add(Elm_Transit *transit, float from_degree, float to_degree)</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_degree</span>: The start degree of rotation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_degree</span>: The end degree of rotation.</li>
-</ul>
-
-<p>This function can be used to perform a rotation on any Evas object. It works the same way as the other transit effects and takes two arguments for the starting and ending angles. Note that if you apply a rotation on multiple objects, they will individually mill around and not act as a group. If you want several objects to revolve around a common point, you must encapsulate the objects into a single parent object and apply the rotation to the parent object. The following example shows how to achieve this:</p>
-
-<pre class="prettyprint">
-// Parent container
-Evas_Object *parent = elm_box_add(my_window);
-evas_object_show(parent);
-elm_box_horizontal_set(parent, EINA_TRUE);
-elm_box_homogeneous_set(parent, EINA_TRUE);
-
-// Button 1
-Evas_Object *btn1 = elm_button_add(parent);
-elm_object_text_set(btn1, &quot;Btn1&quot;);
-elm_box_pack_start(parent, btn1);
-evas_object_show(btn1);
-
-// Button 2
-Evas_Object *btn2 = elm_button_add(parent);
-elm_object_text_set(btn2, &quot;Btn2&quot;);
-elm_box_pack_end(parent, btn2);
-evas_object_show(btn2);
-
-// Make the parent container do a 360 degrees spin
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, parent);
-elm_transit_effect_rotation_add(transit, 0.0, 360);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<h4>Wipe Effect</h4>
-
-<p>The wipe effect is designed to dynamically hide or show any element on the scene.</p>
-
-<pre class="prettyprint">
-elm_transit_effect_wipe_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Wipe_Type type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Wipe_Dir dir)
-</pre>
-
-<p>In addition to the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance passed as the first argument, the function takes the following arguments:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">type</span>: The wipe type <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Type</span> defines whether to show or hide the target elements. The value can be one of the following:
-    <ul>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_SHOW</span></li>
-    </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">dir</span>: The wipe direction <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Dir</span> defines in which direction the target will progressively appear or disappear. The value can be one of the following:
-    <ul>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_LEFT</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_UP</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_DOWN</span></li>
-    </ul>
-</li>
-</ul>
-
-<p>The following example shows how to make an object disappear progressively from left to right:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_wipe_add(transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_TRANSIT_EFFECT_TYPE_HIDE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<h4>Zoom Effect</h4>
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a zoom function.</p>
-
-<pre class="prettyprint">
-elm_transit_effect_zoom_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float from_rate,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float to_rate)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_rate</span>: The starting level of the zoom.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_rate</span>: The ending level of the zoom.</li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">from_rate</span> argument defines the scale of the target objects at the beginning of the animation. A value of 1 represents the initial scale of the objects.</p>
-
-<p>Setting the value of the <span style="font-family: Courier New,Courier,monospace;">to_rate</span> argument to 2 will double the size of the target objects (double the width and double the height). When using this effect, the width and height of a target object will remain proportional to one another. If you want to customize the zoom effect, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizing_add()</span> function.</p>
-
-<p>The following example shows how to implement a zoom-out transition. At the end of the 2-secondstransition, the animated object will be half its original size.</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_zoom_add(transit, 1, 0.5);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<h4>Resizing Effect</h4>
-
-<p>The resizing effect allows you to design an interpolation of the width and height attributes of one or more target elements.</p>
-
-<pre class="prettyprint">
-elm_transit_effect_resizing_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_w,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_h,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_w,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_h)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_w</span>: The starting width.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">from_h</span>: The starting height.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_w</span>: The ending width.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">to_h</span>: The ending height.</li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">from_w</span> and <span style="font-family: Courier New,Courier,monospace;">from_h</span> arguments define the size at the beginning of the animation. The <span style="font-family: Courier New,Courier,monospace;">to_w</span> and <span style="font-family: Courier New,Courier,monospace;">to_h</span> arguments define the size at the end.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">If you are planning to use this method to hide an Evas object by setting one of the length attributes to zero, consider using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_wipe_add()</span> function instead.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example shows how to make a rectangle exchange its width and height properties in a 2-second transition:</p>
-
-<pre class="prettyprint">
-Evas_Coord w, h;
-evas_object_geometry_get(my_evas_object, NULL, NULL, &amp;w, &amp;h);
-
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, my_evas_object);
-elm_transit_effect_resize_add(transit, // Transition object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w, h, // Original sizing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h, w); // Target sizing
-elm_transit_duration_set(transit, 2.0);
-elm_transit_go(transit);
-</pre>
-
-<h4>Flip Effect</h4>
-<p>This transition combines the target Evas objects in pairs, so that one object will show up while the other one disappears. This association relates the even objects in the transit list of objects with the odd ones. The even objects are shown at the beginning of the animation, and the odd objects shown when the transition is complete. In other words, the effect applies to each pair of objects in the order in which they are listed in the transit list of objects.</p>
-
-<p>The flip effect itself is a pseudo-3D effect where the first object in the pair is the front object and the second one is the back object. When the transition launches, the front object rotates around a preferred axis in order to let the back object take its place.</p>
-
-<pre class="prettyprint">
-elm_transit_effect_flip_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Flip_Axis axis,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool cw)
-</pre>
-
-<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
-</ul>
-
-<p>The third argument is the direction of the rotation:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
-</ul>
-
-<p>The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary UI components for demonstration purposes. You can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function if you do not want to bother creating UI components.</p>
-
-<pre class="prettyprint">
-// Coin Heads
-Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
-elm_win_resize_object_add(ad-&gt;win, coin_heads);
-
-// Coin Tails
-Evas_Object *coin_tails = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_tails, IMG_DIR&quot;/coin_tails.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
-elm_win_resize_object_add(ad-&gt;win, coin_tails);
-
-// Transition definition
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, coin_heads);
-elm_transit_object_add(transit, coin_tails);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_auto_reverse_set(transit, EINA_TRUE);
-elm_transit_repeat_times_set(transit, -1);
-elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
-elm_transit_go(transit);
-</pre>
-
-<p class="figure">Figure: Coin flip</p>
-<p align="center"><img alt="Coin flip" src="../../images/coin_flip_effect.png" /></p>
-
-<h4>Resizable Flip Effect</h4>
-<p>In the flip example above, we used two objects that have the same size. However, you may sometimes want to flip from one object to another object with different size attributes. The most common example would be using buttons with dimensions that depend on their contents (such as labels). If you decide to use the classic <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_flip_add()</span> function, the size of the object will change at the moment one object becomes completely hidden and the other one begins to show up. If you wish to interpolate the size attributes as well, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizable_flip_add()</span> function:</p>
-
-<pre class="prettyprint">
-elm_transit_effect_resizable_flip_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Flip_Axis axis,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool cw)
-</pre>
-
-<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
-</ul>
-
-<p>The third argument is the direction of the rotation:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
-</ul>
-
-<p>This function works the exact same way as the standard flip effect function.</p>
-
-<h4>Fade Effect</h4>
-
-<p>This effect is used to transition from one Evas object to another one using a fading effect: the first object will slowly disappear to let the second object take its place.</p>
-
-<pre class="prettyprint">elm_transit_effect_fade_add(Elm_Transit *transit)</pre>
-
-<p>This effect is applied to each pair of objects in the order in which they are listed in the transit list of objects. The first object in the pair will be the before object and the second one will be the after object.</p>
-
-<p>Building on the coin flip example, the following example shows how to fade out one face of the coin while fading in the other face:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, coin_heads);
-elm_transit_object_add(transit, coin_tails);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_effect_fade_add(transit);
-elm_transit_go(transit);
-</pre>
-
-<p>If you simply want to hide an object with a fade transition, consider using a transparent after object.</p>
-
-<h4>Blend Effect</h4>
-
-<p>Another transition involving at least two Evas objects is the blend effect. This transition makes the before object blurry before the after object appears.</p>
-
-<pre class="prettyprint">elm_transit_effect_blend_add(Elm_Transit *transit)</pre>
-
-<p>The argument is the transition target of the blend effect.</p>
-
-<p>Building on the coin flip example, the following example shows how to blur out one face of the coin while blurring in the other face:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, coin_heads);
-elm_transit_object_add(transit, coin_tails);
-elm_transit_duration_set(transit, 2.0);
-elm_transit_effect_blend_add(transit);
-elm_transit_go(transit);
-</pre>
-
-<p>If you simply want to hide an object with a blur transition, consider using a transparent after object.</p>
-
-<h3 id="Combine_Transitions" name="Combine_Transitions">Combining Transitions</h3>
-
-<p>To use multiple transitions at the same time on the same objects, simply declare the transitions one after the other.</p>
-
-<p>Building on the coin flip example, the following example shows how to roll the coin on the ground using a rotation and a translation effect:</p>
-
-<pre class="prettyprint">
-Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
-evas_object_resize(coin_heads, 100, 100);
-evas_object_show(coin_heads);
-
-Elm_Transit *transit = elm_transit_add();
-elm_transit_object_add(transit, coin_heads);
-elm_transit_duration_set(transit, 5.0);
-elm_transit_effect_translation_add(transit, 0, 0, 3.1415 * 2 * 100, 0);
-elm_transit_effect_rotation_add(transit, 0, 360);
-elm_transit_go(transit);
-</pre>
-
-<h3 id="Animation_Chain" name="Animation_Chain">Animation Chain</h3>
-
-<p>Now that we have listed all the effects that can be implemented using <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, we will see how to chain transitions into sequences. To create complex, chained animations without worrying about synchronization between the transitions, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_add()</span> function. This function takes as arguments two <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> objects and will automatically take care of the chaining for you: the second transition will start as soon as the first transition is finished.</p>
-
-<p>The following example shows how to move a datetime component on a square trajectory:</p>
-
-<pre class="prettyprint">
-Evas_Object *dt = elm_datetime_add(ad-&gt;win);
-evas_object_resize(dt, 350, 50);
-evas_object_show(dt);
-
-// The first transition
-Elm_Transit *t1 = elm_transit_add();
-elm_transit_object_add(t1, dt);
-elm_transit_duration_set(t1, 2);
-elm_transit_effect_translation_add(t1, 0, 0, 100, 0);
-
-// The second transition
-Elm_Transit *t2 = elm_transit_add();
-elm_transit_object_add(t2, dt);
-elm_transit_duration_set(t2, 2);
-elm_transit_effect_translation_add(t2, 100, 0, 100, 100);
-
-// The third transition
-Elm_Transit *t3 = elm_transit_add();
-elm_transit_object_add(t3, dt);
-elm_transit_duration_set(t3, 2);
-elm_transit_effect_translation_add(t3, 100, 100, 0, 100);
-
-// The fourth transition
-Elm_Transit *t4 = elm_transit_add();
-elm_transit_object_add(t4, dt);
-elm_transit_duration_set(t4, 2);
-elm_transit_effect_translation_add(t4, 0, 100, 0, 0);
-
-// Chaining the transitions
-elm_transit_chain_transit_add(t1, t2);
-elm_transit_chain_transit_add(t2, t3);
-elm_transit_chain_transit_add(t3, t4);
-
-// Starting the transitions
-elm_transit_go(t1);
-</pre>
-
-<p>Note that we cannot use transition chaining to make a loop animation, since the transit object is automatically destroyed as soon as the transition completes. Therefore, you cannot do something like this:</p>
-
-<pre class="prettyprint">elm_transit_chain_transit_add(t4, t1);</pre>
-
-<p>To create a looped animation chain, you have to use low-level components provided by the Ecore and Evas transition libraries, or you can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del_cb_set()</span> function to define a callback function for when a transition gets deleted. This way, you could recreate your objects and reiterate the transition chain as soon as the last transition ends.</p>
-
-<pre class="prettyprint">
-elm_transit_del_cb_set(Elm_Transit *transit, Elm_Transit_Del_Cb cb, void *data)
-</pre>
-
-<p>The first argument is the transition object. The second argument is the callback function to run on transition delete. The third argument is the data to pass to the callback function.</p>
-
-<p>You can severe the chain relationship between two transits by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_del()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_chain_transit_del(Elm_Transit *transit, Elm_Transit *chain_transit)</pre>
-
-<p>The first argument is the first transition in the chain. The second argument is the second transition in the chain.</p>
-
-<p>To get the current chain transit list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transits_get()</span> function.</p>
-
-<h3 id="Animation_Timeline" name="Animation_Timeline">Animation Timeline</h3>
-
-<p>After you have defined all the properties that define your transition, start the transition with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_go()</span> function:</p>
-
-<pre class="prettyprint">elm_transit_go(Elm_Transit *transit)</pre>
-
-<p>You can maintain full control over the execution process even after the transition has started. You can pause the transition by setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>:</p>
-
-<pre class="prettyprint">elm_transit_paused_set(Elm_Transit *transit, Eina_Bool paused)</pre>
-
-<p>You can resume the transition by using the same method but setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>. If you want to know whether the transition is currently paused, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_paused_get()</span> function.</p>
-
-<p>You can remain informed about the present transition flow and get the current frame by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_progress_value_get()</span> function. This function will return the timeline position of the animation, ranging between 0.0 (start) and 1.0 (end).</p>
-
-<h3 id="Custom_Transition" name="Custom_Transition">Custom Transition</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a standard function for defining any effect of your choosing that will be applied to some context data:</p>
-
-<pre class="prettyprint">
-elm_transit_effect_add(Elm_Transit *transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Transition_Cb transition_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect *effect,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_End_Cb end_cb)
-</pre>
-
-<p>The first argument is the transition target of the new effect. The second argument is the transition callback function. The third argument is the new effect. The fourth argument is the callback function to call at the end of the effect.</p>
-
-<p>As described earlier in this programming guide, this function embraces three callbacks that will allow you to define every aspects of your transition from its creation to its deletion. The following is an example of how to build a custom resizing animation.</p>
-
-<p>First, we define a structure capable of holding the context information about resizing an Evas object:</p>
-
-<pre class="prettyprint">
-typedef struct
-{
-&nbsp;&nbsp;&nbsp;struct _size
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;from, to;
-}
-Custom_Effect;
-</pre>
-
-<p>We can now implement our custom resizing callback function. This function takes the following arguments:</p>
-
-<ul>
-<li>The context data that holds the custom properties of our transition, which are used as parameters to calculate the interpolation.</li>
-<li>The transit object that contains the list of our Evas objects to animate and all the information about duration, auto-reverse, looping, and so on.</li>
-<li>The progress (position along the animation timeline) that ranges from 0.0 to 1.0 and allows us to calculate the desired interpolation for each frame.</li>
-</ul>
-
-<pre class="prettyprint">
-static void
-_custom_op(void *data, Elm_Transit *transit, double progress)
-{
-&nbsp;&nbsp;&nbsp;if (!data) return;
-&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
-&nbsp;&nbsp;&nbsp;Evas_Object *obj;
-&nbsp;&nbsp;&nbsp;const Eina_List *elist;
-&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect = data;
-&nbsp;&nbsp;&nbsp;const Eina_List *objs = elm_transit_objects_get(transit);
-&nbsp;&nbsp;&nbsp;if (progress &lt; 0.5)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + (custom_effect-&gt;to.h * progress * 2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + custom_effect-&gt;to.h;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w + (custom_effect-&gt;to.w * (progress - 0.5) * 2);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(objs, elist, obj)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(obj, w, h);
-}
-</pre>
-
-<p>The callback function above resizes our Evas objects in two steps. During the first half of the transition, only the height changes, while the width remains the same. During the second half, it is the other way around until we get to the desired size.</p>
-
-<p>You must then define the context used by your animation:</p>
-
-<pre class="prettyprint">
-static void*
-_custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w, Evas_Coord to_h)
-{
-&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect;
-
-&nbsp;&nbsp;&nbsp;custom_effect = calloc(1, sizeof(Custom_Effect));
-&nbsp;&nbsp;&nbsp;if (!custom_effect) return NULL;
-
-&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.w = from_w;
-&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.h = from_h;
-&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.w = to_w - from_w;
-&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.h = to_h - from_h;
-
-&nbsp;&nbsp;&nbsp;return custom_effect;
-}
-</pre>
-
-<p>You must define the function that will take care of deleting all the context objects used by your custom transition and free up the allocated memory:</p>
-
-<pre class="prettyprint">
-static void
-_custom_context_free(void *data, Elm_Transit *transit __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;free(data);
-}
-</pre>
-
-<p>Finally, apply your custom transition to your <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object:</p>
-
-<pre class="prettyprint">
-Elm_Transit *transit = elm_transit_add();
-elm_transit_effect_add(transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_op,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_new(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_free);
-</pre>
-
-<p>If you want to delete an effect from your effects list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_del()</span> function.</p>
-  
-  
-  
-
-               <h2 id="evas_map_animation" name="evas_map_animation">Evas Map Effects</h2>
-
-<p>Evas Map animations allow you to apply transformations to all types of objects by way of UV mapping.</p>
-
-<p>In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p>
-
-<p>Evas provides both raw and easy-to-use functions for UV mapping. The raw functions allow you to create UV maps outside Evas and import them into your application, for example by loading them from an external file. The easy-to-use functions allow you to create UV maps directly in Evas by calculating the map points based on high-level parameters, such as rotation angle and ambient light.</p>
-
-<h3 id="Map_Points" name="Map_Points">Map Points</h3>
-
-<p>A map consists of a set of points. (Currently, only four points are supported.) Each point contains X and Y canvas coordinates that can be used to alter the geometry of the mapped object, and a Z coordinate that indicates the depth of the point. The Z coordinate does not normally affect the map, but several utility functions use it to calculate the right position of the point given the other parameters.</p>
-
-<p>First, create an <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object using the <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function. This function creates the specified number of map points (currently only up to four points). Each point is empty and ready to be modified with <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> functions.</p>
-
-<pre class="prettyprint">Evas_Map *m = evas_map_new(4);</pre>
-
-<p>If you want to get the size (number of points) of an existing map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_count_get()</span> function.</p>
-
-<p>To set the coordinates for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> function:</p>
-
-<pre class="prettyprint">evas_map_point_coord_set(Evas_Map *m, int idx, Evas_Coord x, Evas_Coord y, Evas_Coord z)</pre>
-
-<p>The following example shows a common way to define a map that matches the geometry of a rectangle (a square in this case):</p>
-
-<pre class="prettyprint">
-evas_map_point_coord_set(m, 0, 100, 100, 0);
-evas_map_point_coord_set(m, 1, 300, 100, 0);
-evas_map_point_coord_set(m, 2, 300, 300, 0);
-evas_map_point_coord_set(m, 3, 100, 300, 0);
-</pre>
-
-<p class="figure">Figure: Map</p>
-<p align="center"><img alt="Map" src="../../images/evas_map_1.png" /></p>
-
-<p>The following examples all produce the same result as the above example, but with simpler code:</p>
-
-<ul>
-    <li>
-        <p>To create a rectangle map using the starting X and Y coordinates combined with width and height, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_geometry()</span> function:</p>
-        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(Evas_Map *m, Evas_Coord x, Evas_Coord y, Evas_Coord w, Evas_Coord h, Evas_Coord z)</pre>
-        <p>The following example creates the same map as above:</p>
-        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(m, 100, 100, 200, 200, 0);</pre>
-    </li>
-    <li>
-        <p>To create a map based on the geometry of a given object, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object()</span> or <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object_full()</span> function. The former sets the Z coordinate of all points to 0, whereas the latter allows you to define the same custom Z coordinate for all points:</p>
-        <pre class="prettyprint">evas_map_util_points_populate_from_object(Evas_Map *m, const Evas_Object *obj)</pre>
-        <pre class="prettyprint">evas_map_util_points_populate_from_object_full(Evas_Map *m, const Evas_Object *obj, Evas_Coord z)</pre>
-        <p>The following example creates the same map as above:</p>
-        <pre class="prettyprint">
-Evas_Object *o;
-evas_object_move(o, 100, 100);
-evas_object_resize(o, 200, 200);
-evas_map_util_points_populate_from_object(m, o);
-// OR
-evas_map_util_points_populate_from_object_full(m, o, 0);</pre>
-    </li>
-</ul>
-
-<p>You can apply several effects to an object by simply setting each point of the map to the appropriate coordinates. The following example shows how to create a simulated perspective:</p>
-
-<p class="figure">Figure: Simulated perspective</p>
-<p align="center"><img alt="Simulated perspective" src="../../images/evas_map_2.png" /></p>
-
-<pre class="prettyprint">
-evas_map_point_coord_set(m, 0, 100, 100, 0);
-evas_map_point_coord_set(m, 1, 250, 120, 0);
-evas_map_point_coord_set(m, 2, 250, 280, 0);
-evas_map_point_coord_set(m, 0, 100, 300, 0);
-</pre>
-
-<p>In the above example, the Z coordinate is unused: when setting points by hand, the Z coordinate is irrelevant.</p>
-
-<p>If you want to get the actual coordinates of a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_get()</span> function:</p>
-
-<pre class="prettyprint">evas_map_point_coord_get(const Evas_Map *m, int idx, Evas_Coord *x, Evas_Coord *y, Evas_Coord *z)</pre>
-
-<p>After you have defined the map points, apply them to your map for transformation:</p>
-
-<pre class="prettyprint">
-evas_object_map_set(o, m);
-evas_object_map_enable_set(o, EINA_TRUE);
-</pre>
-
-<p>Finally, after you are done with the map, release the memory allocated to it using the <span style="font-family: Courier New,Courier,monospace;">evas_map_free()</span> function:</p>
-
-<pre class="prettyprint">evas_map_free(m);</pre>
-
-<p>The utility functions described in the next section allow you to perform the above tasks with less coding work.</p>
-
-<h3 id="Utility_Functions" name="Utility_Functions">Utility Functions</h3>
-
-<p>Utility functions take an already configured map and allow you to easily modify it to produce specific effects. For example, to rotate an object around its center, you need the rotation angle and the coordinates of each corner of the object to perform the math required to get the new set of coordinates that needs to be set for the map. Evas provides a utility function that does the math for you:</p>
-
-<pre class="prettyprint">evas_map_util_rotate(Evas_Map *m, double degrees, Evas_Coord cx, Evas_Coord cy)</pre>
-
-<p>This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counter-clockwise.</p>
-
-<p>The following example shows how to rotate an object around its center point by 45 degrees clockwise. In the following figure, the center of rotation is the red dot.</p>
-
-<pre class="prettyprint">
-evas_object_geometry_get(o, &amp;x, &amp;y, &amp;w, &amp;h);
-m = evas_map_new(4);
-evas_map_util_points_populate_from_object(m, o);
-evas_map_util_rotate(m, 45, x + (w / 2), y + (h / 2));
-evas_object_map_set(o, m);
-evas_object_map_enable_set(o, EINA_TRUE);
-evas_map_free(m);
-</pre>
-
-<p class="figure">Figure: Rotating around the center point</p>
-<p align="center"><img alt="Rotating around the center point" src="../../images/evas_map_3.png" /></p>
-
-<p>You can rotate the object around any other point simply by setting the last two arguments of the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_rotate()</span> function to the appropriate values:</p>
-
-<pre class="prettyprint">evas_map_util_rotate(m, 45, x + w - 20, y + h - 20);</pre>
-
-<p class="figure">Figure: Rotating around other points</p>
-<p align="center"><img alt="Rotating around other points" src="../../images/evas_map_4.png" /></p>
-
-<p>You can also set the center of the window as the center of the rotation using the appropriate coordinates of the Evas canvas:</p>
-
-<pre class="prettyprint">
-evas_output_size_get(evas, &amp;w, &amp;h);
-m = evas_map_new(4);
-evas_map_util_points_populate_from_object(m, o);
-evas_map_util_rotate(m, 45, w, h);
-evas_object_map_set(o, m);
-evas_object_map_enable_set(o, EINA_TRUE);
-evas_map_free(m);
-</pre>
-
-<h3 id="Zoom" name="Zoom">Zoom</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_zoom()</span> function zooms the points of the map from a center point, defined by <span style="font-family: Courier New,Courier,monospace;">cx</span> and <span style="font-family: Courier New,Courier,monospace;">cy</span>. The <span style="font-family: Courier New,Courier,monospace;">zoomx</span> and <span style="font-family: Courier New,Courier,monospace;">zoomy</span> arguments specify how much to zoom in on the X and Y axes. A value of 1.0 means no zoom, 2.0 means double the size, 0.5 means half the size, and so on. All the coordinates are global canvas coordinates.</p>
-
-<pre class="prettyprint">
-evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_Coord cy)
-</pre>
-
-<h3 id="threeD_Maps" name="threeD_Maps">3D Maps</h3>
-
-<p>Maps can also be used to achieve a 3D effect. In a 3D effect, the Z coordinate of each point is meaningful: the higher the value, the further back the point is located. Smaller values (usually negative) mean that the point is closer to the user.</p>
-
-<p>3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counter-clockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).</p>
-
-<p class="figure">Figure: Rotating around the Y axis</p>
-<p align="center"><img alt="Rotating around the Y axis" src="../../images/evas_map_5.png" /></p>
-
-<p>To determine whether a map is facing the user, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_clockwise_get()</span> function. This function returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the map is facing the user and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if the map is facing away from the user. This is normally done after all the other operations are applied to the map.</p>
-
-<pre class="prettyprint">evas_map_util_clockwise_get(Evas_Map *m)</pre>
-
-<h3 id="threeD_Rotation" name="threeD_Rotation">3D Rotation and Perspective</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> function transforms a map to apply a 3D rotation to the mapped object. You can apply the rotation around any point in the canvas (including a Z coordinate). You can also apply the rotation around any of the three axes.</p>
-
-<pre class="prettyprint">evas_map_util_3d_rotate(Evas_Map *m, double dx, double dy, double dz, Evas_Coord cx, Evas_Coord cy, Evas_Coord cz)</pre>
-
-<p>Starting from this simple setup, and setting the maps so that the blue square rotates around the Y axis, we get the following:</p>
-
-<p class="figure">Figure: 3D rotation</p>
-<p align="center"><img alt="3D rotation" src="../../images/evas_map_6.png" /></p>
-
-<p>A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen. To show the Z axis, that is, to add 3D perspective to the transformation, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> function on the map after its position has been set:</p>
-
-<pre class="prettyprint">evas_map_util_3d_perspective(Evas_Map *m, Evas_Coord px, Evas_Coord py, Evas_Coord z0, Evas_Coord foc)</pre>
-
-<p>The result makes the vanishing point the center of each object:</p>
-
-<p class="figure">Figure: Adding perspective</p>
-<p align="center"><img alt="Adding perspective" src="../../images/evas_map_7.png" /></p>
-
-<h3 id="Color_Light" name="Color_Light">Color and Lighting</h3>
-
-<p>Each point in a map can be set to a color, which will be multiplied with the object’s own color and linearly interpolated between adjacent points. To set the color separately for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_color_set()</span> function:</p>
-
-<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
-
-<p>To set the same color for every point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_color_set()</span> function:</p>
-
-<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
-
-<p>When using a 3D effect, colors can be used to improve its look by simulating a light source. The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_lighting()</span> function makes this task easier by taking the coordinates of the light source and its color, along with the color of the ambient light. Evas then sets the color of each point based on its distance to the light source, the angle at which the object is facing the light source, and the ambient light. Here, the orientation of each point is important.</p>
-
-<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
-
-<p>If the map points are defined counter-clockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.</p>
-
-<p class="figure">Figure: Obscured object</p>
-<p align="center"><img alt="Obscured object" src="../../images/evas_map_8.png" /></p>
-
-<h3 id="Mapping" name="Mapping">Mapping</h3>
-
-<p>Images need special handling when mapped. While Evas can easily handle objects, it is completely oblivious to the contents of images. This means that each point in a map needs to be mapped to a specific pixel in the source image. Failing to do this can result in unexpected behavior.</p>
-
-<p>Let's get started with the following three images, each sized at 200 × 200 pixels:</p>
-
-<p class="figure">Figure: Starting point</p>
-<p align="center"><img alt="Starting point" src="../../images/evas_map_9.png" /></p>
-
-<p>The following three images illustrate the case where a map is set to an image object without setting the right UV mapping for each map point. The objects themselves are mapped properly to their new geometries, but the images are not displayed correctly within the mapped objects.</p>
-
-<p class="figure">Figure: Questionable result</p>
-<p align="center"><img alt="Questionable result" src="../../images/evas_map_10.png" /></p>
-
-<p>To transform an image correctly, Evas needs to know how to handle the image within the map. You can do this using the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> function, which allows you to map a given point in a map to a given pixel in a source image:</p>
-
-<pre class="prettyprint">
-evas_map_point_image_uv_set(Evas_Map *m, int idx, double u, double v)
-</pre>
-
-<p>To match our example images to the maps above, all we need is the size of each image, which we can get using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_size_get()</span> function.</p>
-
-<pre class="prettyprint">
-// Tux 1: Some cropping and stretch up
-evas_map_point_image_uv_set(m, 0, 0, 20);
-evas_map_point_image_uv_set(m, 1, 200, 20);
-evas_map_point_image_uv_set(m, 2, 200, 180);
-evas_map_point_image_uv_set(m, 3, 0, 180);
-evas_object_map_set(tux1, m);
-evas_object_map_enable_set(tux1, EINA_TRUE);
-
-// Inverted texture for shadow:
-evas_map_point_image_uv_set(m, 0, 0, 180);
-evas_map_point_image_uv_set(m, 1, 200, 180);
-evas_map_point_image_uv_set(m, 2, 200, 20);
-evas_map_point_image_uv_set(m, 3, 0, 20);
-evas_object_map_set(tux1_shadow, m);
-evas_object_map_enable_set(tux1_shadow, EINA_TRUE);
-
-// Tux 2: Make it fit to the map:
-evas_map_point_image_uv_set(m, 0, 0, 0);
-evas_map_point_image_uv_set(m, 1, 200, 0);
-evas_map_point_image_uv_set(m, 2, 200, 200);
-evas_map_point_image_uv_set(m, 3, 0, 200);
-evas_object_map_set(tux2, m);
-evas_object_map_enable_set(tux2, EINA_TRUE);
-
-// Tux 3: Zoom and fit relatively to image size
-evas_object_image_size_get(evas_object_image_source_get(tux3), &amp;w, &amp;h);
-evas_map_point_image_uv_set(m, 0, 0.1 * w, 0.1 * h);
-evas_map_point_image_uv_set(m, 1, 0.9 * w, 0.1 * h);
-evas_map_point_image_uv_set(m, 2, 0.9 * w, 0.9 * h);
-evas_map_point_image_uv_set(m, 3, 0.1 * w, 0.9 * h);
-evas_object_map_set(tux3, m);
-evas_object_map_enable_set(tux3, EINA_TRUE);
-</pre>
-
-<p class="figure">Figure: Correct result</p>
-<p align="center"><img alt="Correct result" src="../../images/evas_map_11.png" /></p>
-
-<p>You can also set a map to use only part of an image, or you can even map the points in inverted order. Combined with the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_source_set()</span> function, you can achieve more interesting results still.</p>
-
-<h3 id="Lighting" name="Lighting">Lighting</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> allows you to define an ambient light and a light source within the scene. Both of these light sources have their own colors.</p>
-
-<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
-
-<p>The above function is used to apply lighting calculations (from a single light source) to a given map. The red, green, and blue values of each vertex will be modified to reflect the lighting based on the light source coordinates, its color, the ambient color, and the angle at which the map faces the light source. The points of a surface should be defined in a clockwise formation if the surface is facing the user, since faces have a logical side for lighting.</p>
-
-<p>To get the reflections (gradient) in the shadow of our previous example, you have to define a source of light close enough to the user and a very bright ambient light, for example:</p>
-
-<pre class="prettyprint">
-evas_map_util_3d_lighting(m, // Evas_Map object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;250/2, 150/2, -100, // Spot light coordinates
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255, 255, 255, // Spot light color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200, 200, 200); // Ambient light color
-</pre>
-
-<h3 id="Alpha_Channel" name="Alpha_Channel">Alpha Channel</h3>
-
-<p>You can also use an alpha channel on your map by enabling the alpha channel feature:</p>
-
-<pre class="prettyprint">evas_map_alpha_set(Evas_Map *m, Eina_Bool enabled)</pre>
-
-<p>Next, set the alpha value separately for each map point:</p>
-
-<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
-
-<p>Alternatively, you can set the same alpha value to all map points:</p>
-
-<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
-
-<p>The following code sets the shadow transparency for the first image in the above three-image example:</p>
-
-<pre class="prettyprint">
-// Set object transparency to 50%:
-evas_map_util_points_color_set(m, 255, 255, 255, 127);
-
-// Tux&#39;s head is almost invisible in the shadow:
-evas_map_point_color_set(m, 3, 255, 255, 255, 15);
-evas_map_point_color_set(m, 4, 255, 255, 255, 15);
-</pre>
-
-<h3 id="Smoothing" name="Smoothing">Smoothing</h3>
-
-<p>To enable smoothing when rendering a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_set()</span> function:</p>
-
-<pre class="prettyprint">evas_map_smooth_set(Evas_Map *m, Eina_Bool enabled)</pre>
-
-<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object to apply smoothing to. The second argument sets whether to enable the smoothing:</p>
-
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>: Enable smoothing.</li>
-    <li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>: Disable smoothing.</li>
-</ul>
-
-<p>If the object is of a type that has its own smoothing settings, the smoothing settings must be disabled for both the object and the map. Map smoothing is enabled by default. To check whether map smoothing is enabled, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_get()</span> function.</p>
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/circle_components_wn.htm b/org.tizen.guides/html/native/ui/circle_components_wn.htm
deleted file mode 100644 (file)
index 6faac79..0000000
--- a/org.tizen.guides/html/native/ui/circle_components_wn.htm
+++ /dev/null
@@ -1,688 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#datetime">Circle Datetime</a></li>
-                       <li><a href="#genlist">Circle Genlist</a></li>
-                       <li><a href="#object">Circle Object</a></li>
-                       <li><a href="#progressbar">Circle Progressbar</a></li>
-                       <li><a href="#scroller">Circle Scroller</a></li>
-                       <li><a href="#slider">Circle Slider</a></li>
-                       <li><a href="#surface">Circle Surface</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm">Circle Components Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>        
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Circle Components</h1>
-
-<p>Circle components extend the UI features and provide functionalities optimized for the circular UI.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<p>Generally, circle components can be added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_[component_name]_add()</span> function, which returns a circle object handle. Circle components are shown in a form of an arch with radius, line width, and color. These properties can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs. The circle object can also take a rotary event. Generally, a clockwise rotary event increases the value of the rotary event activated by the circle object, and a counter clockwise rotary event decreases the value.</p>
-
-<h2 id="datetime">Circle Datetime</h2>
-
-
-<p class="figure">Figure: Circle Datetime</p> 
-<p align="center"><img alt="Circle Datetime" src="../../images/circle_datetime.png" /></p> 
-
-<p>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field. If a rotary event is activated by <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span>, a circle datetime increases or decreases value of selected field in <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by the clockwise or counter clockwise rotary event.</p>
-
-<h3>Creating a Circle Datetime</h3>
-
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_datetime_add()</span> function to create a circle object. When creating a circle datetime, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> handle must be passed as an argument. If a circle surface is passed as an argument, a circle object connected with a circle surface is created, and it is rendered by the circle surface. When <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as a surface argument, the new circle object is managed and rendered by itself.</p>
-<pre class="prettyprint">
-Evas_Object *datetime;
-Evas_Object *circle_datetime;
-
-datetime = elm_datetime_add(parent);
-circle_datetime = eext_circle_object_datetime_add(datetime, surface);
-</pre>
-
-<h3>Activating a Rotary Event</h3>
-
-<p>You can activate and deactivate the circle datetime by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle datetime can receive the rotary event. Otherwise, the circle datetime cannot receive the rotary event.</p>
-<pre class="prettyprint">
-eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
-</pre>
-
-<h3>Using the Circle Object Property</h3>
-
-<p>A circle datetime has the following styles:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-</ul>
-<p>When created, the circle datetime has default style automatically.</p>
-
-<p>The circle datetime objects support the following circle object API calls:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
-</ul>
-<p>A circle datetime has the following item:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws a marker.</li>
-</ul>
-
-<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p> 
-<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__DATETIME__MODULE.html">Efl Extension Circle Datetime</a> API.</p>
-
-<h2 id="genlist">Circle Genlist</h2>
-
-<p class="figure">Figure: Circle Genlist</p> 
-<p align="center"><img alt="Circle Genlist" src="../../images/circle_genlist.png" /></p> 
-
-<p>Use the circle genlist to visualize and utilize the scroll effect for <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>. While <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> provides a scrollbar with straight horizontal and vertical movement, the circle genlist provides scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</p>
-
-<h3>Creating a Circle Genlist</h3>
-
-<p>A genlist and a surface are necessary when creating the circle genlist. The circle genlist is added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_add()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *genlist, *circle_genlist, *parent;
-
-genlist = elm_genlist_add(parent);
-circle_genlist = eext_circle_object_genlist_add(genlist, surface);
-</pre>
-
-<h3>Configuring the Circle Genlist</h3>
-
-<p>You can set the circle genlist scroller policy by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_scroller_policy_set()</span> function.</p>
-<pre class="prettyprint">
-eext_circle_object_genlist_scroller_policy_set(circle_genlist, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_SCROLLER_POLICY_OFF, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_SCROLLER_POLICY_ON);
-</pre>
-<p>This sets the scrollbar visibility policy of a given scroller. <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden. <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> turns the scrollbar on all the time, and <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> turns it off. This applies to the horizontal and vertical scrollbars respectively.</p>
-<p>The following enum values are available for circle genlist.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span></li>
-</ul>
-
-<h3>Activating a Rotary Event</h3>
-
-<p>You can activate and deactivate the circle genlist by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle genlist can receive the rotary event. Otherwise, the circle genlist cannot receive the rotary event.</p>
-<pre class="prettyprint">
-eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
-</pre>
-
-<h3>Using the Circle Object Property</h3>
-
-<p>Circle genlist objects support the following circle object API calls:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
-</ul>
-<p>A circle genlist has the following item:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item. It draws vertical scroll bar.</li>
-<li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
-</ul>
-<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
-<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__GENLIST__MODULE.html">Efl Extension Circle Genlist</a> API.</p>
-
-
-
-<h2 id="object">Circle Object</h2>
-
-<p>A circle object extends elementary components in a form of circular design. Sometimes, a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.</p>
-
-<h3>Creating a Circle Object</h3>
-
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_add()</span> function to create a circle object. When creating a circle object, you can choose whether the circle object is rendered by itself or by the circle surface. If the circle surface is passed as an argument, a circle object connected with circle surface is created, and it is rendered by the circle surface.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-</pre>
-
-<p>When <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as a surface argument, the new circle object is managed and rendered by itself. Here, a circle object without a circle surface is created and showed in a size of 360 x 360.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, NULL);
-evas_object_size_hint_min_set(circle_obj, 360, 360);
-evas_object_show(circle_obj);
-</pre>
-
-<h3>Setting the Line Width</h3>
-
-<p>You can set the line width of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Here, circle object with a surface is created and its line width set to 20. You can get the current line width of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_line_width_set(circle_obj, 20);
-</pre>
-
-<p>You can set the line width of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_set()</span> function. If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Similar to the above example, a circle object with a surface is created and its line width is set to 20. You can get the current line width of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_get()</span> function.</p>
-<pre class="prettyprint">Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_line_width_set(circle_obj, &quot;default&quot;, 20);
-</pre>
-
-<h3>Setting the Angle</h3>
-
-<p>You can set the angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Here, circle object with surface is created and its angle set to a 45.0 degree angle. You can get the current angle of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_angle_set(circle_obj, 45.0);
-</pre>
-
-<p>You can set the angle of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Similar to the above example, a circle object with surface is created and its angle is set to a 45.0 degree angle. You can get the current angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_set(circle_obj, &quot;default&quot;, 45.0);
-</pre>
-
-<h3>Setting the Angle Offset</h3>
-
-<p>You can set the angle offset of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. Here, a circle object with a 45.0 degree angle is created and its angle offset set to 30.0 degrees. As a result, the circle object has an arch of 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees. You can get the current angle offset of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_angle_set(circle_obj, 45.0);
-eext_circle_object_angle_offset_set(circle_obj, 30.0);
-</pre>
-
-<p>You can set the angle offset of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. The following code works the same way as in the above example. You can get the current angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_set(circle_obj, &quot;default&quot;, 45.0); 
-eext_circle_object_item_angle_offset_set(circle_obj, &quot;default&quot;, 30.0);
-</pre>
-
-<h3>Setting the Minimum and Maximum Angle</h3>
-
-<p>You can set the minimum and maximum angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Here, a circle object with a surface is created and its minimum angle set to 0.0 degrees and maximum angle to 90.0 degrees. You can get the current minimum and maximum angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
-</pre>
-
-<p>You can set the minimum and maximum angles of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Similar to the above example, a circle object with a minimum and maximum angles of 0.0 and 90.0 is created. You can get the current minimum and maximum angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_min_max_set(circle_obj, &quot;default&quot;, 0.0, 90.0);
-</pre> 
-
-<h3>Setting the Minimum and Maximum Value</h3>
-
-<p>You can set the minimum and maximum values of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Here, a circle object with a surface is created and its minimum value is set to 0.0 degrees and maximum value to 10.0 degrees. You can get the current minimum and maximum value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
-</pre>
-
-<p>You can set the value of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Similar to the above example, a circle object with a minimum and maximum value of 0.0 to 10.0 degrees is created. You can get the current minimum and maximum values of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_min_max_get()</span> function.</p>
-<pre class="prettyprint"> 
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_value_min_max_set(circle_obj, &quot;default&quot;, 0.0, 10.0);
-</pre>
-
-<h3>Setting the Value</h3>
-
-<p>You can set the value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Here, a circle object with a surface is created and its value set to 5.0. You can get the current value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_value_set(circle_obj, 5.0);
-</pre>
-
-<p>You can set the value of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Similar to the above example, a circle object with a surface is created and its value is set to 5.0 degree angle. You can get the current value of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_value_set(circle_obj, &quot;default&quot;, 5.0);
-</pre>
-
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The value cannot be lower than the minimum value or higher than the maximum value.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<h3>Setting the Color</h3>
-
-<p>You can set the color of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. To set the color, red, green, blue, and alpha values in range from 0 to 255 must  be passed. Here, a circle object with a surface is created and its color set to blue. You can get the current color of circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
-</pre>
-
-<p>You can set the color of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. Similar to the above example, a circle object with a surface is created and its color is set to red. You can get the current color of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_value_set(circle_obj, &quot;default&quot;, 255, 0, 0, 255);
-</pre>
-
-<h3>Setting the Radius</h3> 
-
-<p>You can set the radius of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Here, a circle object with radius of 50.0 is created. You can get the current radius of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_radius_set(circle_obj, 50.0);
-</pre>
-
-<p>You can set the radius of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Similar to the above example, a circle object with a radius of 50.0 is created. You can get the current radius of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_radius_set(circle_obj, &quot;default&quot;, 50.0);
-</pre>
-
-<h3>Disabling a Circle Object</h3>
-
-<p>You can disable the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function. Here, a circle object is disabled. You can get the current disabled status of circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_obj;
-
-circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_disabled_set(circle_obj, EINA_TRUE);
-</pre>
-
-<p>You can enable a disabled circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> argument.</p>
-<pre class="prettyprint">
-eext_circle_object_disabled_set(circle_obj, EINA_FALSE);
-</pre>
-
-
-
-
-<h2 id="progressbar">Circle Progressbar</h2>
-
-<p class="figure">Figure: Circle Progressbar</p> 
-<p align="center"><img alt="Circle Progressbar" src="../../images/circle_progressbar.png" /></p> 
-
-<p>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</p>
-
-<h3>Creating a Circle Progressbar</h3>
-
-<p>You can create the circle progressbar by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_progressbar_add()</span> function. When creating the circle progressbar, a surface is necessary to render on the surface.</p>
-<pre class="prettyprint">
-Evas_Object *circle_progressbar, *parent;
-circle_progressbar = eext_circle_object_progressbar_add(parent, surface);
-</pre>
-
-<h3>Using the Circle Object Property</h3>
-<p>Circle progressbar supports the following circle object API calls:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
-</ul>
-<p>A circle progressbar has the following items:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the progressbar.</li>
-<li><span style="font-family: Courier New,Courier,monospace">bg</span>: Progress bar background circle item.</li>
-</ul>
-<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
-<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__PROGRESSBAR__MODULE.html">Efl Extension Circle Progressbar</a> API.</p>
-
-<h3>Configuring Circle Progressbar</h3>
-
-<p>Before using the circle progressbar, its minimum and maximum values are set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. The current value is set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>.</p>
-<p>Here, the minimum value is set to 0.0, the maximum value to 100.0, and the current value to 3.0.</p>
-<pre class="prettyprint">
-eext_circle_object_value_min_max_set(circle_progressbar, 0.0, 100.0);
-eext_circle_object_value_set(circle_progressbar, 3.0);
-</pre>
-
-<h2 id="scroller">Circle Scroller</h2> 
-
-<p class="figure">Figure: Circle Scroller</p> 
-<p align="center"><img alt="Circle Scroller" src="../../images/circle_scroller.png" /></p> 
-
-<p>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar. It wraps the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> internally only to draw a circular scroll bar to the edge of the circular screen. This means you can use <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> callbacks and APIs excluding <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> APIs.</p>
-
-<h3>Creating a Circle Scroller</h3> 
-
-<p>To create a circle scroller, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_add()</span> function. <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> has to be passed by the first parameter of this function.</p>
-<pre class="prettyprint">
-Evas_Object *scroller;
-Evas_Object *circle_scroller;
-
-scroller = elm_scroller_add(parent);
-circle_scroller = eext_circle_object_scroller_add(scroller, surface);
-</pre>
-
-<h3>Activating the Rotary Event</h3>
-
-<p>You can activate and deactivate the circle scroller by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle scroller can receive the rotary event. Otherwise, the circle scroller cannot receive the rotary event.</p>
-<pre class="prettyprint">
-eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
-</pre>
-
-<h3>Using the Circle Object Property</h3>
-
-<p>A circle scroller has the following styles:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-</ul>
-<p>When created, the circle scroller has default style automatically.</p>
-
-<p>Circle scroller objects support the following circle object API calls:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
-</ul>
-<p>A circle slider has the following items:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the vertical scroll bar.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bar</span>: Horizontal scroll bar circle item.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bg</span> : Horizontal scroll background circle item.</li>
-</ul>
-<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
-<p>For more information, see the <a href="../../../..//org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SCROLLER__MODULE.html">Efl Extension Circle Scroller</a> API.</p>
-
-<h3>Configuring the Circle Scroller</h3>
-
-<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> APIs to configure a circle scroller, except <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> APIs.</p>
-<p>Instead of excluded APIs, <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_get()</span> functions are provided for the circle scroller.</p>
-<p>A policy parameter has the following value.</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span>: indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span>: Turns the scrollbar on all the time.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span>: Turns the scrollbar off. This applies to the horizontal and vertical scrollbars respectively.</li>
-</ul>
-<p>The following example shows how to set the scroll bar visibility policy to <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> for horizontal scroll bar and <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> for vertical scroll bar.</p>
-<pre class="prettyprint">
-eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
-</pre>
-
-<h2 id="slider">Circle Slider</h2> 
-
-<p class="figure">Figure: Circle Slider</p> 
-<p align="center"><img alt="Circle Slider" src="../../images/circle_slider.png" /></p> 
- 
-<p>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</p>
-
-<h3>Adding an Eext Slider object</h3>
-
-<p>To create a circle slider, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_add()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *circle_slider = NULL;
-circle_slider = eext_circle_object_slider_add(parent, surface);
-</pre>
-
-<h3>Activating the Rotary Event</h3>
-
-<p>You can activate or deactivate the circle slider by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle slider can receive the rotary event. Otherwise, the circle slider cannot receive the rotary event.</p>
-<pre class="prettyprint">
-eext_rotary_object_event_activated_set(circle_slider, EINA_TRUE);
-</pre>
-
-<h3>Using the Circle Slider Property</h3>
-
-<p>A circle slider has the following styles:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-</ul>
-
-<p>When created, the circle slider has default style automatically.</p>
-<p>Circle slider objects support the following circle object API calls:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
-</ul>
-<p>A circle slider has the following items:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item, It draws slider bar.</li>
-       <li><span style="font-family: Courier New,Courier,monospace">bg</span>: Background circle item.</li>
-</ul>
-<p>You can change the properties of the items by using <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
-<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SLIDER__MODULE.html">Efl Extension Circle Slider</a> API.</p>
-
-<h3>Configuring the Circle Slider</h3>
-
-<p>The circle slider step value is used when the rotary event increases or decreases the circle slider value. It can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_step_set()</span> function.</p>
-<p>Here, the step value is set to 0.5.</p>
-<pre class="prettyprint">
-eext_circle_object_slider_step_set(circle_slider, 0.5);
-</pre>
-<p>Before using the circle slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span>. The current value is set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>.</p>
-<p>Here, the minimum value is set to 0.0, the maximum value to 15.0, and the current value to 3.0.</p>
-<pre class="prettyprint">
-eext_circle_object_value_min_max_set(circle_slider, 0.0, 15.0);
-eext_circle_object_value_set(circle_slider, 3.0);
-</pre>
-<p>You can retrieve the current value of the circle slider with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
-<pre class="prettyprint">
-double value = eext_circle_object_value_get(circle_slider);
-</pre>
-
-<h3>Using Circle Slider Callbacks</h3>
-
-<p>The circle slider emits the following signal:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace">value,changed</span>: The rotary event changes the circle slider value.</li>
-</ul>
-<p>For this signal, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">value,changed</span> signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;value,changed&quot;, _value_changed_cb, data);
-}
-
-// Callback function for the &quot;value,changed&quot; signal
-// This callback is called when a value of the circle slider is changed
-static void
-_value_changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Circle slider value changed. \n&quot;);
-}
-</pre>
-
-<h2 id="surface">Circle Surface</h2>
-
-<p>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered. When one of circle objects is set as visible, the surface renders the circle object and hides the others.</p> 
-
-<h3>Creating a Circle Surface</h3>
-
-<p>To create a new circle surface:</p>
-<pre class="prettyprint">
-Eext_Circle_Surface *surface;
-Evas_Object *conformant;
-
-conformant = elm_conformant_add(parent);
-surface = eext_circle_surface_conformant_add(conformant);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_conformant_add()</span> function creates a circle surface in the conformant layer. If you want to create a circle surface in the layout layer, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_layout_add()</span> function:</p>
-<pre class="prettyprint">
-Eext_Circle_Surface *surface;
-Evas_Object *layout;
-
-layout = elm_layout_add(parent);
-surface = eext_circle_surface_layout_add(layout); 
-</pre>
-
-<p>If you want to create a circle surface in the naviframe layer, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_naviframe_add()</span> function:</p>
-<pre class="prettyprint">
-Eext_Circle_Surface *surface;
-Evas_Object *naviframe;
-
-naviframe = elm_naviframe_add(parent);
-surface = eext_circle_surface_naviframe_add(naviframe); 
-</pre>
-
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">A circle surface is a non-graphical object. It adds no graphics to or around the objects it holds.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<h3>Adding Circle Objects to the Circle Surface</h3>
-
-<p>You can add any circle object to a circle surface. The following example shows how to create an <span style="font-family: Courier New,Courier,monospace">eext_slider</span> component and add it to a circle surface in conformant layer:</p>
-<pre class="prettyprint">
-Eext_Circle_Surface *surface;
-Evas_Object *slider;
-
-surface = eext_circle_surface_conformant_add(conformant);
-slider = eext_circle_object_slider_add(parent, surface);
-</pre>
-
-<h3>Deleting Circle Surface</h3>
-
-<p>Deleting an Evas object automatically deletes the circle surface in the same layer. However, you can explicitly use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function to delete a circle surface.</p>
-<pre class="prettyprint">
-eext_circle_surface_del(surface);
-</pre>
-
-<table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function does not delete the connected circle objects.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/components_mn.htm b/org.tizen.guides/html/native/ui/components_mn.htm
deleted file mode 100644 (file)
index 33c438e..0000000
--- a/org.tizen.guides/html/native/ui/components_mn.htm
+++ /dev/null
@@ -1,3343 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Components</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#background">Background</a></li>
-                       <li><a href="#button">Button</a></li>
-                       <li><a href="#check">Check</a></li>
-                       <li><a href="#colorselector">Colorselector</a></li>
-                       <li><a href="#ctxpopup">Ctxpopup</a></li>
-                       <li><a href="#datetime">Datetime</a></li>
-                       <li><a href="#entry">Entry</a></li>
-                       <li><a href="#flip">Flip</a></li>
-                       <li><a href="#gengrid">Gengrid</a></li>
-                       <li><a href="#genlist">Genlist</a></li>
-                       <li><a href="#glview">GLView</a></li>
-                       <li><a href="#icon">Icon</a></li>
-                       <li><a href="#image">Image</a></li>
-                       <li><a href="#index">Index</a></li>
-                       <li><a href="#label">Label</a></li>
-                       <li><a href="#list">List</a></li>
-                       <li><a href="#map">Map</a></li>
-                       <li><a href="#notify">Notify</a></li>
-                       <li><a href="#panel">Panel</a></li>
-                       <li><a href="#photo">Photo</a></li>
-                       <li><a href="#photocam">Photocam </a></li>
-                       <li><a href="#plug">Plug</a></li>
-                       <li><a href="#popup">Popup</a></li>
-                       <li><a href="#progressbar">Progressbar</a></li>
-                       <li><a href="#radio">Radio</a></li>
-                       <li><a href="#segmentcontrol">Segmentcontrol</a></li>
-                       <li><a href="#slider">Slider</a></li>
-                       <li><a href="#spinner">Spinner</a></li>
-                       <li><a href="#toolbar_component">Toolbar</a></li>
-                       <li><a href="#tooltip">Tooltip</a></li>
-                       <li><a href="#win">Win</a></li>
-               </ul>
-                       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Components Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>                     
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Components</h1>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-                               <h2 id="background" name="background">Background</h2>
-                               
-<p class="figure">Figure: Red color background</p>
-<p align="center"><img alt="Red color background" src="../../images/bg.png" /></p>
-
-<p class="figure">Figure: Background hierarchy</p>
-<p align="center"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
-
-<p>The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.</p>
-
-<h3>Adding a Background Component</h3>
-
-<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
-
-<pre class="prettyprint">
-Evas_Object *bg, *parent;
-
-// Create a background
-bg = elm_bg_add(parent);
-</pre>
-
-<h3>Changing the Color of the Background</h3>
-
-<p>You can set the color of the background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function. The following example sets the background color to red.</p>
-
-<pre class="prettyprint">
-Evas_Object *bg;
-
-// Use red color for background
-elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
-</pre>
-
-<h3>Changing the Image of the Background</h3>
-
-<p>It is also possible to set an image or an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
-
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component&#39;s area.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
-</ul>
-
-<pre class="prettyprint">
-Evas_Object *bg;
-
-// Set a file on the disk as a background image
-elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
-// Set an Edje group as a background image
-elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;edje_group&quot;);
-elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
-</pre>
-
-<h3>Using Overlay</h3>
-
-<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
-
-<pre class="prettyprint">
-elm_object_part_content_set(bg, &quot;overlay&quot;, over);
-</pre>
-
-<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
-
-                       
-                               <h2 id="button" name="button">Button</h2>
-
-<p class="figure">Figure: Button component</p>
-<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
-
-<p class="figure">Figure: Button hierarchy</p>
-<p align="center"><img alt="Button hierarchy" src="../../images/button_tree.png" /></p>
-
-<p>The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.</p>
-
-<h3>Adding a Button Component</h3>
-
-<p>Create a button.</p>
-<pre class="prettyprint">
-Evas_Object *button, *parent;
-
-// Create a button
-button = elm_button_add(parent);</pre>
-
-<h3>Adding an Icon Inside a Button</h3>
-
-<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name.</p>
-
-<pre class="prettyprint">
-Evas_Object *ic;
-ic = elm_icon_add(button);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(button, &quot;icon&quot;, ic);
-</pre>
-
-<h3>Adding Text Inside a Button</h3>
-
-<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
-
-<pre class="prettyprint">
-elm_object_text_set(button, &quot;Click me!&quot;);
-</pre>
-
-<h3>Using Button Styles</h3>
-
-<p>Various styles can be used on the button. Tizen supports the following styles:</p>
-
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">icon_reorder</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">icon_expand_add</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">icon_expand_delete</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">contacts</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">option</span></li>
-</ul>
-
-<p>You can see these themes in action on the following screenshot (in the above order).</p>
-
-<p class="figure">Figure: Button component</p>
-<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
-
-<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
-
-<pre class="prettyprint">
-elm_object_style_set(button,&quot;icon_expand_add&quot;);
-</pre>
-
-<h3>Using the Button Callbacks</h3>
-
-<p>The button emits the following signals:</p>
-
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the button (press/release).</li>
-    <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The user pressed the button without releasing it.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The user pressed the button.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The user released the button after pressing it.</li>
-</ul>
-
-<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>This is an example to register and define a callback function called by the clicked signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
-}
-// Callback function for the &quot;clicked&quot; signal
-// This callback is called when the button is clicked by the user
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
-}
-</pre>
-
-<h3>Using the Autorepeat Feature</h3>
-
-<p>The autorepeat feature is enabled by default. It consists of calling the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with the following functions:</p>
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
-    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
-</ul>
-
-<p>Disable the autorepeat feature.</p>
-<pre class="prettyprint">
-elm_button_autorepeat_set(button, EINA_FALSE);
-</pre>
-
-<p>Enable the autorepeat feature.</p>
-<pre class="prettyprint">
-elm_button_autorepeat_set(button, EINA_TRUE);
-</pre>
-
-<p>Set the initial timeout to five seconds.</p>
-<pre class="prettyprint">
-elm_button_autorepeat_initial_timeout_set(button, 5.0);
-</pre>
-
-<p>Set the gap between two signals to 0.5 seconds.</p>
-<pre class="prettyprint">
-elm_button_autorepeat_gap_timeout_set(button, 0.5);
-</pre>
-
-               
-                               <h2 id="check" name="check">Check</h2>
-
-<p class="figure">Figure: Check component</p> 
-<p align="center"><img alt="Check component" src="../../images/check.png" /></p> 
-
-<p class="figure">Figure: Check hierarchy</p> 
-<p align="center"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p> 
-
-<p>The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
-
-<p>This UI component inherits from the layout component. All layout functions can be used on the check component.</p>
-
-<h3 id="Adding" name="Adding">Adding a Check Component</h3>
-
-<p>The following example shows how to create a check component.</p>
-
-<pre class="prettyprint">
-Evas_Object *check, *parent;
-check = elm_check_add(parent);
-</pre>
-
-<h3 id="Modifying" name="Modifying">Modifying the Check Styles</h3>
-
-<p>The check component style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. The following styles are available:</p>
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">favorite</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">on</span> and <span style="font-family: Courier New,Courier,monospace;">off</span></li>
-</ul>
-
-<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">favorite</span> style on our check object.</p>
-<pre class="prettyprint">
-elm_object_style_set(check, &quot;favorite&quot;);
-</pre>
-
-<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
-<pre class="prettyprint">
-char *style = elm_object_style_get(check);
-</pre>
-
-<h3 id="Using_Check" name="Using_Check">Using the Check Component</h3>
-
-<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
-<pre class="prettyprint">
-elm_check_state_set(check, EINA_TRUE);
-</pre>
-
-<p>You can also retrieve the current value of the check object.</p>
-<pre class="prettyprint">
-Eina_Bool value = elm_check_state_get(check);
-</pre>
-
-<p>As with a radio object, an icon and a label can be set.</p>
-<pre class="prettyprint">
-// Create a Home icon 
-Evas_Object *icon;
-
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, &quot;home&quot;);
-
-// Set it to the check object 
-elm_object_part_content_set(check, &quot;icon&quot;, icon);
-
-// Set the check label 
-elm_object_text_set(check, &quot;Check label&quot;);
-</pre>
-
-<p>You can also modify the <span style="font-family: Courier New,Courier,monospace">on</span> and <span style="font-family: Courier New,Courier,monospace">off</span> labels.</p>
-
-<pre class="prettyprint">
-elm_object_part_text_set(check, &quot;on&quot;, &quot;True&quot;);
-elm_object_part_text_set(check, &quot;off&quot;, &quot;False&quot;);
-</pre>
-
-<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
-
-<pre class="prettyprint">
-// Get the current set text of the check label 
-char *text = elm_object_text_get(check);
-
-// Get the content set in the icon part 
-Evas_Object *icon = elm_object_part_content_get(check, &quot;icon&quot;);
-</pre>
-
-<h3 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h3>
-
-<p>When the value is changed by the user, the changed signal is emitted. The <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
-
-<p>The following example shows how to register a callback on this signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the check value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
-}
-</pre>
-
-                               <h2 id="colorselector" name="colorselector">Colorselector</h2>
-
-    <p class="figure">Figure: Colorselector component</p> 
-  <p align="center"><img alt="Colorselector component" src="../../images/colorsel.png" /></p> 
-  
-      <p class="figure">Figure: Colorselector hierarchy</p> 
-  <p align="center"><img alt="Colorselector hierarchy" src="../../images/colorselector_tree.png" /></p>
-
-
-<p>The colorselector component provides a color selection solution to the user. There are different modes available, each of them showing a different configuration of the colorselector component.</p>
-
-<p>Currently only the Palette mode is available in Tizen.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_COLORSELECTOR_PALETTE</span></li>
-</ul>
-
-<p>The Palette mode displays several color items that enable the user to choose a color in the items displayed. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, and it is associated with a unique identifier. This enables the developers to create new series of colors (a new palette) and save it under another identifier. By default, the color palette is using the <span style="font-family: Courier New,Courier,monospace">default</span> identifier.</p>
-
-<p>This UI component inherits from the layout component, so all function concerning the layout component can also be used on the colorselector component.</p>
-
-<h3>Adding a Colorselector Component</h3>
-
-<p>The following example shows how to create a colorselector object.</p>
-
-<pre class="prettyprint">
-Evas_Object *colorsel, *parent;
-
-colorsel = elm_colorselector_add(parent);
-</pre>
-
-<h3>Setting the Colorselector Modes</h3>
-
-<p>The following example shows how to set the mode of the colorselector to the palette mode.</p>
-
-<pre class="prettyprint">
-elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
-</pre>
-
-<p>The following example shows how to create a new palette called <span style="font-family: Courier New,Courier,monospace">mypalette</span>. This new palette is saved by elementary config and you can to load it again later. You then add three colors in <span style="font-family: Courier New,Courier,monospace">mypalette</span>: red, green, and blue.</p>
-
-<pre class="prettyprint">
-elm_colorselector_palette_name_set(colorsel, &quot;mypalette&quot;);
-elm_colorselector_palette_color_add(colorsel, 255, 0, 0, 255);
-elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
-elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">default</span> palette already contains 14 colors.</p>
-
-<pre class="prettyprint">
-elm_colorselector_palette_name_set(colorsel, &quot;default&quot;);
-</pre>
-
-<p>When the user clicks on the color elements, the element changes the color that is set to the colorselector component. You can use the following function to retrieve the current selected color.</p>
-<pre class="prettyprint">
-int r, g, b, a;
-
-elm_colorselector_color_get(colorsel, &amp;r, &amp;g, &amp;b, &amp;a);
-</pre>
-
-<h3>Using the Colorselector Callbacks</h3>
-
-<p>You can register callbacks on the following signals:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">changed</span> - The color value changes on the selector. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">color,item,selected</span> - The user clicks on a color item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback is the selected color item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">color,item,longpressed</span> - The user long presses on a color item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback contains the selected color item.</li>
-</ul>
-
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(colorselector, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the colorselector value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The color has changed\n&quot;);
-}
-</pre> 
-
-               
-                               <h2 id="ctxpopup" name="ctxpopup">Ctxpopup</h2>
-
-    <p class="figure">Figure: Context popup component</p> 
-  <p align="center"><img alt="Context popup component" src="../../images/ctxpopup1.png" /></p> 
-  
-      <p class="figure">Figure: Context popup hierarchy</p> 
-  <p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
-
-
-<p>Ctxpopup is a contextual popup that can show a list of items.</p>
-
-<h3>Adding a Ctxpopup Component</h3>
-
-<p>A ctxpopup can be created with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function, and when shown, it automatically chooses an area inside its parent object&#39;s view (set using <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
-
-<pre class="prettyprint">
-Evas_Object *ctxpopup, *parent;
-
-// Create a ctxpopup 
-ctxpopup = elm_ctxpopup_add(parent);
-</pre>
-
-<h3>Modifying the Ctxpopup Style</h3>
-
-<p>The following styles are available:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">dropdown/list</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dropdown/label</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">more/default</span></li>
-</ul>
-
-    <p class="figure">Figure: Context popup more/default style</p> 
-  <p align="center"><img alt="Context popup more/default style" src="../../images/ctxpopup1.png" /></p> 
-  
-      <p class="figure">Figure: Context popup dropdown/list</p> 
-  <p align="center"><img alt="Context popup dropdown/list" src="../../images/ctxpopup2.png" /></p>
-
-      <p class="figure">Figure: Context popup dropdown/label</p> 
-  <p align="center"><img alt="Context popup dropdown/label" src="../../images/ctxpopup3.png" /></p>
-
-<p>The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">more/default</span> style.</p>
-
-<pre class="prettyprint">
-elm_object_style_set(ctxpopup, &quot;more/default&quot;);
-</pre>
-
-<h3>Configuring the Ctxpopup</h3>
-
-<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here it is set to horizontal.</p>
-<pre class="prettyprint">
-elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
-</pre>
-
-<p>Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden.</p>
-<pre class="prettyprint">
-elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
-</pre>
-
-<h3>Managing the Ctxpopup Items</h3>
-
-<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the <span style="font-family: Courier New,Courier,monospace">Test</span> label and no icon.</p>
-<pre class="prettyprint">
-Elm_Object_Item *it;
-
-it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
-<pre class="prettyprint">
-static void
-_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
-}
-</pre>
-
-<p>After that the item label is set to <span style="font-family: Courier New,Courier,monospace">New label</span>.</p>
-
-<pre class="prettyprint">elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
-</pre>
-
-<p>And its icon is modified to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon.</p>
-
-<pre class="prettyprint">
-Evas_Object *home_icon = elm_icon_add(ctxpopup);
-elm_icon_standard_set(home_icon, &quot;home&quot;);
-
-elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
-</pre>
-
-<h3>Using the Ctxpopup Callbacks</h3>
-
-<p>The context popup emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal when it is dismissed. You can register a callback to this signal. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ctxpopup, &quot;dismissed&quot;, dismissed_cb, data);
-}
-
-// Callback function for the &quot;dismissed&quot; signal
-// This callback is called when the ctxpopup is dismissed
-void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Ctxpopup dismissed\n&quot;);
-}
-</pre> 
-
-                               <h2 id="datetime" name="datetime">Datetime</h2>
-  
-<p class="figure">Figure: Datetime selection</p> 
-<p align="center"> <img alt="Datetime selection" src="../../images/date2.png" /> </p> 
- 
-<p class="figure">Figure: Datetime hierarchy</p> 
-<p align="center"> <img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p> 
- 
-<p>The datetime component displays and adds date and time values.</p>
-
-<h3>Adding a Datetime Component</h3>
-
-<p>The UI component is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>. It is possible to select the visible fields with <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span>. The following fields can be controlled:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: the year field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: the month field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: the date field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: the hour field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: the minute field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: the AM/PM field</li>
-  </ul>
-
-<p>The following example shows how to create a datetime component and set the <span style="font-family: Courier New,Courier,monospace">HOUR</span> and <span style="font-family: Courier New,Courier,monospace">MINUTE</span> fields visible.</p>
-
-<pre class="prettyprint">
-Evas_Object *datetime, *parent;
-
-datetime = elm_datetime_add(parent);
-
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_HOUR, EINA_TRUE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_MINUTE, EINA_TRUE);
-
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
-</pre>
-
-<h3>Using the Datetime Styles</h3>
-
-<p>The following styles are available:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">date_layout</span></li>
-   <li><span style="font-family: Courier New,Courier,monospace">time_layout</span></li>
-   <li><span style="font-family: Courier New,Courier,monospace">time_layout_24h</span></li>
-  </ul>
-
-<p>The following example creates the <span style="font-family: Courier New,Courier,monospace">date_layout</span> style:</p>
-
-<pre class="prettyprint">
-elm_object_style_set(datetime, &quot;date_layout&quot;);
-</pre>
-
-<h3>Setting the Datetime Format</h3>
-
-<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.</p>
-
-<pre class="prettyprint">
-elm_datetime_format_set(datetime, &quot;%H : %M&quot;);
-</pre>
-
-<p>Please refer to the API documentation for a complete list of all the options available.</p>
-
-<h3>Using the Datetime Callbacks</h3>
-
-<p>A callback can be registered on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal to detect when the Datetime field values are changed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the datetime fields change
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime field changed. \n&quot;);
-}</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
- 
-
-<h3>UX Issue in Tizen 2.3</h3>
-
-<ul>
-  <li><span style="font-family: Courier New,Courier,monospace">date_layout</span> (default): Year, Month, Day</li>
-  <li><span style="font-family: Courier New,Courier,monospace">time_layout</span>: Hour, Minute, AM/PM button</li>
-  <li><span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span>: Hour, Minute</li>
-</ul>
- 
-<p>Basically, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component needs a full-length format that includes the Year, Month, Day, Hour, Minute, and AM/PM. Each style then shows specific fields according their style, limited by the UX concept. If you call the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function for a field that is not supported in the style, it does not work.</p>
- 
-               
-                               <h2 id="entry" name="entry">Entry</h2>
-  
-<p class="figure">Figure: Entry component</p> 
-<p align="center"> <img alt="Entry component" src="../../images/entry.png" /> </p> 
- 
-<p class="figure">Figure: Entry component</p> 
-<p align="center"> <img alt="Entry component" src="../../images/entry2.png" /> </p> 
- 
-<p class="figure">Figure: Entry hierarchy</p> 
-<p align="center"> <img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p> 
- 
-<p>The entry component is a box where the user can enter text. It supports the following features:</p>
-  <ul>
-   <li>text wrapping</li>
-   <li>multiline</li>
-   <li>scrolling</li>
-   <li>formatted markup text</li>
-   <li>password mode</li>
-   <li>filtering text</li>
-   <li>read/write from a file</li>
-   <li>theme style overrides</li>
-  </ul>
-   
-<h3>Adding an Entry Component</h3>
-
-<p>The entry component is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *entry, *parent;
-
-entry = elm_entry_add(parent);
-elm_entry_entry_set(entry, &quot;A short text.&quot;);
-</pre>
-
-<h3>Using the Text Editor</h3>
-
-<p>You can append text to the end of existing content.</p>
-
-<pre class="prettyprint">
-elm_entry_entry_append(entry, &quot;END&quot;);
-</pre>
-
-<p>You can also insert text at the current cursor position.</p>
-
-<pre class="prettyprint">
-elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
-Eina_Bool Empty = elm_entry_is_empty(entry);
-</pre>
-
-<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable <span style="font-family: Courier New,Courier,monospace">Empty</span> returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-
-<p>By default, the user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.</p>
-
-<pre class="prettyprint">
-elm_entry_editable_set(entry, EINA_FALSE);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
- 
-<h3>Setting the Password Mode</h3>
-
-<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
-
-<pre class="prettyprint">
-elm_entry_password_set(entry, EINA_TRUE);
-</pre>
-
-<h3>Entry Line Modes And Wrapping</h3>
-
-<p>The entry component has two line modes:</p>
-  <ul>
-   <li>single line mode</li>
-   <li>multiline mode</li>
-  </ul>
-
-<p>First, set the entry in single line mode.</p>
-
-<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_TRUE);
-</pre>
-
-<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
-
-<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.</p>
-
-<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_FALSE);
-elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
-</pre>
-
-<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, char wrap</li>
-  </ul>
-
-<h3>Selecting Text</h3>
-
-<p>Text selections can be made with different functions:</p>
-<ul>
-<li>To select all the content of the entry component:
-<pre class="prettyprint">
-elm_entry_select_all(entry);
-</pre>
-</li>
-
-<li>To deselect the current selection:
-<pre class="prettyprint">
-elm_entry_select_none(entry);
-</pre>
-</li>
-
-<li>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The following code selects the first twenty characters of the entry content.
-<pre class="prettyprint">
-elm_entry_select_region_set(entry, 0, 20);
-</pre>
-</li>
-
-<li>To retrieve the currently selected text in an entry:
-<pre class="prettyprint">
-const char *selection;
-
-selection = elm_entry_selection_get(entry);
-</pre>
-</li>
-</ul>
-
-<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>You can copy or cut the selection to the clipboard.</p>
-<pre class="prettyprint">
-elm_entry_selection_cut(entry);
-</pre>
-
-<p>The selection can be pasted in the same or a different entry.</p>
-<pre class="prettyprint">
-elm_entry_selection_paste(entry);
-</pre>
-
-<h3>Controlling the Cursor</h3>
-
-<p>The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.</p>
-<ul>
-<li>To move the cursor to the beginning of the entry:
-<pre class="prettyprint">
-elm_entry_cursor_begin_set(entry);
-</pre>
-</li>
-
-<li>To move the cursor to the end of the entry:
-<pre class="prettyprint">
-elm_entry_cursor_end_set(entry);
-</pre>
-</li>
-
-<li>To move the cursor one line down or up:
-<pre class="prettyprint">
-elm_entry_cursor_down(entry);
-elm_entry_cursor_up(entry);
-</pre>
-</li>
-<li>To move the cursor one character to the left or right:
-<pre class="prettyprint">
-elm_entry_cursor_prev(entry);
-elm_entry_cursor_next(entry);
-</pre>
-</li>
-
-<li>To set the cursor at a specific position (15th character, for example):
-<pre class="prettyprint">
-elm_entry_cursor_pos_set(entry, 15);
-</pre>
-</li>
-</ul>
-
-<p>It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.</p>
-
-<pre class="prettyprint">
-elm_entry_cursor_selection_begin(entry);
-
-for (i = 0; i &lt; 5; i++)
-{
-&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
-}
-
-elm_entry_cursor_selection_end(entry);
-</pre>
-
-<h3>Formatting Text</h3>
-
-<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span>: Inserts a line break.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;ps&gt;</span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;tab&gt;</span>: Inserts a tab.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;em&gt;...&lt;/em&gt;</span>: Emphasis. Sets the oblique style for the enclosed text.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;b&gt;...&lt;/b&gt;</span>: Sets the bold style for the enclosed text.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;link&gt;...&lt;/link&gt;</span>: Underlines the enclosed text.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;hilight&gt;...&lt;/hilight&gt;</span>: Highlights the enclosed text.</li>
-  </ul>
-
-<h3>Using Special Markups</h3>
-
-<p>Special markups can be added within the text of the entry:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;a href = ..&gt;...&lt;/a&gt;</span>: Anchors</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;item size = .. vsize = .. href = ..&gt;...&lt;/item&gt;</span>: Items</li>
-  </ul>
-
-<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
-
-<p>The item markup provides a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name has to be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
-
-<h3>Overriding Style</h3>
-
-<p>To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
-
-<h3>Filtering Text</h3>
-
-<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
-
-<pre class="prettyprint">
-static Elm_Entry_Filter_Limit_Size limit_size = 
-{
-&nbsp;&nbsp;&nbsp;.max_char_count = 8,
-&nbsp;&nbsp;&nbsp;.max_byte_count = 0
-};
-
-// Append a new callback to the list, this function is called each time
-// a text is inserted in the entry. Pass the limit_size struct previously
-// created to set the maximum number of characters allowed to 8
- 
-elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
-</pre>
-
-<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters.</p>
-<pre class="prettyprint">
-static Elm_Entry_Filter_Accept_Set accept_set = 
-{
-&nbsp;&nbsp;&nbsp;.accepted = NULL,
-&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
-};
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
-</pre>
-
-<h3>Loading and Saving Files</h3>
-
-<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
-
-<pre class="prettyprint">
-// Set the file in which the entry text is saved. This function
-// implicitly loads the existing file content 
-elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
-</pre>
-
-<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
-
-<pre class="prettyprint">
-// Disable autosaving 
-elm_entry_autosave_set(entry, EINA_FALSE);
-
-// Trigger saving when needed 
-elm_entry_file_save(entry);
-</pre>
-
-<h3>Using Entry Theme Content</h3>
-
-<p>Two content parts of the default theme are available: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>. The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part.</p>
-<pre class="prettyprint">
-Evas_Object *icon;
-
-ic = elm_icon_add(entry);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(entry, &quot;end&quot;, icon);
-</pre>
-
-<h3>Using Entry Theme Texts</h3>
-
-<p>The default theme allows the use of the following text parts:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">default</span> - text of the entry</li>
-   <li><span style="font-family: Courier New,Courier,monospace">guide</span> - placeholder of the entry</li>
-  </ul>
-
-<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
-
-<pre class="prettyprint">
-elm_object_part_text_set(entry, &quot;Hello World&quot;);
-</pre>
-
-<h3>Using Entry Callbacks</h3>
-
-<p>The entry component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The escape key is pressed on a single line entry.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The enter key is pressed on a single line entry.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: Mouse button is pressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: Mouse cursor is moved into an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: Mouse cursor is moved out of an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: Mouse button is unpressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double clicked.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple clicked.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: Program language is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: A mouse button is pressed and held for a couple of seconds.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: A maximum length is reached.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">press</span>: A mouse button is pressed on the entry.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard contents is requested.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
-  </ul>
-
-<p>For signals, where <span style="font-family: Courier New,Courier,monospace">event_info</span> has not been explicitly described, it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>The following example shows how to register a callback to the <span style="font-family: Courier New,Courier,monospace">focused</span> signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
-}
-
-// Callback function for the &quot;focused&quot; signal
-// This callback is called when the entry receive the focus
-void focused_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
-} 
-</pre>
-  
-
-                               <h2 id="flip" name="flip">Flip</h2>
-  
-<p class="figure">Figure: Flip hierarchy</p> 
-<p align="center"> <img alt="Flip hierarchy" src="../../images/flip_tree.png" /> </p> 
- 
-<p>The flip component can hold two <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> and allows the user flip between them using several pre-defined animations.</p>
-
-<h3>Adding a Flip Component</h3>
-
-<p>The following example shows how to create a flip component.</p>
-
-<pre class="prettyprint">
-Evas_Object *flip, *parent, *content1, *content2;
-flip = elm_flip_add(parent);
-</pre>
-
-<p>You can add content to the flip component. <span style="font-family: Courier New,Courier,monospace">content1</span> is set to the <span style="font-family: Courier New,Courier,monospace">front</span> content and <span style="font-family: Courier New,Courier,monospace">content2</span> is set to the <span style="font-family: Courier New,Courier,monospace">back</span> mode.</p>
-
-<pre class="prettyprint">
-elm_object_part_content_set(flip, &quot;front&quot;, content1);
-elm_object_part_content_set(flip, &quot;back&quot;, content2);
-</pre>
-
-<h3>Configuring Flip Animation</h3>
-
-<p>Now you can run an flip animation.</p>
-<pre class="prettyprint">
-elm_flip_go(flip, ELM_FLIP_CUBE_UP);
-</pre>
-
-<p>This animation flips up the <span style="font-family: Courier New,Courier,monospace">front</span> content object as if it was on a side of a cube, letting the down facing side of the cube appear with the <span style="font-family: Courier New,Courier,monospace">back</span> content object. Several animations are available:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_X_CENTER_AXIS</span>: Rotate the content around a horizontal axis.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_Y_CENTER_AXIS</span>: Rotate the content around a vertical axis.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_XZ_CENTER_AXIS</span>: Rotate the content around a diagonal axis.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_YZ_CENTER_AXIS</span>: Rotate the content around a diagonal axis.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_LEFT</span>: Rotate the content left as if it was on a side of a cube.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_RIGHT</span>: Rotate the content right as if it was on a side of a cube.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_UP</span>: Rotate the content up as if it was on a side of a cube.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_DOWN</span>: Rotate the content down as if it was on a side of a cube.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_LEFT</span>: Move the content to the left as if the flip was a book.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_RIGHT</span>: Move the content to the right as if the flip was a book.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_UP</span>: Move the content up as if the flip was a book.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_DOWN</span>: Move the content down as if the flip was a book.</li>
-  </ul>
-
-<h3>Interacting With the User</h3>
-
-<p>By default, the user cannot interact with the flip. You can set the interaction to be possible, but you have to choose which animation appears on the interaction (rotation has been selected in the following example).</p>
-
-<pre class="prettyprint">
-elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
-</pre>
-
-<p>The available modes of interaction are</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_NONE</span>: No interaction is allowed</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_ROTATE</span>: Interaction causes a rotating animation</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_CUBE</span>: Interaction causes a cube animation</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_PAGE</span>: Interaction causes a page animation</li>
-  </ul>
-
-<p>You must also choose which interaction directions are enabled. Only right and left are enabled in the following example.</p>
-
-<pre class="prettyprint">
-elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
-elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
-</pre>
-
-<p>You can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.</p>
-
-<pre class="prettyprint">
-elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
-elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
-</pre>
-
-<h3>Using the Flip Callbacks</h3>
-
-<p>Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<pre class="prettyprint">
-&quot;animate,begin&quot; - A flip animation is started
-&quot;animate,done&quot; - A flip animation is finished
-</pre>
-
-<p>You can register a callback on the &quot;animation,begin&quot; signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;animate,begin&quot;, anim_start_cb, data);
-}
-
-// Callback function for the &quot;animate,begin&quot; signal
-// This callback is called when the flip animation starts
-void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Animation starts\n&quot;);
-}</pre>
-
-                               <h2 id="gengrid" name="gengrid">Gengrid</h2>
-  
-<p class="figure">Figure: Gengrid component</p> 
-<p align="center"> <img alt="Gengrid component" src="../../images/gengrid.png" /> </p> 
- 
-<p class="figure">Figure: Gengrid hierarchy</p> 
-<p align="center"> <img alt="Gengrid hierarchy" src="../../images/gengrid_tree.png" /> </p> 
- 
-<p>Gengrid component is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.</p>
-
-<p>This UI component inherits from the layout component and implements the scroller interface. Because of this, the scroller and layout functions can be used with this UI component.</p>
-
-<p>A gengrid can display its items using a horizontal or vertical layout. In the first layout, the items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.</p>
-
-<h3>Adding a Gengrid Component</h3>
-
-<p>You can add a gengrid component with the following code.</p>
-<pre class="prettyprint">
-Evas_Object *gengrid, *parent;
-gengrid = elm_gengrid_add(parent);
-</pre>
-
-<h3>Gengrid Items</h3>
-
-<p>A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or more boolean states. The number of the text and content depends on the theme used for gengrid items. In the default Tizen gengrid item theme, items can have two content parts that can be set with the <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> part names.</p>
-
-<h3>Creating and Deleting Items</h3>
-
-<p>As with genlists, the items are allocated and deleted on the go, while the user is scrolling the gengrid. The following example shows how to declare a <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> structure to inform the gengrid how to manage items.</p>
-<pre class="prettyprint">
-static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
-gic-&gt;item_style = &quot;default&quot;;
-gic-&gt;func.text_get = _grid_label_get;
-gic-&gt;func.content_get = _grid_content_get;
-gic-&gt;func.state_get = _grid_state_get;
-gic-&gt;func.del = _grid_del;
-</pre>
-
-<p>The parameters of this structure are not be detailed here, because they are very similar to that of the genlist. Please refer to the genlist component page for more detailed information.</p>
-
-<h3>Managing Items</h3>
-
-<p>As with genlists, items can be added with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_prepend()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_before()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_after()</span> functions. With the gengrid, there is no need to pass the <span style="font-family: Courier New,Courier,monospace">type</span> parameters. They can be cleared with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function.</p>
-
-<p>You can set the multiselection mode on.</p>
-<pre class="prettyprint">
-elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
-</pre>
-
-<p>When the multiselection mode is on, the selected items are retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_items_get()</span> function. The function returns a list of all the selected items.</p>
-
-<p>When the content of an item changes, you can call <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> to ask the gengrid to update this item&#39;s content.</p>
-
-<p>It is also possible to select or disable some items manually with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> functions.</p>
-
-<h3>Using Gengrid Callbacks</h3>
-
-<p>The gengrid component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is activated.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is double-clicked.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. By default it is one second.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user has selected an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is selected.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user has unselected an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is unselected.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item in the gengrid has its implementing Evas object instantiated, de facto. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the gengrid item that is created. The object can be deleted at any time, so it is strongly advisable not to use the object pointer returned from <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_object_get()</span>, because it can point to freed objects.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: The implementing Evas object for this item is deleted. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the gengrid item that is deleted.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: An item is added, removed, resized or moved and the gengrid is resized or has <span style="font-family: Courier New,Courier,monospace">horizontal</span> property changes.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the gengrid is dragged (not scrolled) up.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the gengrid has dragged (not scrolled) down.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the gengrid is dragged (not scrolled) left.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the gengrid is dragged (not scrolled) right.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the gengrid stops being dragged.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the gengrid is dragged.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li>
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content starts.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content stops.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The gengrid is scrolled to the top edge.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The gengrid is scrolled to the bottom edge.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The gengrid is scrolled to the left edge.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The gengrid is scrolled to the right edge.</li>
-  </ul>
-
-                               <h2 id="genlist" name="genlist">Genlist</h2>
-  
-<p class="figure">Figure: Genlist component</p> 
-<p align="center"> <img alt="Genlist component" src="../../images/genlist.png" /> </p> 
-
-<p class="figure">Figure: Genlist hierarchy</p> 
-<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p> 
-
-<p>Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
-
-<p>For more information, see the <a href="../../../../org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm">Genlist Tutorial</a>.</p>
-
-<h3>Genlist Item Style</h3>
-
-<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides one text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), two content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>) and no state parts.</p>
-
-<p>The following item styles are available:</p>
-  <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">full</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">one_icon</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">end_icon</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">group_index</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">double_label</span></li>
-  </ul>
-
-<p>Here are some examples of the item styles.</p>
-
-<p class="figure">Figure: Default item style</p> 
-<p align="center"> <img alt="Default item style" src="../../images/gl-default.png" /> </p> 
-
-<p class="figure">Figure: end_icon item style</p> 
-<p align="center"> <img alt="end_icon item style" src="../../images/gl-end-icon.png" /> </p> 
-
-<p class="figure">Figure: double_label item style</p> 
-<p align="center"> <img alt="double_label item style" src="../../images/gl-double-label.png" /> </p> 
-
-<p>For more information on creating a new genlist item style, see <a href="preferences_n.htm#customize">Customizing UI Components</a>.</p>
-
-<h3>Adding a Genlist Component</h3>
-
-<p>A genlist component is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *genlist, *parent;
-genlist = elm_genlist_add(parent);
-</pre>
-
-<h3>Creating And Deleting Items</h3>
-
-<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist component which callbacks to call when an item is created or deleted.</p>
-
-<pre class="prettyprint">
-Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-
-itc-&gt;item_style = &quot;default&quot;;
-itc-&gt;decorate_item_style = NULL;
-itc-&gt;decorate_all_item_style = NULL;
-itc-&gt;func.text_get = _item_label_get;
-itc-&gt;func.content_get = _item_content_get;
-itc-&gt;func.state_get = _item_state_get;
-itc-&gt;func.del = _item_del;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">text_get</span>
-   <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item&#39;s theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
-
-   <li><span style="font-family: Courier New,Courier,monospace">content_get</span>
-   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
-
-   <li><span style="font-family: Courier New,Courier,monospace">state_get</span>
-   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item&#39;s theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter&#39;s theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> argument, when the state is true. xxx is the name of the (state) part.</p></li>
-
-   <li><span style="font-family: Courier New,Courier,monospace">del</span>
-   <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
-</ul>
-
-<h3>Managing Items</h3>
-
-<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
-
-<p>The previous functions take a <span style="font-family: Courier New,Courier,monospace">type</span> parameter that can be one of the following.</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
-  </ul>
-
-<p>If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span> is set, this item is displayed as being able to expand and have child items. If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> is set, this item is a group index item that is displayed at the top until the next group appears.</p>
-
-<p class="figure">Figure: Genlist tree</p> 
-<p align="center"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p> 
-
-<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
-
-<p>To help inspect the list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
-<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
-
-<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> for it.</p>
-
-<h3>Selection</h3>
-
-<p>Items are manually selected or deselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In the single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
-
-<p>In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
-
-<p class="figure">Figure: Genlist component</p> 
-<p align="center"> <img alt="Genlist component" src="../../images/genlist_multi.png"/> </p> 
-
-<h3>Using Genlist Callbacks</h3>
-
-<p>The genlist component emits the following signals:</p>
-   <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. event_info in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>, that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is one second. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch swiped left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch swiped right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch swiped up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch swiped down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch pinched out. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch pinched in. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program&#39;s language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-  </ul>
-
-               
-                               <h2 id="glview" name="glview">GLView</h2>
-
-      <p class="figure">Figure: GLView gears example</p> 
-  <p align="center"><img alt="GLView gears example" src="../../images/glview.png" /></p> 
-  
-      <p class="figure">Figure: GLView hierarchy</p> 
-  <p align="center"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
-
-
-<p> The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
-
-<h3>Adding a GLView Component</h3>
-
-<p>Create a GLView component with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *glview, *parent;
-
-glview = elm_glview_add(parent);
-</pre>
-
-<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
-<pre class="prettyprint">
-elm_glview_size_set(glview, 200, 200);
-</pre>
-
-<h3>Using the GLView API</h3>
-
-<p>You can configure the GLView rendering mode by activating the following rendering modes:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
-</ul>
-
-<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
-<pre class="prettyprint">
-elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
-</pre>
-
-<p>The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
-<pre class="prettyprint">
-elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
-</pre>
-
-<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
-
-<p>The following example shows how to set the GLView rendering policy.</p>
-<pre class="prettyprint">
-elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
-</pre>
-
-<p>The GLView object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where the GLView component is redrawn only when it is visible.</p>
-
-<p>Register the callbacks:</p>
-
-<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
-elm_glview_del_func_set(glview, _del_gl_cb);
-elm_glview_resize_func_set(glview, _resize_gl_cb);
-elm_glview_render_func_set(glview, _draw_gl_cb);
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</li>
-</ul>
-
-<h3>Using GLView Callbacks</h3>
-
-<p>The GLView component emits the following signals:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The Glview component is focused. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
-</ul>
-
-<p>To register a callback:</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
-}
-
-// Callback function for the &quot;focused&quot; signal
-// This callback is called when the GLView is focused
-void focused_cb(void *data, Evas_Object *obj, void  *event_info)
-{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
-}
-</pre>
-
-                               <h2 id="icon" name="icon">Icon</h2>
-  
-<p class="figure">Figure: Icon component</p> 
-<p align="center"> <img alt="Icon component" src="../../images/icon.png" /> </p> 
- 
-<p class="figure">Figure: Icon hierarchy</p> 
-<p align="center"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p> 
-  
-<p>The icon component inherits from the image component. It is used to display images in an icon context.</p>
-
-<h3>Adding an Icon Component</h3>
-
-<p>You can create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon.</p>
-
-<pre class="prettyprint">
-Evas_Object *icon, *parent;
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, &quot;Home&quot;);
-</pre>
-
-<h3>Changing Image File</h3>
-
-<p>You can change the image by using an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>).</p>
-<pre class="prettyprint">
-elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
-</pre>
-
-<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
-<pre class="prettyprint">
-elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
-</pre>
-
-<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
-
-<pre class="prettyprint">
-elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
-</pre>
-
-<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
-
-<h3>Using Icon Callbacks</h3>
-
-<p>The icon component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
-  </ul>
-
-<p>In both cases, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-               
-                               <h2 id="image" name="image">Image</h2>
-
-<p class="figure">Figure: Image component</p> 
-<p align="center"> <img alt="Image component" src="../../images/image.png" /> </p>   
-
-<p class="figure">Figure: Image hierarchy</p> 
-<p align="center"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>   
-
-<p>The image component can load and display an image from a disk file or a memory region.</p>
-
-<h3>Adding an Image Component</h3>
-
-<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *image, *parent;
-image = elm_image_add(parent);
-</pre>
-
-<h3>Configuring the Image Component</h3>
-
-<p>Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.</p>
-<pre class="prettyprint">
-elm_image_no_scale_set(image, EINA_TRUE);
-elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
-</pre>
-
-<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
-<pre class="prettyprint">
-elm_image_smooth_set(image, EINA_TRUE);
-</pre>
-
-<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
-<pre class="prettyprint">
-elm_image_preload_disabled_set(image, EINA_TRUE);
-</pre>
-
-<p>The image can be rotated or flipped. Here the image is rotated 180 degrees.</p>
-<pre class="prettyprint">
-elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
-</pre>
-
-<p>The following orientations are available:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise</li>   
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line</li>
-  </ul>
-  
-<p>If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object&#39;s area.</p>
-<pre class="prettyprint">
-// Tell the image to keep original aspect ratio 
-elm_image_aspect_fixed_set(image, EINA_TRUE);
-// Then let the image fill the entire object 
-elm_image_fill_outside_set(image, EINA_TRUE);
-</pre>
-
-<p>In this configuration, part of the image can go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
-
-<h3>Using Image Callbacks</h3>
-
-<p>The image component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">drop</span>: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks the image. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-  </ul>
-
-<p>To register a callback when a user clicks on the image:</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
-}
-
-// Callback function for the &quot;clicked&quot; signal
-// This callback is called when the image is clicked
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
-}
-</pre>  
-
-                               <h2 id="index" name="index">Index</h2>
-  
-<p class="figure">Figure: Index component</p> 
-<p align="center"> <img alt="Index component" src="../../images/index.png" /> </p> 
- 
-<p class="figure">Figure: Index hierarchy</p> 
-<p align="center"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p> 
- 
-<p>An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component&#39;s container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
-
-<h3>Adding an Index Component</h3>
-
-<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function to create a new index component.</p>
-<pre class="prettyprint">
-Evas_Object *index, *parent;
-index = elm_index_add(parent);
-</pre>
-
-<h3>Adding Items</h3>
-
-<p>The following example shows how to add the listitem object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
-<pre class="prettyprint">
-Elm_Object_Item *list_item1, *list_item2;
-elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
-</pre>
-
-<p>The following example shows how to define the smart callback.</p>
-<pre class="prettyprint">
-// Callback function called when the list_item1 object
-// is selected
-void it_select_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item1 selected\n&quot;);
-}
-</pre>
-
-<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
-
-<h3>Sorting Index Items</h3>
-
-<p>You can insert index items using a sorting function. Indexes can be sorted, for example, by alphabetic order.</p>
-
-<p>You must write a compare function that returns a positive <span style="font-family: Courier New,Courier,monospace">int</span>, 0 or a negative <span style="font-family: Courier New,Courier,monospace">int</span> when the <span style="font-family: Courier New,Courier,monospace">data2</span> item parameter is respectively greater than, equal to or lower than the <span style="font-family: Courier New,Courier,monospace">data1</span> parameter.</p>
-
-<pre class="prettyprint">
-static int
-_index_icmp(const void *data1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const void *data2)
-{
-&nbsp;&nbsp;&nbsp;int result;
-
-&nbsp;&nbsp;&nbsp;// Code that does the item comparison is written here
-
-&nbsp;&nbsp;&nbsp;return result;
-}
-</pre>
-
-<p>This example shows how to add a new item at the <span style="font-family: Courier New,Courier,monospace">B</span> index using the compare function to sort the indexes.</p>
-
-<pre class="prettyprint">
-elm_index_item_sorted_insert(index, &quot;B&quot;, NULL, list_item2, _index_icmp, NULL);
-</pre>
-
-<h3>Using Index Callbacks</h3>
-
-<p>The index component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user releases a mouse button and selects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
-  </ul>
-
-<p>When the user selects an item in the index, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
-<pre class="prettyprint">
-static void
-_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *lit = event_info;
-
-&nbsp;&nbsp;&nbsp;// Code that does the desired action
-}
-</pre>
-
-<p>After that, the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is registered.</p>
-<pre class="prettyprint">
-evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb, NULL);
-</pre>
-
-                       
-                               <h2 id="label" name="label">Label</h2>
-  
-<p class="figure">Figure: Label component</p> 
-<p align="center"> <img alt="Label component" src="../../images/label.png" /> </p> 
- 
-<p class="figure">Figure: Label hierarchy</p> 
-<p align="center"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p> 
-
-<p>The label component displays text with simple html-like markup.</p>
-
-<h3>Adding a Label Component</h3>
-
-<p>To add a label and set the text in it, use the following functions.</p>
-
-<pre class="prettyprint">
-Evas_Object *label = elm_label_add(win);
-
-elm_object_text_set(label, &quot;Some long text for our label, that is not so long&quot;);
-</pre>
-
-<h3>Using the Label Styles</h3>
-
-<p>Label displays the text with several predefined styles.</p>
-  <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>   
-  </ul>
-
-<p>Here the style is set to <span style="font-family: Courier New,Courier,monospace">slide_long</span>.</p>
-
-<pre class="prettyprint">
-elm_object_style_set(label, &quot;slide_long&quot;);
-</pre>
-
-<h3>Configuring the Label</h3>
-
-<p>The duration of the animation and the slide mode can be set with the following functions.</p>
-<pre class="prettyprint">
-elm_label_slide_duration_set(label, 3);
-elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
-</pre>
-
-<p>Use the following function to modify the style.</p>
-<pre class="prettyprint">
-elm_object_style_set(label, &quot;slide_bounce&quot;);
-</pre>
-
-<h3>Using the Label Callbacks</h3>
-
-<p>This UI component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program&#39;s language changes.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
-  </ul>
-  
-<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
-}
-
-// Callback function for the &quot;slide,end&quot; signal
-// This callback is called when the label slide reaches the end
-void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
-}
-</pre>
-
-       <h2 id="list" name="list">List</h2>
-       
- <p class="figure">Figure: List component</p> 
-<p align="center"> <img alt="List component" src="../../images/list.png" /> </p> 
-  
-  <p class="figure">Figure: List hierarchy</p> 
-<p align="center"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p> 
- 
-  
- <p>This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
-
- <p>The list items can contain a text and two contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
-
-<h3>Adding a List Component</h3>
-
-<pre class="prettyprint">
-Evas_Object *list, *parent;
-
-// Create a list 
-list = elm_list_add(parent);
-</pre>
-
-<h3>Using the List</h3>
-
-<p>This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-
-// Change the scroller policy to fix the scroll only vertically
-elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
-// Enable bounce effect when the list reaches the upper and lower limits 
-elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-
-// Activate multi selection 
-elm_list_multi_select_set(list, EINA_TRUE);
-</pre>
-
-<h3>Adding Item to the List</h3>
-
- <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-int i;
-
-// This function is called when the list item is selected 
-static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
-&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
-}
-
-for (i = 0; i &lt; 10; i++)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *ic;
-&nbsp;&nbsp;&nbsp;char tmp[8];
-&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
-&nbsp;&nbsp;&nbsp;// Create an icon 
-&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
-&nbsp;&nbsp;&nbsp;// Set the file to the icon file 
-&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
-&nbsp;&nbsp;&nbsp;// Add item to the list 
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
-}
-
-</pre>
- 
-<h3>Changing the Text or Icon of an Item</h3>
-
-<p>If you want to change the state of an item, you can do it by using all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains two instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth arguments when you append or prepend the item in the list. The <span style="font-family: Courier New,Courier,monospace">evas_object</span> instances are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, whereas the second one is referenced as the <span style="font-family: Courier New,Courier,monospace">end</span> object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-Eina_List *l;
-Elm_Object_Item *it;
-
-// Retrieve the current selected item 
-it = elm_list_selected_item_get(list);
-if (!it)
-&nbsp;&nbsp;&nbsp;return;
-
-ic = elm_icon_add(win);
-// Set the file to the icon file 
-elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
-// Change the first icon 
-elm_object_item_part_content_set(it, &quot;start&quot;, ic);
-// Change the second icon 
-elm_object_item_part_content_set(it, &quot;end&quot;, ic);
-// Change the label 
-elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
-</pre>
-  
-<h3>Retrieving Selected Items</h3>
-
- <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
-
-<pre class="prettyprint">
-Evas_Object *list; Eina_List *l;
-Eina_List *selected_items;
-// List of Elm_Object_Item 
-Elm_Object_Item *it;
-
-selected_items = elm_list_selected_items_get(list);
-EINA_LIST_FOREACH(selected_items, l, it)
-&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
-</pre>
-
-<h3>List Item Operations</h3>
-
- <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-
- <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
-
- <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
-
- <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-Elm_Object_Item *current, *next;
-current = elm_list_selected_item_get(list);
-elm_list_item_selected_set(current, EINA_FALSE);
-next = elm_list_item_next(current);
-elm_list_item_selected_set(next, EINA_TRUE);
-elm_list_item_bring_in(next);
-</pre>
-
-<h3>Using List Callbacks</h3>
-
- <p>The list emits the following signals: </p> 
-  <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user double-clicks or presses (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: The user highlights an item on the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The user unhighlights an item in the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>  
-  </ul>
-
-<p>You can register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal with the following code. Note that the currently double-clicked item can be retrieved using the <span style="font-family: Courier New,Courier,monospace">event_info</span> pointer. This code registers to the <span style="font-family: Courier New,Courier,monospace">double,clicked</span> signal and unselects the item that has been double-clicked.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *list;
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
-}
-
-// Callback function for the &quot;clicked&quot; signal
-// This callback is called when the button is clicked by the user
-void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
-{
-&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
-&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it,  EINA_FALSE);
-}
-</pre>
-       
-<h2 id="map" name="map">Map</h2>
-  
-<p class="figure">Figure: Map hierarchy</p> 
-<p align="center"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>   
-
-<p>The map component displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
-
-<p>This UI component supports:</p>
-  <ul> 
-   <li>Zooming</li> 
-   <li>Scrolling</li> 
-   <li>Markers with content to be displayed when the user clicks over them</li> 
-   <li>Group of markers</li>   
-   <li>Routes</li> 
-  </ul>
-
-<p>The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.</p>
-
-<h3>Adding a Map Component</h3>
-
-<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
-
-<pre class="prettyprint">
-Evas_Object *map, *parent;
-
-map = elm_map_add(parent);
-elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
-elm_map_zoom_set(map, 12);
-</pre>
-
-<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
-
-<h3>Playing with the Map</h3>
-
-<p>If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.</p>
-<pre class="prettyprint">
-elm_map_region_show(map, 2.2, 48.8);
-</pre>
-
-<p>This shows the desired coordinates. The location can also be shown with a bring-in animation.</p>
-<pre class="prettyprint">
-elm_map_region_bring_in(map, 2.2, 48.8);
-</pre>
-
-<p>The map is rotated 90 degrees around the current position.</p>
-<pre class="prettyprint">
-elm_map_rotate_set(map, 90, 2.2, 48.8);
-</pre>
-
-<h3>Drawing Overlays</h3>
-
-<p>Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.</p>
-
-<h4>Creating an Overlay Class</h4>
-
-<p>Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
-
-<p>Set an icon (&quot;Home&quot; icon) to the forest class. This icon is displayed in place of the forest class on the map.</p>
-<pre class="prettyprint">
-Evas_Object *icon;
-Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
-
-// Set min zoom level at which class is displayed
-elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
-
-// Create a Home icon object and set it to the forest class 
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, &quot;home&quot;);
-elm_map_overlay_icon_set(forest_class, icon);
-</pre>
-
-<h4>Adding Overlays to a Class</h4>
-
-<p>After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. Set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-<pre class="prettyprint">
-Elm_Map_Overlay *ovl;
-const char* data_meudon = &quot;Meudon forest&quot;;
-const char* data_fausses = &quot;Fausse forest&quot;;
-
-// Add an overlay
-ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, &quot;stop&quot;);
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &amp;data_meudon);
-
-// Add the new ovl object to the forest class 
-elm_map_overlay_class_append(forest_class, ovl);
-
-// Add another overlay next to the first one 
-ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, &quot;stop&quot;);
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &amp;data_fausses);
-elm_map_overlay_class_append(forest_class, ovl);
-</pre>  
-
-<p>If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.</p>
-<pre class="prettyprint">
-elm_map_overlay_class_zoom_max_set(forest_class, 8);
-</pre>
-
-<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
-
-<h4>Creating Bubbles Following Overlays</h4>
-
-<p>The following example shows how to set a content in a bubble following an overlay.</p>
-
-<pre class="prettyprint">
-// Add an overlay bubble object 
-Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
-
-// Set it to follow a specific overlay (the last created one here) 
-elm_map_overlay_bubble_follow(bubble, ovl);
-</pre>
-
-<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay&#39;s behavior.</p>
-
-<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
-
-<h3>Adding Other Overlays</h3>
-
-<p>You can draw a circle on the map with coordinates and a radius size.</p>
-<pre class="prettyprint">
-Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
-</pre>
-
-<p>You can also add a scale at the 200x0 coordinate (in pixels).</p>
-<pre class="prettyprint">
-Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
-</pre>
-
-<p>You can also draw a line, a polygon, or a route. For a full description of these functions, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Map.html">Map API</a>.</p>
-
-<h3>Calculating Routes</h3>
-
-<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
-
-<p>The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.</p>
-
-<pre class="prettyprint">
-Elm_Map_Route *route = elm_map_route_add(map,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_TYPE_BICYCLE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_METHOD_FASTEST,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.20718, 48.79759,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.1699, 48.8189,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL);
-
-// Add a callback to when the route has been calculated and loaded 
-evas_object_smart_callback_add(map, &quot;route,loaded&quot;, _route_loaded_cb, route);
-</pre>
-
-<p>Once the route is calculated, create a route overlay object and change its color. In this example, the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback is used.</p>
-<pre class="prettyprint">
-static void
-_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
-{
-&nbsp;&nbsp;&nbsp;Elm_Map_Route *route = data;
-
-&nbsp;&nbsp;&nbsp;Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
-&nbsp;&nbsp;&nbsp;elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
-}
-</pre>     
-
-<h3>Using Map Callbacks</h3>
-
-<p>The map component emits the following callbacks:</p>
-<ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the map without dragging around.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the map.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the map.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the map for a long time without dragging around.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the contents around starts.</li>  
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the contents around stops.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">tile,load</span>: A map tile image load begins.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: A map tile image load ends.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: A map tile image load fails.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: Route request begins.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: Route request ends.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: Route request fails.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: Name request begins.</li>   
-   <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: Name request ends.</li>   
-   <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: Name request fails.</li>   
-   <li><span style="font-family: Courier New,Courier,monospace">overlay,clicked</span>: An overlay is clicked.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The map is loaded.</li>
-</ul>
-
-               
-                               <h2 id="notify" name="notify">Notify</h2>
-  
-  <p class="figure">Figure: Notify hierarchy</p> 
-<p align="center"> <img alt="Notify hierarchy" src="../../images/notify_tree.png" /> </p> 
-
-  <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
-
-<h3>Adding a Notify Component</h3> 
-  
-<p>The following example shows how to create a notify object.</p>
-
-<pre class="prettyprint">
-Evas_Object *notify, *parent;
-notify = elm_notify_add(parent);
-</pre>
-
-<h3>Configuring the Notify Component</h3> 
-
-<p>Create a label and add it to the notify object.</p>
-
-<pre class="prettyprint">
-Evas_Object *content;
-
-// Create the label and set some text to it 
-content = elm_label_add(parent);
-
-elm_object_text_set(content, &quot;A label text&quot;);
-evas_object_show(content);
-
-// Add the label object to the notify component
-elm_object_content_set(notify, content);
-</pre>
-
-<p>In the following example the notify object is shown on the bottom left corner of the parent object.</p>
-
-<pre class="prettyprint">
-elm_notify_align_set(notify, 1.0, 1.0);
-evas_object_show(notify);
-</pre>
-
-<p>Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.</p>
-
-<pre class="prettyprint">
-elm_notify_timeout_set(notify, 5.0);
-</pre>
-
-<h3>Using Notify Callbacks</h3> 
-
-<p>The notify component emits the following signals:</p>
- <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The timeout count ends and the notify component is hidden</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks outside of the notify component</li> 
-  </ul>
-
-<p>For both these signals <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(notify, &quot;timeout&quot;, timeout_cb, data);
-}
-
-// Callback function for the &quot;timeout&quot; signal
-// The timeout expires and the notify object is hidden
- 
-void timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Notify is hidden\n&quot;);
-}
-</pre>
-
-               
-                               <h2 id="panel" name="panel">Panel</h2>
-                               
-                               
-  <p class="figure">Figure: Panel hierarchy</p> 
-<p align="center"> <img alt="Panel hierarchy" src="../../images/panel_tree.png" /> </p> 
-   <p>The panel component is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.</p>
-
-   <p>Panel inherits from layout component, so the layout API can be used on this UI component.</p>
-
-<h3 id="add_panel">Adding a Panel Component</h3>
-
-<p>The following example shows how to add a panel and set its orientation to the left.</p>
-
-<pre class="prettyprint">
-Evas_Object *panel, *parent;
-
-panel = elm_panel_add(parent);
-elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
-</pre>
-
-<h3 id="use_panel">Using the Panel</h3>
-
-<p>The panel can be manually hidden.</p>
-<pre class="prettyprint">
-elm_panel_hidden_set(pan, EINA_TRUE);
-</pre>
-
-<p>The panel can be toggled if you do not know the hidden state of the UI component.</p>
-<pre class="prettyprint">
-elm_panel_toggle(pan);
-</pre>
-
-<p>The panel can be set scrollable.</p>
-<pre class="prettyprint">
-elm_panel_scrollable_set(pan, EINA_TRUE);
-</pre>
-
-<h3 id="create_drawer">Creating a Drawer</h3>
-
-<p>Tizen SDK has implemented a layout theme to add a drawer in the application. This example shows how to add a new Elementary layout object and set the theme of this layout to the drawer.</p>
-
-<pre class="prettyprint">
-Evas_Object *layout;
-
-// Create a new layout object 
-layout = elm_layout_add(parent);
-
-// Set the &quot;drawer&quot; group theme and &quot;panel&quot; style to it 
-elm_layout_theme_set(layout,&quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
-
-// Show the new layout
-evas_object_show(layout);
-</pre>
-
-<p>Once the panel object is created, it can be swallowed in the new layout.</p>
-
-<pre class="prettyprint">
-elm_object_part_content_set(layout, &quot;elm.swallow.left&quot;, pan);
-</pre>
-
-<p>You can set content to the <span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> parts of the layout.</p>
-<pre class="prettyprint">
-// Panel Background (Dimmed Area) 
-Evas_Object *bg = create_bg(layout);
-elm_object_part_content_set(layout, &quot;elm.swallow.bg&quot;, bg);
-
-// Add content to the drawer 
-Evas_Object *content;
-elm_object_part_content_set(layout, &quot;elm.swallow.content&quot;, content);
-</pre>
-
-<h3 id="panel_cb">Using Panel Callbacks</h3>
-
-<p>You can register a callback on the <span style="font-family: Courier New,Courier,monospace">scroll</span> signal, when the user scrolls the panel. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is of the type <span style="font-family: Courier New,Courier,monospace">Elm_Panel_Scroll_Info</span>.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pan, &quot;scroll&quot;, scroll_cb, data);
-}
-// Callback function for the &quot;scroll&quot; signal
-// This callback is called when the user scrolls the panel
-void scroll_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Panel_Scroll_Info *scrollinfo = event_info;
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The panel was scrolled.\n&quot;);
-}
-</pre>
-
-       
-                               <h2 id="photo" name="photo">Photo</h2>
-  
-  <p class="figure">Figure: Photo hierarchy</p> 
-<p align="center"> <img alt="Photo hierarchy" src="../../images/photo_tree.png" /> </p> 
-  
- <p>The photo component is used to display a photo, such as a contact image. If no photo is set on it, it displays a person icon to show that it is a photo placeholder.</p> 
-  
-<h3 id="add_photo">Adding a Photo Component</h3>  
-
- <p>The following example shows how to create a photo object.</p> 
-
- <pre class="prettyprint">
-Evas_Object *photo, *parephotoslider = elm_photo_add(parent);
-photo = elm_photo_add(parent);
-</pre>
-
-<h3 id="use_photo">Using a Photo Component</h3>  
-
- <p>A file can be set to the photo component. Here, <span style="font-family: Courier New,Courier,monospace">PHOTO_FILENAME</span> is a string corresponding to the photo file name on the system.</p> 
-<pre class="prettyprint">
-elm_photo_file_set(photo, PHOTO_FILENAME);</pre>
-
-<p>The photo can be set as editable, and it can be copied, cut, or dragged in another region of the screen.</p> 
-<pre class="prettyprint">
-elm_photo_editable_set(photo, EINA_TRUE);</pre>
-
-<p>The photo can also be completely visible on the screen.</p>
-
-<pre class="prettyprint">
-elm_photo_fill_inside_set(photo, EINA_TRUE);</pre>
-
-<h3 id="use_photo_cb">Using Photo Callbacks</h3> 
-
- <p>The following callbacks are registered on the photo component.</p>
-  <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the photo.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start</span>: The user starts dragging the inner image out of the photo&#39;s frame.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,end</span>: The user drops the dragged image.</li>    
-  </ul>
-
-<p><span style="font-family: Courier New,Courier,monospace">event_info</span> is always <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-               
-                               <h2 id="photocam" name="photocam">Photocam</h2>
-
-  <p class="figure">Figure: Photocam hierarchy</p> 
-<p align="center"> <img alt="Photocam hierarchy" src="../../images/photocam_tree.png" /> </p> 
-  
-  <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for <span style="font-family: Courier New,Courier,monospace">.jpeg</span> images format and has a low memory footprint.</p>
-
-  <p>This UI component implements the scroller interface, so all the functions concerning the scroller can be used with the photocam component.</p>
-
-<h3 id="add_photocam">Adding a Photocam Component</h3>
-
-<p>The following example shows how to create a photocam component and set an image file on it.</p>
-
-<pre class="prettyprint">
-Evas_Object *photocam;
-photocam = elm_photocam_add(win);
-elm_photocam_file_set(photocam, &quot;/tmp/photo.jpeg&quot;);
-</pre>
-
-<h3 id="use_zoom">Using Photocam Zoom</h3>
-
-<p>You can choose between two automatic zoom modes and a manual zoom mode. In the following example the zoom mode is set to manual and a double zoom is requested.</p>
-<pre class="prettyprint">
-elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
-elm_photocam_zoom_set(photocam, 2.0);
-</pre>
-
-<p>The zoom mode can be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span>. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> to fill all the pixels of the photocam component.</p>
-
-<p>Multi-touch zooming is activated by enabling gestures.</p>
-<pre class="prettyprint">
-elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
-</pre>
-
-<p>You can zoom in a specific region. The following example shows how to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.</p>
-
-<pre class="prettyprint">
-elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
-</pre>
-
-<h3 id="photocam_cb">Using Photocam Callbacks</h3>
-
-<p>The photocam component emits the following signals:</p>
-<ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the photo without dragging around.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the photo.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the photo for a long time without dragging around.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the photo.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">load</span>: The photo load begins.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The image file load is complete for the first view (a low resolution blurry version).</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">load,detail</span>: A photo detailed data load begins.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">loaded,detail</span>: The image file load is complete for the detailed image data (full resolution is needed).</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content around starts.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content around stops.</li> 
-  </ul>
-
-<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">loaded</span> signal.</p>
-
-<pre class="prettyprint">
-void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(photocam, &quot;loaded&quot;, loaded_cb, data);
-}
-
-// Callback function for the &quot;loaded&quot; signal
-// The photocam has loaded the photo file in a low resolution
- 
-void loaded_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The photo has been loaded\n&quot;);
-}
-</pre>
-
-                               <h2 id="plug" name="plug">Plug</h2>
-  
-  <p class="figure">Figure: Plug hierarchy</p> 
-<p align="center"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p> 
-
-<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by an other process. It can be used anywhere the same way as any other elementary UI component.</p>
-
-<h3 id="add_plug">Adding a Plug Component</h3>  
-
-<p>The following example shows how to create a plug.</p>
-
-<pre class="prettyprint">
-Evas_Object *plug, *parent;
-plug = elm_plug_add(parent);
-</pre>
-
-<h3 id="use_plug">Using the Plug</h3>
-
-<p>The socket image provides the service where to connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process, use the service name and number set by the socket you want to connect to.</p>
-
-<p>As an example, connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
-
-<pre class="prettyprint">
-elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
-
-<pre class="prettyprint">
-Evas_Object *plug_img = elm_plug_image_object_get(plug);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called <span style="font-family: Courier New,Courier,monospace">remote_win</span> here).</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<pre class="prettyprint">
-// Create a remote window in the other process 
-Elm_Win *remote_win = elm_win_add(NULL, &quot;Window Socket&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_WIN_SOCKET_IMAGE);
-// Create a socket named &quot;plug_test&quot; and listen to it
-elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
-</pre>
-
-                               <h2 id="popup" name="popup">Popup</h2>
-  
-<p class="figure">Figure: Popup component</p> 
-<p align="center"><img alt="Popup component" src="../../images/popup.png" /></p>
-      
-<p class="figure">Figure: Popup hierarchy</p> 
-<p align="center"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
-  
-
-<p> The popup component shows a popup area that can contain:</p>
-<ul>
-<li>a title area (optional)</li>
-<li>a content area</li>
-<li>an action area (optional)</li>
-</ul>
-
-<p>The optional title area can contain an icon and text, the action area can contain up to three buttons.</p>
-
-<h3>Adding a Popup Component</h3>
-
-<p>The following example shows how to create a popup component.</p>
-<pre class="prettyprint">
-Evas_Object *popup, *parent;
-
-// Create a popup 
-popup = elm_popup_add(parent);
-</pre>
-
-<h3>Using Popup Styles</h3>
-
-<p>The following item styles are available for the popup:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
-</ul>
-
-<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
-
-<pre class="prettyprint">elm_object_style_set(popup, &quot;toast&quot;);</pre>
-
-<h3>Setting the Popup Areas</h3>
-
-<p>Configure the title area. Set the icon object using the part name <span style="font-family: Courier New,Courier,monospace">title,icon</span>. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *icon;
-
-// Add an icon to the title area 
-elm_object_part_content_set(popup, &quot;title,icon&quot;, icon);
-
-// Set the title text 
-elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
-</pre>
-
-<p>Set the content of the popup. The content can be simple text.</p>
-
-<pre class="prettyprint">
-elm_object_part_text_set(popup, &quot;default&quot;, &quot;Test popup&quot;);
-</pre>
-
-<p>The content can also be an Evas object.</p>
-
-<pre class="prettyprint">
-Evas_Object *content;
-
-elm_object_content_set(popup, content);
-</pre>
-
-<p>Set the buttons of the action area by creating an <strong>OK</strong> button, a <strong>Cancel</strong> button, and a <strong>Help</strong> button.</p>
-
-<pre class="prettyprint">
-Evas_Object *button1, *button2, *button3;
-
-// Create the 3 buttons 
-
-button1 = elm_button_add(popup);
-elm_object_text_set(button1, &quot;OK&quot;);
-
-button2 = elm_button_add(popup);
-elm_object_text_set(button2, &quot;Cancel&quot;);
-
-button3 = elm_button_add(popup);
-elm_object_text_set(button3, &quot;Help&quot;);
-
-// Set the buttons to the action area 
-elm_object_part_content_set(popup, &quot;button1&quot;, button1);
-elm_object_part_content_set(popup, &quot;button2&quot;, button2);
-elm_object_part_content_set(popup, &quot;button3&quot;, button3);
-</pre>
-
-<h3>Using Popup Callbacks</h3>
-<p>The popup emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of timeout.</li>
-<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the Blocked Event area.</li>
-</ul>
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In this example, the timeout is set to five seconds.</p>
-
-<pre class="prettyprint">
-elm_popup_timeout_set(popup, 5.0);
-</pre>
-
-<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, data);
-}
-
-static void
-_timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Timeout \n&quot;);
-}
-</pre>
-
-<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal <span style="font-family: Courier New,Courier,monospace">block,clicked</span> is sent to the application.</p>
-
-                       
-                               <h2 id="progressbar" name="progressbar">Progressbar</h2>
-  
-         <p class="figure">Figure: Progressbar component</p> 
-  <p align="center"><img alt="Progressbar component" src="../../images/progressbar.png" /></p>
-      
-         <p class="figure">Figure: Progressbar hierarchy</p> 
-  <p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
-  
-
- <h3>Adding a Progressbar Component</h3>
- 
-<p>This UI component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.</p> 
-<p>The following example shows how to create a progressbar component.</p>
-
-<pre class="prettyprint">
-Evas_Object *pb = elm_progressbar_add(win);
-</pre>
-
-<h3>Using the Progressbar Styles</h3>
-
-<p>The progressbar has several styles:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">pending_list</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">process_large</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">process_medium</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">process_small</span></li>
-</ul>
-
-<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
-
-<pre class="prettyprint">elm_object_style_set(pb, &quot;pending_list&quot;);</pre>
-
-<h3>Using the Progressbar</h3>
-
-<p>By default, the progressbar does not show a label or an icon, and the unit label is set to <span style="font-family: Courier New,Courier,monospace">%.0f %%</span>.</p>
-
-<p>The following example shows how to set a label. In this example it is named <span style="font-family: Courier New,Courier,monospace">Test label</span>.</p>
-
-<pre class="prettyprint">
-elm_object_text_set(pb, &quot;Test label&quot;);
-</pre>
-
-<p>An icon is set with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> using the partname <span style="font-family: Courier New,Courier,monospace">icon</span>.</p>
-<pre class="prettyprint">
-elm_object_part_content_set(pb, &quot;icon&quot;, icon_object);
-</pre>
-
-<p>The unit label format string can be modified using a <span style="font-family: Courier New,Courier,monospace">printf</span> style format. Set it to be a float number with two decimals.</p>
-<pre class="prettyprint">
-elm_progressbar_unit_format_set(pb, &quot;%1.2f%%&quot;);
-</pre>
-
-<h3>Configuring the Progressbar</h3>
-
-<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
-<pre class="prettyprint">
-elm_progressbar_pulse_set(pb, EINA_TRUE);
-elm_progressbar_pulse(pb, EINA_TRUE);
-</pre>
-
-<p>The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
-<pre class="prettyprint">
-elm_progressbar_inverted_set(pb, EINA_TRUE);
-</pre>
-
-<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
-<pre class="prettyprint">
-elm_progressbar_value_set(pb, 0.2);
-</pre>
-
-<p>The current value can be read.</p>
-<pre class="prettyprint">
-double value = elm_progressbar_value_get(pb);
-</pre>
-
-<p>You can set the orientation of the progressbar to vertical instead of the default horizontal orientation.</p>
-<pre class="prettyprint">
-elm_progressbar_horizontal_set(pb, EINA_FALSE);
-</pre>
-
-<h3>Using the Progressbar Callbacks</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">changed</span> signal is the only signal specifically emitted by the progressbar component.</p>
-
-<p>The following example shows how to register a callback on this signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pb, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the progressbar value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
-}
-</pre>
-
-               
-                               <h2 id="radio" name="radio">Radio</h2>
-                               
-<p class="figure">Figure: Radio component</p> 
-<p align="center"><img alt="Radio component" src="../../images/radio.png" /></p>
-      
-<p class="figure">Figure: Radio hierarchy</p> 
-<p align="center"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
-  
-<p> This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected), an optional icon and an optional label. Even though it is usually grouped with two or more other radio objects, it can also be used alone.</p>
-<p>The radio component inherits from the layout component. All the layout functions can be used with radio objects.</p>
-
-<h3>Adding a Radio Component</h3>
-
-<p>Create a radio component and set a label to it.</p>
-<pre class="prettyprint">
-Evas_Object *radio, *parent;
-
-// Create a radio
-radio = elm_radio_add(parent);
-
-// Set a label to it
-elm_object_text_set(radio, &quot;Radio component&quot;);
-</pre>
-
-<p>Set an icon to the radio object.</p>
-<pre class="prettyprint">
-// Create a Home icon 
-Evas_Object *icon;
-
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, &quot;home&quot;);
-
-// Set it to the radio component 
-elm_object_part_content_set(radio, &quot;icon&quot;, icon);
-</pre>
-
-<h3>Changing the Radio Value</h3>
-
-<p>The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.</p>
-<pre class="prettyprint">
-elm_radio_state_value_set(radio, 1);
-</pre>
-
-<h3>Managing the Radio Groups</h3>
-
-<p>The following example shows how to create a group of radio objects with at least two radio components.</p>
-
-<pre class="prettyprint">
-// Create another radio object 
-Evas_Object *radio2 = elm_radio_add(parent);
-elm_radio_state_value_set(radio2, 2);
-
-// Create a group composed of radio and radio2
-Evas_Object *group = radio;
-elm_radio_group_add(radio2, group);
-</pre>
-
-<p>Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.</p>
-
-<pre class="prettyprint">
-elm_radio_value_set(group, 2);
-</pre>
-
-<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
-
-<h3>Using the Radio Callbacks</h3>
-
-<p>When the state of a radio is modified in a group of radio objects, the <span style="font-family: Courier New,Courier,monospace">changed</span> signal is emitted.</p>
-<p>The following example shows how to register a callback on this signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the radio value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
-}
-</pre>
-
-                       
-                               <h2 id="segmentcontrol" name="segmentcontrol">Segmentcontrol</h2>
- 
-<p class="figure">Figure: Segmentcontrol with text</p> 
-<p align="center"><img alt="Segmentcontrol with text" src="../../images/segment_text.png" /></p>
-      
-<p class="figure">Figure: Segmentcontrol with icons</p> 
-<p align="center"><img alt="Segmentcontrol with icons" src="../../images/segment.png" /></p>
-  
-<p class="figure">Figure: Segmentcontrol hierarchy</p> 
-<p align="center"><img alt="Segmentcontrol hierarchy" src="../../images/segment_control_tree.png" /></p>
- 
-<p>This UI component consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.</p>
-<p>This UI component inherits from the layout component, so all the layout components API can be used on segmentcontrol objects.</p>
-
-<h3>Adding a Segmentcontrol Component</h3>
-
-<p>The following example shows how to add a segmentcontrol component.</p>
-
-<pre class="prettyprint">
-Evas_Object *segcontrol, *parent;
-
-segcontrol = elm_segment_control_add(parent);
-</pre>
-
-<h3>Adding Items</h3>
-
-<p>You can add items to the UI component. In the following example four items containing only text labels (no icons) are added.</p>
-<pre class="prettyprint">
-Elm_Object_Item *it;
-
-elm_segment_control_item_add(segcontrol, NULL, &quot;item1&quot;);
-elm_segment_control_item_add(segcontrol, NULL, &quot;item2&quot;);
-elm_segment_control_item_add(segcontrol, NULL, &quot;item3&quot;);
-it = elm_segment_control_item_add(segcontrol, NULL, &quot;item4&quot;);
-</pre>
-
-<p>You can also:</p>
-<ul>
-<li>Insert an item at a specific position starting at 0.
-<pre class="prettyprint">
-elm_segment_control_item_insert_at(segcontrol, NULL, &quot;item7&quot;, 2);
-</pre></li>
-
-<li>Delete an item.
-<pre class="prettyprint">
-elm_segment_control_item_del_at(segcontrol, 2);
-</pre></li>
-
-<li>Set the selected state of an item manually.
-<pre class="prettyprint">
-elm_segment_control_item_selected_set(it, EINA_TRUE);
-</pre></li>
-<li>Disable the whole segment control.
-<pre class="prettyprint">elm_object_disabled_set(segcontrol, EINA_TRUE);</pre></li>
-</ul>
-
-<h3>Using the Segmentcontrol Callbacks</h3>
-
-<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span>signal. It is called when the user clicks on a segment item which is not previously selected. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the segment item pointer.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(segcontrol, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the segcontrol selected item changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Segment_Item *it = event_info;
-
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The selected segment item has changed\n&quot;);
-}
-</pre>
-
-               
-                               <h2 id="slider" name="slider">Slider</h2>
-
-<p class="figure">Figure: Slider component</p> 
-<p align="center"><img alt="Slider component" src="../../images/slider.png" /></p>
-      
-<p class="figure">Figure: Slider hierarchy</p> 
-<p align="center"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
-
-<p> The slider component is a draggable bar that is used to select a value within a certain range.</p>
-
-<h3>Adding a Slider Component</h3>
-
-<p>The following example shows how to create a slider object.</p>
-<pre class="prettyprint">
-Evas_Object *slider, *parent;
-
-slider = elm_slider_add(parent);
-</pre>
-
-<h3>Using the Slider Styles</h3>
-
-<p>A slider has the following styles:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">center_point</span></li>
-</ul>
-
-<p>The following example sets the style to <span style="font-family: Courier New,Courier,monospace">center_point</span>.</p>
-<pre class="prettyprint">
-elm_object_style_set(slider, &quot;center_point&quot;);
-</pre>
-
-<p>With this style, the slider <span style="font-family: Courier New,Courier,monospace">0</span> point is in the middle of the UI component.</p>
-
-<h3>Configuring the Slider</h3>
-
-<p>The orientation is set with the <span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span> function, and it is inverted the same way as the progressbar component. In the following example it is set to vertical and inverted.</p>
-<pre class="prettyprint">
-elm_slider_horizontal_set(slider, EINA_FALSE);
-elm_slider_inverted_set(slider, EINA_TRUE);
-</pre>
-
-<p>The slider can contain icons (<span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span> partnames), a label, a unit label, and an indicator label.</p>
-<pre class="prettyprint">
-Evas_Object *icon1, *icon2;
-
-// Set the icons 
-elm_object_part_content_set(slider, &quot;icon&quot;, icon1);
-elm_object_part_content_set(slider, &quot;end&quot;, icon2);
-
-// Set the label 
-elm_object_part_text_set(slider, &quot;default&quot;, &quot;slider label&quot;);
-
-// Set the unit format 
-elm_slider_unit_format_set(slider, &quot;%1.2f meters&quot;);
-</pre>
-
-<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
-<pre class="prettyprint">
-elm_slider_min_max_set(slider, 0.0, 100.0);
-elm_slider_value_set(slider, 50.0);
-</pre>
-
-<p>The span of the slider represents its length horizontally or vertically. It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
-<p>You can retrieve the current value of the slider anytime.</p>
-<pre class="prettyprint">
-double value = elm_slider_value_get(slider);
-</pre>
-
-<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.</p>
-<pre class="prettyprint">
-// Get the current state of the indicator 
-Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
-
-// Invert the behavior 
-elm_slider_indicator_show_set(slider, !enlarge);
-</pre>
- 
-<h3>Using the Slider Callbacks</h3>
-
-<p>This UI component emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
-<li><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span>: Dragging the slider indicator around starts.</li>
-<li><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span>: Dragging the slider indicator around stops.</li>
-<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
-</ul>
-
-<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the slider value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The slider has changed\n&quot;);
-}
-</pre>
- 
-                               <h2 id="spinner" name="spinner">Spinner</h2>
-                               
-                               
-<p class="figure">Figure: Spinner component</p> 
-<p align="center"><img alt="Spinner component" src="../../images/spin.png" /></p>
-      
-<p class="figure">Figure: Spinner hierarchy</p> 
-<p align="center"><img alt="Spinner hierarchy" src="../../images/spinner_tree.png" /></p>
-
-<p> The spinner component increases or decreases a numeric value with the arrow buttons.</p>
-
-<p>This UI component inherits from the layout component, so all functions concerning the layout component are used on the spinner component.</p>
-
-<h3>Adding a Spinner Component</h3>
-<p>The following example shows how to create a spinner object.</p>
-
-<pre class="prettyprint">
-Evas_Object *spin, *parent;
-
-spin = elm_spinner_add(parent);
-</pre>
-
-<h3>Configuring the Spinner</h3>
-
-<p>The label format is set to a different value:</p>
-<pre class="prettyprint">
-elm_spinner_label_format_set(spin, &quot;%1.2f meters&quot;);
-</pre>
-
-<p>You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:</p>
-<pre class="prettyprint">
-elm_spinner_step_set(spin, 2.0);
-</pre>
-<p>The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.</p>
-<pre class="prettyprint">
-elm_spinner_wrap_set(spin, EINA_TRUE);
-</pre>
-
-<p>You can set the minimum and maximum values of the spinner.</p>
-<pre class="prettyprint">
-elm_spinner_min_max_set(spin, -25.0, 100.0);
-</pre>
-
-<p>The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.</p>
-<pre class="prettyprint">
-elm_object_style_set(spin, &quot;vertical&quot;);
-elm_spinner_interval_set(spin, 0.1);
-</pre>
-
-<p>If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.</p>
-<pre class="prettyprint">Evas_Object *spin2 = elm_spinner_add(parent);
-elm_spinner_min_max_set(spin2, 1, 3);
-elm_spinner_special_value_add(spin2, 1, &quot;One&quot;);
-elm_spinner_special_value_add(spin2, 2, &quot;Two&quot;);
-elm_spinner_special_value_add(spin2, 3, &quot;Three&quot;);
-</pre>
-
-<h3>Using the Spinner Callbacks</h3>
-
-<p>This UI component emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The spinner value changes.</li>
-<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
-</ul>
-
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">delay,changed</span> signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(spin, &quot;delay,changed&quot;, delay_changed_cb, data);
-}
-
-// Callback function for the &quot;delay,changed&quot; signal
-// This callback is called a short time after the spinner value changes
-void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The spinner value has changed\n&quot;);
-}
-</pre>
-       
-                               <h2 id="toolbar_component" name="toolbar_component">Toolbar</h2>
-
-    <p class="figure">Figure: Toolbar component</p> 
-  <p align="center"><img alt="toolbar component" src="../../images/toolbar.png" /></p> 
-  
-      <p class="figure">Figure: Toolbar hierarchy</p> 
-  <p align="center"><img alt="Toolbar hierarchy" src="../../images/toolbar_tree.png" /></p> 
-
-  
-<p> This UI component is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.</p>
-
-<h3>Adding and Configuring a Toolbar Component</h3>
-
-<p>Use the following function to create a toolbar.</p>
-<pre class="prettyprint">
-Evas_Object *toolbar, *parent;
-
-toolbar = elm_toolbar_add(parent);
-</pre>
-
-<h3>Using the Toolbar Styles</h3>
-<p>The toolbar has the following styles:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">tabbar</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">tabbar_with_title</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">navigationbar</span></li>
-</ul>
-<p>The following example sets the style to <span style="font-family: Courier New,Courier,monospace">navigationbar</span>.</p>
-<pre class="prettyprint">
-elm_object_style_set(toolbar, &quot;navigationbar&quot;);
-</pre>
-
-<h3>Configuring the Toolbar</h3>
-<p>The toolbar displays its items in one of the following options.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>: The toolbar sets a minimum size to its items so that all of them fit without scrolling.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_HIDE</span>: The toolbar does not scroll or show the items that do not fit in.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_SCROLL</span>: The toolbar scrolls to show the items that do not fit in.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_MENU</span>: The toolbar creates a button to popup hidden items.</li>
-</ul>
-
-<p>Here the toolbar is set to <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>.</p>
-<pre class="prettyprint">
-elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);
-</pre>
-<p>By default, the toolbar displays items homogeneously. Items with long labels occupy a lot of space. To avoid that, you can disable the homogeneous mode.</p>
-<pre class="prettyprint">
-elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);
-</pre>
-
-<h3>Adding Items to the Toolbar</h3>
-<p>The following example shows how to add two items and choose the associated icon, label, and function to call when the item is clicked.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *home_it, *help_it;
-
-&nbsp;&nbsp;&nbsp;home_it = elm_toolbar_item_append(toolbar, &quot;home&quot;, &quot;Home&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_home_item_pressed_cb, NULL);
-&nbsp;&nbsp;&nbsp;help_it = elm_toolbar_item_append(toolbar, &quot;help&quot;, &quot;Help&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_help_item_pressed_cb, NULL);
-}
-
-static void
-_home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Home item clicked \n&quot;);
-}
-
-static void
-_help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Help item clicked \n&quot;);
-}
-</pre>
-
-<p>An item can be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.</p>
-<pre class="prettyprint">
-elm_object_item_disabled_set(help_it, EINA_TRUE);
-</pre>
-
-<h3>Adding Items with States</h3>
-<p>Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. The following example shows how to create two states to the help item with the same icon but two different labels.</p>
-<pre class="prettyprint">
-elm_toolbar_item_state_add(help_it, &quot;help&quot;, &quot;Help state 1&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_help_item_pressed_cb, NULL);
-elm_toolbar_item_state_add(help_it, &quot;help&quot;, &quot;Help state 2&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_help_item_pressed_cb, NULL);
-</pre>
-<p>It is possible to cycle through the states of the help item by using the following code.</p>
-<pre class="prettyprint">
-elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
-</pre>
-
-<h3>Using the Toolbar Callbacks</h3>
-<p>This UI component emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks on a toolbar item, which is selected. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks on a toolbar item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The toolbar is pressed for a certain amount of time. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language changes.</li>
-<li><span style="font-family: Courier New,Courier,monospace">item,focused</span>: The item is highlighted. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">item,unfocused</span>: The highlight is removed from the item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The toolbar scrolls. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The toolbar scrolling animation starts. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The toolbar scrolling animation stops. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: The user starts dragging the toolbar. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: The user stops dragging the toolbar. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-</ul>
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(toolbar, &quot;clicked&quot;, clicked_cb, data);
-}
-
-// Callback function for the &quot;clicked&quot; signal
-// This callback is called when a toolbar item is clicked
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Toolbar_Item * item = event_info;
-
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item clicked\n&quot;);
-}
-</pre>
-
-                               <h2 id="tooltip" name="tooltip">Tooltip</h2>
-
-<p>The tooltip component is a smart object that shows a content in a frame when mouse hovers a parent object. The UI component provides tips or information about the parent object.</p>
-
-<h3>Adding a Tooltip</h3>
-<p>The tooltip component cannot be created with the <span style="font-family: Courier New,Courier,monospace">elm_tooltip_add()</span> function. This component is already contained in a parent component when it is created. You can only activate or disable it.</p>
-
-<h3>Activating the Tooltip</h3>
-<p>To activate the tooltip on a parent object, you can set a tooltip text to the parent object.</p>
-<pre class="prettyprint">
-Evas_Object *parent;
-
-elm_object_tooltip_text_set(parent, &quot;The tooltip text&quot;;
-</pre>
-<p>You can also set a content to the parent object.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;elm_object_tooltip_content_cb_set(parent, tooltip_content_cb, NULL, tooltip_content_del_cb);
-}
-
-Evas_Object*
-tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
-{
-&nbsp;&nbsp;&nbsp;// Create the tooltip content 
-}
-
-void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;// Destroy the tooltip content 
-}
-</pre>
-
-<p>When passing content to the tooltip, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_cb</span> function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
-<p>When the tooltip disappears, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_del_cb</span> function is called. This function is in charge of deleting the previously allocated <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
-<p>Once set, the tooltip can be manually hidden or shown.</p>
-
-<pre class="prettyprint">
-elm_object_tooltip_hide(parent);
-elm_object_tooltip_show(parent);
-</pre>
-
-<p>The tooltip can be removed from the parent object when it is not needed.</p>
-<pre class="prettyprint">
-elm_object_tooltip_unset(parent);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">When content is set into the tooltip object, unsetting it calls the callback provided as <span style="font-family: Courier New,Courier,monospace">del_cb</span> to notify that the tooltip cannot be used any longer.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>A tooltip object is not a UI component, so it does not emit signals. There are no registered callbacks for it.</p>
-
-
-                               <h2 id="win" name="win">Win</h2>
-
-    <p class="figure">Figure: Win hierarchy</p> 
-  <p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>   
- 
-
-<p>The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
-<p>The window component is created with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function. The content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
-
-<h3>Adding a Window Component</h3>
-
-<p>Create a new window and change the title.</p>
-<pre class="prettyprint">
-Evas_Object *window;
-
-// Create a window 
-window = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-
-// Change the window title 
-elm_win_title_set(window, &quot;Example Window&quot;);
-</pre>
-
-<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. <span style="font-family: Courier New,Courier,monospace">main</span> is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
-
-<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>. The window created is of the type <span style="font-family: Courier New,Courier,monospace">ELM_WIN_BASIC</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *window;
-
-// Create a standard window 
-window = elm_win_util_standard_add(&quot;main&quot;, &quot;Example Window&quot;);
-</pre>
-
-<h3>Closing a Window</h3>
-<p>When the user closes the window outside of the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
-<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
-<p>The autodel is set using the following call:</p>
-<pre class="prettyprint">
-elm_win_autodel_set(window, EINA_TRUE);
-</pre>
-
-<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function. The window is destroyed and the signal <span style="font-family: Courier New,Courier,monospace">delete,request</span> is sent.</p>
-
-<h3>Using the Window Callbacks</h3>
-<p>The window component emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">focus,in</span>: The window received focus.</li>
-<li><span style="font-family: Courier New,Courier,monospace">focus,out</span>: The window lost focus.</li>
-<li><span style="font-family: Courier New,Courier,monospace">moved</span>: The window that holds the canvas is moved.</li>
-<li><span style="font-family: Courier New,Courier,monospace">withdrawn</span>: The window is managed normally but is removed from the view.</li>
-<li><span style="font-family: Courier New,Courier,monospace">iconified</span>: The window is minimized (for example, into an icon or a taskbar).</li>
-<li><span style="font-family: Courier New,Courier,monospace">normal</span>: The window is in the normal state (not withdrawn or iconified).</li>
-<li><span style="font-family: Courier New,Courier,monospace">stick</span>: The window shows on all desktops.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unstick</span>: The window shows only on one desktop.</li>
-<li><span style="font-family: Courier New,Courier,monospace">fullscreen</span>: The window is fullscreen.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unfullscreen</span>: The window stops being fullscreen.</li>
-<li><span style="font-family: Courier New,Courier,monospace">maximized</span>: The window is maximized.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unmaximized</span>: The window is diminished.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span>: The rotation of the window is changed by the Windows Manager.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ioerr</span>: A low-level I/O error occurred in the display system.</li>
-</ul>
-<p>With all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>The following example registers a callback function called on the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window, &quot;fullscreen&quot;, fullscreen_cb, data);
-}
-
-// Callback function for the &quot;fullscreen&quot; signal
-// This callback is called when the window becomes fullscreen
-void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Window fullscreen\n&quot;);
-}
-</pre>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.guides/html/native/ui/components_wn.htm b/org.tizen.guides/html/native/ui/components_wn.htm
deleted file mode 100644 (file)
index b7c8c91..0000000
--- a/org.tizen.guides/html/native/ui/components_wn.htm
+++ /dev/null
@@ -1,2473 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Components</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#background">Background</a></li>
-                       <li><a href="#button">Button</a></li>
-                       <li><a href="#check">Check</a></li>
-                       <li><a href="#ctxpopup">Ctxpopup</a></li>
-                       <li><a href="#datetime">Datetime</a></li>
-                       <li><a href="#entry">Entry</a></li>
-                       <li><a href="#genlist">Genlist</a></li>
-                       <li><a href="#glview">GLView</a></li>
-                       <li><a href="#icon">Icon</a></li>
-                       <li><a href="#image">Image</a></li>
-                       <li><a href="#index">Index</a></li>
-                       <li><a href="#label">Label</a></li>
-                       <li><a href="#list">List</a></li>
-                       <li><a href="#map">Map</a></li>
-                       <li><a href="#notify">Notify</a></li>
-                       <li><a href="#plug">Plug</a></li>
-                       <li><a href="#popup">Popup</a></li>
-                       <li><a href="#progressbar">Progressbar</a></li>
-                       <li><a href="#radio">Radio</a></li>
-                       <li><a href="#slider">Slider</a></li>
-                       <li><a href="#win">Win</a></li>
-               </ul>
-                       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Components Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Components</h1>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-                               <h2 id="background" name="background">Background</h2>
-                               
-<p class="figure">Figure: Red color background</p>
-<p align="center"><img alt="Red color background" src="../../images/bg_wn.png" /></p>
-
-<p class="figure">Figure: Background hierarchy</p>
-<p align="center"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
-
-<p>The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.</p>
-
-<h3>Adding a Background Component</h3>
-
-<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
-
-<pre class="prettyprint">
-Evas_Object *bg, *parent;
-
-// Create a background
-bg = elm_bg_add(parent);
-</pre>
-
-<h3>Changing the Color of the Background</h3>
-
-<p>You can set the color of the background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function. The following example sets the background color to red.</p>
-
-<pre class="prettyprint">
-Evas_Object *bg;
-
-// Use red color for background
-elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
-</pre>
-
-<h3>Changing the Image of the Background</h3>
-
-<p>It is also possible to set an image or an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
-
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component&#39;s area.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
-</ul>
-
-<pre class="prettyprint">
-Evas_Object *bg;
-
-// Set a file on the disk as a background image
-elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
-// Set an Edje group as a background image
-elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;edje_group&quot;);
-elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
-</pre>
-
-<h3>Using Overlay</h3>
-
-<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
-
-<pre class="prettyprint">
-elm_object_part_content_set(bg, &quot;overlay&quot;, over);
-</pre>
-
-<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
-
-                       
-                               <h2 id="button" name="button">Button</h2>
-
-<p class="figure">Figure: Button component</p>
-<p align="center"><img alt="Button component" src="../../images/button_wn.png" /></p>
-
-<p class="figure">Figure: Button hierarchy</p>
-<p align="center"><img alt="Button hierarchy" src="../../images/button_tree.png" /></p>
-
-<p>The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.</p>
-
-<h3>Adding a Button Component</h3>
-
-<p>Create a button.</p>
-<pre class="prettyprint">
-Evas_Object *button, *parent;
-
-// Create a button
-button = elm_button_add(parent);</pre>
-
-<h3>Adding an Icon Inside a Button</h3>
-
-<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name.</p>
-
-<pre class="prettyprint">
-Evas_Object *ic;
-ic = elm_icon_add(button);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(button, &quot;icon&quot;, ic);</pre>
-
-<h3>Adding Text Inside a Button</h3>
-
-<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
-
-<pre class="prettyprint">
-elm_object_text_set(button, &quot;Click me!&quot;);
-</pre>
-
-<h3>Using Button Styles</h3>
-
-<p>Various styles can be used on the button. Tizen supports the following styles for wearable core controls:</p>
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">green</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">orange</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">red</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">nextdepth</span></li>
-</ul>
-<p>Tizen supports the following styles for Gear O:</p>
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
-</ul>
-
-<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
-
-<pre class="prettyprint">
-// Example for wearable core control
-elm_object_style_set(button, &quot;nextdepth&quot;);
-
-// Example for Gear O
-elm_object_style_set(button, &quot;bottom&quot;);
-</pre>
-
-<h3>Using the Button Callbacks</h3>
-
-<p>The button emits the following signals:</p>
-
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the button (press/release).</li>
-    <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The user pressed the button without releasing it.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The user pressed the button.</li>
-    <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The user released the button after pressing it.</li>
-</ul>
-
-<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>This is an example to register and define a callback function called by the clicked signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
-}
-// Callback function for the &quot;clicked&quot; signal
-// This callback is called when the button is clicked by the user
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
-}
-</pre>
-
-<h3>Using the Autorepeat Feature</h3>
-
-<p>The autorepeat feature is enabled by default. It consists of calling the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with the following functions:</p>
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
-    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
-</ul>
-
-<p>Disable the autorepeat feature.</p>
-<pre class="prettyprint">
-elm_button_autorepeat_set(button, EINA_FALSE);
-</pre>
-
-<p>Enable the autorepeat feature.</p>
-<pre class="prettyprint">
-elm_button_autorepeat_set(button, EINA_TRUE);
-</pre>
-
-<p>Set the initial timeout to five seconds.</p>
-<pre class="prettyprint">
-elm_button_autorepeat_initial_timeout_set(button, 5.0);
-</pre>
-
-<p>Set the gap between two signals to 0.5 seconds.</p>
-<pre class="prettyprint">
-elm_button_autorepeat_gap_timeout_set(button, 0.5);
-</pre>
-
-               
-                               <h2 id="check" name="check">Check</h2>
-
-<p class="figure">Figure: Check component</p> 
-<p align="center"><img alt="Check component" src="../../images/check_wn.png" /></p> 
-
-<p class="figure">Figure: Check hierarchy</p> 
-<p align="center"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p> 
-
-<p>The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
-
-<p>This UI component inherits from the layout component. All layout functions can be used on the check component.</p>
-
-<h3 id="Adding" name="Adding">Adding a Check Component</h3>
-
-<p>The following example shows how to create a check component.</p>
-<pre class="prettyprint">
-Evas_Object *check, *parent;
-check = elm_check_add(parent);
-</pre>
-
-<h3 id="Modifying" name="Modifying">Modifying the Check Styles</h3>
-
-<p>The check component style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function.</p>
-<p>The following styles are available for wearable core controls:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
-</ul>
-<p>The following styles are available for Gear O:</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">small</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
-</ul>
-
-<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">on and off</span> style on our check object.</p>
-<pre class="prettyprint">
-elm_object_style_set(check, &quot;on and off&quot;);
-</pre>
-
-<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
-<pre class="prettyprint">
-char *style = elm_object_style_get(check);
-</pre>
-
-<h3 id="Using_Check" name="Using_Check">Using the Check Component</h3>
-
-<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
-<pre class="prettyprint">
-elm_check_state_set(check, EINA_TRUE);
-</pre>
-
-<p>You can also retrieve the current value of the check object.</p>
-<pre class="prettyprint">
-Eina_Bool value = elm_check_state_get(check);
-</pre>
-
-<p>As with a radio object, an icon can be set for the wearable core control.</p>
-<pre class="prettyprint">
-// Create a Home icon 
-Evas_Object *icon;
-
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, &quot;home&quot;);
-
-// Set it to the check object 
-elm_object_part_content_set(check, &quot;icon&quot;, icon);
-</pre>
-
-<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
-<pre class="prettyprint">
-// Get the content set in the icon part 
-Evas_Object *icon = elm_object_part_content_get(check, &quot;icon&quot;);
-</pre>
-
-<h3 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h3>
-
-<p>When the value is changed by the user, the changed signal is emitted. The <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
-
-<p>The following example shows how to register a callback on this signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the check value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
-}
-</pre>
-               
-                               <h2 id="ctxpopup" name="ctxpopup">Ctxpopup</h2>
-
-    <p class="figure">Figure: Context popup component</p> 
-<p align="center"><img alt="Context popup component" src="../../images/ctxpopup_wn.png" /></p> 
-  
-      <p class="figure">Figure: Context popup hierarchy</p> 
-<p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
-
-
-<p>Ctxpopup is a contextual popup that can show a list of items.</p>
-
-<h3>Adding a Ctxpopup Component</h3>
-
-<p>A ctxpopup can be created with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function, and when shown, it automatically chooses an area inside its parent object&#39;s view (set using <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
-
-<pre class="prettyprint">
-Evas_Object *ctxpopup, *parent;
-
-// Create a ctxpopup 
-ctxpopup = elm_ctxpopup_add(parent);
-</pre>
-
-<h3>Modifying the Ctxpopup Style</h3>
-
-<p>The following styles are available for wearable core controls:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-</ul>
-<p>The following styles are available for Gear O:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">select_mode</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">select_mode/top</span>, <span style="font-family: Courier New,Courier,monospace">select_mode/bottom</span> (These two styles can be used as a pair.)</li>
-</ul>
-
-
-<p>The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
-<pre class="prettyprint">
-elm_object_style_set(ctxpopup, &quot;default&quot;);
-</pre>
-
-<h3>Configuring the Ctxpopup</h3>
-
-<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here it is set to horizontal.</p>
-<pre class="prettyprint">
-elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
-</pre>
-
-<p>Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden. </p>
-<pre class="prettyprint">
-elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
-</pre>
-
-<h3>Managing the Ctxpopup Items</h3>
-
-<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the <span style="font-family: Courier New,Courier,monospace">Test</span> label and no icon.</p>
-<pre class="prettyprint">
-Elm_Object_Item *it;
-
-it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_cb, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
-<pre class="prettyprint">
-static void
-_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
-}
-</pre>
-
-<p>After that the item label is set to <span style="font-family: Courier New,Courier,monospace">New label</span>.</p>
-<pre class="prettyprint">elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
-</pre>
-
-<p>And its icon is modified to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon.</p>
-<pre class="prettyprint">
-Evas_Object *home_icon = elm_icon_add(ctxpopup);
-elm_icon_standard_set(home_icon, &quot;home&quot;);
-
-elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
-</pre>
-
-<h3>Using the Ctxpopup Callbacks</h3>
-
-<p>The context popup emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal when it is dismissed. You can register a callback to this signal. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ctxpopup, &quot;dismissed&quot;, dismissed_cb, data);
-}
-
-// Callback function for the &quot;dismissed&quot; signal
-// This callback is called when the ctxpopup is dismissed
-void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Ctxpopup dismissed\n&quot;);
-}
-</pre> 
-
-                               <h2 id="datetime" name="datetime">Datetime</h2>
-  
-<p class="figure">Figure: Datetime selection</p> 
-<p align="center"><img alt="Datetime selection" src="../../images/datetime_wn.png" /> </p> 
- 
-<p class="figure">Figure: Datetime hierarchy</p> 
-<p align="center"><img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p> 
- 
-<p>The datetime component displays and adds date and time values.</p>
-
-<h3>Adding a Datetime Component</h3>
-
-<p>The UI component is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>.</p>
-<p>The following fields can be controlled:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: the year field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: the month field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: the date field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: the hour field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: the minute field</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: the AM/PM field</li>
-  </ul>
-
-<h3>Using the Datetime Styles</h3>
-
-<p>The following styles are available:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">datepicker_layout</span></li>
-   <li><span style="font-family: Courier New,Courier,monospace">timepicker_layout</span></li>
-  </ul>
-
-<p>The following example creates the <span style="font-family: Courier New,Courier,monospace">datepicker_layout</span> style:</p>
-<pre class="prettyprint">
-elm_object_style_set(datetime, &quot;datepicker_layout&quot;);
-</pre>
-
-<h3>Setting the Datetime Format</h3>
-
-<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.</p>
-<pre class="prettyprint">
-elm_object_style_set(datetime, &quot;timepicker_layout&quot;);
-elm_datetime_format_set(datetime, &quot;%d/%b/%Y%I:%M&quot;);
-</pre>
-<p>Please refer to the API documentation for a complete list of all the options available.</p>
-
-<h3>Using the Datetime Callbacks</h3>
-
-<p>A callback can be registered on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal to detect when the Datetime field values are changed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the datetime fields change
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime field changed. \n&quot;);
-}</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
- 
- 
-               
-                               <h2 id="entry" name="entry">Entry</h2>
-  
-<p class="figure">Figure: Entry component</p> 
-<p align="center"><img alt="Entry component" src="../../images/entry_wn.png" /> </p> 
- 
-<p class="figure">Figure: Entry component</p> 
-<p align="center"><img alt="Entry component" src="../../images/entry2_wn.png" /> </p> 
- 
-<p class="figure">Figure: Entry hierarchy</p> 
-<p align="center"><img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p> 
- 
-<p>The entry component is a box where the user can enter text. It supports the following features:</p>
-  <ul>
-   <li>text wrapping</li>
-   <li>multiline</li>
-   <li>scrolling</li>
-   <li>formatted markup text</li>
-   <li>password mode</li>
-   <li>filtering text</li>
-   <li>read/write from a file</li>
-   <li>theme style overrides</li>
-  </ul>
-   
-<h3>Adding an Entry Component</h3>
-
-<p>The entry component is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
-<pre class="prettyprint">
-Evas_Object *entry, *parent;
-
-entry = elm_entry_add(parent);
-elm_entry_entry_set(entry, &quot;A short text.&quot;);
-</pre>
-
-<h3>Using the Text Editor</h3>
-
-<p>You can append text to the end of existing content.</p>
-<pre class="prettyprint">
-elm_entry_entry_append(entry, &quot;END&quot;);
-</pre>
-
-<p>You can also insert text at the current cursor position.</p>
-<pre class="prettyprint">
-elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
-Eina_Bool Empty = elm_entry_is_empty(entry);
-</pre>
-
-<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable <span style="font-family: Courier New,Courier,monospace">Empty</span> returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-<p>The user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.</p>
-<pre class="prettyprint">
-elm_entry_editable_set(entry, EINA_FALSE);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
- 
-<h3>Setting the Password Mode</h3>
-
-<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
-
-<pre class="prettyprint">
-elm_entry_password_set(entry, EINA_TRUE);
-</pre>
-
-<h3>Entry Line Modes And Wrapping</h3>
-
-<p>The entry component has two line modes:</p>
-  <ul>
-   <li>single line mode</li>
-   <li>multiline mode</li>
-  </ul>
-
-<p>First, set the entry in single line mode.</p>
-
-<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_TRUE);
-</pre>
-
-<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
-
-<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.</p>
-
-<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_FALSE);
-elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
-</pre>
-
-<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, char wrap</li>
-  </ul>
-
-<h3>Selecting Text</h3>
-
-<p>Text selections can be made with different functions:</p>
-<ul>
-<li>To select all the content of the entry component:
-<pre class="prettyprint">
-elm_entry_select_all(entry);
-</pre>
-</li>
-
-<li>To deselect the current selection:
-<pre class="prettyprint">
-elm_entry_select_none(entry);
-</pre>
-</li>
-
-<li>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The following code selects the first twenty characters of the entry content.
-<pre class="prettyprint">
-elm_entry_select_region_set(entry, 0, 20);
-</pre>
-</li>
-
-<li>To retrieve the currently selected text in an entry:
-<pre class="prettyprint">
-const char *selection;
-
-selection = elm_entry_selection_get(entry);
-</pre>
-</li>
-</ul>
-
-<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>You can copy or cut the selection to the clipboard.</p>
-<pre class="prettyprint">
-elm_entry_selection_cut(entry);
-</pre>
-
-<p>The selection can be pasted in the same or a different entry.</p>
-<pre class="prettyprint">
-elm_entry_selection_paste(entry);
-</pre>
-
-<h3>Controlling the Cursor</h3>
-
-<p>The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.</p>
-<ul>
-<li>To move the cursor to the beginning of the entry:
-<pre class="prettyprint">
-elm_entry_cursor_begin_set(entry);
-</pre>
-</li>
-
-<li>To move the cursor to the end of the entry:
-<pre class="prettyprint">
-elm_entry_cursor_end_set(entry);
-</pre>
-</li>
-
-<li>To move the cursor one line down or up:
-<pre class="prettyprint">
-elm_entry_cursor_down(entry);
-elm_entry_cursor_up(entry);
-</pre>
-</li>
-<li>To move the cursor one character to the left or right:
-<pre class="prettyprint">
-elm_entry_cursor_prev(entry);
-elm_entry_cursor_next(entry);
-</pre>
-</li>
-
-<li>To set the cursor at a specific position (15th character, for example):
-<pre class="prettyprint">
-elm_entry_cursor_pos_set(entry, 15);
-</pre>
-</li>
-</ul>
-
-<p>It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.</p>
-<pre class="prettyprint">
-elm_entry_cursor_selection_begin(entry);
-
-for (i = 0; i &lt; 5; i++)
-{
-&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
-}
-
-elm_entry_cursor_selection_end(entry);
-</pre>
-
-<h3>Formatting Text</h3>
-
-<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available in the default theme:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span>: Inserts a line break.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;ps&gt;</span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;tab&gt;</span>: Inserts a tab.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;em&gt;...&lt;/em&gt;</span>: Emphasis. Sets the oblique style for the enclosed text.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;b&gt;...&lt;/b&gt;</span>: Sets the bold style for the enclosed text.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;link&gt;...&lt;/link&gt;</span>: Underlines the enclosed text.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;hilight&gt;...&lt;/hilight&gt;</span>: Highlights the enclosed text.</li>
-  </ul>
-
-<h3>Using Special Markups</h3>
-
-<p>Special markups can be added within the text of the entry:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;a href = ..&gt;...&lt;/a&gt;</span>: Anchors</li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;item size = .. vsize = .. href = ..&gt;...&lt;/item&gt;</span>: Items</li>
-  </ul>
-
-<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
-
-<p>The item markup provides a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name has to be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
-
-<h3>Overriding Style</h3>
-
-<p>To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
-
-<h3>Filtering Text</h3>
-
-<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
-<pre class="prettyprint">
-static Elm_Entry_Filter_Limit_Size limit_size = 
-{
-&nbsp;&nbsp;&nbsp;.max_char_count = 8,
-&nbsp;&nbsp;&nbsp;.max_byte_count = 0
-};
-
-// Append a new callback to the list, this function is called each time
-// a text is inserted in the entry. Pass the limit_size struct previously
-// created to set the maximum number of characters allowed to 8
- 
-elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
-</pre>
-
-<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters.</p>
-
-<pre class="prettyprint">
-static Elm_Entry_Filter_Accept_Set accept_set = 
-{
-&nbsp;&nbsp;&nbsp;.accepted = NULL,
-&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
-};
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
-</pre>
-
-<h3>Loading and Saving Files</h3>
-
-<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
-
-<pre class="prettyprint">
-// Set the file in which the entry text is saved. This function
-// implicitly loads the existing file content 
-elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
-</pre>
-
-<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
-<pre class="prettyprint">
-// Disable autosaving 
-elm_entry_autosave_set(entry, EINA_FALSE);
-
-// Trigger saving when needed 
-elm_entry_file_save(entry);
-</pre>
-
-<h3>Using Entry Theme Content</h3>
-
-<p>Two content parts of the default theme are available: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>. The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part.</p>
-
-<pre class="prettyprint">
-Evas_Object *icon;
-
-ic = elm_icon_add(entry);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(entry, &quot;end&quot;, icon);
-</pre>
-
-<h3>Using Entry Theme Texts</h3>
-
-<p>The default theme allows the use of the following text parts:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">elm.text</span> - text of the entry</li>
-   <li><span style="font-family: Courier New,Courier,monospace">elm.guide</span> - placeholder of the entry</li>
-  </ul>
-
-<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
-<pre class="prettyprint">
-elm_object_part_text_set(entry, &quot;elm.guide&quot;, &quot;Hello World&quot;);
-</pre>
-
-<h3>Using Entry Callbacks</h3>
-
-<p>The entry component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The escape key is pressed on a single line entry.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The enter key is pressed on a single line entry.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: Mouse button is pressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: Mouse cursor is moved into an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: Mouse cursor is moved out of an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: Mouse button is unpressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double clicked.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple clicked.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: Program language is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: A mouse button is pressed and held for a couple of seconds.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: A maximum length is reached.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">press</span>: A mouse button is pressed on the entry.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard contents is requested.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
-  </ul>
-
-<p>For signals, where <span style="font-family: Courier New,Courier,monospace">event_info</span> has not been explicitly described, it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>The following example shows how to register a callback to the <span style="font-family: Courier New,Courier,monospace">focused</span> signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
-}
-
-// Callback function for the &quot;focused&quot; signal
-// This callback is called when the entry receive the focus
-void focused_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
-} 
-</pre>
-  
-
-                               <h2 id="genlist" name="genlist">Genlist</h2>
-  
-<p class="figure">Figure: Genlist component</p> 
-<p align="center"> <img alt="Genlist component" src="../../images/genlist.png" /> </p> 
-
-<p class="figure">Figure: Genlist hierarchy</p> 
-<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p> 
-
-<p>Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
-
-<p>For more information, see the <a href="../../../../org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm">Genlist Tutorial</a>.</p>
-
-<h3>Genlist Item Style</h3>
-
-<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides one text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), two content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>) and no state parts.</p>
-
-<p>The following item styles are available:</p>
-  <ul>
-       <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">groupindex</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">1text</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">1text.1icon</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">2text</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">2text.1</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">1text.1icon.divider</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">1text.1icon.1</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">2text.1icon.1</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">multiline/1text</span></li>
-       <li><span style="font-family: Courier New,Courier,monospace">multiline/2text</span></li>
-  </ul>
-
-<p>Here are some examples of the item styles.</p>
-
-<p class="figure">Figure: 1text item style</p> 
-<p align="center"> <img alt="1 text item style" src="../../images/genlist1_wn.png" /> </p> 
-
-<p class="figure">Figure: 1text.1icon.1 item style</p> 
-<p align="center"> <img alt="1text.1icon.1 item style" src="../../images/genlist2_wn.png" /> </p> 
-
-<p class="figure">Figure: 2text.1icon.1 item style</p> 
-<p align="center"> <img alt="2text.1icon.1 item style" src="../../images/genlist3_wn.png" /> </p> 
-
-<p>For more information on creating a new genlist item style, see <a href="preferences_n.htm#customize">Customizing UI Components</a>.</p>
-
-<h3>Adding a Genlist Component</h3>
-
-<p>A genlist component is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *genlist, *parent;
-genlist = elm_genlist_add(parent);
-</pre>
-
-<h3>Creating And Deleting Items</h3>
-
-<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist component which callbacks to call when an item is created or deleted.</p>
-<pre class="prettyprint">
-Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-
-itc-&gt;item_style = &quot;default&quot;;
-itc-&gt;decorate_item_style = NULL;
-itc-&gt;decorate_all_item_style = NULL;
-itc-&gt;func.text_get = _item_label_get;
-itc-&gt;func.content_get = _item_content_get;
-itc-&gt;func.state_get = _item_state_get;
-itc-&gt;func.del = _item_del;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">text_get</span>
-   <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item&#39;s theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
-
-   <li><span style="font-family: Courier New,Courier,monospace">content_get</span>
-   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
-
-   <li><span style="font-family: Courier New,Courier,monospace">state_get</span>
-   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item&#39;s theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter&#39;s theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> argument, when the state is true. xxx is the name of the (state) part.</p></li>
-
-   <li><span style="font-family: Courier New,Courier,monospace">del</span>
-   <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
-</ul>
-
-<h3>Managing Items</h3>
-
-<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
-
-<p>The previous functions take a <span style="font-family: Courier New,Courier,monospace">type</span> parameter that can be one of the following.</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
-  </ul>
-
-<p>If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span> is set, this item is displayed as being able to expand and have child items. If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> is set, this item is a group index item that is displayed at the top until the next group appears.</p>
-
-<p class="figure">Figure: Genlist tree</p> 
-<p align="center"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p> 
-
-<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
-
-<p>To help inspect the list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
-<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
-
-<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> for it.</p>
-
-<h3>Selection</h3>
-
-<p>Items are manually selected or deselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In the single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
-
-<p>In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
-
-<p class="figure">Figure: Genlist component</p> 
-<p align="center"> <img alt="Genlist component" src="../../images/genlist_multi.png"/> </p> 
-
-<h3>Using Genlist Callbacks</h3>
-
-<p>The genlist component emits the following signals:</p>
-  <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. event_info in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>, that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is one second. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch swiped left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch swiped right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch swiped up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch swiped down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch pinched out. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch pinched in. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program&#39;s language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-  </ul>
-
-               
-                               <h2 id="glview" name="glview">GLView</h2>
-
-      <p class="figure">Figure: GLView example</p> 
-  <p align="center"><img alt="GLView example" src="../../images/glview_wn.png" /></p> 
-  
-      <p class="figure">Figure: GLView hierarchy</p> 
-  <p align="center"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
-
-
-<p> The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
-
-<h3>Adding a GLView Component</h3>
-
-<p>Create a GLView component with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
-<pre class="prettyprint">
-Evas_Object *glview, *parent;
-
-glview = elm_glview_add(parent);
-</pre>
-
-<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
-<pre class="prettyprint">
-elm_glview_size_set(glview, 200, 200);
-</pre>
-
-<h3>Using the GLView API</h3>
-
-<p>You can configure the GLView rendering mode by activating the following rendering modes:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
-</ul>
-
-<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
-<pre class="prettyprint">
-elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
-</pre>
-
-<p>The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
-<pre class="prettyprint">
-elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
-</pre>
-
-<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
-
-<p>The following example shows how to set the GLView rendering policy.</p>
-<pre class="prettyprint">
-elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
-</pre>
-
-<p>The GLView object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where the GLView component is redrawn only when it is visible.</p>
-
-<p>Register the callbacks:</p>
-<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
-elm_glview_del_func_set(glview, _del_gl_cb);
-elm_glview_resize_func_set(glview, _resize_gl_cb);
-elm_glview_render_func_set(glview, _draw_gl_cb);
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</li>
-<li><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</li>
-</ul>
-
-<h3>Using GLView Callbacks</h3>
-
-<p>The GLView component emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The GlView component is focused. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
-</ul>
-
-<p>To register a callback:</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
-}
-
-// Callback function for the &quot;focused&quot; signal
-// This callback is called when the GLView is focused
-void focused_cb(void *data, Evas_Object *obj, void  *event_info)
-{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
-}
-</pre>
-
-<h2 id="icon" name="icon">Icon</h2>
- 
-<p class="figure">Figure: Icon hierarchy</p> 
-<p align="center"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p> 
-  
-<p>The icon component inherits from the image component. It is used to display images in an icon context.</p>
-
-<h3>Adding an Icon Component</h3>
-
-<p>You can create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon.</p>
-
-<pre class="prettyprint">
-Evas_Object *icon, *parent;
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, &quot;Home&quot;);
-</pre>
-
-<h3>Changing Image File</h3>
-
-<p>You can change the image by using an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>).</p>
-<pre class="prettyprint">
-elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
-</pre>
-
-<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
-<pre class="prettyprint">
-elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
-</pre>
-
-<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
-
-<pre class="prettyprint">
-elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
-</pre>
-
-<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
-
-<h3>Using Icon Callbacks</h3>
-
-<p>The icon component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
-  </ul>
-
-<p>In both cases, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-               
-                               <h2 id="image" name="image">Image</h2>
-
-<p class="figure">Figure: Image component</p> 
-<p align="center"> <img alt="Image component" src="../../images/image_wn.png" /> </p>  
-
-<p class="figure">Figure: Image hierarchy</p> 
-<p align="center"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>   
-
-<p>The image component can load and display an image from a disk file or a memory region.</p>
-
-<h3>Adding an Image Component</h3>
-
-<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *image, *parent;
-image = elm_image_add(parent);
-</pre>
-
-<h3>Configuring the Image Component</h3>
-
-<p>Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.</p>
-<pre class="prettyprint">
-elm_image_no_scale_set(image, EINA_TRUE);
-elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
-</pre>
-
-<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
-<pre class="prettyprint">
-elm_image_smooth_set(image, EINA_TRUE);
-</pre>
-
-<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
-<pre class="prettyprint">
-elm_image_preload_disabled_set(image, EINA_TRUE);
-</pre>
-
-<p>The image can be rotated or flipped. Here the image is rotated 180 degrees.</p>
-<pre class="prettyprint">
-elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
-</pre>
-
-<p>The following orientations are available:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise</li>   
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line</li>
-   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line</li>
-  </ul>
-  
-<p>If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object&#39;s area.</p>
-<pre class="prettyprint">
-// Tell the image to keep original aspect ratio 
-elm_image_aspect_fixed_set(image, EINA_TRUE);
-// Then let the image fill the entire object 
-elm_image_fill_outside_set(image, EINA_TRUE);
-</pre>
-
-<p>In this configuration, part of the image can go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
-
-<h3>Using Image Callbacks</h3>
-
-<p>The image component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">drop</span>: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
-   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks the image. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
-  </ul>
-
-<p>To register a callback when a user clicks on the image:</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
-}
-
-// Callback function for the &quot;clicked&quot; signal
-// This callback is called when the image is clicked
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
-}
-</pre>  
-
-                               <h2 id="index" name="index">Index</h2>
-  
-<p class="figure">Figure: Index component</p> 
-<p align="center"> <img alt="Index component" src="../../images/index_wn.png" /> </p> 
- 
-<p class="figure">Figure: Index hierarchy</p> 
-<p align="center"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p> 
- 
-<p>An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component&#39;s container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
-
-<h3>Adding an Index Component</h3>
-
-<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function to create a new index component.</p>
-<pre class="prettyprint">
-Evas_Object *index, *parent;
-index = elm_index_add(parent);
-</pre>
-
-<h3>Adding Items</h3>
-
-<p>The following example shows how to add the listitem object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
-<pre class="prettyprint">
-Elm_Object_Item *list_item1, *list_item2;
-elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
-</pre>
-
-<p>The following example shows how to add item objects, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when the item is selected.</p>
-<pre class="prettyprint">
-Elm_Object_Item *it[5];
-for (i = 0; i &lt; 5; ++i)
-{
-&nbsp;&nbsp;&nbsp;it[i] = elm_index_item_append(index, NULL, it_select_cb, (void *) i);
-}</pre>
-
-<p>The following example shows how to define the smart callback.</p>
-<pre class="prettyprint">
-// Callback function called when the list_item1 object
-// is selected
-void it_select_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item1 selected\n&quot;);
-}
-</pre>
-
-<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
-
-
-<h3>Using Index Callbacks</h3>
-
-<p>The index component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user releases a mouse button and selects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
-  </ul>
-
-<p>When the user selects an item in the index, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
-<pre class="prettyprint">
-static void
-_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *lit = event_info;
-
-&nbsp;&nbsp;&nbsp;// Code that does the desired action
-}
-</pre>
-
-<p>After that, the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is registered.</p>
-<pre class="prettyprint">
-evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb, NULL);
-</pre>
-
-                       
-                               <h2 id="label" name="label">Label</h2>
-  
-<p class="figure">Figure: Label component</p> 
-<p align="center"> <img alt="Label component" src="../../images/label_wn.png" /> </p> 
- 
-<p class="figure">Figure: Label hierarchy</p> 
-<p align="center"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p> 
-
-<p>The label component displays text with simple html-like markup.</p>
-
-<h3>Adding a Label Component</h3>
-
-<p>To add a label and set the text in it, use the following functions.</p>
-
-<pre class="prettyprint">
-Evas_Object *label = elm_label_add(win);
-
-elm_object_text_set(label, &quot;Some long text for our label, that is not so long&quot;);
-</pre>
-
-<h3>Using the Label Styles</h3>
-
-<p>Label displays the text with several predefined styles.</p>
-  <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">slide_roll</span>: The text appears from the left of the label and slides to the right to show the overflow, and then appears from the right of the label again.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>   
-  </ul>
-
-<p>Here the style is set to <span style="font-family: Courier New,Courier,monospace">slide_roll</span>.</p>
-
-<pre class="prettyprint">
-elm_object_style_set(label, &quot;slide_roll&quot;);
-</pre>
-
-<h3>Configuring the Label</h3>
-
-<p>The duration of the animation and the slide mode can be set with the following functions.</p>
-<pre class="prettyprint">
-elm_label_slide_duration_set(label, 3);
-elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
-</pre>
-
-<p>Use the following function to modify the style.</p>
-<pre class="prettyprint">
-elm_object_style_set(label, &quot;slide_bounce&quot;);
-</pre>
-
-<h3>Using the Label Callbacks</h3>
-
-<p>This UI component emits the following signals:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program&#39;s language changes.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
-  </ul>
-  
-<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
-}
-
-// Callback function for the &quot;slide,end&quot; signal
-// This callback is called when the label slide reaches the end
-void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
-}
-</pre>
-
-       <h2 id="list" name="list">List</h2>
-       
- <p class="figure">Figure: List component</p> 
-<p align="center"> <img alt="List component" src="../../images/list_wn.png" /> </p> 
-  
-  <p class="figure">Figure: List hierarchy</p> 
-<p align="center"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p> 
- 
-  
- <p>This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
-
- <p>The list items can contain a text and two contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
-
-<h3>Adding a List Component</h3>
-
-<pre class="prettyprint">
-Evas_Object *list, *parent;
-
-// Create a list 
-list = elm_list_add(parent);
-</pre>
-
-<h3>Using the List</h3>
-
-<p>This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-
-// Change the scroller policy to fix the scroll only vertically
-elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
-// Enable bounce effect when the list reaches the upper and lower limits 
-elm_scroller_bounce_set(list, EINA_FALSE, EINA_TRUE);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-
-// Activate multi selection 
-elm_list_multi_select_set(list, EINA_FALSE);
-</pre>
-
-<h3>Adding Item to the List</h3>
-
- <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-int i;
-
-// This function is called when the list item is selected 
-static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
-&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
-}
-
-for (i = 0; i &lt; 10; i++)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *ic;
-&nbsp;&nbsp;&nbsp;char tmp[8];
-&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
-&nbsp;&nbsp;&nbsp;// Create an icon 
-&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
-&nbsp;&nbsp;&nbsp;// Set the file to the icon file 
-&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
-&nbsp;&nbsp;&nbsp;// Add item to the list 
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
-}
-
-</pre>
- 
-<h3>Changing the Text or Icon of an Item</h3>
-
-<p>If you want to change the state of an item, you can do it by using all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains two instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth arguments when you append or prepend the item in the list. The <span style="font-family: Courier New,Courier,monospace">evas_object</span> instances are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, whereas the second one is referenced as the <span style="font-family: Courier New,Courier,monospace">end</span> object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-Eina_List *l;
-Elm_Object_Item *it;
-
-// Retrieve the current selected item 
-it = elm_list_selected_item_get(list);
-if (!it)
-&nbsp;&nbsp;&nbsp;return;
-
-ic = elm_icon_add(win);
-// Set the file to the icon file 
-elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
-// Change the first icon 
-elm_object_item_part_content_set(it, &quot;start&quot;, ic);
-// Change the second icon 
-elm_object_item_part_content_set(it, &quot;end&quot;, ic);
-// Change the label 
-elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
-</pre>
-  
-<h3>Retrieving Selected Items</h3>
-
- <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
-
-<pre class="prettyprint">
-Evas_Object *list; Eina_List *l;
-Eina_List *selected_items;
-// List of Elm_Object_Item 
-Elm_Object_Item *it;
-
-selected_items = elm_list_selected_items_get(list);
-EINA_LIST_FOREACH(selected_items, l, it)
-&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
-</pre>
-
-<h3>List Item Operations</h3>
-
- <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-
- <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
-
- <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
-
- <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-Elm_Object_Item *current, *next;
-current = elm_list_selected_item_get(list);
-elm_list_item_selected_set(current, EINA_FALSE);
-next = elm_list_item_next(current);
-elm_list_item_selected_set(next, EINA_TRUE);
-elm_list_item_bring_in(next);
-</pre>
-
-<h3>Using List Callbacks</h3>
-
- <p>The list emits the following signals: </p> 
-  <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user double-clicks or presses (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: The user highlights an item on the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The user unhighlights an item in the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>  
-  </ul>
-
-<p>You can register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal with the following code. Note that the currently double-clicked item can be retrieved using the <span style="font-family: Courier New,Courier,monospace">event_info</span> pointer. This code registers to the <span style="font-family: Courier New,Courier,monospace">double,clicked</span> signal and unselects the item that has been double-clicked.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *list;
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
-}
-
-// Callback function for the &quot;clicked&quot; signal
-// This callback is called when the button is clicked by the user
-void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
-{
-&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
-&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it,  EINA_FALSE);
-}
-</pre>
-
-
-<h2 id="map" name="map">Map</h2>
-  
-<p class="figure">Figure: Map hierarchy</p> 
-<p align="center"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>   
-
-<p>The map component displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
-
-<p>This component supports:</p>
-  <ul> 
-   <li>Zooming</li> 
-   <li>Scrolling</li> 
-   <li>Markers with content to be displayed when the user clicks over them</li> 
-   <li>Group of markers</li>   
-   <li>Routes</li> 
-  </ul>
-
-<p>The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.</p>
-
-<h3>Adding a Map Component</h3>
-
-<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
-
-<pre class="prettyprint">
-Evas_Object *map, *parent;
-
-map = elm_map_add(parent);
-elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
-elm_map_zoom_set(map, 12);
-</pre>
-
-<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
-
-<h3>Playing with the Map</h3>
-
-<p>If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.</p>
-<pre class="prettyprint">
-elm_map_region_show(map, 2.2, 48.8);
-</pre>
-
-<p>This shows the desired coordinates. The location can also be shown with a bring-in animation.</p>
-<pre class="prettyprint">
-elm_map_region_bring_in(map, 2.2, 48.8);
-</pre>
-
-<p>The map is rotated 90 degrees around the current position.</p>
-<pre class="prettyprint">
-elm_map_rotate_set(map, 90, 2.2, 48.8);
-</pre>
-
-<h3>Drawing Overlays</h3>
-
-<p>Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.</p>
-
-<h4>Creating an Overlay Class</h4>
-
-<p>Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
-
-<p>Set an icon (&quot;Home&quot; icon) to the forest class. This icon is displayed in place of the forest class on the map.</p>
-<pre class="prettyprint">
-Evas_Object *icon;
-Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
-
-// Set min zoom level at which class is displayed
-elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
-
-// Create a Home icon object and set it to the forest class 
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, &quot;home&quot;);
-elm_map_overlay_icon_set(forest_class, icon);
-</pre>
-
-<h4>Adding Overlays to a Class</h4>
-
-<p>After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. Set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-<pre class="prettyprint">
-Elm_Map_Overlay *ovl;
-const char* data_meudon = &quot;Meudon forest&quot;;
-const char* data_fausses = &quot;Fausse forest&quot;;
-
-// Add an overlay
-ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, &quot;stop&quot;);
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &amp;data_meudon);
-
-// Add the new ovl object to the forest class 
-elm_map_overlay_class_append(forest_class, ovl);
-
-// Add another overlay next to the first one 
-ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, &quot;stop&quot;);
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &amp;data_fausses);
-elm_map_overlay_class_append(forest_class, ovl);
-</pre>  
-
-<p>If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.</p>
-<pre class="prettyprint">
-elm_map_overlay_class_zoom_max_set(forest_class, 8);
-</pre>
-
-<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
-
-<h4>Creating Bubbles Following Overlays</h4>
-
-<p>The following example shows how to set a content in a bubble following an overlay.</p>
-
-<pre class="prettyprint">
-// Add an overlay bubble object 
-Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
-
-// Set it to follow a specific overlay (the last created one here) 
-elm_map_overlay_bubble_follow(bubble, ovl);
-</pre>
-
-<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay&#39;s behavior.</p>
-
-<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
-
-<h3>Adding Other Overlays</h3>
-
-<p>You can draw a circle on the map with coordinates and a radius size.</p>
-<pre class="prettyprint">
-Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
-</pre>
-
-<p>You can also add a scale at the 200x0 coordinate (in pixels).</p>
-<pre class="prettyprint">
-Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
-</pre>
-
-<p>You can also draw a line, a polygon, or a route. For a full description of these functions, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Map.html">Map API</a>.</p>
-
-<h3>Calculating Routes</h3>
-
-<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
-
-<p>The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.</p>
-
-<pre class="prettyprint">
-Elm_Map_Route *route = elm_map_route_add(map,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_TYPE_BICYCLE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_METHOD_FASTEST,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.20718, 48.79759,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.1699, 48.8189,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL);
-
-// Add a callback to when the route has been calculated and loaded 
-evas_object_smart_callback_add(map, &quot;route,loaded&quot;, _route_loaded_cb, route);
-</pre>
-
-<p>Once the route is calculated, create a route overlay object and change its color. In this example, the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback is used.</p>
-<pre class="prettyprint">
-static void
-_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
-{
-&nbsp;&nbsp;&nbsp;Elm_Map_Route *route = data;
-
-&nbsp;&nbsp;&nbsp;Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
-&nbsp;&nbsp;&nbsp;elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
-}
-</pre>     
-
-<h3>Using Map Callbacks</h3>
-
-<p>The map component emits the following callbacks:</p>
-<ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the map without dragging around.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the map.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the map.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the map for a long time without dragging around.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the contents around starts.</li>  
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the contents around stops.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">tile,load</span>: A map tile image load begins.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: A map tile image load ends.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: A map tile image load fails.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: Route request begins.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: Route request ends.</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: Route request fails.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: Name request begins.</li>   
-   <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: Name request ends.</li>   
-   <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: Name request fails.</li>   
-   <li><span style="font-family: Courier New,Courier,monospace">overlay,clicked</span>: An overlay is clicked.</li>
-   <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The map is loaded.</li>
-</ul>
-
-               
-                               <h2 id="notify" name="notify">Notify</h2>
-  
-  <p class="figure">Figure: Notify hierarchy</p> 
-<p align="center"> <img alt="Notify hierarchy" src="../../images/notify_tree.png" /> </p> 
-
-  <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
-
-<h3>Adding a Notify Component</h3> 
-  
-<p>The following example shows how to create a notify object.</p>
-<pre class="prettyprint">
-Evas_Object *notify, *parent;
-notify = elm_notify_add(parent);
-</pre>
-
-<h3>Configuring the Notify Component</h3> 
-
-<p>Create a label and add it to the notify object.</p>
-<pre class="prettyprint">
-Evas_Object *content;
-
-// Create the label and set some text to it 
-content = elm_label_add(parent);
-
-elm_object_text_set(content, &quot;A label text&quot;);
-evas_object_show(content);
-
-// Add the label object to the notify component
-elm_object_content_set(notify, content);
-</pre>
-
-<p>In the following example the notify object is shown on the bottom left corner of the parent object.</p>
-<pre class="prettyprint">
-elm_notify_align_set(notify, 1.0, 1.0);
-evas_object_show(notify);
-</pre>
-
-<p>Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.</p>
-<pre class="prettyprint">
-elm_notify_timeout_set(notify, 5.0);
-</pre>
-
-<h3>Using Notify Callbacks</h3> 
-
-<p>The notify component emits the following signals:</p>
- <ul> 
-   <li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The timeout count ends and the notify component is hidden</li> 
-   <li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks outside of the notify component</li> 
-  </ul>
-
-<p>For both these signals <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(notify, &quot;timeout&quot;, timeout_cb, data);
-}
-
-// Callback function for the &quot;timeout&quot; signal
-// The timeout expires and the notify object is hidden
- 
-void timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Notify is hidden\n&quot;);
-}
-</pre>
-
-                               <h2 id="plug" name="plug">Plug</h2>
-  
-  <p class="figure">Figure: Plug hierarchy</p> 
-<p align="center"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p> 
-
-<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by an other process. It can be used anywhere the same way as any other elementary UI component.</p>
-
-<h3 id="add">Adding a Plug Component</h3>  
-
-<p>The following example shows how to create a plug.</p>
-<pre class="prettyprint">
-Evas_Object *plug, *parent;
-plug = elm_plug_add(parent);
-</pre>
-
-<h3 id="use">Using the Plug</h3>
-
-<p>The socket image provides the service where to connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process, use the service name and number set by the socket you want to connect to.</p>
-
-<p>As an example, connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
-
-<pre class="prettyprint">
-elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
-
-<pre class="prettyprint">
-Evas_Object *plug_img = elm_plug_image_object_get(plug);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called <span style="font-family: Courier New,Courier,monospace">remote_win</span> here).</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<pre class="prettyprint">
-// Create a remote window in the other process 
-Elm_Win *remote_win = elm_win_add(NULL, &quot;Window Socket&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_WIN_SOCKET_IMAGE);
-// Create a socket named &quot;plug_test&quot; and listen to it
-elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
-</pre>
-
-                               <h2 id="popup" name="popup">Popup</h2>
-  
-<p class="figure">Figure: Popup component</p> 
-<p align="center"><img alt="Popup component" src="../../images/popup_wn.png" /></p>
-      
-<p class="figure">Figure: Popup hierarchy</p> 
-<p align="center"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
-  
-
-<p>The popup component shows a popup area that can contain:</p>
-<ul>
-<li>a title area (optional)</li>
-<li>a content area</li>
-<li>an action area (optional)</li>
-</ul>
-
-<p>The optional title area can contain an icon and text, the action area can contain up to three buttons.</p>
-
-<h3>Adding a Popup Component</h3>
-
-<p>The following example shows how to create a popup component.</p>
-<pre class="prettyprint">
-Evas_Object *popup, *parent;
-
-// Create a popup 
-popup = elm_popup_add(parent);
-</pre>
-
-<h3>Using Popup Styles</h3>
-
-<p>The following item styles are available for wearable core controls:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
-</ul>
-<p>The following item styles are available for Gear O:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">toast/circle</span></li>
-</ul>
-<p>The following layout styles are available for Gear O:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">content/circle</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons1</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons2</span></li>
-</ul>
-
-<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
-<pre class="prettyprint">
-elm_object_style_set(popup, &quot;toast&quot;);
-</pre>
-
-
-<h3>Setting the Popup Areas in Wearable Core Controls</h3>
-<p>Configure the title area. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
-
-<pre class="prettyprint">
-elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
-</pre>
-<p>Set the content of the popup. The content can be simple text.</p>
-<pre class="prettyprint">
-elm_object_text_set(popup, &quot;simple text&quot;);
-</pre>
-<p>The content can also be an Evas object.</p>
-<pre class="prettyprint">
-Evas_Object *content;
-
-elm_object_content_set(popup, content);
-</pre>
-<p>Set the buttons of the action area by creating an <strong>OK</strong> button and a <strong>Cancel</strong> button.</p>
-<pre class="prettyprint">
-Evas_Object *button1, *button2;
-
-// Create the two buttons 
-button1 = elm_button_add(popup);
-elm_object_style_set(button1, &quot;popup&quot;);
-evas_object_size_hint_weight_set(button1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(button1, &quot;Cancel&quot;);
-
-button2 = elm_button_add(popup)
-elm_object_style_set(button2, &quot;popup&quot;);
-evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(button2, &quot;OK&quot;);
-
-evas_object_show(popup);
-
-// Set the buttons to the action area 
-elm_object_part_content_set(popup, &quot;button1&quot;, button1);
-elm_object_part_content_set(popup, &quot;button2&quot;, button2);
-</pre>
-
-<h3>Setting the Popup Areas in Gear O</h3>
-<p>Set the circle style and the layout of the popup.</p>
-<pre class="prettyprint">
-// Setting the style
-elm_object_style_set(popup, &quot;circle&quot;);
-
-// Setting the layout
-layout = elm_layout_add(popup);
-elm_layout_theme_set(layout, &quot;layout&quot;, &quot;popup&quot;, &quot;content/circle/buttons2&quot;);
-</pre>
-
-<p>To configure the title area, set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">elm.text.title</span>.</p>
-<pre class="prettyprint">
-// Setting the title text 
-elm_object_part_text_set(layout, &quot;elm.text.title&quot;, &quot;Text popup&quot;);
-</pre>
-
-<p>Set the content of the popup. The content can be simple text.</p>
-<pre class="prettyprint">elm_object_part_text_set(layout, &quot;elm.text.content&quot;, &quot;Test popup&quot;);
-</pre>
-
-<p>The content of the popup can also be an Evas object.</p>
-<pre class="prettyprint">
-Evas_Object *content;
-
-elm_object_content_set(layout, content);
-</pre>
-<p>Set the popup content.</p>
-<pre class="prettyprint">
-elm_object_content_set(popup, layout);
-</pre>
-
-<p>Set the buttons of the action area by creating an <strong>OK</strong> button, a <strong>Cancel</strong> button, and a <strong>Help</strong> button.</p>
-
-<pre class="prettyprint">
-Evas_Object *button1, *button2, *icon;
-
-// Create the 2 buttons 
-
-button1 = elm_button_add(popup);
-elm_object_style_set(button1, &quot;popup/circle/left&quot;);
-icon = elm_image_add(button1);
-elm_image_file_set(icon, ICON_DIR&quot;/b_option_list_icon_share.png&quot;, NULL);
-evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_part_content_set(button1, &quot;elm.swallow.content&quot;, icon);
-evas_object_show(icon);
-
-button2 = elm_button_add(popup);
-elm_object_style_set(button2, &quot;popup/circle/right&quot;);
-icon = elm_image_add(button2);
-elm_image_file_set(icon, ICON_DIR&quot;/b_option_list_icon_delete.png&quot;, NULL);
-evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_part_content_set(button2, &quot;elm.swallow.content&quot;, icon);
-evas_object_show(icon);
-
-// Set the buttons to the action area 
-elm_object_part_content_set(popup, &quot;button1&quot;, button1);
-elm_object_part_content_set(popup, &quot;button2&quot;, button2);
-
-</pre>
-
-<h3>Using Popup Callbacks</h3>
-<p>The popup emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of timeout.</li>
-<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the Blocked Event area.</li>
-</ul>
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In the following example the timeout is set to five seconds.</p>
-<pre class="prettyprint">elm_popup_timeout_set(popup, 5.0);</pre>
-
-<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, data);
-}
-
-static void
-_timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Timeout \n&quot;);
-}
-</pre>
-
-<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal <span style="font-family: Courier New,Courier,monospace">block,clicked</span> is sent to the application.</p>
-
-                       
-                               <h2 id="progressbar" name="progressbar">Progressbar</h2>
-  
-         <p class="figure">Figure: Progressbar component</p> 
-<p align="center"><img alt="Progressbar component" src="../../images/progressbar_wn.png" /></p>
-      
-         <p class="figure">Figure: Progressbar hierarchy</p> 
-<p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
-  
-
- <h3>Adding a Progressbar Component</h3>
- 
-<p>This UI component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.</p> 
-<p>The following example shows how to create a progressbar component.</p>
-<pre class="prettyprint">
-Evas_Object *pb = elm_progressbar_add(win);
-</pre>
-
-<h3>Using the Progressbar Styles</h3>
-
-<p>The progressbar has several styles for wearable core controls:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">pending_list</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">process</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">process/groupindex</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">process/popup/small</span></li>
-</ul>
-<p>The progressbar has several styles for Gear O:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">process</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">process/small</span></li>
-</ul>
-
-<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
-
-<pre class="prettyprint">
-elm_object_style_set(pb, &quot;pending_list&quot;);
-</pre>
-
-<h3>Configuring the Progressbar for Wearable Core Control</h3>
-
-<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
-<pre class="prettyprint">elm_progressbar_pulse_set(pb, EINA_TRUE);
-elm_progressbar_pulse(pb, EINA_TRUE);
-</pre>
-
-<p>The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
-<pre class="prettyprint">elm_progressbar_inverted_set(pb, EINA_TRUE);</pre>
-
-<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
-<pre class="prettyprint">elm_progressbar_value_set(pb, 0.2);</pre>
-
-<p>It is possible to read the current value.</p>
-<pre class="prettyprint">double value = elm_progressbar_value_get(pb);</pre>
-
-<h3>Configuring the Progressbar for Gear O</h3>
-<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
-
-<pre class="prettyprint">
-elm_progressbar_value_set(pb, 0.2);
-</pre>
-<p>The current value can be read.</p>
-<pre class="prettyprint">
-double value = elm_progressbar_value_get(pb);
-</pre>
-
-
-<h3>Using the Progressbar Callbacks</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">changed</span> signal is the only signal specifically emitted by the progressbar component.</p>
-<p>The following example shows how to register a callback on this signal.</p>
-
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pb, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the progressbar value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
-}
-</pre>
-
-               
-                               <h2 id="radio" name="radio">Radio</h2>
-                               
-<p class="figure">Figure: Radio component</p> 
-<p align="center"><img alt="Radio component" src="../../images/radio_wn.png" /></p>
-      
-<p class="figure">Figure: Radio hierarchy</p> 
-<p align="center"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
-  
-<p>This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected). Even though it is usually grouped with two or more other radio objects, it can also be used alone.
-</p>
-<p>The radio component inherits from the layout component. All the layout functions can be used with radio objects.</p>
-
-<h3>Adding a Radio Component</h3>
-
-<p>Create a radio component.</p>
-<pre class="prettyprint">
-Evas_Object *radio, *parent;
-
-// Create a radio
-radio = elm_radio_add(parent);
-</pre>
-
-<h3>Changing the Radio Value</h3>
-
-<p>The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.</p>
-<pre class="prettyprint">
-elm_radio_state_value_set(radio, 1);
-</pre>
-
-<h3>Managing the Radio Groups</h3>
-
-<p>The following example shows how to create a group of radio objects with at least two radio components.</p>
-
-<pre class="prettyprint">
-// Create another radio object 
-Evas_Object *radio2 = elm_radio_add(parent);
-elm_radio_state_value_set(radio2, 2);
-
-// Create a group composed of radio and radio2
-Evas_Object *group = radio;
-elm_radio_group_add(radio2, group);
-</pre>
-
-<p>Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.</p>
-
-<pre class="prettyprint">elm_radio_value_set(group, 2);</pre>
-
-<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
-
-<h3>Using the Radio Callbacks</h3>
-
-<p>This UI component emits the following signals:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">changed</span>: The state of a radio is modified in a group of radio objects.</li></ul>
-
-<p>The following example shows how to register a callback on this signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the radio value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
-}
-</pre>
-
-       <h3>Using the Radio Callbacks with Gear O</h3>
-       
-<p>This UI component emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
-<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: Radio was clicked.</li>
-</ul>
-
-<p>The following example shows how to register a callback on this signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;clicked&quot;, clicked_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the radio value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;This radio was clicked\n&quot;);
-}
-</pre>
-
-               
-                               <h2 id="slider" name="slider">Slider for the Wearable Core</h2>
-
-<p class="figure">Figure: Slider component</p> 
-<p align="center"><img alt="Slider component" src="../../images/slider_wn.png" /></p>
-      
-<p class="figure">Figure: Slider hierarchy</p> 
-<p align="center"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
-
-<p> The slider component is a draggable bar that is used to select a value within a certain range.</p>
-
-<h3>Adding a Slider Component</h3>
-
-<p>The following example shows how to create a slider object.</p>
-<pre class="prettyprint">
-Evas_Object *slider, *parent;
-
-slider = elm_slider_add(parent);
-</pre>
-
-<h3>Using the Slider Styles</h3>
-
-<p>A slider has the following styles:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
-</ul>
-
-<h3>Configuring the Slider</h3>
-
-<p>It can contain icons (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> partname), a label, a unit label and an indicator label.</p>
-<pre class="prettyprint">
-Evas_Object *icon1, *icon2;
-
-// Set the icons 
-elm_object_part_content_set(slider, &quot;elm.swallow.icon&quot;, icon1);
-
-// Set the unit format 
-elm_slider_unit_format_set(slider, &quot;%1.2f meters&quot;);
-</pre>
-
-<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
-<pre class="prettyprint">
-elm_slider_min_max_set(slider, 0.0, 100.0);
-elm_slider_value_set(slider, 50.0);
-</pre>
-
-<p>The span of the slider represents its length horizontally. It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
-<p>You can retrieve the current value of the slider anytime.</p>
-<pre class="prettyprint">
-double value = elm_slider_value_get(slider);
-</pre>
-
-<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.</p>
-<pre class="prettyprint">
-// Get the current state of the indicator 
-Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
-
-// Invert the behavior 
-elm_slider_indicator_show_set(slider, !enlarge);
-</pre>
- 
-<h3>Using the Slider Callbacks</h3>
-
-<p>This UI component emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
-<li><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span>: Dragging the slider indicator around starts.</li>
-<li><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span>: Dragging the slider indicator around stops.</li>
-<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
-</ul>
-
-<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;changed&quot;, changed_cb, data);
-}
-
-// Callback function for the &quot;changed&quot; signal
-// This callback is called when the slider value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The slider has changed\n&quot;);
-}
-</pre>
- 
-                       
-
-                               <h2 id="win" name="win">Win</h2>
-
-    <p class="figure">Figure: Win hierarchy</p> 
-<p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>   
- 
-
-<p>The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
-<p>The window component is created with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function. The content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
-
-<h3>Adding a Window Component</h3>
-
-<p>Create a new window and change the title.</p>
-<pre class="prettyprint">
-Evas_Object *window;
-
-// Create a window 
-window = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-
-// Change the window title 
-elm_win_title_set(window, &quot;Example Window&quot;);
-</pre>
-
-<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. <span style="font-family: Courier New,Courier,monospace">main</span> is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
-
-<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>. The window created is of the type <span style="font-family: Courier New,Courier,monospace">ELM_WIN_BASIC</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *window;
-
-// Create a standard window 
-window = elm_win_util_standard_add(&quot;main&quot;, &quot;Example Window&quot;);
-</pre>
-
-<h3>Closing a Window</h3>
-<p>When the user closes the window outside of the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
-<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
-<p>The autodel is set using the following call:</p>
-<pre class="prettyprint">
-elm_win_autodel_set(window, EINA_TRUE);
-</pre>
-
-<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function. The window is destroyed and the signal <span style="font-family: Courier New,Courier,monospace">delete,request</span> is sent.</p>
-
-<h3>Using the Window Callbacks</h3>
-<p>The window component emits the following signals:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">delete,request</span>: The window is requested delete.</li>
-<li><span style="font-family: Courier New,Courier,monospace">focus,in</span>: The window received focus.</li>
-<li><span style="font-family: Courier New,Courier,monospace">focus,out</span>: The window lost focus.</li>
-<li><span style="font-family: Courier New,Courier,monospace">moved</span>: The window that holds the canvas is moved.</li>
-<li><span style="font-family: Courier New,Courier,monospace">withdrawn</span>: The window is managed normally but is removed from the view.</li>
-<li><span style="font-family: Courier New,Courier,monospace">iconified</span>: The window is minimized (for example, into an icon or a taskbar).</li>
-<li><span style="font-family: Courier New,Courier,monospace">normal</span>: The window is in the normal state (not withdrawn or iconified).</li>
-<li><span style="font-family: Courier New,Courier,monospace">stick</span>: The window shows on all desktops.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unstick</span>: The window shows only on one desktop.</li>
-<li><span style="font-family: Courier New,Courier,monospace">fullscreen</span>: The window is fullscreen.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unfullscreen</span>: The window stops being fullscreen.</li>
-<li><span style="font-family: Courier New,Courier,monospace">maximized</span>: The window is maximized.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unmaximized</span>: The window is diminished.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span>: The rotation of the window is changed by the Windows Manager.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ioerr</span>: A low-level I/O error occurred in the display system.</li>
-<li><span style="font-family: Courier New,Courier,monospace">indicator,prop,changed</span>: The property or indicator mode and indicator opacity are changed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">rotation,changed</span>: The rotation of the window is changed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">profile,changed</span>: The profile of the window is changed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">aux,hint,allowed</span>: aux_hint of the window free.</li>
-<li><span style="font-family: Courier New,Courier,monospace">access,changed</span>: The access function of the window is changed.</li>
-</ul>
-<p>With all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>The following example registers a callback function called on the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal.</p>
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window, &quot;fullscreen&quot;, fullscreen_cb, data);
-}
-
-// Callback function for the &quot;fullscreen&quot; signal
-// This callback is called when the window becomes fullscreen
-void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Window fullscreen\n&quot;);
-}
-</pre>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.guides/html/native/ui/containers_mn.htm b/org.tizen.guides/html/native/ui/containers_mn.htm
deleted file mode 100644 (file)
index 5c6155b..0000000
--- a/org.tizen.guides/html/native/ui/containers_mn.htm
+++ /dev/null
@@ -1,610 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Containers</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#box">Box</a></li>
-                       <li><a href="#conformant">Conformant</a></li>
-                       <li><a href="#grid">Grid</a></li>
-                       <li><a href="#layout">Layout</a></li>
-                       <li><a href="#mapbuf">Mapbuf</a></li>
-                       <li><a href="#naviframe">Naviframe</a></li>
-                       <li><a href="#panes">Panes</a></li>
-                       <li><a href="#scroller">Scroller</a></li>
-                       <li><a href="#table">Table</a></li>
-                       
-                       </ul>
-               <p class="toc-title">Related Info</p>
-                       <ul class="toc">
-                               <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Components Tutorials</a></li>
-                               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>                             
-                               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>                     
-                               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Containers</h1>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-                               <h2 id="box" name="box">Box</h2>
-                               
-
-  <p class="figure">Figure: Box container</p>
-  <p align="center"><img alt="Box container" src="../../images/box.png" /></p>
-
-
-<p>Most of the time, you want to display UI components on the screen in a specific order. In <a href="../../../../org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm">Form Tutorial</a>, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.</p>
-<h3>Creating a Box</h3>
-<p>To create a new horizontal box:</p>
-<pre class="prettyprint">Evas_Object *vbox;
-
-vbox = elm_box_add(parent);
-</pre>
-<p>By default, the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function creates a vertical box. If you want to create a horizontal box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function:</p>
-<pre class="prettyprint">Evas_Object *hbox;
-
-hbox = elm_box_add(parent);
-elm_box_horizontal_set(hbox, EINA_TRUE);
-</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">A box is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<h3>Adding Objects to the Box</h3>
-<p>You can add any Evas object to the box. Here, we create 5 button components and add them to a box:</p>
-<pre class="prettyprint">int i;
-Evas_Object *bt;
-Evas_Object *vbox;
-
-vbox = elm_box_add(parent);
-
-for (i = 0; i &lt; 5; i++)
-{
-&nbsp;&nbsp;&nbsp;char tmp[16];
-&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Button %d&quot;, i);
-&nbsp;&nbsp;&nbsp;bt = elm_button_add(vbox);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, tmp);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(vbox, bt);
-&nbsp;&nbsp;&nbsp;evas_object_show(bt);
-}
-evas_object_show(vbox);
-</pre>
-<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button component to the end of the box.</p>
-
-<h3>Setting the Padding</h3>
-<p>You can set the padding between the objects in a box by using the <span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span> function. The padding values are the number of pixels horizontally and vertically.</p>
-<pre class="prettyprint">elm_box_padding_set(vbox, 16, 64);
-</pre>
-
-<h3>Handling Element Size</h3>
-<p>You can add different-size elements to a container. For example, to add an image with a size of 128x128 pixels as the first element in a box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function:</p>
-<pre class="prettyprint">ic = elm_icon_add(vbox);
-elm_image_file_set(ic, &quot;./c1.png&quot;, NULL);
-evas_object_size_hint_min_set(ic, 128, 128);
-evas_object_show(ic);
-elm_box_pack_start(vbox, ic);
-</pre>
-<p>We ask Evas to set the size hint for the icon object by using the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Evas will try to set the minimum size of this object accordingly.</p>
-<p>If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_homogeneous_set()</span> function:</p>
-<pre class="prettyprint">elm_box_homogeneous_set(vbox, EINA_TRUE);
-</pre>
-<p>Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.</p>
-<h3>Setting the Alignment</h3>
-<p>You can set the alignment of UI components inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
-
-<p class="figure">Figure: Alignment</p>
-<p align="center"><img alt="Alignment" src="../../images/align.png" /></p>
-
-<p>Here, we set an alignment of 0.8 vertically:</p>
-<pre class="prettyprint">elm_box_align_set(vbox, 0.0, 0.8);
-</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The alignment only takes effect in the opposite direction than the one defined with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function.</td>
-    </tr>
-   </tbody>
-  </table>
-
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_layout_transition()</span> function provides the ability to animate the motion of the objects in a box when switching from one layout to another.</p>
-<h3>Using Size Hints</h3>
-<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called &quot;hints&quot;. The size hint functions are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span></li>
-</ul>
-<p>You can also use the respective get functions to get the current hint values.</p>
-<p>In case of the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function, you ask Evas to respect the minimum size you define for the object. For example, to set the minimum size of an icon to 64x46 pixels:</p>
-<pre class="prettyprint">evas_object_size_hint_min_set(ic, 64, 64);
-</pre>
-<p>You can also set a maximum size for the same icon:</p>
-<pre class="prettyprint">evas_object_size_hint_max_set(ic, 128, 128);
-</pre>
-<p>When you resize the parent of the icon, if there are no constraints to the parent, the minimum size of the parent will be the minimum hint size of the icon. If you increase the parent size, the icon will grow larger until its maximum hint size is reached. After this point, the icon will not grow any larger and there will be empty space around the icon within the parent.</p>
-<p>When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. Here, the proportion of the icon is respected, and the width will be the same as the height:</p>
-<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
-</pre>
-<p>Here, the width will be twice the height:</p>
-<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
-</pre>
-<p>If we want to change the alignment of the icon relative to the parent, we can use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align()</span> function. By default, the icon is centered, so it is aligned with a value of 0.5. You can change the alignment as follows:</p>
-<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre>
-<p>In the above case, the icon is aligned to the bottom left corner of the parent.</p>
-<p>We can also play with the size of the icon inside its container by using the weight size hint. By default, the weight is not set, so the size of the icon will be the minimum size. But if you set this value to 1, the icon will be expand as much as it can inside the container:</p>
-<pre class="prettyprint">evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
-<p>You can also use the alignment and weight hints together. Here, we want the icon to take up all the space in its parent:</p>
-<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
- 
-               
-                               <h2 id="conformant" name="conformant">Conformant</h2>
-
-<p class="figure">Figure: Conformant container</p>
-<p align="center"><img alt="Conformant container" src="../../images/conformant.png" /></p>
-
-<p>A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.</p>
-
-<h3>Creating a Conformant</h3>
-<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
-<pre class="prettyprint">
-Evas_Object *conformant;
-
-conformant = elm_conformant_add(parent);
-</pre>
-
-<h3>Adding Content to the Conformant</h3>
-<p>To add content to the conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
-<pre class="prettyprint">elm_object_content_set(conformant, main_view);
-</pre>
-
-<h3>Signals</h3>
-<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
-<ul>
-<li>&quot;virtualkeypad,state,on&quot;: The virtual keyboard has been switched on.</li>
-<li>&quot;virtualkeypad,state,off&quot;: The virtual keyboard has been switched off.</li>
-<li>&quot;virtualkeypad,size,changed&quot;: The virtual keyboard size has changed.</li>
-<li>&quot;clipboard,state,on&quot;: The clipboard has been switched on.</li>
-<li>&quot;clipboard,state,off&quot;: The clipboard has been switched off. </li>
-</ul>
-
-                       
-                               <h2 id="grid" name="grid">Grid</h2>
-
-<p>In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.</p>
-
-<h3>Creating a Grid</h3>
-<p>To create a grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *grid;
-
-grid = elm_grid_add(parent);
-</pre><h3>Adding Items to the Grid</h3>
-<p>To add an item to the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. Provide the X and Y coordinates, and the width and height in the grid as parameters. The following code adds 12 icons in a circle formation:</p>
-<pre class="prettyprint">for (i = 0; i &lt; 12; i++)
-{
-&nbsp;&nbsp;&nbsp;ic = elm_icon_add(grid);
-&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(ic, 128, 128);
-&nbsp;&nbsp;&nbsp;evas_object_show(ic);
-&nbsp;&nbsp;&nbsp;x = 40 * cos(2.0 * M_PI / 12 * i);
-&nbsp;&nbsp;&nbsp;y = 40 * sin(2.0 * M_PI / 12 * i);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, ic,  40 + x,  40 + y,  20 , 20);
-}
-evas_object_show(grid);
-</pre>
-
-<h3>Changing Position and Size</h3>
-<p>To change the position of an item in the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. The first parameter is the item you want to move, and the following parameters are the same as for the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span> function.</p>
-<p>To change the size of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span> function. You can set the new width and height for the grid. The position and size of the items in the grid are changed accordingly.</p>
-<h3>Clearing the Grid</h3>
-<p>To clear the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_clear()</span> function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function called on each item.</p>
-
-
-                               <h2 id="layout" name="layout">Layout</h2>
-
-<p>A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of a lot of graphics components used in Elementary.</p>
-
-<p>An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<h3 id="container_layout_creating" name="container_layout_creating">Creating a Layout</h3>
-
-<p>To create a new layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *layout;
-
-layout = elm_layout_add(parent);
-</pre>
-<p>In Tizen, the layout component is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
-<ul>
-<li>application/default: This layout can be used to display content inside a window.</li>
-<li>drawer/panel: This layout can be used to create a 2-panel view.</li>
-<li>nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.</li>
-</ul>
-<p>To use the application/default layout:</p>
-<pre class="prettyprint">Evas_Object *ly;
-
-ly = elm_layout_add(parent);
-elm_layout_theme_set(ly, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
-</pre>
-
-<h3 id="container_layout_inserting_objects" name="container_layout_inserting_objects">Adding Objects to the Layout</h3>
-<p>To add an Evas object to the layout:</p>
-<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot; view);
-</pre>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.</p>
-<p>The drawer/panel layout can display 2 different views, the background and the main content:</p>
-<pre class="prettyprint">Evas_Object *ly;
-
-ly = elm_layout_add(parent);
-elm_layout_theme_set(ly, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
-</pre>
-<p>To swallow an object inside the main content and background views:</p>
-<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot;, main_view);
-elm_object_part_content_set(ly, &quot;elm.swallow.background&quot;, background);
-</pre>
-<p>The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part. There are two different texts zones: <span style="font-family: Courier New,Courier,monospace">elm.text</span> and <span style="font-family: Courier New,Courier,monospace">elm.help.text</span>. To change the text:</p>
-<pre class="prettyprint">elm_object_part_text_set(ly, &quot;elm.text&quot;, &quot;Hi All :)&quot;);
-elm_object_part_text_set(ly, &quot;elm.help.text&quot;, &quot;Hi All :)&quot;);
-</pre>
-<h3 id="container_layout_styles" name="container_layout_styles">Using Layout Themes</h3>
-<p>The layout component supports the following predefined default themes:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-content</span>: For applications with a toolbar and main content area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back</span>: For applications with a toolbar, main content area (with a back button), and title area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back-next</span>: For applications with a toolbar, main content area (with back and next buttons), and title area.</li>
-<li><span style="font-family: Courier New,Courier,monospace">content-back</span>: For applications with main content (with a back button) and title areas.</li>
-<li><span style="font-family: Courier New,Courier,monospace">content-back-next</span>: For applications with main content (with back and next buttons) and title areas.</li>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-vbox</span>: For applications with a toolbar and main content area as a vertical box.</li>
-<li><span style="font-family: Courier New,Courier,monospace">toolbar-table</span>: For applications with a toolbar and main content area as a table.</li>
-</ul>
-<p>To set a theme to the layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function.</p>
-
-
-                               <h2 id="mapbuf" name="mapbuf">Mapbuf</h2>
-
-<p class="figure">Figure: Mapbuf hierarchy</p>
-<p align="center"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
-
-<p>A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.</p>
-
-<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.</p>
-
-<p>The mapbuf component inherits all the functions of the container class.</p>
-
-<h3>Creating a Mapbuf</h3>
-<p>To create a mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *mapbuf, *parent, *content;
-
-// Creating a mapbuf
-mapbuf = elm_mapbuf_add(parent);
-</pre>
-<h3>Adding Content to the Mapbuf</h3>
-<p>To add content to the mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the &quot;default&quot; part:</p>
-<pre class="prettyprint">elm_object_content_set(mapbuf, content);</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Calling <span style="font-family: Courier New,Courier,monospace">elm_object_content_set(mapbuf, content)</span> is equivalent to calling <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(mapbuf, "default", content)</span>.</td>
-    </tr>
-   </tbody>
-  </table>
-
-
-<p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
-<pre class="prettyprint">elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
-elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
-</pre>
-
-<h3>Activating the Mapbuf</h3>
-<p>Finally, to use the mapbuf component, you must activate it:</p>
-<pre class="prettyprint">elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);</pre>
-
-<h3>Signals</h3>
-<p>The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.</p>
-
-                       
-                               <h2 id="naviframe" name="naviframe">Naviframe</h2>
-
-<p>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.</p>
-
-<h3>Creating a Naviframe</h3>
-<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *nav;
-
-nav = elm_naviframe_add(parent);
-</pre>
-<h3>Adding and Deleting Views</h3>
-<p>The naviframe is a stack of views. A new view is always pushed to the top of the stack. The top-most view is deleted by popping it.</p>
-<p>To add a new view to the naviframe:</p>
-<pre class="prettyprint">Elm_Object_Item *nav_it;
-
-nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
-// In Tizen 2.3, the back button is not supported in the naviframe 
-</pre>
-<p>When you push a new view to the stack, you receive an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> for the view. You can use this item to modify the view.</p>
-<p>To pop and delete the top-most view:</p>
-<pre class="prettyprint">elm_naviframe_item_pop(nav);
-</pre>
-
-<h3>Adding Fixed Content</h3>
-<p>The naviframe can also display fixed content on top of the current (top-most) view. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function to set this content. Use the following part names to specify the location of the content:</p>
-<ul>
-<li>&quot;default&quot;: The main content area of the current view.</li>
-<li>&quot;icon&quot;: An icon in the title area of the current view.</li>
-<li>&quot;title_left_btn&quot;: A button on the left side of the naviframe.</li>
-<li>&quot;title_right_btn&quot;: A button on the right side of the naviframe.</li>
-</ul>
-<p>For example, to add a button to the naviframe:</p>
-<pre class="prettyprint">btn = elm_button_add(nav);
-elm_object_style_set(btn, &quot;naviframe/title_cancel&quot;);
-elm_object_item_part_content_set(nav_it, &quot;title_left_btn&quot;, btn);
-</pre>
-<p>To set the title labels of the naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function and specify one of the following label locations:</p>
-<ul>
-<li>&quot;default&quot;: Sets the title label in the title area of the current view.</li>
-<li>&quot;subtitle&quot;: Sets the subtitle label in the title area of the current view.</li>
-</ul>
-<h3>Signals</h3>
-<p>The naviframe emits the following signals:</p>
-<ul>
-<li>&quot;transition,finished&quot;: The transition has finished changing the view.</li>
-<li>&quot;title,transition,finished&quot;: The title area transition has finished  changing the state of the title.</li>
-<li>&quot;title,clicked&quot;: The user has clicked the title area.</li>
-</ul>
-
-
-               
-                               <h2 id="panes" name="panes">Panes</h2>
-
-<p class="figure">Figure: Panes component</p>
-<p align="center"><img alt="Panes component" src="../../images/panes.png" /></p>
-
-<p>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</p>
-
-<h3>Creating Panes</h3>
-<p>To create a panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *panes;
-
-panes = elm_panes_add(parent);
-</pre>
-
-<h3>Adding Content to the Panes</h3>
-<p>To add content to the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. The following code adds an object to the left pane:</p>
-<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, obj);
-</pre>
-
-<h3>Setting Panes Options</h3>
-<p>To set the orientation of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
-
-<p>To set the size of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions.</p>
-
-<h3>Signals</h3>
-<p>The panes component emits the following signals:</p>
-<ul>
-<li>&quot;press&quot;: The panes component has been pressed (but the press has not been released yet).</li>
-<li>&quot;unpress&quot;: The press has been released.</li>
-<li>&quot;clicked&quot;: The panes component has been clicked.</li>
-<li>&quot;clicked,double&quot;: The panes component has been double-clicked.</li>
-</ul>
-
-               
-                               <h2 id="scroller" name="scroller">Scroller</h2>
-
-<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.</p>
-<p>The scroller component inherits all the functions of the <a href="#layout">Layout</a>.</p>
-<h3>Creating a Scroller</h3>
-<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
-<pre class="prettyprint">
-Evas_Object *scroller;
-
-scroller = elm_scroller_add(parent);
-</pre>
-<h3>Adding Objects to the Scroller</h3>
-<p>To add an object to the scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
-<pre class="prettyprint">Evas_Object *image;
-
-image = elm_image_add(parent);
-elm_image_file_set(image, &quot;image.png&quot;, NULL);
-evas_object_show(image);
-evas_object_size_hint_min_set(image, 2560, 1600);
-elm_object_content_set(scroller, image);
-</pre>
-<p>In the above code, we set a minimum size of 2560 x 1600 pixels for the image. The scroller is smaller than the image, so you can scroll across the image.</p>
-<p>If you want to be informed when the user begins scrolling the image, use the following code:</p>
-<pre class="prettyprint">
-evas_object_smart_callback_add(scroller, &quot;scroll,drag,start&quot;, _scroll_start_cb, NULL);
-
-// Callback function for the &quot;animate,begin&quot; signal
-// This callback is called when the user begins scrolling the image
-void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;Scroll starts\n&quot;);
-}</pre>
-
-<h3>Managing the Properties of the Scroller</h3>
-<p>When scrolling content, the scroller may &quot;bounce&quot; when reaching the edge of the content. This is a visual way of indicating that there is no more content to scroll in that direction. Bounce is enabled by default for both axes. To enable or disable the bounce for either or both axes, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_bounce_set()</span> function. The following code disables the bounce for the horizontal axis and enables it for the vertical axis:</p>
-
-<pre class="prettyprint">elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
-</pre>
-<p>The scroller can limit the scrolling to &quot;pages&quot;. In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single "page" at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
-
-<h3>Signals</h3>
-
-<p>The scroller emits the following signals, which you can catch in your application:</p>
-
-<ul>
-<li>&quot;edge,left&quot;: The left edge of the content has been reached.</li>
-<li>&quot;edge,right&quot;: The right edge of the content has been reached.</li>
-<li>&quot;edge,top&quot;: The top edge of the content has been reached.</li>
-<li>&quot;edge,bottom&quot;: The bottom edge of the content has been reached.</li>
-<li>&quot;scroll&quot;: The content has been scrolled (moved).</li>
-<li>&quot;scroll,anim,start&quot;: The scrolling animation has started.</li>
-<li>&quot;scroll,anim,stop&quot;: The scrolling animation has stopped.</li>
-<li>&quot;scroll,drag,start&quot;: Dragging the contents has started.</li>
-<li>&quot;scroll,drag,stop&quot;: Dragging the contents has stopped.</li>
-<li>&quot;vbar,drag&quot;: The vertical scroll bar has been dragged.</li>
-<li>&quot;vbar,press&quot;: The vertical scroll bar has been pressed.</li>
-<li>&quot;vbar,unpress&quot;: The vertical scroll bar has been unpressed.</li>
-<li>&quot;hbar,drag&quot;: The horizontal scroll bar has been dragged.</li>
-<li>&quot;hbar,press&quot;: The horizontal scroll bar has been pressed.</li>
-<li>&quot;hbar,unpress&quot;: The horizontal scroll bar has been unpressed.</li>
-<li>&quot;scroll,page,changed&quot;: The visible page has changed.</li>
-</ul>
-
-<h3>Example</h3>
-<p>A good example of the scroller is a picture slideshow: we add images to the scroller and limit the scrolling to pages (one picture at a time). In the following code, we disable the scroll bars for both axes, limit the scrolling to pages by using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_scroll_limit_set()</span> function, and lock the scrolling on the Y axis by using the <span style="font-family: Courier New,Courier,monospace">elm_object_scroll_lock_y_set()</span> function:</p>
-<pre class="prettyprint">elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
-elm_scroller_page_scroll_limit_set(scroller, 1, 0);
-elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
-</pre>
-<p>We create a horizontal box, which will contain all the images, and which itself will be contained by the scroller:</p>
-<pre class="prettyprint">box = elm_box_add(scroller);
-elm_box_horizontal_set(box, EINA_TRUE);
-elm_object_content_set(scroller, box);
-evas_object_show(box);
-</pre>
-<p>We then create all the images and add them to the horizontal box:</p>
-<pre class="prettyprint">img = elm_image_add(scroller);
-snprintf(buf, sizeof(buf), IMAGE_DIR&quot;/%d.jpg&quot;, i);
-elm_image_file_set(img, buf, NULL);
-evas_object_show(img);
-pages = eina_list_append(pages, img);
-elm_box_pack_end(box, img);
-</pre>
-<p>We store references to the images in an <span style="font-family: Courier New,Courier,monospace">eina_list</span> for easy retrieval later.</p>
-<p>Finally, we display the first page of the scroller:</p>
-<pre class="prettyprint">elm_scroller_page_show(scroller, 0, 0);
-</pre>
-<p>The size of the scroller depends on the size of the parent. When the parent changes, for example when the window is resized or rotated, the scroller is also resized. Since we need to be informed when the scroller is resized, we add a callback on the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span> event for the scroller:</p>
-<pre class="prettyprint">evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);</pre>
-<p>The callback retrieves the new size of the scroller by using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function on the object pointer. The pointer is relative to the object that has been resized, which in our case is the scroller itself. We can then iterate through the images of the scroller and set the minimum size to fit the scroller size:</p>
-<pre class="prettyprint">EINA_LIST_FOREACH(images, l, page)
-{
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(page, w, h);
-}
-</pre>
-<p>Finally, we set the page size of the scroller to match the scroller size and display the first page:</p>
-<pre class="prettyprint">elm_scroller_page_size_set(obj, w, h);
-elm_scroller_page_show(obj, 0, 0);</pre>
-
-                               <h2 id="table" name="table">Table</h2>
-
-<p>A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).</p>
-
-<h3>Creating a Table</h3>
-
-<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *table;
-table = elm_table_add(parent);</pre>
-
-<h3>Adding Items to the Table</h3>
-
-<p>Items are added to the table with the <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function. This function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan). If we want to create an icon that takes 3 columns and rows and a button that only takes 1 row and column, the code will look like this:</p>
-<pre class="prettyprint">ic = elm_icon_add(table);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-evas_object_show(ic);
-elm_table_pack(table, ic, 0, 0, 3, 3);
-
-btn = elm_button_add(table);
-elm_object_text_set(btn, &quot;Click me i'm famous&quot;);
-evas_object_show(btn);
-elm_table_pack(table, btn, 3, 1, 1, 1);
-evas_object_show(table);
-</pre>
-
-<h3>Managing the Items</h3>
-
-<p>If you want to change the position of the item after adding it, use the <span style="font-family: Courier New,Courier,monospace">elm_table_pack_set()</span> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
-
-<p>To add padding around the item, use the <span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span> function. The second parameter is the padding between columns, and the third parameter is the padding between rows:</p>
-<pre class="prettyprint">elm_table_padding_set(table, 10, 10);</pre>
-
-<p>To change the alignment and size of an item, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint</span> parameters. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
-<pre class="prettyprint">elm_table_homogeneous_set(table, EINA_TRUE);
-</pre>
-
-<h3>Clearing the Table</h3>
-
-<p>To clear the table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted. The <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function will be called on each item.</p>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.guides/html/native/ui/containers_wn.htm b/org.tizen.guides/html/native/ui/containers_wn.htm
deleted file mode 100644 (file)
index c8d1ccc..0000000
--- a/org.tizen.guides/html/native/ui/containers_wn.htm
+++ /dev/null
@@ -1,555 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Containers</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#box">Box</a></li>
-                       <li><a href="#conformant">Conformant</a></li>
-                       <li><a href="#grid">Grid</a></li>
-                       <li><a href="#layout">Layout</a></li>
-                       <li><a href="#mapbuf">Mapbuf</a></li>
-                       <li><a href="#naviframe">Naviframe</a></li>
-                       <li><a href="#scroller">Scroller</a></li>
-                       <li><a href="#table">Table</a></li>
-                       
-                       </ul>
-               <p class="toc-title">Related Info</p>
-                       <ul class="toc">
-                               <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Components Tutorials</a></li>
-                               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>                         
-                               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                         
-                               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Containers</h1>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-                               <h2 id="box" name="box">Box</h2>
-                               
-
-  <p class="figure">Figure: Box container</p>
-  <p align="center"><img alt="Box container" src="../../images/box.png" /></p>
-
-
-<p>Most of the time, you want to display UI components on the screen in a specific order. To arrange the user information in a linear manner, you can use a basic container called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.</p>
-<h3>Creating a Box</h3>
-<p>To create a new horizontal box:</p>
-<pre class="prettyprint">Evas_Object *vbox;
-
-vbox = elm_box_add(parent);
-</pre>
-<p>By default, the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function creates a vertical box. If you want to create a horizontal box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function:</p>
-<pre class="prettyprint">Evas_Object *hbox;
-
-hbox = elm_box_add(parent);
-elm_box_horizontal_set(hbox, EINA_TRUE);
-</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">A box is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<h3>Adding Objects to the Box</h3>
-<p>You can add any Evas object to the box. Here, we create 5 button components and add them to a box:</p>
-<pre class="prettyprint">int i;
-Evas_Object *bt;
-Evas_Object *vbox;
-
-vbox = elm_box_add(parent);
-
-for (i = 0; i &lt; 5; i++)
-{
-&nbsp;&nbsp;&nbsp;char tmp[16];
-&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Button %d&quot;, i);
-&nbsp;&nbsp;&nbsp;bt = elm_button_add(vbox);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, tmp);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(vbox, bt);
-&nbsp;&nbsp;&nbsp;evas_object_show(bt);
-}
-evas_object_show(vbox);
-</pre>
-<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button component to the end of the box.</p>
-
-<h3>Setting the Padding</h3>
-<p>You can set the padding between the objects in a box by using the <span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span> function. The padding values are the number of pixels horizontally and vertically.</p>
-<pre class="prettyprint">elm_box_padding_set(vbox, 16, 64);
-</pre>
-
-<h3>Handling Element Size</h3>
-<p>You can add different-size elements to a container. For example, to add an image with a size of 128x128 pixels as the first element in a box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function:</p>
-<pre class="prettyprint">ic = elm_icon_add(vbox);
-elm_image_file_set(ic, &quot;./c1.png&quot;, NULL);
-evas_object_size_hint_min_set(ic, 128, 128);
-evas_object_show(ic);
-elm_box_pack_start(vbox, ic);
-</pre>
-<p>We ask Evas to set the size hint for the icon object by using the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Evas will try to set the minimum size of this object accordingly.</p>
-<p>If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_homogeneous_set()</span> function:</p>
-<pre class="prettyprint">elm_box_homogeneous_set(vbox, EINA_TRUE);
-</pre>
-<p>Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.</p>
-<h3>Setting the Alignment</h3>
-<p>You can set the alignment of UI components inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
-
-<p class="figure">Figure: Alignment</p>
-<p align="center"><img alt="Alignment" src="../../images/align.png" /></p>
-
-<p>Here, we set an alignment of 0.8 vertically:</p>
-<pre class="prettyprint">elm_box_align_set(vbox, 0.0, 0.8);
-</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The alignment only takes effect in the opposite direction than the one defined with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function.</td>
-    </tr>
-   </tbody>
-  </table>
-
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_layout_transition()</span> function provides the ability to animate the motion of the objects in a box when switching from one layout to another.</p>
-<h3>Using Size Hints</h3>
-<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called &quot;hints&quot;. The size hint functions are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span></li>
-</ul>
-<p>You can also use the respective get functions to get the current hint values.</p>
-<p>In case of the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function, you ask Evas to respect the minimum size you define for the object. For example, to set the minimum size of an icon to 64x46 pixels:</p>
-<pre class="prettyprint">evas_object_size_hint_min_set(ic, 64, 64);
-</pre>
-<p>You can also set a maximum size for the same icon:</p>
-<pre class="prettyprint">evas_object_size_hint_max_set(ic, 128, 128);
-</pre>
-<p>When you resize the parent of the icon, if there are no constraints to the parent, the minimum size of the parent will be the minimum hint size of the icon. If you increase the parent size, the icon will grow larger until its maximum hint size is reached. After this point, the icon will not grow any larger and there will be empty space around the icon within the parent.</p>
-<p>When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. Here, the proportion of the icon is respected, and the width will be the same as the height:</p>
-<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
-</pre>
-<p>Here, the width will be twice the height:</p>
-<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
-</pre>
-<p>If we want to change the alignment of the icon relative to the parent, we can use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align()</span> function. By default, the icon is centered, so it is aligned with a value of 0.5. You can change the alignment as follows:</p>
-<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre>
-<p>In the above case, the icon is aligned to the bottom left corner of the parent.</p>
-<p>We can also play with the size of the icon inside its container by using the weight size hint. By default, the weight is not set, so the size of the icon will be the minimum size. But if you set this value to 1, the icon will be expand as much as it can inside the container:</p>
-<pre class="prettyprint">evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
-<p>You can also use the alignment and weight hints together. Here, we want the icon to take up all the space in its parent:</p>
-<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
- 
-               
-                               <h2 id="conformant" name="conformant">Conformant</h2>
-
-<p class="figure">Figure: Conformant container</p>
-<p align="center"><img alt="Conformant container" src="../../images/conformant.png" /></p>
-
-<p>A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.</p>
-
-<h3>Creating a Conformant</h3>
-<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
-<pre class="prettyprint">
-Evas_Object *conformant;
-
-conformant = elm_conformant_add(parent);
-</pre>
-
-<h3>Adding Content to the Conformant</h3>
-<p>To add content to the conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
-<pre class="prettyprint">elm_object_content_set(conformant, main_view);
-</pre>
-
-<h3>Signals</h3>
-<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
-<ul>
-<li>&quot;virtualkeypad,state,on&quot;: The virtual keyboard has been switched on.</li>
-<li>&quot;virtualkeypad,state,off&quot;: The virtual keyboard has been switched off.</li>
-<li>&quot;virtualkeypad,size,changed&quot;: The virtual keyboard size has changed.</li>
-<li>&quot;clipboard,state,on&quot;: The clipboard has been switched on.</li>
-<li>&quot;clipboard,state,off&quot;: The clipboard has been switched off. </li>
-</ul>
-
-                       
-                               <h2 id="grid" name="grid">Grid</h2>
-
-<p>In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.</p>
-
-<h3>Creating a Grid</h3>
-<p>To create a grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *grid;
-
-grid = elm_grid_add(parent);
-</pre><h3>Adding Items to the Grid</h3>
-<p>To add an item to the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. Provide the X and Y coordinates, and the width and height in the grid as parameters. The following code adds 12 icons in a circle formation:</p>
-<pre class="prettyprint">for (i = 0; i &lt; 12; i++)
-{
-&nbsp;&nbsp;&nbsp;ic = elm_icon_add(grid);
-&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(ic, 128, 128);
-&nbsp;&nbsp;&nbsp;evas_object_show(ic);
-&nbsp;&nbsp;&nbsp;x = 40 * cos(2.0 * M_PI / 12 * i);
-&nbsp;&nbsp;&nbsp;y = 40 * sin(2.0 * M_PI / 12 * i);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, ic,  40 + x,  40 + y,  20 , 20);
-}
-evas_object_show(grid);
-</pre>
-
-<h3>Changing Position and Size</h3>
-<p>To change the position of an item in the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. The first parameter is the item you want to move, and the following parameters are the same as for the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span> function.</p>
-<p>To change the size of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span> function. You can set the new width and height for the grid. The position and size of the items in the grid are changed accordingly.</p>
-<h3>Clearing the Grid</h3>
-<p>To clear the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_clear()</span> function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function called on each item.</p>
-
-
-                               <h2 id="layout" name="layout">Layout</h2>
-
-<p>A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of a lot of graphics components used in Elementary.</p>
-
-<p>An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<h3 id="container_layout_creating" name="container_layout_creating">Creating a Layout</h3>
-
-<p>To create a new layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *layout;
-
-layout = elm_layout_add(parent);
-</pre>
-<p>In Tizen, the layout component is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
-<ul>
-<li>application/default: This layout can be used to display content inside a window.</li>
-<li>nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.</li>
-<li>body_thumbnail: This layout can be used when you display an image and text inside a window and the position is already defined internally.</li>
-</ul>
-
-<p>To set a theme to the layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function.</p>
-
-<p>To use the application/default layout:</p>
-<pre class="prettyprint">Evas_Object *ly;
-
-ly = elm_layout_add(parent);
-elm_layout_theme_set(ly, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
-</pre>
-
-<h3 id="container_layout_inserting_objects" name="container_layout_inserting_objects">Adding Objects to the Layout</h3>
-<p>To add an Evas object to the layout:</p>
-<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot; view);
-</pre>
-<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.</p>
-
-<p>To swallow an object inside the main content and background views:</p>
-<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot;, main_view);
-elm_object_part_content_set(ly, &quot;elm.swallow.background&quot;, background);
-</pre>
-<p>The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part with the <span style="font-family: Courier New,Courier,monospace">elm.text</span> text zone. To change the text:</p>
-<pre class="prettyprint">elm_object_part_text_set(ly, &quot;elm.text&quot;, &quot;Hi All :)&quot;);
-</pre>
-
-                               <h2 id="mapbuf" name="mapbuf">Mapbuf</h2>
-
-<p class="figure">Figure: Mapbuf hierarchy</p>
-<p align="center"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
-
-<p>A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.</p>
-
-<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.</p>
-
-<p>The mapbuf component inherits all the functions of the container class.</p>
-
-<h3>Creating a Mapbuf</h3>
-<p>To create a mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *mapbuf, *parent, *content;
-
-// Creating a mapbuf
-mapbuf = elm_mapbuf_add(parent);
-</pre>
-<h3>Adding Content to the Mapbuf</h3>
-<p>To add content to the mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the &quot;default&quot; part:</p>
-<pre class="prettyprint">elm_object_content_set(mapbuf, content);</pre>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Calling <span style="font-family: Courier New,Courier,monospace">elm_object_content_set(mapbuf, content)</span> is equivalent to calling <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(mapbuf, "default", content)</span>.</td>
-    </tr>
-   </tbody>
-  </table>
-
-
-<p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
-<pre class="prettyprint">elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
-elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
-</pre>
-
-<h3>Activating the Mapbuf</h3>
-<p>Finally, to use the mapbuf component, you must activate it:</p>
-<pre class="prettyprint">elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);</pre>
-
-<h3>Signals</h3>
-<p>The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.</p>
-
-                       
-                               <h2 id="naviframe" name="naviframe">Naviframe</h2>
-
-<p>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.</p>
-
-<h3>Creating a Naviframe</h3>
-<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *nav;
-
-nav = elm_naviframe_add(parent);
-</pre>
-<h3>Adding and Deleting Views</h3>
-<p>The naviframe is a stack of views. A new view is always pushed to the top of the stack. The top-most view is deleted by popping it.</p>
-<p>To add a new view to the naviframe:</p>
-<pre class="prettyprint">Elm_Object_Item *nav_it;
-
-nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
-// In Tizen 2.3, the back button is not supported in the naviframe 
-</pre>
-<p>When you push a new view to the stack, you receive an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> for the view. You can use this item to modify the view.</p>
-<p>To pop and delete the top-most view:</p>
-<pre class="prettyprint">elm_naviframe_item_pop(nav);
-</pre>
-
-<h3>Adding Fixed Content</h3>
-<p>The naviframe can also display fixed content on top of the current (top-most) view. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function to set this content. Use the following part names to specify the location of the content:</p>
-<ul>
-<li>&quot;default&quot;: The main content area of the current view.</li>
-<li>&quot;title_icon&quot;: An icon in the title area of the current view.</li>
-</ul>
-<p>For example, to add a button to the naviframe:</p>
-<pre class="prettyprint">btn = elm_button_add(nav);
-elm_object_style_set(btn, &quot;naviframe/title_icon&quot;);
-elm_object_part_content_set(btn, &quot;icon&quot;, ic);
-</pre>
-<p>To set the title labels of the naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function and specify one of the following label locations:</p>
-<ul>
-<li>&quot;default&quot;: Sets the title label in the title area of the current view.</li>
-</ul>
-<h3>Signals</h3>
-<p>The naviframe emits the following signals:</p>
-<ul>
-<li>&quot;transition,finished&quot;: The transition has finished changing the view.</li>
-<li>&quot;title,transition,finished&quot;: The title area transition has finished  changing the state of the title.</li>
-<li>&quot;title,clicked&quot;: The user has clicked the title area.</li>
-</ul>
-
-       
-                               <h2 id="scroller" name="scroller">Scroller</h2>
-
-<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.</p>
-<p>The scroller component inherits all the functions of the <a href="#layout">Layout</a>.</p>
-<h3>Creating a Scroller</h3>
-<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
-<pre class="prettyprint">
-Evas_Object *scroller;
-
-scroller = elm_scroller_add(parent);
-</pre>
-<h3>Adding Objects to the Scroller</h3>
-<p>To add an object to the scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
-<pre class="prettyprint">Evas_Object *image;
-
-image = elm_image_add(parent);
-elm_image_file_set(image, &quot;image.png&quot;, NULL);
-evas_object_show(image);
-evas_object_size_hint_min_set(image, 2560, 1600);
-elm_object_content_set(scroller, image);
-</pre>
-<p>In the above code, we set a minimum size of 2560 x 1600 pixels for the image. The scroller is smaller than the image, so you can scroll across the image.</p>
-<p>If you want to be informed when the user begins scrolling the image, use the following code:</p>
-<pre class="prettyprint">
-evas_object_smart_callback_add(scroller, &quot;scroll,drag,start&quot;, _scroll_start_cb, NULL);
-
-// Callback function for the &quot;animate,begin&quot; signal
-// This callback is called when the user begins scrolling the image
-void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;Scroll starts\n&quot;);
-}</pre>
-
-<h3>Managing the Properties of the Scroller</h3>
-<p>When scrolling content, the scroller may &quot;bounce&quot; when reaching the edge of the content. This is a visual way of indicating that there is no more content to scroll in that direction. Bounce is enabled by default for both axes. To enable or disable the bounce for either or both axes, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_bounce_set()</span> function. The following code disables the bounce for the horizontal axis and enables it for the vertical axis:</p>
-
-<pre class="prettyprint">elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
-</pre>
-<p>The scroller can limit the scrolling to &quot;pages&quot;. In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single "page" at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
-
-<h3>Signals</h3>
-
-<p>The scroller emits the following signals, which you can catch in your application:</p>
-
-<ul>
-<li>&quot;edge,left&quot;: The left edge of the content has been reached.</li>
-<li>&quot;edge,right&quot;: The right edge of the content has been reached.</li>
-<li>&quot;edge,top&quot;: The top edge of the content has been reached.</li>
-<li>&quot;edge,bottom&quot;: The bottom edge of the content has been reached.</li>
-<li>&quot;scroll&quot;: The content has been scrolled (moved).</li>
-<li>&quot;scroll,anim,start&quot;: The scrolling animation has started.</li>
-<li>&quot;scroll,anim,stop&quot;: The scrolling animation has stopped.</li>
-<li>&quot;scroll,drag,start&quot;: Dragging the contents has started.</li>
-<li>&quot;scroll,drag,stop&quot;: Dragging the contents has stopped.</li>
-<li>&quot;vbar,drag&quot;: The vertical scroll bar has been dragged.</li>
-<li>&quot;vbar,press&quot;: The vertical scroll bar has been pressed.</li>
-<li>&quot;vbar,unpress&quot;: The vertical scroll bar has been unpressed.</li>
-<li>&quot;hbar,drag&quot;: The horizontal scroll bar has been dragged.</li>
-<li>&quot;hbar,press&quot;: The horizontal scroll bar has been pressed.</li>
-<li>&quot;hbar,unpress&quot;: The horizontal scroll bar has been unpressed.</li>
-<li>&quot;scroll,page,changed&quot;: The visible page has changed.</li>
-</ul>
-
-<h3>Example</h3>
-<p>A good example of the scroller is a picture slideshow: we add images to the scroller and limit the scrolling to pages (one picture at a time). In the following code, we disable the scroll bars for both axes, limit the scrolling to pages by using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_scroll_limit_set()</span> function, and lock the scrolling on the Y axis by using the <span style="font-family: Courier New,Courier,monospace">elm_object_scroll_lock_y_set()</span> function:</p>
-<pre class="prettyprint">elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
-elm_scroller_page_scroll_limit_set(scroller, 1, 0);
-elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
-</pre>
-<p>We create a horizontal box, which will contain all the images, and which itself will be contained by the scroller:</p>
-<pre class="prettyprint">box = elm_box_add(scroller);
-elm_box_horizontal_set(box, EINA_TRUE);
-elm_object_content_set(scroller, box);
-evas_object_show(box);
-</pre>
-<p>We then create all the images and add them to the horizontal box:</p>
-<pre class="prettyprint">img = elm_image_add(scroller);
-snprintf(buf, sizeof(buf), IMAGE_DIR&quot;/%d.jpg&quot;, i);
-elm_image_file_set(img, buf, NULL);
-evas_object_show(img);
-pages = eina_list_append(pages, img);
-elm_box_pack_end(box, img);
-</pre>
-<p>We store references to the images in an <span style="font-family: Courier New,Courier,monospace">eina_list</span> for easy retrieval later.</p>
-<p>Finally, we display the first page of the scroller:</p>
-<pre class="prettyprint">elm_scroller_page_show(scroller, 0, 0);
-</pre>
-<p>The size of the scroller depends on the size of the parent. When the parent changes, for example when the window is resized or rotated, the scroller is also resized. Since we need to be informed when the scroller is resized, we add a callback on the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span> event for the scroller:</p>
-<pre class="prettyprint">evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);</pre>
-<p>The callback retrieves the new size of the scroller by using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function on the object pointer. The pointer is relative to the object that has been resized, which in our case is the scroller itself. We can then iterate through the images of the scroller and set the minimum size to fit the scroller size:</p>
-<pre class="prettyprint">EINA_LIST_FOREACH(images, l, page)
-{
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(page, w, h);
-}
-</pre>
-<p>Finally, we set the page size of the scroller to match the scroller size and display the first page:</p>
-<pre class="prettyprint">elm_scroller_page_size_set(obj, w, h);
-elm_scroller_page_show(obj, 0, 0);</pre>
-
-                               <h2 id="table" name="table">Table</h2>
-
-<p>A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).</p>
-
-<h3>Creating a Table</h3>
-
-<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:</p>
-<pre class="prettyprint">Evas_Object *table;
-table = elm_table_add(parent);</pre>
-
-<h3>Adding Items to the Table</h3>
-
-<p>Items are added to the table with the <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function. This function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan). If we want to create an icon that takes 3 columns and rows and a button that only takes 1 row and column, the code will look like this:</p>
-<pre class="prettyprint">ic = elm_icon_add(table);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-evas_object_show(ic);
-elm_table_pack(table, ic, 0, 0, 3, 3);
-
-btn = elm_button_add(table);
-elm_object_text_set(btn, &quot;Click me i'm famous&quot;);
-evas_object_show(btn);
-elm_table_pack(table, btn, 3, 1, 1, 1);
-evas_object_show(table);
-</pre>
-
-<h3>Managing the Items</h3>
-
-<p>If you want to change the position of the item after adding it, use the <span style="font-family: Courier New,Courier,monospace">elm_table_pack_set()</span> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
-
-<p>To add padding around the item, use the <span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span> function. The second parameter is the padding between columns, and the third parameter is the padding between rows:</p>
-<pre class="prettyprint">elm_table_padding_set(table, 10, 10);</pre>
-
-<p>To change the alignment and size of an item, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint</span> parameters. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
-<pre class="prettyprint">elm_table_homogeneous_set(table, EINA_TRUE);
-</pre>
-
-<h3>Clearing the Table</h3>
-
-<p>To clear the table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted. The <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function will be called on each item.</p>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.guides/html/native/ui/data_types_n.htm b/org.tizen.guides/html/native/ui/data_types_n.htm
deleted file mode 100644 (file)
index a06baab..0000000
--- a/org.tizen.guides/html/native/ui/data_types_n.htm
+++ /dev/null
@@ -1,1753 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Data Types</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">      
-                        <li><a href="#iterate">Iterator Functions</a></li>
-                        <li><a href="#string">Strings</a></li>
-                        <li><a href="#array">Arrays</a></li>
-                        <li><a href="#hash">Hash Tables</a></li>
-                        <li><a href="#list">Lists</a></li>
-                        <li><a href="#generic">Generic Value</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-        <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API</a></li>
-               </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Data Types</h1>
-
-  <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types:</p>
-
-<ul>
-<li><a href="#inline">Inline Array</a>: standard array of inlined members</li>
-<li><a href="#array">Array</a>: standard array of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li><a href="#hash">Hash Table</a>: standard hash of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li><a href="#inlist">Inline List</a>: list with nodes inlined into the user type</li>
-<li>Compact List</li>
-<li><a href="#list">List</a>: standard list of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li><a href="#iterate">Iterator Functions</a></li>
-<li>Sparse Matrix: sparse matrix of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
-<li>Red-Black tree: red-black tree with nodes inlined into the user type</li>
-<li><a href="#buffer">String Buffer</a>: mutable string to prepend, insert, or append strings to a buffer</li>
-<li><a href="#share">Stringshare</a>: shares read-only string references</li>
-<li>Tiler split: merges and navigates into 2D tiled regions</li>
-<li>Trash: container of unused but allocated data</li>
-<li><a href="#generic">Generic Value Storage</a>: container for generic value storage and access</li>
-<li>Data Model API: container for data with a user-defined hierarchy or structure</li>
-</ul>
-
-  
-<h2 id="iterate" name="iterate">Iterator Functions</h2>
-<p>Eina provides a set of iterator functions to manipulate data types, such as arrays.</p>
-<p>These functions allow access to container elements in a generic way, without knowing which container is used (similar to iterators in the C++ STL). Iterators only allow sequential access (that is, from one element to the next one). For random access, Eina provides accessor functions.</p>
-<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. Note that all iterators, regardless of the container type, are always deleted with the same <span style="font-family: Courier New,Courier,monospace">eina_iterator_free()</span> function.</p>
-<p>To get the data and iterate, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_next()</span> function. To call a function on every single element of a container, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_foreach()</span> function.</p>
-<p>In addition to iterator functions, each data type also owns a set of macros that provide the iterators, such as <span style="font-family: Courier New,Courier,monospace">FOREACH</span> or <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p>
-
-<h2 id="string" name="string">Strings</h2>
-
-<h3 id="share" name="share">Stringshare</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> data type functions allow you to store a single copy of a string and use it in multiple places throughout your program. This way you can save a lot of strings with less memory. It improves string creation and destruction speed, reduces memory use, and decreases memory fragmentation.</p>
-<p>With this data type you can reduce the number of duplicated strings kept in memory. It is common for the same strings to be dynamically allocated repeatedly between applications and libraries, especially in circumstances where you can have multiple copies of a structure that allocates the string. Rather than duplicating and freeing these strings, request a read-only pointer to an existing string and only incur the overhead of a hash lookup. This can sound like micro-optimizing, but profiling has shown that this can have a significant impact as the number of copies grows.</p>
-
-<p>To manage stringshares:</p>
-<ol>
-<li>To create a stringshare, declare a string variable and call the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_add()</span> function:
-<pre class="prettyprint">
-const char *mystr;
-const char *prologue = &quot;Enlightenment is not just a window manager for Linux/X11 and others&quot;
-
-mystr = eina_stringshare_add(prologue);
-</pre></li>
-
-<li>To retrieve or modify the string data:
-<ul>
-<li>Retrieve a string for use in a program from a format string using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf()</span> function. If you have a &quot;format&quot; string to pass to a function like <span style="font-family: Courier New,Courier,monospace">printf</span>, you can store it as a stringshare as well.
-<p>The following example produces &quot;1 desktop manager to rule them all&quot;.</p>
-<pre class="prettyprint">
-const char *myfmtstr = &quot;%d desktop manager to rule them all&quot;;
-const char *str;
-
-str = eina_stringshare_printf(myfmtstr, 1);
-
-print(str)
-</pre>
-</li>
-
-<li>Replace the value of a stringshare with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace()</span> function. Pass the pointer address and the new value to the function.
-<pre class="prettyprint">
-eina_stringshare_replace(&amp;str,&quot;One desktop manager to rule them all&quot;);
-</pre>
-</li>
-
-<li>Retrieve the length of the stringshare value with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen()</span> function.
-<pre class="prettyprint">
-printf(&quot;length: %d\n&quot;, eina_stringshare_strlen(str));
-</pre>
-</li>
-</ul>
-</li>
-<li>When the string is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_del()</span> function:
-<pre class="prettyprint">
-eina_stringshare_del(mystr);
-</pre>
-</li>
-</ol>
-
-
-
-<h3 id="buffer" name="buffer">String Buffer</h3>
-<p>The string buffer data type is designed to be a mutable string, allowing you to append, prepend or insert a string to a buffer. It allows easy handling of buffers in your applications.</p>
-<p>To manage string buffers:</p>
-<ol>
-<li>Initialize the <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> instance and create the buffer:
-<pre class="prettyprint">
-Eina_Strbuf *buf;
-mybuffer = eina_strbuf_new();
-</pre>
-</li>
-<li>Manage the buffer content:
-<ul>
-<li>To append characters to the buffer:
-<ul>
-<li>
-<p>For basic strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append()</span> function:</p>
-<pre class="prettyprint">
-eina_strbuf_append(mybuffer, &quot;This is my string.&quot;);
-</pre>
-</li>
-<li>To append 1 character to your buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_char()</span> function. You can also append a sized string to the buffer using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_length()</span> function.
-<pre class="prettyprint">
-eina_strbuf_append_length(mybuffer, &quot;Buffe&quot;, 5);
-eina_strbuf_append_char(mybuffer, &#39;r&#39;);
-</pre>
-</li>
-<li>To handle &quot;printf&quot; format strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_printf()</span> function to add formatted strings to the buffer:
-<pre class="prettyprint">
-eina_strbuf_append_printf(buf, &quot;%s%c&quot;, &quot;buffe&quot;, &#39;r&#39;);
-</pre>
-</li>
-</ul>
-</li>
-
-<li>To remove characters from one position to another, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_remove()</span> function. The first parameter is the buffer, the second is the start position of the characters you want to delete, and the last the end position.
-<p>This example removes the first 19 characters of the buffer:</p>
-<pre class="prettyprint">
-eina_strbuf_remove(buf, 0, 18);
-</pre>
-</li>
-
-<li>To replace characters: 
-
-<ul><li>
-<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace()</span> replaces a specific occurrence of a given string in the buffer with another string.</li>
-<li>
-<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all()</span> replaces all occurrences of a given string in the buffer with another string.
-</li>
-</ul>
-<pre class="prettyprint">
-eina_strbuf_append(mybuffer, &quot;buffer buffer buffer&quot;);
-
-// Replacing one occurrence of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot;
-eina_strbuf_replace(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;, 1);
-
-// Replacing all the occurrences of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot;
-eina_strbuf_replace_all(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;);
-
-// Replacing all the occurrences of &quot;B-U-F-F-E-R&quot; by &quot;Buffer&quot;
-eina_strbuf_replace_all(mybuffer, &quot;B-U-F-F-E-R&quot;, &quot;Buffer&quot;);
-</pre>
-</li>
-<li>To insert a string at the specified position, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert()</span> function. Use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert_printf()</span> function with formatted strings.
-<pre class="prettyprint">
-eina_strbuf_insert(mybuffer, &quot;More buffer&quot;, 10);
-
-// Using eina_strbuf_length_get to get the buffer length
-eina_strbuf_insert_printf(buf, &quot; %s: %d&quot;, 6, &quot;length&quot;, eina_strbuf_length_get(buf));
-</pre>
-</li>
-
-<li>To get the complete length of the string and the buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_get()</span> and <span style="font-family: Courier New,Courier,monospace">eina_strbuf_length_get()</span> functions:
-<pre class="prettyprint">
-printf(&quot;%s : %d\n&quot;, eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
-</pre>
-</li>
-</ul>
-</li>
-
-<li>When no longer needed, free the buffer with the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_free()</span> function. You can also free the content of <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> without freeing the buffer itself using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_free()</span> function.
-<pre class="prettyprint">
-eina_strbuf_free(mybuffer);
-</pre>
-</li>
-</ol>
-
-<h2 id="array" name="array">Arrays</h2>
-<p>An array is a data type which describes an ordered collection of values. The values are accessed by their index. </p>
-<pre class="prettyprint">
-INDEX | VALUE
---------------
-0     | value0
-1     | value1
-2     | value2
-3     | value3
-4     | value4
-5     | value5
-6     | value6
-7     | value7
-</pre>
-<p>Eina provides 2 array types: the classic array and an inline array.</p>
-
-<h3>Creating and Destroying a Classic Array</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function creates a new array. You can store strings or objects in the created array. The function returns a new array, or if memory allocation fails, <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
-<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function defines the size of the array allocation step. For example, if you set it to 4, the function returns an array of 4 elements and the next time you grow the array it grows by 4 elements. Unless you have pushed 4 elements inside, it does not grow. But once you add the 5th element, it grows again and becomes an array of 8 elements. The allocation step feature is very useful for optimizing performance, and it also reduces memory fragmentation by having a size that fits the array usage. If you set the step to 0, the function sets a default safe value.</p>
-
-<p>To create an array to store strings:</p>
-<ol>
-<li>Create the array:
-<pre class="prettyprint">
-// Strings to store in the array 
-const char* strings[] = 
-{
-&nbsp;&nbsp;&nbsp;&quot;helo&quot;, &quot;hera&quot;, &quot;starbuck&quot;, &quot;kat&quot;, &quot;boomer&quot;,
-&nbsp;&nbsp;&nbsp;&quot;hotdog&quot;, &quot;longshot&quot;, &quot;jammer&quot;, &quot;crashdown&quot;, &quot;hardball&quot;,
-&nbsp;&nbsp;&nbsp;&quot;duck&quot;, &quot;racetrack&quot;, &quot;apolo&quot;, &quot;husker&quot;, &quot;freaker&quot;,
-&nbsp;&nbsp;&nbsp;&quot;skulls&quot;, &quot;bulldog&quot;, &quot;flat top&quot;, &quot;hammerhead&quot;, &quot;gonzo&quot;
-};
-// Declaring the array (type Eina_Array)
-Eina_Array *array;
-unsigned int i;
-
-// Creating the array
-array = eina_array_new(20);
-
-// Inserting elements in the array
-for (i = 0; i &lt; 20; i++)
-&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
-</pre>
-</li>
-<li>To change the allocation step, use the <span style="font-family: Courier New,Courier,monospace">eina_array_step_set()</span> function:
-<ul><li>The first parameter is the array you want to change.</li>
-<li>The second parameter is the size of that specific array (retrieved with the <span style="font-family: Courier New,Courier,monospace">sizeof()</span> function).</li>
-<li>The last parameter is the new step size.</li></ul>
-<p>In this example, the array step changes from 20 to 30.</p>
-<pre class="prettyprint">
-eina_array_step_set(array, sizeof(*array), 30);
-</pre>
-</li>
-<li>When no longer used, use the <span style="font-family: Courier New,Courier,monospace">eina_array_free()</span> function to free the array. It first calls the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function and frees the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, use a <span style="font-family: Courier New,Courier,monospace">while</span> statement with the <span style="font-family: Courier New,Courier,monospace">eina_array_pop</span> function.
-<pre class="prettyprint">
-// Freeing the array elements
-while (eina_array_count(array))
-&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
-
-// Freeing the array itself
-eina_array_free(array);
-</pre>
-</li>
-</ol>
-
-<h3>Modifying Classic Array Content</h3>
-
-<p>To modify classic array content:</p>
-<ul>
-<li>To set the data of an element, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_set()</span> function. The first parameter is the array, the second is the index of the element you want to set, and the last one is the data. You must first get the related pointer if you need to free it, as this function replaces the previously held data. Be careful, as there is no array or index check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the application can crash.
-<pre class="prettyprint">
-free(eina_array_data_get(array, 0));
-eina_array_data_set(array, 0, strdup(strings[3]);
-</pre>
-</li>
-<li>To add elements to the end of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_push()</span> function. The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The first parameter is the array to store the element, the second one is the data you want to store. If you store strings, remember to allocate the memory first. The example uses the <span style="font-family: Courier New,Courier,monospace">strdup</span> function to duplicate the string contained in <span style="font-family: Courier New,Courier,monospace">strings[]</span>. This function allocates the memory of the returned string, so you do not have to do it yourself.
-<pre class="prettyprint">
-for (i = 0; i &lt; 20; i++)
-&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
-</pre>
-</li>
-
-<li>To remove the last element of an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_pop()</span> function. It takes the array as a parameter, and if the operation is successful, returns a pointer to the data of the removed element.
-<pre class="prettyprint">
-while (eina_array_count(array))
-&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
-</pre>
-</li>
-
-<li>To rebuild the array by specifying the data to be kept, use the <span style="font-family: Courier New,Courier,monospace">eina_array_remove()</span> function:
-<ul><li>The first parameter is the array to be changed.</li>
-<li>The second parameter is the function which selects the data to keep in the rebuilt array.</li>
-<li>The last parameter is the data to pass to the selector function defined as the second parameter.</li></ul>
-<p>The selector function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the element stays, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it has to be removed.</p>
-<p>The following example shows how to remove all the elements of the array that are longer than 5.</p>
-<pre class="prettyprint">
-// Selector function 
-Eina_Bool keep(void *data, void *gdata)
-{
-&nbsp;&nbsp;&nbsp;if (strlen((const char*)data) &lt;= 5)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-
-int remove_array()
-{
-&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;Eina_Array_Iterator iterator;
-&nbsp;&nbsp;&nbsp;const char *item;
-&nbsp;&nbsp;&nbsp;unsigned int i;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating an array
-
-&nbsp;&nbsp;&nbsp;// Removing the undesired elements 
-&nbsp;&nbsp;&nbsp;eina_array_remove(array, keep, NULL);
-
-&nbsp;&nbsp;&nbsp;// Flushing and freeing the array
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-<li>To completely wipe an array out, use the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function. This function sets the count and total members of an array to 0, and frees and sets its data members to <span style="font-family: Courier New,Courier,monospace">NULL</span>. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash. The only parameter of this function is a pointer to the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> array you want to flush.
-<pre class="prettyprint">
-eina_array_flush(array);
-</pre>
-</li>
-<li>To empty an array quickly, use the <span style="font-family: Courier New,Courier,monospace">eina_array_clean()</span> function. This function sets the counting of members in the array to 0. It does not free any space so you have to use it carefully. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash.
-<pre class="prettyprint">
-eina_array_clean(array);
-</pre>
-</li>
-</ul>
-
-<h3>Accessing Classic Array Data</h3>
-
-<p>To access classic array data:</p>
-<ul>
-<li>To access the data in the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_get()</span> function with the array and the index of the element you want to get. The function returns a pointer to the data.
-<pre class="prettyprint">
-// Getting the data of the first element 
-char *mydata;
-mydata = eina_array_data_get(array, 0);
-</pre>
-</li>
-
-
-<li>To get the number of elements in an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_count()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function.
-<p>The function returns the number of elements.</p>
-<pre class="prettyprint">
-unsigned int nb_elm;
-nb_elm = eina_array_count(array);
-</pre>
-</li>
-
-<li>To iterate through an array, you can use various methods:
-<ul>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> iterator called <span style="font-family: Courier New,Courier,monospace">ITER_NEXT</span>.
-<p>You can use the iterator by calling the macro <span style="font-family: Courier New,Courier,monospace">EINA_ARRAY_ITER_NEXT()</span>. It takes the array to iterate as the first parameter, a counter for the current index during the iteration, and a variable of the same type as the item data and an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>. To use it, declare an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>, an <span style="font-family: Courier New,Courier,monospace">int</span> counter, and, for example, a <span style="font-family: Courier New,Courier,monospace">char *</span> item if your array contains any strings.</p>
-<pre class="prettyprint">
-Eina_Array_Iterator iterator;
-const char *item;
-unsigned int i;
-
-EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
-&nbsp;&nbsp;&nbsp;printf(&quot;item #%d: %s\n&quot;, i, item);
-</pre>
-</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function to iterate over the array.
-<p>The first parameter is the array to iterate, the second is a callback function which determines whether the iteration can continue,and the last is the data passed to the callback function.</p>
-<p>To iterate over the array and to print the data of each array element:</p>
-<pre class="prettyprint">
-// Callback function 
-static Eina_Bool
-elm_print(const void *container, void *data, void *fdata)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char *)data);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-int iterating_array()
-{
-&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;unsigned int i;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating an array
-
-&nbsp;&nbsp;&nbsp;// Iterating over the array and calling elm_print on each element
-&nbsp;&nbsp;&nbsp;eina_array_foreach(array, elm_print, NULL);
-
-&nbsp;&nbsp;&nbsp;// Freeing the element data and array
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_iterator_new()</span> function to create an iterator for the array. <p>The function returns a newly allocated iterator associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the count of the array members is less than or equal to 0, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid iterator is returned.</p>
-<p>Pass to this function the array for which you want to create a new iterator. The iterator is used to run a sequential walk through the array, just like the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function.</p>
-<p>To create an iterator and use it to print the data of each array element:</p>
-<pre class="prettyprint">
-static Eina_Bool
-print_one(const void *container, void *data, void *fdata)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)data);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-int new_iterator()
-{
-&nbsp;&nbsp;&nbsp;Eina_Array *arra;
-&nbsp;&nbsp;&nbsp;Eina_Iterator *it;
-&nbsp;&nbsp;&nbsp;unsigned short int i;
-&nbsp;&nbsp;&nbsp;void *uninteresting;
-&nbsp;&nbsp;&nbsp;Eina_Bool rt;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating an array
-
-&nbsp;&nbsp;&nbsp;it = eina_array_iterator_new(array);
-
-&nbsp;&nbsp;&nbsp;it = eina_iterator_next(it, &amp;uninteresting);
-&nbsp;&nbsp;&nbsp;eina_iterator_foreach(it, print_one, NULL);
-&nbsp;&nbsp;&nbsp;eina_iterator_free(it);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_accessor_new()</span> function to get random access to the array elements. 
-<p>The function returns a newly allocated accessor associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the counting of array members is less than or equal to 0, this function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid accessor is returned.</p>
-<p>To use the accessor to retrieve and print the data of every other array element:</p>
-<pre class="prettyprint">
-int random_access()
-{
-&nbsp;&nbsp;&nbsp;// Declaration of the array 
-&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;// Declaration of the accessor
-&nbsp;&nbsp;&nbsp;Eina_Accessor *acc;
-
-&nbsp;&nbsp;&nbsp;// Generic counter
-&nbsp;&nbsp;&nbsp;unsigned short int i;
-
-&nbsp;&nbsp;&nbsp;// Variable to put the data retrieved from an array element
-&nbsp;&nbsp;&nbsp;void *data;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating an array
-
-&nbsp;&nbsp;&nbsp;// Creating the array accessor
-&nbsp;&nbsp;&nbsp;acc = eina_array_accessor_new(array);
-
-&nbsp;&nbsp;&nbsp;// Random access to the data of the array elements
-&nbsp;&nbsp;&nbsp;for(i = 1; i &lt; 10; i += 2)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Putting the data in the variable &#39;data&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_accessor_data_get(acc, i, &amp;data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (const char *)data);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Freeing the accessor
-&nbsp;&nbsp;&nbsp;eina_accessor_free(acc);
-
-&nbsp;&nbsp;&nbsp;// Freeing the array
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-</ul>
-</li>
-</ul>
-
-
-<h3 id="inline" name="inline">Creating and Destroying an Inline Array</h3>
-
-<p>An inline array is a container that stores the data itself, not the pointers to the data. This means there is no memory fragmentation, and for small data types, such as char, short, and int, it is more memory-efficient. This is because the data is stored in the cache and is faster to access. The bigger the data gets, however, the less likely it is and the less interesting it becomes.</p>
-<p>To create an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function:</p>
-<ul><li>The first parameter is the size of the value. In this example, only the characters are stored, and because of that, only <span style="font-family: Courier New,Courier,monospace">sizeof(char)</span> is passed to the function.</li>
-<li>The second parameter defines the size of the array allocation step. For example, if you set it to 4, the function returns an inline array of 4 elements, and the next time you grow the inline array, it grows by 4 elements and becomes an array of 8 elements. If you set the step to 0, the function sets a default safe value. 
-<p>The step can be changed later on using the <span style="font-family: Courier New,Courier,monospace">eina_inarray_step_set()</span> function.</p></li></ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function returns a pointer to the new <span style="font-family: Courier New,Courier,monospace">Eina_Inarray</span> variable.</p>
-<pre class="prettyprint">
-int inline_array() 
-{
-&nbsp;&nbsp;&nbsp;// Declare an inline array variable of the type Eina_Inarray
-&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-
-&nbsp;&nbsp;&nbsp;// Create an inline array of &quot;char&quot;
-&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 0);
-
-&nbsp;&nbsp;&nbsp;// When no longer needed, free the array memory
-&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-<h3>Modifying Inline Array Content</h3>
-
-<p>To modify inline array content:</p>
-<ul>
-<li>
-<p>To add data as the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_push()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to push to the inline array.</p>
-<p>If everything runs fine, the function returns the index of the new element. If something goes wrong, it returns <span style="font-family: Courier New,Courier,monospace">-1</span>.</p>
-<pre class="prettyprint">
-ch = &#39;a&#39;;
-eina_inarray_push(iarr, &amp;ch);
-</pre>
-</li>
-<li>
-<p>To insert data to a given position of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_at()</span> function:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the index of the element you want to add to the inline array.</li>
-<li>The last parameter is a pointer to the content to be added.</li></ul>
-<p>The content of the pointer is copied to the given position in the inline array. All the members from the position to the end of the array are shifted towards the end. If the position is equal to the end of the array, the member is appended. If the position is bigger than the array length, the function fails.</p>
-<pre class="prettyprint">
-ch = &#39;a&#39;;
-eina_inarray_push(iarr, &amp;ch);
-ch = &#39;b&#39;;
-eina_inarray_push(iarr, &amp;ch);
-ch = &#39;d&#39;;
-eina_inarray_push(iarr, &amp;ch);
-
-// Adding data on position 3
-ch = &#39;c&#39;;
-eina_inarray_insert_at(iarr, 2, &amp;ch)
-</pre>
-</li>
-<li>
-<p>To insert data with your own position criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function. The only difference between these functions is that the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function assumes that the array is already sorted and consequently optimizes the insertion position by doing a binary search.</p>
-<p>In both functions:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the data you want to push to the inline array.</li>
-<li>The last parameter is the callback comparison function. 
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback function compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function as the second parameter. If data1 is less than data2, -1 must be returned, if it is greater, 1 must be returned, and if they are equal, 0 must be returned.</p></li></ul>
-<p>The following example shows how to insert a value before a greater value:</p>
-<pre class="prettyprint">
-// Defining the comparison function with the position criteria
-Eina_Compare_Cb cmp(const void *a, const void *b)
-{
-&nbsp;&nbsp;&nbsp;return *(int*)a &gt; *(int*)b;
-}
-
-int inline_insert()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;char ch, *ch3;
-&nbsp;&nbsp;&nbsp;int a, *b;
-
-&nbsp;&nbsp;&nbsp;// Creating an inline array
-
-&nbsp;&nbsp;&nbsp;// Adding data to the inline array
-&nbsp;&nbsp;&nbsp;a = 97;
-&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-&nbsp;&nbsp;&nbsp;a = 98;
-&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-&nbsp;&nbsp;&nbsp;a = 100;
-&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-
-&nbsp;&nbsp;&nbsp;// Inserting data with the criteria
-&nbsp;&nbsp;&nbsp;a = 99;
-&nbsp;&nbsp;&nbsp;eina_inarray_insert_sorted(iarr, &amp;a, cmp);
-
-&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
-}
-</pre>
-</li>
-<li>
-<p>To remove the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop()</span> function. The only parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. This function returns the data removed from the inline array.</p>
-<pre class="prettyprint">
-eina_inarray_pop(iarr);
-</pre>
-</li>
-<li>
-<p>To remove specific data from an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to remove from the inline array.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function finds the data and removes the matching members from the array. The data can be an existing member of an inline array for optimized usage. In other cases, the content is matched using the <span style="font-family: Courier New,Courier,monospace">memcmp()</span> function.</p>
-
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function returns the index of the removed member, or -1 if failed.</p>
-<pre class="prettyprint">
-iarr = eina_inarray_new(sizeof(char), 0);
-
-ch = &#39;a&#39;;
-eina_inarray_push(iarr, &amp;ch);
-
-// Removing data from the array
-eina_inarray_remove(iarr, &amp;ch);
-</pre>
-</li>
-
-<li>
-<p>To remove data from a defined position in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove_at()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the index of the element you want to remove from the inline array.</p>
-<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array&#39;s head.</p>
-<pre class="prettyprint">
-// Removing data from position 2
-eina_inarray_remove_at(iarr, 2);
-</pre>
-</li>
-<li><p>To remove all the elements of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_flush()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function removes every member from the array.</p>
-<pre class="prettyprint">
-eina_inarray_flush(iarr);
-</pre>
-</li>
-
-<li>
-<p>To replace values in the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at()</span> function, which copies the data over the given position:</p>
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the index of the element you want to remove from the inline array.</li>
-<li>The last parameter is the data you want to copy in place of the current data.</li></ul>
-<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member&#39;s array using the previously defined <span style="font-family: Courier New,Courier,monospace">member_size</span>. If the position does not exist, the function fails.</p>
-<pre class="prettyprint">
-// Replacing the member at position 3 
-ch = &#39;d&#39;;
-eina_inarray_replace_at(iarr, 3, &amp;ch);
-</pre>
-</li>
-
-<li>
-<p>To sort an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_sort()</span> function, which applies a quick sorting algorithm to the inline array:</p>
-<ul><li>The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2. 
-<p>data1 and data2 are values contained in the inline array. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
-<pre class="prettyprint">
-static int
-short_cmp(const void *pa, const void *pb)
-{
-&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
-
-&nbsp;&nbsp;&nbsp;return *a - *b;
-}
-
-int sorting_inline_array()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating the inline array
-
-&nbsp;&nbsp;&nbsp;eina_inarray_sort(array, short_cmp);
-&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
-}
-</pre>
-
-<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
-</li>
-</ul> 
-
-<h3>Accessing Inline Array Data</h3>
-
-<p>To access inline array data:</p>
-<ul>
-<li>
-<p>To search a member in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function that runs a linear walk looking for the given data:</p>
-
-<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the data used by the callback function to run the comparison.</li>
-<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2.
-<p>data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function as the second parameter. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
-<p>The function returns the member index, or -1 if not found.</p>
-<pre class="prettyprint">
-Eina_Compare_Cb
-compare(const void *pa, const void *pb)
-{
-&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
-&nbsp;&nbsp;&nbsp;if (*a == *b)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-
-int search_inline_array()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
-&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;int elm_index;
-&nbsp;&nbsp;&nbsp;int to_search = 3;
-
-&nbsp;&nbsp;&nbsp;// Creating and populating the inline array
-
-&nbsp;&nbsp;&nbsp;elm_index = eina_inarray_search(array, &amp;to_search, compare);
-&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
-}
-</pre>
-
-<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_search_sorted()</span> function does exactly the same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span>, but uses a binary search for the given data.</p>
-</li>
-
-<li>
-<p>To get the number of elements in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_count()</span>. The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function returns an unsigned <span style="font-family: Courier New,Courier,monospace">int</span>, the number of elements.</p>
-<pre class="prettyprint">
-printf(&quot;Inline array of integers with %d elements:\n&quot;, eina_inarray_count(iarr));
-</pre>
-</li>
-
-<li>To iterate through an inline array, you can use various methods:
-<ul>
-<li><p>You can use the iterator macros for the inline arrays: <span style="font-family: Courier New,Courier,monospace">FOREACH</span> and <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p></li>
-<li>
-<p>To run a linear walk over an array of elements, use the <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_FOREACH()</span> macro. The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>, and the second parameter is the variable into which the current value is put during the walk. The <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_REVERSE_FOREACH()</span> macro does the same thing but starts from the last element.</p>
-
-<p>The following example illustrates the printing of each element and its pointer:</p>
-<pre class="prettyprint">
-iarr = eina_inarray_new(sizeof(char), 0);
-int a, *b;
-
-a = 97;
-eina_inarray_push(iarr, &amp;a);
-a = 98;
-eina_inarray_push(iarr, &amp;a);
-a = 99;
-eina_inarray_push(iarr, &amp;a);
-
-EINA_INARRAY_FOREACH(iarr, b)
-  printf(&quot;int: %d(pointer: %p)\n&quot;, *b, b);
-</pre>
-</li>
-<li>To process the array data, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function, which invokes the given function on each element of the array with the given data:
-<ul><li>The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>.</li>
-<li>The second parameter is the function to run on each element.
-<p>The function must return <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as long as you want to continue iterating. By returning <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, you stop the iteration and make the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function return <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-<p>The data given to the function is the pointer to the member itself.</p></li>
-<li>The last parameter is the data passed to the function called on each element.</li></ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if it successfully iterates through all items of the array. Call the function for every given data in the array. This is a safe way to iterate over an array.</p>
-<pre class="prettyprint">
-static Eina_Bool
-array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;short *member = p;
-&nbsp;&nbsp;&nbsp;int *i = user_data;
-&nbsp;&nbsp;&nbsp;(*p)++;
-&nbsp;&nbsp;&nbsp;(*i)++;
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-int inline_array_foreach()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;i = 0;
-&nbsp;&nbsp;&nbsp;eina_inarray_foreach(iarr, array_foreach, &amp;i);
-
-&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-
-<li>To remove some elements based on your own criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach_remove()</span> function, which walks through the array and, if the value matches in the callback function, removes the element:
-<ul><li>The first parameter is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
-<li>The second parameter is the callback function to run on each element.
-<p>The callback function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the value matches, or <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it does not match.</p></li>
-<li>The last parameter is the data passed to the callback function.</li></ul>
-<p>The function returns the number of removed entries or -1 if something goes wrong.</p>
-<pre class="prettyprint">
-static Eina_Bool
-array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;short *member = p;
-&nbsp;&nbsp;&nbsp;int *i = user_data;
-&nbsp;&nbsp;&nbsp;if (*i == *p) 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-
-int inline_array_foreach_remove()
-{
-&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;i = 6;
-&nbsp;&nbsp;&nbsp;eina_inarray_foreach_remove(iarr, array_foreach, &amp;i);
-
-&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-</li>
-</ul>
-</li>
-</ul>
-
-
-<h2 id="hash" name="hash">Hash Tables</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> provides a way to store values in association with a key. For example, if you want to store some tuples into a table, you can do it using the <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> is implemented using an array of &quot;buckets&quot; where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
-
-<h3 id="hash_create" name="hash_create">Creating a Hash Table</h3>
-
-<p>To create the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_new()</span> function:</p>
-<ul>
-<li>The first parameter is the function called when getting the size of the key.</li>
-<li>The second parameter is the function called when comparing the keys.</li>
-<li>The third parameter is the function called when getting the values.</li>
-<li>The fourth parameter is the function called on each value when the hash table is freed, or when an item is deleted from it. <span style="font-family: Courier New,Courier,monospace">NULL</span> can be passed as the callback.</li>
-<li>The last parameter is the size of the buckets.</li>
-</ul>
-<p>When you create an <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> instance, you have to create 4 potentially long callback functions. To make the functions shorter, <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers some predefined functions to create the following kinds of hash tables:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_djb2_new()</span> creates a new hash table using the djb2 algorithm for strings.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> creates a new hash table for use with strings (better with long strings).</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_small_new()</span> creates a new hash table for use with strings with a small bucket size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_int32_new()</span> and <span style="font-family: Courier New,Courier,monospace">eina_hash_int64_new()</span> create a new hash table for use with 32-bit and 64-bit integers.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_pointer_new()</span> creates a new hash table for use with pointers.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_stringshared_new()</span> creates a new hash table for use with shared strings.</li>
-</ul>
-<p>All these predefined functions require only one parameter, which is the function to free the data you store in the hash table.</p>
-<p>The following example shows how to manage a small phone book using the <span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> function to create the hash table.</p>
-<ol>
-<li><p>Create the phone book structure and some static data:</p>
-<pre class="prettyprint">
-struct _Phone_Entry 
-{
-&nbsp;&nbsp;&nbsp;const char *name; // Full name
-&nbsp;&nbsp;&nbsp;const char *number; // Phone number
-};
-
-typedef struct _Phone_Entry Phone_Entry;
-
-static Phone_Entry _start_entries[] = 
-{
-&nbsp;&nbsp;&nbsp;{ &quot;Wolfgang Amadeus Mozart&quot;, &quot;+01 23 456-78910&quot; },
-&nbsp;&nbsp;&nbsp;{ &quot;Ludwig van Beethoven&quot;, &quot;+12 34 567-89101&quot; },
-&nbsp;&nbsp;&nbsp;{ &quot;Richard Georg Strauss&quot;, &quot;+23 45 678-91012&quot; },
-&nbsp;&nbsp;&nbsp;{ &quot;Heitor Villa-Lobos&quot;, &quot;+34 56 789-10123&quot; },
-&nbsp;&nbsp;&nbsp;{ NULL, NULL }
-};
-</pre>
-</li>
-
-<li><p>Create the callback to free the data:</p>
-<pre class="prettyprint">
-static void
-_phone_entry_free_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;free(data);
-}
-</pre>
-<p>The free callback can be changed later using the <span style="font-family: Courier New,Courier,monospace">eina_hash_free_cb_set()</span> function. You need to pass the hash and the new callback function.</p>
-</li>
-
-<li><p>Create and destroy the hash table.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_free_buckets()</span> function frees all hash table buckets. It empties the hash but does not destroy it, and you can still use it for another purpose. When <span style="font-family: Courier New,Courier,monospace">eina_hash_free()</span> is called, the space allocated for the hash is freed.</p>
-<pre class="prettyprint">
-int free_data()
-{
-&nbsp;&nbsp;&nbsp;Eina_Hash *phone_book = NULL;
-&nbsp;&nbsp;&nbsp;phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
-
-&nbsp;&nbsp;&nbsp;// Empty the phone book without destroying it
-&nbsp;&nbsp;&nbsp;eina_hash_free_buckets(phone_book);
-&nbsp;&nbsp;&nbsp;eina_hash_free(phone_book);
-}
-</pre>
-</li>
-</ol>
-
-
-
-
-<h3>Modifying Hash Table Content</h3>
-
-<p>To modify hash table content:</p>
-<ul>
-<li>
-<p>To add some data to a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_add()</span> function. This function takes the hash, the key to access the data, and the data as its parameters.</p>
-<p>The following example shows how to add the initial data declared earlier to the hash:</p>
-<pre class="prettyprint">
-for (i = 0; _start_entries[i].name != NULL; i++)
-{
-&nbsp;&nbsp;&nbsp;eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers various ways to add elements to a hash, such as the <span style="font-family: Courier New,Courier,monospace">eina_hash_direct_add()</span> function, which adds the entry without duplicating the string key. The key is stored in the struct, so this function can be used with <span style="font-family: Courier New,Courier,monospace">eina_stringshare</span> to avoid key data duplication.</p>
-<pre class="prettyprint">
-for (i = 0; _start_entries[i].name != NULL; i++)
-{
-&nbsp;&nbsp;&nbsp;// Allocating memory for the phone entry
-&nbsp;&nbsp;&nbsp;Phone_Entry *e = malloc(sizeof(Phone_Entry));
-
-&nbsp;&nbsp;&nbsp;// Creating an eina_stringshare for the name and the phone number
-&nbsp;&nbsp;&nbsp;e-&gt;name = eina_stringshare_add(_start_entries[i].name);
-&nbsp;&nbsp;&nbsp;e-&gt;number = eina_stringshare_add(_start_entries[i].number);
-
-&nbsp;&nbsp;&nbsp;// Adding the entry to the hash 
-&nbsp;&nbsp;&nbsp;eina_hash_direct_add(phone_book, e-&gt;name, e);
-}
-</pre>
-</li>
-<li>
-<p>To modify an entry, use <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span> function passing the hash, the key of the data to change, and the new data. The function returns the old data on success.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_set()</span> function does the same work as <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span>, but if the entry does not exist, the function creates a new one.</p>
-<pre class="prettyprint">
-char *old_phone = NULL;
-char *phone = NULL;
-// Replace the phone number of Richard Strauss
-old_phone = eina_hash_modify(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-11111&quot;));
-phone = eina_hash_set(phone_book, &quot;Philippe de Magalhães&quot;, strdup(&quot;+33 6 111-11111&quot;));
-eina_hash_set(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-117711&quot;));
-</pre>
-</li>
-<li>
-<p>To change the key associated with the data without freeing and creating a new entry, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_move()</span> function. You only have to pass the hash, the old key, and the new key. If the operation succeeds, the function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, if not, it returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
-<pre class="prettyprint">
-Eina_Bool res;
-res = eina_hash_move(phone_book, &quot;Philippe de Magalhães&quot;, &quot;Filipe de Magalhães&quot;);
-</pre>
-</li>
-<li>
-<p>To delete entries from a hash table:</p>
-<ul><li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del()</span> function to remove the entry identified by a key or data from the given hash table:
-<pre class="prettyprint">
-Eina_Bool r;
-const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
-r = eina_hash_del(phone_book, entry_name, NULL);
-</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_key()</span> function to remove an entry based on the key:
-<pre class="prettyprint">
-r = eina_hash_del_by_key(phone_book, &quot;Richard Georg Strauss&quot;);
-</pre>
-</li>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_data()</span> function to remove an entry based on the data:</p>
-<pre class="prettyprint">
-r = eina_hash_del_by_data(phone_book, &quot;+12 34 567-89101&quot;);
-</pre>
-</li>
-</ul></li></ul>
-
-<h3>Accessing Hash Table Data</h3>
-<p>To find hash table elements and get data based on the key name:</p>
-<ul>
-<li>
-<p>To retrieve an entry based on its key, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_find()</span> function by passing the hash and the key you are looking for:</p>
-<pre class="prettyprint">
-char *phone = NULL;
-const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
-
-// Look for a specific entry and get its phone number
-phone = eina_hash_find(phone_book, entry_name);
-</pre>
-</li>
-<li>
-<p>To get the number of entries in a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_population()</span> function. Pass the hash as the only argument.</p>
-<pre class="prettyprint">
-unsigned int nb_elm;
-nb_elm = eina_hash_population(phone_book);
-</pre>
-</li>
-
-<li>To iterate through a hash table, you can use various methods: 
-<ul>
-
-<li>to iterate over the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach()</span> function:
-
-<ul><li>The first parameter is the hash.</li>
-<li>The second parameter is the callback function called on each iteration.
-<p>The callback function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the iteration has to continue and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if the iteration has to stop.</p></li>
-<li>The last parameter one is the data passed to the callback function.</li></ul>
-
-<p>The following example prints the key and the data of the hash entry (the name and the phone number):</p>
-
-<pre class="prettyprint">
-static Eina_Bool
-pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
-{
-&nbsp;&nbsp;&nbsp;const char *name = key;
-&nbsp;&nbsp;&nbsp;const char *number = data;
-&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
-
-&nbsp;&nbsp;&nbsp;// Return EINA_FALSE to stop this callback from being called
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-printf(&quot;List of phones:\n&quot;);
-
-// Running the callback on the hash called phone_book 
-eina_hash_foreach(phone_book, pb_foreach_cb, NULL);
-printf(&quot;\n&quot;);
-</pre>
-</li>
-<li>To iterate over the keys, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span> function:
-<pre class="prettyprint">
-// Declaration of the Eina_Iterator
-Eina_Iterator *it;
-
-// Variable to handle the current iteration &quot;data&quot;
-void *data;
-
-// Iterate over the keys (names)
-printf(&quot;List of names in the phone book:\n&quot;);
-
-it = eina_hash_iterator_key_new(phone_book);
-
-// Use the generic eina_iterator_next()
-while (eina_iterator_next(it, &amp;data))
-{
-&nbsp;&nbsp;&nbsp;const char *name = data;
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, name);
-}
-
-// Free the iterator
-eina_iterator_free(it);
-</pre>
-</li>
-
-<li>To iterate over the hash data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_data_new()</span> function the same way as <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span>:
-<pre class="prettyprint">
-// Declaration of the Eina_Iterator
-Eina_Iterator *it;
-
-// Variable to handle the current iteration &quot;data&quot;
-void *data;
-
-// Iterate over hash data 
-printf(&quot;List of numbers in the phone book:\n&quot;);
-
-it = eina_hash_iterator_data_new(phone_book);
-while (eina_iterator_next(it, &amp;data))
-{
-&nbsp;&nbsp;&nbsp;const char *number = data;
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, number);
-}
-
-// Free the iterator
-eina_iterator_free(it);
-</pre>
-</li>
-<li>To iterate over a tuple composed of keys and data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_tuple_new()</span> function:
-<pre class="prettyprint">
-// Declaration of the Eina_Iterator
-Eina_Iterator *tit;
-
-// Variable to handle the current iteration &quot;data&quot;
-void *tuple;
-
-printf(&quot;List of phones:\n&quot;);
-tit = eina_hash_iterator_tuple_new(phone_book);
-while (eina_iterator_next(tit, &amp;tuple))
-{
-&nbsp;&nbsp;&nbsp;Eina_Hash_Tuple *t = tuple;
-&nbsp;&nbsp;&nbsp;const char *name = t-&gt;key;
-&nbsp;&nbsp;&nbsp;const char *number = t-&gt;data;
-&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
-}
-
-// Always free the iterator after its use
-eina_iterator_free(tit); 
-</pre>
-</li>
-</ul>
-</li>
-</ul>
-
-
-<h2 id="list" name="list">Lists</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_List</span> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct&#39;s fields, similar to a self-made double-link list.</p>
-<p>In addition to the previous and next node and its data, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> nodes keep a reference to an accounting structure. The accounting structure is used to improve the performance of some functions. The structure is private and must not be modified.</p>
-
-<p>In an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a &quot;list&quot;: the list itself is a list where each node is a list as well.</p>
-
-<p>Eina provides 2 list types: the classic list (<span style="font-family: Courier New,Courier,monospace">Eina_List</span>) and an inline list (<span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span>).</p>
-
-<h3>Creating and Destroying a List</h3>
-<p>To use an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
-
-<ol><li>Declare the list with <span style="font-family: Courier New,Courier,monospace">NULL</span> as the default value:
-<pre class="prettyprint">
-int list()
-{
-&nbsp;&nbsp;&nbsp;// Declaration of the Eina_List with NULL as default value;
-&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
-</pre></li>
-
-<li>Call the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function with the list and the data you want to append as parameters.
-<p>The list must be a pointer to the first element of the list (or <span style="font-family: Courier New,Courier,monospace">NULL</span>). The function returns a pointer to the list.</p>
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;// Creating the first element of the list 
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;watch&quot;);
-
-&nbsp;&nbsp;&nbsp;// Adding more elements
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;phone&quot;);
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;ivi&quot;);
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;notebook&quot;);
-</pre></li>
-
-<li>When you no longer need the list, free it:
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;// Free the Eina_List
-&nbsp;&nbsp;&nbsp;eina_list_free(list);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre></li>
-</ol>
-
-
-<h3>Modifying List Content</h3>
-
-<p>To modify list content:</p>
-<ul>
-<li>
-<p>To add data to a list:</p>
-
-<ul>
-<li>To add data at the end of the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function. To add data at the top of the list, use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span>. The functions work in the same way, only adding the data to different places.
-<pre class="prettyprint">
-list = eina_list_prepend(list, &quot;set-top box&quot;);
-</pre>
-</li>
-
-<li>To insert data into the list after a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function. As the last parameter, define the element after which the data is added.
-<p>For example to append data after the &quot;phone&quot; element:</p>
-<pre class="prettyprint">
-list = eina_list_append_relative(list, &quot;single-board computer&quot;, &quot;phone&quot;);
-</pre>
-</li>
-
-<li>To add a new entry before a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_prepend_relative()</span> function. It is similar to the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function.
-<pre class="prettyprint">
-list = eina_list_prepend_relative(list, &quot;ultrabook&quot;, &quot;ivi&quot;);
-</pre>
-</li>
-
-<li>To append a list node to a linked list after a specified member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative_list()</span> function. To prepend a list node to a linked list before a specified member, use the <span style="font-family: Courier New,Courier,monospace">Eina_List * eina_list_prepend_relative_list()</span> function.
-</li>
-</ul>
-</li>
-
-<li>To set data in a list member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_set()</span> function. Pass the &quot;list&quot; (node) as the first argument and the data to set as the second.
-
-<p>The following example also shows the usage of the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span> function, which returns the last element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
-
-<pre class="prettyprint">
-// Setting new data for the last element
-eina_list_data_set(eina_list_last(list), eina_stringshare_add(&quot;Boris&quot;));
-</pre>
-</li>
-
-<li id="remove_list">To remove a node from the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_remove()</span> function. This function removes the first instance of the specified data from the given list.
-<pre class="prettyprint">
-list = eina_list_remove(list, &quot;ultrabook&quot;);
-</pre>
-<p>You can also remove a &quot;list&quot; (node) from a list using the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function. Pass the list you want to delete an element from and a &#39;list&#39; (node) you want to delete.</p>
-<pre class="prettyprint">
-Eina_List *app_list = NULL;
-Eina_List *to_remove = NULL;
-
-// Adding some elements to the list (using stringshares)
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
-
-// Finding the &quot;list&quot; to remove 
-to_remove = eina_list_data_find_list(list, eina_string_share_add(&quot;enlightenment&quot;));
-
-list = eina_list_remove_list(list, to_remove);
-</pre>
-</li>
-
-<li>To move elements in a list, you can use various function, such as <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list()</span> that promotes an element to the top of the list or <span style="font-family: Courier New,Courier,monospace">eina_list_demote_list()</span> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the &quot;list&quot; (node) you want to move. Use the functions just like the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function.
-<pre class="prettyprint">
-list = eina_list_promote_list(list, eina_list_data_find_list(list, &quot;ivi&quot;));
-</pre>
-</li>
-<li>To reverse all the elements of a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse()</span> function. To obtain a reversed copy of the list while keeping the initial list unchanged, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse_clone()</span> function.
-<pre class="prettyprint">
-Eina_List *rev_copy;
-
-app_list = eina_list_reverse(app_list);
-rev_copy = eina_list_reverse_clone(app_list);
-</pre>
-</li>
-<li>To sort a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_sort()</span> function. This function takes a list which needs to be sorted, the maximum number of elements to be sorted, and a callback function that compares data. To sort all list elements, set the maximum number of elements to 0.
-<pre class="prettyprint">
-int sort_cb(const void *d1, const void *d2)
-{
-&nbsp;&nbsp;&nbsp;const char *txt = d1;
-&nbsp;&nbsp;&nbsp;const char *txt2 = d2;
-&nbsp;&nbsp;&nbsp;if(!txt) return(1);
-&nbsp;&nbsp;&nbsp;if(!txt2) return(-1);
-
-&nbsp;&nbsp;&nbsp;return(strcmp(txt, txt2));
-}
-
-extern Eina_List *list;
-list = eina_list_sort(list, 0, sort_cb);
-</pre>
-</li>
-<li>To merge 2 list into 1, use the <span style="font-family: Courier New,Courier,monospace">eina_list_merge()</span> function. The <span style="font-family: Courier New,Courier,monospace">eina_list_sorted_merge()</span> function merges 2 sorted lists according to the ordering function that you pass as the last argument.
-<pre class="prettyprint">
-int sort_cb(void *d1, void *d2)
-{
-&nbsp;&nbsp;&nbsp;const char *txt = NULL;
-&nbsp;&nbsp;&nbsp;const char *txt2 = NULL;
-&nbsp;&nbsp;&nbsp;if(!d1) return(1);
-&nbsp;&nbsp;&nbsp;if(!d2) return(-1);
-
-&nbsp;&nbsp;&nbsp;return(strcmp((const char*)d1, (const char*)d2));
-}
-
-Eina_List *sorted1;
-Eina_List *sorted2;
-Eina_List *newlist;
-
-// Insert some values and sort your lists
-
-// Simply merge 2 lists without any process
-newlist = eina_list_merge(sorted1, sorted2);
-
-newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
-</pre>
-</li>
-<li>To split a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_split_list()</span> function:
-<ul><li>The first parameter is the list to split.</li>
-<li>The second parameter is the &quot;list&quot; (element) after which the list is split.</li>
-<li>The last parameter is the head of the second list.</li></ul>
-<pre class="prettyprint">
-// Original list (left list)
-Eina_List *list = NULL;
-
-// New list (right list)
-Eina_List *other_list = NULL;
-
-// Eina_List (element)
-Eina_List *l;
-
-list = eina_list_append(list, &quot;super tux&quot;);
-list = eina_list_append(list, &quot;frozen bubble&quot;);
-list = eina_list_append(list, &quot;lincity-ng&quot;);
-
-// Sorting the list (just for fun)
-list = eina_list_sort(list, 0, cmp_func);
-
-// Looking for the &#39;split&#39; element
-l = eina_list_search_sorted_list(list, cmp_func, &quot;frozen bubble&quot;);
-
-// Splitting the list
-list = eina_list_split_list(list, l, &amp;other_list);
-</pre>
-</li>
-<li>To copy a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_clone()</span> function. The function copies all the elements in the list in the exact same order.
-<pre class="prettyprint">
-Eina_List *app_list_copy;
-
-app_list_copy = eina_list_clone(app_list);
-</pre>
-</li>
-
-</ul>
-
-
-<h3>Accessing List Data</h3>
-<p>To access list data:</p>
-<ul>
-<li>To find some data on your list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function. Pass the list containing your data as the first parameter and the data you are looking for as the last one. The function returns the found member data pointer if found, <span style="font-family: Courier New,Courier,monospace">NULL</span> otherwise.
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function searches the list from the beginning to the end for the first member for which the data pointer is data. If it is found, the data is returned, otherwise <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned. The function only compares pointers, which is why using <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> is very useful with lists, because it always returns the same pointer for the same string.</p>
-<pre class="prettyprint">
-Eina_List *app_list = NULL;
-const char *res_str;
-
-// Adding some elements to the list (using stringshares)
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
-
-// Finding the data
-res_str = eina_list_data_find(list, eina_string_share_add(&quot;enlightenment&quot;));
-if (res_str == eina_stringshare_add(&quot;enlightenment&quot;))
-&nbsp;&nbsp;&nbsp;printf(&quot;Data is present&quot;);
-else
-&nbsp;&nbsp;&nbsp;printf(&quot;Data not present&quot;);
-</pre>
-
-<p>The above example returns &quot;Data is present&quot;.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find_list()</span> function does the same thing as <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span>, but returns an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>. For an example, see the <a href="#remove_list"><span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function</a>.</p>
-<p>You can access the data or a &quot;list&quot; (node) of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span> using the <span style="font-family: Courier New,Courier,monospace">eina_list_nth()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_nth_list()</span> functions. The first one returns a pointer to the data of the &quot;n&quot; element and the second a pointer to the &quot;list&quot;. To access the data of the 3rd element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
-<pre class="prettyprint">
-const char *res;
-Eina_List *res_lst;
-
-res = eina_list_nth(app_list, 2);
-res_lst = eina_list_nth_list(app_list, 2);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">res</span> variable contains the pointer to the string &quot;calaos&quot;. The <span style="font-family: Courier New,Courier,monospace">res_lst</span> variable is the list containing &quot;calaos&quot;.</p>
-</li>
-
-<li>To search for data in a list, select your function based on whether the list is sorted or unsorted.
-<ul>
-<li>To search in an unsorted list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function:
-<ul><li>The first parameter is the list.</li>
-<li>The second parameter is a callback function for comparison.</li>
-<li>The last parameter is the data you are looking for.</li></ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> function does the same but returns an &quot;Eina_List&quot;.</p>
-
-
-<p>The following example shows 2 searches using both the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> functions:</p>
-<pre class="prettyprint">
-int search_list()
-{
-&nbsp;&nbsp;&nbsp;// Declaring the list
-&nbsp;&nbsp;&nbsp;Eina_List *list = NULL; 
-&nbsp;&nbsp;&nbsp;Eina_List *l;
-&nbsp;&nbsp;&nbsp;// Little trick to use strcmp as Eina_Compare_Cb 
-&nbsp;&nbsp;&nbsp;Eina_Compare_Cb cmp_func = (Eina_Compare_Cb)strcmp;
-
-&nbsp;&nbsp;&nbsp;void *data;
-&nbsp;&nbsp;&nbsp;int cmp_result;
-
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;debian&quot;);
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;centos&quot;);
-
-&nbsp;&nbsp;&nbsp;data = eina_list_search_unsorted(list, cmp_func, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;l = eina_list_search_unsorted_list(list, cmp_func, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;if (l-&gt;data != data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_list_free(list);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;eina_list_free(list);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-</li>
-<li>To search in sorted lists, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted_list()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted()</span> functions. They work similarly as the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function.
-</li>
-</ul>
-</li>
-
-
-<li>To get data from a list element, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_get()</span> function. The function returns the data contained in the given list.
-
-<p>The following example uses the <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span> function to move through the list in a statement.</p>
-<pre class="prettyprint">
-int list_data_set()
-{
-&nbsp;&nbsp;&nbsp;// Declaring the list
-&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
-&nbsp;&nbsp;&nbsp;// Eina_List in which to place the elements or lists
-&nbsp;&nbsp;&nbsp;Eina_List *l;
-
-&nbsp;&nbsp;&nbsp;void *list_data;
-
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Bertrand&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Cedric&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Nicolas&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Vincent&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Raoul&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Fabien&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Philippe&quot;));
-&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;billiob&quot;));
-
-&nbsp;&nbsp;&nbsp;for(l = list; l; l = eina_list_next(l))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Printing the data returned by eina_list_data_get
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
-
-&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(list, list_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_stringshare_del(list_data);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-
-<li>To move in a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span>, <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">eina_list_prev()</span> functions to move to the last, next, or previous element in the list.
-<p>The following example scrolls backwards starting from the end of the list:</p>
-<pre class="prettyprint">
-for(l = eina_list_last(list); l; l = eina_list_prev(l))
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
-</pre>
-
-</li>
-
-<li>To count the list elements, use the <span style="font-family: Courier New,Courier,monospace">eina_list_count()</span> function. The function returns the number of items in a list.
-<pre class="prettyprint">
-printf(&quot;List size: %d\n&quot;, eina_list_count(list));
-</pre>
-</li>
-<li>To iterate through an array, you can use various iterators: 
-<ul>
-<li>To iterate over a list from the beginning to the end, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro:
-<ul><li>The first parameter is the list to iterate.</li>
-<li>The second parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_List *</span> to hold the current &quot;List&quot; (node).</li>
-<li>The last parameter receives the current data during the run.</li></ul>
-
-<p>The following example prints the data of each &quot;List&quot; (node) of the list:</p>
-<pre class="prettyprint">
-Eina_List *list = NULL;
-Eina_List *l;
-void *list_data;
-
-list = eina_list_append(list, &quot;ls&quot;);
-list = eina_list_append(list, &quot;top&quot;);
-list = eina_list_append(list, &quot;rmdir&quot;);
-list = eina_list_append(list, &quot;uname&quot;);
-
-EINA_LIST_FOREACH(list, l, list_data)
-&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)list_data);
-
-eina_list_free(list);
-</pre>
-</li>
-<li>To iterate from the last element to the first, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_REVERSE_FOREACH</span> macro. It works similarly as <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH()</span>.
-</li>
-<li>To iterate over a list from the beginning to the end, you can also use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH_SAFE</span> macro. It is called safe, because it stores the next &quot;List&quot; (node), so you can safely remove the current &quot;List&quot; (node) and continue the iteration.
-<pre class="prettyprint">
-Eina_List *list;
-Eina_List *l;
-Eina_List *l_next;
-char *data;
-
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
-
-// Using EINA_LIST_FOREACH_SAFE to free the elements that match &quot;tizen&quot;
-
-EINA_LIST_FOREACH_SAFE(list, l, l_next, data)
-&nbsp;&nbsp;&nbsp;if (strcmp(data, &quot;tizen&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_remove_list(list, l);
-&nbsp;&nbsp;&nbsp;}
-</pre>
-</li>
-
-
-<li>To remove each list element while having access to the node&#39;s data, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FREE</span> macro. Pass the list and a pointer to hold the current data.
-<pre class="prettyprint">
-Eina_List *list;
-char *data;
-
-// List is filled
-
-EINA_LIST_FREE(list, data)
-&nbsp;&nbsp;&nbsp;free(data);
-</pre>
-</li>
-</ul>
-</li>
-</ul>
-
-<h3 id="inlist" name="inlist">Using an Inline List</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> is a special data type drawn to store nodes pointers in the same memory as data. This way the memory is less fragmented, but operations, such as sort and count, are slower. The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> has its own purpose, but if you do not understand what the purpose is, use the regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span> instead.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes can be part of a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, simply added with the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> or <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span> functions.</p>
-
-<p>To use the inline list:</p>
-<ol>
-<li>Define the structure of the data before creating the inline list:
-<pre class="prettyprint">
-struct my_struct 
-{
-&nbsp;&nbsp;&nbsp;EINA_INLIST;
-&nbsp;&nbsp;&nbsp;int a, b;
-};
-</pre>
-
-<p>The structure is composed of 2 integers, the real data, and the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> type which is composed of 3 pointers defining the inline list structure:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * next</span>: next node</li>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * prev</span>: previous node</li>
-<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * last</span>: last node</li>
-</ul></li>
-
-<li>
-<p>To create the inlist nodes, allocate the memory and use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_append()</span> function:</p>
-<ul><li>The first parameter is the existing list head or <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list. 
-<p>The following example passes <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list.</p></li>
-<li>The second parameter is the new list node, and it must not be <span style="font-family: Courier New,Courier,monospace">NULL</span>. 
-<p>You must use the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_GET()</span> macro to get the inlist object of the datastruct.</p></li></ul>
-<pre class="prettyprint">
-struct my_struct *d, *cur;
-Eina_Inlist *list, *itr, *tmp;
-
-d = malloc(sizeof(*d));
-d-&gt;a = 1;
-d-&gt;b = 10;
-
-list = eina_inlist_append(NULL, EINA_INLIST_GET(d));
-</pre>
-
-<p>Repeat this operation for every new node:</p>
-<pre class="prettyprint">
-d = malloc(sizeof(*d));
-d-&gt;a = 2;
-d-&gt;b = 20;
-list = eina_inlist_append(list, EINA_INLIST_GET(d));
-</pre>
-</li>
-
-<li>To add data to the inline list:
-<ul><li>Put data at the end of the inline list with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend()</span> function:
-<pre class="prettyprint">
-d = malloc(sizeof(*d));
-d-&gt;a = 3;
-d-&gt;b = 30;
-list = eina_inlist_prepend(list, EINA_INLIST_GET(d));
-</pre>
-</li>
-
-<li>Add a node before or after a given node with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend_relative()</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative()</span> functions. 
-<p>In both functions, the first parameter is the target list, the second is the element you want to add, and the last is the reference element to place data after (in this case). Similarly as in a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a list, so the last parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> typed variable.</p>
-<pre class="prettyprint">d = malloc(sizeof(*d));
-d-&gt;a = 4;
-d-&gt;b = 40;
-list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
-</pre>
-</li></ul></li>
-
-<li>To sort and iterate an inline list, to find and move list elements, and to perform other inline list operations, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Inline__List__Group.html">Inline List</a> API.</li>
-
-<li>When the inline list is no longer needed, destroy it by looping over the list to free each <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> structure and the data using allocated memory. Use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_remove()</span> function on each node.
-
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_CONTAINER_GET()</span> macro returns the container object of an inlist (the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> of <span style="font-family: Courier New,Courier,monospace">my_struc</span>), and the list element is removed and the allocated memory of the container &quot;object&quot; is freed.</p>
-
-<pre class="prettyprint">while (list)
-{
-&nbsp;&nbsp;&nbsp;struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list, struct my_struct);
-
-&nbsp;&nbsp;&nbsp;// Remove the current list element 
-&nbsp;&nbsp;&nbsp;list = eina_inlist_remove(list, list);
-&nbsp;&nbsp;&nbsp;free(aux);
-}
-</pre>
-</li>
-
-
-</ol>
-
-<h2 id="generic" name="generic">Generic Value</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> object provides generic data storage and access, allowing you to store what you want in one single type of <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types. The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> comes with predefined types for numbers, array, list, hash, blob, and structs, and it can convert between data types, including string.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can handle the following types:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UCHAR</span>: unsigned char</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_USHORT</span>: unsigned short</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT</span>: unsigned int</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ULONG</span>: unsigned long</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMESTAMP</span>: unsigned long used for timestamps</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT64</span>: unsigned integer of 64 bits</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_CHAR</span>: char</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_SHORT</span>: short</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT</span>: int</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LONG</span>: long</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT64</span>: integer of 64 bits</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_FLOAT</span>: float</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_DOUBLE</span>: double</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRINGSHARE</span>: stringshared string</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRING</span>: string</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ARRAY</span>: array</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span>: list</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_HASH</span>: hash</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMEVAL</span>: &#39;struct timeval&#39;</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_BLOB</span>: blob of bytes</li>
-<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRUCT</span>: struct</li>
-</ul>
-
-
-<p>To set up a generic value:</p>
-<ol>
-<li>Declare the necessary variables:
-<pre class="prettyprint">
-// The Eina_Value itself
-Eina_Value v;
-// An integer 
-int i;
-// And a char *
-char *newstr;
-</pre>
-</li>
-
-<li>To set up an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> for an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_setup()</span> function. The first argument is the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and the second is the type.
-<pre class="prettyprint">
-eina_value_setup(&amp;v, EINA_VALUE_TYPE_INT);
-</pre>
-</li>
-</ol>
-<p>To manage the generic value:</p>
-<ul>
-<li>To set an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_set()</span> function:
-<pre class="prettyprint">
-eina_value_set(&amp;v, 123);
-</pre>
-</li>
-
-<li>To get the value, use the <span style="font-family: Courier New,Courier,monospace">eina_value_get()</span> function. Pass the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> as the first argument, and a pointer to a variable to store the value (the target variable must have the same type as the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>).
-<pre class="prettyprint">
-eina_value_get(&amp;v, &amp;i);
-printf(&quot;v=%d\n&quot;, i);
-</pre>
-<p>The above example prints &quot;v=123&quot;.</p>
-</li>
-
-<li>To convert an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to a string, use the <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span> function. The code snippet above printed an <span style="font-family: Courier New,Courier,monospace">int</span> value. It is also possible to print the value as a string.
-<pre class="prettyprint">
-newstr = eina_value_to_string(&amp;v);
-printf(&quot;v as string: %s\n&quot;, newstr);
-
-free(newstr);
-</pre>
-</li>
-
-<li>To free the memory allocated by <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_flush()</span> function:
-<pre class="prettyprint">
-eina_value_flush(&amp;v);
-</pre>
-</li>
-
-<li>To store a string, get its value, and print it:
-<pre class="prettyprint">
-const char *s;
-
-eina_value_setup(&amp;v, EINA_VALUE_TYPE_STRING);
-eina_value_set(&amp;v, &quot;My string&quot;);
-eina_value_get(&amp;v, &amp;s);
-
-printf(&quot;v=%s (pointer: %p)\n&quot;, s, s);
-</pre>
-</li>
-
-<li>To set up a string, use the <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span> function with an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>:
-<pre class="prettyprint">
-char *newstr; 
-
-newstr = eina_value_to_string(&amp;v);
-printf(&quot;v as string: %s (pointer: %p)\n&quot;, newstr, newstr);
-
-// Free the memory allocated by eina_value_to_string
-free(newstr);
-
-eina_value_flush(&amp;v); 
-</pre>
-</li>
-
-<li>To convert from one <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to another, use the <span style="font-family: Courier New,Courier,monospace">eina_value_convert()</span> function. 
-<p>The function puts the converted value into another <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It accepts pointers, so you have to pass an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> pointer.</p>
-<pre class="prettyprint">
-Eina_Value v;
-Eina_Value otherv;
-
-// Set up 2 Eina_Values: 1 int and 1 string
-eina_value_setup(&amp;otherv, EINA_VALUE_TYPE_STRING);
-eina_value_setup(&amp;v, EINA_VALUE_TYPE_INT);
-
-// Convert from int to string
-eina_value_set(&amp;v, 123);
-eina_value_convert(&amp;v, &amp;otherv);
-eina_value_get(&amp;otherv, &amp;s);
-printf(&quot;otherv=%s\n&quot;, s);
-
-// Another way to do the same 
-eina_value_set(&amp;otherv, &quot;33&quot;);
-eina_value_convert(&amp;otherv, &amp;v);
-eina_value_get(&amp;v, &amp;i);
-printf(&quot;v=%d\n&quot;, i);
-
-// Clean your values
-eina_value_flush(&amp;otherv);
-eina_value_flush(&amp;v);
-</pre>
-</li>
-
-<li>To store an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> that corresponds to the <span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span> type.
-</li>
-<li>To create an <span style="font-family: Courier New,Courier,monospace">Eina_Value_List</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_list_setup()</span> function. The function initializes a generic value storage of the list type. The first parameter is the &quot;object&quot; value, and the second one is the type (how to manage the stored list members).
-</li>
-</ul>
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ecore_n.htm b/org.tizen.guides/html/native/ui/ecore_n.htm
deleted file mode 100644 (file)
index cfdbba0..0000000
--- a/org.tizen.guides/html/native/ui/ecore_n.htm
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Ecore</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-        <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
-               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-   
-   <h1>Ecore</h1>
- <p>The Ecore library provides convenience functions, which allow you to manage the application main loop and threading.</p>
-  
-<p>The main features of Ecore are:</p>
-<ul>
-<li><a href="main_loop_n.htm">Main Loop</a> <p>Enables you to manage the main loop and get data.</p></li>
-<li><a href="threads_n.htm">Thread Usage</a> <p>Enables you to use threads with the Ecore main loop.</p></li>
-</ul>
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/edc_part_block_n.htm b/org.tizen.guides/html/native/ui/edc_part_block_n.htm
deleted file mode 100644 (file)
index 0d4faf4..0000000
--- a/org.tizen.guides/html/native/ui/edc_part_block_n.htm
+++ /dev/null
@@ -1,2071 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Edje Parts and Blocks</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#edje_block">Edje Blocks</a></li>
-                               <li><a href="#group_block">Group Block</a></li>
-                               <li><a href="#part_block">Part Block</a></li>
-                               <li><a href="#program1">Program</a></li>
-                               </ul>
-       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>         
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Edje Parts and Blocks</h1> 
-  
-
-  
-  <h2 id="edje_block" name="edje_block">Edje Blocks</h2>
-
-<p>A typical Edje file starts with the following definitions:</p>
-
-<pre class="prettyprint">
-<a href="#Images">images</a> {}
-<a href="#Fonts">fonts</a> {}
-<a href="#Color_classes">color_classes</a> {}
-<a href="#Styles">styles</a> {}
-<a href="#Collections">collections</a> 
-{
-&nbsp;&nbsp;&nbsp;<a href="#Sounds">sounds</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-1&quot; 2300;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-2&quot; 2300;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sample">sample</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Name">name</a>: &quot;sound1&quot; RAW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sound_Source">source</a>: &quot;sound_file1.wav&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
-&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
-}
-</pre>
-
-<p>To get more details above each sub-block, click on the links inside the collections block above.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">This guide is based on original work from Andres Blanc (dresb) <a href="mailto:andresblanc@gmail.com">andresblanc@gmail.com</a>, it has been heavily expanded and edited since then.</td>
-</tr>
-</tbody>
-</table> 
-
-<h3 id="Images" name="Images">Images Block</h3>
-
-<pre class="prettyprint">
-images 
-{
-&nbsp;&nbsp;&nbsp;image: &quot;filename1.ext&quot; COMP;
-&nbsp;&nbsp;&nbsp;image: &quot;filename2.ext&quot; LOSSY 99;
-&nbsp;&nbsp;&nbsp;set {}
-&nbsp;&nbsp;&nbsp;set {}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">images</span> block is used to list each image file which are used in the theme. If any compression method is used, it is also defined here. Besides the document&#39;s root, additional <span style="font-family: Courier New,Courier,monospace;">images</span> blocks can be included inside other blocks, usually <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
-<p>This is included in each image file. The full path to the directory holding the images can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s &quot;<span style="font-family: Courier New,Courier,monospace;">-id</span>&quot; option. Available compression methods are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
-<li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
-<li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
-<li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded to the file, refer to the external file instead</li>
-</ul>
-</li>
-</ul>
-
-<h4>Images.set Block</h4>
-
-<pre class="prettyprint">
-set 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;image_name_used&quot;;
-&nbsp;&nbsp;&nbsp;image {}
-&nbsp;&nbsp;&nbsp;image {}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">set</span> block is used to define an image with different content depending on their size. Besides the document&#39;s root, additional <span style="font-family: Courier New,Courier,monospace;">set</span> blocks can be included inside other blocks, normally <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [image name]</span>
-<p>Defines the name that refer to this image description.</p>
-</li>
-</ul>
-
-<h4>Images.set.image Block</h4>
-
-<pre class="prettyprint">
-image 
-{
-&nbsp;&nbsp;&nbsp;image: &quot;filename4.ext&quot; COMP;
-&nbsp;&nbsp;&nbsp;size: 51 51 200 200;
-&nbsp;&nbsp;&nbsp;border: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;border_scale_by: 0.0;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">image</span> block inside a <span style="font-family: Courier New,Courier,monospace;">set</span> block defines the characteristic of an image. Every block describes one image and the size rule to use it.</p>
-
-<p>For full documentation, see <a href="#description_image">Image</a>.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
-<p>This is included in each image file. The full path to the directory holding the images can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-id</span> option. Available compression methods are:</p>
-       <ul>
-               <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
-               <li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded to the file, refer to the external file instead</li>
-       </ul>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">size [minw] [minh] [maxw] [maxh]</span>
-<p>Defines the minimum and maximum size that selects the specified image.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span>
-<p>If set, the area (in pixels) of each side of the image is displayed as a fixed size border, from the side to inwards, preventing the corners from being changed on a resize.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span>
-<p>If border scaling is enabled then normally the OUTPUT border sizes (e.g. if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always the exact 3 columns of output, or at scale 2.0 they will be 6 columns, or 0.33 they will merge into a single column). This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make much higher resolution outputs possible by always using the highest resolution artwork and then runtime scaling it down. Valid values are: 0.0 or bigger (0.0 or 1.0 to turn it off).</p>
-</li>
-</ul>
-
-<h3 id="Fonts" name="Fonts">Fonts Block</h3>
-
-<pre class="prettyprint">
-fonts 
-{
-&nbsp;&nbsp;&nbsp;font: &quot;filename1.ext&quot; &quot;fontname&quot;;
-&nbsp;&nbsp;&nbsp;font: &quot;filename2.ext&quot; &quot;otherfontname&quot;;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">fonts</span> block is used to list each font file with an alias used later in the theme. As with the <span style="font-family: Courier New,Courier,monospace;">images</span> block, additional <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks can be included inside other blocks.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">font [font filename] [font alias]</span>
-<p>Defines each <span style="font-family: Courier New,Courier,monospace;">font file</span> and <span style="font-family: Courier New,Courier,monospace;">alias</span>, the full path to the directory containing the font files can be defined with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-fd</span> option.
-</p></li>
-</ul>
-
-<h3 id="Data" name="Data">Data Block</h3>
-
-<pre class="prettyprint">
-data 
-{
-&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;file: &quot;otherkey&quot; &quot;filename.ext&quot;;
-}
-</pre>
-
-<p>This block behaves in the same way as the data block inside the parts, only the use-cases are different: this is useful for data that is for the whole theme, for instance license information, version, authors, and so on.</p>
-
-<h3 id="Color_classes" name="Color_classes">Color_classes Block</h3>
-
-<pre class="prettyprint">
-color_classes 
-{
-&nbsp;&nbsp;&nbsp;color_class 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;colorclassname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">color_classes</span> block contains a list of one or more <span style="font-family: Courier New,Courier,monospace;">color_class</span> blocks. Each <span style="font-family: Courier New,Courier,monospace;">color_class</span> allows the designer to name an arbitrary group of colors to be used in the theme, the application can use that name to alter the color values at runtime.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [color class name]</span>
-<p>Sets the name for the color class, used as reference by both the theme and the application.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span>
-<p>The main color.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span>
-<p>Used as outline in text and textblock parts.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span>
-<p>Used as shadow in text and textblock parts.</p>
-</li>
-</ul>
-
-<h3 id="Styles" name="Styles">Styles Block</h3>
-
-<pre class="prettyprint">
-styles 
-{
-&nbsp;&nbsp;&nbsp;style 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;stylename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;..default style properties..&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag: &quot;tagname&quot; &quot;..style properties..&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">styles</span> block contains a list of one or more <span style="font-family: Courier New,Courier,monospace;">style</span> blocks. A <span style="font-family: Courier New,Courier,monospace;">style</span> block is used to create style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;</span> for advanced TEXTBLOCK formatting.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [style name]</span>
-<p>The name of the style to be used as reference later in the theme.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">base [style properties string]</span>
-<p>The default style properties that is applied to the complete text. The available tags that can be used in the style property are the following:</p>
-   <ul>
-         <li>font</li>
-         <li>font_size
-        <table class="note">
-              <tbody>
-              <tr>
-                      <th class="note">Note</th>
-              </tr>
-              <tr>
-                      <td class="note">The font size is a point size, and the size of the rendered text is affected by the ppi information. The system basic ppi is 96, and you can change it on the Emulator menu.</td>
-              </tr>
-               </tbody>
-      </table>
-
-         </li>
-         <li>color</li>
-         <li>color_class</li>
-         <li>text_class</li>
-         <li>ellipsis</li>
-      <li>wrap</li>
-      <li>style</li>
-      <li>valign</li>
-      <li>align</li>
-         
-   </ul>
-
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">tag [tag name] [style properties string]</span>
-<p>Style to be applied only to text between style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;..&lt;/tags&gt;</span>. When creating paired tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span><span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>, a &#39;+&#39; sign must be added at the start of the style properties of the first part (<span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span>). If the second part (<span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>) is also defined, a &#39;-&#39; sign must be added to its style properties. This applies only to paired tags; single tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;tab&gt;</span>, must not have a starting &#39;+&#39;.</p>
-   <ul>
-         <li>br</li>
-         <li>tab</li>
-         <li>b</li>
-         <li>match</li>
-   </ul>
-
-</li>
-</ul>
-
-<p>The following code is the sample of a text style for the text style:</p>
-
-<pre class="prettyprint">
-style 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;list_text_main&quot;;
-&nbsp;&nbsp;&nbsp;base: &quot;font=Tizen:style=Regular font_size=30 color=#ffffff ellipsis=1.0&quot;;
-&nbsp;&nbsp;&nbsp;tag: &quot;br&quot; &quot;\n&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;ps&quot; &quot;ps&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;tab&quot; &quot;\t&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;b&quot; &quot;+ font_weight=Bold&quot;;
-}
-</pre>
-
-
-
-<h3 id="Collections" name="Collections">Collections Block</h3>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;base_scale: 1.8;
-&nbsp;&nbsp;&nbsp;sounds 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-1&quot; 2300;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-2&quot; 440;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sample 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;sound_file1&quot; RAW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;sound_file1.wav&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alias: &quot;anothername;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: width height;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: width height;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scripts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limits {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">collections</span> block is used to list the groups that compose the theme. Additional <span style="font-family: Courier New,Courier,monospace;">collections</span> blocks do not prevent overriding group names.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">sounds</span> block contains a list of one or more sound sample and tone items.</p>
-
-<h4>Base Scale</h4>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">base_scale: [scale factor]</span>
-<p>Information about the scale factor in the edc file.</p>
-</li>
-</ul>
-
-<p>Object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on the scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;.</p>
-
-<p>The size of a scalable object is multiplied with the device scale value. If the scalable object with the size 10 is created in a device with the scale 1.0, the size of the object is 20 in a device with the scale 2.0, and 40 in a device with the scale 4.0.</p>
-
-<p>For more information about supporting multiple screens in one edc, see the <a href="multiple_screens_n.htm">Multiple Screen Support</a> guide.</p>
-
-
-<h3 id="Sounds" name="Sounds">Sounds Block</h3>
-
-<p id="Tone"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">tone [tone name] [frequency]</span>
-<p>A sound of the given frequency.</p>
-</li>
-</ul>
-
-
-<h4 id="Sample" name="Sample">Sounds.sample Block</h4>
-
-<p>The sample block defines the sound sample.</p>
-
-<p id="Name"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">name [sample name] [compression type] (quality)</span>
-<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-sd</span> option. Valid types are:</p>
-       <ul>
-    <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
-    <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
-    <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [-0.1 - 1.0]</span>: Lossy compression with quality from 0.0 to 1.0</li>
-    <li><span style="font-family: Courier New,Courier,monospace;">AS_IS</span>: No compression or encoding, write the file information as it is</li>
-       </ul>
-</li>
-</ul>
-
-<p id="Sound_Source"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">source [file name]</span>
-<p>The sound source file name (source can be mono/stereo WAV file. Only files with 44.1 KHz sample rate are supported for now).</p>
-</li>
-</ul>
-
-
-  <h2 id="group_block" name="group_block">Group Block</h2>
-
-<pre class="prettyprint">
-<a href="#Group">group </a>
-{
-&nbsp;&nbsp;&nbsp;<a href="#Group_Name">name</a>: &quot;nameusedbytheapplication&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#Alias">alias</a>: &quot;anothername&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#Min">min</a>: width height;
-&nbsp;&nbsp;&nbsp;<a href="#Max">max</a>: width height;
-&nbsp;&nbsp;&nbsp;<a href="#Parts">parts</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;definitions of parts&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Script">script</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Limits">limits</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Vertical">vertical</a>: &quot;limit_name&quot; height_barrier;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Horizontal">horizontal</a>: &quot;limit_name&quot; width_barrier;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Group_Data">data</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Items">items</a>: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#File">file</a>: &quot;key&quot; &quot;file&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Programs">programs</a> {}
-}
-</pre>
-
-<h3 id="Group" name="Group">Group</h3>
-
-<p>A <span style="font-family: Courier New,Courier,monospace;">group</span> block contains the list of parts and programs that compose a given Edje Object.</p>
-
-<ul>
-<li id="Group_Name"><span style="font-family: Courier New,Courier,monospace;">name [group name]</span>
-<p>The name that is used by the application to load the resulting Edje object and to identify the group to swallow in a GROUP part. If a group with the same name exists already it will be completely overridden by the new group.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">inherit_only [1 or 0]</span>
-<p>This flags the group as being used only for inheriting, which will inhibit <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> resolving of programs and parts that may not exist in this group, but are located in the group which is inheriting this group.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">inherit [parent group name]</span>
-<p>Parent group name for inheritance. Group <span style="font-family: Courier New,Courier,monospace;">inherit</span> is used to inherit any predefined group and change some property which belongs to <span style="font-family: Courier New,Courier,monospace;">part</span>, <span style="font-family: Courier New,Courier,monospace;">description</span>, <span style="font-family: Courier New,Courier,monospace;">items</span> or <span style="font-family: Courier New,Courier,monospace;">program</span>. The child group has the same properties as its parent group. If you specify the type again in an inherited part, it causes an error. </p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
-</tr>
-</tbody>
-</table> 
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">script_recursion [1/0]</span>
-<p>This flag (1 or 0) determines whether to error on unsafe calls when recursively running Embryo programs. For example, running an Embryo script which calls EDC that has a <span style="font-family: Courier New,Courier,monospace;">script{}</span> block is unsafe, and the outer-most (first) Embryo stack is corrupted. It is strongly unadvisable to use this flag.</p></li>
-
-<li id="Alias"><span style="font-family: Courier New,Courier,monospace;">alias [additional group name]</span>
-<p>Additional name to be used as an identifier. Defining multiple aliases is supported.</p>
-</li>
-
-<li id="Min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span>
-<p>The minimum size for the container defined by the composition of the parts. It is not enforced.</p>
-</li>
-
-<li id="Max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span>
-<p>The maximum size for the container defined by the totality of the parts. It is not enforced.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">broadcast_signal [on/off]</span>
-<p>Signal gets automatically broadcasted to all sub group parts. Default is &quot;true&quot;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">orientation [AUTO/LTR/RTL]</span>
-<p>This defines GROUP orientation. It is useful if you want match interface orientation with language.</p>
-<ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">AUTO</span>: Follow system defaults</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">LTR</span>: Used in Left To Right Languages (Latin)</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">RTL</span>: Used in Right To Left Languages (Hebrew, Arabic interface)</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span>
-<p>Changes the default value of <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> for every part in this group. Default is &quot;1&quot;, to maintain compatibility.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">program_source [source name]</span>
-<p>Change the default value of source for every program in the current group which is declared after this value is set. Defaults to an unset value to maintain compatibility. The name of source can be set on every program, but if the name can be defined in the group level, it reduces the effort to indicate it in every program.</p>
-</li>
-</ul>
-
-<h4 id="Parts" name="Parts">Group.parts</h4>
-
-<pre class="prettyprint">
-parts 
-{
-&nbsp;&nbsp;&nbsp;part {}
-&nbsp;&nbsp;&nbsp;part {}
-&nbsp;&nbsp;&nbsp;part {}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">parts</span> group contain one or more <span style="font-family: Courier New,Courier,monospace;">part</span>. Each part describes a visual element and has a type: <span style="font-family: Courier New,Courier,monospace;">text</span>, <span style="font-family: Courier New,Courier,monospace;">image</span>, <span style="font-family: Courier New,Courier,monospace;">table</span>, etc.</p>
-
-<p>For complete documentation, see the <a href="#part_block">Part Block</a> guide.</p>
-
-<h4 id="Script" name="Script">Group.script</h4>
-
-<pre class="prettyprint">
-group 
-{
-&nbsp;&nbsp;&nbsp;script 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>This block is used to inject embryo scripts to a given Edje theme and it functions in two modalities. When it is included inside a <span style="font-family: Courier New,Courier,monospace;">program</span> block, the script is executed every time the program is run, on the other hand, when included directly into a <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">part</span>, or <span style="font-family: Courier New,Courier,monospace;">description</span> block, it is executed once at the load time, in the load order.</p>
-
-<p>For more information, see the <a href="#program1">Program</a> guide.</p>
-
-<h4 id="Limits" name="Limits">Group.limits</h4>
-
-<pre class="prettyprint">
-limits 
-{
-&nbsp;&nbsp;&nbsp;vertical: &quot;limit_name&quot; height_barrier;
-&nbsp;&nbsp;&nbsp;horizontal: &quot;limit_name&quot; width_barrier;
-}
-</pre>
-
-<p>This block is used to trigger signals when the Edje object is resized.</p>
-<p id="Vertical"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">vertical [name] [height barrier]</span>
-<p>This sends a signal <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, signal <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> is sent. This limit is applied on the y axis and is given in pixels.</p>
-</li>
-</ul>
-
-<p id="Horizontal"></p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">horizontal [name] [width barrier]</span>
-<p>This sends a signal <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, signal <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> is sent. This limit is applied on the x axis and is given in pixels.</p>
-</li>
-</ul>
-
-<h4 id="Group_Data" name="Group_Data">Group.data</h4>
-
-<pre class="prettyprint">
-data 
-{
-&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;file: &quot;key2&quot; &quot;somefile&quot;;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">data</span> block is used to pass arbitrary parameters from the theme to the application. Unlike the <span style="font-family: Courier New,Courier,monospace;">images</span> and <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks, additional <span style="font-family: Courier New,Courier,monospace;">data</span> blocks can only be included inside the <span style="font-family: Courier New,Courier,monospace;">group</span> block.</p>
-
-<ul>
-<li id="Items"><span style="font-family: Courier New,Courier,monospace;">items: &quot;key&quot; &quot;value&quot;;</span>
-<p>Defines a new parameter, the value is the string specified next to it.</p>
-</li>
-<li id="File"><span style="font-family: Courier New,Courier,monospace;">file: &quot;key&quot; &quot;file&quot;;</span>
-<p>Defines a new parameter, the value is the contents of the specified file formatted as a single string of text. This property only works with plain text files.</p>
-</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">For genlist item styles, keys must be texts and icons, respectively for text parts and swallow parts; values must the names of the parts, separated with spaces.</td>
-</tr>
-</tbody>
-</table> 
-
-<h4 id="Programs" name="Programs">Group.programs</h4>
-
-<pre class="prettyprint">
-programs 
-{
-&nbsp;&nbsp;&nbsp;program {}
-&nbsp;&nbsp;&nbsp;program {}
-&nbsp;&nbsp;&nbsp;program {}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">programs</span> group contain one or more <span style="font-family: Courier New,Courier,monospace;">program</span>.</p>
-
-<p>For more information about the program structure, see the <a href="#program1">Program</a> guide. </p>
-
-  
-  <h2 id="part_block" name="part_block">Part Block</h2> 
-  
-  <pre class="prettyprint">
-<a href="#part">part</a> 
-{
-&nbsp;&nbsp;&nbsp;// inherit all the fields of another part
-&nbsp;&nbsp;&nbsp;<a href="#inherit">inherit</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// name the part
-&nbsp;&nbsp;&nbsp;<a href="#part_name">name</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// set the part type
-&nbsp;&nbsp;&nbsp;<a href="#type">type</a>: IMAGE;
-&nbsp;&nbsp;&nbsp;// enable mouse events on the part
-&nbsp;&nbsp;&nbsp;<a href="#mouse_events">mouse_events</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// repeat mouse events to parts below the current one
-&nbsp;&nbsp;&nbsp;<a href="#repeat_events">repeat_events</a>: 0/1;
-&nbsp;&nbsp;&nbsp;<a href="#ignore_flags">ignore_flag</a>s: NONE;
-&nbsp;&nbsp;&nbsp;// whether the part sizes scale with the edje scaling factor
-&nbsp;&nbsp;&nbsp;<a href="#scale">scale</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// whether fully-transparent pixels are taken into account for collision detection
-&nbsp;&nbsp;&nbsp;<a href="#precise_is_inside">precise_is_inside</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// only render the area of the part that coincides with the given part
-&nbsp;&nbsp;&nbsp;<a href="#clip_to">clip_to</a>: &quot;anotherpart&quot;;
-&nbsp;&nbsp;&nbsp;// for group/textblock parts: swallow the given group (for textblock: goes below text)
-&nbsp;&nbsp;&nbsp;<a href="#source">source</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// same as source but goes on top of text
-&nbsp;&nbsp;&nbsp;<a href="#source2">source2</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// for textblock parts: swallow the given group below the mouse cursor when it hovers over the part
-&nbsp;&nbsp;&nbsp;<a href="#source3">source3</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// same as source3 but goes on top of the cursor
-&nbsp;&nbsp;&nbsp;<a href="#source4">source4</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// for textblock parts: swallow the given group below text anchors (&lt;a&gt;...&lt;/a&gt;)
-&nbsp;&nbsp;&nbsp;<a href="#source5">source5</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// same as source5 but goes on to top of the anchor
-&nbsp;&nbsp;&nbsp;<a href="#source6">source6</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;// add a shadow effect to the part
-&nbsp;&nbsp;&nbsp;<a href="#effect">effect</a>: SOFT_SHADOW (BOTTOM_RIGHT);
-&nbsp;&nbsp;&nbsp;// for textblock parts: makes the text editable, possibly with a specific behavior
-&nbsp;&nbsp;&nbsp;<a href="#entry_mode">entry_mode</a>: PASSWORD;
-&nbsp;&nbsp;&nbsp;// for textblock parts: change how the tex selection is triggered
-&nbsp;&nbsp;&nbsp;<a href="#select_mode">select_mode</a>: EXPLICIT;
-&nbsp;&nbsp;&nbsp;// for editable textblock parts: where to draw the (blinking) cursor
-&nbsp;&nbsp;&nbsp;<a href="#cursor_mode">cursor_mode</a>: UNDER;
-&nbsp;&nbsp;&nbsp;// for editable textblock parts: allow multiple lines
-&nbsp;&nbsp;&nbsp;<a href="#multiline">multiline</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// for textblock parts: accessibility features will be used
-&nbsp;&nbsp;&nbsp;<a href="#access">access</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// no-one uses that
-&nbsp;&nbsp;&nbsp;<a href="#pointer_mode">pointer_mode</a>: AUTOGRAB;
-&nbsp;&nbsp;&nbsp;<a href="#use_alternate_font_metrics">use_alternate_font_metrics</a>: 0/1;
-&nbsp;&nbsp;&nbsp;// remove the given program; useful when it was inherited
-&nbsp;&nbsp;&nbsp;<a href="#program_remove">program_remove</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;// remove the given part; useful when it was inherited
-&nbsp;&nbsp;&nbsp;<a href="#part_remove">part_remove</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// insert the current part below the given part, as if it were declared before
-&nbsp;&nbsp;&nbsp;<a href="#insert_before">insert_before</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// insert the current part above the given part, as if it were declared after
-&nbsp;&nbsp;&nbsp;<a href="#insert_after">insert_after</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// define a new part inside this one
-&nbsp;&nbsp;&nbsp;<a href="#part_part">part</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;part definition&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#dragable">draggable </a>
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// confine the current part to the given part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_confine">confine</a>: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// only start drag when it would have moved enough to be outside of the given part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_threshold">threshold</a>: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// forward drag events to the given part instead of handling them
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_events">events</a>: &quot;another draggable part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// enable horizontal drag of the part with steps each step_size or with steps_count steps
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_x">x</a>: 0/1 &lt;step_size&gt; &lt;steps_count&gt;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as x but vertical
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_y">y</a>: 1 0 100;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;// for box or table parts
-&nbsp;&nbsp;&nbsp;<a href="#box_table">box/table</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// list of items
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items">items</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item">item</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// define item type, can only be GROUP
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_type">type</a>: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name the item
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_name">name</a>: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the source for this item, i.e. its contents
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_source">source</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// minimum horizontal and vertical item sizes (-1 for expand)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_min">min</a>: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// maximum horizontal and vertical item sizes (-1 for ignore)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_max">max</a>: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the item padding in pixels
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_padding">padding</a>: 2 2 2 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_spread">spread</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the item alignment
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set a weight hint in the box for the given object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_weight">weight</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the aspect ratio hint
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect">aspect</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect_mode">aspect_mode</a>: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// number of columns and rows the item will take
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_span">span</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#description">description</a> 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// inherit another description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_inherit">inherit</a>: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name the current description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_state">state</a>: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use another part as content of the current &quot;PROXY&quot; part (This description only works in the PROXY part and the current part mirrors the rendering content of the source part)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_source">source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the part (in)visible (invisible parts emit no signals)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_visible">visible</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// emit a signal when the given dimension becomes zero or stops being zero
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_limit">limit</a>: WIDTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// horizontal and vertical alignment of the part inside its parent
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set that the part does not change size
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_fixed">fixed</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the minimum size for the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_min">min</a>: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// forcibly multiply the minimum sizes by the given factors
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_minmul">minmul</a>: 1.2 1.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the maximum size for the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_max">max</a>: 400 400;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make vertical and horizontal resizes happen in steps
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_step">step</a>: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// force aspect ratio to be kept between min and max between resizes
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect">aspect</a>: 0.8 1.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the dimension to which the aspect ratio applies
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect_preference">aspect_preference</a>: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use the given color class which can be used to factor font colors
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color_class">color_class</a>: &quot;colorclassname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color">color</a>: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the color of the text&#39;s shadow
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color2">color2</a>: 0 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the color of the text&#39;s outline
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color3">color3</a>: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// define the positions of the top-left (rel1) and bottom-right (rel2) corners
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2">rel1/rel2</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make relative and offset use the given part for their positioning
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to">to</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// position the corner relative to the part given through to (0.0 being axis beginning, 1.0 being its end)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// add an absolute offset (in pixels) along each axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_offset">offset</a>: 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as to but only for the x axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_x">to_x</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as to but only for the y axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_y">to_y</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// settings specific to parts of type image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image">image</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name (not path) of the regular image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_normal">normal</a>: &quot;imagename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// image to use while transitioning to the normal image; use several times to create animations
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_tween">tween</a>: &quot;imagename2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the number of pixels that make up each border of the image, i.e. are not resized when the image is
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border">border</a>: 4 4 4 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// hide, strip from its alpha or show (default) the non-border part of the image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_middle">middle</a>: DEFAULT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale_by">border_scale_by</a>: 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to scale the border or not
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale">border_scale</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_scale_hint">scale_hint</a>: STATIC;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set how the image is going to fill its part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill">fill</a>: 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to smooth the image when scaling it
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_smooth">smooth</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_spread">spread</a>: ??;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to scale or tile to fit when resizing the image is needed
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_type">type</a>: SCALE/TILE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// only display the part of the image that is below and to the right of the given point
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin">origin</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify top-left point as relative coordinates
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify top-left point as a pixel offset
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_offset">offset</a>: 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify bottom-right point as relative coordinates
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size">size</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify bottom-right point as a pixel offset
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_offset">offset</a>: 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// settings specific to parts of type text and textblock
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text">text</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the part&#39;s text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text">text</a>: &quot;some text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s font
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_font">font</a>: &quot;Tizen Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s size
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size">size</a>: 14;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s class which can be used to factor font and font-size settings
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_class">text_class</a>: &quot;classname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use the styles defined in stylename
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_style">style</a>: &quot;stylename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// for textblocks in password mode, replace characters to hide with this string
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_repch">repch</a>: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the min and max font sizes allowed when resizing (default is 0 0, i.e. unrestricted)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size_range">size_range</a>: 6 18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// increase font size as much as possible while still remaining in the container for both axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_fit">fit</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the min size of the container equal to the min size of the current text (0 0 by default)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_min">min</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the max size of the container equal to the max size of the current text (0 0 by default)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_max">max</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of the text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// re-use the text of another part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_source">text_source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// when text is too long to fit, relative position at which to cut the text and put an ellipsis (&quot;...&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_ellipsis">ellipsis</a>: 0.9;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// settings specific to parts of type box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box">box</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set how children while be arranged in the box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_layout">layout</a>: horizontal_homogeneous;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the padding between items of the box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_padding">padding</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the box&#39; min size be the min size of its elements (i.e. make it shrinkable as much as its items)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_min">min</a>: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table">table</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make items homogeneous
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_homogeneous">homogeneous</a>: NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the padding between items of the box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_padding">padding</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the table&#39;s min size be the min size of its elements (i.e. make it shrinkable as much as its items)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_min">min</a>: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map">map</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_light">light</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_on">on</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_smooth">smooth</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_alpha">alpha</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_backface_cull">backface_cull</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_on">perspective_on</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_color">color</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation">rotation</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_center">center</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_x">x</a>: 45;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_y">y</a>: 120;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_z">z</a>: 90;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_zplane">zplane</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_focal">focal</a>: 20;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// simpler syntax to create transitions to the current part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link">link</a> 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link_base">base</a>: &quot;edje,signal&quot; &quot;edje&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3 id="part" name="part">Part</h3>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;mouse_events:  1;
-&nbsp;&nbsp;&nbsp;repeat_events: 0;
-&nbsp;&nbsp;&nbsp;ignore_flags: NONE;
-&nbsp;&nbsp;&nbsp;clip_to: &quot;anotherpart&quot;;
-&nbsp;&nbsp;&nbsp;source:  &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;pointer_mode: AUTOGRAB;
-&nbsp;&nbsp;&nbsp;use_alternate_font_metrics: 0;
-
-&nbsp;&nbsp;&nbsp;dragable {}
-&nbsp;&nbsp;&nbsp;items {}
-&nbsp;&nbsp;&nbsp;description {}
-}
-</pre>
-
-<p>Parts are used to represent the most basic design elements of the theme, for example, a part can represent a line in a border or a label on a button.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">inherit [part name]</span><a class="anchor" id="inherit"></a>
-<p>Copies all attributes except part name from referenced part into current part. All existing attributes, except part name, are overwritten.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
-</tr>
-</tbody>
-</table> 
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">program_remove [program name] (program name) (program name) ...</span><a class="anchor" id="program_remove"></a>
-<p>Removes the listed programs from an inherited group. Removing non-existing programs is not allowed.</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">This breaks program sequences if a program in the middle of the sequence is removed.</td>
-</tr>
-</tbody>
-</table> 
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">part_remove [part name] (part name) (part name) ...</span><a class="anchor" id="part_remove"></a>
-<p>Removes the listed parts from an inherited group. Removing non-existing parts is not allowed.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">name [part name]</span><a class="anchor" id="part_name"></a>
-<p>The part&#39;s name is used as reference in the theme&#39;s relative positioning system, by programs and in some cases by the application. It must be unique within the group.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">type [TYPE]</span><a class="anchor" id="type"></a>
-<p>Sets the type. This is set to IMAGE by default. Valid types are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">RECT</span>: Rectangle object in the screen</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TEXT</span>: Simple text</li>
-<li><span style="font-family: Courier New,Courier,monospace;">IMAGE</span>: Image area</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>: Area where you can add the object</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span>: Complex text with multiple lines, mark-up elements, and such.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">GROUP</span>: Part which can include other groups in the same group.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOX</span>: Container object as a container. It has a row or column.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: Container object as a container. It has a row and column.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PROXY</span>: Clone of another part in the same group. It shares the memory of the source part.</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">SPACER</span>: Rectangle object, but invisible. Recommended to padding because it does not allocate any memory.</li>
-
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">part [part declaration]</span><a class="anchor" id="part_part"></a>
-<p>Nested parts adds hierarchy to Edje. Nested part inherits its location relatively to the parent part. To declare a nested part create a new part within current part declaration. Define parent part name before adding nested parts. </p>
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;parent_rect&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description {}
-&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;nested_rect&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">insert_before [another part&#39;s name]</span><a class="anchor" id="insert_before"></a>
-<p>The part&#39;s name which this part is inserted before. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer more than one by <span style="font-family: Courier New,Courier,monospace;">insert_before</span>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">insert_after [another part&#39;s name]</span><a class="anchor" id="insert_after"></a>
-<p>The part&#39;s name which this part is inserted after. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer more than one by <span style="font-family: Courier New,Courier,monospace;">insert_after</span>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span><a class="anchor" id="mouse_events"></a>
-<p>Specifies whether the part emits signals, although it is named <span style="font-family: Courier New,Courier,monospace;">mouse_events</span>. Disabling it (0) prevents the part from emitting signal. It is set to 1 by default, or to the value set to <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> at the group level, if any.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">repeat_events [1 or 0]</span><a class="anchor" id="repeat_events"></a>
-<p>Specifies whether a part echoes a mouse event to other parts below the pointer (1), or not (0). It is set to 0 by default.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">ignore_flags [FLAG] ...</span><a class="anchor" id="ignore_flags"></a>
-<p>Specifies whether events with the given flags are ignored, i.e., do not emit signals to the parts. Multiple flags must be separated by spaces, the effect is ignoring all events with one of the flags specified. Possible flags are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Event is handled properly (default value)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ON_HOLD</span>: Event is not handled or passed in this part</li>
-
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">scale [1 or 0]</span><a class="anchor" id="scale"></a>
-<p>Specifies whether the part scales its size with an Edje scaling factor. By default scale is off (0) and the default scale factor is 1.0 which means no scaling. This is used to scale properties such as font size, min/max size of the part, and it can also be used to scale based on DPI of the target device. The reason to be selective is that some parts are scaled well, others are not, so choose what works best.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">pointer_mode [MODE]</span><a class="anchor" id="pointer_mode"></a>
-<p>Sets the mouse pointer behavior for a given part. The default value is AUTOGRAB. Available modes are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">AUTOGRAB</span>, when the part is clicked and the button remains pressed, the part is the source of all future mouse signals emitted, even outside the object, until the button is released.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">NOGRAB</span>, the effect is limited to the part&#39;s container.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">precise_is_inside [1 or 0]</span><a class="anchor" id="precise_is_inside"></a>
-<p>Enables precise point collision detection for the part, which is more resource-intensive. It is disabled by default.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">use_alternate_font_metrics [1 or 0]</span><a class="anchor" id="use_alternate_font_metrics"></a>
-<p>Only affects text and textblock parts, when enabled Edje uses different size measurement functions. It is disabled by default.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">clip_to [another part&#39;s name]</span><a class="anchor" id="clip_to"></a>
-<p>Only renders the area of part that coincides with another part&#39;s container. Overflowing content is not displayed. Note that the part being clipped to can only be a rectangle part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span><a class="anchor" id="source"></a>
-<p>Only available to GROUP or TEXTBLOCK parts. Swallows the specified group into the part&#39;s container if it is a GROUP. If TEXTBLOCK it is used for the group to be loaded and used for selection display UNDER the selected text. <span style="font-family: Courier New,Courier,monospace;">source2</span> is used for on top of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source2</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source2 [another group&#39;s name]</span><a class="anchor" id="source2"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for selection display OVER the selected text. <span style="font-family: Courier New,Courier,monospace;">source</span> is used for under of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source3 [another group&#39;s name]</span><a class="anchor" id="source3"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for cursor display UNDER the cursor position. <span style="font-family: Courier New,Courier,monospace;">source4</span> is used for over the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source4 [another group&#39;s name]</span><a class="anchor" id="source4"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for cursor display OVER the cursor position. <span style="font-family: Courier New,Courier,monospace;">source3</span> is used for under the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source5 [another group&#39;s name]</span><a class="anchor" id="source5"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for anchors display UNDER the anchor position. <span style="font-family: Courier New,Courier,monospace;">source6</span> is used for over the anchors text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source6 [another group&#39;s name]</span><a class="anchor" id="source6"></a>
-<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for anchor display OVER the anchor position. <span style="font-family: Courier New,Courier,monospace;">source5</span> is used for under the anchor text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">effect [effect] </span> (shadow direction)<a class="anchor" id="effect"></a>
-<p>Apply the selected outline, shadow, or glow effect to &quot;textblock&quot; (take care that this effect only works for the textblock). The available effects are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOFT_OUTLINE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOFT_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SOFT_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">FAR_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">FAR_SOFT_SHADOW</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">GLOW</span></li>
-</ul>
-
-<p>The available shadow directions definitions are (default is <span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span>):</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP_LEFT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TOP_RIGHT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">RIGHT</span></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">entry_mode [mode]</span><a class="anchor" id="entry_mode"></a>
-<p>Sets the edit mode for a textblock part. The available modes are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>:
-<p>The textblock is non-editable.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span>:
-<p>The textblock is non-editable, but selectable.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EDITABLE</span>:
-<p>The textblock is editable.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace;">PASSWORD</span>:
-<p>The textblock is editable if the Edje object has the keyboard focus and the part has the Edje focus (or selectable always regardless of focus). In the event of password mode, not selectable and all text chars replaced with *&#39;s but editable and pastable.</p></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">select_mode [mode]</span><a class="anchor" id="select_mode"></a>
-<p>Sets the selection mode for a textblock part. The available modes are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">DEFAULT</span>, selection mode is what you would expect on any desktop. Press mouse, drag and release to end.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EXPLICIT</span>, this mode requires the application controlling the Edje object has to explicitly begin and end selection modes, and the selection itself is draggable at both ends.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">cursor_mode [mode]</span><a class="anchor" id="cursor_mode"></a>
-<p>Sets the cursor mode for a textblock part. The available modes are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">UNDER</span>, the cursor draws below the character pointed at. That is the default.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BEFORE</span>, the cursor is drawn as a vertical line before the current character, just like many other GUI toolkits handle it.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">multiline [1 or 0]</span><a class="anchor" id="multiline"></a>
-<p>It causes a textblock that is editable to allow multiple lines for editing.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">access [1 or 0]</span><a class="anchor" id="access"></a>
-<p>Specifies whether the part uses accessibility feature (1), or not (0). It is set to 0 by default.</p>
-</li>
-</ul>
-
-<h3 id="dragable" name="dragable">Draggable</h3>
-
-<pre class="prettyprint">
-dragable 
-{
-&nbsp;&nbsp;&nbsp;confine: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;threshold: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;events:  &quot;another draggable part&quot;;
-&nbsp;&nbsp;&nbsp;x: 0 0 0;
-&nbsp;&nbsp;&nbsp;y: 0 0 0;
-}
-</pre>
-
-<p>When this block is used the part can be dragged around the interface, do not confuse with external drag and drop. By default Edje (and most applications) attempts to use the minimal size possible for a draggable part. If the min property is not set in the description the part is (most likely) set to 0px width and 0px height, thus invisible.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">x [enable/disable] [step] [count]</span><a class="anchor" id="dragable_x"></a>
-<p>Used to set up dragging events for the X axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits movement to values divisible by it, causing the part to jump from position to position. If step is set to 0 it is calculated as width of confine part divided by count.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">y [enable/disable] [step] [count]</span><a class="anchor" id="dragable_y"></a>
-<p>Used to set up dragging events for the Y axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits movement to values divisible by it, causing the part to jump from position to position. If step is set to 0 it is calculated as height of confine part divided by count.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">confine [another part&#39;s name]</span><a class="anchor" id="dragable_confine"></a>
-<p>Limits the movement of the dragged part to another part&#39;s container. Set a min size for the part, or the dragged object will not show up.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">threshold [another part&#39;s name]</span><a class="anchor" id="dragable_threshold"></a>
-<p>When set, the movement of the dragged part can only start when it get moved enough to be outside of the threshold part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">events [another draggable part&#39;s name]</span><a class="anchor" id="dragable_events"></a>
-<p>Causes the part to forward the drag events to another part, thus ignoring them for itself.</p>
-</li>
-
-</ul>
-
-<h3 id="box_table" name="box_table">Box/table</h3>
-
-<h4 id="box_table_items" name="box_table_items">Items</h4>
-
-<pre class="prettyprint">
-box/table 
-{
-&nbsp;&nbsp;&nbsp;items 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some source&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 1 1 2 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some other source&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;some name&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>On a BOX part, this block is used to set other groups as elements of the box. These can be mixed with external objects set by the application through the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_box*()</span> functions.</p>
-
-<h5 id="box_table_items_item" name="box_table_items_item">Item</h5>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">type [item type]</span><a class="anchor" id="box_table_items_item_type"></a>
-<p>Sets the type of the object this item holds. The supported type is: </p>
-       <ul>
-       <li><span style="font-family: Courier New,Courier,monospace;">GROUP</span> (default)</li>
-       </ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">name [name for the object]</span><a class="anchor" id="box_table_items_item_name"></a>
-<p>Sets the name of the object via <span style="font-family: Courier New,Courier,monospace;">evas_object_name_set()</span>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span><a class="anchor" id="box_table_items_item_source"></a>
-<p>Sets the group this object is made of.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span><a class="anchor" id="box_table_items_item_min"></a>
-<p>Sets the minimum size hints for this object. </p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">Must be -1 to get expand behavior.</td>
-</tr>
-</tbody>
-</table> 
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">spread [width] [height]</span><a class="anchor" id="box_table_items_item_spread"></a>
-<p>Replicates the item in a rectangle of size width x height box starting from the defined position of this item. The default value is 1 1;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">prefer [width] [height]</span><a class="anchor" id="box_table_items_item_prefer"></a>
-<p>Sets the preferred size hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span><a class="anchor" id="box_table_items_item_max"></a>
-<p>Sets the maximum size hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">padding [left] [right] [top] [bottom]</span><a class="anchor" id="box_table_items_item_padding"></a>
-<p>Sets the padding hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [x] [y]</span><a class="anchor" id="box_table_items_item_align"></a>
-<p>Sets the alignment hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">weight [x] [y]</span><a class="anchor" id="box_table_items_item_weight"></a>
-<p>Sets the weight hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">aspect [w] [h]</span><a class="anchor" id="box_table_items_item_aspect"></a>
-<p>Sets the aspect width and height hints for this object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">aspect_mode [mode]</span><a class="anchor" id="box_table_items_item_aspect_mode"></a>
-<p>Sets the aspect control hints for this object. The available hints are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">NEITHER</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">options [extra options]</span><a class="anchor" id="box_table_items_item_options"></a>
-<p>Sets extra options for the object.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">position [col] [row]</span><a class="anchor" id="box_table_items_item_position"></a>
-<p>Sets the position this item has in the table. This is required for parts of type TABLE.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">span [col] [row]</span><a class="anchor" id="box_table_items_item_span"></a>
-<p>Sets how many columns and rows this item uses. The default value is 1 1.</p>
-</li>
-
-</ul>
-
-<h3 id="description" name="description">Description</h3>
-
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;inherit: &quot;another_description&quot; INDEX;
-&nbsp;&nbsp;&nbsp;state: &quot;description_name&quot; INDEX;
-&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;max: -1 -1;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;step: 0 0;
-&nbsp;&nbsp;&nbsp;aspect: 1 1;
-
-&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>Every part can have one or more description blocks. Each description is used to define style and layout properties of a part in a given &quot;state&quot;.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">inherit [another description&#39;s name] [another description&#39;s index]</span><a class="anchor" id="description_inherit"></a>
-<p>Thee description inherits all the properties from the named description. The properties defined in this part override the inherited properties, reducing the amount of necessary code for simple state changes. Note: inheritance in Edje is single level only.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [another part&#39;s name]</span><a class="anchor" id="description_source"></a>
-<p>Causes the part to use another part&#39;s content as the content of this part. This works only with PROXY part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">state [name for the description] [index]</span><a class="anchor" id="description_state"></a>
-<p>Sets a name used to identify a description inside a given part. Multiple descriptions are used to declare different states of the same part, like &quot;clicked&quot; or &quot;invisible&quot;. All state declarations are also coupled with an index number between 0.0 and 1.0. All parts must have at least one description named &quot;default 0.0&quot;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">visible [0 or 1]</span><a class="anchor" id="description_visible"></a>
-<p>Takes a Boolean value specifying whether part is visible (1) or not (0). Non-visible parts do not emit signals. The default value is 1.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">limit [mode]</span><a class="anchor" id="description_limit"></a>
-<p>Emits a signal when the part size changes from zero or to a zero (<span style="font-family: Courier New,Courier,monospace;">limit,width,over</span>, <span style="font-family: Courier New,Courier,monospace;">limit,width,zero</span>). By default no signal are emitted. Valid values are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">WIDTH</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HEIGHT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [X axis] [Y axis]</span><a class="anchor" id="description_align"></a>
-<p>When the displayed object&#39;s size is smaller or bigger than its container, this property moves it relatively along both axis inside its container. &quot;0.0&quot; means left/top edges of the object touching container&#39;s respective ones, and &quot;1.0&quot; stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is &quot;0.5 0.5&quot;. For a more detailed explanation, see the <a href="edje_n.htm#align_size_hint">Align Size Hint</a>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">fixed [width, 0 or 1] [height, 0 or 1]</span><a class="anchor" id="description_fixed"></a>
-<p>Sets the minimum size calculation. See <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_calc()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_restricted_calc()</span>. This tells the min size calculation routine that this part does not change size in width or height (1 for it does not, 0 for it does), so the routine does not try to expand or contract the part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [width] [height] or SOURCE</span><a class="anchor" id="description_min"></a>
-<p>Sets the minimum size of the state. When min is defined to SOURCE, it looks at the original image size and enforces its minimal size to match at least the original one. The part must be an IMAGE or a GROUP part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">minmul [width multiplier] [height multiplier]</span><a class="anchor" id="description_minmul"></a>
-<p>A multiplier forcibly applied to whatever minimum size is only during minimum size calculation.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">max [width] [height] or SOURCE</span><a class="anchor" id="description_max"></a>
-<p>The maximum size of the state. A size of -1.0 means that it is ignored in one direction. When max is set to SOURCE, Edje enforces the part to be not more than the original image size. The part must be an IMAGE part.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">step [width] [height]</span><a class="anchor" id="description_step"></a>
-<p>Restricts resizing of each dimension to values divisible by its value. This causes the part to jump from value to value while resizing. The default value is &quot;0 0&quot; which disables stepping.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">aspect [min] [max]</span><a class="anchor" id="description_aspect"></a>
-<p>Normally width and height can be resized to any values independently. The aspect property forces the width to height ratio to be kept between the minimum and maximum set. For example, &quot;1.0 1.0&quot; increases the width a pixel for every pixel added to height. The default value is &quot;0.0 0.0&quot; which disables aspect. For a more detailed explanation, see the <a href="edje_n.htm#min_size_hint">Min Size Hint</a> .</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">aspect_preference [DIMENSION]</span><a class="anchor" id="description_aspect_preference"></a>
-<p>Set the dimensions to which the &quot;aspect&quot; property applies. Available options are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOURCE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-</ul>
-<p>For a more detailed explanation, see <a href="edje_n.htm#min_size_hint">Min Size Hint</a>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color_class [color class name]</span><a class="anchor" id="description_color_class"></a>
-<p>The part uses the color values of the named <span style="font-family: Courier New,Courier,monospace;">color_class</span>, these values can be overridden by the &quot;color&quot;, &quot;color2&quot; and &quot;color3&quot; properties.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color"></a>
-<p>Sets the main color to the specified values (between 0 and 255).</p>
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The textblock part is not affected by the color description. Set the color in the text style.</td>
-</tr>
-</tbody>
-</table> 
-
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color2"></a>
-<p>Sets the text shadow color to the specified values (0 to 255).</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color3"></a>
-<p>Sets the text outline color to the specified values (0 to 255).</p>
-</li>
-
-</ul>
-
-<h4 id="description_rel1_2" name="description_rel1_2">Rel1/rel2</h4>
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:     0   0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:    -1  -1;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The rel1 and rel2 blocks are used to define the position of each corner of the part&#39;s container. With rel1 being the left-up corner and rel2 being the right-down corner.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span><a class="anchor" id="description_rel1_2_relative"></a>
-<p>Moves the corner to a relative position inside the container of the relative &quot;to&quot; part. Values from 0.0 (0%, beginning) to 1.0 (100%, end) of each axis.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_rel1_2_offset"></a>
-<p>Affects the corner position a fixed number of pixels along each axis.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">to [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to"></a>
-<p>Positions the corner relatively to another part&#39;s container. Setting to &quot;&quot; resets this value for inherited parts.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">to_x [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to_x"></a>
-<p>Positions the corner relatively to the X axis of another part&#39;s container. This affects the first parameter of &quot;relative&quot;. Setting to &quot;&quot; resets this value for inherited parts.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">to_y [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to_y"></a>
-<p>Positions the corner relatively to the Y axis of another part&#39;s container. This affects the second parameter of &quot;relative&quot;. Setting to &quot;&quot; resets this value for inherited parts.</p>
-</li>
-
-</ul>
-
-<h4 id="description_image" name="description_image">Image</h4>
-
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;filename.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filename2.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filenameN.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:  left right top bottom;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle:  0/1/NONE/DEFAULT/SOLID;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">normal [image&#39;s filename]</span><a class="anchor" id="description_image_normal"></a>
-<p>Name of image to be used as previously declared in the images block. In an animation, this is the first and last image displayed. It is required in any image part</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">tween [image&#39;s filename]</span><a class="anchor" id="description_image_tween"></a>
-<p>Name of an image to be used in an animation loop, an image block can have none, one or multiple tween declarations. Images are displayed in the order they are listed, during the transition to the state they are declared in; the &quot;normal&quot; image is the final state.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span><a class="anchor" id="description_image_border"></a>
-<p>Sets the area (in pixels) of each side of the image is displayed as a fixed size border, from the side -&gt; inwards, preventing the corners from being changed on a resize.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">middle [mode]</span><a class="anchor" id="description_image_middle"></a>
-<p>If border is set, this value tells Edje if the rest of the image (not covered by the defined border) displayed or not or be assumed to be solid (without alpha). The default value is <span style="font-family: Courier New,Courier,monospace;">1/DEFAULT</span>. The available values are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">1</span> or <span style="font-family: Courier New,Courier,monospace;">DEFAULT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SOLID</span> (strip alpha from the image over the middle zone)</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span><a class="anchor" id="description_image_border_scale_by"></a>
-<p>If border scaling is enabled then normally the OUTPUT border sizes (e.g. if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always exactly 3 columns of output, or at scale 2.0 they are 6 columns, or 0.33 they merge into a single column). This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make higher resolution outputs possible by always using the highest resolution artwork and then runtime scaling it down. Value can be: 0.0 or bigger (0.0 or 1.0 to turn it off)</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">border_scale [0/1]</span><a class="anchor" id="description_image_border_scale"></a>
-<p>Tells Edje if the border is scaled by the object/global Edje scale factors.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">scale_hint [mode]</span><a class="anchor" id="description_image_scale_hint"></a>
-<p>Sets the evas image scale hint letting the engine more effectively save cached copies of the scaled image if it makes sense. Valid values are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DYNAMIC</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">STATIC</span></li>
-</ul>
-</li>
-
-</ul>
-
-<h5 id="description_image_fill" name="description_image_fill">Image.fill</h5>
-
-<pre class="prettyprint">
-image 
-{
-&nbsp;&nbsp;&nbsp;fill 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SCALE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 0-1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The fill method is an optional block that defines the way an IMAGE part is going to be displayed inside its container. It can be used for tiling (repeating the image) or displaying only part of an image. See <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> documentation for more details.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">smooth [0 or 1]</span><a class="anchor" id="description_image_fill_smooth"></a>
-<p>The smooth property takes a boolean value to decide if the image will be smoothed on scaling (1) or not (0). The default value is 1.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">spread</span><a class="anchor" id="description_image_fill_spread"></a>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">type [fill type]</span><a class="anchor" id="description_image_fill_type"></a>
-<p>Sets the image fill type. The part parameter &quot;min&quot; must be set, it is size of tiled image. If parameter &quot;max&quot; set tiled area has the size accordingly &quot;max&quot; values. SCALE is default type. Valid values are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">SCALE</span>, image is scaled accordingly the value of the parameters &quot;relative&quot; and &quot;offset&quot; from &quot;origin&quot; and &quot;size&quot; blocks.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TILE</span>, image is tiled accordingly parameters value &quot;relative&quot; and &quot;offset&quot; from &quot;origin&quot; and &quot;size&quot; blocks.</li>
-</ul>
-</li>
-
-</ul>
-
-<h6 id="description_image_fill_origin" name="description_image_fill_origin">Image.fill.origin</h6>
-
-<pre class="prettyprint">
-image 
-{
-&nbsp;&nbsp;&nbsp;fill 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The origin block is used to place the starting point, inside the displayed element, that is used to render the tile. By default, the origin is set at the element&#39;s left-up corner.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_origin_relative"></a>
-<p>Sets the starting point relatively to displayed element&#39;s content.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_origin_offset"></a>
-<p>Affects the starting point a fixed number of pixels along each axis.</p>
-</li>
-
-</ul>
-
-<h6 id="description_image_fill_size" name="description_image_fill_size">Image.fill.size</h6>
-
-<pre class="prettyprint">
-image 
-{
-&nbsp;&nbsp;&nbsp;fill 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The size block defines the tile size of the content that are displayed.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">relative [width] [height]</span><a class="anchor" id="description_image_fill_size_relative"></a>
-<p>Takes a pair of decimal values that represent the percentage of the original size of the element. For example, &quot;0.5 0.5&quot; represents half the size, while &quot;2.0 2.0&quot; represents the double. The default value is &quot;1.0 1.0&quot;.</p>
-</li>
-<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_size_offset"></a>
-<p>Affects the size of the tile a fixed number of pixels along each axis.</p>
-</li>
-
-</ul>
-
-<h4 id="description_text" name="description_text">Text</h4>
-
-<pre class="prettyprint">
-text 
-{
-&nbsp;&nbsp;&nbsp;text: &quot;some string of text to display&quot;;
-&nbsp;&nbsp;&nbsp;font: &quot;font_name&quot;;
-&nbsp;&nbsp;&nbsp;size: SIZE;
-&nbsp;&nbsp;&nbsp;text_class: &quot;class_name&quot;;
-&nbsp;&nbsp;&nbsp;fit: horizontal vertical;
-&nbsp;&nbsp;&nbsp;min: horizontal vertical;
-&nbsp;&nbsp;&nbsp;max: horizontal vertical;
-&nbsp;&nbsp;&nbsp;align: X-axis Y-axis;
-&nbsp;&nbsp;&nbsp;source: &quot;part_name&quot;;
-&nbsp;&nbsp;&nbsp;text_source: &quot;text_part_name&quot;;
-&nbsp;&nbsp;&nbsp;style: &quot;stylename&quot;;
-}
-</pre>
-
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">text [a string of text, or nothing]</span><a class="anchor" id="description_text_text"></a>
-<p>Sets the default content of a text part, normally the application is the one changing its value.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">text_class [text class name]</span><a class="anchor" id="description_text_text_class"></a>
-<p>Similar to <span style="font-family: Courier New,Courier,monospace;">color_class</span>, this is the name used by the application to alter the font family and size at runtime.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">font [font alias]</span><a class="anchor" id="description_text_font"></a>
-<p>This sets the font family to one of the aliases set up in the &quot;fonts&quot; block. Can be overridden by the application.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">style [the style name]</span><a class="anchor" id="description_text_style"></a>
-<p>Causes the part to use the default style and tags defined in the &quot;style&quot; block with the specified name.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">repch [the replacement character string]</span><a class="anchor" id="description_text_repch"></a>
-<p>If this is a textblock and is in PASSWORD mode this string is used to replace every character to hide the details of the entry. Normally * is used, but you can use anything you like.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">size [font size in points (pt)]</span><a class="anchor" id="description_text_size"></a>
-<p>Sets the default font size for the text part. Can be overridden by the application.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">size_range [font min size in points (pt)] [font max size in points (pt)]</span><a class="anchor" id="description_text_size_range"></a>
-<p>Sets the allowed font size for the text part. Setting min and max to 0 means that sizing is not restricted. This is also the default value.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">fit [horizontal] [vertical]</span><a class="anchor" id="description_text_fit"></a>
-<p>When any of the parameters is set to 1 Edje resizes the text for it to fit in its container. Both are disabled by default.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_text_min"></a>
-<p>When any of the parameters is enabled (1) it forces the minimum size of the container to be equal to the minimum size of the text. The default value is &quot;0 0&quot;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">max [horizontal] [vertical]</span><a class="anchor" id="description_text_max"></a>
-<p>When any of the parameters is enabled (1) it forces the maximum size of the container to be equal to the maximum size of the text. The default value is &quot;0 0&quot;.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_text_align"></a>
-<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [another TEXT part&#39;s name]</span><a class="anchor" id="description_text_source"></a>
-<p>Causes the part to use the text properties (like font and size) of another part and update them as they change.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">text_source [another TEXT part&#39;s name]</span><a class="anchor" id="description_text_text_source"></a>
-<p>Causes the part to display the text content of another part and update them as they change.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">ellipsis [point of balance]</span><a class="anchor" id="description_text_ellipsis"></a>
-<p>Balances the text in a relative point from 0.0 to 1.0, this point is the last section of the string to be cut out in case of a resize that is smaller than the text itself. The default value is 0.0.</p>
-</li>
-
-</ul>
-
-
-<h4 id="description_box" name="description_box">Box</h4>
-
-<pre class="prettyprint">
-box 
-{
-&nbsp;&nbsp;&nbsp;layout: &quot;vertical&quot;;
-&nbsp;&nbsp;&nbsp;padding: 0 2;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;min: 0 0;
-}
-</pre>
-
-<p>A box block can contain other objects and display them in different layouts, any of the predefined set, or a custom one, set by the application.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">layout [primary layout] (fallback layout)</span><a class="anchor" id="description_box_layout"></a>
-<p>Sets the layout for the box:</p>
-<ul>
-<li>horizontal (default)</li>
-<li>vertical</li>
-<li>horizontal_homogeneous</li>
-<li>vertical_homogeneous</li>
-<li>horizontal_max (homogeneous to the max sized child)</li>
-<li>vertical_max</li>
-<li>horizontal_flow</li>
-<li>vertical_flow</li>
-<li>stack</li>
-<li><span style="font-family: Courier New,Courier,monospace;">some_other_custom_layout_set_by_the_application</span>
-<p>Set a custom layout as a fallback. For more information, see <span style="font-family: Courier New,Courier,monospace;">edje_box_layout_register()</span>. If an unregistered layout is used, it defaults to horizontal.</p></li>
-
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_box_align"></a>
-<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span><a class="anchor" id="description_box_padding"></a>
-<p>Sets the space between cells in pixels.  The default value is 0 0.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_box_min"></a>
-<p>When any of the parameters is enabled (1) it forces the minimum size of the box to be equal to the minimum size of the items. The default value is 0 0.</p>
-</li>
-
-</ul>
-
-<h4 id="description_table" name="description_table">Table</h4>
-
-<pre class="prettyprint">
-table 
-{
-&nbsp;&nbsp;&nbsp;homogeneous: TABLE;
-&nbsp;&nbsp;&nbsp;padding: 0 2;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;min: 0 0;
-}
-</pre>
-
-<p>A table block can contain other objects packed in multiple columns and rows, and each item can span across more than one column and/or row.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">homogeneous [homogeneous mode]</span><a class="anchor" id="description_table_homogeneous"></a>
-<p>Sets the homogeneous mode for the table:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: default</li>
-<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: available space is evenly divided between children (which overflows onto other children if too little space is available)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ITEM</span>: size of each item is the largest minimal size of all the items</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_table_align"></a>
-<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span><a class="anchor" id="description_table_padding"></a>
-<p>Sets the space between cells in pixels. The default value is 0 0.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_table_min"></a>
-<p>When any of the parameters is enabled (1), it forces the minimum size of the table to be equal to the minimum size of the items. The default value is 0 0.</p>
-</li>
-
-</ul>
-
-<h4 id="description_map" name="description_map">Map</h4>
-
-<pre class="prettyprint">
-map 
-{
-&nbsp;&nbsp;&nbsp;perspective: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;light: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;on: 1;
-&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;backface_cull: 1;
-&nbsp;&nbsp;&nbsp;alpha: 1;
-
-&nbsp;&nbsp;&nbsp;rotation 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">perspective [another part&#39;s name]</span><a class="anchor" id="description_map_perspective"></a>
-<p>This sets the part that is used as the perspective point for giving a part a 3D look. The perspective point must have a perspective section that provides zplane and focal properties. The center of this part is used as the focal point, thus size, color and visibility are not relevant, just center point, zplane and focal are used. This also implicitly enables perspective transforms.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">light [another part&#39;s name]</span><a class="anchor" id="description_map_light"></a>
-<p>This sets the part that is used as the light for calculating the brightness (based on how directly the  part&#39;s surface is facing the light source point). Like the perspective point part, the center point is used and zplane is used for the z position (0 being the zero-plane where all 2D objects normally live) and positive values being further away into the distance. The light part color is used as the light color (alpha not used for light color). The color2 color is used for the ambient lighting when calculating brightness (alpha also not used).</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">on [1 or 0]</span><a class="anchor" id="description_map_on"></a>
-<p>This enables mapping for the part. Default is 0.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">smooth [1 or 0]</span><a class="anchor" id="description_map_smooth"></a>
-<p>This enables smooth map rendering. This may be linear interpolation, anisotropic filtering or anything the engine decides is smooth. This is a best-effort hint and may not produce precisely the same results in all engines and situations. The default value is 1.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">alpha [1 or 0]</span><a class="anchor" id="description_map_alpha"></a>
-<p>This enables alpha channel when map rendering. The default value is 1.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">backface_cull [1 or 0]</span><a class="anchor" id="description_map_backface_cull"></a>
-<p>This enables backface culling (when the rotated part that normally faces the camera is facing away after being rotated etc.). This means that the object are hidden when backface is culled.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">perspective_on [1 or 0]</span><a class="anchor" id="description_map_perspective_on"></a>
-<p>This enables perspective when rotating even without a perspective point object. This uses perspective set for the object itself or for the canvas as a whole as the global perspective with <span style="font-family: Courier New,Courier,monospace;">edje_perspective_set()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_perspective_global_set()</span>.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">color [point] [red] [green] [blue] [alpha]</span><a class="anchor" id="description_map_color"></a>
-<p>This sets the color of a vertex in the map. Colors are linearly interpolated between vertex points through the map. The default color of a vertex in a map is white solid (255, 255, 255, 255) which means it has no affect on modifying the part pixels. Currently only four points are supported: 0 - Left-Top point of a part. 1 - Right-Top point of a part. 2 - Left-Bottom point of a part. 3 - Right-Bottom point of a part.</p>
-</li>
-
-</ul>
-
-<h5 id="description_map_rotation" name="description_map_rotation">Map.rotation</h5>
-
-<pre class="prettyprint">
-rotation 
-{
-&nbsp;&nbsp;&nbsp;center: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;x: 45.0;
-&nbsp;&nbsp;&nbsp;y: 45.0;
-&nbsp;&nbsp;&nbsp;z: 45.0;
-}
-</pre>
-
-<p>Rotates the part, optionally with the center on another part.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">center [another part&#39;s name]</span><a class="anchor" id="description_map_rotation_center"></a>
-<p>This sets the part that is used as the center of rotation when rotating the part with this description. The part&#39;s center point is used as the rotation center when applying rotation around the x, y and z axes. If no center is given, the parts original center itself is used for the rotation center.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">x [X degrees]</span><a class="anchor" id="description_map_rotation_x"></a>
-<p>This sets the rotation around the x axis of the part considering the center set. The value is given in degrees.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">y [Y degrees]</span><a class="anchor" id="description_map_rotation_y"></a>
-<p>This sets the rotation around the y axis of the part considering the center set. The value is given in degrees.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">z [Z degrees]</span><a class="anchor" id="description_map_rotation_z"></a>
-<p>This sets the rotation around the z axis of the part considering the center set. The value is given in degrees.</p>
-</li>
-
-</ul>
-
-<h5 id="description_map_perspective2" name="description_map_perspective2">Perspective</h5>
-
-<pre class="prettyprint">
-perspective 
-{
-&nbsp;&nbsp;&nbsp;zplane: 0;
-&nbsp;&nbsp;&nbsp;focal: 1000;
-}
-</pre>
-
-<p>Adds focal and plane perspective to the part. Active if <span style="font-family: Courier New,Courier,monospace;">perspective_on</span> is true. Must be provided if the part is being used by other part as it is perspective target.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">zplane [unscaled Z value]</span><a class="anchor" id="description_map_perspective_zplane"></a>
-<p>This sets the z value that is not scaled. Normally this is 0 as that is the z distance.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">focal [distance]</span><a class="anchor" id="description_map_perspective_focal"></a>
-<p>This sets the distance from the focal z plane (zplane) and the camera - i.e. equating to focal length of the camera</p>
-</li>
-
-</ul>
-
-<h5 id="description_map_link" name="description_map_link">Link</h5>
-
-<pre class="prettyprint">
-link 
-{
-&nbsp;&nbsp;&nbsp;base: &quot;edje,signal&quot; &quot;edje&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-&nbsp;&nbsp;&nbsp;in: 0.5 0.1;
-&nbsp;&nbsp;&nbsp;after: &quot;some_program&quot;;
-}
-</pre>
-
-<p>The link block can be used to create transitions to the enclosing part description state. The result of the above block is identical to creating a program with </p>
-
-
-<pre class="prettyprint">
-action: STATE_SET &quot;default&quot;";
-signal: &quot;edje,signal&quot;;
-source: &quot;edje&quot;;
-</pre> 
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">base [signal] [source]</span><a class="anchor" id="description_map_link_base"></a>
-<p>Defines the signal and source which triggers the transition to this state. The source parameter is optional here and is filled with the current group&#39;s default value if it is not provided. </p>
-</li>
-</ul>
-  
-<h2 id="program1" name="program1">Program</h2>
-
-<pre class="prettyprint">
-<a href="#program">program</a>
-{
-&nbsp;&nbsp;&nbsp;// name of the program
-&nbsp;&nbsp;&nbsp;<a href="#program_name">name</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;// signals which trigger the program
-&nbsp;&nbsp;&nbsp;<a href="#signal">signal</a>: &quot;signalname&quot;;
-&nbsp;&nbsp;&nbsp;// filter incoming signals depending on the sender name
-&nbsp;&nbsp;&nbsp;<a href="#program_source">source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// filter incoming signals depending on the part&#39;s state
-&nbsp;&nbsp;&nbsp;<a href="#filter">filter</a>: &quot;partname&quot; &quot;statename&quot;;
-&nbsp;&nbsp;&nbsp;// delay the program by X seconds plus a random time between 0 and Y
-&nbsp;&nbsp;&nbsp;<a href="#in">in</a>: 0.3 0.0;
-&nbsp;&nbsp;&nbsp;// action to perform
-&nbsp;&nbsp;&nbsp;<a href="#action">action</a>: STATE_SET &quot;statename&quot; state_value;
-&nbsp;&nbsp;&nbsp;// if action is STATE_SET, define a transition from the current to the target state
-&nbsp;&nbsp;&nbsp;<a href="#transition">transition</a>: LINEAR 0.5;
-&nbsp;&nbsp;&nbsp;// if action is SIGNAL_EMIT, the name of the part which will receive the signal
-&nbsp;&nbsp;&nbsp;<a href="#target">target</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;// run another program after the current one is done
-&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;anotherprogram&quot;;
-}
-</pre>
-
-<h3 id="program" name="program">Program</h3>
-
-<p>Programs define how your interface reacts to events. Programs can change the state of parts or trigger other events.</p>
-
-<ul>
-
-<li><span style="font-family: Courier New,Courier,monospace;">name [program name]</span><a class="anchor" id="program_name"></a>
-<p>Symbolic name of program as a unique identifier.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">signal [signal name]</span><a class="anchor" id="signal"></a>
-<p>Specifies signals that cause the program to run. The signal received must match the specified source to run. There may be several signals, but only one signal keyword per program can be used. Also, there are some predefined signals for touch event handling. The predefined signals are:</p>
-<ul>
-<li>&quot;hold,on&quot;: Holding on the mouse event matching the source that starts the program.</li>
-<li>&quot;hold,off&quot;: Holding off the mouse event matching the source that starts the program.</li>
-<li>&quot;focus,part,in&quot;: Focusing in the matching source that starts the program.</li>
-<li>&quot;focus,part,out&quot;: Focusing out of the matching source that starts the program.</li>
-<li>&quot;mouse,in&quot;: Moving the mouse into the matching source that starts the program.</li>
-<li>&quot;mouse,out&quot;: Moving the mouse out of the matching source that starts the program.</li>
-<li>&quot;mouse,move&quot;: Moving the mouse in the matching source that starts the program.</li>
-<li>&quot;mouse,down,*&quot;: Pressing the mouse button in the matching source that starts the program.</li>
-<li>&quot;mouse,up,*&quot;: Releasing the mouse button in the matching source that starts the program.</li>
-<li>&quot;mouse,clicked,*&quot;: Clicking any mouse button in the matching source that starts the program.</li>
-<li>&quot;mouse,wheel,0,*&quot;: Moving the mouse wheel in the matching source that starts the program. A positive number moves up and a negative number moves down.</li>
-<li>&quot;drag,start&quot;: Starting a drag of the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
-<li>&quot;drag,stop&quot;: Stopping a drag of the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
-<li>&quot;drag&quot;: Dragging the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">source [source name]</span><a class="anchor" id="program_source"></a>
-<p>Source of accepted signal. There may be several signals, but only one source keyword per program can be used. For example, source: &quot;button-*&quot;; (signals from any part or program named &quot;button-*&quot; are accepted).</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">filter [part] [state]</span><a class="anchor" id="filter"></a>
-<p>Filter signals to be only accepted if the part is in state named <span style="font-family: Courier New,Courier,monospace;">[state]</span>. Only one filter per program can be used. If <span style="font-family: Courier New,Courier,monospace;">[state]</span> is not given, the source of the event is used instead.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">in [from] [range]</span><a class="anchor" id="in"></a>
-<p>Wait <span style="font-family: Courier New,Courier,monospace;">[from]</span> seconds before executing the program and add a random number of seconds (from 0 to <span style="font-family: Courier New,Courier,monospace;">[range]</span>) to the total waiting time.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">action [type] (param1) (param2) (param3) (param4)</span><a class="anchor" id="action"></a>
-<p> Action to be performed by the program. Valid actions (only one can be specified) are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">STATE_SET</span>: Set &quot;target part&quot; state as &quot;target state&quot;</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>: Stop the ongoing transition.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>: Emit a signal to the application level. The application can register a callback for handling actions based on the EDC state.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_SET</span>: Set a value for the dragable part (x, y values).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_STEP</span>: Set a step for the dragable part (x, y values).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_PAGE</span>: Set a page for the dragable part (x, y values).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">FOCUS_SET</span>: Set the focus to the target group.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE &quot;sample name&quot; speed (channel)</span>: Play a music sample clip.
-
-<p><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE</span>&#39;s (optional) channel can be one of:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EFFECT/FX</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">BACKGROUND/BG</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">MUSIC/MUS</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">FOREGROUND/FG</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">INTERFACE/UI</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">INPUT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ALERT</span></li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_TONE &quot;tone name&quot; duration_in_seconds (Range 0.1 to 10.0)</span>: Play a predefined tone of a specific duration. </li>
-<li><span style="font-family: Courier New,Courier,monospace;">PLAY_VIBRATION &quot;sample name&quot; repeat (repeat count)</span></li>
-</ul></li>
-
-
-<li><span style="font-family: Courier New,Courier,monospace;">transition [type] [length] (interp val 1) (interp val 2) (option)</span><a class="anchor" id="transition"></a>
-<p>Defines how transitions occur using <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action. <span style="font-family: Courier New,Courier,monospace;">[type]</span> is the style of the transition and <span style="font-family: Courier New,Courier,monospace;">[length]</span> is a double specifying the number of seconds in which to preform the transition. Valid types are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span></li>
-    <li><span style="font-family: Courier New,Courier,monospace;">SPRING</span></li>
-</ul>
-
-<p><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span>, <span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> and <span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> need the extra optional &quot;interp val 1&quot; to determine the &quot;factor&quot; of curviness. 1.0 is the same as their non-factor counterparts and 0.0 is equal to linear. Numbers higher than 1.0 make the curve angles steeper with a more pronounced curve point.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">DIVIS</span>, <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> and <span style="font-family: Courier New,Courier,monospace;">SPRING</span> also require &quot;interp val 2&quot; in addition to &quot;interp val 1&quot;.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> as the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, etc.). <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is interpreted as an integer factor defining how much the value swings outside the gradient before going back to the final resting spot at the end. 0.0 for <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is equivalent to linear interpolation. Note that <span style="font-family: Courier New,Courier,monospace;">DIVIS</span> can exceed 1.0.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> as the number of bounces (so it is rounded down to the nearest integer value), with <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> determining how much the bounce decays; 0.0 gives linear decay per bounce and higher values give much more decay.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">SPRING</span> is similar to bounce; <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> specifies the number of spring swings and <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> specifies the decay, but it can exceed 1.0 on the outer swings.</p>
-
-<p>Valid options are:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">CURRENT</span> causes the object to move from its current position. Can be used as the last parameter of any transition type.</li>
-</ul>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">target [target]</span><a class="anchor" id="target"></a>
-<p>Program or part on which the specified action acts.</p>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace;">after [after]</span><a class="anchor" id="after"></a>
-<p>Specifies a program that is run after the current program completes. The source and signal parameters of a program run as an <span style="font-family: Courier New,Courier,monospace;">after</span> are ignored. Multiple <span style="font-family: Courier New,Courier,monospace;">after</span> statements can be specified per program.</p>
-</li>
-
-</ul>
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/edje_n.htm b/org.tizen.guides/html/native/ui/edje_n.htm
deleted file mode 100644 (file)
index 47cdaf7..0000000
--- a/org.tizen.guides/html/native/ui/edje_n.htm
+++ /dev/null
@@ -1,774 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Edje</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">        
-                       <li><a href="#Concepts">Basic Concepts</a></li>
-                       <li><a href="#Scalability">Scaling Objects</a></li>
-                       <li><a href="#Swallow">Edje Swallow</a></li>
-                       <li><a href="#Layout">ELM Layout</a></li>
-                       <li><a href="#Reference">EDC Reference</a></li>
-                       <li><a href="#Howtos">Quick How-tos</a></li>
-               </ul>
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>         
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>             
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Edje</h1> 
-
-   
-   
-<p>This programming guide shows you how to write an EDC file that can be used to theme a Tizen application. It describes concepts about parts positioning and resizing. It also explains part animations that can be done through programs.</p>
-
-<h2 id="Concepts" name="Concepts">Basic Concepts</h2>
-
-<h3>What is an EDC File?</h3>
-
-<p>An EDC file stands for Edje data collection. It is a text file that contains special code format describing the position, size, and other parameters of graphical elements that compose the visual aspect of your application. In addition to graphical elements, it can also handle sounds.</p>
-
-<p>The syntax for the Edje data collection files follows a simple structure of &quot;blocks { .. }&quot; that can contain &quot;properties: ..&quot;, more blocks, or both.</p>
-
-<p>An EDC file has the &quot;.edc&quot; extension.</p>
-
-<h3>Compiling EDC File</h3>
-<p>EDC file needs to be compiled into a &quot;.edj&quot; file using Edje library tools. After compiling the &quot;.edj&quot; file can be used by a native Tizen application.</p>
-
-<p>Here is an example about compiling <span style="font-family: Courier New,Courier,monospace;">helloworld.edc</span> to &quot;.edj&quot; file using <span style="font-family: Courier New,Courier,monospace;">edje_cc tool</span>: </p>
-
-<pre class="prettyprint">
-$ edje_cc helloworld.edc
-</pre>
-
-<p>This command creates a <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file.</p>
-
-<p>An EDC file can use external files such as sounds, images, or fonts. The path to these resources are passed to the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool so that they are included in the final &quot;.edj&quot; file. </p>
-
-<pre class="prettyprint">
-$ edje_cc -sd $SOUNDS_DIR -fd $FONTS_DIR -id $IMAGES_DIR
-</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace;">SOUNDS_DIR</span>, <span style="font-family: Courier New,Courier,monospace;">FONTS_DIR</span>, and <span style="font-family: Courier New,Courier,monospace;">IMAGES_DIR</span> are the paths for sounds, fonts, and images resources respectively.</p>
-
-<p>Tizen SDK calls <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> during the project building if it finds an EDC source file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> directory.</p>
-
-<pre class="prettyprint">
-Building file: ../res/edje/helloworld.edc
-Invoking: EDC Resource Compiler
-edje_cc -sd ../edje/sounds -fd ../edje/fonts -id ../edje/images ../res/edje/helloworld.edc ../res/edje/helloworld.edj
-</pre>
-
-
-<p>The Tizen SDK compilation log extract shows you that if your EDC file uses pictures, they must be copied to the <span style="font-family: Courier New,Courier,monospace;">./edje/images</span> directory. Fonts and sounds go to the <span style="font-family: Courier New,Courier,monospace;">./edje/fonts</span> and <span style="font-family: Courier New,Courier,monospace;">./edje/sounds</span> directory respectively. The SDK builds the <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> folder.</p>
-
-<h3 id="simple_edc_file" name="simple_edc_file">Writing Simple EDC File </h3>
-<p>The code example below shows you the structure of an EDC file. It is a collection of groups that contain parts and programs.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_group&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>Groups are identified with a name, parts correspond to the graphical elements. Each one of them can have several states that describe a specific position, size, and visual aspect. Programs contain the program code, such as interaction with the main application through signals. Also animations are defined here (changing a part state using an animated transition).</p>
-
-<p>The description field is where the state of a part is written.</p>
-
-<pre class="prettyprint">
-part
-{
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state1&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>As an example, here is a simple EDC file that contains only one part and one program. The part is a rectangle with blue state and red state, the program changes the state from blue to red when user clicks on the rectangle.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;example&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// create the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the type to RECT (rectangle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// default state (blue color)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// blue color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// second state (red color)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// red color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// create a program
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// program is triggered on mouse click
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the red state of the &quot;rectangle&quot; part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>A program is triggered when receiving a signal from a specific source (here all the sources are taken into account). When launched, it does the action (changing the state of a part) on the target (the rectangle).</p>
-
-<h3>Animating Theme Using Programs</h3>
-
-<p>The previous example showed how to change the state of a part. It is also possible to use the transition parameter to create an animation between the 2 states. You can specify a transition type (ACCELERATE, DECELERATE, SINUSOIDAL, LINEAR, ...) and length (in seconds) of the transition.</p>
-
-<p>The following code example animates the previous state change using a linear transition of 2 seconds.</p>
-
-<pre class="prettyprint">
-programs 
-{
-&nbsp;&nbsp;&nbsp;program 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 2.0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>Edje calculates all frames needed for the animation. The result is a smooth animation between the two states and it takes 2 seconds.</p>
-
-<h3>Positioning Basic Parts</h3>
-
-<p>Size of a part (in pixels) is set using the min and max parameters. The following code example sets the minimum and maximum size of the rectangle part to 200x200 px.</p>
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;blue&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the size to 200x200
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// blue color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>Position of the parts is defined in the <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks. <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks are used to define respectively the upper-left corner and the lower-right corner of the part. Position can be defined relatively to other parts (with the relative parameter) as an offset (offset parameter). When using relative positioning, the <span style="font-family: Courier New,Courier,monospace;">to</span>, <span style="font-family: Courier New,Courier,monospace;">to_x</span> and <span style="font-family: Courier New,Courier,monospace;">to_y</span> parameters are used to define to which part the relative positioning is done. If nothing else is specified, the positioning is relative to the parent&#39;s part.</p>
-
-<p>To demonstrate the relative positioning, here is a code example that creates another part and positions it under the first part (the upper-left corner of the new part will start at the lower-left corner of the previous one).</p>
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle2&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;green&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the size to 200x200
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// green color
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the position
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// rel1 is relative to &quot;rectangle&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// rel2 is relative to the parent
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The <span style="font-family: Courier New,Courier,monospace;">align</span> parameter defines how the parts align themselves in the main window if their size is smaller than the main window. If nothing is specified, the parts are aligned in the center of the window.</td>
-</tr>
-</tbody>
-</table> 
-
-<h3>Adding Offset to Relative Positioning</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> structures also support offset which is a complement to the relative positioning: the corners are first placed according to their relative parameters and then adjusted using the offsets.</p>
-
-<p>The picture below shows the pixel positions for a 4x4 rectangle. The indices start in the top-left corner at (0, 0) increase to the right and to the bottom. Since the indices have started at 0, the 4th pixel has an index of 3.</p>
-
-<p>Therefore, in order to create a 2x2 blue rectangle centered inside that green square, the top-left corner has to be (1, 1) and the bottom-right one has to be (2, 2).</p>
-
-<p class="figure">Figure: Offset indices</p> 
-<p align="center"><img alt="Offset indices" src="../../images/rel1_rel2_offsets.png" /></p> 
-
-<p>Edje needs the following things defined:</p>
-<ul>
-<li>the part coordinates depending on the size and position of the green rectangle</li>
-<li>the relative component of positions is the same: the top-left corner of the green rectangle</li>
-<li>the top-left pixel is (1, 1) and the bottom-right one is (2, 2)</li>
-</ul>
-
-<p>The following code example defines these things: </p>
-
-<pre class="prettyprint">
-name: &quot;blue rectangle&quot;;
-
-rel1.to: &quot;green rectangle&quot;;
-rel1.relative: 0 0;
-rel1.offset: 1 1;
-
-rel2.to: &quot;green rectangle&quot;;
-rel2.relative: 0 0;
-rel2.offset: 2 2;
-</pre>
-
-<p>For most tasks, relative positioning is simpler than using offsets. Offsets are usually left for fine-tuning and creating borders. </p>
-
-<p>The example below is similar to the previous one but uses relative positioning instead of offsets to achieve an equivalent at 4x4 but could scale to larger sizes. </p>
-
-<p>The blue square starts at 25% of the green square (both vertically and horizontally) and ends at 75% of it (again, both vertically and horizontally). </p>
-
-<p>Just like in the previous example, the blue rectangle is named and Edje is told what the object of reference is: </p>
-
-<pre class="prettyprint">
-name: &quot;blue rectangle&quot;;
-rel1.to: &quot;green rectangle&quot;;
-rel2.to: &quot;green rectangle&quot;;
-</pre>
-
-<p>The image below shows how to refer pixels using relative positioning when the offsets are (0, 0).</p>
-
-<p class="figure">Figure: Relative positioning</p> 
-<p align="center"><img alt="Relative positioning" src="../../images/rel1_rel2_offsets_and_relative.png" /></p> 
-
-<p>Note the addressing of pixels: (0, 0) is addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0 0; offset 0 0;</span> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75; offset: 0 0;</span> is at (3, 3) and not (2, 2)!.</p>
-
-<p>This comes from a design choice in Evas and Edje which favor simplicity. In the examples shown in this guide, there are 4 pixels and therefore when the <span style="font-family: Courier New,Courier,monospace;">[0; 1)</span> range is divided in 4, the result is <span style="font-family: Courier New,Courier,monospace;">[0; 0.25), [0.25; 0.50), [0.50; 0.75), [0.75; 0.100)</span>. With Edje, the value used to refer to each segment is the left bound and therefore, 0.75 refers to <span style="font-family: Courier New,Courier,monospace;">[0.75; 0.100)</span>, i.e. the bottom-right pixel of the green rectangle and not the 3/4th one.</p>
-
-<p>The way to refer to the pixel right before is to set the <span style="font-family: Courier New,Courier,monospace;">rel2</span> bound to <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75;</span>, as would be expressed naturally, and <span style="font-family: Courier New,Courier,monospace;">offset: -1 -1;</span>. This can also be understood as extending the rectangle up to 75% of its parent with the upper bound excluded (as shown in the <span style="font-family: Courier New,Courier,monospace;">[0.50; 0.75)</span>).</p>
-
-<p>Since <span style="font-family: Courier New,Courier,monospace;">-1 -1</span> is the most common offset wanted for <span style="font-family: Courier New,Courier,monospace;">rel2</span>, it is the default value; i.e. the default behavior is practical.</p>
-
-<h3>Calculating Edje Object Total Size</h3>
-
-<p>When the EDC file is composed of a lot of parts, Edje calculates the size of the global Edje object, by taking all the parts and their parameters into account. Some parameters have an role in this calculation and affect the global size:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">min</span> and <span style="font-family: Courier New,Courier,monospace;">max</span>: these define the minimum and the maximum size of a part.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span>: these specify the relative position of a part.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">align</span>: this relates to the alignment of the part in the parent&#39;s object.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">fixed</span>: this defines if the part has a fixed size.</li>
-</ul>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note"><span style="font-family: Courier New,Courier,monospace;">fixed</span> parameter can only be used on <span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span> type parts. Setting this parameter to <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1</span> will not take into account the part for the calculation of the global size.</td>
-</tr>
-</tbody>
-</table> 
-
-<h3>Using Edje Size Hints</h3>
-
-<p>Any <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> can have hints, so that the object knows how to properly position and resize. Edje uses these hints when swallowing an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> to position and resize it in the <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part of the EDC file.</p>
-
-<p>Size hints are not a size enforcement, they just tell the parent object the desired size for this object. Then, the parent tries to get as close as possible to the hint.</p>
-
-<p>Hints are set in an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> using the <span style="font-family: Courier New,Courier,monospace;">evas_object_size_hint_*()</span> functions.</p>
-
-<h4 id="min_size_hint" name="min_size_hint">Min Size Hint</h4>
-
-<p>This sets the hints for the object&#39;s minimum size, given in pixels.</p>
-
-<p>Here the horizontal and vertical min size hints of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> are set to 0 pixels.</p>
-
-<pre class="prettyprint">
-Evas_Object *object;
-evas_object_size_hint_min_set(object, 0, 0);
-</pre>
-
-<h4>Max Size Hint</h4>
-
-<p>This sets the hints for the object&#39;s maximum size, given in pixels.</p>
-
-<p>Here the horizontal and vertical max size hints of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> are set to 200 pixels.</p>
-<pre class="prettyprint">evas_object_size_hint_max_set(object, 200, 200);</pre>
-
-<h4>Request Size Hint</h4>
-
-<p>This sets the hints for the object&#39;s optimum size.</p>
-
-<p>The following code example defines that the optimum size of a part is 200x200 pixels.</p>
-
-<pre class="prettyprint">
-evas_object_size_hint_request_set(object, 200, 200);
-</pre>
-
-<h4>Aspect Size Hint</h4>
-
-<p>This sets the hints for the object&#39;s aspect ratio. Available aspect size hints are:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_NONE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_HORIZONTAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_VERTICAL</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span></li>
-</ul>
-
-<p>The other parameters are aspect width and height ratio. These integers are used to calculate the proportions of the object. If aspect ratio terms are null, the object&#39;s container ignores the aspect and scale of the object and occupies the whole available area.</p>
-
-<p class="figure">Figure: Aspect control</p> 
-<p align="center"><img alt="Aspect control" src="../../images/aspect-control-none.png" /></p> 
- 
-<p align="center"><img alt="Aspect control" src="../../images/aspect-control-horizontal.png" /></p> 
-
-<p align="center"><img alt="Aspect control" src="../../images/aspect-control-both.png" /></p> 
-
-<p>The following code example sets the aspect size hint to <span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span> with a width of 100 and a height of 200. So aspect ratio should be 1/2.</p>
-
-<pre class="prettyprint">
-evas_object_size_hint_aspect_set(object, EVAS_ASPECT_CONTROL_BOTH, 100, 200);
-</pre>
-
-<h4 id="align_size_hint" name="align_size_hint">Align Size Hint</h4>
-<p>This sets the hints for the object&#39;s alignment. This hint is used when the object size is smaller than its parent&#39;s. The special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter uses maximum size hints with higher priority, if they are set. Also, any padding hints set on objects are added up to the alignment space on the final scene composition.</p>
-
-<p class="figure">Figure: Alignment</p> 
-<p align="center"><img alt="Alignment" src="../../images/align_hints.png" /></p> 
-
-<p>In the code below, the special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter is used.</p>
-
-<pre class="prettyprint">
-evas_object_size_hint_align_set(object, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre>
-
-<h4>Weight Size Hint</h4>
-
-<p>This sets the hints for the object&#39;s weight. The weight tells to a container object how the given child is resized. Using <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_EXPAND</span> parameter asks to expand the child object&#39;s dimensions to fit the container&#39;s own.</p> 
-
-<p>When several child objects have different weights in a container object, the container distributes the space it has to layout them by those factors. Most weighted children get larger in this process than the least ones.</p> 
-
-<p>Here the container is asked to expand the object in both directions.</p> 
-
-<pre class="prettyprint">
-evas_object_size_hint_weight_set(object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-</pre>
-
-<h4>Padding Size Hint</h4>
-
-<p>This sets the hints for the object&#39;s padding space. Padding is extra space an object takes on each of its delimiting rectangle sides. The padding space is rendered transparent. Four hints can be defined, for the left, right, top, and bottom padding.</p>
-
-<p class="figure">Figure: Padding</p> 
-<p align="center"><img alt="Padding" src="../../images/padding-hints.png" /></p> 
-
-<p>Here the padding hints are set to 5 pixels on each side of the object.</p>
-
-<pre class="prettyprint">
-evas_object_size_hint_padding_set(object, 5, 5, 5, 5);
-</pre>
-
-<h2 id="Scalability" name="Scalability">Scaling Objects</h2>
-
-<h3>Part Scaling</h3>
-
-<p>When scaling an Edje object, only the parts that are declared scalable in the EDC file follow the scale request. This is done using the &quot;scale&quot; parameter.</p>
-
-<p>As an example, the previous &quot;rectangle2&quot; part is set as scalable, so that it is scaled when the Edje object is scaled.</p>
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle2&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;green&quot; 0.0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3>Using Image Set</h3>
-
-<p>When using images in the Edje EDC file, image file names must be listed in a images block, so that Edje can use them in the theme. In this block, the compression level and compression method of the image can also be defined.</p>
-
-<p>Here is an example of an images block that lists two image files.</p>
-
-<pre class="prettyprint">
-images 
-{
-&nbsp;&nbsp;&nbsp;image: &quot;image1.jpg&quot; COMP;
-&nbsp;&nbsp;&nbsp;image: &quot;image2.png&quot; LOSSY 99;
-}
-</pre>
-
-<p>As the devicescan have different screen sizes and resolutions, it is possible to define that the used image set depends on the resolution.</p>
-
-<p>In the example below the image named &quot;image3&quot; selects different files depending on image size.</p>
-
-<pre class="prettyprint">
-images 
-{
-&nbsp;&nbsp;&nbsp;set 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;image3_1.png&quot; LOSSY 90;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 50 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;image3_2.png&quot; LOSSY 90;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 51 51 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;image3_3.png&quot; LOSSY 90;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 201 500 500;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>This is done with the &quot;size&quot; attribute that specifies the minimal width and height and maximal width and height. If the width and height of the object are below 50px, <span style="font-family: Courier New,Courier,monospace;">image3_1.png</span> picture file is used. If they are bigger than 201px, <span style="font-family: Courier New,Courier,monospace;">image3_3.png</span> file is used.</p>
-
-<h3>Resizing Borders</h3>
-
-<p>Sometimes it is needed to keep the borders of an image intact when resizing or scaling it. The <span style="font-family: Courier New,Courier,monospace;">border</span> attribute is here to do that.</p>
-
-<pre class="prettyprint">
-border [left] [right] [top] [bottom]
-</pre>
-
-<p>If set, the area (in pixels) of each side of the image is displayed as a fixed size border, from the side -&gt; inwards. This prevents the corners from being changed on a resize.</p>
-
-<p>Here is a code example how to set a border of 10px on each side of the image. This 10px border will not be resized when scaling the image.</p>
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;image_border&quot;;
-&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;image1.jpg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 10 10 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h2 id="Swallow" name="Swallow">Edje Swallow </h2>
-
-<p>The parent of all layout components is Edje. Edje as explained in the <a href="edc_part_block_n.htm#edje_block">Edje Blocks</a> is a library which convert edc files into Evas object. EDC is a description language. It means that the objects of interface are described by using text description. One of its main features is the possibility to create &quot;Swallows&quot; objects. When this kind of object is added in an Evas, it contains any other <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>. To create a swallow part, create first the EDC file: </p>
-
-<pre class="prettyprint">
-collections
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;container&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;part.swallow&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 31 31;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>This EDC describes a group named &quot;container&quot;, with one part inside of type SWALLOW and with the name <span style="font-family: Courier New,Courier,monospace;">part.swallow</span>. This part is centered inside the parent (it is the default behavior) but there are 32 pixels free all around this part. Use <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> to compile the EDC file into a binary EDJ file: </p>
-
-<pre class="prettyprint">
-edje_cc -o container.edj container.edc
-</pre>
-
-<p>Create an Edje object and load this file: </p>
-
-<pre class="prettyprint">
-edje = edje_object_add(evas_object_evas_get(parent));
-edje_object_file_set(edje, &quot;container.edj&quot;, &quot;container&quot;);
-</pre>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note"><span style="font-family: Courier New,Courier,monospace;">edje_object_add</span> as opposed as all elementary object, does not take an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> as a parent. Give it the Evas on which the object is added. As the parent is already added on an Evas by elementary, retrieve a reference on it by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> function.</td>
-</tr>
-</tbody>
-</table> 
-
-<p><span style="font-family: Courier New,Courier,monospace;">edje_object_file_set</span> is used to set the Edje file from which the object is loaded. The object itself is the name of the group as defined in the EDC file, in this case it is &quot;container&quot;.</p>
-
-<p>Use the API <span style="font-family: Courier New,Courier,monospace;">edje_object_swallow</span> to swallow any kind of <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> inside. </p>
-
-<pre class="prettyprint">
-ic = elm_icon_add(parent);
-elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
-edje_object_part_swallow(edje, &quot;part.swallow&quot;, ic);
-</pre>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_image_file_set()</span> function parameters are linked to Edje. The second argument in this example is a PNG file; however, it can also be an Edje file. In that case, the third argument must be the Edje group to load, exactly as previously shown with the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function.</td>
-</tr>
-</tbody>
-</table> 
-
-<p>Create complex layout for your application with Edje. It is may not be the most easy way, but it is the most powerful. This Edje layout is used all around elementary and is the basis of the layout component.</p>
-
-<h2 id="Layout" name="Layout">ELM Layout</h2>
-
-<p>Layout is a container component. For the basic use of the <span style="font-family: Courier New,Courier,monospace;">elm_layout</span> with a default style, see the Layout Guide (in <a href="containers_mn.htm#layout">mobile</a> and <a href="containers_wn.htm#layout">wearable</a> applications). Elm layout takes a standard Edje design file and wraps it in a UI component. Layouts are the basis of graphical UI components which are used in Elementary.</p>
-
-<h3>Adding Layout</h3>
-
-<p>Create a new elementary layout using <span style="font-family: Courier New,Courier,monospace;">elm_layout_add</span>: </p>
-
-<pre class="prettyprint">
-Evas_Object *layout;
-layout = elm_layout_add(parent);
-</pre>
-
-<p>As for Edje swallows, load an Edje file. Create first an Edje file, that contains a black rectangle and an icon in the center. </p>
-
-<pre class="prettyprint">
-images
-{
-&nbsp;&nbsp;&nbsp;image: &quot;c1.png&quot; COMP;
-}
-
-collections
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_layout&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT; description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0; color: 0 0 0 255; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 31 31; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default.image: &quot;c1.png&quot;; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;} 
-}
-</pre>
-<p>Compile it with <span style="font-family: Courier New,Courier,monospace;">edje_cc -o edje_example.edj edje_example.edc</span>.</p>
-<p>This file can be loaded with <span style="font-family: Courier New,Courier,monospace;">elm_layout_file_set</span>: </p>
-
-<pre class="prettyprint">
-elm_layout_file_set(layout, &quot;edje_example.edj&quot;, &quot;my_layout&quot;);
-</pre>
-
-<p>The layout component may contain as many parts/children as described in its theme file (EDC). Some of these children can have special types:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> (content holder)</li>
-<li><span style="font-family: Courier New,Courier,monospace;">BOX</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span></li>
-</ul>
-
-<p>Only one object can be added to a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>. The <span style="font-family: Courier New,Courier,monospace;">elm_layout_content_set()/get/unset</span> functions are used to manage objects in a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part. After being set to this part, the object&#39;s size, position, visibility, clipping and other description properties are controlled by the description of the given part (inside the Edje theme file).</p>
-
-<p>The BOX layout can be used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_box_*()</span> set of functions. It is very similar to the <span style="font-family: Courier New,Courier,monospace;">elm_box</span> component but the BOX layout&#39;s behavior is completely controlled by the Edje theme. The TABLE layout is like the BOX layout, the difference is that it is used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_table_*()</span> set of functions.</p>
-
-<h3>Signals</h3>
-<p>Elm can send Edje signals to the EDC part by using the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_emit</span>. You can also use <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_callback_add</span> to receive signals.</p>
-
-<p>Use the following code to listen to any signals sent by the layout: </p>
-
-<pre class="prettyprint">
-elm_layout_signal_callback_add(layout, &quot;*&quot;, &quot;*&quot;, _signal_cb, NULL);
-
-static void _signal_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;Info received from layout : %s %s\n&quot;, emission, source);
-}
-</pre>
-
-<p>For more details on this, see the <a href="event_types_n.htm#events_guide_edje_with_layout">section on edje signals and layouts</a>.</p>
-
-<h2 id="Reference" name="Reference">EDC Reference</h2>
-
-<p>The documentation includes <a href="edc_part_block_n.htm#edje_block">an extensive language reference</a>. You can also access the page on the <a href="edc_part_block_n.htm#part_block">part block</a> directly.</p>
-
-<h2 id="Howtos" name="Howtos">Quick How-tos</h2>
-
-<h3>Adding Element on Screen</h3>
-<p>Add a new <a href="edc_part_block_n.htm#part_block">part</a> inside the <a href="edc_part_block_n.htm#Parts">parts block</a>.</p>
-
-<h3>Using Image </h3>
-<p>List the image in the <a href="edc_part_block_n.htm#Images">images block</a>, make sure the <a href="edc_part_block_n.htm#part_block">part</a> has <a href="edc_part_block_n.htm#type">type</a> &quot;IMAGE&quot; and set the <a href="edc_part_block_n.htm#description_image_normal">normal</a> property inside <a href="edc_part_block_n.htm#description_image">description.image</a> of part.</p>
-
-<h3>Using Same Color Definitions Across Multiple Elements</h3>
-<p>Define a <a href="edc_part_block_n.htm#Color_classes">color class</a> and set the <a href="edc_part_block_n.htm#description_color_class">description.color_class</a> property.</p>
-
-<h3>Positioning or Resizing a Part (Relative and Absolute Positioning)</h3>
-<p>Fill in the <a href="edc_part_block_n.htm#description_rel1_2">rel1 and rel2</a> structures inside the <a href="edc_part_block_n.htm#description">description block</a>.</p>
-
-<h3>Hiding Part</h3>
-<p>Set the <a href="edc_part_block_n.htm#description_visible">visible property</a> to 0.</p>
-
-<h3>Animating Part</h3>
-<p>Create several <a href="edc_part_block_n.htm#description">description blocks</a> inside your <a href="edc_part_block_n.htm#part_block">part</a> and give each of them a different value for <a href="edc_part_block_n.htm#description_state">state</a>. Set one description for the initial state and one for the end state.</p>
-
-<p>Create a <a href="edc_part_block_n.htm#program">program</a> with an <a href="edc_part_block_n.htm#action">action</a> that is <span style="font-family: Courier New,Courier,monospace;">STATE_SET &quot;end_state&quot; 0.0;</span> and with a <a href="edc_part_block_n.htm#target">target</a> that is the <a href="edc_part_block_n.htm#part_name">name</a> of the part. You can also set a non-default <a href="edc_part_block_n.htm#transition">transition</a>.</p>
-
-<p>When defining the second <a href="edc_part_block_n.htm#description">description</a>, <a href="edc_part_block_n.htm#description_inherit">inherit</a> from the first part in order to re-use the values which are already defined.</p>
-
-<p>The <a href="edc_part_block_n.htm#after">after</a> property of the <a href="edc_part_block_n.htm#program">program block</a> is used to trigger another program after the animation is done. It can be used to trigger another animation or to emit a signal to the C part of the program.</p>
-
-<h3>Making Genlist Item Theme</h3>
-<p>Create a <a href="edc_part_block_n.htm#group_block">group</a> with one <a href="edc_part_block_n.htm#part">part element</a> for each part that can be filed from the C code and set the <a href="edc_part_block_n.htm#Items">items properties</a> inside the <a href="edc_part_block_n.htm#group_block">group element</a>: </p>
-
-<pre class="prettyprint">
-items: &quot;texts&quot; &quot;text_part_1 text_part_2&quot;;
-items: &quot;icons&quot; &quot;image_part_1 image_part_2&quot;;
-</pre>
-<p>On the C side, the <span style="font-family: Courier New,Courier,monospace;">text_get</span> and <span style="font-family: Courier New,Courier,monospace;">content_get</span> callback are called respectively with <span style="font-family: Courier New,Courier,monospace;">text_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">text_part_2</span>, and <span style="font-family: Courier New,Courier,monospace;">image_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">image_part_2</span>. </p>
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/efl_extension_n.htm b/org.tizen.guides/html/native/ui/efl_extension_n.htm
deleted file mode 100644 (file)
index a24fe93..0000000
--- a/org.tizen.guides/html/native/ui/efl_extension_n.htm
+++ /dev/null
@@ -1,150 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Efl Extension</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#hw">Working with Hardware Keys</a></li>
-                       <li><a href="#rotary">Working with Rotary Events</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm">Efl Extension Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>    
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>        
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                     
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Efl Extension</h1>
-
-
-<p>The Efl Extension is an extension package for EFL that provides functions to work with the hardware keys and rotary events.</p>
-
-<h2 id="hw">Working with Hardware Keys</h2>
-
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Hardware key events are only supported in mobile devices.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>Normally, the key events are only delivered to the object in focus. However, with the EFL Extension functions, you can let visible objects without focus get events from the <strong>Menu</strong> and <strong>Back</strong> keys.</p>
-
- <p class="figure">Figure: Menu and Back keys</p> 
-<p align="center"><img alt="Menu and Back keys" src="../../images/efl_phone.png" /></p> 
-
-<p>The EFL Extension maintains its own object stack for determining which object to deliver events to. Only visible objects are added to this stack. The stack is based on the Evas layer. It means that if 2 objects are registered for the same EFL Extension event, the object on the higher Evas layer gets the event.</p>
-
-<p>The following figure shows an example of objects and their layers. Objects 1, 2, and 3 are registered with EFL Extension callbacks for the same event, such as a <strong>Back</strong> key event. When the event occurs, object 3, which is on the highest layer (layer 3), gets the event callback.</p>
-
-<p class="figure">Figure: Objects with layers</p> 
-<p align="center"><img alt="Objects with layers" src="../../images/efl_layers.png" /></p> 
-
-<p>If objects stay on the same layer, the object which is registered to the callback first gets the event.</p>
-
-<p>To register a callback for the <strong>Menu</strong> or <strong>Back</strong> key, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_add()</span> function with the application callback type:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_BACK</span>: Hardware <strong>Back</strong> key event</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_MORE</span>: Hardware <strong>Menu</strong> key event</li>
-</ul>
-
-<p>To delete a registered event in the EFL Extension, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_del()</span> function.</p>
-
-<p>The EFL Extension also provides other convenient functions to work with the <strong>Menu</strong> and <strong>Back</strong> keys for popup, ctxpopup, naviframe, and entry components (in <a href="ui_component_mn.htm#components">mobile</a> and <a href="ui_component_wn.htm#components">wearable</a> applications).</p>
-
-<h2 id="rotary">Working with Rotary Events</h2>
-
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Rotary events are only supported in devices with a circular screen.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-  
-<p>You can use various functions to work with the rotary events. The functions manage the rotary events, which are fired from the rotary device and delivered to a suitable target. To receive rotary events, you must define an event callback or a handler function, and register it using the EFL Extension functions. There are 2 ways to receive the rotary events: the rotary event handler and the rotary object event callback.</p>
-
-<h3>Rotary Event Handler</h3>
-
-<p>The rotary event handler is suitable when you want to handle rotary events without taking care about an Evas Object or when the application is not implemented using an Evas Object. The handler works like the Ecore event in EFL:</p>
-
-<ul><li><p>The application registers a rotary event handler with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_add()</span> function.</p>
-
-<p>The rotary event handlers are treated &quot;first come first served&quot;. It means that the first registered handler is called first when rotary events happens. If the handler returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the next handler is called. Otherwise, EFL Extension stops delivering the rotary events.</p>
-</li>
-<li><p>To remove a rotary event handler, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_del()</span> function.</p></li></ul>
-
-
-
-<h3>Rotary Object Event Callback</h3>
-
-<p>The rotary object event callback is suitable when you want EFL Extension to handle the event delivery between objects. It means that EFL Extension manages a callback and an object list and decides which object&#39;s callback must be called when rotary events happen:</p> 
-
-<ul><li><p>The application registers a callback using the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_add()</span> function.</p>
-
-<p>EFL Extension treats callbacks based on the callback priority. If the application registers callbacks for a same object, the callback with the lowest priority number is called first. If this callback returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the higher priority number is called. The above function registers the rotary event callback with a default priority number (value is 0). To register the rotary event callback with another priority number, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_priority_add()</span> function.</p></li>
-<li><p>To remove a registered callback from an object, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_del()</span> function:</p></li></ul>
-
-<p>The rotary events are only delivered to 1 object named the activated object. If there is no activated object, the rotary event is not delivered to any object. If the activated object has registered callbacks and the callbacks return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the rotary events are delivered to the upper parents of the activated object until there is 1 callback that consumes the rotary event or it reaches the top parent object.</p>
-<p>To set the object as the activated object, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_activated_set()</span> function.</p>
-
-<p>Providing the activated parameter with the <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> value sets the object as the activated object. Providing the <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> value deactivates the object. Since there is only 1 object which is the activated object, if an object is set as the activated object, the previously activated object is deactivated and becomes a normal object. An activated signal named <span style="font-family: Courier New,Courier,monospace;">rotary,activated</span> is sent when an object is set as the activated object, and the <span style="font-family: Courier New,Courier,monospace;">rotary,deactivated</span> signal is sent when an object is deactivated.</p>
-
-<p>You can register callbacks for activated or deactivated signals with the <span style="font-family: Courier New,Courier,monospace;">evas_object_smart_callback_add()</span> function.</p>
-
-<p>For more information, see the Evas smart callback function (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas__Smart__Object__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas__Smart__Object__Group.html">wearable</a> applications).</p>
-  
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/efl_n.htm b/org.tizen.guides/html/native/ui/efl_n.htm
deleted file mode 100644 (file)
index 900677e..0000000
--- a/org.tizen.guides/html/native/ui/efl_n.htm
+++ /dev/null
@@ -1,160 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>EFL</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">EFL Tutorial</a></li>   
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>       
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API for Wearable Native</a></li>   
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>EFL</h1> 
-       
-<p>Tizen provides the functionality to create and manage your application user interface. The heart of the Tizen application UI is the native UI framework, which consists of the Enlightenment Foundation Libraries (EFL).</p>
-  
-  
-<p class="figure">Figure: EFL</p> 
-<p align="center"><img alt="EFL" src="../../images/evas_architecture.png" /></p> 
-
-<p>UI design with EFL consists of the following main parts:</p>
-
-     <ul>
-        <li>EFL  
-       <p><a href="#efl_basics">EFL basics</a> contain a set of layered libraries, and EFL functions as the window manager for your application:</p>
-       
-               <ul><li>EFL Extension
-               <p>The EFL Extension is an extension package for EFL. It provides functions to work with the <a href="efl_extension_n.htm">Menu and Back hardware keys</a> on devices.</p></li>
-
-       </ul></li>
-        <li>Edje
-        <p>The Edje library is part of EFL, and provides APIs for <a href="edje_n.htm">theming a Tizen application</a>, by writing EDC file. EDC programming supports part positioning, resizing, and animations.</p></li>
-         
-       <li>Elementary
-       <p>The Elementary library is part of EFL, and provides the basic toolkit for window and layout management, along with the UI and container components for the user interface (in <a href="ui_component_mn.htm#components">mobile</a> and <a href="ui_component_wn.htm#components">wearable</a> applications). You can manage the UI components and their focus on the screen, as well as create customizations.</p></li>
-
-       </ul>
-
-<p>Some general UI design features include:</p>        
-<ul>
-       <li>Animations and effects
-       <p>Tizen supports various methods to <a href="events_effects_n.htm#animation_effect">create animations and effects</a> in your application.</p></li>
-       
-       <li>Event handling and main loop
-        <p>The user interface relies on callbacks designed to react to EFL events generated by the system or the user. You can <a href="events_effects_n.htm#event_handling">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p>
-        <p>The Ecore library provides a main loop abstraction that gets you data when it is available and sends you events. You can <a href="main_loop_n.htm">manage the main loop</a> and <a href="threads_n.htm">use threads</a> with the Ecore main loop.</p></li>
-
-       <li>Font settings
-       <p>Tizen supports various methods to <a href="font_setting_n.htm">change the font</a> of your application to another system default font or your own font.</p></li>
-        
-       <li>Scalability
-       <p>Elementary provides a way to scale UI components (in <a href="ui_component_mn.htm#scalability">mobile</a> and <a href="ui_component_wn.htm#scalability">wearable</a> applications) in order to be comfortably used with a finger and to make the text more readable.</p></li></ul>
-       
-       
-       <h2 id="efl_basics" name="efl_basics">Making EFL Applications</h2> 
-       
-
-<p>The Enlightenment Foundation Libraries (EFL) provide all the libraries you need to create powerful applications. This section presents an overview of the libraries and when to use them in developing applications.</p>
-
-<p>Enlightenment is a window manager, which in the X Window System means that it handles the borders, iconification, expansion, and movement of windows on the screen. Enlightenment can also provide multiple virtual desktops. The initial version was developed in the 1990s by Rasterman (Carsten Haitzler). Enlightenment has since become much more than a simple window manager. To create this window manager, the Enlightenment team needed powerful libraries to base their work on, which is where the EFL come in. The EFL are the libraries on which the window manager was initially based on, but which have since then become more powerful, more memory efficient, and especially more useful for the embedded world and for touchscreen interfaces.</p>
-
-<p>The EFL are a set of layered libraries, as shown in the following diagram:</p>
-
-<p class="figure">Figure: EFL layers</p>
-<p align="center"><img alt="EFL layers" src="../../images/efllibs.png" /></p>
-
-<p>When you create a basic EFL application, you use the following main libraries as a basis:</p>
-
-<ul>
-    <li>Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in Using UI Components (in <a href="ui_component_mn.htm#components">mobile</a> and <a href="ui_component_wn.htm#components">wearable</a> applications).</li>
-    <li>Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="edje_n.htm">Edje</a> and <a href="preferences_n.htm#customize">Customizing UI Components</a>.</li>
-    <li>Ecore is the library which manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in the <a href="main_loop_n.htm">Main Loop</a> guide.</li>
-    <li>Evas is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_n.htm#render">Rendering Concept and Method in Evas</a>. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, calculate minimum drawing calls needed to get the job done, and so on.</li>
-    <li>Eina is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in <a href="eina_n.htm">Eina</a>.</li>
-</ul>
-
-<p>The EFL include more than just the above libraries, but the above are the most important libraries to get started with. The other libraries, such as Eet, Embryo, and Emotion, will be explored later in the programming guides and the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p>
-
-<p>When designing EFL applications, you can use the <a href="efl_extension_n.htm">EFL Extension</a> package to work with device hardware keys and the <a href="efl_util_n.htm">EFL UTIL</a> package to provide additional notifications.</p>
-
-<h3 id="elementary">Concept of Elementary</h3>
-
-<p>Before writing an application, you should already have an answer to the following question: What is an application? An application is a process launched by the user. Every application has at least one window for presenting its content. Users can interact with the content through events. Different sources of events can modify the life cycle of the application. The application may receive data from a network connection, and it may also receive touch and key events. From the computer&#39;s point of view, an application is a collection of code that reacts to events and displays content on the screen. Elementary bridges this divide between the user and the code.</p>
-
-<p>Elementary provides a variety of pre-built UI components, such as layout objects and components, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.</p>
-
-<p>There are three main groups of objects provided by Elementary:</p>
-
-<ul>
-    <li>UI components: These are the components with which you build your application UI.</li>
-    <li>Containers: These are the containers that hold the components.</li>
-    <li>Infrastructure: These are the modules that deal with Elementary as a whole.</li>
-</ul>
-
-<p>The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a> shows you how to develop your first application with Elementary and the EFL.</p>
-
-<h3 id="basic_structure">Basic Structure of an EFL Application in Tizen</h3>
-
-<p>Most of the time, your application has to manage multiple views. The easiest way to handle them with the EFL is to create a naviframe object. This object is a container. At first, it is used to contain the pages your application is composed of. Every Tizen application can use this top-layer object to facilitate navigation. More details can be found in the <a href="../../../../org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm">Naviframe Tutorial</a>.</p>
-
-<p>Another interesting object that has to be present in every application is the conformant object. Conformant is a container component that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.</p>
-
-<p class="figure">Figure: Basic EFL application structure</p>
-<p align="center"><img alt="Basic EFL application structure" src="../../images/elementary_app.png" /></p>
-
-<h3 id="appcore">Basic Use of Appcore</h3>
-
-<p>In Tizen, the life cycle of an application is handled by appcore. Appcore is a dedicated library developed for Tizen that provides a set of functions for handling the application life cycle. For example, appcore is responsible for sending the correct signals when the application is created, when the battery is low, when the application is sent to the background, and when the screen is rotated.</p>
-
-<p>You can see appcore in action in <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm#fundamentals">Handling the Application Fundamentals</a>.</p>
-
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/efl_util_n.htm b/org.tizen.guides/html/native/ui/efl_util_n.htm
deleted file mode 100644 (file)
index 6192593..0000000
--- a/org.tizen.guides/html/native/ui/efl_util_n.htm
+++ /dev/null
@@ -1,184 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>EFL UTIL</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-         <ul class="toc">
-                       <li><a href="#noti">Notification Window</a></li>
-            <li><a href="#shot">Screenshot</a></li>
-            <li><a href="#input_gen">Input Generator</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm">EFL UTIL Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>     
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>EFL UTIL</h1> 
- 
-<p>The EFL UTIL utility package that supports the following EFL functionalities:</p>
-
-<ul><li><a href="#noti">Notification Window</a></li>
-    <li><a href="#shot">Screenshot</a></li>
-    <li><a href="#input_gen">Input Generator</a></li></ul>
-
-<h2 id="noti" name="noti">Notification Window</h2>
-
-<p>The EFL UTIL API allows you to set and get the notification level of the notification window (which is of the EFL window type):</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span></li></ul>
-
-<p>To understand notification levels, you must first learn about the Tizen window layer hierarchy. Window layers are logical containers used to control the window stack order. Each window belongs to 1 layer and can change the stack order in the layer. Windows in same layer are always placed on or under a window in another layer. In addition to the default &quot;normal layer&quot;, there exists a &quot;notification layer&quot;, which is always placed above the normal layer.</p>
-
-
-<p class="figure">Figure: Window layers</p> 
-<p align="center"><img alt="Window layers" src="../../images/efl_windowlayer.png" /></p> 
-
-
-<p>Each window is set to  a specific layer according to its type or properties. Most application windows belong to the normal layer. However, in case of an important alarm or other information crucial to the user, you can set the window to belong to the notification layer. This ensures that the user notices the information immediately, because the window belonging to the notification layer is always shown above the windows in the normal layer.</p> 
-
-<h3>Using the Notification Windows</h3>
-
-<p>A window that belongs to the notification layer is called a &quot;notification window&quot;. To make a notification window:</p>
-
-<ol><li>Set the window type to <span style="font-family: Courier New,Courier,monospace;">NOTIFICATION</span>, by calling the <span style="font-family: Courier New,Courier,monospace;">elm_win_add()</span> function with the third parameter set to <span style="font-family: Courier New,Courier,monospace;">ELM_WIN_NOTIFICATION</span>.</li>
-<li>Set the notification level by calling the <span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span> function.
-<p>The notification level defines the priority of the window, and the notification layer contains 3 levels (<span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span>, and <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span>).</p>
-<p>The default notification window level is <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>. Most of notification windows can be set to this level. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is a higher level than <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, which means that the window set to <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is always on the <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span> level window. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span> is the highest level in notification windows. Very few applications can use this level.</p>
-
-<p>If there are notification windows that have the same level, the most recently created notification window is placed on top of the other window. </p>
-
-</li></ol>
-
-<p class="figure">Figure: Notification levels</p> 
-<p align="center"><img alt="Notification levels" src="../../images/efl_notilevels.png" /></p> 
-
-
-<p>The following code snippets shown how to make a notification window with a higher level.</p>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-#include &lt;efl_util.h&gt;
-#include &lt;dlog.h&gt;
-
-static Evas_Object *create_win(const char *name)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *eo;
-&nbsp;&nbsp;&nbsp;efl_util_error_e error;
-&nbsp;&nbsp;&nbsp;// Create the NOTIFICATION window object
-&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
-
-&nbsp;&nbsp;&nbsp;if (!eo) return NULL;
-
-&nbsp;&nbsp;&nbsp;// Set the NOTIFICATION level
-&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
-
-&nbsp;&nbsp;&nbsp;elm_win_title_set(eo, name);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(eo, EINA_TRUE); 
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(eo, &quot;delete,request&quot;, _quit_cb, NULL); 
-       
-&nbsp;&nbsp;&nbsp;return eo;
-}</pre>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span> function to get the currently set notification level of a window. If the window is not of the notification type, the function returns the <span style="font-family: Courier New,Courier,monospace;">-EFL_UTIL_ERROR_NOT_SUPPORTED_WINDOW_TYPE</span> error.</p>
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-#include &lt;efl_util.h&gt;
-#include &lt;dlog.h&gt;
-
-void get_notification_level (Evas_Object *eo)
-{
-&nbsp;&nbsp;&nbsp;efl_util_error_e error;
-&nbsp;&nbsp;&nbsp;efl_util_notification_level_e  notification_level;
-
-&nbsp;&nbsp;&nbsp;if (!eo) return;
-
-&nbsp;&nbsp;&nbsp;// Get the window notification level
-&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level (eo, &amp;notification_level);
-
-&nbsp;&nbsp;&nbsp;// Check the return value
-&nbsp;&nbsp;&nbsp;if (error== EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 1
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 2
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-  
-<h2 id="shot" name="shot">Screenshot</h2>
-
-<p>The EFL UTIL SCREENSHOT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">wearable</a> applications) allows you to get the screen image to the user.</p>
-
-<p>First you must make the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure and initialize the structure members with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_initialize()</span> function. To take the actual screenshot, create screen capture data and return it to the <span style="font-family: Courier New,Courier,monospace;">tbm_surface</span> handler with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_take_tbm_surface()</span> function.</p>
-<p>When no longer needed, remember to free the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_deinitialize()</span> function.</p>
-
-
-<h2 id="input_gen" name="input_gen">Input Generator</h2>
-
-<p>The EFL UTIL INPUT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__INPUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__INPUT__MODULE.html">wearable</a> applications) allows you to generate input events (such as key and touch events).</p>
-
-<p>First you must make the <span style="font-family: Courier New,Courier,monospace;">efl_util_inputgen_h</span> structure and initialize the structure members with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_initialize_generator()</span> function. To generate actual key or touch events, use the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_key()</span> or <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_touch()</span> function.</p>
-<p>When no longer needed, remember to free the <span style="font-family: Courier New,Courier,monospace;">efl_util_inputgen_h</span> structure with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_deinitialize_generator()</span> function.</p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/eina_n.htm b/org.tizen.guides/html/native/ui/eina_n.htm
deleted file mode 100644 (file)
index 4260be9..0000000
--- a/org.tizen.guides/html/native/ui/eina_n.htm
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Eina</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-        <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
-               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-   
-   <h1>Eina</h1>
- <p>Eina provides data types and useful tools.</p>
-  
-<p>The Eina library implements an API for data types in an efficient way. It also provides some useful tools, such as opening shared libraries, error management, type conversion, time accounting, and memory pool.</p>
-<p>The main features of Eina are:</p>
-<ul>
-<li><a href="data_types_n.htm">Data Types</a> <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types.</p></li>
-<li><a href="eina_tools_n.htm">Eina Tools</a> <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications.</p></li>
-</ul>
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/eina_tools_n.htm b/org.tizen.guides/html/native/ui/eina_tools_n.htm
deleted file mode 100644 (file)
index 4a773eb..0000000
--- a/org.tizen.guides/html/native/ui/eina_tools_n.htm
+++ /dev/null
@@ -1,234 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Eina Tools</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">             
-                       <li><a href="#string">String</a></li>
-                       <li><a href="#memory">Memory Pool</a></li>
-                       <li><a href="#safety">Safety Checks</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-        <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
-               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-   
-   <h1>Eina Tools</h1>
- <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications:</p>
-
-<ul>
-<li>Convert fast: conversion from, for example, strings to integers and double</li>
-<li>Counter: measures the number of calls and their time</li>
-<li>Error: error identifiers</li>
-<li>File: file list and path split</li>
-<li>Lazy allocator: lazy allocator</li>
-<li>Log: full-featured logging system</li>
-<li>Magic: provides runtime type checking</li>
-<li><a href="#memory">Memory Pool</a>: abstraction for various memory allocators</li>
-<li>Module lists: loads and shares modules using the <span style="font-family: Courier New,Courier,monospace;">Eina_Module</span> standard</li>
-<li>Rectangle: rectangle structure and standard manipulation methods</li>
-<li><a href="#safety">Safety Checks</a>: extra checks that report unexpected conditions and can be disabled during compilation</li>
-<li><a href="#string">String</a>: set of functions that manage C strings</li>
-</ul>    
-  
-<h2 id="string" name="string">String</h2>
-
-<p>When creating applications, you always need to manipulate strings. Eina provides a very useful API for manipulating C strings:</p>
-
-<ul><li>
-
-<p>The most common string manipulation is the &quot;split&quot;. If you have a string, such as &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;, and you want to print it in an easily readable format, you can use the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function to split the string using a delimiter. The first parameter is the string to split, the second determines where to split the string, and the final parameter is the maximum number of strings to split the string into. If you set a number less than 1, it splits the string as many times as possible.</p>
-<p>The function returns a newly-allocated NULL-terminated array of strings, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>, if it fails to allocate the array. Always remember to free the memory allocated by the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function.</p>
-
-<pre class="prettyprint">
-char *nicks = &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;;
-char **result_arr;
-int i;
-
-// Splitting the string with &#39;:&#39; delimiter
-result_arr = eina_str_split(names, &quot;:&quot;, 0);
-// Printing the result
-for (i = 0; result_arr[i]; i++)
-&nbsp;&nbsp;&nbsp;printf(&quot;Nick : %s\n&quot;, result_arr[i]);
-// Remember to free memory
-free(arr[0]);
-free(arr);
-</pre></li>
-
-
-<li><p>To change the string to lowercase or uppercase, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_tolower()</span> and <span style="font-family: Courier New,Courier,monospace;">eina_str_toupper()</span> functions. They change the case for all characters of the given string. These functions modify the original strings.</p>
-
-<pre class="prettyprint">
-char *str;
-// Initialize the string
-str = malloc(sizeof(char) * 4);
-strcpy(str, &quot;bsd&quot;);
-// Change the string to uppercase
-eina_str_toupper((char **)&amp;str);
-printf(&quot;%s\n&quot;, str);
-// Change the string to lowercase
-eina_str_tolower(&amp;str);
-printf(&quot;%s\n&quot;, str);
-// Free the allocated memory
-free(str);
-</pre></li>
-<li><p>If you need to &quot;join&quot; 2 strings of known length, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_join()</span> function. The fist parameter is the buffer to store the result, the second is the size of the buffer, the third is the separator between the 2 strings, and the 2 final parameters are the stings to be joined.</p>
-
-<pre class="prettyprint">
-char *part1 = &quot;Tizen powered by&quot;;
-char *part2 = &quot;Enlightenment Foundation Libraries&quot;;
-char *res;
-size_t size;
-// Calculate the string size + 1 for the delimiter
-size = strlen(part1) + strlen(part2) + 1
-// Allocate memory for the result
-res = malloc(sizeof(char) * size);
-// Join the strings
-eina_str_join(res, size, &#39; &#39;, part1, part2);
-printf(&quot;%s\n&quot;, res);
-// Free the allocated memory
-free(res):
-</pre></li>
-<li><p>To check whether a string starts or ends with another string, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_prefix()</span> or <span style="font-family: Courier New,Courier,monospace;">eina_str_has_suffix()</span> function. You can also check whether a string has a particular extension with the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_extension()</span> function.</p>
-
-<p>These functions return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the given string contains the specified prefix, suffix, or extension, and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if it does not.</p>
-
-<pre class="prettyprint">
-char *names = &quot;Carsten;Cedric;Tom;Chidambar;Boris;Philippe&quot;
-if (eina_str_has_prefix(names, &quot;Carsten&quot;))
-&nbsp;&nbsp;&nbsp;printf(&quot;String starts with &#39;Carsten&#39;&quot;)
-if (eina_str_has_suffix(names, &quot;Philippe&quot;))
-&nbsp;&nbsp;&nbsp;printf(&quot;String ends with &#39;Philippe&#39;&quot;)
-if (eina_str_has_extension(names, &quot;philippe&quot;))
-&nbsp;&nbsp;&nbsp;printf(&quot;String has extension &#39;philippe&#39;&quot;)
-else
-&nbsp;&nbsp;&nbsp;printf(&quot;String does not have extension &quot;philippe)
-</pre></li></ul>
-
-<h2 id="memory" name="memory">Memory Pool</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">Eina_Mempool</span> tool provides memory pool functionality. With a memory pool, you can preallocate fixed-size memory spaces for easy memory management.</p>
-
-<p>The following mempools are available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">buddy</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">chained_pool</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ememoa_fixed and ememoa_unknown</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">fixed_bitmap</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">pass_through</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">one_big</span></li>
-</ul>
-
-<h2 id="safety" name="safety">Safety Checks</h2>
-
-<p>Eina safety checks are a set of macros that can be used to check for parameters or values that must never occur. The concept is similar to the <span style="font-family: Courier New,Courier,monospace;">assert()</span> function, but safety checks log the parameter or value and return instead of aborting your program.</p>
-
-<p>The following safety checks are available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN(exp)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN_VAL(exp, val)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_GOTO(exp, label)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_ARG_NONNULL(...)</span></li>
-</ul>
-
-<p>To return if a variable is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro calls return if the given parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
-
-<pre class="prettyprint">
-Eina_Bool myfunction(char *param) 
-{
-&nbsp;&nbsp;&nbsp;// If my param is NULL, EINA_SAFETY_ON_NULL_RETURN calls &quot;return&quot;
-&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN(param);
-
-&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-} 
-</pre>
-
-<p>To return a specific value, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL()</span> function instead of the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro returns the given value.</p>
-
-<pre class="prettyprint">
-Eina_Bool void myfunction(char *param)
-{
-&nbsp;&nbsp;&nbsp;// If the parameter is NULL, return EINA_FALSE;
-&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN_VAL(param, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>To call another function if a parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function. This macro works similarly to the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function except that it calls goto with the given function instead of return.</p>
-
-<pre class="prettyprint">
-static void isnullcb()
-{
-&nbsp;&nbsp;&nbsp;printf(&quot;The parameter is NULL\n&quot;);
-}
-Eina_Bool void myfunction(char *param)
-{
-&nbsp;&nbsp;&nbsp;// If the parameter is NULL we return EINA_FALSE;
-&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_GOTO(param, isnullcb);
-&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>Eina also provides macros that check whether a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span> or <span style="font-family: Courier New,Courier,monospace;">FALSE</span>. For example, to call return if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN()</span> function. To call &quot;goto&quot; in a given function if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function.</p>
-
-  
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/elementary_mn.htm b/org.tizen.guides/html/native/ui/elementary_mn.htm
deleted file mode 100644 (file)
index ea168b8..0000000
--- a/org.tizen.guides/html/native/ui/elementary_mn.htm
+++ /dev/null
@@ -1,448 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Elementary</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#getting_started">Getting Started with the Elementary Library</a></li>
-                               <li><a href="#config">Managing Elementary Profiles</a></li>
-                               <li><a href="#options">Configuring Elementary Options</a></li>
-               </ul>
-       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Components Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>             
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Elementary</h1> 
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
- 
-
-<p>Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner to facilitate the creation of new UI components. The Elementary UI components inherit a lot of their code from the <a href="ui_component_mn.htm#containers">container UI components</a> and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
-
-<h2 id="getting_started" name="getting_started">Getting Started with the Elementary Library</h2>
-
-<p>To use the Elementary library:</p>
-
-<ol><li>Initialize the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function.</li>
-<li>Start the Elementary main loop with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function.
-<p>The function does not return, instead, it constantly loops and runs the event and the processing tasks.</p></li>
-<li>Add Elementary UI components in the main loop.
-<p>Generally, an Elementary UI component can be added with the <span style="font-family: Courier New,Courier,monospace">elm_&lt;UI component name&gt;_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is passed to the functions that are used to configure the UI component.</p></li>
-<li>Stop the main loop and return to the <span style="font-family: Courier New,Courier,monospace">main()</span> function with the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function.</li>
-<li>When your application terminates, shut down the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function.
-<p>The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</p></li></ol>
-
-
-<p>The following code snippet shows the <span style="font-family: Courier New,Courier,monospace">main()</span> function of a minimal Elementary application:</p>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-&nbsp;&nbsp;&nbsp;elm_run();
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}</pre>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">An Elementary application must use the <span style="font-family: Courier New,Courier,monospace">ELM_MAIN()</span> macro, which calls the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function. The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">HelloWorld example</a> shows a basic Elementary application that uses this macro.</td>
-        </tr>
-    </tbody>
-</table>
-
-<h3 id="objects" name="objects">Elementary Objects</h3>
-
-<p>All objects created using Elementary are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type. This means that both Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.</p>
-
-<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid component, and to save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary UI component can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instance is bigger than expected, but can still help in saving memory.</p>
-
-<h3 id="callbacks" name="callbacks">Elementary Callbacks</h3>
-
-<p>Several callbacks can be registered to handle Elementary object events:</p>
-
-<ul>
-<li>Evas event callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function to add a callback for input events (key up, key down, mouse wheel) on an Evas object. In case of an Elementary object, the callback is registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
-</li>
-
-<li>Evas smart callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for a smart event emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the &quot;smart event&quot; to register must be implemented by the corresponding smart object. Otherwise, the callback does nothing. The callback does not apply to input events (keyboard or mouse).</p>
-</li>
-
-<li>Edje signal callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function to add a callback for a signal coming from an Edje object (a theme object).</p>
-</li>
-
-<li>Elementary signal callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function to add a callback for a signal coming from an Elementary UI component&#39;s theme. The callback does not apply to input events (keyboard or mouse).</p>
-</li>
-
-<li>Elementary event callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function to add a callback for an input event (keyboard or mouse) coming from an Elementary object. In contrast to the Evas event callback, the Elementary event callback takes the hierarchy of the object into account: the event can be propagated to the parents of the object, and the parents can process the event.</p>
-</li>
-</ul>
-
-<p>For more information about events related to Elementary objects, see <a href="events_effects_n.htm#event_handling">Handling Events</a>. For more information about Evas objects and smart objects, see <a href="evas_n.htm#render">Rendering Concept and Method in Evas</a>.</p>
-  
-  <h2 id="config" name="config">Managing Elementary Profiles</h2> 
-
-<p>An Elementary profile is a set of preconfigured options that affects the entire look and feel of an application. The options linked to a specific profile form an Elementary configuration, which can be used to store the desired set of options for use in multiple sessions. Once loaded, the Elementary profile configures all the options and sets the look and feel of your Elementary application.</p>
-
-<p>To manage Elementary profiles:</p>
-<ul>
-<li>List the existing profiles:
-<pre class="prettyprint">
-Eina_List *list = elm_config_profile_list_get();
-</pre>
-</li>
-<li>Set a particular profile:
-<pre class="prettyprint">
-elm_config_profile_set(&quot;myprofile&quot;);
-</pre>
-</li>
-<li>Get the current profile:
-<pre class="prettyprint">
-char *profile = elm_config_profile_get();
-</pre>
-</li>
-<li>To save the current option values as an Elementary configuration for later use, use the <span style="font-family: Courier New,Courier,monospace">elm_config_save()</span> function:
-<pre class="prettyprint">
-elm_config_save();
-</pre>
-</li>
-<li>To reload the Elementary configuration saved for the current profile:
-<pre class="prettyprint">
-elm_config_reload();
-</pre>
-</li>
-</ul>
-
-<h2 id="options" name="options">Configuring Elementary Options</h2>
-
-<p>You can set the following options in the Elementary configuration. In addition, you can <a href="#customizing_themes">customize themes</a> and <a href="#config_focus">manage focus</a>.</p>
-<ul>
-
-<li>To scale UI components:
-<p>You can configure <a href="ui_component_mn.htm#scalability">UI component scaling</a> in terms of both interactive and readable areas.</p>
-<ul>
-<li>Set the global scaling factor (for example, setting it to 2.0 doubles the size of all scalable UI components):
-<pre class="prettyprint">
-elm_config_scale_set(2.0);
-</pre>
-</li>
-
-<li>Set the finger size:
-<pre class="prettyprint">
-elm_config_finger_size_set(1.5);
-</pre>
-</li>
-</ul>
-</li>
-
-<li>To manage caches:
-<ul>
-<li>Enable the globally configured cache flush, and set the flush interval (in this example, to 60 seconds):
-<pre class="prettyprint">
-elm_config_cache_flush_enabled_set(EINA_TRUE);
-elm_config_cache_flush_interval_set(60);
-</pre>
-</li>
-
-<li>Configure the font and image cache sizes (to 500 and 5 000 000 bytes, respectively):
-<pre class="prettyprint">
-elm_config_cache_font_cache_size_set(500);
-elm_config_cache_image_cache_size_set(5000000);
-</pre>
-</li>
-
-<li>Set the Edje collection and Edje file cache sizes:
-<pre class="prettyprint">
-elm_config_cache_edje_file_cache_size_set(500);
-elm_config_cache_edje_collection_cache_size_set(500);
-</pre>
-</li>
-</ul>
-</li>
-
-
-<li>To configure the gesture layer:
-<p>You can set the duration of the long tap and double tap events on the gesture layer objects. The following example sets the duration to 500 ms.</p>
-
-<pre class="prettyprint">
-elm_config_glayer_long_tap_start_timeout_set(0.5);
-elm_config_glayer_double_tap_timeout_set(0.5);
-</pre>
-</li>
-<li>To manage scrolling:
-<ul>
-<li>Make the scroller bounce when it reaches its viewport&#39;s edge during scrolling by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_enabled_set()</span> function:
-<pre class="prettyprint">
-elm_config_scroll_bounce_enabled_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>Control the inertia of the bounce animation by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_friction_set()</span> function:
-<pre class="prettyprint">
-elm_config_scroll_bounce_friction_set(0.5);
-</pre>
-<p>You can also set the friction for a page scroll, include animations, and zoom animations.</p>
-</li>
-
-<li>Set the scroller to be draggable by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
-
-<p>The following example sets the scroller to be draggable, defines that the number of pixels one must travel while dragging the scroller view to actually trigger  scrolling is 20 pixels.</p>
-<pre class="prettyprint">
-elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
-elm_config_scroll_thumbscroll_threshold_set(20);
-</pre>
-</li>
-</ul>
-</li>
-
-<li>To configure long press events:
-<p>Get the current timeout before a long press event is retrieved, and modify it. The following example increases the timeout by 1 second.</p>
-<pre class="prettyprint">
-double lp_timeout = elm_config_longpress_timeout_get();
-elm_config_longpress_timeout_set(lp_timeout + 1.0);
-</pre>
-</li>
-
-<li>To configure tooltips:
-<p>Set the duration after which a tooltip is shown. The following example sets the delay to 2 seconds.</p>
-
-<pre class="prettyprint">
-elm_config_tooltip_delay_set(2.0);
-</pre>
-</li>
-
-<li>To configure the password show last feature:
-<p>The password show last feature enables the user to view the last input entered for a few seconds before it is masked.</p>
-
-<ul>
-<li>Enable the password show last feature:
-<pre class="prettyprint">
-elm_config_password_show_last_set(EINA_TRUE);
-</pre>
-</li>
-<li>Set the visibility timeout (how many seconds the input is visible): 
-<pre class="prettyprint">
-elm_config_password_show_last_timeout_set(5.0);
-</pre>
-</li>
-</ul>
-</li>
-<li>To set the Elementary engine:
-<p>You can define the rendering engine that Elementary uses to draw the windows. The following rendering engines are supported:</p>
-
-<ul>
-    <li>&quot;software_x11&quot;</li>
-    <li>&quot;fb&quot;</li>
-    <li>&quot;directfb&quot;</li>
-    <li>&quot;software_16_x11&quot;</li>
-    <li>&quot;software_8_x11&quot;</li>
-    <li>&quot;xrender_x11&quot;</li>
-    <li>&quot;opengl_x11&quot;</li>
-    <li>&quot;software_gdi&quot;</li>
-    <li>&quot;software_16_wince_gdi&quot;</li>
-    <li>&quot;sdl&quot;</li>
-    <li>&quot;software_16_sdl&quot;</li>
-    <li>&quot;opengl_sdl&quot;</li>
-    <li>&quot;buffer&quot;</li>
-    <li>&quot;ews&quot;</li>
-    <li>&quot;opengl_cocoa&quot;</li>
-    <li>&quot;psl1ght&quot;</li>
-</ul>
-
-<pre class="prettyprint">
-elm_config_engine_set(&quot;opengl_x11&quot;);
-</pre>
-</li>
-
-<li>To activate the access mode: 
-<p>Set the access mode as active, so that information about an Elementary object is read when the object receives an <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event:</p>
-
-<pre class="prettyprint">
-elm_config_access_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To configure the selection mode: 
-<p>Set the selection mode so that the selection is cleared when the entry component is unfocused:</p>
-<pre class="prettyprint">
-elm_config_selection_unfocused_clear_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To enable mirroring: 
-<p>Elementary allows UI mirroring both on a single object and on the entire UI. If mirroring is enabled, an Elementary UI component displays as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.</p>
-
-<pre class="prettyprint">
-elm_config_mirrored_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To set the frame rate:
-<p>Define the frames per second (FPS) value for the <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime</span> and <span style="font-family: Courier New,Courier,monospace">edje_frametime</span> calculations. This example sets the FPS 60.</p>
-
-<pre class="prettyprint">
-elm_config_fps_set(60.0);
-</pre>
-</li>
-</ul>
-
-<h3 id="customizing_themes" name="customizing_themes">Customizing Themes</h3>
-
-<p>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component in an application. You can change the theme using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable. You can also modify the theme globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
-
-<p>For <a href="preferences_n.htm#customize">custom styles</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces the default theme of the UI component.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, you must know how the UI component is themed. If something is missing from the extension, it can break the UI component&#39;s behavior.</td>
-        </tr>
-    </tbody>
-</table>
-
-<p>To modify Elementary themes, you can also use overlays. An overlay can replace the look of all UI components by overriding the default styles. As with extensions, you must write the correct overlay theme for a UI component. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. To add or remove an overlay, use the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> functions.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.</td>
-        </tr>
-    </tbody>
-</table>
-
-<h3 id="config_focus" name="config_focus">Managing Focus</h3>
-
-<p>When an Elementary object has the focus, input events are directly passed to that object in the application window. The focused object can also change its decoration to show the user where the focus is. In an Elementary application, only one object can have the focus at a time.</p>
-
-<p>To set the focus to a new Elementary object and take the focus away from the previous focused object, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. You can make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Only visible objects can have the focus.</td>
-        </tr>
-    </tbody>
-</table>
-
-<p>Elementary supports focus chains that allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components are added to the code. It is also possible to define custom focus chains, when needed.</p>
-
-<p>For more information on focus, see <a href="preferences_n.htm#focus">Managing UI Component Focus</a>.</p>
-
-<p>To manage the focus:</p>
-
-<ul>
-<li>To define a custom focus chain, create an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, and add the Elementary objects to it in the desired focus order. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set the final list as the custom focus chain of the parent object (in the following example, <span style="font-family: Courier New,Courier,monospace">container_object</span> is the parent object).
-
-<pre class="prettyprint">Eina_List *obj_list = NULL;
-
-list = eina_list_append(list, obj1); 
-list = eina_list_append(list, obj4);
-list = eina_list_append(list, obj2); 
-list = eina_list_append(list, obj3);
-
-elm_object_focus_custom_chain_set(container_object, list);</pre>
-</li>
-
-<li>To remove the custom focus chain and use the default focus chain instead, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function.
-</li>
-
-<li>To programmatically cycle through the focus chain, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function.
-</li>
-
-<li>To show a highlight on the focused object:
-
-<pre class="prettyprint">
-elm_config_focus_highlight_enabled_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To activate an animation when the focus shifts from one object to another:
-
-<pre class="prettyprint">
-elm_config_focus_highlight_animate_set(EINA_TRUE);
-</pre>
-</li>
-</ul>
-
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/elementary_wn.htm b/org.tizen.guides/html/native/ui/elementary_wn.htm
deleted file mode 100644 (file)
index 1673f5b..0000000
--- a/org.tizen.guides/html/native/ui/elementary_wn.htm
+++ /dev/null
@@ -1,447 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Elementary</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#getting_started">Getting Started with the Elementary Library</a></li>
-                               <li><a href="#config">Managing Elementary Profiles</a></li>
-                               <li><a href="#options">Configuring Elementary Options</a></li>
-               </ul>
-       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Components Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Elementary</h1> 
-  
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>    
- 
-
-<p>Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner to facilitate the creation of new UI components. The Elementary UI components inherit a lot of their code from the <a href="ui_component_wn.htm#containers">container UI components</a> and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
-
-<h2 id="getting_started" name="getting_started">Getting Started with the Elementary Library</h2>
-
-<p>To use the Elementary library:</p>
-
-<ol><li>Initialize the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function.</li>
-<li>Start the Elementary main loop with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function.
-<p>The function does not return, instead, it constantly loops and runs the event and the processing tasks.</p></li>
-<li>Add Elementary UI components in the main loop.
-<p>Generally, an Elementary UI component can be added with the <span style="font-family: Courier New,Courier,monospace">elm_&lt;UI component name&gt;_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is passed to the functions that are used to configure the UI component.</p></li>
-<li>Stop the main loop and return to the <span style="font-family: Courier New,Courier,monospace">main()</span> function with the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function.</li>
-<li>When your application terminates, shut down the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function.
-<p>The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</p></li></ol>
-
-
-<p>The following code snippet shows the <span style="font-family: Courier New,Courier,monospace">main()</span> function of a minimal Elementary application:</p>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-&nbsp;&nbsp;&nbsp;elm_run();
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}</pre>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">An Elementary application must use the <span style="font-family: Courier New,Courier,monospace">ELM_MAIN()</span> macro, which calls the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function. The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">HelloWorld example</a> shows a basic Elementary application that uses this macro.</td>
-        </tr>
-    </tbody>
-</table>
-
-<h3 id="objects" name="objects">Elementary Objects</h3>
-
-<p>All objects created using Elementary are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type. This means that both Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.</p>
-
-<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid component, and to save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary UI component can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instance is bigger than expected, but can still help in saving memory.</p>
-
-<h3 id="callbacks" name="callbacks">Elementary Callbacks</h3>
-
-<p>Several callbacks can be registered to handle Elementary object events:</p>
-
-<ul>
-<li>Evas event callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function to add a callback for input events (key up, key down, mouse wheel) on an Evas object. In case of an Elementary object, the callback is registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
-</li>
-
-<li>Evas smart callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for a smart event emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the &quot;smart event&quot; to register must be implemented by the corresponding smart object. Otherwise, the callback does nothing. The callback does not apply to input events (keyboard or mouse).</p>
-</li>
-
-<li>Edje signal callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function to add a callback for a signal coming from an Edje object (a theme object).</p>
-</li>
-
-<li>Elementary signal callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function to add a callback for a signal coming from an Elementary UI component&#39;s theme. The callback does not apply to input events (keyboard or mouse).</p>
-</li>
-
-<li>Elementary event callback
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function to add a callback for an input event (keyboard or mouse) coming from an Elementary object. In contrast to the Evas event callback, the Elementary event callback takes the hierarchy of the object into account: the event can be propagated to the parents of the object, and the parents can process the event.</p>
-</li>
-</ul>
-
-<p>For more information about events related to Elementary objects, see <a href="events_effects_n.htm#event_handling">Handling Events</a>. For more information about Evas objects and smart objects, see <a href="evas_n.htm#render">Rendering Concept and Method in Evas</a>.</p>
-  
-  <h2 id="config" name="config">Managing Elementary Profiles</h2> 
-
-<p>An Elementary profile is a set of preconfigured options that affects the entire look and feel of an application. The options linked to a specific profile form an Elementary configuration, which can be used to store the desired set of options for use in multiple sessions. Once loaded, the Elementary profile configures all the options and sets the look and feel of your Elementary application.</p>
-
-<p>To manage Elementary profiles:</p>
-<ul>
-<li>List the existing profiles:
-<pre class="prettyprint">
-Eina_List *list = elm_config_profile_list_get();
-</pre>
-</li>
-<li>Set a particular profile:
-<pre class="prettyprint">
-elm_config_profile_set(&quot;myprofile&quot;);
-</pre>
-</li>
-<li>Get the current profile:
-<pre class="prettyprint">
-char *profile = elm_config_profile_get();
-</pre>
-</li>
-<li>To save the current option values as an Elementary configuration for later use, use the <span style="font-family: Courier New,Courier,monospace">elm_config_save()</span> function:
-<pre class="prettyprint">
-elm_config_save();
-</pre>
-</li>
-<li>To reload the Elementary configuration saved for the current profile:
-<pre class="prettyprint">
-elm_config_reload();
-</pre>
-</li>
-</ul>
-
-<h2 id="options" name="options">Configuring Elementary Options</h2>
-
-<p>You can set the following options in the Elementary configuration. In addition, you can <a href="#customizing_themes">customize themes</a> and <a href="#config_focus">manage focus</a>.</p>
-<ul>
-
-<li>To scale UI components:
-<p>You can configure <a href="ui_component_wn.htm#scalability">UI component scaling</a> in terms of both interactive and readable areas.</p>
-<ul>
-<li>Set the global scaling factor (for example, setting it to 2.0 doubles the size of all scalable UI components):
-<pre class="prettyprint">
-elm_config_scale_set(2.0);
-</pre>
-</li>
-
-<li>Set the finger size:
-<pre class="prettyprint">
-elm_config_finger_size_set(1.5);
-</pre>
-</li>
-</ul>
-</li>
-
-<li>To manage caches:
-<ul>
-<li>Enable the globally configured cache flush, and set the flush interval (in this example, to 60 seconds):
-<pre class="prettyprint">
-elm_config_cache_flush_enabled_set(EINA_TRUE);
-elm_config_cache_flush_interval_set(60);
-</pre>
-</li>
-
-<li>Configure the font and image cache sizes (to 500 and 5 000 000 bytes, respectively):
-<pre class="prettyprint">
-elm_config_cache_font_cache_size_set(500);
-elm_config_cache_image_cache_size_set(5000000);
-</pre>
-</li>
-
-<li>Set the Edje collection and Edje file cache sizes:
-<pre class="prettyprint">
-elm_config_cache_edje_file_cache_size_set(500);
-elm_config_cache_edje_collection_cache_size_set(500);
-</pre>
-</li>
-</ul>
-</li>
-
-
-<li>To configure the gesture layer:
-<p>You can set the duration of the long tap and double tap events on the gesture layer objects. The following example sets the duration to 500 ms.</p>
-
-<pre class="prettyprint">
-elm_config_glayer_long_tap_start_timeout_set(0.5);
-elm_config_glayer_double_tap_timeout_set(0.5);
-</pre>
-</li>
-<li>To manage scrolling:
-<ul>
-<li>Make the scroller bounce when it reaches its viewport&#39;s edge during scrolling by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_enabled_set()</span> function:
-<pre class="prettyprint">
-elm_config_scroll_bounce_enabled_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>Control the inertia of the bounce animation by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_friction_set()</span> function:
-<pre class="prettyprint">
-elm_config_scroll_bounce_friction_set(0.5);
-</pre>
-<p>You can also set the friction for a page scroll, include animations, and zoom animations.</p>
-</li>
-
-<li>Set the scroller to be draggable by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
-
-<p>The following example sets the scroller to be draggable, defines that the number of pixels one must travel while dragging the scroller view to actually trigger  scrolling is 20 pixels.</p>
-<pre class="prettyprint">
-elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
-elm_config_scroll_thumbscroll_threshold_set(20);
-</pre>
-</li>
-</ul>
-</li>
-
-<li>To configure long press events:
-<p>Get the current timeout before a long press event is retrieved, and modify it. The following example increases the timeout by 1 second.</p>
-<pre class="prettyprint">
-double lp_timeout = elm_config_longpress_timeout_get();
-elm_config_longpress_timeout_set(lp_timeout + 1.0);
-</pre>
-</li>
-
-<li>To configure tooltips:
-<p>Set the duration after which a tooltip is shown. The following example sets the delay to 2 seconds.</p>
-
-<pre class="prettyprint">
-elm_config_tooltip_delay_set(2.0);
-</pre>
-</li>
-
-<li>To configure the password show last feature:
-<p>The password show last feature enables the user to view the last input entered for a few seconds before it is masked.</p>
-
-<ul>
-<li>Enable the password show last feature:
-<pre class="prettyprint">
-elm_config_password_show_last_set(EINA_TRUE);
-</pre>
-</li>
-<li>Set the visibility timeout (how many seconds the input is visible): 
-<pre class="prettyprint">
-elm_config_password_show_last_timeout_set(5.0);
-</pre>
-</li>
-</ul>
-</li>
-<li>To set the Elementary engine:
-<p>You can define the rendering engine that Elementary uses to draw the windows. The following rendering engines are supported:</p>
-
-<ul>
-    <li>&quot;software_x11&quot;</li>
-    <li>&quot;fb&quot;</li>
-    <li>&quot;directfb&quot;</li>
-    <li>&quot;software_16_x11&quot;</li>
-    <li>&quot;software_8_x11&quot;</li>
-    <li>&quot;xrender_x11&quot;</li>
-    <li>&quot;opengl_x11&quot;</li>
-    <li>&quot;software_gdi&quot;</li>
-    <li>&quot;software_16_wince_gdi&quot;</li>
-    <li>&quot;sdl&quot;</li>
-    <li>&quot;software_16_sdl&quot;</li>
-    <li>&quot;opengl_sdl&quot;</li>
-    <li>&quot;buffer&quot;</li>
-    <li>&quot;ews&quot;</li>
-    <li>&quot;opengl_cocoa&quot;</li>
-    <li>&quot;psl1ght&quot;</li>
-</ul>
-
-<pre class="prettyprint">
-elm_config_engine_set(&quot;opengl_x11&quot;);
-</pre>
-</li>
-
-<li>To activate the access mode: 
-<p>Set the access mode as active, so that information about an Elementary object is read when the object receives an <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event:</p>
-
-<pre class="prettyprint">
-elm_config_access_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To configure the selection mode: 
-<p>Set the selection mode so that the selection is cleared when the entry component is unfocused:</p>
-<pre class="prettyprint">
-elm_config_selection_unfocused_clear_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To enable mirroring: 
-<p>Elementary allows UI mirroring both on a single object and on the entire UI. If mirroring is enabled, an Elementary UI component displays as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.</p>
-
-<pre class="prettyprint">
-elm_config_mirrored_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To set the frame rate:
-<p>Define the frames per second (FPS) value for the <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime</span> and <span style="font-family: Courier New,Courier,monospace">edje_frametime</span> calculations. This example sets the FPS 60.</p>
-
-<pre class="prettyprint">
-elm_config_fps_set(60.0);
-</pre>
-</li>
-</ul>
-
-<h3 id="customizing_themes" name="customizing_themes">Customizing Themes</h3>
-
-<p>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component in an application. You can change the theme using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable. You can also modify the theme globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
-
-<p>For <a href="preferences_n.htm#customize">custom styles</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces the default theme of the UI component.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, you must know how the UI component is themed. If something is missing from the extension, it can break the UI component&#39;s behavior.</td>
-        </tr>
-    </tbody>
-</table>
-
-<p>To modify Elementary themes, you can also use overlays. An overlay can replace the look of all UI components by overriding the default styles. As with extensions, you must write the correct overlay theme for a UI component. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. To add or remove an overlay, use the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> functions.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.</td>
-        </tr>
-    </tbody>
-</table>
-
-<h3 id="config_focus" name="config_focus">Managing Focus</h3>
-
-<p>When an Elementary object has the focus, input events are directly passed to that object in the application window. The focused object can also change its decoration to show the user where the focus is. In an Elementary application, only one object can have the focus at a time.</p>
-
-<p>To set the focus to a new Elementary object and take the focus away from the previous focused object, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. You can make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function.</p>
-
-<table class="note">
-    <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">Only visible objects can have the focus.</td>
-        </tr>
-    </tbody>
-</table>
-
-<p>Elementary supports focus chains that allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components are added to the code. It is also possible to define custom focus chains, when needed.</p>
-
-<p>For more information on focus, see <a href="preferences_n.htm#focus">Managing UI Component Focus</a>.</p>
-
-<p>To manage the focus:</p>
-
-<ul>
-<li>To define a custom focus chain, create an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, and add the Elementary objects to it in the desired focus order. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set the final list as the custom focus chain of the parent object (in the following example, <span style="font-family: Courier New,Courier,monospace">container_object</span> is the parent object).
-
-<pre class="prettyprint">Eina_List *obj_list = NULL;
-
-list = eina_list_append(list, obj1); 
-list = eina_list_append(list, obj4);
-list = eina_list_append(list, obj2); 
-list = eina_list_append(list, obj3);
-
-elm_object_focus_custom_chain_set(container_object, list);</pre>
-</li>
-
-<li>To remove the custom focus chain and use the default focus chain instead, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function.
-</li>
-
-<li>To programmatically cycle through the focus chain, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function.
-</li>
-
-<li>To show a highlight on the focused object:
-
-<pre class="prettyprint">
-elm_config_focus_highlight_enabled_set(EINA_TRUE);
-</pre>
-</li>
-
-<li>To activate an animation when the focus shifts from one object to another:
-
-<pre class="prettyprint">
-elm_config_focus_highlight_animate_set(EINA_TRUE);
-</pre>
-</li>
-</ul>
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/evas_n.htm b/org.tizen.guides/html/native/ui/evas_n.htm
deleted file mode 100644 (file)
index 53506d1..0000000
--- a/org.tizen.guides/html/native/ui/evas_n.htm
+++ /dev/null
@@ -1,979 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Evas</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#render">Rendering Concept and Method in Evas</a></li>
-            <li><a href="#evas">Evas Object</a></li>
-                       <li><a href="#engine">Evas Engines Concept</a></li>
-                       <li><a href="#ui_rendering">UI Rendering Mode</a></li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm">Evas Tutorial</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Evas</h1>
-  
-<p>Evas is a clean display canvas API for several target display systems that can draw anti-aliased text, smooth super and sub-sampled scaled images, alpha-blend objects and much more.</p>
-<p>It abstracts any need to know much about what the characteristics of your display system are, what graphics calls are used to draw them, and how. It deals on an object level where all you do is create and manipulate objects in a canvas and set their properties.</p>
-<p>Evas optimizes the rendering pipeline to minimize effort in redrawing changes made to the canvas and so takes this work out of the programmers hand, saving a lot of time and energy.</p>
-<p>It is designed to work on embedded systems all the way to large and powerful multi-cpu workstations. It can be compiled to only have the features you need for your target platform if you so wish. It has several display back-ends, allowing it display on several display systems, making it portable for cross-device and cross-platform development.</p>
-
-<p>Evas is not a UI component set or a UI component toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.</p>
-<p>It is not dependent or aware of main loops, input or output systems. Input must be polled from various sources and fed to Evas. It does not create windows or report windows updates to your system, but draws the pixels and reports to the user the areas that are changed. These operations are ready to be used in Ecore, particularly in Ecore_Evas wrapper/helper set of functions.</p>
-
-<h2 id="render" name="render">Rendering Concept and Method in Evas </h2>
-<p>Evas is a canvas display library. It is markedly different from most display and windowing systems as the canvas is structural and is also a state engine, whereas most display and windowing systems are immediate mode display targets. Evas handles the logic between a structural display via its state engine, and controls the target windowing system in order to produce rendered results of the current canvas&#39; state on the display.</p>
-<p>Immediate mode display systems retain very little or no state. A program executes a series of commands, as in the following pseudo code.</p>
-<pre class="prettyprint">
-draw line from position (0, 0) to position (100, 200);
-
-draw rectangle from position (10, 30) to position (50, 500);
-
-bitmap_handle = create_bitmap();
-scale bitmap_handle to size 100 x 100;
-draw image bitmap_handle at position (10, 30);
-</pre>
-<p>The series of commands is executed by the windowing system and the results are typically displayed on the screen. Once the commands are executed, the display system does not know how to reproduce this image again, and has to be instructed by the application on how to redraw sections of the screen if needed. Each successive command is executed as instructed by the application and either emulated by software or sent to the graphics hardware on the device to be performed.</p>
-<p>The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of UI component sets, custom display components and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.</p>
-<p>For example, if in the scene below, the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the &quot;expose event&quot;). Then the programmer calculates manually the updates and repaints it again.</p>
-<pre class="prettyprint">
-Redraw from position (0, 0) to position (50, 50):
-
-// What was in area (0, 0, 50, 50)?
-
-// 1. intersection part of line (0, 0) to (100, 200)?
-&nbsp;&nbsp;&nbsp;draw line from position (0, 0) to position (25, 50);
-
-// 2. intersection part of rectangle (10, 30) to (50, 500)?
-&nbsp;&nbsp;&nbsp;draw rectangle from position (10, 30) to position (50, 50)
-
-// 3. intersection part of image at (10, 30), size 100 x 100?
-&nbsp;&nbsp;&nbsp;bitmap_subimage = subregion from position (0, 0) to position (40, 20)
-&nbsp;&nbsp;&nbsp;draw image bitmap_subimage at position (10, 30);
-</pre>
-
-<p>If all elements in the above scene are opaque, the system is doing useless paints: part of the line is behind the rectangle, and part of the rectangle is behind the image. These useless paints tend to be very costly.</p>
-<p>Evas is a structural system in which the programmer creates and manages display objects and their properties, and as a result of this higher level state management, the canvas is able to redraw the set of objects when needed to represent the current state of the canvas.</p>
-<p>For example, see the following pseudo code.</p>
-<pre class="prettyprint">
-line_handle = create_line();
-set line_handle from position (0, 0) to position (100, 200);
-show line_handle;
-
-rectangle_handle = create_rectangle();
-move rectangle_handle to position (10, 30);
-resize rectangle_handle to size 40 x 470;
-show rectangle_handle;
-
-bitmap_handle = create_bitmap();
-scale bitmap_handle to size 100 x 100;
-move bitmap_handle to position (10, 30);
-show bitmap_handle;
-
-render scene;
-</pre>
-
-<p>This looks longer, but when the display needs to be refreshed or updated, the programmer only moves, resizes, shows, hides etc. the objects that need to change. The programmer thinks at the object logic level, and the canvas software does the rest of the work, figuring out what changed in the canvas since it was last drawn, how to most efficiently redraw the canvas and its contents to reflect the current state, and doing the actual drawing of the canvas.</p>
-<p>This allows the programmer think in a more natural way when dealing with a display, and saves time and effort of working out how to load and display images, to render given the current display system etc. Since Evas is portable across different display systems, this gives the programmer the ability to port and display the code on different display systems with little work.</p>
-<p>Evas is a display system somewhere between a UI component set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.</p>
-
-<p>For more information on the UI rendering modes (immediate and retained), see <a href="#ui_rendering">UI Rendering Mode</a>.</p>
-
-<h2 id="evas" name="evas">Evas Object </h2>
-<p>An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of UI components, is an Evas object.</p>
-
-<h3 id="renderable" name="renderable">Primitive Renderable Objects</h3>
-<p>Primitive objects are the base upon which to build a complex interface: rectangles, lines, polygons, <a href="#image">images</a>, <a href="#block">textblocks</a>, and texts.</p>
-<h4>Rectangle</h4>
-<p>There is only one function to deal with rectangle objects. However, the rectangle is manipulated using the generic evas object functions.</p>
-<p>The evas rectangle serves a number of key functions when working on Evas programs.</p>
-<ul>
-<li>background</li>
-<li>debugging</li>
-<li>clipper</li>
-</ul>
-
-<h5>Background</h5>
-<p>A common requirement of Evas programs is to have a solid color background, which can be accomplished with the following code.</p>
-<pre class="prettyprint">Evas_Object *bg = evas_object_rectangle_add(evas_canvas);
-
-// Here we set the rectangles red, green, blue and opacity levels
-evas_object_color_set(bg, 255, 255, 255, 255); // opaque white background
-evas_object_resize(bg, WIDTH, HEIGHT); // covers full canvas
-evas_object_show(bg);
-</pre>
-
-<h5>Debugging</h5>
-<p>When debugging visual issues with evas programs, the rectangle is a useful tool. The rectangle&#39;s simplicity means that it is easier to pinpoint issues with it than with more complex objects. A common technique to use when writing an evas program and not getting the desired visual result is to replace an object for a solid color rectangle and seeing how it interacts with the other elements. This often allows us to notice clipping, parenting or positioning issues. Once the issues are identified and corrected, the rectangle can be replaced for the original object, and in all likelihood any remaining issues are specific to that object&#39;s type.</p>
-
-<h5>Clipping</h5>
-<p><a href="#clip">Clipping</a> serves two main functions:</p>
-<ul>
-<li>limiting visibility</li>
-<li>applying a layer of color to an object</li>
-</ul>
-
-
-<h4>Text</h4>
-<p>An Evas text object shows a basic single-line single-style text.</p>
-<pre class="prettyprint">Evas_Object *text = evas_object_text_add(evas_canvas);
-evas_object_text_text_set(text, &quot;some text&quot;);
-evas_object_color_set(text, 127, 0, 0, 127);
-evas_object_show(text);
-</pre>
-
-<p>To set the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_set(text, some_text)</span>. You can set the current text with <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_get(text)</span>.</p>
-<p>To set the font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">text</span>: The text object</li>
-<li><span style="font-family: Courier New,Courier,monospace">font</span>: The font name you want to use</li>
-<li><span style="font-family: Courier New,Courier,monospace">size</span>: The font size you want to use. To query the current font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>.</li>
-</ul>
-<p>To set the text style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_set(text, style)</span>. The following styles are supported:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_PLAIN</span>: Plain, standard text</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW</span>: Text with shadow underneath</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE</span>: Text with an outline</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_OUTLINE</span>: Text with a soft outline</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_GLOW</span>: Text with a glow effect</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SHADOW</span>: Text with both outline and shadow effects</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SHADOW</span>: Text with (far) shadow underneath</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SOFT_SHADOW</span>: Text with outline and soft shadow effects combined</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_SHADOW</span>: Text with (soft) shadow underneath</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SOFT_SHADOW</span>: Text with (far soft) shadow underneath</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_RIGHT</span>: Shadow growing to bottom right</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM</span>: Shadow growing to the bottom</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_LEFT</span>: Shadow growing to bottom left</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_LEFT</span>: Shadow growing to the left</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_LEFT</span>: Shadow growing to top left</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP</span>: Shadow growing to the top</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_RIGHT</span>: Shadow growing to top right</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_RIGHT</span>: Shadow growing to the right. To query the current style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_get(text)</span>.</li>
-</ul>
-<p>If the text does not fit, make an ellipsis on it by using <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_set(text, ellipsis)</span>. The (float) value specifies, which part of the text is shown.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">0.0</span>: The beginning is shown and the end trimmed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">1.0</span>: The beginning is trimmed and the end shown.</li>
-<li>Any value in between means that both ends of the text have ellipsis and the set part is shown.</li>
-<li><span style="font-family: Courier New,Courier,monospace">-1.0</span>: Ellipsis is disabled. To query the current ellipsis value, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_get(text)</span>.</li>
-</ul>
-<p>When the text style is set to glow, set the glow color using <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. The effect is placed at a short distance from the text but not touching it. For glows set right at the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_set(text, r, g, b, a)</span>. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_get(text, r, g, b, a)</span>, respectively <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_get(text, r, g, b, a)</span>.</p>
-<p>If your text style is set to display a shadow, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_get(text, r, g, b, a)</span></p>
-<p>If your text style is set to display an outline, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_get(text, r, g, b, a)</span></p>
-
-
-<h3 id="smart" name="smart">Primitive Smart Objects</h3>
-<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object&#39;s user. They could be, for example, a group of objects that move together, or implementations of whole complex UI components, providing some intelligence and extension to simple Evas objects.</p>
-
-<h3 id="container_objects" name="container_objects">Primitive Container Objects</h3>
-<p>A container is a Smart object that holds children Evas objects in a specific fashion.</p>
-<h4>Table</h4>
-<p>A table is a smart object that packs children using a tabular layout.</p>
-<pre class="prettyprint">table = evas_object_table_add(evas);
-evas_object_table_homogeneous_set(table, EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE);
-evas_object_table_padding_set(table, 0, 0);
-evas_object_resize(table, WIDTH, HEIGHT);
-evas_object_show(table);
-
-rect = evas_object_rectangle_add(evas);
-evas_object_color_set(rect, 255, 0, 0, 255);
-evas_object_size_hint_min_set(rect, 100, 50);
-evas_object_show(rect);
-evas_object_table_pack(table, rect, 1, 1, 2, 1);
-
-rect = evas_object_rectangle_add(d.evas);
-evas_object_color_set(rect, 0, 255, 0, 255);
-evas_object_size_hint_min_set(rect, 50, 100);
-evas_object_show(rect);
-evas_object_table_pack(table, rect, 1, 2, 1, 2);
-
-rect = evas_object_rectangle_add(d.evas);
-evas_object_color_set(rect, 0, 0, 255, 255);
-evas_object_size_hint_min_set(rect, 50, 50);
-evas_object_show(rect);
-evas_object_table_pack(table, rect, 2, 2, 1, 1);
-
-rect = evas_object_rectangle_add(d.evas);
-evas_object_color_set(rect, 255, 255, 0, 255);
-evas_object_size_hint_min_set(rect, 50, 50);
-evas_object_show(rect);
-evas_object_table_pack(table, rect, 2, 3, 1, 1);
-</pre>
-
-<p>In this example, we add a non-homogeneous table to the canvas with its padding set to 0.</p>
-<p>We then add four different colored rectangles with different properties.</p>
-<ul>
-<li>the first one, at the first column and first line, spans two columns and one line</li>
-<li>the second one, at the first column and second line, spans one columns and two lines</li>
-<li>the third one, at the second column and second line, fits in one cell</li>
-<li>the fourth one, at the second column and third line, also fits in one cell</li>
-</ul>
-<p>To create a table, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_add(evas)</span>.</p>
-<p>To set the table layout (the cells), use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_set(table, homogeneous)</span>. The following values can be homogeneous:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE</span>: This default value has columns and rows calculated based on hints of individual cells. This is flexible, but much heavier on computations.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_TABLE</span>: The table size is divided equally among children, filling the whole table area. If the children have a minimum size that is larger than this (including padding), then the table overflows and is aligned respecting the alignment hint, possibly overlapping sibling cells.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_ITEM</span>: The greatest minimum cell size is used: if no element is set to expand, the contents of the table are the minimum size and the bounding box of all the children is aligned relatively to the table object using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span>. If the table area is too small to hold this minimum bounding box, then the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To set the current mode, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_get(table)</span>.</li>
-</ul>
-<p>The table&#39;s content alignment is set using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_set(table, horizontal, vertical)</span>, where <span style="font-family: Courier New,Courier,monospace">horizontal</span> and <span style="font-family: Courier New,Courier,monospace">vertical</span> are floating values. To see them, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get(table, horizontal, vertical)</span>.</p>
-<p>To set the padding, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_set(table, horizontal, vertical)</span>. To see the current value, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_get(table, horizontal, vertical)</span>.</p>
-<p>_To see the current column and row count, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_col_row_size_get(table, columns, rows)</span>.</p>
-
-<h4>Grid</h4>
-<p>A grid is a smart object that packs its children as with a regular grid layout.</p>
-<p>Grids are added to the canvas with <span style="font-family: Courier New,Courier,monospace">evas_object_grid_add(evas)</span>.</p>
-<p>To change a grid&#39;s virtual resolution, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_set(grid, width, height)</span>, to see it, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_get(grid, width, height)</span>.</p>
-<p>To add an object, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_pack(grid, child, x, y, w, h)</span>, where</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">x</span> is the virtual X coordinate of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">y</span> is the virtual y coordinate of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">w</span> is the virtual width of the child</li>
-<li><span style="font-family: Courier New,Courier,monospace">h</span> is the virtual height of the child</li>
-</ul>
-<h4>Box</h4>
-<p>A box is a simple container that sets its children objects linearly.</p>
-<p>To add a box to your canvas, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_add(evas)</span>.</p>
-<p>To add a child to the box, use</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_append(box, child)</span>: The child is appended.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_after(box, child, reference)</span>: The child is added after <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_before(box, child, reference)</span>: The child is added before <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_at(box, child, pos)</span>: The child is added at the specified position.</li>
-</ul>
-<p>To set the alignment, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_align_set(box, horizontal, vertical)</span>.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">horizontal</span>: 0.0 means aligned to the left, 1.0 means to the right;</li>
-<li><span style="font-family: Courier New,Courier,monospace">vertical</span>: 0.0 means aligned to the top, 1.0 means to the bottom.</li>
-</ul>
-<p>Evas has predefined box layouts available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_horizontal()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_vertical()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_horizontal()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_vertical()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_horizontal()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_vertical()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_horizontal()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_vertical()</span>;</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_stack()</span>.</li>
-</ul>
-
-<h3 id="image" name="image">Image Objects</h3> 
-
-
-<p>Using Evas, you can create and manipulate image objects. Evas supports image loaders of various formats as plug-in modules.</p>
-<p>The image formats that Evas supports include <span style="font-family: Courier New,Courier,monospace">bmp</span>, <span style="font-family: Courier New,Courier,monospace">edj</span>, <span style="font-family: Courier New,Courier,monospace">gif</span>, <span style="font-family: Courier New,Courier,monospace">ico</span>, <span style="font-family: Courier New,Courier,monospace">jpeg</span>, <span style="font-family: Courier New,Courier,monospace">pmaps</span>, <span style="font-family: Courier New,Courier,monospace">png</span>, <span style="font-family: Courier New,Courier,monospace">psd</span>, <span style="font-family: Courier New,Courier,monospace">svg</span>, <span style="font-family: Courier New,Courier,monospace">tga</span>, <span style="font-family: Courier New,Courier,monospace">tiff</span>, <span style="font-family: Courier New,Courier,monospace">wbmp</span>, <span style="font-family: Courier New,Courier,monospace">webp</span>, and <span style="font-family: Courier New,Courier,monospace">xpm</span>.</p>
-
-       <p class="figure">Figure: Evas image loader</p> 
-       <p align="center"><img alt="Evas image loader" src="../../images/evas_image_loader.png" /></p>  
-
-<h4>Evas Object Image Functions</h4>
-
-<p>Evas has over 70 image object functions. The following functions are discussed in this document:</p>
-<pre class="prettyprint">
-Evas_Object *evas_object_image_add(Evas *e);
-void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);
-void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);
-void evas_object_image_filled_set(Evas *e, Eina_Bool setting);
-Evas_Object *evas_object_image_filled_add(Evas *e);
-void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);
-void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);
-void evas_object_image_data_set(Evas_Object *obj, void *data);
-void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);
-void evas_object_image_size_set(Evas_Object *obj, int w, int h);
-void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);
-Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);
-</pre>
-
-<h4>Creating an Image Object and Setting the Image Data Source</h4>
-<p>A common use case of an image object is to set a file as the image data source. The process has 3 steps and each one involves the following API calls:</p>
-       <ul>
-        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function creates an image object and returns the pointer.
-        <pre class="prettyprint">Evas_Object *evas_object_image_add(Evas *e);</pre>
-        </li>
-        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_file_set()</span> function sets a source file on the image object. The object fetches the image pixel data from the source file.
-        <pre class="prettyprint">void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);</pre>
-        </li>
-        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> sets how to fill the image object's area with the given pixel data.
-        <pre class="prettyprint">void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);</pre>
-        </li>
-       </ul>
-
-<p>In the following code example, the <span style="font-family: Courier New,Courier,monospace">main()</span> function creates an image object and displays it on a window. The image object size is 300x300 and the source image resolution is 100x127. The image is scaled into 300 by 300 to fill the image object area using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-
-&nbsp;&nbsp;&nbsp;// Create a window object
-&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 400);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-
-&nbsp;&nbsp;&nbsp;// Return Evas handle from window
-&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
-
-&nbsp;&nbsp;&nbsp;// Create an image object
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
-
-&nbsp;&nbsp;&nbsp;// Set a source file to fetch pixel data
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-
-&nbsp;&nbsp;&nbsp;// Set the size and position of the image on the image object area
-&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(img, 0, 0, 300, 300);
-
-&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
-&nbsp;&nbsp;&nbsp;evas_object_show(img);
-
-&nbsp;&nbsp;&nbsp;elm_run();
-
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-       <p class="figure">Figure: Image object display</p> 
-       <p align="center"><img alt="Image object display" src="../../images/evas_object_display.png" /></p>  
-  
-<h4>Image Scaling</h4>
-<p>Users can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.</p>
-
-       <p class="figure">Figure: Image scaling</p> 
-       <p align="center"><img alt="Image scaling" src="../../images/evas_image_scaling.png" /></p>  
-
-       <table>
-       <tbody>
-       <tr>
-        <td><p align="center"><img alt="" src="../../images/evas_scaling1.png" /></p></td>
-        <td><p align="center"><img alt="" src="../../images/evas_scaling2.png" /></p></td>
-        <td><p align="center"><img alt="" src="../../images/evas_scaling3.png" /></p></td>
-       </tr>
-       <tr>
-     <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 50, 0, 300, 300)</span></td>
-        <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 200, 200)</span></td>
-        <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 100, 127)</span></td>
-       </tr>
-       </tbody>
-       </table>  
-       
-<p>the <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> function scales the image to fit the object area. Resizing the image object automatically triggers an internal call to the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>
-<pre class="prettyprint">
-void evas_object_image_filled_set(Evas *e, Eina_Bool setting);</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_add()</span> function creates a new image object that automatically scales its bound image to the object area. This is a helper function around the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> functions.</p>
-
-<pre class="prettyprint">Evas_Object *evas_object_image_filled_add(Evas *e);</pre>
-
-<p>Scaled images&#39; quality can differ according to scaling algorithms. Smooth scaling improves the image quality in the process of size reducing or enlarging. Evas runs its own smooth scaling algorithm by default and provides an API so users can disable the function.</p>
-
-<pre class="prettyprint">
-void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);</pre>
-
-<p>The algorithm is implemented using the SIMD (Single Instruction Multiple Data) vectorization in case of software rendering. It is optimized on Intel and ARM CPU through MMX and NEON command respectively.</p>
-
-<p>There is a trade-off between image smoothness and rendering performance. The load gets bigger as the image gets bigger. Users can avoid such scaling overload by using the same size of the image object and the source image.</p>
-
-<p>In the following code, 2 image objects are created to show the effects of smooth scaling. The one with smooth scaling applied appears softer on the screen.</p>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-
-&nbsp;&nbsp;&nbsp;// Create a window object
-&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-
-&nbsp;&nbsp;&nbsp;// Return Evas handle from window
-&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
-
-&nbsp;&nbsp;&nbsp;// Create an image object
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_move(img, 0, 0);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(img);
-
-&nbsp;&nbsp;&nbsp;// Create another image object
-&nbsp;&nbsp;&nbsp;Evas_Object *img2 = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img2, &quot;./logo.png&quot;, NULL);
-
-&nbsp;&nbsp;&nbsp;// Disable smooth scaling
-&nbsp;&nbsp;&nbsp;evas_object_image_smooth_scale_set(img2, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;evas_object_move(img2, 200, 0);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img2, 200, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(img2);
-
-&nbsp;&nbsp;&nbsp;elm_run();
-
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-  <table>
-  <caption>Figure: Smooth scaling effects</caption>
-  <tbody>
-  <tr>
-   <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_enabled.png" /></p></td>
-   <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_disabled.png" /></p></td>
-  </tr>
-  <tr>
-   <td style="text-align:center;">Smooth scaling enabled</td>
-   <td style="text-align:center;">Smooth scaling disabled</td>
-  </tr>
-  </tbody></table>
-
-
-<p>Evas caches scaled image data and reuses them. Users can save the memory by loading the image in the scaled size to the memory at the beginning. This option is available only for <span style="font-family: Courier New,Courier,monospace">jpeg</span> format at the moment.</p>
-<pre class="prettyprint">
-void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);</pre>
-
-<p>An example code is as follows.</p>
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
- 
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
- 
-&nbsp;&nbsp;&nbsp;// Create a window object
-&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
- 
-&nbsp;&nbsp;&nbsp;// Return Evas handle from window
-&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
- 
-&nbsp;&nbsp;&nbsp;// Create an image object
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e); 
- 
-&nbsp;&nbsp;&nbsp;// Load the image scaled into the object size 
-&nbsp;&nbsp;&nbsp;// before evas_object_image_file_set() is called
-&nbsp;&nbsp;&nbsp;evas_object_image_load_size_set(img, 300, 300);
- 
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL); 
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
-&nbsp;&nbsp;&nbsp;evas_object_show(img); 
- 
-&nbsp;&nbsp;&nbsp;elm_run();
- 
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-<h4>Setting Raw Data to Image Object</h4>
-<p>Users can set raw data to the image object manually using  the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function instead of setting an image file as the data source. The image data should be in raw data form. In case of an 200x200 sized image with alpha channel enabled (32 bits per pixel), the size of the image data is 14000 (=200*200*4) bytes.</p>
-
-<pre class="prettyprint">void evas_object_image_data_set(Evas_Object *obj, void *data);</pre>
-
-<p>Image objects fetch metadata such as width or height from the header of the image files. Since the raw data does not have the metadata, users must set the size of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_size_set()</span> function.</p>
-
-<pre class="prettyprint">void evas_object_image_size_set(Evas_Object *obj, int w, int h);</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> function returns the data pointer of an image object and requires a parameter to determine whether the data is modified or not. If users pass <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for <span style="font-family: Courier New,Courier,monospace">for_writing</span>, Evas updates the image pixels in the next rendering cycle.</p>
-
-<pre class="prettyprint">void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_update_add()</span> helps to mark the updated area for rendering efficiency.</p>
-
-<pre class="prettyprint">void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);</pre>
-
-<p>The following example code and figure show how to specify the area to update.</p>
-<pre class="prettyprint">
-evas_object_image_data_update_add(image, 100, 100, 50, 50);
-evas_object_image_data_update_add(image, 180, 100, 50, 50);
-evas_object_image_data_update_add(image, 85, 200, 160, 80);
-</pre>
- 
-  <p class="figure">Figure: Partial image update</p> 
-  <p align="center"><img alt="Partial image update" src="../../images/evas_partial_update.png" /></p>  
-
-<p>The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_save()</span> function.</p>
-
-<pre class="prettyprint">Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);</pre>
-
-<pre class="prettyprint">
-#include &lt;Elementary.h&gt;
-
-void image_blur(Evas_Object *img)
-{
-&nbsp;&nbsp;&nbsp;unsigned char *img_src = evas_object_image_data_get(img, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;int w, h;
-&nbsp;&nbsp;&nbsp;evas_object_image_size_get(img, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;int blur_size = 4;
-&nbsp;&nbsp;&nbsp;int x, y, xx, yy;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; h; y++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; w; x++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int avg_color[3] = {0, 0, 0};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int blur_pixel_cnt = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int idx = (yy * w * 4) + (xx * 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[0] += img_src[idx + 0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] += img_src[idx + 1];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] += img_src[idx + 2];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++blur_pixel_cnt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[0] /= blur_pixel_cnt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] /= blur_pixel_cnt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] /= blur_pixel_cnt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int idx = (yy * w * 4) + (xx * 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 0] = avg_color[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 1] = avg_color[1];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 2] = avg_color[2];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;evas_object_image_data_update_add(img, 0, 0, w, h);
-}
-
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-
-&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 200, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-
-&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
-
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
-&nbsp;&nbsp;&nbsp;evas_object_show(img);
-
-&nbsp;&nbsp;&nbsp;image_blur(img);
-
-&nbsp;&nbsp;&nbsp;evas_object_image_save(img, &quot;logo2.png&quot;, NULL, &quot;quality=100 compress=8&quot;);
-
-&nbsp;&nbsp;&nbsp;elm_run();
-
-&nbsp;&nbsp;&nbsp;elm_shutdown();
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-
-  <table>
-  <caption>Figure: Blur effect</caption>
-  <tbody>
-  <tr>
-   <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur1.png" /></p></td>
-   <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur2.png" /></p></td>
-  </tr>
-  <tr>
-   <td style="text-align:center;">Before</td>
-   <td style="text-align:center;">After</td>
-  </tr>
-  </tbody></table>  
-
-
- <h3 id="block" name="block">Textblock Objects</h3>
-
-<p>Unlike basic text objects, a textblock handles complex text, managing multiple styles and multiline text based on HTML-like tags. However, these extra features are heavier on memory and processing cost.</p>
-<p>The textblock objects is an object that shows big chunks of text. Textblock supports many features, including text formatting, automatic and manual text alignment, embedding items (icons, for example). Textblock has three important parts: the text paragraphs, the format nodes and the cursors.</p>
-<p>To set markup to format text, use for example <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50&gt;Big!&lt;/font_size&gt;</span>. Set more than one style directive in one tag with <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50 color=#F00&gt;Big and Red!&lt;/font_size&gt;</span>. Please note that we used <span style="font-family: Courier New,Courier,monospace">&lt;/font_size&gt;</span> although the format also included color. This is because the first format determines the matching closing tag&#39;s name. You can use anonymous tags, such as <span style="font-family: Courier New,Courier,monospace">&lt;font_size=30&gt;Big&lt;/&gt;</span>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>
-<p>Textblock supports the following formats:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">font</span>: Font description in fontconfig such as format, for example &quot;Sans:style=Italic:lang=hi&quot;. or &quot;Serif:style=Bold&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_weight</span>: Overrides the weight defined in &quot;font&quot;. For example, &quot;font_weight=Bold&quot; is the same as &quot;font=:style=Bold&quot;. The supported weights are &quot;normal&quot;, &quot;thin&quot;, &quot;ultralight&quot;, &quot;light&quot;, &quot;book&quot;, &quot;medium&quot;, &quot;semibold&quot;, &quot;bold&quot;, &quot;ultrabold&quot;, &quot;black&quot;, and &quot;extrablack&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_style</span>: Overrides the style defined in &quot;font&quot;. For example, &quot;font_style=Italic&quot; is the same as &quot;font=:style=Italic&quot;. The supported styles are &quot;normal&quot;, &quot;oblique&quot;, and &quot;italic&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_width</span>: Overrides the width defined in &quot;font&quot;. For example, &quot;font_width=Condensed&quot; is the same as &quot;font=:style=Condensed&quot;. The supported widths are &quot;normal&quot;, &quot;ultracondensed&quot;, &quot;extracondensed&quot;, &quot;condensed&quot;, &quot;semicondensed&quot;, &quot;semiexpanded&quot;, &quot;expanded&quot;, &quot;extraexpanded&quot;, and &quot;ultraexpanded&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">lang</span>: Overrides the language defined in &quot;font&quot;. For example, &quot;lang=he&quot; is the same as &quot;font=:lang=he&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_fallbacks</span>: A comma delimited list of fonts to try if finding the main font fails.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_size</span>: The font size in points.</li>
-<li><span style="font-family: Courier New,Courier,monospace">font_source</span>: The source of the font, for example an eet file.</li>
-<li><span style="font-family: Courier New,Courier,monospace">color</span>: The text color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">outline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">shadow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">glow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">glow2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">strikethrough_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">align</span>: The text alignment in one of the following formats: &quot;auto&quot; (according to text direction), &quot;left&quot;, &quot;right&quot;, &quot;center&quot; or &quot;middle&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
-<li><span style="font-family: Courier New,Courier,monospace">valign</span>: The vertical text alignment in one of the following formats: &quot;top&quot;, &quot;bottom&quot;, &quot;middle&quot;, &quot;center&quot;, &quot;baseline&quot; or &quot;base&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The text wrap in one of the following formats: &quot;word&quot;, &quot;char&quot;, &quot;mixed&quot;, or &quot;none&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">left_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>
-<li><span style="font-family: Courier New,Courier,monospace">right_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>
-<li><span style="font-family: Courier New,Courier,monospace">underline</span>: The style of underlining in one of the following formats: &quot;on&quot;, &quot;off&quot;, &quot;single&quot;, or &quot;double&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">strikethrough</span>: The style of text that is either &quot;on&quot; or &quot;off&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">backing_color</span>: The background color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">backing</span>: The background color enabled or disabled: &quot;on&quot; or &quot;off&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">style</span>: The style of the text in one of the following formats: &quot;off&quot;, &quot;none&quot;, &quot;plain&quot;, &quot;shadow&quot;, &quot;outline&quot;, &quot;soft_outline&quot;, &quot;outline_shadow&quot;, &quot;outline_soft_shadow&quot;, &quot;glow&quot;, &quot;far_shadow&quot;, &quot;soft_shadow&quot; or &quot;far_soft_shadow&quot;. The direction is selected by adding &quot;bottom_right&quot;, &quot;bottom&quot;, &quot;bottom_left&quot;, &quot;left&quot;, &quot;top_left&quot;, &quot;top&quot;, &quot;top_right&quot; or &quot;right&quot;. For example, &quot;style=shadow,bottom_right&quot;.</li>
-<li><span style="font-family: Courier New,Courier,monospace">tabstops</span>: The pixel value for tab width.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linesize</span>: To force a line size in pixels.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linerelsize</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linegap</span>: To force a line gap in pixels.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linerelgap</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">item</span>: Creates an empty space that is filled by an upper layer. Use &quot;size&quot;, &quot;abssize&quot;, or &quot;relsize&quot; to define the item&quot;s size, and an optional vsize = full/ascent to define the item&#39;s position in the line.</li>
-<li><span style="font-family: Courier New,Courier,monospace">linefill</span>: Either a float value or percentage indicating how much to fill the line.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ellipsis</span>: A value between 0.0 and 1.0 to indicate the type of ellipsis, or -1.0 to indicate that an ellipsis is not wanted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">password</span>: Either &quot;on&quot; or &quot;off&quot;, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
-</ul>
-
-
-<h3 id="clip" name="clip">Clipping Objects</h3>
-
-<h4>Limiting Visibility </h4>
-<p>An Evas object can be clipped – in other words, its visible area is restricted with the clipper object.</p>
-
-<p>It is often necessary to show only parts of an object, and while it may be possible to create an object that corresponds only to the part that must be shown (which is not always possible), it is usually easier to use a clipper. A clipper is a rectangle that defines what is visible and what is not. The way to do this is to create a solid white rectangle (by default, so you need not use <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span>) and give it a position and size of what is wanted visible. The following code exemplifies showing the center half of my_evas_object: </p>
-<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas_canvas);
-evas_object_move(clipper, my_evas_object_x / 4, my_evas_object_y / 4);
-evas_object_resize(clipper, my_evas_object_width / 2, my_evas_object_height / 2);
-evas_object_clip_set(my_evas_object, clipper);
-evas_object_show(clipper);
-</pre>
-
-<h4>Layer of Color </h4>
-<p>A solid white clipper does not produce a change in the color of the clipped object, only hides what is outside the clipper&#39;s area.  Changing the color of an object is accomplished by using a colored clipper. Clippers with color function by multiplying the colors of the clipped object. The following code shows how to remove all the red from an object.</p>
-<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas);
-evas_object_move(clipper, my_evas_object_x, my_evas_object_y);
-evas_object_resize(clipper, my_evas_object_width, my_evas_object_height);
-evas_object_color_set(clipper, 0, 255, 255, 255);
-evas_object_clip_set(obj, clipper);
-evas_object_show(clipper);
-</pre> 
-
-
-<h3 id="map" name="map">Mapping Objects</h3>
-
-<p>Evas allows different transformations to be applied to all kinds of objects. These are applied by means of UV mapping. With UV mapping, one map points in the source object to a 3D space positioning at target. This allows rotation, perspective, scale, and many other effects depending on the map that is used.</p>
-
-<h4>Creating a Map </h4>
-<p>A map consists of a set of points, but currently only four are supported. Each of these points contains a set of canvas coordinates x and y that are used to alter the geometry of the mapped object, and a z coordinate that indicates the depth of that point. This last coordinate does not normally affect the map, but is used by several of the utility functions to calculate the right position of the point given other parameters.</p>
-<p>The coordinates for each point are set with <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set(map, index, x, y, z)</span>. In the example below, there is a rectangle whose coordinates are (100, 100) and (300, 300).</p>
-<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
-evas_object_move(object, 100, 100);
-evas_object_resize(object, 200, 200);
-Evas_Map map = evas_map_new(4);
-evas_map_point_coord_set(map, 0, 100, 100, 0);
-evas_map_point_coord_set(map, 1, 300, 100, 0);
-evas_map_point_coord_set(map, 2, 300, 300, 0);
-evas_map_point_coord_set(map, 3, 100, 300, 0);
-</pre>
-<p>There are functions to ease the process.</p>
-<p>Use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_geometry(map, x, y, w, h, z)</span>, where the map coordinates are set to the given rectangle, and <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points.</p>
-<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
-evas_object_move(object, 100, 100);
-evas_object_resize(object, 200, 200);
-Evas_Map map = evas_map_new(4);
-evas_map_util_points_populate_from_geometry(map, 100, 100, 200, 200, 0);
-</pre>
-
-<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object(map, object)</span>. </p>
-<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
-evas_object_move(object, 100, 100);
-evas_object_resize(object, 200, 200);
-Evas_Map map = evas_map_new(4);
-evas_map_util_points_populate_from_object(map, object);
-</pre>
-
-<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object_full(map, object, z)</span>, where <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points. </p>
-<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);
-evas_object_move(object, 100, 100);
-evas_object_resize(object, 200, 200);
-Evas_Map map = evas_map_new(4);
-evas_map_util_points_populate_from_object_full(map, object, 0);
-</pre>
-
-<h4>Manual Point Setting</h4>
-<p>Several effects are applied to an object by setting each point of the map to the right coordinates. For example, a simulated perspective is achieved as follows.</p>
-<pre class="prettyprint">evas_map_point_coord_set(map, 0, 300, 100, 0);
-evas_map_point_coord_set(map, 1, 450, 120, 0);
-evas_map_point_coord_set(map, 2, 450, 260, 0);
-evas_map_point_coord_set(map, 3, 300, 300, 0);
-</pre>
-
-<p>The Z coordinate is not used when setting points by hand; thus its value is not important.</p>
-
-<h4>Applying a Map </h4>
-<p>Regardless of the specific way you create a map, to apply it to a specific object, use</p>
-<pre class="prettyprint">evas_object_map_set(object, map);
-evas_object_map_enable_set(object, EINA_TRUE);
-</pre>
-
-<h4>Basic Utility Functions </h4>
-<p>Evas provides utility functions for common transformations:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate(map, angle, cx, cy)</span>: This performs a rotation of the <span style="font-family: Courier New,Courier,monospace">angle</span> degrees around the center point with the coordinates (cx, cy).</li>
-<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom(map, zoomx, zoomy, cx, cy)</span>: This performs a <span style="font-family: Courier New,Courier,monospace">zoomx</span> and <span style="font-family: Courier New,Courier,monospace">zoomy</span> zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).</li>
-</ul>
-
-<p>For example, the following code rotates an object around its center.</p>
-<pre class="prettyprint">int x, y, w, h;
-evas_object_geometry_get(object, &amp;x, &amp;y, &amp;w, &amp;h);
-Evas_Map *map = evas_map_new(4);
-evas_map_util_points_populate_from_object(map, object);
-evas_map_util_rotate(map, 45, x + (w / 2), y + (h / 2));
-evas_object_map_set(object, map);
-evas_object_map_enable_set(object, EINA_TRUE);
-evas_map_free(m);
-</pre>
-
-<p>The following code rotates an object around the center of the window.</p>
-<pre class="prettyprint">int w, h;
-evas_output_size_get(evas, &amp;w, &amp;h);
-Evas_Map *map = evas_map_new(4);
-evas_map_util_points_populate_from_object(map, object);
-evas_map_util_rotate(map, 45, w / 2, h / 2);
-evas_object_map_set(object, map);
-evas_object_map_enable_set(object, EINA_TRUE);
-evas_map_free(m);
-</pre>
-
-<h4>3D Utility Functions </h4>
-<p>Evas provides utility functions for 3D transformations.</p>
-<p>To make a 3D rotation, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate(map, anglex, angley, anglez, cx, cy, cz)</span>. With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.</p>
-<p>Rotating in the 3D space does not look natural. A more natural look becomes by adding perspective to the transformation, which is done with <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_perspective(map, px, py, z0, focal)</span> on the map after its position has been set.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> specify the &quot;infinite distance&quot; point in the 3D conversion, where all lines converge to.</li>
-<li><span style="font-family: Courier New,Courier,monospace">z0</span> specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates: any points on this Z value do not have their X and Y coordinates modified in the transform, while those further away (Z value higher) shrink into the distance, and those less than this value expand.</li>
-<li><span style="font-family: Courier New,Courier,monospace">focal</span> determines the &quot;focal length&quot; of the camera: this is the distance in reality between the camera lens plane (the rendering results are undefined at or closer than this) and the <span style="font-family: Courier New,Courier,monospace">z0</span> value; this function allows for some &quot;depth&quot; control.</li>
-</ul>
-<h4>Color and Lighting </h4>
-<p>Each point in a map can be set to a color, which is multiplied with the object&#39;s own color and linearly interpolated in between adjacent points. To do this, use <span style="font-family: Courier New,Courier,monospace">evas_map_point_color_set(map, index, r, g, b, a)</span> for each point of the map, or <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_color_set(map, r, g, b, a)</span> to set every point into the same color.</p>
-<p>To add lighting for the objects, which is useful with 3D transforms, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_lighting(map, lightx, lighty, lightz, lightr, lightg, lightb, ambientr, ambientg, ambientb)</span>:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">lightx</span>, <span style="font-family: Courier New,Courier,monospace">lighty</span> and <span style="font-family: Courier New,Courier,monospace">lightz</span> are the local light source coordinates;</li>
-<li><span style="font-family: Courier New,Courier,monospace">lightr</span>, <span style="font-family: Courier New,Courier,monospace">lightg</span> and <span style="font-family: Courier New,Courier,monospace">lightb</span> are the local light source colors;</li>
-<li><span style="font-family: Courier New,Courier,monospace">ambientr</span>, <span style="font-family: Courier New,Courier,monospace">ambientg</span> and <span style="font-family: Courier New,Courier,monospace">ambientb</span> are the ambient light colors. Evas sets the color of each point based on the distance to the light source, the angle with which the object is facing the light and the ambient light. The orientation of each point is important. If the map is defined counter-clockwise, the object faces away from the user and becomes obscured, since no light does not reflect from it.</li>
-</ul>
-
-<h2 id="engine" name="engine">Evas Engines Concept </h2>
-<p>Evas delegates most of the actual rendering work to its engines. Engines are the backends that Evas uses to render (primitive) objects on a canvas. The canvas can be the screen, or a buffer in the memory.</p>
-<p>Evas can work with and provides multiple engines, such as (this list is non-exhaustive):</p>
-<ul>
-<li>buffer: all the rendering takes place in a buffer</li>
-<li>fb: the rendering takes place in the system&#39;s framebuffer</li>
-<li>software_x11: this is the most used, using X11</li>
-<li>gl_x11: this also renders to an X11 window, except that it uses OpenGL</li>
-</ul>
-<p>These implement the rendering of all the basic objects by themselves, because they often can be accelerated by the hardware or backend software libraries to provide fast rendering.</p>
-<p>If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version. </p> 
-
-<h2 id="ui_rendering" name="ui_rendering">UI Rendering Mode</h2> 
-
-<p>Evas removes the need to know about the characteristics of your display system or what graphics calls are used to draw them and how. It deals on an object level where all you do is create and manipulate objects in a canvas, set their properties, and the rest is done for you. This rendering method is called the retained mode, whereas the immediate mode is an alternative rendering method.</p>
-
-<h3 id="immediate" name="immediate">Immediate Mode</h3>
-
-<p>The immediate mode is the most commonly used in graphics toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the portion of the client area that is invalidated.</p>
-
-<p class="figure">Figure: Immediate mode</p> 
-<p align="center"><img alt="Immediate mode" src="../../images/immediate_mode.png" /></p> 
-
-<p>The application commands any drawing issues as it needs, and the display system draws some GUIs. After the drawing is done, it appears in the destination. This mode allows you to have a exact control over the render cycles. However, if the draw commands are misused, unnecessary drawing can be performed or drawing never happen at all.</p> 
-<p>The following example explains the common usage of the immediate mode:</p> 
-
-<pre class="prettyprint">
-void update()
-{
-&nbsp;&nbsp;&nbsp;Image *img = load_image(NEW_IMG);
-
-&nbsp;&nbsp;&nbsp;// Switch button image to new one
-&nbsp;&nbsp;&nbsp;update_button_image(img);
-
-&nbsp;&nbsp;&nbsp;// Issue the invalidate area (button area) to be redrawn on the screen
-&nbsp;&nbsp;&nbsp;invalidate_area(button_x, button_y, button_w, button_h);
-
-&nbsp;&nbsp;&nbsp;// Move rectangle from (200, 200) to (300, 300)
-&nbsp;&nbsp;&nbsp;int rect_prev_x = rect_x;
-&nbsp;&nbsp;&nbsp;int rect_prev_y = rect_y;
-&nbsp;&nbsp;&nbsp;rectangle_x = 300;
-&nbsp;&nbsp;&nbsp;rectangle_y = 300;
-&nbsp;&nbsp;&nbsp;set_rect_position(rect_x, rect_y);
-   
-&nbsp;&nbsp;&nbsp;// Issue the invalidate area (changed area) to be redrawn on the screen
-&nbsp;&nbsp;&nbsp;int diff_x = rect_x – rect_prev_x;
-&nbsp;&nbsp;&nbsp;int diff_y = rect_y – rect_prev_y;
-&nbsp;&nbsp;&nbsp;invalidate_area(rect_prev_x, rect_prev_y, (rect_w + diff_x), (rect_h + diff_y));
-
-
-&nbsp;&nbsp;&nbsp;// After setting the invalidate area, request rendering to update the screen
-&nbsp;&nbsp;&nbsp;render();
-
-&nbsp;&nbsp;&nbsp;// Now you can see how the button image and rectangle position are changed
-}
-</pre>
-
-<h3 id="retained" name="retained">Retained Mode</h3>
-
-<p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated.</p>
-
-<p class="figure">Figure: Retained mode</p> 
-<p align="center"><img alt="Retained mode" src="../../images/retained_mode.png" /></p> 
-
-<p>Since Evas works with the retained mode, there is no need to command any drawings. The following example shows how to write a GUI code with Evas for your application:</p>
-
-<pre class="prettyprint">
-void create_image()
-{
-&nbsp;&nbsp;&nbsp;// Initialize an image object to be displayed on the screen
-&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
-
-&nbsp;&nbsp;&nbsp;// Set image resource
-&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, IMG, NULL);
-
-&nbsp;&nbsp;&nbsp;// Set image position 
-&nbsp;&nbsp;&nbsp;evas_object_move(img, 100, 100);
-
-&nbsp;&nbsp;&nbsp;// Set image size
-&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
-
-&nbsp;&nbsp;&nbsp;// Set image visibility (show or hide)
-&nbsp;&nbsp;&nbsp;evas_object_show(img);
-}
-
-void create_rectangle()
-{
-&nbsp;&nbsp;&nbsp;// Initialize an rectangle object to be displayed on the screen
-&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_rectangle_add(e);
-
-&nbsp;&nbsp;&nbsp;// Set rectangle color
-&nbsp;&nbsp;&nbsp;evas_object_color_set(rect, 255, 0, 0, 255);
-
-&nbsp;&nbsp;&nbsp;// Set rectangle position
-&nbsp;&nbsp;&nbsp;evas_object_move(rect, 200, 200);
-
-&nbsp;&nbsp;&nbsp;// Set rectangle size
-&nbsp;&nbsp;&nbsp;evas_object_resize(rect, 200, 200);
-
-&nbsp;&nbsp;&nbsp;// Set rectangle visibility (show or hide)
-&nbsp;&nbsp;&nbsp;evas_object_show(rect);
-}
-</pre>
-
-<p>A few main loops later you can replace the image with another one and move the rectangle. You only need to set a new image file to the image object and move the rectangle object. Evas computes the invalidate area and redraws the image and rectangle behind the application when it&#39;s on rendering time.</p>
-
-<pre class="prettyprint">
-void update()
-{
-&nbsp;&nbsp;&nbsp;// Set new image resource
-&nbsp;&nbsp;&nbsp;elm_image_file_set(img, NEW_IMG, NULL);
-
-&nbsp;&nbsp;&nbsp;// Set new rectangle position
-&nbsp;&nbsp;&nbsp;evas_object_move(rect, 300, 300);
-}
-</pre>
-
-<h3 id="evas_rendering" name="evas_rendering">Evas Rendering</h3>
-
-<p>Tizen Native applications work on the ecore main loop, and the loop goes on a few steps for every frame. Evas redraws some changes in the objects when the main loop goes to the idle enterer step. If there are no changes, Evas rendering is skipped. Otherwise, Evas calculates any changed portions of all display objects and redraws them.</p>
-
-<p class="figure">Figure: Evas rendering in the main loop</p> 
-<p align="center"><img alt="Evas rendering in the main loop" src="../../images/rendering1.png" /></p> 
-
-<p>To minimize the rendering, Evas tracks the states of all display objects, such as position, size, visibility, and color. Even if some of these states are changed but the object is hidden by other obscured objects, it is not redrawn. In other words, Evas draws only the necessary changes in the screen.</p>
-
-<p>The following figures illustrate how Evas redraws the changed area:</p>
-
-<ul><li><p>In the first example, there is a blue-color background object (a sky-blue color rectangle) and a partially hidden cloud image object. Above them, there are a red and green rectangle, and the &quot;Hello out there&quot; text is printed on the green rectangle.</p>
-
-<p class="figure">Figure: Evas redrawing example 1</p> 
-<p align="center"><img alt="Evas redrawing example 1" src="../../images/redrawing01.png" /></p> </li>
-
-<li><p>In the second example, some of the objects have moved (the cloud image is moved to right and the green rectangle is moved downwards).</p>
-
-<p class="figure">Figure: Evas redrawing example 2</p> 
-<p align="center"><img alt="Evas redrawing example 2" src="../../images/redrawing02.png" /></p> </li>
-
-<li><p>As a result, the third example illustrates some regions that require updates.</p>
-
-<p class="figure">Figure: Evas redrawing example 3</p> 
-<p align="center"><img alt="Evas redrawing example 3" src="../../images/redrawing03.png" /></p> </li>
-
-<li><p>Evas decides which portions are invalid and to be redrawn. The fourth example shows the cleaned portion of the screen, which is the redrawn area.</p>
-<p>Evas redraws the content only in the redrawn portions.</p> 
-<p class="figure">Figure: Evas redrawing example 4</p> 
-<p align="center"><img alt="Evas redrawing example 4" src="../../images/redrawing04.png" /></p></li> 
-
-<li><p>Finally, the fifth example shows how the screen is updated and the result is visible.</p> 
-
-<p class="figure">Figure: Evas redrawing example 5</p> 
-<p align="center"><img alt="Evas redrawing example 5" src="../../images/redrawing05.png" /></p>
-
-<p>If Evas worked in an immediate mode style, the application would need to calculate the changed areas themselves, adding extra work. With Evas, you can let Evas figure out the updates and you can yourself concentrate on the application and UI core and logic.</p></li></ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/event_types_n.htm b/org.tizen.guides/html/native/ui/event_types_n.htm
deleted file mode 100644 (file)
index e1f14b4..0000000
--- a/org.tizen.guides/html/native/ui/event_types_n.htm
+++ /dev/null
@@ -1,630 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Event Types</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                               
-                               <li><a href="#ecore">Ecore Events</a></li>
-                               <li><a href="#edje">Edje Events</a></li>
-                               <li><a href="#evas">Evas Events</a></li>
-                               <li><a href="#evas_object">Evas Object Events</a></li>
-                               <li><a href="#evas_smart_object">Evas Smart Object Events</a></li>
-               </ul>
-       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                         
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                             
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Event Types</h1> 
-  
-  
-  
-  <h2 id="ecore" name="ecore">Ecore Events</h2>
-
-<h3>Table of Contents</h3>
-
-<ul><li><a href="#ecore_events_useful_for_shortcuts">Ecore Events Useful for Shortcuts</a></li>
-<li><a href="#ecore_event_handler_add">Add an Event Handler: ecore_event_handler_add()</a></li>
-<li><a href="#ecore_event_handler_del">Remove an Event Handler: ecore_event_handler_del()</a></li>
-<li><a href="#ecore_event_add">Send Events to the Main Loop Yourself: ecore_event_add()</a></li>
-<li><a href="#ecore_event_type_new">Create Your Own Type of Events: ecore_event_type_new()</a></li>
-</ul>
-
-<p>Ecore events are used for low-level handling of events such as key presses, network connections, and communication with sub-processes.</p>
-<p>The low-level handling of key presses is particularly useful for shortcuts: instead of adding a signal handler to a specific graphical element, you can add one globally. This guarantees that no matter which UI component is currently receiving events, the shortcut is caught.</p>
-<p>Note that ecore events are also used to implement new graphical back-ends, but they are low-level and not useful for most applications.</p>
-<h3 id="ecore_events_useful_for_shortcuts">Ecore Events Useful for Shortcuts</h3>
-
-<p>There are eight ecore events for shortcuts:</p>
-<pre class="prettyprint">int ECORE_EVENT_KEY_DOWN;
-int ECORE_EVENT_KEY_UP;
-int ECORE_EVENT_MOUSE_BUTTON_DOWN;
-int ECORE_EVENT_MOUSE_BUTTON_UP;
-int ECORE_EVENT_MOUSE_MOVE;
-int ECORE_EVENT_MOUSE_WHEEL;
-int ECORE_EVENT_MOUSE_IN;
-int ECORE_EVENT_MOUSE_OUT;
-</pre>
-<p>The callbacks receive additional data through a <span style="font-family: Courier New,Courier,monospace">void *</span> object, whose type depends on the event that has been received.</p>
-<ul>
-<li>for ECORE_EVENT_KEY_DOWN and ECORE_EVENT_KEY_UP: 
-<pre class="prettyprint">
-typedef struct _Ecore_Event_Key Ecore_Event_Key;
-
-struct _Ecore_Event_Key 
-{
-&nbsp;&nbsp;&nbsp;const char *keyname;
-&nbsp;&nbsp;&nbsp;const char *key;
-&nbsp;&nbsp;&nbsp;const char *string;
-&nbsp;&nbsp;&nbsp;const char *compose;
-&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;int same_screen;
-};
-</pre>
-
-</li>
-
-<li>for ECORE_EVENT_MOUSE_BUTTON_DOWN and ECORE_EVENT_MOUSE_BUTTON_UP: 
-<pre class="prettyprint">typedef struct _Ecore_Event_Mouse_Button Ecore_Event_Mouse_Button;
-struct _Ecore_Event_Mouse_Button 
-{
-&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-&nbsp;&nbsp;&nbsp;unsigned int buttons;
-&nbsp;&nbsp;&nbsp;unsigned int double_click;
-&nbsp;&nbsp;&nbsp;unsigned int triple_click;
-&nbsp;&nbsp;&nbsp;int same_screen;
-
-&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;} root;
-
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 0 if normal mouse, 1+ for other mouse-devices (eg multi-touch - other fingers)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Radius of press point - radius_x and y if its an ellipse (radius is the average of the 2)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Angle relative to perpendicular (0.0 == perpendicular), in degrees
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as x, y root.x, root.y, but with sub-pixel precision, if available
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
-&nbsp;&nbsp;&nbsp;} multi;
-};
-</pre>
- 
-</li>
-<li>for ECORE_EVENT_MOUSE_MOVE and ECORE_EVENT_MOUSE_WHEEL: 
-<pre class="prettyprint">
-typedef struct _Ecore_Event_Mouse_Wheel Ecore_Event_Mouse_Wheel;
-struct _Ecore_Event_Mouse_Wheel 
-{
-&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;int same_screen;
-&nbsp;&nbsp;&nbsp;int direction;
-&nbsp;&nbsp;&nbsp;int z;
-
-&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;} root;
-};
-</pre>
-</li>
-<li>for ECORE_EVENT_MOUSE_IN and int ECORE_EVENT_MOUSE_OUT: 
-<pre class="prettyprint">
-typedef struct _Ecore_Event_Mouse_Move Ecore_Event_Mouse_Move;
-struct _Ecore_Event_Mouse_Move 
-{
-&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;int same_screen;
-
-&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;} root;
-
-&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; // 0 if normal mouse, 1+ for other mouse-devices (eg multi-touch - other fingers)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; // radius of press point - radius_x and y if it is an ellipse (radius is the average of the two)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; // pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; // angle relative to perpendicular (0.0 == perpendicular), in degrees
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; // same as x, y root.x, root.y, but with sub-pixel precision, if available
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
-&nbsp;&nbsp;&nbsp;} multi;
-};
-</pre>
-
-</li>
-</ul>
-<h3 id="ecore_event_handler_add" name="ecore_event_handler_add">Add an Event Handler: ecore_event_handler_add()</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function enables registering a callback for the given event. Its prototype is:</p>
-<pre class="prettyprint">
-Ecore_Event_Handler* 
-ecore_event_handler_add(int type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Event_Handler_Cb func,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const void* data)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">type</span> is an identifier for the event; for example, if you wish to receive notifications when keys are pressed, give <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">func</span> is the callback that is called when the event takes place.</li>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data that is given as the argument to the callback; it is optional and <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
-<li>return value is a pointer to the event handler, which can be used later to uninstall the handler.</li>
-</ul>
-
-<p>The type of the callback function is defined as follows.</p>
-<pre class="prettyprint">
-Eina_Bool (* Ecore_Event_Handler_Cb) (void *data, int type, void *event)</pre>
-<p>The callback function declaration is similar to:</p>
-<pre class="prettyprint">Eina_Bool some_ecore_event_cb(void *data, int type, void *event);</pre>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the <span style="font-family: Courier New,Courier,monospace">data</span> which was given as a parameter to ecore_event_handler_add().</li>
-<li><span style="font-family: Courier New,Courier,monospace">type</span> is the same as the <span style="font-family: Courier New,Courier,monospace">type</span> which was given as a parameter to ecore_event_handler_add().</li>
-<li><span style="font-family: Courier New,Courier,monospace">event</span> is an object whose actual type depends on the value of the <span style="font-family: Courier New,Courier,monospace">type</span> parameter and is one of <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Key</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Button</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Wheel</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Move</span>.</li>
-<li>The return value is either <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_PASS_ON</span>, to allow other callbacks for that event be called, or <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_DONE</span> to not call them.</li>
-</ul>
-<p>The code below is a short example of how to set a global variable to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> when the Control key is pressed.</p>
-<pre class="prettyprint">
-Eina_Bool ctrl_pressed = EINA_FALSE;
-
-static Eina_Bool
-_key_down_cb(void *data __UNUSED__, int type __UNUSED__, void *ev)
-{
-&nbsp;&nbsp;&nbsp;// The callback is used with the ECORE_EVENT_KEY_DOWN signal: the
-&nbsp;&nbsp;&nbsp;// parameter &quot;void *ev&quot; is therefore of the actual type Ecore_Event_Key
-&nbsp;&nbsp;&nbsp;// The following renders its fields accessible
-&nbsp;&nbsp;&nbsp;Ecore_Event_Key *event = ev;
-
-&nbsp;&nbsp;&nbsp;// Test whether the key that is pressed is Ctrl.
-&nbsp;&nbsp;&nbsp;if (!strcmp(&quot;Control_L&quot;, event-&gt;key))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If it is, store that piece of information
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl_pressed = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// Let the event continue to other callbacks which have not been called yet
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
-}
-
-ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
-</pre>
-
-<h3 id="ecore_event_handler_del" name="ecore_event_handler_del">Remove an Event Handler: ecore_event_handler_del()</h3>
-<p>To remove an event handler, use the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_del()</span> function. The prototype is:</p>
-<pre class="prettyprint">
-void* ecore_event_handler_del(Ecore_Event_Handler *event_handler)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">event_handler</span> is the value returned by <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span>.</li>
-<li>The return value is the <span style="font-family: Courier New,Courier,monospace">data</span> pointer that was used in the corresponding call to <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span>.</li>
-</ul>
-<h3 id="ecore_event_add" name="ecore_event_add">Send Events to the Main Loop Yourself: ecore_event_add()</h3>
-<p>You can send events to the main-loop, which helps to handle actions of various origins through the same codepath. Note that this is a thread-safe operation.</p>
-<p>To send an event, use the <span style="font-family: Courier New,Courier,monospace">ecore_event_add()</span> function. The prototype is </p>
-<pre class="prettyprint">Ecore_Event* 
-ecore_event_add(int type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* ev,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_End_Cb func_free,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* func_free_data)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">type</span> is the event type. For example, <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ev</span> is the event data. It is given as a parameter to the callback.</li>
-<li><span style="font-family: Courier New,Courier,monospace">func_free</span> is a function to free <span style="font-family: Courier New,Courier,monospace">ev</span> after the callback is called. It is optional: <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
-<li><span style="font-family: Courier New,Courier,monospace">func_free_data</span> is a pointer to additional data that is given as an argument to the <span style="font-family: Courier New,Courier,monospace">func_free</span> callback. It is optional: <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
-</ul>
-
-<p>The type of the <span style="font-family: Courier New,Courier,monospace">func_free</span> function is defined as follows.</p>
-<pre class="prettyprint">void (* Ecore_End_Cb)(void *user_data, void *func_free_data)</pre>
-<p>The callback function declaration is thus similar to</p>
-<pre class="prettyprint">void some_func_free(void *user_data, void *func_free_data);</pre>
-
-<h3 id="ecore_event_type_new" name="ecore_event_type_new">Create Your Own Type of Events: ecore_event_type_new()</h3>
-
-<p>You can create your own events. It also helps to use a single codepath.</p>
-<p>The function for creating your own events is <span style="font-family: Courier New,Courier,monospace">ecore_event_type_new()</span>. The prototype is: </p>
-<pre class="prettyprint">int ecore_event_type_new(void);</pre>
-<p>It generates a new unique identifier, which you can use as <span style="font-family: Courier New,Courier,monospace">type</span> in the functions described above.</p>
-  
-  <h2 id="edje" name="edje">Edje Events</h2>
-
-<h3>Table of Contents</h3>
-<ul>
-<li><a href="#events_guide_edje_without_layout">Basic Usage, for a Single Part</a></li>
-<li><a href="#events_guide_edje_with_layout">Usual Usage for Parts Aggregated in Groups: with Layouts</a></li>
-</ul>
-
-<p>Edje themes have <span style="font-family: Courier New,Courier,monospace">program</span> sections. These are small sections triggered upon the reception of a signal that can execute actions, such as changing the state of an edje part and running another program.</p>
-<p>For more information on themes and programs, see the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<h3 id="events_guide_edje_without_layout" name="events_guide_edje_without_layout">Basic Usage for a Single Part</h3>
-<p>An example <span style="font-family: Courier New,Courier,monospace">program</span> is shown below: </p>
-<pre class="prettyprint">program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;got.a.click&quot; &quot;color_changer&quot;;
-}
-</pre>
-<p>This is a program named &quot;change_color&quot;, which triggers on mouse clicks on the current part and emits a signal &quot;got.a.click&quot;. The source is set to &quot;color_changer&quot;.</p>
-
-<p>To catch this signal from the C side, you need to use either <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span>. The only difference between the two is that the previous one operates on an edje object and the latter one on an elementary object. Unless you do not use Elementary at all, use the Elementary variant.</p>
-<p>The prototypes of these two functions are shown below.</p>
-<pre class="prettyprint">void
-edje_object_signal_callback_add(Edje_Object *obj, const char *emission, const char *source,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edje_Signal_Cb func, void *data)
-</pre>
-<pre class="prettyprint">void
-elm_object_signal_callback_add(Evas_Object *obj, const char *emission, const char *source,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edje_Signal_Cb func, void *data)
-</pre>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">obj</span> the object which emits the signal that you react on.</li>
-<li><span style="font-family: Courier New,Courier,monospace">emission</span> is the signal name (&quot;*&quot; acts as a wildcard).</li>
-<li><span style="font-family: Courier New,Courier,monospace">source</span> is the signal source (the second parameter to <span style="font-family: Courier New,Courier,monospace">SIGNAL_EMIT</span> above). (&quot;*&quot; acts as a wildcard.)</li>
-<li><span style="font-family: Courier New,Courier,monospace">func</span> is the callback when <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">source</span> match.</li>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data to pass that is given as the argument to the callback. It is optional and NULL is an acceptable value.</li>
-</ul>
-
-<p>The type of the callback function is defined as follows. </p>
-<pre class="prettyprint">void (*Edje_Signal_Cb) (void *data, Evas_Object *obj, const char *emission, const char *source);</pre>
-
-<p>The callback function definition is similar to</p>
-<pre class="prettyprint">void func(void *data, Evas_Object *obj, const char *emission, const char *source);</pre>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the data which was given as parameter to either <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object which emits the signal.</li>
-<li><span style="font-family: Courier New,Courier,monospace">emission</span> is the signal name.</li>
-<li><span style="font-family: Courier New,Courier,monospace">source</span> is the signal source.</li>
-</ul>
-
-<h3 id="events_guide_edje_with_layout" name="events_guide_edje_with_layout">Usual Usage for Parts Aggregated in Groups: with Layouts</h3>
-<p>Most of the time, edje and elementary are used together. In particular, you can define a group in Edje and use it as a layout in Elementary. This enables doing the theming and object placement in Edje while benefiting from the higher-level functions of Elementary. This is achieved through <span style="font-family: Courier New,Courier,monospace">layouts</span>, which contain several parts and are explained in the Layout guide (in <a href="containers_mn.htm#layout">mobile</a> and <a href="containers_wn.htm#layout">wearable</a> applications).</p>
-<p>Since there are several parts in a layout, it is not possible to use <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span>, as they require a single emitter object. The solution is to use the dedicated function <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span>. Its prototype is shown below.</p>
-<pre class="prettyprint">void
-elm_layout_signal_callback_add(Evas_Object *obj, const char *emission, const char *source,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edje_Signal_Cb func, void *data)
-</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> works very similarly to the functions described in the previous section. The only difference is the type of the object in the first parameter. For <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> it is a pointer to an Evas_Object, which is obtained through <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> as described in the Layout guide (in <a href="containers_mn.htm#layout">mobile</a> and <a href="containers_wn.htm#layout">wearable</a> applications). </p>
-
-  
-
-
-  
-  
-  <h2 id="evas" name="evas">Evas Events</h2>
-
-<h3>Table of Contents</h3>
-<ul>
-<li><a href="#evas_event_callback_add_del">Adding Callbacks to Canvases: evas_event_callback_add/del</a></li>
-<li><a href="#evas_events_types">Types of Evas Events</a></li>
-</ul>
-
-<p>Evas events happen on a canvas as a whole. This kind of events are too low-level for writing applications and are most often used when writing the graphical toolkit itself.</p>
-
-<h3 id="evas_event_callback_add_del" name="evas_event_callback_add_del">Adding Callbacks to Canvases: evas_event_callback_add/del</h3>
-<p>The callbacks are added with <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span>. Its prototype is</p>
-<pre class="prettyprint">void
-evas_event_callback_add(Evas* e, Evas_Callback_Type type, Evas_Event_Cb func, const void* data)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">e</span> is the evas canvas on which the events happen. If needed, it can be obtained from an Evas_Object through the <span style="font-family: Courier New,Courier,monospace">evas_object_evas_get()</span> function.</li>
-<li><span style="font-family: Courier New,Courier,monospace">type</span> is the type of event that triggers the callback (the list is in the next section).</li>
-<li><span style="font-family: Courier New,Courier,monospace">func</span> is the function that is called.</li>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data that is given as an argument to the callback. It is optional and <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
-</ul>
-
-<p>The type of the callback function is defined as follows.</p>
-<pre class="prettyprint">void (* Evas_Event_Cb) (void *data, Evas *e, void *event_info)</pre>
-
-<p>The callback function definition is similar to</p>
-<pre class="prettyprint">void some_evas_object_event_cb(void *data, Evas *e, void *event_info);</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the <span style="font-family: Courier New,Courier,monospace">data</span> which was given as the parameter to <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">e</span> is the canvas on which the event occurred.</li>
-<li><span style="font-family: Courier New,Courier,monospace">event_info</span> is data which depends on the object type and the event at play. The documentation must be read for each such event.</li>
-</ul>
-
-<h3 id="evas_events_types" name="evas_events_types">Types of Evas Events</h3>
-<p>The values are defined from the <span style="font-family: Courier New,Courier,monospace">Evas_Callback_Type</span> enum. Some of them are not used for <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> but are used in the previous section.</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_PRE</span>: The rendering on the canvas is about to be updated.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_POST</span>: The rendering on the canvas is updated.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_IN</span>: The canvas receives focus.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_OUT</span>: The canvas loses focus.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_IN</span>: Any object on the canvas receives focus. It is advisable to use <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span> instead.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_OUT</span>: Any object on the canvas loses focus. It is advisable to use <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span> instead.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_PRE</span>: Rendering on the canvas starts.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_POST</span>: Rendering on the canvas finishes. </li>
-</ul>
-
-  <h2 id="evas_object" name="evas_object">Evas Object Events</h2>
-
-
-
-<h3>Table of Contents</h3>
-<ul>
-<li><a href="#evas_object_event_callback_add_del">Adding and Removing Callbacks: evas_object_event_callback_add/del</a></li>
-<li><a href="#evas_object_events_types">Types of Evas Object Events</a></li>
-</ul>
-
-<p>Each of the evas objects on a given evas canvas can be manipulated independently. They send events, to which callbacks can be attached through <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> and removed with <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_del()</span>. These events all relate to single objects, not the whole canvas.</p>
-
-<h3 id="evas_object_event_callback_add_del" name="evas_object_event_callback_add_del">Adding and Removing Callbacks: evas_object_event_callback_add/del</h3>
-<p>Callbacks are added with <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span>. Its prototype is</p>
-<pre class="prettyprint">void
-evas_object_event_callback_add(Evas_Object* obj, Evas_Callback_Type type, Evas_Object_Event_Cb func, const void* data)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object to attach the callback to.</li>
-<li><span style="font-family: Courier New,Courier,monospace">type</span> is the type of event that triggers the callback (the list is in the next section).</li>
-<li><span style="font-family: Courier New,Courier,monospace">func</span> is the function that is called.</li>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data that is given as the argument to the callback. It is optional and <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
-</ul>
-
-<p>The type of the callback function is defined as follows.</p>
-<pre class="prettyprint">
-void (* Evas_Object_Event_Cb) (void *data, Evas *e, Evas_Object *obj, void *event_info)
-</pre>
-
-<p>The callback function definition is similar to</p>
-<pre class="prettyprint">
-void some_evas_object_event_cb(void *data, Evas *e, Evas_Object *obj, void *event_info);
-</pre>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the <span style="font-family: Courier New,Courier,monospace">data</span> which was given as the parameter to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace">e</span> is the canvas on which the event occurred.</li>
-<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object to which the event happened.</li>
-<li><span style="font-family: Courier New,Courier,monospace">event_info</span> is data which depends on the object type and event at play. The documentation must be read for each event.</li>
-</ul>
-<h3 id="evas_object_events_types" name="evas_object_events_types">Types of Evas Object Events</h3>
-<p>The values are defined from the <span style="font-family: Courier New,Courier,monospace">Evas_Callback_Type</span> enum. Some of them are not used for <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span>, but are used in the next section.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span>: the pointer got over an object (with no other object between the two). This takes place no matter how the pointer becomes directly above the object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_OUT</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span>, but when the pointer goes outside an object&#39;s area. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Out</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: a mouse button is pressed while the object is receiving events (either because the pointer is on top of the object or because the object had focus). <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Up</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Move</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_WHEEL</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Wheel</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Down</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Up</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Move</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_DOWN</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Down</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_UP</span>: triggered similarly to <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Up</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span>: the object gained focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span>: the object lost focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_SHOW</span>: the object is shown by a call to <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HIDE</span>: the object is hidden by a call to <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span>. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOVE</span>: the object&#39;s origin was moved (origin is the top-left corner at the creation time of the object). <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span>: the object is resized. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESTACK</span>: the object is re-stacked by <span style="font-family: Courier New,Courier,monospace">evas_object_stack_below()</span>, <span style="font-family: Courier New,Courier,monospace">evas_object_stack_above()</span> or other events. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_DEL</span>: the object is deleted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FREE</span>: for internal use only. Do not use (the object resources are about to be freed). <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HOLD</span>: for internal use only. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Hold</span> struct.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CHANGED_SIZE_HINTS</span>: the size hints of the object changed.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_PRELOADED</span>: an image which was preloaded through <span style="font-family: Courier New,Courier,monospace">evas_object_image_preload()</span> is loaded. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_UNLOADED</span>: the image data is unloaded. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback is NULL.</li>
-</ul>
-
-<h2 id="evas_smart_object" name="evas_smart_object">Evas Smart Object Events</h2>
-
-<h3>Table of Contents</h3>
-<ul>
-<li><a href="#evas_object_smart_callback_add">Adding a Callback on an Event: evas_object_smart_callback_add()</a></li>
-<li><a href="#evas_object_smart_callback_del">Removing a Callback on an Event: evas_object_smart_callback_del()</a></li>
-<li><a href="#evas_smart_objects_examples">Examples</a>
-       <ul><li><a href="#evas_object_smart_callback_add_example">Basic Usage: Button with a Callback on the &quot;clicked&quot; Signal</a></li>
-       <li><a href="#evas_object_smart_callback_del_example">Usage with evas_object_smart_callback_del(): Clicking on the Button Removes the Callback</a></li>
-       </ul>
-</li>
-</ul>
-
-<p>Evas smart objects events are the most widely-used type of events in graphical applications, since they are used for signals such as &quot;clicked&quot;, &quot;clicked,double&quot; (double-click), &quot;pressed&quot;, etc. They are identified by strings and each smart object is able to define its own events (although the names follow conventions).</p>
-
-<h3 id="evas_object_smart_callback_add" name="evas_object_smart_callback_add">Adding a Callback on an Event: evas_object_smart_callback_add()</h3>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for an event to an object. Its prototype is</p>
-<pre class="prettyprint">
-void
-evas_object_smart_callback_add(Evas_Object* obj, const char* event, Evas_Smart_Cb func, const void* data)
-</pre>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object to add the callback to.</li>
-<li><span style="font-family: Courier New,Courier,monospace">event</span> is the name of the event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">func</span> is the function that is called.</li>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is a pointer to additional data that is given as the argument to the callback. It is optional and <span style="font-family: Courier New,Courier,monospace">NULL</span> is an acceptable value.</li>
-</ul>
-<p>The type of the callback function is defined as follows.</p>
-<pre class="prettyprint">
-void (* Evas_Smart_Cb) (void *data, Evas_Object *obj, void *event_info)</pre>
-<p>The callback function definition is similar to</p>
-<pre class="prettyprint">void some_evas_smart_cb(void *data, Evas_Object *obj, void *event_info);</pre>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">data</span> is the same as the <span style="font-family: Courier New,Courier,monospace">data</span> which is given as the parameter to evas_object_smart_callback_add().</li>
-<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the object for which the event happened.</li>
-<li><span style="font-family: Courier New,Courier,monospace">event_info</span> is data, which depends on the object type and event at play. The actual type is given in the documentation for the callback that is triggered.</li>
-</ul>
-<p>The following defines the <span style="font-family: Courier New,Courier,monospace">_button_clicked()</span> function and sets it as the callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> event of an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> (a button here).</p>
-<pre class="prettyprint">
-static void
-_button_clicked(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;// Insert function body here
-}
-
-static void
-some_function(void) 
-{
-&nbsp;&nbsp;&nbsp;// Code to build the window object
-&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(window);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
-}
-</pre>
-
-<p>If some of the arguments are not used by the callback function, the compiler may raise the &quot;unused parameter&quot; warning. To avoid it, you can annotate the argument with the <span style="font-family: Courier New,Courier,monospace">__UNUSED__</span> macro, which is a compiler-independent way to let the compiler know that the parameter is willingly unused rather than by a mistake.</p>
-<pre class="prettyprint">void cb(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__);</pre>
-
-<p>For a given object and event, callbacks are called in the order they have been added. The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function does not execute any special processing if it is called several times with the same callback function and/or data. Callbacks are called as many times as they have been added and in the order they have been added.</p>
-
-<h3  id="evas_object_smart_callback_del" name="evas_object_smart_callback_del">Removing a Callback on an Event: evas_object_smart_callback_del()</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_del()</span> function enables deleting a callback for a signal on an object. Its prototype is</p>
-
-<pre class="prettyprint">void*
-evas_object_smart_callback_del(Evas_Object* obj, const char* event, Evas_Smart_Cb func)
-</pre>
-
-<p>It removes the first match for the given event and callback and returns the <span style="font-family: Courier New,Courier,monospace">data</span> pointer that was used in the corresponding call to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>.</p>
-
-<h3 id="evas_smart_objects_examples" name="evas_smart_objects_examples">Examples</h3>
-<h4 id="evas_object_smart_callback_add_example" name="evas_object_smart_callback_add_example">Basic Usage: Button with a Callback on the &quot;clicked&quot; Signal</h4>
-<pre class="prettyprint">static void
-_button_clicked(void *data __UNUSED__, Evas_Object *obj __UNUSED__, void *event_info __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
-&nbsp;&nbsp;&nbsp;fflush(stdout);
-&nbsp;&nbsp;&nbsp;elm_exit();
-}
-
-static void
-_add_button(Evas_Object *window) 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me To Exit!&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
-
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-}
-</pre>
-
-<h4 id="evas_object_smart_callback_del_example" name="evas_object_smart_callback_del_example">Usage with evas_object_smart_callback_del(): Clicking on the Button Removes the Callback</h4>
-<pre class="prettyprint">static void
-_button_clicked(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
-&nbsp;&nbsp;&nbsp;fflush(stdout);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_del(obj, &quot;clicked&quot;, _button_clicked);
-}
-
-static void
-_add_button(Evas_Object *window) 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-
-&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me!&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
-
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-}
-</pre>
-
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/events_effects_n.htm b/org.tizen.guides/html/native/ui/events_effects_n.htm
deleted file mode 100644 (file)
index 20da9b4..0000000
--- a/org.tizen.guides/html/native/ui/events_effects_n.htm
+++ /dev/null
@@ -1,124 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Event and Effect</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#event_handling">Handling Events</a></li>
-                       <li><a href="#animation_effect">Creating Animations and Effects</a></li>
-               </ul>
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Event and Effect</h1> 
-  <p>Tizen allows you to manage different kinds of events and create various types of effects and animations in your application.</p>
-<p>The main features of events and effects are:</p> 
-  <ul>
-       <li><a href="#event_handling">Handling events</a> <p>Enables you to handle various types of events.</p></li> 
-       <li><a href="#animation_effect">Creating animations and effects</a> <p>Enables you to create animations and effects in your application.</p></li>
-       </ul>
-  
-<h2 id="event_handling" name="event_handling">Handling Events</h2>
-  
-<p>The EFLs rely on events and callbacks. In case of an event, (for example, a key press, mouse click or a battery running low), the mainloop calls the callback functions that are associated to that specific event. After the callbacks have finished, the mainloop takes over and waits for new events, upon which to trigger new callbacks.</p>
-<p>It is important to do light work in the callbacks and to return to the mainloop relatively quickly. If there is heavy work to do, it is best to use an asynchronous mechanism like Ecore_con for network I/O or threads for CPU-intensive tasks. Failure to return quickly to the mainloop blocks the application&#39;s UI and it appears frozen.</p>
-
-<h3 id="events_types" name="events_types">EFL Event Types</h3>
-<p>There are several event types in the EFLs, and their use depends on the level of the event. The event types from lower- to higher-level are:</p>
-<ul>
-<li><a href="event_types_n.htm#evas_smart_object">Evas smart events</a> are the most often used and take place on collections of evas objects (which are most typically handled). They are called &quot;smart&quot; because they have internal logic and can define their own events while other event types are fixed.</li>
-<li><a href="event_types_n.htm#ecore">Ecore events</a> are the lowest-level events and come directly from the system. Except for application-wide shortcuts, it is not advisable to use them.</li>
-<li><a href="event_types_n.htm#evas_object">Evas object events</a> concern the objects that are on the canvas.</li>
-<li><a href="event_types_n.htm#evas">Evas events</a> are events on the graphical canvas as a whole. They are fairly low-level and mostly useful when drawing directly on the canvas.</li>
-</ul>
-
-  <p class="figure">Figure: Event types in the EFLs: Inner boxes are more specific than outer ones</p> 
-  <p align="center"><img alt="Event types in the EFLs: Inner boxes are more specific than outer ones" src="../../images/events_scope.png" /></p>
-  
-       
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">There are also <a href="event_types_n.htm#edje">Edje signals</a>, which come from program sections in themes; they can be used from high-level Elementary APIs or a low-level Edje API.</td> 
-        </tr>
-   </tbody> 
-  </table> 
-
-<h3 id="basic_events_flow" name="basic_events_flow">Basic Event Flow</h3>
-<p>A realistic scenario involving various types of events is an application showing a button, which triggers the download of a file to be processed. There are progress bars for the operations.</p>
-<p>Create the window, create a box, set it vertical and add a button and two progress bars. At first, only the button is fully visible.</p>
-<p>When the user clicks on the button, an evas smart object event named &quot;clicked&quot; is emitted. The callback then starts the download in Ecore_con, displays the first progress bar and adds a callback to monitor the download progress. When the download progress changes, the callback updates the progress bar.</p>
-<p>After the download is finished, the second progress bar is displayed and the file processing is offloaded to another thread through Ecore_thread. The processing function regularly updates the progress bar (wrapped in ecore_main_loop_thread_safe_call_async() because GUI operations are not thread-safe).</p>
-<p>Events enable operations taking more than a few milliseconds&#39; time to be executed outside of the mainloop, therefore not blocking UI redraws.</p>
-<p>Below is an illustration for the event flow that follows a click on the screen.</p>
-
-  <p class="figure">Figure: Event flow for a user click</p> 
-  <p align="center"><img alt="Event flow for a user click" src="../../images/events_flow.png" /></p>
-  
-   
-  <h2 id="animation_effect" name="animation_effect">Creating Animations and Effects</h2>
-
-<p>This programming guide introduces the animation functionalities provided by the EFL: Ecore animators, Elementary transitions, Edje animations, and Evas Map animations.</p>
-
-<p>The first option for creating animations with EFL is to use <a href="animations_effects_n.htm#ecore_animation">Ecore animators</a>. To create an Ecore animation, you must first determine the duration of the animation, and then define a callback function that performs the animation with that duration.</p>
-
-<p>You can also create animations using <a href="animations_effects_n.htm#elm_transit">Elementary transitions</a>. Elementary transitions allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
-
-<p>A third option for animating objects is to use <a href="animations_effects_n.htm#edje_animation">Edje animations</a>, which are based on a simple principle: transitioning from one state to another. To animate an object with Edje, you have to first define the start and end states of the animation, and then transition the object from the start state to the end state.</p>
-
-<p>Finally, <a href="animations_effects_n.htm#evas_map_animation">Evas Map animations</a> allow you to apply transformations to all types of objects by way of UV mapping. In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/font_setting_n.htm b/org.tizen.guides/html/native/ui/font_setting_n.htm
deleted file mode 100644 (file)
index ce1efcb..0000000
--- a/org.tizen.guides/html/native/ui/font_setting_n.htm
+++ /dev/null
@@ -1,231 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Font Setting</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-                       <ul class="toc">
-                               <li><a href="#apply">Applying System Font Settings</a></li>
-                               <li><a href="#supported">Supported Font Styles</a></li>
-                       </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm">Font Setting Tutorial</a></li>        
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                     
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Font Setting</h1> 
-       
-
-<p>Tizen provides various methods for setting fonts of the application text. Basically, all UI components have a default font, which can be changed according to the system settings.</p>
-
-<p>The font handling methods include:</p>
-
-<ul> 
-   <li>Setting the font for a UI component using the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications)</li> 
-   <li>Setting the font using EDC</li>
-   <li>Changing the font and text size using the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) 
-   
-<p>In the application, you can set a system-wide font and font size to text(textblock) parts with text classes (except <span style="font-family: Courier New,Courier,monospace;">tizen</span>). When the system applies a new system-wide font and font size to the application, the font size of text(textblock) parts with the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class are not affected. </p>
-<p>The following words in the <span style="font-family: Courier New,Courier,monospace;">text_class</span> definition are reserved for the system:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">button</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">label</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">entry</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">title_bar</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">list_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">grid_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">toolbar_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">menu_item</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tizen</span></li>
-</ul>
-
-
-<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
-<pre class="prettyprint">
-elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
-elm_config_font_overlay_apply();
-</pre>
-</li>
-</ul>
-
-<h2 id="apply" name="apply">Applying System Font Settings</h2>
-
-<p>Tizen provides a special &quot;Tizen&quot; font name. The &quot;Tizen&quot; font name does not match with any specific font; it is just an alias for a system-defined font (system font). When you create a text(textblock) part with the &quot;Tizen&quot; font name in the application&#39;s EDC, the system font is loaded into the user application when those objects are created. Additionally, you can apply the system font to a text or textblock part by using the text class, as described above.</p>
-
-<p>The following EDC example shows how to apply the system font to a TEXT or TEXTBLOCK part by using the &quot;Tizen&quot; font name and the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class. As font name is &quot;Tizen&quot; and the font size is set to 36, the system font is loaded in size 36. If the system setting changes, this part loads the new system font. However, its font size is not changed, because the text class is <span style="font-family: Courier New,Courier,monospace;">tizen</span>.</p>
-
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;tizen&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-<p>If the part has a predefined text classes other than <span style="font-family: Courier New,Courier,monospace;">tizen</span>, its font size is resized as well.</p>
-
-<pre class="prettyprint">
-description 
-{
-&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;label&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-
-<h2 id="supported" name="supported">Supported Font Styles</h2>
-<p>The font styles supported by the EFL are listed in the following table.</p>
-
-<table>
-<caption>Table: Supported font styles</caption>
-<tbody>
- <tr>
-  <th>Font feature</th>
-  <th>Style attribute</th>
- </tr>
-<tr>
- <td rowspan="3"><span style="font-family: Courier New,Courier,monospace;">font_style</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">oblique</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">italic</span></td>
-</tr>
-<tr>
- <td rowspan="9"><span style="font-family: Courier New,Courier,monospace;">font_width</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultracondensed</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extracondensed</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">condensed</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semicondensed</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semiexpanded</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">expanded</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extraexpanded</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultraexpanded</span></td>
-</tr>
-<tr>
- <td rowspan="11"><span style="font-family: Courier New,Courier,monospace;">font_weight</span></td>
- <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">thin</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultralight</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">light</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">book</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">medium</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">semibold</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">bold</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">ultrabold</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">black</span></td>
-</tr>
-<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">extrablack</span></td>
-</tr>
-</tbody>
-</table>
-       
-<p>The style attributes are not case-sensitive (however, the font feature names are).</p>
-<p>If you set the weight or width attribute to <span style="font-family: Courier New,Courier,monospace;">style=</span>, it is processed to the right attribute.</p>
-<pre class="prettyprint">
-font=TizenSans:style=Bold // Textblock
-&quot;TizenSans:style=Bold&quot;; // Text font
-&lt;font=TizenSans:style=Bold&gt; // Markup tag
-</pre>
-
-<p>You can also use each attribute separately:</p>
-
-<pre class="prettyprint">
-font=TizenSans font_style=Regular font_weight=Bold // Textblock
-&lt;font=TizenSans font_style=Regular font_weight=Bold&gt; // Markup tag
-</pre>
-
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/main_loop_n.htm b/org.tizen.guides/html/native/ui/main_loop_n.htm
deleted file mode 100644 (file)
index f3980a9..0000000
--- a/org.tizen.guides/html/native/ui/main_loop_n.htm
+++ /dev/null
@@ -1,379 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Main Loop</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#Timers">Timers</a></li>
-                       <li><a href="#Animators">Animators</a></li>
-                       <li><a href="#Descriptors_Handling">File Descriptors</a></li>
-                       <li><a href="#Threads">Threads</a></li>
-                       <li><a href="#Idlers">Idlers</a></li>
-               </ul>
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Main Loop</h1> 
-  
-<p>The EFL is event-driven. This means that the application polls for data, and listens for events to interact with it.</p>
-
-<p>The Ecore library provides the main loop abstraction. It gets data when data is available and sends the events so that costly polling threads are not needed. Ecore manages polling, timers, events, and file descriptors. When there is no ongoing event, the main loop automatically enters an idle mode, minimizing the power consumption. The loop wakes up when needed.</p>
-  
-<h2 id="Timers" name="Timers">Timers</h2>
-
-<p>Ecore provides timers, which schedule events that are executed later at a specific time. The event can occur once or several times at specific intervals.</p>
-
-<p>A timer callback prototype looks like the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> callback function. This function receives data from the application, and returns a Boolean value to specify whether it is called again or completed. The following macros are also provided:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>: the function is called again after the timeout.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>: the function is not called again, Ecore destroys automatically everything associated with the timer.</li>
-</ul>
-
-<p>To create and destroy a timer:</p>
-
-<ul>
-<li>To create a timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> function. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Timer</span> object.
-<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> function is run after 2 seconds and it receives <span style="font-family: Courier New,Courier,monospace;">my_data</span>. It is renewed while its count variable value is under 5, and stops after that.</p>
-<pre class="prettyprint">
-Eina_Bool my_timed_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;count++;
-
-&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-}
-ecore_timer_add(2.0, my_timed_cb, my_data);
-</pre>
-</li>
-
-<li>To delete the timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_del()</span> function. The timer to delete must still be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the timer is not running, the function cannot be called.</li>
-</ul>
-
-<p>To manage a timer:</p>
-<ul>
-<li>To change the timer&#39;s interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_set()</span> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_get()</span> function to get the timer&#39;s current interval.</li>
-
-<li>To get the timer&#39;s pending time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_pending_get()</span> function.</li>
-
-<li>To delay the timer&#39;s next occurrence, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_delay()</span> function. The function adds the specified time to the current interval. It does not change the future occurrences&#39; interval. You can also reset the current interval to its full value by using the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_reset()</span> function.</li>
-
-<li>To pause the currently running timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_freeze()</span> function. The remaining time is saved and used again when the timer is resumed with the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_thaw()</span> function.</li>
-
-<li>To query the current value of the defined timer infrastructure precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_get()</span> function. A higher delay means that more timers can be run together. It diminishes the need to use system wake-ups and thus lowers the power consumption.
-<p>To set the precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_set()</span> function. This sets the precision for all timers. For example, there are 2 timers, one that expires in 2.0 seconds and another that expires in 2.1 seconds. If the precision is set to 0.1 seconds, Ecore requests the next expiration to happen in 2.1 seconds and runs both callbacks at once, instead of one at 2.0 seconds and the other one 0.1 seconds later. However, if there is no timer expiring in 2.1 seconds, the timeout is at the minimum interval, 2 seconds.</p></li>
-</ul>
-
-<h2 id="Animators" name="Animators">Animators</h2>
-
-<p>Animators are a specific type of timer, specially designed for on-screen animation purposes:</p>
-
-<ul>
-<li>The time interval is usually known when they are created.</li>
-<li>They are called at each screen refresh and their interval can vary. The interval can depend on the system load, the target power consumption, and other factors. The exact interval is not relevant.</li>
-</ul>
-
-<p>To implement animators, Ecore provides the Ecore animator subsystem.</p>
-
-<h3>Forever-running Animator</h3>
-
-<p>To create an animation that runs for an indefinite time: </p>
-
-<pre class="prettyprint">
-Eina_Bool my_anim_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;count++;
-&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-}
-ecore_animator_add(my_anim_cb, my_data);
-</pre>
-
-<p>This example looks the same as the one using an Ecore timer. The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function takes the callback function and data to pass to it, and returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. The function is called at a system-defined interval until it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> instead of <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>.</p>
-
-<h3>Specific-duration Animator</h3>
-
-<p>An animator callback for an animator running a specific time has a different prototype than the forever running animator.</p>
-
-<p>This callback function receives both data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to abort, or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to continue.</p>
-
-<p>To create and destroy the animator:</p>
-<ul>
-<li>To create the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function. The first parameter specifies the animator duration, the second parameter is the callback function, and the third parameter is the data to pass to the callback. The data parameter is optional.
-<pre class="prettyprint">
-Eina_Bool my_anim_cb(void *data, double position)
-{
-&nbsp;&nbsp;&nbsp;if (position &lt; .5) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-}
-ecore_animator_timeline_add(5., my_anim_cb, my_data);
-</pre>
-
-<p>In this example, the animator is specified to run for five seconds. The function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> as soon as the position among the timeline passes half of the duration, 2.5 seconds.</p>
-
-<p>Ecore can generate a virtual position from the original one using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map(position, map, v1, v2)</span>. Several maps are available:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear from 0.0 to 1.0.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), and 3.0 is cubed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient <span style="font-family: Courier New,Courier,monospace;">* v1</span>, interpolated with the power of <span style="font-family: Courier New,Courier,monospace;">v2</span> curve.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then wobble like a spring to the rest position 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
-</ul>
-
-<p class="figure">Figure: Position maps</p> 
-<p align="center"><img alt="Position maps" src="../../images/pos_map_all.png" /></p> 
-</li>
-
-<li>To destroy the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function. The animator to destroy must be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the animator is not running, the function cannot be called.</li>
-</ul>
-
-<p>To manage the animator:</p>
-<ul>
-<li>To pause the currently running animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function. Note that time continues ticking even if the animator is frozen, and that resuming the animation using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function does not actually resume, if the full runtime has been passed in the meanwhile.</li>
-
-<li>To query Ecore for the interval between 2 animator calls, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</li>
-
-<li>To change the interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set(interval)</span> function. Note that too small a value causes performance and power consumption issues, and too high a value makes the animation jerky.</li>
-</ul>
-
-<h2 id="Descriptors_Handling" name="Descriptors_Handling">File Descriptors</h2>
-
-<p>Ecore provides an infrastructure to monitor file descriptors, so that files do not have to be blocked or polled to read or write on them. Instead, monitor sockets, pipes, or other streams are used to get a file descriptor.</p>
-
-<p>To manage the file descriptors:</p>
-<ul>
-<li>To set a callback, use the <span style="font-family: Courier New,Courier,monospace;">_my_cb_func()</span> function. Its first parameter is the data passed to it (optional), and the second one is the Ecore file descriptor handler. Its return value is, as in most Ecore callbacks, <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>. It tells Ecore whether it wants to be called again or whether its treatment is finished.</li>
-
-<li>To listen to events, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_add()</span> function.</li>
-
-<li>To wait for incoming data (that is, to read data) on the <span style="font-family: Courier New,Courier,monospace;">my_fd</span> file descriptor, passing <span style="font-family: Courier New,Courier,monospace;">my_data</span>:
-
-<pre class="prettyprint">
-Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
-{
-&nbsp;&nbsp;&nbsp;int fd;
-&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
-&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
-</pre>
-</li>
-
-<li>To delete a file descriptor handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_del()</span> function. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</li>
-
-<li>To get the handler&#39;s file descriptor, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_fd_get()</span> function.</li>
-
-<li>To select whether a flag is active on a handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_get()</span> function. For example, the handler is set to monitor both <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> and <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span>. The following example finds out whether the function was called because of an error:
-
-<pre class="prettyprint">
-Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
-{
-&nbsp;&nbsp;&nbsp;int fd;
-&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
-&nbsp;&nbsp;&nbsp;if (ecore_main_fd_handler_active_get(handler, ECORE_FD_ERROR) == EINA_TRUE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// We have an error!
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb, my_data, NULL, NULL);
-</pre>
-</li>
-
-<li>To change the flags the handler is monitoring, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_set()</span> function.</li>
-</ul>
-
-<h2 id="Threads" name="Threads">Threads</h2>
-
-<p>EFL is not entirely thread-safe. This means that if a task is running in another thread and, for example, an Evas object shows the status progress of this task, the object cannot be updated from within the thread. Updating can only be done from the main thread that runs the main loop.</p>
-
-<p>Ecore provides a facility to perform tasks on separate worker threads. It is not a simple wrapper around standard threads provided by the operating system. With Ecore threads, it is easier to dispatch a worker function to perform some heavy tasks and get the result once it completes. It does not block the application UI. It is also easy to cancel and reschedule threads. Several threads can be launched simultaneously, since Ecore schedules them according to the number of processors the system has and the maximum amount of concurrent threads set for the application.</p>
-
-<p>Ecore has 2 kinds of threads:</p>
-<ul>
-<li>Short jobs do not give any kind of information on their status to the parent. They are best used for short computing-intensive snippets of code.</li>
-<li>Feedback jobs give information on their status to the parent. They are best used for longer snippets requiring a feedback loop, such as an ongoing file download.</li>
-</ul>
-
-<p>Ecore creates a pool of worker threads. The exact count is computed from the number of CPUs or cores, or it can be specified by the application itself.</p>
-
-<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left. In the following example, there are 2 threads defined by <span style="font-family: Courier New,Courier,monospace;">my_short_job()</span> and <span style="font-family: Courier New,Courier,monospace;">my_feedback_job()</span>. Both threads take 2 parameters: some data passed to them, and the actual thread running. Call a callback when the jobs end, whether they are cancelled (<span style="font-family: Courier New,Courier,monospace;">my_job_cancel()</span>) or end normally (<span style="font-family: Courier New,Courier,monospace;">my_job_end()</span>).</p>
-
-<pre class="prettyprint">
-struct feedback_msg
-{
-&nbsp;&nbsp;&nbsp;int pos;
-};
-
-void my_short_job(void *data, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;usleep(200000);
-}
-
-void my_feedback_job(void *data, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 100; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usleep(50000); // You can have some real computation done
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct feedback_msg *message = malloc(sizeof(struct feedback_msg));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (message) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message-&gt;pos = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ecore_thread_check(thread))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-}
-
-void my_feedback_job_notify(void *data, Ecore_Thread *thread, void *msg)
-{
-&nbsp;&nbsp;&nbsp;struct feedback_msg *message = msg;
-&nbsp;&nbsp;&nbsp;free(message);
-}
-
-void my_job_end(void *data, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has normally ended.\n&quot;);
-}
-
-void my_job_cancel(void *data, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has been cancelled.\n&quot;);
-}
-
-ecore_thread_run(my_short_job, my_job_end, my_job_cancel, my_data);
-ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;my_job_cancel, my_data, EINA_FALSE);
-</pre>
-
-<p>To manage threads:</p>
-
-<ul>
-<li>To cancel a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel()</span> function. However, note that this is done cooperatively: the thread continues to run until it exists. Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> function regularly to check whether the thread has been marked for cancellation and exit if <span style="font-family: Courier New,Courier,monospace;">true</span>.</li>
-
-<li>To run threads that are not accounted for in the worker thread pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function with the last parameter set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.
-
-<p>The feedback message a thread sends as notification can be any kind of data. In the above example, it is a simple integer, but it can be as complex as needed.</p>
-</li>
-
-<li>To execute a thread later, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule()</span> function. This function is added to the end of the pending tasks.</li>
-
-<li>To get the maximum number of concurrent threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function. If needed, set it by using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function, or reset the default value using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.</li>
-
-<li>To query the number of active threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span> function. To query the number of available worker threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function, which is basically the same as the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> - <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>.</li>
-</ul>
-
-<h2 id="Idlers" name="Idlers">Idlers</h2>
-
-<p>When the rendering is done and all work is finished, the main loop enters its idle state until the next loop. You can get the functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Enterer</span>, <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Exiter</span>, and <span style="font-family: Courier New,Courier,monospace;">Ecore_Idler</span>.</p>
-
-<p class="figure">Figure: Idle loop</p> 
-<p align="center"><img alt="Idle loop" src="../../images/idlers.png" /></p> 
-
-<p>The idle enterers, exiters, and idlers all have the same prototype, <span style="font-family: Courier New,Courier,monospace;">my_idler()</span>, which receives data and returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to tell Ecore whether it wants to be called again or is finished.</p>
-
-<p>To manage the idlers:</p>
-<ul>
-<li>To add an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_add()</span> function.</li>
-<li>To delete an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function.</li>
-
-<li>To add and delete idle exiters, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_del()</span> functions.</li>
-
-<li>To add and delete idle enterers, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_del()</span> functions. The <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_before_add()</span> function is also available, if you want your function to be added at the top of the list so that it is called before the others.</li>
-</ul>
-
-<pre class="prettyprint">
-Eina_Bool my_idle_enterer_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-
-Eina_Bool my_idle_exiter_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-}
-
-Eina_Bool my_idler(void *data)
-{
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-
-ecore_idle_enterer_add(my_idle_enterer_cb, my_data);
-ecore_idle_exiter_add(my_idle_exiter_cb, my_data);
-ecore_idler_add(my_idler_cb, my_data);
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/multiple_screens_n.htm b/org.tizen.guides/html/native/ui/multiple_screens_n.htm
deleted file mode 100644 (file)
index 844439a..0000000
--- a/org.tizen.guides/html/native/ui/multiple_screens_n.htm
+++ /dev/null
@@ -1,264 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Multiple Screen Support</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">        
-                       <li><a href="#key_concepts">Key Concepts</a></li>
-                       <li><a href="#apply">Applying the Base Scale</a></li>
-                       <li><a href="#without">Scaling without the Base Scale</a></li>                  
-               </ul>
-       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>         
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Multiple Screen Support</h1> 
-
-  <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen applications, you must take this into account if you want your application to function well in various device models.</p> 
-  <p>Before <a href="#apply">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key_concepts">key concepts of multiple screen support</a>.</p> 
-  
-   <h2 id="key_concepts" name="key_concepts">Key Concepts</h2> 
-  <p>Before building a native application for multiple resolutions using Tizen native UI framework, make sure you are familiar with the following concepts:</p> 
-  <ul>
-  <li><a href="#multi">Multi-scale</a></li>
-  <li><a href="#base">Base scale</a></li>
-  </ul>
-
-  <h3 id="multi" name="multi">Multi-scale in Tizen Native UI Framework</h3> 
-  <p>Tizen native UI framework supports multiple scaling. If the application is implemented considering scalability, it is enough to change the <span style="font-family: Courier New,Courier,monospace;">elm_scale</span> value in different device environments without modifying the application code.</p> 
-  
-  <p>Scale 1.0 in Tizen native UI framework means that the application is displayed in a set size and is not scaled. Scale 1.0 is used in a display environment, such as a desktop. In the desktop environment, the monitor has a resolution between 1280 x 800 and 1920 x 1080, with a size between 20 and 27 inch, and the dpi between 80 and 100.</p>
-  
-  <p>If an application is scaled up or down after implementing it in a desktop environment, it can be used in another device without modifying the code. Each device has a proper scale value for adjusting the application size. Edje, which handles layout and themes in Tizen native UI framework, gets the size of an object by multiplying the size specified by an application using the scale value.</p> 
-  
-  <p>The following figure illustrates a 50 px wide object in a 1280 px wide monitor. If the same object is displayed with not scaling in mobile environment, it looks very small. To show the object in mobile environment in the similar size as in the monitor, define the scale is 2.0, so that the object size is 100 px instead of 50 px.</p>
-  
-  <p class="figure">Figure: Scaling from desktop to mobile</p> 
-  <p align="center"><img alt="Scaling from desktop to mobile" src="../../images/scaling.png" /> </p> 
-  
-  <h3 id="base" name="base">Base Scale</h3> 
-  <p>The object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;. </p> 
- 
-  <p>The size of a scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object (on the left) with the size 10 is created in a device with scale 1.0, the size of the object is 20 in a device with scale 2.0, and 40 in a device with scale 4.0.</p>
-  
-  <p class="figure">Figure: Base scale</p> 
-  <p align="center"><img alt="Base scale" src="../../images/base_scale.png" /> </p> 
-  
-  <p>The middle object has a base scale 2.0. The following example shows its scaling in a device with scale 4.0:</p>
-  
-  <table>
-<tbody>
-<tr>
- <td>Scale = Device scale (information in the target) / Base scale (information in the application)
-<p>For example: 2.0 = 4.0 / 2.0</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-  <p>You must declare the following values as base scale:</p>
-  <ul>
-       <li>WVGA: 1.8</li>
-       <li>HD: 2.4</li>
-</ul>
-  
-  
-  
-  <h2 id="apply" name="apply">Applying the Base Scale</h2> 
-  <p>To create an application that supports multiple screen sizes, you must learn how to set the base scale in:</p> 
-  <ul> 
-   <li><a href="#set_edc">EDC</a></li> 
-   <li><a href="#set_c">C code</a></li> 
-  </ul> 
-  
-  <h3 id="calc_base" name="calc_base">Calculating the Base Scale</h3>
-
-<p>To get the base scale value of your own display, you must know the DPI of the display. Based on the display DPI, you can calculate the base scale, since it is basically proportional to the display DPI with the following formula:</p>
-
-<pre class="prettyprint">
-base_scale = (DPI / 90) * profile_factor</pre>
-
-<p>The profile factor is the value for fitting the object size as a profile. The distance between the user eye and the display differs for each profile. This means that the object size must be different if the device display is changed.</p>
-
-<p>The following table lists the profile factors for various profiles.</p>
-
-<table>
-<caption>Table: Profile factors</caption>
-<tbody>
-<tr>
- <th>Profile</th>
- <th>Profile factor</th>
-</tr>
- <tr>
- <td>Wearable</td>
- <td>0.4</td>
- </tr>
- <tr>
- <td>Mobile</td>
- <td>0.7</td>
- </tr> 
- <tr>
- <td>Desktop</td>
- <td>1.0</td>
- </tr>
- </tbody></table>
-
-<p>For example, if your display has 233 dpi and the platform uses the mobile profile, the base scale is calculated like this:</p>
-<pre class="prettyprint">
-1.8 = (233 / 90) * 0.7</pre>
-
-<p>The base scale of the device is 1.8. If the application is made in the environment using 233 dpi and mobile profile, its base scale must be set to 1.8. For a desktop, the DPI is 90, and its base scale is 1.0.</p>
-
- 
-<h3 id="set_edc" name="set_edc">Setting the Base Scale in EDC</h3> 
-  <p>The application must specify the scale its base scale. The edje objects are scaled properly if the base scale is set in the collection of the edc file, as in the following example:</p> 
-  
-  <table class="note"><tbody>
-<tr>
-<th class="note">Note</th> 
-      </tr>
-<tr>
-<td class="note">The base scale for WVGA is 1.8, and for HD application, 2.4.</td> 
-      </tr>
-</tbody></table>
-<pre class="prettyprint">collections 
-{
-&nbsp;&nbsp;&nbsp;base_scale: 1.8; // This value is for WVGA application
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-  <h3 id="set_c" name="set_c">Setting the Base Scale in C</h3> 
-  <p>The size of the object must be specified in EDC. However, sometimes it is better for an application to the object size in a C file. If the size is defined with no scaling in the C file, the application is displayed in the same size even if the scale changes. To avoid this, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro, as in the following example:</p> 
-
-<pre class="prettyprint">#define ELM_SCALE_SIZE(x) x / elm_app_base_scale_get() * elm_config_scale_get()</pre>
-
-  <p>in the definition, the size (<span style="font-family: Courier New,Courier,monospace;">x</span>) is changed to a size based on 1.0 (<span style="font-family: Courier New,Courier,monospace;">x/elm_app_base_scale_get()</span>) and it is multiplied with the scale of the current target (<span style="font-family: Courier New,Courier,monospace;">elm_config_scale_get()</span>).</p>
-  
-  <p>Set the base scale using the <span style="font-family: Courier New,Courier,monospace;">elm_app_base_scale_set()</span> function:</p>
-  
-<pre class="prettyprint">int app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;elm_app_base_scale_set(1.8); // This value is for WVGA application
-}
-</pre> 
-  <p>After setting the base scale, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro to set the size of an object in the application:</p> 
-
-<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
-evas_object_resize(object, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
-</pre> 
- 
-  <p>You can use <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro in any API related with setting objects sizes in Tizen native applications.</p> 
-  
-  <h2 id="without" name="without">Scaling without the Base Scale</h2>   
-
-<p>In Tizen, each device has a scale value in proportion to the display. If scaling is enabled, the objects are drawn on the display by multiplying with the user-defined object size and the device scale. If the base scale is set, the objects are drawn by dividing the user-defined object size with the base scale and multiplying it by the device scale.</p>
-
-<p>If you use the scale feature without setting the base scale, the result is the same as if you set the base scale to 1.0. Then you do not need to care about the base scale variables, because the pixels roll like a virtual pixel. For example, if you set 1 pixel in 129 dpi without setting the base scale value, the 1 pixel before scaling is equivalent to 1 real physical pixel after scaling. In case of 233 dpi, it is the same with 1.8 pixels after scaling. </p>
-
-<p>Always consider the pixel before scaling when defining the application UI, in order to ensure a proper UI display on the screen with a diversity of densities.</p>
-
-<pre class="prettyprint">int app_create(void *data)
-[ Conversion Formula ]
-Real physical pixel = (a pixel before scaling) x (dpi / 90) x 0.7
-</pre> 
-<p>Where  90 is the default DPI on a desktop and 0.7 is the mobile profile factor.</p>
-
-<p>The following table shows some examples.</p>
-
-<table>
-<caption>Table: Pixel conversions</caption>
-<tbody>
-<tr>
- <th></th>
- <th>Base</th>
- <th>Low-density device (such as WVGA)</th>
- <th>High-density device (such as HD)</th>
-</tr>
- <tr>
- <td>DPI</td>
- <td>129</td>
- <td>233</td>
- <td>306</td> 
- </tr>
- <tr>
- <td>A pixel before scaling</td>
- <td>100</td>
- <td>100</td>
- <td>100</td> 
- </tr>
- <tr>
- <td>Real physical pixel</td>
- <td>100</td>
- <td>180</td>
- <td>240</td> 
- </tr>
- <tr>
- <td>Actual base scale</td>
- <td>1.0</td>
- <td>1.8</td>
- <td>2.4</td> 
- </tr> 
- </tbody></table>
-
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/preferences_n.htm b/org.tizen.guides/html/native/ui/preferences_n.htm
deleted file mode 100644 (file)
index c665ef9..0000000
--- a/org.tizen.guides/html/native/ui/preferences_n.htm
+++ /dev/null
@@ -1,686 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Component Preferences</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#customize">Customizing UI Components</a></li>
-                               <li><a href="#focus">Managing UI Component Focus</a></li>
-                               </ul>   
-       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm">UI Components Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>     
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                         
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>UI Component Preferences</h1> 
-  
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-  
-  <h2 id="customize" name="customize">Customizing UI Components</h2> 
-
-
-<p>Elementary UI components use the Edje library EDC themes to manage their look.</p>
-
-<h3 id="elm_theme" name="elm_theme">Elementary Theme</h3>
-
-<p>An Elementary theme is an Edje EDC file that contains groups composed of parts and programs. For more information about Edje, refer to the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<h4 id="use_theme_styles" name="use_theme_styles">Use Theme Styles</h4>
-
-<p>Elementary UI components provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one UI component. For example, you can create a new style for a button component to change its appearance without modifying the default theme.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">When creating a new style, knowledge of how each UI component is themed is required, because setting another style always replaces the entire group used by the UI component. Important signals and parts must be there for the object to behave properly.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>When several styles are loaded in the current theme, you can set a different style to a specific UI component using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to see the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
-
-<p>The default theme specifies several styles for the button component. The code below shows how to set the &quot;anchor&quot; style of a newly created button component.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *button;
-
-// Create a button object 
-button = elm_button_add(parent);
-
-// Set its style to &quot;anchor"&quot;
-elm_object_style_set(button, &quot;anchor&quot;);
-</pre>
-
-<h4 id="load_theme_styles" name="load_theme_styles">Load Theme Styles</h4>
-
-<p>Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:</p>
-  <ul>
-   <li>overlays</li>
-   <li>extensions</li>
-  </ul>
-
-<p>When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the UI component, it looks at the extensions list.</p>
-
-<h5 id="overlay_chapter" name="overlay_chapter">Overlay</h5>
-
-<p>An overlay can replace the look of all UI components by overriding the default style. If we create a new style called &quot;default&quot; for the button component and add it as an overlay, the Elementary uses the overlay for all button components overriding the default theme.</p>
-
-<p>Here is how to add an overlay to your application&#39;s theme.</p>
-
-<pre class="prettyprint">
-elm_theme_overlay_add(NULL, &quot;./theme_button.edj&quot;);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Here we assume that the &quot;theme_button.edj&quot; file only contains a new theme for the button component.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button components defined in the application. You must make sure that the &quot;theme_button.edj&quot; file reimplements everything that was previously defined in the default theme concerning the button component.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p>This is how to remove the previously added overlay to return to the default theme.</p>
-
-<pre class="prettyprint">
-elm_theme_overlay_del(NULL, &quot;./theme_button.edj&quot;);
-</pre>
-
-<h5 id="extension" name="extension">Extension</h5>
-
-<p>With extensions, we can write styles that we can apply to some UI components (not all of them) by using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
-
-<p>The application adds a theme to the list of extensions with the following call.</p>
-
-<pre class="prettyprint">
-elm_theme_extension_add(NULL, &quot;./theme_button_style_custom.edj&quot;);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Here we assume that the &quot;theme_button_style_custom.edj&quot; file contains a new button style called &quot;custom&quot;.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>This is how to use the new &quot;custom&quot; style on a button component.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *button;
-
-// Create a button object 
-button = elm_button_add(parent);
-
-// Set its style to &quot;custom&quot; 
-elm_object_style_set(button, &quot;custom&quot;);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">When using <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add</span> or <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add</span> to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush</span> function to flush Elementary theme caches. Thus, the theme of all UI components that use the default theme is reloaded.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h4 id="create_new_theme" name="create_new_theme">Create a New Theme</h4>
-
-<p>This is how to create a new theme object.</p>
-
-<pre class="prettyprint">
-Elm_Theme *new_theme = elm_theme_new();
-</pre>
-
-<p>This function creates an empty specific theme that only uses the default theme. It has its own private set of extensions and overlays (which are empty by default). Specific themes do not fall back to the themes of parent objects. They are not intended for this use.</p>
-
-<p>This is how to apply this theme to a UI component and its children (a button, for example).</p>
-
-<pre class="prettyprint">
-// Create a button component 
-Evas_Object *button = elm_button_add();
-
-// Set the new theme to the button component 
-elm_object_theme_set(button, new_theme);
-</pre>
-
-<h3 id="customizing_style" name="customizing_style">Customizing a UI Component Style</h3>
-
-<p>UI component themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<p>A new Edje style can be added for a UI component. The best way is to copy the existing &quot;default&quot; style, rename it, and update it to your needs.</p>
-
-<h4 id="check_custom_style" name="check_custom_style">Create a Customized Style for the Check Component</h4>
-
-<p>As an example, we show how to create a new style for the <span style="font-family: Courier New,Courier,monospace">check</span> component. The aim is to update the background and the main pictures of this UI component with custom pictures.</p>
-
-<p>The EDC source file concerning the check component (check.edc file) is composed of several groups.</p>
-
-<pre class="prettyprint">
-group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/default&quot;;
-}
-
-group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/toggle&quot;;
-}
-</pre>
-
-<p>Those two groups define two different styles for the check component (the &quot;default&quot; style and the &quot;toggle&quot; style).</p>
-
-<p>We copy the group corresponding to the &quot;default&quot; style in a new file to create a new style called &quot;custom&quot;. This new style is saved in the &quot;check_custom.edc&quot; file.</p>
-
-<pre class="prettyprint">
-group 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/custom&quot;;
-&nbsp;&nbsp;&nbsp;// Here is the copy of the content of &quot;default&quot; style 
-}
-</pre>
-
-<p>In the new group (&quot;elm/check/base/custom&quot;), we have to find the parts we want to modify. Here, the appropriate parts are &quot;bg&quot; and &quot;check&quot; parts.</p>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 16 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: VERTICAL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill.smooth: 0;
-&nbsp;&nbsp;&nbsp;}
-}
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -2 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check.png&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>We do not detail all the options that can be modified here, but assume that the user is familiar with <a href="edje_n.htm">Edje</a> and knows Edje basics.</p>
-
-<p>Our custom pictures filenames are:</p>
-  <ul>
-   <li>check_base_custom.png for the bg part</li>
-   <li>check_custom.png for the check part</li></ul>
-
-<p>We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.</p>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;   
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base_custom.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-                
-&nbsp;&nbsp;&nbsp;}
-}
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
-        
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-            
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check_custom.png&quot;;
-&nbsp;&nbsp;&nbsp;}
-        
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Here, we assume that the custom images are the same size as the &quot;default&quot; images.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h4 id="add_theme_to_project" name="add_theme_to_project">Add the Theme File to Your Project</h4>
-
-<p>Once written, the check_custom.edc file is put in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span>. directory of the application project in the SDK.</p>
-
-<p>When building the application, the SDK calls the Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">check_custom.edj</span> file. This file can be loaded from our application.</p>
-
-<h4 id="use_new_style" name="use_new_style">Use the New Style</h4>
-
-<p>This is how to add the new theme file as an extension in the application.</p>
-
-<pre class="prettyprint">
-char edj_path[PATH_MAX] = {0, };
-
-// Get the full path of the edj file 
-app_get_resource(&quot;/edje/check_custom.edj&quot;, edj_path, (int)PATH_MAX);
-
-// Load check custom style as an extension 
-elm_theme_extension_add(NULL, edj_path);
-</pre>
-
-<p>Use the &quot;custom&quot; style on a new check component.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check;
-
-// Create a check object 
-check = elm_check_add(parent);
-
-// Set its style to &quot;custom&quot; 
-elm_object_style_set(check, &quot;custom&quot;);
-</pre>
-
-<h4 id="special_theme_parts" name="special_theme_parts">Special Theme Parts</h4>
-
-<p>Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span> are modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_set_text()</span> function. The content of <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts is updated using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function.</p>
-
-<h5 id="swallow_parts" name="swallow_parts">Swallow Parts</h5>
-
-<p>In the previous example (the check component &quot;default&quot; style), there is a part called &quot;elm.swallow.content&quot; that is of the type <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>.</p>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to_x: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 128;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check1, *content;
-
-// Create a check object 
-check1 = elm_check_add(parent);
-
-// Set the content of the check object 
-elm_object_part_content_set(check1, &quot;elm.swallow.content&quot;, content);
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">We can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a UI component&#39;s style, if we want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the UI component&#39;s behavior.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h5 id="text_parts" name="text_parts">Text Parts</h5>
-
-<p>The same is done with parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span>. The check &quot;default&quot; style contains a part named &quot;elm.text&quot;.</p>
-
-<pre class="prettyprint">
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;elm.text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -2 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans,Edje-Vera&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: -1.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: "default" 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>This is how to modify the content of the &quot;elm.text&quot; part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check2;
-
-// Create a check object 
-check2 = elm_check_add(parent);
-
-// Set the text of the check object 
-elm_object_part_text_set(check2, &quot;elm.text&quot;, &quot;Test text&quot;);
-</pre>
-  
-   <h2 id="focus" name="focus">Managing UI Component Focus</h2>
-  
-<h3 id="Presentation" name="Presentation">Focus Presentation</h3>
-
-<h4>Concept of Focus</h4>
-<p>Focus is a graphical user interface concept. A component, for example, a UI component, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press.</p>
-
-<h4>Giving Focus</h4>
-
-<p>Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press).</p>
-
-<p>There are mainly two ways to set focus on a graphical elements:</p>
-
-<ul>
-<li>Direct selection: this is done by clicking on the element.</li>
-<li>Relative selection: this is done by moving the selection from a UI component to another, such as going to the previous or next one; this is done with a keyboard.</li>
-</ul>
-
-<p>Direct selection does not really need any kind of special treatment as the user explicitly selects the UI component to interact with.</p>
-
-<p>Relative selection&#39; default order is the one the UI components have been added to the canvas. That may not be appropriate, if they are added programmatically in different order than they appear on-screen.</p>
-  
-<h3 id="Movement" name="Movement">Moving Focus</h3>
-
-<h4>Concept of Focus Chain</h4>
-<p>The order the focus goes from a UI component to another is called the focus chain. As said before, the default focus chain is set to the order the UI components have been added to the canvas.</p>
-
-<h4>Focusable Objects</h4>
-<p>An object can be focused if the following conditions apply:</p>
-
-<ul>
-<li>object is visible</li>
-<li>object is enabled</li>
-<li>object accepts focus</li>
-<li>object&#39;s subtree (if any) is focusable</li>
-<li>all of object&#39;s parents have their subtrees focusable</li>
-</ul>
-
-<p>If any of these conditions do not apply, the object is unfocusable.</p>
-
-<h4>Handling Key Input</h4>
-
-<p>Handling of the keys is done automatically by Elementary. According to which key the user pressed, Elementary switches the focus in the selected direction. For example, using the <span style="font-family: Courier New,Courier,monospace;">Tab</span> key the focus goes to the next object in the natural order, whereas using the direction keys the focus goes to the next object in the requested direction.</p>
-
-<h4>Hiding, Deleting or Disabling a Focused Object</h4>
-
-<p>When a UI component is hidden, deleted, or disabled, it becomes unfocusable.</p>
-
-<p>When a focused object is unfocusable, the focus is moved to another object.</p>
-
-<h4>Selecting Next Object</h4>
-
-<p>When the user wants to switch the focus to the next object (i.e. cycle focus), Elementary searches the first object which is focusable.</p>
-
-<p>If there is a disabled or read-only object in the focus chain, the focus goes to the following object in the requested direction.</p>
-
-<h3 id="Customization" name="Customization">Customizing Focus</h3>
-
-<p>There are several reasons why to customize the focus chain of an application, for example:</p>
-
-<ul>
-<li>If you have created a form with labels and text entries next to them, the focus moves to the entry field when the user clicks on the associated label.</li>
-<li>If you have created an interface with several columns (table), set the focus chain as you wish, for example, going horizontally instead of going vertically, regardless whatever the order the UI components are added.</li>
-</ul>
-
-<h4>Customizing Object&#39;s Focus Exit Chain </h4>
-
-<p>Set the object to focus after other object in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set(object, next, direction)</span>. Use the following directions:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_NEXT</span>: next UI component in natural order</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_PREVIOUS</span>: previous UI component in natural order</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_UP</span>: UI component to focus when going up</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_DOWN</span>: UI component to focus when going down</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_RIGHT</span>: UI component to focus when going right</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_LEFT</span>: UI component to focus when going left</li>
-</ul>
-
-<p>Set the object next to another in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get(object, direction)</span>.</p>
-
-<h4>Customizing Whole Application&#39;s Focus Chain</h4>
-
-<p>To customize the application&#39;s custom chain:</p>
-
-<pre class="prettyprint">
-Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
-
-Eina_List *focus_chain = NULL;
-focus_chain = eina_list_append(focus_chain, obj3);
-focus_chain = eina_list_append(focus_chain, obj2);
-// The chain is obj3, then obj2. We set it.
-elm_object_focus_custom_chain_set(main, focus_chain);
-// Here we prepend obj5 at the beginning of the chain.
-elm_object_focus_chain_prepend(main, NULL, obj5);
-// We append obj1 after obj3.
-elm_object_focus_chain_append(main, obj3, obj1);
-// We prepend obj4 before obj1.
-elm_object_focus_chain_prepend(main, obj1, obj4);
-</pre>
-
-<p>The focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj1, obj2</span>.</p>
-
-<p>This actually applies to any container: it is possible to set the focus chain of, for example, a box.</p>
-
-<h4>Customizing Collision of Both</h4>
-
-<p>If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.</p>
-
-<p>Following on the previous example, if <span style="font-family: Courier New,Courier,monospace;">obj4</span> has <span style="font-family: Courier New,Courier,monospace;">obj5</span> defined as its next object, the actual focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4</span>, and loop back to <span style="font-family: Courier New,Courier,monospace;">obj5</span>.</p>
-
-<h3 id="On_Component" name="On_Component">Focus on UI Component</h3>
-
-<p>If your Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component if applicable.</p>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get(object)</span> to set whether a specific object has the focus. Set the focus to an object using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set(object, set)</span>, where <span style="font-family: Courier New,Courier,monospace;">set</span> is a Boolean value. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to that given object. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_False</span>, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after <span style="font-family: Courier New,Courier,monospace;">evas_object_show(object)</span> has been called. Call the function back when the object receives or loses focus by registering on smart event &quot;focused&quot; or &quot;unfocused&quot;</p>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set(object, focusable)</span> to tell Elementary whether an object and its children are focusable, where <span style="font-family: Courier New,Courier,monospace;">focusable</span> is a Boolean value. Get the current value using <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get(object)</span>.</p>
-
-<p>The similar functions for a specific object are <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set(object, focusable)</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get(object)</span>. </p>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/scalability_n.htm b/org.tizen.guides/html/native/ui/scalability_n.htm
deleted file mode 100644 (file)
index dc46ecd..0000000
--- a/org.tizen.guides/html/native/ui/scalability_n.htm
+++ /dev/null
@@ -1,765 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Scalability Support</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">         
-                <li><a href="#key">Key Concepts</a></li>       
-                <li><a href="#elementary">Scalability Using Elementary UI Components</a></li>
-            <li><a href="#edje">Scalability Using Edje</a></li>
-            <li><a href="#aspect">Aspect Ratio</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Scalability Support</h1> 
-  <p>To ensure that your application works well in diverse devices, you must consider scalability when designing the application layout:</p>
-  <ul>
-<li><a href="#key">Key concepts</a></li>
-<li><a href="#elementary">Scalability using Elementary UI components</a></li>
-<li><a href="#edje">Scalability using Edje</a></li>
-<li><a href="#aspect">Aspect ratio</a></li></ul>
-
-<h2 id="key" name="key">Key Concepts</h2>      
-
-<p>When designing the application layout to be scalable, you must pay attention to the following key concepts:</p>
-
-<ul><li>Understand the character of the relative position and the fixed position
-
-<p>In the <strong>relative position</strong>, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.</p>
-
-<p class="figure">Figure: Relative position</p> 
-<p align="center"> <img alt="Relative position" src="../../images/scale_relative.png" /> </p> 
- 
-<p>In the <strong>fixed position</strong>, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.</p>
- 
-<p class="figure">Figure: Fixed position</p> 
-<p align="center"> <img alt="Fixed position" src="../../images/scale_fixed.png" /> </p>  </li>
-
-<li>Use the relative position
-<p>If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.</p>
-
-<p class="figure">Figure: Scaling relative position</p> 
-<p align="center"> <img alt="Scaling relative position" src="../../images/scale_relative_scaled.png" /> </p>  </li> 
-
-<li>Multiply the scaling value, if you use the fixed size
-<p>If you use the EDC file to set up the layout, you can set the scale in the <span style="font-family: Courier New,Courier,monospace">part</span> element:</p>
-<pre class="prettyprint">
-parts 
-{
-&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>If you set the fixed size in C code, you can use the <span style="font-family: Courier New,Courier,monospace">ELM_SCALE_SIZE</span> macro:</p>
-<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));</pre>
-
-<p>For more information see <a href="multiple_screens_n.htm#apply">Applying the Base Scale</a>.</p></li>
-
-<li>Do not fill the width or height out with a fixed size only
-<p>If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size. </p>
- 
-<p class="figure">Figure: Height filled with a fixed size</p> 
-<p align="center"> <img alt="Height filled with a fixed size" src="../../images/scale_fixed_height.png" /> </p> 
-
-<p>If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.</p> 
- 
-<p class="figure">Figure: Height with a flexible area</p> 
-<p align="center"> <img alt="Height with a flexible area" src="../../images/scale_flexible_height.png" /> </p> </li></ul>
-
-
-
-<h2 id="elementary" name="elementary">Scalability Using Elementary UI Components</h2>
-
-<p>The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using elementary UI components, make sure you understand the following core concepts on how scalability works with elementary UI components.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Elementary library provides 3 groups of APIs:
-        <ul><li>Infrastructure: to control the behavior of elementary.</li>
-        <li>Container: UI components that can contain other UI components.</li>
-        <li>UI components: elementary UI components, such as buttons, lists, and check and radio boxes.</li></ul></td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h3>Using Containers for Effective Layouts</h3>
-
-<p>The Elementary library provides several containers to display UI components in an effective layout. The containers have no visual identity of their own.</p>
-
-<ul><li>Box
-
-<p>The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components&#39; size:</p>
-<ul><li>A vertical box calculates its height as the sum of its children&#39;s height and its width as the width of the widest child.</li>
-<li>A horizontal box calculates its width as the sum of its children&#39;s width and its height as the height of the tallest child.</li></ul>
-
-<p class="figure">Figure: Box layout</p> 
-<p align="center"> <img alt="Box layout" src="../../images/scale_box.png" /> </p> 
- 
-<p>The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.</p></li>
-
-<li>Grid
-
-<p>The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then packs the child UI components into the grid while setting their position and size based on the virtual size of the grid.</p>
-
-<p class="figure">Figure: Grid layout</p> 
-<p align="center"> <img alt="Grid layout" src="../../images/scale_grid.png" /> </p> 
- 
-<p>The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.</p></li></ul>
-
-
-<h3>Using Weight and Align Properties</h3>
-
-<p>To make a layout scalable with UI components, the UI components must be packed into a container using only the weight and align properties based on their minimum size. Do not resize the UI components directly using pixels.</p>
-
-<p>The weight and align properties are associated with every elementary UI component, and they serve as hints for the container they are in. They tell the container how the UI component wants to occupy the space and pack itself with other UI components in the container.</p>
-
-<h4>Weight</h4>
-
-<p>You can set the weight property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set(x_weight, y_weight)</span> function:</p>
-
-<ul><li>Containers use the weights of the child UI components by normalizing them across all child UI components along both X and Y directions.</li>
-<li>The parameter values can be 0 or positive values (default: 0.0).
-<p>0.0 means that the container allocates a minimum size of the UI component area.</p>
-<p>1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span>) means that the container allocates all of the remaining area to the UI component.</p></li>
-<li>If the container has several UI components, it allocates the UI component area relative to the weights of other UI components.</li></ul>
-
-<p class="figure">Figure: Weight hint</p> 
-<p align="center"> <img alt="Weight hint" src="../../images/scale_weight_hint.png" /> </p>     
- 
-<p class="figure">Figure: Weight hint across multiple child UI components</p> 
-<p align="center"> <img alt="Weight hint across multiple child UI components" src="../../images/scale_weight_hint_multiple.png" /> </p> 
-
-<h4>Align</h4>
-
-<p>You can set the align property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set(x_align, y_align)</span> function:</p>
-
-<ul><li>UI components use the alignment for their position or size along both X and Y directions.</li>
-<li>The parameter values can be from 0.0 to 1.0 or -1.0 (default: 0.5).</li>
-<li>The values define positions as follows: left is (x=0.0), right is (x=1.0), top is (y=0.0), and bottom is (y=1.0). The center is (x=0.5, y=0.5).
-<p>-1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span>) means that the UI component fills all of the allocated area.</p></li></ul>
-
-<p class="figure">Figure: Alignment hint</p> 
-<p align="center"> <img alt="Alignment hint" src="../../images/scale_align_hint.png" /> </p>   
-
-<h2 id="edje" name="edje">Scalability Using Edje</h2>
-
-<p>The Tizen platform provides a complex graphical design and layout library called Edje, which provides an abstraction layer between the application code and the interface. You can use Edje in your Tizen applications to create visual elements and control the layout, look, and feel.</p>
-<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an Edje <span style="font-family: Courier New,Courier,monospace">.edj</span> file. The file can be produced by using <span style="font-family: Courier New,Courier,monospace">Edje_cc</span> to take a text file (a <span style="font-family: Courier New,Courier,monospace">.edc</span> file) and &quot;compile&quot; an output <span style="font-family: Courier New,Courier,monospace">.edj</span> file that contains the state graph information, images, and any other needed data.</p>
-
-<p>While creating Edje, you set specific element properties to control the scalable behavior of the UI. Before creating a scalable UI using Edje, you must be familiar with the following scalability properties and part types.</p>
-
-<h3>Part</h3>
-<p>Parts are used to represent the most basic layout elements, such as a line in a border or a text on an image.</p>
-<p>The parts can have the following property:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">scale</span>: 0-1
-<p>Specifies whether the part scales its size with the scaling factor (Tizen has a scaling factor to resize the application layout and object). This property is used to scale properties, such as font size or min/max size of the part.</p>
-<p>The default value is 0 (off) and the default scaling factor is 1.0. To make a part scalable, set the property to 1 (on).</p>
-</li></ul>
-
-<h3>Description</h3>
-<p>Every part can have one or more description blocks to define the layout properties of the part.</p>
-<p>The descriptions can have the following properties:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">min</span>/<span style="font-family: Courier New,Courier,monospace">max</span>: width height
-<p>Specifies the minimum or maximum size of the part in pixels. It has no effect on the container size.</p>
-<p>When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">fixed</span>: 0-1 0-1
-<p>When the <span style="font-family: Courier New,Courier,monospace">min</span> or <span style="font-family: Courier New,Courier,monospace">max</span> property is set, this property sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application whether it must be scaled when resized.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>. To fix a part size to its min or max, set the value to 1.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">align</span>: X-axis Y-axis
-<p>When the displayed object size is smaller than its container, this property moves it along both axes using the relative position.</p>
-<p>To move the property, use x = 0.0 to move to left, x = 1.0 to move to right, y = 0.0 to move to the top, and y = 1.0 to move to the bottom. The x = 0.5, y = 0.5 value sets the object at the center of its container.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.5 0.5</span>.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">rel1</span>/<span style="font-family: Courier New,Courier,monospace">rel2</span>
-<p>Specifies the position of the left-top and bottom-right corners of the part&#39;s container.</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">relative</span>: X-axis Y-axis
-<p>Specifies the relative position of the part&#39;s container.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span> for <span style="font-family: Courier New,Courier,monospace">rel1.relative</span> and <span style="font-family: Courier New,Courier,monospace">1.0 1.0</span> for <span style="font-family: Courier New,Courier,monospace">rel2.relative</span>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">to</span>/<span style="font-family: Courier New,Courier,monospace">to_x</span>/<span style="font-family: Courier New,Courier,monospace">to_y</span>
-<p>Specified that a corner must be positioned relatively to another part&#39;s container.</p>
-<p>By default, the corners of a part are placed to the whole interface.</p></li></ul>
-
-<table>
-<caption>Table: Edje part property example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-                                                                 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;panorama.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
-                                                                 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.4;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.6;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 127 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Height: 100 pixels (when the scaling factor is 1.0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bottom-aligned
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 127 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Image size: 720 x 180 pixels (when the scaling factor is 1.0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 720 180;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Y-axis is positioned relative to &quot;rect2&quot; part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bottom-aligned
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;panorama.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>         
-</td>
- <td><p align="center"> <img alt="Part example" src="../../images/scale_example_part.png" /> </p> </td>
- </tr>
- </tbody></table>
-</li>
-
-<li><span style="font-family: Courier New,Courier,monospace">aspect</span>: min max
-<p>Specifies the width to height ratio to keep when the part is resized. When both values are the same, the ratio is fixed. When they differ, the part is forced to keep the ratio between the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> properties when resized.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span>.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">aspect_preference</span>: dimension
-<p>Specifies the scope of the <span style="font-family: Courier New,Courier,monospace">aspect</span> property to a given dimension.</p>
-<p>The possible values are     <span style="font-family: Courier New,Courier,monospace">BOTH</span>, <span style="font-family: Courier New,Courier,monospace">VERTICAL</span>, <span style="font-family: Courier New,Courier,monospace">HORIZONTAL</span>, and <span style="font-family: Courier New,Courier,monospace">NONE</span>. The default is <span style="font-family: Courier New,Courier,monospace">NONE</span>.</p>
-
-<table>
-<caption>Table: Edje part property aspect example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;island.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-   
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;island.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 8/5 8/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the aspect ratio based on the part width
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: HORIZONTAL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>         
-</td>
- <td><p align="center"> <img alt="Part aspect example" src="../../images/scale_example_part_aspect.png" /> </p> </td>
- </tr>
- </tbody></table>
-</li></ul>
-
-<h3>Text</h3>
-<p>The text elements are used to display text on the screen.</p>
-<p>The texts can have the following properties:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">size</span>: font-size
-<p>Specifies the font size for the text. When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
-       
-<li><span style="font-family: Courier New,Courier,monospace">min</span>: horizontal vertical
-<p>Specifies a pair of boolean values that define whether the container can be reduced further than the text size. The property is used to prevent the container from chopping the text.</p>
-<p>When <span style="font-family: Courier New,Courier,monospace">min</span> is set horizontally or vertically, the minimum height or width of the part is decided by the text size.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">max</span>: horizontal vertical
-<p>Specifies a pair of boolean values that define whether the container can be expanded further than the text size.</p>
-<p>When <span style="font-family: Courier New,Courier,monospace">max</span> is set horizontally or vertically, the maximum height or width of the part is decided by the text size.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
-
-<table>
-<caption>Table: Edje text property example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;TIZEN&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Minimum height of the part container is decided by the text size
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>         
-</td>
- <td><p align="center"> <img alt="Text example" src="../../images/scale_example_text.png" /> </p> </td>
- </tr>
- </tbody></table>
-
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">fit</span>: horizontal vertical
-<p>Specifies a pair of values that define whether the text is scaled to fill its container horizontally and/or vertically.</p>
-<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
-
-<table>
-<caption>Table: Edje text property fit example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.1;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;TIZEN&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Resize text to fill the container height
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fit: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>         
-</td>
- <td><p align="center"> <img alt="Text fit example" src="../../images/scale_example_text_fit.png" /> </p> </td>
- </tr>
- </tbody></table></li></ul>
-
- 
- <h3>Image</h3>
-<p>The image elements are used to display images on the screen.</p>
-<p>The images can have the following properties:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">border</span>: left right top bottom
-<p>Specifies the border size of the image in pixels. This property sets the area of each side of the image to be displayed as a fixed size border, preventing the corners from being changed on a resize.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">border_scale</span>
-<p>Specifies whether the border scales its size according to the scaling factor.</p>
-<p>The default value is 0 (off). To make the border scalable, the value must be set to 1 (on).</p>
-
-<table>
-<caption>Table: Edje image property example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;00_button_01_normal.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.6;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.7;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;00_button_01_normal.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;ninepatch_image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.9;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;00_button_01_normal.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 4 4 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border_scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>         
-</td>
- <td><p align="center"> <img alt="Image example" src="../../images/scale_example_image.png" /> </p> </td>
- </tr>
- </tbody></table>
-
-</li></ul>
-<h3>Image Set</h3>
-<p>The image set elements are used to display a specific image on the screen based on the container size.</p>
-<p>The image sets can have the following properties:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">name</span>: image-name
-<p>Specifies the name of the image file.</p></li>
-       
-<li><span style="font-family: Courier New,Courier,monospace">size</span>: minw minh maxw maxh
-<p>Specifies the minimum and maximum size that causes a specified image to be selected and shown.</p>
-<p>The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part&#39;s container, an appropriate image is loaded.</p>
-
-<table>
-<caption>Table: Edje image set property example</caption>
-<tbody>
-<tr>
- <td>
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;pig.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 640 800 1200 1500;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;monkey.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 400 500 639 799;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;cat.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 240 300 399 499;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;mouse.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80 100 239 299;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;snail.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 79 99;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.45;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.5;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.75;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>        
-</td>
- <td><p align="center"> <img alt="Image set example" src="../../images/scale_example_image_set.png" /> </p> </td>
- </tr>
- </tbody></table> 
-</li></ul>
-
-<h3>Part Types</h3>
-<p>You can use fixed and flexible parts:</p>
-
-<ul><li>Fixed parts
-
-<ul><li>Fixed parts have a minimum size (at least width or height).</li>
-<li>When the part <span style="font-family: Courier New,Courier,monospace">scale</span> property is set to 1 (on), the scaling factor has an effect on the minimum size.</li>
-<li>Fixed parts are used when the parts must keep a fixed size in any device or any orientation.</li></ul></li>
-<li>Flexible parts
-<ul><li>Flexible parts resize according to the container size and other fixed parts&#39; size.</li>
-<li>Flexible parts are used when the parts can be resized in any device or any orientation.</li></ul></li></ul>
-
-<p class="figure">Figure: Fixed and flexible parts</p> 
-<p align="center"> <img alt="Fixed and flexible parts" src="../../images/scale_fixed_flexible.png" /> </p> 
-
-
-<h2 id="aspect" name="aspect">Aspect Ratio</h2>
-
-<p>In Tizen, the application generally fills out the screen. However, sometimes you want the application to be shown in a specific aspect ratio, regardless of the screen size.</p>
-<p>As images are scaled in different devices, they are resized based on the container size. The images have specific properties that define the area to be shown when resized.</p>
-
-<p>For example, the following table illustrates what happens to the parts marked with yellow rectangles in the following figures, when scaling properties are applied.</p>
-  
-<p class="figure">Figure: Original image [1920x1280 (8:5)]</p> 
-<p align="center"> <img alt="Original image [1920x1280 (8:5)]" src="../../images/scale_original_image.png" /> </p> 
-
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">To set the required aspect ratio, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span> function or the <span style="font-family: Courier New,Courier,monospace">aspect_preference</span> attribute in the EDC.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-<table>
-<caption>Table: Image resizing effects with a specific aspect ratio</caption>
-<col width="40%" />
-<tbody>
-<tr>
- <th rowspan="2">Aspect</th>
- <th colspan="2">Container area</th>
-</tr>
-<tr>
- <th>720x384 (15:8)</th>
- <th>720x640 (9:8)</th>
-</tr>
- <tr>
- <td>HORIZONTAL
-<p>Resizing based on the container width while keeping the image aspect ratio.</p>
-<p>Extra height goes outside the image area and is clipped.</p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_1.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_2.png" /></p></td>
- </tr>
- <tr>
- <td>VERTICAL
-<p>Resizing based on the container height while keeping the image aspect ratio.</p> 
-<p>Extra width goes outside the image area and is clipped.</p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_3.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_4.png" /></p></td>
- </tr>
- <tr>
- <td>BOTH
-<p>Resizing based on the container area while keeping the image aspect ratio.</p>
-<p>No extra width or height goes outside the image area, so the entire image is always shown.</p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_5.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_6.png" /></p></td>
- </tr>
- <tr>
- <td>NONE
-<p>Resizing to fill the available area while keeping the image aspect ratio.</p> 
-<p>Extra width or height goes outside the image area and is clipped.</p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_7.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_8.png" /></p></td>
- </tr> 
- </tbody></table>
-
-<h3>Setting the Image Aspect Ratio</h3>
-<p>In case of an image object, you can set its aspect ratio with additional APIs:</p>
-
-<ul><li><span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span>
-<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">TRUE</span>, the image resizes to fill the entire area while keeping its aspect ratio. It lets the extra width or height go outside of the area (same result as with the aspect NONE in the above table).</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">elm_image_aspect_fixed_set()</span>
-
-<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">FALSE</span>, the image resizes to fill the entire area without keeping its original aspect ratio. The image can be distorted to fit the area.</p>
-<table>
-<caption>Table: Image resizing without keeping the aspect ratio</caption>
-<tbody>
-<tr>
- <th colspan="2">Container area</th>
-</tr>
-<tr>
- <th>720x384 (15:8)</th>
- <th>720x640 (9:8)</th>
-</tr>
- <tr>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_9.png" /></p></td>
- <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_10.png" /></p></td>
- </tr>
- </tbody></table>
-</li></ul>
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/styles_mn.htm b/org.tizen.guides/html/native/ui/styles_mn.htm
deleted file mode 100644 (file)
index 6841480..0000000
--- a/org.tizen.guides/html/native/ui/styles_mn.htm
+++ /dev/null
@@ -1,928 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Component Styles</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Component Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li> 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>UI Component Styles</h1> 
-  
-<p>For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set</span> function.</p>
-  
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
- 
-<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component.</p>
-
-<table>
-<caption>Table: Button styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/button/base/default</td>
- <td><img src="../../images/button_default.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/anchor</td>
- <td><img src="../../images/button_anchor.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/bottom</td>
- <td><img src="../../images/bottom.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>This style is used widely at the bottom of the screen.</td>
- </tr>
-  <tr>
- <td>elm/button/base/circle</td>
- <td><img src="../../images/button_circle.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/dropdown</td>
- <td><img src="../../images/button_dropdown.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/hoversel_horizontal/default</td>
- <td><img src="../../images/button_hoversel.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/hoversel_horizontal_entry/default</td>
- <td><img src="../../images/button_hoversel_entry.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/hoversel_vertical/default</td>
- <td><img src="../../images/button_hover_v.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/hoversel_vertical_entry/default</td>
- <td><img src="../../images/button_hover_v_entry.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/icon_reorder</td>
- <td><img src="../../images/button_recorder.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/naviframe/drawers</td>
- <td><img src="../../images/button_drawers.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/naviframe/title_cancel</td>
- <td><img src="../../images/button_title_cancel.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/naviframe/title_done</td>
- <td><img src="../../images/button_title_done.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/button/base/option</td>
- <td><img src="../../images/button_option.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Check styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>elm/check/base/default</td>
- <td><img src="../../images/check_default.png" /></td>
- </tr>
- <tr>
- <td>elm/check/base/favorite</td>
- <td><img src="../../images/check_favorite.png" /></td>
- </tr>
-  <tr>
- <td>elm/check/base/on&amp;off</td>
- <td><img src="../../images/check_on_off.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Colorselector styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/colorselector/item/color/colorplane</td>
- <td><img src="../../images/color_colorplane.png" /></td>
- <td>Use the following command: <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</span></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Progressbar styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/progressbar_default.png" /></td>
- </tr>
- <tr>
- <td>wheel</td>
- <td><img src="../../images/progressbar_wheel.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Radio styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/radio_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: List styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/styleguide_genlist_def.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Multi Button Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/multibuttonentry/base/default</td>
- <td><img src="../../images/multi_button_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>, guide</td>
- <td>The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Toolbar styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/toolbar/base/default</td>
- <td><img src="../../images/toolbar_default.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/toolbar/base/navigationbar</td>
- <td><img src="../../images/toolbar_navigation.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/toolbar/base/tabbar_with_title</td>
- <td><img src="../../images/toolbar_tabbar.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>elm/toolbar/item/default</td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
- </tr>
-  <tr>
- <td>elm/toolbar/item/navigationbar</td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Flipselector styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/flipsel_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<p>The style of the genlist&#39;s item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item&#39;s style.</p>
-<table>
-<caption>Table: Genlist styles</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/styleguide_genlist_def.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
- <tr>
- <td>default_style</td>
- <td><img src="../../images/styleguide_genlist_defstyle.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>double_label</td>
- <td><img src="../../images/styleguide_genlist_doublelabel.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span>: for the sub text.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>end_icon</td>
- <td><img src="../../images/styleguide_genlist_end.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>full</td>
- <td><img src="../../images/styleguide_genlist_full.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>The swallow part is the full size of the item. There is no padding in the item.</td>
- </tr>
-  <tr>
- <td>group_index</td>
- <td><img src="../../images/styleguide_genlist_group.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>one_icon</td>
- <td><img src="../../images/styleguide_genlist_oneicon.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>message</td>
- <td><img src="../../images/styleguide_genlist_message.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the text on the top. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.title.1</span>: for the text in the middle.</p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.title.2</span>: for the text on the bottom.</p></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<p>The style of the gengrid&#39;s item is not set by external APIs. For more information on using the item class to set the item&#39;s style, see the guide of gengrid.</p>
-<table>
-<caption>Table: Gengrid styles</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/gengrid_default.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>album-preview</td>
- <td><img src="../../images/gengrid_album_pre.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>block</td>
- <td><img src="../../images/gengrid_block.png" /></td>
- <td></td>
- <td></td>
- <td>This style is used to show an empty area.</td>
-</tr>
- <tr>
- <td>group_index</td>
- <td><img src="../../images/gengrid_grp_index.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>default_grid</td>
- <td><img src="../../images/gengrid_def.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
-<tr>
- <td>default_gridtext2</td>
- <td><img src="../../images/gengrid_def_gridtext2.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- <tr>
- <td>default_gridtext</td>
- <td><img src="../../images/gengrid_def_gridtext.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- <tr>
- <td>default_style</td>
- <td><img src="../../images/gengrid_def_style.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Segmentation Control styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/segm_control_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Index styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/index_default.png" /></td>
- <td>This style is for supporting the vertical style.</td>
- </tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/index_default02.png" /></td>
- <td>This style is for supporting the horizontal style. To set a horizontal index, use the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set</span>.</td>
- </tr>
-  <tr>
- <td>pagecontrol</td>
- <td><img src="../../images/index_pagecontrol.png" /></td>
- <td>This style is used for the &quot;page control&quot; layout. For more information, refer to the Core Control sample application.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Contextual Popup (Ctxpopup) styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/ctxpopup_default.png" /></td>
- <td></td>
- </tr>
- <tr>
- <td>dropdown/list</td>
- <td><img src="../../images/ctxpopup_dropdown.png" /></td>
- <td>The size of the item and the ctxpopup follow the size of the screen.</td>
- </tr>
-  <tr>
- <td>dropdown/label</td>
- <td><img src="../../images/ctxpopup_dropdown_label.png" /></td>
- <td>The size of the item and the ctxpopup follow the maximum length of the item.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Icon styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>apps</td>
- <td><img src="../../images/icon_apps.png" /></td>
- </tr>
- <tr>
- <td>arrow_down</td>
- <td><img src="../../images/icon_arrowdown.png" /></td>
- </tr>
-  <tr>
- <td>arrow_left</td>
- <td><img src="../../images/icon_arrowleft.png" /></td>
- </tr>
-  <tr>
- <td>arrow_right</td>
- <td><img src="../../images/icon_arrowright.png" /></td>
- </tr>
-  <tr>
- <td>arrow_up</td>
- <td><img src="../../images/icon_arrowup.png" /></td>
- </tr>
-  <tr>
- <td>chat</td>
- <td><img src="../../images/icon_chat.png" /></td>
- </tr>
- <tr>
- <td>clock</td>
- <td><img src="../../images/icon_clock.png" /></td>
- </tr>
- <tr>
- <td>close</td>
- <td><img src="../../images/icon_close.png" /></td>
- </tr>
- <tr>
- <td>delete</td>
- <td><img src="../../images/icon_delete.png" /></td>
- </tr>
- <tr>
- <td>edit</td>
- <td><img src="../../images/icon_edit.png" /></td>
- </tr>
- <tr>
- <td>file</td>
- <td><img src="../../images/icon_file.png" /></td>
- </tr>
- <tr>
- <td>home</td>
- <td><img src="../../images/icon_home.png" /></td>
- </tr>
- <tr>
- <td>media_player/forward</td>
- <td><img src="../../images/icon_forward.png" /></td>
- </tr>
- <tr>
- <td>media_player/info</td>
- <td><img src="../../images/icon_info.png" /></td>
- </tr>
- <tr>
- <td>media_player/next</td>
- <td><img src="../../images/icon_next.png" /></td>
- </tr>
- <tr>
- <td>media_player/pause</td>
- <td><img src="../../images/icon_pause.png" /></td>
- </tr>
- <tr>
- <td>media_player/play</td>
- <td><img src="../../images/icon_play.png" /></td>
- </tr>
- <tr>
- <td>media_player/prev</td>
- <td><img src="../../images/icon_prev.png" /></td>
- </tr>
- <tr>
- <td>media_player/rewind</td>
- <td><img src="../../images/icon_rewind.png" /></td>
- </tr>
- <tr>
- <td>media_player/stop</td>
- <td><img src="../../images/icon_stop.png" /></td>
- </tr>
- <tr>
- <td>menu/apps</td>
- <td><img src="../../images/icon_menu_apps.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_down</td>
- <td><img src="../../images/icon_menu_arrdown.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_left</td>
- <td><img src="../../images/icon_menu_arrleft.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_right</td>
- <td><img src="../../images/icon_menu_arrright.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_up</td>
- <td><img src="../../images/icon_menu_arrup.png" /></td>
- </tr>
- <tr>
- <td>menu/chat</td>
- <td><img src="../../images/icon_menu_chat.png" /></td>
- </tr>
- <tr>
- <td>menu/clock</td>
- <td><img src="../../images/icon_menu_clock.png" /></td>
- </tr>
- <tr>
- <td>menu/close</td>
- <td><img src="../../images/icon_menu_close.png" /></td>
- </tr>
- <tr>
- <td>menu/delete</td>
- <td><img src="../../images/icon_menu_delete.png" /></td>
- </tr>
- <tr>
- <td>menu/edit</td>
- <td><img src="../../images/icon_menu_edit.png" /></td>
- </tr>
- <tr>
- <td>menu/file</td>
- <td><img src="../../images/icon_menu_file.png" /></td>
- </tr>
- <tr>
- <td>menu/folder</td>
- <td><img src="../../images/icon_menu_folder.png" /></td>
- </tr>
- <tr>
- <td>menu/home</td>
- <td><img src="../../images/icon_menu_home.png" /></td>
- </tr>
- <tr>
- <td>menu/refresh</td>
- <td><img src="../../images/icon_menu_refresh.png" /></td>
- </tr>
- <tr>
- <td>no_photo</td>
- <td><img src="../../images/icon_menu_nophoto.png" /></td>
- </tr>
- <tr>
- <td>photo/no_photo</td>
- <td><img src="../../images/icon_photo_nophoto.png" /></td>
- </tr>
- <tr>
- <td>refresh</td>
- <td><img src="../../images/icon_refresh.png" /></td>
- </tr>
- <tr>
- <td>toolbar/apps</td>
- <td><img src="../../images/icon_toolbar_apps.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_down</td>
- <td><img src="../../images/icon_toolbar_arrdown.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_left</td>
- <td><img src="../../images/icon_toolbar_arrleft.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_right</td>
- <td><img src="../../images/icon_toolbar_arrright.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_up</td>
- <td><img src="../../images/icon_toolbar_arrup.png" /></td>
- </tr>
- <tr>
- <td>toolbar/chat</td>
- <td><img src="../../images/icon_toolbar_chat.png" /></td>
- </tr>
- <tr>
- <td>toolbar/clock</td>
- <td><img src="../../images/icon_toolbar_clock.png" /></td>
- </tr>
- <tr>
- <td>toolbar/close</td>
- <td><img src="../../images/icon_toolbar_close.png" /></td>
- </tr>
- <tr>
- <td>toolbar/delete</td>
- <td><img src="../../images/icon_toolbar_delete.png" /></td>
- </tr>
- <tr>
- <td>toolbar/edit</td>
- <td><img src="../../images/icon_toolbar_edit.png" /></td>
- </tr>
- <tr>
- <td>toolbar/file</td>
- <td><img src="../../images/icon_toolbar_file.png" /></td>
- </tr>
- <tr>
- <td>toolbar/folder</td>
- <td><img src="../../images/icon_toolbar_folder.png" /></td>
- </tr>
- <tr>
- <td>toolbar/home</td>
- <td><img src="../../images/icon_home.png" /></td>
- </tr>
- <tr>
- <td>toolbar/more_menu</td>
- <td><img src="../../images/icon_toolbar_moremenu.png" /></td>
- </tr>
- <tr>
- <td>toolbar/refresh</td>
- <td><img src="../../images/icon_toolbar_refresh.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/entry_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
- <td></td>
- <td>The guide text is automatically erased when the main text is entered.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Datetime styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>date_layout</td>
- <td><img src="../../images/datetime_date_layout.png" /></td>
- </tr>
- <tr>
- <td>time_layout</td>
- <td><img src="../../images/datetime_time_layout.png" /></td>
- </tr>
-  <tr>
- <td>time_layout_24hr</td>
- <td><img src="../../images/datetime_time_24h.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Panel (drawer) styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/panel_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>For more information on the drawer, see the [UI Sample] Core Control guide.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Slider styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
-
-</tr>
- <tr>
- <td>horizontal/default</td>
- <td><img src="../../images/slider_hor.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
- <tr>
- <td>horizontal/center_point</td>
- <td><img src="../../images/slider_hor_center.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
-  <tr>
- <td>vertical/center_point</td>
- <td><img src="../../images/slider_ver_center.png" /></td>
- <td></td>
- </tr>
-  <tr>
- <td>vertical/default</td>
- <td><img src="../../images/slider_ver.png" /></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Popup styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/popup_default.png" /></td>
- </tr>
- <tr>
- <td>toast</td>
- <td><img src="../../images/popup_toast.png" /></td>
- </tr>
- </tbody>
-</table>
- 
- <table>
-<caption>Table: Spinner styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>base/horizontal</td>
- <td><img src="../../images/spinner_hor.png" /></td>
- </tr>
-  <tr>
- <td>base/vertical</td>
- <td><img src="../../images/spinner_ver.png" /></td>
- </tr>
- </tbody>
-</table>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/styles_wn.htm b/org.tizen.guides/html/native/ui/styles_wn.htm
deleted file mode 100644 (file)
index 80b54eb..0000000
--- a/org.tizen.guides/html/native/ui/styles_wn.htm
+++ /dev/null
@@ -1,659 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Component Styles</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Component Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>             
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>UI Component Styles</h1> 
-  
-
-<p>For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set</span> function.</p>  
-  
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-  
-
-<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component.</p>
-
-<table>
-<caption>Table: Button styles (wearable core)</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/button_default_wn.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>green</td>
- <td><img src="../../images/button_green_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>orange</td>
- <td><img src="../../images/button_orange_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>red</td>
- <td><img src="../../images/button_red_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>nextdepth</td>
- <td><img src="../../images/button_next_wn.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>naviframe/title_icon</td>
- <td><img src="../../images/button_titleicon_wn.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>The icon can be set with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(btn, &quot;icon&quot;, ic)</span> function.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Button styles (Gear O)</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/button_default_wn.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>bottom</td>
- <td><img src="../../images/button_bottom_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Check styles (wearable core)</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/check_default_wn.png" /></td>
- </tr>
- <tr>
- <td>on&amp;off</td>
- <td><img src="../../images/check_onoff_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Check styles (Gear O)</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/check_default_o_wn.png" /></td>
- </tr>
- <tr>
- <td>small</td>
- <td><img src="../../images/check_small_o_wn.png" /></td>
- </tr>
- <tr>
- <td>on&amp;off</td>
- <td><img src="../../images/check_onoff_o_wn.png" /></td>
- </tr> 
- </tbody>
-</table>
-
-<table>
-<caption>Table: Contextual popup (Ctxpopup) styles (wearable core)</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/contextual_wn.png" /></td>
- <td>Use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function to add both text and an icon to the list.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Contextual popup (Ctxpopup) styles (Gear O)</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>select_mode</td>
- <td><img src="../../images/contextual_select_o_wn.png" /></td>
- <td></td>
- </tr>
-  <tr>
- <td>select_mode/top</td>
- <td><img src="../../images/contextual_top_o_wn.png" /></td>
- <td>Pair this style with select_mode/bottom.</td>
- </tr>
-  <tr>
- <td>select_mode/bottom</td>
- <td><img src="../../images/contextual_bottom_o_wn.png" /></td>
- <td>Pair this style with select_mode/top.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Datetime styles (wearable core)</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>datepicker_layout</td>
- <td><img src="../../images/datetime_date_wn.png" /></td>
- </tr>
- <tr>
- <td>timepicker_layout</td>
- <td><img src="../../images/datetime_time_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Datetime styles (Gear O)</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>datepicker/circle</td>
- <td><img src="../../images/datetime_date_o_wn.png" /></td>
- </tr>
- <tr>
- <td>timepicker/circle</td>
- <td><img src="../../images/datetime_time_o_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/entry_default_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
- <td></td>
- <td>The guide text is automatically erased when the main text is entered.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Genlist styles (wearable core)</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/genlist_def_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>group_index</td>
- <td><img src="../../images/genlist_group_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr> 
- <tr>
- <td>1text</td>
- <td><img src="../../images/genlist_1text_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon</td>
- <td><img src="../../images/genlist_1text1icon_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>2text</td>
- <td><img src="../../images/genlist_2text_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>2text.1</td>
- <td><img src="../../images/genlist_2text1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td></td>
-  <td></td>
- </tr>
-  <tr>
- <td>1text.1icon.divider</td>
- <td><img src="../../images/genlist_1text1icondivider_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
- <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon.1</td>
- <td><img src="../../images/genlist_1text1icon1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-   <tr>
- <td>2text.1icon.1</td>
- <td><img src="../../images/genlist_2text1icon1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
-<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-   <tr>
- <td>multiline/1text</td>
- <td><img src="../../images/genlist_multi1_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the multi-line text.</td>
- <td></td>
- <td></td>
- </tr>
-   <tr>
- <td>multiline/2text</td>
- <td><img src="../../images/genlist_multi2_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the multi-line sub text.</p></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Genlist styles (Gear O)</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/genlist_def_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
-<tr>
- <td>title</td>
- <td><img src="../../images/genlist_title_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr> 
-  <tr>
- <td>groupindex</td>
- <td><img src="../../images/genlist_group_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr> 
- <tr>
- <td>1text</td>
- <td><img src="../../images/genlist_1text_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon</td>
- <td><img src="../../images/genlist_1text1icon_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-  <tr>
- <td>2text</td>
- <td><img src="../../images/genlist_2text_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
- <td></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon.divider</td>
- <td><img src="../../images/genlist_1text1icondivider_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
- <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
- <td></td>
- </tr>
-  <tr>
- <td>1text.1icon.1</td>
- <td><img src="../../images/genlist_1text1icon1_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-   <tr>
- <td>2text.1icon.1</td>
- <td><img src="../../images/genlist_2text1icon1_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
-<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
- <td></td>
- </tr>
-   <tr>
- <td>editfield</td>
- <td><img src="../../images/genlist_edit_o_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Index styles (wearable core)</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>thumbnail</td>
- <td><img src="../../images/index_thumb_wn.png" /></td>
- </tr>
- <tr>
- <td>tab</td>
- <td><img src="../../images/index_tab_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Index styles (Gear O)</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>thumbnail</td>
- <td><img src="../../images/index_thumb_o_wn.png" /></td>
- </tr>
- <tr>
- <td>circle</td>
- <td><img src="../../images/index_circle_o_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Popup styles (wearable core)</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/popup_default_wn.png" /></td>
- </tr>
- <tr>
- <td>toast</td>
- <td><img src="../../images/popup_toast_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Popup styles (Gear O)</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>circle</td>
- <td><img src="../../images/popup_circle_o_wn.png" /></td>
- </tr>
- <tr>
- <td>toast/circle</td>
- <td><img src="../../images/popup_toast_o_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Progressbar styles (wearable core)</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/progressbar_default_wn.png" /></td>
- </tr>
- <tr>
- <td>pending_list</td>
- <td><img src="../../images/progressbar_pending_wn.png" /></td>
- </tr>
- <tr>
- <td>process</td>
- <td><img src="../../images/progressbar_process_wn.png" /></td>
- </tr>
- <tr>
- <td>process/groupindex</td>
- <td><img src="../../images/progressbar_group_wn.png" /></td>
- </tr> 
- </tbody>
-</table>
-
-<table>
-<caption>Table: Progressbar styles (Gear O)</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>process</td>
- <td><img src="../../images/progressbar_process_o_wn.png" /></td>
- </tr>
- <tr>
- <td>process/small</td>
- <td><img src="../../images/progressbar_small_o_wn.png" /></td>
- </tr> 
- </tbody>
-</table>
-
-<table>
-<caption>Table: Radio styles (wearable core)</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/radio_default_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Radio styles (Gear O)</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/radio_default_o_wn.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Slider styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
-
-</tr>
- <tr>
- <td>horizontal/default</td>
- <td><img src="../../images/slider_hor_wn.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
- </tbody>
-</table>
-
- 
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/threads_n.htm b/org.tizen.guides/html/native/ui/threads_n.htm
deleted file mode 100644 (file)
index d28ca10..0000000
--- a/org.tizen.guides/html/native/ui/threads_n.htm
+++ /dev/null
@@ -1,499 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Thread Usage</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#Thread_safety">Thread Safety</a></li>
-                       <li><a href="#Costs">Thread Pools</a></li> 
-                       <li><a href="#Functions">Thread Management with Ecore</a></li>
-                       <li><a href="#low_level">Low-level Functions</a></li>
-                       <li><a href="#Examples">Thread Use Examples</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li> 
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                     
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Thread Usage</h1> 
-
-<p>Threads are concurrent execution environments that are lighter than full-blown processes because they share some operating system resources. Threads make it possible to do several things at the same time while using less resources and offering simpler synchronization and data exchange compared to processes.</p>
-
-<p>If you move a blocking operation to a separate thread, it cannot block the event loop and keeps the user interface reactive. Blocking the event loop and using long-running callbacks means the application cannot update its graphical user interface.</p>
-
-<p>While threads can be useful, they are not always the best choice:</p>
-
-<ul><li>The first rule to using threads is to avoid them as much as possible, as there are often better tools and approaches. For example, to do network transfers, use <span style="font-family: Courier New,Courier,monospace;">Ecore_Con</span> that integrates with the event loop to use a function based on callbacks. Being able to use such a function means that specific support work has been done in libraries. In some cases, using a function and libraries is impossible, and in those situations threads are required.</li>
-<li>Use threads in CPU-intensive tasks and disk IOs. For example, a thread is the appropriate way to apply filters to an image or to a video without blocking the interface.</li>
-<li>Use threads to take advantage of multiple available CPU cores, if the workload can be split into several units of work and spread across the cores. A typical example for an image processing application on a quad-core CPU is to process 4 images at once, each on 1 thread. For such tasks, the thread pool helps with the creation and scheduling of the threads, handling all the grunt work.</li></ul>
-
-<h2 id="Thread_safety" name="Thread_safety">Thread Safety</h2>
-
-<p>If several strings have to work on the same resources, conflicts can happen as the threads are run in parallel. For example, if thread A modifies several values while thread B is reading them, it is likely that some of the values read by B are outdated. Similar issues can happen if both threads are modifying data concurrently.</p>
-
-<p>These kinds of conflicts are called race-conditions: depending on which thread is faster, the output changes and can be incorrect. Avoiding such issues is called thread safety. Thread safety involves critical sections, which are blocks of code that operate on shared resources and must not be accessed concurrently by another thread.</p>
-
-<p>The usual solution for ensuring exclusive access to shared resources is mutual exclusion: only 1 thread can operate on the data at any given time. Mutual exclusion is often implemented through locks. Before attempting to operate on a shared resource, the thread waits until it can lock something called a mutex (stands for mutual exclusion), then operates on the resource, and unlocks the mutex. Operating systems guarantee that only 1 thread can lock a mutex at a given time: this ensures that only 1 thread operates on the shared resource at one time.</p>
-
-<p>For more information on thread safety, see <a href="#low_level">Low-level Functions</a>.</p>
-
-<h2 id="Costs" name="Costs">Thread Pools</h2>
-
-<p>Threads are operating system resources: while much lighter than processes, they still have a cost. Moreover, spawning a thousand threads means that each of them only gets 1/1000th of the total CPU time: each thread is progressed slowly and, in the worst case, the system wastes all of its time switching between threads without doing any actual work.</p>
-
-<p>Thread pools solve this problem. In thread pools, upto a maximum number of threads are created on-demand and used to execute tasks. When the tasks are finished, they are kept alive but sleeping. This avoids the cost of creating and destroying them.</p>
-
-<p>In EFL, the thread pool is controlled by a <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter, which defines the maximum number of threads running at the same time. Another control feature is the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback that runs from the main loop thread after a task has completed and is typically used to extract the data from the finished task and make it available to the main loop.</p>
-
-<p>To manage the maximum number of threads:</p>
-
-<ul>
-<li>To retrieve the current value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function.
-</li>
-
-<li>To set the value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function. The value has a maximum of 16 times the CPU count.
-</li>
-
-<li>To reset the maximum number of threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.
-
-</li>
-
-<li>To get the number of available threads in the pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function. The function returns the current maximum number of threads minus the number of running threads. The number can be a negative value, if the maximum number of threads has been lowered.
-</li>
-</ul>
-
-<p>The following figures illustrate the thread pool. The first figure shows the occupancy of a hypothetical thread pool. There are several tasks, of which 4 are running. The  <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter of the pool is 4, and the other tasks are waiting. There is no thread with its <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback currently called.</p>
-
-<p class="figure">Figure: Thread pool, step 1</p> 
-<p align="center"><img alt="Thread pool, step 1" src="../../images/thread_pool_lifecycle_1.png" /></p> 
-
-<p>When a task, applying the sepia filter on image1, finishes, the corresponding <span style="font-family: Courier New,Courier,monospace;">func_end()</span> function is invoked from the main loop.</p>
-
-<p class="figure">Figure: Thread pool, step 2</p> 
-<p align="center"><img alt="Thread pool, step 2" src="../../images/thread_pool_lifecycle_2.png" /></p> 
-
-<p>With the task done, one of the threads from the pool becomes available, and another thread, adding the reverberation effect on audio3, can run in it.</p>
-
-<p class="figure">Figure: Thread pool, step 3</p> 
-<p align="center"><img alt="Thread pool, step 3" src="../../images/thread_pool_lifecycle_3.png" /></p> 
-
-<p>As long as there are tasks to be done, the thread pool continues the same way, running tasks in its threads whenever a thread is available.</p>
-
-
-<h2 id="Functions" name="Functions">Thread Management with Ecore</h2>
-
-<p>Ecore offers a simplified API for managing threads in EFL applications. The Ecore API applies to a typical scenario where the main thread creates another thread, which in turn sends data back to the main thread or calls GUI-related functions. GUI-related functions are not thread-safe.</p>
-
-<h3>Creating Threads with Ecore</h3>
-
-<p>The threads created with Ecore are by default integrated with the thread pool and offer simple callback-based ways to interact with the main loop. New threads are created as needed until the maximum capacity of the thread pool is reached.</p>
-
-<ul><li>To return values to the main thread:
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to send intermediate feedback from the thread to the main loop.</p></li>
-
-<li>To return only the final value to the main thread:
-<p>To create and run a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function. It runs a function inside a thread from the thread pool and takes care of all the low-level work. It returns the corresponding thread handler or <span style="font-family: Courier New,Courier,monospace;">NULL</span> on failure.</p>
-
-<p>The most common way to return data from one thread to the main thread is to put a pointer to it in the data. When the thread is aborted or finishes, either <span style="font-family: Courier New,Courier,monospace;">func_cancel()</span> or <span style="font-family: Courier New,Courier,monospace;">func_end()</span> is called from the main loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
-
-<p>The data pointer approach can only be used when the data is shared between the one thread and the main thread only. However, this does not prevent you from using the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback to merge the results into a single data structure. For example, you can add all the values computed by the threads to an <span style="font-family: Courier New,Courier,monospace;">Eina_List</span>, as all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p></li></ul>
-
-
-<h3>Running Callbacks from the Main Loop</h3>
-
-<p>If you are performing operations in another thread and want to update a progress bar, the update operation must be done from the main thread. The simplest way is to use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function, which takes a function and some data as parameters and instructs the main loop to execute the given function with the given data.</p>
-
-<p>Depending on the kind of thread the function is called from, the process differs:</p>
-<ul>
-<li>If the function is called from a thread that is not the main one, the function sends a message to the main loop and returns quickly. The message is processed in order, similarly to others.</li>
-
-<li>If the function is called from the main thread, the function is called immediately as if it were a direct call.</li>
-</ul>
-
-<p>If you want to wait until the callback is called and returns, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function, which is similar but synchronous. Since it is synchronous, it can also return the value returned by the callback.</p>
-
-<h2 id="low_level" name="low_level">Low-level Functions</h2>
-
-<p>Eina offers low-level functions that are portable across the operating system, such as locks, conditions, semaphores, barriers, and spinlocks. The functions follow closely the logic of pthreads.</p>
-
-<p>While these functions are useful, they are building blocks and not usually useful in EFL applications considering the higher-level functions that are available in Ecore.</p>
-
-<p>For an introduction to threads and pthreads in particular, see:</p>
-
-<ul>
-<li><a href="http://www.ibm.com/developerworks/library/l-pthred/index.html" target="_blank">Basic use of pthreads</a> (IBM developerWorks)</li>
-<li><a href="https://computing.llnl.gov/tutorials/pthreads/" target="_blank">POSIX Threads Programming</a> (Lawrence Livermore National Laboratory)</li>
-<li><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/pthread.h.html" target="_blank">POSIX 2003 specification</a> (opengroup)</li>
-</ul>
-
-<p>If you are already familiar with threads, see the standard pthreads documentation and the Eina reference documentation, or the following function lists. Remember that the Eina functions map very closely to the pthreads functions.</p>
-
-<table>
-<caption>Locks (mutual exclusions)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_new()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_destroy()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_lock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_trylock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take_try()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_unlock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_release()</span></td> 
-</tr>
-<tr> 
-<td>none (prints debug information on the lock)</td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_debug()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>Conditions (notifications when condition objects change)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_init()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_destroy </span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_wait()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_wait()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_timedwait()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_timedwait()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_broadcast()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_broadcast()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_signal()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_signal()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>RWLocks (Read-write locks, for multiple-readers/single-writer scenarios)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_init()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_new() </span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_destroy()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_rwlock_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_rdlock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_take_read()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_wrlock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_take_write()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_unlock()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">
-eina_rwlock_release()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>TLS (Thread-Local Storage)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_create()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_delete()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_getspecific()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_get()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_setspecific</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_set()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>Semaphores (access restrictions for a set of resources)</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">sem_init()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">sem_destroy()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">sem_wait()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_lock()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">sem_post()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_release()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<table>
-<caption>Barriers</caption>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
-<tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_init()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_new()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_destroy()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_free()</span></td> 
-</tr>
-<tr> 
-<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_wait()</span></td> 
-<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_wait()</span></td> 
-</tr>
-</tbody>
-</table>
-
-<h2 id="Examples" name="Examples">Thread Use Examples</h2>
-
-<p>The following examples display a window with a label. An auxiliary thread semi-regularly changes the text of the label. If you want to display a regular animation, use the Ecore animators described in the <a href="main_loop_n.htm">Main Loop</a> guide.</p>
-
-<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function:</p>
-
-<ol>
-
-<li>Implement the GUI function that sets the text of a label and can be called from the main thread.
-
-<pre class="prettyprint">
-static void
-_set_label_text(void *data, Ecore_Thread *thread __UNUSED__, void *msgdata)
-{
-&nbsp;&nbsp;&nbsp;char buf[64];
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Tick %d&quot;, (int)(uintptr_t)msgdata);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
-}
-</pre>
-</li>
-<li>Send the feedback from the other thread using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function. The following function does nothing besides sending the feedback and sleeping.
-
-<pre class="prettyprint">
-static void
-_long_function(void *data __UNUSED__, Ecore_Thread *thread)
-{
-&nbsp;&nbsp;&nbsp;int iteration;
-&nbsp;&nbsp;&nbsp;// Change the text roughly every 1 second. This is only an example; if you
-&nbsp;&nbsp;&nbsp;// want regular animations, use Ecore animators!
-&nbsp;&nbsp;&nbsp;for (iteration = 0; ; iteration++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Since you are running from another thread, you need to take special
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// care and instead send data to the main thread and have it run the
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// feedback function given when creating the thread
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sleep for roughly one second
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li>Create an end function that is called when the thread exits. In this example, the end function is called only right before the application exits. However, if the blocking function is more complex, it can trigger the end function.
-
-<pre class="prettyprint">
-static void
-_end_func(void *data, Ecore_Thread *thread __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Ticks over&quot;);
-}
-</pre>
-</li>
-
-<li>Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to start the thread:
-
-<pre class="prettyprint">
-ecore_thread_feedback_run(_long_function, _set_label_text, _end_func, NULL, ad, EINA_FALSE);
-</pre>
-</li>
-</ol>
-
-<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function:</p>
-
-<ol>
-<li>Implement the GUI function that sets the text of a label and can be called from the main thread. The function receives data as a structure and alternatively displays &quot;Tick d&quot; or &quot;Tock d&quot;.
-
-<pre class="prettyprint">
-struct thd 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad;
-&nbsp;&nbsp;&nbsp;Eina_Bool tick_not_tock;
-&nbsp;&nbsp;&nbsp;int iteration;
-};
-static void *
-_set_label_text_tick_tock(void *data)
-{
-&nbsp;&nbsp;&nbsp;char buf[64];
-&nbsp;&nbsp;&nbsp;struct thd *thd = data;
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s %d&quot;, (thd-&gt;tick_not_tock ? &quot;Tick&quot; : &quot;Tock&quot;), thd-&gt;iteration);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(thd-&gt;ad-&gt;label, buf);
-
-&nbsp;&nbsp;&nbsp;return NULL;
-}
-</pre>
-</li>
-
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function call the GUI function. Differentiate between the ticks and the tocks:
-
-<pre class="prettyprint">
-static void
-_long_function_tick_tock(void *data, Ecore_Thread *thread __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;struct thd *thd = malloc(sizeof(struct thd));
-&nbsp;&nbsp;&nbsp;thd-&gt;ad = data;
-&nbsp;&nbsp;&nbsp;for (thd-&gt;iteration = 0; ; (thd-&gt;iteration)++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;free(thd);
-}
-</pre>
-</li>
-
-<li>Start the thread through the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function:
-
-<pre class="prettyprint">
-ecore_thread_run(_long_function_tick_tock, _end_func, NULL, ad);
-</pre>
-</li>
-</ol>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ui_component_mn.htm b/org.tizen.guides/html/native/ui/ui_component_mn.htm
deleted file mode 100644 (file)
index 1e99b22..0000000
--- a/org.tizen.guides/html/native/ui/ui_component_mn.htm
+++ /dev/null
@@ -1,566 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#scalability">Scaling UI Components</a></li>                       
-                               <li><a href="#components">Using UI Components</a></li>
-               </ul>
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Components Tutorials</a></li>     
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>             
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>UI Components</h1> 
-  <p>The UI component management features allow you to the UI components and their focus on the screen, as well as create customizations. The Elementary library provides several UI components than can be used to compose the user interface of your application.</p> 
-  
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>    
-  
-  <p>The main features of UI component management are:</p>
-               <ul>
-                       <li><a href="#scalability">Scaling UI components</a> <p>Enables you to scale UI components in order to be comfortably used with a finger and make text more readable.</p></li>                  
-                       <li><a href="#components">Using UI components</a> <p>Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.</p></li>  
-               </ul>
-  
-  <h2 id="scalability" name="scalability">Scaling UI Components</h2> 
-  
-<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale UI components with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.</p>
-
-<h3 id="Finger_Size" name="Finger_Size">Finger Size</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales UI components based on the user&#39;s finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.</p>
-
-<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of UI components so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
-
-<p>To increase the current global finger size by 20px:</p>
-
-<pre class="prettyprint">
-Evas_Coord finger_size;
-
-// Get the current finger size
-finger_size = elm_config_finger_size_get();
-
-// Add 20px to finger size parameter and set it 
-// to the global Elementary configuration
-elm_config_finger_size_set(finger_size + 20);
-</pre>
-
-<h3 id="Scale" name="Scale">Scale</h3>
-
-<p>This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the UI components. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary UI component and all its children.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The scaling factor is multiplicative, if a child already has a scale size set, it is multiplied by its parent&#39;s scale size.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example sets the global scaling factor to 2.0. Then, the scaling factor of an existing Elementary object is set to 2.0, meaning that this object appears as if it had a 4.0 scale factor, the rest of the application is displayed with a 2.0 scaling factor:</p>
-
-<pre class="prettyprint">
-Evas_Object *button;
-
-// The button object is created and configured
-
-// Set the global scale factor to 2.0
-elm_config_scale_set(2.0);
-
-// Set the scaling factor of the button component to 2.0, this component
-// appears 4 times bigger than its initial size
-elm_object_scale_set(button, 2.0);
-</pre>
-
-<h3 id="Example" name="Example">Example</h3>
-
-<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
-
-<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application</p> 
-<p align="center"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p> 
-
-<p>The previous picture shows the <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.</p>
-
-<p>The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.</p>
-
-<p class="figure">Figure: Scale increased (1.30)</p> 
-<p align="center"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p> 
-
-<p>A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.</p>
-
-<p class="figure">Figure: Finger size increased (90px)</p> 
-<p align="center"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p> 
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">It is up to the theme (Edje file) to set the parts that are scalable. This is something that needs to be taken into account when developing a new Edje theme. This can be done in EDC with the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter. Refer to the <a href="edje_n.htm">Edje</a> guide for more information on how to do that.</td>
-</tr>
-</tbody>
-</table> 
-
-<h3 id="Scalable_EDC_Object" name="Scalable_EDC_Object">Creating Scalable EDC Objects</h3>
-
-<h4>Scale Parameter </h4>
-
-<p>This chapter explains how to make a scalable Edje object and give hints how to write an EDC file that is scalable. The example shows a basic button that is composed of a background image part and a swallow part that can receive some content.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>To have a scalable object, set the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to 1 on the parts you want to be scalable as explained in the <a href="edje_n.htm#Scalability">scalability chapter of the Edje guide</a>. Here the <span style="font-family: Courier New,Courier,monospace;">bg</span> and <span style="font-family: Courier New,Courier,monospace;">elm.swallow.content</span> parts must be scalable.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h4>Image Set</h4>
-
-<p>If your application needs to be used at different resolutions it is recommended to have 2 images for the background image <span style="font-family: Courier New,Courier,monospace;">bg.png</span>. Here the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> is added to the application. It is used when the size of the image is under 500 px, and a <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image is for higher resolutions. Use a set on the <span style="font-family: Courier New,Courier,monospace;">bg.png</span> image as explained in the Using Image Set chapter of the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_low.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 200 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_high.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 101 5000 5000;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The image below shows three buttons with only a background part visible (the SWALLOW part is empty).</p>
-
-<p class="figure">Figure: Image set example</p> 
-<p align="center"><img alt="Image set example" src="../../images/scale.png" /></p> 
-
-<p>The first button&#39;s size is 100x50 pixels, the background image (<span style="font-family: Courier New,Courier,monospace;">bg_low.png</span>) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</p>
-
-<p>To prevent this, the image set has a bigger image to use when the size is bigger than 200x100 pixels (<span style="font-family: Courier New,Courier,monospace;">bg_high.png</span>). The third button size is 201x101 pixels and it uses the new image, which has a better quality than the scaled image.</p>
-
-<h4>Image Borders</h4>
-
-<p>When the button is resized, the image part is also resized because it is marked as scalable. To get the image resized but to keep the image border as it is, use the <span style="font-family: Courier New,Courier,monospace;">border</span> parameter. It specifies the border size which is not resized even if the image is. This is explained in the Border resizing chapter of the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<p>To add a 40 pixel border on the left and right part of the <span style="font-family: Courier New,Courier,monospace;">bg</span> image and a 20 pixel border on top and bottom borders:</p>
-
-<pre class="prettyprint">
-parts 
-{
-&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.border: 40 40 20 20;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.</p>
-
-<p class="figure">Figure: Border example</p> 
-<p align="center"><img alt="Border example" src="../../images/border.png" /></p> 
-
-  <h2 id="components" name="components">Using UI Components</h2>
-  
-  <p class="figure">Figure: Elementary</p>
-<p align="center"><img alt="Elementary" src="../../images/elementary.png" /></p>
-
-<p>The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
-
-<h3 id="elm_basics" name="elm_basics">Elementary Basics</h3>
-
-<p>In this chapter, we explain how UI components are built in a hierarchical manner, how to build a minimal Elementary application, and what the differences are between the callbacks that can be registered for UI components.</p>
-
-<p><a href="elementary_mn.htm">Elementary</a></p>
-
-<h3 id="elm_config" name="elm_config">Elementary Configuration</h3>
-
-<p>Elementary can be configured using profiles. These chapters detail some configuration items that can be modified to tweak the use of Elementary.</p>
-
-<p><a href="elementary_mn.htm#config">Managing Elementary Profiles</a> and <a href="elementary_mn.htm#options">Configuring Elementary Options</a></p>
-
-<h3 id="ui" name="ui">Components</h3>
-  
-  <table border="1"> 
-   <caption>
-     Table: Available UI components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr>      
-       <tr> 
-     <td><a href="components_mn.htm#background">Background</a></td> 
-     <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#button">Button</a></td> 
-     <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#check">Check</a></td> 
-     <td>The check component toggles the value of a Boolean between true and false.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#colorselector">Colorselector</a></td> 
-     <td>The colorselector component provides a color selection solution to the user. It has different modes available, each of them showing a different configuration of the color selection.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#background">Ctxpopup</a></td> 
-     <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#datetime">Datetime</a></td> 
-     <td>The datetime component can display and input date and time values.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#entry">Entry</a></td> 
-     <td>The entry component is a box to which the user can enter text.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#flip">Flip</a></td> 
-     <td>The flip component can hold two Evas objects and let the user flip between these objects using a variety of predefined animations.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#gengrid">Gengrid</a></td> 
-     <td>The gengrid component displays objects on a grid layout and renders only the visible objects.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#genlist">Genlist</a></td> 
-     <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
-    </tr>
-               <tr> 
-     <td><a href="components_mn.htm#glview">GLView</a></td> 
-     <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#icon">Icon</a></td> 
-     <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#image">Image</a></td> 
-     <td>The image component can load and display an image from a file or from memory.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#index">Index</a></td> 
-     <td>The index component provides an index for fast access to another group of UI items.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#label">Label</a></td> 
-     <td>The label component displays text with simple HTML-like markup.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#list">List</a></td> 
-     <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#map">Map</a></td> 
-     <td>The map component can display a geographic map. The default map data is provided by the OpenStreetMap project (<a target="_blank" href="http://www.openstreetmap.org/">http://www.openstreetmap.org/</a>).</td>
-    </tr>
-               <tr> 
-     <td><a href="components_mn.htm#notify">Notify</a></td> 
-     <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#panel">Panel</a></td> 
-     <td>The panel component is an animated object that can contain child objects. It can be expanded or contracted by clicking on the button on its edge.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#photo">Photo</a></td> 
-     <td>The photo component can be used to display a photo, such as a contact image. If no photo is set, the UI component displays a person icon to show that it is a photo placeholder.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#photocam">Photocam</a></td> 
-     <td>The photocam component is designed to display high-resolution photos taken with a digital camera. It allows you to zoom photos, load photos fast, and fit photos. It is optimized for JPEG images and has a low memory footprint.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#plug">Plug</a></td> 
-     <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#popup">Popup</a></td> 
-     <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#progressbar">Progressbar</a></td> 
-     <td>The progressbar component can be used to display the progress status of a given job.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#radio">Radio</a></td> 
-     <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#segmentcontrol">Segmentcontrol</a></td> 
-     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#slider">Slider</a></td> 
-     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#spinner">Spinner</a></td> 
-     <td>The spinner component enables the user to increase or decrease a numeric value by using arrow buttons.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#toolbar_component">Toolbar</a></td> 
-     <td>The toolbar component is a scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#tooltip">Tooltip</a></td> 
-     <td>The tooltip component is a smart object used to show tips or information about a parent object when the mouse hovers over the parent object.</td>
-    </tr>
-       <tr> 
-     <td><a href="events_effects_n.htm#animation_effect">Transit</a></td> 
-     <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit component is documented in the Creating Animations and Effects guide.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_mn.htm#win">Win</a></td> 
-     <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
-    </tr>
-   </tbody> 
-  </table> 
-  
-  
-  
-  <h3 id="focus" name="focus">UI Component Focus</h3>
-
-<p>You can programmatically change the focus of UI components in an EFL application.</p>
-
-<p><a href="preferences_n.htm#focus">Managing UI Component Focus</a></p>
-
-<h3 id="styleguide" name="styleguide">UI Component Styles</h3>
-
-<p>You can apply styles to various UI components to change their appearance.</p>
-
-<p><a href="styles_mn.htm">UI Component Styles</a></p>
-
-<h3 id="customization" name="customization">UI Component Customization</h3>
-
-<p>You can use themes and styles to customize the look and feel of UI components.</p>
-
-<p><a href="preferences_n.htm#customize">Customizing UI Components</a></p>
-  
-  <h3 id="containers" name="containers">Containers</h3> 
-  
- <p>All applications use containers to create the layout of their UI. The EFL and Elementary support several ways to create this layout. You can use a predefined layout or an animated layout, or you can create your own layout.</p>
-
-<p>In this guide, we look at how to use the different containers provided by Elementary.</p>
- 
-   <table border="1"> 
-   <caption>
-     Table: Available container components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Container name</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr>      
-       <tr> 
-     <td><a href="containers_mn.htm#box">Box</a></td>  
-     <td>One of the most simple containers in the EFL is a box.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_mn.htm#conformant">Conformant</a></td> 
-     <td>A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_mn.htm#grid">Grid</a></td>  
-     <td>In a grid, objects are placed at specific positions along a fixed grid.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_mn.htm#layout">Layout</a></td>     
-     <td>A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_mn.htm#mapbuf">Mapbuf</a></td>     
-     <td>A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_mn.htm#naviframe">Naviframe</a></td>  
-     <td>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_mn.htm#panes">Panes</a></td>       
-     <td>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_mn.htm#scroller">Scroller</a></td>         
-     <td>A scroller holds (and clips) a single object and allows you to scroll across it.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_mn.htm#table">Table</a></td>       
-     <td>A table is like a box but with 2 dimensions.</td>
-    </tr>
-       </tbody> 
-  </table> 
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ui_component_n.htm b/org.tizen.guides/html/native/ui/ui_component_n.htm
deleted file mode 100644 (file)
index 8619779..0000000
--- a/org.tizen.guides/html/native/ui/ui_component_n.htm
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
-  <div id="container"><div id="contents"><div class="content">
-  <h1>UI Components</h1> 
-
-<p>Click the profile you want:</p>
-<p><a href="ui_component_mn.htm"><img alt="Mobile native" src="../../images/mn_division.png"/></a> <a href="ui_component_wn.htm"><img alt="Wearable native" src="../../images/wn_division.png"/></a></p> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ui_component_wn.htm b/org.tizen.guides/html/native/ui/ui_component_wn.htm
deleted file mode 100644 (file)
index 2a66324..0000000
--- a/org.tizen.guides/html/native/ui/ui_component_wn.htm
+++ /dev/null
@@ -1,561 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Components</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                               <li><a href="#scalability">Scaling UI Components</a></li>                       
-                               <li><a href="#components">Using UI Components</a></li>
-               </ul>
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Components Tutorials</a></li>     
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>UI Components</h1> 
-  <p>The UI component management features allow you manage the UI components and their focus on the screen, as well as create customizations. The Elementary library provides several UI components than can be used to compose the user interface of your application.</p> 
-  
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>    
-  
-  <p>The main features of UI component management are:</p>
-               <ul>
-                       <li><a href="#scalability">Scaling UI components</a> <p>Enables you to scale UI components in order to be comfortably used with a finger and make text more readable.</p></li>                  
-                       <li><a href="#components">Using UI components</a> <p>Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.</p></li>  
-               </ul>
-  
-  <h2 id="scalability" name="scalability">Scaling UI Components</h2> 
-  
-<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale UI components with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.</p>
-
-<h3 id="Finger_Size" name="Finger_Size">Finger Size</h3>
-
-<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales UI components based on the user&#39;s finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.</p>
-
-<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of UI components so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
-
-<p>To increase the current global finger size by 20px:</p>
-
-<pre class="prettyprint">
-Evas_Coord finger_size;
-
-// Get the current finger size
-finger_size = elm_config_finger_size_get();
-
-// Add 20px to finger size parameter and set it 
-// to the global Elementary configuration
-elm_config_finger_size_set(finger_size + 20);
-</pre>
-
-<h3 id="Scale" name="Scale">Scale</h3>
-
-<p>This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
-
-<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the UI components. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary UI component and all its children.</p>
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">The scaling factor is multiplicative, if a child already has a scale size set, it is multiplied by its parent&#39;s scale size.</td>
-</tr>
-</tbody>
-</table>
-
-<p>The following example sets the global scaling factor to 2.0. Then, the scaling factor of an existing Elementary object is set to 2.0, meaning that this object appears as if it had a 4.0 scale factor, the rest of the application is displayed with a 2.0 scaling factor:</p>
-
-<pre class="prettyprint">
-Evas_Object *button;
-
-// The button object is created and configured
-
-// Set the global scale factor to 2.0
-elm_config_scale_set(2.0);
-
-// Set the scaling factor of the button component to 2.0, this component
-// appears 4 times bigger than its initial size
-elm_object_scale_set(button, 2.0);
-</pre>
-
-<h3 id="Example" name="Example">Example</h3>
-
-<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
-
-<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application</p> 
-<p align="center"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p> 
-
-<p>The previous picture shows the <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.</p>
-
-<p>The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.</p>
-
-<p class="figure">Figure: Scale increased (1.30)</p> 
-<p align="center"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p> 
-
-<p>A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.</p>
-
-<p class="figure">Figure: Finger size increased (90px)</p> 
-<p align="center"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p> 
-
-<table class="note">
-<tbody>
-<tr>
-<th class="note">Note</th>
-</tr>
-<tr>
-<td class="note">It is up to the theme (Edje file) to set the parts that are scalable. This is something that needs to be taken into account when developing a new Edje theme. This can be done in EDC with the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter. Refer to the <a href="edje_n.htm">Edje</a> guide for more information on how to do that.</td>
-</tr>
-</tbody>
-</table> 
-
-<h3 id="Scalable_EDC_Object" name="Scalable_EDC_Object">Creating Scalable EDC Objects</h3>
-
-<h4>Scale Parameter </h4>
-
-<p>This chapter explains how to make a scalable Edje object and give hints how to write an EDC file that is scalable. The example shows a basic button that is composed of a background image part and a swallow part that can receive some content.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>To have a scalable object, set the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to 1 on the parts you want to be scalable as explained in the <a href="edje_n.htm#Scalability">scalability chapter of the Edje guide</a>. Here the <span style="font-family: Courier New,Courier,monospace;">bg</span> and <span style="font-family: Courier New,Courier,monospace;">elm.swallow.content</span> parts must be scalable.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h4>Image Set</h4>
-
-<p>If your application needs to be used at different resolutions it is recommended to have 2 images for the background image <span style="font-family: Courier New,Courier,monospace;">bg.png</span>. Here the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> is added to the application. It is used when the size of the image is under 500 px, and a <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image is for higher resolutions. Use a set on the <span style="font-family: Courier New,Courier,monospace;">bg.png</span> image as explained in the Using Image Set chapter of the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<pre class="prettyprint">
-group 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_low.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 200 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_high.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 101 5000 5000;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The image below shows three buttons with only a background part visible (the SWALLOW part is empty).</p>
-
-<p class="figure">Figure: Image set example</p> 
-<p align="center"><img alt="Image set example" src="../../images/scale.png" /></p> 
-
-<p>The first button&#39;s size is 100x50 pixels, the background image (<span style="font-family: Courier New,Courier,monospace;">bg_low.png</span>) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</p>
-
-<p>To prevent this, the image set has a bigger image to use when the size is bigger than 200x100 pixels (<span style="font-family: Courier New,Courier,monospace;">bg_high.png</span>). The third button size is 201x101 pixels and it uses the new image, which has a better quality than the scaled image.</p>
-
-<h4>Image Borders</h4>
-
-<p>When the button is resized, the image part is also resized because it is marked as scalable. To get the image resized but to keep the image border as it is, use the <span style="font-family: Courier New,Courier,monospace;">border</span> parameter. It specifies the border size which is not resized even if the image is. This is explained in the Border resizing chapter of the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<p>To add a 40 pixel border on the left and right part of the <span style="font-family: Courier New,Courier,monospace;">bg</span> image and a 20 pixel border on top and bottom borders:</p>
-
-<pre class="prettyprint">
-parts 
-{
-&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.border: 40 40 20 20;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.</p>
-
-<p class="figure">Figure: Border example</p> 
-<p align="center"><img alt="Border example" src="../../images/border.png" /></p> 
-
-  <h2 id="components" name="components">Using UI Components</h2>
-  
-  <p class="figure">Figure: Elementary</p>
-<p align="center"><img alt="Elementary" src="../../images/elementary.png" /></p>
-
-<p>The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
-
-<h3 id="elm_basics" name="elm_basics">Elementary Basics</h3>
-
-<p>In this chapter, we explain how UI components are built in a hierarchical manner, how to build a minimal Elementary application, and what the differences are between the callbacks that can be registered for UI components.</p>
-
-<p><a href="elementary_wn.htm">Elementary</a></p>
-
-<h3 id="elm_config" name="elm_config">Elementary Configuration</h3>
-
-<p>Elementary can be configured using profiles. These chapters detail some configuration items that can be modified to tweak the use of Elementary.</p>
-
-<p><a href="elementary_wn.htm#config">Managing Elementary Profiles</a> and <a href="elementary_wn.htm#options">Configuring Elementary Options</a></p>
-
-<h3 id="ui" name="ui">Components</h3>
-  
-  <table border="1"> 
-   <caption>
-     Table: Available UI components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr>      
-       <tr> 
-     <td><a href="components_wn.htm#background">Background</a></td> 
-     <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#button">Button</a></td> 
-     <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#check">Check</a></td> 
-     <td>The check component toggles the value of a Boolean between true and false.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#ctxpopup">Ctxpopup</a></td> 
-     <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#datetime">Datetime</a></td> 
-     <td>The datetime component can display and input date and time values.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#entry">Entry</a></td> 
-     <td>The entry component is a box to which the user can enter text.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#genlist">Genlist</a></td> 
-     <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
-    </tr>
-               <tr> 
-     <td><a href="components_wn.htm#glview">GLView</a></td> 
-     <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#icon">Icon</a></td> 
-     <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#image">Image</a></td> 
-     <td>The image component can load and display an image from a file or from memory.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#index">Index</a></td> 
-     <td>The index component provides an index for fast access to another group of UI items.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#label">Label</a></td> 
-     <td>The label component displays text with simple HTML-like markup.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#list">List</a></td> 
-     <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
-    </tr>
-               <tr> 
-     <td><a href="components_wn.htm#notify">Notify</a></td> 
-     <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#plug">Plug</a></td> 
-     <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#popup">Popup</a></td> 
-     <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#progressbar">Progressbar</a></td> 
-     <td>The progressbar component can be used to display the progress status of a given job.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#radio">Radio</a></td> 
-     <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#slider">Slider</a></td> 
-     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
-    </tr>
-       <tr> 
-     <td><a href="events_effects_n.htm#animation_effect">Transit</a></td> 
-     <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit component is documented in the Creating Animations and Effects guide.</td>
-    </tr>
-       <tr> 
-     <td><a href="components_wn.htm#win">Win</a></td> 
-     <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
-    </tr>
-   </tbody> 
-  </table> 
-  
-  <table border="1"> 
-   <caption>
-     Table: Available circle UI components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr>
-       <tr> 
-     <td><a href="circle_components_wn.htm#datetime">Circle Datetime</a></td> 
-     <td>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field.</td>
-    </tr>      
-       <tr> 
-     <td><a href="circle_components_wn.htm#genlist">Circle Genlist</a></td> 
-     <td>The circle genlist provides a scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</td>
-    </tr>
-       <tr>
-     <td><a href="circle_components_wn.htm#object">Circle Object</a></td> 
-     <td>The circle object extends elementary components in a form of circular design. Sometimes a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.</td>
-    </tr>
-       <tr> 
-     <td><a href="circle_components_wn.htm#progressbar">Circle Progressbar</a></td> 
-     <td>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</td>
-    </tr>
-       <tr> 
-     <td><a href="circle_components_wn.htm#scroller">Circle Scroller</a></td> 
-     <td>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.</td>
-    </tr>
-       <tr> 
-     <td><a href="circle_components_wn.htm#slider">Circle Slider</a></td> 
-     <td>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</td>
-    </tr>
-       <tr> 
-     <td><a href="circle_components_wn.htm#surface">Circle Surface</a></td> 
-     <td>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered.</td>
-    </tr>
-   </tbody> 
-  </table> 
-  
-  
-  <h3 id="focus" name="focus">UI Component Focus</h3>
-
-<p>You can programmatically change the focus of UI components in an EFL application.</p>
-
-<p><a href="preferences_n.htm#focus">Managing UI Component Focus</a></p>
-
-<h3 id="styleguide" name="styleguide">UI Component Styles</h3>
-
-<p>You can apply styles to various UI components to change their appearance.</p>
-
-<p><a href="styles_wn.htm">UI Component Styles</a></p>
-
-<h3 id="customization" name="customization">UI Component Customization</h3>
-
-<p>You can use themes and styles to customize the look and feel of UI components.</p>
-
-<p><a href="preferences_n.htm#customize">Customizing UI Components</a></p>
-  
-  <h3 id="containers" name="containers">Containers</h3> 
-  
- <p>All applications use containers to create the layout of their UI. The EFL and Elementary support several ways to create this layout. You can use a predefined layout or an animated layout, or you can create your own layout.</p>
-
-<p>In this guide, we look at how to use the different containers provided by Elementary.</p>
- 
-   <table border="1"> 
-   <caption>
-     Table: Available container components
-   </caption> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Container name</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr>      
-       <tr> 
-     <td><a href="containers_wn.htm#box">Box</a></td>   
-     <td>One of the most simple containers in the EFL is a box.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_wn.htm#conformant">Conformant</a></td> 
-     <td>A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_wn.htm#grid">Grid</a></td>         
-     <td>In a grid, objects are placed at specific positions along a fixed grid.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_wn.htm#layout">Layout</a></td>     
-     <td>A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_wn.htm#mapbuf">Mapbuf</a></td>     
-     <td>A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_wn.htm#naviframe">Naviframe</a></td>       
-     <td>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_wn.htm#scroller">Scroller</a></td>         
-     <td>A scroller holds (and clips) a single object and allows you to scroll across it.</td>
-    </tr>
-       <tr> 
-     <td><a href="containers_wn.htm#table">Table</a></td>  
-     <td>A table is like a box but with 2 dimensions.</td>
-    </tr>
-       </tbody> 
-  </table> 
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/ui_guide_n.htm b/org.tizen.guides/html/native/ui/ui_guide_n.htm
index 63b3622..9fe4c3c 100644 (file)
--- a/org.tizen.guides/html/native/ui/ui_guide_n.htm
+++ b/org.tizen.guides/html/native/ui/ui_guide_n.htm
@@ -32,24 +32,14 @@
 <div id="container"><div id="contents"><div class="content">
 
   <h1>UI Framework</h1> 
-  <p>UI framework features include all aspects of creating a visual outlook for your application to ensure the best possible user experience.</p>
+  <p>UI framework features include some aspects of creating a visual outlook for your application to ensure the best possible user experience.</p>
   <p>The main UI features are:</p>
      <ul>       
-        <li><a href="efl_n.htm">EFL</a> <p>Enables you to construct graphical user interfaces.</p></li>
-        <li><a href="eina_n.htm">Eina</a> <p>Enables you to create and manipulate the most common data types and tools of Eina.</p></li>
-        <li><a href="evas_n.htm">Evas</a> <p>Enables you to manipulate objects on a clean display canvas formed for the target display systems.</p></li>
-        <li><a href="edje_n.htm">Edje</a> <p>Enables you to theme an application.</p></li>
-        <li><a href="ecore_n.htm">Ecore</a><p></p>Enables you to manage the application main loop.</li>
-        <li><a href="events_effects_n.htm">Event and Effect</a> <p>Enables you to handle different kinds of events.</p></li>
-        <li><a href="ui_component_n.htm">UI Components</a><p></p>Enables you to manage shortcuts, UI components, and scalability.</li>  
-        <li><a href="efl_extension_n.htm">Efl Extension</a> <p>Enables you to work with the Menu and Back hardware keys on devices.</p></li>
-        <li><a href="font_setting_n.htm">Font Setting</a> <p>Enables you to change the font of your application to another system default font or your own font.</p></li>
-        <li><a href="efl_util_n.htm">EFL UTIL</a> <p>Enables you to manage notification window levels.</p> </li>
-        <li><a href="multiple_screens_n.htm">Multiple Screen Support</a> <p>Enables you to design applications for different kinds of screens.</p></li>        
-       <li><a href="scalability_n.htm">Scalability Support</a> <p>Enables you to design applications so that their UI can be scaled for diverse devices without problems.</p></li>      
        <li><a href="eom_n.htm">External Output Manager</a> <p>Enables you to handle external output devices.</p></li>
      </ul>
- 
+
+<p>For more information about implementing the UI for your application using the EFL features, see <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a>.</p>      
+        
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/uix/stt_n.htm b/org.tizen.guides/html/native/uix/stt_n.htm
index 78c552b..c95e4c4 100644 (file)
--- a/org.tizen.guides/html/native/uix/stt_n.htm
+++ b/org.tizen.guides/html/native/uix/stt_n.htm
@@ -1,109 +1,109 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>STT</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-                               <ul class="toc">
-                                       <li><a href="#basic_stt">Basic STT Processes</a></li>
-                                       <li><a href="#info_stt">Getting STT Information</a></li>
-                               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm">STT Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>STT</h1> 
-
-<p>The STT (speech-to-text) features enable recognizing sound data recorded by the user and sending the result as text. When your application creates a handle and prepares the STT service by the API, the STT daemon is invoked and connected for background work. This daemon and your application communicate as the server and the client.</p>
-
-<h2 id="basic_stt" name="basic_stt">Basic STT Processes</h2>
-
-<p>Using STT, you can:</p>
-<ul>
-<li>Create a handle and register callback functions.
- <ul>
- <li>Create a STT handle, which is used for distinguishing your application from other applications also using the STT.</li>
- <li>Get notified on state changes, language changes, recognition results, and errors by registered callback functions.</li>
- </ul>
-</li>
-<li>Start, stop, and cancel recognition.
- <ul>
- <li>Start recording the user voice by microphone and analyze the recorded data as text.</li>
- <li>If you stop the recording manually by the API, the STT stops the recording and recognizes the sound data. The recognized text is then sent by the registered callback function.</li>
- <li>You also can set sounds which are played before the STT recording starts or after the recording stops.</li>
- </ul>
-</li>
-<li>Get the recognition result.
- <ul>
- <li>The recognition result is sent by the registered callback function.</li>
- <li>With a specific STT engine, you can obtain the time stamp information for the recognition result.</li>
- <li>Some STT engines send the recognition result partially during the user recording. You can get the result information using the parameter of the recognition result callback function.</li>
- </ul>
-</li>
-</ul>
-
-<p>The STT life-cycle is described in the following figure.</p>
- 
-   <p class="figure">Figure: STT life-cycle</p> 
-  <p align="center"><img src="../../images/stt_lifecycle.png" alt="STT life-cycle" /></p>
-  
-<h2 id="info_stt" name="info_stt">Getting STT Information</h2>
-<p>You can get the following information about the STT:</p>
-<ul>
-<li>Get the current state of the STT. The state is also applied as a precondition for each function.</li>
-<li>Get the default language.
-<ul><li>You can start recognition with the language that you want as a parameter of the start API. However, if you do not set a specific language, the STT starts recording and uses the default language for recognition.</li>
-<li>The default language can be changed by the STT setting an application or by the display language changing. If the display language is changed to a non-supported one, the STT language is changed to UK English.</li></ul></li>
-<li>Get a list of the supported languages to check whether the language you want is supported.</li>
-<li>Get a list of the supported engines and the selection of current engines. Additional features, such as silence detection and partial result, are provided by specific engines.</li>
-</ul>
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>STT</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+                               <ul class="toc">\r
+                                       <li><a href="#basic_stt">Basic STT Processes</a></li>\r
+                                       <li><a href="#info_stt">Getting STT Information</a></li>\r
+                               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm">STT Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>STT</h1> \r
+\r
+<p>The STT (speech-to-text) features enable recognizing sound data recorded by the user and sending the result as text. When your application creates a handle and prepares the STT service by the API, the STT daemon is invoked and connected for background work. This daemon and your application communicate as the server and the client.</p>\r
+\r
+<h2 id="basic_stt" name="basic_stt">Basic STT Processes</h2>\r
+\r
+<p>Using STT, you can:</p>\r
+<ul>\r
+<li>Create a handle and register callback functions.\r
+ <ul>\r
+ <li>Create a STT handle, which is used for distinguishing your application from other applications also using the STT.</li>\r
+ <li>Get notified on state changes, language changes, recognition results, and errors by registered callback functions.</li>\r
+ </ul>\r
+</li>\r
+<li>Start, stop, and cancel recognition.\r
+ <ul>\r
+ <li>Start recording the user voice by microphone and analyze the recorded data as text.</li>\r
+ <li>If you stop the recording manually by the API, the STT stops the recording and recognizes the sound data. The recognized text is then sent by the registered callback function.</li>\r
+ <li>You also can set sounds which are played before the STT recording starts or after the recording stops.</li>\r
+ </ul>\r
+</li>\r
+<li>Get the recognition result.\r
+ <ul>\r
+ <li>The recognition result is sent by the registered callback function.</li>\r
+ <li>With a specific STT engine, you can obtain the time stamp information for the recognition result.</li>\r
+ <li>Some STT engines send the recognition result partially during the user recording. You can get the result information using the parameter of the recognition result callback function.</li>\r
+ </ul>\r
+</li>\r
+</ul>\r
+\r
+<p>The STT life-cycle is described in the following figure.</p>\r
+ \r
+   <p class="figure">Figure: STT life-cycle</p> \r
+  <p align="center"><img src="../../images/stt_lifecycle.png" alt="STT life-cycle" /></p>\r
+  \r
+<h2 id="info_stt" name="info_stt">Getting STT Information</h2>\r
+<p>You can get the following information about the STT:</p>\r
+<ul>\r
+<li>Get the current state of the STT. The state is also applied as a precondition for each function.</li>\r
+<li>Get the default language.\r
+<ul><li>You can start recognition with the language that you want as a parameter of the start API. However, if you do not set a specific language, the STT starts recording and uses the default language for recognition.</li>\r
+<li>The default language can be changed by the STT setting an application or by the display language changing. If the display language is changed to a non-supported one, the STT language is changed to UK English.</li></ul></li>\r
+<li>Get a list of the supported languages to check whether the language you want is supported.</li>\r
+<li>Get a list of the supported engines and the selection of current engines. Additional features, such as silence detection and partial result, are provided by specific engines.</li>\r
+</ul>\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.guides/html/native/uix/tts_n.htm b/org.tizen.guides/html/native/uix/tts_n.htm
index 64ef9f6..91d69c7 100644 (file)
--- a/org.tizen.guides/html/native/uix/tts_n.htm
+++ b/org.tizen.guides/html/native/uix/tts_n.htm
@@ -1,110 +1,110 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>TTS</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-                               <ul class="toc">
-                                       <li><a href="#basic_tts">Basic TTS Processes</a></li>
-                                       <li><a href="#info_tts">Getting TTS Information</a></li>
-                               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm">TTS Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>TTS</h1> 
-
-<p>The TTS (text-to-speech) features include synthesizing text into sound data as utterances and playing them. It is also possible to pause and stop playing. When your application creates a handle and prepares the TTS service by the API, the TTS daemon is invoked and connected for background work. This daemon and your application communicate as the server and the client.</p>
-
-<h2 id="basic_tts" name="basic_tts">Basic TTS Processes</h2>
-
-<p>Using TTS, you can:</p>
-<ul>
-<li>Create a handle and register callback functions.
-       <ul>
-       <li>Create a TTS handle which is used for distinguishing your application from other applications also using the TTS.</li>
-       <li>To get notifications about state changes, language changes, starting or finishing utterances, and errors, register callback functions.</li>
-       </ul>
-</li>
-<li>Add text.
-       <ul>
-       <li>Add the text that you want to read out by the TTS module. The requested text is handled as an utterance. You can add several texts, and they are managed using a queue.</li>
-       <li>There is a limit on the maximum text length for one utterance, and the time spent for synthesizing is dependent on the text length.</li>
-       </ul>
-</li>
-<li>Play, pause, and stop playback.
-       <ul>
-       <li>Synthesize the text in the queue and play the sound data after synthesizing.</li>
-       <li>You can also pause and stop playing. If you call the function to stop, all requested data (both the sound data and text in the queue) is deleted.</li>
-       </ul>
-</li>
-</ul>
-
-<p>The TTS life-cycle is described in the following figure.</p>
- 
-   <p class="figure">Figure: TTS life-cycle</p> 
-  <p align="center"><img src="../../images/tts_lifecycle.png" alt="TTS life-cycle" /></p>
-
-<h2 id="info_tts" name="info_tts">Getting TTS Information</h2>
-<p>You can get the following information about the TTS:</p>
-<ul>
-<li>Get the current state of the TTS. The state is also applied as a precondition for each function.</li>
-<li>Get the default voice.
-       <ul>
-       <li>In the TTS, the voice is defined as a combination of the language and the type, such as male or female.</li>
-       <li>You can request the synthesis of the text with your own voice option by the parameter of the add text function. However, if you do not set a specific option, the TTS synthesizes the text with the default voice.</li>
-       <li>The default voice can be changed by the TTS setting an application or by the display language changing. If the display language is changed to a non-supported language, the language of the TTS is changed to UK English.</li>
-       </ul>
-</li>
-<li>Get a list of supported voices to check whether the language and voice type you want are supported.</li>
-</ul>
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>TTS</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+                               <ul class="toc">\r
+                                       <li><a href="#basic_tts">Basic TTS Processes</a></li>\r
+                                       <li><a href="#info_tts">Getting TTS Information</a></li>\r
+                               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm">TTS Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>TTS</h1> \r
+\r
+<p>The TTS (text-to-speech) features include synthesizing text into sound data as utterances and playing them. It is also possible to pause and stop playing. When your application creates a handle and prepares the TTS service by the API, the TTS daemon is invoked and connected for background work. This daemon and your application communicate as the server and the client.</p>\r
+\r
+<h2 id="basic_tts" name="basic_tts">Basic TTS Processes</h2>\r
+\r
+<p>Using TTS, you can:</p>\r
+<ul>\r
+<li>Create a handle and register callback functions.\r
+       <ul>\r
+       <li>Create a TTS handle which is used for distinguishing your application from other applications also using the TTS.</li>\r
+       <li>To get notifications about state changes, language changes, starting or finishing utterances, and errors, register callback functions.</li>\r
+       </ul>\r
+</li>\r
+<li>Add text.\r
+       <ul>\r
+       <li>Add the text that you want to read out by the TTS module. The requested text is handled as an utterance. You can add several texts, and they are managed using a queue.</li>\r
+       <li>There is a limit on the maximum text length for one utterance, and the time spent for synthesizing is dependent on the text length.</li>\r
+       </ul>\r
+</li>\r
+<li>Play, pause, and stop playback.\r
+       <ul>\r
+       <li>Synthesize the text in the queue and play the sound data after synthesizing.</li>\r
+       <li>You can also pause and stop playing. If you call the function to stop, all requested data (both the sound data and text in the queue) is deleted.</li>\r
+       </ul>\r
+</li>\r
+</ul>\r
+\r
+<p>The TTS life-cycle is described in the following figure.</p>\r
+ \r
+   <p class="figure">Figure: TTS life-cycle</p> \r
+  <p align="center"><img src="../../images/tts_lifecycle.png" alt="TTS life-cycle" /></p>\r
+\r
+<h2 id="info_tts" name="info_tts">Getting TTS Information</h2>\r
+<p>You can get the following information about the TTS:</p>\r
+<ul>\r
+<li>Get the current state of the TTS. The state is also applied as a precondition for each function.</li>\r
+<li>Get the default voice.\r
+       <ul>\r
+       <li>In the TTS, the voice is defined as a combination of the language and the type, such as male or female.</li>\r
+       <li>You can request the synthesis of the text with your own voice option by the parameter of the add text function. However, if you do not set a specific option, the TTS synthesizes the text with the default voice.</li>\r
+       <li>The default voice can be changed by the TTS setting an application or by the display language changing. If the display language is changed to a non-supported language, the language of the TTS is changed to UK English.</li>\r
+       </ul>\r
+</li>\r
+<li>Get a list of supported voices to check whether the language and voice type you want are supported.</li>\r
+</ul>\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.guides/html/native/uix/uix_guide_n.htm b/org.tizen.guides/html/native/uix/uix_guide_n.htm
index 1389874..0903492 100644 (file)
--- a/org.tizen.guides/html/native/uix/uix_guide_n.htm
+++ b/org.tizen.guides/html/native/uix/uix_guide_n.htm
@@ -1,71 +1,71 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>UIX</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX Tutorials</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>UIX</h1> 
-
-       <p>UIX features include managing sound data, such as voice commands, speech-to-text (STT), and text-to-speech (TTS).</p>
-
-
-       <p>The main UIX features are:</p>
-       <ul>
-               <li><a href="tts_n.htm">TTS</a> <p>Enables you to synthesize text into sound data and play it.</p></li>
-               <li><a href="stt_n.htm">STT</a> <p>Enables you to recognize sound data recorded by the user and send the result as text.</p></li>
-               <li><a href="voicecontrol_guide_n.htm">Voice Control</a> <p>Enables you to let the user control the device through voice commands.</p></li>
-               <li><a href="ime_n.htm">Input Method</a> <p>Enables you to create an IME application that provides a new keyboard for the user.</p></li>
-       </ul>
-    
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>UIX</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX Tutorials</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>UIX</h1> \r
+\r
+       <p>UIX features include managing sound data, such as voice commands, speech-to-text (STT), and text-to-speech (TTS).</p>\r
+\r
+\r
+       <p>The main UIX features are:</p>\r
+       <ul>\r
+               <li><a href="tts_n.htm">TTS</a> <p>Enables you to synthesize text into sound data and play it.</p></li>\r
+               <li><a href="stt_n.htm">STT</a> <p>Enables you to recognize sound data recorded by the user and send the result as text.</p></li>\r
+               <li><a href="voicecontrol_guide_n.htm">Voice Control</a> <p>Enables you to let the user control the device through voice commands.</p></li>\r
+               <li><a href="ime_n.htm">Input Method</a> <p>Enables you to create an IME application that provides a new keyboard for the user.</p></li>\r
+       </ul>\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.guides/html/native/web/web_guide_n.htm b/org.tizen.guides/html/native/web/web_guide_n.htm
index d813da7..07d3eee 100644 (file)
--- a/org.tizen.guides/html/native/web/web_guide_n.htm
+++ b/org.tizen.guides/html/native/web/web_guide_n.htm
@@ -1,74 +1,74 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Web</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web Tutorial</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Web</h1> 
-<p>Web features include accessing Web content in your application.</p>
-
-<p>The main Web features are:</p>
-<ul>
-<li>WebView 
-<p>Enables you to access the Web pages and Web content.</p>
- <p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. EFL APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">evas_*</span>, <span style="font-family: Courier New,Courier,monospace;">elm_*</span>, and <span style="font-family: Courier New,Courier,monospace;">eina_*</span>, are used to build up a complete application supporting Web browsing.</p>
-</li>
-</ul>
-
-  
-  
-   
-   
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Web</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+       \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web Tutorial</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Web</h1> \r
+<p>Web features include accessing Web content in your application.</p>\r
+\r
+<p>The main Web features are:</p>\r
+<ul>\r
+<li>WebView \r
+<p>Enables you to access the Web pages and Web content.</p>\r
+ <p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. EFL APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">evas_*</span>, <span style="font-family: Courier New,Courier,monospace;">elm_*</span>, and <span style="font-family: Courier New,Courier,monospace;">eina_*</span>, are used to build up a complete application supporting Web browsing.</p>\r
+</li>\r
+</ul>\r
+\r
+  \r
+  \r
+   \r
+   \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.guides/html/scripts/common.js b/org.tizen.guides/html/scripts/common.js
index 60250b6..d46479a 100644 (file)
--- a/org.tizen.guides/html/scripts/common.js
+++ b/org.tizen.guides/html/scripts/common.js
@@ -1,1752 +1,1752 @@
-$(document).ready(function(){
-       $('#contents table').each(function(){
-               if (!$(this).parent().hasClass('table')) {
-                       $(this).wrap('<div class="table"></div>');
-               }
-       });
-
-       // Lnb Menu Initialize
-       if($('div#contents').find('.lnb').length){
-               if($("ul li.events_news").size() > 0) {
-                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
-               }
-               initLnb();
-               initScript(staticURL + "/js/fixednavbar.js", function(){});
-       }
-
-       //family site
-       if($('div#footer').find('dl#familySlider').length){
-               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
-       }
-
-       // Svn Commit Test
-       
-       // Language Selection
-       if($('div#header').find('.util').length){
-               var $lang = $('div#header').find('.util');
-               $lang.find('a.lang').toggle(function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
-                       },function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
-                       });
-
-               $lang.bind('mouseleave',function(){
-                       $(this).find('ul.language').hide();
-                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-               });
-
-               $lang.find('ul.language').children().last().on("keydown", function(e) {
-                       if(e.which == 9 && e.shiftKey) {
-                               return true;
-                       }
-                       
-                       if(e.which == 9) {
-                               e.preventDefault();
-                               $lang.find('ul.language').hide();
-                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-                               setTimeout(function() {
-                                       $("#searchTop").focus();
-                               }, 1);
-                       }
-               });
-       }
-
-       // Open the Sitemap
-       var $open = $('div#header').find('.bt-open');
-       $open.bind('click',function(){
-               var $self = $(this);
-               var $sitemap = $('div#wrapper').find('div#sitemap');
-               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
-
-               if($sitemap.is(':visible')){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
-
-                       $self.attr('title','open sitemap');
-               }else{
-                       var source = $self.css('background-image').replace('.gif','_.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
-
-                       $self.attr('title','close sitemap');
-               }
-               
-               $self.css('background-image',source);
-               $sitemap.slideToggle('fast');
-               
-               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       $self.css('background-image',source);
-                       $sitemap.slideToggle('fast');
-               });
-
-       });
-
-       // Search Auto Complete
-       var $search = $('div#header').find('fieldset.search');
-       var $searchList = $search.find('#topAutocomplete>ul');
-
-       if($search.length){
-               $search.find('> input').each(function(){
-                       $(this).bind({
-                               keydown : function(e){
-                       
-                                       if(e.type=='keydown'&& $(this).val().length!=0){
-                                               $search.find('#topAutocomplete').show();
-                                               var hei = $searchList.outerHeight();
-                                               if(hei>400){
-                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
-                                               }
-                                       }
-                                       if(e.keyCode==9){
-                                               $search.unbind('focusout.search');
-                                       }
-                                       if(e.keyCode==40){
-                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
-                                               //window.scrollTo(0,0);
-                                       }
-                               },
-                               focusin : function(e){
-                                       if($(this).val()==='Search'){
-                                               $(this).val('');
-                                       }
-                               },
-                               focusout : function(e){
-                                       if($(this).val().length==0) $(this).val('Search');
-                               }
-                       });
-               });
-
-               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
-               //      if(e.keyCode==40){
-               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
-               //      }
-               //});
-
-               $search.find('#topAutocomplete').bind('mouseleave',function(e){
-                       if($search.find('> input').val().length==0){
-                               $search.find('> input').val('Search');
-                       }
-                       $search.find('#topAutocomplete').hide();
-               });
-
-               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
-                       $search.find('> input').val('Search');
-                       $search.find('#topAutocomplete').hide();
-                       
-                       //$search.bind('focusout.search', function(){
-                       //      $(this).find('> input').val('Search');
-                       //      $(this).find('#topAutocomplete').hide();
-                       //});
-               });
-       }
-});
-
-// 비차단 동적 스크립트 로딩
-function initScript(url, callback){
-       var script = document.createElement("script");
-       script.type = "text/javascript";
-
-       if(script.readyState){ // 인터넷 익스플로러
-               script.onreadystatechange = function(){
-                       if(script.readyState=="loaded" || script.readyState=="complete"){
-                               script.onreadystatechange = null;
-                               callback();
-                       }
-               };
-       }else{  // 다른  브라우저
-               script.onload = function(){
-                       callback();
-               };
-       }
-
-       script.src = url;
-       document.getElementsByTagName("head")[0].appendChild(script);
-}
-
-
-// lnb
-function initLnb(){
-       var sMenu = $('.lnb');
-       var sItem = sMenu.find('>li');
-
-       sItem.each(function(){
-               if($(this).find('a').hasClass('more')){
-                       if($(this).find('ul').is(":visible")) {
-                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
-                       } else {
-                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
-                       }
-               }
-       });
-       
-       var setIcoArrText = function(obj) {
-               if(obj.next().is(":visible")) {
-                       obj.text("close submenu");
-               } else {
-                       obj.text("open submenu");
-               }
-       }
-       
-       sItem.find('.ico-arr').on("click", function() {
-               var $that = $(this);
-               var liBox = $that.parent();   
-               var ulBox = $that.next();
-               
-               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
-               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
-               
-               if(liBox.hasClass("on")) {
-                       if(ulBox.is(":visible")) {
-                               ulBox.hide();
-                               $that.addClass("ico-on");
-                       } else {
-                               ulBox.show();
-                               $that.removeClass("ico-on");
-                       }
-                       setIcoArrText($that);
-                       return true;
-               }
-               
-               if(liBox.hasClass("active")) {
-                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
-                       ulBox.hide();
-               } else {
-                       liBox.addClass("active").find("a").eq(0).addClass("bov");
-                       ulBox.show();
-               }
-               setIcoArrText($that);
-       });
-
-       sItem.hover(function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-               $(this).find("a").eq(0).addClass("bov");
-       },function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-                $(this).find("a").eq(0).removeClass("bov");
-
-       });
-}
-
-//footer rolling banner
-function fn_rollToEx(container,objectId,step,auto){
-
-       // 롤링할 객체를 변수에 담아둔다.
-       var el = $('#'+container).find('#'+objectId);
-       var lastChild;
-       var speed = 3000;
-       var timer = 0;
-       var autoplay = false;
-
-       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
-       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
-       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
-       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
-       el.data('animating',false);
-       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
-       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
-
-       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
-
-       if(arguments.length==4){
-               el.data('autoStart', auto);
-       }
-
-       if(el.data('autoStart')){
-               if(timer==0){
-                       timer = setInterval(moveNextSlide, speed);
-                       autoplay = true;
-               }
-       }
-
-       el.bind({
-               mouseenter:function(){
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-
-       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
-       el.data('prev').bind({
-               click:function(e){
-                       e.preventDefault();
-                       movePrevSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
-       el.data('next').bind({
-               click:function(e){
-                       e.preventDefault();
-                       moveNextSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       function movePrevSlide(){
-               if(!el.data('animating')){
-                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
-                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
-                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
-                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
-                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
-               
-                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
-
-                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-    function moveNextSlide(){
-               if(!el.data('animating')){
-                       el.data('animating',true);
-
-                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
-                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
-                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
-                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
-                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
-                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
-
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-}
-
-function fn_slide(options){
-
-       var opts = jQuery.extend({},options);
-
-       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
-       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
-       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
-       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
-       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
-       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
-       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
-       var auto = false;
-       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
-       var time;
-
-
-       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
-       effect = opts.effect;
-       auto = opts.auto;
-
-       if(auto){
-               time = setTimeout('slideShow()',3000);
-       }
-
-       slideShow = function(){
-
-               if(current < len-1){
-                       current++;
-               }else{
-                       current=0;
-               }
-
-               controllStatus();
-
-               moveControl('next');
-
-               time = setTimeout('slideShow()',3000);
-       }
-
-       controllStatus = function(){
-               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
-               if(current>0||current<len-1){                           
-                       $prev.show();
-                       $next.show();
-               }
-               if(current==0){
-                       $prev.hide();
-                       $next.show();
-               }
-               if(current>=len-1){
-                       $prev.show();
-                       $next.hide();
-               }
-       }
-
-       moveControl = function(msg){
-               if(opts.bt!=null){
-                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
-                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
-                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
-               }
-
-               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                       $obj.children().hide();
-                       $obj.children().eq(current).show();
-               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                       $obj.animate({'left':'-'+size*current},'slow');
-               }
-       }
-
-       $obj.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               }
-       });
-
-       //롤링 버튼 클릭시
-       $bt.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
-
-                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
-
-                       controllStatus();
-
-                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                               $obj.children().hide();
-                               $obj.children().eq(current).show();
-                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                               $obj.animate({'left':'-'+size*current},'slow');
-                       }
-
-                       // 모든 롤링 버튼을 비활성화
-                       $bt.each(function(){
-                               var source = $(this).find('img').attr('src').replace('_.png','.png');
-                                $(this).find('img').attr('src',source);
-                       });
-
-                       // 선택한 롤링버튼을 활성화
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-
-                       return false;
-               }
-       });
-
-       //이전 버튼 클릭시
-       $prev.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
-                       current--;                                                      //이미지 인덱스값 1씩 감소
-
-                       moveControl('prev');
-
-                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
-
-                       return false;
-               }
-       });
-
-       //다음 버튼 클릭시
-       $next.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       current++;                                                      //이미지 인덱스값 1씩 증가
-                       
-                       moveControl('next');
-
-                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
-                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
-
-                       return false;
-               }
-       });
-
-}
-
-// main rolling banner
-function slideMotion1(){
-       var $banner = $('#rolling .motionview'),
-               //$nav = $('#rolling ul.nav'),
-               banner = {prev:null, next:null},
-               size = $banner.children().length;
-               index = 1,
-               speed = 3000,
-               timer = null,
-               auto = true,
-               width = parseInt(100/size),
-               rest = parseInt(100%size);
-
-       var $nav = $('<ul class="nav">').insertAfter($banner);
-
-       $banner.children().each(function(index){
-               index++;
-               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
-               if(index==size){
-                       $nav.children().eq(-1).find('a').css('background-image','none');
-               }
-       });
-
-       if(rest>0){
-               width+=rest;
-               $nav.children().eq(-1).css('width',width+'%');
-       }
-
-       $nav.delegate("li",'click',function(){
-               var idx = $nav.children().index(this);
-               index = idx;
-               banner.prev = $banner.find('a.active');
-               banner.next = $banner.find('a').eq(index);
-
-               clearInterval(timer);
-               auto = false;
-               
-               $nav.trigger('change.banner',banner)
-                       .trigger('change.tab',index);
-
-               return false;
-       });
-
-       $nav.bind('change.banner',function(event, banner){
-               aniMotion();
-       });
-
-       $nav.bind('change.tab',function(event, index){
-               $nav.children().find('a').removeClass('sel');
-               $nav.children().eq(index).find('a').addClass('sel');
-       });
-
-       timer = setInterval(autoMotion, speed);
-
-       function autoMotion(){
-               if(index > size-1) index = 0;
-
-               aniMotion();
-       }
-
-       function aniMotion(){
-               if(auto){
-                       banner.prev = $banner.find('a.active');
-                       banner.next = $banner.find('a').eq(index);
-
-                       $nav.children().find('a').removeClass('sel');
-                       $nav.children().eq(index).find('a').addClass('sel');
-               }
-               banner.prev.addClass('last-active');
-               banner.next.css({'opacity':0.0})
-                       .addClass('active')
-                       .animate({'opacity':1.0}, 1000, function(){
-                               banner.prev.removeClass('active last-active');
-
-                               if(auto){
-                                       index++;
-                               }else{
-                                       index++;
-                                       timer = setInterval(autoMotion, speed*1.5);
-                                       auto = true;
-                               }
-                       });
-       }
-}
-
-// forum list show or hide function
-function toggleFunc(){
-       
-       var defaulNum = [2];
-
-       $('.forum-tit').each(function(){
-               var self = $(this);
-
-               var idx = $('.forum-tit').index(this);
-
-               for(i=0;i<=defaulNum.length;i++){
-                       if(idx==defaulNum[i]){
-                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
-                               self.find('a.toggle').css('background-image',source);
-
-                               self.find('a.toggle').text('Show');
-                               self.addClass('mb35').next().hide();
-                       }
-               }
-
-               self.find('a.toggle').click(function(){
-                       
-                       if(self.next().is(':visible')){
-                               var source = $(this).css('background-image').replace('.gif','_.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Show');
-                               self.addClass('mb35').next().hide();
-                       }else{
-                               var source = $(this).css('background-image').replace('_.gif','.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Hide');
-                               self.removeClass('mb35').next().show();
-                       }
-
-                       return false;
-
-               });
-
-       });
-}
-
-// 파일 업로드
-function fileUpload( width ){
-       //var $img = $('.attach input[type=image]');
-       //var width = $img.attr('width');
-
-       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
-       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
-
-       var $file = $('.attach input.upload').css({
-               "position": "absolute",
-               "top": "0px",
-               "right": "0px",
-               "width": w,
-               "cursor": "pointer",
-               "opacity": "0.0",
-               "height": "23px"
-       });
-       $file.off('change');
-       $file.on('change',function(e){
-               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
-                       return;
-               }
-               var idx = $file.index(this);
-               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
-               var fileErrMsg = {
-                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
-                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
-                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
-                           ,ext_ko : "지원하지 않는 확장자 입니다."
-                           ,ext_zh : "不允许上传具有该扩展名的文件。"
-                           ,ext_en : "File extention not allowed for upload."
-               };
-               var initFileInput = function(obj) {
-                       $(obj).parent().find('input.file').val("");
-                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
-                       else $(obj).val("");
-               };
-               
-               var filename = $(this).val();
-               
-               //CHK File ext
-               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
-                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
-                                     , "jpg", "png", "zip"];
-               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
-               var findFlag = false;
-               for(var i = 0; i < imgExts.length; i++) {
-                       if(imgExts[i] == fileExt) {
-                               findFlag = true;
-                               break;
-                       }
-               }
-       
-               if(findFlag == false) {
-                       alert( fileErrMsg["ext_" + localeCode] );
-                       initFileInput(this);
-//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
-                       return;
-               }
-               
-               //CHK File Size
-               if(
-                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
-                               || $.browser.mozilla //FF
-                               || $.browser.safari //Chrome
-               )
-               {
-                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
-                       if( filesize > 200 ) {
-                               alert( fileErrMsg["limit_" + localeCode] );
-                               initFileInput(this);
-                               return;
-                       }
-               }
-               
-               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
-       });
-};
-
-
-// Show or Hide Toggle
-function showToEx(args){
-
-       if(!arguments.length) return false;
-       
-       var bt = $('#'+args.bt);
-       var obj = $('#'+args.obj);
-
-       var source = bt.css('background-image');
-       
-       if(obj.is(':visible')){
-               obj.hide();
-       }
-
-       bt.toggle(function(){
-               var src = source.replace('.gif','_.gif');
-               bt.css('background-image', src);
-               obj.show();
-               
-               return false;
-       },function(){
-               var src = source.replace('_.gif','.gif');
-               bt.css('background-image', src);
-               obj.hide();
-
-               return false;
-       });
-
-}
-
-
-// FAQ 20131016
-function faqToEx(){
-
- var $question = $('#contents').find('.question');
- var $answer = $('#contents').find('.answer');
-
- // All Answer Rows Hide
- $answer.hide().find('.conts').hide();
-
- $question.each(function(){
-  var $self = $(this);
-  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
-  
-  $self.find('a').bind('click',function(){
-   $("#selArea ul").hide();
-   /*
-   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
-
-   $answer.hide().find('.conts').hide();
-   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
-   */
-
-   /* 20120822 hjh modify*/
-   /* if ( this open )?  close : all close, e.target open */
-   var cutTtl  = $(this).parent().children("div").html();
-   var ttl     = $(this).parent().parent().children("td.real_question").html();
-   
-   if($(this).parents('tr').next().find('.answer').is(':visible')){
-    $(this).html(cutTtl);
-    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
-     $answer.hide();
-    });
-   }else{
-    titleInit();
-    $(this).html(ttl);
-    $answer.hide().find('.conts').hide();
-    //$answer.slideUp('normal').find('.conts').hide();
-    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
-   }   
-
-   return false;
-  });
- });
-
- $answer.each(function(){
-  var $self = $(this);
-
-  $(this).find('a.bt-close-faq').bind('click',function(){
-   var question_td = $(this).parent().parent().parent().prev().children("td.question");
-   var cutTtl      = question_td.children("div").html();
-   question_td.children("a").html(cutTtl);
-   
-   $self.find('.conts').slideUp('fast',function(){
-    $self.hide();
-   });
-
-   return false;
-  });
- });
- 
- var titleInit = function() {
-  $question.each(function(i) {
-   $(this).find("a").html($(this).find("div").html());
-  });
- }
-}
-
-
-
-/**
- *  쓰기페이지 Tab 영역 컨트롤
- *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
- */
-function setSwitchTab( selector ) {
-       var tabs = $('.tab-list').find("li");
-       var elements = $( selector );
-
-       $( elements ).each( function( i ) {
-               if( i != 0 )
-               {
-                       $(this).hide();
-               }
-       })
-
-       // Control Tabs
-       $( tabs ).each( function( i ) {
-               $( this ).click( function(){
-                       resetClass();
-
-                       $( this ).find( 'a' ).addClass( "sel" );
-                       $( elements[i] ).show();
-
-                       return false;
-               });
-       });
-
-       // Class 리셋
-       function resetClass()
-       {
-               $( tabs ).each( function( i ) {
-                       $( this ).find( 'a' ).removeClass( 'sel' );
-               });
-
-               $( elements ).each( function( i ) {
-                       $( this ).hide();
-               });
-       }
-}
-
-var SET_ATTACH_LIMIT;
-var SET_ATTACH_WIDTH;
-var SET_ATTACH_BTNNAME;
-
-var firstAddAction = function(obj, limit, w, btnName) {
- var bn            = btnName || 'File';
- var fileAttachStr = "<li class='clfix no-first'>";
- fileAttachStr += '<div class="attach">';
- fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
- fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
- fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
- fileAttachStr += '</div>';
- fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
- fileAttachStr += '</li>';
- obj.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    $("a.remove-btn").eq(0).focus();
-   }, 1);
-  }
- });
- 
- obj.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- 
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-}
-
-var firstRemoveAction = function(id) {
- var obj = $("#" + id);
- var compFile    = $("input[type=file]");
- var compFileCnt = compFile.size();
- var ulObj       = compFile.eq(0).parent().parent().parent();
- if(compFileCnt <= 1) {
-  var firstCompFile = compFile.eq(0);
-  firstCompFile.prev().prev().val("");
-  if ($.browser.msie) {
-               $(obj).parent().find('input.file').val("");
-               firstCompFile.replaceWith( firstCompFile.clone(true) );
-       } else {
-               firstCompFile.val("");
-               firstCompFile.prev().prev().val("");
-  }
- } else {
-  obj.parent().remove();
-  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
-  
-  //add-btn event..
-  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
- }
- 
- ulObj
- .find("li")
- .eq(0)
- .removeClass("no-first")
- .find("a.remove-btn")
- .attr("id", id)
- .unbind("click");
- 
- setTimeout(function() {
-  $("#" + id).focus();
- }, 100);
- 
- $("#" + id).on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   var that = $(this);
-   setTimeout(function() {
-    that.prev().focus();
-   }, 1);
-  }
- });
- 
- $("#" + id).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-/** 
- * File 첨부컨트롤
- * @param limit 최대 파일 첨부 갯수
- * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
- */
-function setAttachFile( limit, width, btnName, removeBtnId )
-{
- var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
- var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
- var inputFile     = $( 'ul.file-att-form input[type=file]' );
- 
- SET_ATTACH_LIMIT = limit;
- SET_ATTACH_WIDTH = w;
- SET_ATTACH_BTNNAME = btnName;
- 
- inputFile.on("keydown", function(e) {
-  var that = $(this);
-  
-  if(e.which == 9 && e.shiftKey) {
-   return true;
-  }
-  
-  if(e.which === 9) {
-   e.preventDefault();
-   setTimeout(function() {
-    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
-   }, 1);
-  }
- });
- 
- inputFile.on("focusin", function(e) {
-  $(this).parent().css("outline", "1px dotted #2d2d2d");
- }).on("focusout", function(e) {
-  $(this).parent().css("outline", "");
- });
- 
- firstAddAction(btnFileAttach, limit, w, btnName);
- 
- /*
- btnFileAttach.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    inputFile.focus();
-   }, 1);
-  }
- });
- 
- btnFileAttach.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
-
- // File 제거 버튼
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- */
- /**
-  *  2012-08-08 전종호 추가
-  *  파일 Input Text 영역 너비를 잡아주는 메서드
-  */
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-
- updateFileField();
- fileUpload( w + 50 );
- 
- $("#" + removeBtnId).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-
-
-/** 
- * [PAGE] device speces list page
- * date : 20120808
- * id : hjh
- */
-function initDevicespecsList (){
-       var isCompareView=false;
-       $("#devicespecs-list > li").each( 
-               function(i){ 
-                       $(".info", this).bind("click", devicespecsListInfoToggle);
-                       $(".xx", this).bind("click", devicespecsListInfoToggle);
-                       
-                       //detail info layer toggle function
-                       function devicespecsListInfoToggle (){
-                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
-                               return false;
-                       }
-       });
-
-
-       /* DEVICE COMPARE 열리는 부분
-       - defualt : close. 
-       - 최초 한번만 열림 
-       - 현재는 compare 버튼에 공통으로 함수 바인딩
-       */
-       function devicespecsCompareOnOff (){
-               if ( isCompareView ) return;
-               var ww = ( isCompareView ) ? "30px":"207px";
-               $("#devicespecs-compare").animate({
-                   height: ww }, 300, "linear", function(){ });
-
-               isCompareView = ( isCompareView ) ? false:true;
-               return false;
-       }
-
-       //compare 버튼 공통으로 클릭 이벤트 걸림 
-       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
-}
-
-/** 
- * [PAGE] device speces view page
- * date : 20120808
- * id : hjh
- */
- function initDevicespecsView (){
-       var isImgView = false;
-       var isView = 0;
-       
-       //thumbnail overevent bind
-       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
-       focusDeviceDetail (1);
-       
-       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.type === "keydown" && e.which == 9) {
-                       setTimeout(function() {
-                               $("#img-viewer-handle a").eq(0).focus();        
-                       }, 1);
-               }
-       });
-       
-       //thumbnail viewarea controll handler bind
-       $("#img-viewer-handle").click(function () {
-               var ww;
-               var src = $("#img-viewer-handle img").attr("src");
-               if ( isImgView ){
-                       ww = "300px";
-                       src = src.replace(".gif", "_.gif");
-                       $("#img-viewer-thumbnail").hide();
-                       $("#device-info").show();
-               }else{
-                       ww = "730px";
-                       src = src.replace("_.gif", ".gif");
-                       $("#img-viewer-thumbnail").show();
-                       $("#device-info").hide();
-                       focusDeviceDetail(1);
-               }
-               
-               $("#img-viewer-handle img").attr("src", src);
-       $("#img-viewer").animate({
-                   width: ww
-                       }, 300, "linear", function(){
-                       if($.browser.msie)
-                               $("#img-inner").css("width", ww);
-               });
-               
-       isImgView = ( isImgView ) ? false:true;
-    });
-
-       //thumbnail overevent function (update date 2012.09.05 kangki)
-       function focusDeviceDetail ( id ) {
-               if ( isView == id ) return;
-
-               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
-               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
-
-               $( "#img-viewer-bic > img").attr("src", imgSrc);
-               isView = (id);          
-       }
-
-       /*toggle devicespecs List*/
-       if($('div#contents').find('.devicespec-tit').length){
-               
-               $('.devicespec-tit').each(function(){
-                       var self = $(this);
-                       $('a', self).bind ("click", fnToggle);
-
-                       function fnToggle(){
-
-                               if ( $(this).parent().parent().next().is(':visible') ){
-                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-                                       self.find('em').text('Show');
-                                       self.next().hide();
-
-                                       return false;
-                               }else{
-                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-                                       self.find('em').text('Hide');
-                                       self.next().show();
-
-                                       return false;
-                               }
-                       }
-                                                       
-               });
-       }
-
-       /*all Show Hide devicespecs List*/
-       if($('div#contents').find('.devicespecs-util').length){
-               var self = $('div#contents').find('.devicespecs-util');
-
-               $('.showA', self).bind ("click", function (){
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( !me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-                                       me.find('em').text('Hide');
-                                       me.next().show();
-                               }
-                       });
-                       return false;
-               })
-               $('.hideA', self).bind ("click", function (){
-                       
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-                                       me.find('em').text('Show');
-                                       me.next().hide();
-                               }
-                                                               
-                       });
-                       return false;
-               })
-       }       
-}
-
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
-function searchInit()
-{
-       var focusTarget = "input";
-
-       $("#searchInput").bind("keydown", checkSearchText);
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-
-       $(".autocomplete").mouseleave(function(){
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".autocomplete").css("visibility", "visible");
-
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-
-                       var hei = $(".autocomplete").find('>ul').outerHeight();
-                       if(hei>400){
-                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
-                       }
-               }
-               else{
-                       $(".autocomplete").css("visibility", "hidden");
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
- */
-
-function setTopScroll(selector) {
-       if ( !selector ) return false;
-       var btn = $( selector );
-       var w = $( window );
-       btn.css( "position", "absolute" );
-
-
-       btn.click( function(){ w.scrollTop( 0 ) } );
-
-       var wheight = w.innerHeight();
-       
-       $(window).resize( function() {
-               wheight = w.innerHeight();
-               redraw();
-       });
-
-       $(window).scroll( function() {
-               redraw();
-       })
-
-       /**
-        *      Top 버튼의 재정렬 메서드
-        */
-       function redraw()
-       {
-               var t = w.scrollTop() + wheight - 289;
-
-               if( t < wheight / 2 && w.scrollTop() == 0 )     {
-                       t = wheight / 2;
-               }
-               
-               btn.clearQueue();
-
-               btn.animate({
-           top: t
-               }, 500, function() {
-           // Animation complete.
-               });
-               //btn.css( "top", t );
-               //console.log( "target : " + t );
-       }
-
-       redraw();
-       /*
-       obj.initTop = position;
-       obj.topLimit = topLimit;
-       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
-
-       obj.style.position = "absolute";
-       obj.top = obj.initTop;
-       // obj.left = obj.initLeft;
-
-       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
-               obj.getTop = function() {
-                       return window.pageYOffset;
-               }
-       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
-               obj.getTop = function() {
-                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
-               }
-       } else {
-               obj.getTop = function() {
-                       return 0;
-               }
-       }
-
-       if ( self.innerHeight ) {       //WebKit
-               obj.getHeight = function() {
-                       return self.innerHeight;
-               }
-       } else if( document.documentElement.clientHeight ) {
-               obj.getHeight = function() {
-                       return document.documentElement.clientHeight;
-               }
-       } else {
-               obj.getHeight = function() {
-                       return 500;
-               }
-       }
-
-       obj.move = setInterval( function() {
-               if ( obj.initTop > 0 ) {
-                       pos = obj.getTop() + obj.initTop;
-               } else {
-                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
-               }
-
-               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
-               if ( pos < obj.topLimit ) pos = obj.topLimit;
-
-               interval = obj.top - pos;
-               obj.top = obj.top - interval / 3;
-               obj.style.top = obj.top + "px";
-       }, 30 )
-       */
-}
-
-
-//popup
-function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
-function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
-
-//popup 중앙에 띄우기
-function pop_center(){ 
-       var x,y; 
-       if (window.innerHeight) { // IE 외 모든 브라우저 
-               x = (screen.availWidth - self.innerWidth) / 2; 
-               y = (screen.availHeight - self.innerHeight) / 2; 
-       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
-               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
-               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
-       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
-               x = (screen.availWidth - document.body.clientWidth) / 2; 
-               y = (screen.availHeight - document.body.clientHeight) / 2; 
-       } 
-       window.moveTo(x,y); 
-}
-
-// Layer Popup Open
-function layer_open(el){
-       var temp = $('#' + el);
-
-       if(!temp.hasClass('sty2')){
-               $('.layer').fadeIn();
-       }
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       if(temp.hasClass('sty2')){
-               temp.fadeIn();
-
-               temp.find('a.cbtn').click(function(e){
-                       temp.fadeOut();
-               });
-               temp.find('a.gbtn').click(function(e){
-                       temp.fadeOut();
-               });
-
-               return false;
-       }
-       // 닫는 버튼 gbtn-c 추가 20130627
-       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
-               $('.layer').fadeOut();
-               return false;
-       });
-}
-
-// background dim - 2013-05-31
-function layer_open2(el){
-       var temp = $('#' + el);
-       $('input').attr('disabled', 'disabled');
-       $('.layerPop').fadeIn();
-       
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
-               $('.layerPop').fadeOut();
-               $('input').removeAttr('disabled');
-               return false;
-       });
-}
-
-
-function pop_account(url){
-       window.open(url,'account','width=619,height=591,scrollbars=yes')
-}
-
-function pop_loadDoc(url){
-       window.open(url,'online','width=850,height=600,scrollbars=yes')
-}
-
-/** 
- *  [PAGE] Tags
- *  date : 20120820
- *  author : 전종호
- */
-function initTags()
-{
-       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
-       // 마지막 아이템은 제외
-       var eleArr = $(".tag-list").find("li");
-
-       $( eleArr ).each( function( i ) {
-               if( i < eleArr.length - 1 )
-               {
-                       var target = $(this).find("a")[0];
-                       var content = $( target ).html();
-
-                       $( target ).html( content + "," );
-               }
-       })
-}
-
-$(document).ready(function(){
-       $(".tip_info").css("cursor","pointer");
-       $(".tip_info > img").mouseover(function(){
-               $(".tip_cont").css("display","block");
-       });
-       $(".tip_info > img").mouseout(function(){
-               $(".tip_cont").css("display","none");
-       });
-});
-
-// new layer popup script by ygh 2013.11.14
-
-var isPopup = false ;
-
-function popupLayerView(id){
-
-       var $L = $("#" + id) ;
-       var $D  = $("#" + id + "down") ;
-
-       $T = $("#" + id) ;
-
-       $L.show();
-       isPopup = true ;
-
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-
-       $("#" + id + "agree").focus() ;
-
-       jQuery(":focusable").focusin(function(e){
-               if (isPopup) {
-                       e.stopPropagation() ;
-                       if ($L.find(jQuery(this)).length > 0) {
-                       } else {
-                               jQuery(this).blur() ;
-                               jQuery("#" + id + " :focusable:first").focus() ;
-                       }
-               }
-       }) ;
-
-       $L.find('.close').click(function(){
-               resetPopup(id) ;
-       });
-
-       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
-}
-
-function resetPopup(T) {
-       $("#" + T + "down").hide();
-       $("#" + T + "agree").attr("checked", false) ;
-       isPopup = false ;
-       $("#" + T).hide() ;
-       $("#" + T + "Btn").focus() ;
-}
-
-function getDownload(T, F, I) {
-       if ($("#" + T + "agree").is(':checked')) {
-               commonDownloadLog(F, I) ;
-               resetPopup(T) ;
-       }
-}
-
-function focusable( element, isTabIndexNotNaN ) {
-       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
-       if ( "area" === nodeName ) {
-               map = element.parentNode;
-               mapName = map.name;
-               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
-               img = $( "img[usemap=#" + mapName + "]" )[0];
-               return !!img && visible( img );
-       }
-       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
-                       visible( element ) ;
-}
-
-function visible( element ) {
-       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
-               return $.css( this, "visibility" ) === "hidden";
-       }).length;
-}
-if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
-
-$.extend( $.expr[ ":" ], {
-       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
-       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
-       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
-});
-// new layer popup script by ygh 2013.11.14
-
-// 2013-11-15 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device1').hide();
-       
-       $('#thumb_view_btn').hover(function() {
-               $('.view_device1').show();
-       },function() {
-               $('.view_device1').hide();
-       });
-               
-});
-
-// 2014-04-22 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device2').hide();
-       
-       $('#thumb_view_btn2').hover(function() {
-               $('.view_device2').show();
-       },function() {
-               $('.view_device2').hide();
-       });
-               
-});
-
-
-function beforePopupLayerView(popId, popId2, popContinue){
-       var $L = $("#" + popId) ;
-       $L.show(100);
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-       $L.find('.close').click(function(){
-               $L.hide();
-       });
-       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
-}
+$(document).ready(function(){\r
+       $('#contents table').each(function(){\r
+               if (!$(this).parent().hasClass('table')) {\r
+                       $(this).wrap('<div class="table"></div>');\r
+               }\r
+       });\r
+\r
+       // Lnb Menu Initialize\r
+       if($('div#contents').find('.lnb').length){\r
+               if($("ul li.events_news").size() > 0) {\r
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");\r
+               }\r
+               initLnb();\r
+               initScript(staticURL + "/js/fixednavbar.js", function(){});\r
+       }\r
+\r
+       //family site\r
+       if($('div#footer').find('dl#familySlider').length){\r
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);\r
+       }\r
+\r
+       // Svn Commit Test\r
+       \r
+       // Language Selection\r
+       if($('div#header').find('.util').length){\r
+               var $lang = $('div#header').find('.util');\r
+               $lang.find('a.lang').toggle(function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();\r
+                       },function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();\r
+                       });\r
+\r
+               $lang.bind('mouseleave',function(){\r
+                       $(this).find('ul.language').hide();\r
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+               });\r
+\r
+               $lang.find('ul.language').children().last().on("keydown", function(e) {\r
+                       if(e.which == 9 && e.shiftKey) {\r
+                               return true;\r
+                       }\r
+                       \r
+                       if(e.which == 9) {\r
+                               e.preventDefault();\r
+                               $lang.find('ul.language').hide();\r
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+                               setTimeout(function() {\r
+                                       $("#searchTop").focus();\r
+                               }, 1);\r
+                       }\r
+               });\r
+       }\r
+\r
+       // Open the Sitemap\r
+       var $open = $('div#header').find('.bt-open');\r
+       $open.bind('click',function(){\r
+               var $self = $(this);\r
+               var $sitemap = $('div#wrapper').find('div#sitemap');\r
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');\r
+\r
+               if($sitemap.is(':visible')){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');\r
+\r
+                       $self.attr('title','open sitemap');\r
+               }else{\r
+                       var source = $self.css('background-image').replace('.gif','_.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');\r
+\r
+                       $self.attr('title','close sitemap');\r
+               }\r
+               \r
+               $self.css('background-image',source);\r
+               $sitemap.slideToggle('fast');\r
+               \r
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       $self.css('background-image',source);\r
+                       $sitemap.slideToggle('fast');\r
+               });\r
+\r
+       });\r
+\r
+       // Search Auto Complete\r
+       var $search = $('div#header').find('fieldset.search');\r
+       var $searchList = $search.find('#topAutocomplete>ul');\r
+\r
+       if($search.length){\r
+               $search.find('> input').each(function(){\r
+                       $(this).bind({\r
+                               keydown : function(e){\r
+                       \r
+                                       if(e.type=='keydown'&& $(this).val().length!=0){\r
+                                               $search.find('#topAutocomplete').show();\r
+                                               var hei = $searchList.outerHeight();\r
+                                               if(hei>400){\r
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});\r
+                                               }\r
+                                       }\r
+                                       if(e.keyCode==9){\r
+                                               $search.unbind('focusout.search');\r
+                                       }\r
+                                       if(e.keyCode==40){\r
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();\r
+                                               //window.scrollTo(0,0);\r
+                                       }\r
+                               },\r
+                               focusin : function(e){\r
+                                       if($(this).val()==='Search'){\r
+                                               $(this).val('');\r
+                                       }\r
+                               },\r
+                               focusout : function(e){\r
+                                       if($(this).val().length==0) $(this).val('Search');\r
+                               }\r
+                       });\r
+               });\r
+\r
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){\r
+               //      if(e.keyCode==40){\r
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();\r
+               //      }\r
+               //});\r
+\r
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){\r
+                       if($search.find('> input').val().length==0){\r
+                               $search.find('> input').val('Search');\r
+                       }\r
+                       $search.find('#topAutocomplete').hide();\r
+               });\r
+\r
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){\r
+                       $search.find('> input').val('Search');\r
+                       $search.find('#topAutocomplete').hide();\r
+                       \r
+                       //$search.bind('focusout.search', function(){\r
+                       //      $(this).find('> input').val('Search');\r
+                       //      $(this).find('#topAutocomplete').hide();\r
+                       //});\r
+               });\r
+       }\r
+});\r
+\r
+// 비차단 동적 스크립트 로딩\r
+function initScript(url, callback){\r
+       var script = document.createElement("script");\r
+       script.type = "text/javascript";\r
+\r
+       if(script.readyState){ // 인터넷 익스플로러\r
+               script.onreadystatechange = function(){\r
+                       if(script.readyState=="loaded" || script.readyState=="complete"){\r
+                               script.onreadystatechange = null;\r
+                               callback();\r
+                       }\r
+               };\r
+       }else{  // 다른  브라우저\r
+               script.onload = function(){\r
+                       callback();\r
+               };\r
+       }\r
+\r
+       script.src = url;\r
+       document.getElementsByTagName("head")[0].appendChild(script);\r
+}\r
+\r
+\r
+// lnb\r
+function initLnb(){\r
+       var sMenu = $('.lnb');\r
+       var sItem = sMenu.find('>li');\r
+\r
+       sItem.each(function(){\r
+               if($(this).find('a').hasClass('more')){\r
+                       if($(this).find('ul').is(":visible")) {\r
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); \r
+                       } else {\r
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));\r
+                       }\r
+               }\r
+       });\r
+       \r
+       var setIcoArrText = function(obj) {\r
+               if(obj.next().is(":visible")) {\r
+                       obj.text("close submenu");\r
+               } else {\r
+                       obj.text("open submenu");\r
+               }\r
+       }\r
+       \r
+       sItem.find('.ico-arr').on("click", function() {\r
+               var $that = $(this);\r
+               var liBox = $that.parent();   \r
+               var ulBox = $that.next();\r
+               \r
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();\r
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");\r
+               \r
+               if(liBox.hasClass("on")) {\r
+                       if(ulBox.is(":visible")) {\r
+                               ulBox.hide();\r
+                               $that.addClass("ico-on");\r
+                       } else {\r
+                               ulBox.show();\r
+                               $that.removeClass("ico-on");\r
+                       }\r
+                       setIcoArrText($that);\r
+                       return true;\r
+               }\r
+               \r
+               if(liBox.hasClass("active")) {\r
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");\r
+                       ulBox.hide();\r
+               } else {\r
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");\r
+                       ulBox.show();\r
+               }\r
+               setIcoArrText($that);\r
+       });\r
+\r
+       sItem.hover(function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+               $(this).find("a").eq(0).addClass("bov");\r
+       },function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+                $(this).find("a").eq(0).removeClass("bov");\r
+\r
+       });\r
+}\r
+\r
+//footer rolling banner\r
+function fn_rollToEx(container,objectId,step,auto){\r
+\r
+       // 롤링할 객체를 변수에 담아둔다.\r
+       var el = $('#'+container).find('#'+objectId);\r
+       var lastChild;\r
+       var speed = 3000;\r
+       var timer = 0;\r
+       var autoplay = false;\r
+\r
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.\r
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수\r
+       el.data('animating',false);\r
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.\r
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.\r
+\r
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.\r
+\r
+       if(arguments.length==4){\r
+               el.data('autoStart', auto);\r
+       }\r
+\r
+       if(el.data('autoStart')){\r
+               if(timer==0){\r
+                       timer = setInterval(moveNextSlide, speed);\r
+                       autoplay = true;\r
+               }\r
+       }\r
+\r
+       el.bind({\r
+               mouseenter:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+\r
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('prev').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       movePrevSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('next').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       moveNextSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       function movePrevSlide(){\r
+               if(!el.data('animating')){\r
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);\r
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.\r
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다\r
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.\r
+               \r
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.\r
+\r
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+    function moveNextSlide(){\r
+               if(!el.data('animating')){\r
+                       el.data('animating',true);\r
+\r
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.\r
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);\r
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.\r
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다\r
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.\r
+\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+}\r
+\r
+function fn_slide(options){\r
+\r
+       var opts = jQuery.extend({},options);\r
+\r
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자\r
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자\r
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자\r
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자\r
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값\r
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수\r
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수\r
+       var auto = false;\r
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수\r
+       var time;\r
+\r
+\r
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정\r
+       effect = opts.effect;\r
+       auto = opts.auto;\r
+\r
+       if(auto){\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       slideShow = function(){\r
+\r
+               if(current < len-1){\r
+                       current++;\r
+               }else{\r
+                       current=0;\r
+               }\r
+\r
+               controllStatus();\r
+\r
+               moveControl('next');\r
+\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       controllStatus = function(){\r
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정\r
+               if(current>0||current<len-1){                           \r
+                       $prev.show();\r
+                       $next.show();\r
+               }\r
+               if(current==0){\r
+                       $prev.hide();\r
+                       $next.show();\r
+               }\r
+               if(current>=len-1){\r
+                       $prev.show();\r
+                       $next.hide();\r
+               }\r
+       }\r
+\r
+       moveControl = function(msg){\r
+               if(opts.bt!=null){\r
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))\r
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화\r
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화\r
+               }\r
+\r
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                       $obj.children().hide();\r
+                       $obj.children().eq(current).show();\r
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                       $obj.animate({'left':'-'+size*current},'slow');\r
+               }\r
+       }\r
+\r
+       $obj.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               }\r
+       });\r
+\r
+       //롤링 버튼 클릭시\r
+       $bt.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장\r
+\r
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정\r
+\r
+                       controllStatus();\r
+\r
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                               $obj.children().hide();\r
+                               $obj.children().eq(current).show();\r
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                               $obj.animate({'left':'-'+size*current},'slow');\r
+                       }\r
+\r
+                       // 모든 롤링 버튼을 비활성화\r
+                       $bt.each(function(){\r
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                                $(this).find('img').attr('src',source);\r
+                       });\r
+\r
+                       // 선택한 롤링버튼을 활성화\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //이전 버튼 클릭시\r
+       $prev.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 \r
+                       current--;                                                      //이미지 인덱스값 1씩 감소\r
+\r
+                       moveControl('prev');\r
+\r
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //다음 버튼 클릭시\r
+       $next.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       current++;                                                      //이미지 인덱스값 1씩 증가\r
+                       \r
+                       moveControl('next');\r
+\r
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화\r
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+}\r
+\r
+// main rolling banner\r
+function slideMotion1(){\r
+       var $banner = $('#rolling .motionview'),\r
+               //$nav = $('#rolling ul.nav'),\r
+               banner = {prev:null, next:null},\r
+               size = $banner.children().length;\r
+               index = 1,\r
+               speed = 3000,\r
+               timer = null,\r
+               auto = true,\r
+               width = parseInt(100/size),\r
+               rest = parseInt(100%size);\r
+\r
+       var $nav = $('<ul class="nav">').insertAfter($banner);\r
+\r
+       $banner.children().each(function(index){\r
+               index++;\r
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);\r
+               if(index==size){\r
+                       $nav.children().eq(-1).find('a').css('background-image','none');\r
+               }\r
+       });\r
+\r
+       if(rest>0){\r
+               width+=rest;\r
+               $nav.children().eq(-1).css('width',width+'%');\r
+       }\r
+\r
+       $nav.delegate("li",'click',function(){\r
+               var idx = $nav.children().index(this);\r
+               index = idx;\r
+               banner.prev = $banner.find('a.active');\r
+               banner.next = $banner.find('a').eq(index);\r
+\r
+               clearInterval(timer);\r
+               auto = false;\r
+               \r
+               $nav.trigger('change.banner',banner)\r
+                       .trigger('change.tab',index);\r
+\r
+               return false;\r
+       });\r
+\r
+       $nav.bind('change.banner',function(event, banner){\r
+               aniMotion();\r
+       });\r
+\r
+       $nav.bind('change.tab',function(event, index){\r
+               $nav.children().find('a').removeClass('sel');\r
+               $nav.children().eq(index).find('a').addClass('sel');\r
+       });\r
+\r
+       timer = setInterval(autoMotion, speed);\r
+\r
+       function autoMotion(){\r
+               if(index > size-1) index = 0;\r
+\r
+               aniMotion();\r
+       }\r
+\r
+       function aniMotion(){\r
+               if(auto){\r
+                       banner.prev = $banner.find('a.active');\r
+                       banner.next = $banner.find('a').eq(index);\r
+\r
+                       $nav.children().find('a').removeClass('sel');\r
+                       $nav.children().eq(index).find('a').addClass('sel');\r
+               }\r
+               banner.prev.addClass('last-active');\r
+               banner.next.css({'opacity':0.0})\r
+                       .addClass('active')\r
+                       .animate({'opacity':1.0}, 1000, function(){\r
+                               banner.prev.removeClass('active last-active');\r
+\r
+                               if(auto){\r
+                                       index++;\r
+                               }else{\r
+                                       index++;\r
+                                       timer = setInterval(autoMotion, speed*1.5);\r
+                                       auto = true;\r
+                               }\r
+                       });\r
+       }\r
+}\r
+\r
+// forum list show or hide function\r
+function toggleFunc(){\r
+       \r
+       var defaulNum = [2];\r
+\r
+       $('.forum-tit').each(function(){\r
+               var self = $(this);\r
+\r
+               var idx = $('.forum-tit').index(this);\r
+\r
+               for(i=0;i<=defaulNum.length;i++){\r
+                       if(idx==defaulNum[i]){\r
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');\r
+                               self.find('a.toggle').css('background-image',source);\r
+\r
+                               self.find('a.toggle').text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }\r
+               }\r
+\r
+               self.find('a.toggle').click(function(){\r
+                       \r
+                       if(self.next().is(':visible')){\r
+                               var source = $(this).css('background-image').replace('.gif','_.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }else{\r
+                               var source = $(this).css('background-image').replace('_.gif','.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Hide');\r
+                               self.removeClass('mb35').next().show();\r
+                       }\r
+\r
+                       return false;\r
+\r
+               });\r
+\r
+       });\r
+}\r
+\r
+// 파일 업로드\r
+function fileUpload( width ){\r
+       //var $img = $('.attach input[type=image]');\r
+       //var width = $img.attr('width');\r
+\r
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅\r
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";\r
+\r
+       var $file = $('.attach input.upload').css({\r
+               "position": "absolute",\r
+               "top": "0px",\r
+               "right": "0px",\r
+               "width": w,\r
+               "cursor": "pointer",\r
+               "opacity": "0.0",\r
+               "height": "23px"\r
+       });\r
+       $file.off('change');\r
+       $file.on('change',function(e){\r
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드\r
+                       return;\r
+               }\r
+               var idx = $file.index(this);\r
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();\r
+               var fileErrMsg = {\r
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"\r
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"\r
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"\r
+                           ,ext_ko : "지원하지 않는 확장자 입니다."\r
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"\r
+                           ,ext_en : "File extention not allowed for upload."\r
+               };\r
+               var initFileInput = function(obj) {\r
+                       $(obj).parent().find('input.file').val("");\r
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );\r
+                       else $(obj).val("");\r
+               };\r
+               \r
+               var filename = $(this).val();\r
+               \r
+               //CHK File ext\r
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"\r
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"\r
+                                     , "jpg", "png", "zip"];\r
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();\r
+               var findFlag = false;\r
+               for(var i = 0; i < imgExts.length; i++) {\r
+                       if(imgExts[i] == fileExt) {\r
+                               findFlag = true;\r
+                               break;\r
+                       }\r
+               }\r
+       \r
+               if(findFlag == false) {\r
+                       alert( fileErrMsg["ext_" + localeCode] );\r
+                       initFileInput(this);\r
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.\r
+                       return;\r
+               }\r
+               \r
+               //CHK File Size\r
+               if(\r
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie\r
+                               || $.browser.mozilla //FF\r
+                               || $.browser.safari //Chrome\r
+               )\r
+               {\r
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;\r
+                       if( filesize > 200 ) {\r
+                               alert( fileErrMsg["limit_" + localeCode] );\r
+                               initFileInput(this);\r
+                               return;\r
+                       }\r
+               }\r
+               \r
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);\r
+       });\r
+};\r
+\r
+\r
+// Show or Hide Toggle\r
+function showToEx(args){\r
+\r
+       if(!arguments.length) return false;\r
+       \r
+       var bt = $('#'+args.bt);\r
+       var obj = $('#'+args.obj);\r
+\r
+       var source = bt.css('background-image');\r
+       \r
+       if(obj.is(':visible')){\r
+               obj.hide();\r
+       }\r
+\r
+       bt.toggle(function(){\r
+               var src = source.replace('.gif','_.gif');\r
+               bt.css('background-image', src);\r
+               obj.show();\r
+               \r
+               return false;\r
+       },function(){\r
+               var src = source.replace('_.gif','.gif');\r
+               bt.css('background-image', src);\r
+               obj.hide();\r
+\r
+               return false;\r
+       });\r
+\r
+}\r
+\r
+\r
+// FAQ 20131016\r
+function faqToEx(){\r
+\r
+ var $question = $('#contents').find('.question');\r
+ var $answer = $('#contents').find('.answer');\r
+\r
+ // All Answer Rows Hide\r
+ $answer.hide().find('.conts').hide();\r
+\r
+ $question.each(function(){\r
+  var $self = $(this);\r
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");\r
+  \r
+  $self.find('a').bind('click',function(){\r
+   $("#selArea ul").hide();\r
+   /*\r
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;\r
+\r
+   $answer.hide().find('.conts').hide();\r
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');\r
+   */\r
+\r
+   /* 20120822 hjh modify*/\r
+   /* if ( this open )?  close : all close, e.target open */\r
+   var cutTtl  = $(this).parent().children("div").html();\r
+   var ttl     = $(this).parent().parent().children("td.real_question").html();\r
+   \r
+   if($(this).parents('tr').next().find('.answer').is(':visible')){\r
+    $(this).html(cutTtl);\r
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){\r
+     $answer.hide();\r
+    });\r
+   }else{\r
+    titleInit();\r
+    $(this).html(ttl);\r
+    $answer.hide().find('.conts').hide();\r
+    //$answer.slideUp('normal').find('.conts').hide();\r
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); \r
+   }   \r
+\r
+   return false;\r
+  });\r
+ });\r
+\r
+ $answer.each(function(){\r
+  var $self = $(this);\r
+\r
+  $(this).find('a.bt-close-faq').bind('click',function(){\r
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");\r
+   var cutTtl      = question_td.children("div").html();\r
+   question_td.children("a").html(cutTtl);\r
+   \r
+   $self.find('.conts').slideUp('fast',function(){\r
+    $self.hide();\r
+   });\r
+\r
+   return false;\r
+  });\r
+ });\r
+ \r
+ var titleInit = function() {\r
+  $question.each(function(i) {\r
+   $(this).find("a").html($(this).find("div").html());\r
+  });\r
+ }\r
+}\r
+\r
+\r
+\r
+/**\r
+ *  쓰기페이지 Tab 영역 컨트롤\r
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'\r
+ */\r
+function setSwitchTab( selector ) {\r
+       var tabs = $('.tab-list').find("li");\r
+       var elements = $( selector );\r
+\r
+       $( elements ).each( function( i ) {\r
+               if( i != 0 )\r
+               {\r
+                       $(this).hide();\r
+               }\r
+       })\r
+\r
+       // Control Tabs\r
+       $( tabs ).each( function( i ) {\r
+               $( this ).click( function(){\r
+                       resetClass();\r
+\r
+                       $( this ).find( 'a' ).addClass( "sel" );\r
+                       $( elements[i] ).show();\r
+\r
+                       return false;\r
+               });\r
+       });\r
+\r
+       // Class 리셋\r
+       function resetClass()\r
+       {\r
+               $( tabs ).each( function( i ) {\r
+                       $( this ).find( 'a' ).removeClass( 'sel' );\r
+               });\r
+\r
+               $( elements ).each( function( i ) {\r
+                       $( this ).hide();\r
+               });\r
+       }\r
+}\r
+\r
+var SET_ATTACH_LIMIT;\r
+var SET_ATTACH_WIDTH;\r
+var SET_ATTACH_BTNNAME;\r
+\r
+var firstAddAction = function(obj, limit, w, btnName) {\r
+ var bn            = btnName || 'File';\r
+ var fileAttachStr = "<li class='clfix no-first'>";\r
+ fileAttachStr += '<div class="attach">';\r
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';\r
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';\r
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';\r
+ fileAttachStr += '</div>';\r
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';\r
+ fileAttachStr += '</li>';\r
+ obj.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    $("a.remove-btn").eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ obj.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ \r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+}\r
+\r
+var firstRemoveAction = function(id) {\r
+ var obj = $("#" + id);\r
+ var compFile    = $("input[type=file]");\r
+ var compFileCnt = compFile.size();\r
+ var ulObj       = compFile.eq(0).parent().parent().parent();\r
+ if(compFileCnt <= 1) {\r
+  var firstCompFile = compFile.eq(0);\r
+  firstCompFile.prev().prev().val("");\r
+  if ($.browser.msie) {\r
+               $(obj).parent().find('input.file').val("");\r
+               firstCompFile.replaceWith( firstCompFile.clone(true) );\r
+       } else {\r
+               firstCompFile.val("");\r
+               firstCompFile.prev().prev().val("");\r
+  }\r
+ } else {\r
+  obj.parent().remove();\r
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");\r
+  \r
+  //add-btn event..\r
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);\r
+ }\r
+ \r
+ ulObj\r
+ .find("li")\r
+ .eq(0)\r
+ .removeClass("no-first")\r
+ .find("a.remove-btn")\r
+ .attr("id", id)\r
+ .unbind("click");\r
+ \r
+ setTimeout(function() {\r
+  $("#" + id).focus();\r
+ }, 100);\r
+ \r
+ $("#" + id).on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   var that = $(this);\r
+   setTimeout(function() {\r
+    that.prev().focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ $("#" + id).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+/** \r
+ * File 첨부컨트롤\r
+ * @param limit 최대 파일 첨부 갯수\r
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가\r
+ */\r
+function setAttachFile( limit, width, btnName, removeBtnId )\r
+{\r
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;\r
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );\r
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );\r
+ \r
+ SET_ATTACH_LIMIT = limit;\r
+ SET_ATTACH_WIDTH = w;\r
+ SET_ATTACH_BTNNAME = btnName;\r
+ \r
+ inputFile.on("keydown", function(e) {\r
+  var that = $(this);\r
+  \r
+  if(e.which == 9 && e.shiftKey) {\r
+   return true;\r
+  }\r
+  \r
+  if(e.which === 9) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ inputFile.on("focusin", function(e) {\r
+  $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+ }).on("focusout", function(e) {\r
+  $(this).parent().css("outline", "");\r
+ });\r
+ \r
+ firstAddAction(btnFileAttach, limit, w, btnName);\r
+ \r
+ /*\r
+ btnFileAttach.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    inputFile.focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ btnFileAttach.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+\r
+ // File 제거 버튼\r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ */\r
+ /**\r
+  *  2012-08-08 전종호 추가\r
+  *  파일 Input Text 영역 너비를 잡아주는 메서드\r
+  */\r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+\r
+ updateFileField();\r
+ fileUpload( w + 50 );\r
+ \r
+ $("#" + removeBtnId).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+\r
+\r
+/** \r
+ * [PAGE] device speces list page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+function initDevicespecsList (){\r
+       var isCompareView=false;\r
+       $("#devicespecs-list > li").each( \r
+               function(i){ \r
+                       $(".info", this).bind("click", devicespecsListInfoToggle);\r
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);\r
+                       \r
+                       //detail info layer toggle function\r
+                       function devicespecsListInfoToggle (){\r
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();\r
+                               return false;\r
+                       }\r
+       });\r
+\r
+\r
+       /* DEVICE COMPARE 열리는 부분\r
+       - defualt : close. \r
+       - 최초 한번만 열림 \r
+       - 현재는 compare 버튼에 공통으로 함수 바인딩\r
+       */\r
+       function devicespecsCompareOnOff (){\r
+               if ( isCompareView ) return;\r
+               var ww = ( isCompareView ) ? "30px":"207px";\r
+               $("#devicespecs-compare").animate({\r
+                   height: ww }, 300, "linear", function(){ });\r
+\r
+               isCompareView = ( isCompareView ) ? false:true;\r
+               return false;\r
+       }\r
+\r
+       //compare 버튼 공통으로 클릭 이벤트 걸림 \r
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });\r
+}\r
+\r
+/** \r
+ * [PAGE] device speces view page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+ function initDevicespecsView (){\r
+       var isImgView = false;\r
+       var isView = 0;\r
+       \r
+       //thumbnail overevent bind\r
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );\r
+       focusDeviceDetail (1);\r
+       \r
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.type === "keydown" && e.which == 9) {\r
+                       setTimeout(function() {\r
+                               $("#img-viewer-handle a").eq(0).focus();        \r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       //thumbnail viewarea controll handler bind\r
+       $("#img-viewer-handle").click(function () {\r
+               var ww;\r
+               var src = $("#img-viewer-handle img").attr("src");\r
+               if ( isImgView ){\r
+                       ww = "300px";\r
+                       src = src.replace(".gif", "_.gif");\r
+                       $("#img-viewer-thumbnail").hide();\r
+                       $("#device-info").show();\r
+               }else{\r
+                       ww = "730px";\r
+                       src = src.replace("_.gif", ".gif");\r
+                       $("#img-viewer-thumbnail").show();\r
+                       $("#device-info").hide();\r
+                       focusDeviceDetail(1);\r
+               }\r
+               \r
+               $("#img-viewer-handle img").attr("src", src);\r
+       $("#img-viewer").animate({\r
+                   width: ww\r
+                       }, 300, "linear", function(){\r
+                       if($.browser.msie)\r
+                               $("#img-inner").css("width", ww);\r
+               });\r
+               \r
+       isImgView = ( isImgView ) ? false:true;\r
+    });\r
+\r
+       //thumbnail overevent function (update date 2012.09.05 kangki)\r
+       function focusDeviceDetail ( id ) {\r
+               if ( isView == id ) return;\r
+\r
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");\r
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');\r
+\r
+               $( "#img-viewer-bic > img").attr("src", imgSrc);\r
+               isView = (id);          \r
+       }\r
+\r
+       /*toggle devicespecs List*/\r
+       if($('div#contents').find('.devicespec-tit').length){\r
+               \r
+               $('.devicespec-tit').each(function(){\r
+                       var self = $(this);\r
+                       $('a', self).bind ("click", fnToggle);\r
+\r
+                       function fnToggle(){\r
+\r
+                               if ( $(this).parent().parent().next().is(':visible') ){\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+                                       self.find('em').text('Show');\r
+                                       self.next().hide();\r
+\r
+                                       return false;\r
+                               }else{\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+                                       self.find('em').text('Hide');\r
+                                       self.next().show();\r
+\r
+                                       return false;\r
+                               }\r
+                       }\r
+                                                       \r
+               });\r
+       }\r
+\r
+       /*all Show Hide devicespecs List*/\r
+       if($('div#contents').find('.devicespecs-util').length){\r
+               var self = $('div#contents').find('.devicespecs-util');\r
+\r
+               $('.showA', self).bind ("click", function (){\r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( !me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+                                       me.find('em').text('Hide');\r
+                                       me.next().show();\r
+                               }\r
+                       });\r
+                       return false;\r
+               })\r
+               $('.hideA', self).bind ("click", function (){\r
+                       \r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+                                       me.find('em').text('Show');\r
+                                       me.next().hide();\r
+                               }\r
+                                                               \r
+                       });\r
+                       return false;\r
+               })\r
+       }       \r
+}\r
+\r
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       $("#searchInput").bind("keydown", checkSearchText);\r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+\r
+       $(".autocomplete").mouseleave(function(){\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".autocomplete").css("visibility", "visible");\r
+\r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+\r
+                       var hei = $(".autocomplete").find('>ul').outerHeight();\r
+                       if(hei>400){\r
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});\r
+                       }\r
+               }\r
+               else{\r
+                       $(".autocomplete").css("visibility", "hidden");\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+ */\r
+\r
+function setTopScroll(selector) {\r
+       if ( !selector ) return false;\r
+       var btn = $( selector );\r
+       var w = $( window );\r
+       btn.css( "position", "absolute" );\r
+\r
+\r
+       btn.click( function(){ w.scrollTop( 0 ) } );\r
+\r
+       var wheight = w.innerHeight();\r
+       \r
+       $(window).resize( function() {\r
+               wheight = w.innerHeight();\r
+               redraw();\r
+       });\r
+\r
+       $(window).scroll( function() {\r
+               redraw();\r
+       })\r
+\r
+       /**\r
+        *      Top 버튼의 재정렬 메서드\r
+        */\r
+       function redraw()\r
+       {\r
+               var t = w.scrollTop() + wheight - 289;\r
+\r
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {\r
+                       t = wheight / 2;\r
+               }\r
+               \r
+               btn.clearQueue();\r
+\r
+               btn.animate({\r
+           top: t\r
+               }, 500, function() {\r
+           // Animation complete.\r
+               });\r
+               //btn.css( "top", t );\r
+               //console.log( "target : " + t );\r
+       }\r
+\r
+       redraw();\r
+       /*\r
+       obj.initTop = position;\r
+       obj.topLimit = topLimit;\r
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;\r
+\r
+       obj.style.position = "absolute";\r
+       obj.top = obj.initTop;\r
+       // obj.left = obj.initLeft;\r
+\r
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit\r
+               obj.getTop = function() {\r
+                       return window.pageYOffset;\r
+               }\r
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {\r
+               obj.getTop = function() {\r
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );\r
+               }\r
+       } else {\r
+               obj.getTop = function() {\r
+                       return 0;\r
+               }\r
+       }\r
+\r
+       if ( self.innerHeight ) {       //WebKit\r
+               obj.getHeight = function() {\r
+                       return self.innerHeight;\r
+               }\r
+       } else if( document.documentElement.clientHeight ) {\r
+               obj.getHeight = function() {\r
+                       return document.documentElement.clientHeight;\r
+               }\r
+       } else {\r
+               obj.getHeight = function() {\r
+                       return 500;\r
+               }\r
+       }\r
+\r
+       obj.move = setInterval( function() {\r
+               if ( obj.initTop > 0 ) {\r
+                       pos = obj.getTop() + obj.initTop;\r
+               } else {\r
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;\r
+               }\r
+\r
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;\r
+               if ( pos < obj.topLimit ) pos = obj.topLimit;\r
+\r
+               interval = obj.top - pos;\r
+               obj.top = obj.top - interval / 3;\r
+               obj.style.top = obj.top + "px";\r
+       }, 30 )\r
+       */\r
+}\r
+\r
+\r
+//popup\r
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)\r
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)\r
+\r
+//popup 중앙에 띄우기\r
+function pop_center(){ \r
+       var x,y; \r
+       if (window.innerHeight) { // IE 외 모든 브라우저 \r
+               x = (screen.availWidth - self.innerWidth) / 2; \r
+               y = (screen.availHeight - self.innerHeight) / 2; \r
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 \r
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; \r
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; \r
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) \r
+               x = (screen.availWidth - document.body.clientWidth) / 2; \r
+               y = (screen.availHeight - document.body.clientHeight) / 2; \r
+       } \r
+       window.moveTo(x,y); \r
+}\r
+\r
+// Layer Popup Open\r
+function layer_open(el){\r
+       var temp = $('#' + el);\r
+\r
+       if(!temp.hasClass('sty2')){\r
+               $('.layer').fadeIn();\r
+       }\r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       if(temp.hasClass('sty2')){\r
+               temp.fadeIn();\r
+\r
+               temp.find('a.cbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+               temp.find('a.gbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+\r
+               return false;\r
+       }\r
+       // 닫는 버튼 gbtn-c 추가 20130627\r
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){\r
+               $('.layer').fadeOut();\r
+               return false;\r
+       });\r
+}\r
+\r
+// background dim - 2013-05-31\r
+function layer_open2(el){\r
+       var temp = $('#' + el);\r
+       $('input').attr('disabled', 'disabled');\r
+       $('.layerPop').fadeIn();\r
+       \r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){\r
+               $('.layerPop').fadeOut();\r
+               $('input').removeAttr('disabled');\r
+               return false;\r
+       });\r
+}\r
+\r
+\r
+function pop_account(url){\r
+       window.open(url,'account','width=619,height=591,scrollbars=yes')\r
+}\r
+\r
+function pop_loadDoc(url){\r
+       window.open(url,'online','width=850,height=600,scrollbars=yes')\r
+}\r
+\r
+/** \r
+ *  [PAGE] Tags\r
+ *  date : 20120820\r
+ *  author : 전종호\r
+ */\r
+function initTags()\r
+{\r
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.\r
+       // 마지막 아이템은 제외\r
+       var eleArr = $(".tag-list").find("li");\r
+\r
+       $( eleArr ).each( function( i ) {\r
+               if( i < eleArr.length - 1 )\r
+               {\r
+                       var target = $(this).find("a")[0];\r
+                       var content = $( target ).html();\r
+\r
+                       $( target ).html( content + "," );\r
+               }\r
+       })\r
+}\r
+\r
+$(document).ready(function(){\r
+       $(".tip_info").css("cursor","pointer");\r
+       $(".tip_info > img").mouseover(function(){\r
+               $(".tip_cont").css("display","block");\r
+       });\r
+       $(".tip_info > img").mouseout(function(){\r
+               $(".tip_cont").css("display","none");\r
+       });\r
+});\r
+\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+var isPopup = false ;\r
+\r
+function popupLayerView(id){\r
+\r
+       var $L = $("#" + id) ;\r
+       var $D  = $("#" + id + "down") ;\r
+\r
+       $T = $("#" + id) ;\r
+\r
+       $L.show();\r
+       isPopup = true ;\r
+\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+\r
+       $("#" + id + "agree").focus() ;\r
+\r
+       jQuery(":focusable").focusin(function(e){\r
+               if (isPopup) {\r
+                       e.stopPropagation() ;\r
+                       if ($L.find(jQuery(this)).length > 0) {\r
+                       } else {\r
+                               jQuery(this).blur() ;\r
+                               jQuery("#" + id + " :focusable:first").focus() ;\r
+                       }\r
+               }\r
+       }) ;\r
+\r
+       $L.find('.close').click(function(){\r
+               resetPopup(id) ;\r
+       });\r
+\r
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });\r
+}\r
+\r
+function resetPopup(T) {\r
+       $("#" + T + "down").hide();\r
+       $("#" + T + "agree").attr("checked", false) ;\r
+       isPopup = false ;\r
+       $("#" + T).hide() ;\r
+       $("#" + T + "Btn").focus() ;\r
+}\r
+\r
+function getDownload(T, F, I) {\r
+       if ($("#" + T + "agree").is(':checked')) {\r
+               commonDownloadLog(F, I) ;\r
+               resetPopup(T) ;\r
+       }\r
+}\r
+\r
+function focusable( element, isTabIndexNotNaN ) {\r
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;\r
+       if ( "area" === nodeName ) {\r
+               map = element.parentNode;\r
+               mapName = map.name;\r
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }\r
+               img = $( "img[usemap=#" + mapName + "]" )[0];\r
+               return !!img && visible( img );\r
+       }\r
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible\r
+                       visible( element ) ;\r
+}\r
+\r
+function visible( element ) {\r
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {\r
+               return $.css( this, "visibility" ) === "hidden";\r
+       }).length;\r
+}\r
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }\r
+\r
+$.extend( $.expr[ ":" ], {\r
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },\r
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },\r
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }\r
+});\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+// 2013-11-15 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device1').hide();\r
+       \r
+       $('#thumb_view_btn').hover(function() {\r
+               $('.view_device1').show();\r
+       },function() {\r
+               $('.view_device1').hide();\r
+       });\r
+               \r
+});\r
+\r
+// 2014-04-22 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device2').hide();\r
+       \r
+       $('#thumb_view_btn2').hover(function() {\r
+               $('.view_device2').show();\r
+       },function() {\r
+               $('.view_device2').hide();\r
+       });\r
+               \r
+});\r
+\r
+\r
+function beforePopupLayerView(popId, popId2, popContinue){\r
+       var $L = $("#" + popId) ;\r
+       $L.show(100);\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+       $L.find('.close').click(function(){\r
+               $L.hide();\r
+       });\r
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });\r
+}\r
diff --git a/org.tizen.guides/html/scripts/core.js b/org.tizen.guides/html/scripts/core.js
index 68dea4c..31ad7ff 100644 (file)
--- a/org.tizen.guides/html/scripts/core.js
+++ b/org.tizen.guides/html/scripts/core.js
@@ -1,899 +1,899 @@
-// /////////////////////////////////////////////////////////////////////////////////////////////////
-// # com.samsung.devloper common core javascript #
-// # Create Date : 2012.07.10. 
-// # Create By : kangki
-;(function ($) {
-/**
- * Samsung Developer Common JavaScript
- */
-$.SD = {};
-
-/*
- * Method Common
- */
-$.SD.message = function (msg) { if (msg) alert(msg); };
-$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
-$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
-$.SD.typeTest = function (data, datatype) {
-       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
-       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
-       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
-       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
-       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
-       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
-       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
-
-       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
-};
-
-$.SD.toDate = function (date, seperator) {
-       if (!seperator) seperator = '-';
-
-       date = $.SD.replaceAll(date, seperator, '');
-       date = $.SD.replaceAll(date, '/', '');
-
-       if (date.length !== 8) return null;
-       
-       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
-
-       if (date.valueOf().toString() === 'NaN') return null;
-
-       return date;
-};
-
-$.SD.toDateString = function (date, seperator) {
-       if (!seperator) seperator = '/';
-       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
-       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
-
-       var str, dateString = date.getFullYear();
-
-       str             = "0" + (date.getMonth()+1);
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-       str             = "0" + date.getDate();
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-
-       return dateString;
-};
-
-$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
-$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
-$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
-
-$.SD.insertComma = function(num) {
-       var tnum    = num + "";
-       var tarr    = new Array();
-       var dot     = "";
-       var idxDot  = tnum.indexOf(".");
-       var sign    = "";
-       var tinx    = 0;
-       var fnum    = tnum;
-        
-       
-       if(idxDot > -1) {
-               fnum = tnum.substring(0, idxDot);
-               dot  = tnum.substring(idxDot);
-               tnum = fnum;
-       } 
-       
-       if(tnum.indexOf("-") > -1) {
-               fnum = tnum.substring(1);
-               sign = tnum.substring(0, 1);
-       }
-       
-       for(var inx = fnum.length; inx > 0; ) {
-               tarr[tinx++] = fnum.substring(inx, inx - 3);
-               inx = inx - 3;
-       }
-       
-       return sign + tarr.reverse().join(",") + dot;
-}
-
-/**
- * Method Ajax
- */
-$.SD.ajax = {
-       doAjax : function (json) {
-               var param = {
-                       async : json.async,
-                       type : json.type,
-                       dataType : json.dataType,
-                       cache: json.cache,
-                       timeout : json.timeout,
-                       success : json.success,
-                       error : json.error
-               };
-
-               if (param.dataType === 'jsonp') {
-                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
-               } else {
-                       param.url = json.url;
-                       param.data = json.data;
-               }
-               $.ajax(param);
-       },
-       
-       get : function (json) {
-               $.SD.ajax.doAjax({ 
-                       url:json.url,
-                       cache:json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'get', 
-                       dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       },
-       
-       post : function (json) {
-               $.SD.ajax.doAjax({ url:json.url,
-                       cache: json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'post', dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       }
-};
-
-/**
- * SD20 password check
- */
-
-$.SD.isSD20Pwd = function(pwd) {
-       
-       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/[0-9]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
-               return false;
-       }
-       
-       return true;
-};
-
-$.SD.popupCenter = function(popObj) {
-       var scrollbars  = "no";
-       var resizeable  = "no";
-       
-       if(popObj.scrollbars) {
-               scrollbars = popObj.scrollbars; 
-       }
-       
-       if(popObj.resizeable) {
-               resizeable = popObj.resizeable;
-       }
-       
-       var width  = screen.width;
-       var height = screen.height;
-
-       var x = ( width / 2 ) - ( popObj.width / 2 );
-       var y = ( height / 2 ) - ( popObj.height / 2 );
-
-       var opt = "left=" + x +
-                 ",top=" + y +
-                 ",width=" + popObj.width +
-                 ",height=" + popObj.height +
-                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
-                 ",scrollbars=" + scrollbars +
-                 ",resizable=" + resizeable;
-       var pop = window.open(popObj.url, popObj.target, opt);
-       if(pop) {
-               pop.focus();
-       }
-}
-
-$.SD.isValidDate = function(val) {
-       if(val.length != 8) {
-               return false;
-       }
-       
-       var yyyy = Number(val.substring(0, 4)); 
-       var mm   = Number(val.substring(4, 6));
-       var dd   = Number(val.substring(6));
-       
-       if( mm < 1 || mm > 12 ) {
-               return false;
-       }
-       
-       var endDay  = 0;
-       
-       if( mm == 2 ) {
-               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
-                       endDay = 29;
-               } else {
-                       endDay = 28;
-               }
-               
-       } else {
-               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
-               endDay = endDays[mm - 1];
-       }
-       
-       if( dd <= 0 || dd > endDay ) {
-               return false;
-       } 
-       
-       return true;
-       
-}
-
-$.SD.boardDownload = function(option, func) {
-       var jsonData = {
-               url: "/board/ajaxDwnldProc.do",
-               async: false,
-               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
-                               //location.href = $(obj).attr("href");
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.commonDownload = function(fileName, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDwnldProc.do",
-               async: false,
-               data: {fileName: fileName, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               location.href = fileFullPath;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(target == 'new'){
-                                       window.open(fileFullPath, '');
-                               }else{
-                                       location.href = fileFullPath;
-                               }
-                               
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonAllShareClickCountProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonClickCount = function(categoryName, categoryId) {
-       var jsonData = {
-               url: "/common/ajaxCommonClickCountProc.do",
-               data: {categoryName: categoryName, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.getByteLen = function(str) {
-       var resultSize = 0;
-       if(str == null){
-               return 0;
-       }
-       for(var i=0; i<str.length; i++){
-         var c = escape(str.charAt(i));
-         if(c.length == 1){
-                 resultSize ++;
-         }     else if(c.indexOf("%u") != -1) {
-                 resultSize += 2;
-         }     else if(c.indexOf("%") != -1) {
-                 resultSize += c.length/3;
-         }
-       }
-       return resultSize;
-}
-
-$.SD.cutByte = function(str, limit) {
-       var tempStr = new String(str);
-       var len = 0;
-       for ( var i = 0; i < str.length; i++) {
-               var c = escape(str.charAt(i));
-               if (c.length == 1)
-                       len++;
-               else if (c.indexOf("%u") != -1)
-                       len += 2;
-               else if (c.indexOf("%") != -1)
-                       len += c.length / 3;
-               if (len > limit) {
-                       tempStr = tempStr.substring(0, i);
-                       break;
-               }
-       }
-       return tempStr;
-}
-
-$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
-
-/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
-
-/** 
- * Method pagination 
- * */
-$.fn.frontPagination = function (pageInfo, func) {
-       var info = {
-                        prev : 1
-                       ,first : 1
-                       ,begin : pageInfo.begin - 0
-                       ,current : pageInfo.current - 0
-                       ,end : pageInfo.end - 0
-                       ,last : pageInfo.last - 0
-                       ,next : 1
-               },
-               target  = this, 
-               page    = $('<span class="page"></span>'),
-               prev    = "", 
-               next    = "", 
-               i               = 0, 
-               n               = 0;
-
-       info.begin       = info.begin < 1 ? 1 : info.begin;
-       info.current = info.current < 1 ? 1 : info.current;
-       info.end         = info.end < 1 ? 1 : info.end;
-       info.last        = info.last < 1 ? 1 : info.last;
-
-       info.prev = info.current - 1;
-       info.next = info.current + 1;
-
-       target.addClass("pageNumber");
-       target.addClass("mt20");
-       target.children().remove();
-
-       if (info.first < info.begin) {
-               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.first);
-               }));
-       }
-
-       if (info.prev >= info.first) {
-               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.prev);
-               }));
-       }
-
-       i = info.begin;
-       n = info.end;
-       for(; i <= n; i++) {
-               if (i === info.current) {
-                       page.append('<strong>'+i+'</strong>');
-               } else {
-                       (function(index){
-                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
-                                       e.preventDefault();
-                                       func(index);
-                               }));
-                       })(i);
-               }
-       }
-
-       target.append(page);
-
-       if (info.next <= info.last) {
-               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.next);
-               }));
-       }
-       
-       if (info.last > info.end) {
-               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.last);
-               }));
-       }       
-};
-
-/**
- *  Method : popup Show Hide 
- */
-$.fn.popupShow = function(options) {
-       var opts = $.extend({}, $.fn.popupShow.defaults, options);
-       
-       if($("body div#" + opts.maskId).size() == 0) {
-               $("body").append("<div id='" + opts.maskId + "'></div>");
-               $("#" + opts.maskId).css({
-                       "position" : "absolute",
-                       "left"     : "0",
-                       "top"      : "0",
-                       "z-index"  : "9000",
-                       "background-color" : "#000",
-                       "display"  : "none"
-               });
-       }
-       
-       var mask_layer  = $("#" + opts.maskId);
-       var popup_layer = $(this);
-       
-       popup_layer.css("z-index", "9999");
-       
-       var maskHeight = $(document).height();
-       var maskWidth = $(window).width();
-       
-       mask_layer.css({'width':maskWidth,'height':maskHeight});
-       
-       mask_layer.fadeIn(opts.fadeSec);
-       mask_layer.fadeTo(opts.speed, opts.fadeLow);
-       
-       var winH = $(window).height();
-       var winW = $(window).width();
-       
-       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-       
-       popup_layer.fadeIn(opts.fadeSec);
-       
-       var init_num = 0;
-       
-       if(init_num == 0) {
-               mask_layer.click(function() {
-                       $(this).hide();
-                       popup_layer.hide();
-               });
-               
-               
-               $("#" + opts.closeId).click( function(e) {
-                       e.preventDefault();
-                       popup_layer.popupHidden(opts.maskId);
-               });
-               
-               
-               $(window).resize( function() {
-                       var maskHeight = $(document).height();
-                       var maskWidth  = $(window).width();
-                       var winH       = $(window).height();
-                       var winW       = $(window).width();
-                       
-                       mask_layer.css({'width':maskWidth,'height':maskHeight});
-                       
-                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-               });
-               
-               init_num++;
-       }
-};
-
-$.fn.popupHidden = function(maskId) {
-       var id = "#";
-       
-       if(maskId) {
-               id = id + maskId;
-       } else {
-               id = id + $.fn.popupShow.defaults.maskId; 
-       }
-       
-       $(id).hide();
-       $(this).hide();
-};
-
-
-$.fn.popupShow.defaults = {
-       speed : "slow",
-       fadeLow : 0.8,
-       fadeSec : 100,
-       maskId  : "mask",
-       popupId : "layer-pop",
-       closeId : "layer-pop-close"
-};
-
-/**
- *  Method : validate File Ext
- */
-$.fn.isNotValidateFileExt = function(imgExts) {
-       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
-       var that = this;
-       var target = null;
-
-       that.each(function (i, item) {
-               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
-               if (filePath != "") {
-                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
-                       if (!imgExts[fileExt]) {
-                               target = item;
-                               return false;
-                       }
-               }
-       });
-
-       return target;
-}      
-
-/**
- *  Method : validate SD20 Password
- */
-$.validator.addMethod("isSD20Pwd", function(value, element) {
-       return this.optional(element) 
-              || $.SD.isSD20Pwd(value);
-}, "비밀번호를 다시 입력해 주세요.");
-
-$.SD.alterParent = function(options, event) {
-    var label = $(this).data('label');
-    
-    /*
-    if (event && event.type === 'focusin') {
-      label.hide();
-    } else if (event && event.type === 'focusout') {
-      label.css('opacity', options.placeholderOpacity);
-    }
-    */
-    
-    if (event && event.type !== 'keydown') {
-      toggleLabel(this, label);
-    } else {
-      // Use timeout to catch val() just after the key is pressed
-      // Using keyup is too slow.   
-      (function(input) {
-        setTimeout(function() {
-          toggleLabel(input, label);
-        }, 0);
-      })(this);
-    }
-    
-    if (event && event.type === 'focusin') {
-       label.hide();
-    }
-  };
-  
-  var toggleLabel = function(input, label) {
-    if ($(input).val()) {
-      label.hide();
-    } else {
-      label.show();
-    }
-  };
-
-  $.fn.stickyPlaceholders = function(options) {
-    var defaults = {
-      wrapperClass: 'sticky-placeholder-wrapper',
-      wrapperDisplay: 'block',
-      labelClass: 'sticky-placeholder-label',
-      placeholderAttr: 'placeholder',
-      dataAttr: 'data-sticky-placeholder',
-      placeholderColor: '#000',
-      placeholderOpacity: 0.5,
-      placeholderFocusOpacity: 0.25
-    };
-    options = $.extend(defaults, options);
-
-    return this.each(function() {
-      var input       = $(this),
-          placeholder = input.attr(options.placeholderAttr),
-          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
-          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
-          labelStyle;
-
-      // store a reference to each input's label
-      input.data('label', label);
-
-      // remove the placeholder attribute to avoid conflcits
-      input.removeAttr('placeholder');
-      
-      // If the dataAttr is set and it's not equal to the placeholderAttr
-      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
-        input.attr('data-sticky-placeholder', placeholder);
-      }
-
-      labelStyle = {
-        'color': options.placeholderColor,
-        'cursor': 'text',
-        'font-family': input.css('font-family'),
-        'font-weight': input.css('font-weight'),
-        'font-size': input.css('font-size'),
-        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
-        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
-        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
-        'opacity': options.placeholderOpacity,
-        'padding-left': input.css('padding-left'),
-        'padding-top': input.css('padding-top'),
-        'position': 'absolute',
-        'text-transform': input.css('text-transform'),
-        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
-      };
-      label.css(labelStyle);
-      
-      // hide the placeholder if the input already has a value
-      if (input.val()) {
-        label.hide();
-      }
-
-      $(this).bind('keydown input focusin focusout', function(event) {
-        $.SD.alterParent.call(this, options, event);
-      });
-        
-      // prevent click/dblclick from selecting the label text
-      label.bind('mousedown', function(e) {
-        e.preventDefault();
-      });
-      
-      // call alterParent initially without an event to set up the wrapper elements
-      $.SD.alterParent.call(this, options);
-    });
-  };
- 
-$.SD.setInputFileKeyEvent = function(file_id, after_id) {
-       $("#" + file_id).on("keydown", function(e) {
-               var that = $(this);
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.which === 9) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + after_id).focus();
-                       }, 1);
-               }
-       });
-       
-       $("#" + after_id).on("keydown", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + file_id).focus();
-                       }, 1);
-               }
-       });
-}  
-
-$.SD.closeWP = function() {
-       var Browser = navigator.appName;
-       var indexB = Browser.indexOf('Explorer');
-       if (indexB > 0) {
-           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
-           var Version = navigator.userAgent.substring(indexV, indexV + 1);
-           window.opener.focus();
-           if (Version >= 7) {
-               window.open('', '_self', '');
-               window.close();
-           }
-           else if (Version == 6) {
-               window.opener = null;
-               window.close();
-           }
-           else {
-               window.opener = '';
-               window.close();
-           }
-       }
-       else {
-           window.close();
-       }
-}
-
-$.SD.profileFacebook = function() {
-       location.replace("http://facebook.com/profile.php");
-}
-
-/* ------------------------------ END --------------------------------------- */
-window.$SD = $.SD;
-
-})(jQuery);
-
-
-$(document).ready(function(){
-//document rady Start #########################################
-
-// Top menu action Start
-var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
-var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
-var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
-var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
-var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
-var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
-var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
-var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
-var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
-var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
-
-$("#wrapper").on('click', 'a', function(e) {
-        switch($(this).attr('id')) {
-        case 'changeEn': onClickChangeEn(e);  break;
-        case 'changeZh': onClickChangeZh(e); break;
-        case 'changeKo': onClickChangeKo(e); break;
-        case 'signOut': onClickSignOut(e); break;
-        case 'signUp': onClickSignUp(e); break;
-        case 'signIn': onClickSignIn(e); break;
-        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
-        case 'signOff': onClickSignOff(e); break;
-        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
-        case 'deleteAccount' : onClickDeleteAccount(e); break;
-        }
-});
- 
-//Top menu action End
-
-
-$("#sendFacebook, #sendTwitter").click(function(e) {
-       e.preventDefault();
-       var $this = $(this);
-       
-       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
-               var sns = $this.attr("id").substring(4).toLowerCase();
-               switch(sns) {
-               case "facebook" :
-                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
-                       $("div.content img").each(function() {
-                               var that = $(this);
-                               if(that.width() > 200 && that.height() > 200) {
-                                       imgUrl = that.attr("src");
-                                       return false;
-                               }
-                       });
-                       
-                       var data = {
-                               app_id : $("#sd_appId").text(),
-                               link : copyUrl,
-                               picture : imgUrl,
-                               name : $("title").text(),
-                               caption : "developer.samsung.com",
-                               description : $("div.content p").eq(0).text(),
-                               redirectUri : "http://" + location.host + "/board/sns.do"
-                       };
-                       var url = "https://www.facebook.com/dialog/feed?" ;
-                       url += "app_id=" + data.app_id + "&" ;
-                       url += "link=" + data.link + "&" ;
-                       url += "picture=" + data.picture + "&" ;
-                       url += "name=" + encodeURIComponent(data.name) + "&" ;
-                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
-                       url += "description=" + encodeURIComponent(data.description) + "&" ;
-                       url += "redirect_uri=" + data.redirectUri ;
-                       sendSNS(sns, url, 850, 600);
-                       break;
-               case "twitter" :
-                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
-                       break;
-               }
-       }
-       
-       function sendSNS(sns, url, iWidth, iHeight) {
-               var popObj = { url : url
-                                    , width : iWidth
-                                    , height: iHeight
-                                    , target: sns
-                                    , scrollbars: "yes"
-                                    , resizeable: "yes"};
-       
-               $SD.popupCenter(popObj);
-       }
-})
- 
-//document rady End #########################################
- });
-
-;(function(){
-       window.deviceImageError = function(el) {
-               var noImage = noImage || '/images/common/device_details_noimage.gif';
-               if (el.src === noImage) 
-                       return;
-               el.src = noImage;
-       };
-})();
-
-function commonDownload(fileName, categoryId){
-       if (fileName == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!!!")
-               return;
-       }else{
-               $SD.commonDownload(fileName, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLog(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLogTarget(fileFullPath, categoryId, target){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
-               });
-       }
-}
-
-function commonAllShareClickCount(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-/*
-function layer_view(id){
-
-       var $layer = $('#'+id);
-       var $down  = $('.license-layer').find('a#down');
-
-       $layer.show();
-       $layer.find('.close, #down').click(function(){
-               $layer.hide();
-       });
-
-       function countChecked() {
-               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
-       }
-
-       $(":checkbox").click(countChecked);
-}
-*/
+// /////////////////////////////////////////////////////////////////////////////////////////////////\r
+// # com.samsung.devloper common core javascript #\r
+// # Create Date : 2012.07.10. \r
+// # Create By : kangki\r
+;(function ($) {\r
+/**\r
+ * Samsung Developer Common JavaScript\r
+ */\r
+$.SD = {};\r
+\r
+/*\r
+ * Method Common\r
+ */\r
+$.SD.message = function (msg) { if (msg) alert(msg); };\r
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }\r
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };\r
+$.SD.typeTest = function (data, datatype) {\r
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));\r
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));\r
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));\r
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));\r
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));\r
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));\r
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));\r
+\r
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));\r
+};\r
+\r
+$.SD.toDate = function (date, seperator) {\r
+       if (!seperator) seperator = '-';\r
+\r
+       date = $.SD.replaceAll(date, seperator, '');\r
+       date = $.SD.replaceAll(date, '/', '');\r
+\r
+       if (date.length !== 8) return null;\r
+       \r
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));\r
+\r
+       if (date.valueOf().toString() === 'NaN') return null;\r
+\r
+       return date;\r
+};\r
+\r
+$.SD.toDateString = function (date, seperator) {\r
+       if (!seperator) seperator = '/';\r
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);\r
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";\r
+\r
+       var str, dateString = date.getFullYear();\r
+\r
+       str             = "0" + (date.getMonth()+1);\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+       str             = "0" + date.getDate();\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+\r
+       return dateString;\r
+};\r
+\r
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };\r
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };\r
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };\r
+\r
+$.SD.insertComma = function(num) {\r
+       var tnum    = num + "";\r
+       var tarr    = new Array();\r
+       var dot     = "";\r
+       var idxDot  = tnum.indexOf(".");\r
+       var sign    = "";\r
+       var tinx    = 0;\r
+       var fnum    = tnum;\r
+        \r
+       \r
+       if(idxDot > -1) {\r
+               fnum = tnum.substring(0, idxDot);\r
+               dot  = tnum.substring(idxDot);\r
+               tnum = fnum;\r
+       } \r
+       \r
+       if(tnum.indexOf("-") > -1) {\r
+               fnum = tnum.substring(1);\r
+               sign = tnum.substring(0, 1);\r
+       }\r
+       \r
+       for(var inx = fnum.length; inx > 0; ) {\r
+               tarr[tinx++] = fnum.substring(inx, inx - 3);\r
+               inx = inx - 3;\r
+       }\r
+       \r
+       return sign + tarr.reverse().join(",") + dot;\r
+}\r
+\r
+/**\r
+ * Method Ajax\r
+ */\r
+$.SD.ajax = {\r
+       doAjax : function (json) {\r
+               var param = {\r
+                       async : json.async,\r
+                       type : json.type,\r
+                       dataType : json.dataType,\r
+                       cache: json.cache,\r
+                       timeout : json.timeout,\r
+                       success : json.success,\r
+                       error : json.error\r
+               };\r
+\r
+               if (param.dataType === 'jsonp') {\r
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';\r
+               } else {\r
+                       param.url = json.url;\r
+                       param.data = json.data;\r
+               }\r
+               $.ajax(param);\r
+       },\r
+       \r
+       get : function (json) {\r
+               $.SD.ajax.doAjax({ \r
+                       url:json.url,\r
+                       cache:json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'get', \r
+                       dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       },\r
+       \r
+       post : function (json) {\r
+               $.SD.ajax.doAjax({ url:json.url,\r
+                       cache: json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'post', dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       }\r
+};\r
+\r
+/**\r
+ * SD20 password check\r
+ */\r
+\r
+$.SD.isSD20Pwd = function(pwd) {\r
+       \r
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/[0-9]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       return true;\r
+};\r
+\r
+$.SD.popupCenter = function(popObj) {\r
+       var scrollbars  = "no";\r
+       var resizeable  = "no";\r
+       \r
+       if(popObj.scrollbars) {\r
+               scrollbars = popObj.scrollbars; \r
+       }\r
+       \r
+       if(popObj.resizeable) {\r
+               resizeable = popObj.resizeable;\r
+       }\r
+       \r
+       var width  = screen.width;\r
+       var height = screen.height;\r
+\r
+       var x = ( width / 2 ) - ( popObj.width / 2 );\r
+       var y = ( height / 2 ) - ( popObj.height / 2 );\r
+\r
+       var opt = "left=" + x +\r
+                 ",top=" + y +\r
+                 ",width=" + popObj.width +\r
+                 ",height=" + popObj.height +\r
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +\r
+                 ",scrollbars=" + scrollbars +\r
+                 ",resizable=" + resizeable;\r
+       var pop = window.open(popObj.url, popObj.target, opt);\r
+       if(pop) {\r
+               pop.focus();\r
+       }\r
+}\r
+\r
+$.SD.isValidDate = function(val) {\r
+       if(val.length != 8) {\r
+               return false;\r
+       }\r
+       \r
+       var yyyy = Number(val.substring(0, 4)); \r
+       var mm   = Number(val.substring(4, 6));\r
+       var dd   = Number(val.substring(6));\r
+       \r
+       if( mm < 1 || mm > 12 ) {\r
+               return false;\r
+       }\r
+       \r
+       var endDay  = 0;\r
+       \r
+       if( mm == 2 ) {\r
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {\r
+                       endDay = 29;\r
+               } else {\r
+                       endDay = 28;\r
+               }\r
+               \r
+       } else {\r
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);\r
+               endDay = endDays[mm - 1];\r
+       }\r
+       \r
+       if( dd <= 0 || dd > endDay ) {\r
+               return false;\r
+       } \r
+       \r
+       return true;\r
+       \r
+}\r
+\r
+$.SD.boardDownload = function(option, func) {\r
+       var jsonData = {\r
+               url: "/board/ajaxDwnldProc.do",\r
+               async: false,\r
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;\r
+                               //location.href = $(obj).attr("href");\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.commonDownload = function(fileName, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDwnldProc.do",\r
+               async: false,\r
+               data: {fileName: fileName, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               location.href = fileFullPath;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(target == 'new'){\r
+                                       window.open(fileFullPath, '');\r
+                               }else{\r
+                                       location.href = fileFullPath;\r
+                               }\r
+                               \r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonAllShareClickCountProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonClickCount = function(categoryName, categoryId) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonClickCountProc.do",\r
+               data: {categoryName: categoryName, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.getByteLen = function(str) {\r
+       var resultSize = 0;\r
+       if(str == null){\r
+               return 0;\r
+       }\r
+       for(var i=0; i<str.length; i++){\r
+         var c = escape(str.charAt(i));\r
+         if(c.length == 1){\r
+                 resultSize ++;\r
+         }     else if(c.indexOf("%u") != -1) {\r
+                 resultSize += 2;\r
+         }     else if(c.indexOf("%") != -1) {\r
+                 resultSize += c.length/3;\r
+         }\r
+       }\r
+       return resultSize;\r
+}\r
+\r
+$.SD.cutByte = function(str, limit) {\r
+       var tempStr = new String(str);\r
+       var len = 0;\r
+       for ( var i = 0; i < str.length; i++) {\r
+               var c = escape(str.charAt(i));\r
+               if (c.length == 1)\r
+                       len++;\r
+               else if (c.indexOf("%u") != -1)\r
+                       len += 2;\r
+               else if (c.indexOf("%") != -1)\r
+                       len += c.length / 3;\r
+               if (len > limit) {\r
+                       tempStr = tempStr.substring(0, i);\r
+                       break;\r
+               }\r
+       }\r
+       return tempStr;\r
+}\r
+\r
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};\r
+\r
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */\r
+\r
+/** \r
+ * Method pagination \r
+ * */\r
+$.fn.frontPagination = function (pageInfo, func) {\r
+       var info = {\r
+                        prev : 1\r
+                       ,first : 1\r
+                       ,begin : pageInfo.begin - 0\r
+                       ,current : pageInfo.current - 0\r
+                       ,end : pageInfo.end - 0\r
+                       ,last : pageInfo.last - 0\r
+                       ,next : 1\r
+               },\r
+               target  = this, \r
+               page    = $('<span class="page"></span>'),\r
+               prev    = "", \r
+               next    = "", \r
+               i               = 0, \r
+               n               = 0;\r
+\r
+       info.begin       = info.begin < 1 ? 1 : info.begin;\r
+       info.current = info.current < 1 ? 1 : info.current;\r
+       info.end         = info.end < 1 ? 1 : info.end;\r
+       info.last        = info.last < 1 ? 1 : info.last;\r
+\r
+       info.prev = info.current - 1;\r
+       info.next = info.current + 1;\r
+\r
+       target.addClass("pageNumber");\r
+       target.addClass("mt20");\r
+       target.children().remove();\r
+\r
+       if (info.first < info.begin) {\r
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.first);\r
+               }));\r
+       }\r
+\r
+       if (info.prev >= info.first) {\r
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.prev);\r
+               }));\r
+       }\r
+\r
+       i = info.begin;\r
+       n = info.end;\r
+       for(; i <= n; i++) {\r
+               if (i === info.current) {\r
+                       page.append('<strong>'+i+'</strong>');\r
+               } else {\r
+                       (function(index){\r
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){\r
+                                       e.preventDefault();\r
+                                       func(index);\r
+                               }));\r
+                       })(i);\r
+               }\r
+       }\r
+\r
+       target.append(page);\r
+\r
+       if (info.next <= info.last) {\r
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.next);\r
+               }));\r
+       }\r
+       \r
+       if (info.last > info.end) {\r
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.last);\r
+               }));\r
+       }       \r
+};\r
+\r
+/**\r
+ *  Method : popup Show Hide \r
+ */\r
+$.fn.popupShow = function(options) {\r
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);\r
+       \r
+       if($("body div#" + opts.maskId).size() == 0) {\r
+               $("body").append("<div id='" + opts.maskId + "'></div>");\r
+               $("#" + opts.maskId).css({\r
+                       "position" : "absolute",\r
+                       "left"     : "0",\r
+                       "top"      : "0",\r
+                       "z-index"  : "9000",\r
+                       "background-color" : "#000",\r
+                       "display"  : "none"\r
+               });\r
+       }\r
+       \r
+       var mask_layer  = $("#" + opts.maskId);\r
+       var popup_layer = $(this);\r
+       \r
+       popup_layer.css("z-index", "9999");\r
+       \r
+       var maskHeight = $(document).height();\r
+       var maskWidth = $(window).width();\r
+       \r
+       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+       \r
+       mask_layer.fadeIn(opts.fadeSec);\r
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);\r
+       \r
+       var winH = $(window).height();\r
+       var winW = $(window).width();\r
+       \r
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+       \r
+       popup_layer.fadeIn(opts.fadeSec);\r
+       \r
+       var init_num = 0;\r
+       \r
+       if(init_num == 0) {\r
+               mask_layer.click(function() {\r
+                       $(this).hide();\r
+                       popup_layer.hide();\r
+               });\r
+               \r
+               \r
+               $("#" + opts.closeId).click( function(e) {\r
+                       e.preventDefault();\r
+                       popup_layer.popupHidden(opts.maskId);\r
+               });\r
+               \r
+               \r
+               $(window).resize( function() {\r
+                       var maskHeight = $(document).height();\r
+                       var maskWidth  = $(window).width();\r
+                       var winH       = $(window).height();\r
+                       var winW       = $(window).width();\r
+                       \r
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+                       \r
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+               });\r
+               \r
+               init_num++;\r
+       }\r
+};\r
+\r
+$.fn.popupHidden = function(maskId) {\r
+       var id = "#";\r
+       \r
+       if(maskId) {\r
+               id = id + maskId;\r
+       } else {\r
+               id = id + $.fn.popupShow.defaults.maskId; \r
+       }\r
+       \r
+       $(id).hide();\r
+       $(this).hide();\r
+};\r
+\r
+\r
+$.fn.popupShow.defaults = {\r
+       speed : "slow",\r
+       fadeLow : 0.8,\r
+       fadeSec : 100,\r
+       maskId  : "mask",\r
+       popupId : "layer-pop",\r
+       closeId : "layer-pop-close"\r
+};\r
+\r
+/**\r
+ *  Method : validate File Ext\r
+ */\r
+$.fn.isNotValidateFileExt = function(imgExts) {\r
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};\r
+       var that = this;\r
+       var target = null;\r
+\r
+       that.each(function (i, item) {\r
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';\r
+               if (filePath != "") {\r
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();\r
+                       if (!imgExts[fileExt]) {\r
+                               target = item;\r
+                               return false;\r
+                       }\r
+               }\r
+       });\r
+\r
+       return target;\r
+}      \r
+\r
+/**\r
+ *  Method : validate SD20 Password\r
+ */\r
+$.validator.addMethod("isSD20Pwd", function(value, element) {\r
+       return this.optional(element) \r
+              || $.SD.isSD20Pwd(value);\r
+}, "비밀번호를 다시 입력해 주세요.");\r
+\r
+$.SD.alterParent = function(options, event) {\r
+    var label = $(this).data('label');\r
+    \r
+    /*\r
+    if (event && event.type === 'focusin') {\r
+      label.hide();\r
+    } else if (event && event.type === 'focusout') {\r
+      label.css('opacity', options.placeholderOpacity);\r
+    }\r
+    */\r
+    \r
+    if (event && event.type !== 'keydown') {\r
+      toggleLabel(this, label);\r
+    } else {\r
+      // Use timeout to catch val() just after the key is pressed\r
+      // Using keyup is too slow.   \r
+      (function(input) {\r
+        setTimeout(function() {\r
+          toggleLabel(input, label);\r
+        }, 0);\r
+      })(this);\r
+    }\r
+    \r
+    if (event && event.type === 'focusin') {\r
+       label.hide();\r
+    }\r
+  };\r
+  \r
+  var toggleLabel = function(input, label) {\r
+    if ($(input).val()) {\r
+      label.hide();\r
+    } else {\r
+      label.show();\r
+    }\r
+  };\r
+\r
+  $.fn.stickyPlaceholders = function(options) {\r
+    var defaults = {\r
+      wrapperClass: 'sticky-placeholder-wrapper',\r
+      wrapperDisplay: 'block',\r
+      labelClass: 'sticky-placeholder-label',\r
+      placeholderAttr: 'placeholder',\r
+      dataAttr: 'data-sticky-placeholder',\r
+      placeholderColor: '#000',\r
+      placeholderOpacity: 0.5,\r
+      placeholderFocusOpacity: 0.25\r
+    };\r
+    options = $.extend(defaults, options);\r
+\r
+    return this.each(function() {\r
+      var input       = $(this),\r
+          placeholder = input.attr(options.placeholderAttr),\r
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),\r
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),\r
+          labelStyle;\r
+\r
+      // store a reference to each input's label\r
+      input.data('label', label);\r
+\r
+      // remove the placeholder attribute to avoid conflcits\r
+      input.removeAttr('placeholder');\r
+      \r
+      // If the dataAttr is set and it's not equal to the placeholderAttr\r
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {\r
+        input.attr('data-sticky-placeholder', placeholder);\r
+      }\r
+\r
+      labelStyle = {\r
+        'color': options.placeholderColor,\r
+        'cursor': 'text',\r
+        'font-family': input.css('font-family'),\r
+        'font-weight': input.css('font-weight'),\r
+        'font-size': input.css('font-size'),\r
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),\r
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),\r
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671\r
+        'opacity': options.placeholderOpacity,\r
+        'padding-left': input.css('padding-left'),\r
+        'padding-top': input.css('padding-top'),\r
+        'position': 'absolute',\r
+        'text-transform': input.css('text-transform'),\r
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)\r
+      };\r
+      label.css(labelStyle);\r
+      \r
+      // hide the placeholder if the input already has a value\r
+      if (input.val()) {\r
+        label.hide();\r
+      }\r
+\r
+      $(this).bind('keydown input focusin focusout', function(event) {\r
+        $.SD.alterParent.call(this, options, event);\r
+      });\r
+        \r
+      // prevent click/dblclick from selecting the label text\r
+      label.bind('mousedown', function(e) {\r
+        e.preventDefault();\r
+      });\r
+      \r
+      // call alterParent initially without an event to set up the wrapper elements\r
+      $.SD.alterParent.call(this, options);\r
+    });\r
+  };\r
+ \r
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {\r
+       $("#" + file_id).on("keydown", function(e) {\r
+               var that = $(this);\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.which === 9) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + after_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       $("#" + after_id).on("keydown", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + file_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+}  \r
+\r
+$.SD.closeWP = function() {\r
+       var Browser = navigator.appName;\r
+       var indexB = Browser.indexOf('Explorer');\r
+       if (indexB > 0) {\r
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;\r
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);\r
+           window.opener.focus();\r
+           if (Version >= 7) {\r
+               window.open('', '_self', '');\r
+               window.close();\r
+           }\r
+           else if (Version == 6) {\r
+               window.opener = null;\r
+               window.close();\r
+           }\r
+           else {\r
+               window.opener = '';\r
+               window.close();\r
+           }\r
+       }\r
+       else {\r
+           window.close();\r
+       }\r
+}\r
+\r
+$.SD.profileFacebook = function() {\r
+       location.replace("http://facebook.com/profile.php");\r
+}\r
+\r
+/* ------------------------------ END --------------------------------------- */\r
+window.$SD = $.SD;\r
+\r
+})(jQuery);\r
+\r
+\r
+$(document).ready(function(){\r
+//document rady Start #########################################\r
+\r
+// Top menu action Start\r
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };\r
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };\r
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };\r
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };\r
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };\r
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };\r
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };\r
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; \r
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };\r
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };\r
+\r
+$("#wrapper").on('click', 'a', function(e) {\r
+        switch($(this).attr('id')) {\r
+        case 'changeEn': onClickChangeEn(e);  break;\r
+        case 'changeZh': onClickChangeZh(e); break;\r
+        case 'changeKo': onClickChangeKo(e); break;\r
+        case 'signOut': onClickSignOut(e); break;\r
+        case 'signUp': onClickSignUp(e); break;\r
+        case 'signIn': onClickSignIn(e); break;\r
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;\r
+        case 'signOff': onClickSignOff(e); break;\r
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;\r
+        case 'deleteAccount' : onClickDeleteAccount(e); break;\r
+        }\r
+});\r
+ \r
+//Top menu action End\r
+\r
+\r
+$("#sendFacebook, #sendTwitter").click(function(e) {\r
+       e.preventDefault();\r
+       var $this = $(this);\r
+       \r
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {\r
+               var sns = $this.attr("id").substring(4).toLowerCase();\r
+               switch(sns) {\r
+               case "facebook" :\r
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";\r
+                       $("div.content img").each(function() {\r
+                               var that = $(this);\r
+                               if(that.width() > 200 && that.height() > 200) {\r
+                                       imgUrl = that.attr("src");\r
+                                       return false;\r
+                               }\r
+                       });\r
+                       \r
+                       var data = {\r
+                               app_id : $("#sd_appId").text(),\r
+                               link : copyUrl,\r
+                               picture : imgUrl,\r
+                               name : $("title").text(),\r
+                               caption : "developer.samsung.com",\r
+                               description : $("div.content p").eq(0).text(),\r
+                               redirectUri : "http://" + location.host + "/board/sns.do"\r
+                       };\r
+                       var url = "https://www.facebook.com/dialog/feed?" ;\r
+                       url += "app_id=" + data.app_id + "&" ;\r
+                       url += "link=" + data.link + "&" ;\r
+                       url += "picture=" + data.picture + "&" ;\r
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;\r
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;\r
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;\r
+                       url += "redirect_uri=" + data.redirectUri ;\r
+                       sendSNS(sns, url, 850, 600);\r
+                       break;\r
+               case "twitter" :\r
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);\r
+                       break;\r
+               }\r
+       }\r
+       \r
+       function sendSNS(sns, url, iWidth, iHeight) {\r
+               var popObj = { url : url\r
+                                    , width : iWidth\r
+                                    , height: iHeight\r
+                                    , target: sns\r
+                                    , scrollbars: "yes"\r
+                                    , resizeable: "yes"};\r
+       \r
+               $SD.popupCenter(popObj);\r
+       }\r
+})\r
+ \r
+//document rady End #########################################\r
+ });\r
+\r
+;(function(){\r
+       window.deviceImageError = function(el) {\r
+               var noImage = noImage || '/images/common/device_details_noimage.gif';\r
+               if (el.src === noImage) \r
+                       return;\r
+               el.src = noImage;\r
+       };\r
+})();\r
+\r
+function commonDownload(fileName, categoryId){\r
+       if (fileName == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownload(fileName, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLog(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLogTarget(fileFullPath, categoryId, target){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonAllShareClickCount(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+/*\r
+function layer_view(id){\r
+\r
+       var $layer = $('#'+id);\r
+       var $down  = $('.license-layer').find('a#down');\r
+\r
+       $layer.show();\r
+       $layer.find('.close, #down').click(function(){\r
+               $layer.hide();\r
+       });\r
+\r
+       function countChecked() {\r
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()\r
+       }\r
+\r
+       $(":checkbox").click(countChecked);\r
+}\r
+*/\r
diff --git a/org.tizen.guides/html/scripts/jquery.util.js b/org.tizen.guides/html/scripts/jquery.util.js
index 3fc3ad0..a8516b0 100644 (file)
--- a/org.tizen.guides/html/scripts/jquery.util.js
+++ b/org.tizen.guides/html/scripts/jquery.util.js
@@ -1,1441 +1,1441 @@
-/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
-(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
-
-
-/*! jQuery v1.7.1 jquery.com | jquery.org/license */
-(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
-f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
-{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
-
-/*
- * Metadata - jQuery plugin for parsing metadata from elements
- *
- * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- *
- * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
- *
- */
-
-/**
- * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
- * in the JSON will become a property of the element itself.
- *
- * There are three supported types of metadata storage:
- *
- *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
- *          
- *   class: Inside the class attribute, wrapped in curly braces: { }
- *   
- *   elem:  Inside a child element (e.g. a script tag). The
- *          name parameter indicates *which* element.
- *          
- * The metadata for an element is loaded the first time the element is accessed via jQuery.
- *
- * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
- * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
- * 
- * @name $.metadata.setType
- *
- * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("class")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from the class attribute
- * 
- * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("attr", "data")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a "data" attribute
- * 
- * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
- * @before $.metadata.setType("elem", "script")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a nested script element
- * 
- * @param String type The encoding type
- * @param String name The name of the attribute to be used to get metadata (optional)
- * @cat Plugins/Metadata
- * @descr Sets the type of encoding to be used when loading metadata for the first time
- * @type undefined
- * @see metadata()
- */
-
-(function($) {
-
-$.extend({
-       metadata : {
-               defaults : {
-                       type: 'class',
-                       name: 'metadata',
-                       cre: /({.*})/,
-                       single: 'metadata'
-               },
-               setType: function( type, name ){
-                       this.defaults.type = type;
-                       this.defaults.name = name;
-               },
-               get: function( elem, opts ){
-                       var settings = $.extend({},this.defaults,opts);
-                       // check for empty string in single property
-                       if ( !settings.single.length ) settings.single = 'metadata';
-                       
-                       var data = $.data(elem, settings.single);
-                       // returned cached data if it already exists
-                       if ( data ) return data;
-                       
-                       data = "{}";
-                       
-                       if ( settings.type == "class" ) {
-                               var m = settings.cre.exec( elem.className );
-                               if ( m )
-                                       data = m[1];
-                       } else if ( settings.type == "elem" ) {
-                               if( !elem.getElementsByTagName )
-                                       return undefined;
-                               var e = elem.getElementsByTagName(settings.name);
-                               if ( e.length )
-                                       data = $.trim(e[0].innerHTML);
-                       } else if ( elem.getAttribute != undefined ) {
-                               var attr = elem.getAttribute( settings.name );
-                               if ( attr )
-                                       data = attr;
-                       }
-                       
-                       if ( data.indexOf( '{' ) <0 )
-                       data = "{" + data + "}";
-                       
-                       data = eval("(" + data + ")");
-                       
-                       $.data( elem, settings.single, data );
-                       return data;
-               }
-       }
-});
-
-/**
- * Returns the metadata object for the first member of the jQuery object.
- *
- * @name metadata
- * @descr Returns element's metadata object
- * @param Object opts An object contianing settings to override the defaults
- * @type jQuery
- * @cat Plugins/Metadata
- */
-$.fn.metadata = function( opts ){
-       return $.metadata.get( this[0], opts );
-};
-
-})(jQuery);
-
-
-/**
- * jQuery Validation Plugin 1.9.0
-
- *
- * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- * http://docs.jquery.com/Plugins/Validation
- *
- * Copyright (c) 2006 - 2011 J철rn Zaefferer
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- */
-
-/**
- * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
- */
-
-(function($) {
-
-$.extend($.fn, {
-       // http://docs.jquery.com/Plugins/Validation/validate
-       validate: function( options ) {
-
-               // if nothing is selected, return nothing; can't chain anyway
-               if (!this.length) {
-                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
-                       return;
-               }
-
-               // check if a validator for this form was already created
-               var validator = $.data(this[0], 'validator');
-               if ( validator ) {
-                       return validator;
-               }
-
-               // Add novalidate tag if HTML5.
-               this.attr('novalidate', 'novalidate');
-
-               validator = new $.validator( options, this[0] );
-               $.data(this[0], 'validator', validator);
-
-               if ( validator.settings.onsubmit ) {
-
-                       var inputsAndButtons = this.find("input, button");
-
-                       // allow suppresing validation by adding a cancel class to the submit button
-                       inputsAndButtons.filter(".cancel").click(function () {
-                               validator.cancelSubmit = true;
-                       });
-
-                       // when a submitHandler is used, capture the submitting button
-                       if (validator.settings.submitHandler) {
-                               inputsAndButtons.filter(":submit").click(function () {
-                                       validator.submitButton = this;
-                               });
-                       }
-
-                       // validate the form on submit
-                       this.submit( function( event ) {
-                               if ( validator.settings.debug )
-                                       // prevent form submit to be able to see console output
-                                       event.preventDefault();
-
-                               function handle() {
-                                       if ( validator.settings.submitHandler ) {
-                                               if (validator.submitButton) {
-                                                       // insert a hidden input as a replacement for the missing submit button
-                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
-                                               }
-                                               validator.settings.submitHandler.call( validator, validator.currentForm );
-                                               if (validator.submitButton) {
-                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
-                                                       hidden.remove();
-                                               }
-                                               return false;
-                                       }
-                                       return true;
-                               }
-
-                               // prevent submit for invalid forms or custom submit handlers
-                               if ( validator.cancelSubmit ) {
-                                       validator.cancelSubmit = false;
-                                       return handle();
-                               }
-                               if ( validator.form() ) {
-                                       if ( validator.pendingRequest ) {
-                                               validator.formSubmitted = true;
-                                               return false;
-                                       }
-                                       return handle();
-                               } else {
-                                       validator.focusInvalid();
-                                       return false;
-                               }
-                       });
-               }
-
-               return validator;
-       },
-       // http://docs.jquery.com/Plugins/Validation/valid
-       valid: function() {
-        if ( $(this[0]).is('form')) {
-            return this.validate().form();
-        } else {
-            var valid = true;
-            var validator = $(this[0].form).validate();
-            this.each(function() {
-                               valid &= validator.element(this);
-            });
-            return valid;
-        }
-    },
-       // attributes: space seperated list of attributes to retrieve and remove
-       removeAttrs: function(attributes) {
-               var result = {},
-                       $element = this;
-               $.each(attributes.split(/\s/), function(index, value) {
-                       result[value] = $element.attr(value);
-                       $element.removeAttr(value);
-               });
-               return result;
-       },
-       // http://docs.jquery.com/Plugins/Validation/rules
-       rules: function(command, argument) {
-               var element = this[0];
-
-               if (command) {
-                       var settings = $.data(element.form, 'validator').settings;
-                       var staticRules = settings.rules;
-                       var existingRules = $.validator.staticRules(element);
-                       switch(command) {
-                       case "add":
-                               $.extend(existingRules, $.validator.normalizeRule(argument));
-                               staticRules[element.name] = existingRules;
-                               if (argument.messages)
-                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
-                               break;
-                       case "remove":
-                               if (!argument) {
-                                       delete staticRules[element.name];
-                                       return existingRules;
-                               }
-                               var filtered = {};
-                               $.each(argument.split(/\s/), function(index, method) {
-                                       filtered[method] = existingRules[method];
-                                       delete existingRules[method];
-                               });
-                               return filtered;
-                       }
-               }
-
-               var data = $.validator.normalizeRules(
-               $.extend(
-                       {},
-                       $.validator.metadataRules(element),
-                       $.validator.classRules(element),
-                       $.validator.attributeRules(element),
-                       $.validator.staticRules(element)
-               ), element);
-
-               // make sure required is at front
-               if (data.required) {
-                       var param = data.required;
-                       delete data.required;
-                       data = $.extend({required: param}, data);
-               }
-
-               return data;
-       }
-});
-
-// Custom selectors
-$.extend($.expr[":"], {
-       // http://docs.jquery.com/Plugins/Validation/blank
-       blank: function(a) {return !$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/filled
-       filled: function(a) {return !!$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/unchecked
-       unchecked: function(a) {return !a.checked;}
-});
-
-// constructor for validator
-$.validator = function( options, form ) {
-       this.settings = $.extend( true, {}, $.validator.defaults, options );
-       this.currentForm = form;
-       this.init();
-};
-
-$.validator.format = function(source, params) {
-       if ( arguments.length == 1 )
-               return function() {
-                       var args = $.makeArray(arguments);
-                       args.unshift(source);
-                       return $.validator.format.apply( this, args );
-               };
-       if ( arguments.length > 2 && params.constructor != Array  ) {
-               params = $.makeArray(arguments).slice(1);
-       }
-       if ( params.constructor != Array ) {
-               params = [ params ];
-       }
-       $.each(params, function(i, n) {
-               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
-       });
-       return source;
-};
-
-$.extend($.validator, {
-
-       defaults: {
-               messages: {},
-               groups: {},
-               rules: {},
-               errorClass: "error",
-               validClass: "valid",
-               errorElement: "label",
-               focusInvalid: true,
-               errorContainer: $( [] ),
-               errorLabelContainer: $( [] ),
-               onsubmit: true,
-               ignore: ":hidden",
-               ignoreTitle: false,
-               onfocusin: function(element, event) {
-                       this.lastActive = element;
-
-                       // hide error label and remove error class on focus if enabled
-                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
-                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
-                               this.addWrapper(this.errorsFor(element)).hide();
-                       }
-               },
-               onfocusout: function(element, event) {
-                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
-                               this.element(element);
-                       }
-               },
-               onkeyup: function(element, event) {
-                       if ( element.name in this.submitted || element == this.lastElement ) {
-                               this.element(element);
-                       }
-               },
-               onclick: function(element, event) {
-                       // click on selects, radiobuttons and checkboxes
-                       if ( element.name in this.submitted )
-                               this.element(element);
-                       // or option elements, check parent select in that case
-                       else if (element.parentNode.name in this.submitted)
-                               this.element(element.parentNode);
-               },
-               highlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
-                       } else {
-                               $(element).addClass(errorClass).removeClass(validClass);
-                       }
-               },
-               unhighlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
-                       } else {
-                               $(element).removeClass(errorClass).addClass(validClass);
-                       }
-               }
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
-       setDefaults: function(settings) {
-               $.extend( $.validator.defaults, settings );
-       },
-
-       messages: {
-               required: "This field is required.",
-               remote: "Please fix this field.",
-               email: "Please enter a valid email address.",
-               url: "Please enter a valid URL.",
-               date: "Please enter a valid date.",
-               dateISO: "Please enter a valid date (ISO).",
-               number: "Please enter a valid number.",
-               digits: "Please enter only digits.",
-               creditcard: "Please enter a valid credit card number.",
-               equalTo: "Please enter the same value again.",
-               accept: "Please enter a value with a valid extension.",
-               maxlength: $.validator.format("Please enter no more than {0} characters."),
-               minlength: $.validator.format("Please enter at least {0} characters."),
-               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
-               range: $.validator.format("Please enter a value between {0} and {1}."),
-               max: $.validator.format("Please enter a value less than or equal to {0}."),
-               min: $.validator.format("Please enter a value greater than or equal to {0}.")
-       },
-
-       autoCreateRanges: false,
-
-       prototype: {
-
-               init: function() {
-                       this.labelContainer = $(this.settings.errorLabelContainer);
-                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
-                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
-                       this.submitted = {};
-                       this.valueCache = {};
-                       this.pendingRequest = 0;
-                       this.pending = {};
-                       this.invalid = {};
-                       this.reset();
-
-                       var groups = (this.groups = {});
-                       $.each(this.settings.groups, function(key, value) {
-                               $.each(value.split(/\s/), function(index, name) {
-                                       groups[name] = key;
-                               });
-                       });
-                       var rules = this.settings.rules;
-                       $.each(rules, function(key, value) {
-                               rules[key] = $.validator.normalizeRule(value);
-                       });
-
-                       function delegate(event) {
-                               var validator = $.data(this[0].form, "validator"),
-                                       eventType = "on" + event.type.replace(/^validate/, "");
-                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
-                       }
-                       $(this.currentForm)
-                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
-                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
-                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
-                                               "[type='week'], [type='time'], [type='datetime-local'], " +
-                                               "[type='range'], [type='color'] ",
-                                               "focusin focusout keyup", delegate)
-                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
-
-                       if (this.settings.invalidHandler)
-                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/form
-               form: function() {
-                       this.checkForm();
-                       $.extend(this.submitted, this.errorMap);
-                       this.invalid = $.extend({}, this.errorMap);
-                       if (!this.valid())
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                       this.showErrors();
-                       return this.valid();
-               },
-
-               // 원본소스
-               /*
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               this.check( elements[i] );
-                       }
-                       return this.valid();
-               },
-               */
-
-               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
-                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
-                                               this.check( this.findByName( elements[i].name )[cnt] );
-                                       }
-                               } else {
-                                       this.check( elements[i] );
-                               }
-                       }
-                       return this.valid();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/element
-               element: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-                       this.lastElement = element;
-                       this.prepareElement( element );
-                       this.currentElements = $(element);
-                       var result = this.check( element );
-                       if ( result ) {
-                               delete this.invalid[element.name];
-                       } else {
-                               this.invalid[element.name] = true;
-                       }
-                       if ( !this.numberOfInvalids() ) {
-                               // Hide error containers on last error
-                               this.toHide = this.toHide.add( this.containers );
-                       }
-                       this.showErrors();
-                       return result;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
-               showErrors: function(errors) {
-                       if(errors) {
-                               // add items to error list and map
-                               $.extend( this.errorMap, errors );
-                               this.errorList = [];
-                               for ( var name in errors ) {
-                                       this.errorList.push({
-                                               message: errors[name],
-                                               element: this.findByName(name)[0]
-                                       });
-                               }
-                               // remove items from success list
-                               this.successList = $.grep( this.successList, function(element) {
-                                       return !(element.name in errors);
-                               });
-                       }
-                       this.settings.showErrors
-                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
-                               : this.defaultShowErrors();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
-               resetForm: function() {
-                       if ( $.fn.resetForm )
-                               $( this.currentForm ).resetForm();
-                       this.submitted = {};
-                       this.lastElement = null;
-                       this.prepareForm();
-                       this.hideErrors();
-                       this.elements().removeClass( this.settings.errorClass );
-               },
-
-               numberOfInvalids: function() {
-                       return this.objectLength(this.invalid);
-               },
-
-               objectLength: function( obj ) {
-                       var count = 0;
-                       for ( var i in obj )
-                               count++;
-                       return count;
-               },
-
-               hideErrors: function() {
-                       this.addWrapper( this.toHide ).hide();
-               },
-
-               valid: function() {
-                       return this.size() == 0;
-               },
-
-               size: function() {
-                       return this.errorList.length;
-               },
-
-               focusInvalid: function() {
-                       if( this.settings.focusInvalid ) {
-                               try {
-                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
-                                       .filter(":visible")
-                                       .focus()
-                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
-                                       .trigger("focusin");
-                               } catch(e) {
-                                       // ignore IE throwing errors when focusing hidden elements
-                               }
-                       }
-               },
-
-               findLastActive: function() {
-                       var lastActive = this.lastActive;
-                       return lastActive && $.grep(this.errorList, function(n) {
-                               return n.element.name == lastActive.name;
-                       }).length == 1 && lastActive;
-               },
-
-               elements: function() {
-                       var validator = this,
-                               rulesCache = {};
-
-                       // select all valid inputs inside the form (no submit or reset buttons)
-                       return $(this.currentForm)
-                       .find("input, select, textarea")
-                       .not(":submit, :reset, :image, [disabled]")
-                       .not( this.settings.ignore )
-                       .filter(function() {
-                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
-
-                               // select only the first element for each name, and only those with rules specified
-                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
-                                       return false;
-
-                               rulesCache[this.name] = true;
-                               return true;
-                       });
-               },
-
-               clean: function( selector ) {
-                       return $( selector )[0];
-               },
-
-               errors: function() {
-                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
-               },
-
-               reset: function() {
-                       this.successList = [];
-                       this.errorList = [];
-                       this.errorMap = {};
-                       this.toShow = $([]);
-                       this.toHide = $([]);
-                       this.currentElements = $([]);
-               },
-
-               prepareForm: function() {
-                       this.reset();
-                       this.toHide = this.errors().add( this.containers );
-               },
-
-               prepareElement: function( element ) {
-                       this.reset();
-                       this.toHide = this.errorsFor(element);
-               },
-
-               check: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-
-                       var rules = $(element).rules();
-                       var dependencyMismatch = false;
-                       for (var method in rules ) {
-                               var rule = { method: method, parameters: rules[method] };
-                               try {
-                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
-
-                                       // if a method indicates that the field is optional and therefore valid,
-                                       // don't mark it as valid when there are no other rules
-                                       if ( result == "dependency-mismatch" ) {
-                                               dependencyMismatch = true;
-                                               continue;
-                                       }
-                                       dependencyMismatch = false;
-
-                                       if ( result == "pending" ) {
-                                               this.toHide = this.toHide.not( this.errorsFor(element) );
-                                               return;
-                                       }
-
-                                       if( !result ) {
-                                               this.formatAndAdd( element, rule );
-                                               return false;
-                                       }
-                               } catch(e) {
-                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
-                                                + ", check the '" + rule.method + "' method", e);
-                                       throw e;
-                               }
-                       }
-                       if (dependencyMismatch)
-                               return;
-                       if ( this.objectLength(rules) )
-                               this.successList.push(element);
-                       return true;
-               },
-
-               // return the custom message for the given element and validation method
-               // specified in the element's "messages" metadata
-               customMetaMessage: function(element, method) {
-                       if (!$.metadata)
-                               return;
-
-                       var meta = this.settings.meta
-                               ? $(element).metadata()[this.settings.meta]
-                               : $(element).metadata();
-
-                       return meta && meta.messages && meta.messages[method];
-               },
-
-               // return the custom message for the given element name and validation method
-               customMessage: function( name, method ) {
-                       var m = this.settings.messages[name];
-                       return m && (m.constructor == String
-                               ? m
-                               : m[method]);
-               },
-
-               // return the first defined argument, allowing empty strings
-               findDefined: function() {
-                       for(var i = 0; i < arguments.length; i++) {
-                               if (arguments[i] !== undefined)
-                                       return arguments[i];
-                       }
-                       return undefined;
-               },
-
-               defaultMessage: function( element, method) {
-                       return this.findDefined(
-                               this.customMessage( element.name, method ),
-                               this.customMetaMessage( element, method ),
-                               // title is never undefined, so handle empty string as undefined
-                               !this.settings.ignoreTitle && element.title || undefined,
-                               $.validator.messages[method],
-                               "<strong>Warning: No message defined for " + element.name + "</strong>"
-                       );
-               },
-
-               formatAndAdd: function( element, rule ) {
-                       var message = this.defaultMessage( element, rule.method ),
-                               theregex = /\$?\{(\d+)\}/g;
-                       if ( typeof message == "function" ) {
-                               message = message.call(this, rule.parameters, element);
-                       } else if (theregex.test(message)) {
-                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
-                       }
-                       this.errorList.push({
-                               message: message,
-                               element: element
-                       });
-
-                       this.errorMap[element.name] = message;
-                       this.submitted[element.name] = message;
-               },
-
-               addWrapper: function(toToggle) {
-                       if ( this.settings.wrapper )
-                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
-                       return toToggle;
-               },
-
-               defaultShowErrors: function() {
-                       for ( var i = 0; this.errorList[i]; i++ ) {
-                               var error = this.errorList[i];
-                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
-                               this.showLabel( error.element, error.message );
-                       }
-                       if( this.errorList.length ) {
-                               this.toShow = this.toShow.add( this.containers );
-                       }
-                       if (this.settings.success) {
-                               for ( var i = 0; this.successList[i]; i++ ) {
-                                       this.showLabel( this.successList[i] );
-                               }
-                       }
-                       if (this.settings.unhighlight) {
-                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
-                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
-                               }
-                       }
-                       this.toHide = this.toHide.not( this.toShow );
-                       this.hideErrors();
-                       this.addWrapper( this.toShow ).show();
-               },
-
-               validElements: function() {
-                       return this.currentElements.not(this.invalidElements());
-               },
-
-               invalidElements: function() {
-                       return $(this.errorList).map(function() {
-                               return this.element;
-                       });
-               },
-
-               showLabel: function(element, message) {
-                       var label = this.errorsFor( element );
-                       if ( label.length ) {
-                               // refresh error/success class
-                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
-
-                               // check if we have a generated label, replace the message then
-                               label.attr("generated") && label.html(message);
-                       } else {
-                               // create label
-                               label = $("<" + this.settings.errorElement + "/>")
-                                       .attr({"for":  this.idOrName(element), generated: true})
-                                       .addClass(this.settings.errorClass)
-                                       .html(message || "");
-                               if ( this.settings.wrapper ) {
-                                       // make sure the element is visible, even in IE
-                                       // actually showing the wrapped element is handled elsewhere
-                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
-                               }
-                               if ( !this.labelContainer.append(label).length )
-                                       this.settings.errorPlacement
-                                               ? this.settings.errorPlacement(label, $(element) )
-                                               : label.insertAfter(element);
-                       }
-                       if ( !message && this.settings.success ) {
-                               label.text("");
-                               typeof this.settings.success == "string"
-                                       ? label.addClass( this.settings.success )
-                                       : this.settings.success( label );
-                       }
-                       this.toShow = this.toShow.add(label);
-               },
-
-               errorsFor: function(element) {
-                       var name = this.idOrName(element);
-               return this.errors().filter(function() {
-                               return $(this).attr('for') == name;
-                       });
-               },
-
-               idOrName: function(element) {
-                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
-               },
-
-               validationTargetFor: function(element) {
-                       // if radio/checkbox, validate first element in group instead
-                       if (this.checkable(element)) {
-                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
-                       }
-                       return element;
-               },
-
-               checkable: function( element ) {
-                       return /radio|checkbox/i.test(element.type);
-               },
-
-               findByName: function( name ) {
-                       // select by name and filter by form for performance over form.find("[name=...]")
-                       var form = this.currentForm;
-                       return $(document.getElementsByName(name)).map(function(index, element) {
-                               return element.form == form && element.name == name && element  || null;
-                       });
-               },
-
-               getLength: function(value, element) {
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               return $("option:selected", element).length;
-                       case 'input':
-                               if( this.checkable( element) )
-                                       return this.findByName(element.name).filter(':checked').length;
-                       }
-                       return value.length;
-               },
-
-               depend: function(param, element) {
-                       return this.dependTypes[typeof param]
-                               ? this.dependTypes[typeof param](param, element)
-                               : true;
-               },
-
-               dependTypes: {
-                       "boolean": function(param, element) {
-                               return param;
-                       },
-                       "string": function(param, element) {
-                               return !!$(param, element.form).length;
-                       },
-                       "function": function(param, element) {
-                               return param(element);
-                       }
-               },
-
-               optional: function(element) {
-                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
-               },
-
-               startRequest: function(element) {
-                       if (!this.pending[element.name]) {
-                               this.pendingRequest++;
-                               this.pending[element.name] = true;
-                       }
-               },
-
-               stopRequest: function(element, valid) {
-                       this.pendingRequest--;
-                       // sometimes synchronization fails, make sure pendingRequest is never < 0
-                       if (this.pendingRequest < 0)
-                               this.pendingRequest = 0;
-                       delete this.pending[element.name];
-                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
-                               $(this.currentForm).submit();
-                               this.formSubmitted = false;
-                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                               this.formSubmitted = false;
-                       }
-               },
-
-               previousValue: function(element) {
-                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
-                               old: null,
-                               valid: true,
-                               message: this.defaultMessage( element, "remote" )
-                       });
-               }
-
-       },
-
-       classRuleSettings: {
-               required: {required: true},
-               email: {email: true},
-               url: {url: true},
-               date: {date: true},
-               dateISO: {dateISO: true},
-               dateDE: {dateDE: true},
-               number: {number: true},
-               numberDE: {numberDE: true},
-               digits: {digits: true},
-               creditcard: {creditcard: true}
-       },
-
-       addClassRules: function(className, rules) {
-               className.constructor == String ?
-                       this.classRuleSettings[className] = rules :
-                       $.extend(this.classRuleSettings, className);
-       },
-
-       classRules: function(element) {
-               var rules = {};
-               var classes = $(element).attr('class');
-               classes && $.each(classes.split(' '), function() {
-                       if (this in $.validator.classRuleSettings) {
-                               $.extend(rules, $.validator.classRuleSettings[this]);
-                       }
-               });
-               return rules;
-       },
-
-       attributeRules: function(element) {
-               var rules = {};
-               var $element = $(element);
-
-               for (var method in $.validator.methods) {
-                       var value;
-                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
-                       if (method === 'required' && typeof $.fn.prop === 'function') {
-                               value = $element.prop(method);
-                       } else {
-                               value = $element.attr(method);
-                       }
-                       if (value) {
-                               rules[method] = value;
-                       } else if ($element[0].getAttribute("type") === method) {
-                               rules[method] = true;
-                       }
-               }
-
-               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
-               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
-                       delete rules.maxlength;
-               }
-
-               return rules;
-       },
-
-       metadataRules: function(element) {
-               if (!$.metadata) return {};
-
-               var meta = $.data(element.form, 'validator').settings.meta;
-               return meta ?
-                       $(element).metadata()[meta] :
-                       $(element).metadata();
-       },
-
-       staticRules: function(element) {
-               var rules = {};
-               var validator = $.data(element.form, 'validator');
-               if (validator.settings.rules) {
-                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
-               }
-               return rules;
-       },
-
-       normalizeRules: function(rules, element) {
-               // handle dependency check
-               $.each(rules, function(prop, val) {
-                       // ignore rule when param is explicitly false, eg. required:false
-                       if (val === false) {
-                               delete rules[prop];
-                               return;
-                       }
-                       if (val.param || val.depends) {
-                               var keepRule = true;
-                               switch (typeof val.depends) {
-                                       case "string":
-                                               keepRule = !!$(val.depends, element.form).length;
-                                               break;
-                                       case "function":
-                                               keepRule = val.depends.call(element, element);
-                                               break;
-                               }
-                               if (keepRule) {
-                                       rules[prop] = val.param !== undefined ? val.param : true;
-                               } else {
-                                       delete rules[prop];
-                               }
-                       }
-               });
-
-               // evaluate parameters
-               $.each(rules, function(rule, parameter) {
-                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
-               });
-
-               // clean number parameters
-               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
-                       if (rules[this]) {
-                               rules[this] = Number(rules[this]);
-                       }
-               });
-               $.each(['rangelength', 'range'], function() {
-                       if (rules[this]) {
-                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
-                       }
-               });
-
-               if ($.validator.autoCreateRanges) {
-                       // auto-create ranges
-                       if (rules.min && rules.max) {
-                               rules.range = [rules.min, rules.max];
-                               delete rules.min;
-                               delete rules.max;
-                       }
-                       if (rules.minlength && rules.maxlength) {
-                               rules.rangelength = [rules.minlength, rules.maxlength];
-                               delete rules.minlength;
-                               delete rules.maxlength;
-                       }
-               }
-
-               // To support custom messages in metadata ignore rule methods titled "messages"
-               if (rules.messages) {
-                       delete rules.messages;
-               }
-
-               return rules;
-       },
-
-       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
-       normalizeRule: function(data) {
-               if( typeof data == "string" ) {
-                       var transformed = {};
-                       $.each(data.split(/\s/), function() {
-                               transformed[this] = true;
-                       });
-                       data = transformed;
-               }
-               return data;
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
-       addMethod: function(name, method, message) {
-               $.validator.methods[name] = method;
-               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
-               if (method.length < 3) {
-                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
-               }
-       },
-
-       methods: {
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/required
-               required: function(value, element, param) {
-                       // check if dependency is met
-                       if ( !this.depend(param, element) )
-                               return "dependency-mismatch";
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               // could be an array for select-multiple or a string, both are fine this way
-                               var val = $(element).val();
-                               return val && val.length > 0;
-                       case 'input':
-                               if ( this.checkable(element) )
-                                       return this.getLength(value, element) > 0;
-                       default:
-                               return $.trim(value).length > 0;
-                       }
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/remote
-               remote: function(value, element, param) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-
-                       var previous = this.previousValue(element);
-                       if (!this.settings.messages[element.name] )
-                               this.settings.messages[element.name] = {};
-                       previous.originalMessage = this.settings.messages[element.name].remote;
-                       this.settings.messages[element.name].remote = previous.message;
-
-                       param = typeof param == "string" && {url:param} || param;
-
-                       if ( this.pending[element.name] ) {
-                               return "pending";
-                       }
-                       if ( previous.old === value ) {
-                               return previous.valid;
-                       }
-
-                       previous.old = value;
-                       var validator = this;
-                       this.startRequest(element);
-                       var data = {};
-                       data[element.name] = value;
-                       $.ajax($.extend(true, {
-                               url: param,
-                               mode: "abort",
-                               port: "validate" + element.name,
-                               dataType: "json",
-                               data: data,
-                               success: function(response) {
-                                       validator.settings.messages[element.name].remote = previous.originalMessage;
-                                       var valid = response === true;
-                                       if ( valid ) {
-                                               var submitted = validator.formSubmitted;
-                                               validator.prepareElement(element);
-                                               validator.formSubmitted = submitted;
-                                               validator.successList.push(element);
-                                               validator.showErrors();
-                                       } else {
-                                               var errors = {};
-                                               var message = response || validator.defaultMessage( element, "remote" );
-                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
-                                               validator.showErrors(errors);
-                                       }
-                                       previous.valid = valid;
-                                       validator.stopRequest(element, valid);
-                               }
-                       }, param));
-                       return "pending";
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
-               minlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
-               maxlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
-               rangelength: function(value, element, param) {
-                       var length = this.getLength($.trim(value), element);
-                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/min
-               min: function( value, element, param ) {
-                       return this.optional(element) || value >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/max
-               max: function( value, element, param ) {
-                       return this.optional(element) || value <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/range
-               range: function( value, element, param ) {
-                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/email
-               email: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
-                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/url
-               url: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
-                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/date
-               date: function(value, element) {
-                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
-               dateISO: function(value, element) {
-                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/number
-               number: function(value, element) {
-                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/digits
-               digits: function(value, element) {
-                       return this.optional(element) || /^\d+$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
-               // based on http://en.wikipedia.org/wiki/Luhn
-               creditcard: function(value, element) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-                       // accept only spaces, digits and dashes
-                       if (/[^0-9 -]+/.test(value))
-                               return false;
-                       var nCheck = 0,
-                               nDigit = 0,
-                               bEven = false;
-
-                       value = value.replace(/\D/g, "");
-
-                       for (var n = value.length - 1; n >= 0; n--) {
-                               var cDigit = value.charAt(n);
-                               var nDigit = parseInt(cDigit, 10);
-                               if (bEven) {
-                                       if ((nDigit *= 2) > 9)
-                                               nDigit -= 9;
-                               }
-                               nCheck += nDigit;
-                               bEven = !bEven;
-                       }
-
-                       return (nCheck % 10) == 0;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/accept
-               accept: function(value, element, param) {
-                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
-                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
-               equalTo: function(value, element, param) {
-                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
-                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
-                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
-                               $(element).valid();
-                       });
-                       return value == target.val();
-               }
-
-       }
-
-});
-
-// deprecated, use $.validator.format instead
-$.format = $.validator.format;
-
-})(jQuery);
-
-// ajax mode: abort
-// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
-// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
-;(function($) {
-       var pendingRequests = {};
-       // Use a prefilter if available (1.5+)
-       if ( $.ajaxPrefilter ) {
-               $.ajaxPrefilter(function(settings, _, xhr) {
-                       var port = settings.port;
-                       if (settings.mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               pendingRequests[port] = xhr;
-                       }
-               });
-       } else {
-               // Proxy ajax
-               var ajax = $.ajax;
-               $.ajax = function(settings) {
-                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
-                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
-                       if (mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               return (pendingRequests[port] = ajax.apply(this, arguments));
-                       }
-                       return ajax.apply(this, arguments);
-               };
-       }
-})(jQuery);
-
-// provides cross-browser focusin and focusout events
-// IE has native support, in other browsers, use event caputuring (neither bubbles)
-
-// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
-// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
-;(function($) {
-       // only implement if not provided by jQuery core (since 1.4)
-       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
-       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
-               $.each({
-                       focus: 'focusin',
-                       blur: 'focusout'
-               }, function( original, fix ){
-                       $.event.special[fix] = {
-                               setup:function() {
-                                       this.addEventListener( original, handler, true );
-                               },
-                               teardown:function() {
-                                       this.removeEventListener( original, handler, true );
-                               },
-                               handler: function(e) {
-                                       arguments[0] = $.event.fix(e);
-                                       arguments[0].type = fix;
-                                       return $.event.handle.apply(this, arguments);
-                               }
-                       };
-                       function handler(e) {
-                               e = $.event.fix(e);
-                               e.type = fix;
-                               return $.event.handle.call(this, e);
-                       }
-               });
-       };
-       $.extend($.fn, {
-               validateDelegate: function(delegate, type, handler) {
-                       return this.bind(type, function(event) {
-                               var target = $(event.target);
-                               if (target.is(delegate)) {
-                                       return handler.apply(target, arguments);
-                               }
-                       });
-               }
-       });
-})(jQuery);
-
-/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
- * Licensed under the MIT License (LICENSE.txt).
- *
- * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
- * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
- * Thanks to: Seamus Leahy for adding deltaX and deltaY
- *
- * Version: 3.0.6
- * 
- * Requires: 1.2.2+
- */
-
-(function($) {
-
-var types = ['DOMMouseScroll', 'mousewheel'];
-
-if ($.event.fixHooks) {
-    for ( var i=types.length; i; ) {
-        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
-    }
-}
-
-$.event.special.mousewheel = {
-    setup: function() {
-        if ( this.addEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.addEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = handler;
-        }
-    },
-    
-    teardown: function() {
-        if ( this.removeEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.removeEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = null;
-        }
-    }
-};
-
-$.fn.extend({
-    mousewheel: function(fn) {
-        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-    },
-    
-    unmousewheel: function(fn) {
-        return this.unbind("mousewheel", fn);
-    }
-});
-
-
-function handler(event) {
-    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
-    event = $.event.fix(orgEvent);
-    event.type = "mousewheel";
-    
-    // Old school scrollwheel delta
-    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
-    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
-    
-    // New school multidimensional scroll (touchpads) deltas
-    deltaY = delta;
-    
-    // Gecko
-    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
-        deltaY = 0;
-        deltaX = -1*delta;
-    }
-    
-    // Webkit
-    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
-    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
-    
-    // Add event and delta to the front of the arguments
-    args.unshift(event, delta, deltaX, deltaY);
-    
-    return ($.event.dispatch || $.event.handle).apply(this, args);
-}
-
-})(jQuery);
-
-/*
- * jScrollPane - v2.0.0beta12 - 2012-07-24
- * http://jscrollpane.kelvinluck.com/
- *
- * Copyright (c) 2010 Kelvin Luck
- * Dual licensed under the MIT and GPL licenses.
- */
-(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
-if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
-}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */\r
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);\r
+\r
+\r
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */\r
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};\r
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()\r
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);\r
+\r
+/*\r
+ * Metadata - jQuery plugin for parsing metadata from elements\r
+ *\r
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ *\r
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $\r
+ *\r
+ */\r
+\r
+/**\r
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property\r
+ * in the JSON will become a property of the element itself.\r
+ *\r
+ * There are three supported types of metadata storage:\r
+ *\r
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.\r
+ *          \r
+ *   class: Inside the class attribute, wrapped in curly braces: { }\r
+ *   \r
+ *   elem:  Inside a child element (e.g. a script tag). The\r
+ *          name parameter indicates *which* element.\r
+ *          \r
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.\r
+ *\r
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements\r
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.\r
+ * \r
+ * @name $.metadata.setType\r
+ *\r
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("class")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from the class attribute\r
+ * \r
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("attr", "data")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a "data" attribute\r
+ * \r
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>\r
+ * @before $.metadata.setType("elem", "script")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a nested script element\r
+ * \r
+ * @param String type The encoding type\r
+ * @param String name The name of the attribute to be used to get metadata (optional)\r
+ * @cat Plugins/Metadata\r
+ * @descr Sets the type of encoding to be used when loading metadata for the first time\r
+ * @type undefined\r
+ * @see metadata()\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend({\r
+       metadata : {\r
+               defaults : {\r
+                       type: 'class',\r
+                       name: 'metadata',\r
+                       cre: /({.*})/,\r
+                       single: 'metadata'\r
+               },\r
+               setType: function( type, name ){\r
+                       this.defaults.type = type;\r
+                       this.defaults.name = name;\r
+               },\r
+               get: function( elem, opts ){\r
+                       var settings = $.extend({},this.defaults,opts);\r
+                       // check for empty string in single property\r
+                       if ( !settings.single.length ) settings.single = 'metadata';\r
+                       \r
+                       var data = $.data(elem, settings.single);\r
+                       // returned cached data if it already exists\r
+                       if ( data ) return data;\r
+                       \r
+                       data = "{}";\r
+                       \r
+                       if ( settings.type == "class" ) {\r
+                               var m = settings.cre.exec( elem.className );\r
+                               if ( m )\r
+                                       data = m[1];\r
+                       } else if ( settings.type == "elem" ) {\r
+                               if( !elem.getElementsByTagName )\r
+                                       return undefined;\r
+                               var e = elem.getElementsByTagName(settings.name);\r
+                               if ( e.length )\r
+                                       data = $.trim(e[0].innerHTML);\r
+                       } else if ( elem.getAttribute != undefined ) {\r
+                               var attr = elem.getAttribute( settings.name );\r
+                               if ( attr )\r
+                                       data = attr;\r
+                       }\r
+                       \r
+                       if ( data.indexOf( '{' ) <0 )\r
+                       data = "{" + data + "}";\r
+                       \r
+                       data = eval("(" + data + ")");\r
+                       \r
+                       $.data( elem, settings.single, data );\r
+                       return data;\r
+               }\r
+       }\r
+});\r
+\r
+/**\r
+ * Returns the metadata object for the first member of the jQuery object.\r
+ *\r
+ * @name metadata\r
+ * @descr Returns element's metadata object\r
+ * @param Object opts An object contianing settings to override the defaults\r
+ * @type jQuery\r
+ * @cat Plugins/Metadata\r
+ */\r
+$.fn.metadata = function( opts ){\r
+       return $.metadata.get( this[0], opts );\r
+};\r
+\r
+})(jQuery);\r
+\r
+\r
+/**\r
+ * jQuery Validation Plugin 1.9.0\r
+\r
+ *\r
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/\r
+ * http://docs.jquery.com/Plugins/Validation\r
+ *\r
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ */\r
+\r
+/**\r
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend($.fn, {\r
+       // http://docs.jquery.com/Plugins/Validation/validate\r
+       validate: function( options ) {\r
+\r
+               // if nothing is selected, return nothing; can't chain anyway\r
+               if (!this.length) {\r
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );\r
+                       return;\r
+               }\r
+\r
+               // check if a validator for this form was already created\r
+               var validator = $.data(this[0], 'validator');\r
+               if ( validator ) {\r
+                       return validator;\r
+               }\r
+\r
+               // Add novalidate tag if HTML5.\r
+               this.attr('novalidate', 'novalidate');\r
+\r
+               validator = new $.validator( options, this[0] );\r
+               $.data(this[0], 'validator', validator);\r
+\r
+               if ( validator.settings.onsubmit ) {\r
+\r
+                       var inputsAndButtons = this.find("input, button");\r
+\r
+                       // allow suppresing validation by adding a cancel class to the submit button\r
+                       inputsAndButtons.filter(".cancel").click(function () {\r
+                               validator.cancelSubmit = true;\r
+                       });\r
+\r
+                       // when a submitHandler is used, capture the submitting button\r
+                       if (validator.settings.submitHandler) {\r
+                               inputsAndButtons.filter(":submit").click(function () {\r
+                                       validator.submitButton = this;\r
+                               });\r
+                       }\r
+\r
+                       // validate the form on submit\r
+                       this.submit( function( event ) {\r
+                               if ( validator.settings.debug )\r
+                                       // prevent form submit to be able to see console output\r
+                                       event.preventDefault();\r
+\r
+                               function handle() {\r
+                                       if ( validator.settings.submitHandler ) {\r
+                                               if (validator.submitButton) {\r
+                                                       // insert a hidden input as a replacement for the missing submit button\r
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);\r
+                                               }\r
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );\r
+                                               if (validator.submitButton) {\r
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced\r
+                                                       hidden.remove();\r
+                                               }\r
+                                               return false;\r
+                                       }\r
+                                       return true;\r
+                               }\r
+\r
+                               // prevent submit for invalid forms or custom submit handlers\r
+                               if ( validator.cancelSubmit ) {\r
+                                       validator.cancelSubmit = false;\r
+                                       return handle();\r
+                               }\r
+                               if ( validator.form() ) {\r
+                                       if ( validator.pendingRequest ) {\r
+                                               validator.formSubmitted = true;\r
+                                               return false;\r
+                                       }\r
+                                       return handle();\r
+                               } else {\r
+                                       validator.focusInvalid();\r
+                                       return false;\r
+                               }\r
+                       });\r
+               }\r
+\r
+               return validator;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/valid\r
+       valid: function() {\r
+        if ( $(this[0]).is('form')) {\r
+            return this.validate().form();\r
+        } else {\r
+            var valid = true;\r
+            var validator = $(this[0].form).validate();\r
+            this.each(function() {\r
+                               valid &= validator.element(this);\r
+            });\r
+            return valid;\r
+        }\r
+    },\r
+       // attributes: space seperated list of attributes to retrieve and remove\r
+       removeAttrs: function(attributes) {\r
+               var result = {},\r
+                       $element = this;\r
+               $.each(attributes.split(/\s/), function(index, value) {\r
+                       result[value] = $element.attr(value);\r
+                       $element.removeAttr(value);\r
+               });\r
+               return result;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/rules\r
+       rules: function(command, argument) {\r
+               var element = this[0];\r
+\r
+               if (command) {\r
+                       var settings = $.data(element.form, 'validator').settings;\r
+                       var staticRules = settings.rules;\r
+                       var existingRules = $.validator.staticRules(element);\r
+                       switch(command) {\r
+                       case "add":\r
+                               $.extend(existingRules, $.validator.normalizeRule(argument));\r
+                               staticRules[element.name] = existingRules;\r
+                               if (argument.messages)\r
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );\r
+                               break;\r
+                       case "remove":\r
+                               if (!argument) {\r
+                                       delete staticRules[element.name];\r
+                                       return existingRules;\r
+                               }\r
+                               var filtered = {};\r
+                               $.each(argument.split(/\s/), function(index, method) {\r
+                                       filtered[method] = existingRules[method];\r
+                                       delete existingRules[method];\r
+                               });\r
+                               return filtered;\r
+                       }\r
+               }\r
+\r
+               var data = $.validator.normalizeRules(\r
+               $.extend(\r
+                       {},\r
+                       $.validator.metadataRules(element),\r
+                       $.validator.classRules(element),\r
+                       $.validator.attributeRules(element),\r
+                       $.validator.staticRules(element)\r
+               ), element);\r
+\r
+               // make sure required is at front\r
+               if (data.required) {\r
+                       var param = data.required;\r
+                       delete data.required;\r
+                       data = $.extend({required: param}, data);\r
+               }\r
+\r
+               return data;\r
+       }\r
+});\r
+\r
+// Custom selectors\r
+$.extend($.expr[":"], {\r
+       // http://docs.jquery.com/Plugins/Validation/blank\r
+       blank: function(a) {return !$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/filled\r
+       filled: function(a) {return !!$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/unchecked\r
+       unchecked: function(a) {return !a.checked;}\r
+});\r
+\r
+// constructor for validator\r
+$.validator = function( options, form ) {\r
+       this.settings = $.extend( true, {}, $.validator.defaults, options );\r
+       this.currentForm = form;\r
+       this.init();\r
+};\r
+\r
+$.validator.format = function(source, params) {\r
+       if ( arguments.length == 1 )\r
+               return function() {\r
+                       var args = $.makeArray(arguments);\r
+                       args.unshift(source);\r
+                       return $.validator.format.apply( this, args );\r
+               };\r
+       if ( arguments.length > 2 && params.constructor != Array  ) {\r
+               params = $.makeArray(arguments).slice(1);\r
+       }\r
+       if ( params.constructor != Array ) {\r
+               params = [ params ];\r
+       }\r
+       $.each(params, function(i, n) {\r
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);\r
+       });\r
+       return source;\r
+};\r
+\r
+$.extend($.validator, {\r
+\r
+       defaults: {\r
+               messages: {},\r
+               groups: {},\r
+               rules: {},\r
+               errorClass: "error",\r
+               validClass: "valid",\r
+               errorElement: "label",\r
+               focusInvalid: true,\r
+               errorContainer: $( [] ),\r
+               errorLabelContainer: $( [] ),\r
+               onsubmit: true,\r
+               ignore: ":hidden",\r
+               ignoreTitle: false,\r
+               onfocusin: function(element, event) {\r
+                       this.lastActive = element;\r
+\r
+                       // hide error label and remove error class on focus if enabled\r
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {\r
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );\r
+                               this.addWrapper(this.errorsFor(element)).hide();\r
+                       }\r
+               },\r
+               onfocusout: function(element, event) {\r
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onkeyup: function(element, event) {\r
+                       if ( element.name in this.submitted || element == this.lastElement ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onclick: function(element, event) {\r
+                       // click on selects, radiobuttons and checkboxes\r
+                       if ( element.name in this.submitted )\r
+                               this.element(element);\r
+                       // or option elements, check parent select in that case\r
+                       else if (element.parentNode.name in this.submitted)\r
+                               this.element(element.parentNode);\r
+               },\r
+               highlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);\r
+                       } else {\r
+                               $(element).addClass(errorClass).removeClass(validClass);\r
+                       }\r
+               },\r
+               unhighlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);\r
+                       } else {\r
+                               $(element).removeClass(errorClass).addClass(validClass);\r
+                       }\r
+               }\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults\r
+       setDefaults: function(settings) {\r
+               $.extend( $.validator.defaults, settings );\r
+       },\r
+\r
+       messages: {\r
+               required: "This field is required.",\r
+               remote: "Please fix this field.",\r
+               email: "Please enter a valid email address.",\r
+               url: "Please enter a valid URL.",\r
+               date: "Please enter a valid date.",\r
+               dateISO: "Please enter a valid date (ISO).",\r
+               number: "Please enter a valid number.",\r
+               digits: "Please enter only digits.",\r
+               creditcard: "Please enter a valid credit card number.",\r
+               equalTo: "Please enter the same value again.",\r
+               accept: "Please enter a value with a valid extension.",\r
+               maxlength: $.validator.format("Please enter no more than {0} characters."),\r
+               minlength: $.validator.format("Please enter at least {0} characters."),\r
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),\r
+               range: $.validator.format("Please enter a value between {0} and {1}."),\r
+               max: $.validator.format("Please enter a value less than or equal to {0}."),\r
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")\r
+       },\r
+\r
+       autoCreateRanges: false,\r
+\r
+       prototype: {\r
+\r
+               init: function() {\r
+                       this.labelContainer = $(this.settings.errorLabelContainer);\r
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);\r
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );\r
+                       this.submitted = {};\r
+                       this.valueCache = {};\r
+                       this.pendingRequest = 0;\r
+                       this.pending = {};\r
+                       this.invalid = {};\r
+                       this.reset();\r
+\r
+                       var groups = (this.groups = {});\r
+                       $.each(this.settings.groups, function(key, value) {\r
+                               $.each(value.split(/\s/), function(index, name) {\r
+                                       groups[name] = key;\r
+                               });\r
+                       });\r
+                       var rules = this.settings.rules;\r
+                       $.each(rules, function(key, value) {\r
+                               rules[key] = $.validator.normalizeRule(value);\r
+                       });\r
+\r
+                       function delegate(event) {\r
+                               var validator = $.data(this[0].form, "validator"),\r
+                                       eventType = "on" + event.type.replace(/^validate/, "");\r
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);\r
+                       }\r
+                       $(this.currentForm)\r
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +\r
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +\r
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +\r
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +\r
+                                               "[type='range'], [type='color'] ",\r
+                                               "focusin focusout keyup", delegate)\r
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);\r
+\r
+                       if (this.settings.invalidHandler)\r
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/form\r
+               form: function() {\r
+                       this.checkForm();\r
+                       $.extend(this.submitted, this.errorMap);\r
+                       this.invalid = $.extend({}, this.errorMap);\r
+                       if (!this.valid())\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                       this.showErrors();\r
+                       return this.valid();\r
+               },\r
+\r
+               // 원본소스\r
+               /*\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               this.check( elements[i] );\r
+                       }\r
+                       return this.valid();\r
+               },\r
+               */\r
+\r
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {\r
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {\r
+                                               this.check( this.findByName( elements[i].name )[cnt] );\r
+                                       }\r
+                               } else {\r
+                                       this.check( elements[i] );\r
+                               }\r
+                       }\r
+                       return this.valid();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/element\r
+               element: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+                       this.lastElement = element;\r
+                       this.prepareElement( element );\r
+                       this.currentElements = $(element);\r
+                       var result = this.check( element );\r
+                       if ( result ) {\r
+                               delete this.invalid[element.name];\r
+                       } else {\r
+                               this.invalid[element.name] = true;\r
+                       }\r
+                       if ( !this.numberOfInvalids() ) {\r
+                               // Hide error containers on last error\r
+                               this.toHide = this.toHide.add( this.containers );\r
+                       }\r
+                       this.showErrors();\r
+                       return result;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors\r
+               showErrors: function(errors) {\r
+                       if(errors) {\r
+                               // add items to error list and map\r
+                               $.extend( this.errorMap, errors );\r
+                               this.errorList = [];\r
+                               for ( var name in errors ) {\r
+                                       this.errorList.push({\r
+                                               message: errors[name],\r
+                                               element: this.findByName(name)[0]\r
+                                       });\r
+                               }\r
+                               // remove items from success list\r
+                               this.successList = $.grep( this.successList, function(element) {\r
+                                       return !(element.name in errors);\r
+                               });\r
+                       }\r
+                       this.settings.showErrors\r
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )\r
+                               : this.defaultShowErrors();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm\r
+               resetForm: function() {\r
+                       if ( $.fn.resetForm )\r
+                               $( this.currentForm ).resetForm();\r
+                       this.submitted = {};\r
+                       this.lastElement = null;\r
+                       this.prepareForm();\r
+                       this.hideErrors();\r
+                       this.elements().removeClass( this.settings.errorClass );\r
+               },\r
+\r
+               numberOfInvalids: function() {\r
+                       return this.objectLength(this.invalid);\r
+               },\r
+\r
+               objectLength: function( obj ) {\r
+                       var count = 0;\r
+                       for ( var i in obj )\r
+                               count++;\r
+                       return count;\r
+               },\r
+\r
+               hideErrors: function() {\r
+                       this.addWrapper( this.toHide ).hide();\r
+               },\r
+\r
+               valid: function() {\r
+                       return this.size() == 0;\r
+               },\r
+\r
+               size: function() {\r
+                       return this.errorList.length;\r
+               },\r
+\r
+               focusInvalid: function() {\r
+                       if( this.settings.focusInvalid ) {\r
+                               try {\r
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])\r
+                                       .filter(":visible")\r
+                                       .focus()\r
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find\r
+                                       .trigger("focusin");\r
+                               } catch(e) {\r
+                                       // ignore IE throwing errors when focusing hidden elements\r
+                               }\r
+                       }\r
+               },\r
+\r
+               findLastActive: function() {\r
+                       var lastActive = this.lastActive;\r
+                       return lastActive && $.grep(this.errorList, function(n) {\r
+                               return n.element.name == lastActive.name;\r
+                       }).length == 1 && lastActive;\r
+               },\r
+\r
+               elements: function() {\r
+                       var validator = this,\r
+                               rulesCache = {};\r
+\r
+                       // select all valid inputs inside the form (no submit or reset buttons)\r
+                       return $(this.currentForm)\r
+                       .find("input, select, textarea")\r
+                       .not(":submit, :reset, :image, [disabled]")\r
+                       .not( this.settings.ignore )\r
+                       .filter(function() {\r
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);\r
+\r
+                               // select only the first element for each name, and only those with rules specified\r
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )\r
+                                       return false;\r
+\r
+                               rulesCache[this.name] = true;\r
+                               return true;\r
+                       });\r
+               },\r
+\r
+               clean: function( selector ) {\r
+                       return $( selector )[0];\r
+               },\r
+\r
+               errors: function() {\r
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );\r
+               },\r
+\r
+               reset: function() {\r
+                       this.successList = [];\r
+                       this.errorList = [];\r
+                       this.errorMap = {};\r
+                       this.toShow = $([]);\r
+                       this.toHide = $([]);\r
+                       this.currentElements = $([]);\r
+               },\r
+\r
+               prepareForm: function() {\r
+                       this.reset();\r
+                       this.toHide = this.errors().add( this.containers );\r
+               },\r
+\r
+               prepareElement: function( element ) {\r
+                       this.reset();\r
+                       this.toHide = this.errorsFor(element);\r
+               },\r
+\r
+               check: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+\r
+                       var rules = $(element).rules();\r
+                       var dependencyMismatch = false;\r
+                       for (var method in rules ) {\r
+                               var rule = { method: method, parameters: rules[method] };\r
+                               try {\r
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );\r
+\r
+                                       // if a method indicates that the field is optional and therefore valid,\r
+                                       // don't mark it as valid when there are no other rules\r
+                                       if ( result == "dependency-mismatch" ) {\r
+                                               dependencyMismatch = true;\r
+                                               continue;\r
+                                       }\r
+                                       dependencyMismatch = false;\r
+\r
+                                       if ( result == "pending" ) {\r
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );\r
+                                               return;\r
+                                       }\r
+\r
+                                       if( !result ) {\r
+                                               this.formatAndAdd( element, rule );\r
+                                               return false;\r
+                                       }\r
+                               } catch(e) {\r
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id\r
+                                                + ", check the '" + rule.method + "' method", e);\r
+                                       throw e;\r
+                               }\r
+                       }\r
+                       if (dependencyMismatch)\r
+                               return;\r
+                       if ( this.objectLength(rules) )\r
+                               this.successList.push(element);\r
+                       return true;\r
+               },\r
+\r
+               // return the custom message for the given element and validation method\r
+               // specified in the element's "messages" metadata\r
+               customMetaMessage: function(element, method) {\r
+                       if (!$.metadata)\r
+                               return;\r
+\r
+                       var meta = this.settings.meta\r
+                               ? $(element).metadata()[this.settings.meta]\r
+                               : $(element).metadata();\r
+\r
+                       return meta && meta.messages && meta.messages[method];\r
+               },\r
+\r
+               // return the custom message for the given element name and validation method\r
+               customMessage: function( name, method ) {\r
+                       var m = this.settings.messages[name];\r
+                       return m && (m.constructor == String\r
+                               ? m\r
+                               : m[method]);\r
+               },\r
+\r
+               // return the first defined argument, allowing empty strings\r
+               findDefined: function() {\r
+                       for(var i = 0; i < arguments.length; i++) {\r
+                               if (arguments[i] !== undefined)\r
+                                       return arguments[i];\r
+                       }\r
+                       return undefined;\r
+               },\r
+\r
+               defaultMessage: function( element, method) {\r
+                       return this.findDefined(\r
+                               this.customMessage( element.name, method ),\r
+                               this.customMetaMessage( element, method ),\r
+                               // title is never undefined, so handle empty string as undefined\r
+                               !this.settings.ignoreTitle && element.title || undefined,\r
+                               $.validator.messages[method],\r
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"\r
+                       );\r
+               },\r
+\r
+               formatAndAdd: function( element, rule ) {\r
+                       var message = this.defaultMessage( element, rule.method ),\r
+                               theregex = /\$?\{(\d+)\}/g;\r
+                       if ( typeof message == "function" ) {\r
+                               message = message.call(this, rule.parameters, element);\r
+                       } else if (theregex.test(message)) {\r
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);\r
+                       }\r
+                       this.errorList.push({\r
+                               message: message,\r
+                               element: element\r
+                       });\r
+\r
+                       this.errorMap[element.name] = message;\r
+                       this.submitted[element.name] = message;\r
+               },\r
+\r
+               addWrapper: function(toToggle) {\r
+                       if ( this.settings.wrapper )\r
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );\r
+                       return toToggle;\r
+               },\r
+\r
+               defaultShowErrors: function() {\r
+                       for ( var i = 0; this.errorList[i]; i++ ) {\r
+                               var error = this.errorList[i];\r
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );\r
+                               this.showLabel( error.element, error.message );\r
+                       }\r
+                       if( this.errorList.length ) {\r
+                               this.toShow = this.toShow.add( this.containers );\r
+                       }\r
+                       if (this.settings.success) {\r
+                               for ( var i = 0; this.successList[i]; i++ ) {\r
+                                       this.showLabel( this.successList[i] );\r
+                               }\r
+                       }\r
+                       if (this.settings.unhighlight) {\r
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {\r
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );\r
+                               }\r
+                       }\r
+                       this.toHide = this.toHide.not( this.toShow );\r
+                       this.hideErrors();\r
+                       this.addWrapper( this.toShow ).show();\r
+               },\r
+\r
+               validElements: function() {\r
+                       return this.currentElements.not(this.invalidElements());\r
+               },\r
+\r
+               invalidElements: function() {\r
+                       return $(this.errorList).map(function() {\r
+                               return this.element;\r
+                       });\r
+               },\r
+\r
+               showLabel: function(element, message) {\r
+                       var label = this.errorsFor( element );\r
+                       if ( label.length ) {\r
+                               // refresh error/success class\r
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );\r
+\r
+                               // check if we have a generated label, replace the message then\r
+                               label.attr("generated") && label.html(message);\r
+                       } else {\r
+                               // create label\r
+                               label = $("<" + this.settings.errorElement + "/>")\r
+                                       .attr({"for":  this.idOrName(element), generated: true})\r
+                                       .addClass(this.settings.errorClass)\r
+                                       .html(message || "");\r
+                               if ( this.settings.wrapper ) {\r
+                                       // make sure the element is visible, even in IE\r
+                                       // actually showing the wrapped element is handled elsewhere\r
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();\r
+                               }\r
+                               if ( !this.labelContainer.append(label).length )\r
+                                       this.settings.errorPlacement\r
+                                               ? this.settings.errorPlacement(label, $(element) )\r
+                                               : label.insertAfter(element);\r
+                       }\r
+                       if ( !message && this.settings.success ) {\r
+                               label.text("");\r
+                               typeof this.settings.success == "string"\r
+                                       ? label.addClass( this.settings.success )\r
+                                       : this.settings.success( label );\r
+                       }\r
+                       this.toShow = this.toShow.add(label);\r
+               },\r
+\r
+               errorsFor: function(element) {\r
+                       var name = this.idOrName(element);\r
+               return this.errors().filter(function() {\r
+                               return $(this).attr('for') == name;\r
+                       });\r
+               },\r
+\r
+               idOrName: function(element) {\r
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);\r
+               },\r
+\r
+               validationTargetFor: function(element) {\r
+                       // if radio/checkbox, validate first element in group instead\r
+                       if (this.checkable(element)) {\r
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];\r
+                       }\r
+                       return element;\r
+               },\r
+\r
+               checkable: function( element ) {\r
+                       return /radio|checkbox/i.test(element.type);\r
+               },\r
+\r
+               findByName: function( name ) {\r
+                       // select by name and filter by form for performance over form.find("[name=...]")\r
+                       var form = this.currentForm;\r
+                       return $(document.getElementsByName(name)).map(function(index, element) {\r
+                               return element.form == form && element.name == name && element  || null;\r
+                       });\r
+               },\r
+\r
+               getLength: function(value, element) {\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               return $("option:selected", element).length;\r
+                       case 'input':\r
+                               if( this.checkable( element) )\r
+                                       return this.findByName(element.name).filter(':checked').length;\r
+                       }\r
+                       return value.length;\r
+               },\r
+\r
+               depend: function(param, element) {\r
+                       return this.dependTypes[typeof param]\r
+                               ? this.dependTypes[typeof param](param, element)\r
+                               : true;\r
+               },\r
+\r
+               dependTypes: {\r
+                       "boolean": function(param, element) {\r
+                               return param;\r
+                       },\r
+                       "string": function(param, element) {\r
+                               return !!$(param, element.form).length;\r
+                       },\r
+                       "function": function(param, element) {\r
+                               return param(element);\r
+                       }\r
+               },\r
+\r
+               optional: function(element) {\r
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";\r
+               },\r
+\r
+               startRequest: function(element) {\r
+                       if (!this.pending[element.name]) {\r
+                               this.pendingRequest++;\r
+                               this.pending[element.name] = true;\r
+                       }\r
+               },\r
+\r
+               stopRequest: function(element, valid) {\r
+                       this.pendingRequest--;\r
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0\r
+                       if (this.pendingRequest < 0)\r
+                               this.pendingRequest = 0;\r
+                       delete this.pending[element.name];\r
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {\r
+                               $(this.currentForm).submit();\r
+                               this.formSubmitted = false;\r
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                               this.formSubmitted = false;\r
+                       }\r
+               },\r
+\r
+               previousValue: function(element) {\r
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {\r
+                               old: null,\r
+                               valid: true,\r
+                               message: this.defaultMessage( element, "remote" )\r
+                       });\r
+               }\r
+\r
+       },\r
+\r
+       classRuleSettings: {\r
+               required: {required: true},\r
+               email: {email: true},\r
+               url: {url: true},\r
+               date: {date: true},\r
+               dateISO: {dateISO: true},\r
+               dateDE: {dateDE: true},\r
+               number: {number: true},\r
+               numberDE: {numberDE: true},\r
+               digits: {digits: true},\r
+               creditcard: {creditcard: true}\r
+       },\r
+\r
+       addClassRules: function(className, rules) {\r
+               className.constructor == String ?\r
+                       this.classRuleSettings[className] = rules :\r
+                       $.extend(this.classRuleSettings, className);\r
+       },\r
+\r
+       classRules: function(element) {\r
+               var rules = {};\r
+               var classes = $(element).attr('class');\r
+               classes && $.each(classes.split(' '), function() {\r
+                       if (this in $.validator.classRuleSettings) {\r
+                               $.extend(rules, $.validator.classRuleSettings[this]);\r
+                       }\r
+               });\r
+               return rules;\r
+       },\r
+\r
+       attributeRules: function(element) {\r
+               var rules = {};\r
+               var $element = $(element);\r
+\r
+               for (var method in $.validator.methods) {\r
+                       var value;\r
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required\r
+                       if (method === 'required' && typeof $.fn.prop === 'function') {\r
+                               value = $element.prop(method);\r
+                       } else {\r
+                               value = $element.attr(method);\r
+                       }\r
+                       if (value) {\r
+                               rules[method] = value;\r
+                       } else if ($element[0].getAttribute("type") === method) {\r
+                               rules[method] = true;\r
+                       }\r
+               }\r
+\r
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs\r
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {\r
+                       delete rules.maxlength;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       metadataRules: function(element) {\r
+               if (!$.metadata) return {};\r
+\r
+               var meta = $.data(element.form, 'validator').settings.meta;\r
+               return meta ?\r
+                       $(element).metadata()[meta] :\r
+                       $(element).metadata();\r
+       },\r
+\r
+       staticRules: function(element) {\r
+               var rules = {};\r
+               var validator = $.data(element.form, 'validator');\r
+               if (validator.settings.rules) {\r
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};\r
+               }\r
+               return rules;\r
+       },\r
+\r
+       normalizeRules: function(rules, element) {\r
+               // handle dependency check\r
+               $.each(rules, function(prop, val) {\r
+                       // ignore rule when param is explicitly false, eg. required:false\r
+                       if (val === false) {\r
+                               delete rules[prop];\r
+                               return;\r
+                       }\r
+                       if (val.param || val.depends) {\r
+                               var keepRule = true;\r
+                               switch (typeof val.depends) {\r
+                                       case "string":\r
+                                               keepRule = !!$(val.depends, element.form).length;\r
+                                               break;\r
+                                       case "function":\r
+                                               keepRule = val.depends.call(element, element);\r
+                                               break;\r
+                               }\r
+                               if (keepRule) {\r
+                                       rules[prop] = val.param !== undefined ? val.param : true;\r
+                               } else {\r
+                                       delete rules[prop];\r
+                               }\r
+                       }\r
+               });\r
+\r
+               // evaluate parameters\r
+               $.each(rules, function(rule, parameter) {\r
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;\r
+               });\r
+\r
+               // clean number parameters\r
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = Number(rules[this]);\r
+                       }\r
+               });\r
+               $.each(['rangelength', 'range'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];\r
+                       }\r
+               });\r
+\r
+               if ($.validator.autoCreateRanges) {\r
+                       // auto-create ranges\r
+                       if (rules.min && rules.max) {\r
+                               rules.range = [rules.min, rules.max];\r
+                               delete rules.min;\r
+                               delete rules.max;\r
+                       }\r
+                       if (rules.minlength && rules.maxlength) {\r
+                               rules.rangelength = [rules.minlength, rules.maxlength];\r
+                               delete rules.minlength;\r
+                               delete rules.maxlength;\r
+                       }\r
+               }\r
+\r
+               // To support custom messages in metadata ignore rule methods titled "messages"\r
+               if (rules.messages) {\r
+                       delete rules.messages;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}\r
+       normalizeRule: function(data) {\r
+               if( typeof data == "string" ) {\r
+                       var transformed = {};\r
+                       $.each(data.split(/\s/), function() {\r
+                               transformed[this] = true;\r
+                       });\r
+                       data = transformed;\r
+               }\r
+               return data;\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod\r
+       addMethod: function(name, method, message) {\r
+               $.validator.methods[name] = method;\r
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];\r
+               if (method.length < 3) {\r
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));\r
+               }\r
+       },\r
+\r
+       methods: {\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/required\r
+               required: function(value, element, param) {\r
+                       // check if dependency is met\r
+                       if ( !this.depend(param, element) )\r
+                               return "dependency-mismatch";\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               // could be an array for select-multiple or a string, both are fine this way\r
+                               var val = $(element).val();\r
+                               return val && val.length > 0;\r
+                       case 'input':\r
+                               if ( this.checkable(element) )\r
+                                       return this.getLength(value, element) > 0;\r
+                       default:\r
+                               return $.trim(value).length > 0;\r
+                       }\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote\r
+               remote: function(value, element, param) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+\r
+                       var previous = this.previousValue(element);\r
+                       if (!this.settings.messages[element.name] )\r
+                               this.settings.messages[element.name] = {};\r
+                       previous.originalMessage = this.settings.messages[element.name].remote;\r
+                       this.settings.messages[element.name].remote = previous.message;\r
+\r
+                       param = typeof param == "string" && {url:param} || param;\r
+\r
+                       if ( this.pending[element.name] ) {\r
+                               return "pending";\r
+                       }\r
+                       if ( previous.old === value ) {\r
+                               return previous.valid;\r
+                       }\r
+\r
+                       previous.old = value;\r
+                       var validator = this;\r
+                       this.startRequest(element);\r
+                       var data = {};\r
+                       data[element.name] = value;\r
+                       $.ajax($.extend(true, {\r
+                               url: param,\r
+                               mode: "abort",\r
+                               port: "validate" + element.name,\r
+                               dataType: "json",\r
+                               data: data,\r
+                               success: function(response) {\r
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;\r
+                                       var valid = response === true;\r
+                                       if ( valid ) {\r
+                                               var submitted = validator.formSubmitted;\r
+                                               validator.prepareElement(element);\r
+                                               validator.formSubmitted = submitted;\r
+                                               validator.successList.push(element);\r
+                                               validator.showErrors();\r
+                                       } else {\r
+                                               var errors = {};\r
+                                               var message = response || validator.defaultMessage( element, "remote" );\r
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;\r
+                                               validator.showErrors(errors);\r
+                                       }\r
+                                       previous.valid = valid;\r
+                                       validator.stopRequest(element, valid);\r
+                               }\r
+                       }, param));\r
+                       return "pending";\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength\r
+               minlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength\r
+               maxlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength\r
+               rangelength: function(value, element, param) {\r
+                       var length = this.getLength($.trim(value), element);\r
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/min\r
+               min: function( value, element, param ) {\r
+                       return this.optional(element) || value >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/max\r
+               max: function( value, element, param ) {\r
+                       return this.optional(element) || value <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/range\r
+               range: function( value, element, param ) {\r
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/email\r
+               email: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/\r
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/url\r
+               url: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/\r
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/date\r
+               date: function(value, element) {\r
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO\r
+               dateISO: function(value, element) {\r
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/number\r
+               number: function(value, element) {\r
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits\r
+               digits: function(value, element) {\r
+                       return this.optional(element) || /^\d+$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard\r
+               // based on http://en.wikipedia.org/wiki/Luhn\r
+               creditcard: function(value, element) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+                       // accept only spaces, digits and dashes\r
+                       if (/[^0-9 -]+/.test(value))\r
+                               return false;\r
+                       var nCheck = 0,\r
+                               nDigit = 0,\r
+                               bEven = false;\r
+\r
+                       value = value.replace(/\D/g, "");\r
+\r
+                       for (var n = value.length - 1; n >= 0; n--) {\r
+                               var cDigit = value.charAt(n);\r
+                               var nDigit = parseInt(cDigit, 10);\r
+                               if (bEven) {\r
+                                       if ((nDigit *= 2) > 9)\r
+                                               nDigit -= 9;\r
+                               }\r
+                               nCheck += nDigit;\r
+                               bEven = !bEven;\r
+                       }\r
+\r
+                       return (nCheck % 10) == 0;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept\r
+               accept: function(value, element, param) {\r
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";\r
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo\r
+               equalTo: function(value, element, param) {\r
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated\r
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead\r
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {\r
+                               $(element).valid();\r
+                       });\r
+                       return value == target.val();\r
+               }\r
+\r
+       }\r
+\r
+});\r
+\r
+// deprecated, use $.validator.format instead\r
+$.format = $.validator.format;\r
+\r
+})(jQuery);\r
+\r
+// ajax mode: abort\r
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});\r
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()\r
+;(function($) {\r
+       var pendingRequests = {};\r
+       // Use a prefilter if available (1.5+)\r
+       if ( $.ajaxPrefilter ) {\r
+               $.ajaxPrefilter(function(settings, _, xhr) {\r
+                       var port = settings.port;\r
+                       if (settings.mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               pendingRequests[port] = xhr;\r
+                       }\r
+               });\r
+       } else {\r
+               // Proxy ajax\r
+               var ajax = $.ajax;\r
+               $.ajax = function(settings) {\r
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,\r
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;\r
+                       if (mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               return (pendingRequests[port] = ajax.apply(this, arguments));\r
+                       }\r
+                       return ajax.apply(this, arguments);\r
+               };\r
+       }\r
+})(jQuery);\r
+\r
+// provides cross-browser focusin and focusout events\r
+// IE has native support, in other browsers, use event caputuring (neither bubbles)\r
+\r
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation\r
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target\r
+;(function($) {\r
+       // only implement if not provided by jQuery core (since 1.4)\r
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs\r
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {\r
+               $.each({\r
+                       focus: 'focusin',\r
+                       blur: 'focusout'\r
+               }, function( original, fix ){\r
+                       $.event.special[fix] = {\r
+                               setup:function() {\r
+                                       this.addEventListener( original, handler, true );\r
+                               },\r
+                               teardown:function() {\r
+                                       this.removeEventListener( original, handler, true );\r
+                               },\r
+                               handler: function(e) {\r
+                                       arguments[0] = $.event.fix(e);\r
+                                       arguments[0].type = fix;\r
+                                       return $.event.handle.apply(this, arguments);\r
+                               }\r
+                       };\r
+                       function handler(e) {\r
+                               e = $.event.fix(e);\r
+                               e.type = fix;\r
+                               return $.event.handle.call(this, e);\r
+                       }\r
+               });\r
+       };\r
+       $.extend($.fn, {\r
+               validateDelegate: function(delegate, type, handler) {\r
+                       return this.bind(type, function(event) {\r
+                               var target = $(event.target);\r
+                               if (target.is(delegate)) {\r
+                                       return handler.apply(target, arguments);\r
+                               }\r
+                       });\r
+               }\r
+       });\r
+})(jQuery);\r
+\r
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)\r
+ * Licensed under the MIT License (LICENSE.txt).\r
+ *\r
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.\r
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.\r
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY\r
+ *\r
+ * Version: 3.0.6\r
+ * \r
+ * Requires: 1.2.2+\r
+ */\r
+\r
+(function($) {\r
+\r
+var types = ['DOMMouseScroll', 'mousewheel'];\r
+\r
+if ($.event.fixHooks) {\r
+    for ( var i=types.length; i; ) {\r
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;\r
+    }\r
+}\r
+\r
+$.event.special.mousewheel = {\r
+    setup: function() {\r
+        if ( this.addEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.addEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = handler;\r
+        }\r
+    },\r
+    \r
+    teardown: function() {\r
+        if ( this.removeEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.removeEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = null;\r
+        }\r
+    }\r
+};\r
+\r
+$.fn.extend({\r
+    mousewheel: function(fn) {\r
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");\r
+    },\r
+    \r
+    unmousewheel: function(fn) {\r
+        return this.unbind("mousewheel", fn);\r
+    }\r
+});\r
+\r
+\r
+function handler(event) {\r
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;\r
+    event = $.event.fix(orgEvent);\r
+    event.type = "mousewheel";\r
+    \r
+    // Old school scrollwheel delta\r
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }\r
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }\r
+    \r
+    // New school multidimensional scroll (touchpads) deltas\r
+    deltaY = delta;\r
+    \r
+    // Gecko\r
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {\r
+        deltaY = 0;\r
+        deltaX = -1*delta;\r
+    }\r
+    \r
+    // Webkit\r
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }\r
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }\r
+    \r
+    // Add event and delta to the front of the arguments\r
+    args.unshift(event, delta, deltaX, deltaY);\r
+    \r
+    return ($.event.dispatch || $.event.handle).apply(this, args);\r
+}\r
+\r
+})(jQuery);\r
+\r
+/*\r
+ * jScrollPane - v2.0.0beta12 - 2012-07-24\r
+ * http://jscrollpane.kelvinluck.com/\r
+ *\r
+ * Copyright (c) 2010 Kelvin Luck\r
+ * Dual licensed under the MIT and GPL licenses.\r
+ */\r
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);\r
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)\r
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()\r
 })}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.guides/html/scripts/jquery.zclip.min.js b/org.tizen.guides/html/scripts/jquery.zclip.min.js
index 51471a1..3548cc2 100644 (file)
--- a/org.tizen.guides/html/scripts/jquery.zclip.min.js
+++ b/org.tizen.guides/html/scripts/jquery.zclip.min.js
@@ -1,12 +1,12 @@
-/*
- * zClip :: jQuery ZeroClipboard v1.1.1
- * http://steamdev.com/zclip
- *
- * Copyright 2011, SteamDev
- * Released under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- *
- * Date: Wed Jun 01, 2011
- */
-
+/*\r
+ * zClip :: jQuery ZeroClipboard v1.1.1\r
+ * http://steamdev.com/zclip\r
+ *\r
+ * Copyright 2011, SteamDev\r
+ * Released under the MIT license.\r
+ * http://www.opensource.org/licenses/mit-license.php\r
+ *\r
+ * Date: Wed Jun 01, 2011\r
+ */\r
+\r
 (function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.guides/html/scripts/navi.js b/org.tizen.guides/html/scripts/navi.js
index badc738..e4569c3 100644 (file)
--- a/org.tizen.guides/html/scripts/navi.js
+++ b/org.tizen.guides/html/scripts/navi.js
@@ -1,192 +1,192 @@
-//<![CDATA[
-    var staticURL = "http://img-developer.samsung.com";
-       var sslCall = "";
-
-       if('' !== 'N') {
-               var locationStr = location.href;
-               if(locationStr.indexOf("https://") > -1) {
-                       location.href = "http://" + locationStr.substring(8);
-               }     
-    }
-
-//     if( typeof($) === function ) {
-               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
-               //? ??? ?? ?? ??? ?? ?? ???.
-//     }
-    $SD.pagination.alt = {
-               first:"go first",
-               prev:"go prev",
-               next:"go next",
-               last:"go last"
-    };
-    $(document).ready(function(){
-       var myVar;
-           topSearchInit();//top search ??
-           $('#searchTop').attr("autocomplete","off");
-           var searchingBoolean = false;
-           
-           var topSearchChange = function(){
-               
-               if (searchingBoolean) return;
-               
-                       var searchInput = $('#searchTop').val();
-                       
-                       if($('#searchTop').val() != ""){
-                               $("#topAutocomplete").hide();
-                               searchingBoolean = true;
-                               
-                               var jsonData = {
-                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
-                                               async : true,
-                                               data : { searchInput : searchInput},
-                                               success : function(data){
-                                                       if (searchInput == $('#searchTop').val()){
-                                                               var autoComplete = data.kwdNm;
-                                                               var tmpHtml = "";
-                                                               
-                                                               if (autoComplete.length > 0){
-                                                                       $('#topAutocomplete').children().remove();
-                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
-                                                                       $.each(autoComplete, function(i, item){
-                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
-                                                                               a.data('keyword', item.kwdNm);
-                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
-                                                                       });
-                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
-                                                                               if(e.which == 9 && e.shiftKey) {
-                                                                                       return true;
-                                                                               }
-                                                                               
-                                                                               if(e.which == 9) {
-                                                                                       e.preventDefault();
-                                                                                       $('#topAutocomplete').hide();   
-                                                                                       setTimeout(function() {
-                                                                                               $("#searchTopBtn").focus();
-                                                                                       }, 1);
-                                                                               }
-                                                                               
-                                                                       });
-                                                                       $("#searchTopBtn").off("focusout", function(e) {});
-                                                                   $("#searchTopBtn").on("focusout", function(e) {
-                                                                               $('#topAutocomplete').hide();
-                                                                       });
-                                                               }else{
-                                                                       $('#topAutocomplete').children().remove();
-                                                               }
-                                                               if($('#searchTop').val() == ""){
-                                                                       $("#topAutocomplete").hide();
-                                                                       searchingBoolean = false;
-                                                                       return;
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               searchingBoolean = false;
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                               if (autoComplete.length == 0){
-                                                                       $("#topAutocomplete").hide();
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               $("#topAutocomplete").show();
-                                                                               var $searchList = $("#topAutocomplete").find('ul');
-                                                                               var hei = $searchList.outerHeight();
-                                                                               if(hei>180){
-                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
-                                                                               }
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                       }else{
-                                                               searchingBoolean = false;
-                                                               topSearchChange();
-                                                       }
-                                               },
-                                               error : function() {searchingBoolean = false;}
-                                               
-                               };
-                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
-                               $SD.ajax.get(jsonData);
-                               searchingBoolean = false;
-                       }
-                       
-                       //console.log("/search/autoComplete.do end");
-                       //console.groupEnd();
-               };
-               
-               $('#searchTop').keyup(function(e){
-                       if($('#searchTop').val() == ""){
-                               $('#topAutocomplete').children().remove();
-                               $("#topAutocomplete").hide();
-                       }else{
-                               if(e.which == 13){
-                                       search();
-                               }else{
-                                       topSearchChange();
-                               }
-                       }
-               });
-               
-               var search = function(){
-                       if($.trim($('#searchTop').val()) == ""){
-                               alert('Search keyword is required.');
-                       }else{
-                               $('#topSearchForm').submit();
-                       }
-               };
-               $("#topAutocomplete").on('mousedown','ul li a', function(e){
-                       e.preventDefault();
-                       var keyword = $(this).data('keyword');
-                       $("#searchTop").val(keyword);
-                       $('#topSearchForm').submit();
-               });
-               
-               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
-                       if(e.which == 13) {
-                               e.preventDefault();
-                               var keyword = $(this).data('keyword');
-                               $("#searchTop").val(keyword);
-                               $('#topSearchForm').submit();                   
-                       }
-               });
-               
-               $('#searchTopBtn').click(function(e){
-                       search();       
-               });  
-    });
-    
-    function topSearchEnter(){
-       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
-               alert('Search keyword is required.');
-               return false;
-       }else{
-               return true;
-       }
-    }
-
-/* Tracking Code TOTAL */
-               var _gaq = _gaq || [];
-               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
-               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
-               _gaq.push(['_setAccount', 'UA-6892706-3']);
-               _gaq.push(['_setDomainName', 'samsung.com']);
-               _gaq.push(['_setAllowLinker', true]);
-               _gaq.push(['_trackPageview']);
-               (function() {
-                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-               })();
-       
-               <!--// Tracking Code 1 -->
-                       var _gaq = _gaq || [];
-                       _gaq.push(['_setAccount', 'UA-6892706-4']);
-                       _gaq.push(['_trackPageview']);
-                       (function() {
-                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-                       })();
+//<![CDATA[\r
+    var staticURL = "http://img-developer.samsung.com";\r
+       var sslCall = "";\r
+\r
+       if('' !== 'N') {\r
+               var locationStr = location.href;\r
+               if(locationStr.indexOf("https://") > -1) {\r
+                       location.href = "http://" + locationStr.substring(8);\r
+               }     \r
+    }\r
+\r
+//     if( typeof($) === function ) {\r
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.\r
+               //? ??? ?? ?? ??? ?? ?? ???.\r
+//     }\r
+    $SD.pagination.alt = {\r
+               first:"go first",\r
+               prev:"go prev",\r
+               next:"go next",\r
+               last:"go last"\r
+    };\r
+    $(document).ready(function(){\r
+       var myVar;\r
+           topSearchInit();//top search ??\r
+           $('#searchTop').attr("autocomplete","off");\r
+           var searchingBoolean = false;\r
+           \r
+           var topSearchChange = function(){\r
+               \r
+               if (searchingBoolean) return;\r
+               \r
+                       var searchInput = $('#searchTop').val();\r
+                       \r
+                       if($('#searchTop').val() != ""){\r
+                               $("#topAutocomplete").hide();\r
+                               searchingBoolean = true;\r
+                               \r
+                               var jsonData = {\r
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",\r
+                                               async : true,\r
+                                               data : { searchInput : searchInput},\r
+                                               success : function(data){\r
+                                                       if (searchInput == $('#searchTop').val()){\r
+                                                               var autoComplete = data.kwdNm;\r
+                                                               var tmpHtml = "";\r
+                                                               \r
+                                                               if (autoComplete.length > 0){\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));\r
+                                                                       $.each(autoComplete, function(i, item){\r
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");\r
+                                                                               a.data('keyword', item.kwdNm);\r
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));\r
+                                                                       });\r
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {\r
+                                                                               if(e.which == 9 && e.shiftKey) {\r
+                                                                                       return true;\r
+                                                                               }\r
+                                                                               \r
+                                                                               if(e.which == 9) {\r
+                                                                                       e.preventDefault();\r
+                                                                                       $('#topAutocomplete').hide();   \r
+                                                                                       setTimeout(function() {\r
+                                                                                               $("#searchTopBtn").focus();\r
+                                                                                       }, 1);\r
+                                                                               }\r
+                                                                               \r
+                                                                       });\r
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});\r
+                                                                   $("#searchTopBtn").on("focusout", function(e) {\r
+                                                                               $('#topAutocomplete').hide();\r
+                                                                       });\r
+                                                               }else{\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                               }\r
+                                                               if($('#searchTop').val() == ""){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                                       searchingBoolean = false;\r
+                                                                       return;\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               searchingBoolean = false;\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                               if (autoComplete.length == 0){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               $("#topAutocomplete").show();\r
+                                                                               var $searchList = $("#topAutocomplete").find('ul');\r
+                                                                               var hei = $searchList.outerHeight();\r
+                                                                               if(hei>180){\r
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});\r
+                                                                               }\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                       }else{\r
+                                                               searchingBoolean = false;\r
+                                                               topSearchChange();\r
+                                                       }\r
+                                               },\r
+                                               error : function() {searchingBoolean = false;}\r
+                                               \r
+                               };\r
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);\r
+                               $SD.ajax.get(jsonData);\r
+                               searchingBoolean = false;\r
+                       }\r
+                       \r
+                       //console.log("/search/autoComplete.do end");\r
+                       //console.groupEnd();\r
+               };\r
+               \r
+               $('#searchTop').keyup(function(e){\r
+                       if($('#searchTop').val() == ""){\r
+                               $('#topAutocomplete').children().remove();\r
+                               $("#topAutocomplete").hide();\r
+                       }else{\r
+                               if(e.which == 13){\r
+                                       search();\r
+                               }else{\r
+                                       topSearchChange();\r
+                               }\r
+                       }\r
+               });\r
+               \r
+               var search = function(){\r
+                       if($.trim($('#searchTop').val()) == ""){\r
+                               alert('Search keyword is required.');\r
+                       }else{\r
+                               $('#topSearchForm').submit();\r
+                       }\r
+               };\r
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){\r
+                       e.preventDefault();\r
+                       var keyword = $(this).data('keyword');\r
+                       $("#searchTop").val(keyword);\r
+                       $('#topSearchForm').submit();\r
+               });\r
+               \r
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){\r
+                       if(e.which == 13) {\r
+                               e.preventDefault();\r
+                               var keyword = $(this).data('keyword');\r
+                               $("#searchTop").val(keyword);\r
+                               $('#topSearchForm').submit();                   \r
+                       }\r
+               });\r
+               \r
+               $('#searchTopBtn').click(function(e){\r
+                       search();       \r
+               });  \r
+    });\r
+    \r
+    function topSearchEnter(){\r
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){\r
+               alert('Search keyword is required.');\r
+               return false;\r
+       }else{\r
+               return true;\r
+       }\r
+    }\r
+\r
+/* Tracking Code TOTAL */\r
+               var _gaq = _gaq || [];\r
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';\r
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);\r
+               _gaq.push(['_setAccount', 'UA-6892706-3']);\r
+               _gaq.push(['_setDomainName', 'samsung.com']);\r
+               _gaq.push(['_setAllowLinker', true]);\r
+               _gaq.push(['_trackPageview']);\r
+               (function() {\r
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+               })();\r
+       \r
+               <!--// Tracking Code 1 -->\r
+                       var _gaq = _gaq || [];\r
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);\r
+                       _gaq.push(['_trackPageview']);\r
+                       (function() {\r
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+                       })();\r
diff --git a/org.tizen.guides/html/scripts/search.js b/org.tizen.guides/html/scripts/search.js
index d1ae5ad..a67a795 100644 (file)
--- a/org.tizen.guides/html/scripts/search.js
+++ b/org.tizen.guides/html/scripts/search.js
@@ -1,168 +1,168 @@
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
- */
-function searchInit()
-{
-       var focusTarget = "input";
-
-       //$("#autocomplete").hide();
-
-       //$("#searchInput").bind("keydown", checkSearchText);
-       
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $("#autocomplete").bind("mouseleave",function(){
-               $(this).hide();
-               $("#btnDropdown").removeClass("dropdownoff");
-               $("#btnDropdown").addClass("dropdown");         
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       //$(".autocomplete").css("visibility", "visible");
-                       $("#autocomplete").show();
-                       
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-               }
-               else{
-                       //$(".autocomplete").css("visibility", "hidden");
-                       $("#autocomplete").hide();
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
-
-
-
-function topSearchInit()
-{
-       var focusTarget = "input";
-
-       //$("#searchTop").bind("keydown", checkSearchText);
-       
-       $("#searchTop").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {       
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchTop" ).focusin( function()   {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchTop").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".topAutocomplete").css("visibility", "visible");
-               }else{
-                       $(".topAutocomplete").css("visibility", "hidden");
-                       $("#topAutocomplete").hide();
-               }
-       }
-}
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+ */\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#autocomplete").hide();\r
+\r
+       //$("#searchInput").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $("#autocomplete").bind("mouseleave",function(){\r
+               $(this).hide();\r
+               $("#btnDropdown").removeClass("dropdownoff");\r
+               $("#btnDropdown").addClass("dropdown");         \r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       //$(".autocomplete").css("visibility", "visible");\r
+                       $("#autocomplete").show();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+               }\r
+               else{\r
+                       //$(".autocomplete").css("visibility", "hidden");\r
+                       $("#autocomplete").hide();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+\r
+\r
+\r
+function topSearchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#searchTop").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchTop").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {       \r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchTop" ).focusin( function()   {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchTop").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".topAutocomplete").css("visibility", "visible");\r
+               }else{\r
+                       $(".topAutocomplete").css("visibility", "hidden");\r
+                       $("#topAutocomplete").hide();\r
+               }\r
+       }\r
+}\r
diff --git a/org.tizen.guides/html/scripts/showhide.js b/org.tizen.guides/html/scripts/showhide.js
index 2e85407..b882d14 100644 (file)
--- a/org.tizen.guides/html/scripts/showhide.js
+++ b/org.tizen.guides/html/scripts/showhide.js
@@ -1,204 +1,204 @@
-/*all Show Hide devicespecs List*/
-if($('div#contents').find('.devicespecs-util').length){
-var self = $('div#contents').find('.devicespecs-util');
-
-$('.showA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-var me = $(this);
-var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-if ( !me.next().is(':visible') ){
-       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-       me.find('em').text('Hide');
-       me.next().show();
-}
-});
-return false;
-})
-$('.hideA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-
-       var me = $(this);
-       var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-       if ( me.next().is(':visible') ){
-               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-               me.find('em').text('Show');
-               me.next().hide();
-       }
-                                       
-});
-return false;
-})
-}      
-
-/*toggle devicespecs List*/
-if($('div#contents').find('.devicespec-tit').length){
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-$('a', self).bind ("click", function(){
-       var idx = $('.devicespec-tit a').index(this);
-
-       if ( $(this).parent().parent().next().is(':visible') ){
-               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-               self.find('em').text('Show');
-               self.next().hide();
-
-               return false;
-       }else{
-               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-               self.find('em').text('Hide');
-
-               self.next().show();
-
-               return false;
-       }
-
-});
-
-});
-}
-
-$('ul.devicespecifications li div.devicespec-con').hide();
-
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-var arrow =  $('a', self);
-
-if(self.next().is(':visible')){
-arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
-self.find('em').text('Hide');
-}else{
-arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
-self.find('em').text('Show');
-}
-
-});
-
-$(document).ready(function(){
-       var openheading = function(target) {
-               var origin = $(target);
-               target = origin.closest('.devicespec-con');
-               if (!(target.length > 0)) {
-                       target = origin.closest('.devicespec-tit');
-               }
-               if (target.length > 0) {
-                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
-                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
-                       }
-               }
-
-               $(window.location.hash)[0].scrollIntoView();
-       };
-
-       $(".opensection").click(function(){
-               var target = $($(this).attr("href"));//.closest('.devicespec-con');
-               openheading(target);
-       });
-
-       if (window.location.hash) {
-               var target = $(window.location.hash);
-               openheading(target);
-               //$(target).focus(); //uncomment if fail to work
-       }
-
-       var isScrolledIntoView = function(elem)
-       {
-               var docViewTop = $('#contents').scrollTop();
-               var docViewBottom = docViewTop + $('#contents').height();
-
-               var elemTop = $(elem).offset().top;
-               var elemBottom = elemTop + $(elem).height();
-
-               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
-                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
-       }
-
-       $('#contents').scroll();
-
-       var checkBreadCrumbs = function() {
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-                       $('.help_breadcrumbs').hide();
-               } else {
-                       $('a.top.sms').hide();
-                       $('.help_breadcrumbs').show();
-               }
-               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
-       }       
-
-       var updateH = function(){
-               checkBreadCrumbs();
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
-
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
-               if ($('a.top').is(':visible'))
-               {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
-               } else {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
-               }
-               $('#toc').css('height', $('#toc').css('height') - 5);
-
-               $('#toc_border').height($('#toc').outerHeight() + 5);
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
-               //$('#toc').css('width', $('#toc_border').width() - 40);
-               $('#toc').css('width', $('#toc_border').width() - 49);
-       };
-
-       var updateH_no_toc = function() {
-               checkBreadCrumbs();
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-               } else {
-                       $('a.top.sms').hide();
-               }
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-       }
-
-       if ($('body').hasClass('no-toc')) {
-               updateH = updateH_no_toc;
-       }
-       $(window).resize(updateH);
-       $('#contents').scroll(updateH);
-       $(window).resize();
-       
-       $('a.top').click(function(){$('#contents').scrollTop(0)});
-
-       var hashchanged = function() {
-               if (window.location.hash.length) {
-                       openheading(window.location.hash);
-                       //$(window.location.hash).scrollTo();
-                       $(window.location.hash)[0].scrollIntoView();
-
-               } else 
-               {
-                       $('#contents').scrollTop(0);
-               }
-       };
-
-       if (("onhashchange" in window) && !($.browser.msie)) { 
-               $(window).bind( 'hashchange',hashchanged);
-       }
-       else { 
-               var prevHash = window.location.hash;
-               window.setInterval(function () {
-                       if (window.location.hash != prevHash) {
-                               hashchanged();
-                               prevHash = window.location.hash;
-                       }
-               }, 100);
-       }
-});
+/*all Show Hide devicespecs List*/\r
+if($('div#contents').find('.devicespecs-util').length){\r
+var self = $('div#contents').find('.devicespecs-util');\r
+\r
+$('.showA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+var me = $(this);\r
+var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+if ( !me.next().is(':visible') ){\r
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+       me.find('em').text('Hide');\r
+       me.next().show();\r
+}\r
+});\r
+return false;\r
+})\r
+$('.hideA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+\r
+       var me = $(this);\r
+       var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+       if ( me.next().is(':visible') ){\r
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+               me.find('em').text('Show');\r
+               me.next().hide();\r
+       }\r
+                                       \r
+});\r
+return false;\r
+})\r
+}      \r
+\r
+/*toggle devicespecs List*/\r
+if($('div#contents').find('.devicespec-tit').length){\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+$('a', self).bind ("click", function(){\r
+       var idx = $('.devicespec-tit a').index(this);\r
+\r
+       if ( $(this).parent().parent().next().is(':visible') ){\r
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+               self.find('em').text('Show');\r
+               self.next().hide();\r
+\r
+               return false;\r
+       }else{\r
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+               self.find('em').text('Hide');\r
+\r
+               self.next().show();\r
+\r
+               return false;\r
+       }\r
+\r
+});\r
+\r
+});\r
+}\r
+\r
+$('ul.devicespecifications li div.devicespec-con').hide();\r
+\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+var arrow =  $('a', self);\r
+\r
+if(self.next().is(':visible')){\r
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));\r
+self.find('em').text('Hide');\r
+}else{\r
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));\r
+self.find('em').text('Show');\r
+}\r
+\r
+});\r
+\r
+$(document).ready(function(){\r
+       var openheading = function(target) {\r
+               var origin = $(target);\r
+               target = origin.closest('.devicespec-con');\r
+               if (!(target.length > 0)) {\r
+                       target = origin.closest('.devicespec-tit');\r
+               }\r
+               if (target.length > 0) {\r
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {\r
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();\r
+                       }\r
+               }\r
+\r
+               $(window.location.hash)[0].scrollIntoView();\r
+       };\r
+\r
+       $(".opensection").click(function(){\r
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');\r
+               openheading(target);\r
+       });\r
+\r
+       if (window.location.hash) {\r
+               var target = $(window.location.hash);\r
+               openheading(target);\r
+               //$(target).focus(); //uncomment if fail to work\r
+       }\r
+\r
+       var isScrolledIntoView = function(elem)\r
+       {\r
+               var docViewTop = $('#contents').scrollTop();\r
+               var docViewBottom = docViewTop + $('#contents').height();\r
+\r
+               var elemTop = $(elem).offset().top;\r
+               var elemBottom = elemTop + $(elem).height();\r
+\r
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)\r
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );\r
+       }\r
+\r
+       $('#contents').scroll();\r
+\r
+       var checkBreadCrumbs = function() {\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+                       $('.help_breadcrumbs').hide();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+                       $('.help_breadcrumbs').show();\r
+               }\r
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));\r
+       }       \r
+\r
+       var updateH = function(){\r
+               checkBreadCrumbs();\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));\r
+\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+\r
+               if ($('a.top').is(':visible'))\r
+               {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);\r
+               } else {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);\r
+               }\r
+               $('#toc').css('height', $('#toc').css('height') - 5);\r
+\r
+               $('#toc_border').height($('#toc').outerHeight() + 5);\r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);\r
+               //$('#toc').css('width', $('#toc_border').width() - 40);\r
+               $('#toc').css('width', $('#toc_border').width() - 49);\r
+       };\r
+\r
+       var updateH_no_toc = function() {\r
+               checkBreadCrumbs();\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+               }\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               \r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+       }\r
+\r
+       if ($('body').hasClass('no-toc')) {\r
+               updateH = updateH_no_toc;\r
+       }\r
+       $(window).resize(updateH);\r
+       $('#contents').scroll(updateH);\r
+       $(window).resize();\r
+       \r
+       $('a.top').click(function(){$('#contents').scrollTop(0)});\r
+\r
+       var hashchanged = function() {\r
+               if (window.location.hash.length) {\r
+                       openheading(window.location.hash);\r
+                       //$(window.location.hash).scrollTo();\r
+                       $(window.location.hash)[0].scrollIntoView();\r
+\r
+               } else \r
+               {\r
+                       $('#contents').scrollTop(0);\r
+               }\r
+       };\r
+\r
+       if (("onhashchange" in window) && !($.browser.msie)) { \r
+               $(window).bind( 'hashchange',hashchanged);\r
+       }\r
+       else { \r
+               var prevHash = window.location.hash;\r
+               window.setInterval(function () {\r
+                       if (window.location.hash != prevHash) {\r
+                               hashchanged();\r
+                               prevHash = window.location.hash;\r
+                       }\r
+               }, 100);\r
+       }\r
+});\r
diff --git a/org.tizen.guides/html/web/guides_w.htm b/org.tizen.guides/html/web/guides_w.htm
index 5808de5..4f23775 100644 (file)
--- a/org.tizen.guides/html/web/guides_w.htm
+++ b/org.tizen.guides/html/web/guides_w.htm
@@ -41,7 +41,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">The API support differs based on the application profile (mobile or wearable). For a complete list of APIs and their supported profiles, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>,  <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>, and <a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Web UI Framework Reference</a>.</td> 
+     <td class="note">The API support differs based on the application profile (mobile or wearable). For a complete list of APIs and their supported profiles, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a> and <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</td> 
     </tr> 
    </tbody> 
   </table> 
diff --git a/org.tizen.guides/html/web/tizen/TAU/accessibility.htm b/org.tizen.guides/html/web/tizen/TAU/accessibility.htm
deleted file mode 100644 (file)
index 654cd51..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/accessibility.htm
+++ /dev/null
@@ -1,112 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>Accessibility</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="circularUI.htm">Prev: Circular UI (Wearable)</a></li>
-            <li><a href="globalization.htm">Next: Globalization</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Accessibility</h1>
-
-
-    <p>The <a href="http://www.w3.org/TR/wai-aria/" target="_blank">WAI-ARIA</a> (Web Accessibility Initiative - Accessible Rich Internet Applications) is a standard to support easy access to Web content in Web applications. The WAI-ARIA is composed of a role, states, and property, and its current version is 1.0. The Tizen screen reader sends the screen information to the user with the text-to-speech technology from WAI-ARIA data.</p>
-    <p>You must define the role, states, and property of the HTML elements in order to enable the Tizen screen reader.</p>
-
-    <p>The Tizen screen reader reads HTML elements in the following order:</p>
-    <ol>
-        <li>Content
-            <p>The actual element content is read first.</p></li>
-        <li>Other attributes than <span style="font-family: Courier New,Courier,monospace">role</span> and <span style="font-family: Courier New,Courier,monospace">aria-label</span></li>
-        <li><span style="font-family: Courier New,Courier,monospace">role</span> attribute
-        </li>
-        <li><span style="font-family: Courier New,Courier,monospace">aria-label</span> attribute
-        </li>
-    </ol>
-
-    <p>The following examples show how WAI-ARIA code is read using the text-to-speech functionality of the screen reader:</p>
-    <ul>
-        <li>Result: checkbox checked, double tap to uncheck
-            <pre class="prettyprint">&lt;div role=&quot;checkbox&quot; aria-checked=&quot;true&quot; aria-label=&quot;double tap to uncheck&quot;&gt;&lt;/div&gt;</pre></li>
-        <li>Result: test button, double tap to click
-            <pre class="prettyprint">&lt;div role=&quot;button&quot; aria-label=&quot;double tap to click&quot;&gt;test&lt;/div&gt;</pre></li>
-    </ul>
-
-    <p>When creating applications that use the Tizen screen reader, keep in mind the following exceptions:</p>
-    <ul>
-        <li>If the <span style="font-family: Courier New,Courier,monospace">aria-hidden</span> attribute of an element is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the screen reader does not read the content of the element or its child elements.
-            <p>In the following snippet, the screen reader reads &quot;on&quot;, but not &quot;off&quot; or &quot;child&quot;.</p>
-<pre class="prettyprint">&lt;div tabindex=&quot;0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;on&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div aria-hidden=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;off
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;child&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;</pre></li>
-        <li>If the <span style="font-family: Courier New,Courier,monospace">role</span> attribute is not defined, it is not read.
-            <p>In the following snippet, the screen reader reads &quot;test&quot;, but not &quot;link&quot;.</p>
-            <pre class="prettyprint">&lt;a role=&quot;&quot; href=&quot;test.html&quot;&gt;test&lt;/a&gt;</pre></li>
-        <li>The screen reader does not read elements that are hidden, for example, if the <span style="font-family: Courier New,Courier,monospace">display</span> property is set to <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
-    </ul>
-
-    <p>The <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element supports the image alt text through the <span style="font-family: Courier New,Courier,monospace">alt</span> attribute:</p>
-    <pre class="prettyprint">&lt;img src=&quot;icon.jpg&quot; alt=&quot;icon&quot;&gt;</pre>
-    <table class="note">
-        <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">The <span style="font-family: Courier New,Courier,monospace">alt</span> attribute need not be defined for the virtual grid component.
-                <p>The accessibility feature is supported since Tizen 2.1.</p></td>
-        </tr>
-        </tbody>
-    </table>
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI.htm
deleted file mode 100644 (file)
index a08453a..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI.htm
+++ /dev/null
@@ -1,187 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>Circular UI (Wearable)</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#apply">How to apply Circular UI</a></li>
-            <li><a href="#inCss">How to override css style for Circular UI using media query</a></li>
-            <li><a href="#inJs">How to write code selectively for Circular UI in JS</a></li>
-            <li><a href="#components">Support guide for UI components</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="tutorialNotepad.htm">Prev: How to Creating Notepad Application</a></li>
-            <li><a href="accessibility.htm">Next: Accessibility</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Circular UI (Wearable)</h1>
-
-    <p>TAU for Wearable supports different types of wearable devices (rectangle and circle) in the same application.
-        <br><br>To support Circular UI along with Rectangular UI, media query is required.</p>
-
-    <h2>Table of Contents</h2>
-    <ol class="toc">
-        <li><a href="#apply">How to apply Circular UI</a></li>
-        <li><a href="#inCss">How to override css style for Circular UI using media query</a></li>
-        <li><a href="#inJs">How to write code selectively for Circular UI in JS</a></li>
-        <li><a href="#components">Support guide for UI components</a></li>
-    </ol>
-
-    <h2><a id="apply"></a>How to apply Circular UI</h2>
-    <p>In order to support the Circular UI, you need to do the following.<br>
-        <br>&nbsp;&nbsp;1. Include the link tag for the latest "tau.css" file into &lt;head&gt; part in HTML.
-        <br>&nbsp;&nbsp;&nbsp; ( <b>Note</b> : For the compatibility with Rectangular UI, you must use the latest version of TAU library. )<br>
-        <br>&nbsp;&nbsp;2. Include the link tag for the latest "tau.circle.css" file with media query feature "-tizen-geometric-shape: circle" next to the link tag for the "tau.css".
-        <br>&nbsp;&nbsp;&nbsp; ( <b>Note</b> : Adding the "tau.circle.css" file following the general "tau.css" file will cover the additional Circular UI. )<br>
-        <br>&nbsp;&nbsp;3. Include the link tag for the latest "tau.js" script file at the end of &lt;body&gt; part of HTML.<br>
-        <br>&nbsp;&nbsp;4. For writing separate code for Circular UI in JS, you can use "tau.support.shape.circle" property for detect circular device.<br>
-
-<pre class="prettyprint">
-&lt;head name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Support for Circular UI&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;tau.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- CSS media query on a link element --&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (-tizen-geometric-shape: circle)&quot; href=&quot;tau.circle.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/stlye.css&quot;&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* implement your codes for Circular UI here */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* implement your codes for Rectangular UI here */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/body&gt;
-</pre>
-
-    <p>The following figure shows an example of how media query("-tizen-geometric-shape: circle") would work in different devices.</p>
-    <p class="figure"> Figure: apply to rectangular device and circular device with media query</p>
-    <p style="text-align:center;">
-        <img src="../../../images/circular_support.png" />
-    </p><br>
-
-    <h2><a id="inCss"></a>How to override CSS style for Circular UI using media query</h2>
-    <p>In order for some styles to be applied selectively, you can use media query feature "-tizen-geometric-shape" with "rectangle" or "circle" value.<p>
-
-    <h3>Media query feature for Tizen devices</h3>
-
-    <p>Media query in TAU for Wearable utilizes "-tizen-geometric-shape" feature with "rectangle" or "circle" value to distinguish type difference.</p>
-    &nbsp;&nbsp;( <b>Note</b> : "-tizen-geometric-shape" feature is only available in Tizen devices. )
-
-    <table>
-        <caption>Table: Description for "-tizen-geometric-shape" feature.</caption>
-        <tbody>
-        <tr>
-            <th colspan="2">-tizen-geometric-shape</th>
-        </tr>
-        <td>Value</td>
-        <td>rectangle | circle</td>
-        </tr>
-        <tr>
-            <td>Applied to</td>
-            <td>Visual media types</td>
-        </tr>
-        <tr>
-            <td>Accept min/max prefixes</td>
-            <td>No</td>
-        </tr>
-        </tbody>
-    </table><br>
-
-<pre class="prettyprint">
-.className {
-       /* implement basic CSS style for all type of devices (Rectangular an Circular) */
-}
-
-@media screen and (-tizen-geometric-shape: circle) {
-       .className      {
-               /* implement CSS style to be overridden in Circular */
-       }
-}
-</pre><br>
-
-    <h2><a id="inJs"></a>How to write code selectively for Circular UI in JS</h2>
-    <p>TAU for Wearable provides the property "tau.support.shape.circle" that checks whether the type is circle or not. If you want implement code selectively for Circular UI and Rectangular UI, you can use the property with boolean value.</p>
-    &nbsp;&nbsp;( <b>Note</b> : For developing in a browser environment, this property is always set true when "tau.circle.css" is loaded. )<p>
-
-<pre class="prettyprint">
-if (tau.support.shape.circle) {
-       /* implement your codes for Circular UI here */
-} else {
-       /* implement your codes for Rectangular UI here */
-}
-</pre><br>
-
-    <h2><a id="components"></a>Support guide for UI components</h2>
-    <p>The following is how to use both Rectangular UI components and Circular UI components.<br>
-
-    <h3>Index of UI Components</h3>
-    <ol class="toc">
-        <li><a href="./circularUI/snaplist.htm">List</a></li>
-        <p>How to support list</p>
-        <li><a href="./circularUI/expandableheader.htm">Header</a></li>
-        <p>How to support header</p>
-        <li><a href="./circularUI/progress.htm">Circle Progress Bar</a></li>
-        <p>How to support circle progress bar</p>
-        <li><a href="./circularUI/processing.htm">Processing</a></li>
-        <p>How to support processing</p>
-        <li><a href="./circularUI/moreoptions.htm">More Options</a></li>
-        <p>How to support more options button</p>
-        <li><a href="./circularUI/footerbutton.htm">Footer Button</a></li>
-        <p>How to support footer buttons</p>
-        <li><a href="./circularUI/thumbnail.htm">Thumbnail</a></li>
-        <p>How to support thumbnail</p>
-        <li><a href="./circularUI/popup.htm">Popup</a></li>
-        <p>How to support popup</p>
-    </ol>
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/expandableheader.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/expandableheader.htm
deleted file mode 100755 (executable)
index bb485a6..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/expandableheader.htm
+++ /dev/null
@@ -1,133 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-       <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>How to support Header</title>
-</head>
-<body onload="prettyPrint()" id="content">
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Page</p>
-               <ul class="toc">
-                       <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>How to support Header</h1>
-
-Header in Circular UI is expandable.<p>
-The expandable header offers <a href="#event">events</a> in order to support interactivity with other components.<p>
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-       <li><a href="#layout">Layout</a></li>
-       <li><a href="#htmlCode">HTML code</a></li>
-       <li><a href="#event">Events</a></li>
-       <li><a href="#eventExample">Example for events</a></li>
-</ol>
-
-<h2><a id='layout'></a>Layout</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_header.png" /></td>
-                       <td><img src="../images/round_header.png" /></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table>
-
-<h2><a id='htmlCode'></a>HTML code</h2>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;headerPage&quot; &gt;
-       &lt;header class=&quot;ui-header&quot; id=&quot;myHeader&quot;&gt;
-               &lt;h2 class=&quot;ui-title&quot;&gt;Long title with ExpandableHeader&lt;/h2&gt;
-       &lt;/header&gt;
-       &lt;div class=&quot;ui-content content-padding&quot;&gt;
-               Header is expandable in Circular UI.
-       &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h2><a id='event'></a>Events</h2><p>
-
-<table>
-<tbody>
-       <tr>
-               <th style="width:10%;">Event name</th>
-               <th>Description</th>
-       </tr>
-       <tr>
-               <td>headerexpand</a></td>
-               <td>Triggered when the header starts to expand.</td>
-       </tr>
-       <tr>
-               <td>headerexpandcomplete</a></td>
-               <td>Triggered after the header expands.</td>
-       </tr>
-       <tr>
-               <td>headercollapse</a></td>
-               <td>Triggered when the header returns to the state before expanding.</td>
-       </tr>
-</tbody>
-</table>
-
-<h2><a id='#eventExample'></a>Example for events</h2>
-
-<p>You can use events &quot;headerexpand&quot; and &quot;headercollapse&quot; if you need to do something when the header expands and collapses.
-<p>The following shows the example with Marquee.
-
-<pre class="prettyprint">
-var page = document.querySelector("#myPage");
-
-page.addEventListener("pagebeforeshow", function() {
-       var textElement = page.querySelector(".ui-title"),
-               marquee = new tau.widget.Marquee(textElement);
-}, false);
-
-page.addEventListener("headercollapse", function() {
-       if (marquee) {
-               marquee.reset();
-       }
-}, false);
-
-page.addEventListener("headerexpandcomplete", function() {
-       if (marquee) {
-               marquee.start();
-       }
-}, false);
-</pre>
-
-       <script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-       <script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/footerbutton.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/footerbutton.htm
deleted file mode 100755 (executable)
index 6724743..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/footerbutton.htm
+++ /dev/null
@@ -1,219 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-       <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>How to support Footer Button</title>
-</head>
-<body onload="prettyPrint()" id="content">
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Page</p>
-               <ul class="toc">
-                       <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>How to support Footer Button</h1>
-
-The following explains how to make the footer button which can support both Rectangular UI and Circular UI.<p>
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-       <li><a href="#layout">Layout</a></li>
-       <li><a href="#htmlCode">HTML code</a></li>
-       <li><a href="#layout2">Layout (multiple buttons)</a></li>
-       <li><a href="#htmlCode2">HTML code (multiple buttons)</a></li>
-       <li><a href="#cssCode2">CSS code (multiple buttons)</a></li>
-       <li><a href="#jsCode">Javascript code (multiple buttons)</a></li>
-</ol>
-
-<h2><a id='layout'></a>Layout</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_footer.png"/></td>
-                       <td><img src="../images/round_footer.png"/></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table><br>
-
-<p>Bottom button of Circular UI has "ui-bottom-button" class.</p>
-
-<h2><a id='htmlCode'></a>HTML code</h2>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;bottomButtonPage&quot; &gt;
-       &lt;header class=&quot;ui-header&quot;&gt;
-               &lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
-       &lt;/header&gt;
-       &lt;div class=&quot;ui-content content-padding&quot;&gt;
-               It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
-       &lt;/div&gt;
-       &lt;footer class=&quot;ui-footer ui-bottom-button&quot;&gt;
-               &lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;Button&lt;/a&gt;
-       &lt;/footer&gt;
-&lt;/div&gt;
-</pre>
-
-<h2><a id='layout2'></a>Layout (multiple buttons)</h2>
-
-<table id="tau-circular">
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_multibtn.png"/></td>
-                       <td><img src="../images/round_multibtn.png"/></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table><br>
-
-<p>When there are multiple buttons, the buttons except for the first button use drawer in Circular UI.</p>
-
-<h2><a id='htmlCode2'></a>HTML code (multiple buttons)</h2>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;bottomButtonWithMorePage&quot; &gt;
-       &lt;header class=&quot;ui-header&quot;&gt;
-               &lt;h2 class=&quot;ui-title&quot;&gt;Multiple Buttons&lt;/h2&gt;
-       &lt;/header&gt;
-       &lt;div class=&quot;ui-content content-padding&quot;&gt;
-               It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
-       &lt;/div&gt;
-
-       &lt;a class=&quot;drawer-handler&quot;&gt;&lt;/a&gt;
-
-       &lt;!-- Circle Profile --&gt;
-       &lt;div id=&quot;moreoptionsDrawer&quot; class=&quot;ui-drawer drawer-elem&quot; data-drawer-target=&quot;#bottomButtonWithMorePage&quot; data-position=&quot;right&quot; data-enable=&quot;true&quot; data-drag-edge=&quot;1&quot;&gt;
-               &lt;div id=&quot;moreoptionsSectionChanger&quot; class=&quot;ui-section-changer&quot;&gt;
-                       &lt;div&gt;
-                               &lt;section&gt;
-                                       &lt;button class=&quot;option-button&quot;&gt;2&lt;/button&gt;
-                               &lt;/section&gt;
-                               &lt;section&gt;
-                                       &lt;button class=&quot;option-button&quot;&gt;3&lt;/button&gt;
-                               &lt;/section&gt;
-                       &lt;/div&gt;
-               &lt;/div&gt;
-       &lt;/div&gt;
-
-       &lt;footer class=&quot;ui-footer ui-grid-col-3 ui-bottom-button&quot;&gt;
-               &lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;1&lt;/a&gt;
-               &lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;2&lt;/a&gt;
-               &lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;3&lt;/a&gt;
-       &lt;/footer&gt;
-&lt;/div&gt;
-</pre>
-
-<h2><a id='cssCode2'></a>CSS code (multiple buttons)</h2>
-
-<pre class="prettyprint">
-.drawer-elem {
-       display: none;
-}
-
-@media all and (-tizen-geometric-shape: circle) {
-    .drawer-handler {
-        width:24px;
-        height: 115px;
-        position: fixed;
-        top: 122px;
-        right: 0;
-        color: transparent;
-        background-color: #a4a4a4;
-        -webkit-mask-image: url(/*path of the image*/);
-        -webkit-mask-size: 18px 36px;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-position: 0 40px;
-    }
-    .drawer-elem {
-               display: block;
-               background-color: rgba(255, 255, 255, 0.1);
-               border-radius: 100%;
-       }
-       .sections,
-       .options {
-               text-align: center;
-       }
-       .option-button {
-               width: 158px;
-               height: 158px;
-               background-color: #a4a4a4;
-               position: relative;
-               left: 50%;
-               transform: translate3d(-50%, -50%, 0);
-               top: 50%;
-               border-radius: 50%;
-               border: none;
-               text-align: center;
-               line-height: 158px;
-               -webkit-appearance: none;
-       }
-
-    .ui-bottom-button a + a {
-        display: none;
-    }
-}
-</pre>
-
-<h2><a id='jsCode'></a>Javascript code (multiple buttons)</h2>
-
-<pre class="prettyprint">
-(function(){
-       var page = document.querySelector("#bottomButtonWithMorePage"),
-               drawer = page.querySelector("#moreoptionsDrawer"),
-               handler = page.querySelector(".ui-more"),
-               drawerMoreHelper;
-
-       page.addEventListener( "pagebeforeshow", function() {
-               if (tau.support.shape.circle) {
-                       drawerMoreHelper = tau.helper.DrawerMoreStyle.create(drawer, {
-                               handler: ".drawer-handler",
-                       });
-               }
-       });
-
-       page.addEventListener( "pagehide", function() {
-               if (tau.support.shape.circle) {
-                       if (drawerMoreHelper) {
-                               drawerMoreHelper.destroy();
-                       }
-               }
-       });
-})();
-</pre>
-
-       <script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-       <script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/helper.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/helper.htm
deleted file mode 100755 (executable)
index 91cabf5..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/helper.htm
+++ /dev/null
@@ -1,315 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-       <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>Helper Script</title>
-</head>
-<body onload="prettyPrint()" id="content">
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Page</p>
-               <ul class="toc">
-                       <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Helper Script</h1>
-
-       <p>Tizen Advanced UI (TAU) framework provides helper script to support some creating usable components for the Web applications.
-       </p>
-
-       <table>
-               <caption>Table: TAU helper script</caption>
-               <tbody>
-               <tr>
-                       <th>Namespace of Helper</th>
-                       <th>Description</th>
-               </tr>
-               <tr>
-                       <td><a href="#listmarqueestyle">SnapListMarqueeStyle</a></td>
-                       <td>Provides creating marquee-able and expandable list style with SnapListview.</td>
-               </tr>
-               </tbody>
-       </table>
-
-       <p>You can use TAU helper as follows:</p>
-
-<pre class="prettyprint">&lt;script&gt;
- var helperInstance = tau.helper.<i>NameSpace</i>
-&lt;/script&gt;
-</pre>
-       <h2 id="listmarqueestyle">SnapListMarqueeStyle</h2>
-
-       SnapListMarqueeStyle helper provides helper script to support some creating usable components for list style.
-       <br>It supports making listview  more effective using <a href="../../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview</a> and
-       <a href="../../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_marquee.htm">Marquee</a> component.
-
-       <table class="note">
-               <tbody>
-               <tr>
-                       <th class="note">Note</th>
-               </tr>
-               <tr>
-                       <td class="note">This helper script is supported since <strong>2.3</strong>.</td>
-               </tr>
-               </tbody>
-       </table>
-
-
-       <h3>Table of Contents</h3>
-       <ol class="toc">
-
-               <li><a href="#default-selectors0.06779201747849584">How to create SnapListMarqueeStyle</a>
-
-               </li>
-
-               <li><a href="#options-list">Options</a></li>
-               <li><a href="#methods-list">Methods</a></li>
-
-       </ol>
-
-       <h3><a id='default-selectors0.06779201747849584'></a>How to create SnapListMarqueeStyle</h3>
-
-       <p>You can make your own style listview with SnapListMarqueeStyle as the following.</p>
-       In this example, text of list item scrolls horizontally and the sub text appears if the list item is placed in the middle of the screen.
-
-       <h3>HTML Example</h3>
-
-       <p>You can add a multiline style listview as follows:</p>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snaplistTest&quot;&gt;
-       &lt;header class=&quot;ui-header&quot;&gt;
-               &lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
-       &lt;/header&gt;
-       &lt;div class=&quot;ui-content&quot;&gt;
-               &lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
-                       &lt;li class=&quot;li-has-2line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;1.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-                       &lt;li class=&quot;li-has-2line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;2.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-                       &lt;li class=&quot;li-has-2line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;3.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-                       &lt;li class=&quot;li-has-2line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;4.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-               &lt;/ul&gt;
-       &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-       <h3>CSS Style Example</h3>
-
-       <p>In CSS code, you can make your list animation style as follows:</p>
-<pre class="prettyprint">.ui-listview.expand-list li.li-has-2line .ui-marquee{
-       -webkit-transform: translate3d(0, 16px, 0);
-       -webkit-transition: all ease .5s;
-}
-.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee{
-       -webkit-transform: translate3d(0, 0, 0);
-       -webkit-transition: all ease 1s;
-}
-
-.ui-listview.expand-list li.li-has-2line .ui-li-sub-text{
-       -webkit-transform: translate3d(0, -20px, 0);
-       opacity: 0;
-       -webkit-transition: all ease .5s;
-}
-.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text{
-       -webkit-transform: translate3d(0, 0, 0);
-       opacity: 1;
-       -webkit-transition: all ease 1s;
-}
-</pre>
-
-       <h3>Javascript Example</h3>
-
-       <p>In javascript code, you can make your list as SnapListview component as follows:</p>
-<pre class="prettyprint">&lt;script&gt;
-var page = document.getElementById("snaplistTest"),
-    list = document.getElementById("snapList"),
-    listHelper;
-
-page.addEventListener( "pageshow", function() {
-    listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-});
-
-page.addEventListener( "pagehide", function() {
-    listHelper.destroy();
-});
-&lt;/script&gt;
-</pre>
-
-
-       <h3><a id="options-list"></a>Options</h3>
-
-       <table>
-               <tbody>
-               <tr>
-                       <th>Option</th>
-                       <th>Input type</th>
-                       <th>Default value</th>
-                       <th>Description</th>
-               </tr>
-
-               <tr>
-                       <td class="option"><span style="font-family: Courier New,Courier,monospace">marqueeDelay</span></td>
-                       <td class="option">number</td>
-                       <td class="option">0</td>
-                       <td class="option">Sets the delay time for marquee component. The unit of time is millisecond.</td>
-               </tr>
-
-               </tbody>
-       </table>
-
-       <h3><a id="methods-list"></a>Methods</h3>
-
-
-       <dl>
-
-
-               <dt class="tau-method"><code><b><span class="methodName"
-                                                                                 id="method-value">create</span></b></code></dt>
-               <dd>
-                       <div class="brief">
-                               <p>Create related components for SnapListMarqueeStyle.</p>
-                       </div>
-                       <div class="synopsis">
-                               <pre class="signature prettyprint">tau.helper.SnapListMarqueeStyle.create( HTMLElement, options ) </pre>
-                       </div>
-
-                       <p><span class="version">Since: </span>
-                               2.3
-                       </p>
-
-                       <div class="description">
-                               <p>
-                               <p>SnapListMarqueeStyle Object.</p>
-
-
-                               </p>
-                       </div>
-
-
-
-                       <div class="returntype">
-                               <p><span class="return">Return value:</span></p>
-
-                               <table>
-                                       <tbody>
-                                       <tr>
-                                               <th>Type</th>
-                                               <th>Description</th>
-                                       </tr>
-                                       <tr>
-                                               <td>object</td>
-                                               <td>SnapListMarqueeStyle</td>
-                                       </tr>
-                                       </tbody>
-                               </table>
-
-
-                       </div>
-
-                       <div class="example">
-                                                       <span class="example"><p>Code
-                                                               example:</p><p></p></span>
-                                                       <pre name="code" class="examplecode
-                                                       prettyprint">&lt;ul class="ui-listview ui-snap-listview" id="snapList"&gt;
- &lt;li&gt;some element or text&lt;/li&gt;
-&lt;/ul&gt;
-
-&lt;script&gt;
-    var list = document.getElementById("snapList"),
-       listHelper;
-
-    // create helper
-    listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-&lt;/script&gt;
-</pre>
-                       </div>
-
-               </dd>
-               <dt class="tau-method"><code><b><span class="methodName"
-                                                                                 id="method-value">destroy</span></b></code></dt>
-               <dd>
-                       <div class="brief">
-                               <p>Destroy related components for SnapListMarqueeStyle.</p>
-                       </div>
-                       <div class="synopsis">
-                               <pre class="signature prettyprint">destroy ( ) </pre>
-                       </div>
-
-                       <p><span class="version">Since: </span>
-                               2.3
-                       </p>
-
-                       <div class="description">
-                               <p>
-                               <p>No return value</p>
-
-
-                               </p>
-                       </div>
-
-                       <div class="example">
-                                                       <span class="example"><p>Code
-                                                               example:</p><p></p></span>
-                                                       <pre name="code" class="examplecode
-                                                       prettyprint">&lt;ul class="ui-listview ui-snap-listview" id="snapList"&gt;
- &lt;li&gt;some element or text&lt;/li&gt;
-&lt;/ul&gt;
-
-&lt;script&gt;
-    var list = document.getElementById("snapList"),
-       listHelper;
-
-    // create helper
-    listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-
-    // destroy helper
-    listHelper.destroy();
-&lt;/script&gt;
-</pre>
-                       </div>
-
-               </dd>
-
-
-       </dl>
-
-       <script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-       <script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/moreoptions.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/moreoptions.htm
deleted file mode 100755 (executable)
index 7df1c21..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/moreoptions.htm
+++ /dev/null
@@ -1,233 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-               <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-               <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-               <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-               <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-               <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-               <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-               <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>How to support More options</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-               <div id="profile">
-                               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-               </div>
-
-               <div id="toc_border"><div id="toc">
-                               <p class="toc-title">Related Page</p>
-                               <ul class="toc">
-                                               <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-                               </ul>
-               </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>How to support More options</h1>
-
-In rectangular UI, you can implement more options using button and popup components.<p>
-Circular UI provides <a href="../../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_viewSwitcher.htm">viewSwitcher </a> for more options button.<p>
-The following explains how to make the more options for Circular UI.<p>
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-       <li><a href="#layout">Layout</a></li>
-       <li><a href="#htmlCode">HTML code</a></li>
-       <li><a href="#cssCode">CSS code</a></li>
-       <li><a href="#jsCode">Javascript code</a></li>
-</ol>
-
-<h2><a id='layout'></a>Layout</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_moreoption.png" /></td>
-                       <td><img src="../images/round_moreoption.png" /></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table>
-
-<h2><a id='htmlCode'></a>HTML code</h2>
-
-<pre class="prettyprint">
-&lt;div id=&quot;moreoptionsPage&quot; class=&quot;ui-page&quot;&gt;
-               &lt;link rel=&quot;stylesheet&quot;  href=&quot;./moreoptions.css&quot;&gt;
-               &lt;header class=&quot;ui-header ui-has-more&quot;&gt;
-                               &lt;h2 class=&quot;ui-title&quot;&gt;More Options&lt;/h2&gt;
-                               &lt;button type=&quot;button&quot; class=&quot;ui-more ui-icon-overflow&quot;&gt;More Options&lt;/button&gt;
-               &lt;/header&gt;
-               &lt;div class=&quot;ui-content content-padding&quot;&gt;
-                               It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
-               &lt;/div&gt;
-
-               &lt;!-- Rectangular Profile --&gt;
-               &lt;div id=&quot;moreoptionsPopup&quot; class=&quot;ui-popup&quot; data-transition=&quot;slideup&quot;&gt;
-                               &lt;div class=&quot;ui-popup-header&quot;&gt;Options&lt;/div&gt;
-                               &lt;div class=&quot;ui-popup-content&quot;&gt;
-                                               &lt;ul class=&quot;ui-listview&quot;&gt;
-                                                               &lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
-                                                               &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
-                                                               &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
-                                               &lt;/ul&gt;
-                               &lt;/div&gt;
-               &lt;/div&gt;
-
-               &lt;!-- Circular Profile --&gt;
-               &lt;div id=&quot;moreoptionsDrawer&quot; class=&quot;ui-drawer&quot; data-drawer-target=&quot;#moreoptionsPage&quot; data-position=&quot;right&quot; data-enable=&quot;true&quot; data-drag-edge=&quot;1&quot;&gt;
-                               &lt;div id=&quot;pageIndicator&quot; class=&quot;ui-page-indicator&quot;&gt;&lt;/div&gt;
-                               &lt;div id=&quot;viewSwitcher&quot; class=&quot;ui-view-switcher&quot;&gt;
-                                               &lt;div class=&quot;ui-view custom-view&quot;&gt;
-                                                               &lt;button class=&quot;option-button&quot;&gt;1&lt;/button&gt;
-                                               &lt;/div&gt;
-                                               &lt;div class=&quot;ui-view custom-view ui-view-active&quot;&gt;
-                                                               &lt;button class=&quot;option-button&quot;&gt;2&lt;/button&gt;
-                                               &lt;/div&gt;
-                                               &lt;div class=&quot;ui-view custom-view&quot;&gt;
-                                                               &lt;button class=&quot;option-button&quot;&gt;3&lt;/button&gt;
-                                               &lt;/div&gt;
-                                               &lt;div class=&quot;ui-view custom-view&quot;&gt;
-                                                               &lt;button class=&quot;option-button&quot;&gt;4&lt;/button&gt;
-                                               &lt;/div&gt;
-                                               &lt;div class=&quot;ui-view custom-view&quot;&gt;
-                                                               &lt;button class=&quot;option-button&quot;&gt;5&lt;/button&gt;
-                                               &lt;/div&gt;
-                               &lt;/div&gt;
-               &lt;/div&gt;
-&lt;/div&gt;
-
-</pre>
-
-<h2><a id='cssCode'></a>CSS code</h2>
-
-<pre class="prettyprint">
-#moreoptionsDrawer {
-               display: none;
-}
-
-@media all and (-tizen-geometric-shape: circle) {
-               #moreoptionsDrawer {
-                               display: block;
-                               background-color: rgba(255, 255, 255, 0.1);
-                               border-radius: 100%;
-               }
-               #moreoptionsPopup {
-                               display: none;
-               }
-               .sections,
-               .options {
-                               text-align: center;
-               }
-               .option-button {
-                               width: 100%;
-                               height: 100%;
-                               position: relative;
-                               text-align: center;
-                               line-height: 140px;
-                               -webkit-appearance: none;
-                               background-color: transparent;
-                               border-radius: 50%;
-                               border: 0;
-                               color: #000000;
-               }
-               .ui-view-switcher .ui-view.custom-view {
-                               width: 140px;
-                               height: 140px;
-                               border-radius: 50%;
-                               top: -webkit-calc(50% - 70px);
-               }
-}
-</pre>
-
-<h2><a id='jsCode'></a>Javascript code</h2>
-
-<pre class="prettyprint">
-(function(){
-       var page = document.querySelector("#moreoptionsPage"),
-               popup = page.querySelector("#moreoptionsPopup"),
-               drawer = page.querySelector("#moreoptionsDrawer"),
-               handler = page.querySelector(".ui-more"),
-               elPageIndicator = page.querySelector("#pageIndicator"),
-               views = page.querySelectorAll(".ui-view"),
-               viewSwitcherElement = page.querySelector("#viewSwitcher"),
-               drawerMoreHelper;
-
-       page.addEventListener( "pagebeforeshow", function() {
-               var popupWidget,
-                       pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 }),
-                       lastActiveIndex,
-                       viewSwitcher;
-
-               pageIndicator.setActive(1);
-
-               if (tau.support.shape.circle) {
-                       drawerMoreHelper = tau.helper.DrawerMoreStyle.create(drawer, {
-                               handler: ".ui-more"
-                       });
-                       viewSwitcher = tau.widget.ViewSwitcher(viewSwitcherElement);
-                       // using rotary event
-                       document.addEventListener("rotarydetent", function(event) {
-                               var direction = event.detail.direction,
-                                       activeIndex = viewSwitcher.getActiveIndex();
-
-                               event.stopPropagation();
-                               if(direction === "CW") {
-                                       // right
-                                       if (activeIndex < views.length - 1) {
-                                               viewSwitcher.setActiveIndex(activeIndex + 1);
-                                       }
-                               } else {
-                                       // left
-                                       if (activeIndex > 0) {
-                                               viewSwitcher.setActiveIndex(activeIndex - 1);
-                                       }
-                               }
-                               lastActiveIndex = activeIndex;
-                       });
-               } else {
-                       // Shape is rect
-                       popupWidget = tau.widget.Popup(popup);
-                       tau.event.on(handler, "click", function(e){
-                               popupWidget.open();
-                       }, false);
-               }
-
-               viewSwitcherElement.addEventListener("viewchange", function(event) {
-                       var index = event.detail.index;
-                       if (index < 0 || index > views.length - 1) {
-                               return;
-                       }
-                       pageIndicator.setActive(event.detail.index);
-               }, false);
-       });
-
-       page.addEventListener( "pagehide", function() {
-               if (tau.support.shape.circle) {
-                       if (drawerMoreHelper) {
-                               drawerMoreHelper.destroy();
-                       }
-               }
-       });
-})();
-</pre>
-
-<script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/popup.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/popup.htm
deleted file mode 100755 (executable)
index 3539e45..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/popup.htm
+++ /dev/null
@@ -1,124 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-       <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>How to support Popup</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Page</p>
-               <ul class="toc">
-                       <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>How to support Popup</h1>
-
-The following explains how to make the popup buttons for Circular UI.<p>
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-       <li><a href="#layout">Layout (bottom button)</a></li>
-       <li><a href="#htmlCode">HTML code (bottom button)</a></li>
-       <li><a href="#layout2">Layout (side buttons)</a></li>
-       <li><a href="#htmlCode2">HTML code (side buttons)</a></li>
-</ol>
-
-<h2><a id='layout'></a>Layout (bottom button)</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_popup_bottom.png"/></td>
-                       <td><img src="../images/round_popup_bottom.png"/></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table><br>
-
-<p>If you want to put bottom button for Circular UI you have to add class "ui-bottom-button" to popup footer. Popup can have only 1 bottom button.</p>
-<h2><a id='htmlCode'></a>HTML code</h2>
-
-<pre class="prettyprint">
-&lt;div id=&quot;bottomBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-bottom-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;bottomBtn&quot; class=&quot;ui-btn&quot;&gt;Check&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h2><a id='layout2'></a>Layout (side buttons)</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_popup_side.png"/></td>
-                       <td><img src="../images/round_popup_side.png"/></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table><br>
-
-<p>If you want to put side buttons for Circular UI you have to add class "ui-side-button" to popup footer.</p>
-<p>Popup can have only 2 side buttons.</p>
-<h2><a id='htmlCode2'></a>HTML code (side buttons)</h2>
-
-<pre class="prettyprint">
-&lt;style&gt;
-&nbsp;&nbsp;&nbsp;.btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
-&nbsp;&nbsp;&nbsp;.btn-icon-ok::before {-webkit-mask-image: url(./ok.png)}
-&lt;/style&gt;
-&lt;div id=&quot;sideBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-grid-col-2 ui-side-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-1&quot; class=&quot;ui-btn btn-icon-cancel&quot;&gt;Cancel&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-2&quot; class=&quot;ui-btn btn-icon-ok&quot;&gt;OK&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-
-<script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/processing.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/processing.htm
deleted file mode 100755 (executable)
index 8c87570..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/processing.htm
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-       <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>How to support Processing</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Page</p>
-               <ul class="toc">
-                       <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>How to support Processing</h1>
-
-Circular UI provides full size processing component.
-<p>The following explains how to support the full size processing component with former processing component.<p>
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-       <li><a href="#layout">Layout</a></li>
-       <li><a href="#htmlCode">HTML code</a></li>
-       <li><a href="#cssCode">CSS code</a></li>
-</ol>
-
-<h2><a id='layout'></a>Layout</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_processing.png" /></td>
-                       <td><img src="../images/round_processing.png" /></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table>
-
-<h2><a id='htmlCode'></a>HTML code</h2>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageProcessing&quot; data-enable-page-scroll=&quot;false&quot;&gt;
-       &lt;header class=&quot;ui-header&quot;&gt;
-               &lt;h2 class=&quot;ui-title&quot;&gt;Processing&lt;/h2&gt;
-       &lt;/header&gt;
-       &lt;div class=&quot;ui-content content-padding&quot;&gt;
-               &lt;div class=&quot;ui-processing&quot;&gt;&lt;/div&gt;
-               &lt;div class=&quot;ui-processing-text&quot;&gt;
-                       Description about progress
-               &lt;/div&gt;
-       &lt;/div&gt;
-       &lt;div class=&quot;ui-processing ui-processing-full-size&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h2><a id='cssCode'></a>CSS code</h2>
-
-<pre class="prettyprint">
-.ui-processing-full-size {
-       display: none;
-}
-
-@media all and (-tizen-geometric-shape: circle) {
-       .ui-processing {
-               display: none;
-       }
-       .ui-processing.ui-processing-full-size {
-               display: block;
-       }
-}
-</pre>
-
-
-<script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/progress.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/progress.htm
deleted file mode 100644 (file)
index 8b29aff..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/progress.htm
+++ /dev/null
@@ -1,224 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-       <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>How to support Circle Progress Bar</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Page</p>
-               <ul class="toc">
-                       <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>How to support Circle Progress Bar</h1>
-
-Circular UI provides full size circle progress bar component.
-<p>The following explains how to support the full size circle progress bar component with rotary event in Circular UI.<p>
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-       <li><a href="#layout">Layout</a></li>
-       <li><a href="#htmlCode">HTML code</a></li>
-       <li><a href="#cssCode">CSS code</a></li>
-       <li><a href="#jsCode">Javascript code</a></li>
-</ol>
-
-<h2><a id='layout'></a>Layout</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_progress.png" /></td>
-                       <td><img src="../images/round_progress.png" /></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table>
-
-<h2><a id='htmlCode'></a>HTML code</h2>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageCircleProgressBar&quot; data-enable-page-scroll=&quot;false&quot;&gt;
-       &lt;header class=&quot;ui-header&quot;&gt;
-               &lt;h2 class=&quot;ui-title&quot;&gt;Circle Progress&lt;/h2&gt;
-       &lt;/header&gt;
-       &lt;div class=&quot;ui-content content-padding&quot;&gt;
-               &lt;div class=&quot;result&quot; id=&quot;result&quot;&gt;&lt;/div&gt;
-       &lt;/div&gt;
-       &lt;footer class=&quot;ui-footer ui-grid-col-2&quot;&gt;
-               &lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;minus&quot;&gt;-10%&lt;/a&gt;
-               &lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;plus&quot;&gt;+10%&lt;/a&gt;
-       &lt;/footer&gt;
-       &lt;progress class=&quot;ui-circle-progress&quot; id=&quot;circleprogress&quot; max=&quot;100&quot; value=&quot;20&quot;&gt;&lt;/progress&gt;
-&lt;/div&gt;
-</pre>
-
-<h2><a id='cssCode'></a>CSS code</h2>
-
-<pre class="prettyprint">
-.ui-progressbar-large {
-       position: absolute;
-       top: 50%;
-       left: 50%;
-       -webkit-transform: translate3d(-50%, -50%, 0);
-}
-.result {
-       font-size:35px;
-       text-align:center;
-       top: 33%;
-       left: 50%;
-       -webkit-transform: translate3d(-50%, -50%, 0);
-       position: absolute;
-}
-
-@media all and (-tizen-geometric-shape: circle) {
-       .result {
-               top: 50%;
-               margin: 0;
-       }
-       .ui-footer {
-               display: none;
-       }
-}
-</pre>
-
-<h2><a id='jsCode'></a>Javascript code</h2>
-
-<pre class="prettyprint">
-(function(){
-       var page = document.getElementById("pageCircleProgressBar"),
-       progressBar = document.getElementById("circleprogress"),
-       minusBtn = document.getElementById("minus"),
-       plusBtn = document.getElementById("plus"),
-       resultDiv = document.getElementById("result"),
-       isCircle = tau.support.shape.circle,
-       progressBarWidget,
-       resultText,
-       i;
-
-       function printResult() {
-               resultText = progressBarWidget.value();
-               resultDiv.innerHTML = resultText + "%";
-       };
-
-       function clearVariables() {
-               page = null;
-               progressBar = null;
-               minusBtn = null;
-               plusBtn = null;
-               resultDiv = null;
-       };
-
-       function unbindEvents() {
-               page.removeEventListener("pageshow", pageBeforeShowHandler);
-               page.removeEventListener("pagehide", pageHideHandler);
-               if (isCircle) {
-                       document.removeEventListener("rotarydetent", rotaryDetentHandler);
-               } else {
-                       minusBtn.removeEventListener("click", minusBtnClickHandler);
-                       plusBtn.removeEventListener("click", plusBtnClickHandler);
-               }
-       };
-
-       function minusBtnClickHandler() {
-               i = i-10;
-               if (i < 0) {
-                       i=0;
-               }
-               progressBarWidget.value(i);
-               printResult();
-       };
-
-       function plusBtnClickHandler() {
-               i = i+10;
-               if (i > 100) {
-                       i=100;
-               }
-               progressBarWidget.value(i);
-               printResult();
-       };
-
-       function rotaryDetentHandler() {
-               // Get rotary direction
-               var direction = event.detail.direction,
-               value = parseInt(progressBarWidget.value());
-
-               if (direction === "CW") {
-                       // Right direction
-                       if (value < 100) {
-                               value++;
-                       } else {
-                               value = 100;
-                       }
-               } else if (direction === "CCW") {
-                       // Left direction
-                       if (value > 0) {
-                               value--;
-                       } else {
-                               value = 0;
-                       }
-               }
-
-               progressBarWidget.value(value);
-               printResult();
-       }
-
-       function pageBeforeShowHandler() {
-               if (isCircle) {
-               // make Circle Progressbar object
-                       progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "full"});
-                       document.addEventListener("rotarydetent", rotaryDetentHandler);
-               } else {
-                       progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "large"});
-                       minusBtn.addEventListener("click", minusBtnClickHandler);
-                       plusBtn.addEventListener("click", plusBtnClickHandler);
-               }
-
-               i = parseInt(progressBarWidget.value());
-               resultDiv.innerHTML = i + "%";
-       };
-
-       function pageHideHandler() {
-               unbindEvents();
-               clearVariables();
-               // release object
-               progressBarWidget.destroy();
-       };
-
-       page.addEventListener("pagebeforeshow", pageBeforeShowHandler);
-       page.addEventListener("pagehide", pageHideHandler);
-}());
-</pre>
-
-<script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/snaplist.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/snaplist.htm
deleted file mode 100755 (executable)
index ce7b326..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/snaplist.htm
+++ /dev/null
@@ -1,181 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-       <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>How to support List</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Page</p>
-               <ul class="toc">
-                       <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>How to support List</h1>
-
-Circular UI has snap list component. You can implement the snap list with marquee component using the helper.<p>
-More informations for <a href="./helper.htm">SnapListMarqueeStyle helper script</a> are here.<p>
-The following explains how to implement list which can support both Rectangular UI and Circular UI.<p>
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-       <li><a href="#layout">Layout</a></li>
-       <li><a href="#htmlCode">HTML code</a></li>
-       <li><a href="#cssCode">CSS code</a></li>
-       <li><a href="#jsCode">Javascript code</a></li>
-</ol>
-
-<h2><a id='layout'></a>Layout</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_snap.png" /></td>
-                       <td><img src="../images/round_snap.png" /></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table>
-
-<h2><a id='htmlCode'></a>HTML code</h2>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snapListPage&quot; &gt;
-       &lt;header class=&quot;ui-header&quot;&gt;
-               &lt;h2 class=&quot;ui-title&quot;&gt;Snap List&lt;/h2&gt;
-       &lt;/header&gt;
-       &lt;div class=&quot;ui-content&quot;&gt;
-               &lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
-                       &lt;li class=&quot;li-has-3line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;1.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-                       &lt;li class=&quot;li-has-3line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;2.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-                       &lt;li class=&quot;li-has-3line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;3.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-                       &lt;li class=&quot;li-has-3line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;4.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-                       &lt;li class=&quot;li-has-3line&quot;&gt;
-                               &lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;5.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                               &lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-                       &lt;/li&gt;
-               &lt;/ul&gt;
-       &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h2><a id='cssCode'></a>CSS code</h2>
-
-<pre class="prettyprint">
-.ui-listview li .li-text-sub {
-       display: block;
-       text-overflow: ellipsis;
-       overflow: hidden;
-       line-height: 32px;
-       color: rgb(51, 51, 51);
-}
-
-.ui-listview li.li-has-3line {
-       padding-top: 0;
-       padding-bottom: 0;
-       height: 115px;
-}
-
-.ui-listview.expand-list li.li-has-3line .ui-marquee{
-       -webkit-transform: translate3d(0, 30px, 0);
-}
-
-.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-marquee{
-       -webkit-transform: translate3d(0, 0, 0);
-       -webkit-transition: all ease 1s;
-}
-
-.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:nth-child(2){
-       -webkit-transform: translate3d(0, -10px, 0);
-       opacity: 0;
-}
-
-.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:nth-child(2){
-       -webkit-transform: translate3d(0, 0, 0);
-       opacity: 1;
-       -webkit-transition: all ease 1s;
-}
-
-.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:last-child{
-       -webkit-transform: translate3d(0, -42px, 0);
-       opacity: 0;
-}
-
-.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:last-child{
-       -webkit-transform: translate3d(0, 0, 0);
-       opacity: 1;
-       -webkit-transition: all ease 1s;
-}
-</pre>
-
-<h2><a id='jsCode'></a>Javascript code</h2>
-
-<pre class="prettyprint">
-var page = document.querySelector(&quot;#snapListPage&quot;),
-               listHelper;
-
-page.addEventListener( &quot;pagebeforeshow&quot;, function() {
-       var list = document.getElementById(&quot;snapList&quot;);
-
-       if (tau.support.shape.circle) {
-               listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-       }
-});
-
-page.addEventListener( &quot;pagehide&quot;, function() {
-       if (tau.support.shape.circle) {
-               if (listHelper) {
-                       listHelper.destroy();
-               }
-       }
-});
-</pre>
-
-<script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/circularUI/thumbnail.htm b/org.tizen.guides/html/web/tizen/TAU/circularUI/thumbnail.htm
deleted file mode 100755 (executable)
index 31ca36c..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/circularUI/thumbnail.htm
+++ /dev/null
@@ -1,150 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-       <link rel="stylesheet" type="text/css" href="../../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../../scripts/search.js" charset="utf-8"></script>
-       <title>How to support Thumbnail</title>
-</head>
-<body onload="prettyPrint()" id="content">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../../images/ww_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Page</p>
-               <ul class="toc">
-                       <li><a href="../circularUI.htm">Circular UI (Wearable)</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>How to support Thumbnail</h1>
-
-Circular UI provides circle shaped thumbnail.<p>
-The following explains how to implement the thumbnail which can support both Rectangular UI and Circular UI.<p>
-
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-       <li><a href="#layout">Layout</a></li>
-       <li><a href="#htmlCode">HTML code</a></li>
-       <li><a href="#cssCode">CSS code</a></li>
-       <li><a href="#jsCode">Javascript code</a></li>
-</ol>
-
-<h2><a id='layout'></a>Layout</h2>
-
-<table id='tau-circular'>
-       <tbody>
-               <tr>
-                       <td><img src="../images/rectangular_thumbnail.png" /></td>
-                       <td><img src="../images/round_thumbnail.png" /></td>
-               </tr>
-               <tr>
-                       <td align="center">in Rectangular UI</td>
-                       <td align="center">in Circular UI</td>
-               </tr>
-       </tbody>
-</table>
-
-<h2><a id='htmlCode'></a>HTML code</h2>
-
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;sectionChangerPage&quot; data-enable-page-scroll=&quot;false&quot; &gt;
-       &lt;div id=&quot;sectionChanger&quot; class=&quot;ui-content ui-section-changer&quot;&gt;
-               &lt;div id=&quot;scroller&quot;&gt;
-                       &lt;section class=&quot;ui-section-active&quot;&gt;
-                               &lt;div class=&quot;thumbnail&quot;&gt;1&lt;/div&gt;
-                       &lt;/section&gt;
-                       &lt;section&gt;
-                               &lt;div class=&quot;thumbnail&quot;&gt;2&lt;/div&gt;
-                       &lt;/section&gt;
-                       &lt;section&gt;
-                               &lt;div class=&quot;thumbnail&quot;&gt;3&lt;/div&gt;
-                       &lt;/section&gt;
-               &lt;/div&gt;
-       &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h2><a id='cssCode'></a>CSS code</h2>
-
-<pre class="prettyprint">
-section {
-       padding: 0 10px 0 10px;
-       height: 100%;
-}
-.thumbnail {
-       height: 300px;
-       width: 200px;
-       background-color: #80482f;
-       top: 50%;
-       transform: translate3d(0, -50%, 0);
-       position: relative;
-       text-align: center;
-       line-height: 300px;
-}
-.ui-section-active .thumbnail{
-       background-color: #000000;
-       border: 1px solid #a06322;
-}
-
-@media all and (-tizen-geometric-shape: circle) {
-       section {
-               padding: 0;
-       }
-       .thumbnail {
-               height: 200px;
-               width: 200px;
-               border-radius: 50%;
-               background-color: #802532;
-               top: 50%;
-               position: relative;
-               text-align: center;
-               line-height: 200px;
-               transform: scale(0.8) translate3d(0, -60%, 0);
-               transition: transform 300ms;
-       }
-       .ui-section-active .thumbnail{
-               transform: scale(1) translate3d(0, -50%, 0);
-       }
-}
-</pre>
-
-<h2><a id='jsCode'></a>Javascript code</h2>
-
-<pre class="prettyprint">
-(function(){
-       var page = document.getElementById("sectionChangerPage"),
-               sectionChanger = document.getElementById("sectionChanger");
-
-       page.addEventListener( "pagebeforeshow", function() {
-               tau.widget.SectionChanger(sectionChanger, {
-                       orientation: "horizontal",
-                       fillContent: false
-               });
-       });
-})();
-</pre>
-
-<script type="text/javascript" src="../../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../../scripts/showhide.js"></script>
-</div></div></div>
-<div id="footer">
-       <hr size="1">
-       <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
-                       href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
-               3.0</a> and all of the Code Examples contained herein are licensed under <a
-                       href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
-               <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/eventHandling.htm b/org.tizen.guides/html/web/tizen/TAU/eventHandling.htm
deleted file mode 100644 (file)
index 94dd543..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/eventHandling.htm
+++ /dev/null
@@ -1,183 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>Tizen Event Handling</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#hardwarekey">HardwareKey Event</a></li>
-            <li><a href="#rotaryevent">Rotary Event</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="managingPage.htm">Prev: Managing Page</a></li>
-            <li><a href="uiComponent.htm">Next: UI Component</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Tizen Event Handling</h1>
-    <p>The Tizen platform supports some device events for user interaction. <br>
-        To provide a full user experience for your application users, you must handle various events in your application.</p>
-
-    <h2 id="hardwarekey">HardwareKey Event</h2>
-    <p>The Tizen platform supports hardware key events for user interaction on devices.</p>
-    <table id='tau-circular' style="width:95%">
-        <caption>Table: Hardware Key on each device</caption>
-        <tbody>
-        <tr>
-            <td><img alt="Menu and Back keys" src="../../../images/efl_phone.png" /></td>
-            <td><img alt="Back key" src="../../../images/backWearable.png" /></td>
-        </tr>
-        <tr>
-            <td align="center">Menu and Back keys on Mobile device</td>
-            <td align="center">Back key on Wearable device</td>
-        </tr>
-        </tbody>
-    </table>
-
-    <table border="1">
-        <caption> Table: hardware key events</caption>
-        <tbody>
-        <tr>
-            <th>Type</th>
-            <th>Description</th>
-            <th>Attribute</th>
-        </tr>
-        <tr>
-            <td>tizenhwkey</td>
-            <td>Event is triggered when a device detects the user interaction through special point of hardware.</td>
-            <td>
-                <p><span style="font-family: Courier New,Courier,monospace;">event.keyName</span></p>
-                <ul style="padding-left:0">
-                <li><span style="font-family: Courier New,Courier,monospace;">back</span> for wearable.</li>
-                <li><span style="font-family: Courier New,Courier,monospace;">back, menu</span> for mobile.</li>
-                </ul>
-            </td>
-        </tr>
-        </tbody>
-    </table>
-    <p>To bind an event callback on tizenhwkey events, use the following code:</p>
-<pre class="prettyprint">
-window.addEventListener(&quot;tizenhwkey&quot;, function(ev)
-{
-&nbsp;&nbsp;&nbsp;if (ev.keyName == &quot;back&quot;) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Call window.history.back() to go to previous browser window
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Call tizen.application.getCurrentApplication().exit() to exit application
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add script to add another behavior
-&nbsp;&nbsp;&nbsp;}
-});
-</pre>
-
-    <h3>Exit application using H/W Back Key</h3>
-    <p>When application bind 'tizenhwkey' event, it checks page id and decide go back/exit with several lines of app-side script.<br>
-        Tizen Device api provide application exit method. Even if the application has many pages, it can handle page back/app exit process.</p>
-<p>With TAU page, just remember <strong>id</strong> of main page.
-    In this page, let's consider the id of main page as "<strong>main</strong>".</p>
-    <pre class="prettyprint">(&nbsp;function&nbsp;()&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener(&nbsp;'tizenhwkey',&nbsp;function(&nbsp;ev&nbsp;)&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;ev.keyName&nbsp;===&nbsp;&quot;back&quot;&nbsp;)&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;page&nbsp;=&nbsp;document.getElementsByClassName(&nbsp;'ui-page-active'&nbsp;)[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid&nbsp;=&nbsp;page&nbsp;?&nbsp;page.id&nbsp;:&nbsp;&quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;pageid&nbsp;===&nbsp;&quot;main&quot;&nbsp;)&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;catch&nbsp;(ignore)&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;});
-}&nbsp;()&nbsp;);</pre>
-
-    <h2 id="rotaryevent">Rotary Event</h2>
-
-    <p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called <strong>detent</strong>. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
-
-    <table class="note">
-        <tbody>
-        <tr>
-            <th class="note">Note</th>
-        </tr>
-        <tr>
-            <td class="note">This feature is supported in wearable applications only.</td>
-        </tr>
-        </tbody>
-    </table>
-
-
-    <p class="figure">Figure: Rotary device</p>
-    <p align="center"><img alt="Rotary device" src="../../../images/rotary_event.png" /> </p>
-    <p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
-
-    <table border="1">
-        <caption> Table: Rotary events</caption>
-        <tbody>
-        <tr>
-            <th>Type</th>
-            <th>Description</th>
-            <th>Attribute</th>
-        </tr>
-        <tr>
-            <td>rotarydetent</td>
-            <td>Event is triggered when a device detects the detent point.</td>
-            <td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: the rotation direction.
-                <p>The available values are <span style="font-family: Courier New,Courier,monospace;">CW</span> for clockwise and <span style="font-family: Courier New,Courier,monospace;">CCW</span> for counter-clockwise rotation.</p></td>
-        </tr>
-        </tbody>
-    </table>
-
-    <p>To bind an event callback on rotary events, use the following code:</p>
-<pre class="prettyprint">
-document.addEventListener(&quot;rotarydetent&quot;, function(ev)
-{
-&nbsp;&nbsp;&nbsp;var direction = ev.detail.direction;
-&nbsp;&nbsp;&nbsp;/* Add behavior for detent detected event with a direction value */
-});
-</pre>
-
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/TAU/globalization.htm b/org.tizen.guides/html/web/tizen/TAU/globalization.htm
deleted file mode 100644 (file)
index 0a10ed2..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/globalization.htm
+++ /dev/null
@@ -1,487 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>Globalization</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#jquery_globalize">jQuery and Globalize</a></li>
-            <li><a href="#use">Using the Globalize Utility</a></li>
-            <li><a href="#utility">Using the Globalize Utility Methods</a></li>
-            <li><a href="#rtl">Right-to-left (RTL) Language Support</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="accessibility.htm">Prev: Accessibility</a></li>
-        </ul>
-    </div></div>
-</div>
-
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Globalization</h1>
-
-    <p>The TAU Globalize utility supports internationalization and localization. It wraps the <a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> functionality for easy access from Tizen Web applications, and it is extended to support the right-to-left (RTL) languages.</p>
-
-    <h2 id="jquery_globalize" name="jquery_globalize">jQuery and Globalize</h2>
-
-    <p>Globalize is a jQuery JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data. The library works both for the browser and as a Node.js module. jQuery and Globalize have dependencies with <a href="https://github.com/rxaviers/cldrjs" target="_blank">cldr.js</a>, which is a CLDR low-level manipulation tool.</p>
-
-    <p>Globalize:</p>
-    <ul>
-        <li>Leverages the Unicode CLDR data and follows its UTS#35 specification.</li>
-        <li>Keeps the code separate from the i18n content. Does not host or embed any locale data in the library. Empowers you to control the loading mechanism of your choice.</li>
-        <li>Allows you to load as much or as little data as you need. Avoids duplicating data if using multiple i18n libraries that leverage CLDR.</li>
-        <li>Keeps the code modular. Allows you to load the i18n functionalities you need.</li>
-        <li>Runs in browsers and Node.js, and consistently across all of them.</li>
-        <li>Makes globalization as easy to use as jQuery.</li>
-    </ul>
-
-    <h3 id="cldr" name="cldr">CLDR Data</h3>
-
-    <p>The Unicode CLDR provides the key building blocks for software to support the world&#39;s languages. It includes:</p>
-    <ul>
-        <li>Locale-specific patterns for formatting and parsing dates, times, time zones, numbers, and currency values</li>
-        <li>Translations of names: languages, scripts, countries and regions, currencies, eras, months, weekdays, day periods, time zones, cities, and time units</li>
-        <li>Language and script information: characters used, plural cases, gender of lists, capitalization, rules for sorting and searching, writing direction, transliteration rules, rules for spelling out numbers, and rules for segmenting text into graphemes, words, and sentences</li>
-        <li>Country information: language usage, currency information, calendar preference and week conventions, and postal and telephone codes</li>
-        <li>ISO and BCP 47 code support (such as cross-mappings) and keyboard layouts</li>
-    </ul>
-
-    <p>CLDR uses the XML format provided by UTS #35: Unicode Locale Data Markup Language (LDML). LDML is a format used not only for CLDR, but also for the general interchange of locale data. For more information about CLDR, see <a href="http://cldr.unicode.org/index/downloads/cldr-27" target="_blank">CLDR release notes</a>, and to download the JSON format file , see <a href="https://github.com/unicode-cldr/cldr-json" target="_blank">JSON Data from the Unicode CLDR Project</a>.</p>
-    <p>The TAU Globalize utility uses the CLDR 26 release, and when you create a Tizen Web application project, you find CLDR in the <span style="font-family: Courier New,Courier,monospace">&lt;project&gt;/lib/tau/&lt;profile&gt;js/cldr-data</span> folder.</p>
-
-    <h2 id="use" name="use">Using the Globalize Utility</h2>
-
-    <p>To use the TAU Globalize utility in your application:</p>
-    <ol>
-        <li>Download the following dependency files for your application:
-            <ul>
-                <li><a href="https://github.com/rxaviers/cldrjs" target="_blank">Cldr</a>  (v0.4.0)</li>
-                <li><a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> (v1.0.0-alpha.17)</li>
-                <li><a href="http://unicode.org/Public/cldr/26/json-full.zip" target="_blank">Cldr-date</a> (26 version) main and supplemental</li>
-            </ul>
-        </li>
-        <li>Create a folder structure, as shown in the following table.
-            <table>
-                <caption>
-                    Table: Globalize folder structure
-                </caption>
-                <tbody>
-                <tr>
-                    <th colspan="2">Folder structure</th>
-                    <th>Description</th>
-                </tr>
-                <tr>
-                    <td rowspan="7"> <p class="figure"></p>
-                        <p align="center"><img src="../../../images/globalize_folder_structure.png" alt="Globalize folder structure" /></p></td>
-                    <td rowspan="7"> <p class="figure"></p>
-                        <p align="center"><img src="../../../images/globalize_folder_structure_main.png" alt="Globalize main folder" /></p></td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/</span>: Copy the cldr.js library in this folder.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr-data/</span>: Copy the cldr-data files in this folder.
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr-data/main</span>: Copy the languages to be supported in this folder.</p>
-                        <table class="note">
-                            <tbody>
-                            <tr>
-                                <th class="note">Note</th>
-                            </tr>
-                            <tr>
-                                <td class="note">Do not copy all languages, just the ones you need.</td>
-                            </tr>
-                            </tbody>
-                        </table></td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">globalize/</span>: Copy the Globalize library in this folder.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">locale/</span>: Make the custom locale string in this folder.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">script/</span>: JavaScript files.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">style/</span>: CSS, image, and other style related files.</td>
-                </tr>
-                <tr>
-                    <td><span style="font-family: Courier New,Courier,monospace">view/</span>: HTML files</td>
-                </tr>
-                </tbody>
-            </table>
-        </li>
-        <li>Set the locale using the following example code:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* &quot;ko&quot; is the Globalize utility instance */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getLocale()) /* &quot;ko&quot; */
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-
-            <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is not synchronous, and it returns the deferred object with the methods <span style="font-family: Courier New,Courier,monospace">then()</span>, <span style="font-family: Courier New,Courier,monospace">done()</span>, and <span style="font-family: Courier New,Courier,monospace">fail()</span>. Use these methods to receive the Globalize utility instance.</p>
-            <p>You can specify locales in 2 ways using IETF language tags, such as en, pt-BR, or zh-Hant-TW:</p>
-            <ul>
-                <li>Specify the locale ID in the <span style="font-family: Courier New,Courier,monospace">lang</span> attribute of the body element, such as <span style="font-family: Courier New,Courier,monospace">&lt;body lang=&quot;ko-KR&quot;&gt;</span>.</li>
-                <li>Use a string variable as an input argument of the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method (for example <span style="font-family: Courier New,Courier,monospace">ko.setLocale(&quot;en&quot;)</span>) to overwrite the body element setting. </li>
-            </ul>
-            <p>If no <span style="font-family: Courier New,Courier,monospace">lang</span> attribute or <span style="font-family: Courier New,Courier,monospace">setLocale()</span> input argument is defined, the Globalize utility finds the locale by checking the <span style="font-family: Courier New,Courier,monospace">window.navigator.language</span> property. If the check result is false, the utility uses the default locale &quot;en&quot;.</p>
-            <p>The following table illustrates the locale setting method order.</p>
-            <table>
-                <caption>
-                    Table: Locale setting methods
-                </caption>
-                <tbody>
-                <tr>
-                    <th>Order</th>
-                    <th>Locale setting methods</th>
-                </tr>
-                <tr>
-                    <td>1</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">setLocale(LocaleId)</span></td>
-                </tr>
-                <tr>
-                    <td>2</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">&lt;body lang=&quot;ko-KR&quot;&gt;</span></td>
-                </tr>
-                <tr>
-                    <td>3</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">window.navigator.language</span></td>
-                </tr>
-                <tr>
-                    <td>4</td>
-                    <td>Default locale &quot;en&quot;</td>
-                </tr>
-                </tbody>
-            </table>
-        </li>
-        <li>Make sure that you have all required CLDR files.
-            <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method automatically loads the basic CLDR data files which are match the given locale by local AJAX. During the method call, the Globalize utility also loads the basic CLDR JSON files:</p>
-            <ul>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/currencies.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/scriptMetaData.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)</li>
-                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</li>
-            </ul>
-            <p>In addition to the basic files, each Globalize method requires a special set of CLDR portions. Determine which Globalize module functionalities you need, and make sure you have the required files, as defined in the following table.</p>
-
-            <table>
-                <caption>
-                    Table: CLDR requirements
-                </caption>
-                <tbody>
-                <tr>
-                    <th>Module</th>
-                    <th>Required CLDR JSON files</th>
-                </tr>
-                <tr>
-                    <td>Core module</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></td>
-                </tr>
-                <tr>
-                    <td>Date module</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span>
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/timeZoneNames.json</span></p>
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></p>
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></p>
-                        <p>CLDR JSON files from the number module</p></td>
-                </tr>
-                <tr>
-                    <td>Number module</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span>
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></p>
-                        </span></td>
-                </tr>
-                <tr>
-                    <td>Plural module</td>
-                    <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)
-                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</p>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </li>
-    </ol>
-
-    <h2 id="utility" name="utility">Using the Globalize Utility Methods</h2>
-    <p>The following code snippets show how to use the TAU Globalize utility methods:</p>
-    <ul>
-        <li><span style="font-family: Courier New,Courier,monospace">formatCurrency()</span>:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-            <p>For more information, see the <a href="http://en.wikipedia.org/wiki/ISO_4217" target="_blank">currency unit standard in ISO 4217</a>.</p>
-        </li>
-
-        <li><span style="font-family: Courier New,Courier,monospace">formatDate()</span>:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatDate(new Date(), {datetime:&quot;medium&quot;});
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-            <p>For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md" target="_blank">date-formatter</a>.</p>
-        </li>
-
-        <li><span style="font-family: Courier New,Courier,monospace">getCalendar()</span>:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getCalendar().months.format.wide, undefined, 4));
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-            <p>The calendar format is specified in the <span style="font-family: Courier New,Courier,monospace">gregorian.json</span> file in the CLDR data.</p>
-        </li>
-
-        <li><span style="font-family: Courier New,Courier,monospace">formatMessage()</span>:
-            <p>This method supports custom locale data.</p>
-            <ol>
-                <li>Create a directory for each locale that has localized content under the locales directory in the project root. The locale names are defined in the <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA language subtag registry</a>.
-<pre class="prettyprint">
-index.html
-locale
-&nbsp;&nbsp;&nbsp;en.json
-&nbsp;&nbsp;&nbsp;ko.json
-</pre>
-                </li>
-                <li>Create a JSON file for the <span style="font-family: Courier New,Courier,monospace">formatMessage</span> strings (custom locale strings) in locales paths:
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;&quot;en&quot;:
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;like&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{0, plural, offset:1&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=0 {Be the first to like this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=1 {You liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;one {You and someone else liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;other {You and # others liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;}&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;greeting&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;hello&quot;:&quot;hello&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bye&quot;:&quot;bye&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;longText&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;quis exercitationem culpa nesciunt nihil aut nostrum explicabo&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;reprehenderit optio amet ab temporibus asperiores quasi cupiditate.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Voluptatum ducimus voluptates voluptas?&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-                </li>
-
-                <li>Call the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method to load the custom locale files automatically:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ko)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/hello&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/bye&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;longText&quot;));
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-                </li>
-            </ol>
-        </li>
-
-        <li><span style="font-family: Courier New,Courier,monospace">messageFormatter()</span>:
-            <p>This method returns a function that formats a message using the ICU message format pattern. For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/message/message-formatter.md" target="_blank">message-formatter</a>.</p>
-            <ol>
-                <li>Create a locale resource in the locales path:
-<pre class="prettyprint">
-{
-&nbsp;&nbsp;&nbsp;&quot;en&quot;:
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;formatter&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;welcome&quot;:&quot;Hello Mr. {0}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;thankyou&quot;:&quot;Bye Mr. {custom}.&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-                </li>
-
-                <li>Use the <span style="font-family: Courier New,Courier,monospace">messageFormatter()</span> method:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;en-US&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(en)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var welcomeFormatter = en.messageFormatter(&#39;formatter/welcome&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouFormatter  = en.messageFormatter(&#39;formatter/thankyou&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;welcomeMessageList = [&quot;Tom&quot;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouMessageList = {custom:&quot;Tom&quot;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(welcomeFormatter(welcomeMessageList));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(thankyouFormatter(thankyouMessageList));
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-                </li>
-            </ol>
-        </li>
-    </ul>
-
-    <h2 id="rtl" name="rtl">Right-to-left (RTL) Language Support</h2>
-
-    <p>TAU offers 2 ways to handle right-to-left (RTL) languages:</p>
-    <ul>
-        <li>Locale-specific CSS</li>
-        <li>RTL property in a locale object</li>
-    </ul>
-    <p>When the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is called, it automatically applies a CSS class to the body element of your DOM if the given locale has an RTL direction.</p>
-    <p>The following examples show how to use the locale-specific CSS:</p>
-
-    <ul>
-        <li>The following example has ar-EG as the given locale, and the language has an RTL direction:
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ar-EG&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ar)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-        </li>
-
-        <li>The following example has a DOM of body with a locale-specific CSS named <span style="font-family: Courier New,Courier,monospace">ui-script-direction-rtl</span>:
-<pre class="prettyprint">
-&lt;body class=&quot;ui-script-direction-rtl&quot;&gt;
-</pre>
-        </li>
-
-        <li>The following example uses the locale-specific CSS to switch on the RTL feature for a UI component:
-<pre class="prettyprint">
-.ui-script-direction-rtl .ui-listview
-{
-&nbsp;&nbsp;&nbsp;direction: rtl;
-}
-.ui-script-direction-rtl .ui-li.ui-li-static
-{
-&nbsp;&nbsp;&nbsp;text-align: right;
-&nbsp;&nbsp;&nbsp;unicode-bidi: bidi-override;
-}
-</pre>
-        </li>
-    </ul>
-
-    <p>The following example shows how to use the RTL property in a locale object (the <span style="font-family: Courier New,Courier,monospace">rtl</span> variable). If a given locale has an RTL direction, the variable is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
-<pre class="prettyprint">
-var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ar-EG&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-{
-&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
-&nbsp;&nbsp;&nbsp;.done(function(ar)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ar.rtl) /* true */
-&nbsp;&nbsp;&nbsp;})
-})
-</pre>
-
-
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/TAU/helloWorld.htm b/org.tizen.guides/html/web/tizen/TAU/helloWorld.htm
deleted file mode 100644 (file)
index f9cf1c9..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/helloWorld.htm
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>Hello World</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#scaling">Scaling the UI</a></li>
-            <li><a href="#importTAU">Import TAU</a></li>
-            <li><a href="#customJS">Running custom JavaScript and CSS</a></li>
-            <li><a href="#fillContent">Creating Page in body</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="overview.htm">Prev: Overview</a></li>
-            <li><a href="managingPage.htm">Next: Managing Page</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Hello World</h1>
-
-    <p>In this page we describe most basic way to create web application for Tizen using TAU.<br>
-    With this guide you can learn how to import TAU into your application and you can create basic Hello World page.</p>
-
-    <p>The following example shows a Basic TAU template:</p>
-  <pre class="prettyprint">
-&lt;!DOCTYPE&nbsp;html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,&nbsp;user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;myapp.css&quot;&nbsp;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello&nbsp;TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;HTML&nbsp;BODY&nbsp;CONTENT&nbsp;--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-    <p>From here, basic steps for making HelloWorld page.</p>
-
-    <h2 id="scaling">Scaling the UI</h2>
-    <p>The Tizen Advanced UI (TAU) -based template provides 2 scaling methods: device-width and fixed-width.</p>
-    <ul>
-        <li>Device-width scaling <p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone&reg; and Android&reg;. In this mode, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web apps, a 320 px screen width is assumed.</p>
-            <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
-        </li>
-        <li>Fixed-width scaling <p>This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360px screen width.</p>
-            <p>You can also use fixed-width scaling if you do not want to scale your application or if you want to set your own scale. In this case, declare a viewport but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to <span style="font-family: Courier New,Courier,monospace">device-width</span> as follows:</p>
-            <pre class="prettyprint lang-html">&lt;meta name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
-            <p>To enable fixed-width scaling, the header must contain the <span style="font-family: Courier New,Courier,monospace">&lt;meta name=&quot;viewport&quot;&gt;</span> element:</p>
-            <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=360, initial-scale=1, user-scalable=no&quot;&gt;</pre>
-        </li>
-    </ul>
-
-    <h2 id="importTAU">Importing TAU</h2>
-    <p>You can import TAU with the HTML. For better performance, all CSS files should be included in header and all scripts tags should be put before body's close tag:</p>
- <pre class="prettyprint">
-&lt;!DOCTYPE&nbsp;html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;HTML&nbsp;BODY&nbsp;CONTENT&nbsp;--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-    <p>In the HTML, use the following default elements:</p>
-
-    <p>The <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
-    <ul>
-        <li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span> <p>This element is mandatory, as it imports the TAU library, which you need to use the TAU JavaScript Interface.</p></li>
-        <li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
-    </ul>
-
-    <h2 id="customJS">Running custom JavaScript and CSS</h2>
-    <p>You can add an additional <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</span> element to include your own scripts and style sheets.
-        <br>However, place them <strong>after</strong> the default <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements, as you can use any TAU APIs provided by the default libraries.</p>
-    <p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
-    <pre class="prettyprint">&lt;script src=&quot;{YOUR_SCRIPT_PATH}&quot;&gt;&lt;/script&gt;</pre>
-
-    <h2 id="fillContent">Creating Page in body</h2>
-    <p>The body section of the HTML file contains 1 or more pages. <br>
-        To creating page in &lt;body&gt;, you can use &quot;ui-page&quot; class with &lt;div&gt; element:</p>
-      <pre class="prettyprint lang-html">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-    <p>Each pages has a header, content(mandatory) and footer: </p>
-    <pre class="prettyprint lang-html">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello&nbsp;TAU!&lt;/p&gt;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-    <p>Here is mostly basic sample code for Hello World : </p>
-    <pre class="prettyprint lang-html">
-&lt;!DOCTYPE&nbsp;html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,&nbsp;user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;myapp.css&quot;&nbsp;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello&nbsp;TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello&nbsp;TAU!&lt;/p&gt;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;
-    </pre>
-
-
-
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/TAU/images/rectangular_index.png b/org.tizen.guides/html/web/tizen/TAU/images/rectangular_index.png
deleted file mode 100644 (file)
index 1ece1d5..0000000
Binary files a/org.tizen.guides/html/web/tizen/TAU/images/rectangular_index.png and /dev/null differ
diff --git a/org.tizen.guides/html/web/tizen/TAU/images/round_index.png b/org.tizen.guides/html/web/tizen/TAU/images/round_index.png
deleted file mode 100644 (file)
index d7cad3c..0000000
Binary files a/org.tizen.guides/html/web/tizen/TAU/images/round_index.png and /dev/null differ
diff --git a/org.tizen.guides/html/web/tizen/TAU/managingPage.htm b/org.tizen.guides/html/web/tizen/TAU/managingPage.htm
deleted file mode 100644 (file)
index ad93081..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/managingPage.htm
+++ /dev/null
@@ -1,258 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>Managing Page</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#structure">Page Structure</a></li>
-            <li><a href="#createone">Creating Single Page</a></li>
-            <li><a href="#createtwo">Creating Multiple Pages in one HTML code</a></li>
-            <li><a href="#pageRouting">Page Routing</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="helloWorld.htm">Prev: Hello World</a></li>
-            <li><a href="eventHandling.htm">Next: Tizen Event Handling</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Managing Page</h1>
-
-    <p>The basic building block of an application UI in the TAU library is the <span style="font-family: Courier New,Courier,monospace">Page</span> element, which includes all other elements. The element is optional and extendable, so you can have any element for grouping controls you want. </p>
-
-    <h2 id="structure">Page Structure</h2>
-    <p>The page consist of:</p>
-    <ul>
-        <li>Header area
-            <p>Shows the user which page is currently open. The header can contain buttons, menus, and toolbars. The header is optional.</p></li>
-        <li>Content area
-            <p>Contains the main application content. The content area has an optional scroll bar.</p></li>
-        <li>Footer area
-            <p>Contains a status line or buttons. The footer is optional.</p></li>
-    </ul>
-    <p>All the page areas are specified by a corresponding <span style="font-family: Courier New,Courier,monospace">class</span> attribute.</p>
-
-    <p class="figure">Figure: Page content</p>
-    <p align="center"><img src="../../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
-
-    <p>If there is no <span style="font-family: Courier New,Courier,monospace">Page</span> element in the markup, TAU creates one. For example, if no <span style="font-family: Courier New,Courier,monospace">Page</span> element exists:</p>
-<pre class="prettyprint">&lt;span&gt;I have no page&lt;/span&gt;
-    <p>TAU creates page:</p>
-    <pre class="prettyprint">&lt;div class="ui-page"&gt;&lt;span&gt;I have no page&lt;/span&gt;&lt;/div&gt;
-</pre>
-    <h2 id="createone">Creating Single Page</h2>
-    <p>For create single page put code to your application:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;Simple page
-&lt;/div&gt;
-</pre>
-
-
-    <p>To create a page on your application use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> value. TAU uses that information to properly acquire the <span style="font-family: Courier New,Courier,monospace">div</span> element and bind the DOM element to its JavaScript component implementation.</p>
-
-    <p>To create a page:</p>
-    <ol>
-        <li><p>Create a header area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-header&quot;</span> attribute:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;This is a header&lt;/div&gt;
-&lt;/div&gt;
-</pre></li>
-        <li><p>Create a footer area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-footer&quot;</span> attribute:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;This is a footer&lt;/div&gt;
-&lt;/div&gt;
-</pre></li>
-
-        <li><p>Create the main content area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-content&quot;</span> attribute:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;MyApplication header&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello world!
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;Application status line&lt;/div&gt;
-&lt;/div&gt;
-</pre></li>
-        <li><p>The previous example shows a full page structure. The header and footer areas can contain multiple UI components, such as buttons or images.</p>
-            <p>The following example shows a title bar with a <strong>More Options</strong> button and an icon:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title ui-icon&quot; style=&quot;background-image: url(image.png);&quot;&gt;Title&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-more ui-icon-overflow&quot;&gt;More Options&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;MyApplication content&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-        </li>
-        <li>
-            <p>You can also create a popup for your page:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;Popup Open Page&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#popup&quot; class=&quot;ui-btn&quot; data-rel=&quot;popup&quot;&gt;Popup Open&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;popup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Popup Page&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;Popup Content&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-            <p>The popup works because TAU opens (makes visible) the page whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information see <a href="#basic_page_routing">Managing Page Routing</a>.</p>
-        </li>
-    </ol>
-
-    <h2 id="createtwo">Creating Multiple Pages in one HTML code</h2>
-    <p>You can implement a template containing multiple <span style="font-family: Courier New,Courier,monospace">page</span> containers in  the application <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
-    <p>In the multi-page layout, the main page is defined with the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class. If no page has the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.</p>
-    <p>
-    <pre class="prettyprint">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-    <h2 id="pageRouting" name="basic_page_routing">Page Routing</h2>
-
-    <p>TAU is basically a UI framework, but since its purpose is to ease application building, it also provides basic functionality for changing pages in multi-page applications. The mechanics behind page routing are simple, and works without any additional JavaScript code. You can use the JavaScript API to get more powerful page routing functionalities.</p>
-
-    <p>To manage page routing:</p>
-
-    <h3>Routing with href</h3>
-            <p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <span style="font-family: Courier New,Courier,monospace">#hashtag</span> changes and tries to display the page that has the <span style="font-family: Courier New,Courier,monospace">id</span> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
-            <p>TAU uses every <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <span style="font-family: Courier New,Courier,monospace">href</span> attribute work with the framework router. The active page has an <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
-<pre class="prettyprint">&lt;!--pageOne.html--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageTwo.html&quot;&gt;Go to page two&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;!--pageTwo.html--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageOne.html&quot;&gt;Go to page one&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-    <p>With Multiple pages in one HTML code, you can use only id of page in href attribute:</p>
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#two&quot;&gt;Go to page two&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#first&quot;&gt;Go to page one&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-    <h3>Routing using the API</h3>
-            <p>You can change pages through the TAU API by using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method:</p>
-<pre class="prettyprint">&lt;!--pageTwo.html--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You are viewing the first page of the example.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;first-button&quot;&gt;Click here to change to page two&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el1 = document.getElementById(&quot;first-button&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el1.addEventListener(&quot;click&quot;, function ()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageTwo.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/div&gt;
-
-&lt;!--pageTwo.html--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;second&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the second page of the example.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;second-button&quot;&gt;Click here to change to page one&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el2 = document.getElementById(&quot;second-button&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el2.addEventListener(&quot;click&quot;, function ()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageOne.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/div&gt;
-</pre>
-
-
-        <h3>Loading pages from external resources</h3>
-            <p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <span style="font-family: Courier New,Courier,monospace">base</span> element&#39;s <span style="font-family: Courier New,Courier,monospace">href</span> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
-            <p>To load pages from external resources, define the proper local address in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute of the link:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot;&gt;Change to external&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-            <p>To create an external link that is not supposed to be handled by the TAU router, use the <span style="font-family: Courier New,Courier,monospace">rel=&quot;external&quot;</span>, <span style="font-family: Courier New,Courier,monospace">data-ajax=&quot;false&quot;</span>, or <span style="font-family: Courier New,Courier,monospace">target=&quot;_self&quot;</span> attribute:</p>
-<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot; target=&quot;_self&quot;&gt;Change to external&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/overview.htm b/org.tizen.guides/html/web/tizen/TAU/overview.htm
deleted file mode 100644 (file)
index e0b096f..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/overview.htm
+++ /dev/null
@@ -1,91 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>Overview</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="helloWorld.htm">Next: Hello World</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Overview</h1>
-
-    <p>Web UI Framework components allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which gives you interaction with and manipulation features.</p>
-
-    <p>For more information about components and the Tizen Advanced UI (TAU) look to UI Component Reference (for <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/widget_reference.htm">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_reference.htm">wearable</a> applications). TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of Web UI Framework Library were coding simplification and application creation speed. The purpose of TAU is to be the &quot;framework advanced to the next level&quot;.</p>
-
-    <p>When using TAU you will get many benefits usable in your code:</p>
-    <ul>
-        <li>TAU is a standalone library, so no additional libraries are needed.</li>
-        <li>TAU can be used with jQuery, as it exposes a special API to the jQuery object identical to jQuery Mobile. Migration is painless.</li>
-        <li>TAU has been written with speed in mind and all the code is tweaked for maximum performance.</li>
-        <li>Applications can be built to dramatically improve startup performance.</li>
-        <li>TAU is ECMAScript5- and HTML5-compliant.</li>
-        <li>TAU has large and open API, methods and core functions (for example: event utility functions) are available and not hidden.</li>
-        <li>TAU is customizable and easy to extend (to create new UI components).</li>
-        <li>TAU is optimized for wearable, mobile, and TV devices.</li>
-        <li>TAU supports various profiles (mobile, wearable, and TV).</li>
-    </ul>
-
-    <table class="note">
-        <tbody>
-        <tr>
-            <th class="note">Note <i>(important!)</i></th>
-        </tr>
-        <tr>
-            <td class="note"><strong>TAU (Tizen Advanced UI)</strong> is the new name of tizen-web-ui-fw.
-            </td>
-        </tr>
-        <tr>
-            <td class="note"><p><strong>Since 2.3,</strong> tizen-web-ui-fw has been <i><strong>deprecated</strong></i> (include tizen-web-ui-fw.js, tizen-web-ui-fw-libs.js, tizen-web-ui-fw.css). <br>So, in all documents and source code, TAU is used instead of tizen-web-ui-fw.</p>
-                <p><strong>Since 2.4</strong>, tizen-web-ui-fw <span style="color:red">will be fully deleted</span> and we will <strong>not support</strong> old version anymore.</p>
-            </td>
-        </tr>
-        </tbody>
-    </table>
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/tau.htm b/org.tizen.guides/html/web/tizen/TAU/tau.htm
deleted file mode 100644 (file)
index 3c8b948..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/tau.htm
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>Tizen Advanced UI Framework (TAU)</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="overview.htm">Next: Overview</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>Tizen Advanced UI Framework (TAU)</h1>
-
-    <p>To get more guides for using TAU in your application, you can click following links and go to related pages.</p>
-
-    <h2 id="table_contents">Table of Contents</h2>
-    <table id="tau" border="1">
-        <tbody>
-        <tr>
-            <th>Title</th>
-            <th>Description</th>
-        </tr>
-
-        <tr>
-            <td><a href="overview.htm">Overview</a></td>
-            <td>Overview of TAU features and advantages.</td>
-        </tr>
-        <tr>
-            <td><a href="helloWorld.htm">Hello World</a></td>
-            <td>Most basic guide and template to make web application using TAU.</td>
-        </tr>
-        <tr>
-            <td><a href="managingPage.htm">Managing Page</a></td>
-            <td>Description of managing TAU Pages (structure, routing).</td>
-        </tr>
-        <tr>
-            <td><a href="eventHandling.htm">Tizen Event Handling</a></td>
-            <td>Description of handling Tizen-specific event.</td>
-        </tr>
-        <tr>
-            <td><a href="uiComponent.htm">UI Component</a></td>
-            <td>Description of creating and managing UI Components.</td>
-        </tr>
-        <tr>
-            <td><a href="tutorialNotepad.htm">How to Creating Notepad Application</a></td>
-            <td>Tutorial: From A to Z about creating Notepad Application with TAU.</td>
-        </tr>
-        <tr>
-            <td><a href="circularUI.htm">Circular UI (Wearable)</a></td>
-            <td>Guides for how to apply circular UI to wearable application.</td>
-        </tr>
-        <tr>
-            <td><a href="accessibility.htm">Accessibility</a></td>
-            <td>Description of accessibility in TAU.</td>
-        </tr>
-        <tr>
-            <td><a href="globalization.htm">Globalization</a></td>
-            <td>Description of globalization in TAU.</td>
-        </tr>
-
-
-        </tbody>
-    </table>
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/TAU/tutorialNotepad.htm b/org.tizen.guides/html/web/tizen/TAU/tutorialNotepad.htm
deleted file mode 100644 (file)
index 3b9c687..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/tutorialNotepad.htm
+++ /dev/null
@@ -1,448 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>How to Creating Notepad Application</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="uiComponent.htm">Prev: UI Component</a></li>
-            <li><a href="circularUI.htm">Next: Circular UI (Wearable)</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>How to Creating Notepad Application</h1>
-
-    <p>The notepad application shows all the notes in the main page, and allows the user to add new notes, edit existing notes, and delete notes by swiping them. The notes on the main page can be scrolled and edited, and a button is provided for adding a new note. After you click a note, it is displayed in the edit page for editing.</p>
-
-    <p>To create a simple notepad application using the TAU library:</p>
-
-
-        <h2>Generate an application from the Tizen SDK.</h2>
-            <p>Create a simple basic application that can be used for further development:</p>
-            <ol type="a"><li>In the IDE menu, go to
-                <strong>File &gt; New &gt; Tizen Web Project &gt; WEARABLE-2.3 &gt; Wearable UI &gt; Basic Application</strong>.</li>
-                <li>Enter the application name as <strong>Notes</strong> and click <strong>Finish</strong>.</li></ol>
-            <p>The IDE creates the application with a default file structure.</p>
-
-        <h2>Edit the section header for the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</h2>
-            <p>Because the application runs on mobile or wearable devices, make sure that you have the correct <span style="font-family: Courier New,Courier,monospace">tau.css</span> styles for the corresponding profile:</p>
-            <ul><li>Mobile:
-                <pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.min.css&quot;/&gt;</pre></li>
-                <li>Wearable:
-                    <pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;/&gt;</pre>
-                </li></ul>
-            <p>Add also your own styles for the application:</p>
-<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
-</pre>
-
-            <p>The following example shows how the section header looks after editing:</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen basic template generated by Tizen Web IDE&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;title&gt;Notepad&lt;/title&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Use &#39;mobile&#39; or &#39;wearable&#39; to choose the device TAU profile--&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
-&lt;/head&gt;</pre>
-
-        <h2>Create the pages: the main page for displaying the notes and the editing page for adding and editing notes.</h2>
-            <h3>The main page is the first page, defined with the <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class and <span style="font-family: Courier New,Courier,monospace">main</span> id.</h3>
-                <ol type="a"><li>Add the title header (<strong>Notes</strong>) for the page:
-<pre class="prettyprint">
-&lt;div id=&quot;main&quot; class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&lt;/div&gt;
-</pre></li>
-                    <li>Add content for the main page by adding a <span style="font-family: Courier New,Courier,monospace">div</span> element with
-                        the <span style="font-family: Courier New,Courier,monospace">_ui-content</span> class. Add to this a <span style="font-family: Courier New,Courier,monospace">ul</span> element, which creates the list of notes.
-                        <p>Set the <span style="font-family: Courier New,Courier,monospace">data-scroll=&quot;y&quot;</span> and <span style="font-family: Courier New,Courier,monospace">data-handler=&quot;true&quot;</span> attributes.</p>
-                        <p>The item in the list is represented as a <span style="font-family: Courier New,Courier,monospace">li</span> element. When a note on the main page is clicked, the application triggers the <span style="font-family: Courier New,Courier,monospace">changepage</span> event to the <span style="font-family: Courier New,Courier,monospace">editor</span> page and shows the item.</p>
-<pre class="prettyprint">
-&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
-&lt;/div&gt;
-</pre></li>
-                    <li>Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an <span style="font-family: Courier New,Courier,monospace">a</span> element,
-                        which has the <span style="font-family: Courier New,Courier,monospace">id=&quot;newBtn&quot;</span> attribute.
-<pre class="prettyprint">
-&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
-&lt;/div&gt;
-</pre></li></ol>
-                <p>The above examples apply to a wearable application. The following example shows the full code for the main page in a mobile application:</p>
-<pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-                <table class="note">
-                    <tbody>
-                    <tr>
-                        <th class="note">Note</th>
-                    </tr>
-                    <tr>
-                        <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
-                    </tr>
-                    </tbody>
-                </table>
-
-
-                <h3>On the editing page, the header and footer are similar to main page.</h3><p> The only difference is that the
-                    action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <span style="font-family: Courier New,Courier,monospace">div</span> block with
-                    the <span style="font-family: Courier New,Courier,monospace">id=&quot;editor&quot;</span> and <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-page&quot;</span> attributes.</p>
-                    <p>The editing page is needed for adding or editing a selected note. It has a <span style="font-family: Courier New,Courier,monospace">textarea</span> element to allow the user to edit the selected note.</p>
-
-<pre class="prettyprint">
-&lt;!--This code applies to wearable applications--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;editor&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Editor&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id=&quot;editorField&quot; placeholder=&quot;enter note&quot;&gt;&lt;/textarea&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;javascript:void()&quot; id=&quot;saveBtn&quot;&gt;Save&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre></li></ol></li>
-
-        <h2>Link to the TAU library sources and add the script to the application:</h2>
-<pre class="prettyprint">
-&lt;script src=&quot;lib/jquery.js&quot;&gt;&lt;/script&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot; data-build-remove=&quot;false&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-</pre>
-
-            <p>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file is now ready.</p>
-
-
-        <h2>Add styles for the content:</h2>
-<pre class="prettyprint">
-a
-{
-&nbsp;&nbsp;&nbsp;color: #FFF;
-}
-
-#notesList.ui-listview
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-}
-
-#notesList.ui-listview li
-{
-&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;white-space: nowrap;
-}
-
-#notesList.ui-listview li .ui-inline
-{
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;right: 5px;
-&nbsp;&nbsp;&nbsp;top: 5px;
-}
-
-#notesList.ui-listview li .ui-swipe-item-cover-inner
-{
-&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-}
-
-#editor .ui-scrollview-view
-{
-&nbsp;&nbsp;&nbsp;height: 100%;
-}
-
-#editor textarea
-{
-&nbsp;&nbsp;&nbsp;height: 95%;
-&nbsp;&nbsp;&nbsp;width: 100%;
-}
-</pre>
-
-        <h2>Create the <span style="font-family: Courier New,Courier,monospace">main.js</span> file and create a function to close the application:</h2>
-Application will be started when HTML content will be ready.
-<pre class="prettyprint">
-document.addEventListener("DOMContentLoaded", function ()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var newBtn = document.getElementById(&#39;newBtn&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn = document.getElementById(&#39;saveBtn&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField = document.getElementById(&#39;editorField&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList = document.getElementById(&#39;notesList&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage = document.getElementById(&#39;editor&#39;),
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mainPageId = &#39;#main&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPageId = &#39;#editor&#39;,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EMPTY_CONTENT = &#39;(empty)&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_KEY = &#39;notepad&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Get data from local storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @return {Array}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getStorage(key)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return JSON.parse(window.localStorage.getItem(key)) || false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Add data to local storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @param {Array} data
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function addStorage(data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Return current page ID
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @returns
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getCurrentPageId()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return $(&#39;.ui-page:visible&#39;)[0].id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Refresh current page */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function refreshCurrentPage()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#&#39; + getCurrentPageId()).trigger(&#39;create&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Get notes from storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @return {Array}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getNotes()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return getStorage(STORAGE_KEY) || [];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear list with notes */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearNotesList()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.innerHTML = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete note from storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function deleteNote(index)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes.splice(index, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;deleteNote: note not found&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Edit note using array index
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @param index
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function editNote(index)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = index;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = getNotes()[index];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;editNote: note not found&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show all notes extracted from local storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function showNotes()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesLen = notes.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeCover = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeItem = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearNotesList();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i; i &lt; notesLen; i += 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = document.createElement(&#39;li&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.addEventListener(&#39;click&#39;, editNote.bind(this, i), false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = document.createElement(&#39;button&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.className(&#39;ui-btn&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.setAttribute(&#39;data-inline&#39;, &#39;true&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.innerText = &#39;Delete&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.addEventListener(&#39;click&#39;, deleteNote.bind(this, i), false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.innerText = notes[i].replace(/\n/g, &#39; &#39;) || EMPTY_CONTENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.appendChild(deleteBtn);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.appendChild(li);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst = tau.widget.getInstance(notesList);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.Button(deleteBtn);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst.refresh();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear editor textarea */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearEditor()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save note to storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function saveNote()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (currentIndex !== null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes[currentIndex] = editorField.value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes.push(editorField.value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(mainPageId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New note button handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function newNote()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* On editor page show handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function onEditorPageShow()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.focus();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Attach events */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function events()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newBtn.addEventListener(&#39;click&#39;, newNote);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn.addEventListener(&#39;click&#39;, saveNote);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage.addEventListener(&#39;pageshow&#39;, onEditorPageShow);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function (e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName === &quot;back&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen.application)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (getCurrentPageId())
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case &#39;main&#39;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function init()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;events();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init();
-&nbsp;&nbsp;&nbsp;}, false);
-</pre>
-            <p>Now the application is ready and you can deploy it to a device or Emulator.</p>
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/TAU/uiComponent.htm b/org.tizen.guides/html/web/tizen/TAU/uiComponent.htm
deleted file mode 100644 (file)
index b9684b9..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/uiComponent.htm
+++ /dev/null
@@ -1,194 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>UI Component</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#creating">Defining UI Component</a></li>
-            <li><a href="#setoption">Setting options to UI Component</a></li>
-            <li><a href="#jquery">Managing UI Component with JQuery</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI framework (TAU): API Reference</a></li>
-            <li><a href="tau.htm">TAU Guide: Table of Contents</a></li>
-            <li><a href="eventHandling.htm">Prev: Tizen Event Handling</a></li>
-            <li><a href="tutorialNotepad.htm">Next: How to Creating Notepad Application</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-    <h1>UI Component</h1>
-
-    <p>In this section, we describe multiple-way to manage UI Components.</p>
-    <h2 id="creating">Defining UI Component</h2>
-    <p>Each UI Component (widget) in TAU has own selector for auto dectect in HTML file. The most popular selectors are <span style="font-family: Courier New,Courier,monospace;">classes</span>, old style of selectors is <span style="font-family: Courier New,Courier,monospace;">data-role</span> which is deprecated. Some UI Components have also simmle HTML selectors like Button (Button component), input[type=checkbox] (CheckboxRadio component).<br>
-    If you want detail of each selectors name, please refer <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">UI Component Reference</a>.</p>
-
-    <h3>With <span style="font-family: Courier New,Courier,monospace;">class</span> selector</h3>
-    <p>We recommend to use class selector for each component. Class selectors in TAU are composed with <span style="font-family: Courier New,Courier,monospace;">&quot;ui-&quot;</span>prefix and &lt;COMPONENT_NAME&gt;.<br>
-    <br>Here is HTML example of creating some components with class selector:</p>
-    <pre class="prettyprint">
-&lt;!--&nbsp;Create&nbsp;Expandable&nbsp;component&nbsp;--&gt;
-&lt;div&nbsp;class=&quot;ui-expandable&quot;&nbsp;id=&quot;expandable-test&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable&nbsp;head&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
-&lt;/div&gt;</pre>
-    <pre class="prettyprint">
-&lt;!--&nbsp;Create&nbsp;ToggleSwitch&nbsp;component&nbsp;--&gt;
-&lt;select&nbsp;class=&quot;ui-toggleswitch&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;off&quot;&gt;&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;on&quot;&gt;&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-    <h3>With <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector</h3>
-    <p>data-role selector in TAU composed with &lt;COMPONENT_NAME&gt; in lowercase.<br>
-        <br>Here is HTML example of creating some components with data-role selector:</p>
-    <pre class="prettyprint">
-&lt;!--&nbsp;Create&nbsp;TextEnveloper&nbsp;component&nbsp;--&gt;
-&lt;div&nbsp;data-role=&quot;textenveloper&quot;&gt;&lt;/div&gt;</pre>
-    <pre class="prettyprint">
-&lt;!--&nbsp;Create&nbsp;Drawer&nbsp;component&nbsp;--&gt;
-&lt;div&nbsp;data-role=&quot;drawer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;data-role=&quot;listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;List&nbsp;item&nbsp;1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&lt;/div&gt;</pre>
-
-    <h2 id="setoption">Setting options to UI Component</h2>
-    <p>TAU supports several way of setting options for UI Component.<br>
-    There are several options in each component. For more information, please refer <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">UI Component Reference</a></p>
-
-    <h3>Init options with <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute</h3>
-    <p>Various options can be set at creating time with <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute. This type of setting options is called only when component is created. After firs create of component changeing data attributes on HTML element not change component options.
-    <br>Here, please refer SectionChanger code with data- option:</p>
-    <pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&nbsp;data-circular=&quot;true&quot;&nbsp;data-use-tab=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;</pre>
-    <p><span style="font-family: Courier New,Courier,monospace;">data-circular<span style="font-family: Courier New,Courier,monospace;"> and <span style="font-family: Courier New,Courier,monospace;">data-use-tab</span> will be initial option for creating SectionChanger.</p>
-
-    <h3>options with Manual Constructor</h3>
-    <p>Options can be also set as argument to component constructor. When using options as argument you should use camelCase name.<br>
-    Please refer following example. It is same as data- option.:</p>
-<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;id=&quot;sectionchanger&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var&nbsp;sectionEl&nbsp;=&nbsp;document.getElementById(&quot;sectionchanger&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionEl,&nbsp;{&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation:&nbsp;&quot;horizontal&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circular:&nbsp;true
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useTab:&nbsp;true
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&lt;/script&gt;
-</pre>
-    <h3>options with method call</h3>
-    <p>To set options dynamically, use <span style="font-family: Courier New,Courier,monospace;">option</span>() method.</p>
-    <pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&nbsp;data-circular=&quot;true&quot;&nbsp;data-use-tab=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var&nbsp;sectionEl&nbsp;=&nbsp;document.getElementById(&quot;sectionchanger&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionEl);
-
-&nbsp;&nbsp;&nbsp;sectionChangerWidget.option("circular", true);
-&lt;/script&gt;
-</pre>
-
-    <h2 id="jquery">Managing UI Component with JQuery</h2>
-    <p>Developers can use JQuery with TAU for convenience. Also for backward compatibility, TAU supports JQuery interface for UI components. BUT, we strongly recommend to use new TAU style.</p>
-    <h3>Creating UI components</h3>
-    <p>If the jQuery library is loaded, you can use this way to creating component:</p>
-    <pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar();
-&lt;/script&gt;</pre>
-    <h3>Using methods</h3>
-    <p>If the jQuery library is loaded, you can use this way to call method of component:</p>
-    <pre class="prettyprint">$(&quot;.selector&quot;).componentName(&quot;methodName&quot;,&nbsp;argument1,&nbsp;argument2,&nbsp;...);</pre>
-    <pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;// If IndexScrollBar component is created
-&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar("destroy");
-&lt;/script&gt;</pre>
-
-    <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-    <script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-    <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-25976949-1']);
-    _gaq.push(['_trackPageview']);
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.guides/html/web/tizen/TAU/uifw_guide_w.htm b/org.tizen.guides/html/web/tizen/TAU/uifw_guide_w.htm
deleted file mode 100644 (file)
index 8883848..0000000
--- a/org.tizen.guides/html/web/tizen/TAU/uifw_guide_w.htm
+++ /dev/null
@@ -1,219 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Web UI Framework (UIFW)</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#template">UI Service Template</a></li>
-            <li><a href="#features">UI Framework Features</a></li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-               <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Tizen Web UI Framework (UIFW) Tutorial</a></li>
-               <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm">Tizen Web UI Framework API for Mobile Web</a></li>
-               <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen Web UI Framework API for Wearable Web</a></li>          
-               </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Web UI Framework (UIFW)</h1>
-
-       <p>Web UI Framework features allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which you can interact with and manipulate.</p>
-
-       <p>The Tizen UI components creation and features include:</p>
-  <ul>
-   <li><a href="#template">UI Service Template</a> <p>UI components are created using the Web UI service template, which works on a Web browser running on the <a href="http://www.webkit.org/" target="_blank">WebKit</a> engine.</p> </li>
-   <li><a href="#features">UI Framework Features</a> <p>General features of Web UI service components.</p> </li>
-  </ul>
-
-  <p>For more information on the component details and the Tizen Advanced UI (TAU), see UI Component Reference (for <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/widget_reference.htm">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_reference.htm">wearable</a> applications). TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework Library (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of Web UI Framework Library were coding simplification and application creation speed. The purpose of TAU is to be the &quot;framework advanced to the next level&quot;.</p>
- 
- <p>With TAU, you can take advantage of the following benefits in your code:</p>
-<ul>
-       <li>TAU is a standalone library, so no additional libraries are needed.</li>
-       <li>TAU can be used with jQuery, as it exposes a special API to the jQuery object identical to jQuery Mobile. Migration is painless.</li>
-       <li>TAU has been written with speed in mind, and all the code is tweaked for maximum performance.</li>
-       <li>Applications can be built to dramatically improve startup performance.</li>
-       <li>TAU is ECMAScript5- and HTML5-compliant.</li>
-       <li>As a large and open API, TAU methods and core functions (event utility functions) are available and not hidden.</li>
-       <li>TAU is customizable and easy to extend (to create new UI components).</li>
-       <li>TAU is optimized for wearable, mobile, and TV devices.</li>
-       <li>TAU supports various profiles (mobile, wearable, and TV).</li>
-</ul>
-
-  <h2 id="template" name="template">UI Service Template</h2>
-  <p>You can use the Web UI service by importing the Tizen Advanced UI (TAU) library by <a href="#tags">declaring the applicable script in the HTML header</a>.</p>
-  <p>The following example shows a UI service template:</p>
-  <pre class="prettyprint">
-&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Page Title&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;../lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;../lib/tau/mobile/theme/default/tau.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;my.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HTML body content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-  <p>To use the Web UI service template:</p>
-  <ol>
-   <li><a href="#tags">Implement the HTML content.</a></li>
-   <li><a href="#scaling">Scale the UI.</a></li>
-   <li><a href="#js">Run the JavaScript API.</a></li>
-  </ol>
-
-    <h3 id="tags" name="tags">Implementing HTML Content</h3>
-  <p>The Web UI service template structure begins with the HTML header:</p>
-  <pre class="prettyprint lang-html">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
-&lt;title&gt;Page Title&lt;/title&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;../lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&lt;link rel=&quot;stylesheet&quot; href=&quot;../lib/tau/mobile/theme/default/tau.css&quot;&gt;
-&lt;script src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
-&lt;link rel=&quot;stylesheet&quot; href=&quot;my.css&quot;/&gt;
-</pre>
-  <p>In the header, use the following default elements:</p>
-  <ul>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;title&gt;</span> <p>The <span style="font-family: Courier New,Courier,monospace">&lt;title&gt;</span> element is used to set the application title.</p></li>
-   <li><span style="font-family: Courier New,Courier,monospace">&lt;script&gt; and &lt;style&gt;</span> <p>The <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
-    <ul>
-     <li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span> <p>This element is mandatory, as it imports the TAU library, which you need to use the Web UI service.</p></li>
-     <li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
-    </ul>
-   </li>
-  </ul>
-  <p>You can add an additional <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</span> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements, as you can use any TAU APIs provided by the default libraries.</p>
-  <p>The body section of the HTML file contains 1 or more pages, where each page has a header, content, and a footer.</p>
-
-  <h3 id="scaling" name="scaling">Scaling the UI</h3>
-  <p>The Tizen Advanced UI (TAU) -based template provides 2 scaling methods: device-width and fixed-width.</p>
-  <ul>
-   <li>Device-width scaling <p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone&reg; and Android&reg;. In this mode, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web apps, a 320 px screen width is assumed.</p>
-   <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
-   </li>
-   <li>Fixed-width scaling <p>This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360 px screen width.</p> <p>You can also use fixed-width scaling if you do not want to scale your application, or if you want to set your own scale. In this case, declare a viewport, but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to <span style="font-family: Courier New,Courier,monospace">device-width</span> as follows:</p>
-   <pre class="prettyprint lang-html">&lt;meta name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
-   <p>To enable fixed-width scaling, the header must contain the <span style="font-family: Courier New,Courier,monospace">&lt;meta name=&quot;viewport&quot;&gt;</span> element:</p>
-   <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=360, initial-scale=1, user-scalable=no&quot;&gt;</pre>
-   </li>
-  </ul>
-
-   <h3 id="js" name="js">Running JavaScript API</h3>
-  <p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
-  <pre class="prettyprint">&lt;script src=&quot;{YOUR_SCRIPT_PATH}&quot;&gt;&lt;/script&gt;
-</pre>
-
-  <h2 id="features" name="features"> UI Framework Features</h2>
-  <p>The Tizen Advanced UI (TAU) provides the following features:</p>
-  <ul>
-  <li><a href="#accessibility">Accessibility</a> <p>Accessibility enables you to use the text-to-speech functionality with the Tizen screen reader.</p> </li>
-  <li><a href="#localization">Localization</a> <p>Localization enables you to create locale-specific applications.</p> </li>
-  </ul>
-
-  <h3 id="accessibility" name="accessibility">Accessibility</h3>
-  <p>The <a href="http://www.w3.org/TR/wai-aria/" target="_blank">WAI-ARIA</a> (Web Accessibility Initiative - Accessible Rich Internet Applications) is a standard to support easy access to Web content in Web applications. The WAI-ARIA is composed of a role, states, and property, and its current version is 1.0. The Tizen screen reader sends the screen information to the user with the text-to-speech technology and WAI-ARIA data.</p>
-  <p>You must define the role, states, and property of the HTML elements in order to enable the Tizen screen reader.</p>
-
-  <p>The Tizen screen reader reads HTML elements in the following order:</p>
-<ol>
-<li>Content
-<p>The actual element content is read first.</p></li>
-<li>Other attributes than <span style="font-family: Courier New,Courier,monospace">role</span> and <span style="font-family: Courier New,Courier,monospace">aria-label</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">role</span> attribute
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">aria-label</span> attribute
-</li>
-</ol>
-
-<p>The following examples show how WAI-ARIA code is read using the text-to-speech functionality of the screen reader:</p>
-<ul>
-<li>Result: checkbox checked, double tap to uncheck
-<pre class="prettyprint">&lt;div role=&quot;checkbox&quot; aria-checked=&quot;true&quot; aria-label=&quot;double tap to uncheck&quot;&gt;&lt;/div&gt;</pre></li>
-<li>Result: test button, double tap to click
-<pre class="prettyprint">&lt;div role=&quot;button&quot; aria-label=&quot;double tap to click&quot;&gt;test&lt;/div&gt;</pre></li>
-</ul>
-
-<p>When creating applications that use the Tizen screen reader, keep in mind the following exceptions:</p>
-<ul>
-<li>If the <span style="font-family: Courier New,Courier,monospace">aria-hidden</span> attribute of an element is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the screen reader does not read the content of the element or its child elements.
-<p>In the following snippet, the screen reader reads &quot;on&quot;, but not &quot;off&quot; or &quot;child&quot;.</p>
-<pre class="prettyprint">&lt;div tabindex=&quot;0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;on&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div aria-hidden=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;off
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;child&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;</pre></li>
-<li>If the <span style="font-family: Courier New,Courier,monospace">role</span> attribute is not defined, it is not read.
-<p>In the following snippet, the screen reader reads &quot;test&quot;, but not &quot;link&quot;.</p>
-<pre class="prettyprint">&lt;a role=&quot;&quot; href=&quot;test.html&quot;&gt;test&lt;/a&gt;</pre></li>
-<li>The screen reader does not read elements that are hidden, for example, if the <span style="font-family: Courier New,Courier,monospace">display</span> property is set to <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element supports the image alt text through the <span style="font-family: Courier New,Courier,monospace">alt</span> attribute:</p>
-<pre class="prettyprint">&lt;img src=&quot;icon.jpg&quot; alt=&quot;icon&quot;&gt;</pre>
-<table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace">alt</span> attribute need not be defined for the virtual grid component.
-     <p>The accessibility feature is supported since Tizen 2.1.</p></td>
-    </tr>
-   </tbody>
-  </table>
-
-  <h3 id="localization" name="localization">Localization</h3>
-  <p>The Tizen Advanced UI (TAU) components support localization. For example, the <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Datetimepicker.htm">date-time picker</a> component (in mobile applications only) shows the time depending on the current locale. When you define a language in the <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element by adding a <span style="font-family: Courier New,Courier,monospace;">lang</span> attribute, the defined language and locale are selected. For example, the date time picker component shows the time depending on the current locale:</p>
-  <pre class="prettyprint">&lt;html lang=&quot;fr-FR&quot;&gt;
-</pre>
-  <p>If the <span style="font-family: Courier New,Courier,monospace;">lang</span> attribute is not given in the <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element, the browser&#39;s current locale, which is detected by reading the <span style="font-family: Courier New,Courier,monospace;">window.navigator.language</span> value, is used by default. The localization feature is powered by the Globalize library, so you can use any APIs in Globalize.</p>  
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/application/app_guide_w.htm b/org.tizen.guides/html/web/tizen/application/app_guide_w.htm
index efa1ea8..0cb9f49 100644 (file)
--- a/org.tizen.guides/html/web/tizen/application/app_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/application/app_guide_w.htm
@@ -40,7 +40,7 @@
        <li><a href="package_w.htm">Package</a> <p>Allows you to retrieve information about packages and manage package installation.</p></li>
   </ul> 
   
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>  
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>  
 <ul>
     <li><a href="data_w.htm">Data Control</a> <p>Enables you to use data stored and provided by another application.</p></li>
 </ul>
diff --git a/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm b/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm
old mode 100755 (executable)
new mode 100644 (file)
index 51fe243..c1f6512
--- a/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm
+++ b/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm
@@ -23,7 +23,6 @@
         <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm">Bluetooth Low Energy Tutorial</a></li>
                        <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li>
                        <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html">Bluetooth API for Wearable Web</a></li>
             </ul>
@@ -61,23 +60,23 @@
    <li>Managing the local Bluetooth adapter
      <p>The <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Managing_BT_Adapter">Bluetooth adapter management</a> is performed the same way as in the regular Bluetooth API.</p></li>
    <li>Discovering Bluetooth Low Energy devices
-     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Discovering_BT_Devices">discover Bluetooth Low Energy devices</a> in range. Through the discovery process, you can obtain basic information about available remote devices, such as their names and provided services.</p></li>
+     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Discovering_BT_LE_Devices">discover Bluetooth Low Energy devices</a> in range. Through the discovery process, you can obtain basic information about available remote devices, such as their names and provided services.</p></li>
    <li>Managing the advertising options
-     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Managing_Advertising">manage advertising</a> to control how your device announces itself to other Bluetooth Low Energy devices to be discovered.</p></li>
+     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Managing_Advertising">manage advertising</a> to control how your device announces itself to other Bluetooth Low Energy devices to be discovered.</p></li>
    <li>Connecting to a Bluetooth Low Energy device
-     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Connecting">connect to a remote Bluetooth Low Energy device</a>. When connected, you can access services and characteristics of the remote device.</p></li>
+     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Connecting">connect to a remote Bluetooth Low Energy device</a>. When connected, you can access services and characteristics of the remote device.</p></li>
    <li>Receiving notifications on connection state changes
-     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Connection_Notification">monitor the connection state</a> to detect when the connection to the remote device is lost.</p></li>
+     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Connection_Notification">monitor the connection state</a> to detect when the connection to the remote device is lost.</p></li>
    <li>Retrieving Bluetooth GATT services
-     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Retrieving_Services">retrieve information about Bluetooth GATT services</a> provided by the remote device.</p>
+     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Retrieving_Services">retrieve information about Bluetooth GATT services</a> provided by the remote device.</p>
      <p>Every GATT service defines characteristics it includes. By knowing the service, you know what features the Bluetooth device exposes.</p></li>
    <li>Accessing the Bluetooth GATT characteristic value
-     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Characteristic_Value">read and write the Bluetooth GATT characteristic value</a>.</p>
+     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Characteristic_Value">read and write the Bluetooth GATT characteristic value</a>.</p>
      <p>Characteristics allows you to monitor and sometimes control remote Bluetooth Low Energy devices. For example, a sensor reading can be exposed by the sensor device as a Bluetooth GATT characteristic.</p></li>
    <li>Receiving notifications on characteristic value changes
-     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Characterictic_Notification">monitor a characteristic value</a> to detect any changes, for example, in sensor readings and battery level.</p></li>
+     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Characterictic_Notification">monitor a characteristic value</a> to detect any changes, for example, in sensor readings and battery level.</p></li>
    <li>Accessing the Bluetooth GATT descriptor value
-     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Descriptor_Value">read and write the Bluetooth GATT descriptor value</a>.</p></li>
+     <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Descriptor_Value">read and write the Bluetooth GATT descriptor value</a>.</p></li>
 </ul>
    
 
diff --git a/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm b/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm
index 06e740f..ad6ad5c 100644 (file)
--- a/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm
@@ -41,7 +41,7 @@
   <li><a href="secure_element_w.htm">Secure Element</a> <p>Allows you to access secure elements, such as SIM card and secure SD card, in a device.</p></li>
 </ul>
   
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>
 <ul>
   <li><a href="messaging_w.htm">Messaging</a> <p>Allows you to create applications with messaging functionalities using SMS, MMS, and email.</p></li>
 </ul>
diff --git a/org.tizen.guides/html/web/tizen/guides_tizen_w.htm b/org.tizen.guides/html/web/tizen/guides_tizen_w.htm
index 47529cb..336a51c 100644 (file)
--- a/org.tizen.guides/html/web/tizen/guides_tizen_w.htm
+++ b/org.tizen.guides/html/web/tizen/guides_tizen_w.htm
@@ -67,19 +67,19 @@
        <p>Enables you to access and manage and retrieve information from the device and its sensors.</p></li>
        <li><a href="ui/ui_guide_w.htm">User Interface</a>
        <p>Enables you to manage badges and notifications on the screen.</p></li>       
-       <li><a href="social/social_guide_w.htm">Social</a> <span style="color: red">in mobile applications only</span>
+       <li><a href="social/social_guide_w.htm">Social</a> <strong>in mobile applications only</strong>
        <p>Enables you to manage the user&#39;s personal data, such as contacts, calendars, and call and browsing history, on the device.</p></li>      
 </ul>
 
+<p>For more information about implementing the UI for your application using the Advanced UI Framework (TAU) features, see <a href="../../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU</a>.</p>
+
 <p>In addition to the Tizen Web Device API guides above, you can study the following features:</p>
 <ul>
        <li><a href="localization/localization_w.htm">Localization</a> <p>Enables you to internationalize your application.</p></li>                    
-       <li><a href="TAU/tau.htm">Tizen Advanced UI Framework (TAU)</a>
-       <p>Enables you to create and manage various kinds of UI components.</p></li>
 
-       <li><a href="service/service_w.htm">Service Application</a> <span style="color: red">in wearable applications only</span> <p>Allows you to create wearable Web service applications.</p></li>  
+       <li><a href="service/service_w.htm">Service Application</a> <strong>in wearable applications only</strong> <p>Allows you to create wearable Web service applications.</p></li>  
 
-       <li><a href="ime/ime_w.htm">IME Application</a> <span style="color: red">in wearable applications only</span> <p>Enables you to implement IME (Input Method Editor) applications to provide IME support for client applications.</p></li>
+       <li><a href="ime/ime_w.htm">IME Application</a> <strong>in wearable applications only</strong> <p>Enables you to implement IME (Input Method Editor) applications to provide IME support for client applications.</p></li>
 
 </ul>
     
diff --git a/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm b/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm
index e48817e..40873b7 100644 (file)
--- a/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm
+++ b/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm
@@ -1,90 +1,90 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Media Key</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm">Media Key Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html">Media Key API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key API for Wearable Web</a></li>                    
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Media Key</h1>
- 
-  <p>Tizen enables you to handle media keys in your application.</p>
-
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Media Key API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. 
-               <p>The Media Key API is not supported on any Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-    <p>The media keys are used to <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm#state">control multimedia playback</a>. The user can click keys, such as <strong>PLAY</strong> and <strong>FAST FORWARD</strong>, and you can detect the key clicks in your application and change the playback accordingly.</p>
-  
-  <p>The main features of the Media Key API include:</p>
-  <ul>
-   <li>Registering a listener<p>You can register and unregister a listener for the media key state changes.</p>
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">You can register only 1 media key state change listener for your application. If you attempt to register a second listener, the first listener is unset and replaced with the new one.</td>
-    </tr>
-   </tbody>
-  </table>
-   </li>
-   <li>Handling state changes<p>With the registered listener, you can monitor the media keys and react to their state changes, when the user presses or releases a key.</p> </li>
-  </ul>
-  
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Media Key</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm">Media Key Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediakey.html">Media Key API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key API for Wearable Web</a></li>                    \r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Media Key</h1>\r
+ \r
+  <p>Tizen enables you to handle media keys in your application.</p>\r
+\r
+    <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The Media Key API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. \r
+               <p>The Media Key API is not supported on any Tizen Emulators.</p></td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+    <p>The media keys are used to <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm#state">control multimedia playback</a>. The user can click keys, such as <strong>PLAY</strong> and <strong>FAST FORWARD</strong>, and you can detect the key clicks in your application and change the playback accordingly.</p>\r
+  \r
+  <p>The main features of the Media Key API include:</p>\r
+  <ul>\r
+   <li>Registering a listener<p>You can register and unregister a listener for the media key state changes.</p>\r
+  <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">You can register only 1 media key state change listener for your application. If you attempt to register a second listener, the first listener is unset and replaced with the new one.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+   </li>\r
+   <li>Handling state changes<p>With the registered listener, you can monitor the media keys and react to their state changes, when the user presses or releases a key.</p> </li>\r
+  </ul>\r
+  \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm b/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm
index b776a1c..f14f6c1 100644 (file)
--- a/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm
@@ -1,64 +1,64 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Multimedia</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia Tutorials</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Multimedia">Multimedia API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Multimedia">Multimedia API for Wearable Web</a></li>                 
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Multimedia</h1>
-  <p>Multimedia features include managing the device sound volume and media keys.</p>
-  <p>The main multimedia features are:</p>
-  <ul>
-  <li><a href="media_controller_w.htm">Media Controller</a> <p>Enables you to communicate between the media controller server and client.</p></li>
-  <li><a href="media_key_w.htm">Media Key</a> <p>Enables you to handle media keys in your application.</p></li>
-  <li><a href="sound_w.htm">Sound</a> <p>Enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices.</p></li>  
-  </ul>
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Multimedia</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia Tutorials</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Multimedia">Multimedia API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Multimedia">Multimedia API for Wearable Web</a></li>                 \r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Multimedia</h1>\r
+  <p>Multimedia features include managing the device sound volume and media keys.</p>\r
+  <p>The main multimedia features are:</p>\r
+  <ul>\r
+  <li><a href="media_controller_w.htm">Media Controller</a> <p>Enables you to communicate between the media controller server and client.</p></li>\r
+  <li><a href="media_key_w.htm">Media Key</a> <p>Enables you to handle media keys in your application.</p></li>\r
+  <li><a href="sound_w.htm">Sound</a> <p>Enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices.</p></li>  \r
+  </ul>\r
+ \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm b/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm
index 65f857d..497bf6d 100644 (file)
--- a/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm
+++ b/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm
@@ -1,80 +1,80 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Sound</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm">Sound Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">Sound API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html">Sound API for Wearable Web</a></li>                   
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Sound</h1>
- 
-   <p>Tizen enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices. The available sound types include, for example, system, notifications, alarms, and media.</p>
-   
-     <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Sound API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-   <p>The main features of the Sound API include:</p>
-   <ul>
-    <li>Setting the volume level<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#manage">set the volume level of a specific sound type</a> with the <span style="font-family: Courier New,Courier,monospace">setVolume()</span> method.</p>   </li>
-    <li>Getting the sound mode<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#manage">retrieve the current sound mode</a> with the <span style="font-family: Courier New,Courier,monospace">getSoundMode()</span> method.</p> </li>
-   <li>Getting a list of the current sound devices in a specified state<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#manage_sound_device">retrieve a list of the current sound devices which are in a specified state</a> by using the <span style="font-family: Courier New,Courier,monospace">getConnectedDeviceList()</span> or <span style="font-family: Courier New,Courier,monospace">getActivatedDeviceList()</span> methods.</p></li>
-    <li>Monitoring changes in the volume level and sound mode<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#monitor">monitor changes in the volume level and sound mode</a> by registering appropriate listeners.</p> </li>
-    <li>Monitoring changes in the sound device state<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#monitor_sound_device">monitor changes in the state of sound devices</a> with the <span style="font-family: Courier New,Courier,monospace">addDeviceStateChangeListener()</span> method.</p></li>
-   </ul>
-   
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Sound</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm">Sound Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">Sound API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html">Sound API for Wearable Web</a></li>                   \r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Sound</h1>\r
+ \r
+   <p>Tizen enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices. The available sound types include, for example, system, notifications, alarms, and media.</p>\r
+   \r
+     <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The Sound API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. \r
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+   <p>The main features of the Sound API include:</p>\r
+   <ul>\r
+    <li>Setting the volume level<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#manage">set the volume level of a specific sound type</a> with the <span style="font-family: Courier New,Courier,monospace">setVolume()</span> method.</p>   </li>\r
+    <li>Getting the sound mode<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#manage">retrieve the current sound mode</a> with the <span style="font-family: Courier New,Courier,monospace">getSoundMode()</span> method.</p> </li>\r
+   <li>Getting a list of the current sound devices in a specified state<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#manage_sound_device">retrieve a list of the current sound devices which are in a specified state</a> by using the <span style="font-family: Courier New,Courier,monospace">getConnectedDeviceList()</span> or <span style="font-family: Courier New,Courier,monospace">getActivatedDeviceList()</span> methods.</p></li>\r
+    <li>Monitoring changes in the volume level and sound mode<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#monitor">monitor changes in the volume level and sound mode</a> by registering appropriate listeners.</p> </li>\r
+    <li>Monitoring changes in the sound device state<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm#monitor_sound_device">monitor changes in the state of sound devices</a> with the <span style="font-family: Courier New,Courier,monospace">addDeviceStateChangeListener()</span> method.</p></li>\r
+   </ul>\r
+   \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/social/social_guide_w.htm b/org.tizen.guides/html/web/tizen/social/social_guide_w.htm
index 228604e..e1fc8e7 100644 (file)
--- a/org.tizen.guides/html/web/tizen/social/social_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/social/social_guide_w.htm
@@ -53,9 +53,9 @@
    <li><a href="calendar_w.htm">Calendar</a> <p>Allows you to manage calendars, events, and tasks on a device.</p></li> 
    <li><a href="call_history_w.htm">Call History</a> <p>Allows you to search, manage, and monitor the call history of a device.</p></li>
    <li><a href="contact_w.htm">Contact</a> <p>Allows you to manage address books and contacts on a device.</p></li>
-   <li><a href="data_sync_w.htm">Data Synchronization</a> <p>Allows you to synchronize device data, such as contacts and calendar events, with the OMA DS server.</p></li>
+   <li><a href="data_sync_w.htm">Data Synchronization</a> <p>Allows you to synchronize device data, such as contacts and calendar events, with the OMA DS server.</p></li> 
   </ul>
-
+  
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
@@ -77,4 +77,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm b/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm
index 3c07e3a..9de359b 100644 (file)
--- a/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm
@@ -1,88 +1,88 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>FM Radio</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm">FM Radio Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html">FM Radio API for Mobile Web</a></li>          
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>FM Radio</h1>
-
-<p>Tizen enables you to access and control the FM radio on the device.</p>
-
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-<p>The main features of the FM Radio API include:</p>
-<ul>
-<li>Managing the radio
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#manage">control the radio playback and change frequency</a>.</p></li>
-<li>Scanning available radio channels
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#scan">scan the available frequencies to find a channel</a>.</p></li>
-<li>Getting information about interruptions
-<p>The Tizen system has a feature to prevent interference between radio sound and other source of sound. The sound of the radio is interrupted in reaction to various events, such as an incoming call or notification sound. You can use the <span style="font-family: Courier New,Courier,monospace">oninterrupted</span> event handler to <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#get_info">detect the reason for the interruption</a>.</p></li>
-</ul>
-<p>The available operations depend on the current radio state. Radio states and transitions between them are illustrated in the following figure.</p>
-<p class="figure">Figure: FM radio states and transitions</p>
-<p align="center"><img alt="FM radio states and transitions" src="../../../images/fmradio-state.png" /></p>
-<p>To get information about current radio state, read the <span style="font-family: Courier New,Courier,monospace">state</span> attribute of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface. The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#RadioState">RadioState</a> enum specifies possible values of the attribute:    </p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">READY</span>: Initial state, the radio is not playing and can be started or switched to scan.</li>
-<li><span style="font-family: Courier New,Courier,monospace">PLAYING</span>: The playback is ongoing.</li>
-<li><span style="font-family: Courier New,Courier,monospace">SCANNING</span>: The frequency scan is in progress, the radio is not playing.</li>
-</ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>FM Radio</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm">FM Radio Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html">FM Radio API for Mobile Web</a></li>          \r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>FM Radio</h1>\r
+\r
+<p>Tizen enables you to access and control the FM radio on the device.</p>\r
+\r
+    <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  \r
+<p>The main features of the FM Radio API include:</p>\r
+<ul>\r
+<li>Managing the radio\r
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#manage">control the radio playback and change frequency</a>.</p></li>\r
+<li>Scanning available radio channels\r
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#scan">scan the available frequencies to find a channel</a>.</p></li>\r
+<li>Getting information about interruptions\r
+<p>The Tizen system has a feature to prevent interference between radio sound and other source of sound. The sound of the radio is interrupted in reaction to various events, such as an incoming call or notification sound. You can use the <span style="font-family: Courier New,Courier,monospace">oninterrupted</span> event handler to <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm#get_info">detect the reason for the interruption</a>.</p></li>\r
+</ul>\r
+<p>The available operations depend on the current radio state. Radio states and transitions between them are illustrated in the following figure.</p>\r
+<p class="figure">Figure: FM radio states and transitions</p>\r
+<p align="center"><img alt="FM radio states and transitions" src="../../../images/fmradio-state.png" /></p>\r
+<p>To get information about current radio state, read the <span style="font-family: Courier New,Courier,monospace">state</span> attribute of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface. The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#RadioState">RadioState</a> enum specifies possible values of the attribute:    </p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">READY</span>: Initial state, the radio is not playing and can be started or switched to scan.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">PLAYING</span>: The playback is ongoing.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">SCANNING</span>: The frequency scan is in progress, the radio is not playing.</li>\r
+</ul>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/tizen/system/system_guide_w.htm b/org.tizen.guides/html/web/tizen/system/system_guide_w.htm
index 284d7ef..2805215 100644 (file)
--- a/org.tizen.guides/html/web/tizen/system/system_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/system/system_guide_w.htm
@@ -43,7 +43,7 @@
     <li><a href="time_w.htm">Time</a><p>Enables you to use locale-specific calendar features by retrieving date and time information, and manage time features, such as the time zone.</p></li>        
   </ul>
 
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>  
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>  
 <ul>
         <li><a href="fm_radio_w.htm">FM Radio</a> <p>Enables you to access and control the device FM radio.</p></li>  
        <li><a href="web_setting_w.htm">Web Setting</a> <p>Enables you to set Web view properties, such as setting Web view user agents and deleting Web view cookies.</p></li>
diff --git a/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm b/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm
index 761a167..11fa506 100644 (file)
--- a/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm
+++ b/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm
@@ -1,1023 +1,1023 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Tizen</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#exception">Handling Exceptions</a></li>
-                       <li><a href="#generic">Handling Generic Events</a></li>
-                       <li><a href="#coordinates">Managing Location Coordinates</a></li>
-                       <li><a href="#sorting">Sorting and Filtering Data</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen Tutorial</a></li>  
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">Tizen API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">Tizen API for Wearable Web</a></li>                   
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Tizen</h1> 
-  <p>Tizen features include handling events and organizing data.</p>
-  
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-  <p>The main Tizen features are:</p> 
-  <ul> 
-       <li><a href="#exception">Handling exceptions</a> <p>Enables you to handle error situations in your application.</p></li>
-       <li><a href="#generic">Handling generic events</a> <p>Enables you to handle the results of asynchronous operations.</p></li>
-       <li><a href="#generic">Managing location coordinates</a> <p>Enables you to incorporate location information into your application.</p></li>
-       <li><a href="#sorting">Sorting and filtering data</a> <p>Provides a set of basic definitions and interfaces that are used in the Tizen Web Device API.</p></li>   
-  </ul> 
-
-  <h2 id="exception" name="exception">Handling Exceptions</h2>  
-  <p>You can enable the Tizen APIs to throw errors synchronously with the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIException">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIException">wearable</a> applications) of the Tizen API (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">wearable</a> applications), or return errors in the error event handlers of asynchronous methods with the <span style="font-family: Courier New,Courier,monospace">WebAPIError</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIError">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIError">wearable</a> applications).</p>
-  <table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace">code</span> attribute of the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface to distinguish errors, because the code of the exception object is set to <span style="font-family: Courier New,Courier,monospace">0</span> in case of new error types that are not defined in <a href="http://www.w3.org/TR/dom/#domexception" target="_blank">DOMException</a>.</td>
-      </tr>
-     </tbody>
-  </table>
-  
-  <h2 id="generic" name="generic">Handling Generic Events</h2> 
-  <p>Generic event handling features allow you to <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_handlers">handle the results of asynchronous operations</a>. The operations can implemented using the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">ErrorCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#ErrorCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#ErrorCallback">wearable</a> applications) event handlers of the Tizen API.</p>
-    
-  <h2 id="coordinates" name="coordinates">Managing Location Coordinates</h2>
-
-  <p>You can use the <span style="font-family: Courier New,Courier,monospace">SimpleCoordinates</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SimpleCoordinates">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SimpleCoordinates">wearable</a> applications) to incorporate location information into your application. For example, you can simply use it to define coordinates:</p> <pre class="prettyprint">var coordinates = new tizen.SimpleCoordinates(37.5665, 126.9779);</pre> <p>You can also define a latitude and longitude for a <a href="../social/calendar_w.htm">calendar event</a>:</p> <pre class="prettyprint">var event = new tizen.CalendarEvent(
-{
-&nbsp;&nbsp;&nbsp;description:&quot;hospital&quot;, 
-&nbsp;&nbsp;&nbsp;geolocation: new tizen.SimpleCoordinates(37.4889, 127.0876),
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 11, 1, 14, 0), 
-&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(2, &quot;HOURS&quot;)
-});</pre>
-  
-  <h2 id="sorting" name="sorting">Sorting and Filtering Data</h2> 
-  <p>The Tizen API provides a set of basic definitions and interfaces that are used in the Tizen Device API. The Tizen API contains filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p> 
-  <p>The main features of the Tizen API include:</p> 
-  <ul> 
-   <li>Filters <p>The Tizen API supports the following filter types, which are subtypes of the <span style="font-family: Courier New,Courier,monospace">abstract filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AbstractFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AbstractFilter">wearable</a> applications):</p>
-    <ul> 
-     <li><span style="font-family: Courier New,Courier,monospace">Attribute filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a> applications)<p>Matches objects containing a defined attribute or attribute value. The match is determined based on match flags defined with the <span style="font-family: Courier New,Courier,monospace">FilterMatchFlag</span> type definition (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a> applications).</p> </li> 
-     <li><span style="font-family: Courier New,Courier,monospace">Attribute range</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a> applications)<p>Matches objects containing an attribute whose values are within a particular range.</p> </li> 
-     <li><span style="font-family: Courier New,Courier,monospace">Composite filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a> applications)<p>Combines several filters into a set.</p></li> 
-    </ul>
-<p>You can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> to search for specific data and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#make">make complex queries</a>. The attributes you can use with the filter types vary depending on the API you are using. For example, <a href="#calendar">Calendar</a>, <a href="#call">Call History</a>, <a href="#contact">Contact</a>, <a href="#content_filter">Content</a>, and <a href="#messaging">Messaging</a> query methods each have their own sets of supported filter attributes.</p> </li> 
-   <li>Sorting <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the results of queried data</a> using the <span style="font-family: Courier New,Courier,monospace">SortMode</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a> applications). The following sorting modes are supported:</p> 
-    <ul> 
-     <li> <p><span style="font-family: Courier New,Courier,monospace">&quot;ASC&quot;</span>: Ascending sorting order</p> </li> 
-     <li> <p><span style="font-family: Courier New,Courier,monospace">&quot;DESC&quot;</span>: Descending sorting order</p> </li> 
-    </ul>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note"><p>If you use a type attribute as a sort mode parameter, the sorting is not performed alphabetically since the attribute values are stored normally after the type conversion in the platform implementation.</p> <p>For example, if the <span style="font-family: Courier New,Courier,monospace">ContentType</span> enum (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a> applications) is the type attribute and the sorting order is <span style="font-family: Courier New,Courier,monospace">&quot;DESC&quot;</span>, the sorting result is ordered according to the listed enum order:</p>
-          <ul>
-          <li>Image</li><li>Video</li><li>Audio</li><li>Other</li></ul></td> 
-      </tr> 
-     </tbody> 
-    </table></li> </ul>
-  <h3 id="calendar" name="calendar">Calendar Filter Attributes</h3> 
-  <p>The following table lists the filter types you can use with specific calendar item attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface.</p> 
-  <table> 
-   <caption>
-     Table: Calendar filter attributes 
-   </caption> 
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="25%" /> 
-    <col width="25%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id.uid</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">description</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">summary</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isAllDay </span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isDetached</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">startDate</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">location</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.latitude</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.longitude</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizer</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">visibility</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">status</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">priority</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">categories</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">dueDate </span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">completedDate </span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">progress </span></p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">endDate</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">availability </span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastModificationDate</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">alarms</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No*</p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">attendees</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No* </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">recurrenceRule</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No* </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>* The attribute filter is only supported with the <span style="font-family: Courier New,Courier,monospace">EXISTS</span> flag. </p> 
-    <h3 id="call" name="call">Call History Filter Attributes</h3> 
-  <p>The following table lists the filter types you can use with specific call history attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface.</p> 
-  <table> 
-   <caption>
-     Table: Call History filter attributes 
-   </caption> 
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="25%" /> 
-    <col width="25%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">uid</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type </span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">features</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">remoteParties.remoteParty</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">remoteParties.personId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">startTime</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">duration</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">direction</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-    <h3 id="contact" name="contact">Contact Filter Attributes</h3> 
-  <p>The following table lists the filter types you can use with specific contact attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p> 
-  <table> 
-   <caption>
-     Table: Contact filter attributes 
-   </caption> 
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="25%" /> 
-    <col width="25%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">personId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastUpdated</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isFavorite</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">birthday</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">photoURI</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">ringtoneURI</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.prefix</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.suffix</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.firstName</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.middleName</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.lastName</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.nicknames</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.phoneticFirstName</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.phoneticLastName</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.displayName</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.country</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.region</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.city</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.streetAddress</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.additionalInformation</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.postalCode</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.isDefault</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.types</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.number</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.isDefault</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.types</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.email</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.isDefault</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.types</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">anniversaries.date</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">anniversaries.label</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.name</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.department</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.title</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.role</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.logoUri</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">urls.url</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">urls.type</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">groupIds</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>The following table lists the filter types you can use with specific person attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> 
-  <table> 
-   <caption>
-     Table: Person filter attributes 
-   </caption> 
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="25%" /> 
-    <col width="25%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">displayName</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contactCount</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasPhoneNumber</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasEmail</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isFavorite</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">photoURI</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">ringtoneURI</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">displayContactId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-    <h3 id="content_filter" name="content_filter">Content Filter Attributes</h3> 
-  <p>The following table lists the filter types you can use with specific content attributes in the methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a> applications).</p> 
-  <table> 
-   <caption>
-     Table: Content filter attributes 
-   </caption> 
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="25%" /> 
-    <col width="25%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">mimeType</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">title </span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contentURI</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">thumbnailURIs</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">releaseDate</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">modifedDate</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">size</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">description</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">rating</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.latitude</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.longitude</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">album</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">genres</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">artists</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">composers</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lyrics</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">copyright</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bitrate</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">trackNumber</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">duration</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">orientation</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-    <h3 id="messaging" name="messaging">Messaging Filter Attributes</h3> 
-  <p>The following tables list the filter types you can use with specific message attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p> 
-  <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findMessage()</span> method.</p> 
-  <table> 
-   <caption>
-     Table: Filter attributes for finding messages 
-   </caption> 
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="25%" /> 
-    <col width="25%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">serviceId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">conversationId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">folderId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">timestamp</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">from</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">to</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">cc</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bcc</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">body.plainBody</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isRead</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasAttachment</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isHighPriority</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">subject</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isResponseTo </span></p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">messageStatus</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">attachments</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findConversations()</span> method.</p> 
-  <table> 
-   <caption>
-     Table: Filter attributes for finding conversations 
-   </caption> 
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="25%" /> 
-    <col width="25%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">timestamp</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">messageCount</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">unreadMessages </span></p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">preview </span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">subject</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isRead</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">from</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">to</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">cc</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bcc</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastMessageId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findFolders()</span> method.</p> 
-  <table> 
-   <caption>
-     Table: Filter attributes for finding message folders 
-   </caption> 
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="25%" /> 
-    <col width="25%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">parentId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">serviceId</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contentType</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">path </span></p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-    <tr> 
-     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">synchronizable</span> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-     <td rowspan="1" colspan="1"> <p> No </p> </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">FULLSTRING</span> value of the <span style="font-family: Courier New,Courier,monospace">FilterMatchFlag</span> enumerator (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a> applications) is not supported and returns an error callback.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Tizen</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#exception">Handling Exceptions</a></li>\r
+                       <li><a href="#generic">Handling Generic Events</a></li>\r
+                       <li><a href="#coordinates">Managing Location Coordinates</a></li>\r
+                       <li><a href="#sorting">Sorting and Filtering Data</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen Tutorial</a></li>  \r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">Tizen API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">Tizen API for Wearable Web</a></li>                   \r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Tizen</h1> \r
+  <p>Tizen features include handling events and organizing data.</p>\r
+  \r
+    <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. \r
+               <p>All mandatory APIs are supported on the Tizen Emulators.</p></td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  \r
+  <p>The main Tizen features are:</p> \r
+  <ul> \r
+       <li><a href="#exception">Handling exceptions</a> <p>Enables you to handle error situations in your application.</p></li>\r
+       <li><a href="#generic">Handling generic events</a> <p>Enables you to handle the results of asynchronous operations.</p></li>\r
+       <li><a href="#generic">Managing location coordinates</a> <p>Enables you to incorporate location information into your application.</p></li>\r
+       <li><a href="#sorting">Sorting and filtering data</a> <p>Provides a set of basic definitions and interfaces that are used in the Tizen Web Device API.</p></li>   \r
+  </ul> \r
+\r
+  <h2 id="exception" name="exception">Handling Exceptions</h2>  \r
+  <p>You can enable the Tizen APIs to throw errors synchronously with the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIException">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIException">wearable</a> applications) of the Tizen API (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">wearable</a> applications), or return errors in the error event handlers of asynchronous methods with the <span style="font-family: Courier New,Courier,monospace">WebAPIError</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIError">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIError">wearable</a> applications).</p>\r
+  <table class="note">\r
+     <tbody>\r
+      <tr>\r
+       <th class="note">Note</th>\r
+      </tr>\r
+      <tr>\r
+       <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace">code</span> attribute of the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface to distinguish errors, because the code of the exception object is set to <span style="font-family: Courier New,Courier,monospace">0</span> in case of new error types that are not defined in <a href="http://www.w3.org/TR/dom/#domexception" target="_blank">DOMException</a>.</td>\r
+      </tr>\r
+     </tbody>\r
+  </table>\r
+  \r
+  <h2 id="generic" name="generic">Handling Generic Events</h2> \r
+  <p>Generic event handling features allow you to <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_handlers">handle the results of asynchronous operations</a>. The operations can implemented using the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">ErrorCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#ErrorCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#ErrorCallback">wearable</a> applications) event handlers of the Tizen API.</p>\r
+    \r
+  <h2 id="coordinates" name="coordinates">Managing Location Coordinates</h2>\r
+\r
+  <p>You can use the <span style="font-family: Courier New,Courier,monospace">SimpleCoordinates</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SimpleCoordinates">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SimpleCoordinates">wearable</a> applications) to incorporate location information into your application. For example, you can simply use it to define coordinates:</p> <pre class="prettyprint">var coordinates = new tizen.SimpleCoordinates(37.5665, 126.9779);</pre> <p>You can also define a latitude and longitude for a <a href="../social/calendar_w.htm">calendar event</a>:</p> <pre class="prettyprint">var event = new tizen.CalendarEvent(\r
+{\r
+&nbsp;&nbsp;&nbsp;description:&quot;hospital&quot;, \r
+&nbsp;&nbsp;&nbsp;geolocation: new tizen.SimpleCoordinates(37.4889, 127.0876),\r
+&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 11, 1, 14, 0), \r
+&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(2, &quot;HOURS&quot;)\r
+});</pre>\r
+  \r
+  <h2 id="sorting" name="sorting">Sorting and Filtering Data</h2> \r
+  <p>The Tizen API provides a set of basic definitions and interfaces that are used in the Tizen Device API. The Tizen API contains filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p> \r
+  <p>The main features of the Tizen API include:</p> \r
+  <ul> \r
+   <li>Filters <p>The Tizen API supports the following filter types, which are subtypes of the <span style="font-family: Courier New,Courier,monospace">abstract filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AbstractFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AbstractFilter">wearable</a> applications):</p>\r
+    <ul> \r
+     <li><span style="font-family: Courier New,Courier,monospace">Attribute filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a> applications)<p>Matches objects containing a defined attribute or attribute value. The match is determined based on match flags defined with the <span style="font-family: Courier New,Courier,monospace">FilterMatchFlag</span> type definition (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a> applications).</p> </li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">Attribute range</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a> applications)<p>Matches objects containing an attribute whose values are within a particular range.</p> </li> \r
+     <li><span style="font-family: Courier New,Courier,monospace">Composite filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a> applications)<p>Combines several filters into a set.</p></li> \r
+    </ul>\r
+<p>You can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> to search for specific data and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#make">make complex queries</a>. The attributes you can use with the filter types vary depending on the API you are using. For example, <a href="#calendar">Calendar</a>, <a href="#call">Call History</a>, <a href="#contact">Contact</a>, <a href="#content_filter">Content</a>, and <a href="#messaging">Messaging</a> query methods each have their own sets of supported filter attributes.</p> </li> \r
+   <li>Sorting <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the results of queried data</a> using the <span style="font-family: Courier New,Courier,monospace">SortMode</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a> applications). The following sorting modes are supported:</p> \r
+    <ul> \r
+     <li> <p><span style="font-family: Courier New,Courier,monospace">&quot;ASC&quot;</span>: Ascending sorting order</p> </li> \r
+     <li> <p><span style="font-family: Courier New,Courier,monospace">&quot;DESC&quot;</span>: Descending sorting order</p> </li> \r
+    </ul>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note"><p>If you use a type attribute as a sort mode parameter, the sorting is not performed alphabetically since the attribute values are stored normally after the type conversion in the platform implementation.</p> <p>For example, if the <span style="font-family: Courier New,Courier,monospace">ContentType</span> enum (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a> applications) is the type attribute and the sorting order is <span style="font-family: Courier New,Courier,monospace">&quot;DESC&quot;</span>, the sorting result is ordered according to the listed enum order:</p>\r
+          <ul>\r
+          <li>Image</li><li>Video</li><li>Audio</li><li>Other</li></ul></td> \r
+      </tr> \r
+     </tbody> \r
+    </table></li> </ul>\r
+  <h3 id="calendar" name="calendar">Calendar Filter Attributes</h3> \r
+  <p>The following table lists the filter types you can use with specific calendar item attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface.</p> \r
+  <table> \r
+   <caption>\r
+     Table: Calendar filter attributes \r
+   </caption> \r
+   <colgroup> \r
+    <col width="50%" /> \r
+    <col width="25%" /> \r
+    <col width="25%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Attribute filter supported</th> \r
+     <th>Attribute range filter supported</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id.uid</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">description</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">summary</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isAllDay </span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isDetached</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">startDate</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">location</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.latitude</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.longitude</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizer</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">visibility</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">status</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">priority</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">categories</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">dueDate </span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">completedDate </span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">progress </span></p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">endDate</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">availability </span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastModificationDate</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">alarms</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No*</p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">attendees</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No* </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">recurrenceRule</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No* </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  <p>* The attribute filter is only supported with the <span style="font-family: Courier New,Courier,monospace">EXISTS</span> flag. </p> \r
+    <h3 id="call" name="call">Call History Filter Attributes</h3> \r
+  <p>The following table lists the filter types you can use with specific call history attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface.</p> \r
+  <table> \r
+   <caption>\r
+     Table: Call History filter attributes \r
+   </caption> \r
+   <colgroup> \r
+    <col width="50%" /> \r
+    <col width="25%" /> \r
+    <col width="25%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Attribute filter supported</th> \r
+     <th>Attribute range filter supported</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">uid</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type </span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">features</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">remoteParties.remoteParty</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">remoteParties.personId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">startTime</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">duration</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">direction</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+    <h3 id="contact" name="contact">Contact Filter Attributes</h3> \r
+  <p>The following table lists the filter types you can use with specific contact attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p> \r
+  <table> \r
+   <caption>\r
+     Table: Contact filter attributes \r
+   </caption> \r
+   <colgroup> \r
+    <col width="50%" /> \r
+    <col width="25%" /> \r
+    <col width="25%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Attribute filter supported</th> \r
+     <th>Attribute range filter supported</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">personId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastUpdated</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isFavorite</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">birthday</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">photoURI</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">ringtoneURI</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.prefix</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.suffix</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.firstName</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.middleName</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.lastName</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.nicknames</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.phoneticFirstName</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.phoneticLastName</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name.displayName</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.country</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.region</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.city</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.streetAddress</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.additionalInformation</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.postalCode</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.isDefault</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">addresses.types</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.number</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.isDefault</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">phoneNumbers.types</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.email</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.isDefault</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">emails.types</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">anniversaries.date</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">anniversaries.label</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.name</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.department</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.title</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.role</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">organizations.logoUri</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">urls.url</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">urls.type</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">groupIds</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  <p>The following table lists the filter types you can use with specific person attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> \r
+  <table> \r
+   <caption>\r
+     Table: Person filter attributes \r
+   </caption> \r
+   <colgroup> \r
+    <col width="50%" /> \r
+    <col width="25%" /> \r
+    <col width="25%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Attribute filter supported</th> \r
+     <th>Attribute range filter supported</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">displayName</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contactCount</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasPhoneNumber</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasEmail</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isFavorite</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">photoURI</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">ringtoneURI</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">displayContactId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+    <h3 id="content_filter" name="content_filter">Content Filter Attributes</h3> \r
+  <p>The following table lists the filter types you can use with specific content attributes in the methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a> applications).</p> \r
+  <table> \r
+   <caption>\r
+     Table: Content filter attributes \r
+   </caption> \r
+   <colgroup> \r
+    <col width="50%" /> \r
+    <col width="25%" /> \r
+    <col width="25%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Attribute filter supported</th> \r
+     <th>Attribute range filter supported</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">mimeType</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">title </span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contentURI</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">thumbnailURIs</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">releaseDate</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">modifedDate</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">size</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">description</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">rating</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.latitude</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">geolocation.longitude</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">album</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">genres</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">artists</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">composers</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lyrics</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">copyright</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bitrate</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">trackNumber</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">duration</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">orientation</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+    <h3 id="messaging" name="messaging">Messaging Filter Attributes</h3> \r
+  <p>The following tables list the filter types you can use with specific message attributes in the methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p> \r
+  <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findMessage()</span> method.</p> \r
+  <table> \r
+   <caption>\r
+     Table: Filter attributes for finding messages \r
+   </caption> \r
+   <colgroup> \r
+    <col width="50%" /> \r
+    <col width="25%" /> \r
+    <col width="25%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Attribute filter supported</th> \r
+     <th>Attribute range filter supported</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">serviceId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">conversationId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">folderId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">timestamp</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">from</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">to</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">cc</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bcc</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">body.plainBody</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isRead</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">hasAttachment</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isHighPriority</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">subject</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isResponseTo </span></p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">messageStatus</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">attachments</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findConversations()</span> method.</p> \r
+  <table> \r
+   <caption>\r
+     Table: Filter attributes for finding conversations \r
+   </caption> \r
+   <colgroup> \r
+    <col width="50%" /> \r
+    <col width="25%" /> \r
+    <col width="25%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Attribute filter supported</th> \r
+     <th>Attribute range filter supported</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">timestamp</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">messageCount</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">unreadMessages </span></p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">preview </span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">subject</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">isRead</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">from</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">to</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">cc</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">bcc</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">lastMessageId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  <p>The following table lists the filter attributes related to the <span style="font-family: Courier New,Courier,monospace;">findFolders()</span> method.</p> \r
+  <table> \r
+   <caption>\r
+     Table: Filter attributes for finding message folders \r
+   </caption> \r
+   <colgroup> \r
+    <col width="50%" /> \r
+    <col width="25%" /> \r
+    <col width="25%" /> \r
+   </colgroup> \r
+   <tbody> \r
+    <tr> \r
+     <th>Attribute</th> \r
+     <th>Attribute filter supported</th> \r
+     <th>Attribute range filter supported</th> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">id</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">parentId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">serviceId</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">contentType</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">name</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">path </span></p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">type</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+    <tr> \r
+     <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">synchronizable</span> </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+     <td rowspan="1" colspan="1"> <p> No </p> </td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  \r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">FULLSTRING</span> value of the <span style="font-family: Courier New,Courier,monospace">FilterMatchFlag</span> enumerator (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a> applications) is not supported and returns an error callback.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+  \r
+ \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm b/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
index 0b54af0..97ee093 100644 (file)
--- a/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
@@ -39,7 +39,7 @@
        <li><a href="xmlhttprequest_w.htm">XMLHttpRequest Level 1 and 2</a> <p>Enables you to use cross-origin resource sharing (CORS) to request and send data of various content types, and to monitor the operation progress.</p></li>
   </ul>
 
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>
 <ul>
        <li><a href="server_sent_w.htm">Server-Sent Events</a> <p>Enables you to exchange push data with the server.</p></li>
 </ul>  
diff --git a/org.tizen.guides/html/web/w3c/device/device_guide_w.htm b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
index 4b32703..7bcf749 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
@@ -40,7 +40,7 @@
    <li><a href="vibration_w.htm">Vibration</a> <p>Enables you to implement different vibration patterns on a Tizen device.</p></li>   
   </ul>
 
-  <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+  <p>The following guides apply in <strong>mobile applications only</strong>:</p>
 <ul>
    <li><a href="browser_state_w.htm">HTML5 Browser state</a> <p>Enables you to retrieve information about the network connection state of the browser.</p></li>
    <li><a href="screen_orientation_w.htm">Screen Orientation</a> <p>Enables you to retrieve the current screen orientation state, monitor state changes, and lock the screen to a specific orientation.</p></li>
diff --git a/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
index 2401794..a3e1c1d 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
@@ -1,114 +1,114 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Screen Orientation</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm">Screen Orientation Tutorial</a></li>     
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation API for Mobile Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>Screen Orientation</h1>
-
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm#manage">manage the screen orientation state</a> through the <span style="font-family: Courier New,Courier,monospace">Screen</span> interface.</p>
-
-<p>The main features of the Screen Orientation API include:</p>
-
-<ul><li>Accessing the current screen orientation
-<p>You can use the current screen orientation information, for example, to define the visibility or dimensions of the HTML elements according to the orientation state. You can retrieve the state with the <span style="font-family: Courier New,Courier,monospace">screen.orientation</span> attribute.
-</p><p>The following code snippet demonstrates how to access the current screen orientation information.</p>
-<pre class="prettyprint">
-var currentScreenOrientation = screen.orientation;
-</pre>
-
-<p>The orientation can be portrait-primary, portrait-secondary, landscape-primary, or landscape-secondary.</p></li>
-
-<li>Reacting to screen orientation changes
-<p>To receive notifications of the screen orientation changes, add an event listener to the <span style="font-family: Courier New,Courier,monospace">Screen</span> object, or assign a function reference to the <span style="font-family: Courier New,Courier,monospace">screen.onorientationchange</span> attribute.</p>
-<p>The following code snippet demonstrates how to receive notifications of screen orientation changes.</p>
-<pre class="prettyprint">
-/* Add listener */
-screen.addEventListener(&quot;orientationchange&quot;, handleScreenOrientationFun, false);
-
-/* Or assign reference */
-screen.onorientationchange = handleScreenOrientationFun;
-</pre>
-
-<p>In the above example, the <span style="font-family: Courier New,Courier,monospace">handleScreenOrientationFun</span> is the event handler called when the screen orientation changes.</p></li>
-
-<li>Locking the screen to a specified orientation
-<p>Locking means that the rendering of the current browsing context is forced to be shown in the specified orientation. The screen remains in the selected orientation state until the lock is removed.</p>
-<p>Lock the screen with the <span style="font-family: Courier New,Courier,monospace">lockOrientation()</span> method. 
-</p><p>The following code snippet demonstrates how to lock the screen to a specified orientation.</p>
-<pre class="prettyprint">screen.lockOrientation(&quot;portrait-secondary&quot;);
-</pre>
-<p>The method accepts the following parameter values: <span style="font-family: Courier New,Courier,monospace">portrait-primary</span>, <span style="font-family: Courier New,Courier,monospace">portrait-secondary</span>, <span style="font-family: Courier New,Courier,monospace">landscape-primary</span>, <span style="font-family: Courier New,Courier,monospace">landscape-secondary</span>, <span style="font-family: Courier New,Courier,monospace">portrait</span>, and <span style="font-family: Courier New,Courier,monospace">landscape</span>.</p>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">When using the screen orientation lock:
-          <ul><li>When the <span style="font-family: Courier New,Courier,monospace">portrait</span> value is used to lock the orientation, the orientation can change between <span style="font-family: Courier New,Courier,monospace">portrait-primary</span> and <span style="font-family: Courier New,Courier,monospace">portrait-secondary</span>. The <span style="font-family: Courier New,Courier,monospace">landscape</span> value behaves similarly.</li>
-          <li>Depending on the browser, unlocking the screen orientation may have no visual effect.</li></ul></td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li></ul>
-  
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Screen Orientation</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm">Screen Orientation Tutorial</a></li>     \r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation API for Mobile Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>Screen Orientation</h1>\r
+\r
+   <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm#manage">manage the screen orientation state</a> through the <span style="font-family: Courier New,Courier,monospace">Screen</span> interface.</p>\r
+\r
+<p>The main features of the Screen Orientation API include:</p>\r
+\r
+<ul><li>Accessing the current screen orientation\r
+<p>You can use the current screen orientation information, for example, to define the visibility or dimensions of the HTML elements according to the orientation state. You can retrieve the state with the <span style="font-family: Courier New,Courier,monospace">screen.orientation</span> attribute.\r
+</p><p>The following code snippet demonstrates how to access the current screen orientation information.</p>\r
+<pre class="prettyprint">\r
+var currentScreenOrientation = screen.orientation;\r
+</pre>\r
+\r
+<p>The orientation can be portrait-primary, portrait-secondary, landscape-primary, or landscape-secondary.</p></li>\r
+\r
+<li>Reacting to screen orientation changes\r
+<p>To receive notifications of the screen orientation changes, add an event listener to the <span style="font-family: Courier New,Courier,monospace">Screen</span> object, or assign a function reference to the <span style="font-family: Courier New,Courier,monospace">screen.onorientationchange</span> attribute.</p>\r
+<p>The following code snippet demonstrates how to receive notifications of screen orientation changes.</p>\r
+<pre class="prettyprint">\r
+/* Add listener */\r
+screen.addEventListener(&quot;orientationchange&quot;, handleScreenOrientationFun, false);\r
+\r
+/* Or assign reference */\r
+screen.onorientationchange = handleScreenOrientationFun;\r
+</pre>\r
+\r
+<p>In the above example, the <span style="font-family: Courier New,Courier,monospace">handleScreenOrientationFun</span> is the event handler called when the screen orientation changes.</p></li>\r
+\r
+<li>Locking the screen to a specified orientation\r
+<p>Locking means that the rendering of the current browsing context is forced to be shown in the specified orientation. The screen remains in the selected orientation state until the lock is removed.</p>\r
+<p>Lock the screen with the <span style="font-family: Courier New,Courier,monospace">lockOrientation()</span> method. \r
+</p><p>The following code snippet demonstrates how to lock the screen to a specified orientation.</p>\r
+<pre class="prettyprint">screen.lockOrientation(&quot;portrait-secondary&quot;);\r
+</pre>\r
+<p>The method accepts the following parameter values: <span style="font-family: Courier New,Courier,monospace">portrait-primary</span>, <span style="font-family: Courier New,Courier,monospace">portrait-secondary</span>, <span style="font-family: Courier New,Courier,monospace">landscape-primary</span>, <span style="font-family: Courier New,Courier,monospace">landscape-secondary</span>, <span style="font-family: Courier New,Courier,monospace">portrait</span>, and <span style="font-family: Courier New,Courier,monospace">landscape</span>.</p>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">When using the screen orientation lock:\r
+          <ul><li>When the <span style="font-family: Courier New,Courier,monospace">portrait</span> value is used to lock the orientation, the orientation can change between <span style="font-family: Courier New,Courier,monospace">portrait-primary</span> and <span style="font-family: Courier New,Courier,monospace">portrait-secondary</span>. The <span style="font-family: Courier New,Courier,monospace">landscape</span> value behaves similarly.</li>\r
+          <li>Depending on the browser, unlocking the screen orientation may have no visual effect.</li></ul></td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+</li></ul>\r
+  \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/animation_w.htm b/org.tizen.guides/html/web/w3c/dom/animation_w.htm
deleted file mode 100644 (file)
index 54eef78..0000000
--- a/org.tizen.guides/html/web/w3c/dom/animation_w.htm
+++ /dev/null
@@ -1,192 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Animations Module Level 3</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#keyframe">Keyframes</a></li>
-                       <li><a href="#prop_ani">Animation Properties</a></li>
-               </ul>
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm">CSS Animations Module Level 3 Tutorial</a></li>      
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#animations">CSS Animations Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#animations">CSS Animations Module Level 3 API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Animations Module Level 3</h1>
-
-<p>Animations (like <a href="transition_w.htm">transitions</a>) change the presentational value of the CSS properties over time. The principal difference between animations and transitions is that while transitions are triggered implicitly when property values change, animations are explicitly executed when the animation properties are applied. This means that for animations, you must <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm#create">use animation keyframes to define explicit values for the properties</a> being animated.</p>
-
-<p>When using the CSS animation properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
-
-<h2 name="keyframe" id="keyframe">Keyframes</h2>
-<p>The CSS animations work based on <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules defined for specific elements. The rules can define various property changes complementing the simple running of a transition.</p>
-<p>If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a <span style="font-family: Courier New,Courier,monospace">from {} to {}</span> rule, where <span style="font-family: Courier New,Courier,monospace">from</span> is the beginning of the animation at 0% and <span style="font-family: Courier New,Courier,monospace">to</span> is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <span style="font-family: Courier New,Courier,monospace">&lt;number&gt;% {}</span> rules that together cover the entire animation iteration from 0% to 100%.</p>
-<p>The following code snippet demonstrates how to use keyframes. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_keyframes.html</a></p>
-<pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {left: 100px; top: 100px;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani_case01 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0% {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25% {left: 100px; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50% {left: 100px; top: 100px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75% {left: 0; top: 100px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100% {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;}
-
-&lt;/style&gt;
-</pre>
-
-<h2 name="prop_ani" id="prop_ani">Animation Properties</h2>
-
-<p>You can define various properties for an animation to control how it is played:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">animation-name</span>
-<p>This property uses the name defined in the <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules to play the animation.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-duration</span>
-<p>This property defines how long one iteration of the animation takes.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span>
-<p>This property defines how many times the animation is repeated. If the value is set as <span style="font-family: Courier New,Courier,monospace">infinite</span>, the repetitions are unlimited.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-timing-function</span>
-<p>This property defines the pace of the animation.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-direction</span>
-<p>This property defines the replay direction. The <span style="font-family: Courier New,Courier,monospace">reverse</span> value plays the animation from 100% keyframe to 0% keyframe, while the <span style="font-family: Courier New,Courier,monospace">alternate</span> value plays the animation normally during odd iterations, and from 100% keyframe to 0% keyframe during even iterations.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-play-state</span>
-<p>This property defines the replay status of the animation. The <span style="font-family: Courier New,Courier,monospace">paused</span> value temporarily stops the animation.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">animation-delay</span>
-<p>This property defines the delay time before the start of the animation.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>
-<p>This property defines the state of the animation before or after the animation is played. The <span style="font-family: Courier New,Courier,monospace">forwards</span> value maintains the last value of the keyframe rule when the animation is over, while the <span style="font-family: Courier New,Courier,monospace">backwards</span> value fills up the first value of the keyframe rule when the animation with the <span style="font-family: Courier New,Courier,monospace">animation-delay</span> property is in a standby state. The <span style="font-family: Courier New,Courier,monospace">both</span> value covers both the start and the end of the animation.</p></li></ul>
-
-<p>The following code snippet demonstrates how to use animation properties. For a complete source code, see:</p>
-<ul>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_delay.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_direction.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_fill_mode.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_iteration_count.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_name.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_play_state.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_timing_function.html</a></li>
-</ul>
-
-<pre class="prettyprint lang-html">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: boxani;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 5s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-direction: normal;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-delay: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: none;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01: hover 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-play-state: paused;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: forwards;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;animation-name&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani_case01;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The <span style="font-family: Courier New,Courier,monospace">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-       
-<p>The <span style="font-family: Courier New,Courier,monospace">animation</span> property allows you to define all the animation properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">animation-name</span> | <span style="font-family: Courier New,Courier,monospace">animation-duration</span> | <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">animation-delay</span> | <span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span> | <span style="font-family: Courier New,Courier,monospace">animation-direction</span> | <span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>. If you omit a property value, a default value is used instead.</p>
-
-<pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 150px; height: 100px; background: Coral; position: relative;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: boxani 3s ease 1s infinite alternate backwards;
-&nbsp;&nbsp;&nbsp;}
-&lt;/style&gt;
-</pre>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/background_w.htm b/org.tizen.guides/html/web/w3c/dom/background_w.htm
deleted file mode 100644 (file)
index 48e6e30..0000000
--- a/org.tizen.guides/html/web/w3c/dom/background_w.htm
+++ /dev/null
@@ -1,130 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Backgrounds and Borders Module Level 3</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm">CSS Backgrounds and Borders Module Level 3 Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#border">CSS Backgrounds and Borders Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#border">CSS Backgrounds and Borders Module Level 3 API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Backgrounds and Borders Module Level 3</h1>
-
-<p>You can manage the CSS properties for <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm#create">specifying the border style or background of any HTML element</a>.</p>
-
-<p>When creating a background for an element, you can use the following properties:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">background-color</span>
-<p>Defines the color of the background.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-image</span>
-<p>Defines the image to be used. You can add images as separate layers to an element. To add multiple images, separate them by commas to add each image as a separate layer. The images are added in the order they are defined.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-position</span>
-<p>Defines the exact position of the image.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-repeat</span>
-<p>Defines whether the image is repeated to fill the entire background (in case the image is too small to do it otherwise).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-origin</span>
-<p>Defines the position of the initial background for the item.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-size</span>
-<p>Defines the size of the image in the background.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">background-clip</span>
-<p>Defines the area of the cropped background element.</p></li>
-</ul>
-
-<p>The border properties specify the line thickness, style, and color for the element border. You can define the border using 3 separate properties (<span style="font-family: Courier New,Courier,monospace">border-width</span>, <span style="font-family: Courier New,Courier,monospace">border-style</span>, and <span style="font-family: Courier New,Courier,monospace">border-color</span>), or by listing the values for all 3 properties together in 1 <span style="font-family: Courier New,Courier,monospace">border</span> property. To define rounded corners for the border, you can additionally use the <span style="font-family: Courier New,Courier,monospace">border-radius</span> property.</p>
-
-<p>To define shading for an element, you can define the horizontal and vertical offset, blur radius, and the spread distance values within the <span style="font-family: Courier New,Courier,monospace">box-shadow</span> property. To switch the shadow from outside to inside the element, add the <span style="font-family: Courier New,Courier,monospace">inset</span> keyword to the property too.</p>
-
-<p>The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the <span style="font-family: Courier New,Courier,monospace">background-repeat</span> property value.</p>
-
-  <p class="figure">Figure: Background examples</p> 
-  <p align="center"><img alt="Background examples" src="../../../images/css_bg1.png" /></p>
-<p>The following code snippet demonstrates how to set the background color, images, borders, and shadings.</p>
-
-<pre class="prettyprint">
-&lt;!--Background color--&gt;
-#one 
-{
-&nbsp;&nbsp;&nbsp;width: 180px;
-&nbsp;&nbsp;&nbsp;height: 40px;
-&nbsp;&nbsp;&nbsp;background-color: lightblue;
-}
-
-&lt;!--Background image--&gt; 
-#one 
-{
-&nbsp;&nbsp;&nbsp;width: 200px;
-&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;background-color: #00F;
-&nbsp;&nbsp;&nbsp;background-image: url(t3.png);
-}
-
-&lt;!--Multiple images--&gt; 
-#multi 
-{
-&nbsp;&nbsp;&nbsp;width: 155px;
-&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;border: 1px solid #000;
-&nbsp;&nbsp;&nbsp;background-color: #87CEFA;
-&nbsp;&nbsp;&nbsp;background-image: url(t1.png), url(t2.png), url(t3.png);
-&nbsp;&nbsp;&nbsp;background-position: center center, 20% 100%, top left;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-}
-
-&lt;!--Shading and border with rounded corners--&gt;
-#shading 
-{
-&nbsp;&nbsp;&nbsp;width: 160px;
-&nbsp;&nbsp;&nbsp;height: 40px;
-&nbsp;&nbsp;&nbsp;border: 1px solid #000;
-&nbsp;&nbsp;&nbsp;border-radius: 20px;
-&nbsp;&nbsp;&nbsp;background-color: #88f;
-&nbsp;&nbsp;&nbsp;box-shadow: #888 10px 10px;
-}
-</pre>
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm b/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm
deleted file mode 100644 (file)
index f9d27d3..0000000
--- a/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Basic User Interface Module Level 3 (CSS3 UI)</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI) Tutorial</a></li>   
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Basic User Interface Module Level 3 (CSS3 UI)</h1>
-
-<p>You can apply styles to HTML documents.</p>
-<p>The CSS3 version has caused changes in the Selector, Color, Web Form, and Fonts CSS modules. In addition, the CSS3 UI API also handles changes related to the following user interface items:</p>
-<ul>
-<li>User interface selectors
-<p>The CSS Selector is an essential module for applying a CSS to HTML in order to enable the DOM element selection. The <a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#user-interface-selectors" target="_blank">pseudo-element selectors</a> can be used to assign the user interface state. With the selectors, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm#selector">change the Web form style</a> according to the user input without using JavaScript.</p></li>
-
-<li>Box model properties
-<p>A box model refers to all DOM elements excluding design elements, such as <span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;i&gt;</span>. The box model area is set as defined in the following figure.</p>
-<ul>
-<li><strong>Content</strong>: Content area</li>
-<li><strong>Padding</strong>: Gap between the content and boundary</li>
-<li><strong>Border</strong>: Boundary</li>
-<li><strong>Margin</strong>: Overall size of the box model</li>
-</ul>
-<p class="figure">Figure: Box model structure</p>
-<p align="center"><img alt="Figure: Box model structure" src="../../../images/box_model_properties_struct.png"/></p>
-
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm#boxmodel">use the box model properties</a> to assign styles to the selected DOM elements:</p>
-<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property assigns the box size range.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">outline</span> properties make the box outstanding.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property handles the text extending outside the box.</li></ul>
-</li>
-</ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/color_w.htm b/org.tizen.guides/html/web/w3c/dom/color_w.htm
deleted file mode 100644 (file)
index b5b20c9..0000000
--- a/org.tizen.guides/html/web/w3c/dom/color_w.htm
+++ /dev/null
@@ -1,149 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Color Module Level 3</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm">CSS Color Module Level 3 Tutorial</a></li>       
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#color">CSS Color Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#color">CSS Color Module Level 3 API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Color Module Level 3</h1>
-
-<p>You can manage the CSS properties for <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm#create">specifying the color and opacity of an HTML element</a>, and the CSS color value type.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note"><p>The CSS2 System Color values have been deprecated in favor of the CSS3 UI &#39;appearance&#39; property.</p></td> 
-      </tr> 
-     </tbody> 
-    </table>
-
-<p>You can specify the color of an element with the following formats:</p>
-<ul>
-<li>Keyword values
-<p>You can use basic keywords, such as <span style="font-family: Courier New,Courier,monospace">red</span>, <span style="font-family: Courier New,Courier,monospace">green</span>, <span style="font-family: Courier New,Courier,monospace">blue</span>, or <span style="font-family: Courier New,Courier,monospace">deepskyblue</span>, as defined in <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">Extended color keywords</a>.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword can be used with all properties that accept a color value (borders, box shadows, outlines, or backgrounds). The computed value of the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is the computed value of the <span style="font-family: Courier New,Courier,monospace">color</span> property. If the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is set on the <span style="font-family: Courier New,Courier,monospace">color</span> property itself, it is treated as <span style="font-family: Courier New,Courier,monospace">color: inherit</span>.
-</p>
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">transparent</span> keyword with all properties that accept a color value (borders, box shadows, outlines, or backgrounds), to turn the element in question transparent (invisible).</p>
-</li>
-<li>RGB values
-<ul>
-<li>In hexadecimal notation
-<p>The format is &#39;#&#39; followed by either 3 or 6 hexadecimal characters. The 3-digit RGB notation (#rgb) is converted into a 6-digit form (#rrggbb) by replicating digits. For example, <span style="font-family: Courier New,Courier,monospace">#fc0</span> expands to <span style="font-family: Courier New,Courier,monospace">#ffcc00</span>.</p></li>
-<li>In functional notation
-<p>The format is &#39;rgb(&#39; followed by a comma-separated list of 3 numerical values (integer or percentage) followed by &#39;)&#39;. The integer value 255 corresponds to 100%, and to F or FF in a hexadecimal notation: <span style="font-family: Courier New,Courier,monospace">rgb(255, 255, 255)</span> = <span style="font-family: Courier New,Courier,monospace">rgb(100%, 100%, 100%)</span> = <span style="font-family: Courier New,Courier,monospace">#FFF</span>. White space characters are allowed around the numerical values.
-</p></li>
-</ul>
-</li>
-<li>RGBA values
-<p>The RGB color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The RGBA values are defined using functional notation where the final value is the alpha (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">rgba(255, 0, 0, 0.7)</span>.</p>
-</li>
-<li>HSL value 
-<p>You can use numerical hue-saturation-lightness (HSL) colors as an alternative to numerical RGB colors. The HSL colors are encoded as a triple (hue, saturation, lightness). The hue is represented as the angle of the color circle, where by definition red=0°=360° and other colors are spread around the circle. The saturation and lightness are represented as percentages, where 100% is full saturation or black lightness, and 0% is a shade of gray or white lightness. 50% lightness is &quot;normal&quot;. For example: <span style="font-family: Courier New,Courier,monospace">hsl(0, 100%, 50%)</span>. 
-</p></li>
-<li>HSLA value
-<p>The HSL color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The HSLA values are defined using the HSL notation where a final alpha value is added (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">hsla(120, 100%, 50%, 0.8)</span>.</p></li>
-</ul>
- <p>The following code snippet demonstrates how to specify a color for an element. For a complete source code, see:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">color.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">current_color.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsl_color.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsla_color.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgb_color.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgba_color.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">transparent.html</a></li> 
- </ul>
-<pre class="prettyprint">
-&lt;!--Keywords--&gt;
-#one
-{
-&nbsp;&nbsp;&nbsp;color: blue;
-&nbsp;&nbsp;&nbsp;background: white;
-&nbsp;&nbsp;&nbsp;border: 1px solid springgreen;
-}
-#one span 
-{
-&nbsp;&nbsp;&nbsp;background: currentColor;
-}
-#one span.hide
-{
-&nbsp;&nbsp;&nbsp;color: transparent;
-}
-
-&lt;!--RGB--&gt;
-#two
-{
-&nbsp;&nbsp;&nbsp; color: #ff0000;
-}
-
-&lt;!--RGBA--&gt;
-#three
-{
-&nbsp;&nbsp;&nbsp;color: rgba(100%, 0, 0, 0.5);
-}
-
-&lt;!--HSL--&gt;
-#four
-{
-&nbsp;&nbsp;&nbsp;color: hsl(0, 100%, 50%);
-}
-
-&lt;!--HSLA--&gt;
-#five
-{
-&nbsp;&nbsp;&nbsp;color: hsla(0, 100%, 50%, 0.5);
-}
-</pre>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm b/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm
deleted file mode 100644 (file)
index 7836fa7..0000000
--- a/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>DOM, Forms and Styles</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles Tutorials</a></li>  
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>DOM, Forms and Styles</h1> 
-  <p>DOM, forms and styles features include all aspects of using various CSS styles and HTML5 forms.</p>
-  <p>The main DOM, forms and styles features are:</p>
-     <ul>
-       <li><a href="animation_w.htm">CSS Animations Module Level 3</a> <p>Enables you to create animations using the CSS3 <span style="font-family: Courier New,Courier,monospace">animation</span> property.</p></li>
-       <li><a href="background_w.htm">CSS Backgrounds and Borders Module Level 3</a> <p>Enables you to specify the border and background styles of HTML elements using CSS properties.</p></li>
-       <li><a href="basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI)</a> <p>Enables you to apply styles to HTML documents.</p></li>
-       <li><a href="color_w.htm">CSS Color Module Level 3</a> <p>Enables you to specify the color and opacity of HTML elements using CSS properties.</p></li>
-       <li><a href="flexible_w.htm">CSS Flexible Box Layout Module</a> <p>Enables you to create flexible layouts for Web applications.</p></li>
-       <li><a href="transform_w.htm">CSS Transforms</a> <p>Enables you to move, rotate, stretch, and scale elements using the CSS3 <span style="font-family: Courier New,Courier,monospace">transform</span> property.</p></li>
-       <li><a href="transition_w.htm">CSS Transitions Module Level 3</a> <p>Enables you to add effects when changing the style of an element using the CSS3 <span style="font-family: Courier New,Courier,monospace">transition</span> property.</p></li>
-       <li><a href="font_w.htm">CSS Fonts Module Level 3</a> <p>Enables you to change the text fonts.</p></li> 
-       <li><a href="text_module_w.htm">CSS Text Module Level 3</a> <p>Enables you to apply various text effects.</p></li>      
-       <li><a href="woff_w.htm">WOFF File Format 1.0</a> <p>Enables you to encode and decode font data easily.</p></li>        
-       <li><a href="html5forms_w.htm">HTML5 Forms</a> <p>Enables you to easily implement Web forms for user input using HTML5 elements.</p></li>
-       <li><a href="media_query_w.htm">Media Queries</a> <p>Enables you to define media features for specific output devices using the CSS media queries.</p></li>      
-       <li><a href="selector_w.htm">Selectors API Level 1 and Level 2</a> <p>Enables you to select element nodes in the DOM tree by matching them against a group of selectors.</p></li>       
-       <li><a href="session_history_w.htm">HTML5 session history of browsing contexts</a> <p>Enables you to manage the browsing history of a device.</p></li>
-     </ul>
-        
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p> 
-<ul>
-       <li><a href="multi_w.htm">CSS Multi-column Layout Module</a> <p>Enables you to create multi-column layouts for Web applications.</p></li>
-</ul>
- 
-        
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/flexible_w.htm b/org.tizen.guides/html/web/w3c/dom/flexible_w.htm
deleted file mode 100644 (file)
index 0266eb8..0000000
--- a/org.tizen.guides/html/web/w3c/dom/flexible_w.htm
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Flexible Box Layout Module</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm">CSS Flexible Box Layout Module Tutorial</a></li>      
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">CSS Flexible Box Layout Module API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">CSS Flexible Box Layout Module API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>CSS Flexible Box Layout Module</h1>
-
-<p>CSS attributes, such as <span style="font-family: Courier New,Courier,monospace">float</span>, <span style="font-family: Courier New,Courier,monospace">display</span>, and <span style="font-family: Courier New,Courier,monospace">position</span>, can be used to adjust and align the screen layout according to various resolutions. However, operating the layout accurately among changing screen sizes is difficult.</p>
-
-<p>Tizen supports the CSS Flexible Box Layout Module API that enables you to create an easily manageable flexible layout, which fluidly adjusts the layout according to viewport size changes. When you <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm#create">create and use a flexible box layout</a>, the alignment method or object (flex item) size within a specific area (flex container) can be adjusted.</p>
-<p>The main components of the flexible box layout include:</p>
-<ul>
-<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-containers" target="_blank">Flex container</a>, which refers to flex or inline-flex DOM elements assigned by the display.<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm#usecont">use the flex container</a> to assign a flex area and the flex items included in it. The flex container properties are used to assign the indication area and alignment method.</p></li>
-<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items" target="_blank">Flex item</a>, which refers to the child nodes of the flex container.
-<p>The flex item changes its size fluidly according to the area of the flex container. You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm#item">define flex item properties</a> to assign the sizes of the respective items and the alignment method.</p></li>
-</ul>
-<p class="figure">Figure: Flexible box layout</p>
-<p align ="center"><img alt="Flexible box layout" src="../../../images/flex_container.png"/></p>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/font_w.htm b/org.tizen.guides/html/web/w3c/dom/font_w.htm
deleted file mode 100644 (file)
index 2e38106..0000000
--- a/org.tizen.guides/html/web/w3c/dom/font_w.htm
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Fonts Module Level 3</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm">CSS Fonts Module Level 3 Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">CSS Fonts Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">CSS Fonts Module Level 3 API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Fonts Module Level 3</h1>
-
-<p>You can change the text fonts easily.</p>
-
-<p>The new text features in CSS Fonts Module Level 3 API include:</p>
-<ul>
-<li>Font properties 
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm#font">use CSS font properties</a>, such as <span style="font-family: Courier New,Courier,monospace">font-style</span>, <span style="font-family: Courier New,Courier,monospace">font-weight</span>, <span style="font-family: Courier New,Courier,monospace">font-variant</span>, <span style="font-family: Courier New,Courier,monospace">font-size</span>, and <span style="font-family: Courier New,Courier,monospace">font-family</span>, to modify the appearance of text.</p></li>
-</ul> 
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm b/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm
deleted file mode 100644 (file)
index 90717b9..0000000
--- a/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm
+++ /dev/null
@@ -1,302 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML5 Forms</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#element">New HTML5 Elements</a></li>
-                       <li><a href="#input">New Input Element Types</a></li>
-                       <li><a href="#attribute">New Input Element Attributes</a></li>                  
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm">HTML5 Forms Tutorial</a></li>       
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">HTML5 Forms API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">HTML5 Forms API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>HTML5 Forms</h1> 
-
-<p>The HTML5 forms provide a convenient way to create consistent screens in your application for accepting user input. In the past, the Web form allowed you to accept user input before transmitting it to a server. With HTML5, you can now improve the user experience without having to use JavaScript by <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm#basic">adding simple features</a>, for example, email validity checks and date pickers, and <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm#advanced">using more advanced functionality</a>, such as security checks and input value pattern definitions.</p>
-
-<h2 id="element" name="element">New HTML5 Elements</h2>
-<p>The following table lists the new elements available for your forms in HTML5. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">elements.html</a>.</p>
-
-<table>
-<caption>Table: New HTML5 elements</caption>
-
-<tbody>
-    <tr>
-     <th>Element</th>
-     <th>Description</th>
-     <th>Example</th>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-datalist-element" target="_blank">datalist</a></td>
-     <td rowspan="1" colspan="1"> <p>Defines a set of option elements that represent predefined options for other controls. The element is used together with the <span style="font-family: Courier New,Courier,monospace">input</span> element to predefine its value.</p>
-<p>In Tizen, the value selected in the <span style="font-family: Courier New,Courier,monospace">datalist</span> element can be edited.</p></td>
-<td rowspan="1" colspan="1">
-<pre class="prettyprint">
-&lt;input type=&quot;text&quot; list=&quot;search&quot;&gt;
-&lt;datalist id=&quot;search&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;Tomato&quot;&gt;Tomato&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;banana&quot;&gt;banana&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;Watermelon&quot;&gt;Watermelon&lt;/option&gt;
-&lt;/datalist&gt;
-</pre>
-     </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-keygen-element" target="_blank">keygen</a></td>
-     <td rowspan="1" colspan="1"> <p>Defines a control for generating a public-private key pair and for submitting the public key from that key pair. The element creates an encrypted key with the value of the <span style="font-family: Courier New,Courier,monospace">name</span> attribute, saves it in the user&#39;s computer and Web server, and activates the next procedure when the 2 values match.</p></td>
-<td rowspan="1" colspan="1">
-<pre class="prettyprint">
-&lt;label&gt;user:&lt;input type=&quot;text&quot; name=&quot;user_name&quot;&gt;&lt;/label&gt;
-&lt;label&gt;keygen:&lt;keygen name=&quot;keygen&quot;&gt;&lt;/label&gt;
-</pre>
-     </td>
-    </tr>
-
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-meter-element" target="_blank">meter</a></td>
-     <td rowspan="1" colspan="1"> <p>Represents a scalar measurement within a known range (the distribution of the assigned range), or a fractional value.</p></td>
-<td rowspan="1" colspan="1">
-<pre class="prettyprint">
-&lt;meter value=&quot;75&quot; min=&quot;0&quot; max=&quot;100&quot; low=&quot;60&quot; high=&quot;80&quot; optimum=&quot;81&quot;&gt;
-&nbsp;&nbsp;&nbsp;75/100
-&lt;/meter&gt;
-</pre>
-     </td>
-    </tr>
-
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-output-element" target="_blank">output</a></td>
-     <td rowspan="1" colspan="1"> <p>Represents the result of a calculation. The element generally shows the calculated result of the value that the user has entered, and is used within the <span style="font-family: Courier New,Courier,monospace">form</span> element.</p></td>
-      <td rowspan="1" colspan="1">
-<pre class="prettyprint">
-&lt;fieldset onsubmit=&quot;return false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oninput=&quot;foobar.value = parseInt(foo.value) * parseInt(bar.value)&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;foo&quot; name=&quot;foo&quot;&gt; *
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;bar&quot; name=&quot;bar&quot;&gt; =
-&nbsp;&nbsp;&nbsp;&lt;output for=&quot;foo bar&quot; name=&quot;foobar&quot;&gt;&lt;/output&gt;
-&lt;/fieldset&gt;
-</pre>
-     </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-progress-element" target="_blank">progress</a></td>
-     <td rowspan="1" colspan="1"> <p>Represents the progress of a task.</p>
-     </td>
-     <td rowspan="1" colspan="1"><pre class="prettyprint">
-&lt;progress value=&quot;75&quot; max=&quot;100&quot;&gt;
-&nbsp;&nbsp;&nbsp;75/100
-&lt;/progress&gt;
-</pre></td>
-    </tr>
-</tbody>
-</table>
-
-<h2 id="input" name="input">New Input Element Types</h2>
-<p>The following table lists the new input element types available for your forms in HTML5. Many of the new elements activate a specific keyboard suitable for the type of value the user is expected to enter (for example, an email or URL). For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">types.html</a>.</p>
-
-<table>
-<caption>Table: New input element types</caption>
-
-<tbody>
-    <tr>
-     <th>Type</th>
-     <th>Description</th>
-     <th>Example</th>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#color-state" target="_blank">color</a></td>
-     <td rowspan="1" colspan="1"> <p>Select an HSL color from the color picker. The value format is HEX (#0099ff).</p>
-    </td>
-        <td rowspan="13" colspan="1">
-    <pre class="prettyprint">
-&lt;input type=&quot;color&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;#ff0000&quot;&gt;
-&lt;input type=&quot;datetime&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;2012-12-12T03:30Z&quot;&gt;
-&lt;input type=&quot;email&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required&gt;
-&lt;input type=&quot;number&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step=&quot;3&quot;&gt;
-&lt;input type=&quot;range&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;1&quot; max=&quot;10&quot;&gt;
-&lt;input type=&quot;tel&quot;&gt;
-&lt;input type=&quot;url&quot;&gt;
-</pre>
-    </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#date-state" target="_blank">date</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter a date with no time zone (yyyy-mm-dd).</p>
-    </td>
-
-    </tr>
-
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#date-and-time-state" target="_blank">datetime</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter a date and time with the (UTC) time zone (yyyy-mm-ddTtt:mmZ).</p>
-
-</td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#local-date-and-time-state" target="_blank">datetime-local</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter a date and time with no time zone (yyyy-mm-ddTtt:mm).</p>
-    </td>
-    </tr>
-
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#e-mail-state" target="_blank">email</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter an email address with the email keyboard.</p>
-     <p>If the <span style="font-family: Courier New,Courier,monospace">required</span> attribute is used, the system checks whether the input format is in line with the ABNF regular expression (<span style="font-family: Courier New,Courier,monospace">1*(atext / &quot;.&quot;) &quot;@&quot; ldh-str 1*(&quot;.&quot; ldh-str)</span>).</p>
-    </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#month-state" target="_blank">month</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter a year and month with no time zone (yyyy-mm).</p>
-    </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#number-state" target="_blank">number</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter numbers with the number keyboard.</p>
-    </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#range-state" target="_blank">range</a> </td>
-     <td rowspan="1" colspan="1"> <p>Select a value from the slider.</p>
-    </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#text-state-and-search-state" target="_blank">search</a></td>
-     <td rowspan="1" colspan="1"> <p>No specific functionality is defined for this element in the HTML5 specifications.</p>
-    </td>
-    </tr>
-         <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#telephone-state" target="_blank">tel</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter a phone number with the number keyboard.</p>
-    </td>
-    </tr>
-    <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#time-state" target="_blank">time</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter a time with no time zone (tt:mm:ss).</p>
-    </td>
-    </tr>
-         <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#url-state" target="_blank">url</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter a URL with the URL keyboard.</p>
-    </td>
-    </tr>
-    <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#week-state" target="_blank">week</a></td>
-     <td rowspan="1" colspan="1"> <p>Enter a year and week with no time zone (yyyy-week).</p>
-    </td>
-    </tr>
-</tbody>
-</table>
-
-<h2 id="attribute" name="attribute">New Input Element Attributes</h2>
-
-<p>The following table lists the new input element attributes available for your forms in HTML5. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">attributes.html</a>.</p>
-
-<table>
-<caption>Table: New input element attributes</caption>
-
-<tbody>
-    <tr>
-     <th>Attribute</th>
-     <th>Description</th>
-     <th>Example</th>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-autocomplete" target="_blank">autocomplete</a></td>
-     <td rowspan="1" colspan="1"> <p>Prefilling feature, which helps the users by, for example, prefilling the user&#39;s address based on earlier user input.</p>
-     <p>The text used by the user before (such as an <span style="font-family: Courier New,Courier,monospace">input</span> element) is listed in a <span style="font-family: Courier New,Courier,monospace">datalist</span> form. The attribute can be used in all form elements, and is activated if the value is &quot;on&quot; and deactivated if the value is &quot;off&quot;.</p>
-    </td>
-    <td rowspan="6" colspan="1">
-    <pre class="prettyprint">
-&lt;input type=&quot;range&quot; min=&quot;1&quot; max=&quot;10&quot;&gt;
-&lt;input type=&quot;tel&quot; pattern=&quot;[0-9]+&quot; required&gt;
-&lt;input placeholder=&quot;You know what to do, huh?&quot;&gt;
-&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;
-</pre>
-    </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-min" target="_blank">min and max</a></td>
-     <td rowspan="1" colspan="1"> <p>Allowed range of values for the element.</p>
-     </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-pattern" target="_blank">pattern</a></td>
-     <td rowspan="1" colspan="1"> <p>Regular expression against which the control&#39;s value is checked.</p>
-     <p>The attribute can be used to check the validity of the form data. During service, a guide requiring the input format from the user is necessary.</p>
-    </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-placeholder" target="_blank">placeholder</a></td>
-     <td rowspan="1" colspan="1"> <p>Short hint intended to aid the user with the data entry.</p>
-     <p>The attribute can be used in the majority of form elements for various purposes, such as hint text or advertisement.</p>
-    </td>
-    </tr>
- <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-required" target="_blank">required</a></td>
-     <td rowspan="1" colspan="1"> <p>Boolean attribute which, when specified, defines that the element is mandatory.</p>
-    </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-step" target="_blank">step</a></td>
-     <td rowspan="1" colspan="1"> <p>Granularity expected of the value, limiting the allowed values.</p>
-    </td>
-    </tr>
-
-    </tbody>
-</table>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/media_query_w.htm b/org.tizen.guides/html/web/w3c/dom/media_query_w.htm
deleted file mode 100644 (file)
index cdf7ed8..0000000
--- a/org.tizen.guides/html/web/w3c/dom/media_query_w.htm
+++ /dev/null
@@ -1,245 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Media Queries</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#rule">Media Query Conditions</a></li>
-                       <li><a href="#priorities">Media Query Priorities</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm">Media Queries Tutorial</a></li>    
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediaquery">Media Queries API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#mediaquery">Media Queries API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>Media Queries</h1>
- 
-<p>Media queries allow you to apply the CSS differently according to the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm#create">liquid layout</a> that mainly reacts according to the device resolution. </p>
-
-<p>You can use media queries in 3 ways:</p>
-
-<ul>
-<li>In CSS
-<p>You can define attribute values depending on given conditions:</p>
-<pre class="prettyprint">@media only screen and (max-width: 480px) {styles}
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li>
-<li>In an <span style="font-family: Courier New,Courier,monospace">@import</span> rule in CSS
-<p>You can import from CSS a file that matches the condition:</p>
-<pre class="prettyprint">@import url(example.css) not screen and (min-width: 480px)
-</pre>
-</li>
-<li>In HTML
-<p>You can directly import the CSS file that matches the condition:</p>
-<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 480px)&quot; href=&quot;example.css&quot;&gt;</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced. </td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li>
-</ul>
-
-<p>For more information on the CSS priorities when different media queries are used, see <a href="#priorities">Media Query Priorities</a>.</p>
-
-<h2 id="rule" name="rule">Media Query Conditions</h2>
-
-<p>You can define the following conditions for the media queries:</p>
-
-<ul>
-<li>Combination and relevancy
-<p>You can combine multiple conditions into 1 Boolean query with the <span style="font-family: Courier New,Courier,monospace">and</span> operator. To define a negative condition (something not being relevant), use the <span style="font-family: Courier New,Courier,monospace">not</span> operator.</p>
-<pre class="prettyprint">@media not screen and (min-width: 320px), screen and (max-width: 480px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
-}
-</pre>
-</li>
-<li>Viewport width
-<p>You can define the query to match to a specific viewport width range using the <span style="font-family: Courier New,Courier,monospace">min-width</span> and <span style="font-family: Courier New,Courier,monospace">max-width</span> attributes.</p>
-<pre class="prettyprint">@media all and (min-width: 320px) and (max-width: 480px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
-}
-</pre>
-</li>
-<li>Device and viewport height
-<p>The <span style="font-family: Courier New,Courier,monospace">height</span> attribute refers to restoring the viewport&#39;s height, and the <span style="font-family: Courier New,Courier,monospace">device-height</span> attribute refers to restoring the resolution set in the device.</p>
-<p>The same difference applies to the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">aspect-ratio</span> attributes, which can assign &#39;device-&#39;.</p>
-<pre class="prettyprint">@media screen and (min-device-height: 700px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-device-height&quot;}
-}
-@media screen and (min-height: 550px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-height&quot;}
-}
-</pre>
-<p>In the above example, a device with the width-height resolution of 480/720 has the <span style="font-family: Courier New,Courier,monospace">{content: &quot;min-height&quot;}</span> rule applied as a priority in a portrait screen, but the <span style="font-family: Courier New,Courier,monospace">{content &quot;min-device-height&quot;}</span> rule applied in a landscape screen.</p> 
-
-</li>
-<li>Device aspect ratio
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">device-aspect-ratio</span> attribute to check the width-length ratio (aspect ratio) of the printing device.</p>
-<pre class="prettyprint">@media all and (device-aspect-ratio: 9/16) and (orientation: portrait),  
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;all and (device-aspect-ratio: 2/3) and (orientation: portrait) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;aspect-ratio, portrait&quot;}
-}
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.)</td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li>
-</ul>
-
- <h2 id="priorities" name="priorities">Media Query Priorities</h2>
-
-<p>When multiple media queries and conditions are defined, CSS is applied with the following priorities:</p>
-<ul>
-<li>In case of the CSS reiteration declaration, the CSS that has been declared last is applied.</li>
-<li>In case of specificity, the CSS with the highest specificity is applied.
-<p>The specificity is calculated as follows:</p><ul><li>id attribute = 100</li>
-<li>class attribute = 10</li>
-<li>element = 1</li></ul>
-<p>Selectors, such as <span style="font-family: Courier New,Courier,monospace">section#content &gt; .title p</span>, carry the specificity of 112.</p></li>
-<li>In case of user override, the user CSS is applied instead of the creator CSS.</li>
-<li><p>CSS is applied first based on the conditions in the <span style="font-family: Courier New,Courier,monospace">@import</span> rule, then based on the conditions in CSS, and finally based on the conditions in HTML.</p></li>
-<li><p>In media queries, regardless of CSS priority, CSS which has not been imported still exists based on the conditions.</p></li>
-</ul>
-
-<p>To apply media query, consider an example with the following files:</p>
-<pre class="prettyprint">
-&lt;!--example.html--&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;c.css&quot;&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;a.css&quot;&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (min-width: 768px)&quot; href=&quot;b.css&quot;&gt;
-&lt;style&gt;
-&nbsp;&nbsp;&nbsp;@media all and (max-width: 400px) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.example: after {content: &quot;In HTML head&quot;}
-&nbsp;&nbsp;&nbsp;}
-&lt;/style&gt;
-
-&lt;!--a.css--&gt;
-body {background-color: #ccc}
-
-@media screen and (max-width: 480px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content:&quot;a.css : width: ~ 480px&quot;}
-}
-@media screen and (min-width: 480px) and (max-width: 768px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;a.css : width: 480px ~ 768px&quot;}
-}
-
-&lt;!--b.css--&gt;
-@import url(&quot;c.css&quot;);
-
-body {background-color: #333; color: #fff}
-
-@media screen and (min-width: 768px) and (max-width: 1024px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;b.css : width: 768px ~ 1024px&quot;}
-}
-
-&lt;!--c.css--&gt;
-body {background-color: tomato}
-
-@media screen and (min-width: 768px) and (max-width: 1024px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 768px ~ 1024px&quot;}
-}
-@media screen and (min-width: 1024px) and (max-width: 1280px) 
-{
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 1024px ~ 1280px&quot;}
-}
-</pre>
-
-<p>The CSS is applied based on the viewport:</p>
-<ul>
-<li>If the viewport is 320 px:
-<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: ~ 480px&quot;</span>).</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li>
-<li>CSS is applied instead of the HTML <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> (the <span style="font-family: Courier New,Courier,monospace">a.css</span> file has higher priority than <span style="font-family: Courier New,Courier,monospace">content: &quot;In HTML head&quot;</span>).</li>
-</ul></li>
-<li>If the viewport is 700 px:
-<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: 480px ~ 768px&quot;</span>).</p> </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li></ul></li>
-<li>If the viewport is 900 px:
-<ul>
-<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is imported.</li>
-<li>c.css is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;c.css : width: 768px ~ 1024px&quot;</span>). </li>
-<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is not imported.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;b.css : width: 768px ~ 1024px&quot;</span>).</li>
-</ul></li>
-</ul>
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/multi_w.htm b/org.tizen.guides/html/web/w3c/dom/multi_w.htm
deleted file mode 100644 (file)
index 00f9575..0000000
--- a/org.tizen.guides/html/web/w3c/dom/multi_w.htm
+++ /dev/null
@@ -1,218 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Multi-column Layout Module</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#size">Setting the Column Number and Width</a></li>
-                       <li><a href="#gap">Setting the Column Gap</a></li>
-                       <li><a href="#rule">Setting the Column Rule</a></li>
-                       <li><a href="#span">Setting the Column Span</a></li>
-                       <li><a href="#break">Setting the Column Break</a></li>
-               </ul>   
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm">CSS Multi-column Layout Module Tutorial</a></li> 
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">CSS Multi-column Layout Module API for Mobile Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>CSS Multi-column Layout Module</h1>
- 
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
- 
- <p>You can arrange the screen content into columns. Using the CSS <span style="font-family: Courier New,Courier,monospace">column-</span> properties, the content elements can flow between columns when the column height or number changes. You can use the properties alone to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm#basic">create a basic layout</a>, or add JavaScript code to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm#dynamic">make the layout dynamic</a>.</p>
- 
- <p>You can manage the following column-related features:</p>
-<ul>
-<li><a href="#size">Setting the column number and width</a></li>
-<li><a href="#gap">Setting the column gap</a></li>
-<li><a href="#rule">Setting the column rule</a></li>
-<li><a href="#span">Setting the column span</a></li>
-<li><a href="#break">Setting the column break</a></li>
-</ul>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Up to Tizen SDK version 2.2, most CSS properties and values used in Tizen required the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix. To ensure future compatibility, these properties can now be used with or without the prefix.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-<h2 id="size" name="size">Setting the Column Number and Width</h2>
-
-<p> When the layout is set to a constant number of columns using the <span style="font-family: Courier New,Courier,monospace">column-count</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-count)</span> property, the column width is set to fill the available horizontal space.</p>
-<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown on the top), the column width is 116 px, whereas on a 720 x 1280 display (shown on the bottom), the column with is 143 px.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-count</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_count" target="_blank">multi_column_column_count/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article
-{
-&nbsp;&nbsp;&nbsp;column-count: 4;
-&nbsp;&nbsp;&nbsp;-webkit-column-count: 4;
-&nbsp;&nbsp;&nbsp;margin: 10px;
-}
-</pre>
-
-<p class="figure">Figure: 4 columns on different resolution displays</p> 
-<p align="center"><img alt="4 columns on different resolution displays" src="../../../images/4_columns.png" /></p> 
-
-<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width)</span> property sets the base column width.</p>
- <p>In the following code snippet and figure, the column width is set to 153 px, but the effective column width is 288 px for a 480 x 800 display (shown on the left) and 154 px for a 720 x 1280 display (shown on the right). The parameter sets the column to at least the defined width, but not wider than the available display space or twice the defined width. The actual column width is calculated using a <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412/#pseudo-algorithm" target="_blank">pseudo-algorithm</a>.</p>
-<p>The code snippet shows how the multi-column layout is implemented when the vertical space is limited. If there is more content than fits the available space, the next column is set outside the available space. Using the <span style="font-family: Courier New,Courier,monospace">overflow: scroll</span> property, the column can be scrolled horizontally.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-width</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_width" target="_blank">multi_column_column_width/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article
-{
-&nbsp;&nbsp;&nbsp;width: 90vw;
-&nbsp;&nbsp;&nbsp;height: 90vh;
-&nbsp;&nbsp;&nbsp;column-width: 153px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;
-&nbsp;&nbsp;&nbsp;margin: 5vw;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
-&nbsp;&nbsp;&nbsp;overflow: scroll;
-}
-</pre>
-
-<p class="figure">Figure: Column width 153 px on different resolution displays</p> 
-<p align="center"><img alt="Column width 153 px on different resolution displays" src="../../../images/column_width.png" /></p> 
-
-<h2 id="gap" name="gap">Setting the Column Gap</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property sets the distance between columns. The property affects the column width, as the column width, gap, and margins all take available space. In the following code snippet and figure, the column gap is set to 17 px.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_gap" target="_blank">multi_column_column_gap/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article 
-{
-&nbsp;&nbsp;&nbsp;height: 303px;
-&nbsp;&nbsp;&nbsp;column-width: 153px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;
-&nbsp;&nbsp;&nbsp;column-gap: 17px;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 17px;
-&nbsp;&nbsp;&nbsp;margin: 7px;
-&nbsp;&nbsp;&nbsp;padding: 3px;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
-}
-</pre>
-
-<p class="figure">Figure: Column gap</p> 
-<p align="center"><img alt="Column gap" src="../../../images/column_gap.png" /></p>
-
-<h2 id="rule" name="rule">Setting the Column Rule</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property displays a vertical line in the middle of the column gap.</p>
-<p>The rule has analogical parameters, such as width, line style, and color, but its size is not included in the available space, and it is a drawing similar to the background.</p>
-
-<p>Rules are only displayed in the content area. If the <span style="font-family: Courier New,Courier,monospace">padding</span> property is set in the same element, the rule appears shorter than the background. In the following code snippet and figure, the rule width is set to 5 px.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_rule" target="_blank">multi_column_column_rule/renamed_index.html</a>.</p>
-<pre class="prettyprint">article 
-{
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 5px;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: rgb(92, 203, 246);
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;
-}
-</pre>
-
-<p class="figure">Figure: Column rule</p> 
-<p align="center"><img alt="Column rule" src="../../../images/column_rule.png" /></p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">In Tizen SDK version 2.2, to avoid displaying the rules incorrectly, do not use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property with horizontal scrolling of the columns.</td> 
-      </tr> 
-     </tbody>
-</table>
-
-<h2 id="span" name="span">Setting the Column Span</h2>
-<p>By default, all elements within the columns are no wider than the column width. The <span style="font-family: Courier New,Courier,monospace">column-span</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-span</span>) property can be used to display content across all columns.</p>
-<p>When using this property with column elements which have the <span style="font-family: Courier New,Courier,monospace">column-count</span> or <span style="font-family: Courier New,Courier,monospace">column-width</span> property set, the following restrictions apply:</p>
-<ul>
-<li>Column element height is not used and elements in columns take more vertical space than is set in height.</li>
-<li>If the column element has the <span style="font-family: Courier New,Courier,monospace">overflow</span> property set to <span style="font-family: Courier New,Courier,monospace">hidden</span>, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is ignored.</li>
-<li>An element using the <span style="font-family: Courier New,Courier,monospace">column-span</span> property does not have to be a direct child of the column element.</li>
-</ul>
-<p>In the figure below, the blue arrow shows the order of the column elements. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is set to  <span style="font-family: Courier New,Courier,monospace">all</span>, as in the following code snippet.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-span</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_span" target="_blank">multi_column_column_span/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article.left header 
-{
-&nbsp;&nbsp;&nbsp;column-span: all;
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
-}
-</pre>
-
-<p class="figure">Figure: Column span</p> 
-<p align="center"><img alt="Column span" src="../../../images/column_span.png" /></p>
-
-<h2 id="break" name="break">Setting the Column Break</h2>
-<p>By default, column elements are broken to balance column height. The <span style="font-family: Courier New,Courier,monospace">break-before</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-before</span>), <span style="font-family: Courier New,Courier,monospace">break-after</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-after</span>), and <span style="font-family: Courier New,Courier,monospace">break-inside</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-inside</span>) properties can be used to define that an element cannot be broken between columns (set to <span style="font-family: Courier New,Courier,monospace">avoid</span>), or that an element must begin or end within a given column.</p>
-
-<p>The following code snippet and figure illustrate the use of the <span style="font-family: Courier New,Courier,monospace">break-</span> property. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">break-</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">break-before</span> property is set to  <span style="font-family: Courier New,Courier,monospace">always</span>.</p>
-<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-break</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_break" target="_blank">multi_column_column_break/renamed_index.html</a>.</p>
-<pre class="prettyprint">
-article.lower section
-{
-&nbsp;&nbsp;&nbsp;break-before: always;
-&nbsp;&nbsp;&nbsp;-webkit-column-break-before: always;
-}
-</pre>
-
-<p class="figure">Figure: Column break</p> 
-<p align="center"><img alt="Column break" src="../../../images/column_break.png" /></p>
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/selector_w.htm b/org.tizen.guides/html/web/w3c/dom/selector_w.htm
deleted file mode 100644 (file)
index 3794371..0000000
--- a/org.tizen.guides/html/web/w3c/dom/selector_w.htm
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Selectors API Level 1 and Level 2</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-       <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm">Selectors API Level 1 and Level 2 Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors1">Selectors API Level 1 for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors2">Selectors API Level 2 for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors1">Selectors API Level 1 for Wearable Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors2">Selectors API Level 2 for Wearable Web</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Selectors API Level 1 and Level 2</h1>
-
-<p>The selectors allow you to select element nodes in the DOM tree by matching them against a group of selectors, and testing whether the element matches a particular selector. Using selectors makes searching and selecting complex elements faster.</p>
-
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> and <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> methods to retrieve the element nodes. Both methods accept a single parameter, a string selector. The string selector is a selector or a group of selectors that can be surrounded by whitespace. If you use a selector group as the string selector with the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method, the method returns the first element (if any) that matches any of the selectors in the group.</p>
-
-<p>The main features of the Selectors API Level 1 and Level 2 include:</p>
-<ul>
-<li>Selecting a single element
-<p>Use <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS Selectors</a> to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm#single">select a single element</a>.</p></li>
-<li>Selecting multiple elements simultaneously
-<p><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm#multi">Select multiple elements</a> using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method.</p></li>
-</ul>
-<p>You can also <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm#create">create an accordion menu</a>.</p>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/session_history_w.htm b/org.tizen.guides/html/web/w3c/dom/session_history_w.htm
deleted file mode 100644 (file)
index 1920572..0000000
--- a/org.tizen.guides/html/web/w3c/dom/session_history_w.htm
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-    <title>HTML5 session history of browsing contexts</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm">HTML5 session history of browsing contexts Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#history">HTML5 session history of browsing contexts API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#history">HTML5 session history of browsing contexts API for Wearable Web</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-  <h1>HTML5 session history of browsing contexts</h1>
- 
- <p>You can manage the session history of browsing contexts.</p> 
- <p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface is used to save in the session history the page information that has been read by the user. You can also use the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to directly store the page information which has already been analyzed in the URL, or general information which is not stored in the URL (such as location, or the scroll state of the page or a certain DOM element).</p>
- 
- 
-<p>The main features of the HTML5 session history of browsing contexts API include:</p>
-<ul>
-<li>Adding entries to the session history
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method of the <span style="font-family: Courier New,Courier,monospace">history</span> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm#Managing_Session_History">add an entry to the session history</a>. With the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method, you can update the session history details.
-</p></li>
-<li>Detecting session history status changes
-<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event is fired when the user navigates to a page stored in the session history. The <span style="font-family: Courier New,Courier,monospace">popstate</span> event
-references the information stored with the <span style="font-family: Courier New,Courier,monospace">pushState()</span> or <span style="font-family: Courier New,Courier,monospace">replaceState()</span> methods, and enables you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm#Detecting_Session_History">change the status of the page based on the stored session history</a> (such as moving focus to a certain DOM element).</p>
-</li>
-</ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/text_module_w.htm b/org.tizen.guides/html/web/w3c/dom/text_module_w.htm
deleted file mode 100644 (file)
index 6b6302e..0000000
--- a/org.tizen.guides/html/web/w3c/dom/text_module_w.htm
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Text Module Level 3</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm">CSS Text Module Level 3 Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">CSS Text Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">CSS Text Module Level 3 API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Text Module Level 3</h1>
-
-<p>You can apply various text effects easily.</p>
-
-<p>The new text features in CSS Text Module Level 3 include:</p>
-<ul>
-
-<li>Text properties
-<p>You can use CSS text properties, such as <span style="font-family: Courier New,Courier,monospace">text-transform</span>, <span style="font-family: Courier New,Courier,monospace">text-align</span>, <span style="font-family: Courier New,Courier,monospace">text-indent</span>, <span style="font-family: Courier New,Courier,monospace">letter-spacing</span>, and <span style="font-family: Courier New,Courier,monospace">word-spacing</span>, to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm#text">manipulate and transform text</a>.</p></li>
-</ul> 
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/transform_w.htm b/org.tizen.guides/html/web/w3c/dom/transform_w.htm
deleted file mode 100644 (file)
index 8de381d..0000000
--- a/org.tizen.guides/html/web/w3c/dom/transform_w.htm
+++ /dev/null
@@ -1,265 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Transforms</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#prop_trans">Transform Properties</a></li>
-                       <li><a href="#twod">2D and 3D Transform Functions</a></li>
-               </ul>
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm">CSS Transforms Tutorial</a></li>     
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transforms">CSS Transforms API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Transforms</h1>
-
-<p>Transforms allow you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm#animation">modify the coordinate space</a> where each element is positioned. The elements can be translated, rotated, and scaled in 2- or 3-dimensional space. According to the API, the coordinate system is a visual formatting model, and positions and sizes in the coordinate space are expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.</p>
-
-<p>To enhance the rendering performance and user experience, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm#hw">use hardware acceleration</a> and <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm#effect">create fade effects</a>.</p>
-
-<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <span style="font-family: Courier New,Courier,monospace">-moz-</span> prefix, the Chrome and Safari browsers require the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix, and the Opera browser requires the <span style="font-family: Courier New,Courier,monospace">-o-</span> prefix.</p>
-
-<h2 name="prop_trans" id="prop_trans">Transform Properties</h2>
-
-<p>You can define various properties to control the elements within the coordinate space:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">transform-origin</span>
-<p>This property changes the location of the transformed element. It can only be used with elements for whom the <span style="font-family: Courier New,Courier,monospace">transform</span> property has been declared.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">transform-style</span>
-<p>This property defines the rendering of the inherited element in the 3D space. Animation property has been added in the example for easier comprehension.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">perspective</span>
-<p>This property changes the perspective of the element being expressed. A 3D transform element must be used together with this property to emphasize the expression of the X axis.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">perspective-origin</span>
-<p>This property defines the location facing the element.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">backface-visibility</span>
-<p>This property defines whether the backface of the transformed element is expressed.</p></li>
-</ul>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(30deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective: 220;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animation: trans-ani 10s infinite linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backface-visibility: visible;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(30deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective: 220;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: trans-ani 10s infinite linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-backface-visibility: visible;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-style: preserve-3d;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective-origin: 30% 30%;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-style: preserve-3d;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;transform-origin&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform-origin: 30% 30%;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;box&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-<p>In addition to transform properties, you can also use various <a href="#twod">2D and 3D transform functions</a>.</p>
-
- <h2 id="twod" name="twod">2D and 3D Transform Functions</h2>
-
-<p>The CSS Transforms API supports various transform functions in 2D and 3D.</p>
-
-<p>In 2D transforms, all transform functions are expressed based on a matrix. The X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span>, <span style="font-family: Courier New,Courier,monospace">scale()</span>, and <span style="font-family: Courier New,Courier,monospace">skew()</span> functions can be expressed in individual functions. For example, the X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span> function can be expressed with the <span style="font-family: Courier New,Courier,monospace">translateX(number)</span> and <span style="font-family: Courier New,Courier,monospace">translateY(number)</span> functions.</p>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate(30px, 30px);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate(30px, 30px);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1.2, 1.2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale(1.2, 1.2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(45deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(45deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-skew 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: skew(20deg, 20deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: skew(20deg, 20deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;2d transform&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;translate&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box no-transform&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Original&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed box-translate&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform: translate(30px, 30px);&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-<p>In 3D transforms, the Z axis has been added (for example, <span style="font-family: Courier New,Courier,monospace">translateZ(number)</span> and <span style="font-family: Courier New,Courier,monospace">scale3dZ(number)</span>). When handling 3D transforms, pay attention to the following:</p>
-<ul>
-<li>If a transform function is used together with the <span style="font-family: Courier New,Courier,monospace">perspective</span> property, the z axis is emphasized.</li>
-<li>The X, Y, and Z values of the <span style="font-family: Courier New,Courier,monospace">translate3d()</span>, <span style="font-family: Courier New,Courier,monospace">scale3d()</span>, and <span style="font-family: Courier New,Courier,monospace">rotate3d()</span> functions can be expressed in individual functions.</li>
-<li>In the <span style="font-family: Courier New,Courier,monospace">rotate3d(number, number, number, angle)</span> function, the element rotates according to the assigned parameter (angle) with the X, Y, and Z directional vectors as the center. Each vector can be expressed as an individual function: for example, the <span style="font-family: Courier New,Courier,monospace">rotateX(&lt;angle&gt;)</span> and <span style="font-family: Courier New,Courier,monospace">rotate3d(1, 0, 0, &lt;angle&gt;)</span> functions perform the same task.</li>
-</ul> 
-<p>The following code snippet demonstrates how to implement a 3D transform. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">3d_transform.html</a>.</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.first-transform {opacity: .5; background: #3399cc;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.transformed {opacity: .8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* translate3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .first-transform 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .transformed 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(15px, 15px, 60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(15px, 15px, 60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* scale3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .first-transform 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(1, 1, 1) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(1, 1, 1) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .transformed 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* rotate3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .first-transform 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(-1, -1, -1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(-1, -1, -1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .transformed 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(1, 1, 1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(1, 1, 1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* matrix3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .first-transform 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .transformed 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;3D transform&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;First box value:&lt;/strong&gt; transform: translate3d(-5px, -5px, -60px) rotateY(70deg);&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;Second box value:&lt;/strong&gt; transform: translate3d(15px, 15px, 60px) rotateY(70deg);&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea box-translate3d&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box first-transform&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;First box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Second Box&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mouse over or tab here to animate
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/transition_w.htm b/org.tizen.guides/html/web/w3c/dom/transition_w.htm
deleted file mode 100644 (file)
index a0e9a88..0000000
--- a/org.tizen.guides/html/web/w3c/dom/transition_w.htm
+++ /dev/null
@@ -1,136 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Transitions Module Level 3</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm">CSS Transitions Module Level 3 Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transitions">CSS Transitions Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transitions">CSS Transitions Module Level 3 API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Transitions Module Level 3</h1>
-
-<p>Transitions allow you to <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm#modify">enable implicit transitions</a>, which describe how the CSS properties can be made to change smoothly from one value to another over a given duration. To enhance the rendering performance, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm#hw">use hardware acceleration</a>.</p>
-
-<p>When using the CSS transition properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>
-
-<h2 name="prop" id="prop">Transition Properties</h2> 
- 
-<p>You can define various properties to control the element transitions:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">transition-property</span>
-<p>This property defines the element property that is changed during the transition. In the following code snippet, both the width and height of the element change when the mouse hovers over it, but the transition effect is applied to the width property only.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">transition-duration</span>
-<p>This property defines the duration of the transition. You must define as many instances of the property as you have elements in the <span style="font-family: Courier New,Courier,monospace">transition-property</span> property.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">transition-timing-function</span>
-<p>This property defines the pace of the transition. The value of the property is defined as a stepping function or a cubic Bézier curve. The <span style="font-family: Courier New,Courier,monospace">ease</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0.25, 0.1, 0.25, 1)</span>, and the <span style="font-family: Courier New,Courier,monospace">linear</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0, 0, 1, 1)</span>.</p></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">transition-delay</span>
-<p>This property defines the delay time before the start of the transition.</p></li>
-
-</ul>
-
-<p>The following code snippet demonstrates how to use transition properties. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_property.html</a>.</p>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body{font-size: 12px}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-property: width;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 2s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: ease;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-delay: 0.5s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box: hover 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 300px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: CornflowerBlue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;CSS transitions tutorial&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Mouse over or tap here to animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transition-property: width, height, background&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/body&gt;
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The <span style="font-family: Courier New,Courier,monospace">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped. </td> 
-      </tr> 
-     </tbody> 
-    </table>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property allows you to define all the transition properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">transition-property</span> | <span style="font-family: Courier New,Courier,monospace">transition-duration</span> | <span style="font-family: Courier New,Courier,monospace">transition-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">transition-delay</span>. If you omit a property value, a default value is used instead.</p>
-
-<pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;.box 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: width 1s ease 1s;
-&nbsp;&nbsp;&nbsp;}
-&lt;/style&gt;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property connects movement more naturally than the more generally used the pseudo classes, such as <span style="font-family: Courier New,Courier,monospace">:hover</span> or <span style="font-family: Courier New,Courier,monospace">:active</span>. The smooth effect can be achieved more conveniently and easily with the <span style="font-family: Courier New,Courier,monospace">transition</span> property than with JavaScript or Flash, and the <span style="font-family: Courier New,Courier,monospace">transition</span> property also supports the browser side to provide excellent performance.</p>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/dom/woff_w.htm b/org.tizen.guides/html/web/w3c/dom/woff_w.htm
deleted file mode 100644 (file)
index 06848fe..0000000
--- a/org.tizen.guides/html/web/w3c/dom/woff_w.htm
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>WOFF File Format 1.0</title>
-</head>
-
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm">WOFF File Format 1.0 Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 1.0 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#woff">WOFF File Format 1.0 API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>WOFF File Format 1.0</h1>
-
-<p>You can decode and restore font data easily.</p>
-
-<p>The new text features in WOFF File Format 1.0 include:</p>
-<ul>
-
-<li>WOFF file format 1.0 
-<p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rule</a> to display it identically with the input font. The <span style="font-family: Courier New,Courier,monospace">@font-face</span> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm#woff">use WOFF</a> within a Web page. </p></li>
-</ul> 
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/guides_w3c_w.htm b/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
index 33b4dd2..49f5e21 100644 (file)
--- a/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
+++ b/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
@@ -37,8 +37,6 @@
 <p>Select the feature you are interested in and see what Tizen offers for your application:</p>
 
 <ul>
-       <li><a href="dom/dom_guide_w.htm">DOM, Forms and Styles</a>
-       <p>Enables you to use various CSS style and HTML5 form features.</p></li>
        <li><a href="device/device_guide_w.htm">Device</a>
        <p>Enables you to manage information about device-specific features, such as vibration and browser state.</p></li>
        <li><a href="graphics/graphics_guide_w.htm">Graphics</a>
@@ -55,14 +53,14 @@
        <p>Enables you to use Web workers used to run scripts in the background.</p></li>
        <li><a href="location/location_guide_w.htm">Location</a>
        <p>Enables you to use geolocation features.</p></li>
-       <li><a href="ui/ui_guide_w.htm">UI</a> <span style="color: red">in mobile applications only</span>
-       <p>Enables you to handle the application UI through the clipboard and drag and drop events.</p></li>    
        <li><a href="useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a>
        <p>Enables you to use common W3C features related to various APIs.</p></li>
        <li><a href="supplement/supplement_guide_w.htm">Supplementary Features</a>
        <p>Enables you to take advantage of supplementary features, such as full screen views, typed arrays, and the WebGL graphics library.</p></li>           
 </ul>
-    
+
+<p>For more information about implementing the UI for your application using the W3C features, see <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a>.</p>    
+       
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
index b87b64c..159d639 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
@@ -1,80 +1,80 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>getUserMedia</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm">getUserMedia Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia API for Wearable Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>getUserMedia</h1>
-<p>You can access multimedia streams, such as camera, on a local device. The feature can be used, for example, for real-time communication, recording, and surveillance.</p>
-
-<p>The main features of the getUserMedia API include:</p>
-<ul>
-<li>Retrieving multimedia streams
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">navigator.webkitGetUserMedia()</span> method to request user access to retrieve the multimedia streams of local devices, such as camera. The method returns the media as a JSON object.</p> </li>
-<li>Capturing media
-<p>You can capture <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm#capture">media content</a> and transform it to various formats.</p>
-
-</li>
-</ul>
-
-<table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">Tizen supports a WebKit-based <span style="font-family: Courier New,Courier,monospace">GetUserMedia()</span> method, so always use it in the <span style="font-family: Courier New,Courier,monospace">webkitGetUserMedia()</span> format.</td>
-      </tr>
-     </tbody>
-    </table>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>getUserMedia</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm">getUserMedia Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia API for Wearable Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>getUserMedia</h1>\r
+<p>You can access multimedia streams, such as camera, on a local device. The feature can be used, for example, for real-time communication, recording, and surveillance.</p>\r
+\r
+<p>The main features of the getUserMedia API include:</p>\r
+<ul>\r
+<li>Retrieving multimedia streams\r
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">navigator.webkitGetUserMedia()</span> method to request user access to retrieve the multimedia streams of local devices, such as camera. The method returns the media as a JSON object.</p> </li>\r
+<li>Capturing media\r
+<p>You can capture <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm#capture">media content</a> and transform it to various formats.</p>\r
+\r
+</li>\r
+</ul>\r
+\r
+<table class="note">\r
+     <tbody>\r
+      <tr>\r
+       <th class="note">Note</th>\r
+      </tr>\r
+      <tr>\r
+       <td class="note">Tizen supports a WebKit-based <span style="font-family: Courier New,Courier,monospace">GetUserMedia()</span> method, so always use it in the <span style="font-family: Courier New,Courier,monospace">webkitGetUserMedia()</span> format.</td>\r
+      </tr>\r
+     </tbody>\r
+    </table>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/media/media_capture_w.htm b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
index 51b6480..b71229b 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
@@ -1,77 +1,77 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML Media Capture</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm">HTML Media Capture Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>HTML Media Capture</h1>
- 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
- 
-<p>Media capture uses the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute of the <a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/#dfn-htmlinputelement" target="_blank">HTMLInputElement</a> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm#activate">activate features</a>, such as camera or microphone, to enable direct media capture when the user is uploading a file.</p>
-
-<p>The following media formats can be used with the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">filesystem</span> <p>Activates the device file picker.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">camera</span> <p>Activates the device camera.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">camcorder</span> <p>Activates the device video camera.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">microphone</span><p>Activates the device sound recorder.</p></li>
-</ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>HTML Media Capture</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm">HTML Media Capture Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>HTML Media Capture</h1>\r
+ \r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>  \r
+ \r
+<p>Media capture uses the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute of the <a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/#dfn-htmlinputelement" target="_blank">HTMLInputElement</a> interface to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_capture_tutorial_w.htm#activate">activate features</a>, such as camera or microphone, to enable direct media capture when the user is uploading a file.</p>\r
+\r
+<p>The following media formats can be used with the <span style="font-family: Courier New,Courier,monospace">capture</span> attribute:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">filesystem</span> <p>Activates the device file picker.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">camera</span> <p>Activates the device camera.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">camcorder</span> <p>Activates the device video camera.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">microphone</span><p>Activates the device sound recorder.</p></li>\r
+</ul>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/media/media_guide_w.htm b/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
index d510463..cbb2777 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
@@ -1,70 +1,70 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Media</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm">Media Tutorials</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media API for Wearable Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Media</h1>
-  <p>Media features include playing various media, and accessing media streams and capture capabilities.</p>
-  <p>The main media features are:</p>
-  <ul> 
-  <li><a href="getusermedia_w.htm">getUserMedia</a> <p>Enables you to access a local device to generate a multimedia stream.</p></li>
-  <li><a href="video_audio_w.htm">HTML5 video and audio element</a> <p>Enables you to control multimedia playback, retrieve information about playback duration and media content downloading progress, and check supported media formats using the HTML5 <span style="font-family: Courier New,Courier,monospace">&lt;audio&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;video&gt;</span> elements.</p></li>
-  </ul>
-  
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p> 
-<ul>
-  <li><a href="media_capture_w.htm">HTML Media Capture</a> <p>Enables you to easily access the media capture capabilities, such as a camera or microphone, based on their type using the HTML <span style="font-family: Courier New,Courier,monospace">capture</span> attribute.</p></li>
-  <li><a href="webaudio_w.htm">Web Audio</a> <p>Enables you to play audio content using the HTML5 <span style="font-family: Courier New,Courier,monospace">&lt;audio&gt;</span> element.</p></li>  
-</ul> 
-  
-  
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Media</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm">Media Tutorials</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media API for Wearable Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Media</h1>\r
+  <p>Media features include playing various media, and accessing media streams and capture capabilities.</p>\r
+  <p>The main media features are:</p>\r
+  <ul> \r
+  <li><a href="getusermedia_w.htm">getUserMedia</a> <p>Enables you to access a local device to generate a multimedia stream.</p></li>\r
+  <li><a href="video_audio_w.htm">HTML5 video and audio element</a> <p>Enables you to control multimedia playback, retrieve information about playback duration and media content downloading progress, and check supported media formats using the HTML5 <span style="font-family: Courier New,Courier,monospace">&lt;audio&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;video&gt;</span> elements.</p></li>\r
+  </ul>\r
+  \r
+<p>The following guides apply in <strong>mobile applications only</strong>:</p> \r
+<ul>\r
+  <li><a href="media_capture_w.htm">HTML Media Capture</a> <p>Enables you to easily access the media capture capabilities, such as a camera or microphone, based on their type using the HTML <span style="font-family: Courier New,Courier,monospace">capture</span> attribute.</p></li>\r
+  <li><a href="webaudio_w.htm">Web Audio</a> <p>Enables you to play audio content using the HTML5 <span style="font-family: Courier New,Courier,monospace">&lt;audio&gt;</span> element.</p></li>  \r
+</ul> \r
+  \r
+  \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/media/video_audio_w.htm b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
index 64478aa..bb8e430 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
@@ -1,187 +1,187 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML5 video and audio element</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm">HTML5 video and audio element Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">HTML5 video element API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#audio">HTML5 audio element API for Wearable Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#video">HTML5 video element API for Wearable Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>HTML5 video and audio element</h1>
- 
-<p>You can use the HTML5 <span style="font-family: Courier New,Courier,monospace">audio</span> and <span style="font-family: Courier New,Courier,monospace">video</span> elements to play multimedia files streaming, without a separate plug-in.</p>
-<p>Using JavaScript, the playback can be controlled with <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media events</a>. The audio and video elements used as media elements inherit all the properties and methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-element" target="_blank">HTMLMediaElement</a> interface.</p>
-
-<p>The main features of the audio and video elements with JavaScript include:</p>
-<ul>
-<li>Creating a player
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#create">create a simple audio and video player</a>.</p></li>
-<li>Controlling the playback
-<p>You can use the  <span style="font-family: Courier New,Courier,monospace">Play()</span> and  <span style="font-family: Courier New,Courier,monospace">Pause()</span> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-elements" target="_blank">Media</a> object to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>
-</li>
-<li>Retrieving duration and play time
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#retrieve">retrieve the duration and play time</a> of the media file, if its metadata (such as playing time, duration,  and video&#39;s width and height) is loaded.</p>
-</li>
-<li>Playing from a random position
-<p>You can indicate the playback time by <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#move">playing the media file from a random position</a>. To do this, you must change the <span style="font-family: Courier New,Courier,monospace">currentTime</span> value of the <span style="font-family: Courier New,Courier,monospace">Media</span> object to trigger the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#event-media-timeupdate" target="_blank">timeupdate</a> event.</p>
-</li>
-<li>Retrieving progress state
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#display">retrieve and display the download progress state</a> using the <span style="font-family: Courier New,Courier,monospace">Progress</span> media event, which is triggered when information related to the progress of a media object loading media contents is updated.</p></li>
-<li>Checking supported media formats
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#check">check whether the media data can be played</a> using the <span style="font-family: Courier New,Courier,monospace">canPlayType()</span> method. Basically, the MIME type must be set in the Web server in a format that is supported in Tizen. If a non-supported MIME type is used, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#handle">handle exceptions</a> in advance.</p>
-<p>Tizen supports the following media formats: </p>
-<ul>
-<li>Video: 3GP, AVI, ASF, OGV, MP4, MKV, WMV</li>
-<li>Audio: AAC, AMR, MP3, OGG, WAV, WMA</li>
-</ul>
-<p>The following table lists the codecs supported in Tizen.</p>
-<table>
-<caption>Table: Supported codecs</caption>
-   <colgroup>
-    <col width="20%" />
-    <col width="40%" />
-    <col width="20%" />
-    <col width="20%" />
-   </colgroup>
-<tbody>
-    <tr>
-     <th>Type</th>
-     <th>Codec</th>
-     <th>Encoder</th>
-     <th>Decoder</th>
-    </tr>
-     <tr>
-     <td rowspan="10" colspan="1"> <p> Video</p> </td>
-     <td rowspan="1" colspan="1"> <p> MPEG-1 </p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v1</p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v2</p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v3</p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> H.264, H.263-1996, H.263+, H263-1998, H263 v2</p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> H.264, MPEG-4 AVC, MPEG-4 part10</p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> WMV3</p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> VC1</p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p>THEORA</p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="6" colspan="1"> <p> Audio</p> </td>
-     <td rowspan="1" colspan="1"> <p> AAC </p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> MP3 </p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> WMA (Available up to WMA8. WMA9 is not available.)</p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> AMR-NB</p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> AMR-WB</p> </td>
-     <td rowspan="1" colspan="1"> <p> No </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-     <tr>
-     <td rowspan="1" colspan="1"> <p> VORBIS</p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-     <td rowspan="1" colspan="1"> <p> Yes </p> </td>
-    </tr>
-</tbody>
-</table>
-</li>
-</ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>HTML5 video and audio element</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm">HTML5 video and audio element Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">HTML5 video element API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#audio">HTML5 audio element API for Wearable Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#video">HTML5 video element API for Wearable Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>HTML5 video and audio element</h1>\r
+ \r
+<p>You can use the HTML5 <span style="font-family: Courier New,Courier,monospace">audio</span> and <span style="font-family: Courier New,Courier,monospace">video</span> elements to play multimedia files streaming, without a separate plug-in.</p>\r
+<p>Using JavaScript, the playback can be controlled with <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media events</a>. The audio and video elements used as media elements inherit all the properties and methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-element" target="_blank">HTMLMediaElement</a> interface.</p>\r
+\r
+<p>The main features of the audio and video elements with JavaScript include:</p>\r
+<ul>\r
+<li>Creating a player\r
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#create">create a simple audio and video player</a>.</p></li>\r
+<li>Controlling the playback\r
+<p>You can use the  <span style="font-family: Courier New,Courier,monospace">Play()</span> and  <span style="font-family: Courier New,Courier,monospace">Pause()</span> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-elements" target="_blank">Media</a> object to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>\r
+</li>\r
+<li>Retrieving duration and play time\r
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#retrieve">retrieve the duration and play time</a> of the media file, if its metadata (such as playing time, duration,  and video&#39;s width and height) is loaded.</p>\r
+</li>\r
+<li>Playing from a random position\r
+<p>You can indicate the playback time by <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#move">playing the media file from a random position</a>. To do this, you must change the <span style="font-family: Courier New,Courier,monospace">currentTime</span> value of the <span style="font-family: Courier New,Courier,monospace">Media</span> object to trigger the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#event-media-timeupdate" target="_blank">timeupdate</a> event.</p>\r
+</li>\r
+<li>Retrieving progress state\r
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#display">retrieve and display the download progress state</a> using the <span style="font-family: Courier New,Courier,monospace">Progress</span> media event, which is triggered when information related to the progress of a media object loading media contents is updated.</p></li>\r
+<li>Checking supported media formats\r
+<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#check">check whether the media data can be played</a> using the <span style="font-family: Courier New,Courier,monospace">canPlayType()</span> method. Basically, the MIME type must be set in the Web server in a format that is supported in Tizen. If a non-supported MIME type is used, you can <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm#handle">handle exceptions</a> in advance.</p>\r
+<p>Tizen supports the following media formats: </p>\r
+<ul>\r
+<li>Video: 3GP, AVI, ASF, OGV, MP4, MKV, WMV</li>\r
+<li>Audio: AAC, AMR, MP3, OGG, WAV, WMA</li>\r
+</ul>\r
+<p>The following table lists the codecs supported in Tizen.</p>\r
+<table>\r
+<caption>Table: Supported codecs</caption>\r
+   <colgroup>\r
+    <col width="20%" />\r
+    <col width="40%" />\r
+    <col width="20%" />\r
+    <col width="20%" />\r
+   </colgroup>\r
+<tbody>\r
+    <tr>\r
+     <th>Type</th>\r
+     <th>Codec</th>\r
+     <th>Encoder</th>\r
+     <th>Decoder</th>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="10" colspan="1"> <p> Video</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> MPEG-1 </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v1</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v2</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> MPEG-4 part 2 MS v3</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> H.264, H.263-1996, H.263+, H263-1998, H263 v2</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> H.264, MPEG-4 AVC, MPEG-4 part10</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> WMV3</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> VC1</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p>THEORA</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="6" colspan="1"> <p> Audio</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> AAC </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> MP3 </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> WMA (Available up to WMA8. WMA9 is not available.)</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> AMR-NB</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> AMR-WB</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> No </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+     <tr>\r
+     <td rowspan="1" colspan="1"> <p> VORBIS</p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+     <td rowspan="1" colspan="1"> <p> Yes </p> </td>\r
+    </tr>\r
+</tbody>\r
+</table>\r
+</li>\r
+</ul>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
index 0e46092..24f44a7 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
@@ -1,86 +1,86 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Web Audio</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm">Web Audio Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webaudio">Web Audio API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Web Audio</h1>
- 
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
- 
-<p>Tizen provides a high quality sound by setting space and direction through audio data, and synthesizing them. It is used in the audio engines of the sophisticated games to mix, process, and filter effects.</p>
-
-<p>The main features of the Web Audio API include:</p>
-
-<ul>
-<li>Loading source data
-<p>You must <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#load">load source data</a> before using the Web Audio API. You can do this using <a href="../communication/xmlhttprequest_w.htm">XMLHttprequest</a>.</p>
-
-<p>The <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> interface is used to manage and play the sound. It creates a high quality sound and connects to the destination of the sound.</p>
-</li>
-<li>Modular routing
-<p><a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#ModularRouting-section" target="_blank">Modular routing</a> means <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#use">routing audio data</a> either in a direct manner, such as speaker output, or through a connection to <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a>, which handle, for example, volume adjustment and filters.</p></li>
-<li>Playing sound
-<p>Use the <span style="font-family: Courier New,Courier,monospace">noteOn(time)</span> or <span style="font-family: Courier New,Courier,monospace">start(time)</span> method to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#play">play sound</a> with the time parameter for specifying the time interval in seconds after which the audio is played. For example, the <span style="font-family: Courier New,Courier,monospace">0</span> time value implies playing the audio immediately and the <span style="font-family: Courier New,Courier,monospace">currentTime + 0.75</span> time value implies that the audio is played after 0.75 seconds.</p></li>
-<li>Stopping sound
-<p>Use the <span style="font-family: Courier New,Courier,monospace">noteOff(time)</span> or <span style="font-family: Courier New,Courier,monospace">stop(time)</span> method to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#play">stop sound</a> with the time parameter for specifying the time interval in seconds after which the audio playback is stopped. For example, the <span style="font-family: Courier New,Courier,monospace">0</span> time value implies stopping the audio playback immediately and the <span style="font-family: Courier New,Courier,monospace">currentTime + 0.75</span> time value implies that the audio playback is stopped after 0.75 seconds.</p>
-<p>After stopping sound, recreate the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBufferSourceNode" target="_blank">AudioBufferSourceNode</a> interface instance to play sound again.</p></li>
-</ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Web Audio</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm">Web Audio Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webaudio">Web Audio API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Web Audio</h1>\r
+ \r
+   <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+ \r
+<p>Tizen provides a high quality sound by setting space and direction through audio data, and synthesizing them. It is used in the audio engines of the sophisticated games to mix, process, and filter effects.</p>\r
+\r
+<p>The main features of the Web Audio API include:</p>\r
+\r
+<ul>\r
+<li>Loading source data\r
+<p>You must <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#load">load source data</a> before using the Web Audio API. You can do this using <a href="../communication/xmlhttprequest_w.htm">XMLHttprequest</a>.</p>\r
+\r
+<p>The <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> interface is used to manage and play the sound. It creates a high quality sound and connects to the destination of the sound.</p>\r
+</li>\r
+<li>Modular routing\r
+<p><a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#ModularRouting-section" target="_blank">Modular routing</a> means <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#use">routing audio data</a> either in a direct manner, such as speaker output, or through a connection to <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a>, which handle, for example, volume adjustment and filters.</p></li>\r
+<li>Playing sound\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">noteOn(time)</span> or <span style="font-family: Courier New,Courier,monospace">start(time)</span> method to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#play">play sound</a> with the time parameter for specifying the time interval in seconds after which the audio is played. For example, the <span style="font-family: Courier New,Courier,monospace">0</span> time value implies playing the audio immediately and the <span style="font-family: Courier New,Courier,monospace">currentTime + 0.75</span> time value implies that the audio is played after 0.75 seconds.</p></li>\r
+<li>Stopping sound\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">noteOff(time)</span> or <span style="font-family: Courier New,Courier,monospace">stop(time)</span> method to <a href="../../../../../org.tizen.tutorials/html/web/w3c/media/webaudio_tutorial_w.htm#play">stop sound</a> with the time parameter for specifying the time interval in seconds after which the audio playback is stopped. For example, the <span style="font-family: Courier New,Courier,monospace">0</span> time value implies stopping the audio playback immediately and the <span style="font-family: Courier New,Courier,monospace">currentTime + 0.75</span> time value implies that the audio playback is stopped after 0.75 seconds.</p>\r
+<p>After stopping sound, recreate the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBufferSourceNode" target="_blank">AudioBufferSourceNode</a> interface instance to play sound again.</p></li>\r
+</ul>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
index 4e580b2..b0b32b0 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
@@ -1,264 +1,264 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>jQuery Performance Improvement</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#selector">Using Selectors</a></li>
-                       <li><a href="#cache">Using Caches</a></li>
-                       <li><a href="#chaining">Using Chaining</a></li>
-                       <li><a href="#dom">Managing DOM Control</a></li>
-               </ul>
-
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>jQuery Performance Improvement</h1>
-<p>The following techniques of writing JavaScript code can be used to improve application performance when using jQuery:</p>
-<ul>
-       <li><a href="#selector">Using selectors</a></li>
-       <li><a href="#cache">Using caches</a></li>
-       <li><a href="#chaining">Using chaining</a></li>
-       <li><a href="#dom">Managing DOM control</a></li></ul>
-<p>The following example HTML code has been used as a basis when describing the techniques:</p>
-<pre class="prettyprint">&lt;div id=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt; 
-&lt;/div&gt;
-&lt;div id=&quot;contents1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom1&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
-&lt;/div&gt;
-&lt;div id=&quot;contents2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom2&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
-&lt;/div&gt;
-&lt;div id=&quot;contents3&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list3&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom3&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
-&lt;/div&gt;
-&lt;div id=&quot;contents4&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list4&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom4&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
-&lt;/div&gt;
-&lt;div id=&quot;contents5&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list5&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom5&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;
-&lt;/div&gt;</pre>
- <h2 id="selector" name="selector">Using Selectors</h2>
-<p> When navigating a specific element, use an ID selector prior to other selectors, such as tags and classes. The following example shows how using an ID selector improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-var search_button = $(&#39;button&#39;);</pre>
-<pre class="prettyprint">/* Code#2 */
-var search_button = $(&#39;#contents button&#39;);</pre>
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector1.png" /></p> 
-<table border="1">
-       <caption>Table: jQuery performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-<th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.118</td>
-                       <td>0.100</td>
-               </tr>
-       </tbody>
-</table>
-<p> When using a class selector, apply a tag preceded by the class name. The following example shows how using a tag improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-var search_button = $(&#39;.blue&#39;);</pre>
-<pre class="prettyprint">/* Code#2 */
-var search_button = $(&#39;button.blue&#39;);</pre>
-<pre class="prettyprint">/*Code#3*/
-var search_button = $(&#39;#contents button.blue&#39;);</pre>
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector2.png" /></p>
-  <table>
-       <caption>Table: jQuery performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-<th> Execution time for Code#2</th>
-<th> Execution time for Code#3</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.105</td>
-<td>0.100</td>
-                       <td>0.100</td>
-               </tr>
-       </tbody>
-</table>
- <h2 id="cache" name="cache">Using Caches</h2>
-<p> When referring to a DOM object, you can first create a cache for it.</p>
-<p>Without doing this, every time a DOM object is called, DOM is searched to return a new jQuery object, which degrades performance.</p>
-<p>The following example shows how using a cache improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-$(&quot;#search_dom&quot;).on(&#39;click&#39;, function() {});
-$(&quot;#search_dom&quot;).removeClass(&#39;blue&#39;);
-$(&quot;#search_dom&quot;).addClass(&#39;red&#39;);</pre>
-<pre class="prettyprint">/* Code#2 */
-var $search_button = $(&quot;#search_dom&quot;);
-$search_button.on(&#39;click&#39;, function() {});
-$search_button.removeClass(&#39;blue&#39;);
-$search_button.addClass(&#39;red&#39;);</pre>
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_cache.png" /></p> 
-<table border="1">
-       <caption>Table: jQuery performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-                       <th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.104</td>
-                       <td>0.100</td>
-               </tr>
-       </tbody>
-</table>
- <h2 id="chaining" name="chaining">Using Chaining</h2>
-<p> Chaining makes the code lighter and reduces repeated operations, such as reflow and repaint.</p>
-<p>When a DOM element is changed, chaining ties similar object references into groups for execution. jQuery objects need not be repeatedly created as existing ones can be reused. The following example shows how chaining improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-$(&quot;#contents&quot;).addClass(&#39;active&#39;);
-$(&quot;#contents&quot;).css(&#39;border&#39;, &#39;1px solid&#39;);
-$(&quot;#contents&quot;).(&#39;background-color&#39;, &#39;red&#39;);</pre>
-<pre class="prettyprint">/* Code#2 */
-$(&quot;#contents&quot;).addClass(&#39;active&#39;).css(&#39;border&#39;, &#39;1px solid&#39;).(&#39;background-color&#39;, &#39;red&#39;);</pre>
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_chaining.png" /></p> 
-<table border="1">
-       <caption>Table: jQuery performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-                       <th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.108</td>
-                       <td>0.101</td>
-               </tr>
-       </tbody>
-</table>
- <h2 id="dom" name="dom">Managing DOM Control</h2>
-<p>Minimizing direct DOM manipulation improves jQuery performance. Every time an element is created and inserted, time and capacity is needed. Using a cached selector with the <span style="font-family: Courier New,Courier,monospace">append()</span> method reduces the need for capacity.</p>
-<p>The following example shows how applying DOM control improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-var $contents_list = $(&#39;#contents_list&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;array_list = [...];
-
-for (var i = 0, len = array_list.length; i &lt; len; i++)
-{
-&nbsp;&nbsp;&nbsp;$contents_list.append(&#39;&lt;li&gt;&#39; + array_list[i] + &#39;&lt;/li&gt;&#39;);
-}</pre>
-<pre class="prettyprint">/* Code#2 */
-var $contents_list = $(&#39;#contents_list&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;array_list = [...],
-&nbsp;&nbsp;&nbsp;&nbsp;list = &#39;&#39;;
-
-for (var i = 0, len = array_list.length; i &lt; len; i++)
-{
-&nbsp;&nbsp;&nbsp;list += &#39;&lt;li&gt;&#39; + array_list[i] + &#39;&lt;/li&gt;&#39;;
-}
-$contents_list.append(list);</pre>
-<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_jquery_dom.png" /></p> 
-<table border="1">
-       <caption>Table: jQuery performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-                       <th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.120</td>
-                       <td>0.101</td>
-               </tr>
-       </tbody>
-
-</table>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>jQuery Performance Improvement</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+       <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#selector">Using Selectors</a></li>\r
+                       <li><a href="#cache">Using Caches</a></li>\r
+                       <li><a href="#chaining">Using Chaining</a></li>\r
+                       <li><a href="#dom">Managing DOM Control</a></li>\r
+               </ul>\r
+\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>jQuery Performance Improvement</h1>\r
+<p>The following techniques of writing JavaScript code can be used to improve application performance when using jQuery:</p>\r
+<ul>\r
+       <li><a href="#selector">Using selectors</a></li>\r
+       <li><a href="#cache">Using caches</a></li>\r
+       <li><a href="#chaining">Using chaining</a></li>\r
+       <li><a href="#dom">Managing DOM control</a></li></ul>\r
+<p>The following example HTML code has been used as a basis when describing the techniques:</p>\r
+<pre class="prettyprint">&lt;div id=&quot;contents&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt; \r
+&lt;/div&gt;\r
+&lt;div id=&quot;contents1&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list1&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom1&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;/div&gt;\r
+&lt;div id=&quot;contents2&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list2&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom2&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;/div&gt;\r
+&lt;div id=&quot;contents3&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list3&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom3&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;/div&gt;\r
+&lt;div id=&quot;contents4&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list4&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom4&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;/div&gt;\r
+&lt;div id=&quot;contents5&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list5&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom5&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;/div&gt;</pre>\r
+ <h2 id="selector" name="selector">Using Selectors</h2>\r
+<p> When navigating a specific element, use an ID selector prior to other selectors, such as tags and classes. The following example shows how using an ID selector improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+var search_button = $(&#39;button&#39;);</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+var search_button = $(&#39;#contents button&#39;);</pre>\r
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector1.png" /></p> \r
+<table border="1">\r
+       <caption>Table: jQuery performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+<th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.118</td>\r
+                       <td>0.100</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+<p> When using a class selector, apply a tag preceded by the class name. The following example shows how using a tag improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+var search_button = $(&#39;.blue&#39;);</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+var search_button = $(&#39;button.blue&#39;);</pre>\r
+<pre class="prettyprint">/*Code#3*/\r
+var search_button = $(&#39;#contents button.blue&#39;);</pre>\r
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector2.png" /></p>\r
+  <table>\r
+       <caption>Table: jQuery performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+<th> Execution time for Code#2</th>\r
+<th> Execution time for Code#3</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.105</td>\r
+<td>0.100</td>\r
+                       <td>0.100</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+ <h2 id="cache" name="cache">Using Caches</h2>\r
+<p> When referring to a DOM object, you can first create a cache for it.</p>\r
+<p>Without doing this, every time a DOM object is called, DOM is searched to return a new jQuery object, which degrades performance.</p>\r
+<p>The following example shows how using a cache improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+$(&quot;#search_dom&quot;).on(&#39;click&#39;, function() {});\r
+$(&quot;#search_dom&quot;).removeClass(&#39;blue&#39;);\r
+$(&quot;#search_dom&quot;).addClass(&#39;red&#39;);</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+var $search_button = $(&quot;#search_dom&quot;);\r
+$search_button.on(&#39;click&#39;, function() {});\r
+$search_button.removeClass(&#39;blue&#39;);\r
+$search_button.addClass(&#39;red&#39;);</pre>\r
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_cache.png" /></p> \r
+<table border="1">\r
+       <caption>Table: jQuery performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+                       <th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.104</td>\r
+                       <td>0.100</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+ <h2 id="chaining" name="chaining">Using Chaining</h2>\r
+<p> Chaining makes the code lighter and reduces repeated operations, such as reflow and repaint.</p>\r
+<p>When a DOM element is changed, chaining ties similar object references into groups for execution. jQuery objects need not be repeatedly created as existing ones can be reused. The following example shows how chaining improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+$(&quot;#contents&quot;).addClass(&#39;active&#39;);\r
+$(&quot;#contents&quot;).css(&#39;border&#39;, &#39;1px solid&#39;);\r
+$(&quot;#contents&quot;).(&#39;background-color&#39;, &#39;red&#39;);</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+$(&quot;#contents&quot;).addClass(&#39;active&#39;).css(&#39;border&#39;, &#39;1px solid&#39;).(&#39;background-color&#39;, &#39;red&#39;);</pre>\r
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_chaining.png" /></p> \r
+<table border="1">\r
+       <caption>Table: jQuery performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+                       <th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.108</td>\r
+                       <td>0.101</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+ <h2 id="dom" name="dom">Managing DOM Control</h2>\r
+<p>Minimizing direct DOM manipulation improves jQuery performance. Every time an element is created and inserted, time and capacity is needed. Using a cached selector with the <span style="font-family: Courier New,Courier,monospace">append()</span> method reduces the need for capacity.</p>\r
+<p>The following example shows how applying DOM control improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+var $contents_list = $(&#39;#contents_list&#39;),\r
+&nbsp;&nbsp;&nbsp;&nbsp;array_list = [...];\r
+\r
+for (var i = 0, len = array_list.length; i &lt; len; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;$contents_list.append(&#39;&lt;li&gt;&#39; + array_list[i] + &#39;&lt;/li&gt;&#39;);\r
+}</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+var $contents_list = $(&#39;#contents_list&#39;),\r
+&nbsp;&nbsp;&nbsp;&nbsp;array_list = [...],\r
+&nbsp;&nbsp;&nbsp;&nbsp;list = &#39;&#39;;\r
+\r
+for (var i = 0, len = array_list.length; i &lt; len; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;list += &#39;&lt;li&gt;&#39; + array_list[i] + &#39;&lt;/li&gt;&#39;;\r
+}\r
+$contents_list.append(list);</pre>\r
+<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_jquery_dom.png" /></p> \r
+<table border="1">\r
+       <caption>Table: jQuery performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+                       <th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.120</td>\r
+                       <td>0.101</td>\r
+               </tr>\r
+       </tbody>\r
+\r
+</table>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
index 75fa04e..e772d67 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
@@ -1,265 +1,265 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>JavaScript Performance Improvement</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#debugging">Removing the Debugging Statement</a></li>
-                       <li><a href="#loops">Removing Slow Loop Statements</a></li>
-                       <li><a href="#arraylength">Using Cached Array Length</a></li>
-                       <li><a href="#literal">Using Literal Expressions</a></li>
-                       <li><a href="#dom">Managing DOM Control</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>JavaScript Performance Improvement</h1>
-<p>The following techniques of writing JavaScript code can be used to improve application performance:</p>
-<ul>
-       <li><a href="#debugging">Removing the debugging statement</a></li>
-       <li><a href="#loops">Removing slow loop statements</a></li>
-       <li><a href="#arraylength">Using cached array length</a></li>
-       <li><a href="#literal">Using literal expressions</a></li>
-       <li><a href="#dom">Managing DOM control</a></li>
-</ul>
- <h2 id="debugging" name="debugging">Removing the Debugging Statement</h2>
-<p> The <span style="font-family: Courier New,Courier,monospace">console.log</span> statement, which is frequently used in JavaScript debugging, can cause poor performance. The following example shows how deleting the statement improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-var array_list = [0,1,2,3,4,5,6,7,8,9],
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];
-
-for (var i = 0, len = array_list.length; i &lt; len; i++)
-{
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);
-&nbsp;&nbsp;&nbsp;console.log(array_list[i]);
-}</pre>
-<pre class="prettyprint">/* Code#2 */
-var array_list = [0,1,2,3,4,5,6,7,8,9],
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];
-
-for (var i = 0, len = array_list.length; i &lt; len; i++)
-{
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i])
-}</pre>
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_debug.png" /></p> 
-<table border="1">
-       <caption>Table: JavaScript performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-<th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.823</td>
-                       <td>0.100</td>
-               </tr>
-       </tbody>
-</table>
- <h2 id="loops" name="loops">Removing Slow Loop Statements</h2>
-<p> The <span style="font-family: Courier New,Courier,monospace">for - in</span> loop is relatively slower than the other loops, such as <span style="font-family: Courier New,Courier,monospace">for</span> , <span style="font-family: Courier New,Courier,monospace">while</span>,  and <span style="font-family: Courier New,Courier,monospace">do - while</span>, as it assigns object properties to the variable (<span style="font-family: Courier New,Courier,monospace">idx</span>  in the example below), navigating the object every time the loop is iterated. The following example shows how modifying the loop improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-var array_list = [0,1,2,3,4,5,6,7,8,9],
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];
-for (var idx in array_list)
-{
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[idx]);
-}</pre>
-
-<pre class="prettyprint">/* Code#2 */
-var array_list = [0,1,2,3,4,5,6,7,8,9],
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];
-for (var i = 0, len = array_list.length; i &lt; len; i++)
-{
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);
-}</pre>
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_loop.png" /></p> 
-  <table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">By caching the <span style="font-family: Courier New,Courier,monospace">array_list.length</span> before using it, as shown in the second example above, better performance is achieved. For more information, see <a href="#arraylength">Using cached array length</a>.</td> 
-      </tr> 
-     </tbody>
-</table>
-<table border="1">
-       <caption>Table: JavaScript performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-<th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.150</td>
-                       <td>0.100</td>
-               </tr>
-       </tbody>
-</table>
- <h2 id="arraylength" name="arraylength">Using Cached Array Length</h2>
-<p>In a loop statement, you can cache the length of an array before using it instead of using it directly in the loop. Minimizing the steps taken to search for the scope chain activation object speeds up the response performance. The following example shows how caching the array list improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-var array_list = [],
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [],
-&nbsp;&nbsp;&nbsp;&nbsp;i = 0;
-for (i = 0; i &lt; 100; i++)
-{
-&nbsp;&nbsp;&nbsp;array_list.push(i);
-}
-for (i = 0; i &lt; array_list.length; i++)
-{
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);
-}</pre>
-<pre class="prettyprint">/* Code#2 */
-var array_list = [],
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [],
-&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;arrayLen = 0;
-for (i = 0; i &lt; 100; i++)
-{
-&nbsp;&nbsp;&nbsp;array_list.push(i);
-}
-for (i = 0, arrayLen = array_list.length; i &lt; arrayLen; i++)
-{
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);
-}</pre>
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_array.png" /></p> 
-<table border="1">
-       <caption>Table: JavaScript performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-<th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.104</td>
-                       <td>0.100</td>
-               </tr>
-       </tbody>
-</table>
- <h2 id="literal" name="literal">Using Literal Expressions</h2>
-<p> Using literal expressions instead of newly created ones improves the JavaScript performance. Literal expressions are optimized for modern browser engines. They reduce the amount of interpretation time of the JavaScript interpreter. The following example shows how using literal expressions improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-var str = &quot;&quot;;    
-for (var i = 0; i &lt; 100; i++)
-{
-&nbsp;&nbsp;&nbsp;str = new String(&quot;abcd&quot;);
-}</pre>
-<pre class="prettyprint">/* Code#2 */
-var str = &quot;&quot;;    
-for (var i = 0; i &lt; 100; i++)
-{
-&nbsp;&nbsp;&nbsp;str = &quot;abcd&quot;;
-}</pre>
-
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_literal.png" /></p> 
-<table border="1">
-       <caption>Table: JavaScript performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-<th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.197</td>
-                       <td>0.100</td>
-               </tr>
-       </tbody>
-</table>
- <h2 id="dom" name="dom">Managing DOM Control</h2>
-<p> Rendering performance can be improved by minimizing direct DOM manipulation and creating a new instance of a cached DOM object.</p>
-<p>When referring to variables, JavaScript revolves around a scope chain (variable object set that can be accessed in the current scope). The deeper the scope chain, the more execution time is needed.</p>
-<p>The following example shows how applying DOM control improves performance.</p>
-<pre class="prettyprint">/* Code#1 */
-var id = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;id&#39;);
-var name = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;name&#39;);
-var style = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;style&#39;);
-for (var i = 0; i &lt; 100; i++)
-{
-&nbsp;&nbsp;&nbsp;id = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;id&#39;);
-&nbsp;&nbsp;&nbsp;name = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;name&#39;);
-&nbsp;&nbsp;&nbsp;style = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;style&#39;);
-}</pre>
-<pre class="prettyprint">/* Code#2 */
-var contents_list = document.getElementById(&#39;contents_list&#39;);
-var id = contents_list.getAttribute(&#39;id&#39;);
-var name = contents_list.getAttribute(&#39;name&#39;);
-var style = contents_list.getAttribute(&#39;style&#39;);
-for (var i = 0; i &lt; 100; i++)
-{
-&nbsp;&nbsp;&nbsp;id = contents_list.getAttribute(&#39;id&#39;);
-&nbsp;&nbsp;&nbsp;name = contents_list.getAttribute(&#39;name&#39;);
-&nbsp;&nbsp;&nbsp;style = contents_list.getAttribute(&#39;style&#39;);
-}</pre>
-<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> 
-<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_js_dom.png" /></p> 
-<table border="1">
-       <caption>Table: JavaScript performance improvement result</caption>
-       <tbody>
-               <tr>
-                       <th>Browser</th>
-                       <th>Execution time for Code#1</th>
-<th> Execution time for Code#2</th>
-               </tr>
-               <tr>
-                       <td>Tizen</td>
-                       <td>0.119</td>
-                       <td>0.100</td>
-               </tr>
-       </tbody>
-</table>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>JavaScript Performance Improvement</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+       <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#debugging">Removing the Debugging Statement</a></li>\r
+                       <li><a href="#loops">Removing Slow Loop Statements</a></li>\r
+                       <li><a href="#arraylength">Using Cached Array Length</a></li>\r
+                       <li><a href="#literal">Using Literal Expressions</a></li>\r
+                       <li><a href="#dom">Managing DOM Control</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>JavaScript Performance Improvement</h1>\r
+<p>The following techniques of writing JavaScript code can be used to improve application performance:</p>\r
+<ul>\r
+       <li><a href="#debugging">Removing the debugging statement</a></li>\r
+       <li><a href="#loops">Removing slow loop statements</a></li>\r
+       <li><a href="#arraylength">Using cached array length</a></li>\r
+       <li><a href="#literal">Using literal expressions</a></li>\r
+       <li><a href="#dom">Managing DOM control</a></li>\r
+</ul>\r
+ <h2 id="debugging" name="debugging">Removing the Debugging Statement</h2>\r
+<p> The <span style="font-family: Courier New,Courier,monospace">console.log</span> statement, which is frequently used in JavaScript debugging, can cause poor performance. The following example shows how deleting the statement improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+var array_list = [0,1,2,3,4,5,6,7,8,9],\r
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];\r
+\r
+for (var i = 0, len = array_list.length; i &lt; len; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);\r
+&nbsp;&nbsp;&nbsp;console.log(array_list[i]);\r
+}</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+var array_list = [0,1,2,3,4,5,6,7,8,9],\r
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];\r
+\r
+for (var i = 0, len = array_list.length; i &lt; len; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i])\r
+}</pre>\r
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_debug.png" /></p> \r
+<table border="1">\r
+       <caption>Table: JavaScript performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+<th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.823</td>\r
+                       <td>0.100</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+ <h2 id="loops" name="loops">Removing Slow Loop Statements</h2>\r
+<p> The <span style="font-family: Courier New,Courier,monospace">for - in</span> loop is relatively slower than the other loops, such as <span style="font-family: Courier New,Courier,monospace">for</span> , <span style="font-family: Courier New,Courier,monospace">while</span>,  and <span style="font-family: Courier New,Courier,monospace">do - while</span>, as it assigns object properties to the variable (<span style="font-family: Courier New,Courier,monospace">idx</span>  in the example below), navigating the object every time the loop is iterated. The following example shows how modifying the loop improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+var array_list = [0,1,2,3,4,5,6,7,8,9],\r
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];\r
+for (var idx in array_list)\r
+{\r
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[idx]);\r
+}</pre>\r
+\r
+<pre class="prettyprint">/* Code#2 */\r
+var array_list = [0,1,2,3,4,5,6,7,8,9],\r
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];\r
+for (var i = 0, len = array_list.length; i &lt; len; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);\r
+}</pre>\r
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_loop.png" /></p> \r
+  <table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">By caching the <span style="font-family: Courier New,Courier,monospace">array_list.length</span> before using it, as shown in the second example above, better performance is achieved. For more information, see <a href="#arraylength">Using cached array length</a>.</td> \r
+      </tr> \r
+     </tbody>\r
+</table>\r
+<table border="1">\r
+       <caption>Table: JavaScript performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+<th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.150</td>\r
+                       <td>0.100</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+ <h2 id="arraylength" name="arraylength">Using Cached Array Length</h2>\r
+<p>In a loop statement, you can cache the length of an array before using it instead of using it directly in the loop. Minimizing the steps taken to search for the scope chain activation object speeds up the response performance. The following example shows how caching the array list improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+var array_list = [],\r
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [],\r
+&nbsp;&nbsp;&nbsp;&nbsp;i = 0;\r
+for (i = 0; i &lt; 100; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;array_list.push(i);\r
+}\r
+for (i = 0; i &lt; array_list.length; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);\r
+}</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+var array_list = [],\r
+&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [],\r
+&nbsp;&nbsp;&nbsp;&nbsp;i = 0,\r
+&nbsp;&nbsp;&nbsp;&nbsp;arrayLen = 0;\r
+for (i = 0; i &lt; 100; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;array_list.push(i);\r
+}\r
+for (i = 0, arrayLen = array_list.length; i &lt; arrayLen; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);\r
+}</pre>\r
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_array.png" /></p> \r
+<table border="1">\r
+       <caption>Table: JavaScript performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+<th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.104</td>\r
+                       <td>0.100</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+ <h2 id="literal" name="literal">Using Literal Expressions</h2>\r
+<p> Using literal expressions instead of newly created ones improves the JavaScript performance. Literal expressions are optimized for modern browser engines. They reduce the amount of interpretation time of the JavaScript interpreter. The following example shows how using literal expressions improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+var str = &quot;&quot;;    \r
+for (var i = 0; i &lt; 100; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;str = new String(&quot;abcd&quot;);\r
+}</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+var str = &quot;&quot;;    \r
+for (var i = 0; i &lt; 100; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;str = &quot;abcd&quot;;\r
+}</pre>\r
+\r
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_literal.png" /></p> \r
+<table border="1">\r
+       <caption>Table: JavaScript performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+<th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.197</td>\r
+                       <td>0.100</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+ <h2 id="dom" name="dom">Managing DOM Control</h2>\r
+<p> Rendering performance can be improved by minimizing direct DOM manipulation and creating a new instance of a cached DOM object.</p>\r
+<p>When referring to variables, JavaScript revolves around a scope chain (variable object set that can be accessed in the current scope). The deeper the scope chain, the more execution time is needed.</p>\r
+<p>The following example shows how applying DOM control improves performance.</p>\r
+<pre class="prettyprint">/* Code#1 */\r
+var id = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;id&#39;);\r
+var name = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;name&#39;);\r
+var style = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;style&#39;);\r
+for (var i = 0; i &lt; 100; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;id = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;id&#39;);\r
+&nbsp;&nbsp;&nbsp;name = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;name&#39;);\r
+&nbsp;&nbsp;&nbsp;style = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;style&#39;);\r
+}</pre>\r
+<pre class="prettyprint">/* Code#2 */\r
+var contents_list = document.getElementById(&#39;contents_list&#39;);\r
+var id = contents_list.getAttribute(&#39;id&#39;);\r
+var name = contents_list.getAttribute(&#39;name&#39;);\r
+var style = contents_list.getAttribute(&#39;style&#39;);\r
+for (var i = 0; i &lt; 100; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;id = contents_list.getAttribute(&#39;id&#39;);\r
+&nbsp;&nbsp;&nbsp;name = contents_list.getAttribute(&#39;name&#39;);\r
+&nbsp;&nbsp;&nbsp;style = contents_list.getAttribute(&#39;style&#39;);\r
+}</pre>\r
+<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p> \r
+<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_js_dom.png" /></p> \r
+<table border="1">\r
+       <caption>Table: JavaScript performance improvement result</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Browser</th>\r
+                       <th>Execution time for Code#1</th>\r
+<th> Execution time for Code#2</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Tizen</td>\r
+                       <td>0.119</td>\r
+                       <td>0.100</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm
index bf4ca7c..1b5ee75 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm
@@ -1,277 +1,277 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>JavaScript and CSS Minification</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#grunt">Installing and Using Grunt</a></li>
-                       <li><a href="#improvement">Improvement through Grunt</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>JavaScript and CSS Minification</h1>
-<p>File minification improves application performance as unnecessary data is being removed. For example, page loading time can be decreased by reducing the number of JavaScript and CSS files.</p>
-<p>Minifying tools, such as <a href="https://developers.google.com/closure/compiler/" target="_blank">Closure Compiler</a> and <a href="http://gruntjs.com/" target="_blank">Grunt</a>, include features that can combine and reduce JavaScript file. The following table shows Closure Compiler and Grunt features in comparison.</p>
-<table>
-       <caption>Table: Comparison of minifying tools</caption>
-       <tbody>
-               <tr>
-                       <th>Item</th>
-                       <th>Closure Compiler</th>
-                       <th>Grunt</th>
-               </tr>
-               <tr>
-                       <td>Summary</td>
-                       <td>
-                                       <p>JavaScript-optimized compiler created by Google</p></td>
-                       <td>
-                                       <p>Task-based automatic JavaScript build tool</p>
-</td>
-
-               </tr>
-<tr>
-       <td>Features</td>
-                       <td><ul>
-                                       <li>File compilation, minimizing size</li>
-                                       <li>Can be integrated with Ant Builder for automatic features</li>
-</ul></td>
-                       <td><ul>
-                                       <li>File compilation plug-in</li>
-                                       <li>Minimizing JavaScript and CSS</li>
-                                       <li>Various plug-ins (JavaScript, CSS compilation, and compression)</li>
-                                       <li>Application performance improvement based on the decrease of request count, transferred data, and transfer time</li>
-</ul></td>
-               </tr>
-<tr>
-                       <td>Usage</td>
-                       <td><ul>
-                               <li>Java applications<p>Provided as a <span style="font-family: Courier New,Courier,monospace">.jar</span> file, used as a command line.</p></li>
-                               <li><a href="http://closure-compiler.appspot.com/home" target="_blank">Web application</a></li>
-                               <li>RESTful API</li>
-</ul></td>
-                       <td><ul>
-                               <li><span style="font-family: Courier New,Courier,monospace">Node.js</span> installation</li>
-                               <li><span style="font-family: Courier New,Courier,monospace">grunt-cli</span> installation</li>
-                               <li><span style="font-family: Courier New,Courier,monospace">package.json</span> must be inserted to the project root</li>
-                               <li>Task definition in the <span style="font-family: Courier New,Courier,monospace">gruntfile.js</span> file</li>
-</ul></td>
-               </tr>
-       </tbody>
-</table>
-<p>Grunt has advantages in terms of expandability by providing various plug-ins. For more information about Grunt, see:</p>
-<ul>
-       <li><a href="#grunt">Installing and using Grunt</a></li>
-       <li><a href="#improvement">Improvement through Grunt</a></li>
-</ul>
- <h2 id="grunt" name="grunt">Installing and Using Grunt</h2>
- <p>The Grunt tool provides application performance improvement based on the decrease of request count, transferred data, and transfer time.</p>
- 
-  <h3 id="prerequisites" name="prerequisites">Prerequisites</h3>
- <p>The commands used for installing and using Grunt work in the same manner, without any changes, across most of the major operating systems. To run the commands, you may need to use sudo (for Linux and BSD), or run your command shell as Administrator (for Windows&reg;).</p>
- <h3 id="install" name="install">Installing Grunt</h3>
- <ol>
-       <li>Install the <a href="http://www.nodejs.org/" target="_blank">Node.js</a> platform. The platform includes the Node.js package manager, npm, which is used to install Grunt CLI (command line interface).</li>
-       <li>Install Grunt CLI: 
-       <pre class="prettyprint">npm install -g grunt-cli /* -g: global type */</pre></li>
- </ol>
- <h3 id="use" name="use">Using Grunt</h3>
- <ol>
-       <li>Change to the root directory of the project:
-       <pre class="prettyprint">cd &lt;Project root&gt;</pre></li>
-       <li>Install Grunt and create the <span style="font-family: Courier New,Courier,monospace">Gruntfile.js</span> file:
-       <pre class="prettyprint">npm install grunt --save-dev</pre></li>
-       <li>Create the <span style="font-family: Courier New,Courier,monospace">package.json</span> file: <p>When executing the following command, interactive prompt that receives information on the project is executed. Through the information entered, the <span style="font-family: Courier New,Courier,monospace">package.json</span> file is created.</p>
-       <pre class="prettyprint">npm init</pre></li>
-       <li>Install Grunt plug-in:
-       <pre class="prettyprint">/* Install grunt concat */
-npm install grunt-contrib-concat --save-dev
-
-/* Install grunt contrib uglify */
-npm install grunt-contrib-uglify --save-dev
-
-/* Install grunt contrib cssmin */
-npm install grunt-contrib-cssmin --save-dev
-</pre></li>
-       <li>Run the Grunt plug-in:
-       <pre class="prettyprint">grunt</pre>
-       <p>Using the <span style="font-family: Courier New,Courier,monospace">Gruntfile.js</span> file, tasks, such as <span style="font-family: Courier New,Courier,monospace">concat</span>, <span style="font-family: Courier New,Courier,monospace">uglify</span>, and <span style="font-family: Courier New,Courier,monospace">cssmin</span>, are registered.</p></li>
- </ol>
-  <h2 id="improvement" name="improvement">Improvement through Grunt</h2>
- <p>After running the Grunt plug-in, the below comparison result is shown through Chrome inspector. The expected results vary depending on the application, but since the improvement effects are certain, it is recommended to use Grunt.</p>
- <table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">For the sake of comparing improvement, in the following examples, 2 Web applications have been arbitrarily chosen and named App#1 and App#2.</td> 
-      </tr> 
-     </tbody>
-</table>
-<table border="1">
-       <caption>Table: Result for App #01</caption>
-       <tbody>
-               <tr>
-                       <th colspan="2" rowspan="2">Item</th>
-                       <th colspan="2">Request (count)</th>
-                       <th colspan="2">Transferred data (mb)</th>
-                       <th colspan="2">Onload time (s)</th>
-               </tr>
-               <tr>
-                       <th>Result</th>
-                       <th>Improvement</th>
-                       <th>Result</th>
-                       <th>Improvement</th>
-                       <th>Result</th>
-                       <th>Improvement</th>
-               </tr>
-               <tr>
-                       <td colspan="2" align="center">Original</td>
-                       <td>254</td>
-                       <td>-</td>
-                       <td>6.66</td>
-                       <td>-</td>
-                       <td>3.28</td>
-                       <td>-</td>
-               </tr>
-               <tr>
-                       <td rowspan="3" align="center">Minification applied (accumulated result)</td>
-                       <td><span style="font-family: Courier New,Courier,monospace">#01_grunt_concat</span></td>
-                       <td><strong>68</strong></td>
-                       <td><strong>-186</strong></td>
-                       <td>6.62</td>
-                       <td>-0.04</td>
-                       <td><strong>2.43</strong></td>
-                       <td><strong>-0.85</strong></td>
-               </tr>
-               <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">#02_grunt_uglify</span></td>
-                       <td>68</td>
-                       <td>-</td>
-                       <td><strong>1.90</strong></td>
-                       <td><strong>-4.72</strong></td>
-                       <td><strong>1.59</strong></td>
-                       <td><strong>-0.85</strong></td>
-               </tr>
-               <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">#03_grunt_cssmin</span></td>
-                       <td>68</td>
-                       <td>-</td>
-                       <td><strong>1.87</strong></td>
-                       <td><strong>-0.03</strong></td>
-                       <td><strong>1.61</strong></td>
-                       <td><strong>0.02</strong></td>
-               </tr>
-               <tr>
-                       <td colspan="2" align="center">Total improvement</td>
-                       <td colspan="2" align="center">73.23% improvement</td>
-                       <td colspan="2" align="center">71.92% improvement</td>
-                       <td colspan="2" align="center">51.07% improvement</td>
-               </tr>
-       </tbody>
-</table>
-<table border="1">
-       <caption>Table: Result for App #02</caption>
-       <tbody>
-               <tr>
-                       <th colspan="2" rowspan="2">Item</th>
-                       <th colspan="2">Request (count)</th>
-                       <th colspan="2">Transferred data (mb)</th>
-                       <th colspan="2">Onload time (s)</th>
-               </tr>
-               <tr>
-                       <th>Result</th>
-                       <th>Improvement</th>
-                       <th>Result</th>
-                       <th>Improvement</th>
-                       <th>Result</th>
-                       <th>Improvement</th>
-               </tr>
-               <tr>
-                       <td colspan="2" align="center">Original</td>
-                       <td>235</td>
-                       <td>-</td>
-                       <td>7.89</td>
-                       <td>-</td>
-                       <td>5.80</td>
-                       <td>-</td>
-               </tr>
-               <tr>
-                       <td rowspan="3" align="center">Minification applied (accumulated result)</td>
-                       <td><span style="font-family: Courier New,Courier,monospace">#01_grunt_concat</span></td>
-                       <td><strong>106</strong></td>
-                       <td><strong>-129</strong></td>
-                       <td>7.87</td>
-                       <td>-0.02</td>
-                       <td><strong>5.15</strong></td>
-                       <td><strong>-0.65</strong></td>
-               </tr>
-               <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">#02_grunt_uglify</span></td>
-                       <td>106</td>
-                       <td>-</td>
-                       <td><strong>5.85 </strong></td>
-                       <td><strong>-2.02</strong></td>
-                       <td><strong>4.95</strong></td>
-                       <td><strong>-0.19</strong></td>
-               </tr>
-               <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">#03_grunt_cssmin</span></td>
-                       <td>106</td>
-                       <td>-</td>
-                       <td><strong>5.84</strong></td>
-                       <td><strong>-0.01</strong></td>
-                       <td><strong>4.89</strong></td>
-                       <td><strong>-0.06</strong></td>
-               </tr>
-               <tr>
-                       <td colspan="2" align="center">Total improvement</td>
-                       <td colspan="2" align="center">54.89% improvement</td>
-                       <td colspan="2" align="center">25.98% improvement</td>
-                       <td colspan="2" align="center">15.63% improvement</td>
-               </tr>
-       </tbody>
-</table>
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>JavaScript and CSS Minification</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+       <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#grunt">Installing and Using Grunt</a></li>\r
+                       <li><a href="#improvement">Improvement through Grunt</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>JavaScript and CSS Minification</h1>\r
+<p>File minification improves application performance as unnecessary data is being removed. For example, page loading time can be decreased by reducing the number of JavaScript and CSS files.</p>\r
+<p>Minifying tools, such as <a href="https://developers.google.com/closure/compiler/" target="_blank">Closure Compiler</a> and <a href="http://gruntjs.com/" target="_blank">Grunt</a>, include features that can combine and reduce JavaScript file. The following table shows Closure Compiler and Grunt features in comparison.</p>\r
+<table>\r
+       <caption>Table: Comparison of minifying tools</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th>Item</th>\r
+                       <th>Closure Compiler</th>\r
+                       <th>Grunt</th>\r
+               </tr>\r
+               <tr>\r
+                       <td>Summary</td>\r
+                       <td>\r
+                                       <p>JavaScript-optimized compiler created by Google</p></td>\r
+                       <td>\r
+                                       <p>Task-based automatic JavaScript build tool</p>\r
+</td>\r
+\r
+               </tr>\r
+<tr>\r
+       <td>Features</td>\r
+                       <td><ul>\r
+                                       <li>File compilation, minimizing size</li>\r
+                                       <li>Can be integrated with Ant Builder for automatic features</li>\r
+</ul></td>\r
+                       <td><ul>\r
+                                       <li>File compilation plug-in</li>\r
+                                       <li>Minimizing JavaScript and CSS</li>\r
+                                       <li>Various plug-ins (JavaScript, CSS compilation, and compression)</li>\r
+                                       <li>Application performance improvement based on the decrease of request count, transferred data, and transfer time</li>\r
+</ul></td>\r
+               </tr>\r
+<tr>\r
+                       <td>Usage</td>\r
+                       <td><ul>\r
+                               <li>Java applications<p>Provided as a <span style="font-family: Courier New,Courier,monospace">.jar</span> file, used as a command line.</p></li>\r
+                               <li><a href="http://closure-compiler.appspot.com/home" target="_blank">Web application</a></li>\r
+                               <li>RESTful API</li>\r
+</ul></td>\r
+                       <td><ul>\r
+                               <li><span style="font-family: Courier New,Courier,monospace">Node.js</span> installation</li>\r
+                               <li><span style="font-family: Courier New,Courier,monospace">grunt-cli</span> installation</li>\r
+                               <li><span style="font-family: Courier New,Courier,monospace">package.json</span> must be inserted to the project root</li>\r
+                               <li>Task definition in the <span style="font-family: Courier New,Courier,monospace">gruntfile.js</span> file</li>\r
+</ul></td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+<p>Grunt has advantages in terms of expandability by providing various plug-ins. For more information about Grunt, see:</p>\r
+<ul>\r
+       <li><a href="#grunt">Installing and using Grunt</a></li>\r
+       <li><a href="#improvement">Improvement through Grunt</a></li>\r
+</ul>\r
+ <h2 id="grunt" name="grunt">Installing and Using Grunt</h2>\r
+ <p>The Grunt tool provides application performance improvement based on the decrease of request count, transferred data, and transfer time.</p>\r
+ \r
+  <h3 id="prerequisites" name="prerequisites">Prerequisites</h3>\r
+ <p>The commands used for installing and using Grunt work in the same manner, without any changes, across most of the major operating systems. To run the commands, you may need to use sudo (for Linux and BSD), or run your command shell as Administrator (for Windows&reg;).</p>\r
+ <h3 id="install" name="install">Installing Grunt</h3>\r
+ <ol>\r
+       <li>Install the <a href="http://www.nodejs.org/" target="_blank">Node.js</a> platform. The platform includes the Node.js package manager, npm, which is used to install Grunt CLI (command line interface).</li>\r
+       <li>Install Grunt CLI: \r
+       <pre class="prettyprint">npm install -g grunt-cli /* -g: global type */</pre></li>\r
+ </ol>\r
+ <h3 id="use" name="use">Using Grunt</h3>\r
+ <ol>\r
+       <li>Change to the root directory of the project:\r
+       <pre class="prettyprint">cd &lt;Project root&gt;</pre></li>\r
+       <li>Install Grunt and create the <span style="font-family: Courier New,Courier,monospace">Gruntfile.js</span> file:\r
+       <pre class="prettyprint">npm install grunt --save-dev</pre></li>\r
+       <li>Create the <span style="font-family: Courier New,Courier,monospace">package.json</span> file: <p>When executing the following command, interactive prompt that receives information on the project is executed. Through the information entered, the <span style="font-family: Courier New,Courier,monospace">package.json</span> file is created.</p>\r
+       <pre class="prettyprint">npm init</pre></li>\r
+       <li>Install Grunt plug-in:\r
+       <pre class="prettyprint">/* Install grunt concat */\r
+npm install grunt-contrib-concat --save-dev\r
+\r
+/* Install grunt contrib uglify */\r
+npm install grunt-contrib-uglify --save-dev\r
+\r
+/* Install grunt contrib cssmin */\r
+npm install grunt-contrib-cssmin --save-dev\r
+</pre></li>\r
+       <li>Run the Grunt plug-in:\r
+       <pre class="prettyprint">grunt</pre>\r
+       <p>Using the <span style="font-family: Courier New,Courier,monospace">Gruntfile.js</span> file, tasks, such as <span style="font-family: Courier New,Courier,monospace">concat</span>, <span style="font-family: Courier New,Courier,monospace">uglify</span>, and <span style="font-family: Courier New,Courier,monospace">cssmin</span>, are registered.</p></li>\r
+ </ol>\r
+  <h2 id="improvement" name="improvement">Improvement through Grunt</h2>\r
+ <p>After running the Grunt plug-in, the below comparison result is shown through Chrome inspector. The expected results vary depending on the application, but since the improvement effects are certain, it is recommended to use Grunt.</p>\r
+ <table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">For the sake of comparing improvement, in the following examples, 2 Web applications have been arbitrarily chosen and named App#1 and App#2.</td> \r
+      </tr> \r
+     </tbody>\r
+</table>\r
+<table border="1">\r
+       <caption>Table: Result for App #01</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th colspan="2" rowspan="2">Item</th>\r
+                       <th colspan="2">Request (count)</th>\r
+                       <th colspan="2">Transferred data (mb)</th>\r
+                       <th colspan="2">Onload time (s)</th>\r
+               </tr>\r
+               <tr>\r
+                       <th>Result</th>\r
+                       <th>Improvement</th>\r
+                       <th>Result</th>\r
+                       <th>Improvement</th>\r
+                       <th>Result</th>\r
+                       <th>Improvement</th>\r
+               </tr>\r
+               <tr>\r
+                       <td colspan="2" align="center">Original</td>\r
+                       <td>254</td>\r
+                       <td>-</td>\r
+                       <td>6.66</td>\r
+                       <td>-</td>\r
+                       <td>3.28</td>\r
+                       <td>-</td>\r
+               </tr>\r
+               <tr>\r
+                       <td rowspan="3" align="center">Minification applied (accumulated result)</td>\r
+                       <td><span style="font-family: Courier New,Courier,monospace">#01_grunt_concat</span></td>\r
+                       <td><strong>68</strong></td>\r
+                       <td><strong>-186</strong></td>\r
+                       <td>6.62</td>\r
+                       <td>-0.04</td>\r
+                       <td><strong>2.43</strong></td>\r
+                       <td><strong>-0.85</strong></td>\r
+               </tr>\r
+               <tr>\r
+                       <td><span style="font-family: Courier New,Courier,monospace">#02_grunt_uglify</span></td>\r
+                       <td>68</td>\r
+                       <td>-</td>\r
+                       <td><strong>1.90</strong></td>\r
+                       <td><strong>-4.72</strong></td>\r
+                       <td><strong>1.59</strong></td>\r
+                       <td><strong>-0.85</strong></td>\r
+               </tr>\r
+               <tr>\r
+                       <td><span style="font-family: Courier New,Courier,monospace">#03_grunt_cssmin</span></td>\r
+                       <td>68</td>\r
+                       <td>-</td>\r
+                       <td><strong>1.87</strong></td>\r
+                       <td><strong>-0.03</strong></td>\r
+                       <td><strong>1.61</strong></td>\r
+                       <td><strong>0.02</strong></td>\r
+               </tr>\r
+               <tr>\r
+                       <td colspan="2" align="center">Total improvement</td>\r
+                       <td colspan="2" align="center">73.23% improvement</td>\r
+                       <td colspan="2" align="center">71.92% improvement</td>\r
+                       <td colspan="2" align="center">51.07% improvement</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+<table border="1">\r
+       <caption>Table: Result for App #02</caption>\r
+       <tbody>\r
+               <tr>\r
+                       <th colspan="2" rowspan="2">Item</th>\r
+                       <th colspan="2">Request (count)</th>\r
+                       <th colspan="2">Transferred data (mb)</th>\r
+                       <th colspan="2">Onload time (s)</th>\r
+               </tr>\r
+               <tr>\r
+                       <th>Result</th>\r
+                       <th>Improvement</th>\r
+                       <th>Result</th>\r
+                       <th>Improvement</th>\r
+                       <th>Result</th>\r
+                       <th>Improvement</th>\r
+               </tr>\r
+               <tr>\r
+                       <td colspan="2" align="center">Original</td>\r
+                       <td>235</td>\r
+                       <td>-</td>\r
+                       <td>7.89</td>\r
+                       <td>-</td>\r
+                       <td>5.80</td>\r
+                       <td>-</td>\r
+               </tr>\r
+               <tr>\r
+                       <td rowspan="3" align="center">Minification applied (accumulated result)</td>\r
+                       <td><span style="font-family: Courier New,Courier,monospace">#01_grunt_concat</span></td>\r
+                       <td><strong>106</strong></td>\r
+                       <td><strong>-129</strong></td>\r
+                       <td>7.87</td>\r
+                       <td>-0.02</td>\r
+                       <td><strong>5.15</strong></td>\r
+                       <td><strong>-0.65</strong></td>\r
+               </tr>\r
+               <tr>\r
+                       <td><span style="font-family: Courier New,Courier,monospace">#02_grunt_uglify</span></td>\r
+                       <td>106</td>\r
+                       <td>-</td>\r
+                       <td><strong>5.85 </strong></td>\r
+                       <td><strong>-2.02</strong></td>\r
+                       <td><strong>4.95</strong></td>\r
+                       <td><strong>-0.19</strong></td>\r
+               </tr>\r
+               <tr>\r
+                       <td><span style="font-family: Courier New,Courier,monospace">#03_grunt_cssmin</span></td>\r
+                       <td>106</td>\r
+                       <td>-</td>\r
+                       <td><strong>5.84</strong></td>\r
+                       <td><strong>-0.01</strong></td>\r
+                       <td><strong>4.89</strong></td>\r
+                       <td><strong>-0.06</strong></td>\r
+               </tr>\r
+               <tr>\r
+                       <td colspan="2" align="center">Total improvement</td>\r
+                       <td colspan="2" align="center">54.89% improvement</td>\r
+                       <td colspan="2" align="center">25.98% improvement</td>\r
+                       <td colspan="2" align="center">15.63% improvement</td>\r
+               </tr>\r
+       </tbody>\r
+</table>\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
index 8945064..9caf8ee 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
@@ -1,83 +1,83 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Page Visibility</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm">Page Visibility Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#visibility">Page Visibility API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#visibility">Page Visibility API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Page Visibility</h1> 
-  
-<p>Page visibility can detect whether the Web document is being shown on the screen. With it, you can design your application to only operate when its page is visible, both enhancing the user experience and reducing the resource usage on the device.</p>
-
-  <p>The main features of the Page Visibility API include:</p> 
-  <ul> 
-   <li>Retrieving the page visibility status
-   <p>You can use 2 properties to <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm#Retrieving_Page_Visibility">detect the visibility status of the page</a>:</p>
-   <ul>
-       <li><p>The <span style="font-family: Courier New,Courier,monospace">hidden</span> property returns a boolean value indicating whether the page is visible.</p></li>
-       <li><p>The <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property returns a DOMString type indicating whether the page is visible.</p></li>
-       </ul></li> 
-        <li>Tracking changes in page visibility
-   <p>You can use the <span style="font-family: Courier New,Courier,monospace">visibilitychange</span> event to be able to <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm#Retrieving_Notifications_Visibility">respond to changes in the page visibility status</a>.</p>
-    <p>For example, in a video player application, you can change the play status of the application based on the event: pause the playback when the page becomes hidden, and continue playing when the page becomes visible again.</p>
-  </li> 
-  </ul>
-  <table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Tizen supports the WebKit-based Page Visibility API. When using the Page Visibility API, you must include the webkit prefix.</td> 
-      </tr> 
-     </tbody>
-</table>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Page Visibility</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm">Page Visibility Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#visibility">Page Visibility API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#visibility">Page Visibility API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Page Visibility</h1> \r
+  \r
+<p>Page visibility can detect whether the Web document is being shown on the screen. With it, you can design your application to only operate when its page is visible, both enhancing the user experience and reducing the resource usage on the device.</p>\r
+\r
+  <p>The main features of the Page Visibility API include:</p> \r
+  <ul> \r
+   <li>Retrieving the page visibility status\r
+   <p>You can use 2 properties to <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm#Retrieving_Page_Visibility">detect the visibility status of the page</a>:</p>\r
+   <ul>\r
+       <li><p>The <span style="font-family: Courier New,Courier,monospace">hidden</span> property returns a boolean value indicating whether the page is visible.</p></li>\r
+       <li><p>The <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property returns a DOMString type indicating whether the page is visible.</p></li>\r
+       </ul></li> \r
+        <li>Tracking changes in page visibility\r
+   <p>You can use the <span style="font-family: Courier New,Courier,monospace">visibilitychange</span> event to be able to <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm#Retrieving_Notifications_Visibility">respond to changes in the page visibility status</a>.</p>\r
+    <p>For example, in a video player application, you can change the play status of the application based on the event: pause the playback when the page becomes hidden, and continue playing when the page becomes visible again.</p>\r
+  </li> \r
+  </ul>\r
+  <table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">Tizen supports the WebKit-based Page Visibility API. When using the Page Visibility API, you must include the webkit prefix.</td> \r
+      </tr> \r
+     </tbody>\r
+</table>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm
index e6b336c..05261fb 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm
@@ -1,67 +1,67 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Performance and Optimization</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm">Performance and Optimization Tutorials</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization API for Wearable Web</a></li>
-                       
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Performance and Optimization</h1> 
-  
-  <p>Performance and optimization features include animation rate and page visibility control, and Web worker management.</p> 
-  
-  <p>The main performance and optimization features are:</p>
-  <ul>
-  <li><a href="page_w.htm">Page Visibility</a> <p>Enables you to retrieve the visibility status of a Web document and detect changes in it.</p></li>
-  <li><a href="timing_control_w.htm">Timing control for script-based animations</a> <p>Enables you to control animation speed by scheduling frame update requests.</p></li>
-  <li><a href="web_workers_w.htm">Web Workers</a> <p>Enables you to create and manage HTML5 Web Workers to run an independent JavaScript thread on the background without affecting the device performance.</p></li>
-  </ul> 
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Performance and Optimization</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm">Performance and Optimization Tutorials</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization API for Wearable Web</a></li>\r
+                       \r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Performance and Optimization</h1> \r
+  \r
+  <p>Performance and optimization features include animation rate and page visibility control, and Web worker management.</p> \r
+  \r
+  <p>The main performance and optimization features are:</p>\r
+  <ul>\r
+  <li><a href="page_w.htm">Page Visibility</a> <p>Enables you to retrieve the visibility status of a Web document and detect changes in it.</p></li>\r
+  <li><a href="timing_control_w.htm">Timing control for script-based animations</a> <p>Enables you to control animation speed by scheduling frame update requests.</p></li>\r
+  <li><a href="web_workers_w.htm">Web Workers</a> <p>Enables you to create and manage HTML5 Web Workers to run an independent JavaScript thread on the background without affecting the device performance.</p></li>\r
+  </ul> \r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
index 427d2be..834776a 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
@@ -1,83 +1,83 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Timing control for script-based animations</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm">Timing control for script-based animations Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">Timing control for script-based animations API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Timing control for script-based animations</h1> 
-  
-<p>Timing control is used mainly in animations for cyclic script execution synchronized with screen changes.</p>
-<p>Making script-based animations requires updating the properties of the animated objects in each frame. In computerized animations, the frame rate is normally 30 or 60 fps (frames per second), because the human eye perceives a sequence of images as an animation when they change at least 12-15 times per second. The <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> (or <span style="font-family: Courier New,Courier,monospace">webkitRequestAnimationFrame()</span>) method of the <a href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/?cp=25_6_3_8_2#the-WindowAnimationTiming-interface" target="_blank">WindowAnimationTiming</a> interface enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm#Creating_App">scheduling the animation frame update requests</a>. The frame update rate depends on implementation. In Tizen SDK version 2.2, it is about 60 fps.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">In mobile applications, when using the Emulator, you must include the  <span style="font-family: Courier New,Courier,monospace">webkit</span> prefix in method names, such as <span style="font-family: Courier New,Courier,monospace">window.performance.webkitNow()</span>. However, when using a device, the prefix must not be used. In addition, when using the Emulator, methods assigned to variables must be formatted as follows:
-          <pre class="prettyprint">
-window.performance.windowNow = window.performance.now || window.performance.webkitNow || Date.now;
-window.performance.windowNow();
-</pre>
-
-<p>In wearable applications, when you are using the Emulator and want to support backward compatibility, methods assigned to variables must be formatted as follows:</p>
-<pre class="prettyprint">
-window.performance.windowNow = window.performance.now || window.performance.webkitNow || Date.now;
-window.performance.windowNow();
-</pre>
-</td> 
-      </tr> 
-     </tbody> 
-    </table>
- 
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Timing control for script-based animations</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm">Timing control for script-based animations Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">Timing control for script-based animations API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Timing control for script-based animations</h1> \r
+  \r
+<p>Timing control is used mainly in animations for cyclic script execution synchronized with screen changes.</p>\r
+<p>Making script-based animations requires updating the properties of the animated objects in each frame. In computerized animations, the frame rate is normally 30 or 60 fps (frames per second), because the human eye perceives a sequence of images as an animation when they change at least 12-15 times per second. The <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> (or <span style="font-family: Courier New,Courier,monospace">webkitRequestAnimationFrame()</span>) method of the <a href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/?cp=25_6_3_8_2#the-WindowAnimationTiming-interface" target="_blank">WindowAnimationTiming</a> interface enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm#Creating_App">scheduling the animation frame update requests</a>. The frame update rate depends on implementation. In Tizen SDK version 2.2, it is about 60 fps.</p>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">In mobile applications, when using the Emulator, you must include the  <span style="font-family: Courier New,Courier,monospace">webkit</span> prefix in method names, such as <span style="font-family: Courier New,Courier,monospace">window.performance.webkitNow()</span>. However, when using a device, the prefix must not be used. In addition, when using the Emulator, methods assigned to variables must be formatted as follows:\r
+          <pre class="prettyprint">\r
+window.performance.windowNow = window.performance.now || window.performance.webkitNow || Date.now;\r
+window.performance.windowNow();\r
+</pre>\r
+\r
+<p>In wearable applications, when you are using the Emulator and want to support backward compatibility, methods assigned to variables must be formatted as follows:</p>\r
+<pre class="prettyprint">\r
+window.performance.windowNow = window.performance.now || window.performance.webkitNow || Date.now;\r
+window.performance.windowNow();\r
+</pre>\r
+</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+ \r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
index e4398c2..14e2432 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
@@ -1,347 +1,347 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Web Workers</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#js_performance">JavaScript Performance</a></li>
-                       <li><a href="#multi">Multi-threading</a></li>
-               </ul>   
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm">Web Workers Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#web_workers">Web Workers API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#web_workers">Web Workers API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Web Workers</h1> 
-
-<p>Web workers run JavaScript in an independent thread instead of the main UI thread, improving the <a href="#js_performance">JavaScript performance</a> without affecting the UI.</p>
-<p>Web workers are not DOM-dependent. They handle pure data, which makes them especially suitable for JavaScript code that takes a long time to execute.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Workers use a same-origin policy and therefore using some of the browser resources, such as <span style="font-family: Courier New,Courier,monospace">DOM</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">window</span>, and <span style="font-family: Courier New,Courier,monospace">parent</span>, is not possible, and they must be activated by creating separate JavaScript files. However, ECMA JavaScript and the methods included in the Web Workers API, such as <span style="font-family: Courier New,Courier,monospace">postMessage()</span>, <span style="font-family: Courier New,Courier,monospace">location</span>, <span style="font-family: Courier New,Courier,monospace">navigator</span>, and <span style="font-family: Courier New,Courier,monospace">importScripts()</span> can be used. The <span style="font-family: Courier New,Courier,monospace">self</span> and <span style="font-family: Courier New,Courier,monospace">location</span> attributes are also supported.</td> 
-      </tr> 
-     </tbody>
-</table>
-<p>The main features of the Web Workers API include:</p>
-<ul>
-<li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm#Creating_Web_Worker">Creating workers</a>
-<p>
-The worker creates a new thread, and only runs when it is executed. It does not communicate with the UI thread or other same-level workers, and therefore, you cannot assign a work priority order. However, you can create subworkers using the <span style="font-family: Courier New,Courier,monospace">importScripts()</span> method to divide tasks.</p>
-</li>
-
-<li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm#Sending_Messages">Messaging between workers</a>
-<p>A subworker can communicate with the host worker using the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the HTML5 Web Messaging API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#messaging">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#messaging">wearable</a> applications). This process is normally used to give work orders to workers or subworkers, or deliver an operation result.</p>
-<p>
-If a worker triggers a message event, the <span style="font-family: Courier New,Courier,monospace">onmessage()</span> event handler can be used to check the sent message.</p>
-</li>
-
-<li><a href="#multi">Multi-threading</a>
-<p>Multi-thread web workers provide significant advantages over UI threads with higher response speed and lower memory usage in applications.</p>
-</li>
-</ul>
-
- <h2 id="js_performance" name="js_performance">JavaScript Performance</h2>
-<p> JavaScript was originally used for simple inspections and request handling. Therefore, the execution time was not an issue. However, with more advanced UI usage, the use of JavaScript code has been increased and become more complicated, significantly influencing the application performance.</p>
-
-<p>Improving performance through effective JavaScript code consists of the following:</p>
-<ul>
-       <li><a href="js_performance_improvement_w.htm">JavaScript performance improvement</a></li>
-<li><a href="jquery_performance_improvement_w.htm">jQuery performance improvement</a></li>
-       <li><a href="minify_js_css_w.htm">JavaScript and CSS minification</a></li>
-</ul>
-<h2 id="multi" name="multi">Multi-threading</h2>
-<p>Generally, Web applications are built and run using a single UI thread. Since only 1 task can be handled at a time, the Web application may not respond due to the execution time of a script block, resulting in lower application performance. To solve these performance-related issues, multi-thread <a href="http://www.w3.org/TR/2012/CR-workers-20120501/" target="_blank">Web workers</a> can be used to provide distributed processing in applications. Use Web workers in applications that require complex calculations or parallel processing for better application performance.</p> 
-
-<p>Since the task of changing the image color using a canvas involves allocating a color value for each pixel of the image displayed on the screen, the program requires a complicated calculation to execute loops by the number of the pixels. The following examples of applying a color filter effects to an image to change the color show:</p> 
-<ul>
-<li><a href="#uithread">Problems with using UI threads</a></li>
-<li><a href="#multithread">Advantages of using multi-thread Web workers</a> </li></ul>
-
-<h3 id="uithread" name="uithread">Using UI Threads</h3>
-<p>The following example uses a UI thread to apply a color filter effect on an image and to display the time taken to apply the filter. Since all the calculations are performed in a single UI thread using the <span style="font-family: Courier New,Courier,monospace">colorFilter()</span> method, the execution time is high (16218 milliseconds).</p>
-
-<p class="figure">Figure: Color filter application using UI thread (in mobile applications only)</p> 
-<p align="center"><img alt="Color filter application using UI thread (in mobile applications only)" src="../../../images/color_filter_app_ui_thread.png" /></p>
-
-<pre class="prettyprint">function colorFilterStart()
-{
-&nbsp;&nbsp;&nbsp;var picture = document.getElementById(&#39;picture&#39;);
-&nbsp;&nbsp;&nbsp;var canvas = document.querySelector(&#39;canvas&#39;);
-&nbsp;&nbsp;&nbsp;canvas.width = document.width;
-&nbsp;&nbsp;&nbsp;canvas.height = picture.clientHeight;
-&nbsp;&nbsp;&nbsp;var tempContext = canvas.getContext(&quot;2d&quot;);
-&nbsp;&nbsp;&nbsp;tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);
-&nbsp;&nbsp;&nbsp;var pixels = canvas.width * canvas.height * 4;
-&nbsp;&nbsp;&nbsp;var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
-&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;
-&nbsp;&nbsp;&nbsp;var timeStart = new Date();
-
-&nbsp;&nbsp;&nbsp;colorFilter(binaryData, pixels);
-&nbsp;&nbsp;&nbsp;tempContext.putImageData(canvasData, 0, 0);
-&nbsp;&nbsp;&nbsp;var timeDiffer = new Date() - timeStart;
-&nbsp;&nbsp;&nbsp;message.innerHTML = timeDiffer + &quot; ms&quot;;
-};
-
-function colorChange(scale, gab, position)
-{
-&nbsp;&nbsp;&nbsp;return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);
-};
-
-function colorFilter(binaryData, pixels)
-{
-&nbsp;&nbsp;&nbsp;var data = binaryData;
-&nbsp;&nbsp;&nbsp;var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; pixels; i += .5)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i] = colorChange(Math.random() * 0.5 + 0.5,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * colorValue)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.769)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.189), data[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 1] = colorChange(Math.random() * 0.5 + 0.5,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * 0.349)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.686)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.168), data[i + 1]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 2] = colorChange(Math.random() * 0.5 + 0.5,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * 0.272)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.534)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.131), data[i + 2]);
-&nbsp;&nbsp;&nbsp;}
-};
-</pre>
-
-<p>You can test the application performance using the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a>. In the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm#time">Timeline panel</a>, the event of performing all the calculations in a single UI thread creates a delay of 16218 milliseconds.</p>
-
-<p class="figure">Figure: UI thread application event performance</p> 
-<p align="center"><img alt="UI thread application event performance" src="../../../images/uithreadapp_event_inspector.png" /></p>
-
-<p class="figure">Figure: UI thread application memory performance</p> 
-<p align="center"><img alt="UI thread application memory performance" src="../../../images/uithreadapp_memory_inspector.png" /></p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Since launching the Web Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Web Inspector is not used, the delay is approximately 6000 milliseconds.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<h3 id="multithread" name="multithread">Using Multi-thread Web Workers</h3>
-<p>The following example uses 4 Web workers to apply a color filter effect on an image by dividing the image into 4 horizontal areas and working on each area simultaneously. The time taken by the application to apply the filter is also displayed on the screen. Since all the calculations are performed by 4 Web workers simultaneously, the execution time is significantly lower (2254 milliseconds).</p>
-
-<p class="figure">Figure: Color filter application using multi-thread Web workers (in mobile applications only)</p> 
-<p align="center"><img alt="Color filter application using multi-thread Web workers (in mobile applications only)" src="../../../images/color_filter_app_multi_thread.png" /></p>
-
-<pre class="prettyprint">function colorFilterStart()
-{
-&nbsp;&nbsp;&nbsp;var picture = document.getElementById(&#39;picture&#39;);
-&nbsp;&nbsp;&nbsp;var canvas = document.querySelector(&#39;canvas&#39;);
-&nbsp;&nbsp;&nbsp;canvas.width = document.width;
-&nbsp;&nbsp;&nbsp;canvas.height = picture.clientHeight;
-&nbsp;&nbsp;&nbsp;var tempContext = canvas.getContext(&quot;2d&quot;);
-&nbsp;&nbsp;&nbsp;var pixels = canvas.width * canvas.height * 4;
-&nbsp;&nbsp;&nbsp;tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);
-&nbsp;&nbsp;&nbsp;var workerNember = 4;
-&nbsp;&nbsp;&nbsp;var count = 0;
-&nbsp;&nbsp;&nbsp;var pixelLength = pixels / workerNember;
-&nbsp;&nbsp;&nbsp;var pixelSize = canvas.height / workerNember;
-&nbsp;&nbsp;&nbsp;var timeStart = new Date();
-
-&nbsp;&nbsp;&nbsp;/* Loop to use multi-thread Web workers */
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; workerNember; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var worker = new Worker(&quot;js/worker.js&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvasData = tempContext.getImageData(0, pixelSize * i, canvas.width, pixelSize);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle data received from the host worker */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.onmessage = function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count++;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempContext.putImageData(e.data.canvasData, 0, pixelSize * e.data.count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count == workerNember)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var timeDiffer = new Date() - timeStart;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = timeDiffer + &quot; ms&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Send data to the host worker */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;data&quot;: canvasData, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;length&quot;: pixelLength, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;count&quot;: i 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">worker.js</span> file contains code to perform calculations for all 4 Web workers simultaneously.</p>
-<pre class="prettyprint">onmessage = function(e)
-{
-&nbsp;&nbsp;&nbsp;var canvasData = e.data.data;
-&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;
-&nbsp;&nbsp;&nbsp;var pixels = e.data.length;
-&nbsp;&nbsp;&nbsp;var count = e.data.count;
-
-&nbsp;&nbsp;&nbsp;colorFilter(binaryData, pixels);
-&nbsp;&nbsp;&nbsp;postMessage(
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;canvasData&quot;: canvasData,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;count&quot;: count
-&nbsp;&nbsp;&nbsp;});
-};
-
-function colorChange(scale, gab, position)
-{
-&nbsp;&nbsp;&nbsp;return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);
-};
-
-function colorFilter(binaryData, pixels)
-{
-&nbsp;&nbsp;&nbsp;var data = binaryData;
-&nbsp;&nbsp;&nbsp;var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; pixels; i += .5)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i] = colorChange(Math.random() * 0.5 + 0.5,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * colorValue)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.769)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.189), data[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 1] = colorChange(Math.random() * 0.5 + 0.5,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * 0.349)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.686)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.168), data[i + 1]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 2] = colorChange(Math.random() * 0.5 + 0.5,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * 0.272)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.534)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.131), data[i + 2]);
-&nbsp;&nbsp;&nbsp;}
-};
-</pre>
-
-<p>By using 4 Web workers in the application, the application performance improves 7 times compared to using a UI thread in the same application.</p>
-
-<p class="figure">Figure: Multi-thread application event performance</p> 
-<p align="center"><img alt="Multi-thread application event performance" src="../../../images/multithreadapp_event_inspector.png" /></p>
-
-<p class="figure">Figure: Multi-thread application memory performance</p> 
-<p align="center"><img alt="Multi-thread application memory performance" src="../../../images/multithreadapp_memory_inspector.png" /></p>
-
-<p>The following table shows the response speed and memory performance based on the number of Web worker threads used to run the application in a Tizen quad-core processor device.</p>
-  <table> 
-   <caption>
-     Table: Speed and memory performance
-   </caption> 
-   <tbody> 
-    <tr> 
-     <th>Number of threads</th> 
-     <th>Response speed</th> 
-     <th>Memory</th> 
-    </tr> 
-    <tr> 
-     <td>1</td> 
-     <td>6760 milliseconds</td> 
-     <td>24.11 KB</td> 
-    </tr> 
-    <tr> 
-     <td>2</td> 
-     <td>3820 milliseconds</td> 
-     <td>23.73 KB</td> 
-    </tr> 
-    <tr> 
-     <td>3</td> 
-     <td>2730 milliseconds</td> 
-     <td>23.73 KB</td> 
-    </tr> 
-    <tr> 
-     <td>4</td> 
-     <td>2340 milliseconds</td> 
-     <td>23.73 KB</td> 
-    </tr> 
-    <tr> 
-     <td>5</td> 
-     <td>2120 milliseconds</td> 
-     <td>24.72 KB</td> 
-    </tr> 
-    <tr> 
-     <td>6</td> 
-     <td>2820 milliseconds</td> 
-     <td>24.48 KB</td> 
-    </tr> 
-    <tr> 
-     <td>7</td> 
-     <td>2340 milliseconds</td> 
-     <td>23.73 KB</td> 
-    </tr> 
-    <tr> 
-     <td>8</td> 
-     <td>2400 milliseconds</td> 
-     <td>23.73 KB</td> 
-    </tr> 
-       </tbody>
-       </table>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Web worker support depends on the type and version of the operating system. If the system does not support multiple processors, using multiple Web workers does not greatly improve the application performance. However, since Web workers are based on HTML5 Web optimization and can use multiple cores, they provide much better performance in Tizen as in other operating systems.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Web Workers</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#js_performance">JavaScript Performance</a></li>\r
+                       <li><a href="#multi">Multi-threading</a></li>\r
+               </ul>   \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm">Web Workers Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#web_workers">Web Workers API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#web_workers">Web Workers API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+  <h1>Web Workers</h1> \r
+\r
+<p>Web workers run JavaScript in an independent thread instead of the main UI thread, improving the <a href="#js_performance">JavaScript performance</a> without affecting the UI.</p>\r
+<p>Web workers are not DOM-dependent. They handle pure data, which makes them especially suitable for JavaScript code that takes a long time to execute.</p>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">Workers use a same-origin policy and therefore using some of the browser resources, such as <span style="font-family: Courier New,Courier,monospace">DOM</span>, <span style="font-family: Courier New,Courier,monospace">document</span>, <span style="font-family: Courier New,Courier,monospace">window</span>, and <span style="font-family: Courier New,Courier,monospace">parent</span>, is not possible, and they must be activated by creating separate JavaScript files. However, ECMA JavaScript and the methods included in the Web Workers API, such as <span style="font-family: Courier New,Courier,monospace">postMessage()</span>, <span style="font-family: Courier New,Courier,monospace">location</span>, <span style="font-family: Courier New,Courier,monospace">navigator</span>, and <span style="font-family: Courier New,Courier,monospace">importScripts()</span> can be used. The <span style="font-family: Courier New,Courier,monospace">self</span> and <span style="font-family: Courier New,Courier,monospace">location</span> attributes are also supported.</td> \r
+      </tr> \r
+     </tbody>\r
+</table>\r
+<p>The main features of the Web Workers API include:</p>\r
+<ul>\r
+<li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm#Creating_Web_Worker">Creating workers</a>\r
+<p>\r
+The worker creates a new thread, and only runs when it is executed. It does not communicate with the UI thread or other same-level workers, and therefore, you cannot assign a work priority order. However, you can create subworkers using the <span style="font-family: Courier New,Courier,monospace">importScripts()</span> method to divide tasks.</p>\r
+</li>\r
+\r
+<li><a href="../../../../../org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm#Sending_Messages">Messaging between workers</a>\r
+<p>A subworker can communicate with the host worker using the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method of the HTML5 Web Messaging API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#messaging">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#messaging">wearable</a> applications). This process is normally used to give work orders to workers or subworkers, or deliver an operation result.</p>\r
+<p>\r
+If a worker triggers a message event, the <span style="font-family: Courier New,Courier,monospace">onmessage()</span> event handler can be used to check the sent message.</p>\r
+</li>\r
+\r
+<li><a href="#multi">Multi-threading</a>\r
+<p>Multi-thread web workers provide significant advantages over UI threads with higher response speed and lower memory usage in applications.</p>\r
+</li>\r
+</ul>\r
+\r
+ <h2 id="js_performance" name="js_performance">JavaScript Performance</h2>\r
+<p> JavaScript was originally used for simple inspections and request handling. Therefore, the execution time was not an issue. However, with more advanced UI usage, the use of JavaScript code has been increased and become more complicated, significantly influencing the application performance.</p>\r
+\r
+<p>Improving performance through effective JavaScript code consists of the following:</p>\r
+<ul>\r
+       <li><a href="js_performance_improvement_w.htm">JavaScript performance improvement</a></li>\r
+<li><a href="jquery_performance_improvement_w.htm">jQuery performance improvement</a></li>\r
+       <li><a href="minify_js_css_w.htm">JavaScript and CSS minification</a></li>\r
+</ul>\r
+<h2 id="multi" name="multi">Multi-threading</h2>\r
+<p>Generally, Web applications are built and run using a single UI thread. Since only 1 task can be handled at a time, the Web application may not respond due to the execution time of a script block, resulting in lower application performance. To solve these performance-related issues, multi-thread <a href="http://www.w3.org/TR/2012/CR-workers-20120501/" target="_blank">Web workers</a> can be used to provide distributed processing in applications. Use Web workers in applications that require complex calculations or parallel processing for better application performance.</p> \r
+\r
+<p>Since the task of changing the image color using a canvas involves allocating a color value for each pixel of the image displayed on the screen, the program requires a complicated calculation to execute loops by the number of the pixels. The following examples of applying a color filter effects to an image to change the color show:</p> \r
+<ul>\r
+<li><a href="#uithread">Problems with using UI threads</a></li>\r
+<li><a href="#multithread">Advantages of using multi-thread Web workers</a> </li></ul>\r
+\r
+<h3 id="uithread" name="uithread">Using UI Threads</h3>\r
+<p>The following example uses a UI thread to apply a color filter effect on an image and to display the time taken to apply the filter. Since all the calculations are performed in a single UI thread using the <span style="font-family: Courier New,Courier,monospace">colorFilter()</span> method, the execution time is high (16218 milliseconds).</p>\r
+\r
+<p class="figure">Figure: Color filter application using UI thread (in mobile applications only)</p> \r
+<p align="center"><img alt="Color filter application using UI thread (in mobile applications only)" src="../../../images/color_filter_app_ui_thread.png" /></p>\r
+\r
+<pre class="prettyprint">function colorFilterStart()\r
+{\r
+&nbsp;&nbsp;&nbsp;var picture = document.getElementById(&#39;picture&#39;);\r
+&nbsp;&nbsp;&nbsp;var canvas = document.querySelector(&#39;canvas&#39;);\r
+&nbsp;&nbsp;&nbsp;canvas.width = document.width;\r
+&nbsp;&nbsp;&nbsp;canvas.height = picture.clientHeight;\r
+&nbsp;&nbsp;&nbsp;var tempContext = canvas.getContext(&quot;2d&quot;);\r
+&nbsp;&nbsp;&nbsp;tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
+&nbsp;&nbsp;&nbsp;var pixels = canvas.width * canvas.height * 4;\r
+&nbsp;&nbsp;&nbsp;var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);\r
+&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;\r
+&nbsp;&nbsp;&nbsp;var timeStart = new Date();\r
+\r
+&nbsp;&nbsp;&nbsp;colorFilter(binaryData, pixels);\r
+&nbsp;&nbsp;&nbsp;tempContext.putImageData(canvasData, 0, 0);\r
+&nbsp;&nbsp;&nbsp;var timeDiffer = new Date() - timeStart;\r
+&nbsp;&nbsp;&nbsp;message.innerHTML = timeDiffer + &quot; ms&quot;;\r
+};\r
+\r
+function colorChange(scale, gab, position)\r
+{\r
+&nbsp;&nbsp;&nbsp;return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
+};\r
+\r
+function colorFilter(binaryData, pixels)\r
+{\r
+&nbsp;&nbsp;&nbsp;var data = binaryData;\r
+&nbsp;&nbsp;&nbsp;var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; pixels; i += .5)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i] = colorChange(Math.random() * 0.5 + 0.5,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * colorValue)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.769)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.189), data[i]);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 1] = colorChange(Math.random() * 0.5 + 0.5,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * 0.349)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.686)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.168), data[i + 1]);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 2] = colorChange(Math.random() * 0.5 + 0.5,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * 0.272)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.534)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.131), data[i + 2]);\r
+&nbsp;&nbsp;&nbsp;}\r
+};\r
+</pre>\r
+\r
+<p>You can test the application performance using the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a>. In the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm#time">Timeline panel</a>, the event of performing all the calculations in a single UI thread creates a delay of 16218 milliseconds.</p>\r
+\r
+<p class="figure">Figure: UI thread application event performance</p> \r
+<p align="center"><img alt="UI thread application event performance" src="../../../images/uithreadapp_event_inspector.png" /></p>\r
+\r
+<p class="figure">Figure: UI thread application memory performance</p> \r
+<p align="center"><img alt="UI thread application memory performance" src="../../../images/uithreadapp_memory_inspector.png" /></p>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Since launching the Web Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Web Inspector is not used, the delay is approximately 6000 milliseconds.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<h3 id="multithread" name="multithread">Using Multi-thread Web Workers</h3>\r
+<p>The following example uses 4 Web workers to apply a color filter effect on an image by dividing the image into 4 horizontal areas and working on each area simultaneously. The time taken by the application to apply the filter is also displayed on the screen. Since all the calculations are performed by 4 Web workers simultaneously, the execution time is significantly lower (2254 milliseconds).</p>\r
+\r
+<p class="figure">Figure: Color filter application using multi-thread Web workers (in mobile applications only)</p> \r
+<p align="center"><img alt="Color filter application using multi-thread Web workers (in mobile applications only)" src="../../../images/color_filter_app_multi_thread.png" /></p>\r
+\r
+<pre class="prettyprint">function colorFilterStart()\r
+{\r
+&nbsp;&nbsp;&nbsp;var picture = document.getElementById(&#39;picture&#39;);\r
+&nbsp;&nbsp;&nbsp;var canvas = document.querySelector(&#39;canvas&#39;);\r
+&nbsp;&nbsp;&nbsp;canvas.width = document.width;\r
+&nbsp;&nbsp;&nbsp;canvas.height = picture.clientHeight;\r
+&nbsp;&nbsp;&nbsp;var tempContext = canvas.getContext(&quot;2d&quot;);\r
+&nbsp;&nbsp;&nbsp;var pixels = canvas.width * canvas.height * 4;\r
+&nbsp;&nbsp;&nbsp;tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
+&nbsp;&nbsp;&nbsp;var workerNember = 4;\r
+&nbsp;&nbsp;&nbsp;var count = 0;\r
+&nbsp;&nbsp;&nbsp;var pixelLength = pixels / workerNember;\r
+&nbsp;&nbsp;&nbsp;var pixelSize = canvas.height / workerNember;\r
+&nbsp;&nbsp;&nbsp;var timeStart = new Date();\r
+\r
+&nbsp;&nbsp;&nbsp;/* Loop to use multi-thread Web workers */\r
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; workerNember; i++)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var worker = new Worker(&quot;js/worker.js&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvasData = tempContext.getImageData(0, pixelSize * i, canvas.width, pixelSize);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle data received from the host worker */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.onmessage = function(e)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count++;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempContext.putImageData(e.data.canvasData, 0, pixelSize * e.data.count);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count == workerNember)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var timeDiffer = new Date() - timeStart;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = timeDiffer + &quot; ms&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Send data to the host worker */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage(\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;data&quot;: canvasData, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;length&quot;: pixelLength, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;count&quot;: i \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">worker.js</span> file contains code to perform calculations for all 4 Web workers simultaneously.</p>\r
+<pre class="prettyprint">onmessage = function(e)\r
+{\r
+&nbsp;&nbsp;&nbsp;var canvasData = e.data.data;\r
+&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;\r
+&nbsp;&nbsp;&nbsp;var pixels = e.data.length;\r
+&nbsp;&nbsp;&nbsp;var count = e.data.count;\r
+\r
+&nbsp;&nbsp;&nbsp;colorFilter(binaryData, pixels);\r
+&nbsp;&nbsp;&nbsp;postMessage(\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;canvasData&quot;: canvasData,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;count&quot;: count\r
+&nbsp;&nbsp;&nbsp;});\r
+};\r
+\r
+function colorChange(scale, gab, position)\r
+{\r
+&nbsp;&nbsp;&nbsp;return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
+};\r
+\r
+function colorFilter(binaryData, pixels)\r
+{\r
+&nbsp;&nbsp;&nbsp;var data = binaryData;\r
+&nbsp;&nbsp;&nbsp;var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; pixels; i += .5)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i] = colorChange(Math.random() * 0.5 + 0.5,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * colorValue)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.769)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.189), data[i]);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 1] = colorChange(Math.random() * 0.5 + 0.5,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * 0.349)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.686)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.168), data[i + 1]);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 2] = colorChange(Math.random() * 0.5 + 0.5,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data[i] * 0.272)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.534)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 2] * 0.131), data[i + 2]);\r
+&nbsp;&nbsp;&nbsp;}\r
+};\r
+</pre>\r
+\r
+<p>By using 4 Web workers in the application, the application performance improves 7 times compared to using a UI thread in the same application.</p>\r
+\r
+<p class="figure">Figure: Multi-thread application event performance</p> \r
+<p align="center"><img alt="Multi-thread application event performance" src="../../../images/multithreadapp_event_inspector.png" /></p>\r
+\r
+<p class="figure">Figure: Multi-thread application memory performance</p> \r
+<p align="center"><img alt="Multi-thread application memory performance" src="../../../images/multithreadapp_memory_inspector.png" /></p>\r
+\r
+<p>The following table shows the response speed and memory performance based on the number of Web worker threads used to run the application in a Tizen quad-core processor device.</p>\r
+  <table> \r
+   <caption>\r
+     Table: Speed and memory performance\r
+   </caption> \r
+   <tbody> \r
+    <tr> \r
+     <th>Number of threads</th> \r
+     <th>Response speed</th> \r
+     <th>Memory</th> \r
+    </tr> \r
+    <tr> \r
+     <td>1</td> \r
+     <td>6760 milliseconds</td> \r
+     <td>24.11 KB</td> \r
+    </tr> \r
+    <tr> \r
+     <td>2</td> \r
+     <td>3820 milliseconds</td> \r
+     <td>23.73 KB</td> \r
+    </tr> \r
+    <tr> \r
+     <td>3</td> \r
+     <td>2730 milliseconds</td> \r
+     <td>23.73 KB</td> \r
+    </tr> \r
+    <tr> \r
+     <td>4</td> \r
+     <td>2340 milliseconds</td> \r
+     <td>23.73 KB</td> \r
+    </tr> \r
+    <tr> \r
+     <td>5</td> \r
+     <td>2120 milliseconds</td> \r
+     <td>24.72 KB</td> \r
+    </tr> \r
+    <tr> \r
+     <td>6</td> \r
+     <td>2820 milliseconds</td> \r
+     <td>24.48 KB</td> \r
+    </tr> \r
+    <tr> \r
+     <td>7</td> \r
+     <td>2340 milliseconds</td> \r
+     <td>23.73 KB</td> \r
+    </tr> \r
+    <tr> \r
+     <td>8</td> \r
+     <td>2400 milliseconds</td> \r
+     <td>23.73 KB</td> \r
+    </tr> \r
+       </tbody>\r
+       </table>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The Web worker support depends on the type and version of the operating system. If the system does not support multiple processors, using multiple Web workers does not greatly improve the application performance. However, since Web workers are based on HTML5 Web optimization and can use multiple cores, they provide much better performance in Tizen as in other operating systems.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/security/cors_w.htm b/org.tizen.guides/html/web/w3c/security/cors_w.htm
index 0b9f6b1..e8d1f4d 100644 (file)
--- a/org.tizen.guides/html/web/w3c/security/cors_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/cors_w.htm
@@ -1,130 +1,130 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Cross-Origin Resource Sharing</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#simple">Simple Request</a></li>
-                       <li><a href="#preflight">Preflight Request</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm">Cross-Origin Resource Sharing Tutorial</a></li> 
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Cross-Origin Resource Sharing</h1> 
- 
- <p>Tizen supports the mechanism of cross-origin resource sharing (CORS), which can activate a client-side <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#cross-origin-request-0" target="_blank">cross-origin request</a> (COR).</p>
-<p>In CORS, new headers related to HTTP communication have been added to allow you to accept or reject CORs:</p>
-<ul>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#origin-request-header" target="blank">Origin</a> request header
-<p>Includes the domain information which has incurred the COR, and is used for the purpose of checking the source of the domain side that has received the relevant request. In addition, this header is protected in the browser side and cannot be changed from the application side.</p></li>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> response header
-<p>Allows a relevant response only when the information in the <span style="font-family: Courier New,Courier,monospace">Origin</span> request header matches. If the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header is a wildcard (*), it unconditionally allows the response regardless of the <span style="font-family: Courier New,Courier,monospace">Origin</span> request header information.</p>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If an extremely allowable CORS policy is used, it can lead to spoofing, data stealing, relay, and other attacks through communication with malicious application programs. To avoid unexpected consequences, pay attention when defining the response header.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li>
-</ul>
-
-<p>CORS supports 2 request types: simple and preflight.</p>
-
-<h2 name="simple" id="simple">Simple Request</h2>
-<p>The request is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-requests" target="_blank">simple request</a>, if all the conditions following conditions are met:</p>
-<ul>
-<li>HTTP methods can only use <span style="font-family: Courier New,Courier,monospace">GET</span>, <span style="font-family: Courier New,Courier,monospace">POST</span>, and <span style="font-family: Courier New,Courier,monospace">HEAD</span>.</li>
-<li>No custom header is allowed.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">Content-Type</span> is one of the following:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">application/x-www-form-urlencoded</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">multipart/form-data</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">text/plain</span></li>
-</ul>
-</li>
-</ul>
-
-<p>When <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm#Using_Simple_Requests">using simple requests</a>, the response is set in the server side with the following response headers:</p>
-<ul>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>
-
-</ul>
-
-<p class="figure">Figure: Simple request workflow</p>
-<p align="center"><img alt="Simple request workflow" src="../../../images/cors_simple.png" /></p> 
-
-
-<h2 name="preflight" id="preflight">Preflight Request</h2>
-
-<p>If a request is not a simple request, it is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-preflight-requests" target="_blank">preflight (non-simple) request</a>, which is <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#terminology" target="_blank">case-insensitive</a>.</p>
-<p>If the access authority is allowed through the preflight request, the actual request for sending the actual data is made. The preflight request can allow access based on various standards other than <span style="font-family: Courier New,Courier,monospace">Origin</span>, such as HTTP certification, HTTP method (for example, <span style="font-family: Courier New,Courier,monospace">GET</span>, <span style="font-family: Courier New,Courier,monospace">POST</span>, or <span style="font-family: Courier New,Courier,monospace">PUT…</span>), or the existence of a certain header.</p>
-<p>When <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm#Using_Preflight_Requests">using preflight requests</a>, the response is set in the server side with the following response headers:</p>
-<ul>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-methods-response-header" target="_blank">Access-Control-Allow-Methods</a> (mandatory)</li>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-headers-response-header" target="_blank">Access-Control-Allow-Headers</a> (mandatory, if a custom header is used)</li>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-max-age-response-header" target="_blank">Access-Control-Max-Age</a> (optional)</li>
-
-</ul>
-
-
-<p class="figure">Figure: Preflight request workflow</p>
-<p align="center"><img alt="Preflight request workflow" src="../../../images/cors_preflight.png" /></p> 
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Cross-Origin Resource Sharing</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#simple">Simple Request</a></li>\r
+                       <li><a href="#preflight">Preflight Request</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm">Cross-Origin Resource Sharing Tutorial</a></li> \r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>Cross-Origin Resource Sharing</h1> \r
+ \r
+ <p>Tizen supports the mechanism of cross-origin resource sharing (CORS), which can activate a client-side <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#cross-origin-request-0" target="_blank">cross-origin request</a> (COR).</p>\r
+<p>In CORS, new headers related to HTTP communication have been added to allow you to accept or reject CORs:</p>\r
+<ul>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#origin-request-header" target="blank">Origin</a> request header\r
+<p>Includes the domain information which has incurred the COR, and is used for the purpose of checking the source of the domain side that has received the relevant request. In addition, this header is protected in the browser side and cannot be changed from the application side.</p></li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> response header\r
+<p>Allows a relevant response only when the information in the <span style="font-family: Courier New,Courier,monospace">Origin</span> request header matches. If the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header is a wildcard (*), it unconditionally allows the response regardless of the <span style="font-family: Courier New,Courier,monospace">Origin</span> request header information.</p>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">If an extremely allowable CORS policy is used, it can lead to spoofing, data stealing, relay, and other attacks through communication with malicious application programs. To avoid unexpected consequences, pay attention when defining the response header.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+</li>\r
+</ul>\r
+\r
+<p>CORS supports 2 request types: simple and preflight.</p>\r
+\r
+<h2 name="simple" id="simple">Simple Request</h2>\r
+<p>The request is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-requests" target="_blank">simple request</a>, if all the conditions following conditions are met:</p>\r
+<ul>\r
+<li>HTTP methods can only use <span style="font-family: Courier New,Courier,monospace">GET</span>, <span style="font-family: Courier New,Courier,monospace">POST</span>, and <span style="font-family: Courier New,Courier,monospace">HEAD</span>.</li>\r
+<li>No custom header is allowed.</li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">Content-Type</span> is one of the following:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">application/x-www-form-urlencoded</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">multipart/form-data</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">text/plain</span></li>\r
+</ul>\r
+</li>\r
+</ul>\r
+\r
+<p>When <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm#Using_Simple_Requests">using simple requests</a>, the response is set in the server side with the following response headers:</p>\r
+<ul>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>\r
+\r
+</ul>\r
+\r
+<p class="figure">Figure: Simple request workflow</p>\r
+<p align="center"><img alt="Simple request workflow" src="../../../images/cors_simple.png" /></p> \r
+\r
+\r
+<h2 name="preflight" id="preflight">Preflight Request</h2>\r
+\r
+<p>If a request is not a simple request, it is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-preflight-requests" target="_blank">preflight (non-simple) request</a>, which is <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#terminology" target="_blank">case-insensitive</a>.</p>\r
+<p>If the access authority is allowed through the preflight request, the actual request for sending the actual data is made. The preflight request can allow access based on various standards other than <span style="font-family: Courier New,Courier,monospace">Origin</span>, such as HTTP certification, HTTP method (for example, <span style="font-family: Courier New,Courier,monospace">GET</span>, <span style="font-family: Courier New,Courier,monospace">POST</span>, or <span style="font-family: Courier New,Courier,monospace">PUT…</span>), or the existence of a certain header.</p>\r
+<p>When <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm#Using_Preflight_Requests">using preflight requests</a>, the response is set in the server side with the following response headers:</p>\r
+<ul>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-methods-response-header" target="_blank">Access-Control-Allow-Methods</a> (mandatory)</li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-headers-response-header" target="_blank">Access-Control-Allow-Headers</a> (mandatory, if a custom header is used)</li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-max-age-response-header" target="_blank">Access-Control-Max-Age</a> (optional)</li>\r
+\r
+</ul>\r
+\r
+\r
+<p class="figure">Figure: Preflight request workflow</p>\r
+<p align="center"><img alt="Preflight request workflow" src="../../../images/cors_preflight.png" /></p> \r
+ \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/security/iframe_w.htm b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
index b23c142..a75e536 100644 (file)
--- a/org.tizen.guides/html/web/w3c/security/iframe_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
@@ -1,102 +1,102 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML5 iframe element</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm">HTML5 iframe element Tutorial</a></li> 
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#iframe">HTML5 iframe element API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#iframe">HTML5 iframe element API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>HTML5 iframe element</h1> 
-
-<p>The HTML5 <span style="font-family: Courier New,Courier,monospace">iframe</span> element can be used to solve security and design issues in embedded Web content.</p>
-
-<p>The main features of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element include:</p>
-
-<ul>
-<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> attribute
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute of the <span style="font-family: Courier New,Courier,monospace">iframe</span> object to control the execution of tasks that can result in unreliable content, thereby enhancing application security.</p>
-<p>If an empty value is assigned to the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute, the following restrictions are applied:</p>
-<ul>
-<li>Content is treated as belonging to a unique origin. Access to cookies, local storage, and other pages within the same domain are not allowed.</li>
-<li>Form submission is disabled.</li>
-<li>Script execution is disabled.</li>
-<li>Link navigation is disabled.</li>
-<li>Plug-ins are disabled.</li>
-<li>Pop-ups are disabled.</li>
-</ul>
-<p>To work around these restrictions, you can use the following additional security restriction conditions:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>
-<p>Enables the content <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Cookies">to be treated as belonging to the same origin</a>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">allow-top-navigation</span>
-<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Page"> navigation to the top-level browsing context</a>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">allow-forms</span>
-<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Form">form submission</a>.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">allow-scripts</span><p> Enables script execution, but blocks pop-ups.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">allow-popups</span>
-<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Popups"> opening a pop-up window from the sandboxed element</a>.</p></li>
-</ul></li>
-
-<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">seamless</span> attribute provided in the <span style="font-family: Courier New,Courier,monospace">iframe</span> object to <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Parent_Document"> render a page as a part of the parent document and include it in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element</a>.</p></li>
-</ul>
-
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace">scrolling</span>, <span style="font-family: Courier New,Courier,monospace">align</span>, <span style="font-family: Courier New,Courier,monospace">frameborder</span>, <span style="font-family: Courier New,Courier,monospace">marginheight</span>, <span style="font-family: Courier New,Courier,monospace">marginwidth</span>, and <span style="font-family: Courier New,Courier,monospace">longdesc</span> HTML5 attributes are no longer supported in the latest HTML5 version.</td>
-    </tr> 
-   </tbody> 
-  </table> 
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>HTML5 iframe element</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm">HTML5 iframe element Tutorial</a></li> \r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#iframe">HTML5 iframe element API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#iframe">HTML5 iframe element API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>HTML5 iframe element</h1> \r
+\r
+<p>The HTML5 <span style="font-family: Courier New,Courier,monospace">iframe</span> element can be used to solve security and design issues in embedded Web content.</p>\r
+\r
+<p>The main features of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element include:</p>\r
+\r
+<ul>\r
+<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> attribute\r
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute of the <span style="font-family: Courier New,Courier,monospace">iframe</span> object to control the execution of tasks that can result in unreliable content, thereby enhancing application security.</p>\r
+<p>If an empty value is assigned to the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute, the following restrictions are applied:</p>\r
+<ul>\r
+<li>Content is treated as belonging to a unique origin. Access to cookies, local storage, and other pages within the same domain are not allowed.</li>\r
+<li>Form submission is disabled.</li>\r
+<li>Script execution is disabled.</li>\r
+<li>Link navigation is disabled.</li>\r
+<li>Plug-ins are disabled.</li>\r
+<li>Pop-ups are disabled.</li>\r
+</ul>\r
+<p>To work around these restrictions, you can use the following additional security restriction conditions:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>\r
+<p>Enables the content <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Cookies">to be treated as belonging to the same origin</a>.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">allow-top-navigation</span>\r
+<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Page"> navigation to the top-level browsing context</a>.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">allow-forms</span>\r
+<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Form">form submission</a>.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">allow-scripts</span><p> Enables script execution, but blocks pop-ups.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">allow-popups</span>\r
+<p>Enables <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Sandboxed_Popups"> opening a pop-up window from the sandboxed element</a>.</p></li>\r
+</ul></li>\r
+\r
+<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute\r
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">seamless</span> attribute provided in the <span style="font-family: Courier New,Courier,monospace">iframe</span> object to <a href="../../../../../org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm#Parent_Document"> render a page as a part of the parent document and include it in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element</a>.</p></li>\r
+</ul>\r
+\r
+<table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace">scrolling</span>, <span style="font-family: Courier New,Courier,monospace">align</span>, <span style="font-family: Courier New,Courier,monospace">frameborder</span>, <span style="font-family: Courier New,Courier,monospace">marginheight</span>, <span style="font-family: Courier New,Courier,monospace">marginwidth</span>, and <span style="font-family: Courier New,Courier,monospace">longdesc</span> HTML5 attributes are no longer supported in the latest HTML5 version.</td>\r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+ \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/security/security_guide_w.htm b/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
index db06ec7..344c9de 100644 (file)
--- a/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
@@ -1,65 +1,65 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Security</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm">Security Tutorials</a></li> 
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security API for Wearable Web</a></li>
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>Security</h1> 
-  <p>Security features include HTML element and client-side cross-origin request control.</p>
-
-  <p>The main security features are:</p>
-  <ul> 
-  <li><a href="iframe_w.htm">HTML5 iframe element</a> <p>Enables you to allow or block specific HTML elements on a Web page.</p></li>
-  <li><a href="cors_w.htm">Cross-Origin Resource Sharing</a> <p>Enables you to make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.</p></li>
-  </ul> 
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Security</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm">Security Tutorials</a></li> \r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>Security</h1> \r
+  <p>Security features include HTML element and client-side cross-origin request control.</p>\r
+\r
+  <p>The main security features are:</p>\r
+  <ul> \r
+  <li><a href="iframe_w.htm">HTML5 iframe element</a> <p>Enables you to allow or block specific HTML elements on a Web page.</p></li>\r
+  <li><a href="cors_w.htm">Cross-Origin Resource Sharing</a> <p>Enables you to make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.</p></li>\r
+  </ul> \r
+ \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
index deec280..12f9a0a 100644 (file)
--- a/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
@@ -39,7 +39,7 @@
    <li><a href="web_storage_w.htm">Web Storage</a> <p>Enables you to use session storage and local storage.</p></li>
   </ul>
   
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>  
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>  
 <ul>
    <li><a href="appcache_w.htm">HTML5 Application caches</a> <p>Enables you to activate project resource caching, and manage the cached resources.</p></li> 
    <li><a href="websql_w.htm">Web SQL Database</a> <p>Enables you to create databases and access them using SQL statements.</p></li>  
diff --git a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
index 8ebea64..b39c258 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
@@ -1,86 +1,86 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Camera API (Tizen Extension)</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm">Camera API (Tizen Extension) Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension) API for Wearable Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-  <h1>Camera API (Tizen Extension)</h1>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>   
-  
-<p>You can use the camera features in the Tizen wearable Web applications.</p>
-<p>The main features of the Camera API (Tizen Extension) API include:</p>
-
-<ul>
-    <li>Accessing the camera device
-    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#access">access the camera device</a> retrieving the media stream from the camera.</p>
-    </li>
-    <li>Managing the camera
-    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#manage">manage the camera features</a> in many ways:</p>
-    <ul><li>You can record videos and capture images.</li>
-    <li>You can access and set the camera settings, such as the file name for the recorded video or captured image.</li></ul></li>
-    <li>Deallocating the camera preview stream
-    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#deallocate">deallocate the camera preview stream resources</a> when the application is invisible so that the preview stream can be assigned to another Web application.</p>
-    </li>
-
-</ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Camera API (Tizen Extension)</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm">Camera API (Tizen Extension) Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension) API for Wearable Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+\r
+  <h1>Camera API (Tizen Extension)</h1>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in wearable applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>   \r
+  \r
+<p>You can use the camera features in the Tizen wearable Web applications.</p>\r
+<p>The main features of the Camera API (Tizen Extension) API include:</p>\r
+\r
+<ul>\r
+    <li>Accessing the camera device\r
+    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#access">access the camera device</a> retrieving the media stream from the camera.</p>\r
+    </li>\r
+    <li>Managing the camera\r
+    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#manage">manage the camera features</a> in many ways:</p>\r
+    <ul><li>You can record videos and capture images.</li>\r
+    <li>You can access and set the camera settings, such as the file name for the recorded video or captured image.</li></ul></li>\r
+    <li>Deallocating the camera preview stream\r
+    <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/camera_tutorial_w.htm#deallocate">deallocate the camera preview stream resources</a> when the application is invisible so that the preview stream can be assigned to another Web application.</p>\r
+    </li>\r
+\r
+</ul>\r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
index 5366a73..417a135 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
@@ -1,83 +1,83 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>FullScreen API - Mozilla</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm">FullScreen API - Mozilla Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#fullscreen">FullScreen API - Mozilla API for Mobile Web</a></li>             
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>FullScreen API - Mozilla</h1>
- 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>   
-  
-   <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm#use">display an element in the fullscreen mode</a>:</p>
-<ul><li>With the <span style="font-family: Courier New,Courier,monospace">webkitRequestFullScreen()</span> method, you can convert a specific element to fullscreen.</li>
-<li>With the <span style="font-family: Courier New,Courier,monospace">webkitCancelFullScreen()</span> method, you can cancel the fullscreen mode.</li></ul>
-<p>If the element uses the  <a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI#full-screen_pseudo-class" target="_blank">:full-screen</a> CSS pseudo-class to switch to the fullscreen mode, a style can be assigned for the fullscreen mode.</p>
-   <table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Tizen supports the WebKit-based Fullscreen API. When using the Fullscreen API, you must include the webkit prefix.</td> 
-      </tr> 
-     </tbody>
-       </table>
-
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>FullScreen API - Mozilla</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm">FullScreen API - Mozilla Tutorial</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#fullscreen">FullScreen API - Mozilla API for Mobile Web</a></li>             \r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>FullScreen API - Mozilla</h1>\r
+ \r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>   \r
+  \r
+   <p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/supplement/fullscreen_tutorial_w.htm#use">display an element in the fullscreen mode</a>:</p>\r
+<ul><li>With the <span style="font-family: Courier New,Courier,monospace">webkitRequestFullScreen()</span> method, you can convert a specific element to fullscreen.</li>\r
+<li>With the <span style="font-family: Courier New,Courier,monospace">webkitCancelFullScreen()</span> method, you can cancel the fullscreen mode.</li></ul>\r
+<p>If the element uses the  <a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI#full-screen_pseudo-class" target="_blank">:full-screen</a> CSS pseudo-class to switch to the fullscreen mode, a style can be assigned for the fullscreen mode.</p>\r
+   <table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">Tizen supports the WebKit-based Fullscreen API. When using the Fullscreen API, you must include the webkit prefix.</td> \r
+      </tr> \r
+     </tbody>\r
+       </table>\r
+\r
+ \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
index 90b16a0..9bc0e44 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
@@ -38,12 +38,12 @@
        <li><a href="webgl_w.htm">WebGL - Khronos</a> <p>Enables you to use the WebGL graphics library to create 3D visual elements.</p></li>
    </ul>
    
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following guides apply in <strong>mobile applications only</strong>:</p>
 <ul>
        <li><a href="fullscreen_w.htm">FullScreen API - Mozilla</a> <p>Enables you to display an element on fullscreen.</p></li>
 </ul>
 
-<p>The following guides apply in <span style="color: red">wearable applications only</span>:</p>  
+<p>The following guides apply in <strong>wearable applications only</strong>:</p>  
 <ul>
     <li><a href="camera_w.htm">Camera API (Tizen Extension)</a> <p>Enables you to control the camera options, capture images, and record video.</p></li>
 </ul> 
diff --git a/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm b/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm
deleted file mode 100644 (file)
index 63ed07c..0000000
--- a/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Clipboard API and events</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm">Clipboard API and events Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#clipboard">Clipboard and events API for Mobile Web</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Clipboard API and events</h1>
-  
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>   
-  
-<p>The clipboard and events feature is used for cutting, copying, and pasting content to easily transfer it between Web applications.</p>
-
-  <p>The main features of Clipboard API and events include:</p>
-  <ul>
-    <li><p>Copying</p>
-<p>You can fire the <span style="font-family: Courier New,Courier,monospace">copy</span> event to <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm#copy">place the selected data on the clipboard</a>.</p></li>
-    <li><p>Cutting</p>
-<p>You can fire the <span style="font-family: Courier New,Courier,monospace">cut</span> event to place the selected data on the clipboard, and <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm#cut">remove the selected content in the document</a>.</p></li>
-    <li><p>Pasting</p>
-<p>You can fire the <span style="font-family: Courier New,Courier,monospace">paste</span> event to <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm#paste">retrieve data from the clipboard and insert it into a document</a>. The data is retrieved in the format most appropriate to the assigned context.</p>
-<p>The most common way of providing clipboard features in an application is to create an editable element, and allow the user to <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm#target">copy content and then paste it into the editable element</a>.</p>
-</li>
-  </ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm b/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm
deleted file mode 100644 (file)
index a6028f5..0000000
--- a/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML5 Drag and drop</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm">HTML5 Drag and drop Tutorial</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dnd">HTML5 Drag and drop API for Mobile Web</a></li>
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>HTML5 Drag and drop</h1>
- 
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
- 
-<p>HTML5 drag and drop activates through event-based JavaScript and added attributes.
-</p>
-<p>
-The main features of the HTML5 Drag and drop API include:
-</p>
-<ul>
-<li>Using drag and drop
-<p>To make an element draggable, add the <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> attribute to it. Only elements thus defined as draggable can <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm#handle">generate drag and drop events</a>.</p>
-<p>A drag and drop requires a source, target, and data. It is used through the following events:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">dragstart</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">drag</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dragleave</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dragenter</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dragover</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">drop</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">dragend</span></li></ul>
-<p>The <span style="font-family: Courier New,Courier,monospace">dragstart</span> and <span style="font-family: Courier New,Courier,monospace">drop</span> events send data through the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface.</p>
-</li>
-<li>Transferring data
-<p>You can <a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm#transfer">transfer data from the drag source to the drop target</a>. The <span style="font-family: Courier New,Courier,monospace">DataTransfer</span> interface instance receives the <span style="font-family: Courier New,Courier,monospace">dragstart</span> event and fills itself with the data to be transferred. It then receives a <span style="font-family: Courier New,Courier,monospace">drop</span> event, and puts the data into the drop target. </p></li>
-</ul>
-
-<table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">To use drag and drop in a Tizen device, long-press the draggable element. When the context menu appears, select the <strong>Drag</strong> menu.</td>
-      </tr>
-     </tbody>
-</table>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm b/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
deleted file mode 100644 (file)
index bca32b2..0000000
--- a/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>UI</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm">UI Tutorials</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI API for Mobile Web</a></li>
-                       
-            </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>UI</h1>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The UI API domain is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-   <p>UI features allow you to manage the clipboard and drag and drop events in your application.</p>
-  <p>The main UI features are:</p>
-  <ul>
-   <li><a href="clipboard_w.htm">Clipboard API and events</a> <p>Enables you to copy content and paste it in an editable area.</p></li>
-   <li><a href="drag_drop_w.htm">HTML5 Drag and drop</a> <p>Enables you to create and manage draggable elements and implement drag events.</p></li>
-  </ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm b/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm
deleted file mode 100644 (file)
index b4046a1..0000000
--- a/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Frame Flattening</title>  
-       
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-       </div>
-       
-<h1>Frame Flattening</h1>
-
-  <p>In the Tizen WebKit, content placed within the <span style="font-family: Courier New,Courier,monospace;">&lt;frame&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;iframe&gt;</span> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</p> 
-  <p>The Tizen WebKit supports this feature since scrolling through small subframes on small screen devices is a tedious task and, occasionally, causes confusion between scrolling subframes and scrolling the Web page itself.</p> 
-  <p>To implement scrollable content in the Tizen WebKit, use the CSS <span style="font-family: Courier New,Courier,monospace;">overflow: scroll</span> or <span style="font-family: Courier New,Courier,monospace;">webkit-overflow-scrolling: touch</span> property instead of <span style="font-family: Courier New,Courier,monospace;">iframe</span>.</p>   
-       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm b/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm
deleted file mode 100644 (file)
index 51eac0e..0000000
--- a/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm
+++ /dev/null
@@ -1,382 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML Priorities</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#doctype">&lt;!DOCTYPE&gt; Element</a></li>
-                       <li><a href="#dom">HTML DOM Tree</a></li>
-                       <li><a href="#css">CSS Rule Priorities</a></li>
-                       <li><a href="#js">JavaScript Behavior</a></li>          
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm">HTML Priorities Tutorial</a></li>                     
-                       </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-  <h1>HTML Priorities</h1> 
-
-<p>The HTML markup is not as important as before, because JavaScript APIs can be used to create various functionalities. For example, graphics APIs (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">wearable</a> applications) can be used for making games, media APIs (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">wearable</a> applications) for creating video chats, and communication APIs (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">wearable</a> applications) for various types of messaging. However, HTML remains the basis of Web applications, and it is useful to be familiar with its behavior.</p>
-
-<p>The structure of the HTML document can be classified into DOCTYPE and HTML DOM (Document Object Model). When an HTML document is loaded, the browser renders the contents in its screen as follows:</p>
-<ol>
-<li>HTML is parsed referring to the rules defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element.</li>
-<li>HTML DOM tree is established.</li>
-<li>DOM elements, including <a href="#js">references to JavaScript</a>, are arranged based on the information defined in the head element. This is called rendering.</li>
-<li>The elements are painted on the screen based on <a href="#css">CSS rules</a>.</li>
-</ol>
-
-<h2 id="doctype"><span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> Element</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element informs the browser of the HTML version and which rules it must follow. It is not a composition element of the HTML.</p>
-
-<p>The browser, based on the version defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element must be declared at the beginning of an HTML document.</p>
-
-<pre class="prettyprint">&lt;!--HTML5--&gt;
-&lt;!DOCTYPE html&gt;
-
-&lt;!--Prior to HTML5--&gt;
-&lt;!DOCTYPE html PUBLIC &quot;{HTML Version Information}&quot; &quot;{DTD (Document Type Definition) file link defined by Rule in HTML DOM}&quot;&gt;
-</pre>
-
-<h2 id="dom">HTML DOM Tree</h2>
-
-<p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements as child nodes:</p>
-
-<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h3>&lt;head&gt; element</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, JavaScript, and favicon:</p>
-
-<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="utf-8" /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; Tizen (in mobile applications) or Tizen Wearable (in wearable applications) &lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;/common/js/ui.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> contains the following subelements:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;title&gt;</span>: Defines the title of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace;"><a href="http://www.w3.org/wiki/HTML/Elements/meta" target="_blank">&lt;meta&gt;</a></span>: Defines information, such as encoding, creator, and keywords of the document.
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The <a href="http://www.w3.org/TR/css-device-adapt/#the-viewport-rule" target="_blank">viewport element</a>, which sets the screen area, is included in the meta information.</td> 
-      </tr> 
-     </tbody> 
-    </table></li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span>: Sets the styles of the document.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;noscript&gt;</span>: Adds functions to the document. </li>
-</ul>
-
-<h3>&lt;body&gt; element</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element defines the area displaying content on the browser screen:</p>
-
-<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;tizen_wrap&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Tizen Web App (in mobile applications) or Tizen Wearable Wep App (in wearable applications)&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&amp;copy; All rights reserved.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-  
-   <h2 id="css" name="css">CSS Rule Priorities</h2>
-<p>The basic rule of HTML, CSS, and JavaScript is that the code is applied from the top to the bottom of the document. Sometimes the lack of understanding of the CSS rule priorities can cause a result you do not expect.</p>
-<p>The following figure illustrates this problem in mobile applications by applying a font color to a black background.</p>
-
-<p class="figure">Figure: Expected and actual result of applying a font color (in mobile applications only)</p> 
-<p align="center"><img alt="Expected and actual result of applying a font color (in mobile applications only)" src="../../../images/css_result.png" /></p>
-
-<h3>Basic CSS Rules</h3>
-
-<p>When creating a CSS document, the following rules apply:</p>
-
-<ul>
-<li>When more than 1 overlapping styles are applied to the same element, only the last style is visible:
-
-<pre class="prettyprint lang-html">p {color: red}
-p {color: blue}
-&lt;!--Blue color is applied--&gt;
-</pre></li>
-<li>The style applied in the parent node at the DOM tree is inherited. For more information, see <a href="http://www.w3.org/TR/CSS21/cascade.html#inheritance" target="_blank">W3C inheritance documentation</a>.
-</li>
-<li>The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
-<ul>
-<li>ID attribute = 100</li>
-<li>Class attribute = 10</li>
-<li>Element = 1</li>
-</ul>
-
-<pre class="prettyprint lang-html">&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
-&lt;/body&gt;
-
-&lt;style&gt;
-&nbsp;&nbsp;&nbsp;p#target {color: black} /* Specificity: 101 */
-&nbsp;&nbsp;&nbsp;p#target {color: red} /* Specificity: 101 */
-&nbsp;&nbsp;&nbsp;p.target {color: blue} /* Specificity: 11 */
-&nbsp;&nbsp;&nbsp;p {color: tomato} /* Specificity: 1 */
-&lt;/style&gt;
-&lt;!--Red color is applied--&gt;</pre>
-</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute is used, it has the highest priority:
-<pre class="prettyprint lang-html">&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
-&lt;/body&gt;
-
-&lt;style&gt;
-&nbsp;&nbsp;&nbsp;p#target {color: black !important}
-&nbsp;&nbsp;&nbsp;p#target {color: red}
-&nbsp;&nbsp;&nbsp;p.target {color: blue}
-&nbsp;&nbsp;&nbsp;p {color: tomato}
-&lt;/style&gt;
-&lt;!--Black color is applied--&gt;</pre>
-</li>
-</ul>
-
-<p>Keeping these rules in mind, you can use any of the following ways to achieve the expected result illustrated in the figure above:</p>
-<pre class="prettyprint">.contents {color: #999 !important;}
-
-section.contents {color: #999;}
-
-body .contents {color: #999;}
-
-#container &gt; .contents {color: #999;}
-</pre>
-
-<h3>Using CSS with HTML</h3>
-
-<p>There are various ways to connect CSS with HTML. Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element.</p>
-
-<p>In the following example, the applied order of the CSS elements is as follows:</p>
-<ol>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
-<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
-</ol>
-
-<pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Link in head--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style tag in head--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p {color: tomato}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--@import in CSS area--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@import url(&quot;css/style.css&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style attribute in HTML element--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style=&quot;color: red&quot;&gt;Hello World&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<p>However, the priority order of the elements is as follows:</p>
-<ol>
-<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
-<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
-<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
-</ol>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">style</span> attribute in the HTML element has the highest priority after the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute.</p>
-
-<p>Using the order above, if all other color styles are applied to <span style="font-family: Courier New,Courier,monospace;">&lt;p&gt;</span> elements, the <span style="font-family: Courier New,Courier,monospace;">style</span> attribute is used to apply the red color that has been directly defined in the HTML. This rule differs from the CSS specificity rules.</p>
-
-<p>Generally, when the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute is used, connect to the top of CSS file that has been linked externally, as illustrated in the figure below. If the attribute is applied in the middle of the CSS file, it is difficult to know the point where CSS has been applied, and to find the file connected to the source in the future. Therefore, group the CSS file at the top.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute gives the same result as connecting an external file, but it does not function correctly in older browsers (IE 5.5 and below).</td> 
-      </tr> 
-     </tbody> 
-    </table>
-<p class="figure">Figure: Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
-<p align="center"><img alt="Using the @import attribute" src="../../../images/using_import_attribute.png" /></p>
-
-<p>The markup in the corresponding files is as follows:</p>
-<ul>
-<li>In the HTML code:
-<pre class="prettyprint">&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
-&lt;/head&gt;
-</pre></li>
-<li>In the <span style="font-family: Courier New,Courier,monospace;">style.css</span> file:
-<pre class="prettyprint">@import url(&quot;priorities1.css&quot;);
-
-p: after {content: &quot; : linked in head&quot;}
-</pre>
-<p class="figure">Figure: Result of linking the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
-<p align="center"><img alt="Result of linking the @import attribute" src="../../../images/import_linked_in_head.png" /></p></li>
-<li>In the <span style="font-family: Courier New,Courier,monospace;">priorities1.css</span> file:
-<pre class="prettyprint">p: after {content: &quot; : Using @import in CSS area&quot;}
-</pre>
-<p class="figure">Figure: Result of using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</p> 
-<p align="center"><img alt="Result of using the @import attribute in the CSS area" src="../../../images/import_css_area.png" /></p></li>
-</ul>
-
- <h2 id="js" name="js">JavaScript Behavior</h2>
-<p>With the advent of HTML5, numerous powerful HTML5 APIs have been introduced. Since the usage of JavaScript has increased, it has become important to use it accurately in accordance with <a href="../perf_opt/js_performance_improvement_w.htm">optimized JavaScript performance</a>.</p>
-
-<p><a href="../../../../../org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm#use">JavaScript used in Web applications</a> can be divided into the core, <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMAScript</a>, and <a href="http://www.w3.org/DOM" target="_blank">DOM</a>, which all manipulate HTML. ECMAScript is executed when a method is called, or it can be executed when an event is fired within a HTML document through a linkage with DOM.  </p>
-
-<h3>Using JavaScript with HTML</h3>
-<p>Used with HTML, JavaScript works as follows:</p>
-<ol>
-<li>During HTML parsing, the content of the <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag is parsed to JavaScript Interpreter.</li>
-<li>The Interpreter parses the received script code. </li>
-<li>Requests that need not be handled immediately are suspended.  </li>
-<li>The handled result is passed over to the browser, which continues to parse HTML.</li>
-</ol>
-
-<p>The following example shows how you can use JavaScript with HTML either by linking to a JavaScript file, or embedding it directly in the HTML code:</p>
-<pre class="prettyprint">/* Linking from HTML */
-&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-
-/* Direct use in HTML */
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated&quot;);
-    
-&nbsp;&nbsp;&nbsp;function animate() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Execute */
-&nbsp;&nbsp;&nbsp;};
-    
-&nbsp;&nbsp;&nbsp;/* Call the animation function when the event is fired */
-&nbsp;&nbsp;&nbsp;webkitRequestAnimationFrame(animate);  
-&lt;/script&gt;
-
-</pre>
-<p>Both ways described above give the same result in behavior. However, the position of the JavaScript code affects the order in which the methods are called.</p>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Previously, adding JavaScript code within head tag was recommended because it is easy to maintain. Currently, adding it to the end of the body and executing it after parsing the HTML document is common.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-       
-<h3>JavaScript Events</h3>
-
-<p>JavaScript generally calls a method when a specific <a href="http://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank">event</a> is fired. More than 70 types of events, such as onload and onclick are available.</p>
-
-<p>The following example shows the use of a simple event:</p>
-
-<pre class="prettyprint">&lt;!--HTML--&gt;
-&lt;body onload=&quot;touchEventHandler()&quot;&gt;
-
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* JavaScript */
-&nbsp;&nbsp;&nbsp;/* Directly assigning */  
-&nbsp;&nbsp;&nbsp;window.onload = touchEventHandler; /* Assigns the name of the subject method */
-    
-&nbsp;&nbsp;&nbsp;/* Event listener (W3C standard) */
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;touchstart&quot;, touchEventHandler, false);
-&lt;/script&gt;</pre>
-<p>Prefer using W3C standard event listener methods. The inline JavaScript code applied directly to an HTML tag is difficult to maintain. Assigning a method directly to an event is also difficult when passing parameters, as the method needs to be assigned for every event.</p>
-
-<h3>JavaScript Priorities</h3>
-
-<p>The rendering order of JavaScript code is based on the following rules:</p>
-<ul>
-<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is temporarily saved, but not handled.  </li>
-<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is immediately handled when it is parsed.  </li>
-<li>When the temporarily saved JavaScript content is executed, the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element content is rendered first, and the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element content after it.</li>
-</ul>
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm b/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm
deleted file mode 100644 (file)
index 0a262e3..0000000
--- a/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm
+++ /dev/null
@@ -1,380 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Multiple Screen Support</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#key">Key Concepts</a></li>
-            <li><a href="#ui">UI Scalability</a></li>
-            <li><a href="#create">Creating Applications Supporting Multiple Screens</a></li>
-            <li><a href="#resolution">Image Resolution Optimization</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>Multiple Screen Support</h1>
-  
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-  <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen Web applications, you must take this into account if you want your application to function well in various device models.</p>
-  <p>Before <a href="#create">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key">key concepts of multiple screen support</a>.</p>
-  <p>Tizen provides the <a href="#ui">UI scalability</a> resolution feature, which allows you to create scalable applications.</p>
-  <p>To optimize images used in Web applications, images based on a single resource can be used in <a href="#resolution">various resolutions</a>.</p>
-  <h2 id="key" name="key">Key Concepts</h2>
-  <p>Before building a Web application for multiple resolutions, make sure you are familiar with the following <a href="http://www.w3.org/" target="_blank">W3C</a> Web content scaling standards, which must be taken into account when developing Web applications:</p>
-  <ul>
-   <li>Viewport meta tag</li>
-   <li>CSS media query</li>
-  </ul>
-  <h3 id="viewport" name="viewport">Viewport Meta Tag</h3>
-  <p>A viewport defines the application area that displays the Web page content.</p>
-  <p>In a Web browser, the viewport size depends on the browser window size. If the viewport is smaller than the Web content size, horizontal and vertical scrollbars are displayed for page navigation. The Web browser viewport does not support the zoom feature. However, in a mobile Web browser, there are no window scrollbars and the viewport supports the zoom feature.</p>
-  <p>The <a href="http://www.w3.org/TR/mwabp/#bp-viewport" target="_blank">viewport meta tag</a> enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages.</p>
-  <p>To use the viewport meta tag while developing Web applications, you must note the following:</p>
-  <ul>
-   <li>The <span style="font-family: Courier New,Courier,monospace">device-height</span> and <span style="font-family: Courier New,Courier,monospace">device-width</span> attributes defined in the viewport meta tag are not the same as the real device width and height in pixels.</li>
-   <li>Using the viewport meta tag, the Web browsers of different devices display the same content with different layout size and scale factor. The scale factor is calculated using the device pixel ratio (DPR).</li>
-  </ul>
-  <h3 id="css" name="css">CSS Media Query</h3>
-  <p>The <a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank">CSS media query</a> enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example:</p>
-  <ul>
-   <li>Define the image resource to be used based on the screen dots per inch (DPI) ratio.</li>
-   <li>Determine the CSS layout to be used based on the screen width.</li>
-  </ul>
-  <p></p>
-  <h2 id="ui" name="ui">UI Scalability</h2>
-  <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application&#39;s logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <span style="font-family: Courier New,Courier,monospace">rem</span> unit to determine the size of the Tizen Web UI components.</p>
-  <h3 id="set" name="set">Setting the Viewport</h3>
-  <p>Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.</p>
-  <p>In the following example, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, which is determined by the width of the Tizen device. The <span style="font-family: Courier New,Courier,monospace">device-width</span> value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
-  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
-  <p>If the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (<span style="font-family: Courier New,Courier,monospace">http://tizen.org</span>) on different devices with the viewport width set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
-  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
-  <table>
-   <caption>
-     Table: Layout size and scale factor
-   </caption>
-   <tbody>
-    <tr>
-     <th>Device screen resolution</th>
-     <th>Real screen DPI</th>
-     <th>Device DPI</th>
-     <th>Web browser page</th>
-     <th>Viewport width</th>
-     <th>Scale factor</th>
-    </tr>
-    <tr>
-     <td style="text-align:center;">720 x 1280</td>
-     <td style="text-align:center;">306</td>
-     <td style="text-align:center;">320</td>
-     <td style="text-align:center;"><img alt="captured screen1" src="../../../images/captured_screen1.png" /></td>
-     <td style="text-align:center;">360 px</td>
-     <td style="text-align:center;">2.0</td>
-    </tr>
-    <tr>
-     <td style="text-align:center;">480 x 800</td>
-     <td style="text-align:center;">218</td>
-     <td style="text-align:center;">240</td>
-     <td style="text-align:center;"><img alt="captured screen2" src="../../../images/captured_screen2.png" /></td>
-     <td style="text-align:center;">320 px</td>
-     <td style="text-align:center;">1.5</td>
-    </tr>
-   </tbody>
-  </table>
-  <h3 id="web" name="web">Working with Tizen Web Winsets</h3>
-  <p>The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
-  <p>If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the <span style="font-family: Courier New,Courier,monospace">rem</span> unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element to adjust the Tizen Web winset sizes accurately.</p>
-  <h2 id="create" name="create">Creating Applications Supporting Multiple Screens</h2>
-  <p>To create an application that supports multiple screen sizes, you must consider the following while coding your application:</p>
-  <ul>
-   <li>Configuring the viewport</li>
-   <li>Optimizing resources</li>
-   <li>Creating screen resolution-independent UI</li>
-  </ul>
-  <h3 id="configure" name="configure">Configuring the Viewport</h3>
-  <p>To use UI scalability in your application, set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag while <a href="../../../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm">creating a Web application project</a> in IDE. To configure the viewport in the Tizen Web applications, add the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
-  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt;</pre>
-  <h3 id="optimize" name="optimize">Optimizing Resources</h3>
-  <p>By default, the Tizen Advanced UI (TAU) consists of the HD Web winsets. The winset scale is lowered for lower screen resolution devices. To optimize resources for different screen resolutions and devices, use the <a href="#css">CSS media query</a> for different resolutions available in Tizen. You can use CSS media queries in the HTML or CSS files.</p>
-  <p>In the HTML file:</p>
-  <pre class="prettyprint">&lt;link media=&quot;only screen and (min-resolution: 320dpi)&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;high-quality-images.css&quot; type= &quot;text/css&quot; rel=&quot;stylesheet&quot;&gt;</pre>
-  <p>In the CSS file:</p>
-  <pre class="prettyprint lang-html">@media screen and (max-resolution: 159dpi)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-
-@media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-
-@media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-
-@media screen and (min-resolution: 320dpi)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-</pre>
-  <p>You can also set different layout and resources for the portrait and landscape views in the CSS file:</p>
-  <pre class="prettyprint lang-html">@media screen and (orientation: portrait)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-
-@media screen and (orientation: landscape)
-{
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
-}
-</pre>
-  <h3 id="independent" name="independent">Creating Screen Resolution-independent UI</h3>
-  <p>The Tizen base font size is 22 px. This base font size value varies based on the device screen resolution. However, to create a screen resolution-independent UI, the Web browser engine renders the base font size as a logical pixel size instead of a physical pixel size.</p>
-  <h2 id="resolution" name="resolution">Image Resolution Optimization</h2>
-
-  <p>In Web applications, optimization of applications for various platforms (regarding devices, OS, and resolution) is efficient.</p>
-  <p><a href="../dom/media_query_w.htm">Media Queries</a> and <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" target="blank">Flexible Box Layout</a> can be used to create flexible layouts, and to build the <a href="https://developer.tizen.org/downloads/sample-web-applications/load-web-app-tizen-sdk" target="blank">deployable package</a> easily.</p>
-
-  <p>Images can be used in Web applications in the following ways:</p>
-  <ul><li><span style="font-family: Courier New,Courier,monospace">IMG</span> tag linking images directly to HTML</li>
-  <li>CSS <span style="font-family: Courier New,Courier,monospace">background</span> property expressing images as a background in HTML</li>
-  <li><a href="../graphics/svg_w.htm">SVG (Scalable Vector Graphics)</a>, <a href="../graphics/canvas_w.htm">Canvas</a>, and <a href="http://www.khronos.org/registry/webgl/specs/latest/" target="blank">WebGL</a> APIs implementing graphics in HTML</li>
-  </ul>
-  <p>When selecting an option from the list above, consider the type of the image resource you are going to use.</p>
-  <p>You can use the following types of image resources:</p>
-  <ul><li><a href="#photos">Photos</a></li>
-<li><a href="#icons">Icons</a></li>
-
-    <li><a href="#animated">Animated images</a></li>
-
-    </ul>
-    <h3 id="photos" name="photos">Photos</h3>
-    <p>An image can be added to an application using the HTML <span style="font-family: Courier New,Courier,monospace">img</span> tag, or CSS <span style="font-family: Courier New,Courier,monospace">background</span> property as shown in the following example:</p>
-  <pre class="prettyprint">&lt;!--HTML--&gt;
-&lt;img src=&quot;images/sample.jpg&quot; alt=&quot;sample image&quot; /&gt;
-
-&lt;!--CSS--&gt;
-.photo
-{
-&nbsp;&nbsp;&nbsp;background: url(../images/sample.jpg) 0 0 no-repeat;
-&nbsp;&nbsp;&nbsp;background-size: 100%;
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 200px;
-}
-</pre>
-<p>In terms of performance, there is no difference between the options.</p>
-
-<p>The image color is expressed based on pixels. Therefore, the higher resolution an image has, the better it looks on a large screen. For full HD display, a resolution bigger than the image size displayed on the screen is needed. However, since a high resolution image tends to have a large size, limit the image size as to fit the maximum screen size:</p>
-<ul><li>1024 x 768 px: 90 KB</li><li>300 x 200 px: 39 KB</li><li>300 x 200 px: 15 KB</li></ul>
-<p>Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size.</p>
-<pre class="prettyprint">img
-{
-&nbsp;&nbsp;&nbsp;max-width: 100%;
-}
-</pre>
-
-<p class="figure">Figure: Enlarging a low-resolution image</p>
-<p align="center"><img alt="Enlarging a low-resolution image" src="../../../images/enlarge_low_res_image.png" /></p>
-  <h3 id="icons" name="icons">Icons</h3>
-    <p>Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 <span style="font-family: Courier New,Courier,monospace">background-size</span> property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.</p>
-    <pre class="prettyprint">.prev_icon, .next_icon
-{
-&nbsp;&nbsp;&nbsp;padding-left: 30px;
-&nbsp;&nbsp;&nbsp;height: 30px;
-&nbsp;&nbsp;&nbsp;line-height: 30px;
-&nbsp;&nbsp;&nbsp;font-size: 1.2em;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-&nbsp;&nbsp;&nbsp;background-position: 0 50%;
-&nbsp;&nbsp;&nbsp;background-size: auto 20px;
-}
-
-.prev_icon.icon1
-{
-&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow_left_01.png);
-}
-</pre>
-
-<p>When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the figure below.</p>
-
-<p class="figure">Figure: Network speed when calling each image separately</p>
-<p align="center"><img alt="Calling each of image separately" src="../../../images/calling_img_sep.png"/></p>
-
-<p>You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the <span style="font-family: Courier New,Courier,monospace">background-position</span> property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
-</p>
-<pre class="prettyprint lang-html">.prev_icon, .next_icon
-{
-&nbsp;&nbsp;&nbsp;background-size: 20px auto; &lt;!--Full HD Display--&gt;
-&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow.png);
-}
-
-.prev_icon.icon1
-{
-&nbsp;&nbsp;&nbsp;background-position: 0 0;
-}
-
-.prev_icon.icon2
-{
-&nbsp;&nbsp;&nbsp;background-position: 0 -50px;
-}
-</pre>
-<p class="figure">Figure: Network speed when using sprite images</p>
-<p align="center"><img alt="Network speed when using sprite image" src="../../../images/network_speed_sprite.png" /></p>
-     <h3 id="animated" name="animated">Animated Images</h3>
-    <p>Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.</p>
-
-    <p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <span style="font-family: Courier New,Courier,monospace;">animation</span> attribute.</p>
-    <p class="figure">Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</p>
-    <p align="center"><img alt="JAVA mascot character  in GIF" src="../../../images/mascot.gif"/></p><br/>
-
-    <p>Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a>:</p>
-    <ul>
-    <li><a href="#gif">GIF animation</a></li>
-    <li><a href="#js">JavaScript animation</a></li>
-    <li><a href="#css3">CSS3 animation</a></li>
-    </ul>
-
-    <h4 id="gif" name="gif">GIF Animation</h4>
-
-    <p>Using GIF animation, the resource usage is as follows:</p>
-    <ul><li>Events: Fires only the painting event</li>
-    <li>Memory: 3 ~ 4 MB</li>
-    <li>Network: 10 ~ 25 ms</li>
-</ul>
-
-    <p class="figure">Figure: Events for a GIF image</p>
-    <p align="center"><img alt="Events" src="../../../images/events.png"/></p><br/>
-    <p class="figure">Figure: Memory usage of a GIF image</p>
-    <p align="center"><img alt="Memory" src="../../../images/memory.png"/></p><br/>
-    <p class="figure">Figure: Network capacity usage of a GIF image</p>
-    <p align="center"><img alt="Network" src="../../../images/network.png"/></p><br/>
-
-    <p>GIF animation can be created in various resolutions without quality loss, when you use the option introduced in <a href="#photos">Photos</a>. This, however, increases memory occupancy.</p>
-
-    <h4 id="js" name="js">JavaScript Animation</h4>
-
-<p>JavaScript animation is less affected by enlarging or reducing its screen size. However, it uses a lot of device resources compared to using CSS3 animations:</p>
-<ul><li>
-Events: Event is fired every 100 ms, the interval of <span style="font-family: Courier New,Courier,monospace">setInterval()</span>.</li><li>
-Memory: Increases in proportion to time, from the initial size 90 KB.</li><li>
-Network: Used until the animation is stopped.</li></ul>
-    <p class="figure">Figure: Events for a JavaScript animation</p>
-    <p align="center"><img alt="Events" src="../../../images/events2.png"/></p><br/>
-    <p class="figure">Figure: Memory usage of a JavaScript animation</p>
-    <p align="center"><img alt="Memory" src="../../../images/memory2.png"/></p><br/>
-    <p class="figure">Figure: Network capacity usage of a JavaScript animation</p>
-    <p align="center"><img alt="Network" src="../../../images/network2.png"/></p><br/>
-<p>The following example shows how JavaScript animation can be implemented:</p>
-    <pre class="prettyprint">&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0;
-&nbsp;&nbsp;&nbsp;function animate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;setInterval(animate, 100);
-&lt;/script&gt;
-</pre>
-
-<p>You can use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations</a> API to prevent animation freezes that occur occasionally:</p>
-
-<pre class="prettyprint">&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0, i = 0;
-&nbsp;&nbsp;&nbsp;function animate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(i % 6)) obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
-&lt;/script&gt;
-</pre>
-
-    <h4 id="css3" name="css3">CSS3 Animation</h4>
-
-        <p>CSS3 animation has a low usage of events, memory, and network capacity. It is efficient for animations that have a fixed size. However, since CSS3 animation is pixel-based, it is difficult to use for animations that need to be enlarged or reduced, in which case JavaScript is a better option:</p>
-<ul><li>
-Events: Fires only rendering and painting events</li><li>
-Memory: 50 ~ 90 KB</li><li>
-Network: 9 ~ 21 ms</li></ul>
-
-    <p class="figure">Figure: Events for a CSS3 animation</p>
-    <p align="center"><img alt="Events" src="../../../images/events3.png"/></p><br/>
-    <p class="figure">Figure: Memory usage of a CSS3 animation</p>
-    <p align="center"><img alt="Memory" src="../../../images/memory3.png"/></p><br/>
-    <p class="figure">Figure: Network capacity usage of a CSS3 animation</p>
-    <p align="center"><img alt="Network" src="../../../images/network3.png"/></p><br/>
-
-    <p>The following example shows how CSS3 animation can be implemented:</p>
-        <pre class="prettyprint">&lt;style&gt;
-&nbsp;&nbsp;&nbsp;.css_animation
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 70px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(../images/sprite.png);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: cssAni .8s steps(10) infinite;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes cssAni
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {background-position: 0px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {background-position: -500px;}
-&nbsp;&nbsp;&nbsp;}
-&lt;/style&gt;
-</pre>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm b/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm
deleted file mode 100644 (file)
index ff63998..0000000
--- a/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm
+++ /dev/null
@@ -1,715 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Multiple UI Layouts</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
- 
- <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#single">Single Layout for Multiple Devices</a></li>
-                       <li><a href="#multiple">Multiple Layouts for Multiple Devices</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
- <h1>Multiple UI Layouts</h1>
- 
-   <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
- 
-  <p>To ensure the largest possible market for your application, you have to design your application layout so that your application can run on multiple Tizen devices.</p>
-
-<p>Although the Web was originally designed to structure documents for large-scaled Internet world, with CSS (Cascading Style Sheet), JavaScript, and various device APIs, it is quickly evolving to a complete runtime environment for applications. In addition, its W3C open development model and the flexibility of its CSS-based presentation make it every developer&#39;s choice as the next development platform. CSS is the key technology for flexible presentation, and it is used to describe the look and formatting of HTML documents. The role of CSS is to determine how the logical structure of the document is displayed to the user.</p>
-
-<p>The Tizen Web engine provides the basic mechanisms for fitting the application content to the target screen. However, to ensure that the application runs well on multiple devices, you must understand those mechanisms in detail. In general, select a relative layout rather than a fixed layout, because a relative layout helps to maintain usability even when the application runs on unexpected devices. To enhance usability even further, use different layouts for each device category.</p>
-
-<p>Using some CSS techniques and Tizen Web engine mechanisms, you can design your application UI layout so that it displays properly on multiple devices:</p>
-<ul><li>You can use a <a href="#single">single layout</a> and take advantage of the auto-fitting mechanism of the Tizen Web engine to ensure that a single layout covers multiple devices.</li>
-<li>You can use <a href="#multiple">multiple layouts</a> to define a separate optimal layout for each device category.</li></ul>
-
- <h2 id="single" name="single">Single Layout for Multiple Devices</h2> 
-  <p>A typical application developer designs an optimized UI for a target device with a fixed layout and high-quality resources. This approach usually results in a nice look for the end user, but can sometimes result in an ugly layout, which makes the application unusable. And this unfortunate result can occur merely due to a change in the device form factor.</p>
-<p>Since the presentation and business logic are strictly separated in a Web application, it handles the device form factor change better than native applications. One single layout, taking advantage of Web technology, can ensure usability even on multiple devices with different form factors.</p>
-
-<p>To design applications with a single layout, you must consider the following issues:</p> 
-
-  <ul> 
-   <li><a href="#viewport">Viewport and other meta tags</a></li> 
-   <li><a href="#relative">Relative layout</a></li> 
-   <li><a href="#header_footer">Header and footer position</a></li> 
-   <li><a href="#flexible">Flexible media</a></li> </ul>
-   
-   <p>For a complete application layout that considers all the above issues, see <a href="#single_example">Single Layout Example</a>.</p>
-   
-  <h3 id="viewport" name="viewport">Viewport and Other Meta Tags</h3>   
-   
-<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag was introduced by Apple to fill the screen resolution gap between initial Smartphone (for example, 320 px) and PC (for example, 980 px). Basically, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>
-
-<p>To use the tag in an HTML file, set its name and content:</p>
-<pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;XXX&quot;&gt;
-</pre> 
-
-<p>As shown in the following code snippet, use the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag to tell the Web engine which device width is targeted by the application. The Web engine can estimate the scale factor based on the target content size and the real screen width. For example, usually almost all wearable applications have the following <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, which sets the viewport width to the appropriate size based on each device:</p>
-<pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
-</pre> 
-
-<p>If you want to set your content layout to the target width of 320 px on every wearable device, use the following meta tag:</p>
-<pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=320&quot;&gt;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag has other properties, such as <span style="font-family: Courier New,Courier,monospace">height</span>, <span style="font-family: Courier New,Courier,monospace">initial-scale</span>, <span style="font-family: Courier New,Courier,monospace">minimum-scale</span>, <span style="font-family: Courier New,Courier,monospace">maximum-scale</span>, and <span style="font-family: Courier New,Courier,monospace">user-scalable</span>. However, do not use those properties unless you understand their exact meaning. Wrong values can cause the Web engine to incorrectly fit the application content to the current device.</p>
-
-<h3 id="relative" name="relative">Relative Layout</h3>
-
-<p>The relative layout concept means that the element size of all content is set as a relative unit (such as percentage), and not as absolute values (such as pixels or points). In responsive Web design, this concept is also known as <strong>fluid grid</strong> (for more information, search for <strong>responsive web design</strong> in your Web browser). To achieve a layout that works on multiple devices, you only need to know about relative layout, not all the other concepts of responsive Web design.</p>
-<p>To implementing a relative layout, you only have to set the width and height of each element as a percentage, as shown in the following example and figure. In the example, the width and height of the <span style="font-family: Courier New,Courier,monospace;">number_pad</span> element is set to 100% and 70%, not 320 px and 224 px. </p>
-
-<p class="figure">Figure: 320x320 calculator</p> 
-<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 100%; height: 70%;}</span></p>
-<p align="center"><img alt="320x320 calculator" src="../../../images/layout_calculator.png"/></p> 
-
-<p>An application with this relative layout is auto-fitted when it runs on an unexpected device, such as the device with a 360x480 resolution shown in the following figure. Even though this adjusted layout may not be as good as the original, it is good enough, since it shows a usable application UI.</p>
- 
-
-<p class="figure">Figure: 360x480 calculator with a relative layout</p>  
-       <p align="center"><img alt="360x480 calculator with a relative layout" src="../../../images/layout_calculator_relative.png"/></p> 
-
-<p>The following figure shows what happens if you use an absolute 320x320 layout. The presentation is definitely ugly (with an empty white space at the bottom) and usability reduced, although the calculation logic itself still works.</p>
-<p class="figure">Figure: 360x480 calculator with an absolute 320x320 layout</p>
-<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 320px; height: 224px;}</span></p> 
- 
-  
-       <p align="center"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../../images/layout_calculator_absolute.png"/></p> 
-
-<h3 id="header_footer" name="header_footer">Header and Footer Position</h3>
-
-<p>While the content layout itself becomes the application UI layout on a Web page, a typical wearable application layout consists of a header area, content area, and footer area. With this trend, many wearable Web applications are designed by separating the 3 areas explicitly.</p>
-<p class="figure">Figure: Typical wearable Web application layout</p>  
-<p align="center"><img alt="Typical wearable Web application layout" src="../../../images/layout_app.png"/></p> 
-
-<p>Not setting the place of the header and footer areas clearly can easily cause problems for your layout. In case of the header, the side-effect is relatively small. However, a wrongly defined footer area can be quite visible and lead to poor usability. The following figure shows the original layout of a pedometer application that consists of a header, content, and footer, with a Stop button set in the footer area. </p>
-<p class="figure">Figure: 320x320 sample Web application</p>  
-<p align="center"><img alt="320x320 sample Web application" src="../../../images/layout_sample.png"/></p> 
-
-<p>In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure. </p> 
-<p class="figure">Figure: Layout on 360x480</p>  
-<p align="center"><img alt="Layout on 360x480" src="../../../images/layout_sample_ugly.png"/></p> 
-
-<p>To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px:</p> 
-
-<pre class="prettyprint">
-.footer {position: fixed; bottom: 0px;}
-</pre>
- 
-<p>The following figure shows the same Web application running on the unexpected device after the footer properties are defined properly. With the correct values, the Web application is usable even on a new target, not planned during the development phase. Note that if a <a href="#relative">relative layout</a> is also applied to the content area, the result is an even better layout and further improved usability.</p>
-<p class="figure">Figure: Usable layout on 360x480</p>  
-<p align="center"><img alt="Usable layout on 360x480" src="../../../images/layout_sample_ok.png"/></p> 
-
-<h3 id="flexible" name="flexible">Flexible Media</h3>
-       
-<p>One of key elements used in the content area is a media element, including image and video. As all other elements, the media elements also must be placed within a relative layout to allow the application flexibly handle resolution changes. When such relative sizing is applied to a media element, it is called <strong>flexible media</strong> in responsive Web design. </p>
-<p>The main issue when making a media element size relative is to ensure that the usable ratio does not change. The following figure shows a video element that works on both 320x320 and 360x480 resolutions, even though the aspect ratio of the screen is changed and scaled up. Basically, when handling media elements, you want to keep the size or ratio of the element the same as in the initially targeted device, even when displayed using a different resolution and aspect ratio. To achieve this, set the width and height properties of the media element with percentage and the auto keyword.</p>
-
-<p class="figure">Figure: Flexible media on 320x320 and 360x480</p> 
-<p><span style="font-family: Courier New,Courier,monospace;">.video iframe {width: 100%; height: auto;}</span></p>
-<p align="center"><img alt="Flexible media on 320x320 and 360x480" src="../../../images/layout_flexible_media.png"/></p> 
-
- 
- <p>The following figure shows an example of wrong usage, where usability decreases as the video element is simply scaled up based on the aspect ratio change. If you set the video element size using a fixed size like this, you get no benefit from the increased resolution, and the layout on the whole screen becomes inharmonious, decreasing usability.</p>
-
-
-<p class="figure">Figure: Fixed size media element</p> 
-<p><span style="font-family: Courier New,Courier,monospace;"> .video iframe {width: 320px; height: 240px;} </span></p>
-<p align="center"><img alt="Fixed size media element" src="../../../images/layout_fixed_media.png"/></p> 
-
-<h3 id="single_example" name="single_example">Single Layout Example</h3>
-       
-       <p>This section illustrates a complete application layout that takes advantage of the issues discussed in previous sections. In particular, it shows how to set the viewport properly to help the Web engine scaling mechanism and how to create a CSS-based layout.</p>
-       
-       
-<p>First of all, set the targeted size of the content area as 320 px in the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, and disable the <span style="font-family: Courier New,Courier,monospace">user-scalable</span> property, as shown in the following code snippet.</p>
-
-<pre class="prettyprint">
-&lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;                                             
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=320px, user-scalable=no&quot; /&gt;                                                 
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;                                                                                                           
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box1&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;            
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box2&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box3&quot; class=&quot;box&quot;&gt;&lt;/div&gt;                                                                       
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box4&quot; class=&quot;box&quot;&gt;&lt;/div&gt;                                                                       
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/main&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt; 
-&lt;/html&gt;
-</pre>
-
-<p>In the above HTML code, the content area consists of 4 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> box elements, and their UI layout is described in the <span style="font-family: Courier New,Courier,monospace">style.css</span> file. The following CSS code programs the layout and the specific box element styles that were defined in the HTML file.</p> 
-<p>The code snippet shows that the content size is set to be same as the viewport size. Each box is filled with a different color and placed so that it fills a quarter of the content area. Because each box size is defined with the width and height of 100%, the relative size of each box element remains the same even if the viewport size changes.</p>
-
-<pre class="prettyprint">
-&lt;!--Default, used for all--&gt;
-* {box-sizing: border-box;}
-body, div, h1 {margin: 0px; padding: 0px;}
-html, body {width: 100%; height: 100%; overflow-x: hidden;}
-
-#box1 {background-color: rgb(255, 255, 141);}
-#box2 {background-color: rgb(165, 241, 238);}
-#box3 {background-color: rgb(248, 179, 179);}
-#box4 {background-color: rgb(192, 161, 246);}
-.tile 
-{
-&nbsp;&nbsp;&nbsp;width: 50%;
-&nbsp;&nbsp;&nbsp;height: 50%;
-&nbsp;&nbsp;&nbsp;float: left;
-}
-.left {padding: 10px 5px 5px 10px;}
-.right {padding: 10px 10px 5px 5px;}
-
-.box 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-}
-</pre>
-
-
-<p>The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area.</p> 
- 
- <p class="figure">Figure: Original layout on a target device</p>  
- <p align="center"><img alt="Original layout on a target device" src="../../../images/layout_original.png"/></p>
- <p>The following figure shows that the relative layout and scaling are correctly applied even when the same application is run on a mobile device with the aspect ratio of 16:9.</p>
-  <p class="figure">Figure: Scaled layout on a 16:9 mobile device</p>  
-  <p align="center"><img alt="Scaled layout on a 16:9 mobile device" src="../../../images/layout_original_scaled.png"/></p>
-<p>The following code snippet shows an example where the background color is replaced with an image while the layout is exactly same as in the 4 box example. The following figures show how the layout including media elements (such as images) functions exactly like the basic box layout.</p>
-
-<pre class="prettyprint">
-&lt;!--Default, used for all--&gt;
-* {box-sizing: border-box;}
-body, div, h1 {margin: 0px; padding: 0px;}
-html, body {width: 100%; height: 100%; overflow-x: hidden;}
-
-#box1 {background-color: rgb(255, 255, 141);}
-#box2 {background-color: rgb(165, 241, 238);}
-#box3 {background-color: rgb(248, 179, 179);}
-#box4 {background-color: rgb(192, 161, 246);}
-.tile 
-{
-&nbsp;&nbsp;&nbsp;width: 50%;
-&nbsp;&nbsp;&nbsp;height: 50%;
-&nbsp;&nbsp;&nbsp;float: left;
-}
-.left {padding: 10px 5px 5px 10px;}
-.right {padding: 10px 10px 5px 5px;}
-
-.box 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;padding: 20px;
-&nbsp;&nbsp;&nbsp;background: no-repeat center;
-&nbsp;&nbsp;&nbsp;background-size: 100% 100%;
-}
-
-#box1 {background-image: url('../a.png');}
-#box2 {background-image: url('../b.png');}
-#box3 {background-image: url('../c.png');}
-#box4 {background-image: url('../d.png');}
-</pre>
-
-
- 
- <p class="figure">Figure: Image-based layout on a target device</p>  
- <p align="center"><img alt="Image-based layout on a target device" src="../../../images/layout_image.png"/></p>
-
-<p class="figure">Figure: Image-based scaled layout on a 16:9 mobile device</p>  
-<p align="center"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../../images/layout_image_scaled.png"/></p>     
-
-
- <h2 id="multiple" name="multiple">Multiple Layouts for Multiple Devices</h2> 
-  
-  <p>In many cases, the desired end result for your application can be achieved using scaling and a relative layout within a <a href="#single">single layout</a>. However, this approach does not always provide the best quality for the end user. </p>
-<p>You can support the best possible layout and usability with some additional development efforts. For instance, you can create an application which, on a tablet, shows the main information (clock face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (clock face). This kind of end result, as shown in the following figure, cannot be achieved by only scaling up the whole layout of the watch device.</p>
-<p class="figure">Figure: Application for a watch and tablet</p>  
-<p align="center"><img alt="Application for a watch and tablet" src="../../../images/multiple_layout_example.png"/></p>  
-
-<p>W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p> 
-
-  <ul> 
-  <li><a href="#viewport2">Viewport setting</a></li>
-   <li><a href="#category">Category classification</a></li> 
-   <li><a href="#display">Classification for display modes</a></li>  
- </ul>
-
- 
-<p>Since the <strong>2.3.1</strong> version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily <a href="#migration">migrate your application to support both shapes</a>.</p> 
- <p class="figure">Figure: Application for a square and circular device</p>  
- <p align="center"><img alt="Application for a square and circular device" src="../../../images/circular_support.png"/></p>  
-     
-
-  <h3 id="viewport2" name="viewport2">Viewport Setting for Multiple Layouts</h3>   
-<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is set to <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span> setting is needed to create an adaptive and responsive Web application. </p>
-
-<p>To use the meta tag in an HTML file, set its name and content: </p>
- <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
-</pre>
-
-<h3 id="category" name="category">Category Classification</h3>
-       
-<p>When creating multiple layouts, you must first configure the layout categories. In other words, a classifying category is needed to fit the layout on the current executable environment. Media queries are supported in CSS3 to give Web application information to the executable environment.</p>
-
-<h4>W3C Media Queries</h4>
-<p>Media queries consist of a media type and expressions of media features. </p>
-
-<p>The media types indicate the media on which the current Web application is running. They are defined in HTML4. The following media types are supported:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace;">aural</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">braille</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">handheld</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">print</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">projection</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">screen</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tty</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">tv</span></li>
-</ul>
-
-<p>You can declare that sections apply to certain media types inside a CSS style sheet.  As in the following example, you can declare <span style="font-family: Courier New,Courier,monospace;">screen</span> as a media type and describe its layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span>. That code applies the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> when the Web application is run on the screen type executable context.</p>
-
-<pre class="prettyprint">
-@media screen {...}
-</pre>
-
-<p>Several media queries can be combined in a media query list to configure the executable environment and define the detailed layout configuration, as needed. The following example shows a case in which the Web application runs on the executable environment having a <span style="font-family: Courier New,Courier,monospace;">screen</span> media type and a 500 pixel minimum width. Its final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user. </p>
-
-<pre class="prettyprint">
-@media screen and (min-width: 500px) {...}
-</pre>
-
-<p>The following table lists the CSS media features, which you can use to specify the layout utilizing the media queries.</p> 
-
-<table> 
-<caption>Table: Media features</caption>
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
-        <th>Value</th>
-        <th>Min/Max</th>
-        <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>color</td> 
-     <td rowspan="2">integer</td>
-        <td rowspan="5">yes</td>
-        <td>Number of bits per a color component</td>   
-    </tr> 
-  <tr>
-    <td>color-index</td>
-        <td>Number of entries in the color lookup table</td>
-  </tr>
-    <tr> 
-     <td>device-aspect-ratio</td> 
-     <td>integer/integer</td>
-        <td>Aspect ratio</td>   
-    </tr>  
-    <tr> 
-     <td>device-height</td> 
-     <td rowspan="2">length</td>
-        <td>Output device height</td>   
-    </tr>
-    <tr> 
-     <td>device-width</td> 
-        <td>Output device width</td>    
-    </tr>
-    <tr> 
-     <td>grid</td> 
-     <td>integer</td>
-        <td>no</td>
-        <td>Set to true for a grid-based device</td>    
-    </tr>
-    <tr> 
-     <td>height</td> 
-     <td>length</td>
-        <td rowspan="3">yes</td>
-        <td>Rendering surface height</td>       
-    </tr>
-    <tr> 
-     <td>monochrome</td> 
-     <td>integer</td>
-        <td>Number of bits per pixel in a monochrome frame buffer</td>  
-    </tr>
-    <tr> 
-     <td>resolution</td> 
-     <td>resolution (<span style="font-family: Courier New,Courier,monospace;">dpi</span> or <span style="font-family: Courier New,Courier,monospace;">dpcm</span>)</td>
-        <td>Resolution</td>     
-    </tr>
-    <tr> 
-     <td>scan</td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">progressive</span> or <span style="font-family: Courier New,Courier,monospace;">interlaced</span></td>
-        <td>no</td>
-        <td>Scanning process of the <span style="font-family: Courier New,Courier,monospace;">tv</span> media types</td>        
-    </tr>
-    <tr> 
-     <td>width</td> 
-     <td>length</td>
-        <td>yes</td>
-        <td>Rendering surface width</td>        
-    </tr>      
-   </tbody> 
-  </table>
- 
-<h4>Tizen Specialized Media Query</h4>
-<p>Tizen supports a special media query feature for a circular device shape. The following table lists the supported media features.</p>
-
-<table class="note">
-       <tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
-       </tr>
-       </tbody>
-</table>
-
-<table> 
-<caption>Table: Tizen specialized media feature</caption>
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
-        <th>Value</th>
-        <th>Min/Max</th>
-        <th>Description</th> 
-    </tr> 
-    
-    <tr> 
-     <td><span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span></td> 
-     <td><span style="font-family: Courier New,Courier,monospace;">&quot;rectangle&quot;</span> | <span style="font-family: Courier New,Courier,monospace;">&quot;circle&quot;</span></td>
-        <td>No</td>
-        <td>Device shape</td>   
-    </tr>
-    
-   </tbody> 
-  </table>
-
-<p>You can combine this media query feature with the W3C type in your code. The final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user:</p>
-<pre class="prettyprint">
-@media all and (-tizen-geometric-shape: circle) {...}
-</pre>
- 
-       
-<h3 id="display" name="display">Classification for Display Modes</h3>
-
-<p>The display mode can be classified as portrait or landscape for a rectangle-shaped device, or circular for a circular device.</p>
-
-<h4>Portrait and Landscape</h4>
-
-<p>You can configure the device landscape and portrait mode using the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <span style="font-family: Courier New,Courier,monospace;">max-device-aspect-ratio</span> feature is used.</p> 
-<p>If you use the <span style="font-family: Courier New,Courier,monospace;">orientation:portrait/landscape</span> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> to configure the portrait and landscape mode.</p> 
-<pre class="prettyprint lang-html">
-@media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1) 
-{
-&nbsp;&nbsp;&nbsp;&lt;!--For portrait mode--&gt;
-}
-@media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10) 
-{
-&nbsp;&nbsp;&nbsp;&lt;!--For landscape mode--&gt;
-}
-</pre> 
-
-<h4>Circular Device</h4>
-
-<p>You can configure the device circular mode using the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> attribute in the Tizen environment. The following example shows how to use the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> feature.</p>
-
-<table class="note">
-       <tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
-       </tr>
-       </tbody>
-</table>
-
-
-<pre class="prettyprint lang-html">
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;&lt;!--For a circular device--&gt;
-}
-</pre>
-
-<h3 id="migration" name="migration">Application Migration to a Circular Device</h3>    
-
-<p>This section illustrates an example for how you can migrate a basic application from a rectangular device (such as Gear 2 or Gear S) to a circular device. Use this example as the best practice to improve your layout.</p>
-
-<p>The example uses the following HTML and CSS code for the sample application and its layout.</p>
-
-<pre class="prettyprint">
-&lt;!--HTML code--&gt;
-&lt;section id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&gt;HEADER&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 4&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 5&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 6&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 7&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 8&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 9&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 10&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer&gt;FOOTER&lt;/footer&gt;
-&lt;/section&gt;
-
-&lt;!--CSS code--&gt;
-html, body 
-{
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;padding: 0;
-&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;font-size: 24px;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-}
-
-section 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;overflow: auto;
-&nbsp;&nbsp;&nbsp;padding: 70px 0;
-}
-
-header, footer 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 70px;
-&nbsp;&nbsp;&nbsp;min-height: 70px;
-&nbsp;&nbsp;&nbsp;line-height: 70px;
-&nbsp;&nbsp;&nbsp;font-size: 30px;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;position: fixed;
-}
-
-header 
-{
-&nbsp;&nbsp;&nbsp;top: 0;
-}
-
-footer 
-{
-&nbsp;&nbsp;&nbsp;bottom: 0;
-}
-
-article ul li 
-{
-&nbsp;&nbsp;&nbsp;border-top: 1px solid rgba(52, 52, 52, 1);
-&nbsp;&nbsp;&nbsp;padding: 15px 20px;
-&nbsp;&nbsp;&nbsp;color: rgba(209, 209, 209, 1);
-&nbsp;&nbsp;&nbsp;font-size: 40px;
-}
-
-article ul li:first 
-{
-&nbsp;&nbsp;&nbsp;border-top: 0 none;
-}</pre>
-
-<p>To migrate the application, use the following steps:</p>
-
- <ol> 
-  <li>Use a relative layout.
-
- <p>To achieve a responsive layout for different devices, implement a relative layout. Simply set the <span style="font-family: Courier New,Courier,monospace;">width: 100%</span> attribute to the layout elements in the CSS code:</p>
-<pre class="prettyprint">
-section 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;...
-}
-
-header, footer 
-{
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;...
-} </pre>
- <table class="note">
-       <tbody>
-       <tr>
-               <th class="note">Note</th>
-       </tr>
-       <tr>
-               <td class="note">The <strong>relative layout</strong> concept is described in more detail in <a href="#relative">Relative Layout</a>.</td>
-       </tr>
-       </tbody>
-</table>
-</li>
-   <li>Set extra spaces both at the top and bottom.
-
- <p>During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a &quot;padding&quot; space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:</p>
-<pre class="prettyprint">
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;section {padding: 77px 0;}
-}
-</pre>
-
- <p class="figure">Figure: Top and bottom padding</p>  
- <p align="center"><img alt="Top and bottom padding" src="../../../images/migrate_padding.png"/></p>  
-</li>
-   <li>Set the header and footer position.
-
-<p>After setting the top and bottom padding, set the header and footer position for scrolling in the circular view.</p>
-<p>For a rectangular device with a lengthwise screen, especially Gear S, the best option is to make only the content area scrollable.</p>
-
-<p class="figure">Figure: Scrolling with a rectangular screen</p>  
-<p align="center"><img alt="Scrolling with a rectangular screen" src="../../../images/migrate_scrollable_rect.png"/></p>
-<p>In a circular screen, it is better to make the whole page scrollable, including the top and bottom space.</p>
-<p class="figure">Figure: Scrolling with a circular screen</p>  
-<p align="center"><img alt="Scrolling with a circular screen" src="../../../images/migrate_scrollable_circle.png"/></p>
-
-<p>To implement the header and footer position, use the CSS <span style="font-family: Courier New,Courier,monospace;">position</span> attribute:</p>
-<pre class="prettyprint">
-&lt;!--Rectangular device--&gt;
-header, footer 
-{
-&nbsp;&nbsp;&nbsp;position: fixed;
-}
-
-&lt;!--Circular device--&gt;
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;header, footer 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: static;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-</li>
-   <li>Move the display to the initial position.
-
-<p>To provide a better user experience, show the entire display at the beginning, including the &quot;top padding&quot; space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.</p>
-
-<p class="figure">Figure: Moving to the initial position</p>  
-<p align="center"><img alt="Moving to the initial position" src="../../../images/migrate_move_to_top.png"/></p>
-
-<p>The scroll move requires several lines of JavaScript code. In the following sample, the few (N) seconds is set to 1500 ms, but you can change the value as needed.</p>
-<pre class="prettyprint">
-(function initScrollPosition() 
-{
-&nbsp;&nbsp;&nbsp;var SCROLL_DELAY_TIME = 1500,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = document.getElementById(&quot;main&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollPosition = window.parseInt(window.getComputedStyle(page)[&quot;padding-top&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mql = window.matchMedia(&quot;(-tizen-geometric-shape: circle)&quot;);;
-
-&nbsp;&nbsp;&nbsp;/* The effect is applied to a circular device only, so use mediaquery */
-&nbsp;&nbsp;&nbsp;if (mql.matches) 
-&nbsp;&nbsp;&nbsp;{    
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;scroll&quot;, function clearInitScrollCallback() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.clearTimeout(initScrollTimeoutId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;scroll&quot;, clearInitScrollCallback, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = window.setTimeout(function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.scrollTop = scrollPosition;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, SCROLL_DELAY_TIME);
-&nbsp;&nbsp;&nbsp;}
-}());
-</pre>
-
-</li>
-   <li>Set extra attributes for a better view.
-
-<p>Extra attributes are not mandatory in the migration process, but they can be helpful for a better application view.</p>
-<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements&#39; layout are needed too. For example, consider setting the <span style="font-family: Courier New,Courier,monospace;">text-align: center</span> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>
-
-<pre class="prettyprint">
-&lt;!--Common style for header and footer text--&gt;
-header, footer 
-{
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-
-&lt;!--In a circular screen, list item has a center position--&gt;
-@media all and (-tizen-geometric-shape: circle) 
-{
-&nbsp;&nbsp;&nbsp;article ul li 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 60px;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
- </ol>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
index 8cfa727..cf0b44e 100644 (file)
--- a/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
@@ -12,43 +12,28 @@
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
   <title>Useful Guides for W3C/HTML5 Features</title> 
  </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
  
 <div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm">Useful Practices for W3C/HTML5 Features Tutorials</a></li>
-               </ul>
-       </div></div>
 </div> 
 
 <div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+       </div>
        
-  <h1>Useful Guides for W3C/HTML5 Features</h1> 
+<h1>Useful Guides for W3C/HTML5 Features</h1> 
     
 <p>Useful guides for W3C/HTML5 features include information on W3C features related to various APIs.</p>
 
-<p>The main useful features are:</p>
-
-       <ul>
-               <li><a href="html_priority_w.htm">HTML Priorities</a> <p>Enables you to use CSS and JavaScript code effectively with HTML elements.</p></li>
-       </ul>
-
-  <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+  <p>The following guides apply in <strong>mobile applications only</strong>:</p>
    <ul> 
-       <li><a href="multiple_screens_w.htm">Multiple Screen Support</a> <p>Allows you to create an application that is both scalable and adaptive to multiple screen resolutions.</p></li>     
-       <li><a href="frame_flattening_w.htm">Frame Flattening</a> <p>Allows you to improve the scrollability of small screens.</p></li>
        <li><a href="sound_policy_w.htm">Tizen WebKit Tap Sound Policy</a> <p>Allows you to play sounds to provide responsiveness on user interaction.</p></li>         
   </ul>  
   
-  <p>The following guides apply in <span style="color: red">wearable applications only</span>:</p>
+  <p>The following guides apply in <strong>wearable applications only</strong>:</p>
    <ul> 
        <li><a href="performance_w.htm">Performance Improvement</a> <p>Allows you to improve the performance of Tizen Web applications.</p></li>
-       <li><a href="ui_layout_w.htm">Multiple UI Layouts</a> <p>Allows you to design your application layout so that your application can run on multiple Tizen devices.</p></li>              
   </ul> 
   
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/index.xml b/org.tizen.guides/index.xml
index 34b8882..ed4afe5 100644 (file)
--- a/org.tizen.guides/index.xml
+++ b/org.tizen.guides/index.xml
@@ -56,42 +56,12 @@
                        <topic href="html/web/tizen/social/call_history_w.htm" label="Call History"></topic>
                        <topic href="html/web/tizen/social/contact_w.htm" label="Contact"></topic>
                        <topic href="html/web/tizen/social/data_sync_w.htm" label="Data Synchronization"></topic>                                       
-                       <topic href="html/web/tizen/social/service_adaptor_w.htm" label="Service Adaptor"></topic>
                </topic>                
                <topic href="html/web/tizen/localization/localization_w.htm" label="Localization"></topic>
-               <topic href="html/web/tizen/uifw/uifw_guide_w.htm" label="Web UIFW"></topic>
-               <topic href="html/web/tizen/TAU/tau.htm" label="Tizen Advaced UI Framework (TAU)">
-                       <topic href="html/web/tizen/TAU/overview.htm" label="Overview"></topic>
-                       <topic href="html/web/tizen/TAU/helloWorld.htm" label="Hello World"></topic>
-                       <topic href="html/web/tizen/TAU/managingPage.htm" label="Managing Page"></topic>
-                       <topic href="html/web/tizen/TAU/eventHandling.htm" label="Tizen Event Handling"></topic>
-                       <topic href="html/web/tizen/TAU/uiComponent.htm" label="UI Component"></topic>
-                       <topic href="html/web/tizen/TAU/tutorialNotepad.htm" label="How to Creating Notepad Application"></topic>
-                       <topic href="html/web/tizen/TAU/circularUI.htm" label="Circular UI (Wearable)"></topic>
-                       <topic href="html/web/tizen/TAU/accessibility.htm" label="Accessibility"></topic>
-                       <topic href="html/web/tizen/TAU/globalization.htm" label="Globalization"></topic>
-               </topic>                
                <topic href="html/web/tizen/service/service_w.htm" label= "Service Application"></topic>
                <topic href="html/web/tizen/ime/ime_w.htm" label= "IME Application"></topic>            
        </topic>
        <topic href="html/web/w3c/guides_w3c_w.htm" label="W3C/HTML5/Supplementary Features">                   
-               <topic href="html/web/w3c/dom/dom_guide_w.htm" label="DOM, Forms and Styles">                                   
-                       <topic href="html/web/w3c/dom/animation_w.htm" label="CSS Animations Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/background_w.htm" label="CSS Backgrounds and Borders Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/basic_ui_w.htm" label="CSS Basic User Interface Module Level 3 (CSS3 UI)"></topic>
-                       <topic href="html/web/w3c/dom/color_w.htm" label="CSS Color Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/flexible_w.htm" label="CSS Flexible Box Layout Module"></topic>
-                       <topic href="html/web/w3c/dom/transform_w.htm" label="CSS Transforms"></topic>
-                       <topic href="html/web/w3c/dom/transition_w.htm" label="CSS Transitions Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/font_w.htm" label="CSS Fonts Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/text_module_w.htm" label="CSS Text Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/woff_w.htm" label="WOFF File Format 1.0"></topic>
-                       <topic href="html/web/w3c/dom/html5forms_w.htm" label="HTML5 Forms"></topic>
-                       <topic href="html/web/w3c/dom/media_query_w.htm" label="Media Queries"></topic>
-                       <topic href="html/web/w3c/dom/selector_w.htm" label="Selectors API Level 1 and Level 2"></topic>
-                       <topic href="html/web/w3c/dom/session_history_w.htm" label="HTML5 session history of browsing contexts"></topic>        
-                       <topic href="html/web/w3c/dom/multi_w.htm" label="CSS Multi-column Layout Module"></topic>                      
-               </topic>
                <topic href="html/web/w3c/device/device_guide_w.htm" label="Device">                                    
                        <topic href="html/web/w3c/device/battery_w.htm" label="Battery Status"></topic>
                        <topic href="html/web/w3c/device/device_orientation_w.htm" label="DeviceOrientation Event Specification"></topic>                       
@@ -139,17 +109,9 @@
                <topic href="html/web/w3c/location/location_guide_w.htm" label="Location">                                      
                        <topic href="html/web/w3c/location/geolocation_w.htm" label="Geolocation API Specification"></topic>                    
                </topic>
-               <topic href="html/web/w3c/ui/ui_guide_w.htm" label="UI">                                        
-                       <topic href="html/web/w3c/ui/clipboard_w.htm" label="Clipboard API and events"></topic>
-                       <topic href="html/web/w3c/ui/drag_drop_w.htm" label="HTML5 Drag and drop"></topic>                                      
-               </topic>                
                <topic href="html/web/w3c/useful/useful_guide_w.htm" label="Useful Guides for W3C/HTML5 Features">      
-                       <topic href="html/web/w3c/useful/html_priority_w.htm" label="HTML Priorities"></topic>
-                       <topic href="html/web/w3c/useful/multiple_screens_w.htm" label="Multiple Screen Support"></topic>
-                       <topic href="html/web/w3c/useful/frame_flattening_w.htm" label="Frame Flattening"></topic>
                        <topic href="html/web/w3c/useful/sound_policy_w.htm" label="Tizen WebKit Tap Sound Policy"></topic>
                        <topic href="html/web/w3c/useful/performance_w.htm" label="Performance Improvement"></topic>
-                       <topic href="html/web/w3c/useful/ui_layout_w.htm" label="Multiple UI Layouts"></topic>
                </topic>                
                <topic href="html/web/w3c/supplement/supplement_guide_w.htm" label="Supplementary Features">
                        <topic href="html/web/w3c/supplement/typedarray_w.htm" label="Typed Array - Khronos"></topic>
@@ -175,7 +137,7 @@
                <topic href="html/native/app/notification_n.htm" label="Notification"></topic>
                <topic href="html/native/app/package_n.htm" label="Package Manager"></topic>
                <topic href="html/native/app/service_app_n.htm" label="Service Application"></topic>
-               <topic href="html/native/app/widget_n.htm" label="Widget"></topic>              
+               <topic href="html/native/app/widget_n.htm" label="Widget Application"></topic>          
                <topic href="html/native/app/shortcut_n.htm" label="Shortcut"></topic>  
                <topic href="html/native/app/watch_n.htm" label="Watch Application"></topic>
        </topic>
@@ -191,7 +153,7 @@
                <topic href="html/native/context/activity_recognition_n.htm" label="Activity Recognition"></topic>
                <topic href="html/native/context/gesture_recognition_n.htm" label="Gesture Recognition"></topic>        
                <topic href="html/native/context/trigger_n.htm" label="Contextual Trigger"></topic>
-               <topic href="html/native/context/history_n.htm" label="Contextual History"></topic>     
+               <topic href="html/native/context/history_n.htm" label="Contextual History"></topic>                     
        </topic>
        <topic href="html/native/graphics/graphics_guide_n.htm" label="Graphics">
                <topic href="html/native/graphics/opengles_n.htm" label="OpenGL ES"></topic>
@@ -213,7 +175,7 @@
                <topic href="html/native/multimedia/camera_n.htm" label="Camera"></topic>
                <topic href="html/native/multimedia/image_util_n.htm" label="Image Util"></topic>
                <topic href="html/native/multimedia/media_codecs_n.htm" label="Media Codec"></topic>
-               <topic href="html/native/multimedia/media_controller_n.htm" label="Media Controller"></topic>
+               <topic href="html/native/multimedia/media_controller_n.htm" label="Media Controller"></topic>           
                <topic href="html/native/multimedia/media_tools_n.htm" label="Media Tool"></topic>
                <topic href="html/native/multimedia/media_vision_n.htm" label="Media Vision"></topic>           
                <topic href="html/native/multimedia/metadata_editor_n.htm" label="Metadata Editor"></topic>             
@@ -221,11 +183,11 @@
                <topic href="html/native/multimedia/player_n.htm" label="Player"></topic>
                <topic href="html/native/multimedia/radio_n.htm" label="Radio"></topic>
                <topic href="html/native/multimedia/recorder_n.htm" label="Recorder"></topic>
-               <topic href="html/native/multimedia/thumbnail_util_n.htm" label="Thumbnail Util"></topic>
+               <topic href="html/native/multimedia/thumbnail_util_n.htm" label="Thumbnail Util"></topic>               
                <topic href="html/native/multimedia/tone_player_n.htm" label="Tone Player"></topic>
                <topic href="html/native/multimedia/wav_player_n.htm" label="WAV Player"></topic>               
                <topic href="html/native/multimedia/sound_manager_n.htm" label="Sound Manager"></topic>
-               <topic href="html/native/multimedia/screen_mirroring_n.htm" label="Screen Mirroring Sink"></topic>
+               <topic href="html/native/multimedia/screen_mirroring_n.htm" label="Screen Mirroring Sink"></topic>              
                <topic href="html/native/multimedia/video_util_n.htm" label="Video Util"></topic>
        </topic>
        <topic href="html/native/network/network_guide_n.htm" label="Network">                  
@@ -262,46 +224,6 @@
                <topic href="html/native/telephony/telephony_info_n.htm" label="Telephony Information"></topic>
        </topic>
        <topic href="html/native/ui/ui_guide_n.htm" label="UI Framework">       
-               <topic href="html/native/ui/efl_n.htm" label="EFL"></topic>     
-               <topic href="html/native/ui/eina_n.htm" label="Eina">
-                       <topic href="html/native/ui/data_types_n.htm" label="Data Types"></topic>
-                       <topic href="html/native/ui/eina_tools_n.htm" label="Eina Tools"></topic>
-               </topic>
-               <topic href="html/native/ui/evas_n.htm" label="Evas"></topic>   
-               <topic href="html/native/ui/edje_n.htm" label="Edje">   
-                       <topic href="html/native/ui/edc_part_block_n.htm" label="Edje Parts and Blocks"></topic>                
-               </topic>
-               <topic href="html/native/ui/ecore_n.htm" label="Ecore">
-                       <topic href="html/native/ui/main_loop_n.htm" label="Main Loop"></topic>
-                       <topic href="html/native/ui/threads_n.htm" label="Thread Usage"></topic>        
-               </topic>
-               <topic href="html/native/ui/events_effects_n.htm" label="Event and Effect">
-                       <topic href="html/native/ui/event_types_n.htm" label="Event Types"></topic>                             
-                       <topic href="html/native/ui/animations_effects_n.htm" label="Animation and Effect Types"></topic>                       
-               </topic>                
-               <topic href="html/native/ui/ui_component_n.htm" label="UI Components">
-                       <topic href="html/native/ui/ui_component_mn.htm" label="Mobile Native">
-                               <topic href="html/native/ui/elementary_mn.htm" label="Elementary">
-                                       <topic href="html/native/ui/containers_mn.htm" label="Containers"></topic>
-                                       <topic href="html/native/ui/components_mn.htm" label="Components"></topic>
-                                       <topic href="html/native/ui/styles_mn.htm" label="UI Component Styles"></topic>                 
-                               </topic>        
-                       </topic>
-                       <topic href="html/native/ui/ui_component_wn.htm" label="Wearable Native">
-                               <topic href="html/native/ui/elementary_wn.htm" label="Elementary">
-                                       <topic href="html/native/ui/containers_wn.htm" label="Containers"></topic>
-                                       <topic href="html/native/ui/components_wn.htm" label="Components"></topic>      
-                                       <topic href="html/native/ui/styles_wn.htm" label="UI Component Styles"></topic>                                 
-                               </topic>
-                               <topic href="html/native/ui/circle_components_wn.htm" label="Circle Components"></topic>
-                       </topic>                        
-                       <topic href="html/native/ui/preferences_n.htm" label="UI Component Preferences"></topic>                
-               </topic>                
-               <topic href="html/native/ui/efl_extension_n.htm" label="Efl Extension"></topic>
-               <topic href="html/native/ui/font_setting_n.htm" label="Font Setting"></topic>
-               <topic href="html/native/ui/efl_util_n.htm" label="EFL UTIL"></topic>
-               <topic href="html/native/ui/multiple_screens_n.htm" label="Multiple Screen Support"></topic>
-               <topic href="html/native/ui/scalability_n.htm" label="Scalability Support"></topic>
                <topic href="html/native/ui/eom_n.htm" label="External Output Manager"></topic>
        </topic>
        <topic href="html/native/uix/uix_guide_n.htm" label="UIX">                      
diff --git a/org.tizen.guides/plugin.xml b/org.tizen.guides/plugin.xml
index 90140e5..4c22a91 100644 (file)
--- a/org.tizen.guides/plugin.xml
+++ b/org.tizen.guides/plugin.xml
@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?eclipse version="3.0"?>
-
-<plugin>
-       <extension point="org.eclipse.help.toc">
-               <toc file="index.xml" primary="true" />
-       </extension>
-</plugin>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<?eclipse version="3.0"?>\r
+\r
+<plugin>\r
+       <extension point="org.eclipse.help.toc">\r
+               <toc file="index.xml" primary="true" />\r
+       </extension>\r
+</plugin>\r
diff --git a/org.tizen.sampledescriptions/.project b/org.tizen.sampledescriptions/.project
index bed8d0a..1cb0dce 100644 (file)
--- a/org.tizen.sampledescriptions/.project
+++ b/org.tizen.sampledescriptions/.project
@@ -1,22 +1,22 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-       <name>org.tizen.sampledescriptions_2.4.0</name>
-       <comment></comment>
-       <projects>
-       </projects>
-       <buildSpec>
-               <buildCommand>
-                       <name>org.eclipse.pde.ManifestBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.eclipse.pde.SchemaBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-       </buildSpec>
-       <natures>
-               <nature>org.eclipse.pde.PluginNature</nature>
-       </natures>
-</projectDescription>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<projectDescription>\r
+       <name>org.tizen.sampledescriptions_2.4.0</name>\r
+       <comment></comment>\r
+       <projects>\r
+       </projects>\r
+       <buildSpec>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.ManifestBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.SchemaBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+       </buildSpec>\r
+       <natures>\r
+               <nature>org.eclipse.pde.PluginNature</nature>\r
+       </natures>\r
+</projectDescription>\r
diff --git a/org.tizen.sampledescriptions/META-INF/MANIFEST.MF b/org.tizen.sampledescriptions/META-INF/MANIFEST.MF
index e984c7e..88f81e0 100644 (file)
--- a/org.tizen.sampledescriptions/META-INF/MANIFEST.MF
+++ b/org.tizen.sampledescriptions/META-INF/MANIFEST.MF
@@ -1,7 +1,7 @@
-Manifest-Version: 1.0
-Bundle-ManifestVersion: 1
-Bundle-Name: Tizen Sample Applications
-Bundle-SymbolicName: org.tizen.sampledescriptions;singleton=true
-Bundle-Version: 2.4.0
-Bundle-Vendor: The Linux Foundation
-
+Manifest-Version: 1.0\r
+Bundle-ManifestVersion: 1\r
+Bundle-Name: Tizen Sample Applications\r
+Bundle-SymbolicName: org.tizen.sampledescriptions;singleton=true\r
+Bundle-Version: 2.4.0\r
+Bundle-Vendor: The Linux Foundation\r
+\r
diff --git a/org.tizen.sampledescriptions/build.properties b/org.tizen.sampledescriptions/build.properties
index b84ff38..264c2a1 100644 (file)
--- a/org.tizen.sampledescriptions/build.properties
+++ b/org.tizen.sampledescriptions/build.properties
@@ -1,8 +1,8 @@
-bin.includes = plugin.xml,\
-               META-INF/,\
-               html/,\
-               build.properties,\
-               .project,\
-                          about.html,\
-               index.xml
-
+bin.includes = plugin.xml,\\r
+               META-INF/,\\r
+               html/,\\r
+               build.properties,\\r
+               .project,\\r
+                          about.html,\\r
+               index.xml\r
+\r
diff --git a/org.tizen.sampledescriptions/html/css/snippet.css b/org.tizen.sampledescriptions/html/css/snippet.css
index f880409..2be1b1f 100644 (file)
--- a/org.tizen.sampledescriptions/html/css/snippet.css
+++ b/org.tizen.sampledescriptions/html/css/snippet.css
@@ -1,52 +1,52 @@
-/* Pretty printing styles. Used with prettify.js. */
-
-/* SPAN elements with the classes below are added by prettyprint. */
-.pln { color: #000 }  /* plain text */
-
-@media screen {
-  .str { color: #793AFF }  /* string content */
-  .kwd { color: #7F0055 }  /* a keyword */
-  .com { color: green}  /* a comment */
-  .typ { color: #1C1C1C }  /* a type name */
-  .lit { color: black }  /* a literal value */
-  /* punctuation, lisp open bracket, lisp close bracket */
-  .pun, .opn, .clo { color: #1C1C1C}
-  .tag { color: #008 }  /* a markup tag name */
-  .atn { color: #606 }  /* a markup attribute name */
-  .atv { color: #080 }  /* a markup attribute value */
-  .dec, .var { color: #606 }  /* a declaration; a variable name */
-  .fun { color: red }  /* a function name */
-}
-
-/* Use higher contrast and text-weight for printable form. */
-@media print, projection {
-  .str { color: #060 }
-  .kwd { color: #006; font-weight: bold }
-  .com { color: #600; font-style: italic }
-  .typ { color: #404; font-weight: bold }
-  .lit { color: #044 }
-  .pun, .opn, .clo { color: #440 }
-  .tag { color: #006; font-weight: bold }
-  .atn { color: #404 }
-  .atv { color: #060 }
-}
-
-/* Put a border around prettyprinted code snippets. */
-pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L5,
-li.L6,
-li.L7,
-li.L8 { list-style-type: none }
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 { background: #eee }
+/* Pretty printing styles. Used with prettify.js. */\r
+\r
+/* SPAN elements with the classes below are added by prettyprint. */\r
+.pln { color: #000 }  /* plain text */\r
+\r
+@media screen {\r
+  .str { color: #793AFF }  /* string content */\r
+  .kwd { color: #7F0055 }  /* a keyword */\r
+  .com { color: green}  /* a comment */\r
+  .typ { color: #1C1C1C }  /* a type name */\r
+  .lit { color: black }  /* a literal value */\r
+  /* punctuation, lisp open bracket, lisp close bracket */\r
+  .pun, .opn, .clo { color: #1C1C1C}\r
+  .tag { color: #008 }  /* a markup tag name */\r
+  .atn { color: #606 }  /* a markup attribute name */\r
+  .atv { color: #080 }  /* a markup attribute value */\r
+  .dec, .var { color: #606 }  /* a declaration; a variable name */\r
+  .fun { color: red }  /* a function name */\r
+}\r
+\r
+/* Use higher contrast and text-weight for printable form. */\r
+@media print, projection {\r
+  .str { color: #060 }\r
+  .kwd { color: #006; font-weight: bold }\r
+  .com { color: #600; font-style: italic }\r
+  .typ { color: #404; font-weight: bold }\r
+  .lit { color: #044 }\r
+  .pun, .opn, .clo { color: #440 }\r
+  .tag { color: #006; font-weight: bold }\r
+  .atn { color: #404 }\r
+  .atv { color: #060 }\r
+}\r
+\r
+/* Put a border around prettyprinted code snippets. */\r
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }\r
+\r
+/* Specify class=linenums on a pre to get line numbering */\r
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */\r
+li.L0,\r
+li.L1,\r
+li.L2,\r
+li.L3,\r
+li.L5,\r
+li.L6,\r
+li.L7,\r
+li.L8 { list-style-type: none }\r
+/* Alternate shading for lines */\r
+li.L1,\r
+li.L3,\r
+li.L5,\r
+li.L7,\r
+li.L9 { background: #eee }\r
diff --git a/org.tizen.sampledescriptions/html/css/styles.css b/org.tizen.sampledescriptions/html/css/styles.css
index 4c8f5a8..ad7ebcb 100644 (file)
--- a/org.tizen.sampledescriptions/html/css/styles.css
+++ b/org.tizen.sampledescriptions/html/css/styles.css
@@ -1,756 +1,756 @@
-@charset "utf-8";
-
-body {
-       background: white;
-       color: #1C1C1C;
-       margin-right: 20px;
-       margin-left: 20px;
-       font-size: 9pt;
-       font-weight: normal;
-       font-family: Arial, Helvetica, sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
-       font-family: Arial, Verdana, Helvetica, sans-serif
-       }
-
-/*     Set default font to 9 pt        */
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
-       font-size: 9pt;
-}
-       
-pre, code { 
-       font-family: "Courier New", Courier, monospace;
-       border: 1px solid #719cc7;
-       margin: 6px 1.5px;
-       padding: 1px 1px 1px 1px;
-       font-weight: normal;
-       font-style: normal;
-}
-
-h1 {font-size: 24pt; color: #0E437D;}
-h2 {font-size: 18pt; color: #0E437D;}
-h3 {font-size: 14pt; color: #1C1C1C;}
-h4 {font-size: 12pt; color: #1C1C1C;}
-h5 {font-size: 10pt; color: #1C1C1C;}
-       
-h1, h2, h3, h4, h5 {
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-
-caption, p.caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: left;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-ol  {
-       margin-bottom: 20px;
-}
-
-ul ul , ol ul, ul ol, ol ol{
-       margin-top: 10px;
-}
-
-ul li, ol li {
-       margin-bottom: 10px;
-}
-
-ol.tutorstep li {
-       border-top: 2px solid #719cc7;
-       list-style-position: inside;
-       font-weight: bold;
-       margin-top: 30px;
-       margin-left: -20px;
-       padding-top: 3px;
-       font-size: 12pt;
-}
-
-ol.tutorstep li p{
-       font-size: 9pt;
-       font-weight: normal;
-       margin-top: 10px;
-}
-
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
-       font-size: 9pt;
-       list-style-position: outside; 
-       margin-left: 0px;
-       font-weight: normal;
-}
-
-ol.tutorstep ol li p, ol.tutorstep ul li p {
-       font-size: 9pt;
-       font-weight: normal; 
-       margin-top: 5px;
-}
-
-ol li p, ul li p {
-       font-size: 9pt;
-       font-weight: normal;
-       margin-bottom: 2px;
-       margin-top: 2px;
-}
-
-ol ol , ol.tutorstep ol{
-       font-size: 9pt;
-       font-weight: normal;
-       list-style-type: lower-alpha;
-       color: #1C1C1C; 
-       border-style: none;
-       margin-top: 10px; 
-}
-
-ol.tutorstep ul {
-       margin-top: 10px;
-       font-size: 9pt;
-}
-
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
-       border-style: none;
-       margin-top: 5px;
-       font-size: 9pt;
-}
-
-ul {
-       font-size: 9pt;
-       font-weight: normal;
-       color: #1C1C1C;
-}
-
-
-/*     End of font face declarations   */
-
-/*     Set table borders and heading row background    */
-table {
-       border: 0px;
-       border-collapse: collapse;
-       width: 100%;
-       margin-top: 20px;
-       margin-bottom: 20px;
-       background: white;
-}
-
-th {
-       border-top: 2px solid #719cc7;
-       border-right: 1px solid #c6d9f1;
-       border-left: 1px solid #c6d9f1;
-       background-color: #f3f7fb;
-       padding: 4px;
-       color: #719cc7;
-       font-size: 9pt;
-       font-weight: bold;
-}      
-       
-td {
-       border: 1px solid #c6d9f1;
-       vertical-align:top;
-       padding: 3px 20px 5px 20px;
-       }
-
-td.middle {
-       border: 1px solid #c6d9f1;
-       vertical-align:middle;
-       padding: 3px 20px 5px 20px;
-       }       
-       
-/*     Notes stand out using a light top & bottom borders with yellow background       */
-table.note {
-       border-top: 2px solid #719cc7;
-       border-left: 0px;
-       border-right: 0px;
-       width: 100%;
-}
-
-tr.note {
-       text-align: left;
-}
-
-th.note {
-       text-align: left;
-       background-color: #ddd9c3;
-       background-image: note.gif;
-       border-top: 2px solid #719cc7;
-       border-bottom:1px solid #719cc7;
-       border-right: none;
-
-}
-
-td.note, p.note {
-       background-color: #eeece1;
-       color: #1C1C1C;
-       padding: 5px;
-       margin-top:12px;
-       margin-bottom:12px;
-       border: none;
-}
-       
-/*     Figure titles are centered and bolded   */
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
-       text-align: center;
-       font-weight: bold;
-}
-
-/*     Red background and white text for things that need fixing before release        */
-.fix   {
-       background-color: red;
-       font-weight: bold;
-       color: white;
-       }
-
-/* Classes for creating collapsible content */
-#banner {
-       padding: 8px 4px 8px 4px;
-       /* top right bottom left */
-       border: 1px solid #7f7f7f;
-       width: 100%;
-       background-image: url("banner.png");
-       text-align: left;
-       font-weight: bold;
-       font-size: 9pt;
-       color: #ffffff;
-}
-
-#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
-#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
-#main {width: 75%; height: 90%;}
-#container {width:100%;}
-#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
-body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #toc-navigation {width: auto;}
-body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
-body.no-toc #profile {float: right;right: -32px;}
-body.no-toc #profile p {padding: 0; margin: 0;}
-#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
-       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
-       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
-
-.devicespecs-util {float:right; margin-top:25px;}
-       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
-       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
-       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
-       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
-       .devicespecs-util ul.dutil li a:hover { color:#222; }
-       .devicespecs-util ul.dutil li a:active { color:#222; }
-
-ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
-ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
-ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
-ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
-       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
-
-       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
-       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
-
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
-
-.static-cont {width:100%; margin-bottom:40px;}
-       
-.top {text-align: right;}
-.toc, ul.toc{
-       margin: 10px 0px 0px 0px;
-       padding-left: 13px;
-       list-style: disc;
-       font-size: 9pt;
-       line-height: 115%; 
-       }
-       
-.toc-title {
-       font-size: 12pt;
-       color: #0E437D; 
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-       
-a.top {
-       display:block; 
-       float: right; 
-       position:fixed;
-       width: 28px; 
-       height:89px; 
-       bottom:50px;
-       z-index: 101;
-       right: 19%;
-       }
-
-a img {border: 0;}
-       
-/*     Footer includes space and a gray line above             */
-#footer {
-       position: fixed;
-       /* width: 100%; */
-    bottom: 0px;
-       text-align: center;
-       border-top: 1px solid #CCCCCC;
-       background-color: #FFFFFF;      
-       left: 21px;  right: 21px;
-}
-
-.footer {font-size: 8pt;}
-       
-caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: center;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-div.qindex, div.navpath, div.navtab{
-       background-color: #e8eef2;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       padding: 2px;
-}
-
-div.qindex, div.navpath {
-       width: 100%;
-       line-height: 140%;
-}
-
-div.navtab {
-       margin-right: 15px;
-}
-
-/* @group Link Styling */
-
-a:link {
-       color: #719cc7;
-       text-decoration: underline;
-       font-weight: bold;
-}
-
-a:hover { 
-       color: #0e437d;
-}
-
-a:visited {
-       text-decoration: underline;
-       color: #719cc7;
-       font-weight: bold;
-}
-
-a.qindex {
-       font-weight: bold;
-       padding: 2px;
-}
-
-a.qindex:hover {
-       text-decoration: underline;
-       color: #0e437d;
-       padding: 2px;
-}
-
-a.qindex:visited {
-       text-decoration: underline;
-       font-weight: bold;
-       color: #719cc7;
-       padding: 2px;
-}
-
-a.qindexHL {
-       text-decoration: underline;
-       font-weight: bold;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-       border: 1px double #9295C2;
-}
-
-a.qindexHL:hover {
-       text-decoration: none;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-}
-
-dl.el { 
-       margin-left: -1cm 
-}
-
-.fragment {
-       font-family: monospace, fixed;
-       font-size: 105%;
-}
-
-pre.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 4px 6px;
-       margin: 4px 8px 4px 2px;
-}
-
-div.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 6px;
-}
-
-div.ah { 
-       background-color: black; 
-       font-weight: bold; 
-       color: #ffffff; 
-       margin-bottom: 3px; 
-       margin-top: 3px 
-}
-
-td.md { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-}
-
-td.mdname1 { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-}
-
-td.mdname { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-       width: 600px; 
-}
-
-div.groupHeader {
-       margin-left: 16px;
-       margin-top: 12px;
-       margin-bottom: 6px;
-       font-weight: bold;
-}
-
-div.groupText { 
-       margin-left: 16px; 
-       font-style: italic; 
-}
-
-td.indexkey {
-       background-color: #eeeeff;
-       font-weight: bold;
-       border: 1px solid #CCCCCC;
-       margin: 2px 0px 2px 0;
-       padding: 2px 10px;
-}
-
-td.indexvalue {
-       background-color: #eeeeff;
-       border: 1px solid #CCCCCC;
-       padding: 2px 10px;
-       margin: 2px 0px;
-}
-
-tr.memlist {
-   background-color: #f0f0f0; 
-}
-
-p.formulaDsp { 
-       text-align: center; 
-}
-
-img.formulaDsp { 
-}
-
-img.formulaInl { 
-       vertical-align: middle; 
-}
-
-/* @group Code Colorization */
-
-span.keyword       { color: #008000 }
-span.keywordtype   { color: #604020 }
-span.keywordflow   { color: #e08000 }
-span.comment       { color: #800000 }
-span.preprocessor  { color: #806020 }
-span.stringliteral { color: #002080 }
-span.charliteral   { color: #008080 }
-span.vhdldigit     { color: #ff00ff }
-span.vhdlchar      { color: #000000 }
-span.vhdlkeyword   { color: #700070 }
-span.vhdllogic     { color: #ff0000 }
-
-.mdTable {
-       border: 1px solid #868686;
-       background-color: #F4F4FB;
-}
-
-.mdRow {
-       padding: 8px 10px;
-}
-
-/* @group Member Descriptions */
-
-.mdescLeft, .mdescRight,
-.memItemLeft, .memItemRight,
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-       background-color: #F4F4F4A;
-       border: none;
-       margin: 4px;
-       padding: 3px 8px 4px 8px;
-}
-
-.mdescLeft, .mdescRight {
-       padding: 0px 8px 4px 8px;
-       color: #555;
-}
-
-.memItemLeft, .memItemRight, .memTemplParams {
-       border-top: 1px solid #DBDBDB;
-}
-
-.memTemplParams {
-       color: #606060;
-}
-
-/* @end */
-
-/* @group Member Details */
-
-/* Styles for detailed member documentation */
-
-.memtemplate {
-       font-size: 80%;
-       color: #606060;
-       font-weight: normal;
-       margin-left: 3px;
-}
-
-.memnav {
-       background-color: #eeeeff;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       margin-right: 15px;
-       padding: 2px;
-}
-
-.memitem {
-       padding: 0;
-}
-
-.memname {
-       white-space: nowrap;
-       font-weight: bold;
-}
-
-.memproto, .memdoc {
-       border: 1px solid #9BBCDD;      
-}
-
-.memproto {
-       padding: 0;
-       background-color: #D5E2EF;
-       font-weight: bold;
-       -webkit-border-top-left-radius: 8px;
-       -webkit-border-top-right-radius: 8px;
-       -moz-border-radius-topleft: 8px;
-       -moz-border-radius-topright: 8px;
-}
-
-.memdoc {
-       padding: 2px 5px;
-       background-color: #eef3f5;
-       border-top-width: 0;
-       -webkit-border-bottom-left-radius: 8px;
-       -webkit-border-bottom-right-radius: 8px;
-       -moz-border-radius-bottomleft: 8px;
-       -moz-border-radius-bottomright: 8px;
-}
-
-.memdoc p, .memdoc dl, .memdoc ul {
-       margin: 6px 0;
-}
-
-.paramkey {
-       text-align: right;
-}
-
-.paramtype {
-       white-space: nowrap;
-}
-
-.paramname {
-       color: #853E0E;
-       white-space: nowrap;
-}
-.paramname em {
-       font-style: normal;
-}
-
-/* @end */
-
-.search     { color: #003399;
-              font-weight: bold;
-}
-
-form.search {
-              margin-bottom: 0px;
-              margin-top: 0px;
-}
-
-input.search { font-size: 75%;
-               color: #000080;
-               font-weight: normal;
-               background-color: #eeeeff;
-}
-
-td.tiny { 
-       font-size: 75%;
-}
-
-.highlight {
-        background-color:#E2E2FF;
-}
-
-/*---------- ide-eclipse Styles ---------*/
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
-       margin: 0px 0px;
-       padding: -30px -30px -30px -30px;
-       font-weight: normal;
-       font-style: normal;}
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
-
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
-
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
-.sh_styleFromXML{color:#800000;font-weight:bold;}
-/*-------------------------------------------------------*/
-
-/*-------- Snippet Base Styles ----------*/
-.snippet-wrap {position:relative;}
-*:first-child+html .snippet-wrap {display:inline-block;}
-* html .snippet-wrap {display:inline-block;}
-.snippet-reveal{text-decoration:underline;}
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
-* html .snippet-wrap .snippet-hide {bottom:1px;}
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
--moz-border-radius:0px;
--webkit-border-radius:0px;
-border-radius:0px;
-box-shadow: 1px 1px px #000;
--moz-box-shadow: 2px 2px 1px #000;
--webkit-box-shadow: 1px 1px 1px #000;}
-.snippet-wrap pre.snippet-textonly {padding:1em;}
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
-.snippet-wrap .snippet-num li{padding-left:2px;}
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
-.snippet-wrap li.box-mid {border-width:0 0px !important;}
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}
-
-/* Layout fixing */
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-.clfix {display: inline-block;}
-.clfix {display: block;}
-* html .clfix {height: 1%;} /* Hides from IE-mac */
-.clfix {zoom:1;} /*for IE 5.5-7*/
-
-.fl {float:left !important;}
-.fr {float:right !important;}
-.cl {clear:both;}
-.rel {position:relative;}
-.abs {position:absolute;}
-.ac {text-align:center !important;}
-.ar {text-align:right !important;}
-.al {text-align:left !important;}
-.at {vertical-align:top !important;}
-.am {vertical-align:middle !important;}
-.ab {vertical-align:bottom;}
-.hand {cursor:pointer;}
-.bgnone {background:none !important;}
-.brnone {border:none !important;}
-.b {font-weight:bold !important;}
-.n {font-weight:normal !important;}
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
-.mt5 {margin-top:5px !important;} 
-/* //Layout fixing */
-
-@media print { .hide, .show { display: none; }}
-
-div#profile {
-    position: relative;
-}
-#profile p {
-       text-align: right;
-}
-
-div#toc_border {
-    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
-}
-
-#contents li {
-       padding-top: 3px;
-       margin-top: 5px;
-       /* overflow: auto; */
-}
-
-p {
-       /* overflow: auto; */
-}
-
-div.table {
-       /* overflow: auto; */
+@charset "utf-8";\r
+\r
+body {\r
+       background: white;\r
+       color: #1C1C1C;\r
+       margin-right: 20px;\r
+       margin-left: 20px;\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       font-family: Arial, Helvetica, sans-serif;\r
+}\r
+\r
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {\r
+       font-family: Arial, Verdana, Helvetica, sans-serif\r
+       }\r
+\r
+/*     Set default font to 9 pt        */\r
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {\r
+       font-size: 9pt;\r
+}\r
+       \r
+pre, code { \r
+       font-family: "Courier New", Courier, monospace;\r
+       border: 1px solid #719cc7;\r
+       margin: 6px 1.5px;\r
+       padding: 1px 1px 1px 1px;\r
+       font-weight: normal;\r
+       font-style: normal;\r
+}\r
+\r
+h1 {font-size: 24pt; color: #0E437D;}\r
+h2 {font-size: 18pt; color: #0E437D;}\r
+h3 {font-size: 14pt; color: #1C1C1C;}\r
+h4 {font-size: 12pt; color: #1C1C1C;}\r
+h5 {font-size: 10pt; color: #1C1C1C;}\r
+       \r
+h1, h2, h3, h4, h5 {\r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+\r
+caption, p.caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: left;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+ol  {\r
+       margin-bottom: 20px;\r
+}\r
+\r
+ul ul , ol ul, ul ol, ol ol{\r
+       margin-top: 10px;\r
+}\r
+\r
+ul li, ol li {\r
+       margin-bottom: 10px;\r
+}\r
+\r
+ol.tutorstep li {\r
+       border-top: 2px solid #719cc7;\r
+       list-style-position: inside;\r
+       font-weight: bold;\r
+       margin-top: 30px;\r
+       margin-left: -20px;\r
+       padding-top: 3px;\r
+       font-size: 12pt;\r
+}\r
+\r
+ol.tutorstep li p{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-top: 10px;\r
+}\r
+\r
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {\r
+       font-size: 9pt;\r
+       list-style-position: outside; \r
+       margin-left: 0px;\r
+       font-weight: normal;\r
+}\r
+\r
+ol.tutorstep ol li p, ol.tutorstep ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal; \r
+       margin-top: 5px;\r
+}\r
+\r
+ol li p, ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-bottom: 2px;\r
+       margin-top: 2px;\r
+}\r
+\r
+ol ol , ol.tutorstep ol{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       list-style-type: lower-alpha;\r
+       color: #1C1C1C; \r
+       border-style: none;\r
+       margin-top: 10px; \r
+}\r
+\r
+ol.tutorstep ul {\r
+       margin-top: 10px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {\r
+       border-style: none;\r
+       margin-top: 5px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ul {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       color: #1C1C1C;\r
+}\r
+\r
+\r
+/*     End of font face declarations   */\r
+\r
+/*     Set table borders and heading row background    */\r
+table {\r
+       border: 0px;\r
+       border-collapse: collapse;\r
+       width: 100%;\r
+       margin-top: 20px;\r
+       margin-bottom: 20px;\r
+       background: white;\r
+}\r
+\r
+th {\r
+       border-top: 2px solid #719cc7;\r
+       border-right: 1px solid #c6d9f1;\r
+       border-left: 1px solid #c6d9f1;\r
+       background-color: #f3f7fb;\r
+       padding: 4px;\r
+       color: #719cc7;\r
+       font-size: 9pt;\r
+       font-weight: bold;\r
+}      \r
+       \r
+td {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:top;\r
+       padding: 3px 20px 5px 20px;\r
+       }\r
+\r
+td.middle {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:middle;\r
+       padding: 3px 20px 5px 20px;\r
+       }       \r
+       \r
+/*     Notes stand out using a light top & bottom borders with yellow background       */\r
+table.note {\r
+       border-top: 2px solid #719cc7;\r
+       border-left: 0px;\r
+       border-right: 0px;\r
+       width: 100%;\r
+}\r
+\r
+tr.note {\r
+       text-align: left;\r
+}\r
+\r
+th.note {\r
+       text-align: left;\r
+       background-color: #ddd9c3;\r
+       background-image: note.gif;\r
+       border-top: 2px solid #719cc7;\r
+       border-bottom:1px solid #719cc7;\r
+       border-right: none;\r
+\r
+}\r
+\r
+td.note, p.note {\r
+       background-color: #eeece1;\r
+       color: #1C1C1C;\r
+       padding: 5px;\r
+       margin-top:12px;\r
+       margin-bottom:12px;\r
+       border: none;\r
+}\r
+       \r
+/*     Figure titles are centered and bolded   */\r
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {\r
+       text-align: center;\r
+       font-weight: bold;\r
+}\r
+\r
+/*     Red background and white text for things that need fixing before release        */\r
+.fix   {\r
+       background-color: red;\r
+       font-weight: bold;\r
+       color: white;\r
+       }\r
+\r
+/* Classes for creating collapsible content */\r
+#banner {\r
+       padding: 8px 4px 8px 4px;\r
+       /* top right bottom left */\r
+       border: 1px solid #7f7f7f;\r
+       width: 100%;\r
+       background-image: url("banner.png");\r
+       text-align: left;\r
+       font-weight: bold;\r
+       font-size: 9pt;\r
+       color: #ffffff;\r
+}\r
+\r
+#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}\r
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}\r
+#main {width: 75%; height: 90%;}\r
+#container {width:100%;}\r
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}\r
+body.no-toc #container #contents {right: 0;padding-right:30px;}\r
+body.no-toc #toc-navigation {width: auto;}\r
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}\r
+body.no-toc #profile {float: right;right: -32px;}\r
+body.no-toc #profile p {padding: 0; margin: 0;}\r
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}\r
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}\r
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }\r
+\r
+.devicespecs-util {float:right; margin-top:25px;}\r
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}\r
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}\r
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}\r
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}\r
+       .devicespecs-util ul.dutil li a:hover { color:#222; }\r
+       .devicespecs-util ul.dutil li a:active { color:#222; }\r
+\r
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}\r
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}\r
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}\r
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}\r
+       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}\r
+\r
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }\r
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }\r
+\r
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}\r
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}\r
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}\r
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}\r
+\r
+.static-cont {width:100%; margin-bottom:40px;}\r
+       \r
+.top {text-align: right;}\r
+.toc, ul.toc{\r
+       margin: 10px 0px 0px 0px;\r
+       padding-left: 13px;\r
+       list-style: disc;\r
+       font-size: 9pt;\r
+       line-height: 115%; \r
+       }\r
+       \r
+.toc-title {\r
+       font-size: 12pt;\r
+       color: #0E437D; \r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+       \r
+a.top {\r
+       display:block; \r
+       float: right; \r
+       position:fixed;\r
+       width: 28px; \r
+       height:89px; \r
+       bottom:50px;\r
+       z-index: 101;\r
+       right: 19%;\r
+       }\r
+\r
+a img {border: 0;}\r
+       \r
+/*     Footer includes space and a gray line above             */\r
+#footer {\r
+       position: fixed;\r
+       /* width: 100%; */\r
+    bottom: 0px;\r
+       text-align: center;\r
+       border-top: 1px solid #CCCCCC;\r
+       background-color: #FFFFFF;      \r
+       left: 21px;  right: 21px;\r
+}\r
+\r
+.footer {font-size: 8pt;}\r
+       \r
+caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: center;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+div.qindex, div.navpath, div.navtab{\r
+       background-color: #e8eef2;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       padding: 2px;\r
+}\r
+\r
+div.qindex, div.navpath {\r
+       width: 100%;\r
+       line-height: 140%;\r
+}\r
+\r
+div.navtab {\r
+       margin-right: 15px;\r
+}\r
+\r
+/* @group Link Styling */\r
+\r
+a:link {\r
+       color: #719cc7;\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+}\r
+\r
+a:hover { \r
+       color: #0e437d;\r
+}\r
+\r
+a:visited {\r
+       text-decoration: underline;\r
+       color: #719cc7;\r
+       font-weight: bold;\r
+}\r
+\r
+a.qindex {\r
+       font-weight: bold;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:hover {\r
+       text-decoration: underline;\r
+       color: #0e437d;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:visited {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       color: #719cc7;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindexHL {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+       border: 1px double #9295C2;\r
+}\r
+\r
+a.qindexHL:hover {\r
+       text-decoration: none;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+}\r
+\r
+dl.el { \r
+       margin-left: -1cm \r
+}\r
+\r
+.fragment {\r
+       font-family: monospace, fixed;\r
+       font-size: 105%;\r
+}\r
+\r
+pre.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 4px 6px;\r
+       margin: 4px 8px 4px 2px;\r
+}\r
+\r
+div.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 6px;\r
+}\r
+\r
+div.ah { \r
+       background-color: black; \r
+       font-weight: bold; \r
+       color: #ffffff; \r
+       margin-bottom: 3px; \r
+       margin-top: 3px \r
+}\r
+\r
+td.md { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+}\r
+\r
+td.mdname1 { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+}\r
+\r
+td.mdname { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+       width: 600px; \r
+}\r
+\r
+div.groupHeader {\r
+       margin-left: 16px;\r
+       margin-top: 12px;\r
+       margin-bottom: 6px;\r
+       font-weight: bold;\r
+}\r
+\r
+div.groupText { \r
+       margin-left: 16px; \r
+       font-style: italic; \r
+}\r
+\r
+td.indexkey {\r
+       background-color: #eeeeff;\r
+       font-weight: bold;\r
+       border: 1px solid #CCCCCC;\r
+       margin: 2px 0px 2px 0;\r
+       padding: 2px 10px;\r
+}\r
+\r
+td.indexvalue {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #CCCCCC;\r
+       padding: 2px 10px;\r
+       margin: 2px 0px;\r
+}\r
+\r
+tr.memlist {\r
+   background-color: #f0f0f0; \r
+}\r
+\r
+p.formulaDsp { \r
+       text-align: center; \r
+}\r
+\r
+img.formulaDsp { \r
+}\r
+\r
+img.formulaInl { \r
+       vertical-align: middle; \r
+}\r
+\r
+/* @group Code Colorization */\r
+\r
+span.keyword       { color: #008000 }\r
+span.keywordtype   { color: #604020 }\r
+span.keywordflow   { color: #e08000 }\r
+span.comment       { color: #800000 }\r
+span.preprocessor  { color: #806020 }\r
+span.stringliteral { color: #002080 }\r
+span.charliteral   { color: #008080 }\r
+span.vhdldigit     { color: #ff00ff }\r
+span.vhdlchar      { color: #000000 }\r
+span.vhdlkeyword   { color: #700070 }\r
+span.vhdllogic     { color: #ff0000 }\r
+\r
+.mdTable {\r
+       border: 1px solid #868686;\r
+       background-color: #F4F4FB;\r
+}\r
+\r
+.mdRow {\r
+       padding: 8px 10px;\r
+}\r
+\r
+/* @group Member Descriptions */\r
+\r
+.mdescLeft, .mdescRight,\r
+.memItemLeft, .memItemRight,\r
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {\r
+       background-color: #F4F4F4A;\r
+       border: none;\r
+       margin: 4px;\r
+       padding: 3px 8px 4px 8px;\r
+}\r
+\r
+.mdescLeft, .mdescRight {\r
+       padding: 0px 8px 4px 8px;\r
+       color: #555;\r
+}\r
+\r
+.memItemLeft, .memItemRight, .memTemplParams {\r
+       border-top: 1px solid #DBDBDB;\r
+}\r
+\r
+.memTemplParams {\r
+       color: #606060;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group Member Details */\r
+\r
+/* Styles for detailed member documentation */\r
+\r
+.memtemplate {\r
+       font-size: 80%;\r
+       color: #606060;\r
+       font-weight: normal;\r
+       margin-left: 3px;\r
+}\r
+\r
+.memnav {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       margin-right: 15px;\r
+       padding: 2px;\r
+}\r
+\r
+.memitem {\r
+       padding: 0;\r
+}\r
+\r
+.memname {\r
+       white-space: nowrap;\r
+       font-weight: bold;\r
+}\r
+\r
+.memproto, .memdoc {\r
+       border: 1px solid #9BBCDD;      \r
+}\r
+\r
+.memproto {\r
+       padding: 0;\r
+       background-color: #D5E2EF;\r
+       font-weight: bold;\r
+       -webkit-border-top-left-radius: 8px;\r
+       -webkit-border-top-right-radius: 8px;\r
+       -moz-border-radius-topleft: 8px;\r
+       -moz-border-radius-topright: 8px;\r
+}\r
+\r
+.memdoc {\r
+       padding: 2px 5px;\r
+       background-color: #eef3f5;\r
+       border-top-width: 0;\r
+       -webkit-border-bottom-left-radius: 8px;\r
+       -webkit-border-bottom-right-radius: 8px;\r
+       -moz-border-radius-bottomleft: 8px;\r
+       -moz-border-radius-bottomright: 8px;\r
+}\r
+\r
+.memdoc p, .memdoc dl, .memdoc ul {\r
+       margin: 6px 0;\r
+}\r
+\r
+.paramkey {\r
+       text-align: right;\r
+}\r
+\r
+.paramtype {\r
+       white-space: nowrap;\r
+}\r
+\r
+.paramname {\r
+       color: #853E0E;\r
+       white-space: nowrap;\r
+}\r
+.paramname em {\r
+       font-style: normal;\r
+}\r
+\r
+/* @end */\r
+\r
+.search     { color: #003399;\r
+              font-weight: bold;\r
+}\r
+\r
+form.search {\r
+              margin-bottom: 0px;\r
+              margin-top: 0px;\r
+}\r
+\r
+input.search { font-size: 75%;\r
+               color: #000080;\r
+               font-weight: normal;\r
+               background-color: #eeeeff;\r
+}\r
+\r
+td.tiny { \r
+       font-size: 75%;\r
+}\r
+\r
+.highlight {\r
+        background-color:#E2E2FF;\r
+}\r
+\r
+/*---------- ide-eclipse Styles ---------*/\r
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;\r
+       margin: 0px 0px;\r
+       padding: -30px -30px -30px -30px;\r
+       font-weight: normal;\r
+       font-style: normal;}\r
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}\r
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/\r
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}\r
+\r
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}\r
+\r
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/\r
+.sh_styleFromXML{color:#800000;font-weight:bold;}\r
+/*-------------------------------------------------------*/\r
+\r
+/*-------- Snippet Base Styles ----------*/\r
+.snippet-wrap {position:relative;}\r
+*:first-child+html .snippet-wrap {display:inline-block;}\r
+* html .snippet-wrap {display:inline-block;}\r
+.snippet-reveal{text-decoration:underline;}\r
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}\r
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}\r
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}\r
+* html .snippet-wrap .snippet-hide {bottom:1px;}\r
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}\r
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}\r
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;\r
+-moz-border-radius:0px;\r
+-webkit-border-radius:0px;\r
+border-radius:0px;\r
+box-shadow: 1px 1px px #000;\r
+-moz-box-shadow: 2px 2px 1px #000;\r
+-webkit-box-shadow: 1px 1px 1px #000;}\r
+.snippet-wrap pre.snippet-textonly {padding:1em;}\r
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}\r
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}\r
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}\r
+.snippet-wrap .snippet-num li{padding-left:2px;}\r
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}\r
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}\r
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}\r
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}\r
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}\r
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}\r
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}\r
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}\r
+.snippet-wrap li.box-mid {border-width:0 0px !important;}\r
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}\r
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}\r
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}\r
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}\r
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}\r
+\r
+/* Layout fixing */\r
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+.clfix {display: inline-block;}\r
+.clfix {display: block;}\r
+* html .clfix {height: 1%;} /* Hides from IE-mac */\r
+.clfix {zoom:1;} /*for IE 5.5-7*/\r
+\r
+.fl {float:left !important;}\r
+.fr {float:right !important;}\r
+.cl {clear:both;}\r
+.rel {position:relative;}\r
+.abs {position:absolute;}\r
+.ac {text-align:center !important;}\r
+.ar {text-align:right !important;}\r
+.al {text-align:left !important;}\r
+.at {vertical-align:top !important;}\r
+.am {vertical-align:middle !important;}\r
+.ab {vertical-align:bottom;}\r
+.hand {cursor:pointer;}\r
+.bgnone {background:none !important;}\r
+.brnone {border:none !important;}\r
+.b {font-weight:bold !important;}\r
+.n {font-weight:normal !important;}\r
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}\r
+.mt5 {margin-top:5px !important;} \r
+/* //Layout fixing */\r
+\r
+@media print { .hide, .show { display: none; }}\r
+\r
+div#profile {\r
+    position: relative;\r
+}\r
+#profile p {\r
+       text-align: right;\r
+}\r
+\r
+div#toc_border {\r
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;\r
+}\r
+\r
+#contents li {\r
+       padding-top: 3px;\r
+       margin-top: 5px;\r
+       /* overflow: auto; */\r
+}\r
+\r
+p {\r
+       /* overflow: auto; */\r
+}\r
+\r
+div.table {\r
+       /* overflow: auto; */\r
 }
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/images/DigitalWatch_sd1.png b/org.tizen.sampledescriptions/html/images/DigitalWatch_sd1.png
deleted file mode 100644 (file)
index a35c9da..0000000
Binary files a/org.tizen.sampledescriptions/html/images/DigitalWatch_sd1.png and /dev/null differ
diff --git a/org.tizen.sampledescriptions/html/images/DigitalWatch_sd2.png b/org.tizen.sampledescriptions/html/images/DigitalWatch_sd2.png
deleted file mode 100644 (file)
index 0f073cd..0000000
Binary files a/org.tizen.sampledescriptions/html/images/DigitalWatch_sd2.png and /dev/null differ
diff --git a/org.tizen.sampledescriptions/html/images/analog_watch_sd_wn.png b/org.tizen.sampledescriptions/html/images/analog_watch_sd_wn.png
new file mode 100644 (file)
index 0000000..55e53fe
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/analog_watch_sd_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/analog_watch_tree_sd_wn.png b/org.tizen.sampledescriptions/html/images/analog_watch_tree_sd_wn.png
new file mode 100644 (file)
index 0000000..58bd40b
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/analog_watch_tree_sd_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/appcalleecaller_mw.png b/org.tizen.sampledescriptions/html/images/appcalleecaller_mw.png
deleted file mode 100644 (file)
index 3ebc9a6..0000000
Binary files a/org.tizen.sampledescriptions/html/images/appcalleecaller_mw.png and /dev/null differ
diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_circle_sd.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_circle_sd.png
new file mode 100644 (file)
index 0000000..f66c4d3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_circle_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/images/cairo_basic.png b/org.tizen.sampledescriptions/html/images/cairo_basic.png
new file mode 100644 (file)
index 0000000..d7f49bf
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/cairo_basic.png differ
diff --git a/org.tizen.sampledescriptions/html/images/cairo_basic_circular.png b/org.tizen.sampledescriptions/html/images/cairo_basic_circular.png
new file mode 100644 (file)
index 0000000..6af469a
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/cairo_basic_circular.png differ
diff --git a/org.tizen.sampledescriptions/html/images/cairo_evasgl.png b/org.tizen.sampledescriptions/html/images/cairo_evasgl.png
new file mode 100644 (file)
index 0000000..1061df2
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/cairo_evasgl.png differ
diff --git a/org.tizen.sampledescriptions/html/images/cairo_evasgl_circular.png b/org.tizen.sampledescriptions/html/images/cairo_evasgl_circular.png
new file mode 100644 (file)
index 0000000..635568f
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/cairo_evasgl_circular.png differ
diff --git a/org.tizen.sampledescriptions/html/images/digital_watch_sd_wn.png b/org.tizen.sampledescriptions/html/images/digital_watch_sd_wn.png
new file mode 100644 (file)
index 0000000..9b6cfed
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/digital_watch_sd_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/evas_gl_sd_wn.png b/org.tizen.sampledescriptions/html/images/evas_gl_sd_wn.png
new file mode 100644 (file)
index 0000000..a182c00
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/evas_gl_sd_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/fmradio_sd_mw.png b/org.tizen.sampledescriptions/html/images/fmradio_sd_mw.png
new file mode 100644 (file)
index 0000000..ebb10b9
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/fmradio_sd_mw.png differ
diff --git a/org.tizen.sampledescriptions/html/images/glview11_cube_wn.png b/org.tizen.sampledescriptions/html/images/glview11_cube_wn.png
new file mode 100644 (file)
index 0000000..8fd51cd
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/glview11_cube_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/glview_cube_wn.png b/org.tizen.sampledescriptions/html/images/glview_cube_wn.png
new file mode 100644 (file)
index 0000000..e1f0c09
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/glview_cube_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/glview_shader_wn.png b/org.tizen.sampledescriptions/html/images/glview_shader_wn.png
new file mode 100644 (file)
index 0000000..5e03811
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/glview_shader_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/lockscreen_ui_diagram.png b/org.tizen.sampledescriptions/html/images/lockscreen_ui_diagram.png
new file mode 100644 (file)
index 0000000..07888d9
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/lockscreen_ui_diagram.png differ
diff --git a/org.tizen.sampledescriptions/html/images/screen_locked.png b/org.tizen.sampledescriptions/html/images/screen_locked.png
new file mode 100644 (file)
index 0000000..e4ef202
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/screen_locked.png differ
diff --git a/org.tizen.sampledescriptions/html/images/screen_unlock_1.png b/org.tizen.sampledescriptions/html/images/screen_unlock_1.png
new file mode 100644 (file)
index 0000000..1ec26e6
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/screen_unlock_1.png differ
diff --git a/org.tizen.sampledescriptions/html/images/screen_unlock_2.png b/org.tizen.sampledescriptions/html/images/screen_unlock_2.png
new file mode 100644 (file)
index 0000000..bac01d3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/screen_unlock_2.png differ
diff --git a/org.tizen.sampledescriptions/html/images/screen_unlocked.png b/org.tizen.sampledescriptions/html/images/screen_unlocked.png
new file mode 100644 (file)
index 0000000..f8c6799
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/screen_unlocked.png differ
diff --git a/org.tizen.sampledescriptions/html/images/soundmanager_sd_mw.png b/org.tizen.sampledescriptions/html/images/soundmanager_sd_mw.png
new file mode 100644 (file)
index 0000000..9077ea2
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/soundmanager_sd_mw.png differ
diff --git a/org.tizen.sampledescriptions/html/images/volume_sample_screenshot.png b/org.tizen.sampledescriptions/html/images/volume_sample_screenshot.png
new file mode 100644 (file)
index 0000000..6a2e85c
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/volume_sample_screenshot.png differ
diff --git a/org.tizen.sampledescriptions/html/images/widget_application_sd.png b/org.tizen.sampledescriptions/html/images/widget_application_sd.png
new file mode 100644 (file)
index 0000000..700389f
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/widget_application_sd.png differ
diff --git a/org.tizen.sampledescriptions/html/index.htm b/org.tizen.sampledescriptions/html/index.htm
index 5cdd220..75a457d 100644 (file)
--- a/org.tizen.sampledescriptions/html/index.htm
+++ b/org.tizen.sampledescriptions/html/index.htm
@@ -26,7 +26,6 @@
        <ul>
                <li><a href="mobile_w/sd_mw.htm">Mobile Web</a>
                <ul>
-                       <li><a href="mobile_w/appcalleecaller_mw.htm">AppCaller and AppCallee</a></li>
                        <li><a href="mobile_w/archivemanager_mw.htm">ArchiveManager</a></li>
                        <li><a href="mobile_w/bluetoothchat_mw.htm">BluetoothChat</a></li>
                        <li><a href="mobile_w/calculator_mw.htm">Calculator</a></li>
@@ -40,6 +39,7 @@
                        <li><a href="mobile_w/eventmanager_mw.htm">EventManager</a></li>
                        <li><a href="mobile_w/exerciseplanner_mw.htm">ExcercisePlanner</a></li>
                        <li><a href="mobile_w/filemanager_mw.htm">FileManager</a></li>
+                       <li><a href="mobile_w/fmradio_mw.htm">FMRadio</a></li>
                        <li><a href="mobile_w/hellotizen_mw.htm">HelloTizen</a></li>
                        <li><a href="mobile_w/mediacontent_mw.htm">MediaContent</a></li>
                        <li><a href="mobile_w/moneybook_mw.htm">MoneyBook</a></li>
@@ -50,6 +50,7 @@
                        <li><a href="mobile_w/piano_mw.htm">Piano</a></li>
                        <li><a href="mobile_w/selfcamera_mw.htm">SelfCamera</a></li>
                        <li><a href="mobile_w/sensorball_mw.htm">SensorBall</a></li>
+                       <li><a href="mobile_w/soundmanager_mw.htm">SoundManager</a></li>
                        <li><a href="mobile_w/systeminfo_mw.htm">Systeminfo</a></li>
                        <li><a href="mobile_w/winset_mw.htm">TizenWinset</a></li>
                        <li><a href="mobile_w/touchpaint_mw.htm">TouchPaint</a></li>            
@@ -87,6 +88,8 @@
                <li><a href="mobile_n/sd_mn.htm">Mobile Native</a>
                <ul>
                        <li><a href="mobile_n/bundle_sd_mn.htm">Bundle</a></li>
+                       <li><a href="mobile_n/cairo_basic_sd_mn.htm">Cairo Basic</a></li>
+                       <li><a href="mobile_n/cairo_evasgl_sd_mn.htm">Cairo EvasGL</a></li>
                        <li><a href="mobile_n/calculator_sd_mn.htm">Calculator</a></li>
                        <li><a href="mobile_n/contacts_sd_mn.htm">Contacts</a></li>
                        <li><a href="mobile_n/evas_gl_sd_mn.htm">Evas_GL</a></li>
@@ -97,6 +100,7 @@
                        <li><a href="mobile_n/gps_consumer_sd_mn.htm">GPS Consumer</a></li>
                        <li><a href="mobile_n/gps_service_sd_mn.htm">GPS Service</a></li>
                        <li><a href="mobile_n/hybridservice_sd_mn.htm">HybridServiceApp</a></li>
+                       <li><a href="mobile_n/lockscreen_sd_mn.htm">Lockscreen</a></li>
                        <li><a href="mobile_n/mediaapp_sd_mn.htm">Media App</a></li>
                        <li><a href="mobile_n/notificationmanager_sd_mn.htm">Notification Manager</a></li>
                        <li><a href="mobile_n/paint_sd_mn.htm">Paint</a></li>
@@ -110,6 +114,7 @@
                        <li><a href="mobile_n/simple_home_sd_mn.htm">Simple Homescreen</a></li>
                        <li><a href="mobile_n/taskmanager_sd_mn.htm">Taskmanager</a></li>
                        <li><a href="mobile_n/ui_components_sd_mn.htm">UI Components</a></li>
+                       <li><a href="mobile_n/volume_sd_mn.htm">Volume</a></li>                 
                        <li><a href="mobile_n/ui_alignment_sd_mn.htm">[UI Sample] Alignment</a></li>
                        <li><a href="mobile_n/ui_animation_sd_mn.htm">[UI Sample] Animation</a></li>
                        <li><a href="mobile_n/ui_animator_sd_mn.htm">[UI Sample] Animator</a></li>
@@ -155,12 +160,22 @@
                <ul>    
                        <li><a href="wearable_n/circleuicomponents_sd_wn.htm">(Circle) UI Components</a></li>
                        <li><a href="wearable_n/rectuicomponents_sd_wn.htm">(Rectangle) UI Components</a></li>
+                       <li><a href="wearable_n/bluetoothchat_sd_wn.htm">(Circle) Bluetooth Chat</a></li>
+                       <li><a href="wearable_n/cairo_basic_sd_wn.htm">(Circle) Cairo Basic</a></li>
+                       <li><a href="wearable_n/cairo_evasgl_sd_wn.htm">(Circle) Cairo EvasGL</a></li>
                        <li><a href="wearable_n/circleemail_sd_wn.htm">(Circle) Email</a></li>
                        <li><a href="wearable_n/circlesettingtime_sd_wn.htm">(Circle) Setting Time</a></li>
                        <li><a href="wearable_n/circlesettings_sd_wn.htm">(Circle) Settings</a></li>
                        <li><a href="wearable_n/rectemail_sd_wn.htm">(Rectangle) Email</a></li>
                        <li><a href="wearable_n/rectsettings_sd_wn.htm">(Rectangle) Settings</a></li>
                        <li><a href="wearable_n/rectuidialer_sd_wn.htm">(Rectangle) UI Dialer</a></li>
+                       <li><a href="wearable_n/analog_watch_sd_wn.htm">Analog Watch</a></li>
+                       <li><a href="wearable_n/digital_watch_sd_wn.htm">Digital-Watch</a></li>
+                       <li><a href="wearable_n/evas_gl_sd_wn.htm">Evas_GL</a></li>     
+                       <li><a href="wearable_n/glview11_cube_sd_wn.htm">GLView11Cube</a></li>
+                       <li><a href="wearable_n/glview_cube_sd_wn.htm">GLViewCube</a></li>
+                       <li><a href="wearable_n/glview_shader_sd_wn.htm">GLViewShader</a></li>                          
+                       <li><a href="wearable_n/widget_animation_sd_wn.htm">Widget Animation</a></li>
                </ul>
                </li>           
        </ul>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/cairo_basic_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/cairo_basic_sd_mn.htm
new file mode 100644 (file)
index 0000000..8b13090
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/cairo_basic_sd_mn.htm
@@ -0,0 +1,183 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Cairo Basic Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+
+  <h1>Cairo Basic Sample Overview</h1> 
+
+<p>The Cairo Basic sample application demonstrates how to use a Cairo image backend with the Tizen SDK.</p> 
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure illustrates the main screen of the Cairo Basic.</p>
+<p class="figure">Figure: Cairo Basic screen</p>
+<p align="center"><img alt="Cairo Basic rectangular screen" src="../images/cairo_basic.png" /></p>
+  
+ <h2>Implementation</h2>
+ 
+<p>First create a basic application. This provides a basic UI application skeleton which already makes available the window object that can contain the Cairo drawing.</p>
+<ol>
+<li>Include the <span style="font-family: Courier New,Courier,monospace;">&lt;cairo.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;math.h&gt;</span> header files, which are needed for this sample application.
+<pre class="prettyprint">
+#include &lt;cairo.h&gt;
+#include &lt;math.h&gt;
+</pre>
+
+</li>
+<li>You can define the <span style="font-family: Courier New,Courier,monospace;">appdata</span> structure that contains all the pointers to objects to be manipulated.
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;    
+&nbsp;&nbsp;&nbsp;Evas_Object *img;
+&nbsp;&nbsp;&nbsp;cairo_surface_t *surface;
+&nbsp;&nbsp;&nbsp;cairo_t *cairo;
+&nbsp;&nbsp;&nbsp;unsigned char *pixels;
+} appdata_s;
+</pre>
+</li>
+<li>To display the Cairo drawing on the screen, create the <span style="font-family: Courier New,Courier,monospace;">Elm_window</span> and the <span style="font-family: Courier New,Courier,monospace;">Evas_object</span> image.
+<p>When creating the <span style="font-family: Courier New,Courier,monospace;">Elm_window</span>, you can set the name as your PACKAGE name. It is created when you create this project in the Tizen SDK.</p>
+<pre class="prettyprint">
+// Window
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+if (elm_win_wm_rotation_supported_get(ad-&gt;win))
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+}
+evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+evas_object_show(ad-&gt;win);
+
+// Image
+ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));
+evas_object_show(ad-&gt;img);
+</pre>
+
+</li>
+</ol>
+
+<h3>Drawing a Polygon and Rectangle with Cairo</h3>
+<p>To create the Cairo drawing, you need the window size to set the Cairo surface. You can get the window size with the <span style="font-family: Courier New,Courier,monospace;">evas_object_geometry_get()</span> function after the <span style="font-family: Courier New,Courier,monospace;">evas_object_show(ad-&gt;win)</span> function is called.</p>
+<p>To draw Cairo with some specific vector positions, you can use the window size as before.</p>
+<pre class="prettyprint">
+evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;ad-&gt;width, &amp;ad-&gt;height);
+ad-&gt;surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, ad-&gt;width, ad-&gt;height);
+ad-&gt;cairo = cairo_create(ad-&gt;surface);
+</pre>
+<p>In this example, a Cairo image is drawn on a square screen. You can compare the windows width and height and get the smaller length to set the square side.</p>
+<pre class="prettyprint">
+void 
+cairo_drawing(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;int d = 0;
+&nbsp;&nbsp;&nbsp;if(ad-&gt;width &lt; ad-&gt;height)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d = ad-&gt;width;
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d = ad-&gt;height;
+</pre>
+<p>To set the background as white color, set the color as white and paint the Cairo.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Clear background as white
+&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, 1, 1, 1, 1);
+&nbsp;&nbsp;&nbsp;cairo_paint(ad-&gt;cairo);
+</pre>
+
+<p>In the following example, you can draw the polygon and rectangle. You must use the <span style="font-family: Courier New,Courier,monospace;">cairo_surface_flush()</span> function. This function call implements any pending drawings for the surface.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;cairo_translate(ad-&gt;cairo, 0.1 * d, 0.1 * d);
+&nbsp;&nbsp;&nbsp;cairo_set_line_width(ad-&gt;cairo,2);
+&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, 0.0, 0.0, 1.0, 1.0);
+
+&nbsp;&nbsp;&nbsp;cairo_move_to(ad-&gt;cairo, 0.2 * d , 0.2 * d);
+&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, 0.4 * d, 0.3 * d);
+&nbsp;&nbsp;&nbsp;cairo_rel_line_to(ad-&gt;cairo, 0.2 * d, -0.1 * d);
+&nbsp;&nbsp;&nbsp;cairo_arc(ad-&gt;cairo, 0.4 * d, 0.4 * d, 0.2* d * sqrt(2), -0.25 * M_PI, 0.25 * M_PI);
+&nbsp;&nbsp;&nbsp;cairo_rel_curve_to(ad-&gt;cairo, -0.2* d, -0.1 * d, -0.2* d, 0.1 * d, -0.4 * d, 0);
+&nbsp;&nbsp;&nbsp;cairo_close_path(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;cairo_fill(ad-&gt;cairo);
+
+&nbsp;&nbsp;&nbsp;cairo_rectangle(ad-&gt;cairo, 0, 0, 0.8 * d, 0.8 * d);
+&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;cairo_surface_flush(ad-&gt;surface);
+</pre>
+
+<p>To update the Evas object image on the screen:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Display the Cairo drawing on screen
+&nbsp;&nbsp;&nbsp;unsigned char * imageData = cairo_image_surface_get_data(cairo_get_target(ad-&gt;cairo));
+&nbsp;&nbsp;&nbsp;evas_object_image_data_set(ad-&gt;img, imageData);
+&nbsp;&nbsp;&nbsp;evas_object_image_data_update_add(ad-&gt;img, 0, 0, ad-&gt;width, ad-&gt;height);
+}
+</pre>
+
+<h3>Deleting Cairo</h3>
+
+<p>The delete callback is triggered when the Window is destroyed from the main loop.</p>
+<pre class="prettyprint">
+static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;cairo_surface_destroy(ad-&gt;surface);
+&nbsp;&nbsp;&nbsp;cairo_destroy(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;ui_app_exit();
+}
+</pre>
+
+ 
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/cairo_evasgl_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/cairo_evasgl_sd_mn.htm
new file mode 100644 (file)
index 0000000..0c140a6
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/cairo_evasgl_sd_mn.htm
@@ -0,0 +1,282 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Cairo EvasGL Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+
+  <h1>Cairo EvasGL Sample Overview</h1> 
+
+<p>The Cairo EvasGL sample application demonstrates how to draw vector graphics using the Cairo GL backend with the Evas_GL surface using the Tizen SDK.</p> 
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure illustrates the main screen of the Cairo EvasGL.</p>
+<p class="figure">Figure: Cairo EvasGL screen</p>
+<p align="center"><img alt="Cairo EvasGL screen" src="../images/cairo_evasgl.png" /></p>
+  
+ <h2>Implementation</h2>
+
+<p>To create a basic application that provides a UI application skeleton which already makes available the window object that can contain a Cairo drawing:</p>
+<ol>
+<li>Build the environment. 
+<p>For using the Cairo GL backend on the Evas_GL surface, include the following header files.</p>
+<pre class="prettyprint">
+#include &lt;cairo.h&gt;
+#include &lt;Evas_GL.h&gt;
+#include &lt;cairo-evas-gl.h&gt;
+#include &lt;math.h&gt;
+</pre>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure that contains all the pointers to objects to be manipulated:</p>
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;    
+&nbsp;&nbsp;&nbsp;Evas_Object *img;
+
+&nbsp;&nbsp;&nbsp;cairo_surface_t *surface;
+&nbsp;&nbsp;&nbsp;cairo_t *cairo;
+&nbsp;&nbsp;&nbsp;cairo_device_t *cairo_device;
+               
+&nbsp;&nbsp;&nbsp;Evas_GL *evas_gl;
+&nbsp;&nbsp;&nbsp;Evas_GL_Config *evas_gl_config;
+&nbsp;&nbsp;&nbsp;Evas_GL_Surface *evas_gl_surface;
+&nbsp;&nbsp;&nbsp;Evas_GL_Context *evas_gl_context;
+} appdata_s;
+</pre>
+</li>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">Elm_window</span> for EvasGL. 
+<p>For using the EvasGL backend, you have to add this before the window creation. This makes it possible for the Cairo drawings on EvasGL to be displayed on the screen.</p>
+<pre class="prettyprint">
+elm_config_accel_preference_set(&quot;opengl&quot;);
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+if (elm_win_wm_rotation_supported_get(ad-&gt;win))
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+}
+evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+evas_object_show(ad-&gt;win);
+</pre>
+</li>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image:
+<pre class="prettyprint">
+ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));
+evas_object_show(ad-&gt;img);
+</pre>
+</li>
+
+<li>Initialize the variables for EvasGL. 
+<p>Before initializing EvasGL and creating the Evas_GL surface, get the window size.</p>
+<pre class="prettyprint">
+evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;ad-&gt;width, &amp;ad-&gt;height);
+</pre>
+<p>Initialize the variables related to the Evas_GL within the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure.</p> 
+<p>For creating the EvasGL object, you can use the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image created before.</p>
+<pre class="prettyprint">
+Evas_Native_Surface ns;
+ad-&gt;evas_gl = evas_gl_new(evas_object_evas_get(ad-&gt;img));
+ad-&gt;evas_gl_config = evas_gl_config_new();
+ad-&gt;evas_gl_config-&gt;color_format = EVAS_GL_RGBA_8888;
+ad-&gt;evas_gl_surface = evas_gl_surface_create(ad-&gt;evas_gl, ad-&gt;evas_gl_config, ad-&gt;width, ad-&gt;height);
+ad-&gt;evas_gl_context = evas_gl_context_create(ad-&gt;evas_gl, NULL);
+evas_gl_native_surface_get(ad-&gt;evas_gl, ad-&gt;evas_gl_surface, &amp;ns);
+evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
+evas_object_image_pixels_get_callback_set(ad-&gt;img, cairo_drawing, ad);
+</pre>
+</li>
+<li>Link the Evas callback function to draw the Cairo image.
+<pre class="prettyprint">
+evas_object_image_pixels_get_callback_set(ad-&gt;img, cairo_drawing, NULL);
+</pre>
+</li>
+
+<li>Create Cairo with EvasGL. 
+<p>To create the Cairo surface by using Evas_GL, the Cairo device must be provided. Set the <span style="font-family: Courier New,Courier,monospace">CAIRO_GL_COMPOSITOR</span> as <span style="font-family: Courier New,Courier,monospace">msaa</span> for using full GPU acceleration. In addition, to prevent unnecessary context switches in the Cairo GL backend, use the <span style="font-family: Courier New,Courier,monospace">cairo_gl_device_set_thread_aware()</span> function.</p>
+<pre class="prettyprint">
+setenv(&quot;CAIRO_GL_COMPOSITOR&quot;, &quot;msaa&quot;, 1);
+ad-&gt;cairo_device = (cairo_device_t *)cairo_evas_gl_device_create(ad-&gt;evas_gl, ad-&gt;evas_gl_context);
+cairo_gl_device_set_thread_aware(ad-&gt;cairo_device, 0);
+ad-&gt;surface = (cairo_surface_t *)cairo_gl_surface_create_for_evas_gl(ad-&gt;cairo_device, ad-&gt;evas_gl_surface, ad-&gt;evas_gl_config, ad-&gt;width, ad-&gt;height);
+ad-&gt;cairo = cairo_create (ad-&gt;surface);
+</pre>
+</li>
+
+<li>Draw random items (rectangles, circles, and triangles) with the <span style="font-family: Courier New,Courier,monospace">cairo_drawing()</span> function: 
+<pre class="prettyprint">
+void cairo_drawing(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;double r, g, b, a;
+
+&nbsp;&nbsp;&nbsp;// Clear background as white
+&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, 1, 1, 1, 1);
+&nbsp;&nbsp;&nbsp;cairo_paint(ad-&gt;cairo);
+
+&nbsp;&nbsp;&nbsp;cairo_set_operator(ad-&gt;cairo, CAIRO_OPERATOR_OVER);
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 100; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int shape = drand48() *3;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float width = drand48() * 50 + 1;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int line_cap = drand48() * 3;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_cap_t line_cap_style = CAIRO_LINE_CAP_BUTT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (line_cap == 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_cap_style = CAIRO_LINE_CAP_ROUND;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (line_cap == 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_cap_style = CAIRO_LINE_CAP_SQUARE;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int line_join = drand48() * 3;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_join_t line_join_style = CAIRO_LINE_JOIN_MITER;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (line_join == 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_join_style = CAIRO_LINE_JOIN_ROUND;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (line_join == 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_join_style = CAIRO_LINE_JOIN_BEVEL;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double dash[] = {0.0, 0.0};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dash[0] = drand48() * 50;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dash[1] = drand48() * 50;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_dash(ad-&gt;cairo, dash, 2, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_line_width(ad-&gt;cairo, width);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_line_join(ad-&gt;cairo, line_join_style);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_line_cap(ad-&gt;cairo, line_cap_style);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Random color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r = drand48();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = drand48();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b = drand48();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a = drand48();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, r, g, b, a);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Random position
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float x = drand48() * ad->width;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float y = drand48() * ad->height;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float side = drand48() * 300;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (shape == 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Draw a square
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_rectangle(ad-&gt;cairo, x, y, side, side);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_fill(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (shape == 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Draw a circle
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_arc(ad-&gt;cairo, x, y, side/2, 0.0, 2.0 * M_PI);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Draw a triangle
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_move_to(ad-&gt;cairo, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, x + side, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, x, y + side);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_close_path(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;cairo_surface_flush(ad-&gt;surface);
+}
+</pre>
+</li>
+<li>Add the animator function callback. 
+<p>The following is an example of a default update refresh rate. You can add the animator after creating Cairo and EvasGL.</p>
+<p>Add the animator function callback with the <span style="font-family: Courier New,Courier,monospace">ecore_animator_add()</span> function. The <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function updates the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image which is connected to EvasGL. After this, the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image updates with the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_get_callback_set()</span> callback function calls whenever Evas renders.</p>
+<pre class="prettyprint">
+static Eina_Bool _animate_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = (Evas_Object *)data;
+&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(obj, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+static bool app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;cairo_evasgl_drawing(ad);
+
+&nbsp;&nbsp;&nbsp;ecore_animator_frametime_set(0.016);
+&nbsp;&nbsp;&nbsp;Ecore_Animator *animator = ecore_animator_add(_animate_cb, (void *)ad-&gt;img);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+</li>
+
+<li>Delete Cairo and EvasGL. 
+<p>The delete callback is triggered when the Window is destroyed from the main loop.</p>
+<pre class="prettyprint">
+static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;cairo_surface_destroy(ad-&gt;surface);
+&nbsp;&nbsp;&nbsp;cairo_destroy(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;cairo_device_destroy(ad-&gt;cairo_device);
+&nbsp;&nbsp;&nbsp;evas_gl_surface_destroy(ad-&gt;evas_gl, ad-&gt;evas_gl_surface);
+&nbsp;&nbsp;&nbsp;evas_gl_context_destroy(ad-&gt;evas_gl, ad-&gt;evas_gl_context);
+&nbsp;&nbsp;&nbsp;evas_gl_config_free(ad-&gt;evas_gl_config);
+&nbsp;&nbsp;&nbsp;evas_gl_free(ad-&gt;evas_gl);
+&nbsp;&nbsp;&nbsp;ui_app_exit();
+}
+</pre>
+</li>
+</ol>
+
+
+ 
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm
index 57df1dd..c469378 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/glview11_cube_sd_mn.htm
@@ -1,329 +1,329 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-       <title>GLView11Cube Sample Overview</title>  
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
-       </div>
-
-  <h1>GLView11Cube Sample Overview</h1> 
-
-<p>The GLView11Cube sample demonstrates how you can use ElmGLView to create a 3D cube using OpenGL&reg; ES 1.1.</p>
-
-         <table class="note"> 
-          <tbody> 
-               <tr> 
-                <th class="note">Note</th> 
-               </tr> 
-               <tr> 
-                <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> 
-               </tr> 
-          </tbody> 
-         </table> 
-
-<p>This sample extends the functionality of OpenGL&reg; ES 1.1 on the Tizen platform to create spinning 3D cubes. OpenGL&reg; is a standard specification defining a cross-language, cross-platform API for writing applications that produce 2D and 3D computer graphics. OpenGL&reg; ES 1.1 is light-weight but packed with functionalities for hardware acceleration, improved image quality with multi-texture support, and optimizations to increase performance while reducing memory bandwidth usage to save power. ElmGLView can support the surface for 3D rendering.</p>
-
- <p class="figure">Figure: GLView11Cube</p> 
- <p align="center"><img alt="GLView11Cube" src="../images/glview11_cube.png" /></p>  
-
- 
-<h2>Initializing the Application</h2>
-<p>The easiest way to use OpenGL&reg; within an EFL application is to rely on the Elementary GLView component.</p>
-<p>Current GLView can support both GELS2.0 and 1.1. GLView with the GLES 1.1 basic application has a similar basic format as the other GLView application.</p>
-<p>Create a basic application:</p>
-<pre class="prettyprint">
-#include &lt;Evas_GL.h&gt;
-#include &lt;Elementary.h&gt;
-#include &lt;efl_extension.h&gt;
-#include &lt;dlog.h&gt;
-</pre>
-
-<p>The GLView application should include the header files as the <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span>. The <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file is related to key events and the <span style="font-family: Courier New,Courier,monospace">&lt;dlog.h&gt;</span> header file is for seeing logs.</p>
-<pre class="prettyprint">
-#define S(a) evas_object_show(a)
-
-#define SX(a) do 
-{
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(a, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(a, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(a);
-} while (0)
-
-#define SF(a) do 
-{
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(a, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(a, 0.00001, 0.00001);
-&nbsp;&nbsp;&nbsp;evas_object_show(a);
-} while (0)
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *o, *t;
-&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s*)data;
-
-&nbsp;&nbsp;&nbsp;// Force OpenGL engine
-&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
-
-&nbsp;&nbsp;&nbsp;// Add a window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = o = elm_win_add(NULL,&quot;glview&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(o, &quot;delete,request&quot;, _close_cb, ad);
-&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(o, EVAS_CALLBACK_RESIZE, _win_resize_cb, ad);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(o, EEXT_CALLBACK_BACK, _close_cb, ad);
-&nbsp;&nbsp;&nbsp;S(o);
-
-&nbsp;&nbsp;&nbsp;// Add a background
-&nbsp;&nbsp;&nbsp;ad-&gt;bg = o = elm_bg_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;bg);
-&nbsp;&nbsp;&nbsp;elm_bg_color_set(o, 68, 68, 68);
-&nbsp;&nbsp;&nbsp;S(o);
-
-&nbsp;&nbsp;&nbsp;// Add a resize conformant
-&nbsp;&nbsp;&nbsp;ad-&gt;conform = o = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;SX(o);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;table = t = elm_table_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;S(t);
-
-&nbsp;&nbsp;&nbsp;o = elm_label_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(o, &quot;Gles 1.1 Cube&quot;);
-&nbsp;&nbsp;&nbsp;elm_table_pack(t, o, 1, 0, 3, 1);
-&nbsp;&nbsp;&nbsp;SF(o);
-
-&nbsp;&nbsp;&nbsp;o = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(o, &quot;Quit&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(o, &quot;clicked&quot;, _close_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_table_pack(t, o, 1, 9, 3, 1);
-&nbsp;&nbsp;&nbsp;SF(o);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;glview = o = _glview_create(ad);
-&nbsp;&nbsp;&nbsp;SX(o);
-
-&nbsp;&nbsp;&nbsp;// Add an animator to call _anim_cb_() every (1/60) seconds
-&nbsp;&nbsp;&nbsp;// _anim_cb() indicates that glview has changed, which eventually triggers
-&nbsp;&nbsp;&nbsp;// function (draw_gl() here) to redraw glview surface
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;ecore_animator_frametime_set(1.0 / 60.0);
-&nbsp;&nbsp;&nbsp;ad-&gt;anim = ecore_animator_add(_anim_cb, ad);
-&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_DEL, _destroy_anim, ad-&gt;anim);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-
-<p>To set the GL rendering engine, the application calls the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set(&quot;opengl&quot;)</span> function with the special string:</p>
-<pre class="prettyprint">
-static Evas_Object*
-_glview_create(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj;
-
-&nbsp;&nbsp;&nbsp;// Create a GLView with an OpenGL&reg;-ES 1.1 context
-&nbsp;&nbsp;&nbsp;obj = elm_glview_version_add(ad-&gt;win, EVAS_GL_GLES_1_X);
-&nbsp;&nbsp;&nbsp;elm_table_pack(ad-&gt;table, obj, 1, 1, 3, 1);
-&nbsp;&nbsp;&nbsp;evas_object_data_set(obj, APPDATA_KEY, ad);
-
-&nbsp;&nbsp;&nbsp;elm_glview_mode_set(obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ELM_GLVIEW_ALPHA |
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ELM_GLVIEW_DEPTH
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  );
-&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(obj, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
-&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(obj, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
-
-&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(obj, init_gles);
-&nbsp;&nbsp;&nbsp;elm_glview_del_func_set(obj, destroy_gles);
-&nbsp;&nbsp;&nbsp;elm_glview_resize_func_set(obj, resize_gl);
-&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(obj, draw_gl);
-
-&nbsp;&nbsp;&nbsp;return obj;
-}
-</pre>
-
-<p>To create ElmGLView with GLES 1.1, use the <span style="font-family: Courier New,Courier,monospace">elm_glview_version_add()</span> function with the specific version (<span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLES_1_X</span>). The current ElmGLView can support both GLES 2.0 and 1.1.</p>
-
-<h2>Setting up Callbacks</h2>
-<p>To set up callbacks:</p>
-<ol>
-<li>Set the initialization callback.
-<p>The initialization callback is called when the GLView is first created, after a valid OpenGL&reg; context and surface have been created. This is called from the main loop, as are the 3 other callbacks.</p>
-<pre class="prettyprint">
-#include &lt;Elementary_GL_Helpers.h&gt;</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Elementary_GL_Helpers.h&gt;</span> header file provides a set of convenience functions and macros. To use these functions and macros, include the header file in the application.</p>
-<pre class="prettyprint">
-void
-init_gles(Evas_Object *obj)
-{
-&nbsp;&nbsp;&nbsp;int w, h;
-&nbsp;&nbsp;&nbsp;appdata_s *ad;
-
-&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_USE(obj);
-&nbsp;&nbsp;&nbsp;ad = evas_object_data_get(obj, APPDATA_KEY);
-
-&nbsp;&nbsp;&nbsp;glGenTextures(2, ad-&gt;tex_ids);
-
-&nbsp;&nbsp;&nbsp;// Create and map texture 1
-&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, ad-&gt;tex_ids[0]);
-&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 128, 128, 0, GL_RGBA, GL_UNSIGNED_SHORT_4_4_4_4, IMAGE_4444_128_128_1);
-&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
-&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
-&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
-&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
-
-&nbsp;&nbsp;&nbsp;// Create and map texture 2
-&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, ad-&gt;tex_ids[1]);
-&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 128, 128, 0, GL_RGB, GL_UNSIGNED_SHORT_5_6_5, IMAGE_565_128_128_1);
-&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
-&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
-&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
-&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;current_tex_index = 0;
-
-&nbsp;&nbsp;&nbsp;glShadeModel(GL_SMOOTH);
-
-&nbsp;&nbsp;&nbsp;glEnable(GL_CULL_FACE);
-&nbsp;&nbsp;&nbsp;glCullFace(GL_BACK);
-
-&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);
-&nbsp;&nbsp;&nbsp;glDepthFunc(GL_LESS);
-
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;set_perspective(obj, 60.0f, w, h, 1.0f, 400.0f);
-}
-</pre>
-
-<p>In the GLES 1.1 sample, 2 textures are created and mapped in this function.</p>
-</li>
-
-<li>Set the resize callback.
-<p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport and matrix mode.</p>
-<pre class="prettyprint">
-void resize_gl(Evas_Object *obj)
-{
-&nbsp;&nbsp;&nbsp;int w, h;
-
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;set_perspective(obj, 60.0f, w, h, 1.0f, 400.0f);
-}
-</pre>
-</li>
-
-<li>Set the draw callback.
-<p>The draw callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy set when calling.</p>
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
-
-<p>Another policy is <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_POLICY_ALWAYS</span>.</p>
-<p>The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. The following example covers the whole window:</p>
-<pre class="prettyprint">
-void draw_gl(Evas_Object *obj)
-{
-ELEMENTARY_GLVIEW_USE(obj);
-
-&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
-&nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
-
-&nbsp;&nbsp;&nbsp;draw_cube1(obj);
-&nbsp;&nbsp;&nbsp;draw_cube2(obj);
-}
-</pre>
-</li>
-
-<li>Set the delete callback.
-<p>The delete callback is triggered when the GLView is destroyed from the main loop, and no other callback can be called on the same object afterwards. In GELS 1.1, 2 textures are deleted.</p>
-<pre class="prettyprint">
-void
-destroy_gles(Evas_Object *obj)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad;
-
-&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_USE(obj);
-&nbsp;&nbsp;&nbsp;ad = evas_object_data_get(obj, APPDATA_KEY);
-
-&nbsp;&nbsp;&nbsp;if (ad-&gt;tex_ids[0])
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glDeleteTextures(1, &amp;(ad-&gt;tex_ids[0]));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;tex_ids[0] = 0;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;if (ad-&gt;tex_ids[1])
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glDeleteTextures(1, &amp;(ad-&gt;tex_ids[1]));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;tex_ids[1] = 0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li>Add an animator.
-<p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games usually use an animator to update the scene regularly. The following example shows a default update refresh rate:</p>
-<pre class="prettyprint">
-static Eina_Bool
-_anim_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;elm_glview_changed_set(ad-&gt;glview);
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
-}
-</pre>
-
-<p>Any other event can be used to refresh the view, for example, the user input if the view does not need to be updated.</p>
-</li>
-</ol>
-
-         <table class="note"> 
-          <tbody> 
-               <tr> 
-                <th class="note">Note</th> 
-               </tr> 
-               <tr> 
-                <td class="note">OpenGL&reg; ES 1.1 application can be implemented in Tizen. However, if OpenGL&reg; ES 1.1 and OpenGL&reg; ES 2.0 are used together, they cannot be used in the same file.</td> 
-               </tr> 
-          </tbody> 
-         </table>
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>GLView11Cube Sample Overview</title>  \r
+</head>\r
+\r
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>\r
+       </div>\r
+\r
+  <h1>GLView11Cube Sample Overview</h1> \r
+\r
+<p>The GLView11Cube sample demonstrates how you can use ElmGLView to create a 3D cube using OpenGL&reg; ES 1.1.</p>\r
+\r
+         <table class="note"> \r
+          <tbody> \r
+               <tr> \r
+                <th class="note">Note</th> \r
+               </tr> \r
+               <tr> \r
+                <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> \r
+               </tr> \r
+          </tbody> \r
+         </table> \r
+\r
+<p>This sample extends the functionality of OpenGL&reg; ES 1.1 on the Tizen platform to create spinning 3D cubes. OpenGL&reg; is a standard specification defining a cross-language, cross-platform API for writing applications that produce 2D and 3D computer graphics. OpenGL&reg; ES 1.1 is light-weight but packed with functionalities for hardware acceleration, improved image quality with multi-texture support, and optimizations to increase performance while reducing memory bandwidth usage to save power. ElmGLView can support the surface for 3D rendering.</p>\r
+\r
+ <p class="figure">Figure: GLView11Cube</p> \r
+ <p align="center"><img alt="GLView11Cube" src="../images/glview11_cube.png" /></p>  \r
+\r
+ \r
+<h2>Initializing the Application</h2>\r
+<p>The easiest way to use OpenGL&reg; within an EFL application is to rely on the Elementary GLView component.</p>\r
+<p>Current GLView can support both GELS2.0 and 1.1. GLView with the GLES 1.1 basic application has a similar basic format as the other GLView application.</p>\r
+<p>Create a basic application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;Evas_GL.h&gt;\r
+#include &lt;Elementary.h&gt;\r
+#include &lt;efl_extension.h&gt;\r
+#include &lt;dlog.h&gt;\r
+</pre>\r
+\r
+<p>The GLView application should include the header files as the <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span>. The <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file is related to key events and the <span style="font-family: Courier New,Courier,monospace">&lt;dlog.h&gt;</span> header file is for seeing logs.</p>\r
+<pre class="prettyprint">\r
+#define S(a) evas_object_show(a)\r
+\r
+#define SX(a) do \r
+{\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(a, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(a, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(a);\r
+} while (0)\r
+\r
+#define SF(a) do \r
+{\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(a, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(a, 0.00001, 0.00001);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(a);\r
+} while (0)\r
+\r
+static bool\r
+app_create(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *o, *t;\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s*)data;\r
+\r
+&nbsp;&nbsp;&nbsp;// Force OpenGL engine\r
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add a window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = o = elm_win_add(NULL,&quot;glview&quot;, ELM_WIN_BASIC);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(o, &quot;delete,request&quot;, _close_cb, ad);\r
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(o, EVAS_CALLBACK_RESIZE, _win_resize_cb, ad);\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(o, EEXT_CALLBACK_BACK, _close_cb, ad);\r
+&nbsp;&nbsp;&nbsp;S(o);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add a background\r
+&nbsp;&nbsp;&nbsp;ad-&gt;bg = o = elm_bg_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;bg);\r
+&nbsp;&nbsp;&nbsp;elm_bg_color_set(o, 68, 68, 68);\r
+&nbsp;&nbsp;&nbsp;S(o);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add a resize conformant\r
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = o = elm_conformant_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);\r
+&nbsp;&nbsp;&nbsp;SX(o);\r
+\r
+&nbsp;&nbsp;&nbsp;ad-&gt;table = t = elm_table_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;S(t);\r
+\r
+&nbsp;&nbsp;&nbsp;o = elm_label_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(o, &quot;Gles 1.1 Cube&quot;);\r
+&nbsp;&nbsp;&nbsp;elm_table_pack(t, o, 1, 0, 3, 1);\r
+&nbsp;&nbsp;&nbsp;SF(o);\r
+\r
+&nbsp;&nbsp;&nbsp;o = elm_button_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(o, &quot;Quit&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(o, &quot;clicked&quot;, _close_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_table_pack(t, o, 1, 9, 3, 1);\r
+&nbsp;&nbsp;&nbsp;SF(o);\r
+\r
+&nbsp;&nbsp;&nbsp;ad-&gt;glview = o = _glview_create(ad);\r
+&nbsp;&nbsp;&nbsp;SX(o);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add an animator to call _anim_cb_() every (1/60) seconds\r
+&nbsp;&nbsp;&nbsp;// _anim_cb() indicates that glview has changed, which eventually triggers\r
+&nbsp;&nbsp;&nbsp;// function (draw_gl() here) to redraw glview surface\r
+&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;ecore_animator_frametime_set(1.0 / 60.0);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;anim = ecore_animator_add(_anim_cb, ad);\r
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_DEL, _destroy_anim, ad-&gt;anim);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+\r
+<p>To set the GL rendering engine, the application calls the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set(&quot;opengl&quot;)</span> function with the special string:</p>\r
+<pre class="prettyprint">\r
+static Evas_Object*\r
+_glview_create(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *obj;\r
+\r
+&nbsp;&nbsp;&nbsp;// Create a GLView with an OpenGL&reg;-ES 1.1 context\r
+&nbsp;&nbsp;&nbsp;obj = elm_glview_version_add(ad-&gt;win, EVAS_GL_GLES_1_X);\r
+&nbsp;&nbsp;&nbsp;elm_table_pack(ad-&gt;table, obj, 1, 1, 3, 1);\r
+&nbsp;&nbsp;&nbsp;evas_object_data_set(obj, APPDATA_KEY, ad);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_mode_set(obj,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ELM_GLVIEW_ALPHA |\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ELM_GLVIEW_DEPTH\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  );\r
+&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(obj, ELM_GLVIEW_RESIZE_POLICY_RECREATE);\r
+&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(obj, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(obj, init_gles);\r
+&nbsp;&nbsp;&nbsp;elm_glview_del_func_set(obj, destroy_gles);\r
+&nbsp;&nbsp;&nbsp;elm_glview_resize_func_set(obj, resize_gl);\r
+&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(obj, draw_gl);\r
+\r
+&nbsp;&nbsp;&nbsp;return obj;\r
+}\r
+</pre>\r
+\r
+<p>To create ElmGLView with GLES 1.1, use the <span style="font-family: Courier New,Courier,monospace">elm_glview_version_add()</span> function with the specific version (<span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLES_1_X</span>). The current ElmGLView can support both GLES 2.0 and 1.1.</p>\r
+\r
+<h2>Setting up Callbacks</h2>\r
+<p>To set up callbacks:</p>\r
+<ol>\r
+<li>Set the initialization callback.\r
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL&reg; context and surface have been created. This is called from the main loop, as are the 3 other callbacks.</p>\r
+<pre class="prettyprint">\r
+#include &lt;Elementary_GL_Helpers.h&gt;</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Elementary_GL_Helpers.h&gt;</span> header file provides a set of convenience functions and macros. To use these functions and macros, include the header file in the application.</p>\r
+<pre class="prettyprint">\r
+void\r
+init_gles(Evas_Object *obj)\r
+{\r
+&nbsp;&nbsp;&nbsp;int w, h;\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad;\r
+\r
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_USE(obj);\r
+&nbsp;&nbsp;&nbsp;ad = evas_object_data_get(obj, APPDATA_KEY);\r
+\r
+&nbsp;&nbsp;&nbsp;glGenTextures(2, ad-&gt;tex_ids);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create and map texture 1\r
+&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, ad-&gt;tex_ids[0]);\r
+&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 128, 128, 0, GL_RGBA, GL_UNSIGNED_SHORT_4_4_4_4, IMAGE_4444_128_128_1);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create and map texture 2\r
+&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, ad-&gt;tex_ids[1]);\r
+&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 128, 128, 0, GL_RGB, GL_UNSIGNED_SHORT_5_6_5, IMAGE_565_128_128_1);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);\r
+\r
+&nbsp;&nbsp;&nbsp;ad-&gt;current_tex_index = 0;\r
+\r
+&nbsp;&nbsp;&nbsp;glShadeModel(GL_SMOOTH);\r
+\r
+&nbsp;&nbsp;&nbsp;glEnable(GL_CULL_FACE);\r
+&nbsp;&nbsp;&nbsp;glCullFace(GL_BACK);\r
+\r
+&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);\r
+&nbsp;&nbsp;&nbsp;glDepthFunc(GL_LESS);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;set_perspective(obj, 60.0f, w, h, 1.0f, 400.0f);\r
+}\r
+</pre>\r
+\r
+<p>In the GLES 1.1 sample, 2 textures are created and mapped in this function.</p>\r
+</li>\r
+\r
+<li>Set the resize callback.\r
+<p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport and matrix mode.</p>\r
+<pre class="prettyprint">\r
+void resize_gl(Evas_Object *obj)\r
+{\r
+&nbsp;&nbsp;&nbsp;int w, h;\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;set_perspective(obj, 60.0f, w, h, 1.0f, 400.0f);\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Set the draw callback.\r
+<p>The draw callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy set when calling.</p>\r
+<pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>\r
+\r
+<p>Another policy is <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_POLICY_ALWAYS</span>.</p>\r
+<p>The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. The following example covers the whole window:</p>\r
+<pre class="prettyprint">\r
+void draw_gl(Evas_Object *obj)\r
+{\r
+ELEMENTARY_GLVIEW_USE(obj);\r
+\r
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);\r
+&nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 0.0f);\r
+\r
+&nbsp;&nbsp;&nbsp;draw_cube1(obj);\r
+&nbsp;&nbsp;&nbsp;draw_cube2(obj);\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Set the delete callback.\r
+<p>The delete callback is triggered when the GLView is destroyed from the main loop, and no other callback can be called on the same object afterwards. In GELS 1.1, 2 textures are deleted.</p>\r
+<pre class="prettyprint">\r
+void\r
+destroy_gles(Evas_Object *obj)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad;\r
+\r
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_USE(obj);\r
+&nbsp;&nbsp;&nbsp;ad = evas_object_data_get(obj, APPDATA_KEY);\r
+\r
+&nbsp;&nbsp;&nbsp;if (ad-&gt;tex_ids[0])\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glDeleteTextures(1, &amp;(ad-&gt;tex_ids[0]));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;tex_ids[0] = 0;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;if (ad-&gt;tex_ids[1])\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glDeleteTextures(1, &amp;(ad-&gt;tex_ids[1]));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;tex_ids[1] = 0;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Add an animator.\r
+<p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games usually use an animator to update the scene regularly. The following example shows a default update refresh rate:</p>\r
+<pre class="prettyprint">\r
+static Eina_Bool\r
+_anim_cb(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_changed_set(ad-&gt;glview);\r
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;\r
+}\r
+</pre>\r
+\r
+<p>Any other event can be used to refresh the view, for example, the user input if the view does not need to be updated.</p>\r
+</li>\r
+</ol>\r
+\r
+         <table class="note"> \r
+          <tbody> \r
+               <tr> \r
+                <th class="note">Note</th> \r
+               </tr> \r
+               <tr> \r
+                <td class="note">OpenGL&reg; ES 1.1 application can be implemented in Tizen. However, if OpenGL&reg; ES 1.1 and OpenGL&reg; ES 2.0 are used together, they cannot be used in the same file.</td> \r
+               </tr> \r
+          </tbody> \r
+         </table>\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm
index 9d0de04..1df061c 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/glview_cube_sd_mn.htm
@@ -1,284 +1,284 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-       <title>GLViewCube Sample Overview</title>  
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
-       </div>
-
-  <h1>GLViewCube Sample Overview</h1> 
-  
-<p>This sample demonstrates how to render with OpenGL&reg; ES 2.0 using an Elementary GLView component. It goes through the creation of a simple UI and how to draw a rotating cube using simple vertex and fragment shaders.</p>
-
-         <table class="note"> 
-          <tbody> 
-               <tr> 
-                <th class="note">Note</th> 
-               </tr> 
-               <tr> 
-                <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> 
-               </tr> 
-          </tbody> 
-         </table> 
- 
- 
- <p class="figure">Figure: GLViewCube</p> 
- <p align="center"><img alt="GLViewCube" src="../images/glview_cube.png" /></p>  
-         
-<h2>Elementary_GL_Helpers</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Elementary_GL_Helpers.h&gt;</span> header file provides a set of convenience functions and macros. To use these functions and macros, include this header file in the application.</p>
-<pre class="prettyprint">
-#include &lt;app.h&gt;
-#include &lt;Elementary.h&gt;
-#include &lt;Elementary_GL_Helpers.h&gt;
-#include &lt;efl_extension.h&gt;
-
-#include &quot;glviewcube_utils.h&quot;
-
-ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
-...
-static bool app_create(void *data) 
-{
-...
-&nbsp;&nbsp;&nbsp;// Create and initialize GLView
-&nbsp;&nbsp;&nbsp;gl = elm_glview_add(win);
-&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(gl);
-...
-}
-</pre>
-
-<h2>Setting up Callbacks</h2>
-<ol>
-<li>Set the initialization callback.
-<p>The initialization callback is called when the GLView is first created, after a valid OpenGL&reg; context and surface have been created.</p>
-<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>
-
-<pre class="prettyprint">
-static void init_gl(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-
-&nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_shaders(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-}
-</pre>
-</li>
-
-<li>Initialize the shaders.
-<ol type="a">
-<li>The shader instances for the fragment and vertex shader are compiled and created by passing the shader type as a parameter to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
-       <p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
-       <pre class="prettyprint">
-static void init_shaders(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-&nbsp;&nbsp;&nbsp;const char *p;
-&nbsp;&nbsp;&nbsp;p = vertex_shader;
-&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);
-&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);
-&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);
-
-&nbsp;&nbsp;&nbsp;p = fragment_shader;
-&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
-&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
-&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
-</pre></li>
-       <li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
-       <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
-&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
-&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);
-&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);
-</pre> 
-       </li>
-
-       <li>Get the location for each vertex or pixel attribute in the shader program using the <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> and <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> functions. If the shader program attributes <span style="font-family: Courier New,Courier,monospace">a_position</span>, <span style="font-family: Courier New,Courier,monospace">a_color</span>, and <span style="font-family: Courier New,Courier,monospace">u_mvpMatrix</span> are valid, these functions return an integer value that represents the index location of the attributes. For invalid attributes, the return value is -1.
-       <p>The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> function retrieves the location of the attributes that have an effect on a vertex or pixel, such as position vector, normal vector, or vertex color. The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> retrieves the location of the attributes that have an effect on groups of vertices or pixels, such as model view matrix, projection matrix, or light position.</p>
-       <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ad-&gt;idx_position = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;idx_color = glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;idx_mvp = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMatrix&quot;);
-       </pre>
-       </li>
-       
-               <li>Install the shader program and enable the GPU to execute the shader operations in the frame buffer.
-       <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program);
-}
-</pre>
-</li>
-</ol>
-</li>
-
-<li>Set the resize callback.
-<p>The resize callback is called whenever the GLView component is resized. It resets the viewport.</p>
-<pre class="prettyprint">
-static void resize_gl(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;int w, h;
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
-}
-</pre>
-</li>
-
-
-<li>Set the draw callback.
-<p>The draw callback is called whenever a new frame has to be drawn.</p>
-<p>The application can now draw anything using GL primitives when this callback is triggered.</p>
-<ol type="a">
-       <li>The <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function specifies the affine transformation of the x and y values from normalized device coordinates to window coordinates as specified by the <span style="font-family: Courier New,Courier,monospace">elm_glview_size_get()</span> function.
-       <pre class="prettyprint">
-static void draw_gl(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
-</pre>
-       </li>
-       <li>The <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is used to define an array of generic vertex attribute data. These attributes are parameters associated with each vertex of the cube. In this case, the parameters are position and color. In both instances, the final parameter (vertices and colors) represent the previously defined arrays - vertices and colors.
-       <p>The <span style="font-family: Courier New,Courier,monospace">glEnableVertexAttribArray()</span> function enables the generic vertex attribute data arrays. The enabled attributes can be accessed and used to render the scene.</p>
-       <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_position, 3, GL_FLOAT, GL_FALSE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3 * sizeof(float), cube_vertices);
-&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_color, 4, GL_FLOAT, GL_FALSE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4 * sizeof(float), cube_colors);
-
-&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_position);
-&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_color);
-       </pre>
-       </li>
-
-       <li>The <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> function modifies the values of the 4x4 MVP (Model View/Projection) uniform matrix according to the vertices information of the cube. An MVP matrix is created with data after each vertex of the cube has passed through 2 transformation stages: The first transformation state is the model view transformation, which includes translation, rotation, and scaling of objects. The second state is projection, which includes changes in the  perspective or orthography.
-       <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;idx_mvp, 1, GL_FALSE, ad-&gt;mvp);</pre>
-       </li>
-       
-       <li>Once the vertex arrays have been enabled, the actual process of rendering graphics primitives from the array data occurs using the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function. The final parameter in this function is the indices array.
-       <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, cube_indices_count,                             
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, cube_indices);
-       </pre>
-       </li>
-       </ol>
-       </li>
-
-<li>Add an animator.
-<p>The application regularly triggers updates of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>
-<pre class="prettyprint">
-static Eina_Bool anim(void *data) 
-{
-elm_glview_changed_set(data);
-return EINA_TRUE;
-}
-
-static bool app_create(void *data) 
-{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;ani = ecore_animator_add(anim, gl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-}
-</pre>
-</li>
-
-<li>Set event callbacks.
-<p>The event callbacks receive touch events and allow you to rotate the cube in a vertical or horizontal direction.</p>
-
-<pre class="prettyprint">
-static void mouse_down_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;
-}
-
-static void mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;
-&nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *)event_info;
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;float dx = 0, dy = 0;
-
-&nbsp;&nbsp;&nbsp;if (ad-&gt;mouse_down) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = ev-&gt;cur.canvas.x - ev-&gt;prev.canvas.x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;xangle += dy;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;yangle += dx;
-&nbsp;&nbsp;&nbsp;}
-}
-
-static void mouse_up_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
-}
-</pre>
-</li>
-
-
-<li>Set the delete callback.
-<p>The delete callback is triggered when the GLView is destroyed from the main loop.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">glDeleteShader()</span> and <span style="font-family: Courier New,Courier,monospace">glDeleteProgram()</span> functions are used to free memory.</p>
-<pre class="prettyprint">
-static void del_gl(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-
-&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
-&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
-&nbsp;&nbsp;&nbsp;glDeleteProgram(ad-&gt;program);
-
-&nbsp;&nbsp;&nbsp;evas_object_data_del((Evas_Object*) obj, &quot;ad&quot;);
-}
-</pre>
-</li>
-</ol>
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>GLViewCube Sample Overview</title>  \r
+</head>\r
+\r
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>\r
+       </div>\r
+\r
+  <h1>GLViewCube Sample Overview</h1> \r
+  \r
+<p>This sample demonstrates how to render with OpenGL&reg; ES 2.0 using an Elementary GLView component. It goes through the creation of a simple UI and how to draw a rotating cube using simple vertex and fragment shaders.</p>\r
+\r
+         <table class="note"> \r
+          <tbody> \r
+               <tr> \r
+                <th class="note">Note</th> \r
+               </tr> \r
+               <tr> \r
+                <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> \r
+               </tr> \r
+          </tbody> \r
+         </table> \r
+ \r
+ \r
+ <p class="figure">Figure: GLViewCube</p> \r
+ <p align="center"><img alt="GLViewCube" src="../images/glview_cube.png" /></p>  \r
+         \r
+<h2>Elementary_GL_Helpers</h2>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Elementary_GL_Helpers.h&gt;</span> header file provides a set of convenience functions and macros. To use these functions and macros, include this header file in the application.</p>\r
+<pre class="prettyprint">\r
+#include &lt;app.h&gt;\r
+#include &lt;Elementary.h&gt;\r
+#include &lt;Elementary_GL_Helpers.h&gt;\r
+#include &lt;efl_extension.h&gt;\r
+\r
+#include &quot;glviewcube_utils.h&quot;\r
+\r
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE();\r
+...\r
+static bool app_create(void *data) \r
+{\r
+...\r
+&nbsp;&nbsp;&nbsp;// Create and initialize GLView\r
+&nbsp;&nbsp;&nbsp;gl = elm_glview_add(win);\r
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(gl);\r
+...\r
+}\r
+</pre>\r
+\r
+<h2>Setting up Callbacks</h2>\r
+<ol>\r
+<li>Set the initialization callback.\r
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL&reg; context and surface have been created.</p>\r
+<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+static void init_gl(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_shaders(obj);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Initialize the shaders.\r
+<ol type="a">\r
+<li>The shader instances for the fragment and vertex shader are compiled and created by passing the shader type as a parameter to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.\r
+       <p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>\r
+       <pre class="prettyprint">\r
+static void init_shaders(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);\r
+&nbsp;&nbsp;&nbsp;const char *p;\r
+&nbsp;&nbsp;&nbsp;p = vertex_shader;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);\r
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);\r
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);\r
+\r
+&nbsp;&nbsp;&nbsp;p = fragment_shader;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);\r
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);\r
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);\r
+</pre></li>\r
+       <li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();\r
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);\r
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);\r
+&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);\r
+</pre> \r
+       </li>\r
+\r
+       <li>Get the location for each vertex or pixel attribute in the shader program using the <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> and <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> functions. If the shader program attributes <span style="font-family: Courier New,Courier,monospace">a_position</span>, <span style="font-family: Courier New,Courier,monospace">a_color</span>, and <span style="font-family: Courier New,Courier,monospace">u_mvpMatrix</span> are valid, these functions return an integer value that represents the index location of the attributes. For invalid attributes, the return value is -1.\r
+       <p>The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> function retrieves the location of the attributes that have an effect on a vertex or pixel, such as position vector, normal vector, or vertex color. The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> retrieves the location of the attributes that have an effect on groups of vertices or pixels, such as model view matrix, projection matrix, or light position.</p>\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_position = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_color = glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_mvp = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMatrix&quot;);\r
+       </pre>\r
+       </li>\r
+       \r
+               <li>Install the shader program and enable the GPU to execute the shader operations in the frame buffer.\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program);\r
+}\r
+</pre>\r
+</li>\r
+</ol>\r
+</li>\r
+\r
+<li>Set the resize callback.\r
+<p>The resize callback is called whenever the GLView component is resized. It resets the viewport.</p>\r
+<pre class="prettyprint">\r
+static void resize_gl(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;int w, h;\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);\r
+}\r
+</pre>\r
+</li>\r
+\r
+\r
+<li>Set the draw callback.\r
+<p>The draw callback is called whenever a new frame has to be drawn.</p>\r
+<p>The application can now draw anything using GL primitives when this callback is triggered.</p>\r
+<ol type="a">\r
+       <li>The <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function specifies the affine transformation of the x and y values from normalized device coordinates to window coordinates as specified by the <span style="font-family: Courier New,Courier,monospace">elm_glview_size_get()</span> function.\r
+       <pre class="prettyprint">\r
+static void draw_gl(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;...\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;...\r
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);\r
+</pre>\r
+       </li>\r
+       <li>The <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is used to define an array of generic vertex attribute data. These attributes are parameters associated with each vertex of the cube. In this case, the parameters are position and color. In both instances, the final parameter (vertices and colors) represent the previously defined arrays - vertices and colors.\r
+       <p>The <span style="font-family: Courier New,Courier,monospace">glEnableVertexAttribArray()</span> function enables the generic vertex attribute data arrays. The enabled attributes can be accessed and used to render the scene.</p>\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_position, 3, GL_FLOAT, GL_FALSE,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3 * sizeof(float), cube_vertices);\r
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_color, 4, GL_FLOAT, GL_FALSE,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4 * sizeof(float), cube_colors);\r
+\r
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_position);\r
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_color);\r
+       </pre>\r
+       </li>\r
+\r
+       <li>The <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> function modifies the values of the 4x4 MVP (Model View/Projection) uniform matrix according to the vertices information of the cube. An MVP matrix is created with data after each vertex of the cube has passed through 2 transformation stages: The first transformation state is the model view transformation, which includes translation, rotation, and scaling of objects. The second state is projection, which includes changes in the  perspective or orthography.\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;idx_mvp, 1, GL_FALSE, ad-&gt;mvp);</pre>\r
+       </li>\r
+       \r
+       <li>Once the vertex arrays have been enabled, the actual process of rendering graphics primitives from the array data occurs using the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function. The final parameter in this function is the indices array.\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, cube_indices_count,                             \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, cube_indices);\r
+       </pre>\r
+       </li>\r
+       </ol>\r
+       </li>\r
+\r
+<li>Add an animator.\r
+<p>The application regularly triggers updates of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>\r
+<pre class="prettyprint">\r
+static Eina_Bool anim(void *data) \r
+{\r
+elm_glview_changed_set(data);\r
+return EINA_TRUE;\r
+}\r
+\r
+static bool app_create(void *data) \r
+{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\r
+&nbsp;&nbsp;&nbsp;ani = ecore_animator_add(anim, gl);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Set event callbacks.\r
+<p>The event callbacks receive touch events and allow you to rotate the cube in a vertical or horizontal direction.</p>\r
+\r
+<pre class="prettyprint">\r
+static void mouse_down_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;\r
+}\r
+\r
+static void mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;\r
+&nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *)event_info;\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;float dx = 0, dy = 0;\r
+\r
+&nbsp;&nbsp;&nbsp;if (ad-&gt;mouse_down) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = ev-&gt;cur.canvas.x - ev-&gt;prev.canvas.x;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;xangle += dy;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;yangle += dx;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+static void mouse_up_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;\r
+}\r
+</pre>\r
+</li>\r
+\r
+\r
+<li>Set the delete callback.\r
+<p>The delete callback is triggered when the GLView is destroyed from the main loop.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">glDeleteShader()</span> and <span style="font-family: Courier New,Courier,monospace">glDeleteProgram()</span> functions are used to free memory.</p>\r
+<pre class="prettyprint">\r
+static void del_gl(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);\r
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);\r
+&nbsp;&nbsp;&nbsp;glDeleteProgram(ad-&gt;program);\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_data_del((Evas_Object*) obj, &quot;ad&quot;);\r
+}\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm
index 94250fc..eab282c 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/gps_service_sd_mn.htm
@@ -44,7 +44,7 @@
 
   <p>The current implementation requires precise knowledge about the message receiver application (its package name).</p>
 
-<h2>Requirements</h2>
+<h2>Prerequisites</h2>
 <p>To ensure proper application execution, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/location</span> privilege must be set and the following features must be enabled:
  <ul>
   <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></li>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/lockscreen_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/lockscreen_sd_mn.htm
new file mode 100644 (file)
index 0000000..5e699d3
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/lockscreen_sd_mn.htm
@@ -0,0 +1,345 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+       <title>Lockscreen Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+  <h1>Lockscreen Sample Overview</h1>
+
+<p>The Lockscreen sample application demonstrates how to implement the screen locking mechanism. The application interface consists of a main window and a simple swipe lock displayed over it. It enables the user to unlock the screen by swiping up or down.</p>
+  <p>The following figures show the user interface hierarchy and the unlock sequence where the lock is being swiped upwards.</p>
+ 
+  <p class="figure">Figure: User interface hierarchy</p>
+  <p align="center">
+    <img alt="User interface hierarchy" src="../images/lockscreen_ui_diagram.png" />
+  </p>
+
+  <p class="figure">Figure: Unlock sequence</p>
+  <p align="center">
+    <img alt="Screen is locked" src="../images/screen_locked.png" />
+    <img alt="Lock is swiped" src="../images/screen_unlock_1.png" />
+    <img alt="Lock is swiped further" src="../images/screen_unlock_2.png" />
+    <img alt="Screen is unlocked" src="../images/screen_unlocked.png" />
+  </p>
+ 
+<p>To make this application work, the user must select it as a default lockscreen through the Settings menu.</p> 
+
+ <h2>Implementation</h2>
+<p>The application follows the MVC pattern. Aside from the standard native application module with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, it consists of the following components:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">controller.c</span> module</li>
+<li><span style="font-family: Courier New,Courier,monospace">settings.c</span> module serving as a model</li>
+<li><span style="font-family: Courier New,Courier,monospace">main_window.c</span>, <span style="font-family: Courier New,Courier,monospace">lock.c</span>, and <span style="font-family: Courier New,Courier,monospace">swipe_lock.c</span> modules serving as views</li>
+</ul>
+
+<p>The application initialization takes place with the <span style="font-family: Courier New,Courier,monospace">controller_application_start()</span> function. This function creates the main window and sets the current lock type based on user preferences. It also sets the current lockscreen background. But most of all, it registers callbacks for the following events:</p>
+<ul>
+<li>Successful unlock using swipe gesture</li>
+<li>Lockscreen background change (using the Settings application)</li>
+<li>Display state change</li>
+</ul>
+
+<pre class="prettyprint">
+bool
+controller_application_start(void)
+{
+&nbsp;&nbsp;&nbsp;if (!main_window_create())
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;current_lock_set();
+&nbsp;&nbsp;&nbsp;// Add a controller swipe callback to the main window
+&nbsp;&nbsp;&nbsp;main_window_callbacks_add(swipe_unlocked_cb);
+&nbsp;&nbsp;&nbsp;// Add a lockscreen background image change callback, the image is selected in Settings application
+&nbsp;&nbsp;&nbsp;wallpaper_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, NULL)
+&nbsp;&nbsp;&nbsp;// Add a callback for the background change (also changed using the Settings application)
+&nbsp;&nbsp;&nbsp;system_settings_set_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, wallpaper_changed_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Add a callback to listen to LCD on/off events
+&nbsp;&nbsp;&nbsp;device_add_callback(DEVICE_CALLBACK_DISPLAY_STATE, device_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+ <h3>Activating the Lock</h3>
+
+<p>To activate the lockscreen:</p>
+
+<ol><li>Each time the LCD display is switched on, the currently selected lock type is activated through the <span style="font-family: Courier New,Courier,monospace">device_cb()</span> callback function:
+
+<pre class="prettyprint">
+static void
+device_cb(device_callback_e type, void *value, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;switch ((display_state_e)value)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case DISPLAY_STATE_NORMAL:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current_lock_set();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case DISPLAY_STATE_SCREEN_DIM:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case DISPLAY_STATE_SCREEN_OFF:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current_lock_set();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">settings_get_lock_type()</span> model function is used to obtain the current lock type. 
+<p>With this sample application, you can add other types of lock implementations of your own. To do that, modify the <span style="font-family: Courier New,Courier,monospace">lockscreen_type_t</span> enumeration type.</p>
+<pre class="prettyprint">
+static void
+current_lock_set(void)
+{
+&nbsp;&nbsp;&nbsp;switch(settings_get_lock_type())
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case LOCKSCREEN_NONE:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_window_swipe_lock_deactivate();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case LOCKSCREEN_SWIPE:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_window_swipe_lock_activate();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+<li>The user interface is created with the <span style="font-family: Courier New,Courier,monospace">main_window_create()</span> function. It consists of a background and a swipe lock view.
+<pre class="prettyprint">
+bool
+main_window_create(void)
+{
+&nbsp;&nbsp;&nbsp;s_main_window_data.win = elm_win_add(NULL, PACKAGE, ELM_WIN_DOCK);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;// Common window settings
+
+&nbsp;&nbsp;&nbsp;// Default alpha is 0
+&nbsp;&nbsp;&nbsp;elm_win_alpha_set(s_main_window_data.win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(s_main_window_data.win, &quot;delete,request&quot;, delete_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;if (!background_create(s_main_window_data.screen_width, s_main_window_data.screen_height) ||
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create the swipe lock to cover the entire window
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!swipe_create(s_main_window_data.screen_width, s_main_window_data.screen_height))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(s_main_window_data.win);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre></li></ol>
+
+ <h3>Unlocking the Device</h3>
+
+<p>To unlock the device:</p>
+
+<ol><li>The controller module uses the <span style="font-family: Courier New,Courier,monospace">main_window_callbacks_add()</span> function to register its callbacks for the user interface. Consequently, the module is notified whenever the user successfully unlocks the device with a swipe gesture, and the <span style="font-family: Courier New,Courier,monospace">swipe_unlocked_cb()</span> function is invoked.
+
+<pre class="prettyprint">
+void
+main_window_callbacks_add(swipe_unlock_cb unlock_cb)
+{
+&nbsp;&nbsp;&nbsp;if (!s_main_window_data.swipe_unlock_cb || unlock_cb)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipe_lock_callbacks_add(s_main_window_data.swipe_lock, swipe_drag_cb, swipe_drag_end_cb);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_main_window_data.swipe_unlock_cb = unlock_cb;
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void
+swipe_unlocked_cb(void)
+{
+&nbsp;&nbsp;&nbsp;main_window_lock_deactivate();
+}
+</pre></li>
+
+<li>After a successful swipe, the swipe lock is deactivated using the <span style="font-family: Courier New,Courier,monospace">main_window_swipe_lock_deactivate()</span> function:
+<pre class="prettyprint">
+void
+main_window_swipe_lock_deactivate(void)
+{
+&nbsp;&nbsp;&nbsp;// Hide the swipe lock UI object
+&nbsp;&nbsp;&nbsp;evas_object_hide(s_main_window_data.swipe_lock);
+&nbsp;&nbsp;&nbsp;// Hide the main application window
+&nbsp;&nbsp;&nbsp;evas_object_hide(s_main_window_data.win);
+}
+</pre></li></ol>
+
+ <h3>Creating the Lockscreen View</h3>
+
+<p>The swipe lock view is created as the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> in the <span style="font-family: Courier New,Courier,monospace">lock_create()</span> function (called from the <span style="font-family: Courier New,Courier,monospace">swipe_lock_create()</span> function). One of its parameters is the layout <span style="font-family: Courier New,Courier,monospace">edj</span> file name.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">lock_create()</span> function
+associates the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> with the EDJE.</p>
+<pre class="prettyprint">
+Evas_Object * lock_create(Evas_Object * parent, const char *edje_file_name)
+{
+&nbsp;&nbsp;&nbsp;char layout_file_full_path[PATH_MAX] = {0,};
+
+&nbsp;&nbsp;&nbsp;Evas_Object *lock = elm_layout_add(parent);
+
+&nbsp;&nbsp;&nbsp;// Error handling and layout file path obtaining
+
+&nbsp;&nbsp;&nbsp;if (!elm_layout_file_set(lock, layout_file_full_path, LOCK_MAIN_GROUP))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return lock;
+}
+
+Evas_Object *
+swipe_lock_create(Evas_Object * parent)
+{
+&nbsp;&nbsp;&nbsp;return lock_create(parent, SWIPE_LOCK_EDJ_FILE_NAME);
+}
+</pre>
+
+<p>The following example is the related EDJE file:</p>
+
+<pre class="prettyprint">
+#include &quot;edje_definitions.h&quot;
+
+styles
+{
+&nbsp;&nbsp;&nbsp;style
+&nbsp;&nbsp;&nbsp;// main_text_style applies to MAIN_TEXT_PART of TEXTBLOCK type
+&nbsp;&nbsp;&nbsp;// Its syntax is very similar to HTML
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main_text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=&quot;default&quot; font_size=60 align=center color=#ffffffff style=shadow,bottom shadow_color=#000000ff wrap=mixed&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+
+collections
+{
+&nbsp;&nbsp;&nbsp;group
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: LOCK_MAIN_GROUP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: BACKGROUND_PART;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This is the default state description for the BACKGROUND_PART
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The BACKGROUND_COLOR constants are defined in &quot;edje_definitions.h&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: BACKGROUND_COLOR_R BACKGROUND_COLOR_G BACKGROUND_COLOR_B BACKGROUND_COLOR_A;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The background spans over the entire layout (which is the size of the main window):
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The BACKGROUND_PART is given a special attribute and it can be dragged all over the screen
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// x and y axis attribute properties&#39; meanings are: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 1st: enable(1)/disable(0) movement, 2nd: step, 3rd is not used in this application
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// See https://docs.enlightenment.org/auto/edje/edcref.html#sec_collections_group_parts_dragable for more information
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dragable
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 0 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 1 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: MAIN_TEXT_PART;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;repeat_events: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This is default state description for MAIN_TEXT_PART
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// SWIPE_MAIN_TEXT_PART_REL constants are defined in &quot;edje_definitions.h&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// MAIN_TEXT_PART is the text you can see in the &quot;Unlock sequence&quot; figure
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Note that although only the BACKGROUND_PART is draggable, the MAIN_TEXT_PART moves with it too
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This is because the MAIN_TEXT_PART keeps its relative position to the BACKGROUND_PART all the time
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: SWIPE_MAIN_TEXT_PART_REL1_X SWIPE_MAIN_TEXT_PART_REL1_Y; rel1.to: BACKGROUND_PART;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: SWIPE_MAIN_TEXT_PART_REL2_X SWIPE_MAIN_TEXT_PART_REL2_Y; rel2.to: BACKGROUND_PART;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style: &quot;main_text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: SWIPE_MAIN_TEXT_PART_TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The EDJE script contains a program to reset a draggable part to its initial position
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Normally, when the user stops dragging the BACKGROUND_PART, it does not go back to its original position 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The program is triggered from the swipe_lock_drag_reset() function (see below)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;reset_initial_position&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: SWIPE_RESET_SIGNAL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: SWIPE_RESET_SIGNAL_SOURCE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: DRAG_VAL_SET 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: BACKGROUND_PART;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<pre class="prettyprint">
+void
+swipe_lock_drag_reset(Evas_Object *swipe_lock)
+{
+&nbsp;&nbsp;&nbsp;elm_layout_signal_emit(swipe_lock, SWIPE_RESET_SIGNAL, SWIPE_RESET_SIGNAL_SOURCE);
+}
+</pre>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm
index e89850e..8ea90df 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/preference_sd_mn.htm
@@ -74,7 +74,7 @@
   <p>The following figure illustrates the application workflow with the <span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span> constraints.  </p>
   <p class="figure" id="app_workflow" name="app_workflow">Figure: Application workflow</p>
   <p align="center"><img alt="Application workflow" src="../images/preference_workflow_sd.png" /></p>
-  <h2>Requirements</h2>
+  <h2>Prerequisites</h2>
   <p>The following privilege must be set:</p>
   <ul>
     <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/systemsettings</span></li>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
index 689c4a0..c56a082 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
@@ -46,6 +46,14 @@
      <td><a href="bundle_sd_mn.htm">Bundle</a></td>
      <td>Demonstrates how you can manipulate bundle objects.</td>
        </tr>
+       <tr> 
+     <td><a href="cairo_basic_sd_mn.htm">Cairo Basic</a></td> 
+     <td>Demonstrates how you can implement the Cairo image backend.</td>
+    </tr>
+       <tr> 
+     <td><a href="cairo_evasgl_sd_mn.htm">Cairo EvasGL</a></td> 
+     <td>Demonstrates how you can implement the Cairo GL backend with the Evas_GL surface.</td>
+    </tr>      
     <tr>
      <td><a href="calculator_sd_mn.htm">Calculator</a></td> 
      <td>Demonstrates how you can implement an advanced calculator application.</td>
@@ -74,7 +82,6 @@
      <td><a href="glview_shader_sd_mn.htm">GLViewShader</a></td> 
      <td>Demonstrates how you can render more complex geometric shapes with OepnGL&reg; ES and use Elementary GLView helper macros to port existing code.</td>
     </tr>
-    <!--
     <tr>
      <td><a href="gps_consumer_sd_mn.htm">GPS Consumer</a></td>
      <td>Demonstrates how you can implement a location-based application using the geolocation data provided by an external service (<a href="gps_service_sd_mn.htm">GPS Service</a>).</td>
@@ -83,12 +90,15 @@
      <td><a href="gps_service_sd_mn.htm">GPS Service</a></td>
      <td>Demonstrates how you can implement a Tizen service providing geolocation data using the IPC mechanism from the Tizen API.</td>
     </tr>
-    -->
        <tr> 
      <td><a href="hybridservice_sd_mn.htm">HybridServiceApp</a></td> 
      <td>Demonstrates how you can communicate with a Tizen Web application (<a href="../mobile_w/hybridwebapp_mw.htm">HybridWebApp</a>) to manage the timer for the Web application.</td>
     </tr>
        <tr> 
+     <td><a href="lockscreen_sd_mn.htm">Lockscreen</a></td> 
+     <td>Demonstrates how you can implement a screen locking mechanism.</td>
+    </tr>
+       <tr> 
      <td><a href="mediaapp_sd_mn.htm">Media App</a></td> 
      <td>Demonstrates how you can develop media handling applications with the ability to manage different media sources.</td>
     </tr>
@@ -141,6 +151,10 @@
      <td><a href="ui_components_sd_mn.htm">UI Components</a></td>  
      <td>Demonstrates how you can implement an interactive application GUI with basic Elementary UI components.</td>
     </tr>      
+       <tr>
+     <td><a href="volume_sd_mn.htm">Volume</a></td>
+     <td>Demonstrates how you can acquire and set the device sound levels.</td>
+    </tr>
        <tr> 
      <td><a href="ui_alignment_sd_mn.htm">[UI Sample] Alignment</a></td> 
      <td>Demonstrates how you can place objects on the layout.</td>
diff --git a/org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm
index 15763d0..adb5e8e 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/ui_email_sd_mn.htm
@@ -1,292 +1,292 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-       <title>[UI Sample] Email Sample Overview</title>  
-</head>
-
-<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
-       </div>
-
-  <h1>[UI Sample] Email Sample Overview</h1> 
-
-<p>The [UI Sample] Email sample application demonstrates how to implement a complex view by a recursive composition of standard EFL UI components and containers in a UI component hierarchy.</p>
-<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span>, <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span>, <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>, and <span style="font-family: Courier New,Courier,monospace">elm_panel</span> for the UI component management inside the view, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside view.</p>   
-
-<h2>Main View</h2>
-
-<p>The following figure illustrates the main view of the [UI Sample] Email sample application, its wireframe structure, and the UI component tree.</p>
-
-    <p class="figure">Figure: [UI Sample] Email main view</p> 
-  <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view.png" /></p>
-  <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view_widget.png" /></p>  
-  <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view_widget2.png" /></p> 
-  
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the window which consists of an indicator (<span style="font-family: Courier New,Courier,monospace">elm_conformant</span>), view manager (<span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>), and the content created by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function. The drawer and compose button are inserted in the naviframe.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *btn1, *btn2, *bg;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
-
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_wm_desktop_layout_support_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Conformant
-&nbsp;&nbsp;&nbsp;ad-&gt;conform =  elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;// Indicator BG
-&nbsp;&nbsp;&nbsp;bg = elm_bg_add(ad&gt;conform);
-&nbsp;&nbsp;&nbsp;elm_object_style_set(bg, &quot;indicator/headerbg&quot;);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad&gt;conform, &quot;elm.swallow.indicator_bg&quot;, bg);
-&nbsp;&nbsp;&nbsp;evas_object_show(bg);
-
-&nbsp;&nbsp;&nbsp;// Main view
-&nbsp;&nbsp;&nbsp;ad-&gt;base_ly = create_main_view(ad);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad&gt;conform, ad&gt;base_ly);
-
-&nbsp;&nbsp;&nbsp;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;base_ly);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad&gt;nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;base_ly, &quot;elm.swallow.content&quot;, ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
-
-&nbsp;&nbsp;&nbsp;// Genlist
-&nbsp;&nbsp;&nbsp;ad&gt;genlist = create_genlist(ad&gt;nf);
-
-&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;In Box&quot;, NULL, NULL, ad-&gt;genlist, NULL);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_pop_cb_set(nf_it, nf_it_pop_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_text_set(nf_it, &quot;subtitle&quot;, user_email);
-
-&nbsp;&nbsp;&nbsp;// Left panel toggle button
-&nbsp;&nbsp;&nbsp;btn1 = create_button(ad-&gt;nf, &quot;naviframe/drawers&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn1, &quot;clicked&quot;, _left_panel_button_clicked_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_left_btn&quot;, btn1);
-
-&nbsp;&nbsp;&nbsp;// Right compose button
-&nbsp;&nbsp;&nbsp;btn2 = create_button(ad-&gt;nf, NULL, &quot;&lt;font_size=20&gt;New&lt;/font_size&gt;&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn2, &quot;clicked&quot;, _composer_button_clicked_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, btn2);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the content of the view. First, the base layout is created. The drawer (panel) list and genlist are also created. The drawer and genlist are inserted in the layout. The drawer contains a list.</p>
-<pre class="prettyprint">
-static Evas_Object *
-create_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout;
-
-&nbsp;&nbsp;&nbsp;// Drawer layout
-&nbsp;&nbsp;&nbsp;layout = create_base_layout(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;// Panel
-&nbsp;&nbsp;&nbsp;ad-&gt;panel = create_panel(layout);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;elm.swallow.left&quot;, ad-&gt;panel);
-
-&nbsp;&nbsp;&nbsp;// Panel list
-&nbsp;&nbsp;&nbsp;ad-&gt;panel_list = create_panel_list(ad-&gt;panel);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;panel_list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;panel_list, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;panel_list, &quot;selected&quot;, _list_clicked_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;panel, ad-&gt;panel_list);
-
-&nbsp;&nbsp;&nbsp;return layout;
-}
-</pre>
-
-The <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function creates a genlist. The genlist has 2 item classes, group item and item. 
-<pre class="prettyprint">
-static Evas_Object *
-create_genlist(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;// Create item class
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *gitc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-
-&nbsp;&nbsp;&nbsp;gitc-&gt;item_style = &quot;groupindex&quot;;
-&nbsp;&nbsp;&nbsp;gitc-&gt;func.text_get = gl_text_get_cb;
-&nbsp;&nbsp;&nbsp;gitc-&gt;func.content_get = gl_content_get_cb;
-&nbsp;&nbsp;&nbsp;gitc-&gt;func.del = gl_del_cb;
-
-&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;2line.top.3&quot;;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = gl_text_get_cb;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = gl_content_get_cb;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.del = gl_del_cb;
-
-&nbsp;&nbsp;&nbsp;genlist = elm_genlist_add(parent);
-
-&nbsp;&nbsp;&nbsp;...
-
-&nbsp;&nbsp;&nbsp;int group_count = 0;
-&nbsp;&nbsp;&nbsp;for (index = 0; index &lt; n_items; index++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item_data_s *id = calloc(sizeof(item_data_s), 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = index;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (index % 10 == 0) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;group_count++;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = group_count;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git = elm_genlist_item_append(genlist, // Genlist object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gitc, // Item class
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id, // Item class user data
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, // Item type
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_selected_cb, // Select smart callback
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id); // Smart callback user data
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = git;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(genlist, // Genlist object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc, // Item class
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id, // Item class user data
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git, // Parent item
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, // Item type
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_selected_cb, // Select smart callback
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id); // Smart callback user data
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = it;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;elm_genlist_item_class_free(gitc);
-&nbsp;&nbsp;&nbsp;elm_genlist_item_class_free(itc);
-&nbsp;&nbsp;&nbsp;evas_object_show(genlist);
-
-&nbsp;&nbsp;&nbsp;return genlist;
-}
-</pre>
-
-<h2>Compose View</h2>
-
-<p>The following figure illustrates the main screen of the Compose view, its wireframe structure, and the UI component tree.</p>
-
-    <p class="figure">Figure: Compose view</p> 
-  <p align="center"><img alt="Email compose view" src="../images/ui_email_sd_compose_view.png" /></p>  
-  <p align="center"><img alt="Email compose UI component tree" src="../images/ui_email_sd_compose_widget_tree.png" /></p>  
-
-<pre class="prettyprint">evas_object_smart_callback_add(btn, &quot;clicked&quot;, _composer_button_clicked_cb, ad);
-</pre>
-
-<p>In this sample, a smart callback for clicking the compose button is added by default.</p>
-
-<p>The smart callback is called when the compose button is clicked. In this callback, the compose view is created. It consists of a scroller containing a box. The box contains 4 entries. The vertical weight of the box is 0.0, which means that the box resizes to the minimum size.</p>
-<pre class="prettyprint">
-static void
-_composer_button_clicked_cb(void *data, Evas_Object * obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;cdata_s *cd = calloc(1, sizeof(cdata_s));
-&nbsp;&nbsp;&nbsp;cd-&gt;ad = ad;
-&nbsp;&nbsp;&nbsp;Evas_Object *btn, *scroller, *main_box, *myemail, *to, *subject, *content;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
-
-&nbsp;&nbsp;&nbsp;scroller = create_scroller(ad-&gt;nf);
-
-&nbsp;&nbsp;&nbsp;// Append box
-&nbsp;&nbsp;&nbsp;main_box = create_box(scroller);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(main_box, EVAS_HINT_EXPAND, 0.0);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(main_box, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(main_box, 0, 30);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(scroller, main_box);
-
-&nbsp;&nbsp;&nbsp;// Use email
-&nbsp;&nbsp;&nbsp;myemail = create_entry(main_box, user_email, NULL);
-&nbsp;&nbsp;&nbsp;elm_entry_editable_set(myemail, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_entry_single_line_set(myemail, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(myemail, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(myemail, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(main_box, myemail);
-
-&nbsp;&nbsp;&nbsp;// To
-&nbsp;&nbsp;&nbsp;to = create_entry(main_box, NULL, &quot;To&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(to, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(to, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(main_box, to);
-&nbsp;&nbsp;&nbsp;cd-&gt;to = to;
-
-&nbsp;&nbsp;&nbsp;// Subject
-&nbsp;&nbsp;&nbsp;subject = create_entry(main_box, NULL, &quot;Subject&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(subject, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(subject, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(main_box, subject);
-&nbsp;&nbsp;&nbsp;cd-&gt;subject = subject;
-
-&nbsp;&nbsp;&nbsp;// Content
-&nbsp;&nbsp;&nbsp;content = create_entry(main_box, NULL, &quot;Compose email&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(content, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(content, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(main_box, content);
-&nbsp;&nbsp;&nbsp;cd-&gt;content = content;
-
-&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;Compose&quot;, NULL, NULL, scroller, NULL);
-
-&nbsp;&nbsp;&nbsp;// Back button
-&nbsp;&nbsp;&nbsp;btn = create_button(ad-&gt;nf, &quot;naviframe/title_cancel&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn, &quot;clicked&quot;, _back_button_clicked_cb, cd);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_left_btn&quot;, btn);
-
-&nbsp;&nbsp;&nbsp;// Send button
-&nbsp;&nbsp;&nbsp;btn = create_button(ad-&gt;nf, &quot;naviframe/title_done&quot;, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn, &quot;clicked&quot;, _send_button_clicked_cb, cd);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, btn);
-}
-</pre>
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>[UI Sample] Email Sample Overview</title>  \r
+</head>\r
+\r
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>\r
+       </div>\r
+\r
+  <h1>[UI Sample] Email Sample Overview</h1> \r
+\r
+<p>The [UI Sample] Email sample application demonstrates how to implement a complex view by a recursive composition of standard EFL UI components and containers in a UI component hierarchy.</p>\r
+<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span>, <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span>, <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>, and <span style="font-family: Courier New,Courier,monospace">elm_panel</span> for the UI component management inside the view, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside view.</p>   \r
+\r
+<h2>Main View</h2>\r
+\r
+<p>The following figure illustrates the main view of the [UI Sample] Email sample application, its wireframe structure, and the UI component tree.</p>\r
+\r
+    <p class="figure">Figure: [UI Sample] Email main view</p> \r
+  <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view.png" /></p>\r
+  <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view_widget.png" /></p>  \r
+  <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view_widget2.png" /></p> \r
+  \r
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the window which consists of an indicator (<span style="font-family: Courier New,Courier,monospace">elm_conformant</span>), view manager (<span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>), and the content created by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function. The drawer and compose button are inserted in the naviframe.</p>\r
+<pre class="prettyprint">\r
+static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *btn1, *btn2, *bg;\r
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;\r
+\r
+&nbsp;&nbsp;&nbsp;// Window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);\r
+&nbsp;&nbsp;&nbsp;elm_win_wm_desktop_layout_support_set(ad-&gt;win, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Conformant\r
+&nbsp;&nbsp;&nbsp;ad-&gt;conform =  elm_conformant_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);\r
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);\r
+\r
+&nbsp;&nbsp;&nbsp;// Indicator BG\r
+&nbsp;&nbsp;&nbsp;bg = elm_bg_add(ad&gt;conform);\r
+&nbsp;&nbsp;&nbsp;elm_object_style_set(bg, &quot;indicator/headerbg&quot;);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad&gt;conform, &quot;elm.swallow.indicator_bg&quot;, bg);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(bg);\r
+\r
+&nbsp;&nbsp;&nbsp;// Main view\r
+&nbsp;&nbsp;&nbsp;ad-&gt;base_ly = create_main_view(ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad&gt;conform, ad&gt;base_ly);\r
+\r
+&nbsp;&nbsp;&nbsp;// Naviframe\r
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;base_ly);\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad&gt;nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;base_ly, &quot;elm.swallow.content&quot;, ad-&gt;nf);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);\r
+\r
+&nbsp;&nbsp;&nbsp;// Genlist\r
+&nbsp;&nbsp;&nbsp;ad&gt;genlist = create_genlist(ad&gt;nf);\r
+\r
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;In Box&quot;, NULL, NULL, ad-&gt;genlist, NULL);\r
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_pop_cb_set(nf_it, nf_it_pop_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_item_part_text_set(nf_it, &quot;subtitle&quot;, user_email);\r
+\r
+&nbsp;&nbsp;&nbsp;// Left panel toggle button\r
+&nbsp;&nbsp;&nbsp;btn1 = create_button(ad-&gt;nf, &quot;naviframe/drawers&quot;, NULL);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn1, &quot;clicked&quot;, _left_panel_button_clicked_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_left_btn&quot;, btn1);\r
+\r
+&nbsp;&nbsp;&nbsp;// Right compose button\r
+&nbsp;&nbsp;&nbsp;btn2 = create_button(ad-&gt;nf, NULL, &quot;&lt;font_size=20&gt;New&lt;/font_size&gt;&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn2, &quot;clicked&quot;, _composer_button_clicked_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, btn2);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);\r
+}\r
+</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the content of the view. First, the base layout is created. The drawer (panel) list and genlist are also created. The drawer and genlist are inserted in the layout. The drawer contains a list.</p>\r
+<pre class="prettyprint">\r
+static Evas_Object *\r
+create_main_view(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *layout;\r
+\r
+&nbsp;&nbsp;&nbsp;// Drawer layout\r
+&nbsp;&nbsp;&nbsp;layout = create_base_layout(ad-&gt;conform);\r
+\r
+&nbsp;&nbsp;&nbsp;// Panel\r
+&nbsp;&nbsp;&nbsp;ad-&gt;panel = create_panel(layout);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;elm.swallow.left&quot;, ad-&gt;panel);\r
+\r
+&nbsp;&nbsp;&nbsp;// Panel list\r
+&nbsp;&nbsp;&nbsp;ad-&gt;panel_list = create_panel_list(ad-&gt;panel);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;panel_list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;panel_list, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;panel_list, &quot;selected&quot;, _list_clicked_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;panel, ad-&gt;panel_list);\r
+\r
+&nbsp;&nbsp;&nbsp;return layout;\r
+}\r
+</pre>\r
+\r
+The <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function creates a genlist. The genlist has 2 item classes, group item and item. \r
+<pre class="prettyprint">\r
+static Evas_Object *\r
+create_genlist(Evas_Object *parent)\r
+{\r
+&nbsp;&nbsp;&nbsp;...\r
+&nbsp;&nbsp;&nbsp;// Create item class\r
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *gitc = elm_genlist_item_class_new();\r
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();\r
+\r
+&nbsp;&nbsp;&nbsp;gitc-&gt;item_style = &quot;groupindex&quot;;\r
+&nbsp;&nbsp;&nbsp;gitc-&gt;func.text_get = gl_text_get_cb;\r
+&nbsp;&nbsp;&nbsp;gitc-&gt;func.content_get = gl_content_get_cb;\r
+&nbsp;&nbsp;&nbsp;gitc-&gt;func.del = gl_del_cb;\r
+\r
+&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;2line.top.3&quot;;\r
+&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = gl_text_get_cb;\r
+&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = gl_content_get_cb;\r
+&nbsp;&nbsp;&nbsp;itc-&gt;func.del = gl_del_cb;\r
+\r
+&nbsp;&nbsp;&nbsp;genlist = elm_genlist_add(parent);\r
+\r
+&nbsp;&nbsp;&nbsp;...\r
+\r
+&nbsp;&nbsp;&nbsp;int group_count = 0;\r
+&nbsp;&nbsp;&nbsp;for (index = 0; index &lt; n_items; index++) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item_data_s *id = calloc(sizeof(item_data_s), 1);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = index;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (index % 10 == 0) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;group_count++;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = group_count;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git = elm_genlist_item_append(genlist, // Genlist object\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gitc, // Item class\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id, // Item class user data\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, // Item type\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_selected_cb, // Select smart callback\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id); // Smart callback user data\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = git;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(genlist, // Genlist object\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc, // Item class\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id, // Item class user data\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git, // Parent item\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, // Item type\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_selected_cb, // Select smart callback\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id); // Smart callback user data\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = it;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;elm_genlist_item_class_free(gitc);\r
+&nbsp;&nbsp;&nbsp;elm_genlist_item_class_free(itc);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(genlist);\r
+\r
+&nbsp;&nbsp;&nbsp;return genlist;\r
+}\r
+</pre>\r
+\r
+<h2>Compose View</h2>\r
+\r
+<p>The following figure illustrates the main screen of the Compose view, its wireframe structure, and the UI component tree.</p>\r
+\r
+    <p class="figure">Figure: Compose view</p> \r
+  <p align="center"><img alt="Email compose view" src="../images/ui_email_sd_compose_view.png" /></p>  \r
+  <p align="center"><img alt="Email compose UI component tree" src="../images/ui_email_sd_compose_widget_tree.png" /></p>  \r
+\r
+<pre class="prettyprint">evas_object_smart_callback_add(btn, &quot;clicked&quot;, _composer_button_clicked_cb, ad);\r
+</pre>\r
+\r
+<p>In this sample, a smart callback for clicking the compose button is added by default.</p>\r
+\r
+<p>The smart callback is called when the compose button is clicked. In this callback, the compose view is created. It consists of a scroller containing a box. The box contains 4 entries. The vertical weight of the box is 0.0, which means that the box resizes to the minimum size.</p>\r
+<pre class="prettyprint">\r
+static void\r
+_composer_button_clicked_cb(void *data, Evas_Object * obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;cdata_s *cd = calloc(1, sizeof(cdata_s));\r
+&nbsp;&nbsp;&nbsp;cd-&gt;ad = ad;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *btn, *scroller, *main_box, *myemail, *to, *subject, *content;\r
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;\r
+\r
+&nbsp;&nbsp;&nbsp;scroller = create_scroller(ad-&gt;nf);\r
+\r
+&nbsp;&nbsp;&nbsp;// Append box\r
+&nbsp;&nbsp;&nbsp;main_box = create_box(scroller);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(main_box, EVAS_HINT_EXPAND, 0.0);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(main_box, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(main_box, 0, 30);\r
+&nbsp;&nbsp;&nbsp;elm_object_content_set(scroller, main_box);\r
+\r
+&nbsp;&nbsp;&nbsp;// Use email\r
+&nbsp;&nbsp;&nbsp;myemail = create_entry(main_box, user_email, NULL);\r
+&nbsp;&nbsp;&nbsp;elm_entry_editable_set(myemail, EINA_FALSE);\r
+&nbsp;&nbsp;&nbsp;elm_entry_single_line_set(myemail, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(myemail, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(myemail, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(main_box, myemail);\r
+\r
+&nbsp;&nbsp;&nbsp;// To\r
+&nbsp;&nbsp;&nbsp;to = create_entry(main_box, NULL, &quot;To&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(to, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(to, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(main_box, to);\r
+&nbsp;&nbsp;&nbsp;cd-&gt;to = to;\r
+\r
+&nbsp;&nbsp;&nbsp;// Subject\r
+&nbsp;&nbsp;&nbsp;subject = create_entry(main_box, NULL, &quot;Subject&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(subject, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(subject, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(main_box, subject);\r
+&nbsp;&nbsp;&nbsp;cd-&gt;subject = subject;\r
+\r
+&nbsp;&nbsp;&nbsp;// Content\r
+&nbsp;&nbsp;&nbsp;content = create_entry(main_box, NULL, &quot;Compose email&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(content, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(content, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(main_box, content);\r
+&nbsp;&nbsp;&nbsp;cd-&gt;content = content;\r
+\r
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;Compose&quot;, NULL, NULL, scroller, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Back button\r
+&nbsp;&nbsp;&nbsp;btn = create_button(ad-&gt;nf, &quot;naviframe/title_cancel&quot;, NULL);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn, &quot;clicked&quot;, _back_button_clicked_cb, cd);\r
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_left_btn&quot;, btn);\r
+\r
+&nbsp;&nbsp;&nbsp;// Send button\r
+&nbsp;&nbsp;&nbsp;btn = create_button(ad-&gt;nf, &quot;naviframe/title_done&quot;, NULL);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn, &quot;clicked&quot;, _send_button_clicked_cb, cd);\r
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, btn);\r
+}\r
+</pre>\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/volume_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/volume_sd_mn.htm
new file mode 100644 (file)
index 0000000..9ef2912
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/volume_sd_mn.htm
@@ -0,0 +1,204 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+       <title>Volume Sample Overview</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+       </div>
+  <h1>Volume Sample Overview</h1>
+<p>The Volume sample demonstrates how you can use the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API to acquire and set the device sound levels. The application window consists of a list of sliders that manage the levels of different volume types.</p>
+
+<p>When the application is launched, it acquires the values of the volume types and sets the sliders accordingly. Apart from manually managing the volumes using sliders, the application also reacts to changes made outside it, for example, in the device settings or using hardware buttons.</p>
+<p>The following figure illustrates the main screen of the application.</p>
+
+  <p class="figure">Figure: Volume screen</p>
+  <p align="center">
+    <img alt="Volume screen" src="../images/volume_sample_screenshot.png" />
+  </p>
+
+<h2>Prerequisites</h2>
+<p>The following privilege must be set:</p>
+ <ul>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/volume.set</span></li>
+ </ul>
+
+
+<h2>Implementation</h2>
+
+<p>The application uses the <span style="font-family: Courier New,Courier,monospace">volume_controller_type</span> enum to manage different volume types easily:</p>
+<pre class="prettyprint">
+typedef enum 
+{
+&nbsp;&nbsp;&nbsp;CONTROLLER_SYSTEM,
+&nbsp;&nbsp;&nbsp;CONTROLLER_NOTIFICATION,
+&nbsp;&nbsp;&nbsp;CONTROLLER_ALARM,
+&nbsp;&nbsp;&nbsp;CONTROLLER_RINGTONE,
+&nbsp;&nbsp;&nbsp;CONTROLLER_MEDIA,
+&nbsp;&nbsp;&nbsp;CONTROLLER_CALL,
+&nbsp;&nbsp;&nbsp;CONTROLLER_MAX
+} volume_controller_type;
+</pre>
+<p>The enum is designed to be compliant with the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__VOLUME__MODULE.html#gab0b52eeab59765b94c7a751097738a0b">sound_type_e</a> enum used by the Sound Manager API to avoid unnecessary types duplication.</p>
+<pre class="prettyprint">
+typedef enum
+{
+&nbsp;&nbsp;&nbsp;SOUND_TYPE_SYSTEM, // Sound type for system
+&nbsp;&nbsp;&nbsp;SOUND_TYPE_NOTIFICATION, // Sound type for notifications
+&nbsp;&nbsp;&nbsp;SOUND_TYPE_ALARM, // Sound type for alarm
+&nbsp;&nbsp;&nbsp;SOUND_TYPE_RINGTONE, // Sound type for ringtones
+&nbsp;&nbsp;&nbsp;SOUND_TYPE_MEDIA, // Sound type for media
+&nbsp;&nbsp;&nbsp;SOUND_TYPE_CALL, // Sound type for call
+&nbsp;&nbsp;&nbsp;SOUND_TYPE_VOIP, // Sound type for voip
+&nbsp;&nbsp;&nbsp;SOUND_TYPE_VOICE, // Sound type for voice
+} sound_type_e;
+</pre>
+<p>The 2 last sound types of the <span style="font-family: Courier New,Courier,monospace">sound_type_e</span> are not supported in this application.</p>
+
+<h3>Volume Manager Module</h3>
+
+<p>Before the volume level sliders are created, the maximum possible value must be known for each volume type. To retrieve this information, use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_max_volume()</span> function. It takes the <span style="font-family: Courier New,Courier,monospace">sound_type_e</span> enum as an in parameter and <span style="font-family: Courier New,Courier,monospace">int</span> as an out parameter.</p>
+<pre class="prettyprint">
+if (sound_manager_get_max_volume((sound_type_e)type, &amp;max_volume) != SOUND_MANAGER_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">volume_manager_get_volume()</span> and
+<span style="font-family: Courier New,Courier,monospace">volume_manager_set_volume()</span> functions manage the device sound levels. To get the volume level for each sound type, use the <span style="font-family: Courier New,Courier,monospace">sound_manager_get_volume()</span> function. Similarly, to set the volume level, use the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_volume()</span> function. Both the functions require a <span style="font-family: Courier New,Courier,monospace">sound_type_e</span> value to be passed.</p>
+<pre class="prettyprint">
+int
+volume_manager_get_volume(volume_controller_type type)
+{
+&nbsp;&nbsp;&nbsp;int volume = -1;
+
+&nbsp;&nbsp;&nbsp;if (sound_manager_get_volume((sound_type_e)type, &amp;volume) != SOUND_MANAGER_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return volume;
+}
+
+bool
+volume_manager_set_volume(volume_controller_type type, int value)
+{
+&nbsp;&nbsp;&nbsp;if (sound_manager_set_volume((sound_type_e)type, value) != SOUND_MANAGER_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>To react to volume level changes made outside the application, set a callback function for the volume change event with the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_volume_changed_cb()</span> function.</p>
+
+<p>The callback in this sample application invokes the <span style="font-family: Courier New,Courier,monospace">view_set_volume_value()</span> function to update the UI. Both the <span style="font-family: Courier New,Courier,monospace">sound_type_e</span> enum and the new volume value are passed to the callback function as parameters to introduce the changes to the UI correctly.</p>
+<pre class="prettyprint">
+if (sound_manager_set_volume_changed_cb(__volume_changed_cb, NULL) != SOUND_MANAGER_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp; // Error handling
+}
+
+static void
+__volume_changed_cb(sound_type_e type, unsigned int volume, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;view_set_volume_value((volume_controller_type)type, (double)volume);
+}
+</pre>
+
+<p>When the callback function is no longer needed, unset it using the <span style="font-family: Courier New,Courier,monospace">sound_manager_unset_volume_changed_cb()</span> function.</p>
+<pre class="prettyprint">
+if (sound_manager_unset_volume_changed_cb() != SOUND_MANAGER_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;// Error handling
+</pre>
+
+<h3>View Manager Module</h3>
+
+<p>A controller is created for each of the volume types. The controller consists of a volume type label, volume value label, and a slider for manually changing the value. Each controller has a custom EDJ layout.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+__create_controller(volume_controller_type type)
+{
+&nbsp;&nbsp;&nbsp;// Variable declaration
+
+&nbsp;&nbsp;&nbsp;__app_get_resource(EDJ_ITEM_FILE, edj_item_path, (int)PATH_MAX);
+
+&nbsp;&nbsp;&nbsp;item_layout = elm_layout_add(s_viewdata.layout);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(item_layout, edj_item_path, GRP_MAIN);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(item_layout, PART_ITEM_TYPE_TEXT, volume_item_title[type]);
+
+&nbsp;&nbsp;&nbsp;slider = __create_slider(item_layout);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, "changed", _slider_changed_cb, (void*)type);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(item_layout, PART_ITEM_SLIDER, slider);
+
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(s_viewdata.layout, volume_item_part_name[type], item_layout);
+
+&nbsp;&nbsp;&nbsp;return item_layout;
+}
+</pre>
+
+<p>A callback function is set for the slider change event. When the user manually changes the slider value, the <span style="font-family: Courier New,Courier,monospace">_slider_changed_cb()</span> function is invoked, which in turn invokes the <span style="font-family: Courier New,Courier,monospace">volume_manager_set_volume()</span> function to change the proper sound level on the device.</p>
+
+<pre class="prettyprint">
+static void
+_slider_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;// Variable declaration
+
+&nbsp;&nbsp;&nbsp;type = (volume_controller_type)data;
+&nbsp;&nbsp;&nbsp;value = elm_slider_value_get(obj);
+
+&nbsp;&nbsp;&nbsp;__set_controller_value_label(s_viewdata.volume_controller[type], value);
+&nbsp;&nbsp;&nbsp;volume_manager_set_volume(type, value);
+}
+</pre>
+
+  
+  
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_w/appcalleecaller_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/appcalleecaller_mw.htm
deleted file mode 100644 (file)
index e73b52d..0000000
--- a/org.tizen.sampledescriptions/html/mobile_w/appcalleecaller_mw.htm
+++ /dev/null
@@ -1,168 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>
-       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-
-       <title>AppCaller and AppCallee Sample Overview</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
-       </div>
-
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm">Application Guide</a></li>
-                       <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
-               </ul>
-       </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-  <h1>AppCaller and AppCallee Sample Overview</h1>
-  <p>The AppCaller and AppCallee sample applications demonstrate how you can use the application control to call other applications based on the operation type.</p>
-  <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
-  <p>The following figure illustrates the main screens of the AppCaller and AppCallee.</p>
-  <p class="figure">Figure: AppCaller and AppCallee screens</p>
-  <p align="center"><img alt="AppCaller and AppCallee screens" src="../images/appcalleecaller_mw.png" /> </p>
-
-
-  <p>The AppCaller application is used to call the AppCallee application, which returns an emoji to the AppCaller:</p>
-
-<ol><li>In the AppCaller, make the call by clicking <strong>Call App</strong>.
-<p>In the AppCallee, information about the call is displayed on the screen along with a list of emojis. </p></li>
-<li>In the AppCallee, click the emoji you want to return to the AppCaller.
-<p>The AppCaller displays the selected emoji.</p></li></ol>
-
-<h2>Prerequisites</h2>
-
-<ul><li><p>Since the AppCaller and AppCallee applications work best along with each other, both applications must be installed before you try to run either of them.</p></li></ul>
-
-
-  <h2>Source Files</h2>
-  <p>You can create and view the sample application project including the source files in the IDE.</p>
-  <table border="1">
-   <tbody>
-    <tr>
-     <th>File name</th>
-     <th>Description</th>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">appcallee/config.xml</span></td>
-     <td>This file contains the application information for the platform to install and launch the application, including the operation type of the application.</td>
-    </tr>
-    <tr>
-    <td><span style="font-family: Courier New,Courier,monospace">appcallee/css/style.css</span></td>
-    <td>This file contains CSS styling for the application UI.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">appcallee/image/</span></td>
-     <td>This directory contains the images used to create the user interface.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">appcallee/index.html</span></td>
-     <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">appcallee/js/main.js</span></td>
-     <td>This file contains the code for handling the main application functionalities.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">appcaller/config.xml</span></td>
-     <td>This file contains the application information for the platform to install and launch the application.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">appcaller/css/style.css</span></td>
-     <td>This file contains CSS styling for the application UI.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">appcaller/image/</span></td>
-     <td>This directory contains the images used to create the user interface.</td>
-    </tr>
-    <tr>
-       <td><span style="font-family: Courier New,Courier,monospace">appcaller/index.html</span></td>
-     <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
-    </tr>
-    <tr>
-     <td><span style="font-family: Courier New,Courier,monospace">appcaller/js/main.js</span></td>
-     <td>This file contains the code for handling the main application functionalities.</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Emoji set used in this application was designed and offered free by Emoji One. For more information on their license terms, see the <a href="http://emojione.com/" target="_blank">Emoji One</a> site.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<h2>Implementation</h2>
-
-<p>In the AppCallee application, the <span style="font-family: Courier New, Courier,monospace">&lt;tizen:app-control/&gt;</span> element of the configuration file provides a service description for the application control. The operation name describes an action to be performed by the application.</p>
-   <pre class="prettyprint">
-&lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;index.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/appcall&quot;/&gt;
-&lt;/tizen:app-control&gt; </pre>
-
-<p>In the AppCaller application, the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> interface (consisting of an operation, URI, MIME type, and data) describes an action to be performed by the Callee application. When the system gets the application control request, it finds the corresponding application to perform the requested application control and launches the selected application.</p>
-<pre class="prettyprint">
-AppControl = new tizen.ApplicationControl(&#39;http://tizen.org/appcontrol/operation/appcall&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null);
-</pre>
-<p>In the AppCallee application, the <span style="font-family: Courier New,Courier,monospace">replyAppCaller()</span> function replies back to the AppCaller with the data on the selected emoji:</p>
-<ul><li>The application control request passed to the AppCallee can be accessed by the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> function. The passed application control contains the reason the application was launched and information about what the application is doing.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> interface defines the key-value pair used to pass data between applications, and it is sent to the AppCaller through the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> function of the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">RequestedApplicationControl</a> interface.</li></ul>
-<pre class="prettyprint">
-function replyAppCaller(text)
-{
-&nbsp;&nbsp;&nbsp;reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
-
-&nbsp;&nbsp;&nbsp;/* Construct result data */
-&nbsp;&nbsp;&nbsp;data = new tizen.ApplicationControlData(&quot;text&quot;, [text]);
-
-&nbsp;&nbsp;&nbsp;/* Reply to caller */
-&nbsp;&nbsp;&nbsp;reqAppControl.replyResult([data]);
-&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-}</pre>
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm
index 39e0c41..aee801d 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/calendar_mw.htm
@@ -182,7 +182,7 @@ function getDaysMatrix(date)
 &lt;/div&gt;
 </pre>
 
-<h3>Navigation between Months</h3>
+<h3>Navigation Between Months</h3>
 
 <p>To switch between months, the user clicks the buttons in the application footer. To handle the month switching, the application registers event listeners to the navigation buttons.</p>
 
diff --git a/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm
new file mode 100644 (file)
index 0000000..99acda4
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_w/fmradio_mw.htm
@@ -0,0 +1,282 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>FMRadio Sample Overview</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                  <li><a href="../../../org.tizen.guides/html/web/tizen/system/fm_radio_w.htm">FM Radio Guide</a></li> 
+                  <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html">FM Radio API</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>FMRadio Sample Overview</h1> 
+  <p>The FMRadio sample application demonstrates how you can play the FM radio, scan frequencies to find stations, and manage stations and save them in the HTML local storage.</p> 
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the screens of the FMRadio.</p> 
+  <p class="figure">Figure: FMRadio screens</p> 
+  <p align="center"><img alt="FMRadio screens" src="../images/fmradio_sd_mw.png" /> </p> 
+  <p>The application opens with the main screen, which shows the control panel of the radio:</p>
+  
+  <ul><li>In the circular widget, use the control buttons to change to the next or previous available station, change the current frequency ±0.1MHz, mute the radio, and scan the whole spectrum in order to find all available stations. 
+<p>The middle of the circular widget displays the currently played radio station.</p></li>
+<li>In the footer, use the buttons to navigate between saved stations. The middle button opens the stations screen.</li></ul>
+
+<p>The stations screen displays all stations found after clicking <strong>Scan</strong> in the circular widget on the main screen. On this screen,  you can manage the stations: remove or change the name of each station.</p>
+
+   <h2>Prerequisites</h2>  
+  <ul><li>Device with the FM Radio module</li></ul>
+  
+  
+  <h2>Source Files</h2> 
+  <p>You can create and view the sample application project including the source files in the IDE.</p> 
+  
+  <p>The application uses a simple MVC (Model-View-Controller) architectural model.</p>
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th>File name</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td> 
+     <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td> 
+    </tr> 
+       <tr>
+    <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+    <td>This directory contains the CSS styling for the application UI.</td>
+  </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td> 
+     <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/</span></td> 
+     <td>This directory contains the application code.</td> 
+    </tr>      
+        <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td> 
+     <td>This directory contains the application framework.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/models/radio.js</span></td> 
+     <td>This file contains the methods for handling radio data.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/models/stations.js</span></td> 
+     <td>This file contains the methods for handling radio station data.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/views/main.js</span></td> 
+     <td>This file contains the methods related to the main screen UI.</td> 
+    </tr>      
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/views/popup.js</span></td> 
+     <td>This file contains the methods related to popups.</td> 
+    </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/views/stationList.js</span></td> 
+     <td>This file contains the methods related to the stations screen UI.</td> 
+    </tr>      
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">templates/stationsListItem.tpl</span></td> 
+     <td>This file contains the template of the station list row. The HTML content of the list is generated from this template.</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+  
+<h2>Implementation</h2>
+<p>The application can work only if the FM Radio module is supported on the device. Additionally, the external antenna has to be connected to the device in order to switch on the radio. The following functions checks whether the radio is supported and the antennal connected:
+</p>
+
+<pre class="prettyprint">
+/* js/app.js */
+function isRadioSupported() 
+{
+&nbsp;&nbsp;&nbsp;var isSupported = false;
+
+&nbsp;&nbsp;&nbsp;try 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isSupported = tizen.systeminfo.getCapability(&#39;http://tizen.org/feature/fmradio&#39;);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;catch (error) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;No support for radio feature: &#39;, error.message);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;finally 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return isSupported;
+&nbsp;&nbsp;&nbsp;}
+}
+
+function isAntennaConnected() 
+{
+&nbsp;&nbsp;&nbsp;return tizen.fmradio.isAntennaConnected;
+}
+</pre>
+
+<p>When the application starts, the <span style="font-family: Courier New,Courier,monospace">init()</span> methods check the application requirements, set up all event handlers, and initialize the radio:</p>
+
+<pre class="prettyprint">
+/* js/app.js */
+function init() 
+{
+&nbsp;&nbsp;&nbsp;if (checkRequirements()) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main.initialize(); /* Call views/main.js init() */
+&nbsp;&nbsp;&nbsp;}
+}
+
+/* js/views/main.js */
+function init() 
+{
+&nbsp;&nbsp;&nbsp;bindEvents(); /* Bind all events */
+&nbsp;&nbsp;&nbsp;refreshStationButtons(); /* Refresh main page UI */ 
+&nbsp;&nbsp;&nbsp;radio.initialize(); /* Initialize the radio */
+}
+</pre>
+
+<p>After initializing, the radio is ready to be played. The following functionalities are provided:</p>
+<ul>
+<li>Starting the radio:
+
+<pre class="prettyprint">
+/* js/models/radio.js */
+function start(freq) 
+{
+&nbsp;&nbsp;&nbsp;if (radio.state !== radioState.SCAN) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radio.start(freq);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+<li>Stopping the radio:
+
+<pre class="prettyprint">
+/* js/models/radio.js */
+function stop() 
+{
+&nbsp;&nbsp;&nbsp;if (radio.state !== radioState.PLAY) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radio.stop();
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+<li>Muting the radio:
+
+<pre class="prettyprint">
+/* js/models/radio.js */
+function setMuted(isMuted) 
+{
+&nbsp;&nbsp;&nbsp;radio.mute = isMuted;
+}
+</pre></li>
+<li>Scanning the whole frequency spectrum.
+<p>The <span style="font-family: Courier New,Courier,monospace">radio.scanStart()</span> function takes an object containing 2 callbacks (<span style="font-family: Courier New,Courier,monospace">onfrequencyfound</span> and <span style="font-family: Courier New,Courier,monospace">onfinished</span> as the first parameter and the error callback as the second parameter. The <span style="font-family: Courier New,Courier,monospace">onfrequencyfound</span> callback is called for each found station, while the <span style="font-family: Courier New,Courier,monospace">onfinished</span> callback is called when the scanning is finished.</p>
+
+<pre class="prettyprint">
+/* js/models/radio.js */
+var scanCallback = {
+&nbsp;&nbsp;&nbsp;onfrequencyfound: function onFrequencyFound(frequency) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Found a frequency */
+&nbsp;&nbsp;&nbsp;},
+    
+&nbsp;&nbsp;&nbsp;onfinished: function onFinished(frequencies) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Finished finding all frequencies */
+&nbsp;&nbsp;&nbsp;}
+};
+
+function scanStart() 
+{
+&nbsp;&nbsp;&nbsp;if (radio.state === radioState.PLAY) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radio.stop();
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;radio.scanStart(scanCallback, errorCallback);
+}
+</pre></li>
+<li>Stopping the scan.
+<p>The <span style="font-family: Courier New,Courier,monospace">radio.scanStop()</span> function takes a success callback function and error callback function as parameters.</p>
+
+<pre class="prettyprint">
+/* js/models/radio.js */
+function scanStop() 
+{
+&nbsp;&nbsp;&nbsp;if (radio.state === radioState.SCAN) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radio.scanStop(scanStopSuccess, errorCallback);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+<li>Finding the nearest station with a greater or lower frequency than the currently played one:
+<p>Both the <span style="font-family: Courier New,Courier,monospace">radio.seekUp()</span> and <span style="font-family: Courier New,Courier,monospace">radio.seekDown()</span> functions take a success and error callback as parameters. The success callback is called with the found frequency.</p>
+
+<pre class="prettyprint">
+/* js/models/radio.js */
+
+/* Nearest station with a greater frequency */
+function seekUp(successCb) 
+{
+&nbsp;&nbsp;&nbsp;if (radio.state === radioState.PLAY) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radio.seekUp(successCb, errorCallback);
+&nbsp;&nbsp;&nbsp;}
+}
+
+/* Nearest station with a lower frequency */
+function seekDown(successCb) 
+{
+&nbsp;&nbsp;&nbsp;if (radio.state === radioState.PLAY) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radio.seekDown(successCb, errorCallback);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+</ul>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm
index 87a7060..6b235af 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm
@@ -39,13 +39,6 @@
      <th style="text-align:center;margin-left:auto;margin-right:auto;">Sample name</th> 
      <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
     </tr> 
-    <tr>
-     <td><a href="appcalleecaller_mw.htm">AppCaller and AppCallee</a></td>
-     <td>Demonstrates how you can use the application control to call other applications based on the operation type using:
-     <ul>
-       <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
-     </ul></td>
-    </tr>
        <tr>
      <td><a href="archivemanager_mw.htm">ArchiveManager</a></td>
      <td>Demonstrates how you can create, browse, and manage archive file using:
@@ -156,7 +149,15 @@
       <ul> 
        <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem</a> API</li> 
       </ul><p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm">Task: File Manager</a>.</p> </td> 
-    </tr>      
+    </tr>
+    <tr> 
+     <td><a href="fmradio_mw.htm">FMRadio</a></td> 
+     <td>Demonstrates how you can listen to the FM radio and manage the stations using: 
+      <ul> 
+          <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html">FM Radio</a> API</li> 
+      </ul> 
+         </td> 
+    </tr>      
        <tr>
                <td><a href="hellotizen_mw.htm">HelloTizen</a></td>
                <td>Demonstrates how you can receive hardware key events and display text on the screen using:
@@ -208,6 +209,14 @@
          <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm">Task: Sensor Ball</a>.</p></td> 
     </tr> 
     <tr> 
+     <td><a href="soundmanager_mw.htm">SoundManager</a></td> 
+     <td>Demonstrates how you can manage custom sound profiles using: 
+      <ul> 
+          <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">Sound</a> API</li> 
+      </ul> 
+         </td> 
+    </tr>      
+    <tr> 
      <td><a href="systeminfo_mw.htm">Systeminfo</a></td> 
      <td>Demonstrates how you can retrieve system-related information and display it in your application using: 
       <ul> 
@@ -219,7 +228,7 @@
      <td><a href="winset_mw.htm">TizenWinset</a></td> 
      <td>Demonstrates how you can use Tizen Advanced UI (TAU) UI components using: 
       <ul> 
-       <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework</a> Reference</li> 
+       <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a> Reference</li> 
       </ul> 
          <p>This sample is also explained in the <a href="../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm">UI Component Reference</a>.</p></td> 
     </tr>
diff --git a/org.tizen.sampledescriptions/html/mobile_w/soundmanager_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/soundmanager_mw.htm
new file mode 100644 (file)
index 0000000..7e344b8
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_w/soundmanager_mw.htm
@@ -0,0 +1,325 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>SoundManager Sample Overview</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                  <li><a href="../../../org.tizen.guides/html/web/tizen/multimedia/sound_w.htm">Sound Guide</a></li> 
+                  <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">Sound API</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>SoundManager Sample Overview</h1> 
+  <p>The SoundManager sample application demonstrates how you can manage custom sound profiles. A sound profile is a structure consisting of a unique name and a list of volume values of all available sound types, such as ringtone, notification, and alarm.</p> 
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the screens of the SoundManager.</p> 
+  <p class="figure">Figure: SoundManager screens</p> 
+  <p align="center"><img alt="SoundManager screens" src="../images/soundmanager_sd_mw.png" /> </p> 
+  <p>The application opens with the main screen, which lists the created sound profiles. The profile without the <strong>Set</strong> button is currently active.</p>
+  
+  <p>On the main screen:</p>
+ <ul><li>To active a profile, click <strong>Set</strong>. 
+ <p>The system sound settings are set up with the profiles values.</p></li>
+ <li>To add a new profile, click <strong>+</strong> in the top left corner.
+<p>The new profile is initialized with the current system sound settings and you can specify its name.</p></li>
+<li>To modify an existing profile, click it in the list.
+<p>The profile details screen opens:</p>
+<ul><li>To change the values of various sound types, use the sliders. When an active profile is changed, the changes are applied directly to the system settings.</li>
+<li>To restore the profile values to the state when the screen opened, click <strong>Reset</strong>.</li>
+<li>To delete the profile, click <strong>Delete</strong>.</li></ul></li></ul>
+
+  
+  <h2>Source Files</h2> 
+  <p>You can create and view the sample application project including the source files in the IDE.</p> 
+  
+  <p>The application uses a simple MVC (Model-View-Controller) architectural model.</p>
+  <table border="1"> 
+   <tbody> 
+    <tr> 
+     <th>File name</th> 
+     <th>Description</th> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td> 
+     <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td> 
+    </tr> 
+       <tr>
+    <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+    <td>This directory contains the CSS styling for the application UI.</td>
+  </tr>
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td> 
+     <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td> 
+    </tr>
+       <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/</span></td> 
+     <td>This directory contains the application code.</td> 
+    </tr>      
+        <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td> 
+     <td>This directory contains the application framework.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/models/</span></td> 
+     <td>This directory contains the application model modules.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td> 
+     <td>This directory contains the implementation code for the application views.</td> 
+    </tr> 
+    <tr> 
+     <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td> 
+     <td>This directory contains the templates of the list items.</td> 
+    </tr>      
+   </tbody> 
+  </table> 
+  
+<h2>Implementation</h2>
+<p>To implement the main module managing custom sound profiles:</p>
+
+<ol><li>Define variables:
+<ul><li><span style="font-family: Courier New,Courier,monospace">currentProfileId</span>: Object containing the current profile values</li>
+<li><span style="font-family: Courier New,Courier,monospace">profiles</span>: Array of all profiles</li>
+<li><span style="font-family: Courier New,Courier,monospace">SOUND_TYPES</span>: Array containing all available sound types</li>
+<li><span style="font-family: Courier New,Courier,monospace">activeProfileId</span>: ID of the active profile or <span style="font-family: Courier New,Courier,monospace">null</span> if there is no active profile</li></ul>
+
+<pre class="prettyprint">
+var currentProfile = {},
+&nbsp;&nbsp;&nbsp;&nbsp;profiles = [],
+&nbsp;&nbsp;&nbsp;&nbsp;SOUND_TYPES = 
+&nbsp;&nbsp;&nbsp;&nbsp;[
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;SYSTEM&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;NOTIFICATION&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;ALARM&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;MEDIA&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;VOICE&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;RINGTONE&#39;
+&nbsp;&nbsp;&nbsp;&nbsp;],
+&nbsp;&nbsp;&nbsp;&nbsp;activeProfileId = null;
+</pre>
+
+<p>The sound profile is represented by an object with the following fields:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">id</span>: Unique identifier of the profile</li>
+<li><span style="font-family: Courier New,Courier,monospace">title</span>: Title of the profile</li>
+<li><span style="font-family: Courier New,Courier,monospace">XXX</span>: Value of the XXX sound type, where XXX is a <span style="font-family: Courier New,Courier,monospace">SOUND_TYPES</span> value</li>
+</ul>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;id: 1313,
+&nbsp;&nbsp;&nbsp;title: &#39;Custom Profile&#39;,
+&nbsp;&nbsp;&nbsp;SYSTEM: 0.1,
+&nbsp;&nbsp;&nbsp;NOTIFICATION: 0.2,
+&nbsp;&nbsp;&nbsp;ALARM: 0.3,
+&nbsp;&nbsp;&nbsp;MEDIA: 0.5,
+&nbsp;&nbsp;&nbsp;VOICE: 0,
+&nbsp;&nbsp;&nbsp;RINGTONE: 1
+}
+</pre></li>
+<li>
+<p>Initialize the application by first loading the current system profile and storing it in the <span style="font-family: Courier New,Courier,monospace">currentProfile</span> object. Next, register a changing volume listener that updates the <span style="font-family: Courier New,Courier,monospace">currentProfile</span> object and clears the <span style="font-family: Courier New,Courier,monospace">activeProfileId</span> variable (volume is changed so the current system profile is different than the active profile; therefore, the active profile stops being active).
+</p>
+
+<pre class="prettyprint">
+function init() 
+{
+&nbsp;&nbsp;&nbsp;var i = 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundType = null;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; SOUND_TYPES.length; i += 1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundType = SOUND_TYPES[i];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentProfile[soundType] = tizen.sound.getVolume(soundType);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (e) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(e.message);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;try 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.sound.setVolumeChangeListener(onVolumeChanged);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;catch (e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(e.message);
+&nbsp;&nbsp;&nbsp;}
+}
+
+function onVolumeChanged(soundType, volume) 
+{
+&nbsp;&nbsp;&nbsp;if (currentProfile[soundType] !== volume) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentProfile[soundType] = volume;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (activeProfileId !== null) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activeProfileId = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">setActive()</span> method that sets a profile active:</p>
+
+<pre class="prettyprint">
+function setActive(id) 
+{
+&nbsp;&nbsp;&nbsp;if (activeProfileId !== id) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeSystemProfile(getProfile(id));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activeProfileId = id;
+&nbsp;&nbsp;&nbsp;}
+}
+
+function getProfile(id) 
+{
+&nbsp;&nbsp;&nbsp;var i = 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;profile = null;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; profiles.length; i += 1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;profile = profiles[i];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (profile.id === id) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return profile;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return null;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">changeSystemProfile()</span> method changes the system profile values to values from the specified profile:</p>
+<pre class="prettyprint">
+function changeSystemProfile(profile) 
+{
+&nbsp;&nbsp;&nbsp;var i = 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundType = null;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; SOUND_TYPES.length; i += 1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundType = SOUND_TYPES[i];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeSystemSoundVolume(soundType, profile[soundType]);
+&nbsp;&nbsp;&nbsp;}
+}
+
+function changeSystemSoundVolume(soundType, volume) 
+{
+&nbsp;&nbsp;&nbsp;try 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentProfile[soundType] = volume;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.sound.setVolume(soundType, volume);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;catch (e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;Setting &#39; + soundType + &#39; error: &#39; + e.message);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+<li>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">createProfile()</span> method that creates a new profile with values from the system settings. The method obtains the title of the created profile. The following code takes advantage of the fact that sound settings are contained in the <span style="font-family: Courier New,Courier,monospace">currentProfile</span> object.</p> 
+
+<pre class="prettyprint">
+function createProfile(title) 
+{
+&nbsp;&nbsp;&nbsp;var currentProfileCopy = JSON.parse(JSON.stringify(currentProfile)),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id = profiles.length ? profiles[profiles.length - 1].id + 1 : 0;
+&nbsp;&nbsp;&nbsp;currentProfileCopy.title = title;
+&nbsp;&nbsp;&nbsp;currentProfileCopy.id = id;
+&nbsp;&nbsp;&nbsp;profiles.push(currentProfileCopy);
+}
+</pre></li>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">updateProfile()</span> method to update the specified profile. In this method, you can use the functions defined in the previous steps.
+<p>The method obtains the ID of the profile that you want to change, the name of the sound type, and the new value.</p>
+
+<pre class="prettyprint">
+function updateProfile(profileId, soundType, volume) 
+{
+&nbsp;&nbsp;&nbsp;var profile = getProfile(profileId);
+
+&nbsp;&nbsp;&nbsp;if (profile) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;profile[soundType] = volume;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (profile.id === activeProfileId) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeSystemSoundVolume(soundType, volume);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">deleteProfile()</span> method that deletes the profile with the specified ID. 
+ 
+<pre class="prettyprint">
+function deleteProfile(id) 
+{
+&nbsp;&nbsp;&nbsp;var index = getProfileIndex(id);
+&nbsp;&nbsp;&nbsp;if (index !== -1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;profiles.splice(index, 1);
+&nbsp;&nbsp;&nbsp;}
+}
+
+function getProfileIndex(profileId) 
+{
+&nbsp;&nbsp;&nbsp;var i = 0;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; profiles.length; i += 1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (profiles[i].id === profileId) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return -1;
+}
+</pre> </li></ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.sampledescriptions/html/mobile_w/winset_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/winset_mw.htm
index f58a3ba..327f8f3 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_w/winset_mw.htm
+++ b/org.tizen.sampledescriptions/html/mobile_w/winset_mw.htm
@@ -24,8 +24,8 @@
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW) Guide</a></li> 
-                       <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework</a></li>
+                       <li><a href="../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU UI Guide</a></li> 
+                       <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li>
                </ul>
        </div></div>
 </div> 
diff --git a/org.tizen.sampledescriptions/html/scripts/common.js b/org.tizen.sampledescriptions/html/scripts/common.js
index 60250b6..d46479a 100644 (file)
--- a/org.tizen.sampledescriptions/html/scripts/common.js
+++ b/org.tizen.sampledescriptions/html/scripts/common.js
@@ -1,1752 +1,1752 @@
-$(document).ready(function(){
-       $('#contents table').each(function(){
-               if (!$(this).parent().hasClass('table')) {
-                       $(this).wrap('<div class="table"></div>');
-               }
-       });
-
-       // Lnb Menu Initialize
-       if($('div#contents').find('.lnb').length){
-               if($("ul li.events_news").size() > 0) {
-                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
-               }
-               initLnb();
-               initScript(staticURL + "/js/fixednavbar.js", function(){});
-       }
-
-       //family site
-       if($('div#footer').find('dl#familySlider').length){
-               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
-       }
-
-       // Svn Commit Test
-       
-       // Language Selection
-       if($('div#header').find('.util').length){
-               var $lang = $('div#header').find('.util');
-               $lang.find('a.lang').toggle(function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
-                       },function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
-                       });
-
-               $lang.bind('mouseleave',function(){
-                       $(this).find('ul.language').hide();
-                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-               });
-
-               $lang.find('ul.language').children().last().on("keydown", function(e) {
-                       if(e.which == 9 && e.shiftKey) {
-                               return true;
-                       }
-                       
-                       if(e.which == 9) {
-                               e.preventDefault();
-                               $lang.find('ul.language').hide();
-                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-                               setTimeout(function() {
-                                       $("#searchTop").focus();
-                               }, 1);
-                       }
-               });
-       }
-
-       // Open the Sitemap
-       var $open = $('div#header').find('.bt-open');
-       $open.bind('click',function(){
-               var $self = $(this);
-               var $sitemap = $('div#wrapper').find('div#sitemap');
-               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
-
-               if($sitemap.is(':visible')){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
-
-                       $self.attr('title','open sitemap');
-               }else{
-                       var source = $self.css('background-image').replace('.gif','_.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
-
-                       $self.attr('title','close sitemap');
-               }
-               
-               $self.css('background-image',source);
-               $sitemap.slideToggle('fast');
-               
-               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       $self.css('background-image',source);
-                       $sitemap.slideToggle('fast');
-               });
-
-       });
-
-       // Search Auto Complete
-       var $search = $('div#header').find('fieldset.search');
-       var $searchList = $search.find('#topAutocomplete>ul');
-
-       if($search.length){
-               $search.find('> input').each(function(){
-                       $(this).bind({
-                               keydown : function(e){
-                       
-                                       if(e.type=='keydown'&& $(this).val().length!=0){
-                                               $search.find('#topAutocomplete').show();
-                                               var hei = $searchList.outerHeight();
-                                               if(hei>400){
-                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
-                                               }
-                                       }
-                                       if(e.keyCode==9){
-                                               $search.unbind('focusout.search');
-                                       }
-                                       if(e.keyCode==40){
-                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
-                                               //window.scrollTo(0,0);
-                                       }
-                               },
-                               focusin : function(e){
-                                       if($(this).val()==='Search'){
-                                               $(this).val('');
-                                       }
-                               },
-                               focusout : function(e){
-                                       if($(this).val().length==0) $(this).val('Search');
-                               }
-                       });
-               });
-
-               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
-               //      if(e.keyCode==40){
-               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
-               //      }
-               //});
-
-               $search.find('#topAutocomplete').bind('mouseleave',function(e){
-                       if($search.find('> input').val().length==0){
-                               $search.find('> input').val('Search');
-                       }
-                       $search.find('#topAutocomplete').hide();
-               });
-
-               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
-                       $search.find('> input').val('Search');
-                       $search.find('#topAutocomplete').hide();
-                       
-                       //$search.bind('focusout.search', function(){
-                       //      $(this).find('> input').val('Search');
-                       //      $(this).find('#topAutocomplete').hide();
-                       //});
-               });
-       }
-});
-
-// 비차단 동적 스크립트 로딩
-function initScript(url, callback){
-       var script = document.createElement("script");
-       script.type = "text/javascript";
-
-       if(script.readyState){ // 인터넷 익스플로러
-               script.onreadystatechange = function(){
-                       if(script.readyState=="loaded" || script.readyState=="complete"){
-                               script.onreadystatechange = null;
-                               callback();
-                       }
-               };
-       }else{  // 다른  브라우저
-               script.onload = function(){
-                       callback();
-               };
-       }
-
-       script.src = url;
-       document.getElementsByTagName("head")[0].appendChild(script);
-}
-
-
-// lnb
-function initLnb(){
-       var sMenu = $('.lnb');
-       var sItem = sMenu.find('>li');
-
-       sItem.each(function(){
-               if($(this).find('a').hasClass('more')){
-                       if($(this).find('ul').is(":visible")) {
-                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
-                       } else {
-                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
-                       }
-               }
-       });
-       
-       var setIcoArrText = function(obj) {
-               if(obj.next().is(":visible")) {
-                       obj.text("close submenu");
-               } else {
-                       obj.text("open submenu");
-               }
-       }
-       
-       sItem.find('.ico-arr').on("click", function() {
-               var $that = $(this);
-               var liBox = $that.parent();   
-               var ulBox = $that.next();
-               
-               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
-               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
-               
-               if(liBox.hasClass("on")) {
-                       if(ulBox.is(":visible")) {
-                               ulBox.hide();
-                               $that.addClass("ico-on");
-                       } else {
-                               ulBox.show();
-                               $that.removeClass("ico-on");
-                       }
-                       setIcoArrText($that);
-                       return true;
-               }
-               
-               if(liBox.hasClass("active")) {
-                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
-                       ulBox.hide();
-               } else {
-                       liBox.addClass("active").find("a").eq(0).addClass("bov");
-                       ulBox.show();
-               }
-               setIcoArrText($that);
-       });
-
-       sItem.hover(function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-               $(this).find("a").eq(0).addClass("bov");
-       },function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-                $(this).find("a").eq(0).removeClass("bov");
-
-       });
-}
-
-//footer rolling banner
-function fn_rollToEx(container,objectId,step,auto){
-
-       // 롤링할 객체를 변수에 담아둔다.
-       var el = $('#'+container).find('#'+objectId);
-       var lastChild;
-       var speed = 3000;
-       var timer = 0;
-       var autoplay = false;
-
-       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
-       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
-       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
-       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
-       el.data('animating',false);
-       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
-       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
-
-       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
-
-       if(arguments.length==4){
-               el.data('autoStart', auto);
-       }
-
-       if(el.data('autoStart')){
-               if(timer==0){
-                       timer = setInterval(moveNextSlide, speed);
-                       autoplay = true;
-               }
-       }
-
-       el.bind({
-               mouseenter:function(){
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-
-       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
-       el.data('prev').bind({
-               click:function(e){
-                       e.preventDefault();
-                       movePrevSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
-       el.data('next').bind({
-               click:function(e){
-                       e.preventDefault();
-                       moveNextSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       function movePrevSlide(){
-               if(!el.data('animating')){
-                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
-                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
-                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
-                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
-                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
-               
-                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
-
-                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-    function moveNextSlide(){
-               if(!el.data('animating')){
-                       el.data('animating',true);
-
-                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
-                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
-                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
-                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
-                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
-                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
-
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-}
-
-function fn_slide(options){
-
-       var opts = jQuery.extend({},options);
-
-       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
-       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
-       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
-       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
-       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
-       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
-       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
-       var auto = false;
-       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
-       var time;
-
-
-       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
-       effect = opts.effect;
-       auto = opts.auto;
-
-       if(auto){
-               time = setTimeout('slideShow()',3000);
-       }
-
-       slideShow = function(){
-
-               if(current < len-1){
-                       current++;
-               }else{
-                       current=0;
-               }
-
-               controllStatus();
-
-               moveControl('next');
-
-               time = setTimeout('slideShow()',3000);
-       }
-
-       controllStatus = function(){
-               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
-               if(current>0||current<len-1){                           
-                       $prev.show();
-                       $next.show();
-               }
-               if(current==0){
-                       $prev.hide();
-                       $next.show();
-               }
-               if(current>=len-1){
-                       $prev.show();
-                       $next.hide();
-               }
-       }
-
-       moveControl = function(msg){
-               if(opts.bt!=null){
-                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
-                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
-                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
-               }
-
-               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                       $obj.children().hide();
-                       $obj.children().eq(current).show();
-               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                       $obj.animate({'left':'-'+size*current},'slow');
-               }
-       }
-
-       $obj.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               }
-       });
-
-       //롤링 버튼 클릭시
-       $bt.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
-
-                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
-
-                       controllStatus();
-
-                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                               $obj.children().hide();
-                               $obj.children().eq(current).show();
-                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                               $obj.animate({'left':'-'+size*current},'slow');
-                       }
-
-                       // 모든 롤링 버튼을 비활성화
-                       $bt.each(function(){
-                               var source = $(this).find('img').attr('src').replace('_.png','.png');
-                                $(this).find('img').attr('src',source);
-                       });
-
-                       // 선택한 롤링버튼을 활성화
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-
-                       return false;
-               }
-       });
-
-       //이전 버튼 클릭시
-       $prev.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
-                       current--;                                                      //이미지 인덱스값 1씩 감소
-
-                       moveControl('prev');
-
-                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
-
-                       return false;
-               }
-       });
-
-       //다음 버튼 클릭시
-       $next.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       current++;                                                      //이미지 인덱스값 1씩 증가
-                       
-                       moveControl('next');
-
-                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
-                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
-
-                       return false;
-               }
-       });
-
-}
-
-// main rolling banner
-function slideMotion1(){
-       var $banner = $('#rolling .motionview'),
-               //$nav = $('#rolling ul.nav'),
-               banner = {prev:null, next:null},
-               size = $banner.children().length;
-               index = 1,
-               speed = 3000,
-               timer = null,
-               auto = true,
-               width = parseInt(100/size),
-               rest = parseInt(100%size);
-
-       var $nav = $('<ul class="nav">').insertAfter($banner);
-
-       $banner.children().each(function(index){
-               index++;
-               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
-               if(index==size){
-                       $nav.children().eq(-1).find('a').css('background-image','none');
-               }
-       });
-
-       if(rest>0){
-               width+=rest;
-               $nav.children().eq(-1).css('width',width+'%');
-       }
-
-       $nav.delegate("li",'click',function(){
-               var idx = $nav.children().index(this);
-               index = idx;
-               banner.prev = $banner.find('a.active');
-               banner.next = $banner.find('a').eq(index);
-
-               clearInterval(timer);
-               auto = false;
-               
-               $nav.trigger('change.banner',banner)
-                       .trigger('change.tab',index);
-
-               return false;
-       });
-
-       $nav.bind('change.banner',function(event, banner){
-               aniMotion();
-       });
-
-       $nav.bind('change.tab',function(event, index){
-               $nav.children().find('a').removeClass('sel');
-               $nav.children().eq(index).find('a').addClass('sel');
-       });
-
-       timer = setInterval(autoMotion, speed);
-
-       function autoMotion(){
-               if(index > size-1) index = 0;
-
-               aniMotion();
-       }
-
-       function aniMotion(){
-               if(auto){
-                       banner.prev = $banner.find('a.active');
-                       banner.next = $banner.find('a').eq(index);
-
-                       $nav.children().find('a').removeClass('sel');
-                       $nav.children().eq(index).find('a').addClass('sel');
-               }
-               banner.prev.addClass('last-active');
-               banner.next.css({'opacity':0.0})
-                       .addClass('active')
-                       .animate({'opacity':1.0}, 1000, function(){
-                               banner.prev.removeClass('active last-active');
-
-                               if(auto){
-                                       index++;
-                               }else{
-                                       index++;
-                                       timer = setInterval(autoMotion, speed*1.5);
-                                       auto = true;
-                               }
-                       });
-       }
-}
-
-// forum list show or hide function
-function toggleFunc(){
-       
-       var defaulNum = [2];
-
-       $('.forum-tit').each(function(){
-               var self = $(this);
-
-               var idx = $('.forum-tit').index(this);
-
-               for(i=0;i<=defaulNum.length;i++){
-                       if(idx==defaulNum[i]){
-                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
-                               self.find('a.toggle').css('background-image',source);
-
-                               self.find('a.toggle').text('Show');
-                               self.addClass('mb35').next().hide();
-                       }
-               }
-
-               self.find('a.toggle').click(function(){
-                       
-                       if(self.next().is(':visible')){
-                               var source = $(this).css('background-image').replace('.gif','_.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Show');
-                               self.addClass('mb35').next().hide();
-                       }else{
-                               var source = $(this).css('background-image').replace('_.gif','.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Hide');
-                               self.removeClass('mb35').next().show();
-                       }
-
-                       return false;
-
-               });
-
-       });
-}
-
-// 파일 업로드
-function fileUpload( width ){
-       //var $img = $('.attach input[type=image]');
-       //var width = $img.attr('width');
-
-       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
-       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
-
-       var $file = $('.attach input.upload').css({
-               "position": "absolute",
-               "top": "0px",
-               "right": "0px",
-               "width": w,
-               "cursor": "pointer",
-               "opacity": "0.0",
-               "height": "23px"
-       });
-       $file.off('change');
-       $file.on('change',function(e){
-               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
-                       return;
-               }
-               var idx = $file.index(this);
-               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
-               var fileErrMsg = {
-                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
-                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
-                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
-                           ,ext_ko : "지원하지 않는 확장자 입니다."
-                           ,ext_zh : "不允许上传具有该扩展名的文件。"
-                           ,ext_en : "File extention not allowed for upload."
-               };
-               var initFileInput = function(obj) {
-                       $(obj).parent().find('input.file').val("");
-                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
-                       else $(obj).val("");
-               };
-               
-               var filename = $(this).val();
-               
-               //CHK File ext
-               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
-                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
-                                     , "jpg", "png", "zip"];
-               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
-               var findFlag = false;
-               for(var i = 0; i < imgExts.length; i++) {
-                       if(imgExts[i] == fileExt) {
-                               findFlag = true;
-                               break;
-                       }
-               }
-       
-               if(findFlag == false) {
-                       alert( fileErrMsg["ext_" + localeCode] );
-                       initFileInput(this);
-//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
-                       return;
-               }
-               
-               //CHK File Size
-               if(
-                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
-                               || $.browser.mozilla //FF
-                               || $.browser.safari //Chrome
-               )
-               {
-                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
-                       if( filesize > 200 ) {
-                               alert( fileErrMsg["limit_" + localeCode] );
-                               initFileInput(this);
-                               return;
-                       }
-               }
-               
-               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
-       });
-};
-
-
-// Show or Hide Toggle
-function showToEx(args){
-
-       if(!arguments.length) return false;
-       
-       var bt = $('#'+args.bt);
-       var obj = $('#'+args.obj);
-
-       var source = bt.css('background-image');
-       
-       if(obj.is(':visible')){
-               obj.hide();
-       }
-
-       bt.toggle(function(){
-               var src = source.replace('.gif','_.gif');
-               bt.css('background-image', src);
-               obj.show();
-               
-               return false;
-       },function(){
-               var src = source.replace('_.gif','.gif');
-               bt.css('background-image', src);
-               obj.hide();
-
-               return false;
-       });
-
-}
-
-
-// FAQ 20131016
-function faqToEx(){
-
- var $question = $('#contents').find('.question');
- var $answer = $('#contents').find('.answer');
-
- // All Answer Rows Hide
- $answer.hide().find('.conts').hide();
-
- $question.each(function(){
-  var $self = $(this);
-  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
-  
-  $self.find('a').bind('click',function(){
-   $("#selArea ul").hide();
-   /*
-   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
-
-   $answer.hide().find('.conts').hide();
-   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
-   */
-
-   /* 20120822 hjh modify*/
-   /* if ( this open )?  close : all close, e.target open */
-   var cutTtl  = $(this).parent().children("div").html();
-   var ttl     = $(this).parent().parent().children("td.real_question").html();
-   
-   if($(this).parents('tr').next().find('.answer').is(':visible')){
-    $(this).html(cutTtl);
-    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
-     $answer.hide();
-    });
-   }else{
-    titleInit();
-    $(this).html(ttl);
-    $answer.hide().find('.conts').hide();
-    //$answer.slideUp('normal').find('.conts').hide();
-    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
-   }   
-
-   return false;
-  });
- });
-
- $answer.each(function(){
-  var $self = $(this);
-
-  $(this).find('a.bt-close-faq').bind('click',function(){
-   var question_td = $(this).parent().parent().parent().prev().children("td.question");
-   var cutTtl      = question_td.children("div").html();
-   question_td.children("a").html(cutTtl);
-   
-   $self.find('.conts').slideUp('fast',function(){
-    $self.hide();
-   });
-
-   return false;
-  });
- });
- 
- var titleInit = function() {
-  $question.each(function(i) {
-   $(this).find("a").html($(this).find("div").html());
-  });
- }
-}
-
-
-
-/**
- *  쓰기페이지 Tab 영역 컨트롤
- *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
- */
-function setSwitchTab( selector ) {
-       var tabs = $('.tab-list').find("li");
-       var elements = $( selector );
-
-       $( elements ).each( function( i ) {
-               if( i != 0 )
-               {
-                       $(this).hide();
-               }
-       })
-
-       // Control Tabs
-       $( tabs ).each( function( i ) {
-               $( this ).click( function(){
-                       resetClass();
-
-                       $( this ).find( 'a' ).addClass( "sel" );
-                       $( elements[i] ).show();
-
-                       return false;
-               });
-       });
-
-       // Class 리셋
-       function resetClass()
-       {
-               $( tabs ).each( function( i ) {
-                       $( this ).find( 'a' ).removeClass( 'sel' );
-               });
-
-               $( elements ).each( function( i ) {
-                       $( this ).hide();
-               });
-       }
-}
-
-var SET_ATTACH_LIMIT;
-var SET_ATTACH_WIDTH;
-var SET_ATTACH_BTNNAME;
-
-var firstAddAction = function(obj, limit, w, btnName) {
- var bn            = btnName || 'File';
- var fileAttachStr = "<li class='clfix no-first'>";
- fileAttachStr += '<div class="attach">';
- fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
- fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
- fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
- fileAttachStr += '</div>';
- fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
- fileAttachStr += '</li>';
- obj.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    $("a.remove-btn").eq(0).focus();
-   }, 1);
-  }
- });
- 
- obj.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- 
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-}
-
-var firstRemoveAction = function(id) {
- var obj = $("#" + id);
- var compFile    = $("input[type=file]");
- var compFileCnt = compFile.size();
- var ulObj       = compFile.eq(0).parent().parent().parent();
- if(compFileCnt <= 1) {
-  var firstCompFile = compFile.eq(0);
-  firstCompFile.prev().prev().val("");
-  if ($.browser.msie) {
-               $(obj).parent().find('input.file').val("");
-               firstCompFile.replaceWith( firstCompFile.clone(true) );
-       } else {
-               firstCompFile.val("");
-               firstCompFile.prev().prev().val("");
-  }
- } else {
-  obj.parent().remove();
-  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
-  
-  //add-btn event..
-  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
- }
- 
- ulObj
- .find("li")
- .eq(0)
- .removeClass("no-first")
- .find("a.remove-btn")
- .attr("id", id)
- .unbind("click");
- 
- setTimeout(function() {
-  $("#" + id).focus();
- }, 100);
- 
- $("#" + id).on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   var that = $(this);
-   setTimeout(function() {
-    that.prev().focus();
-   }, 1);
-  }
- });
- 
- $("#" + id).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-/** 
- * File 첨부컨트롤
- * @param limit 최대 파일 첨부 갯수
- * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
- */
-function setAttachFile( limit, width, btnName, removeBtnId )
-{
- var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
- var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
- var inputFile     = $( 'ul.file-att-form input[type=file]' );
- 
- SET_ATTACH_LIMIT = limit;
- SET_ATTACH_WIDTH = w;
- SET_ATTACH_BTNNAME = btnName;
- 
- inputFile.on("keydown", function(e) {
-  var that = $(this);
-  
-  if(e.which == 9 && e.shiftKey) {
-   return true;
-  }
-  
-  if(e.which === 9) {
-   e.preventDefault();
-   setTimeout(function() {
-    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
-   }, 1);
-  }
- });
- 
- inputFile.on("focusin", function(e) {
-  $(this).parent().css("outline", "1px dotted #2d2d2d");
- }).on("focusout", function(e) {
-  $(this).parent().css("outline", "");
- });
- 
- firstAddAction(btnFileAttach, limit, w, btnName);
- 
- /*
- btnFileAttach.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    inputFile.focus();
-   }, 1);
-  }
- });
- 
- btnFileAttach.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
-
- // File 제거 버튼
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- */
- /**
-  *  2012-08-08 전종호 추가
-  *  파일 Input Text 영역 너비를 잡아주는 메서드
-  */
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-
- updateFileField();
- fileUpload( w + 50 );
- 
- $("#" + removeBtnId).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-
-
-/** 
- * [PAGE] device speces list page
- * date : 20120808
- * id : hjh
- */
-function initDevicespecsList (){
-       var isCompareView=false;
-       $("#devicespecs-list > li").each( 
-               function(i){ 
-                       $(".info", this).bind("click", devicespecsListInfoToggle);
-                       $(".xx", this).bind("click", devicespecsListInfoToggle);
-                       
-                       //detail info layer toggle function
-                       function devicespecsListInfoToggle (){
-                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
-                               return false;
-                       }
-       });
-
-
-       /* DEVICE COMPARE 열리는 부분
-       - defualt : close. 
-       - 최초 한번만 열림 
-       - 현재는 compare 버튼에 공통으로 함수 바인딩
-       */
-       function devicespecsCompareOnOff (){
-               if ( isCompareView ) return;
-               var ww = ( isCompareView ) ? "30px":"207px";
-               $("#devicespecs-compare").animate({
-                   height: ww }, 300, "linear", function(){ });
-
-               isCompareView = ( isCompareView ) ? false:true;
-               return false;
-       }
-
-       //compare 버튼 공통으로 클릭 이벤트 걸림 
-       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
-}
-
-/** 
- * [PAGE] device speces view page
- * date : 20120808
- * id : hjh
- */
- function initDevicespecsView (){
-       var isImgView = false;
-       var isView = 0;
-       
-       //thumbnail overevent bind
-       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
-       focusDeviceDetail (1);
-       
-       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.type === "keydown" && e.which == 9) {
-                       setTimeout(function() {
-                               $("#img-viewer-handle a").eq(0).focus();        
-                       }, 1);
-               }
-       });
-       
-       //thumbnail viewarea controll handler bind
-       $("#img-viewer-handle").click(function () {
-               var ww;
-               var src = $("#img-viewer-handle img").attr("src");
-               if ( isImgView ){
-                       ww = "300px";
-                       src = src.replace(".gif", "_.gif");
-                       $("#img-viewer-thumbnail").hide();
-                       $("#device-info").show();
-               }else{
-                       ww = "730px";
-                       src = src.replace("_.gif", ".gif");
-                       $("#img-viewer-thumbnail").show();
-                       $("#device-info").hide();
-                       focusDeviceDetail(1);
-               }
-               
-               $("#img-viewer-handle img").attr("src", src);
-       $("#img-viewer").animate({
-                   width: ww
-                       }, 300, "linear", function(){
-                       if($.browser.msie)
-                               $("#img-inner").css("width", ww);
-               });
-               
-       isImgView = ( isImgView ) ? false:true;
-    });
-
-       //thumbnail overevent function (update date 2012.09.05 kangki)
-       function focusDeviceDetail ( id ) {
-               if ( isView == id ) return;
-
-               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
-               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
-
-               $( "#img-viewer-bic > img").attr("src", imgSrc);
-               isView = (id);          
-       }
-
-       /*toggle devicespecs List*/
-       if($('div#contents').find('.devicespec-tit').length){
-               
-               $('.devicespec-tit').each(function(){
-                       var self = $(this);
-                       $('a', self).bind ("click", fnToggle);
-
-                       function fnToggle(){
-
-                               if ( $(this).parent().parent().next().is(':visible') ){
-                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-                                       self.find('em').text('Show');
-                                       self.next().hide();
-
-                                       return false;
-                               }else{
-                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-                                       self.find('em').text('Hide');
-                                       self.next().show();
-
-                                       return false;
-                               }
-                       }
-                                                       
-               });
-       }
-
-       /*all Show Hide devicespecs List*/
-       if($('div#contents').find('.devicespecs-util').length){
-               var self = $('div#contents').find('.devicespecs-util');
-
-               $('.showA', self).bind ("click", function (){
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( !me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-                                       me.find('em').text('Hide');
-                                       me.next().show();
-                               }
-                       });
-                       return false;
-               })
-               $('.hideA', self).bind ("click", function (){
-                       
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-                                       me.find('em').text('Show');
-                                       me.next().hide();
-                               }
-                                                               
-                       });
-                       return false;
-               })
-       }       
-}
-
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
-function searchInit()
-{
-       var focusTarget = "input";
-
-       $("#searchInput").bind("keydown", checkSearchText);
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-
-       $(".autocomplete").mouseleave(function(){
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".autocomplete").css("visibility", "visible");
-
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-
-                       var hei = $(".autocomplete").find('>ul').outerHeight();
-                       if(hei>400){
-                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
-                       }
-               }
-               else{
-                       $(".autocomplete").css("visibility", "hidden");
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
- */
-
-function setTopScroll(selector) {
-       if ( !selector ) return false;
-       var btn = $( selector );
-       var w = $( window );
-       btn.css( "position", "absolute" );
-
-
-       btn.click( function(){ w.scrollTop( 0 ) } );
-
-       var wheight = w.innerHeight();
-       
-       $(window).resize( function() {
-               wheight = w.innerHeight();
-               redraw();
-       });
-
-       $(window).scroll( function() {
-               redraw();
-       })
-
-       /**
-        *      Top 버튼의 재정렬 메서드
-        */
-       function redraw()
-       {
-               var t = w.scrollTop() + wheight - 289;
-
-               if( t < wheight / 2 && w.scrollTop() == 0 )     {
-                       t = wheight / 2;
-               }
-               
-               btn.clearQueue();
-
-               btn.animate({
-           top: t
-               }, 500, function() {
-           // Animation complete.
-               });
-               //btn.css( "top", t );
-               //console.log( "target : " + t );
-       }
-
-       redraw();
-       /*
-       obj.initTop = position;
-       obj.topLimit = topLimit;
-       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
-
-       obj.style.position = "absolute";
-       obj.top = obj.initTop;
-       // obj.left = obj.initLeft;
-
-       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
-               obj.getTop = function() {
-                       return window.pageYOffset;
-               }
-       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
-               obj.getTop = function() {
-                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
-               }
-       } else {
-               obj.getTop = function() {
-                       return 0;
-               }
-       }
-
-       if ( self.innerHeight ) {       //WebKit
-               obj.getHeight = function() {
-                       return self.innerHeight;
-               }
-       } else if( document.documentElement.clientHeight ) {
-               obj.getHeight = function() {
-                       return document.documentElement.clientHeight;
-               }
-       } else {
-               obj.getHeight = function() {
-                       return 500;
-               }
-       }
-
-       obj.move = setInterval( function() {
-               if ( obj.initTop > 0 ) {
-                       pos = obj.getTop() + obj.initTop;
-               } else {
-                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
-               }
-
-               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
-               if ( pos < obj.topLimit ) pos = obj.topLimit;
-
-               interval = obj.top - pos;
-               obj.top = obj.top - interval / 3;
-               obj.style.top = obj.top + "px";
-       }, 30 )
-       */
-}
-
-
-//popup
-function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
-function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
-
-//popup 중앙에 띄우기
-function pop_center(){ 
-       var x,y; 
-       if (window.innerHeight) { // IE 외 모든 브라우저 
-               x = (screen.availWidth - self.innerWidth) / 2; 
-               y = (screen.availHeight - self.innerHeight) / 2; 
-       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
-               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
-               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
-       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
-               x = (screen.availWidth - document.body.clientWidth) / 2; 
-               y = (screen.availHeight - document.body.clientHeight) / 2; 
-       } 
-       window.moveTo(x,y); 
-}
-
-// Layer Popup Open
-function layer_open(el){
-       var temp = $('#' + el);
-
-       if(!temp.hasClass('sty2')){
-               $('.layer').fadeIn();
-       }
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       if(temp.hasClass('sty2')){
-               temp.fadeIn();
-
-               temp.find('a.cbtn').click(function(e){
-                       temp.fadeOut();
-               });
-               temp.find('a.gbtn').click(function(e){
-                       temp.fadeOut();
-               });
-
-               return false;
-       }
-       // 닫는 버튼 gbtn-c 추가 20130627
-       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
-               $('.layer').fadeOut();
-               return false;
-       });
-}
-
-// background dim - 2013-05-31
-function layer_open2(el){
-       var temp = $('#' + el);
-       $('input').attr('disabled', 'disabled');
-       $('.layerPop').fadeIn();
-       
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
-               $('.layerPop').fadeOut();
-               $('input').removeAttr('disabled');
-               return false;
-       });
-}
-
-
-function pop_account(url){
-       window.open(url,'account','width=619,height=591,scrollbars=yes')
-}
-
-function pop_loadDoc(url){
-       window.open(url,'online','width=850,height=600,scrollbars=yes')
-}
-
-/** 
- *  [PAGE] Tags
- *  date : 20120820
- *  author : 전종호
- */
-function initTags()
-{
-       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
-       // 마지막 아이템은 제외
-       var eleArr = $(".tag-list").find("li");
-
-       $( eleArr ).each( function( i ) {
-               if( i < eleArr.length - 1 )
-               {
-                       var target = $(this).find("a")[0];
-                       var content = $( target ).html();
-
-                       $( target ).html( content + "," );
-               }
-       })
-}
-
-$(document).ready(function(){
-       $(".tip_info").css("cursor","pointer");
-       $(".tip_info > img").mouseover(function(){
-               $(".tip_cont").css("display","block");
-       });
-       $(".tip_info > img").mouseout(function(){
-               $(".tip_cont").css("display","none");
-       });
-});
-
-// new layer popup script by ygh 2013.11.14
-
-var isPopup = false ;
-
-function popupLayerView(id){
-
-       var $L = $("#" + id) ;
-       var $D  = $("#" + id + "down") ;
-
-       $T = $("#" + id) ;
-
-       $L.show();
-       isPopup = true ;
-
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-
-       $("#" + id + "agree").focus() ;
-
-       jQuery(":focusable").focusin(function(e){
-               if (isPopup) {
-                       e.stopPropagation() ;
-                       if ($L.find(jQuery(this)).length > 0) {
-                       } else {
-                               jQuery(this).blur() ;
-                               jQuery("#" + id + " :focusable:first").focus() ;
-                       }
-               }
-       }) ;
-
-       $L.find('.close').click(function(){
-               resetPopup(id) ;
-       });
-
-       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
-}
-
-function resetPopup(T) {
-       $("#" + T + "down").hide();
-       $("#" + T + "agree").attr("checked", false) ;
-       isPopup = false ;
-       $("#" + T).hide() ;
-       $("#" + T + "Btn").focus() ;
-}
-
-function getDownload(T, F, I) {
-       if ($("#" + T + "agree").is(':checked')) {
-               commonDownloadLog(F, I) ;
-               resetPopup(T) ;
-       }
-}
-
-function focusable( element, isTabIndexNotNaN ) {
-       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
-       if ( "area" === nodeName ) {
-               map = element.parentNode;
-               mapName = map.name;
-               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
-               img = $( "img[usemap=#" + mapName + "]" )[0];
-               return !!img && visible( img );
-       }
-       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
-                       visible( element ) ;
-}
-
-function visible( element ) {
-       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
-               return $.css( this, "visibility" ) === "hidden";
-       }).length;
-}
-if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
-
-$.extend( $.expr[ ":" ], {
-       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
-       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
-       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
-});
-// new layer popup script by ygh 2013.11.14
-
-// 2013-11-15 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device1').hide();
-       
-       $('#thumb_view_btn').hover(function() {
-               $('.view_device1').show();
-       },function() {
-               $('.view_device1').hide();
-       });
-               
-});
-
-// 2014-04-22 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device2').hide();
-       
-       $('#thumb_view_btn2').hover(function() {
-               $('.view_device2').show();
-       },function() {
-               $('.view_device2').hide();
-       });
-               
-});
-
-
-function beforePopupLayerView(popId, popId2, popContinue){
-       var $L = $("#" + popId) ;
-       $L.show(100);
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-       $L.find('.close').click(function(){
-               $L.hide();
-       });
-       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
-}
+$(document).ready(function(){\r
+       $('#contents table').each(function(){\r
+               if (!$(this).parent().hasClass('table')) {\r
+                       $(this).wrap('<div class="table"></div>');\r
+               }\r
+       });\r
+\r
+       // Lnb Menu Initialize\r
+       if($('div#contents').find('.lnb').length){\r
+               if($("ul li.events_news").size() > 0) {\r
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");\r
+               }\r
+               initLnb();\r
+               initScript(staticURL + "/js/fixednavbar.js", function(){});\r
+       }\r
+\r
+       //family site\r
+       if($('div#footer').find('dl#familySlider').length){\r
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);\r
+       }\r
+\r
+       // Svn Commit Test\r
+       \r
+       // Language Selection\r
+       if($('div#header').find('.util').length){\r
+               var $lang = $('div#header').find('.util');\r
+               $lang.find('a.lang').toggle(function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();\r
+                       },function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();\r
+                       });\r
+\r
+               $lang.bind('mouseleave',function(){\r
+                       $(this).find('ul.language').hide();\r
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+               });\r
+\r
+               $lang.find('ul.language').children().last().on("keydown", function(e) {\r
+                       if(e.which == 9 && e.shiftKey) {\r
+                               return true;\r
+                       }\r
+                       \r
+                       if(e.which == 9) {\r
+                               e.preventDefault();\r
+                               $lang.find('ul.language').hide();\r
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+                               setTimeout(function() {\r
+                                       $("#searchTop").focus();\r
+                               }, 1);\r
+                       }\r
+               });\r
+       }\r
+\r
+       // Open the Sitemap\r
+       var $open = $('div#header').find('.bt-open');\r
+       $open.bind('click',function(){\r
+               var $self = $(this);\r
+               var $sitemap = $('div#wrapper').find('div#sitemap');\r
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');\r
+\r
+               if($sitemap.is(':visible')){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');\r
+\r
+                       $self.attr('title','open sitemap');\r
+               }else{\r
+                       var source = $self.css('background-image').replace('.gif','_.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');\r
+\r
+                       $self.attr('title','close sitemap');\r
+               }\r
+               \r
+               $self.css('background-image',source);\r
+               $sitemap.slideToggle('fast');\r
+               \r
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       $self.css('background-image',source);\r
+                       $sitemap.slideToggle('fast');\r
+               });\r
+\r
+       });\r
+\r
+       // Search Auto Complete\r
+       var $search = $('div#header').find('fieldset.search');\r
+       var $searchList = $search.find('#topAutocomplete>ul');\r
+\r
+       if($search.length){\r
+               $search.find('> input').each(function(){\r
+                       $(this).bind({\r
+                               keydown : function(e){\r
+                       \r
+                                       if(e.type=='keydown'&& $(this).val().length!=0){\r
+                                               $search.find('#topAutocomplete').show();\r
+                                               var hei = $searchList.outerHeight();\r
+                                               if(hei>400){\r
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});\r
+                                               }\r
+                                       }\r
+                                       if(e.keyCode==9){\r
+                                               $search.unbind('focusout.search');\r
+                                       }\r
+                                       if(e.keyCode==40){\r
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();\r
+                                               //window.scrollTo(0,0);\r
+                                       }\r
+                               },\r
+                               focusin : function(e){\r
+                                       if($(this).val()==='Search'){\r
+                                               $(this).val('');\r
+                                       }\r
+                               },\r
+                               focusout : function(e){\r
+                                       if($(this).val().length==0) $(this).val('Search');\r
+                               }\r
+                       });\r
+               });\r
+\r
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){\r
+               //      if(e.keyCode==40){\r
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();\r
+               //      }\r
+               //});\r
+\r
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){\r
+                       if($search.find('> input').val().length==0){\r
+                               $search.find('> input').val('Search');\r
+                       }\r
+                       $search.find('#topAutocomplete').hide();\r
+               });\r
+\r
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){\r
+                       $search.find('> input').val('Search');\r
+                       $search.find('#topAutocomplete').hide();\r
+                       \r
+                       //$search.bind('focusout.search', function(){\r
+                       //      $(this).find('> input').val('Search');\r
+                       //      $(this).find('#topAutocomplete').hide();\r
+                       //});\r
+               });\r
+       }\r
+});\r
+\r
+// 비차단 동적 스크립트 로딩\r
+function initScript(url, callback){\r
+       var script = document.createElement("script");\r
+       script.type = "text/javascript";\r
+\r
+       if(script.readyState){ // 인터넷 익스플로러\r
+               script.onreadystatechange = function(){\r
+                       if(script.readyState=="loaded" || script.readyState=="complete"){\r
+                               script.onreadystatechange = null;\r
+                               callback();\r
+                       }\r
+               };\r
+       }else{  // 다른  브라우저\r
+               script.onload = function(){\r
+                       callback();\r
+               };\r
+       }\r
+\r
+       script.src = url;\r
+       document.getElementsByTagName("head")[0].appendChild(script);\r
+}\r
+\r
+\r
+// lnb\r
+function initLnb(){\r
+       var sMenu = $('.lnb');\r
+       var sItem = sMenu.find('>li');\r
+\r
+       sItem.each(function(){\r
+               if($(this).find('a').hasClass('more')){\r
+                       if($(this).find('ul').is(":visible")) {\r
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); \r
+                       } else {\r
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));\r
+                       }\r
+               }\r
+       });\r
+       \r
+       var setIcoArrText = function(obj) {\r
+               if(obj.next().is(":visible")) {\r
+                       obj.text("close submenu");\r
+               } else {\r
+                       obj.text("open submenu");\r
+               }\r
+       }\r
+       \r
+       sItem.find('.ico-arr').on("click", function() {\r
+               var $that = $(this);\r
+               var liBox = $that.parent();   \r
+               var ulBox = $that.next();\r
+               \r
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();\r
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");\r
+               \r
+               if(liBox.hasClass("on")) {\r
+                       if(ulBox.is(":visible")) {\r
+                               ulBox.hide();\r
+                               $that.addClass("ico-on");\r
+                       } else {\r
+                               ulBox.show();\r
+                               $that.removeClass("ico-on");\r
+                       }\r
+                       setIcoArrText($that);\r
+                       return true;\r
+               }\r
+               \r
+               if(liBox.hasClass("active")) {\r
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");\r
+                       ulBox.hide();\r
+               } else {\r
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");\r
+                       ulBox.show();\r
+               }\r
+               setIcoArrText($that);\r
+       });\r
+\r
+       sItem.hover(function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+               $(this).find("a").eq(0).addClass("bov");\r
+       },function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+                $(this).find("a").eq(0).removeClass("bov");\r
+\r
+       });\r
+}\r
+\r
+//footer rolling banner\r
+function fn_rollToEx(container,objectId,step,auto){\r
+\r
+       // 롤링할 객체를 변수에 담아둔다.\r
+       var el = $('#'+container).find('#'+objectId);\r
+       var lastChild;\r
+       var speed = 3000;\r
+       var timer = 0;\r
+       var autoplay = false;\r
+\r
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.\r
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수\r
+       el.data('animating',false);\r
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.\r
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.\r
+\r
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.\r
+\r
+       if(arguments.length==4){\r
+               el.data('autoStart', auto);\r
+       }\r
+\r
+       if(el.data('autoStart')){\r
+               if(timer==0){\r
+                       timer = setInterval(moveNextSlide, speed);\r
+                       autoplay = true;\r
+               }\r
+       }\r
+\r
+       el.bind({\r
+               mouseenter:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+\r
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('prev').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       movePrevSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('next').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       moveNextSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       function movePrevSlide(){\r
+               if(!el.data('animating')){\r
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);\r
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.\r
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다\r
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.\r
+               \r
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.\r
+\r
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+    function moveNextSlide(){\r
+               if(!el.data('animating')){\r
+                       el.data('animating',true);\r
+\r
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.\r
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);\r
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.\r
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다\r
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.\r
+\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+}\r
+\r
+function fn_slide(options){\r
+\r
+       var opts = jQuery.extend({},options);\r
+\r
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자\r
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자\r
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자\r
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자\r
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값\r
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수\r
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수\r
+       var auto = false;\r
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수\r
+       var time;\r
+\r
+\r
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정\r
+       effect = opts.effect;\r
+       auto = opts.auto;\r
+\r
+       if(auto){\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       slideShow = function(){\r
+\r
+               if(current < len-1){\r
+                       current++;\r
+               }else{\r
+                       current=0;\r
+               }\r
+\r
+               controllStatus();\r
+\r
+               moveControl('next');\r
+\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       controllStatus = function(){\r
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정\r
+               if(current>0||current<len-1){                           \r
+                       $prev.show();\r
+                       $next.show();\r
+               }\r
+               if(current==0){\r
+                       $prev.hide();\r
+                       $next.show();\r
+               }\r
+               if(current>=len-1){\r
+                       $prev.show();\r
+                       $next.hide();\r
+               }\r
+       }\r
+\r
+       moveControl = function(msg){\r
+               if(opts.bt!=null){\r
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))\r
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화\r
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화\r
+               }\r
+\r
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                       $obj.children().hide();\r
+                       $obj.children().eq(current).show();\r
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                       $obj.animate({'left':'-'+size*current},'slow');\r
+               }\r
+       }\r
+\r
+       $obj.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               }\r
+       });\r
+\r
+       //롤링 버튼 클릭시\r
+       $bt.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장\r
+\r
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정\r
+\r
+                       controllStatus();\r
+\r
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                               $obj.children().hide();\r
+                               $obj.children().eq(current).show();\r
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                               $obj.animate({'left':'-'+size*current},'slow');\r
+                       }\r
+\r
+                       // 모든 롤링 버튼을 비활성화\r
+                       $bt.each(function(){\r
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                                $(this).find('img').attr('src',source);\r
+                       });\r
+\r
+                       // 선택한 롤링버튼을 활성화\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //이전 버튼 클릭시\r
+       $prev.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 \r
+                       current--;                                                      //이미지 인덱스값 1씩 감소\r
+\r
+                       moveControl('prev');\r
+\r
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //다음 버튼 클릭시\r
+       $next.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       current++;                                                      //이미지 인덱스값 1씩 증가\r
+                       \r
+                       moveControl('next');\r
+\r
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화\r
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+}\r
+\r
+// main rolling banner\r
+function slideMotion1(){\r
+       var $banner = $('#rolling .motionview'),\r
+               //$nav = $('#rolling ul.nav'),\r
+               banner = {prev:null, next:null},\r
+               size = $banner.children().length;\r
+               index = 1,\r
+               speed = 3000,\r
+               timer = null,\r
+               auto = true,\r
+               width = parseInt(100/size),\r
+               rest = parseInt(100%size);\r
+\r
+       var $nav = $('<ul class="nav">').insertAfter($banner);\r
+\r
+       $banner.children().each(function(index){\r
+               index++;\r
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);\r
+               if(index==size){\r
+                       $nav.children().eq(-1).find('a').css('background-image','none');\r
+               }\r
+       });\r
+\r
+       if(rest>0){\r
+               width+=rest;\r
+               $nav.children().eq(-1).css('width',width+'%');\r
+       }\r
+\r
+       $nav.delegate("li",'click',function(){\r
+               var idx = $nav.children().index(this);\r
+               index = idx;\r
+               banner.prev = $banner.find('a.active');\r
+               banner.next = $banner.find('a').eq(index);\r
+\r
+               clearInterval(timer);\r
+               auto = false;\r
+               \r
+               $nav.trigger('change.banner',banner)\r
+                       .trigger('change.tab',index);\r
+\r
+               return false;\r
+       });\r
+\r
+       $nav.bind('change.banner',function(event, banner){\r
+               aniMotion();\r
+       });\r
+\r
+       $nav.bind('change.tab',function(event, index){\r
+               $nav.children().find('a').removeClass('sel');\r
+               $nav.children().eq(index).find('a').addClass('sel');\r
+       });\r
+\r
+       timer = setInterval(autoMotion, speed);\r
+\r
+       function autoMotion(){\r
+               if(index > size-1) index = 0;\r
+\r
+               aniMotion();\r
+       }\r
+\r
+       function aniMotion(){\r
+               if(auto){\r
+                       banner.prev = $banner.find('a.active');\r
+                       banner.next = $banner.find('a').eq(index);\r
+\r
+                       $nav.children().find('a').removeClass('sel');\r
+                       $nav.children().eq(index).find('a').addClass('sel');\r
+               }\r
+               banner.prev.addClass('last-active');\r
+               banner.next.css({'opacity':0.0})\r
+                       .addClass('active')\r
+                       .animate({'opacity':1.0}, 1000, function(){\r
+                               banner.prev.removeClass('active last-active');\r
+\r
+                               if(auto){\r
+                                       index++;\r
+                               }else{\r
+                                       index++;\r
+                                       timer = setInterval(autoMotion, speed*1.5);\r
+                                       auto = true;\r
+                               }\r
+                       });\r
+       }\r
+}\r
+\r
+// forum list show or hide function\r
+function toggleFunc(){\r
+       \r
+       var defaulNum = [2];\r
+\r
+       $('.forum-tit').each(function(){\r
+               var self = $(this);\r
+\r
+               var idx = $('.forum-tit').index(this);\r
+\r
+               for(i=0;i<=defaulNum.length;i++){\r
+                       if(idx==defaulNum[i]){\r
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');\r
+                               self.find('a.toggle').css('background-image',source);\r
+\r
+                               self.find('a.toggle').text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }\r
+               }\r
+\r
+               self.find('a.toggle').click(function(){\r
+                       \r
+                       if(self.next().is(':visible')){\r
+                               var source = $(this).css('background-image').replace('.gif','_.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }else{\r
+                               var source = $(this).css('background-image').replace('_.gif','.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Hide');\r
+                               self.removeClass('mb35').next().show();\r
+                       }\r
+\r
+                       return false;\r
+\r
+               });\r
+\r
+       });\r
+}\r
+\r
+// 파일 업로드\r
+function fileUpload( width ){\r
+       //var $img = $('.attach input[type=image]');\r
+       //var width = $img.attr('width');\r
+\r
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅\r
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";\r
+\r
+       var $file = $('.attach input.upload').css({\r
+               "position": "absolute",\r
+               "top": "0px",\r
+               "right": "0px",\r
+               "width": w,\r
+               "cursor": "pointer",\r
+               "opacity": "0.0",\r
+               "height": "23px"\r
+       });\r
+       $file.off('change');\r
+       $file.on('change',function(e){\r
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드\r
+                       return;\r
+               }\r
+               var idx = $file.index(this);\r
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();\r
+               var fileErrMsg = {\r
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"\r
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"\r
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"\r
+                           ,ext_ko : "지원하지 않는 확장자 입니다."\r
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"\r
+                           ,ext_en : "File extention not allowed for upload."\r
+               };\r
+               var initFileInput = function(obj) {\r
+                       $(obj).parent().find('input.file').val("");\r
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );\r
+                       else $(obj).val("");\r
+               };\r
+               \r
+               var filename = $(this).val();\r
+               \r
+               //CHK File ext\r
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"\r
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"\r
+                                     , "jpg", "png", "zip"];\r
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();\r
+               var findFlag = false;\r
+               for(var i = 0; i < imgExts.length; i++) {\r
+                       if(imgExts[i] == fileExt) {\r
+                               findFlag = true;\r
+                               break;\r
+                       }\r
+               }\r
+       \r
+               if(findFlag == false) {\r
+                       alert( fileErrMsg["ext_" + localeCode] );\r
+                       initFileInput(this);\r
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.\r
+                       return;\r
+               }\r
+               \r
+               //CHK File Size\r
+               if(\r
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie\r
+                               || $.browser.mozilla //FF\r
+                               || $.browser.safari //Chrome\r
+               )\r
+               {\r
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;\r
+                       if( filesize > 200 ) {\r
+                               alert( fileErrMsg["limit_" + localeCode] );\r
+                               initFileInput(this);\r
+                               return;\r
+                       }\r
+               }\r
+               \r
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);\r
+       });\r
+};\r
+\r
+\r
+// Show or Hide Toggle\r
+function showToEx(args){\r
+\r
+       if(!arguments.length) return false;\r
+       \r
+       var bt = $('#'+args.bt);\r
+       var obj = $('#'+args.obj);\r
+\r
+       var source = bt.css('background-image');\r
+       \r
+       if(obj.is(':visible')){\r
+               obj.hide();\r
+       }\r
+\r
+       bt.toggle(function(){\r
+               var src = source.replace('.gif','_.gif');\r
+               bt.css('background-image', src);\r
+               obj.show();\r
+               \r
+               return false;\r
+       },function(){\r
+               var src = source.replace('_.gif','.gif');\r
+               bt.css('background-image', src);\r
+               obj.hide();\r
+\r
+               return false;\r
+       });\r
+\r
+}\r
+\r
+\r
+// FAQ 20131016\r
+function faqToEx(){\r
+\r
+ var $question = $('#contents').find('.question');\r
+ var $answer = $('#contents').find('.answer');\r
+\r
+ // All Answer Rows Hide\r
+ $answer.hide().find('.conts').hide();\r
+\r
+ $question.each(function(){\r
+  var $self = $(this);\r
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");\r
+  \r
+  $self.find('a').bind('click',function(){\r
+   $("#selArea ul").hide();\r
+   /*\r
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;\r
+\r
+   $answer.hide().find('.conts').hide();\r
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');\r
+   */\r
+\r
+   /* 20120822 hjh modify*/\r
+   /* if ( this open )?  close : all close, e.target open */\r
+   var cutTtl  = $(this).parent().children("div").html();\r
+   var ttl     = $(this).parent().parent().children("td.real_question").html();\r
+   \r
+   if($(this).parents('tr').next().find('.answer').is(':visible')){\r
+    $(this).html(cutTtl);\r
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){\r
+     $answer.hide();\r
+    });\r
+   }else{\r
+    titleInit();\r
+    $(this).html(ttl);\r
+    $answer.hide().find('.conts').hide();\r
+    //$answer.slideUp('normal').find('.conts').hide();\r
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); \r
+   }   \r
+\r
+   return false;\r
+  });\r
+ });\r
+\r
+ $answer.each(function(){\r
+  var $self = $(this);\r
+\r
+  $(this).find('a.bt-close-faq').bind('click',function(){\r
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");\r
+   var cutTtl      = question_td.children("div").html();\r
+   question_td.children("a").html(cutTtl);\r
+   \r
+   $self.find('.conts').slideUp('fast',function(){\r
+    $self.hide();\r
+   });\r
+\r
+   return false;\r
+  });\r
+ });\r
+ \r
+ var titleInit = function() {\r
+  $question.each(function(i) {\r
+   $(this).find("a").html($(this).find("div").html());\r
+  });\r
+ }\r
+}\r
+\r
+\r
+\r
+/**\r
+ *  쓰기페이지 Tab 영역 컨트롤\r
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'\r
+ */\r
+function setSwitchTab( selector ) {\r
+       var tabs = $('.tab-list').find("li");\r
+       var elements = $( selector );\r
+\r
+       $( elements ).each( function( i ) {\r
+               if( i != 0 )\r
+               {\r
+                       $(this).hide();\r
+               }\r
+       })\r
+\r
+       // Control Tabs\r
+       $( tabs ).each( function( i ) {\r
+               $( this ).click( function(){\r
+                       resetClass();\r
+\r
+                       $( this ).find( 'a' ).addClass( "sel" );\r
+                       $( elements[i] ).show();\r
+\r
+                       return false;\r
+               });\r
+       });\r
+\r
+       // Class 리셋\r
+       function resetClass()\r
+       {\r
+               $( tabs ).each( function( i ) {\r
+                       $( this ).find( 'a' ).removeClass( 'sel' );\r
+               });\r
+\r
+               $( elements ).each( function( i ) {\r
+                       $( this ).hide();\r
+               });\r
+       }\r
+}\r
+\r
+var SET_ATTACH_LIMIT;\r
+var SET_ATTACH_WIDTH;\r
+var SET_ATTACH_BTNNAME;\r
+\r
+var firstAddAction = function(obj, limit, w, btnName) {\r
+ var bn            = btnName || 'File';\r
+ var fileAttachStr = "<li class='clfix no-first'>";\r
+ fileAttachStr += '<div class="attach">';\r
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';\r
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';\r
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';\r
+ fileAttachStr += '</div>';\r
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';\r
+ fileAttachStr += '</li>';\r
+ obj.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    $("a.remove-btn").eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ obj.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ \r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+}\r
+\r
+var firstRemoveAction = function(id) {\r
+ var obj = $("#" + id);\r
+ var compFile    = $("input[type=file]");\r
+ var compFileCnt = compFile.size();\r
+ var ulObj       = compFile.eq(0).parent().parent().parent();\r
+ if(compFileCnt <= 1) {\r
+  var firstCompFile = compFile.eq(0);\r
+  firstCompFile.prev().prev().val("");\r
+  if ($.browser.msie) {\r
+               $(obj).parent().find('input.file').val("");\r
+               firstCompFile.replaceWith( firstCompFile.clone(true) );\r
+       } else {\r
+               firstCompFile.val("");\r
+               firstCompFile.prev().prev().val("");\r
+  }\r
+ } else {\r
+  obj.parent().remove();\r
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");\r
+  \r
+  //add-btn event..\r
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);\r
+ }\r
+ \r
+ ulObj\r
+ .find("li")\r
+ .eq(0)\r
+ .removeClass("no-first")\r
+ .find("a.remove-btn")\r
+ .attr("id", id)\r
+ .unbind("click");\r
+ \r
+ setTimeout(function() {\r
+  $("#" + id).focus();\r
+ }, 100);\r
+ \r
+ $("#" + id).on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   var that = $(this);\r
+   setTimeout(function() {\r
+    that.prev().focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ $("#" + id).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+/** \r
+ * File 첨부컨트롤\r
+ * @param limit 최대 파일 첨부 갯수\r
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가\r
+ */\r
+function setAttachFile( limit, width, btnName, removeBtnId )\r
+{\r
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;\r
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );\r
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );\r
+ \r
+ SET_ATTACH_LIMIT = limit;\r
+ SET_ATTACH_WIDTH = w;\r
+ SET_ATTACH_BTNNAME = btnName;\r
+ \r
+ inputFile.on("keydown", function(e) {\r
+  var that = $(this);\r
+  \r
+  if(e.which == 9 && e.shiftKey) {\r
+   return true;\r
+  }\r
+  \r
+  if(e.which === 9) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ inputFile.on("focusin", function(e) {\r
+  $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+ }).on("focusout", function(e) {\r
+  $(this).parent().css("outline", "");\r
+ });\r
+ \r
+ firstAddAction(btnFileAttach, limit, w, btnName);\r
+ \r
+ /*\r
+ btnFileAttach.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    inputFile.focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ btnFileAttach.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+\r
+ // File 제거 버튼\r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ */\r
+ /**\r
+  *  2012-08-08 전종호 추가\r
+  *  파일 Input Text 영역 너비를 잡아주는 메서드\r
+  */\r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+\r
+ updateFileField();\r
+ fileUpload( w + 50 );\r
+ \r
+ $("#" + removeBtnId).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+\r
+\r
+/** \r
+ * [PAGE] device speces list page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+function initDevicespecsList (){\r
+       var isCompareView=false;\r
+       $("#devicespecs-list > li").each( \r
+               function(i){ \r
+                       $(".info", this).bind("click", devicespecsListInfoToggle);\r
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);\r
+                       \r
+                       //detail info layer toggle function\r
+                       function devicespecsListInfoToggle (){\r
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();\r
+                               return false;\r
+                       }\r
+       });\r
+\r
+\r
+       /* DEVICE COMPARE 열리는 부분\r
+       - defualt : close. \r
+       - 최초 한번만 열림 \r
+       - 현재는 compare 버튼에 공통으로 함수 바인딩\r
+       */\r
+       function devicespecsCompareOnOff (){\r
+               if ( isCompareView ) return;\r
+               var ww = ( isCompareView ) ? "30px":"207px";\r
+               $("#devicespecs-compare").animate({\r
+                   height: ww }, 300, "linear", function(){ });\r
+\r
+               isCompareView = ( isCompareView ) ? false:true;\r
+               return false;\r
+       }\r
+\r
+       //compare 버튼 공통으로 클릭 이벤트 걸림 \r
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });\r
+}\r
+\r
+/** \r
+ * [PAGE] device speces view page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+ function initDevicespecsView (){\r
+       var isImgView = false;\r
+       var isView = 0;\r
+       \r
+       //thumbnail overevent bind\r
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );\r
+       focusDeviceDetail (1);\r
+       \r
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.type === "keydown" && e.which == 9) {\r
+                       setTimeout(function() {\r
+                               $("#img-viewer-handle a").eq(0).focus();        \r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       //thumbnail viewarea controll handler bind\r
+       $("#img-viewer-handle").click(function () {\r
+               var ww;\r
+               var src = $("#img-viewer-handle img").attr("src");\r
+               if ( isImgView ){\r
+                       ww = "300px";\r
+                       src = src.replace(".gif", "_.gif");\r
+                       $("#img-viewer-thumbnail").hide();\r
+                       $("#device-info").show();\r
+               }else{\r
+                       ww = "730px";\r
+                       src = src.replace("_.gif", ".gif");\r
+                       $("#img-viewer-thumbnail").show();\r
+                       $("#device-info").hide();\r
+                       focusDeviceDetail(1);\r
+               }\r
+               \r
+               $("#img-viewer-handle img").attr("src", src);\r
+       $("#img-viewer").animate({\r
+                   width: ww\r
+                       }, 300, "linear", function(){\r
+                       if($.browser.msie)\r
+                               $("#img-inner").css("width", ww);\r
+               });\r
+               \r
+       isImgView = ( isImgView ) ? false:true;\r
+    });\r
+\r
+       //thumbnail overevent function (update date 2012.09.05 kangki)\r
+       function focusDeviceDetail ( id ) {\r
+               if ( isView == id ) return;\r
+\r
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");\r
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');\r
+\r
+               $( "#img-viewer-bic > img").attr("src", imgSrc);\r
+               isView = (id);          \r
+       }\r
+\r
+       /*toggle devicespecs List*/\r
+       if($('div#contents').find('.devicespec-tit').length){\r
+               \r
+               $('.devicespec-tit').each(function(){\r
+                       var self = $(this);\r
+                       $('a', self).bind ("click", fnToggle);\r
+\r
+                       function fnToggle(){\r
+\r
+                               if ( $(this).parent().parent().next().is(':visible') ){\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+                                       self.find('em').text('Show');\r
+                                       self.next().hide();\r
+\r
+                                       return false;\r
+                               }else{\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+                                       self.find('em').text('Hide');\r
+                                       self.next().show();\r
+\r
+                                       return false;\r
+                               }\r
+                       }\r
+                                                       \r
+               });\r
+       }\r
+\r
+       /*all Show Hide devicespecs List*/\r
+       if($('div#contents').find('.devicespecs-util').length){\r
+               var self = $('div#contents').find('.devicespecs-util');\r
+\r
+               $('.showA', self).bind ("click", function (){\r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( !me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+                                       me.find('em').text('Hide');\r
+                                       me.next().show();\r
+                               }\r
+                       });\r
+                       return false;\r
+               })\r
+               $('.hideA', self).bind ("click", function (){\r
+                       \r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+                                       me.find('em').text('Show');\r
+                                       me.next().hide();\r
+                               }\r
+                                                               \r
+                       });\r
+                       return false;\r
+               })\r
+       }       \r
+}\r
+\r
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       $("#searchInput").bind("keydown", checkSearchText);\r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+\r
+       $(".autocomplete").mouseleave(function(){\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".autocomplete").css("visibility", "visible");\r
+\r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+\r
+                       var hei = $(".autocomplete").find('>ul').outerHeight();\r
+                       if(hei>400){\r
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});\r
+                       }\r
+               }\r
+               else{\r
+                       $(".autocomplete").css("visibility", "hidden");\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+ */\r
+\r
+function setTopScroll(selector) {\r
+       if ( !selector ) return false;\r
+       var btn = $( selector );\r
+       var w = $( window );\r
+       btn.css( "position", "absolute" );\r
+\r
+\r
+       btn.click( function(){ w.scrollTop( 0 ) } );\r
+\r
+       var wheight = w.innerHeight();\r
+       \r
+       $(window).resize( function() {\r
+               wheight = w.innerHeight();\r
+               redraw();\r
+       });\r
+\r
+       $(window).scroll( function() {\r
+               redraw();\r
+       })\r
+\r
+       /**\r
+        *      Top 버튼의 재정렬 메서드\r
+        */\r
+       function redraw()\r
+       {\r
+               var t = w.scrollTop() + wheight - 289;\r
+\r
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {\r
+                       t = wheight / 2;\r
+               }\r
+               \r
+               btn.clearQueue();\r
+\r
+               btn.animate({\r
+           top: t\r
+               }, 500, function() {\r
+           // Animation complete.\r
+               });\r
+               //btn.css( "top", t );\r
+               //console.log( "target : " + t );\r
+       }\r
+\r
+       redraw();\r
+       /*\r
+       obj.initTop = position;\r
+       obj.topLimit = topLimit;\r
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;\r
+\r
+       obj.style.position = "absolute";\r
+       obj.top = obj.initTop;\r
+       // obj.left = obj.initLeft;\r
+\r
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit\r
+               obj.getTop = function() {\r
+                       return window.pageYOffset;\r
+               }\r
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {\r
+               obj.getTop = function() {\r
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );\r
+               }\r
+       } else {\r
+               obj.getTop = function() {\r
+                       return 0;\r
+               }\r
+       }\r
+\r
+       if ( self.innerHeight ) {       //WebKit\r
+               obj.getHeight = function() {\r
+                       return self.innerHeight;\r
+               }\r
+       } else if( document.documentElement.clientHeight ) {\r
+               obj.getHeight = function() {\r
+                       return document.documentElement.clientHeight;\r
+               }\r
+       } else {\r
+               obj.getHeight = function() {\r
+                       return 500;\r
+               }\r
+       }\r
+\r
+       obj.move = setInterval( function() {\r
+               if ( obj.initTop > 0 ) {\r
+                       pos = obj.getTop() + obj.initTop;\r
+               } else {\r
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;\r
+               }\r
+\r
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;\r
+               if ( pos < obj.topLimit ) pos = obj.topLimit;\r
+\r
+               interval = obj.top - pos;\r
+               obj.top = obj.top - interval / 3;\r
+               obj.style.top = obj.top + "px";\r
+       }, 30 )\r
+       */\r
+}\r
+\r
+\r
+//popup\r
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)\r
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)\r
+\r
+//popup 중앙에 띄우기\r
+function pop_center(){ \r
+       var x,y; \r
+       if (window.innerHeight) { // IE 외 모든 브라우저 \r
+               x = (screen.availWidth - self.innerWidth) / 2; \r
+               y = (screen.availHeight - self.innerHeight) / 2; \r
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 \r
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; \r
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; \r
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) \r
+               x = (screen.availWidth - document.body.clientWidth) / 2; \r
+               y = (screen.availHeight - document.body.clientHeight) / 2; \r
+       } \r
+       window.moveTo(x,y); \r
+}\r
+\r
+// Layer Popup Open\r
+function layer_open(el){\r
+       var temp = $('#' + el);\r
+\r
+       if(!temp.hasClass('sty2')){\r
+               $('.layer').fadeIn();\r
+       }\r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       if(temp.hasClass('sty2')){\r
+               temp.fadeIn();\r
+\r
+               temp.find('a.cbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+               temp.find('a.gbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+\r
+               return false;\r
+       }\r
+       // 닫는 버튼 gbtn-c 추가 20130627\r
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){\r
+               $('.layer').fadeOut();\r
+               return false;\r
+       });\r
+}\r
+\r
+// background dim - 2013-05-31\r
+function layer_open2(el){\r
+       var temp = $('#' + el);\r
+       $('input').attr('disabled', 'disabled');\r
+       $('.layerPop').fadeIn();\r
+       \r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){\r
+               $('.layerPop').fadeOut();\r
+               $('input').removeAttr('disabled');\r
+               return false;\r
+       });\r
+}\r
+\r
+\r
+function pop_account(url){\r
+       window.open(url,'account','width=619,height=591,scrollbars=yes')\r
+}\r
+\r
+function pop_loadDoc(url){\r
+       window.open(url,'online','width=850,height=600,scrollbars=yes')\r
+}\r
+\r
+/** \r
+ *  [PAGE] Tags\r
+ *  date : 20120820\r
+ *  author : 전종호\r
+ */\r
+function initTags()\r
+{\r
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.\r
+       // 마지막 아이템은 제외\r
+       var eleArr = $(".tag-list").find("li");\r
+\r
+       $( eleArr ).each( function( i ) {\r
+               if( i < eleArr.length - 1 )\r
+               {\r
+                       var target = $(this).find("a")[0];\r
+                       var content = $( target ).html();\r
+\r
+                       $( target ).html( content + "," );\r
+               }\r
+       })\r
+}\r
+\r
+$(document).ready(function(){\r
+       $(".tip_info").css("cursor","pointer");\r
+       $(".tip_info > img").mouseover(function(){\r
+               $(".tip_cont").css("display","block");\r
+       });\r
+       $(".tip_info > img").mouseout(function(){\r
+               $(".tip_cont").css("display","none");\r
+       });\r
+});\r
+\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+var isPopup = false ;\r
+\r
+function popupLayerView(id){\r
+\r
+       var $L = $("#" + id) ;\r
+       var $D  = $("#" + id + "down") ;\r
+\r
+       $T = $("#" + id) ;\r
+\r
+       $L.show();\r
+       isPopup = true ;\r
+\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+\r
+       $("#" + id + "agree").focus() ;\r
+\r
+       jQuery(":focusable").focusin(function(e){\r
+               if (isPopup) {\r
+                       e.stopPropagation() ;\r
+                       if ($L.find(jQuery(this)).length > 0) {\r
+                       } else {\r
+                               jQuery(this).blur() ;\r
+                               jQuery("#" + id + " :focusable:first").focus() ;\r
+                       }\r
+               }\r
+       }) ;\r
+\r
+       $L.find('.close').click(function(){\r
+               resetPopup(id) ;\r
+       });\r
+\r
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });\r
+}\r
+\r
+function resetPopup(T) {\r
+       $("#" + T + "down").hide();\r
+       $("#" + T + "agree").attr("checked", false) ;\r
+       isPopup = false ;\r
+       $("#" + T).hide() ;\r
+       $("#" + T + "Btn").focus() ;\r
+}\r
+\r
+function getDownload(T, F, I) {\r
+       if ($("#" + T + "agree").is(':checked')) {\r
+               commonDownloadLog(F, I) ;\r
+               resetPopup(T) ;\r
+       }\r
+}\r
+\r
+function focusable( element, isTabIndexNotNaN ) {\r
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;\r
+       if ( "area" === nodeName ) {\r
+               map = element.parentNode;\r
+               mapName = map.name;\r
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }\r
+               img = $( "img[usemap=#" + mapName + "]" )[0];\r
+               return !!img && visible( img );\r
+       }\r
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible\r
+                       visible( element ) ;\r
+}\r
+\r
+function visible( element ) {\r
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {\r
+               return $.css( this, "visibility" ) === "hidden";\r
+       }).length;\r
+}\r
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }\r
+\r
+$.extend( $.expr[ ":" ], {\r
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },\r
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },\r
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }\r
+});\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+// 2013-11-15 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device1').hide();\r
+       \r
+       $('#thumb_view_btn').hover(function() {\r
+               $('.view_device1').show();\r
+       },function() {\r
+               $('.view_device1').hide();\r
+       });\r
+               \r
+});\r
+\r
+// 2014-04-22 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device2').hide();\r
+       \r
+       $('#thumb_view_btn2').hover(function() {\r
+               $('.view_device2').show();\r
+       },function() {\r
+               $('.view_device2').hide();\r
+       });\r
+               \r
+});\r
+\r
+\r
+function beforePopupLayerView(popId, popId2, popContinue){\r
+       var $L = $("#" + popId) ;\r
+       $L.show(100);\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+       $L.find('.close').click(function(){\r
+               $L.hide();\r
+       });\r
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });\r
+}\r
diff --git a/org.tizen.sampledescriptions/html/scripts/core.js b/org.tizen.sampledescriptions/html/scripts/core.js
index 68dea4c..31ad7ff 100644 (file)
--- a/org.tizen.sampledescriptions/html/scripts/core.js
+++ b/org.tizen.sampledescriptions/html/scripts/core.js
@@ -1,899 +1,899 @@
-// /////////////////////////////////////////////////////////////////////////////////////////////////
-// # com.samsung.devloper common core javascript #
-// # Create Date : 2012.07.10. 
-// # Create By : kangki
-;(function ($) {
-/**
- * Samsung Developer Common JavaScript
- */
-$.SD = {};
-
-/*
- * Method Common
- */
-$.SD.message = function (msg) { if (msg) alert(msg); };
-$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
-$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
-$.SD.typeTest = function (data, datatype) {
-       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
-       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
-       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
-       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
-       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
-       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
-       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
-
-       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
-};
-
-$.SD.toDate = function (date, seperator) {
-       if (!seperator) seperator = '-';
-
-       date = $.SD.replaceAll(date, seperator, '');
-       date = $.SD.replaceAll(date, '/', '');
-
-       if (date.length !== 8) return null;
-       
-       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
-
-       if (date.valueOf().toString() === 'NaN') return null;
-
-       return date;
-};
-
-$.SD.toDateString = function (date, seperator) {
-       if (!seperator) seperator = '/';
-       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
-       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
-
-       var str, dateString = date.getFullYear();
-
-       str             = "0" + (date.getMonth()+1);
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-       str             = "0" + date.getDate();
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-
-       return dateString;
-};
-
-$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
-$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
-$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
-
-$.SD.insertComma = function(num) {
-       var tnum    = num + "";
-       var tarr    = new Array();
-       var dot     = "";
-       var idxDot  = tnum.indexOf(".");
-       var sign    = "";
-       var tinx    = 0;
-       var fnum    = tnum;
-        
-       
-       if(idxDot > -1) {
-               fnum = tnum.substring(0, idxDot);
-               dot  = tnum.substring(idxDot);
-               tnum = fnum;
-       } 
-       
-       if(tnum.indexOf("-") > -1) {
-               fnum = tnum.substring(1);
-               sign = tnum.substring(0, 1);
-       }
-       
-       for(var inx = fnum.length; inx > 0; ) {
-               tarr[tinx++] = fnum.substring(inx, inx - 3);
-               inx = inx - 3;
-       }
-       
-       return sign + tarr.reverse().join(",") + dot;
-}
-
-/**
- * Method Ajax
- */
-$.SD.ajax = {
-       doAjax : function (json) {
-               var param = {
-                       async : json.async,
-                       type : json.type,
-                       dataType : json.dataType,
-                       cache: json.cache,
-                       timeout : json.timeout,
-                       success : json.success,
-                       error : json.error
-               };
-
-               if (param.dataType === 'jsonp') {
-                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
-               } else {
-                       param.url = json.url;
-                       param.data = json.data;
-               }
-               $.ajax(param);
-       },
-       
-       get : function (json) {
-               $.SD.ajax.doAjax({ 
-                       url:json.url,
-                       cache:json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'get', 
-                       dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       },
-       
-       post : function (json) {
-               $.SD.ajax.doAjax({ url:json.url,
-                       cache: json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'post', dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       }
-};
-
-/**
- * SD20 password check
- */
-
-$.SD.isSD20Pwd = function(pwd) {
-       
-       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/[0-9]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
-               return false;
-       }
-       
-       return true;
-};
-
-$.SD.popupCenter = function(popObj) {
-       var scrollbars  = "no";
-       var resizeable  = "no";
-       
-       if(popObj.scrollbars) {
-               scrollbars = popObj.scrollbars; 
-       }
-       
-       if(popObj.resizeable) {
-               resizeable = popObj.resizeable;
-       }
-       
-       var width  = screen.width;
-       var height = screen.height;
-
-       var x = ( width / 2 ) - ( popObj.width / 2 );
-       var y = ( height / 2 ) - ( popObj.height / 2 );
-
-       var opt = "left=" + x +
-                 ",top=" + y +
-                 ",width=" + popObj.width +
-                 ",height=" + popObj.height +
-                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
-                 ",scrollbars=" + scrollbars +
-                 ",resizable=" + resizeable;
-       var pop = window.open(popObj.url, popObj.target, opt);
-       if(pop) {
-               pop.focus();
-       }
-}
-
-$.SD.isValidDate = function(val) {
-       if(val.length != 8) {
-               return false;
-       }
-       
-       var yyyy = Number(val.substring(0, 4)); 
-       var mm   = Number(val.substring(4, 6));
-       var dd   = Number(val.substring(6));
-       
-       if( mm < 1 || mm > 12 ) {
-               return false;
-       }
-       
-       var endDay  = 0;
-       
-       if( mm == 2 ) {
-               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
-                       endDay = 29;
-               } else {
-                       endDay = 28;
-               }
-               
-       } else {
-               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
-               endDay = endDays[mm - 1];
-       }
-       
-       if( dd <= 0 || dd > endDay ) {
-               return false;
-       } 
-       
-       return true;
-       
-}
-
-$.SD.boardDownload = function(option, func) {
-       var jsonData = {
-               url: "/board/ajaxDwnldProc.do",
-               async: false,
-               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
-                               //location.href = $(obj).attr("href");
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.commonDownload = function(fileName, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDwnldProc.do",
-               async: false,
-               data: {fileName: fileName, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               location.href = fileFullPath;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(target == 'new'){
-                                       window.open(fileFullPath, '');
-                               }else{
-                                       location.href = fileFullPath;
-                               }
-                               
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonAllShareClickCountProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonClickCount = function(categoryName, categoryId) {
-       var jsonData = {
-               url: "/common/ajaxCommonClickCountProc.do",
-               data: {categoryName: categoryName, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.getByteLen = function(str) {
-       var resultSize = 0;
-       if(str == null){
-               return 0;
-       }
-       for(var i=0; i<str.length; i++){
-         var c = escape(str.charAt(i));
-         if(c.length == 1){
-                 resultSize ++;
-         }     else if(c.indexOf("%u") != -1) {
-                 resultSize += 2;
-         }     else if(c.indexOf("%") != -1) {
-                 resultSize += c.length/3;
-         }
-       }
-       return resultSize;
-}
-
-$.SD.cutByte = function(str, limit) {
-       var tempStr = new String(str);
-       var len = 0;
-       for ( var i = 0; i < str.length; i++) {
-               var c = escape(str.charAt(i));
-               if (c.length == 1)
-                       len++;
-               else if (c.indexOf("%u") != -1)
-                       len += 2;
-               else if (c.indexOf("%") != -1)
-                       len += c.length / 3;
-               if (len > limit) {
-                       tempStr = tempStr.substring(0, i);
-                       break;
-               }
-       }
-       return tempStr;
-}
-
-$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
-
-/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
-
-/** 
- * Method pagination 
- * */
-$.fn.frontPagination = function (pageInfo, func) {
-       var info = {
-                        prev : 1
-                       ,first : 1
-                       ,begin : pageInfo.begin - 0
-                       ,current : pageInfo.current - 0
-                       ,end : pageInfo.end - 0
-                       ,last : pageInfo.last - 0
-                       ,next : 1
-               },
-               target  = this, 
-               page    = $('<span class="page"></span>'),
-               prev    = "", 
-               next    = "", 
-               i               = 0, 
-               n               = 0;
-
-       info.begin       = info.begin < 1 ? 1 : info.begin;
-       info.current = info.current < 1 ? 1 : info.current;
-       info.end         = info.end < 1 ? 1 : info.end;
-       info.last        = info.last < 1 ? 1 : info.last;
-
-       info.prev = info.current - 1;
-       info.next = info.current + 1;
-
-       target.addClass("pageNumber");
-       target.addClass("mt20");
-       target.children().remove();
-
-       if (info.first < info.begin) {
-               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.first);
-               }));
-       }
-
-       if (info.prev >= info.first) {
-               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.prev);
-               }));
-       }
-
-       i = info.begin;
-       n = info.end;
-       for(; i <= n; i++) {
-               if (i === info.current) {
-                       page.append('<strong>'+i+'</strong>');
-               } else {
-                       (function(index){
-                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
-                                       e.preventDefault();
-                                       func(index);
-                               }));
-                       })(i);
-               }
-       }
-
-       target.append(page);
-
-       if (info.next <= info.last) {
-               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.next);
-               }));
-       }
-       
-       if (info.last > info.end) {
-               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.last);
-               }));
-       }       
-};
-
-/**
- *  Method : popup Show Hide 
- */
-$.fn.popupShow = function(options) {
-       var opts = $.extend({}, $.fn.popupShow.defaults, options);
-       
-       if($("body div#" + opts.maskId).size() == 0) {
-               $("body").append("<div id='" + opts.maskId + "'></div>");
-               $("#" + opts.maskId).css({
-                       "position" : "absolute",
-                       "left"     : "0",
-                       "top"      : "0",
-                       "z-index"  : "9000",
-                       "background-color" : "#000",
-                       "display"  : "none"
-               });
-       }
-       
-       var mask_layer  = $("#" + opts.maskId);
-       var popup_layer = $(this);
-       
-       popup_layer.css("z-index", "9999");
-       
-       var maskHeight = $(document).height();
-       var maskWidth = $(window).width();
-       
-       mask_layer.css({'width':maskWidth,'height':maskHeight});
-       
-       mask_layer.fadeIn(opts.fadeSec);
-       mask_layer.fadeTo(opts.speed, opts.fadeLow);
-       
-       var winH = $(window).height();
-       var winW = $(window).width();
-       
-       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-       
-       popup_layer.fadeIn(opts.fadeSec);
-       
-       var init_num = 0;
-       
-       if(init_num == 0) {
-               mask_layer.click(function() {
-                       $(this).hide();
-                       popup_layer.hide();
-               });
-               
-               
-               $("#" + opts.closeId).click( function(e) {
-                       e.preventDefault();
-                       popup_layer.popupHidden(opts.maskId);
-               });
-               
-               
-               $(window).resize( function() {
-                       var maskHeight = $(document).height();
-                       var maskWidth  = $(window).width();
-                       var winH       = $(window).height();
-                       var winW       = $(window).width();
-                       
-                       mask_layer.css({'width':maskWidth,'height':maskHeight});
-                       
-                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-               });
-               
-               init_num++;
-       }
-};
-
-$.fn.popupHidden = function(maskId) {
-       var id = "#";
-       
-       if(maskId) {
-               id = id + maskId;
-       } else {
-               id = id + $.fn.popupShow.defaults.maskId; 
-       }
-       
-       $(id).hide();
-       $(this).hide();
-};
-
-
-$.fn.popupShow.defaults = {
-       speed : "slow",
-       fadeLow : 0.8,
-       fadeSec : 100,
-       maskId  : "mask",
-       popupId : "layer-pop",
-       closeId : "layer-pop-close"
-};
-
-/**
- *  Method : validate File Ext
- */
-$.fn.isNotValidateFileExt = function(imgExts) {
-       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
-       var that = this;
-       var target = null;
-
-       that.each(function (i, item) {
-               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
-               if (filePath != "") {
-                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
-                       if (!imgExts[fileExt]) {
-                               target = item;
-                               return false;
-                       }
-               }
-       });
-
-       return target;
-}      
-
-/**
- *  Method : validate SD20 Password
- */
-$.validator.addMethod("isSD20Pwd", function(value, element) {
-       return this.optional(element) 
-              || $.SD.isSD20Pwd(value);
-}, "비밀번호를 다시 입력해 주세요.");
-
-$.SD.alterParent = function(options, event) {
-    var label = $(this).data('label');
-    
-    /*
-    if (event && event.type === 'focusin') {
-      label.hide();
-    } else if (event && event.type === 'focusout') {
-      label.css('opacity', options.placeholderOpacity);
-    }
-    */
-    
-    if (event && event.type !== 'keydown') {
-      toggleLabel(this, label);
-    } else {
-      // Use timeout to catch val() just after the key is pressed
-      // Using keyup is too slow.   
-      (function(input) {
-        setTimeout(function() {
-          toggleLabel(input, label);
-        }, 0);
-      })(this);
-    }
-    
-    if (event && event.type === 'focusin') {
-       label.hide();
-    }
-  };
-  
-  var toggleLabel = function(input, label) {
-    if ($(input).val()) {
-      label.hide();
-    } else {
-      label.show();
-    }
-  };
-
-  $.fn.stickyPlaceholders = function(options) {
-    var defaults = {
-      wrapperClass: 'sticky-placeholder-wrapper',
-      wrapperDisplay: 'block',
-      labelClass: 'sticky-placeholder-label',
-      placeholderAttr: 'placeholder',
-      dataAttr: 'data-sticky-placeholder',
-      placeholderColor: '#000',
-      placeholderOpacity: 0.5,
-      placeholderFocusOpacity: 0.25
-    };
-    options = $.extend(defaults, options);
-
-    return this.each(function() {
-      var input       = $(this),
-          placeholder = input.attr(options.placeholderAttr),
-          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
-          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
-          labelStyle;
-
-      // store a reference to each input's label
-      input.data('label', label);
-
-      // remove the placeholder attribute to avoid conflcits
-      input.removeAttr('placeholder');
-      
-      // If the dataAttr is set and it's not equal to the placeholderAttr
-      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
-        input.attr('data-sticky-placeholder', placeholder);
-      }
-
-      labelStyle = {
-        'color': options.placeholderColor,
-        'cursor': 'text',
-        'font-family': input.css('font-family'),
-        'font-weight': input.css('font-weight'),
-        'font-size': input.css('font-size'),
-        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
-        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
-        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
-        'opacity': options.placeholderOpacity,
-        'padding-left': input.css('padding-left'),
-        'padding-top': input.css('padding-top'),
-        'position': 'absolute',
-        'text-transform': input.css('text-transform'),
-        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
-      };
-      label.css(labelStyle);
-      
-      // hide the placeholder if the input already has a value
-      if (input.val()) {
-        label.hide();
-      }
-
-      $(this).bind('keydown input focusin focusout', function(event) {
-        $.SD.alterParent.call(this, options, event);
-      });
-        
-      // prevent click/dblclick from selecting the label text
-      label.bind('mousedown', function(e) {
-        e.preventDefault();
-      });
-      
-      // call alterParent initially without an event to set up the wrapper elements
-      $.SD.alterParent.call(this, options);
-    });
-  };
- 
-$.SD.setInputFileKeyEvent = function(file_id, after_id) {
-       $("#" + file_id).on("keydown", function(e) {
-               var that = $(this);
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.which === 9) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + after_id).focus();
-                       }, 1);
-               }
-       });
-       
-       $("#" + after_id).on("keydown", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + file_id).focus();
-                       }, 1);
-               }
-       });
-}  
-
-$.SD.closeWP = function() {
-       var Browser = navigator.appName;
-       var indexB = Browser.indexOf('Explorer');
-       if (indexB > 0) {
-           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
-           var Version = navigator.userAgent.substring(indexV, indexV + 1);
-           window.opener.focus();
-           if (Version >= 7) {
-               window.open('', '_self', '');
-               window.close();
-           }
-           else if (Version == 6) {
-               window.opener = null;
-               window.close();
-           }
-           else {
-               window.opener = '';
-               window.close();
-           }
-       }
-       else {
-           window.close();
-       }
-}
-
-$.SD.profileFacebook = function() {
-       location.replace("http://facebook.com/profile.php");
-}
-
-/* ------------------------------ END --------------------------------------- */
-window.$SD = $.SD;
-
-})(jQuery);
-
-
-$(document).ready(function(){
-//document rady Start #########################################
-
-// Top menu action Start
-var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
-var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
-var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
-var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
-var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
-var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
-var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
-var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
-var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
-var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
-
-$("#wrapper").on('click', 'a', function(e) {
-        switch($(this).attr('id')) {
-        case 'changeEn': onClickChangeEn(e);  break;
-        case 'changeZh': onClickChangeZh(e); break;
-        case 'changeKo': onClickChangeKo(e); break;
-        case 'signOut': onClickSignOut(e); break;
-        case 'signUp': onClickSignUp(e); break;
-        case 'signIn': onClickSignIn(e); break;
-        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
-        case 'signOff': onClickSignOff(e); break;
-        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
-        case 'deleteAccount' : onClickDeleteAccount(e); break;
-        }
-});
- 
-//Top menu action End
-
-
-$("#sendFacebook, #sendTwitter").click(function(e) {
-       e.preventDefault();
-       var $this = $(this);
-       
-       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
-               var sns = $this.attr("id").substring(4).toLowerCase();
-               switch(sns) {
-               case "facebook" :
-                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
-                       $("div.content img").each(function() {
-                               var that = $(this);
-                               if(that.width() > 200 && that.height() > 200) {
-                                       imgUrl = that.attr("src");
-                                       return false;
-                               }
-                       });
-                       
-                       var data = {
-                               app_id : $("#sd_appId").text(),
-                               link : copyUrl,
-                               picture : imgUrl,
-                               name : $("title").text(),
-                               caption : "developer.samsung.com",
-                               description : $("div.content p").eq(0).text(),
-                               redirectUri : "http://" + location.host + "/board/sns.do"
-                       };
-                       var url = "https://www.facebook.com/dialog/feed?" ;
-                       url += "app_id=" + data.app_id + "&" ;
-                       url += "link=" + data.link + "&" ;
-                       url += "picture=" + data.picture + "&" ;
-                       url += "name=" + encodeURIComponent(data.name) + "&" ;
-                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
-                       url += "description=" + encodeURIComponent(data.description) + "&" ;
-                       url += "redirect_uri=" + data.redirectUri ;
-                       sendSNS(sns, url, 850, 600);
-                       break;
-               case "twitter" :
-                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
-                       break;
-               }
-       }
-       
-       function sendSNS(sns, url, iWidth, iHeight) {
-               var popObj = { url : url
-                                    , width : iWidth
-                                    , height: iHeight
-                                    , target: sns
-                                    , scrollbars: "yes"
-                                    , resizeable: "yes"};
-       
-               $SD.popupCenter(popObj);
-       }
-})
- 
-//document rady End #########################################
- });
-
-;(function(){
-       window.deviceImageError = function(el) {
-               var noImage = noImage || '/images/common/device_details_noimage.gif';
-               if (el.src === noImage) 
-                       return;
-               el.src = noImage;
-       };
-})();
-
-function commonDownload(fileName, categoryId){
-       if (fileName == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!!!")
-               return;
-       }else{
-               $SD.commonDownload(fileName, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLog(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLogTarget(fileFullPath, categoryId, target){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
-               });
-       }
-}
-
-function commonAllShareClickCount(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-/*
-function layer_view(id){
-
-       var $layer = $('#'+id);
-       var $down  = $('.license-layer').find('a#down');
-
-       $layer.show();
-       $layer.find('.close, #down').click(function(){
-               $layer.hide();
-       });
-
-       function countChecked() {
-               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
-       }
-
-       $(":checkbox").click(countChecked);
-}
-*/
+// /////////////////////////////////////////////////////////////////////////////////////////////////\r
+// # com.samsung.devloper common core javascript #\r
+// # Create Date : 2012.07.10. \r
+// # Create By : kangki\r
+;(function ($) {\r
+/**\r
+ * Samsung Developer Common JavaScript\r
+ */\r
+$.SD = {};\r
+\r
+/*\r
+ * Method Common\r
+ */\r
+$.SD.message = function (msg) { if (msg) alert(msg); };\r
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }\r
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };\r
+$.SD.typeTest = function (data, datatype) {\r
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));\r
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));\r
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));\r
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));\r
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));\r
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));\r
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));\r
+\r
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));\r
+};\r
+\r
+$.SD.toDate = function (date, seperator) {\r
+       if (!seperator) seperator = '-';\r
+\r
+       date = $.SD.replaceAll(date, seperator, '');\r
+       date = $.SD.replaceAll(date, '/', '');\r
+\r
+       if (date.length !== 8) return null;\r
+       \r
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));\r
+\r
+       if (date.valueOf().toString() === 'NaN') return null;\r
+\r
+       return date;\r
+};\r
+\r
+$.SD.toDateString = function (date, seperator) {\r
+       if (!seperator) seperator = '/';\r
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);\r
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";\r
+\r
+       var str, dateString = date.getFullYear();\r
+\r
+       str             = "0" + (date.getMonth()+1);\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+       str             = "0" + date.getDate();\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+\r
+       return dateString;\r
+};\r
+\r
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };\r
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };\r
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };\r
+\r
+$.SD.insertComma = function(num) {\r
+       var tnum    = num + "";\r
+       var tarr    = new Array();\r
+       var dot     = "";\r
+       var idxDot  = tnum.indexOf(".");\r
+       var sign    = "";\r
+       var tinx    = 0;\r
+       var fnum    = tnum;\r
+        \r
+       \r
+       if(idxDot > -1) {\r
+               fnum = tnum.substring(0, idxDot);\r
+               dot  = tnum.substring(idxDot);\r
+               tnum = fnum;\r
+       } \r
+       \r
+       if(tnum.indexOf("-") > -1) {\r
+               fnum = tnum.substring(1);\r
+               sign = tnum.substring(0, 1);\r
+       }\r
+       \r
+       for(var inx = fnum.length; inx > 0; ) {\r
+               tarr[tinx++] = fnum.substring(inx, inx - 3);\r
+               inx = inx - 3;\r
+       }\r
+       \r
+       return sign + tarr.reverse().join(",") + dot;\r
+}\r
+\r
+/**\r
+ * Method Ajax\r
+ */\r
+$.SD.ajax = {\r
+       doAjax : function (json) {\r
+               var param = {\r
+                       async : json.async,\r
+                       type : json.type,\r
+                       dataType : json.dataType,\r
+                       cache: json.cache,\r
+                       timeout : json.timeout,\r
+                       success : json.success,\r
+                       error : json.error\r
+               };\r
+\r
+               if (param.dataType === 'jsonp') {\r
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';\r
+               } else {\r
+                       param.url = json.url;\r
+                       param.data = json.data;\r
+               }\r
+               $.ajax(param);\r
+       },\r
+       \r
+       get : function (json) {\r
+               $.SD.ajax.doAjax({ \r
+                       url:json.url,\r
+                       cache:json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'get', \r
+                       dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       },\r
+       \r
+       post : function (json) {\r
+               $.SD.ajax.doAjax({ url:json.url,\r
+                       cache: json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'post', dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       }\r
+};\r
+\r
+/**\r
+ * SD20 password check\r
+ */\r
+\r
+$.SD.isSD20Pwd = function(pwd) {\r
+       \r
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/[0-9]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       return true;\r
+};\r
+\r
+$.SD.popupCenter = function(popObj) {\r
+       var scrollbars  = "no";\r
+       var resizeable  = "no";\r
+       \r
+       if(popObj.scrollbars) {\r
+               scrollbars = popObj.scrollbars; \r
+       }\r
+       \r
+       if(popObj.resizeable) {\r
+               resizeable = popObj.resizeable;\r
+       }\r
+       \r
+       var width  = screen.width;\r
+       var height = screen.height;\r
+\r
+       var x = ( width / 2 ) - ( popObj.width / 2 );\r
+       var y = ( height / 2 ) - ( popObj.height / 2 );\r
+\r
+       var opt = "left=" + x +\r
+                 ",top=" + y +\r
+                 ",width=" + popObj.width +\r
+                 ",height=" + popObj.height +\r
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +\r
+                 ",scrollbars=" + scrollbars +\r
+                 ",resizable=" + resizeable;\r
+       var pop = window.open(popObj.url, popObj.target, opt);\r
+       if(pop) {\r
+               pop.focus();\r
+       }\r
+}\r
+\r
+$.SD.isValidDate = function(val) {\r
+       if(val.length != 8) {\r
+               return false;\r
+       }\r
+       \r
+       var yyyy = Number(val.substring(0, 4)); \r
+       var mm   = Number(val.substring(4, 6));\r
+       var dd   = Number(val.substring(6));\r
+       \r
+       if( mm < 1 || mm > 12 ) {\r
+               return false;\r
+       }\r
+       \r
+       var endDay  = 0;\r
+       \r
+       if( mm == 2 ) {\r
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {\r
+                       endDay = 29;\r
+               } else {\r
+                       endDay = 28;\r
+               }\r
+               \r
+       } else {\r
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);\r
+               endDay = endDays[mm - 1];\r
+       }\r
+       \r
+       if( dd <= 0 || dd > endDay ) {\r
+               return false;\r
+       } \r
+       \r
+       return true;\r
+       \r
+}\r
+\r
+$.SD.boardDownload = function(option, func) {\r
+       var jsonData = {\r
+               url: "/board/ajaxDwnldProc.do",\r
+               async: false,\r
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;\r
+                               //location.href = $(obj).attr("href");\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.commonDownload = function(fileName, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDwnldProc.do",\r
+               async: false,\r
+               data: {fileName: fileName, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               location.href = fileFullPath;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(target == 'new'){\r
+                                       window.open(fileFullPath, '');\r
+                               }else{\r
+                                       location.href = fileFullPath;\r
+                               }\r
+                               \r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonAllShareClickCountProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonClickCount = function(categoryName, categoryId) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonClickCountProc.do",\r
+               data: {categoryName: categoryName, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.getByteLen = function(str) {\r
+       var resultSize = 0;\r
+       if(str == null){\r
+               return 0;\r
+       }\r
+       for(var i=0; i<str.length; i++){\r
+         var c = escape(str.charAt(i));\r
+         if(c.length == 1){\r
+                 resultSize ++;\r
+         }     else if(c.indexOf("%u") != -1) {\r
+                 resultSize += 2;\r
+         }     else if(c.indexOf("%") != -1) {\r
+                 resultSize += c.length/3;\r
+         }\r
+       }\r
+       return resultSize;\r
+}\r
+\r
+$.SD.cutByte = function(str, limit) {\r
+       var tempStr = new String(str);\r
+       var len = 0;\r
+       for ( var i = 0; i < str.length; i++) {\r
+               var c = escape(str.charAt(i));\r
+               if (c.length == 1)\r
+                       len++;\r
+               else if (c.indexOf("%u") != -1)\r
+                       len += 2;\r
+               else if (c.indexOf("%") != -1)\r
+                       len += c.length / 3;\r
+               if (len > limit) {\r
+                       tempStr = tempStr.substring(0, i);\r
+                       break;\r
+               }\r
+       }\r
+       return tempStr;\r
+}\r
+\r
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};\r
+\r
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */\r
+\r
+/** \r
+ * Method pagination \r
+ * */\r
+$.fn.frontPagination = function (pageInfo, func) {\r
+       var info = {\r
+                        prev : 1\r
+                       ,first : 1\r
+                       ,begin : pageInfo.begin - 0\r
+                       ,current : pageInfo.current - 0\r
+                       ,end : pageInfo.end - 0\r
+                       ,last : pageInfo.last - 0\r
+                       ,next : 1\r
+               },\r
+               target  = this, \r
+               page    = $('<span class="page"></span>'),\r
+               prev    = "", \r
+               next    = "", \r
+               i               = 0, \r
+               n               = 0;\r
+\r
+       info.begin       = info.begin < 1 ? 1 : info.begin;\r
+       info.current = info.current < 1 ? 1 : info.current;\r
+       info.end         = info.end < 1 ? 1 : info.end;\r
+       info.last        = info.last < 1 ? 1 : info.last;\r
+\r
+       info.prev = info.current - 1;\r
+       info.next = info.current + 1;\r
+\r
+       target.addClass("pageNumber");\r
+       target.addClass("mt20");\r
+       target.children().remove();\r
+\r
+       if (info.first < info.begin) {\r
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.first);\r
+               }));\r
+       }\r
+\r
+       if (info.prev >= info.first) {\r
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.prev);\r
+               }));\r
+       }\r
+\r
+       i = info.begin;\r
+       n = info.end;\r
+       for(; i <= n; i++) {\r
+               if (i === info.current) {\r
+                       page.append('<strong>'+i+'</strong>');\r
+               } else {\r
+                       (function(index){\r
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){\r
+                                       e.preventDefault();\r
+                                       func(index);\r
+                               }));\r
+                       })(i);\r
+               }\r
+       }\r
+\r
+       target.append(page);\r
+\r
+       if (info.next <= info.last) {\r
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.next);\r
+               }));\r
+       }\r
+       \r
+       if (info.last > info.end) {\r
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.last);\r
+               }));\r
+       }       \r
+};\r
+\r
+/**\r
+ *  Method : popup Show Hide \r
+ */\r
+$.fn.popupShow = function(options) {\r
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);\r
+       \r
+       if($("body div#" + opts.maskId).size() == 0) {\r
+               $("body").append("<div id='" + opts.maskId + "'></div>");\r
+               $("#" + opts.maskId).css({\r
+                       "position" : "absolute",\r
+                       "left"     : "0",\r
+                       "top"      : "0",\r
+                       "z-index"  : "9000",\r
+                       "background-color" : "#000",\r
+                       "display"  : "none"\r
+               });\r
+       }\r
+       \r
+       var mask_layer  = $("#" + opts.maskId);\r
+       var popup_layer = $(this);\r
+       \r
+       popup_layer.css("z-index", "9999");\r
+       \r
+       var maskHeight = $(document).height();\r
+       var maskWidth = $(window).width();\r
+       \r
+       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+       \r
+       mask_layer.fadeIn(opts.fadeSec);\r
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);\r
+       \r
+       var winH = $(window).height();\r
+       var winW = $(window).width();\r
+       \r
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+       \r
+       popup_layer.fadeIn(opts.fadeSec);\r
+       \r
+       var init_num = 0;\r
+       \r
+       if(init_num == 0) {\r
+               mask_layer.click(function() {\r
+                       $(this).hide();\r
+                       popup_layer.hide();\r
+               });\r
+               \r
+               \r
+               $("#" + opts.closeId).click( function(e) {\r
+                       e.preventDefault();\r
+                       popup_layer.popupHidden(opts.maskId);\r
+               });\r
+               \r
+               \r
+               $(window).resize( function() {\r
+                       var maskHeight = $(document).height();\r
+                       var maskWidth  = $(window).width();\r
+                       var winH       = $(window).height();\r
+                       var winW       = $(window).width();\r
+                       \r
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+                       \r
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+               });\r
+               \r
+               init_num++;\r
+       }\r
+};\r
+\r
+$.fn.popupHidden = function(maskId) {\r
+       var id = "#";\r
+       \r
+       if(maskId) {\r
+               id = id + maskId;\r
+       } else {\r
+               id = id + $.fn.popupShow.defaults.maskId; \r
+       }\r
+       \r
+       $(id).hide();\r
+       $(this).hide();\r
+};\r
+\r
+\r
+$.fn.popupShow.defaults = {\r
+       speed : "slow",\r
+       fadeLow : 0.8,\r
+       fadeSec : 100,\r
+       maskId  : "mask",\r
+       popupId : "layer-pop",\r
+       closeId : "layer-pop-close"\r
+};\r
+\r
+/**\r
+ *  Method : validate File Ext\r
+ */\r
+$.fn.isNotValidateFileExt = function(imgExts) {\r
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};\r
+       var that = this;\r
+       var target = null;\r
+\r
+       that.each(function (i, item) {\r
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';\r
+               if (filePath != "") {\r
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();\r
+                       if (!imgExts[fileExt]) {\r
+                               target = item;\r
+                               return false;\r
+                       }\r
+               }\r
+       });\r
+\r
+       return target;\r
+}      \r
+\r
+/**\r
+ *  Method : validate SD20 Password\r
+ */\r
+$.validator.addMethod("isSD20Pwd", function(value, element) {\r
+       return this.optional(element) \r
+              || $.SD.isSD20Pwd(value);\r
+}, "비밀번호를 다시 입력해 주세요.");\r
+\r
+$.SD.alterParent = function(options, event) {\r
+    var label = $(this).data('label');\r
+    \r
+    /*\r
+    if (event && event.type === 'focusin') {\r
+      label.hide();\r
+    } else if (event && event.type === 'focusout') {\r
+      label.css('opacity', options.placeholderOpacity);\r
+    }\r
+    */\r
+    \r
+    if (event && event.type !== 'keydown') {\r
+      toggleLabel(this, label);\r
+    } else {\r
+      // Use timeout to catch val() just after the key is pressed\r
+      // Using keyup is too slow.   \r
+      (function(input) {\r
+        setTimeout(function() {\r
+          toggleLabel(input, label);\r
+        }, 0);\r
+      })(this);\r
+    }\r
+    \r
+    if (event && event.type === 'focusin') {\r
+       label.hide();\r
+    }\r
+  };\r
+  \r
+  var toggleLabel = function(input, label) {\r
+    if ($(input).val()) {\r
+      label.hide();\r
+    } else {\r
+      label.show();\r
+    }\r
+  };\r
+\r
+  $.fn.stickyPlaceholders = function(options) {\r
+    var defaults = {\r
+      wrapperClass: 'sticky-placeholder-wrapper',\r
+      wrapperDisplay: 'block',\r
+      labelClass: 'sticky-placeholder-label',\r
+      placeholderAttr: 'placeholder',\r
+      dataAttr: 'data-sticky-placeholder',\r
+      placeholderColor: '#000',\r
+      placeholderOpacity: 0.5,\r
+      placeholderFocusOpacity: 0.25\r
+    };\r
+    options = $.extend(defaults, options);\r
+\r
+    return this.each(function() {\r
+      var input       = $(this),\r
+          placeholder = input.attr(options.placeholderAttr),\r
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),\r
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),\r
+          labelStyle;\r
+\r
+      // store a reference to each input's label\r
+      input.data('label', label);\r
+\r
+      // remove the placeholder attribute to avoid conflcits\r
+      input.removeAttr('placeholder');\r
+      \r
+      // If the dataAttr is set and it's not equal to the placeholderAttr\r
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {\r
+        input.attr('data-sticky-placeholder', placeholder);\r
+      }\r
+\r
+      labelStyle = {\r
+        'color': options.placeholderColor,\r
+        'cursor': 'text',\r
+        'font-family': input.css('font-family'),\r
+        'font-weight': input.css('font-weight'),\r
+        'font-size': input.css('font-size'),\r
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),\r
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),\r
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671\r
+        'opacity': options.placeholderOpacity,\r
+        'padding-left': input.css('padding-left'),\r
+        'padding-top': input.css('padding-top'),\r
+        'position': 'absolute',\r
+        'text-transform': input.css('text-transform'),\r
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)\r
+      };\r
+      label.css(labelStyle);\r
+      \r
+      // hide the placeholder if the input already has a value\r
+      if (input.val()) {\r
+        label.hide();\r
+      }\r
+\r
+      $(this).bind('keydown input focusin focusout', function(event) {\r
+        $.SD.alterParent.call(this, options, event);\r
+      });\r
+        \r
+      // prevent click/dblclick from selecting the label text\r
+      label.bind('mousedown', function(e) {\r
+        e.preventDefault();\r
+      });\r
+      \r
+      // call alterParent initially without an event to set up the wrapper elements\r
+      $.SD.alterParent.call(this, options);\r
+    });\r
+  };\r
+ \r
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {\r
+       $("#" + file_id).on("keydown", function(e) {\r
+               var that = $(this);\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.which === 9) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + after_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       $("#" + after_id).on("keydown", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + file_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+}  \r
+\r
+$.SD.closeWP = function() {\r
+       var Browser = navigator.appName;\r
+       var indexB = Browser.indexOf('Explorer');\r
+       if (indexB > 0) {\r
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;\r
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);\r
+           window.opener.focus();\r
+           if (Version >= 7) {\r
+               window.open('', '_self', '');\r
+               window.close();\r
+           }\r
+           else if (Version == 6) {\r
+               window.opener = null;\r
+               window.close();\r
+           }\r
+           else {\r
+               window.opener = '';\r
+               window.close();\r
+           }\r
+       }\r
+       else {\r
+           window.close();\r
+       }\r
+}\r
+\r
+$.SD.profileFacebook = function() {\r
+       location.replace("http://facebook.com/profile.php");\r
+}\r
+\r
+/* ------------------------------ END --------------------------------------- */\r
+window.$SD = $.SD;\r
+\r
+})(jQuery);\r
+\r
+\r
+$(document).ready(function(){\r
+//document rady Start #########################################\r
+\r
+// Top menu action Start\r
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };\r
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };\r
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };\r
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };\r
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };\r
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };\r
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };\r
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; \r
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };\r
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };\r
+\r
+$("#wrapper").on('click', 'a', function(e) {\r
+        switch($(this).attr('id')) {\r
+        case 'changeEn': onClickChangeEn(e);  break;\r
+        case 'changeZh': onClickChangeZh(e); break;\r
+        case 'changeKo': onClickChangeKo(e); break;\r
+        case 'signOut': onClickSignOut(e); break;\r
+        case 'signUp': onClickSignUp(e); break;\r
+        case 'signIn': onClickSignIn(e); break;\r
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;\r
+        case 'signOff': onClickSignOff(e); break;\r
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;\r
+        case 'deleteAccount' : onClickDeleteAccount(e); break;\r
+        }\r
+});\r
+ \r
+//Top menu action End\r
+\r
+\r
+$("#sendFacebook, #sendTwitter").click(function(e) {\r
+       e.preventDefault();\r
+       var $this = $(this);\r
+       \r
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {\r
+               var sns = $this.attr("id").substring(4).toLowerCase();\r
+               switch(sns) {\r
+               case "facebook" :\r
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";\r
+                       $("div.content img").each(function() {\r
+                               var that = $(this);\r
+                               if(that.width() > 200 && that.height() > 200) {\r
+                                       imgUrl = that.attr("src");\r
+                                       return false;\r
+                               }\r
+                       });\r
+                       \r
+                       var data = {\r
+                               app_id : $("#sd_appId").text(),\r
+                               link : copyUrl,\r
+                               picture : imgUrl,\r
+                               name : $("title").text(),\r
+                               caption : "developer.samsung.com",\r
+                               description : $("div.content p").eq(0).text(),\r
+                               redirectUri : "http://" + location.host + "/board/sns.do"\r
+                       };\r
+                       var url = "https://www.facebook.com/dialog/feed?" ;\r
+                       url += "app_id=" + data.app_id + "&" ;\r
+                       url += "link=" + data.link + "&" ;\r
+                       url += "picture=" + data.picture + "&" ;\r
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;\r
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;\r
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;\r
+                       url += "redirect_uri=" + data.redirectUri ;\r
+                       sendSNS(sns, url, 850, 600);\r
+                       break;\r
+               case "twitter" :\r
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);\r
+                       break;\r
+               }\r
+       }\r
+       \r
+       function sendSNS(sns, url, iWidth, iHeight) {\r
+               var popObj = { url : url\r
+                                    , width : iWidth\r
+                                    , height: iHeight\r
+                                    , target: sns\r
+                                    , scrollbars: "yes"\r
+                                    , resizeable: "yes"};\r
+       \r
+               $SD.popupCenter(popObj);\r
+       }\r
+})\r
+ \r
+//document rady End #########################################\r
+ });\r
+\r
+;(function(){\r
+       window.deviceImageError = function(el) {\r
+               var noImage = noImage || '/images/common/device_details_noimage.gif';\r
+               if (el.src === noImage) \r
+                       return;\r
+               el.src = noImage;\r
+       };\r
+})();\r
+\r
+function commonDownload(fileName, categoryId){\r
+       if (fileName == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownload(fileName, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLog(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLogTarget(fileFullPath, categoryId, target){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonAllShareClickCount(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+/*\r
+function layer_view(id){\r
+\r
+       var $layer = $('#'+id);\r
+       var $down  = $('.license-layer').find('a#down');\r
+\r
+       $layer.show();\r
+       $layer.find('.close, #down').click(function(){\r
+               $layer.hide();\r
+       });\r
+\r
+       function countChecked() {\r
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()\r
+       }\r
+\r
+       $(":checkbox").click(countChecked);\r
+}\r
+*/\r
diff --git a/org.tizen.sampledescriptions/html/scripts/jquery.util.js b/org.tizen.sampledescriptions/html/scripts/jquery.util.js
index 3fc3ad0..a8516b0 100644 (file)
--- a/org.tizen.sampledescriptions/html/scripts/jquery.util.js
+++ b/org.tizen.sampledescriptions/html/scripts/jquery.util.js
@@ -1,1441 +1,1441 @@
-/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
-(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
-
-
-/*! jQuery v1.7.1 jquery.com | jquery.org/license */
-(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
-f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
-{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
-
-/*
- * Metadata - jQuery plugin for parsing metadata from elements
- *
- * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- *
- * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
- *
- */
-
-/**
- * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
- * in the JSON will become a property of the element itself.
- *
- * There are three supported types of metadata storage:
- *
- *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
- *          
- *   class: Inside the class attribute, wrapped in curly braces: { }
- *   
- *   elem:  Inside a child element (e.g. a script tag). The
- *          name parameter indicates *which* element.
- *          
- * The metadata for an element is loaded the first time the element is accessed via jQuery.
- *
- * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
- * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
- * 
- * @name $.metadata.setType
- *
- * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("class")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from the class attribute
- * 
- * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("attr", "data")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a "data" attribute
- * 
- * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
- * @before $.metadata.setType("elem", "script")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a nested script element
- * 
- * @param String type The encoding type
- * @param String name The name of the attribute to be used to get metadata (optional)
- * @cat Plugins/Metadata
- * @descr Sets the type of encoding to be used when loading metadata for the first time
- * @type undefined
- * @see metadata()
- */
-
-(function($) {
-
-$.extend({
-       metadata : {
-               defaults : {
-                       type: 'class',
-                       name: 'metadata',
-                       cre: /({.*})/,
-                       single: 'metadata'
-               },
-               setType: function( type, name ){
-                       this.defaults.type = type;
-                       this.defaults.name = name;
-               },
-               get: function( elem, opts ){
-                       var settings = $.extend({},this.defaults,opts);
-                       // check for empty string in single property
-                       if ( !settings.single.length ) settings.single = 'metadata';
-                       
-                       var data = $.data(elem, settings.single);
-                       // returned cached data if it already exists
-                       if ( data ) return data;
-                       
-                       data = "{}";
-                       
-                       if ( settings.type == "class" ) {
-                               var m = settings.cre.exec( elem.className );
-                               if ( m )
-                                       data = m[1];
-                       } else if ( settings.type == "elem" ) {
-                               if( !elem.getElementsByTagName )
-                                       return undefined;
-                               var e = elem.getElementsByTagName(settings.name);
-                               if ( e.length )
-                                       data = $.trim(e[0].innerHTML);
-                       } else if ( elem.getAttribute != undefined ) {
-                               var attr = elem.getAttribute( settings.name );
-                               if ( attr )
-                                       data = attr;
-                       }
-                       
-                       if ( data.indexOf( '{' ) <0 )
-                       data = "{" + data + "}";
-                       
-                       data = eval("(" + data + ")");
-                       
-                       $.data( elem, settings.single, data );
-                       return data;
-               }
-       }
-});
-
-/**
- * Returns the metadata object for the first member of the jQuery object.
- *
- * @name metadata
- * @descr Returns element's metadata object
- * @param Object opts An object contianing settings to override the defaults
- * @type jQuery
- * @cat Plugins/Metadata
- */
-$.fn.metadata = function( opts ){
-       return $.metadata.get( this[0], opts );
-};
-
-})(jQuery);
-
-
-/**
- * jQuery Validation Plugin 1.9.0
-
- *
- * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- * http://docs.jquery.com/Plugins/Validation
- *
- * Copyright (c) 2006 - 2011 J철rn Zaefferer
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- */
-
-/**
- * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
- */
-
-(function($) {
-
-$.extend($.fn, {
-       // http://docs.jquery.com/Plugins/Validation/validate
-       validate: function( options ) {
-
-               // if nothing is selected, return nothing; can't chain anyway
-               if (!this.length) {
-                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
-                       return;
-               }
-
-               // check if a validator for this form was already created
-               var validator = $.data(this[0], 'validator');
-               if ( validator ) {
-                       return validator;
-               }
-
-               // Add novalidate tag if HTML5.
-               this.attr('novalidate', 'novalidate');
-
-               validator = new $.validator( options, this[0] );
-               $.data(this[0], 'validator', validator);
-
-               if ( validator.settings.onsubmit ) {
-
-                       var inputsAndButtons = this.find("input, button");
-
-                       // allow suppresing validation by adding a cancel class to the submit button
-                       inputsAndButtons.filter(".cancel").click(function () {
-                               validator.cancelSubmit = true;
-                       });
-
-                       // when a submitHandler is used, capture the submitting button
-                       if (validator.settings.submitHandler) {
-                               inputsAndButtons.filter(":submit").click(function () {
-                                       validator.submitButton = this;
-                               });
-                       }
-
-                       // validate the form on submit
-                       this.submit( function( event ) {
-                               if ( validator.settings.debug )
-                                       // prevent form submit to be able to see console output
-                                       event.preventDefault();
-
-                               function handle() {
-                                       if ( validator.settings.submitHandler ) {
-                                               if (validator.submitButton) {
-                                                       // insert a hidden input as a replacement for the missing submit button
-                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
-                                               }
-                                               validator.settings.submitHandler.call( validator, validator.currentForm );
-                                               if (validator.submitButton) {
-                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
-                                                       hidden.remove();
-                                               }
-                                               return false;
-                                       }
-                                       return true;
-                               }
-
-                               // prevent submit for invalid forms or custom submit handlers
-                               if ( validator.cancelSubmit ) {
-                                       validator.cancelSubmit = false;
-                                       return handle();
-                               }
-                               if ( validator.form() ) {
-                                       if ( validator.pendingRequest ) {
-                                               validator.formSubmitted = true;
-                                               return false;
-                                       }
-                                       return handle();
-                               } else {
-                                       validator.focusInvalid();
-                                       return false;
-                               }
-                       });
-               }
-
-               return validator;
-       },
-       // http://docs.jquery.com/Plugins/Validation/valid
-       valid: function() {
-        if ( $(this[0]).is('form')) {
-            return this.validate().form();
-        } else {
-            var valid = true;
-            var validator = $(this[0].form).validate();
-            this.each(function() {
-                               valid &= validator.element(this);
-            });
-            return valid;
-        }
-    },
-       // attributes: space seperated list of attributes to retrieve and remove
-       removeAttrs: function(attributes) {
-               var result = {},
-                       $element = this;
-               $.each(attributes.split(/\s/), function(index, value) {
-                       result[value] = $element.attr(value);
-                       $element.removeAttr(value);
-               });
-               return result;
-       },
-       // http://docs.jquery.com/Plugins/Validation/rules
-       rules: function(command, argument) {
-               var element = this[0];
-
-               if (command) {
-                       var settings = $.data(element.form, 'validator').settings;
-                       var staticRules = settings.rules;
-                       var existingRules = $.validator.staticRules(element);
-                       switch(command) {
-                       case "add":
-                               $.extend(existingRules, $.validator.normalizeRule(argument));
-                               staticRules[element.name] = existingRules;
-                               if (argument.messages)
-                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
-                               break;
-                       case "remove":
-                               if (!argument) {
-                                       delete staticRules[element.name];
-                                       return existingRules;
-                               }
-                               var filtered = {};
-                               $.each(argument.split(/\s/), function(index, method) {
-                                       filtered[method] = existingRules[method];
-                                       delete existingRules[method];
-                               });
-                               return filtered;
-                       }
-               }
-
-               var data = $.validator.normalizeRules(
-               $.extend(
-                       {},
-                       $.validator.metadataRules(element),
-                       $.validator.classRules(element),
-                       $.validator.attributeRules(element),
-                       $.validator.staticRules(element)
-               ), element);
-
-               // make sure required is at front
-               if (data.required) {
-                       var param = data.required;
-                       delete data.required;
-                       data = $.extend({required: param}, data);
-               }
-
-               return data;
-       }
-});
-
-// Custom selectors
-$.extend($.expr[":"], {
-       // http://docs.jquery.com/Plugins/Validation/blank
-       blank: function(a) {return !$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/filled
-       filled: function(a) {return !!$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/unchecked
-       unchecked: function(a) {return !a.checked;}
-});
-
-// constructor for validator
-$.validator = function( options, form ) {
-       this.settings = $.extend( true, {}, $.validator.defaults, options );
-       this.currentForm = form;
-       this.init();
-};
-
-$.validator.format = function(source, params) {
-       if ( arguments.length == 1 )
-               return function() {
-                       var args = $.makeArray(arguments);
-                       args.unshift(source);
-                       return $.validator.format.apply( this, args );
-               };
-       if ( arguments.length > 2 && params.constructor != Array  ) {
-               params = $.makeArray(arguments).slice(1);
-       }
-       if ( params.constructor != Array ) {
-               params = [ params ];
-       }
-       $.each(params, function(i, n) {
-               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
-       });
-       return source;
-};
-
-$.extend($.validator, {
-
-       defaults: {
-               messages: {},
-               groups: {},
-               rules: {},
-               errorClass: "error",
-               validClass: "valid",
-               errorElement: "label",
-               focusInvalid: true,
-               errorContainer: $( [] ),
-               errorLabelContainer: $( [] ),
-               onsubmit: true,
-               ignore: ":hidden",
-               ignoreTitle: false,
-               onfocusin: function(element, event) {
-                       this.lastActive = element;
-
-                       // hide error label and remove error class on focus if enabled
-                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
-                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
-                               this.addWrapper(this.errorsFor(element)).hide();
-                       }
-               },
-               onfocusout: function(element, event) {
-                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
-                               this.element(element);
-                       }
-               },
-               onkeyup: function(element, event) {
-                       if ( element.name in this.submitted || element == this.lastElement ) {
-                               this.element(element);
-                       }
-               },
-               onclick: function(element, event) {
-                       // click on selects, radiobuttons and checkboxes
-                       if ( element.name in this.submitted )
-                               this.element(element);
-                       // or option elements, check parent select in that case
-                       else if (element.parentNode.name in this.submitted)
-                               this.element(element.parentNode);
-               },
-               highlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
-                       } else {
-                               $(element).addClass(errorClass).removeClass(validClass);
-                       }
-               },
-               unhighlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
-                       } else {
-                               $(element).removeClass(errorClass).addClass(validClass);
-                       }
-               }
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
-       setDefaults: function(settings) {
-               $.extend( $.validator.defaults, settings );
-       },
-
-       messages: {
-               required: "This field is required.",
-               remote: "Please fix this field.",
-               email: "Please enter a valid email address.",
-               url: "Please enter a valid URL.",
-               date: "Please enter a valid date.",
-               dateISO: "Please enter a valid date (ISO).",
-               number: "Please enter a valid number.",
-               digits: "Please enter only digits.",
-               creditcard: "Please enter a valid credit card number.",
-               equalTo: "Please enter the same value again.",
-               accept: "Please enter a value with a valid extension.",
-               maxlength: $.validator.format("Please enter no more than {0} characters."),
-               minlength: $.validator.format("Please enter at least {0} characters."),
-               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
-               range: $.validator.format("Please enter a value between {0} and {1}."),
-               max: $.validator.format("Please enter a value less than or equal to {0}."),
-               min: $.validator.format("Please enter a value greater than or equal to {0}.")
-       },
-
-       autoCreateRanges: false,
-
-       prototype: {
-
-               init: function() {
-                       this.labelContainer = $(this.settings.errorLabelContainer);
-                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
-                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
-                       this.submitted = {};
-                       this.valueCache = {};
-                       this.pendingRequest = 0;
-                       this.pending = {};
-                       this.invalid = {};
-                       this.reset();
-
-                       var groups = (this.groups = {});
-                       $.each(this.settings.groups, function(key, value) {
-                               $.each(value.split(/\s/), function(index, name) {
-                                       groups[name] = key;
-                               });
-                       });
-                       var rules = this.settings.rules;
-                       $.each(rules, function(key, value) {
-                               rules[key] = $.validator.normalizeRule(value);
-                       });
-
-                       function delegate(event) {
-                               var validator = $.data(this[0].form, "validator"),
-                                       eventType = "on" + event.type.replace(/^validate/, "");
-                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
-                       }
-                       $(this.currentForm)
-                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
-                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
-                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
-                                               "[type='week'], [type='time'], [type='datetime-local'], " +
-                                               "[type='range'], [type='color'] ",
-                                               "focusin focusout keyup", delegate)
-                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
-
-                       if (this.settings.invalidHandler)
-                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/form
-               form: function() {
-                       this.checkForm();
-                       $.extend(this.submitted, this.errorMap);
-                       this.invalid = $.extend({}, this.errorMap);
-                       if (!this.valid())
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                       this.showErrors();
-                       return this.valid();
-               },
-
-               // 원본소스
-               /*
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               this.check( elements[i] );
-                       }
-                       return this.valid();
-               },
-               */
-
-               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
-                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
-                                               this.check( this.findByName( elements[i].name )[cnt] );
-                                       }
-                               } else {
-                                       this.check( elements[i] );
-                               }
-                       }
-                       return this.valid();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/element
-               element: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-                       this.lastElement = element;
-                       this.prepareElement( element );
-                       this.currentElements = $(element);
-                       var result = this.check( element );
-                       if ( result ) {
-                               delete this.invalid[element.name];
-                       } else {
-                               this.invalid[element.name] = true;
-                       }
-                       if ( !this.numberOfInvalids() ) {
-                               // Hide error containers on last error
-                               this.toHide = this.toHide.add( this.containers );
-                       }
-                       this.showErrors();
-                       return result;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
-               showErrors: function(errors) {
-                       if(errors) {
-                               // add items to error list and map
-                               $.extend( this.errorMap, errors );
-                               this.errorList = [];
-                               for ( var name in errors ) {
-                                       this.errorList.push({
-                                               message: errors[name],
-                                               element: this.findByName(name)[0]
-                                       });
-                               }
-                               // remove items from success list
-                               this.successList = $.grep( this.successList, function(element) {
-                                       return !(element.name in errors);
-                               });
-                       }
-                       this.settings.showErrors
-                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
-                               : this.defaultShowErrors();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
-               resetForm: function() {
-                       if ( $.fn.resetForm )
-                               $( this.currentForm ).resetForm();
-                       this.submitted = {};
-                       this.lastElement = null;
-                       this.prepareForm();
-                       this.hideErrors();
-                       this.elements().removeClass( this.settings.errorClass );
-               },
-
-               numberOfInvalids: function() {
-                       return this.objectLength(this.invalid);
-               },
-
-               objectLength: function( obj ) {
-                       var count = 0;
-                       for ( var i in obj )
-                               count++;
-                       return count;
-               },
-
-               hideErrors: function() {
-                       this.addWrapper( this.toHide ).hide();
-               },
-
-               valid: function() {
-                       return this.size() == 0;
-               },
-
-               size: function() {
-                       return this.errorList.length;
-               },
-
-               focusInvalid: function() {
-                       if( this.settings.focusInvalid ) {
-                               try {
-                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
-                                       .filter(":visible")
-                                       .focus()
-                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
-                                       .trigger("focusin");
-                               } catch(e) {
-                                       // ignore IE throwing errors when focusing hidden elements
-                               }
-                       }
-               },
-
-               findLastActive: function() {
-                       var lastActive = this.lastActive;
-                       return lastActive && $.grep(this.errorList, function(n) {
-                               return n.element.name == lastActive.name;
-                       }).length == 1 && lastActive;
-               },
-
-               elements: function() {
-                       var validator = this,
-                               rulesCache = {};
-
-                       // select all valid inputs inside the form (no submit or reset buttons)
-                       return $(this.currentForm)
-                       .find("input, select, textarea")
-                       .not(":submit, :reset, :image, [disabled]")
-                       .not( this.settings.ignore )
-                       .filter(function() {
-                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
-
-                               // select only the first element for each name, and only those with rules specified
-                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
-                                       return false;
-
-                               rulesCache[this.name] = true;
-                               return true;
-                       });
-               },
-
-               clean: function( selector ) {
-                       return $( selector )[0];
-               },
-
-               errors: function() {
-                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
-               },
-
-               reset: function() {
-                       this.successList = [];
-                       this.errorList = [];
-                       this.errorMap = {};
-                       this.toShow = $([]);
-                       this.toHide = $([]);
-                       this.currentElements = $([]);
-               },
-
-               prepareForm: function() {
-                       this.reset();
-                       this.toHide = this.errors().add( this.containers );
-               },
-
-               prepareElement: function( element ) {
-                       this.reset();
-                       this.toHide = this.errorsFor(element);
-               },
-
-               check: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-
-                       var rules = $(element).rules();
-                       var dependencyMismatch = false;
-                       for (var method in rules ) {
-                               var rule = { method: method, parameters: rules[method] };
-                               try {
-                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
-
-                                       // if a method indicates that the field is optional and therefore valid,
-                                       // don't mark it as valid when there are no other rules
-                                       if ( result == "dependency-mismatch" ) {
-                                               dependencyMismatch = true;
-                                               continue;
-                                       }
-                                       dependencyMismatch = false;
-
-                                       if ( result == "pending" ) {
-                                               this.toHide = this.toHide.not( this.errorsFor(element) );
-                                               return;
-                                       }
-
-                                       if( !result ) {
-                                               this.formatAndAdd( element, rule );
-                                               return false;
-                                       }
-                               } catch(e) {
-                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
-                                                + ", check the '" + rule.method + "' method", e);
-                                       throw e;
-                               }
-                       }
-                       if (dependencyMismatch)
-                               return;
-                       if ( this.objectLength(rules) )
-                               this.successList.push(element);
-                       return true;
-               },
-
-               // return the custom message for the given element and validation method
-               // specified in the element's "messages" metadata
-               customMetaMessage: function(element, method) {
-                       if (!$.metadata)
-                               return;
-
-                       var meta = this.settings.meta
-                               ? $(element).metadata()[this.settings.meta]
-                               : $(element).metadata();
-
-                       return meta && meta.messages && meta.messages[method];
-               },
-
-               // return the custom message for the given element name and validation method
-               customMessage: function( name, method ) {
-                       var m = this.settings.messages[name];
-                       return m && (m.constructor == String
-                               ? m
-                               : m[method]);
-               },
-
-               // return the first defined argument, allowing empty strings
-               findDefined: function() {
-                       for(var i = 0; i < arguments.length; i++) {
-                               if (arguments[i] !== undefined)
-                                       return arguments[i];
-                       }
-                       return undefined;
-               },
-
-               defaultMessage: function( element, method) {
-                       return this.findDefined(
-                               this.customMessage( element.name, method ),
-                               this.customMetaMessage( element, method ),
-                               // title is never undefined, so handle empty string as undefined
-                               !this.settings.ignoreTitle && element.title || undefined,
-                               $.validator.messages[method],
-                               "<strong>Warning: No message defined for " + element.name + "</strong>"
-                       );
-               },
-
-               formatAndAdd: function( element, rule ) {
-                       var message = this.defaultMessage( element, rule.method ),
-                               theregex = /\$?\{(\d+)\}/g;
-                       if ( typeof message == "function" ) {
-                               message = message.call(this, rule.parameters, element);
-                       } else if (theregex.test(message)) {
-                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
-                       }
-                       this.errorList.push({
-                               message: message,
-                               element: element
-                       });
-
-                       this.errorMap[element.name] = message;
-                       this.submitted[element.name] = message;
-               },
-
-               addWrapper: function(toToggle) {
-                       if ( this.settings.wrapper )
-                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
-                       return toToggle;
-               },
-
-               defaultShowErrors: function() {
-                       for ( var i = 0; this.errorList[i]; i++ ) {
-                               var error = this.errorList[i];
-                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
-                               this.showLabel( error.element, error.message );
-                       }
-                       if( this.errorList.length ) {
-                               this.toShow = this.toShow.add( this.containers );
-                       }
-                       if (this.settings.success) {
-                               for ( var i = 0; this.successList[i]; i++ ) {
-                                       this.showLabel( this.successList[i] );
-                               }
-                       }
-                       if (this.settings.unhighlight) {
-                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
-                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
-                               }
-                       }
-                       this.toHide = this.toHide.not( this.toShow );
-                       this.hideErrors();
-                       this.addWrapper( this.toShow ).show();
-               },
-
-               validElements: function() {
-                       return this.currentElements.not(this.invalidElements());
-               },
-
-               invalidElements: function() {
-                       return $(this.errorList).map(function() {
-                               return this.element;
-                       });
-               },
-
-               showLabel: function(element, message) {
-                       var label = this.errorsFor( element );
-                       if ( label.length ) {
-                               // refresh error/success class
-                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
-
-                               // check if we have a generated label, replace the message then
-                               label.attr("generated") && label.html(message);
-                       } else {
-                               // create label
-                               label = $("<" + this.settings.errorElement + "/>")
-                                       .attr({"for":  this.idOrName(element), generated: true})
-                                       .addClass(this.settings.errorClass)
-                                       .html(message || "");
-                               if ( this.settings.wrapper ) {
-                                       // make sure the element is visible, even in IE
-                                       // actually showing the wrapped element is handled elsewhere
-                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
-                               }
-                               if ( !this.labelContainer.append(label).length )
-                                       this.settings.errorPlacement
-                                               ? this.settings.errorPlacement(label, $(element) )
-                                               : label.insertAfter(element);
-                       }
-                       if ( !message && this.settings.success ) {
-                               label.text("");
-                               typeof this.settings.success == "string"
-                                       ? label.addClass( this.settings.success )
-                                       : this.settings.success( label );
-                       }
-                       this.toShow = this.toShow.add(label);
-               },
-
-               errorsFor: function(element) {
-                       var name = this.idOrName(element);
-               return this.errors().filter(function() {
-                               return $(this).attr('for') == name;
-                       });
-               },
-
-               idOrName: function(element) {
-                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
-               },
-
-               validationTargetFor: function(element) {
-                       // if radio/checkbox, validate first element in group instead
-                       if (this.checkable(element)) {
-                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
-                       }
-                       return element;
-               },
-
-               checkable: function( element ) {
-                       return /radio|checkbox/i.test(element.type);
-               },
-
-               findByName: function( name ) {
-                       // select by name and filter by form for performance over form.find("[name=...]")
-                       var form = this.currentForm;
-                       return $(document.getElementsByName(name)).map(function(index, element) {
-                               return element.form == form && element.name == name && element  || null;
-                       });
-               },
-
-               getLength: function(value, element) {
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               return $("option:selected", element).length;
-                       case 'input':
-                               if( this.checkable( element) )
-                                       return this.findByName(element.name).filter(':checked').length;
-                       }
-                       return value.length;
-               },
-
-               depend: function(param, element) {
-                       return this.dependTypes[typeof param]
-                               ? this.dependTypes[typeof param](param, element)
-                               : true;
-               },
-
-               dependTypes: {
-                       "boolean": function(param, element) {
-                               return param;
-                       },
-                       "string": function(param, element) {
-                               return !!$(param, element.form).length;
-                       },
-                       "function": function(param, element) {
-                               return param(element);
-                       }
-               },
-
-               optional: function(element) {
-                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
-               },
-
-               startRequest: function(element) {
-                       if (!this.pending[element.name]) {
-                               this.pendingRequest++;
-                               this.pending[element.name] = true;
-                       }
-               },
-
-               stopRequest: function(element, valid) {
-                       this.pendingRequest--;
-                       // sometimes synchronization fails, make sure pendingRequest is never < 0
-                       if (this.pendingRequest < 0)
-                               this.pendingRequest = 0;
-                       delete this.pending[element.name];
-                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
-                               $(this.currentForm).submit();
-                               this.formSubmitted = false;
-                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                               this.formSubmitted = false;
-                       }
-               },
-
-               previousValue: function(element) {
-                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
-                               old: null,
-                               valid: true,
-                               message: this.defaultMessage( element, "remote" )
-                       });
-               }
-
-       },
-
-       classRuleSettings: {
-               required: {required: true},
-               email: {email: true},
-               url: {url: true},
-               date: {date: true},
-               dateISO: {dateISO: true},
-               dateDE: {dateDE: true},
-               number: {number: true},
-               numberDE: {numberDE: true},
-               digits: {digits: true},
-               creditcard: {creditcard: true}
-       },
-
-       addClassRules: function(className, rules) {
-               className.constructor == String ?
-                       this.classRuleSettings[className] = rules :
-                       $.extend(this.classRuleSettings, className);
-       },
-
-       classRules: function(element) {
-               var rules = {};
-               var classes = $(element).attr('class');
-               classes && $.each(classes.split(' '), function() {
-                       if (this in $.validator.classRuleSettings) {
-                               $.extend(rules, $.validator.classRuleSettings[this]);
-                       }
-               });
-               return rules;
-       },
-
-       attributeRules: function(element) {
-               var rules = {};
-               var $element = $(element);
-
-               for (var method in $.validator.methods) {
-                       var value;
-                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
-                       if (method === 'required' && typeof $.fn.prop === 'function') {
-                               value = $element.prop(method);
-                       } else {
-                               value = $element.attr(method);
-                       }
-                       if (value) {
-                               rules[method] = value;
-                       } else if ($element[0].getAttribute("type") === method) {
-                               rules[method] = true;
-                       }
-               }
-
-               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
-               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
-                       delete rules.maxlength;
-               }
-
-               return rules;
-       },
-
-       metadataRules: function(element) {
-               if (!$.metadata) return {};
-
-               var meta = $.data(element.form, 'validator').settings.meta;
-               return meta ?
-                       $(element).metadata()[meta] :
-                       $(element).metadata();
-       },
-
-       staticRules: function(element) {
-               var rules = {};
-               var validator = $.data(element.form, 'validator');
-               if (validator.settings.rules) {
-                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
-               }
-               return rules;
-       },
-
-       normalizeRules: function(rules, element) {
-               // handle dependency check
-               $.each(rules, function(prop, val) {
-                       // ignore rule when param is explicitly false, eg. required:false
-                       if (val === false) {
-                               delete rules[prop];
-                               return;
-                       }
-                       if (val.param || val.depends) {
-                               var keepRule = true;
-                               switch (typeof val.depends) {
-                                       case "string":
-                                               keepRule = !!$(val.depends, element.form).length;
-                                               break;
-                                       case "function":
-                                               keepRule = val.depends.call(element, element);
-                                               break;
-                               }
-                               if (keepRule) {
-                                       rules[prop] = val.param !== undefined ? val.param : true;
-                               } else {
-                                       delete rules[prop];
-                               }
-                       }
-               });
-
-               // evaluate parameters
-               $.each(rules, function(rule, parameter) {
-                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
-               });
-
-               // clean number parameters
-               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
-                       if (rules[this]) {
-                               rules[this] = Number(rules[this]);
-                       }
-               });
-               $.each(['rangelength', 'range'], function() {
-                       if (rules[this]) {
-                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
-                       }
-               });
-
-               if ($.validator.autoCreateRanges) {
-                       // auto-create ranges
-                       if (rules.min && rules.max) {
-                               rules.range = [rules.min, rules.max];
-                               delete rules.min;
-                               delete rules.max;
-                       }
-                       if (rules.minlength && rules.maxlength) {
-                               rules.rangelength = [rules.minlength, rules.maxlength];
-                               delete rules.minlength;
-                               delete rules.maxlength;
-                       }
-               }
-
-               // To support custom messages in metadata ignore rule methods titled "messages"
-               if (rules.messages) {
-                       delete rules.messages;
-               }
-
-               return rules;
-       },
-
-       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
-       normalizeRule: function(data) {
-               if( typeof data == "string" ) {
-                       var transformed = {};
-                       $.each(data.split(/\s/), function() {
-                               transformed[this] = true;
-                       });
-                       data = transformed;
-               }
-               return data;
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
-       addMethod: function(name, method, message) {
-               $.validator.methods[name] = method;
-               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
-               if (method.length < 3) {
-                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
-               }
-       },
-
-       methods: {
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/required
-               required: function(value, element, param) {
-                       // check if dependency is met
-                       if ( !this.depend(param, element) )
-                               return "dependency-mismatch";
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               // could be an array for select-multiple or a string, both are fine this way
-                               var val = $(element).val();
-                               return val && val.length > 0;
-                       case 'input':
-                               if ( this.checkable(element) )
-                                       return this.getLength(value, element) > 0;
-                       default:
-                               return $.trim(value).length > 0;
-                       }
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/remote
-               remote: function(value, element, param) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-
-                       var previous = this.previousValue(element);
-                       if (!this.settings.messages[element.name] )
-                               this.settings.messages[element.name] = {};
-                       previous.originalMessage = this.settings.messages[element.name].remote;
-                       this.settings.messages[element.name].remote = previous.message;
-
-                       param = typeof param == "string" && {url:param} || param;
-
-                       if ( this.pending[element.name] ) {
-                               return "pending";
-                       }
-                       if ( previous.old === value ) {
-                               return previous.valid;
-                       }
-
-                       previous.old = value;
-                       var validator = this;
-                       this.startRequest(element);
-                       var data = {};
-                       data[element.name] = value;
-                       $.ajax($.extend(true, {
-                               url: param,
-                               mode: "abort",
-                               port: "validate" + element.name,
-                               dataType: "json",
-                               data: data,
-                               success: function(response) {
-                                       validator.settings.messages[element.name].remote = previous.originalMessage;
-                                       var valid = response === true;
-                                       if ( valid ) {
-                                               var submitted = validator.formSubmitted;
-                                               validator.prepareElement(element);
-                                               validator.formSubmitted = submitted;
-                                               validator.successList.push(element);
-                                               validator.showErrors();
-                                       } else {
-                                               var errors = {};
-                                               var message = response || validator.defaultMessage( element, "remote" );
-                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
-                                               validator.showErrors(errors);
-                                       }
-                                       previous.valid = valid;
-                                       validator.stopRequest(element, valid);
-                               }
-                       }, param));
-                       return "pending";
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
-               minlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
-               maxlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
-               rangelength: function(value, element, param) {
-                       var length = this.getLength($.trim(value), element);
-                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/min
-               min: function( value, element, param ) {
-                       return this.optional(element) || value >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/max
-               max: function( value, element, param ) {
-                       return this.optional(element) || value <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/range
-               range: function( value, element, param ) {
-                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/email
-               email: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
-                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/url
-               url: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
-                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/date
-               date: function(value, element) {
-                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
-               dateISO: function(value, element) {
-                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/number
-               number: function(value, element) {
-                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/digits
-               digits: function(value, element) {
-                       return this.optional(element) || /^\d+$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
-               // based on http://en.wikipedia.org/wiki/Luhn
-               creditcard: function(value, element) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-                       // accept only spaces, digits and dashes
-                       if (/[^0-9 -]+/.test(value))
-                               return false;
-                       var nCheck = 0,
-                               nDigit = 0,
-                               bEven = false;
-
-                       value = value.replace(/\D/g, "");
-
-                       for (var n = value.length - 1; n >= 0; n--) {
-                               var cDigit = value.charAt(n);
-                               var nDigit = parseInt(cDigit, 10);
-                               if (bEven) {
-                                       if ((nDigit *= 2) > 9)
-                                               nDigit -= 9;
-                               }
-                               nCheck += nDigit;
-                               bEven = !bEven;
-                       }
-
-                       return (nCheck % 10) == 0;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/accept
-               accept: function(value, element, param) {
-                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
-                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
-               equalTo: function(value, element, param) {
-                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
-                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
-                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
-                               $(element).valid();
-                       });
-                       return value == target.val();
-               }
-
-       }
-
-});
-
-// deprecated, use $.validator.format instead
-$.format = $.validator.format;
-
-})(jQuery);
-
-// ajax mode: abort
-// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
-// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
-;(function($) {
-       var pendingRequests = {};
-       // Use a prefilter if available (1.5+)
-       if ( $.ajaxPrefilter ) {
-               $.ajaxPrefilter(function(settings, _, xhr) {
-                       var port = settings.port;
-                       if (settings.mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               pendingRequests[port] = xhr;
-                       }
-               });
-       } else {
-               // Proxy ajax
-               var ajax = $.ajax;
-               $.ajax = function(settings) {
-                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
-                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
-                       if (mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               return (pendingRequests[port] = ajax.apply(this, arguments));
-                       }
-                       return ajax.apply(this, arguments);
-               };
-       }
-})(jQuery);
-
-// provides cross-browser focusin and focusout events
-// IE has native support, in other browsers, use event caputuring (neither bubbles)
-
-// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
-// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
-;(function($) {
-       // only implement if not provided by jQuery core (since 1.4)
-       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
-       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
-               $.each({
-                       focus: 'focusin',
-                       blur: 'focusout'
-               }, function( original, fix ){
-                       $.event.special[fix] = {
-                               setup:function() {
-                                       this.addEventListener( original, handler, true );
-                               },
-                               teardown:function() {
-                                       this.removeEventListener( original, handler, true );
-                               },
-                               handler: function(e) {
-                                       arguments[0] = $.event.fix(e);
-                                       arguments[0].type = fix;
-                                       return $.event.handle.apply(this, arguments);
-                               }
-                       };
-                       function handler(e) {
-                               e = $.event.fix(e);
-                               e.type = fix;
-                               return $.event.handle.call(this, e);
-                       }
-               });
-       };
-       $.extend($.fn, {
-               validateDelegate: function(delegate, type, handler) {
-                       return this.bind(type, function(event) {
-                               var target = $(event.target);
-                               if (target.is(delegate)) {
-                                       return handler.apply(target, arguments);
-                               }
-                       });
-               }
-       });
-})(jQuery);
-
-/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
- * Licensed under the MIT License (LICENSE.txt).
- *
- * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
- * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
- * Thanks to: Seamus Leahy for adding deltaX and deltaY
- *
- * Version: 3.0.6
- * 
- * Requires: 1.2.2+
- */
-
-(function($) {
-
-var types = ['DOMMouseScroll', 'mousewheel'];
-
-if ($.event.fixHooks) {
-    for ( var i=types.length; i; ) {
-        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
-    }
-}
-
-$.event.special.mousewheel = {
-    setup: function() {
-        if ( this.addEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.addEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = handler;
-        }
-    },
-    
-    teardown: function() {
-        if ( this.removeEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.removeEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = null;
-        }
-    }
-};
-
-$.fn.extend({
-    mousewheel: function(fn) {
-        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-    },
-    
-    unmousewheel: function(fn) {
-        return this.unbind("mousewheel", fn);
-    }
-});
-
-
-function handler(event) {
-    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
-    event = $.event.fix(orgEvent);
-    event.type = "mousewheel";
-    
-    // Old school scrollwheel delta
-    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
-    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
-    
-    // New school multidimensional scroll (touchpads) deltas
-    deltaY = delta;
-    
-    // Gecko
-    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
-        deltaY = 0;
-        deltaX = -1*delta;
-    }
-    
-    // Webkit
-    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
-    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
-    
-    // Add event and delta to the front of the arguments
-    args.unshift(event, delta, deltaX, deltaY);
-    
-    return ($.event.dispatch || $.event.handle).apply(this, args);
-}
-
-})(jQuery);
-
-/*
- * jScrollPane - v2.0.0beta12 - 2012-07-24
- * http://jscrollpane.kelvinluck.com/
- *
- * Copyright (c) 2010 Kelvin Luck
- * Dual licensed under the MIT and GPL licenses.
- */
-(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
-if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
-}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */\r
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);\r
+\r
+\r
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */\r
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};\r
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()\r
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);\r
+\r
+/*\r
+ * Metadata - jQuery plugin for parsing metadata from elements\r
+ *\r
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ *\r
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $\r
+ *\r
+ */\r
+\r
+/**\r
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property\r
+ * in the JSON will become a property of the element itself.\r
+ *\r
+ * There are three supported types of metadata storage:\r
+ *\r
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.\r
+ *          \r
+ *   class: Inside the class attribute, wrapped in curly braces: { }\r
+ *   \r
+ *   elem:  Inside a child element (e.g. a script tag). The\r
+ *          name parameter indicates *which* element.\r
+ *          \r
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.\r
+ *\r
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements\r
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.\r
+ * \r
+ * @name $.metadata.setType\r
+ *\r
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("class")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from the class attribute\r
+ * \r
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("attr", "data")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a "data" attribute\r
+ * \r
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>\r
+ * @before $.metadata.setType("elem", "script")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a nested script element\r
+ * \r
+ * @param String type The encoding type\r
+ * @param String name The name of the attribute to be used to get metadata (optional)\r
+ * @cat Plugins/Metadata\r
+ * @descr Sets the type of encoding to be used when loading metadata for the first time\r
+ * @type undefined\r
+ * @see metadata()\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend({\r
+       metadata : {\r
+               defaults : {\r
+                       type: 'class',\r
+                       name: 'metadata',\r
+                       cre: /({.*})/,\r
+                       single: 'metadata'\r
+               },\r
+               setType: function( type, name ){\r
+                       this.defaults.type = type;\r
+                       this.defaults.name = name;\r
+               },\r
+               get: function( elem, opts ){\r
+                       var settings = $.extend({},this.defaults,opts);\r
+                       // check for empty string in single property\r
+                       if ( !settings.single.length ) settings.single = 'metadata';\r
+                       \r
+                       var data = $.data(elem, settings.single);\r
+                       // returned cached data if it already exists\r
+                       if ( data ) return data;\r
+                       \r
+                       data = "{}";\r
+                       \r
+                       if ( settings.type == "class" ) {\r
+                               var m = settings.cre.exec( elem.className );\r
+                               if ( m )\r
+                                       data = m[1];\r
+                       } else if ( settings.type == "elem" ) {\r
+                               if( !elem.getElementsByTagName )\r
+                                       return undefined;\r
+                               var e = elem.getElementsByTagName(settings.name);\r
+                               if ( e.length )\r
+                                       data = $.trim(e[0].innerHTML);\r
+                       } else if ( elem.getAttribute != undefined ) {\r
+                               var attr = elem.getAttribute( settings.name );\r
+                               if ( attr )\r
+                                       data = attr;\r
+                       }\r
+                       \r
+                       if ( data.indexOf( '{' ) <0 )\r
+                       data = "{" + data + "}";\r
+                       \r
+                       data = eval("(" + data + ")");\r
+                       \r
+                       $.data( elem, settings.single, data );\r
+                       return data;\r
+               }\r
+       }\r
+});\r
+\r
+/**\r
+ * Returns the metadata object for the first member of the jQuery object.\r
+ *\r
+ * @name metadata\r
+ * @descr Returns element's metadata object\r
+ * @param Object opts An object contianing settings to override the defaults\r
+ * @type jQuery\r
+ * @cat Plugins/Metadata\r
+ */\r
+$.fn.metadata = function( opts ){\r
+       return $.metadata.get( this[0], opts );\r
+};\r
+\r
+})(jQuery);\r
+\r
+\r
+/**\r
+ * jQuery Validation Plugin 1.9.0\r
+\r
+ *\r
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/\r
+ * http://docs.jquery.com/Plugins/Validation\r
+ *\r
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ */\r
+\r
+/**\r
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend($.fn, {\r
+       // http://docs.jquery.com/Plugins/Validation/validate\r
+       validate: function( options ) {\r
+\r
+               // if nothing is selected, return nothing; can't chain anyway\r
+               if (!this.length) {\r
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );\r
+                       return;\r
+               }\r
+\r
+               // check if a validator for this form was already created\r
+               var validator = $.data(this[0], 'validator');\r
+               if ( validator ) {\r
+                       return validator;\r
+               }\r
+\r
+               // Add novalidate tag if HTML5.\r
+               this.attr('novalidate', 'novalidate');\r
+\r
+               validator = new $.validator( options, this[0] );\r
+               $.data(this[0], 'validator', validator);\r
+\r
+               if ( validator.settings.onsubmit ) {\r
+\r
+                       var inputsAndButtons = this.find("input, button");\r
+\r
+                       // allow suppresing validation by adding a cancel class to the submit button\r
+                       inputsAndButtons.filter(".cancel").click(function () {\r
+                               validator.cancelSubmit = true;\r
+                       });\r
+\r
+                       // when a submitHandler is used, capture the submitting button\r
+                       if (validator.settings.submitHandler) {\r
+                               inputsAndButtons.filter(":submit").click(function () {\r
+                                       validator.submitButton = this;\r
+                               });\r
+                       }\r
+\r
+                       // validate the form on submit\r
+                       this.submit( function( event ) {\r
+                               if ( validator.settings.debug )\r
+                                       // prevent form submit to be able to see console output\r
+                                       event.preventDefault();\r
+\r
+                               function handle() {\r
+                                       if ( validator.settings.submitHandler ) {\r
+                                               if (validator.submitButton) {\r
+                                                       // insert a hidden input as a replacement for the missing submit button\r
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);\r
+                                               }\r
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );\r
+                                               if (validator.submitButton) {\r
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced\r
+                                                       hidden.remove();\r
+                                               }\r
+                                               return false;\r
+                                       }\r
+                                       return true;\r
+                               }\r
+\r
+                               // prevent submit for invalid forms or custom submit handlers\r
+                               if ( validator.cancelSubmit ) {\r
+                                       validator.cancelSubmit = false;\r
+                                       return handle();\r
+                               }\r
+                               if ( validator.form() ) {\r
+                                       if ( validator.pendingRequest ) {\r
+                                               validator.formSubmitted = true;\r
+                                               return false;\r
+                                       }\r
+                                       return handle();\r
+                               } else {\r
+                                       validator.focusInvalid();\r
+                                       return false;\r
+                               }\r
+                       });\r
+               }\r
+\r
+               return validator;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/valid\r
+       valid: function() {\r
+        if ( $(this[0]).is('form')) {\r
+            return this.validate().form();\r
+        } else {\r
+            var valid = true;\r
+            var validator = $(this[0].form).validate();\r
+            this.each(function() {\r
+                               valid &= validator.element(this);\r
+            });\r
+            return valid;\r
+        }\r
+    },\r
+       // attributes: space seperated list of attributes to retrieve and remove\r
+       removeAttrs: function(attributes) {\r
+               var result = {},\r
+                       $element = this;\r
+               $.each(attributes.split(/\s/), function(index, value) {\r
+                       result[value] = $element.attr(value);\r
+                       $element.removeAttr(value);\r
+               });\r
+               return result;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/rules\r
+       rules: function(command, argument) {\r
+               var element = this[0];\r
+\r
+               if (command) {\r
+                       var settings = $.data(element.form, 'validator').settings;\r
+                       var staticRules = settings.rules;\r
+                       var existingRules = $.validator.staticRules(element);\r
+                       switch(command) {\r
+                       case "add":\r
+                               $.extend(existingRules, $.validator.normalizeRule(argument));\r
+                               staticRules[element.name] = existingRules;\r
+                               if (argument.messages)\r
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );\r
+                               break;\r
+                       case "remove":\r
+                               if (!argument) {\r
+                                       delete staticRules[element.name];\r
+                                       return existingRules;\r
+                               }\r
+                               var filtered = {};\r
+                               $.each(argument.split(/\s/), function(index, method) {\r
+                                       filtered[method] = existingRules[method];\r
+                                       delete existingRules[method];\r
+                               });\r
+                               return filtered;\r
+                       }\r
+               }\r
+\r
+               var data = $.validator.normalizeRules(\r
+               $.extend(\r
+                       {},\r
+                       $.validator.metadataRules(element),\r
+                       $.validator.classRules(element),\r
+                       $.validator.attributeRules(element),\r
+                       $.validator.staticRules(element)\r
+               ), element);\r
+\r
+               // make sure required is at front\r
+               if (data.required) {\r
+                       var param = data.required;\r
+                       delete data.required;\r
+                       data = $.extend({required: param}, data);\r
+               }\r
+\r
+               return data;\r
+       }\r
+});\r
+\r
+// Custom selectors\r
+$.extend($.expr[":"], {\r
+       // http://docs.jquery.com/Plugins/Validation/blank\r
+       blank: function(a) {return !$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/filled\r
+       filled: function(a) {return !!$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/unchecked\r
+       unchecked: function(a) {return !a.checked;}\r
+});\r
+\r
+// constructor for validator\r
+$.validator = function( options, form ) {\r
+       this.settings = $.extend( true, {}, $.validator.defaults, options );\r
+       this.currentForm = form;\r
+       this.init();\r
+};\r
+\r
+$.validator.format = function(source, params) {\r
+       if ( arguments.length == 1 )\r
+               return function() {\r
+                       var args = $.makeArray(arguments);\r
+                       args.unshift(source);\r
+                       return $.validator.format.apply( this, args );\r
+               };\r
+       if ( arguments.length > 2 && params.constructor != Array  ) {\r
+               params = $.makeArray(arguments).slice(1);\r
+       }\r
+       if ( params.constructor != Array ) {\r
+               params = [ params ];\r
+       }\r
+       $.each(params, function(i, n) {\r
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);\r
+       });\r
+       return source;\r
+};\r
+\r
+$.extend($.validator, {\r
+\r
+       defaults: {\r
+               messages: {},\r
+               groups: {},\r
+               rules: {},\r
+               errorClass: "error",\r
+               validClass: "valid",\r
+               errorElement: "label",\r
+               focusInvalid: true,\r
+               errorContainer: $( [] ),\r
+               errorLabelContainer: $( [] ),\r
+               onsubmit: true,\r
+               ignore: ":hidden",\r
+               ignoreTitle: false,\r
+               onfocusin: function(element, event) {\r
+                       this.lastActive = element;\r
+\r
+                       // hide error label and remove error class on focus if enabled\r
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {\r
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );\r
+                               this.addWrapper(this.errorsFor(element)).hide();\r
+                       }\r
+               },\r
+               onfocusout: function(element, event) {\r
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onkeyup: function(element, event) {\r
+                       if ( element.name in this.submitted || element == this.lastElement ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onclick: function(element, event) {\r
+                       // click on selects, radiobuttons and checkboxes\r
+                       if ( element.name in this.submitted )\r
+                               this.element(element);\r
+                       // or option elements, check parent select in that case\r
+                       else if (element.parentNode.name in this.submitted)\r
+                               this.element(element.parentNode);\r
+               },\r
+               highlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);\r
+                       } else {\r
+                               $(element).addClass(errorClass).removeClass(validClass);\r
+                       }\r
+               },\r
+               unhighlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);\r
+                       } else {\r
+                               $(element).removeClass(errorClass).addClass(validClass);\r
+                       }\r
+               }\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults\r
+       setDefaults: function(settings) {\r
+               $.extend( $.validator.defaults, settings );\r
+       },\r
+\r
+       messages: {\r
+               required: "This field is required.",\r
+               remote: "Please fix this field.",\r
+               email: "Please enter a valid email address.",\r
+               url: "Please enter a valid URL.",\r
+               date: "Please enter a valid date.",\r
+               dateISO: "Please enter a valid date (ISO).",\r
+               number: "Please enter a valid number.",\r
+               digits: "Please enter only digits.",\r
+               creditcard: "Please enter a valid credit card number.",\r
+               equalTo: "Please enter the same value again.",\r
+               accept: "Please enter a value with a valid extension.",\r
+               maxlength: $.validator.format("Please enter no more than {0} characters."),\r
+               minlength: $.validator.format("Please enter at least {0} characters."),\r
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),\r
+               range: $.validator.format("Please enter a value between {0} and {1}."),\r
+               max: $.validator.format("Please enter a value less than or equal to {0}."),\r
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")\r
+       },\r
+\r
+       autoCreateRanges: false,\r
+\r
+       prototype: {\r
+\r
+               init: function() {\r
+                       this.labelContainer = $(this.settings.errorLabelContainer);\r
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);\r
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );\r
+                       this.submitted = {};\r
+                       this.valueCache = {};\r
+                       this.pendingRequest = 0;\r
+                       this.pending = {};\r
+                       this.invalid = {};\r
+                       this.reset();\r
+\r
+                       var groups = (this.groups = {});\r
+                       $.each(this.settings.groups, function(key, value) {\r
+                               $.each(value.split(/\s/), function(index, name) {\r
+                                       groups[name] = key;\r
+                               });\r
+                       });\r
+                       var rules = this.settings.rules;\r
+                       $.each(rules, function(key, value) {\r
+                               rules[key] = $.validator.normalizeRule(value);\r
+                       });\r
+\r
+                       function delegate(event) {\r
+                               var validator = $.data(this[0].form, "validator"),\r
+                                       eventType = "on" + event.type.replace(/^validate/, "");\r
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);\r
+                       }\r
+                       $(this.currentForm)\r
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +\r
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +\r
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +\r
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +\r
+                                               "[type='range'], [type='color'] ",\r
+                                               "focusin focusout keyup", delegate)\r
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);\r
+\r
+                       if (this.settings.invalidHandler)\r
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/form\r
+               form: function() {\r
+                       this.checkForm();\r
+                       $.extend(this.submitted, this.errorMap);\r
+                       this.invalid = $.extend({}, this.errorMap);\r
+                       if (!this.valid())\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                       this.showErrors();\r
+                       return this.valid();\r
+               },\r
+\r
+               // 원본소스\r
+               /*\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               this.check( elements[i] );\r
+                       }\r
+                       return this.valid();\r
+               },\r
+               */\r
+\r
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {\r
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {\r
+                                               this.check( this.findByName( elements[i].name )[cnt] );\r
+                                       }\r
+                               } else {\r
+                                       this.check( elements[i] );\r
+                               }\r
+                       }\r
+                       return this.valid();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/element\r
+               element: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+                       this.lastElement = element;\r
+                       this.prepareElement( element );\r
+                       this.currentElements = $(element);\r
+                       var result = this.check( element );\r
+                       if ( result ) {\r
+                               delete this.invalid[element.name];\r
+                       } else {\r
+                               this.invalid[element.name] = true;\r
+                       }\r
+                       if ( !this.numberOfInvalids() ) {\r
+                               // Hide error containers on last error\r
+                               this.toHide = this.toHide.add( this.containers );\r
+                       }\r
+                       this.showErrors();\r
+                       return result;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors\r
+               showErrors: function(errors) {\r
+                       if(errors) {\r
+                               // add items to error list and map\r
+                               $.extend( this.errorMap, errors );\r
+                               this.errorList = [];\r
+                               for ( var name in errors ) {\r
+                                       this.errorList.push({\r
+                                               message: errors[name],\r
+                                               element: this.findByName(name)[0]\r
+                                       });\r
+                               }\r
+                               // remove items from success list\r
+                               this.successList = $.grep( this.successList, function(element) {\r
+                                       return !(element.name in errors);\r
+                               });\r
+                       }\r
+                       this.settings.showErrors\r
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )\r
+                               : this.defaultShowErrors();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm\r
+               resetForm: function() {\r
+                       if ( $.fn.resetForm )\r
+                               $( this.currentForm ).resetForm();\r
+                       this.submitted = {};\r
+                       this.lastElement = null;\r
+                       this.prepareForm();\r
+                       this.hideErrors();\r
+                       this.elements().removeClass( this.settings.errorClass );\r
+               },\r
+\r
+               numberOfInvalids: function() {\r
+                       return this.objectLength(this.invalid);\r
+               },\r
+\r
+               objectLength: function( obj ) {\r
+                       var count = 0;\r
+                       for ( var i in obj )\r
+                               count++;\r
+                       return count;\r
+               },\r
+\r
+               hideErrors: function() {\r
+                       this.addWrapper( this.toHide ).hide();\r
+               },\r
+\r
+               valid: function() {\r
+                       return this.size() == 0;\r
+               },\r
+\r
+               size: function() {\r
+                       return this.errorList.length;\r
+               },\r
+\r
+               focusInvalid: function() {\r
+                       if( this.settings.focusInvalid ) {\r
+                               try {\r
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])\r
+                                       .filter(":visible")\r
+                                       .focus()\r
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find\r
+                                       .trigger("focusin");\r
+                               } catch(e) {\r
+                                       // ignore IE throwing errors when focusing hidden elements\r
+                               }\r
+                       }\r
+               },\r
+\r
+               findLastActive: function() {\r
+                       var lastActive = this.lastActive;\r
+                       return lastActive && $.grep(this.errorList, function(n) {\r
+                               return n.element.name == lastActive.name;\r
+                       }).length == 1 && lastActive;\r
+               },\r
+\r
+               elements: function() {\r
+                       var validator = this,\r
+                               rulesCache = {};\r
+\r
+                       // select all valid inputs inside the form (no submit or reset buttons)\r
+                       return $(this.currentForm)\r
+                       .find("input, select, textarea")\r
+                       .not(":submit, :reset, :image, [disabled]")\r
+                       .not( this.settings.ignore )\r
+                       .filter(function() {\r
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);\r
+\r
+                               // select only the first element for each name, and only those with rules specified\r
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )\r
+                                       return false;\r
+\r
+                               rulesCache[this.name] = true;\r
+                               return true;\r
+                       });\r
+               },\r
+\r
+               clean: function( selector ) {\r
+                       return $( selector )[0];\r
+               },\r
+\r
+               errors: function() {\r
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );\r
+               },\r
+\r
+               reset: function() {\r
+                       this.successList = [];\r
+                       this.errorList = [];\r
+                       this.errorMap = {};\r
+                       this.toShow = $([]);\r
+                       this.toHide = $([]);\r
+                       this.currentElements = $([]);\r
+               },\r
+\r
+               prepareForm: function() {\r
+                       this.reset();\r
+                       this.toHide = this.errors().add( this.containers );\r
+               },\r
+\r
+               prepareElement: function( element ) {\r
+                       this.reset();\r
+                       this.toHide = this.errorsFor(element);\r
+               },\r
+\r
+               check: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+\r
+                       var rules = $(element).rules();\r
+                       var dependencyMismatch = false;\r
+                       for (var method in rules ) {\r
+                               var rule = { method: method, parameters: rules[method] };\r
+                               try {\r
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );\r
+\r
+                                       // if a method indicates that the field is optional and therefore valid,\r
+                                       // don't mark it as valid when there are no other rules\r
+                                       if ( result == "dependency-mismatch" ) {\r
+                                               dependencyMismatch = true;\r
+                                               continue;\r
+                                       }\r
+                                       dependencyMismatch = false;\r
+\r
+                                       if ( result == "pending" ) {\r
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );\r
+                                               return;\r
+                                       }\r
+\r
+                                       if( !result ) {\r
+                                               this.formatAndAdd( element, rule );\r
+                                               return false;\r
+                                       }\r
+                               } catch(e) {\r
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id\r
+                                                + ", check the '" + rule.method + "' method", e);\r
+                                       throw e;\r
+                               }\r
+                       }\r
+                       if (dependencyMismatch)\r
+                               return;\r
+                       if ( this.objectLength(rules) )\r
+                               this.successList.push(element);\r
+                       return true;\r
+               },\r
+\r
+               // return the custom message for the given element and validation method\r
+               // specified in the element's "messages" metadata\r
+               customMetaMessage: function(element, method) {\r
+                       if (!$.metadata)\r
+                               return;\r
+\r
+                       var meta = this.settings.meta\r
+                               ? $(element).metadata()[this.settings.meta]\r
+                               : $(element).metadata();\r
+\r
+                       return meta && meta.messages && meta.messages[method];\r
+               },\r
+\r
+               // return the custom message for the given element name and validation method\r
+               customMessage: function( name, method ) {\r
+                       var m = this.settings.messages[name];\r
+                       return m && (m.constructor == String\r
+                               ? m\r
+                               : m[method]);\r
+               },\r
+\r
+               // return the first defined argument, allowing empty strings\r
+               findDefined: function() {\r
+                       for(var i = 0; i < arguments.length; i++) {\r
+                               if (arguments[i] !== undefined)\r
+                                       return arguments[i];\r
+                       }\r
+                       return undefined;\r
+               },\r
+\r
+               defaultMessage: function( element, method) {\r
+                       return this.findDefined(\r
+                               this.customMessage( element.name, method ),\r
+                               this.customMetaMessage( element, method ),\r
+                               // title is never undefined, so handle empty string as undefined\r
+                               !this.settings.ignoreTitle && element.title || undefined,\r
+                               $.validator.messages[method],\r
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"\r
+                       );\r
+               },\r
+\r
+               formatAndAdd: function( element, rule ) {\r
+                       var message = this.defaultMessage( element, rule.method ),\r
+                               theregex = /\$?\{(\d+)\}/g;\r
+                       if ( typeof message == "function" ) {\r
+                               message = message.call(this, rule.parameters, element);\r
+                       } else if (theregex.test(message)) {\r
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);\r
+                       }\r
+                       this.errorList.push({\r
+                               message: message,\r
+                               element: element\r
+                       });\r
+\r
+                       this.errorMap[element.name] = message;\r
+                       this.submitted[element.name] = message;\r
+               },\r
+\r
+               addWrapper: function(toToggle) {\r
+                       if ( this.settings.wrapper )\r
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );\r
+                       return toToggle;\r
+               },\r
+\r
+               defaultShowErrors: function() {\r
+                       for ( var i = 0; this.errorList[i]; i++ ) {\r
+                               var error = this.errorList[i];\r
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );\r
+                               this.showLabel( error.element, error.message );\r
+                       }\r
+                       if( this.errorList.length ) {\r
+                               this.toShow = this.toShow.add( this.containers );\r
+                       }\r
+                       if (this.settings.success) {\r
+                               for ( var i = 0; this.successList[i]; i++ ) {\r
+                                       this.showLabel( this.successList[i] );\r
+                               }\r
+                       }\r
+                       if (this.settings.unhighlight) {\r
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {\r
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );\r
+                               }\r
+                       }\r
+                       this.toHide = this.toHide.not( this.toShow );\r
+                       this.hideErrors();\r
+                       this.addWrapper( this.toShow ).show();\r
+               },\r
+\r
+               validElements: function() {\r
+                       return this.currentElements.not(this.invalidElements());\r
+               },\r
+\r
+               invalidElements: function() {\r
+                       return $(this.errorList).map(function() {\r
+                               return this.element;\r
+                       });\r
+               },\r
+\r
+               showLabel: function(element, message) {\r
+                       var label = this.errorsFor( element );\r
+                       if ( label.length ) {\r
+                               // refresh error/success class\r
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );\r
+\r
+                               // check if we have a generated label, replace the message then\r
+                               label.attr("generated") && label.html(message);\r
+                       } else {\r
+                               // create label\r
+                               label = $("<" + this.settings.errorElement + "/>")\r
+                                       .attr({"for":  this.idOrName(element), generated: true})\r
+                                       .addClass(this.settings.errorClass)\r
+                                       .html(message || "");\r
+                               if ( this.settings.wrapper ) {\r
+                                       // make sure the element is visible, even in IE\r
+                                       // actually showing the wrapped element is handled elsewhere\r
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();\r
+                               }\r
+                               if ( !this.labelContainer.append(label).length )\r
+                                       this.settings.errorPlacement\r
+                                               ? this.settings.errorPlacement(label, $(element) )\r
+                                               : label.insertAfter(element);\r
+                       }\r
+                       if ( !message && this.settings.success ) {\r
+                               label.text("");\r
+                               typeof this.settings.success == "string"\r
+                                       ? label.addClass( this.settings.success )\r
+                                       : this.settings.success( label );\r
+                       }\r
+                       this.toShow = this.toShow.add(label);\r
+               },\r
+\r
+               errorsFor: function(element) {\r
+                       var name = this.idOrName(element);\r
+               return this.errors().filter(function() {\r
+                               return $(this).attr('for') == name;\r
+                       });\r
+               },\r
+\r
+               idOrName: function(element) {\r
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);\r
+               },\r
+\r
+               validationTargetFor: function(element) {\r
+                       // if radio/checkbox, validate first element in group instead\r
+                       if (this.checkable(element)) {\r
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];\r
+                       }\r
+                       return element;\r
+               },\r
+\r
+               checkable: function( element ) {\r
+                       return /radio|checkbox/i.test(element.type);\r
+               },\r
+\r
+               findByName: function( name ) {\r
+                       // select by name and filter by form for performance over form.find("[name=...]")\r
+                       var form = this.currentForm;\r
+                       return $(document.getElementsByName(name)).map(function(index, element) {\r
+                               return element.form == form && element.name == name && element  || null;\r
+                       });\r
+               },\r
+\r
+               getLength: function(value, element) {\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               return $("option:selected", element).length;\r
+                       case 'input':\r
+                               if( this.checkable( element) )\r
+                                       return this.findByName(element.name).filter(':checked').length;\r
+                       }\r
+                       return value.length;\r
+               },\r
+\r
+               depend: function(param, element) {\r
+                       return this.dependTypes[typeof param]\r
+                               ? this.dependTypes[typeof param](param, element)\r
+                               : true;\r
+               },\r
+\r
+               dependTypes: {\r
+                       "boolean": function(param, element) {\r
+                               return param;\r
+                       },\r
+                       "string": function(param, element) {\r
+                               return !!$(param, element.form).length;\r
+                       },\r
+                       "function": function(param, element) {\r
+                               return param(element);\r
+                       }\r
+               },\r
+\r
+               optional: function(element) {\r
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";\r
+               },\r
+\r
+               startRequest: function(element) {\r
+                       if (!this.pending[element.name]) {\r
+                               this.pendingRequest++;\r
+                               this.pending[element.name] = true;\r
+                       }\r
+               },\r
+\r
+               stopRequest: function(element, valid) {\r
+                       this.pendingRequest--;\r
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0\r
+                       if (this.pendingRequest < 0)\r
+                               this.pendingRequest = 0;\r
+                       delete this.pending[element.name];\r
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {\r
+                               $(this.currentForm).submit();\r
+                               this.formSubmitted = false;\r
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                               this.formSubmitted = false;\r
+                       }\r
+               },\r
+\r
+               previousValue: function(element) {\r
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {\r
+                               old: null,\r
+                               valid: true,\r
+                               message: this.defaultMessage( element, "remote" )\r
+                       });\r
+               }\r
+\r
+       },\r
+\r
+       classRuleSettings: {\r
+               required: {required: true},\r
+               email: {email: true},\r
+               url: {url: true},\r
+               date: {date: true},\r
+               dateISO: {dateISO: true},\r
+               dateDE: {dateDE: true},\r
+               number: {number: true},\r
+               numberDE: {numberDE: true},\r
+               digits: {digits: true},\r
+               creditcard: {creditcard: true}\r
+       },\r
+\r
+       addClassRules: function(className, rules) {\r
+               className.constructor == String ?\r
+                       this.classRuleSettings[className] = rules :\r
+                       $.extend(this.classRuleSettings, className);\r
+       },\r
+\r
+       classRules: function(element) {\r
+               var rules = {};\r
+               var classes = $(element).attr('class');\r
+               classes && $.each(classes.split(' '), function() {\r
+                       if (this in $.validator.classRuleSettings) {\r
+                               $.extend(rules, $.validator.classRuleSettings[this]);\r
+                       }\r
+               });\r
+               return rules;\r
+       },\r
+\r
+       attributeRules: function(element) {\r
+               var rules = {};\r
+               var $element = $(element);\r
+\r
+               for (var method in $.validator.methods) {\r
+                       var value;\r
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required\r
+                       if (method === 'required' && typeof $.fn.prop === 'function') {\r
+                               value = $element.prop(method);\r
+                       } else {\r
+                               value = $element.attr(method);\r
+                       }\r
+                       if (value) {\r
+                               rules[method] = value;\r
+                       } else if ($element[0].getAttribute("type") === method) {\r
+                               rules[method] = true;\r
+                       }\r
+               }\r
+\r
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs\r
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {\r
+                       delete rules.maxlength;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       metadataRules: function(element) {\r
+               if (!$.metadata) return {};\r
+\r
+               var meta = $.data(element.form, 'validator').settings.meta;\r
+               return meta ?\r
+                       $(element).metadata()[meta] :\r
+                       $(element).metadata();\r
+       },\r
+\r
+       staticRules: function(element) {\r
+               var rules = {};\r
+               var validator = $.data(element.form, 'validator');\r
+               if (validator.settings.rules) {\r
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};\r
+               }\r
+               return rules;\r
+       },\r
+\r
+       normalizeRules: function(rules, element) {\r
+               // handle dependency check\r
+               $.each(rules, function(prop, val) {\r
+                       // ignore rule when param is explicitly false, eg. required:false\r
+                       if (val === false) {\r
+                               delete rules[prop];\r
+                               return;\r
+                       }\r
+                       if (val.param || val.depends) {\r
+                               var keepRule = true;\r
+                               switch (typeof val.depends) {\r
+                                       case "string":\r
+                                               keepRule = !!$(val.depends, element.form).length;\r
+                                               break;\r
+                                       case "function":\r
+                                               keepRule = val.depends.call(element, element);\r
+                                               break;\r
+                               }\r
+                               if (keepRule) {\r
+                                       rules[prop] = val.param !== undefined ? val.param : true;\r
+                               } else {\r
+                                       delete rules[prop];\r
+                               }\r
+                       }\r
+               });\r
+\r
+               // evaluate parameters\r
+               $.each(rules, function(rule, parameter) {\r
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;\r
+               });\r
+\r
+               // clean number parameters\r
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = Number(rules[this]);\r
+                       }\r
+               });\r
+               $.each(['rangelength', 'range'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];\r
+                       }\r
+               });\r
+\r
+               if ($.validator.autoCreateRanges) {\r
+                       // auto-create ranges\r
+                       if (rules.min && rules.max) {\r
+                               rules.range = [rules.min, rules.max];\r
+                               delete rules.min;\r
+                               delete rules.max;\r
+                       }\r
+                       if (rules.minlength && rules.maxlength) {\r
+                               rules.rangelength = [rules.minlength, rules.maxlength];\r
+                               delete rules.minlength;\r
+                               delete rules.maxlength;\r
+                       }\r
+               }\r
+\r
+               // To support custom messages in metadata ignore rule methods titled "messages"\r
+               if (rules.messages) {\r
+                       delete rules.messages;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}\r
+       normalizeRule: function(data) {\r
+               if( typeof data == "string" ) {\r
+                       var transformed = {};\r
+                       $.each(data.split(/\s/), function() {\r
+                               transformed[this] = true;\r
+                       });\r
+                       data = transformed;\r
+               }\r
+               return data;\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod\r
+       addMethod: function(name, method, message) {\r
+               $.validator.methods[name] = method;\r
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];\r
+               if (method.length < 3) {\r
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));\r
+               }\r
+       },\r
+\r
+       methods: {\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/required\r
+               required: function(value, element, param) {\r
+                       // check if dependency is met\r
+                       if ( !this.depend(param, element) )\r
+                               return "dependency-mismatch";\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               // could be an array for select-multiple or a string, both are fine this way\r
+                               var val = $(element).val();\r
+                               return val && val.length > 0;\r
+                       case 'input':\r
+                               if ( this.checkable(element) )\r
+                                       return this.getLength(value, element) > 0;\r
+                       default:\r
+                               return $.trim(value).length > 0;\r
+                       }\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote\r
+               remote: function(value, element, param) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+\r
+                       var previous = this.previousValue(element);\r
+                       if (!this.settings.messages[element.name] )\r
+                               this.settings.messages[element.name] = {};\r
+                       previous.originalMessage = this.settings.messages[element.name].remote;\r
+                       this.settings.messages[element.name].remote = previous.message;\r
+\r
+                       param = typeof param == "string" && {url:param} || param;\r
+\r
+                       if ( this.pending[element.name] ) {\r
+                               return "pending";\r
+                       }\r
+                       if ( previous.old === value ) {\r
+                               return previous.valid;\r
+                       }\r
+\r
+                       previous.old = value;\r
+                       var validator = this;\r
+                       this.startRequest(element);\r
+                       var data = {};\r
+                       data[element.name] = value;\r
+                       $.ajax($.extend(true, {\r
+                               url: param,\r
+                               mode: "abort",\r
+                               port: "validate" + element.name,\r
+                               dataType: "json",\r
+                               data: data,\r
+                               success: function(response) {\r
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;\r
+                                       var valid = response === true;\r
+                                       if ( valid ) {\r
+                                               var submitted = validator.formSubmitted;\r
+                                               validator.prepareElement(element);\r
+                                               validator.formSubmitted = submitted;\r
+                                               validator.successList.push(element);\r
+                                               validator.showErrors();\r
+                                       } else {\r
+                                               var errors = {};\r
+                                               var message = response || validator.defaultMessage( element, "remote" );\r
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;\r
+                                               validator.showErrors(errors);\r
+                                       }\r
+                                       previous.valid = valid;\r
+                                       validator.stopRequest(element, valid);\r
+                               }\r
+                       }, param));\r
+                       return "pending";\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength\r
+               minlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength\r
+               maxlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength\r
+               rangelength: function(value, element, param) {\r
+                       var length = this.getLength($.trim(value), element);\r
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/min\r
+               min: function( value, element, param ) {\r
+                       return this.optional(element) || value >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/max\r
+               max: function( value, element, param ) {\r
+                       return this.optional(element) || value <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/range\r
+               range: function( value, element, param ) {\r
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/email\r
+               email: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/\r
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/url\r
+               url: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/\r
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/date\r
+               date: function(value, element) {\r
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO\r
+               dateISO: function(value, element) {\r
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/number\r
+               number: function(value, element) {\r
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits\r
+               digits: function(value, element) {\r
+                       return this.optional(element) || /^\d+$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard\r
+               // based on http://en.wikipedia.org/wiki/Luhn\r
+               creditcard: function(value, element) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+                       // accept only spaces, digits and dashes\r
+                       if (/[^0-9 -]+/.test(value))\r
+                               return false;\r
+                       var nCheck = 0,\r
+                               nDigit = 0,\r
+                               bEven = false;\r
+\r
+                       value = value.replace(/\D/g, "");\r
+\r
+                       for (var n = value.length - 1; n >= 0; n--) {\r
+                               var cDigit = value.charAt(n);\r
+                               var nDigit = parseInt(cDigit, 10);\r
+                               if (bEven) {\r
+                                       if ((nDigit *= 2) > 9)\r
+                                               nDigit -= 9;\r
+                               }\r
+                               nCheck += nDigit;\r
+                               bEven = !bEven;\r
+                       }\r
+\r
+                       return (nCheck % 10) == 0;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept\r
+               accept: function(value, element, param) {\r
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";\r
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo\r
+               equalTo: function(value, element, param) {\r
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated\r
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead\r
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {\r
+                               $(element).valid();\r
+                       });\r
+                       return value == target.val();\r
+               }\r
+\r
+       }\r
+\r
+});\r
+\r
+// deprecated, use $.validator.format instead\r
+$.format = $.validator.format;\r
+\r
+})(jQuery);\r
+\r
+// ajax mode: abort\r
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});\r
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()\r
+;(function($) {\r
+       var pendingRequests = {};\r
+       // Use a prefilter if available (1.5+)\r
+       if ( $.ajaxPrefilter ) {\r
+               $.ajaxPrefilter(function(settings, _, xhr) {\r
+                       var port = settings.port;\r
+                       if (settings.mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               pendingRequests[port] = xhr;\r
+                       }\r
+               });\r
+       } else {\r
+               // Proxy ajax\r
+               var ajax = $.ajax;\r
+               $.ajax = function(settings) {\r
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,\r
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;\r
+                       if (mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               return (pendingRequests[port] = ajax.apply(this, arguments));\r
+                       }\r
+                       return ajax.apply(this, arguments);\r
+               };\r
+       }\r
+})(jQuery);\r
+\r
+// provides cross-browser focusin and focusout events\r
+// IE has native support, in other browsers, use event caputuring (neither bubbles)\r
+\r
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation\r
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target\r
+;(function($) {\r
+       // only implement if not provided by jQuery core (since 1.4)\r
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs\r
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {\r
+               $.each({\r
+                       focus: 'focusin',\r
+                       blur: 'focusout'\r
+               }, function( original, fix ){\r
+                       $.event.special[fix] = {\r
+                               setup:function() {\r
+                                       this.addEventListener( original, handler, true );\r
+                               },\r
+                               teardown:function() {\r
+                                       this.removeEventListener( original, handler, true );\r
+                               },\r
+                               handler: function(e) {\r
+                                       arguments[0] = $.event.fix(e);\r
+                                       arguments[0].type = fix;\r
+                                       return $.event.handle.apply(this, arguments);\r
+                               }\r
+                       };\r
+                       function handler(e) {\r
+                               e = $.event.fix(e);\r
+                               e.type = fix;\r
+                               return $.event.handle.call(this, e);\r
+                       }\r
+               });\r
+       };\r
+       $.extend($.fn, {\r
+               validateDelegate: function(delegate, type, handler) {\r
+                       return this.bind(type, function(event) {\r
+                               var target = $(event.target);\r
+                               if (target.is(delegate)) {\r
+                                       return handler.apply(target, arguments);\r
+                               }\r
+                       });\r
+               }\r
+       });\r
+})(jQuery);\r
+\r
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)\r
+ * Licensed under the MIT License (LICENSE.txt).\r
+ *\r
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.\r
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.\r
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY\r
+ *\r
+ * Version: 3.0.6\r
+ * \r
+ * Requires: 1.2.2+\r
+ */\r
+\r
+(function($) {\r
+\r
+var types = ['DOMMouseScroll', 'mousewheel'];\r
+\r
+if ($.event.fixHooks) {\r
+    for ( var i=types.length; i; ) {\r
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;\r
+    }\r
+}\r
+\r
+$.event.special.mousewheel = {\r
+    setup: function() {\r
+        if ( this.addEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.addEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = handler;\r
+        }\r
+    },\r
+    \r
+    teardown: function() {\r
+        if ( this.removeEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.removeEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = null;\r
+        }\r
+    }\r
+};\r
+\r
+$.fn.extend({\r
+    mousewheel: function(fn) {\r
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");\r
+    },\r
+    \r
+    unmousewheel: function(fn) {\r
+        return this.unbind("mousewheel", fn);\r
+    }\r
+});\r
+\r
+\r
+function handler(event) {\r
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;\r
+    event = $.event.fix(orgEvent);\r
+    event.type = "mousewheel";\r
+    \r
+    // Old school scrollwheel delta\r
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }\r
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }\r
+    \r
+    // New school multidimensional scroll (touchpads) deltas\r
+    deltaY = delta;\r
+    \r
+    // Gecko\r
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {\r
+        deltaY = 0;\r
+        deltaX = -1*delta;\r
+    }\r
+    \r
+    // Webkit\r
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }\r
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }\r
+    \r
+    // Add event and delta to the front of the arguments\r
+    args.unshift(event, delta, deltaX, deltaY);\r
+    \r
+    return ($.event.dispatch || $.event.handle).apply(this, args);\r
+}\r
+\r
+})(jQuery);\r
+\r
+/*\r
+ * jScrollPane - v2.0.0beta12 - 2012-07-24\r
+ * http://jscrollpane.kelvinluck.com/\r
+ *\r
+ * Copyright (c) 2010 Kelvin Luck\r
+ * Dual licensed under the MIT and GPL licenses.\r
+ */\r
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);\r
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)\r
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()\r
 })}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/scripts/jquery.zclip.min.js b/org.tizen.sampledescriptions/html/scripts/jquery.zclip.min.js
index 51471a1..3548cc2 100644 (file)
--- a/org.tizen.sampledescriptions/html/scripts/jquery.zclip.min.js
+++ b/org.tizen.sampledescriptions/html/scripts/jquery.zclip.min.js
@@ -1,12 +1,12 @@
-/*
- * zClip :: jQuery ZeroClipboard v1.1.1
- * http://steamdev.com/zclip
- *
- * Copyright 2011, SteamDev
- * Released under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- *
- * Date: Wed Jun 01, 2011
- */
-
+/*\r
+ * zClip :: jQuery ZeroClipboard v1.1.1\r
+ * http://steamdev.com/zclip\r
+ *\r
+ * Copyright 2011, SteamDev\r
+ * Released under the MIT license.\r
+ * http://www.opensource.org/licenses/mit-license.php\r
+ *\r
+ * Date: Wed Jun 01, 2011\r
+ */\r
+\r
 (function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/scripts/navi.js b/org.tizen.sampledescriptions/html/scripts/navi.js
index badc738..e4569c3 100644 (file)
--- a/org.tizen.sampledescriptions/html/scripts/navi.js
+++ b/org.tizen.sampledescriptions/html/scripts/navi.js
@@ -1,192 +1,192 @@
-//<![CDATA[
-    var staticURL = "http://img-developer.samsung.com";
-       var sslCall = "";
-
-       if('' !== 'N') {
-               var locationStr = location.href;
-               if(locationStr.indexOf("https://") > -1) {
-                       location.href = "http://" + locationStr.substring(8);
-               }     
-    }
-
-//     if( typeof($) === function ) {
-               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
-               //? ??? ?? ?? ??? ?? ?? ???.
-//     }
-    $SD.pagination.alt = {
-               first:"go first",
-               prev:"go prev",
-               next:"go next",
-               last:"go last"
-    };
-    $(document).ready(function(){
-       var myVar;
-           topSearchInit();//top search ??
-           $('#searchTop').attr("autocomplete","off");
-           var searchingBoolean = false;
-           
-           var topSearchChange = function(){
-               
-               if (searchingBoolean) return;
-               
-                       var searchInput = $('#searchTop').val();
-                       
-                       if($('#searchTop').val() != ""){
-                               $("#topAutocomplete").hide();
-                               searchingBoolean = true;
-                               
-                               var jsonData = {
-                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
-                                               async : true,
-                                               data : { searchInput : searchInput},
-                                               success : function(data){
-                                                       if (searchInput == $('#searchTop').val()){
-                                                               var autoComplete = data.kwdNm;
-                                                               var tmpHtml = "";
-                                                               
-                                                               if (autoComplete.length > 0){
-                                                                       $('#topAutocomplete').children().remove();
-                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
-                                                                       $.each(autoComplete, function(i, item){
-                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
-                                                                               a.data('keyword', item.kwdNm);
-                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
-                                                                       });
-                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
-                                                                               if(e.which == 9 && e.shiftKey) {
-                                                                                       return true;
-                                                                               }
-                                                                               
-                                                                               if(e.which == 9) {
-                                                                                       e.preventDefault();
-                                                                                       $('#topAutocomplete').hide();   
-                                                                                       setTimeout(function() {
-                                                                                               $("#searchTopBtn").focus();
-                                                                                       }, 1);
-                                                                               }
-                                                                               
-                                                                       });
-                                                                       $("#searchTopBtn").off("focusout", function(e) {});
-                                                                   $("#searchTopBtn").on("focusout", function(e) {
-                                                                               $('#topAutocomplete').hide();
-                                                                       });
-                                                               }else{
-                                                                       $('#topAutocomplete').children().remove();
-                                                               }
-                                                               if($('#searchTop').val() == ""){
-                                                                       $("#topAutocomplete").hide();
-                                                                       searchingBoolean = false;
-                                                                       return;
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               searchingBoolean = false;
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                               if (autoComplete.length == 0){
-                                                                       $("#topAutocomplete").hide();
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               $("#topAutocomplete").show();
-                                                                               var $searchList = $("#topAutocomplete").find('ul');
-                                                                               var hei = $searchList.outerHeight();
-                                                                               if(hei>180){
-                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
-                                                                               }
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                       }else{
-                                                               searchingBoolean = false;
-                                                               topSearchChange();
-                                                       }
-                                               },
-                                               error : function() {searchingBoolean = false;}
-                                               
-                               };
-                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
-                               $SD.ajax.get(jsonData);
-                               searchingBoolean = false;
-                       }
-                       
-                       //console.log("/search/autoComplete.do end");
-                       //console.groupEnd();
-               };
-               
-               $('#searchTop').keyup(function(e){
-                       if($('#searchTop').val() == ""){
-                               $('#topAutocomplete').children().remove();
-                               $("#topAutocomplete").hide();
-                       }else{
-                               if(e.which == 13){
-                                       search();
-                               }else{
-                                       topSearchChange();
-                               }
-                       }
-               });
-               
-               var search = function(){
-                       if($.trim($('#searchTop').val()) == ""){
-                               alert('Search keyword is required.');
-                       }else{
-                               $('#topSearchForm').submit();
-                       }
-               };
-               $("#topAutocomplete").on('mousedown','ul li a', function(e){
-                       e.preventDefault();
-                       var keyword = $(this).data('keyword');
-                       $("#searchTop").val(keyword);
-                       $('#topSearchForm').submit();
-               });
-               
-               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
-                       if(e.which == 13) {
-                               e.preventDefault();
-                               var keyword = $(this).data('keyword');
-                               $("#searchTop").val(keyword);
-                               $('#topSearchForm').submit();                   
-                       }
-               });
-               
-               $('#searchTopBtn').click(function(e){
-                       search();       
-               });  
-    });
-    
-    function topSearchEnter(){
-       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
-               alert('Search keyword is required.');
-               return false;
-       }else{
-               return true;
-       }
-    }
-
-/* Tracking Code TOTAL */
-               var _gaq = _gaq || [];
-               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
-               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
-               _gaq.push(['_setAccount', 'UA-6892706-3']);
-               _gaq.push(['_setDomainName', 'samsung.com']);
-               _gaq.push(['_setAllowLinker', true]);
-               _gaq.push(['_trackPageview']);
-               (function() {
-                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-               })();
-       
-               <!--// Tracking Code 1 -->
-                       var _gaq = _gaq || [];
-                       _gaq.push(['_setAccount', 'UA-6892706-4']);
-                       _gaq.push(['_trackPageview']);
-                       (function() {
-                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-                       })();
+//<![CDATA[\r
+    var staticURL = "http://img-developer.samsung.com";\r
+       var sslCall = "";\r
+\r
+       if('' !== 'N') {\r
+               var locationStr = location.href;\r
+               if(locationStr.indexOf("https://") > -1) {\r
+                       location.href = "http://" + locationStr.substring(8);\r
+               }     \r
+    }\r
+\r
+//     if( typeof($) === function ) {\r
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.\r
+               //? ??? ?? ?? ??? ?? ?? ???.\r
+//     }\r
+    $SD.pagination.alt = {\r
+               first:"go first",\r
+               prev:"go prev",\r
+               next:"go next",\r
+               last:"go last"\r
+    };\r
+    $(document).ready(function(){\r
+       var myVar;\r
+           topSearchInit();//top search ??\r
+           $('#searchTop').attr("autocomplete","off");\r
+           var searchingBoolean = false;\r
+           \r
+           var topSearchChange = function(){\r
+               \r
+               if (searchingBoolean) return;\r
+               \r
+                       var searchInput = $('#searchTop').val();\r
+                       \r
+                       if($('#searchTop').val() != ""){\r
+                               $("#topAutocomplete").hide();\r
+                               searchingBoolean = true;\r
+                               \r
+                               var jsonData = {\r
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",\r
+                                               async : true,\r
+                                               data : { searchInput : searchInput},\r
+                                               success : function(data){\r
+                                                       if (searchInput == $('#searchTop').val()){\r
+                                                               var autoComplete = data.kwdNm;\r
+                                                               var tmpHtml = "";\r
+                                                               \r
+                                                               if (autoComplete.length > 0){\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));\r
+                                                                       $.each(autoComplete, function(i, item){\r
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");\r
+                                                                               a.data('keyword', item.kwdNm);\r
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));\r
+                                                                       });\r
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {\r
+                                                                               if(e.which == 9 && e.shiftKey) {\r
+                                                                                       return true;\r
+                                                                               }\r
+                                                                               \r
+                                                                               if(e.which == 9) {\r
+                                                                                       e.preventDefault();\r
+                                                                                       $('#topAutocomplete').hide();   \r
+                                                                                       setTimeout(function() {\r
+                                                                                               $("#searchTopBtn").focus();\r
+                                                                                       }, 1);\r
+                                                                               }\r
+                                                                               \r
+                                                                       });\r
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});\r
+                                                                   $("#searchTopBtn").on("focusout", function(e) {\r
+                                                                               $('#topAutocomplete').hide();\r
+                                                                       });\r
+                                                               }else{\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                               }\r
+                                                               if($('#searchTop').val() == ""){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                                       searchingBoolean = false;\r
+                                                                       return;\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               searchingBoolean = false;\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                               if (autoComplete.length == 0){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               $("#topAutocomplete").show();\r
+                                                                               var $searchList = $("#topAutocomplete").find('ul');\r
+                                                                               var hei = $searchList.outerHeight();\r
+                                                                               if(hei>180){\r
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});\r
+                                                                               }\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                       }else{\r
+                                                               searchingBoolean = false;\r
+                                                               topSearchChange();\r
+                                                       }\r
+                                               },\r
+                                               error : function() {searchingBoolean = false;}\r
+                                               \r
+                               };\r
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);\r
+                               $SD.ajax.get(jsonData);\r
+                               searchingBoolean = false;\r
+                       }\r
+                       \r
+                       //console.log("/search/autoComplete.do end");\r
+                       //console.groupEnd();\r
+               };\r
+               \r
+               $('#searchTop').keyup(function(e){\r
+                       if($('#searchTop').val() == ""){\r
+                               $('#topAutocomplete').children().remove();\r
+                               $("#topAutocomplete").hide();\r
+                       }else{\r
+                               if(e.which == 13){\r
+                                       search();\r
+                               }else{\r
+                                       topSearchChange();\r
+                               }\r
+                       }\r
+               });\r
+               \r
+               var search = function(){\r
+                       if($.trim($('#searchTop').val()) == ""){\r
+                               alert('Search keyword is required.');\r
+                       }else{\r
+                               $('#topSearchForm').submit();\r
+                       }\r
+               };\r
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){\r
+                       e.preventDefault();\r
+                       var keyword = $(this).data('keyword');\r
+                       $("#searchTop").val(keyword);\r
+                       $('#topSearchForm').submit();\r
+               });\r
+               \r
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){\r
+                       if(e.which == 13) {\r
+                               e.preventDefault();\r
+                               var keyword = $(this).data('keyword');\r
+                               $("#searchTop").val(keyword);\r
+                               $('#topSearchForm').submit();                   \r
+                       }\r
+               });\r
+               \r
+               $('#searchTopBtn').click(function(e){\r
+                       search();       \r
+               });  \r
+    });\r
+    \r
+    function topSearchEnter(){\r
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){\r
+               alert('Search keyword is required.');\r
+               return false;\r
+       }else{\r
+               return true;\r
+       }\r
+    }\r
+\r
+/* Tracking Code TOTAL */\r
+               var _gaq = _gaq || [];\r
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';\r
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);\r
+               _gaq.push(['_setAccount', 'UA-6892706-3']);\r
+               _gaq.push(['_setDomainName', 'samsung.com']);\r
+               _gaq.push(['_setAllowLinker', true]);\r
+               _gaq.push(['_trackPageview']);\r
+               (function() {\r
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+               })();\r
+       \r
+               <!--// Tracking Code 1 -->\r
+                       var _gaq = _gaq || [];\r
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);\r
+                       _gaq.push(['_trackPageview']);\r
+                       (function() {\r
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+                       })();\r
diff --git a/org.tizen.sampledescriptions/html/scripts/search.js b/org.tizen.sampledescriptions/html/scripts/search.js
index d1ae5ad..a67a795 100644 (file)
--- a/org.tizen.sampledescriptions/html/scripts/search.js
+++ b/org.tizen.sampledescriptions/html/scripts/search.js
@@ -1,168 +1,168 @@
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
- */
-function searchInit()
-{
-       var focusTarget = "input";
-
-       //$("#autocomplete").hide();
-
-       //$("#searchInput").bind("keydown", checkSearchText);
-       
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $("#autocomplete").bind("mouseleave",function(){
-               $(this).hide();
-               $("#btnDropdown").removeClass("dropdownoff");
-               $("#btnDropdown").addClass("dropdown");         
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       //$(".autocomplete").css("visibility", "visible");
-                       $("#autocomplete").show();
-                       
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-               }
-               else{
-                       //$(".autocomplete").css("visibility", "hidden");
-                       $("#autocomplete").hide();
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
-
-
-
-function topSearchInit()
-{
-       var focusTarget = "input";
-
-       //$("#searchTop").bind("keydown", checkSearchText);
-       
-       $("#searchTop").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {       
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchTop" ).focusin( function()   {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchTop").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".topAutocomplete").css("visibility", "visible");
-               }else{
-                       $(".topAutocomplete").css("visibility", "hidden");
-                       $("#topAutocomplete").hide();
-               }
-       }
-}
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+ */\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#autocomplete").hide();\r
+\r
+       //$("#searchInput").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $("#autocomplete").bind("mouseleave",function(){\r
+               $(this).hide();\r
+               $("#btnDropdown").removeClass("dropdownoff");\r
+               $("#btnDropdown").addClass("dropdown");         \r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       //$(".autocomplete").css("visibility", "visible");\r
+                       $("#autocomplete").show();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+               }\r
+               else{\r
+                       //$(".autocomplete").css("visibility", "hidden");\r
+                       $("#autocomplete").hide();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+\r
+\r
+\r
+function topSearchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#searchTop").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchTop").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {       \r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchTop" ).focusin( function()   {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchTop").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".topAutocomplete").css("visibility", "visible");\r
+               }else{\r
+                       $(".topAutocomplete").css("visibility", "hidden");\r
+                       $("#topAutocomplete").hide();\r
+               }\r
+       }\r
+}\r
diff --git a/org.tizen.sampledescriptions/html/scripts/showhide.js b/org.tizen.sampledescriptions/html/scripts/showhide.js
index 2e85407..b882d14 100644 (file)
--- a/org.tizen.sampledescriptions/html/scripts/showhide.js
+++ b/org.tizen.sampledescriptions/html/scripts/showhide.js
@@ -1,204 +1,204 @@
-/*all Show Hide devicespecs List*/
-if($('div#contents').find('.devicespecs-util').length){
-var self = $('div#contents').find('.devicespecs-util');
-
-$('.showA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-var me = $(this);
-var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-if ( !me.next().is(':visible') ){
-       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-       me.find('em').text('Hide');
-       me.next().show();
-}
-});
-return false;
-})
-$('.hideA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-
-       var me = $(this);
-       var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-       if ( me.next().is(':visible') ){
-               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-               me.find('em').text('Show');
-               me.next().hide();
-       }
-                                       
-});
-return false;
-})
-}      
-
-/*toggle devicespecs List*/
-if($('div#contents').find('.devicespec-tit').length){
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-$('a', self).bind ("click", function(){
-       var idx = $('.devicespec-tit a').index(this);
-
-       if ( $(this).parent().parent().next().is(':visible') ){
-               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-               self.find('em').text('Show');
-               self.next().hide();
-
-               return false;
-       }else{
-               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-               self.find('em').text('Hide');
-
-               self.next().show();
-
-               return false;
-       }
-
-});
-
-});
-}
-
-$('ul.devicespecifications li div.devicespec-con').hide();
-
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-var arrow =  $('a', self);
-
-if(self.next().is(':visible')){
-arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
-self.find('em').text('Hide');
-}else{
-arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
-self.find('em').text('Show');
-}
-
-});
-
-$(document).ready(function(){
-       var openheading = function(target) {
-               var origin = $(target);
-               target = origin.closest('.devicespec-con');
-               if (!(target.length > 0)) {
-                       target = origin.closest('.devicespec-tit');
-               }
-               if (target.length > 0) {
-                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
-                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
-                       }
-               }
-
-               $(window.location.hash)[0].scrollIntoView();
-       };
-
-       $(".opensection").click(function(){
-               var target = $($(this).attr("href"));//.closest('.devicespec-con');
-               openheading(target);
-       });
-
-       if (window.location.hash) {
-               var target = $(window.location.hash);
-               openheading(target);
-               //$(target).focus(); //uncomment if fail to work
-       }
-
-       var isScrolledIntoView = function(elem)
-       {
-               var docViewTop = $('#contents').scrollTop();
-               var docViewBottom = docViewTop + $('#contents').height();
-
-               var elemTop = $(elem).offset().top;
-               var elemBottom = elemTop + $(elem).height();
-
-               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
-                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
-       }
-
-       $('#contents').scroll();
-
-       var checkBreadCrumbs = function() {
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-                       $('.help_breadcrumbs').hide();
-               } else {
-                       $('a.top.sms').hide();
-                       $('.help_breadcrumbs').show();
-               }
-               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
-       }       
-
-       var updateH = function(){
-               checkBreadCrumbs();
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
-
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
-               if ($('a.top').is(':visible'))
-               {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
-               } else {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
-               }
-               $('#toc').css('height', $('#toc').css('height') - 5);
-
-               $('#toc_border').height($('#toc').outerHeight() + 5);
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
-               //$('#toc').css('width', $('#toc_border').width() - 40);
-               $('#toc').css('width', $('#toc_border').width() - 49);
-       };
-
-       var updateH_no_toc = function() {
-               checkBreadCrumbs();
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-               } else {
-                       $('a.top.sms').hide();
-               }
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-       }
-
-       if ($('body').hasClass('no-toc')) {
-               updateH = updateH_no_toc;
-       }
-       $(window).resize(updateH);
-       $('#contents').scroll(updateH);
-       $(window).resize();
-       
-       $('a.top').click(function(){$('#contents').scrollTop(0)});
-
-       var hashchanged = function() {
-               if (window.location.hash.length) {
-                       openheading(window.location.hash);
-                       //$(window.location.hash).scrollTo();
-                       $(window.location.hash)[0].scrollIntoView();
-
-               } else 
-               {
-                       $('#contents').scrollTop(0);
-               }
-       };
-
-       if (("onhashchange" in window) && !($.browser.msie)) { 
-               $(window).bind( 'hashchange',hashchanged);
-       }
-       else { 
-               var prevHash = window.location.hash;
-               window.setInterval(function () {
-                       if (window.location.hash != prevHash) {
-                               hashchanged();
-                               prevHash = window.location.hash;
-                       }
-               }, 100);
-       }
-});
+/*all Show Hide devicespecs List*/\r
+if($('div#contents').find('.devicespecs-util').length){\r
+var self = $('div#contents').find('.devicespecs-util');\r
+\r
+$('.showA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+var me = $(this);\r
+var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+if ( !me.next().is(':visible') ){\r
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+       me.find('em').text('Hide');\r
+       me.next().show();\r
+}\r
+});\r
+return false;\r
+})\r
+$('.hideA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+\r
+       var me = $(this);\r
+       var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+       if ( me.next().is(':visible') ){\r
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+               me.find('em').text('Show');\r
+               me.next().hide();\r
+       }\r
+                                       \r
+});\r
+return false;\r
+})\r
+}      \r
+\r
+/*toggle devicespecs List*/\r
+if($('div#contents').find('.devicespec-tit').length){\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+$('a', self).bind ("click", function(){\r
+       var idx = $('.devicespec-tit a').index(this);\r
+\r
+       if ( $(this).parent().parent().next().is(':visible') ){\r
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+               self.find('em').text('Show');\r
+               self.next().hide();\r
+\r
+               return false;\r
+       }else{\r
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+               self.find('em').text('Hide');\r
+\r
+               self.next().show();\r
+\r
+               return false;\r
+       }\r
+\r
+});\r
+\r
+});\r
+}\r
+\r
+$('ul.devicespecifications li div.devicespec-con').hide();\r
+\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+var arrow =  $('a', self);\r
+\r
+if(self.next().is(':visible')){\r
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));\r
+self.find('em').text('Hide');\r
+}else{\r
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));\r
+self.find('em').text('Show');\r
+}\r
+\r
+});\r
+\r
+$(document).ready(function(){\r
+       var openheading = function(target) {\r
+               var origin = $(target);\r
+               target = origin.closest('.devicespec-con');\r
+               if (!(target.length > 0)) {\r
+                       target = origin.closest('.devicespec-tit');\r
+               }\r
+               if (target.length > 0) {\r
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {\r
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();\r
+                       }\r
+               }\r
+\r
+               $(window.location.hash)[0].scrollIntoView();\r
+       };\r
+\r
+       $(".opensection").click(function(){\r
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');\r
+               openheading(target);\r
+       });\r
+\r
+       if (window.location.hash) {\r
+               var target = $(window.location.hash);\r
+               openheading(target);\r
+               //$(target).focus(); //uncomment if fail to work\r
+       }\r
+\r
+       var isScrolledIntoView = function(elem)\r
+       {\r
+               var docViewTop = $('#contents').scrollTop();\r
+               var docViewBottom = docViewTop + $('#contents').height();\r
+\r
+               var elemTop = $(elem).offset().top;\r
+               var elemBottom = elemTop + $(elem).height();\r
+\r
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)\r
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );\r
+       }\r
+\r
+       $('#contents').scroll();\r
+\r
+       var checkBreadCrumbs = function() {\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+                       $('.help_breadcrumbs').hide();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+                       $('.help_breadcrumbs').show();\r
+               }\r
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));\r
+       }       \r
+\r
+       var updateH = function(){\r
+               checkBreadCrumbs();\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));\r
+\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+\r
+               if ($('a.top').is(':visible'))\r
+               {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);\r
+               } else {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);\r
+               }\r
+               $('#toc').css('height', $('#toc').css('height') - 5);\r
+\r
+               $('#toc_border').height($('#toc').outerHeight() + 5);\r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);\r
+               //$('#toc').css('width', $('#toc_border').width() - 40);\r
+               $('#toc').css('width', $('#toc_border').width() - 49);\r
+       };\r
+\r
+       var updateH_no_toc = function() {\r
+               checkBreadCrumbs();\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+               }\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               \r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+       }\r
+\r
+       if ($('body').hasClass('no-toc')) {\r
+               updateH = updateH_no_toc;\r
+       }\r
+       $(window).resize(updateH);\r
+       $('#contents').scroll(updateH);\r
+       $(window).resize();\r
+       \r
+       $('a.top').click(function(){$('#contents').scrollTop(0)});\r
+\r
+       var hashchanged = function() {\r
+               if (window.location.hash.length) {\r
+                       openheading(window.location.hash);\r
+                       //$(window.location.hash).scrollTo();\r
+                       $(window.location.hash)[0].scrollIntoView();\r
+\r
+               } else \r
+               {\r
+                       $('#contents').scrollTop(0);\r
+               }\r
+       };\r
+\r
+       if (("onhashchange" in window) && !($.browser.msie)) { \r
+               $(window).bind( 'hashchange',hashchanged);\r
+       }\r
+       else { \r
+               var prevHash = window.location.hash;\r
+               window.setInterval(function () {\r
+                       if (window.location.hash != prevHash) {\r
+                               hashchanged();\r
+                               prevHash = window.location.hash;\r
+                       }\r
+               }, 100);\r
+       }\r
+});\r
diff --git a/org.tizen.sampledescriptions/html/wearable_n/analog_watch_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/analog_watch_sd_wn.htm
new file mode 100644 (file)
index 0000000..ef23a7c
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/analog_watch_sd_wn.htm
@@ -0,0 +1,186 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Analog Watch Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>Analog Watch Sample Overview</h1> 
+  
+  <p>The Analog Watch sample demonstrates how you can create an analog watch application.</p>
+<p>The following figure illustrates the main screen of the Analog Watch application and the UI component tree.</p>
+
+    <p class="figure">Figure: Analog Watch screen</p> 
+  <p align="center"><img alt="Analog Watch screen" src="../images/analog_watch_sd_wn.png" /></p>
+  <p align="center"><img alt="Analog Watch screen" src="../images/analog_watch_tree_sd_wn.png" /></p>
+
+<h2>Implementation</h2>
+
+<p>To implement the analog watch:</p>
+<ol>
+<li>Initialize the application by creating the window and layout.
+<p>The <span style="font-family: Courier New,Courier,monospace;">_create_analogwatch()</span> function creates the window and layout, which are the basis of the analog watch application. After creating the window and layout, the <span style="font-family: Courier New,Courier,monospace;">_create_clock()</span> function makes the detailed layout of the analog watch, and the <span style="font-family: Courier New,Courier,monospace;">_clock_set_info_time()</span> function sets the time by retrieving the current time with the <span style="font-family: Courier New,Courier,monospace;">watch_time_get_current_time()</span> function.</p>
+<pre class="prettyprint">
+static void 
+_create_analogwatch(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = _create_win(ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Layout
+&nbsp;&nbsp;&nbsp;ad-&gt;layout = _create_layout(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!ad-&gt;layout, ERROR);
+
+&nbsp;&nbsp;&nbsp;// Clock
+&nbsp;&nbsp;&nbsp;ad-&gt;clock = _create_clock(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!ad-&gt;clock, ERROR);
+
+&nbsp;&nbsp;&nbsp;ret = watch_time_get_current_time(&amp;watch_time);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;failed to get current time. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;_clock_set_info_time(ad, watch_time);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+</li>
+
+<li>Create the detailed layout of the analog watch.
+<p>The <span style="font-family: Courier New,Courier,monospace;">_create_clock()</span> function creates the detailed layout of the analog watch application: it makes a rectangle which is the background of the analog watch, and always sets the size of the rectangle to become a square. It also makes hands of the analog watch.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+_create_clock(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Clock base
+&nbsp;&nbsp;&nbsp;clock = evas_object_rectangle_add(evas);
+&nbsp;&nbsp;&nbsp;retv_if(!clock, NULL);
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;w &lt; ad-&gt;h) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(clock, ad-&gt;w, ad-&gt;w);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(clock, ad-&gt;w, ad-&gt;w);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(clock, ad-&gt;h, ad-&gt;h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(clock, ad-&gt;h, ad-&gt;h);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;evas_object_color_set(clock, 255, 255, 255, 255);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;clock&quot;, clock);
+&nbsp;&nbsp;&nbsp;evas_object_show(clock);
+
+&nbsp;&nbsp;&nbsp;// Hands of the clock
+&nbsp;&nbsp;&nbsp;ad-&gt;hour_needle = evas_object_line_add(evas);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;hour_needle, 0, 0, 0, 255);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;hour_needle);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;min_needle = evas_object_line_add(evas);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;min_needle, 100, 100, 100, 255);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;min_needle);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;sec_needle = evas_object_line_add(evas);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;sec_needle, 255, 0, 0, 255);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;sec_needle);
+
+&nbsp;&nbsp;&nbsp;return clock;
+} 
+</pre>
+</li>
+<li>Renew the time once per second. 
+<p>The <span style="font-family: Courier New,Courier,monospace;">app_time_tick()</span> function is one of the <span style="font-family: Courier New,Courier,monospace;">watch_app_lifecycle_callback_s</span> structure variables, and it called at least once per second. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace;">watch_time</span> handle. Therefore, the <span style="font-family: Courier New,Courier,monospace;">_clock_set_info_time()</span> function is also called once per second.</p>
+
+<pre class="prettyprint">
+static void 
+app_time_tick(watch_time_h watch_time, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = user_data;
+
+&nbsp;&nbsp;&nbsp;_clock_set_info_time(ad, watch_time);
+}
+</pre>
+</li>
+
+<li>Draw the hands of the analog watch to follow the course of time.
+<p>The <span style="font-family: Courier New,Courier,monospace;">_clock_set_info_time()</span> function is called every second, and it gets the current time using the <span style="font-family: Courier New,Courier,monospace;">watch_time_get_hour24/minute/second()</span> functions. It also draws the hands of the analog watch based on the time information.</p>
+
+<pre class="prettyprint">
+static void 
+_clock_set_info_time(void *data, watch_time_h watch_time)
+{
+&nbsp;&nbsp;&nbsp;watch_time_get_hour24(watch_time, &amp;hour24);
+&nbsp;&nbsp;&nbsp;watch_time_get_minute(watch_time, &amp;minute);
+&nbsp;&nbsp;&nbsp;watch_time_get_second(watch_time, &amp;second);
+
+&nbsp;&nbsp;&nbsp;w = ad-&gt;w;
+&nbsp;&nbsp;&nbsp;h = ad-&gt;h;
+
+&nbsp;&nbsp;&nbsp;num = _get_radian((hour24%12) * HOUR_ANGLE);
+&nbsp;&nbsp;&nbsp;_D(&quot;Hour : %d&quot;, hour24%12);
+&nbsp;&nbsp;&nbsp;evas_object_line_xy_set(ad-&gt;hour_needle, (w/2), (h/2), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(w/2) + HOUR_NEEDLE_SIZE*(sin(num)), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(h/2) - HOUR_NEEDLE_SIZE*(cos(num)));
+
+&nbsp;&nbsp;&nbsp;num = _get_radian(minute * MIN_ANGLE);
+&nbsp;&nbsp;&nbsp;_D(&quot;Min : %d&quot;, minute);
+&nbsp;&nbsp;&nbsp;evas_object_line_xy_set(ad-&gt;min_needle, (w/2), (h/2), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(w/2) + MIN_NEEDLE_SIZE*(sin(num)), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(h/2) - MIN_NEEDLE_SIZE*(cos(num)));
+
+&nbsp;&nbsp;&nbsp;num = _get_radian(second * SEC_ANGLE);
+&nbsp;&nbsp;&nbsp;_D(&quot;Sec: %d&quot;, second);
+&nbsp;&nbsp;&nbsp;evas_object_line_xy_set(ad-&gt;sec_needle, (w/2), (h/2), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(w/2) + SEC_NEEDLE_SIZE*(sin(num)), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(h/2) - SEC_NEEDLE_SIZE*(cos(num)));
+}
+</pre>
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/bluetoothchat_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/bluetoothchat_sd_wn.htm
new file mode 100644 (file)
index 0000000..ce6fbed
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/bluetoothchat_sd_wn.htm
@@ -0,0 +1,516 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>(Circle) Bluetooth Chat Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>(Circle) Bluetooth Chat Sample Overview</h1> 
+
+<p>The (Circle) Bluetooth Chat sample application demonstrates how you can send and receive data between 2 devices.</p> 
+
+<p>The following figure illustrates the main screens of the (Circle) Bluetooth Chat application.</p>
+<p class="figure">Figure: (Circle) Bluetooth Chat screens</p>
+<p align="center"><img alt="(Circle) Bluetooth Chat screens" src="../images/bluetoothchat_circle_sd.png" /></p>
+  
+<p>The main screen has 2 buttons for finding devices and creating a server. The chat room screen is created with the <a href="../mobile_n/ui_message_bubble_sd_mn.htm">[UI Sample] MessageBubble</a> sample application.</p>  
+  
+ <h2>Implementation</h2>
+ 
+<h3>Client</h3>
+<p>The client application is started by clicking <strong>Search friends</strong>. The client draws its own layout (list of found devices) with the <span style="font-family: Courier New,Courier,monospace">_search_layout_create()</span> function.</p>
+
+<p>While drawing the list, the application starts finding devices with the <span style="font-family: Courier New,Courier,monospace">_discovery_start()</span> function. Set the device discovery state changed callback, and the list updates whenever a new device is found.</p>
+
+<pre class="prettyprint">
+static void 
+_search_layout_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;navi);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;role = BT_SOCKET_CLIENT;
+
+&nbsp;&nbsp;&nbsp;s_info.list = elm_list_add(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;ret_if(!s_info.list);
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(s_info.list, EVAS_CALLBACK_DEL, _on_search_del_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(s_info.list, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_list_go(s_info.list);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;navi, &quot;Search Friends&quot;, NULL, NULL, s_info.list, NULL);
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_set_connection_state_changed_cb(_socket_conn_state_changed_cb, ad);
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;_discovery_start(ad);
+}
+</pre>
+
+<p>If you click an item on the list, the application starts to bond with the target device, and requests to connect to the target server. If successfully connected with the target, the <span style="font-family: Courier New,Courier,monospace">_socket_conn_state_changed_cb()</span> function is called and the application moves to chat room layout for chatting.</p>
+<pre class="prettyprint">
+static void 
+_socket_conn_state_changed_cb(int result, bt_socket_connection_state_e connection_state, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_socket_connection_s *connection, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)user_data;
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+
+&nbsp;&nbsp;&nbsp;ret_if(result != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;if (connection_state == BT_SOCKET_CONNECTED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (connection != NULL) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;Connected %d %d&quot;, ad-&gt;socket_fd, connection-&gt;socket_fd);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;role = connection-&gt;local_role;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;socket_fd = connection-&gt;socket_fd;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_chat_room_layout_create(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (s_info.noti) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.noti);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.noti = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;No connection data&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;socket_fd = -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;Disconnected&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void 
+_device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed result: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goto DEL_NOTI;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (device_info != NULL &amp;&amp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!strncmp(device_info-&gt;remote_address, s_info.info-&gt;remote_address, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strlen(device_info-&gt;remote_address))) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_socket_connect_rfcomm(s_info.info-&gt;remote_address, BT_MGR_UUID);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;[bt_socket_listen_and_accept_rfcomm] Failed&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goto DEL_NOTI;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;[bond create cb] Bonded with another device&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goto DEL_NOTI;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return;
+
+DEL_NOTI:
+
+&nbsp;&nbsp;&nbsp;if (s_info.noti) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.noti);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.noti = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+
+<h3>Server</h3>
+<p>The server application is started by clicking <strong>Wait a friend</strong>. The role of this application is to create a server for chatting, and wait for a client. Before drawing the proper layout, it checks whether the device is discoverable using the <span style="font-family: Courier New,Courier,monospace">_server_create()</span> function.</p>
+<pre class="prettyprint">
+static void 
+_server_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;int server_socket_fd = -1;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_create_rfcomm(BT_MGR_UUID, &amp;server_socket_fd);
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;server_socket_fd = server_socket_fd;
+&nbsp;&nbsp;&nbsp;_D(&quot;[bt_socket_create_rfcomm] socket %d&quot;, server_socket_fd);
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_set_connection_state_changed_cb(_socket_conn_state_changed_cb, ad);
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_listen_and_accept_rfcomm(server_socket_fd, MAX_NUM_PENDING);
+&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;[bt_socket_listen_and_accept_rfcomm] Failed&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>The server application also registers a callback for detecting the state of the socket connection. The callback function is the same as that of the client. The application creates a server, and when the socket connection is established, it moves to the chat room layout.</p>
+<pre class="prettyprint">
+static void 
+_server_layout_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *progress = NULL;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *navi_it = NULL;
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = { 0, };
+
+&nbsp;&nbsp;&nbsp;ad-&gt;role = BT_SOCKET_SERVER;
+
+&nbsp;&nbsp;&nbsp;app_resource_get(CREATE_SERVER, edj_path, (int)PATH_MAX);
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;goto_if(!layout, ERROR);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, edj_path, &quot;create_server&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;progress = elm_progressbar_add(layout);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(progress, &quot;process/popup/small&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(progress, EVAS_HINT_FILL, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(progress, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_progressbar_pulse(progress, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_show(progress);
+
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;progress&quot;, progress);
+
+&nbsp;&nbsp;&nbsp;navi_it = elm_naviframe_item_push(ad-&gt;navi, &quot;Wait a Friend&quot;, NULL, NULL, layout, NULL);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_title_enabled_set(navi_it, EINA_FALSE, EINA_FALSE);
+
+&nbsp;&nbsp;&nbsp;_server_create(ad);
+
+&nbsp;&nbsp;&nbsp;return;
+
+ERROR:
+&nbsp;&nbsp;&nbsp;_E(&quot;Failed to create server layout&quot;);
+
+&nbsp;&nbsp;&nbsp;if (layout) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layout = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (progress) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(progress);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progress = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+
+<h3>Chat Room</h3>
+<p>To implement the chat room layout and send a message:</p>
+<ol>
+
+<li>Draw the layout:
+<pre class="prettyprint">
+static Evas_Object *
+_main_view_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *input_field = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *btn_send = NULL;
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = { 0, };
+
+&nbsp;&nbsp;&nbsp;retv_if(!ad, NULL);
+
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;goto_if(!layout, ERROR);
+&nbsp;&nbsp;&nbsp;app_resource_get(EDJ_FILE, edj_path, (int)PATH_MAX);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, edj_path, &quot;chat_room&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(layout);
+
+&nbsp;&nbsp;&nbsp;s_info.bubble_scroller = elm_scroller_add(layout);
+&nbsp;&nbsp;&nbsp;goto_if(!s_info.bubble_scroller, ERROR);
+&nbsp;&nbsp;&nbsp;elm_scroller_bounce_set(s_info.bubble_scroller, EINA_FALSE, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.bubble_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(s_info.bubble_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.bubble_scroller);
+
+&nbsp;&nbsp;&nbsp;s_info.bubble_box = elm_box_add(s_info.bubble_scroller);
+&nbsp;&nbsp;&nbsp;goto_if(!s_info.bubble_box, ERROR);
+&nbsp;&nbsp;&nbsp;elm_box_align_set(s_info.bubble_box, 0, 0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.bubble_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(s_info.bubble_box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.bubble_box);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(s_info.bubble_box, ELM_SCALE_SIZE(10), ELM_SCALE_SIZE(15));
+&nbsp;&nbsp;&nbsp;elm_object_content_set(s_info.bubble_scroller, s_info.bubble_box);
+
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;sw.scroller&quot;, s_info.bubble_scroller);
+
+&nbsp;&nbsp;&nbsp;s_info.input_field_entry = elm_entry_add(layout);
+&nbsp;&nbsp;&nbsp;goto_if(!s_info.input_field_entry, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(s_info.input_field_entry, &quot;elm.guide&quot;, &quot;Enter Message&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.input_field_entry, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(s_info.input_field_entry, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.input_field_entry);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;sw.entry&quot;, s_info.input_field_entry);
+
+&nbsp;&nbsp;&nbsp;btn_send = elm_button_add(layout);
+&nbsp;&nbsp;&nbsp;goto_if(!btn_send, ERROR);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(btn_send, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(btn_send, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(btn_send, &quot;SEND&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn_send, &quot;clicked&quot;, _send_button_clicked_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_show(btn_send);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;sw.btn.send&quot;, btn_send);
+
+&nbsp;&nbsp;&nbsp;return layout;
+
+ERROR:
+&nbsp;&nbsp;&nbsp;if (layout) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layout = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (input_field) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(input_field);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input_field = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+
+static void 
+_on_main_scroller_del_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;if (s_info.main_box) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.main_box);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.main_box = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (s_info.bubble_scroller) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.bubble_scroller);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.bubble_scroller = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (s_info.bubble_box) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.bubble_box);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.bubble_box = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (s_info.input_field_entry) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.input_field_entry);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.input_field_entry = NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Manage the connection state changes:
+
+<pre class="prettyprint">
+static void 
+_socket_conn_state_changed_cb(int result, bt_socket_connection_state_e connection_state, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_socket_connection_s *connection, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *noti = NULL;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+
+&nbsp;&nbsp;&nbsp;ad = (appdata_s *)user_data;
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+&nbsp;&nbsp;&nbsp;ret_if(result != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;_D(&quot;[_socket_conn_state_changed_cb] Changed&quot;);
+
+&nbsp;&nbsp;&nbsp;if (connection_state == BT_SOCKET_DISCONNECTED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_I(&quot;[_socket_conn_state_changed_cb] Disconnected&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;socket_fd = -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;noti = bt_noti_popup_create(ad-&gt;navi, &quot;Disconnected with the Friend&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!noti) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed to create popup noti&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Receive the data:
+<pre class="prettyprint">
+static void 
+_socket_data_received_cb(bt_socket_received_data_s *data, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *bubble_table = NULL;
+&nbsp;&nbsp;&nbsp;char *message = NULL;
+
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;message = strndup(data-&gt;data, data-&gt;data_size);
+&nbsp;&nbsp;&nbsp;goto_if(!message, ERROR);
+
+&nbsp;&nbsp;&nbsp;bubble_table = _bubble_table_create(s_info.bubble_box, MESSAGE_BUBBLE_RECEIVE, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message, _current_time_get());
+&nbsp;&nbsp;&nbsp;goto_if(!bubble_table, ERROR);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(bubble_table);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(s_info.bubble_box, bubble_table);
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(s_info.bubble_box, EVAS_CALLBACK_RESIZE, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_bubble_box_resize_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;free(message);
+
+&nbsp;&nbsp;&nbsp;return;
+
+ERROR:
+&nbsp;&nbsp;&nbsp;if (bubble_table) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(bubble_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bubble_table = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (message) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(message);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+</li>
+<li>The chat room is created by calling the <span style="font-family: Courier New,Courier,monospace">bt_chat_room_layout_create()</span> function. The function draws the layout for chatting, and unsets and re-registers the callback for the connection state change. It also registers the data received callback. When the message is received from the target, the application makes a message bubble for the new message.
+<pre class="prettyprint">
+void 
+bt_chat_room_layout_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *main_scroller = NULL;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *navi_it = NULL;
+&nbsp;&nbsp;&nbsp;int ret = -1;
+
+&nbsp;&nbsp;&nbsp;bt_socket_set_data_received_cb(_socket_data_received_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_unset_connection_state_changed_cb();
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_set_connection_state_changed_cb(_socket_conn_state_changed_cb, ad);
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;main_scroller = _main_view_create(ad);
+&nbsp;&nbsp;&nbsp;ret_if(!main_scroller);
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(main_scroller, EVAS_CALLBACK_DEL, _on_main_scroller_del_cb, NULL);
+&nbsp;&nbsp;&nbsp;navi_it = elm_naviframe_item_push(ad-&gt;navi, &quot;Chatting&quot;, NULL, NULL, main_scroller, NULL);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_title_enabled_set(navi_it, EINA_FALSE, EINA_FALSE);
+}
+</pre>
+</li>
+
+<li>Send a message:
+<pre class="prettyprint">
+static void 
+_message_send(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *bubble_table = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *noti = NULL;
+&nbsp;&nbsp;&nbsp;const char *main_text = NULL;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+&nbsp;&nbsp;&nbsp;ret_if(!s_info.input_field_entry);
+
+&nbsp;&nbsp;&nbsp;main_text = elm_entry_entry_get(s_info.input_field_entry);
+&nbsp;&nbsp;&nbsp;ret_if(!main_text || (strlen(main_text) == 0));
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_send_data(ad-&gt;socket_fd, main_text, strlen(main_text)+1);
+&nbsp;&nbsp;&nbsp;if (ret == -1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;[bt_socket_send_data] send to fail : %s&quot;, main_text);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;noti = bt_noti_popup_create(ad-&gt;navi, &quot;Send Failed&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!noti) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed to create popup noti&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bubble_table = _bubble_table_create(s_info.bubble_box, MESSAGE_BUBBLE_SENT, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_entry_entry_get(s_info.input_field_entry), 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_current_time_get());
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret_if(!bubble_table);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(bubble_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(s_info.bubble_box, bubble_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_entry_entry_set(s_info.input_field_entry, &quot;&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(s_info.bubble_box, EVAS_CALLBACK_RESIZE, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_bubble_box_resize_cb, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>When the user clicks <strong>SEND</strong>, the message in the input area is sent to the target device. If the sending succeeds, the application makes a message bubble for the sent message.</p>
+<pre class="prettyprint">
+static void 
+_send_button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+
+&nbsp;&nbsp;&nbsp;_message_send(ad);
+}
+</pre>
+</li>
+</ol>
+
+
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/cairo_basic_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/cairo_basic_sd_wn.htm
new file mode 100644 (file)
index 0000000..390af16
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/cairo_basic_sd_wn.htm
@@ -0,0 +1,183 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>(Circle) Cairo Basic Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>(Circle) Cairo Basic Sample Overview</h1> 
+
+<p>The (Circle) Cairo Basic sample application demonstrates how to use a Cairo image backend with the Tizen SDK.</p> 
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure illustrates the main screen of the (Circle) Cairo Basic.</p>
+<p class="figure">Figure: (Circle) Cairo Basic screen</p>
+<p align="center"><img alt="(Circle) Cairo Basic circular screen" src="../images/cairo_basic_circular.png" /></p>
+  
+ <h2>Implementation</h2>
+ 
+<p>First create a basic application. This provides a basic UI application skeleton which already makes available the window object that can contain the Cairo drawing.</p>
+<ol>
+<li>Include the <span style="font-family: Courier New,Courier,monospace;">&lt;cairo.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;math.h&gt;</span> header files, which are needed for this sample application.
+<pre class="prettyprint">
+#include &lt;cairo.h&gt;
+#include &lt;math.h&gt;
+</pre>
+
+</li>
+<li>You can define the <span style="font-family: Courier New,Courier,monospace;">appdata</span> structure that contains all the pointers to objects to be manipulated.
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;    
+&nbsp;&nbsp;&nbsp;Evas_Object *img;
+&nbsp;&nbsp;&nbsp;cairo_surface_t *surface;
+&nbsp;&nbsp;&nbsp;cairo_t *cairo;
+&nbsp;&nbsp;&nbsp;unsigned char *pixels;
+} appdata_s;
+</pre>
+</li>
+<li>To display the Cairo drawing on the screen, create the <span style="font-family: Courier New,Courier,monospace;">Elm_window</span> and the <span style="font-family: Courier New,Courier,monospace;">Evas_object</span> image.
+<p>When creating the <span style="font-family: Courier New,Courier,monospace;">Elm_window</span>, you can set the name as your PACKAGE name. It is created when you create this project in the Tizen SDK.</p>
+<pre class="prettyprint">
+// Window
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+if (elm_win_wm_rotation_supported_get(ad-&gt;win))
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+}
+evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+evas_object_show(ad-&gt;win);
+
+// Image
+ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));
+evas_object_show(ad-&gt;img);
+</pre>
+
+</li>
+</ol>
+
+<h3>Drawing a Polygon and Rectangle with Cairo</h3>
+<p>To create the Cairo drawing, you need the window size to set the Cairo surface. You can get the window size with the <span style="font-family: Courier New,Courier,monospace;">evas_object_geometry_get()</span> function after the <span style="font-family: Courier New,Courier,monospace;">evas_object_show(ad-&gt;win)</span> function is called.</p>
+<p>To draw Cairo with some specific vector positions, you can use the window size as before.</p>
+<pre class="prettyprint">
+evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;ad-&gt;width, &amp;ad-&gt;height);
+ad-&gt;surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, ad-&gt;width, ad-&gt;height);
+ad-&gt;cairo = cairo_create(ad-&gt;surface);
+</pre>
+<p>In this example, a Cairo image is drawn on a square screen. You can compare the windows width and height and get the smaller length to set the square side.</p>
+<pre class="prettyprint">
+void 
+cairo_drawing(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;int d = 0;
+&nbsp;&nbsp;&nbsp;if(ad-&gt;width &lt; ad-&gt;height)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d = ad-&gt;width;
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d = ad-&gt;height;
+</pre>
+<p>To set the background as white color, set the color as white and paint the Cairo.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Clear background as white
+&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, 1, 1, 1, 1);
+&nbsp;&nbsp;&nbsp;cairo_paint(ad-&gt;cairo);
+</pre>
+
+<p>In the following example, you can draw the polygon and rectangle. You must use the <span style="font-family: Courier New,Courier,monospace;">cairo_surface_flush()</span> function. This function call implements any pending drawings for the surface.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;cairo_translate(ad-&gt;cairo, 0.1 * d, 0.1 * d);
+&nbsp;&nbsp;&nbsp;cairo_set_line_width(ad-&gt;cairo,2);
+&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, 0.0, 0.0, 1.0, 1.0);
+
+&nbsp;&nbsp;&nbsp;cairo_move_to(ad-&gt;cairo, 0.2 * d , 0.2 * d);
+&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, 0.4 * d, 0.3 * d);
+&nbsp;&nbsp;&nbsp;cairo_rel_line_to(ad-&gt;cairo, 0.2 * d, -0.1 * d);
+&nbsp;&nbsp;&nbsp;cairo_arc(ad-&gt;cairo, 0.4 * d, 0.4 * d, 0.2* d * sqrt(2), -0.25 * M_PI, 0.25 * M_PI);
+&nbsp;&nbsp;&nbsp;cairo_rel_curve_to(ad-&gt;cairo, -0.2* d, -0.1 * d, -0.2* d, 0.1 * d, -0.4 * d, 0);
+&nbsp;&nbsp;&nbsp;cairo_close_path(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;cairo_fill(ad-&gt;cairo);
+
+&nbsp;&nbsp;&nbsp;cairo_rectangle(ad-&gt;cairo, 0, 0, 0.8 * d, 0.8 * d);
+&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;cairo_surface_flush(ad-&gt;surface);
+</pre>
+
+<p>To update the Evas object image on the screen:</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Display the Cairo drawing on screen
+&nbsp;&nbsp;&nbsp;unsigned char * imageData = cairo_image_surface_get_data(cairo_get_target(ad-&gt;cairo));
+&nbsp;&nbsp;&nbsp;evas_object_image_data_set(ad-&gt;img, imageData);
+&nbsp;&nbsp;&nbsp;evas_object_image_data_update_add(ad-&gt;img, 0, 0, ad-&gt;width, ad-&gt;height);
+}
+</pre>
+
+<h3>Deleting Cairo</h3>
+
+<p>The delete callback is triggered when the Window is destroyed from the main loop.</p>
+<pre class="prettyprint">
+static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;cairo_surface_destroy(ad-&gt;surface);
+&nbsp;&nbsp;&nbsp;cairo_destroy(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;ui_app_exit();
+}
+</pre>
+
+ 
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/cairo_evasgl_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/cairo_evasgl_sd_wn.htm
new file mode 100644 (file)
index 0000000..e3e23d3
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/cairo_evasgl_sd_wn.htm
@@ -0,0 +1,282 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>(Circle) Cairo EvasGL Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>(Circle) Cairo EvasGL Sample Overview</h1> 
+
+<p>The (Circle) Cairo EvasGL sample application demonstrates how to draw vector graphics using the Cairo GL backend with the Evas_GL surface using the Tizen SDK.</p> 
+  <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure illustrates the main screen of the (Circle) Cairo EvasGL.</p>
+<p class="figure">Figure: (Circle) Cairo EvasGL screen</p>
+<p align="center"><img alt="(Circle) Cairo EvasGL screen" src="../images/cairo_evasgl_circular.png" /></p>
+  
+ <h2>Implementation</h2>
+
+<p>To create a basic application that provides a UI application skeleton which already makes available the window object that can contain a Cairo drawing:</p>
+<ol>
+<li>Build the environment. 
+<p>For using the Cairo GL backend on the Evas_GL surface, include the following header files.</p>
+<pre class="prettyprint">
+#include &lt;cairo.h&gt;
+#include &lt;Evas_GL.h&gt;
+#include &lt;cairo-evas-gl.h&gt;
+#include &lt;math.h&gt;
+</pre>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure that contains all the pointers to objects to be manipulated:</p>
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;    
+&nbsp;&nbsp;&nbsp;Evas_Object *img;
+
+&nbsp;&nbsp;&nbsp;cairo_surface_t *surface;
+&nbsp;&nbsp;&nbsp;cairo_t *cairo;
+&nbsp;&nbsp;&nbsp;cairo_device_t *cairo_device;
+               
+&nbsp;&nbsp;&nbsp;Evas_GL *evas_gl;
+&nbsp;&nbsp;&nbsp;Evas_GL_Config *evas_gl_config;
+&nbsp;&nbsp;&nbsp;Evas_GL_Surface *evas_gl_surface;
+&nbsp;&nbsp;&nbsp;Evas_GL_Context *evas_gl_context;
+} appdata_s;
+</pre>
+</li>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">Elm_window</span> for EvasGL. 
+<p>For using the EvasGL backend, you have to add this before the window creation. This makes it possible for the Cairo drawings on EvasGL to be displayed on the screen.</p>
+<pre class="prettyprint">
+elm_config_accel_preference_set(&quot;opengl&quot;);
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+if (elm_win_wm_rotation_supported_get(ad-&gt;win))
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+}
+evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+evas_object_show(ad-&gt;win);
+</pre>
+</li>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image:
+<pre class="prettyprint">
+ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));
+evas_object_show(ad-&gt;img);
+</pre>
+</li>
+
+<li>Initialize the variables for EvasGL. 
+<p>Before initializing EvasGL and creating the Evas_GL surface, get the window size.</p>
+<pre class="prettyprint">
+evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;ad-&gt;width, &amp;ad-&gt;height);
+</pre>
+<p>Initialize the variables related to the Evas_GL within the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure.</p> 
+<p>For creating the EvasGL object, you can use the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image created before.</p>
+<pre class="prettyprint">
+Evas_Native_Surface ns;
+ad-&gt;evas_gl = evas_gl_new(evas_object_evas_get(ad-&gt;img));
+ad-&gt;evas_gl_config = evas_gl_config_new();
+ad-&gt;evas_gl_config-&gt;color_format = EVAS_GL_RGBA_8888;
+ad-&gt;evas_gl_surface = evas_gl_surface_create(ad-&gt;evas_gl, ad-&gt;evas_gl_config, ad-&gt;width, ad-&gt;height);
+ad-&gt;evas_gl_context = evas_gl_context_create(ad-&gt;evas_gl, NULL);
+evas_gl_native_surface_get(ad-&gt;evas_gl, ad-&gt;evas_gl_surface, &amp;ns);
+evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
+evas_object_image_pixels_get_callback_set(ad-&gt;img, cairo_drawing, ad);
+</pre>
+</li>
+<li>Link the Evas callback function to draw the Cairo image.
+<pre class="prettyprint">
+evas_object_image_pixels_get_callback_set(ad-&gt;img, cairo_drawing, NULL);
+</pre>
+</li>
+
+<li>Create Cairo with EvasGL. 
+<p>To create the Cairo surface by using Evas_GL, the Cairo device must be provided. Set the <span style="font-family: Courier New,Courier,monospace">CAIRO_GL_COMPOSITOR</span> as <span style="font-family: Courier New,Courier,monospace">msaa</span> for using full GPU acceleration. In addition, to prevent unnecessary context switches in the Cairo GL backend, use the <span style="font-family: Courier New,Courier,monospace">cairo_gl_device_set_thread_aware()</span> function.</p>
+<pre class="prettyprint">
+setenv(&quot;CAIRO_GL_COMPOSITOR&quot;, &quot;msaa&quot;, 1);
+ad-&gt;cairo_device = (cairo_device_t *)cairo_evas_gl_device_create(ad-&gt;evas_gl, ad-&gt;evas_gl_context);
+cairo_gl_device_set_thread_aware(ad-&gt;cairo_device, 0);
+ad-&gt;surface = (cairo_surface_t *)cairo_gl_surface_create_for_evas_gl(ad-&gt;cairo_device, ad-&gt;evas_gl_surface, ad-&gt;evas_gl_config, ad-&gt;width, ad-&gt;height);
+ad-&gt;cairo = cairo_create (ad-&gt;surface);
+</pre>
+</li>
+
+<li>Draw random items (rectangles, circles, and triangles) with the <span style="font-family: Courier New,Courier,monospace">cairo_drawing()</span> function: 
+<pre class="prettyprint">
+void cairo_drawing(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;double r, g, b, a;
+
+&nbsp;&nbsp;&nbsp;// Clear background as white
+&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, 1, 1, 1, 1);
+&nbsp;&nbsp;&nbsp;cairo_paint(ad-&gt;cairo);
+
+&nbsp;&nbsp;&nbsp;cairo_set_operator(ad-&gt;cairo, CAIRO_OPERATOR_OVER);
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 100; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int shape = drand48() *3;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float width = drand48() * 50 + 1;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int line_cap = drand48() * 3;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_cap_t line_cap_style = CAIRO_LINE_CAP_BUTT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (line_cap == 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_cap_style = CAIRO_LINE_CAP_ROUND;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (line_cap == 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_cap_style = CAIRO_LINE_CAP_SQUARE;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int line_join = drand48() * 3;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_join_t line_join_style = CAIRO_LINE_JOIN_MITER;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (line_join == 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_join_style = CAIRO_LINE_JOIN_ROUND;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (line_join == 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_join_style = CAIRO_LINE_JOIN_BEVEL;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double dash[] = {0.0, 0.0};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dash[0] = drand48() * 50;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dash[1] = drand48() * 50;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_dash(ad-&gt;cairo, dash, 2, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_line_width(ad-&gt;cairo, width);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_line_join(ad-&gt;cairo, line_join_style);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_line_cap(ad-&gt;cairo, line_cap_style);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Random color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r = drand48();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = drand48();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b = drand48();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a = drand48();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_set_source_rgba(ad-&gt;cairo, r, g, b, a);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Random position
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float x = drand48() * ad->width;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float y = drand48() * ad->height;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float side = drand48() * 300;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (shape == 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Draw a square
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_rectangle(ad-&gt;cairo, x, y, side, side);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_fill(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (shape == 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Draw a circle
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_arc(ad-&gt;cairo, x, y, side/2, 0.0, 2.0 * M_PI);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Draw a triangle
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_move_to(ad-&gt;cairo, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, x + side, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_line_to(ad-&gt;cairo, x, y + side);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_close_path(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cairo_stroke(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;cairo_surface_flush(ad-&gt;surface);
+}
+</pre>
+</li>
+<li>Add the animator function callback. 
+<p>The following is an example of a default update refresh rate. You can add the animator after creating Cairo and EvasGL.</p>
+<p>Add the animator function callback with the <span style="font-family: Courier New,Courier,monospace">ecore_animator_add()</span> function. The <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function updates the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image which is connected to EvasGL. After this, the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image updates with the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_get_callback_set()</span> callback function calls whenever Evas renders.</p>
+<pre class="prettyprint">
+static Eina_Bool _animate_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = (Evas_Object *)data;
+&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(obj, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+static bool app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;cairo_evasgl_drawing(ad);
+
+&nbsp;&nbsp;&nbsp;ecore_animator_frametime_set(0.016);
+&nbsp;&nbsp;&nbsp;Ecore_Animator *animator = ecore_animator_add(_animate_cb, (void *)ad-&gt;img);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+</li>
+
+<li>Delete Cairo and EvasGL. 
+<p>The delete callback is triggered when the Window is destroyed from the main loop.</p>
+<pre class="prettyprint">
+static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;cairo_surface_destroy(ad-&gt;surface);
+&nbsp;&nbsp;&nbsp;cairo_destroy(ad-&gt;cairo);
+&nbsp;&nbsp;&nbsp;cairo_device_destroy(ad-&gt;cairo_device);
+&nbsp;&nbsp;&nbsp;evas_gl_surface_destroy(ad-&gt;evas_gl, ad-&gt;evas_gl_surface);
+&nbsp;&nbsp;&nbsp;evas_gl_context_destroy(ad-&gt;evas_gl, ad-&gt;evas_gl_context);
+&nbsp;&nbsp;&nbsp;evas_gl_config_free(ad-&gt;evas_gl_config);
+&nbsp;&nbsp;&nbsp;evas_gl_free(ad-&gt;evas_gl);
+&nbsp;&nbsp;&nbsp;ui_app_exit();
+}
+</pre>
+</li>
+</ol>
+
+
+ 
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/digital_watch_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/digital_watch_sd_wn.htm
new file mode 100644 (file)
index 0000000..c8b164c
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/digital_watch_sd_wn.htm
@@ -0,0 +1,316 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Digital-Watch Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>Digital-Watch Sample Overview</h1> 
+  
+  <p>The Digital-Watch sample demonstrates how you can create a watch application using the <a href="../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API.</p>
+<p>The following figure illustrates the main screen of the Digital-Watch application.</p>
+
+    <p class="figure">Figure: Digital-Watch screen</p> 
+  <p align="center"><img alt="Digital-Watch screen" src="../images/digital_watch_sd_wn.png" /></p>
+
+<p>If the Digital-Watch application is successfully installed, you can see your Digital-Watch UI in the watch setting&#39;s Clock menu.</p> 
+  
+<h2>Implementation</h2>
+
+<p>To implement the watch application:</p>
+<ol>
+<li>Add the header file.
+<p>The Watch Application API provides functions to manage the watch application life-cycle, represent the current date and time accurately, and get a watch application window. To use the functions and data types of the Watch Application API, include the <span style="font-family: Courier New,Courier,monospace;">watch_app.h</span> header file in your application:
+</p>
+<pre class="prettyprint">
+#include &lt;watch_app.h&gt;
+</pre>
+</li>
+
+<li>Add the <span style="font-family: Courier New,Courier,monospace;">watch-application</span> element to the manifest file:
+
+<pre class="prettyprint">
+&lt;watch-application appid=&quot;$(packageName)&quot; exec=&quot;$(appName)&quot; ambient-support=&quot;true&quot;&gt;
+</pre>
+</li>
+<li>Create the main function for the watch application.
+<p>An application starts with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the watch application and starts it. The <span style="font-family: Courier New,Courier,monospace;">watch_app_main()</span> function is used to start the event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace;">watch_app_lifecycle_callback_s</span> structure variable, which is passed to the function.</p>
+
+<pre class="prettyprint">
+int 
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;watch_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;event_callback.time_tick = app_time_tick;
+&nbsp;&nbsp;&nbsp;event_callback.ambient_tick = app_ambient_tick;
+&nbsp;&nbsp;&nbsp;event_callback.ambient_changed = app_ambient_changed;
+
+&nbsp;&nbsp;&nbsp;ret = watch_app_main(argc, argv, &amp;event_callback, &amp;ad);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;watch_app_main() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+</li>
+
+<li>Register life-cycle callbacks:
+
+<pre class="prettyprint">
+static bool 
+app_create(int width, int height, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = user_data;
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+&nbsp;&nbsp;&nbsp;watch_time_h watch_time = NULL;
+
+&nbsp;&nbsp;&nbsp;// Register callbacks for each system event
+&nbsp;&nbsp;&nbsp;if (watch_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_LANGUAGE_CHANGED, lang_changed, NULL) != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;watch_app_add_event_handler () is failed&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;_create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;_set_info_time_and_date(ad, watch_time);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+</li>
+
+<li>Create the watch UI.
+<p>After registering the event callback, you have to draw the watch UI. To do this, you need to get the window object of the idle screen and the current time handler. Using the current time handler, you can get specific time information which is displayed on the idle screen.</p>
+
+<pre class="prettyprint">
+static void 
+_create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = _create_win(ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Layout
+&nbsp;&nbsp;&nbsp;ad-&gt;layout = _create_layout(ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;layout);
+
+&nbsp;&nbsp;&nbsp;// Background image
+&nbsp;&nbsp;&nbsp;ad-&gt;image = _create_background(ad);
+}
+</pre></li>
+
+<li>Create the window.
+<p>You can get the window object with the <span style="font-family: Courier New,Courier,monospace;">watch_app_get_elm_win()</span> function:</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+_create_win(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ret = watch_app_get_elm_win(&amp;win);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;failed to get window. err = %d&quot;, ret);
+               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;elm_win_title_set(win, &quot;digital-watch&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_borderless_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_win_alpha_set(win, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_HIDE);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(win, ELM_WIN_INDICATOR_BG_TRANSPARENT);
+&nbsp;&nbsp;&nbsp;elm_win_prop_focus_skip_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_win_role_set(win, &quot;no-effect&quot;);
+
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, ad-&gt;w, ad-&gt;h);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+       
+&nbsp;&nbsp;&nbsp;return win;
+}
+</pre></li>
+
+<li>Create the layout using EDC:
+<pre class="prettyprint">
+static Evas_Object *
+_create_layout(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, EDJ_FILE_PATH, &quot;layout_digital_watch&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;win, ad-&gt;layout);
+
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(layout, ad-&gt;w, ad-&gt;h);
+&nbsp;&nbsp;&nbsp;evas_object_resize(layout, ad-&gt;w, ad-&gt;h);
+&nbsp;&nbsp;&nbsp;evas_object_show(layout);
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+</pre></li>
+
+<li>Create a background image:
+<pre class="prettyprint">
+static Evas_Object *
+_create_background(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *bg = NULL;
+&nbsp;&nbsp;&nbsp;Eina_Bool ret = EINA_TRUE;
+
+&nbsp;&nbsp;&nbsp;bg = elm_bg_add(ad-&gt;layout);
+&nbsp;&nbsp;&nbsp;ret = elm_bg_file_set(bg, IMG_DIR&quot;bg.jpg&quot;, NULL);
+&nbsp;&nbsp;&nbsp;retvm_if(!ret, NULL, &quot;Fail to set the background image&quot;);
+
+&nbsp;&nbsp;&nbsp;elm_bg_option_set(bg, ELM_BG_OPTION_CENTER);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;bg_image&quot;, bg);
+&nbsp;&nbsp;&nbsp;evas_object_show(bg);
+       
+&nbsp;&nbsp;&nbsp;return bg;
+}
+</pre></li>
+
+<li>Set the time and date information.
+<p>You can get the current time&#39;s <span style="font-family: Courier New,Courier,monospace;">watch_time_h</span> handle with the <span style="font-family: Courier New,Courier,monospace;">watch_time_get_current_time()</span> function:</p>
+
+<pre class="prettyprint">
+Eina_Bool 
+_set_info_time_and_date(void *data, watch_time_h watch_time)
+{
+&nbsp;&nbsp;&nbsp;const char *DAY_OF_WEEK_STR[7] = {&quot;Sun&quot;, &quot;Mon&quot;, &quot;Tue&quot;, &quot;Wed&quot;, &quot;Thur&quot;, &quot;Fri&quot;, &quot;Sat&quot;};
+&nbsp;&nbsp;&nbsp;const char *MONTH_STR[12] = {&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Jul&quot;, &quot;Aug&quot;, &quot;Sept&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;};
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;char time_str[BUFFER_LENGTH] = {0};
+&nbsp;&nbsp;&nbsp;char date_str[BUFFER_LENGTH] = {0};
+&nbsp;&nbsp;&nbsp;char ampm_str[BUFFER_LENGTH] = {0};
+&nbsp;&nbsp;&nbsp;char *time_str_p = NULL;
+&nbsp;&nbsp;&nbsp;int hour24 = 0;
+&nbsp;&nbsp;&nbsp;int minute = 0;
+&nbsp;&nbsp;&nbsp;int day_of_week = 0;
+&nbsp;&nbsp;&nbsp;int month = 0;
+&nbsp;&nbsp;&nbsp;int day = 0 ;
+
+&nbsp;&nbsp;&nbsp;retvm_if(!watch_time, EINA_FALSE, &quot;watch_time is NULL&quot;);
+&nbsp;&nbsp;&nbsp;retvm_if(!ad, EINA_FALSE, &quot;appdata is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;int ret = watch_time_get_current_time(&amp;watch_time);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;failed to get current time. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;watch_time_get_hour24(watch_time, &amp;hour24);
+&nbsp;&nbsp;&nbsp;watch_time_get_minute(watch_time, &amp;minute);
+&nbsp;&nbsp;&nbsp;watch_time_get_day_of_week(watch_time, &amp;day_of_week);
+&nbsp;&nbsp;&nbsp;watch_time_get_month(watch_time, &amp;month);
+&nbsp;&nbsp;&nbsp;watch_time_get_day(watch_time, &amp;day);
+
+&nbsp;&nbsp;&nbsp;// Time
+&nbsp;&nbsp;&nbsp;if (hour24 &gt;= 0 &amp;&amp; hour24 &lt; 12) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(ampm_str, sizeof(ampm_str), &quot;%s&quot;, &quot;AM&quot;);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(ampm_str, sizeof(ampm_str), &quot;%s&quot;, &quot;PM&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;sprintf(time_str, &quot;%d:%02d&quot;, hour24%12, minute);
+&nbsp;&nbsp;&nbsp;time_str_p = g_strdup_printf(&quot;%s&lt;font_size=24&gt;&lt;font=Tizen:style=Bold&gt;%s&lt;/font&gt;&lt;/font_size&gt;&quot;, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_str, ampm_str);
+
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;layout, &quot;textblock_time&quot;, time_str_p);
+
+&nbsp;&nbsp;&nbsp;if (!time_str_p) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(time_str_p);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Date
+&nbsp;&nbsp;&nbsp;sprintf(date_str, &quot;%s %d %s&quot;, DAY_OF_WEEK_STR[day_of_week-1], day, MONTH_STR[month-1]);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;layout, &quot;default_text_date&quot;, date_str);
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+</pre></li>
+
+<li>Add the time tick and ambient tick callbacks. 
+<p>The time tick callback is called at least once per second. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace;">watch_time</span> handle and draw the normal watch UI. The ambient tick callback is called at least once per minute, or when the device enters the ambient mode.</p>
+
+<pre class="prettyprint">
+void 
+app_time_tick(watch_time_h watch_time, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = user_data;
+
+&nbsp;&nbsp;&nbsp;_set_info_time_and_date(ad, watch_time);
+}
+
+void 
+app_ambient_tick(watch_time_h watch_time, void* user_data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = user_data;
+
+&nbsp;&nbsp;&nbsp;_set_info_time_and_date(ad, watch_time);
+}
+</pre>
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/evas_gl_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/evas_gl_sd_wn.htm
new file mode 100644 (file)
index 0000000..635be19
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/evas_gl_sd_wn.htm
@@ -0,0 +1,303 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Evas_GL Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>Evas_GL Sample Overview</h1> 
+  <p>The Evas_GL sample application demonstrates how to implement a rotatable cube on the screen using Evas_GL with the Tizen SDK. The sample shows how to handle polygon geometry, and how to write a simple vertex and fragment shader for the cube. Evas_GL is similar to the EGL&#8482; layer and is related to ElmGLView.</p>
+  
+  
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.<p>A 3D application using the OpenGL&reg; ES must use the ElmGLView. Evas GL can be used in special cases, such as a multi-thread.</p></td> 
+               </tr> 
+          </tbody> 
+         </table> 
+  
+  <p>The following figure illustrates the main screen of the Evas_GL.</p>
+  
+    <p class="figure">Figure: Evas_GL screen</p> 
+  <p align="center"><img alt="Evas_GL screen" src="../images/evas_gl_sd_wn.png" /></p>   
+ 
+<h2>Setting up the OpenGL&reg; Surface</h2>
+<p>The Evas_GL interface is similar to the EGL interface. It can be connected to Evas so that OpenGL&reg; ES code works with Evas 2D objects.</p>
+<p>This sample shows how to implement with Evas_GL to use OpenGL&reg; ES:</p>
+
+<p>Create the application:</p>
+<pre class="prettyprint">
+#include &lt;Evas_GL.h&gt;
+#include &lt;Evas_GL_GLES2_Helpers.h&gt;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL_GLES2_Helpers.h&gt;</span> header files are needed for Evas GL applications.</p>
+
+<pre class="prettyprint">EVAS_GL_GLOBAL_GLES2_DEFINE();</pre>
+
+<p>The Evas_GL or ElmGLView program uses the wrapper function by the supported Evas GL. The wrapper function&#39;s interface is the same as OpenGL&reg; ES&#39;s. This macro can provide a set of convenience wrapper function tables.</p>
+<pre class="prettyprint">
+Evas_Object *add_win(const char *name)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(name, &quot;UI Template&quot;);
+&nbsp;&nbsp;&nbsp;if (!win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;return win;
+}
+</pre>
+<p>Before creating the Elm Window, set the GL Rendering Engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set(&quot;opengl&quot;)</span> function because Evas GL runs with Evas GL Render Engine.</p>
+ 
+<h2>Setting up Callbacks</h2>
+
+<p>To set up callbacks:</p>
+<ol>
+<li>Initialize the OpenGL&reg; ES.
+<p>The following example creates a shader:</p>
+<pre class="prettyprint">
+static void init_evasgl(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Set config of the surface for Evas GL
+&nbsp;&nbsp;&nbsp;ad-&gt;cfg = evas_gl_config_new();
+&nbsp;&nbsp;&nbsp;ad-&gt;cfg-&gt;color_format = EVAS_GL_RGBA_8888;
+&nbsp;&nbsp;&nbsp;ad-&gt;cfg-&gt;depth_bits = EVAS_GL_DEPTH_BIT_24;
+&nbsp;&nbsp;&nbsp;ad-&gt;cfg-&gt;stencil_bits = EVAS_GL_STENCIL_NONE;
+&nbsp;&nbsp;&nbsp;ad-&gt;cfg-&gt;options_bits = EVAS_GL_OPTIONS_NONE;
+
+&nbsp;&nbsp;&nbsp;// Get the window size
+&nbsp;&nbsp;&nbsp;Evas_Coord w,h;
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;w, &amp;h);
+
+&nbsp;&nbsp;&nbsp;// Get the Evas GL handle for doing GL things
+&nbsp;&nbsp;&nbsp;ad-&gt;evasgl = evas_gl_new(evas_object_evas_get(ad-&gt;win));
+
+&nbsp;&nbsp;&nbsp;// Create a surface and context
+&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, w, h);
+&nbsp;&nbsp;&nbsp;ad-&gt;ctx = evas_gl_context_create(ad-&gt;evasgl, NULL);
+
+&nbsp;&nbsp;&nbsp;EVAS_GL_GLOBAL_GLES2_USE(ad-&gt;evasgl, ad-&gt;ctx);
+
+&nbsp;&nbsp;&nbsp;// Set rotation variables
+&nbsp;&nbsp;&nbsp;ad-&gt;xangle = 45.0f;
+&nbsp;&nbsp;&nbsp;ad-&gt;yangle = 45.0f;
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
+&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_FALSE;
+
+&nbsp;&nbsp;&nbsp;// Set up the image object. A filled one by default.
+&nbsp;&nbsp;&nbsp;ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_DEL, img_del_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixel_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Add mouse event callbacks
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);
+&nbsp;&nbsp;&nbsp;ecore_animator_add(animate_cb, ad-&gt;img);
+}
+
+if (!ad-&gt;sfc) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Native_Surface ns;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, w, h);
+&nbsp;&nbsp;&nbsp;evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
+&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
+&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(ad-&gt;img, EINA_TRUE);
+}
+</pre>
+<p>To use Evas GL, create it, set its configuration, and create the Evas GL surface and context. For rendering, connect Evas GL with the Evas Object Image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_native_surface_set()</span> function.</p>
+</li>
+
+<li>Resize callbacks.
+<p>The Evas GL resize behavior is related to Evas Object Image or Elm Window. In the following example, the Elm Window resize callback is used. When resizing occurs, Evas GL Surface is recreated and reconnected to Evas Object Image.</p>
+<pre class="prettyprint">
+static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;sfc) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_surface_destroy(ad-&gt;evasgl, ad-&gt;sfc);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;Evas_Coord w,h;
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;img, w, h);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;img, w, h);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;img);
+
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;sfc) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Native_Surface ns;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, w, h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(ad-&gt;img, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;}
+</pre>
+</li>
+
+<li>Draw callbacks.
+<p>The Evas GL draw callback function is registered by the following Evas Object Image function:</p>
+<pre class="prettyprint">
+ evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixel_cb, ad);
+</pre>
+<p>This callback function is provided for on-demand mode. Especially, if Evas GL uses <span style="font-family: Courier New,Courier,monospace">EVAS_GL_OPTIONS_DIRECT</span>, all OpenGL&reg; ES options are called in this callback function.</p>
+<pre class="prettyprint">
+static void img_pixel_cb(void *data, Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp;// Define the model view projection matrix
+&nbsp;&nbsp;&nbsp;float model[16], mvp[16];
+&nbsp;&nbsp;&nbsp;static float view[16];
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
+&nbsp;&nbsp;&nbsp;evas_object_image_size_get(obj, &amp;w, &amp;h);
+
+&nbsp;&nbsp;&nbsp;// Set up the context and surface as the current one
+&nbsp;&nbsp;&nbsp;evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);
+
+&nbsp;&nbsp;&nbsp;// Initialize GL just once
+&nbsp;&nbsp;&nbsp;if (ad-&gt;initialized == EINA_FALSE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float aspect;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_shaders(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vbo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, 3 * 72 * 4, cube_vertices,GL_STATIC_DRAW);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_matrix(view);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (w &gt; h) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)w/h;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view_set_ortho(view, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0, -1.0, 1.0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else {
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float)h/w;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view_set_ortho(view, -1.0, 1.0, -1.0 * aspect,  1.0 *aspect, -1.0, 1.0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
+&nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+
+&nbsp;&nbsp;&nbsp;init_matrix(model);
+&nbsp;&nbsp;&nbsp;rotate_xyz(model, ad-&gt;xangle, ad-&gt;yangle, 0.0f);
+&nbsp;&nbsp;&nbsp;multiply_matrix(mvp, view, model);
+
+&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo);
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(float) * 6, 0);
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(0);
+
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo);
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, sizeof(float) * 6, (void*)(sizeof(float)*3));
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(1);
+
+&nbsp;&nbsp;&nbsp;glUniformMatrix4fv( glGetUniformLocation(ad-&gt;program, &quot;mvpMatrix&quot;), 1, GL_FALSE, mvp);
+&nbsp;&nbsp;&nbsp;glDrawArrays(GL_TRIANGLES, 0, 36);
+
+&nbsp;&nbsp;&nbsp;glFlush();
+}
+</pre>
+</li>
+
+<li>Add animators.
+<p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games usually use an animator to have a regular update of the scene. The following is an example for a default update refresh rate:</p>
+<pre class="prettyprint">
+static Eina_Bool animate_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *img = data;
+
+&nbsp;&nbsp;&nbsp;// Animate here when an animation tick happens and mark the image as &quot;dirty&quot;
+&nbsp;&nbsp;&nbsp;// meaning it needs an update next time Evas renders it
+&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(img, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function is the Evas Object image which is connected Evas GL. After that, the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_get_callback_set()</span> callback function is called whenever Evas renders.</p>
+</li>
+
+<li>Delete callbacks.
+<p>The delete callback is triggered when the Evas GL is destroyed from the main loop. No other callback can be called on the same object afterwards.</p>
+<pre class="prettyprint">
+static void img_del_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Free the GL resources when image object is deleted
+&nbsp;&nbsp;&nbsp;evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);
+
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
+&nbsp;&nbsp;&nbsp;glDeleteProgram(ad-&gt;program);
+&nbsp;&nbsp;&nbsp;glDeleteBuffers(1, &amp;ad-&gt;vbo);
+
+&nbsp;&nbsp;&nbsp;evas_gl_surface_destroy(ad-&gt;evasgl, ad-&gt;sfc);
+&nbsp;&nbsp;&nbsp;evas_gl_context_destroy(ad-&gt;evasgl, ad-&gt;ctx);
+&nbsp;&nbsp;&nbsp;evas_gl_config_free(ad-&gt;cfg);
+
+&nbsp;&nbsp;&nbsp;evas_gl_free(ad-&gt;evasgl);
+}</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/glview11_cube_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/glview11_cube_sd_wn.htm
new file mode 100644 (file)
index 0000000..59748f7
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/glview11_cube_sd_wn.htm
@@ -0,0 +1,329 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>GLView11Cube Sample Overview</title>  \r
+</head>\r
+\r
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+\r
+  <h1>GLView11Cube Sample Overview</h1> \r
+\r
+<p>The GLView11Cube sample demonstrates how you can use ElmGLView to create a 3D cube using OpenGL&reg; ES 1.1.</p>\r
+\r
+         <table class="note"> \r
+          <tbody> \r
+               <tr> \r
+                <th class="note">Note</th> \r
+               </tr> \r
+               <tr> \r
+                <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> \r
+               </tr> \r
+          </tbody> \r
+         </table> \r
+\r
+<p>This sample extends the functionality of OpenGL&reg; ES 1.1 on the Tizen platform to create spinning 3D cubes. OpenGL&reg; is a standard specification defining a cross-language, cross-platform API for writing applications that produce 2D and 3D computer graphics. OpenGL&reg; ES 1.1 is light-weight but packed with functionalities for hardware acceleration, improved image quality with multi-texture support, and optimizations to increase performance while reducing memory bandwidth usage to save power. ElmGLView can support the surface for 3D rendering.</p>\r
+\r
+ <p class="figure">Figure: GLView11Cube</p> \r
+ <p align="center"><img alt="GLView11Cube" src="../images/glview11_cube_wn.png" /></p>  \r
+\r
+ \r
+<h2>Initializing the Application</h2>\r
+<p>The easiest way to use OpenGL&reg; within an EFL application is to rely on the Elementary GLView component.</p>\r
+<p>Current GLView can support both GELS2.0 and 1.1. GLView with the GLES 1.1 basic application has a similar basic format as the other GLView application.</p>\r
+<p>Create a basic application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;Evas_GL.h&gt;\r
+#include &lt;Elementary.h&gt;\r
+#include &lt;efl_extension.h&gt;\r
+#include &lt;dlog.h&gt;\r
+</pre>\r
+\r
+<p>The GLView application should include the header files as the <span style="font-family: Courier New,Courier,monospace">&lt;Evas_GL.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;Elementary.h&gt;</span>. The <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file is related to key events and the <span style="font-family: Courier New,Courier,monospace">&lt;dlog.h&gt;</span> header file is for seeing logs.</p>\r
+<pre class="prettyprint">\r
+#define S(a) evas_object_show(a)\r
+\r
+#define SX(a) do \r
+{\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(a, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(a, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(a);\r
+} while (0)\r
+\r
+#define SF(a) do \r
+{\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(a, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(a, 0.00001, 0.00001);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(a);\r
+} while (0)\r
+\r
+static bool\r
+app_create(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *o, *t;\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s*)data;\r
+\r
+&nbsp;&nbsp;&nbsp;// Force OpenGL engine\r
+&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add a window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = o = elm_win_add(NULL,&quot;glview&quot;, ELM_WIN_BASIC);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(o, &quot;delete,request&quot;, _close_cb, ad);\r
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(o, EVAS_CALLBACK_RESIZE, _win_resize_cb, ad);\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(o, EEXT_CALLBACK_BACK, _close_cb, ad);\r
+&nbsp;&nbsp;&nbsp;S(o);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add a background\r
+&nbsp;&nbsp;&nbsp;ad-&gt;bg = o = elm_bg_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;bg);\r
+&nbsp;&nbsp;&nbsp;elm_bg_color_set(o, 68, 68, 68);\r
+&nbsp;&nbsp;&nbsp;S(o);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add a resize conformant\r
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = o = elm_conformant_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);\r
+&nbsp;&nbsp;&nbsp;SX(o);\r
+\r
+&nbsp;&nbsp;&nbsp;ad-&gt;table = t = elm_table_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;S(t);\r
+\r
+&nbsp;&nbsp;&nbsp;o = elm_label_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(o, &quot;Gles 1.1 Cube&quot;);\r
+&nbsp;&nbsp;&nbsp;elm_table_pack(t, o, 1, 0, 3, 1);\r
+&nbsp;&nbsp;&nbsp;SF(o);\r
+\r
+&nbsp;&nbsp;&nbsp;o = elm_button_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(o, &quot;Quit&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(o, &quot;clicked&quot;, _close_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_table_pack(t, o, 1, 9, 3, 1);\r
+&nbsp;&nbsp;&nbsp;SF(o);\r
+\r
+&nbsp;&nbsp;&nbsp;ad-&gt;glview = o = _glview_create(ad);\r
+&nbsp;&nbsp;&nbsp;SX(o);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add an animator to call _anim_cb_() every (1/60) seconds\r
+&nbsp;&nbsp;&nbsp;// _anim_cb() indicates that glview has changed, which eventually triggers\r
+&nbsp;&nbsp;&nbsp;// function (draw_gl() here) to redraw glview surface\r
+&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;ecore_animator_frametime_set(1.0 / 60.0);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;anim = ecore_animator_add(_anim_cb, ad);\r
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_DEL, _destroy_anim, ad-&gt;anim);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+\r
+<p>To set the GL rendering engine, the application calls the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set(&quot;opengl&quot;)</span> function with the special string:</p>\r
+<pre class="prettyprint">\r
+static Evas_Object*\r
+_glview_create(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *obj;\r
+\r
+&nbsp;&nbsp;&nbsp;// Create a GLView with an OpenGL&reg;-ES 1.1 context\r
+&nbsp;&nbsp;&nbsp;obj = elm_glview_version_add(ad-&gt;win, EVAS_GL_GLES_1_X);\r
+&nbsp;&nbsp;&nbsp;elm_table_pack(ad-&gt;table, obj, 1, 1, 3, 1);\r
+&nbsp;&nbsp;&nbsp;evas_object_data_set(obj, APPDATA_KEY, ad);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_mode_set(obj,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ELM_GLVIEW_ALPHA |\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ELM_GLVIEW_DEPTH\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  );\r
+&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(obj, ELM_GLVIEW_RESIZE_POLICY_RECREATE);\r
+&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(obj, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(obj, init_gles);\r
+&nbsp;&nbsp;&nbsp;elm_glview_del_func_set(obj, destroy_gles);\r
+&nbsp;&nbsp;&nbsp;elm_glview_resize_func_set(obj, resize_gl);\r
+&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(obj, draw_gl);\r
+\r
+&nbsp;&nbsp;&nbsp;return obj;\r
+}\r
+</pre>\r
+\r
+<p>To create ElmGLView with GLES 1.1, use the <span style="font-family: Courier New,Courier,monospace">elm_glview_version_add()</span> function with the specific version (<span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLES_1_X</span>). The current ElmGLView can support both GLES 2.0 and 1.1.</p>\r
+\r
+<h2>Setting up Callbacks</h2>\r
+<p>To set up callbacks:</p>\r
+<ol>\r
+<li>Set the initialization callback.\r
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL&reg; context and surface have been created. This is called from the main loop, as are the 3 other callbacks.</p>\r
+<pre class="prettyprint">\r
+#include &lt;Elementary_GL_Helpers.h&gt;</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Elementary_GL_Helpers.h&gt;</span> header file provides a set of convenience functions and macros. To use these functions and macros, include the header file in the application.</p>\r
+<pre class="prettyprint">\r
+void\r
+init_gles(Evas_Object *obj)\r
+{\r
+&nbsp;&nbsp;&nbsp;int w, h;\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad;\r
+\r
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_USE(obj);\r
+&nbsp;&nbsp;&nbsp;ad = evas_object_data_get(obj, APPDATA_KEY);\r
+\r
+&nbsp;&nbsp;&nbsp;glGenTextures(2, ad-&gt;tex_ids);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create and map texture 1\r
+&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, ad-&gt;tex_ids[0]);\r
+&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 128, 128, 0, GL_RGBA, GL_UNSIGNED_SHORT_4_4_4_4, IMAGE_4444_128_128_1);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create and map texture 2\r
+&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, ad-&gt;tex_ids[1]);\r
+&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 128, 128, 0, GL_RGB, GL_UNSIGNED_SHORT_5_6_5, IMAGE_565_128_128_1);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);\r
+&nbsp;&nbsp;&nbsp;glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);\r
+\r
+&nbsp;&nbsp;&nbsp;ad-&gt;current_tex_index = 0;\r
+\r
+&nbsp;&nbsp;&nbsp;glShadeModel(GL_SMOOTH);\r
+\r
+&nbsp;&nbsp;&nbsp;glEnable(GL_CULL_FACE);\r
+&nbsp;&nbsp;&nbsp;glCullFace(GL_BACK);\r
+\r
+&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);\r
+&nbsp;&nbsp;&nbsp;glDepthFunc(GL_LESS);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;set_perspective(obj, 60.0f, w, h, 1.0f, 400.0f);\r
+}\r
+</pre>\r
+\r
+<p>In the GLES 1.1 sample, 2 textures are created and mapped in this function.</p>\r
+</li>\r
+\r
+<li>Set the resize callback.\r
+<p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport and matrix mode.</p>\r
+<pre class="prettyprint">\r
+void resize_gl(Evas_Object *obj)\r
+{\r
+&nbsp;&nbsp;&nbsp;int w, h;\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;set_perspective(obj, 60.0f, w, h, 1.0f, 400.0f);\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Set the draw callback.\r
+<p>The draw callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy set when calling.</p>\r
+<pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>\r
+\r
+<p>Another policy is <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_POLICY_ALWAYS</span>.</p>\r
+<p>The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. The following example covers the whole window:</p>\r
+<pre class="prettyprint">\r
+void draw_gl(Evas_Object *obj)\r
+{\r
+ELEMENTARY_GLVIEW_USE(obj);\r
+\r
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);\r
+&nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 0.0f);\r
+\r
+&nbsp;&nbsp;&nbsp;draw_cube1(obj);\r
+&nbsp;&nbsp;&nbsp;draw_cube2(obj);\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Set the delete callback.\r
+<p>The delete callback is triggered when the GLView is destroyed from the main loop, and no other callback can be called on the same object afterwards. In GELS 1.1, 2 textures are deleted.</p>\r
+<pre class="prettyprint">\r
+void\r
+destroy_gles(Evas_Object *obj)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad;\r
+\r
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_USE(obj);\r
+&nbsp;&nbsp;&nbsp;ad = evas_object_data_get(obj, APPDATA_KEY);\r
+\r
+&nbsp;&nbsp;&nbsp;if (ad-&gt;tex_ids[0])\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glDeleteTextures(1, &amp;(ad-&gt;tex_ids[0]));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;tex_ids[0] = 0;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;if (ad-&gt;tex_ids[1])\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glDeleteTextures(1, &amp;(ad-&gt;tex_ids[1]));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;tex_ids[1] = 0;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Add an animator.\r
+<p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games usually use an animator to update the scene regularly. The following example shows a default update refresh rate:</p>\r
+<pre class="prettyprint">\r
+static Eina_Bool\r
+_anim_cb(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;elm_glview_changed_set(ad-&gt;glview);\r
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;\r
+}\r
+</pre>\r
+\r
+<p>Any other event can be used to refresh the view, for example, the user input if the view does not need to be updated.</p>\r
+</li>\r
+</ol>\r
+\r
+         <table class="note"> \r
+          <tbody> \r
+               <tr> \r
+                <th class="note">Note</th> \r
+               </tr> \r
+               <tr> \r
+                <td class="note">OpenGL&reg; ES 1.1 application can be implemented in Tizen. However, if OpenGL&reg; ES 1.1 and OpenGL&reg; ES 2.0 are used together, they cannot be used in the same file.</td> \r
+               </tr> \r
+          </tbody> \r
+         </table>\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.sampledescriptions/html/wearable_n/glview_cube_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/glview_cube_sd_wn.htm
new file mode 100644 (file)
index 0000000..508626e
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/glview_cube_sd_wn.htm
@@ -0,0 +1,284 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />\r
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    \r
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>GLViewCube Sample Overview</title>  \r
+</head>\r
+\r
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+       <div id="profile">\r
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>\r
+       </div>\r
+\r
+  <h1>GLViewCube Sample Overview</h1> \r
+  \r
+<p>This sample demonstrates how to render with OpenGL&reg; ES 2.0 using an Elementary GLView component. It goes through the creation of a simple UI and how to draw a rotating cube using simple vertex and fragment shaders.</p>\r
+\r
+         <table class="note"> \r
+          <tbody> \r
+               <tr> \r
+                <th class="note">Note</th> \r
+               </tr> \r
+               <tr> \r
+                <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> \r
+               </tr> \r
+          </tbody> \r
+         </table> \r
+ \r
+ \r
+ <p class="figure">Figure: GLViewCube</p> \r
+ <p align="center"><img alt="GLViewCube" src="../images/glview_cube_wn.png" /></p>  \r
+         \r
+<h2>Elementary_GL_Helpers</h2>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Elementary_GL_Helpers.h&gt;</span> header file provides a set of convenience functions and macros. To use these functions and macros, include this header file in the application.</p>\r
+<pre class="prettyprint">\r
+#include &lt;app.h&gt;\r
+#include &lt;Elementary.h&gt;\r
+#include &lt;Elementary_GL_Helpers.h&gt;\r
+#include &lt;efl_extension.h&gt;\r
+\r
+#include &quot;glviewcube_utils.h&quot;\r
+\r
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE();\r
+...\r
+static bool app_create(void *data) \r
+{\r
+...\r
+&nbsp;&nbsp;&nbsp;// Create and initialize GLView\r
+&nbsp;&nbsp;&nbsp;gl = elm_glview_add(win);\r
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(gl);\r
+...\r
+}\r
+</pre>\r
+\r
+<h2>Setting up Callbacks</h2>\r
+<ol>\r
+<li>Set the initialization callback.\r
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL&reg; context and surface have been created.</p>\r
+<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+static void init_gl(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_shaders(obj);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Initialize the shaders.\r
+<ol type="a">\r
+<li>The shader instances for the fragment and vertex shader are compiled and created by passing the shader type as a parameter to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.\r
+       <p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>\r
+       <pre class="prettyprint">\r
+static void init_shaders(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);\r
+&nbsp;&nbsp;&nbsp;const char *p;\r
+&nbsp;&nbsp;&nbsp;p = vertex_shader;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);\r
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);\r
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);\r
+\r
+&nbsp;&nbsp;&nbsp;p = fragment_shader;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);\r
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);\r
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);\r
+</pre></li>\r
+       <li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();\r
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);\r
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);\r
+&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);\r
+</pre> \r
+       </li>\r
+\r
+       <li>Get the location for each vertex or pixel attribute in the shader program using the <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> and <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> functions. If the shader program attributes <span style="font-family: Courier New,Courier,monospace">a_position</span>, <span style="font-family: Courier New,Courier,monospace">a_color</span>, and <span style="font-family: Courier New,Courier,monospace">u_mvpMatrix</span> are valid, these functions return an integer value that represents the index location of the attributes. For invalid attributes, the return value is -1.\r
+       <p>The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> function retrieves the location of the attributes that have an effect on a vertex or pixel, such as position vector, normal vector, or vertex color. The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> retrieves the location of the attributes that have an effect on groups of vertices or pixels, such as model view matrix, projection matrix, or light position.</p>\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_position = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_color = glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_mvp = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMatrix&quot;);\r
+       </pre>\r
+       </li>\r
+       \r
+               <li>Install the shader program and enable the GPU to execute the shader operations in the frame buffer.\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program);\r
+}\r
+</pre>\r
+</li>\r
+</ol>\r
+</li>\r
+\r
+<li>Set the resize callback.\r
+<p>The resize callback is called whenever the GLView component is resized. It resets the viewport.</p>\r
+<pre class="prettyprint">\r
+static void resize_gl(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;int w, h;\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);\r
+}\r
+</pre>\r
+</li>\r
+\r
+\r
+<li>Set the draw callback.\r
+<p>The draw callback is called whenever a new frame has to be drawn.</p>\r
+<p>The application can now draw anything using GL primitives when this callback is triggered.</p>\r
+<ol type="a">\r
+       <li>The <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function specifies the affine transformation of the x and y values from normalized device coordinates to window coordinates as specified by the <span style="font-family: Courier New,Courier,monospace">elm_glview_size_get()</span> function.\r
+       <pre class="prettyprint">\r
+static void draw_gl(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;...\r
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;...\r
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);\r
+</pre>\r
+       </li>\r
+       <li>The <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is used to define an array of generic vertex attribute data. These attributes are parameters associated with each vertex of the cube. In this case, the parameters are position and color. In both instances, the final parameter (vertices and colors) represent the previously defined arrays - vertices and colors.\r
+       <p>The <span style="font-family: Courier New,Courier,monospace">glEnableVertexAttribArray()</span> function enables the generic vertex attribute data arrays. The enabled attributes can be accessed and used to render the scene.</p>\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_position, 3, GL_FLOAT, GL_FALSE,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3 * sizeof(float), cube_vertices);\r
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_color, 4, GL_FLOAT, GL_FALSE,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4 * sizeof(float), cube_colors);\r
+\r
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_position);\r
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_color);\r
+       </pre>\r
+       </li>\r
+\r
+       <li>The <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> function modifies the values of the 4x4 MVP (Model View/Projection) uniform matrix according to the vertices information of the cube. An MVP matrix is created with data after each vertex of the cube has passed through 2 transformation stages: The first transformation state is the model view transformation, which includes translation, rotation, and scaling of objects. The second state is projection, which includes changes in the  perspective or orthography.\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;idx_mvp, 1, GL_FALSE, ad-&gt;mvp);</pre>\r
+       </li>\r
+       \r
+       <li>Once the vertex arrays have been enabled, the actual process of rendering graphics primitives from the array data occurs using the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function. The final parameter in this function is the indices array.\r
+       <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, cube_indices_count,                             \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, cube_indices);\r
+       </pre>\r
+       </li>\r
+       </ol>\r
+       </li>\r
+\r
+<li>Add an animator.\r
+<p>The application regularly triggers updates of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>\r
+<pre class="prettyprint">\r
+static Eina_Bool anim(void *data) \r
+{\r
+elm_glview_changed_set(data);\r
+return EINA_TRUE;\r
+}\r
+\r
+static bool app_create(void *data) \r
+{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\r
+&nbsp;&nbsp;&nbsp;ani = ecore_animator_add(anim, gl);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Set event callbacks.\r
+<p>The event callbacks receive touch events and allow you to rotate the cube in a vertical or horizontal direction.</p>\r
+\r
+<pre class="prettyprint">\r
+static void mouse_down_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;\r
+}\r
+\r
+static void mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;\r
+&nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *)event_info;\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;float dx = 0, dy = 0;\r
+\r
+&nbsp;&nbsp;&nbsp;if (ad-&gt;mouse_down) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = ev-&gt;cur.canvas.x - ev-&gt;prev.canvas.x;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;xangle += dy;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;yangle += dx;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+static void mouse_up_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;\r
+}\r
+</pre>\r
+</li>\r
+\r
+\r
+<li>Set the delete callback.\r
+<p>The delete callback is triggered when the GLView is destroyed from the main loop.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">glDeleteShader()</span> and <span style="font-family: Courier New,Courier,monospace">glDeleteProgram()</span> functions are used to free memory.</p>\r
+<pre class="prettyprint">\r
+static void del_gl(Evas_Object *obj) \r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);\r
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);\r
+&nbsp;&nbsp;&nbsp;glDeleteProgram(ad-&gt;program);\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_data_del((Evas_Object*) obj, &quot;ad&quot;);\r
+}\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.sampledescriptions/html/wearable_n/glview_shader_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/glview_shader_sd_wn.htm
new file mode 100644 (file)
index 0000000..fe7dbeb
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/glview_shader_sd_wn.htm
@@ -0,0 +1,288 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>GLViewShader Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>GLViewShader Sample Overview</h1> 
+
+<p>The GLViewShader sample demonstrates how to render more complex geometries with OpenGL&reg; ES 2.0, using slightly more advanced vertex and fragment shaders to draw a rotating teapot. It also demonstrates how to use Elementary GLView helper macros to port existing code easily to Tizen.</p>
+
+         <table class="note"> 
+          <tbody> 
+               <tr> 
+                <th class="note">Note</th> 
+               </tr> 
+               <tr> 
+                <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td> 
+               </tr> 
+          </tbody> 
+         </table> 
+
+  <p class="figure">Figure: GLViewShader</p> 
+  <p align="center"><img alt="GLViewShader" src="../images/glview_shader_wn.png" /></p>  
+         
+<h2>Elementary_GL_Helpers</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;Elementary_GL_Helpers.h&gt;</span> header file provides a set of convenience functions and macros. To use these functions and macros, include this header file in the application.</p>
+<pre class="prettyprint">
+#include &lt;app.h&gt;
+#include &lt;Elementary.h&gt;
+#include &lt;Elementary_GL_Helpers.h&gt;
+#include &lt;efl_extension.h&gt;
+
+#include &quot;glviewcube_utils.h&quot;
+
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
+...
+static bool app_create(void *data) 
+{
+&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;// Create and initialize GLView
+&nbsp;&nbsp;&nbsp;gl = elm_glview_add(win);
+&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(gl);
+&nbsp;&nbsp;&nbsp;...
+}
+</pre>
+
+<h2>Setting up Callbacks</h2>
+
+<p>To set up callbacks:</p>
+<ol>
+<li>Set the initialization callback.
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL&reg; context and surface have been created.</p>
+<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>
+<p>A Vertex Buffer Object (VBO) allows vertex array data to be stored in a high-performance graphics memory on the server, enabling efficient data transfer.</p>
+<p>A VBO is created in the application for the teapot vertices. Additionally, an Index Buffer Object (IBO) is created for the indices. The <span style="font-family: Courier New,Courier,monospace">glGenBuffers()</span> function specifies an array in which the buffer object name is stored.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glBindBuffer()</span> function binds the buffer object to a specified target. In this case, the target is <span style="font-family: Courier New,Courier,monospace">GL_ARRAY_BUFFER</span>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glBufferData()</span> function is used to create a new data storage for the current buffer object. The parameters of the function are the buffer object target, the data store size, the array of teapot vertices, and the usage function of the data store (in this case, <span style="font-family: Courier New,Courier,monospace">GL_STATIC_DRAW</span>).</p>
+<pre class="prettyprint">
+static void init_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_shaders(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;idx_vbo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;idx_vbo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, 6 * sizeof(float) * MAX_V_COUNT,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEAPOT_VERTICES, GL_STATIC_DRAW);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;idx_ibo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ad-&gt;idx_ibo);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ELEMENT_ARRAY_BUFFER,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3 * sizeof(unsigned short) * MAX_F_COUNT, TEAPOT_INDICES,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_STATIC_DRAW);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Initialize the shaders:
+<ol type="a">
+       <li>The shader instances for the fragment and vertex shader are compiled and created by passing the shader type as a parameter to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
+       <p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
+       <pre class="prettyprint">
+       
+static void init_shaders(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
+&nbsp;&nbsp;&nbsp;const char *p;
+&nbsp;&nbsp;&nbsp;p = vertex_shader;
+&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);
+
+&nbsp;&nbsp;&nbsp;p = fragment_shader;
+&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
+&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
+&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
+</pre></li>
+       <li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
+       <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
+&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);
+&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);
+</pre>
+</li>
+
+<li>Get the location for each vertex or pixel attribute in the shader program using the <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> and <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> functions. If the shader program attributes, such as <span style="font-family: Courier New,Courier,monospace">u_mvpMatrix</span> and <span style="font-family: Courier New,Courier,monospace">a_position</span> are valid, these functions return an integer value that represents the index location of the attributes. For invalid attributes, the return value is -1.
+<p>The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> function retrieves the location of the attributes that have an effect on groups of vertices or pixels, such as model view matrix, projection matrix, or light position. The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> retrieves the location of the attributes that have an effect on a vertex or pixel, such as position vector, normal vector, or vertex color.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_light_dir = glGetUniformLocation(ad-&gt;program, &quot;u_light_dir&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_mvp = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMatrix&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_time_stamp = glGetUniformLocation(ad-&gt;program, &quot;u_time_stamp&quot;);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_vposition = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);
+&nbsp;&nbsp;&nbsp;ad-&gt;idx_vnormal = glGetAttribLocation(ad-&gt;program, &quot;a_normal&quot;);
+</pre>
+</li>
+       
+       <li>Install the shader program and enable the GPU to execute the shader operations in the frame buffer.
+       <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program);
+}
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Set the resize callback.
+<p>The resize callback is called whenever the GLView component is resized. It resets the viewport.</p>
+<pre class="prettyprint">
+static void resize_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;int w, h;
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
+}
+</pre>
+</li>
+
+<li>Set the draw callback.
+<p>The draw callback is called whenever a new frame has to be drawn.</p>
+<p>The application can now draw anything using GL primitives when this callback is triggered.</p>
+<ol type="a">
+       <li>The <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function specifies the affine transformation of the x and y values from normalized device coordinates to window coordinates as specified by the <span style="font-family: Courier New,Courier,monospace">elm_glview_size_get()</span> function.
+       <pre class="prettyprint">
+
+static void draw_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
+</pre>
+       </li>
+       <li>The <span style="font-family: Courier New,Courier,monospace">glUniform4fv()</span> function modifies the light direction in the graphic based on the light-related information of the teapot.
+       <p>The <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> modifies the values of the 4x4 MVP (Model View/Projection) uniform matrix according to the vertices information of the teapot. An MVP matrix is created with data after each vertex of the teapot has passed through 2 transformation stages. The first transformation state is the model view transformation, which includes translation, rotation, and scaling of objects. The second state is projection, which includes changes in the  perspective or orthography.</p>
+       <p>The <span style="font-family: Courier New,Courier,monospace">glUniform1f()</span> function modifies the timer-related information while drawing the teapot on the screen.</p>
+       <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;glUniform4fv(ad-&gt;idx_light_dir, 1, ad-&gt;light_dir);
+&nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;idx_mvp, 1, GL_FALSE, ad-&gt;mvp);
+&nbsp;&nbsp;&nbsp;glUniform1f(ad-&gt;idx_time_stamp, ad-&gt;time_stamp);
+       </pre>
+       </li>
+       
+       <li>The <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is used to define an array of generic vertex attribute data. These attributes are parameters associated with each vertex of the teapot. In this case, they are position and normal.
+       <p>A normal tells you in which direction a surface is facing. This helps in identifying the proper lighting of a surface.</p>
+       <p>The <span style="font-family: Courier New,Courier,monospace">glEnableVertexAttribArray()</span> function enables the generic vertex attribute data arrays. These enabled attributes can be accessed and used to render the scene and apply the desired shading to it.</p>
+       <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;idx_vbo);
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_vposition, 3, GL_FLOAT, GL_FALSE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(float) * 6, 0);
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_vposition);
+&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_vnormal, 3, GL_FLOAT, GL_FALSE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(float) * 6, (void*) (sizeof(float) * 3));
+&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_vnormal);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ad-&gt;idx_ibo);
+       </pre>
+       </li>
+       
+       <li>Once the vertex arrays have been enabled, the actual process of rendering graphics primitives from the array data occurs using the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function.
+       <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, MAX_F_COUNT * 3,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, 0);
+       </pre>
+       </li>
+       
+       <li>The <span style="font-family: Courier New,Courier,monospace">glFlush()</span> function empties all buffers causing all issued commands to be executed as quickly as they are accepted by the rendering engine.
+       <p>Finally, the vertex attribute arrays are disabled using the <span style="font-family: Courier New,Courier,monospace">glDisableVertexAttribArray()</span> function, and the buffer object binding is released by calling the <span style="font-family: Courier New,Courier,monospace">glBindBuffer()</span> function and specifying the buffer as 0.</p>
+       <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;glFlush();
+
+&nbsp;&nbsp;&nbsp;glDisableVertexAttribArray(ad-&gt;idx_vposition);
+&nbsp;&nbsp;&nbsp;glDisableVertexAttribArray(ad-&gt;idx_vnormal);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, 0);
+&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
+}
+       </pre>
+       </li></ol></li>
+
+<li>Add an animator.
+<p>The application regularly triggers updates of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>
+<pre class="prettyprint">
+static Eina_Bool anim(void *data) 
+{
+elm_glview_changed_set(data);
+return EINA_TRUE;
+}
+
+static bool app_create(void *data) 
+{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;ani = ecore_animator_add(anim, gl);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+}
+</pre>
+</li>  
+
+<li>Set the delete callback.
+<p>The delete callback is triggered when the GLView is being destroyed from the main loop.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glDeleteBuffers()</span>, <span style="font-family: Courier New,Courier,monospace">glDeleteShader()</span>, and <span style="font-family: Courier New,Courier,monospace">glDeleteProgram()</span> functions are used to free the memory.</p>
+<pre class="prettyprint"> 
+static void del_gl(Evas_Object *obj) 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
+
+&nbsp;&nbsp;&nbsp;glDeleteBuffers(1, &amp;ad-&gt;idx_vbo);
+&nbsp;&nbsp;&nbsp;glDeleteBuffers(1, &amp;ad-&gt;idx_ibo);
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
+&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
+&nbsp;&nbsp;&nbsp;glDeleteProgram(ad-&gt;program);
+
+&nbsp;&nbsp;&nbsp;evas_object_data_del((Evas_Object*) obj, &quot;ad&quot;);
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
index 0b1a4ba..1175a9f 100644 (file)
--- a/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
@@ -48,7 +48,19 @@
        <tr> 
      <td><a href="rectuicomponents_sd_wn.htm">(Rectangle) UI Components</a></td> 
      <td>Demonstrates how you can implement UI components in a rectangular view.</td>
+    </tr>
+       <tr> 
+     <td><a href="bluetoothchat_sd_wn.htm">(Circle) Bluetooth Chat</a></td> 
+     <td>Demonstrates how you can send and receive data between 2 devices.</td>
     </tr>      
+       <tr> 
+     <td><a href="cairo_basic_sd_wn.htm">(Circle) Cairo Basic</a></td> 
+     <td>Demonstrates how you can implement the Cairo image backend.</td>
+    </tr>
+       <tr> 
+     <td><a href="cairo_evasgl_sd_wn.htm">(Circle) Cairo EvasGL</a></td> 
+     <td>Demonstrates how you can implement the Cairo GL backend with the Evas_GL surface.</td>
+    </tr>              
     <tr>
      <td><a href="circleemail_sd_wn.htm">(Circle) Email</a></td> 
      <td>Demonstrates how you can implement a complex circular email view using EFL UI components and containers.</td>
@@ -73,6 +85,34 @@
      <td><a href="rectuidialer_sd_wn.htm">(Rectangle) UI Dialer</a></td> 
      <td>Demonstrates how you can implement a rectangular dialer view.</td>
     </tr>      
+       <tr> 
+     <td><a href="analog_watch_sd_wn.htm">Analog Watch</a></td> 
+     <td>Demonstrates how you can implement an analog watch application.</td>
+    </tr>
+       <tr> 
+     <td><a href="digital_watch_sd_wn.htm">Digital-Watch</a></td> 
+     <td>Demonstrates how you can implement a watch application.</td>
+    </tr>      
+       <tr> 
+     <td><a href="evas_gl_sd_wn.htm">Evas_GL</a></td> 
+     <td>Demonstrates how you can implement a cube that can be rotated on the screen through Evas GL.</td>
+    </tr>      
+       <tr> 
+     <td><a href="glview11_cube_sd_wn.htm">GLView11Cube</a></td> 
+     <td>Demonstrates how you can use ElmGLView to create a 3D cube on the screen.</td>
+    </tr>
+       <tr> 
+     <td><a href="glview_cube_sd_wn.htm">GLViewCube</a></td> 
+     <td>Demonstrates how you can implement a simple UI and draw a rotating cube using simple vertex and fragment shaders.</td>
+    </tr>
+       <tr> 
+     <td><a href="glview_shader_sd_wn.htm">GLViewShader</a></td> 
+     <td>Demonstrates how you can render more complex geometric shapes with OepnGL&reg; ES and use Elementary GLView helper macros to port existing code.</td>
+    </tr>      
+       <tr> 
+     <td><a href="widget_animation_sd_wn.htm">Widget Animation</a></td> 
+     <td>Demonstrates how you can implement an animation to a widget application.</td>
+    </tr>      
 
    </tbody> 
   </table> 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/widget_animation_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/widget_animation_sd_wn.htm
new file mode 100644 (file)
index 0000000..934cfa0
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/widget_animation_sd_wn.htm
@@ -0,0 +1,135 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Widget Animation Sample Overview</title>  
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>Widget Animation Sample Overview</h1> 
+  
+  <p>The Widget Animation sample demonstrates how you can use an animation in your widget application to show a simple image rotation.</p>
+<p>The following figure illustrates the main view of the Widget Animation application.</p>
+
+    <p class="figure">Figure: Widget Animation main view</p> 
+  <p align="center"><img alt="Widget Animation main view" src="../images/widget_application_sd.png" /></p>
+
+<h2>Implementation</h2>
+
+<p>To implement the Widget Animation application:</p>
+<ol>
+<li>Create a widget application by calling the <span style="font-family: Courier New,Courier,monospace;">widget_app_main()</span> function in the main function. You can register the widget application life-cycle callbacks when you call the <span style="font-family: Courier New,Courier,monospace;">widget_app_main()</span> function.
+<pre class="prettyprint">
+widget_app_lifecycle_callback_s ops = { 0, };
+int ret;
+
+ops.create = widget_app_create;
+ops.terminate = widget_app_terminate;
+
+ret = widget_app_main(argc, argv, &amp;ops, NULL);
+if (ret != WIDGET_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;widget_app_main() is failed. err = %d&quot;, ret);
+}
+</pre>
+</li>
+
+<li>Create the widget application instance with the <span style="font-family: Courier New,Courier,monospace;">widget_app_class_create()</span> function. It adds the widget instance life-cycle callbacks.
+<pre class="prettyprint">
+static widget_class_h
+widget_app_create(void *user_data) 
+{      
+&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s ops = 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.create = widget_instance_create, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.destroy = widget_instance_destroy, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.pause = widget_instance_pause, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resume = widget_instance_resume, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.update = widget_instance_update, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resize = widget_instance_resize, 
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;return widget_app_class_create(ops, user_data);
+}
+</pre>
+</li>
+<li>Get the widget application instance&#39;s window with the <span style="font-family: Courier New,Courier,monospace;">widget_app_get_elm_win()</span> function and draw the animation effect:
+<pre class="prettyprint">
+widget_instance_data_s *wid = (widget_instance_data_s*) malloc(sizeof(widget_instance_data_s));
+int ret;
+// Window
+ret = widget_app_get_elm_win(context, &amp;wid-&gt;win);
+if (ret != WIDGET_ERROR_NONE) 
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get window. err = %d&quot;, ret);
+
+&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_FAULT;
+}
+evas_object_resize(wid-&gt;win, w, h);
+</pre>
+</li>
+
+<li>Add an image to the widget application window:
+<pre class="prettyprint">
+// Animation
+wid-&gt;ship = evas_object_image_filled_add(evas_object_evas_get(wid-&gt;win));
+
+char buf[256];
+
+snprintf(buf, sizeof(buf), &quot;%s/ship.png&quot;, app_get_resource_path());
+evas_object_image_file_set(wid-&gt;ship, buf, NULL);
+evas_object_resize(wid-&gt;ship, SHIP_IMAGE_WIDTH, SHIP_IMAGE_HEIGHT);
+evas_object_move(wid-&gt;ship, 100, 150);
+evas_object_show(wid-&gt;ship);
+</pre>
+</li>
+
+<li>Add the animation effect with the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function:
+<pre class="prettyprint">
+Ecore_Animator *animator = ecore_animator_timeline_add(ANIM_TIME, _do_animation, wid-&gt;ship);
+</pre>
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
index 127a79e..d9d80e6 100644 (file)
--- a/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/sd_ww.htm
@@ -202,7 +202,7 @@
      <td><a href="wearableuicomponents_ww.htm">WearableUIComponents</a></td> 
      <td>Demonstrates how you can implement UI components using: 
       <ul> 
-       <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework</a> Reference</li> 
+       <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a> Reference</li> 
       </ul>
        </td> 
     </tr> 
diff --git a/org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm
index 3c4de81..fb1373f 100644 (file)
--- a/org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/spinning_arrow_ww.htm
@@ -24,7 +24,7 @@
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../org.tizen.guides/html/web/w3c/dom/transform_w.htm">CSS Transforms Guide</a></li>  
+                       <li><a href="../../../org.tizen.ui.guides/html/web/w3c/transform_w.htm">CSS Transforms UI Guide</a></li>  
                   <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API</a></li>
                   <li><a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm">Rotary Events</a></li>            
                </ul>
diff --git a/org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm b/org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm
index 1fbe9d9..88526e7 100644 (file)
--- a/org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm
+++ b/org.tizen.sampledescriptions/html/wearable_w/wearableuicomponents_ww.htm
@@ -24,8 +24,8 @@
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                  <li><a href="../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW) Guide</a></li> 
-                  <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework</a></li> 
+                  <li><a href="../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU UI Guide</a></li> 
+                  <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li> 
                </ul>
        </div></div>
 </div> 
diff --git a/org.tizen.sampledescriptions/index.xml b/org.tizen.sampledescriptions/index.xml
index 1789bd6..014eeaf 100644 (file)
--- a/org.tizen.sampledescriptions/index.xml
+++ b/org.tizen.sampledescriptions/index.xml
@@ -5,7 +5,6 @@
 <toc label="Sample Descriptions" topic="html/cover_page.htm">
        <topic href="html/sd_w.htm" label="Web Application">
                <topic href="html/mobile_w/sd_mw.htm" label="Mobile Web">
-                       <topic href="html/mobile_w/appcalleecaller_mw.htm" label="AppCaller and AppCallee"></topic>
                        <topic href="html/mobile_w/archivemanager_mw.htm" label="ArchiveManager"></topic>
                        <topic href="html/mobile_w/bluetoothchat_mw.htm" label="BluetoothChat"></topic>
                        <topic href="html/mobile_w/calculator_mw.htm" label="Calculator"></topic>
@@ -19,6 +18,7 @@
                        <topic href="html/mobile_w/eventmanager_mw.htm" label="EventManager"></topic>
                        <topic href="html/mobile_w/exerciseplanner_mw.htm" label="ExcercisePlanner"></topic>
                        <topic href="html/mobile_w/filemanager_mw.htm" label="FileManager"></topic>
+                       <topic href="html/mobile_w/fmradio_mw.htm" label="FMRadio"></topic>
                        <topic href="html/mobile_w/hellotizen_mw.htm" label="HelloTizen"></topic>
                        <topic href="html/mobile_w/mediacontent_mw.htm" label="MediaContent"></topic>
                        <topic href="html/mobile_w/moneybook_mw.htm" label="MoneyBook"></topic>
@@ -28,6 +28,7 @@
                        <topic href="html/mobile_w/piano_mw.htm" label="Piano"></topic>
                        <topic href="html/mobile_w/selfcamera_mw.htm" label="SelfCamera"></topic>
                        <topic href="html/mobile_w/sensorball_mw.htm" label="SensorBall"></topic>
+                       <topic href="html/mobile_w/soundmanager_mw.htm" label="SoundManager"></topic>
                        <topic href="html/mobile_w/systeminfo_mw.htm" label="Systeminfo"></topic>
                        <topic href="html/mobile_w/winset_mw.htm" label="TizenWinset"></topic>
                        <topic href="html/mobile_w/touchpaint_mw.htm" label="TouchPaint"></topic>
@@ -60,6 +61,8 @@
        <topic href="html/sd_n.htm" label="Native Application">
                <topic href="html/mobile_n/sd_mn.htm" label="Mobile Native">
                        <topic href="html/mobile_n/bundle_sd_mn.htm" label="Bundle"></topic>
+                       <topic href="html/mobile_n/cairo_basic_sd_mn.htm" label="Cairo Basic"></topic>
+                       <topic href="html/mobile_n/cairo_evasgl_sd_mn.htm" label="Cairo EvasGL"></topic>
                        <topic href="html/mobile_n/calculator_sd_mn.htm" label="Calculator"></topic>
                        <topic href="html/mobile_n/contacts_sd_mn.htm" label="Contacts"></topic>
                        <topic href="html/mobile_n/evas_gl_sd_mn.htm" label="Evas_GL"></topic>
@@ -67,11 +70,10 @@
                        <topic href="html/mobile_n/glview11_cube_sd_mn.htm" label="GLView11Cube"></topic>
                        <topic href="html/mobile_n/glview_cube_sd_mn.htm" label="GLViewCube"></topic>
                        <topic href="html/mobile_n/glview_shader_sd_mn.htm" label="GLViewShader"></topic>
-                       <!--
                        <topic href="html/mobile_n/gps_consumer_sd_mn.htm" label="GPS Consumer"></topic>
                        <topic href="html/mobile_n/gps_service_sd_mn.htm" label="GPS Service"></topic>
-                       -->
                        <topic href="html/mobile_n/hybridservice_sd_mn.htm" label="HybridServiceApp"></topic>
+                       <topic href="html/mobile_n/lockscreen_sd_mn.htm" label="Lockscreen"></topic>
                        <topic href="html/mobile_n/mediaapp_sd_mn.htm" label="Media App"></topic>
                        <topic href="html/mobile_n/notificationmanager_sd_mn.htm" label="Notification Manager"></topic>
                        <topic href="html/mobile_n/paint_sd_mn.htm" label="Paint"></topic>
@@ -85,6 +87,7 @@
                        <topic href="html/mobile_n/simple_home_sd_mn.htm" label="Simple Homescreen"></topic>
                        <topic href="html/mobile_n/taskmanager_sd_mn.htm" label="Taskmanager"></topic>
                        <topic href="html/mobile_n/ui_components_sd_mn.htm" label="UI Components"></topic>
+                       <topic href="html/mobile_n/volume_sd_mn.htm" label="Volume"></topic>
                        <topic href="html/mobile_n/ui_alignment_sd_mn.htm" label="[UI Sample] Alignment"></topic>
                        <topic href="html/mobile_n/ui_animation_sd_mn.htm" label="[UI Sample] Animation"></topic>
                        <topic href="html/mobile_n/ui_animator_sd_mn.htm" label="[UI Sample] Animator"></topic>
@@ -128,12 +131,22 @@
                <topic href="html/wearable_n/sd_wn.htm" label="Wearable Native">
                        <topic href="html/wearable_n/circleuicomponents_sd_wn.htm" label="(Circle) UI Components"></topic>
                        <topic href="html/wearable_n/rectuicomponents_sd_wn.htm" label="(Rectangle) UI Components"></topic>
+                       <topic href="html/wearable_n/bluetoothchat_sd_wn.htm" label="(Circle) Bluetooth Chat"></topic>
+                       <topic href="html/wearable_n/cairo_basic_sd_wn.htm" label="(Circle) Cairo Basic"></topic>
+                       <topic href="html/wearable_n/cairo_evasgl_sd_wn.htm" label="(Circle) Cairo EvasGL"></topic>
                        <topic href="html/wearable_n/circleemail_sd_wn.htm" label="(Circle) Email"></topic>
                        <topic href="html/wearable_n/circlesettingtime_sd_wn.htm" label="(Circle) Setting Time"></topic>
                        <topic href="html/wearable_n/circlesettings_sd_wn.htm" label="(Circle) Settings"></topic>
                        <topic href="html/wearable_n/rectemail_sd_wn.htm" label="(Rectangle) Email"></topic>
                        <topic href="html/wearable_n/rectsettings_sd_wn.htm" label="(Rectangle) Settings"></topic>
                        <topic href="html/wearable_n/rectuidialer_sd_wn.htm" label="(Rectangle) UI Dialer"></topic>
+                       <topic href="html/wearable_n/analog_watch_sd_wn.htm" label="Analog Watch"></topic>
+                       <topic href="html/wearable_n/digital_watch_sd_wn.htm" label="Digital-Watch"></topic>
+                       <topic href="html/wearable_n/evas_gl_sd_wn.htm" label="Evas_GL"></topic>        
+                       <topic href="html/wearable_n/glview11_cube_sd_wn.htm" label="GLView11Cube"></topic>
+                       <topic href="html/wearable_n/glview_cube_sd_wn.htm" label="GLViewCube"></topic>
+                       <topic href="html/wearable_n/glview_shader_sd_wn.htm" label="GLViewShader"></topic>                             
+                       <topic href="html/wearable_n/widget_animation_sd_wn.htm" label="Widget Animation"></topic>
                </topic>                
        </topic>
 </toc>
diff --git a/org.tizen.sampledescriptions/plugin.xml b/org.tizen.sampledescriptions/plugin.xml
index 90140e5..4c22a91 100644 (file)
--- a/org.tizen.sampledescriptions/plugin.xml
+++ b/org.tizen.sampledescriptions/plugin.xml
@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?eclipse version="3.0"?>
-
-<plugin>
-       <extension point="org.eclipse.help.toc">
-               <toc file="index.xml" primary="true" />
-       </extension>
-</plugin>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<?eclipse version="3.0"?>\r
+\r
+<plugin>\r
+       <extension point="org.eclipse.help.toc">\r
+               <toc file="index.xml" primary="true" />\r
+       </extension>\r
+</plugin>\r
diff --git a/org.tizen.tutorials/.project b/org.tizen.tutorials/.project
index 2d4264f..2ac75dc 100644 (file)
--- a/org.tizen.tutorials/.project
+++ b/org.tizen.tutorials/.project
@@ -1,22 +1,22 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-       <name>org.tizen.tutorials_2.4.0</name>
-       <comment></comment>
-       <projects>
-       </projects>
-       <buildSpec>
-               <buildCommand>
-                       <name>org.eclipse.pde.ManifestBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.eclipse.pde.SchemaBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-       </buildSpec>
-       <natures>
-               <nature>org.eclipse.pde.PluginNature</nature>
-       </natures>
-</projectDescription>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<projectDescription>\r
+       <name>org.tizen.tutorials_2.4.0</name>\r
+       <comment></comment>\r
+       <projects>\r
+       </projects>\r
+       <buildSpec>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.ManifestBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.SchemaBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+       </buildSpec>\r
+       <natures>\r
+               <nature>org.eclipse.pde.PluginNature</nature>\r
+       </natures>\r
+</projectDescription>\r
diff --git a/org.tizen.tutorials/META-INF/MANIFEST.MF b/org.tizen.tutorials/META-INF/MANIFEST.MF
index a4d34e7..0b186a9 100644 (file)
--- a/org.tizen.tutorials/META-INF/MANIFEST.MF
+++ b/org.tizen.tutorials/META-INF/MANIFEST.MF
@@ -1,7 +1,7 @@
-Manifest-Version: 1.0
-Bundle-ManifestVersion: 1
-Bundle-Name: Tizen Tutorials
-Bundle-SymbolicName: org.tizen.tutorials;singleton=true
-Bundle-Version: 2.4.0
-Bundle-Vendor: The Linux Foundation
-
+Manifest-Version: 1.0\r
+Bundle-ManifestVersion: 1\r
+Bundle-Name: Tizen Tutorials\r
+Bundle-SymbolicName: org.tizen.tutorials;singleton=true\r
+Bundle-Version: 2.4.0\r
+Bundle-Vendor: The Linux Foundation\r
+\r
diff --git a/org.tizen.tutorials/build.properties b/org.tizen.tutorials/build.properties
index b84ff38..264c2a1 100644 (file)
--- a/org.tizen.tutorials/build.properties
+++ b/org.tizen.tutorials/build.properties
@@ -1,8 +1,8 @@
-bin.includes = plugin.xml,\
-               META-INF/,\
-               html/,\
-               build.properties,\
-               .project,\
-                          about.html,\
-               index.xml
-
+bin.includes = plugin.xml,\\r
+               META-INF/,\\r
+               html/,\\r
+               build.properties,\\r
+               .project,\\r
+                          about.html,\\r
+               index.xml\r
+\r
diff --git a/org.tizen.tutorials/html/css/snippet.css b/org.tizen.tutorials/html/css/snippet.css
index f880409..2be1b1f 100644 (file)
--- a/org.tizen.tutorials/html/css/snippet.css
+++ b/org.tizen.tutorials/html/css/snippet.css
@@ -1,52 +1,52 @@
-/* Pretty printing styles. Used with prettify.js. */
-
-/* SPAN elements with the classes below are added by prettyprint. */
-.pln { color: #000 }  /* plain text */
-
-@media screen {
-  .str { color: #793AFF }  /* string content */
-  .kwd { color: #7F0055 }  /* a keyword */
-  .com { color: green}  /* a comment */
-  .typ { color: #1C1C1C }  /* a type name */
-  .lit { color: black }  /* a literal value */
-  /* punctuation, lisp open bracket, lisp close bracket */
-  .pun, .opn, .clo { color: #1C1C1C}
-  .tag { color: #008 }  /* a markup tag name */
-  .atn { color: #606 }  /* a markup attribute name */
-  .atv { color: #080 }  /* a markup attribute value */
-  .dec, .var { color: #606 }  /* a declaration; a variable name */
-  .fun { color: red }  /* a function name */
-}
-
-/* Use higher contrast and text-weight for printable form. */
-@media print, projection {
-  .str { color: #060 }
-  .kwd { color: #006; font-weight: bold }
-  .com { color: #600; font-style: italic }
-  .typ { color: #404; font-weight: bold }
-  .lit { color: #044 }
-  .pun, .opn, .clo { color: #440 }
-  .tag { color: #006; font-weight: bold }
-  .atn { color: #404 }
-  .atv { color: #060 }
-}
-
-/* Put a border around prettyprinted code snippets. */
-pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L5,
-li.L6,
-li.L7,
-li.L8 { list-style-type: none }
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 { background: #eee }
+/* Pretty printing styles. Used with prettify.js. */\r
+\r
+/* SPAN elements with the classes below are added by prettyprint. */\r
+.pln { color: #000 }  /* plain text */\r
+\r
+@media screen {\r
+  .str { color: #793AFF }  /* string content */\r
+  .kwd { color: #7F0055 }  /* a keyword */\r
+  .com { color: green}  /* a comment */\r
+  .typ { color: #1C1C1C }  /* a type name */\r
+  .lit { color: black }  /* a literal value */\r
+  /* punctuation, lisp open bracket, lisp close bracket */\r
+  .pun, .opn, .clo { color: #1C1C1C}\r
+  .tag { color: #008 }  /* a markup tag name */\r
+  .atn { color: #606 }  /* a markup attribute name */\r
+  .atv { color: #080 }  /* a markup attribute value */\r
+  .dec, .var { color: #606 }  /* a declaration; a variable name */\r
+  .fun { color: red }  /* a function name */\r
+}\r
+\r
+/* Use higher contrast and text-weight for printable form. */\r
+@media print, projection {\r
+  .str { color: #060 }\r
+  .kwd { color: #006; font-weight: bold }\r
+  .com { color: #600; font-style: italic }\r
+  .typ { color: #404; font-weight: bold }\r
+  .lit { color: #044 }\r
+  .pun, .opn, .clo { color: #440 }\r
+  .tag { color: #006; font-weight: bold }\r
+  .atn { color: #404 }\r
+  .atv { color: #060 }\r
+}\r
+\r
+/* Put a border around prettyprinted code snippets. */\r
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }\r
+\r
+/* Specify class=linenums on a pre to get line numbering */\r
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */\r
+li.L0,\r
+li.L1,\r
+li.L2,\r
+li.L3,\r
+li.L5,\r
+li.L6,\r
+li.L7,\r
+li.L8 { list-style-type: none }\r
+/* Alternate shading for lines */\r
+li.L1,\r
+li.L3,\r
+li.L5,\r
+li.L7,\r
+li.L9 { background: #eee }\r
diff --git a/org.tizen.tutorials/html/css/styles.css b/org.tizen.tutorials/html/css/styles.css
index 4c8f5a8..ad7ebcb 100644 (file)
--- a/org.tizen.tutorials/html/css/styles.css
+++ b/org.tizen.tutorials/html/css/styles.css
@@ -1,756 +1,756 @@
-@charset "utf-8";
-
-body {
-       background: white;
-       color: #1C1C1C;
-       margin-right: 20px;
-       margin-left: 20px;
-       font-size: 9pt;
-       font-weight: normal;
-       font-family: Arial, Helvetica, sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {
-       font-family: Arial, Verdana, Helvetica, sans-serif
-       }
-
-/*     Set default font to 9 pt        */
-table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
-       font-size: 9pt;
-}
-       
-pre, code { 
-       font-family: "Courier New", Courier, monospace;
-       border: 1px solid #719cc7;
-       margin: 6px 1.5px;
-       padding: 1px 1px 1px 1px;
-       font-weight: normal;
-       font-style: normal;
-}
-
-h1 {font-size: 24pt; color: #0E437D;}
-h2 {font-size: 18pt; color: #0E437D;}
-h3 {font-size: 14pt; color: #1C1C1C;}
-h4 {font-size: 12pt; color: #1C1C1C;}
-h5 {font-size: 10pt; color: #1C1C1C;}
-       
-h1, h2, h3, h4, h5 {
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-
-caption, p.caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: left;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-ol  {
-       margin-bottom: 20px;
-}
-
-ul ul , ol ul, ul ol, ol ol{
-       margin-top: 10px;
-}
-
-ul li, ol li {
-       margin-bottom: 10px;
-}
-
-ol.tutorstep li {
-       border-top: 2px solid #719cc7;
-       list-style-position: inside;
-       font-weight: bold;
-       margin-top: 30px;
-       margin-left: -20px;
-       padding-top: 3px;
-       font-size: 12pt;
-}
-
-ol.tutorstep li p{
-       font-size: 9pt;
-       font-weight: normal;
-       margin-top: 10px;
-}
-
-ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
-       font-size: 9pt;
-       list-style-position: outside; 
-       margin-left: 0px;
-       font-weight: normal;
-}
-
-ol.tutorstep ol li p, ol.tutorstep ul li p {
-       font-size: 9pt;
-       font-weight: normal; 
-       margin-top: 5px;
-}
-
-ol li p, ul li p {
-       font-size: 9pt;
-       font-weight: normal;
-       margin-bottom: 2px;
-       margin-top: 2px;
-}
-
-ol ol , ol.tutorstep ol{
-       font-size: 9pt;
-       font-weight: normal;
-       list-style-type: lower-alpha;
-       color: #1C1C1C; 
-       border-style: none;
-       margin-top: 10px; 
-}
-
-ol.tutorstep ul {
-       margin-top: 10px;
-       font-size: 9pt;
-}
-
-ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
-       border-style: none;
-       margin-top: 5px;
-       font-size: 9pt;
-}
-
-ul {
-       font-size: 9pt;
-       font-weight: normal;
-       color: #1C1C1C;
-}
-
-
-/*     End of font face declarations   */
-
-/*     Set table borders and heading row background    */
-table {
-       border: 0px;
-       border-collapse: collapse;
-       width: 100%;
-       margin-top: 20px;
-       margin-bottom: 20px;
-       background: white;
-}
-
-th {
-       border-top: 2px solid #719cc7;
-       border-right: 1px solid #c6d9f1;
-       border-left: 1px solid #c6d9f1;
-       background-color: #f3f7fb;
-       padding: 4px;
-       color: #719cc7;
-       font-size: 9pt;
-       font-weight: bold;
-}      
-       
-td {
-       border: 1px solid #c6d9f1;
-       vertical-align:top;
-       padding: 3px 20px 5px 20px;
-       }
-
-td.middle {
-       border: 1px solid #c6d9f1;
-       vertical-align:middle;
-       padding: 3px 20px 5px 20px;
-       }       
-       
-/*     Notes stand out using a light top & bottom borders with yellow background       */
-table.note {
-       border-top: 2px solid #719cc7;
-       border-left: 0px;
-       border-right: 0px;
-       width: 100%;
-}
-
-tr.note {
-       text-align: left;
-}
-
-th.note {
-       text-align: left;
-       background-color: #ddd9c3;
-       background-image: note.gif;
-       border-top: 2px solid #719cc7;
-       border-bottom:1px solid #719cc7;
-       border-right: none;
-
-}
-
-td.note, p.note {
-       background-color: #eeece1;
-       color: #1C1C1C;
-       padding: 5px;
-       margin-top:12px;
-       margin-bottom:12px;
-       border: none;
-}
-       
-/*     Figure titles are centered and bolded   */
-p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
-       text-align: center;
-       font-weight: bold;
-}
-
-/*     Red background and white text for things that need fixing before release        */
-.fix   {
-       background-color: red;
-       font-weight: bold;
-       color: white;
-       }
-
-/* Classes for creating collapsible content */
-#banner {
-       padding: 8px 4px 8px 4px;
-       /* top right bottom left */
-       border: 1px solid #7f7f7f;
-       width: 100%;
-       background-image: url("banner.png");
-       text-align: left;
-       font-weight: bold;
-       font-size: 9pt;
-       color: #ffffff;
-}
-
-#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
-#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
-#main {width: 75%; height: 90%;}
-#container {width:100%;}
-#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
-body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #toc-navigation {width: auto;}
-body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
-body.no-toc #profile {float: right;right: -32px;}
-body.no-toc #profile p {padding: 0; margin: 0;}
-#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
-       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
-       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
-
-.devicespecs-util {float:right; margin-top:25px;}
-       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
-       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
-       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
-       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
-       .devicespecs-util ul.dutil li a:hover { color:#222; }
-       .devicespecs-util ul.dutil li a:active { color:#222; }
-
-ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
-ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
-ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
-ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
-       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
-
-       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
-
-       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
-       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
-
-.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
-.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
-.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
-.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
-
-.static-cont {width:100%; margin-bottom:40px;}
-       
-.top {text-align: right;}
-.toc, ul.toc{
-       margin: 10px 0px 0px 0px;
-       padding-left: 13px;
-       list-style: disc;
-       font-size: 9pt;
-       line-height: 115%; 
-       }
-       
-.toc-title {
-       font-size: 12pt;
-       color: #0E437D; 
-       font-weight: bold;
-       font-style: normal; 
-       line-height: normal; 
-       margin-top: 16pt;
-}
-       
-a.top {
-       display:block; 
-       float: right; 
-       position:fixed;
-       width: 28px; 
-       height:89px; 
-       bottom:50px;
-       z-index: 101;
-       right: 19%;
-       }
-
-a img {border: 0;}
-       
-/*     Footer includes space and a gray line above             */
-#footer {
-       position: fixed;
-       /* width: 100%; */
-    bottom: 0px;
-       text-align: center;
-       border-top: 1px solid #CCCCCC;
-       background-color: #FFFFFF;      
-       left: 21px;  right: 21px;
-}
-
-.footer {font-size: 8pt;}
-       
-caption { 
-       font-size: 9pt;
-       color: #1C1C1C;
-       font-weight: bold;
-       text-align: center;
-       margin-top: 20px;
-       margin-bottom: 0px;
-}
-
-div.qindex, div.navpath, div.navtab{
-       background-color: #e8eef2;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       padding: 2px;
-}
-
-div.qindex, div.navpath {
-       width: 100%;
-       line-height: 140%;
-}
-
-div.navtab {
-       margin-right: 15px;
-}
-
-/* @group Link Styling */
-
-a:link {
-       color: #719cc7;
-       text-decoration: underline;
-       font-weight: bold;
-}
-
-a:hover { 
-       color: #0e437d;
-}
-
-a:visited {
-       text-decoration: underline;
-       color: #719cc7;
-       font-weight: bold;
-}
-
-a.qindex {
-       font-weight: bold;
-       padding: 2px;
-}
-
-a.qindex:hover {
-       text-decoration: underline;
-       color: #0e437d;
-       padding: 2px;
-}
-
-a.qindex:visited {
-       text-decoration: underline;
-       font-weight: bold;
-       color: #719cc7;
-       padding: 2px;
-}
-
-a.qindexHL {
-       text-decoration: underline;
-       font-weight: bold;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-       border: 1px double #9295C2;
-}
-
-a.qindexHL:hover {
-       text-decoration: none;
-       background-color: #6666cc;
-       color: #ffffff;
-       padding: 2px 6px;
-}
-
-dl.el { 
-       margin-left: -1cm 
-}
-
-.fragment {
-       font-family: monospace, fixed;
-       font-size: 105%;
-}
-
-pre.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 4px 6px;
-       margin: 4px 8px 4px 2px;
-}
-
-div.fragment {
-       border: 1px solid #CCCCCC;
-       background-color: #f5f5f5;
-       padding: 6px;
-}
-
-div.ah { 
-       background-color: black; 
-       font-weight: bold; 
-       color: #ffffff; 
-       margin-bottom: 3px; 
-       margin-top: 3px 
-}
-
-td.md { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-}
-
-td.mdname1 { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-}
-
-td.mdname { 
-       background-color: #f5f5f5; 
-       font-weight: bold; 
-       color: #602020; 
-       width: 600px; 
-}
-
-div.groupHeader {
-       margin-left: 16px;
-       margin-top: 12px;
-       margin-bottom: 6px;
-       font-weight: bold;
-}
-
-div.groupText { 
-       margin-left: 16px; 
-       font-style: italic; 
-}
-
-td.indexkey {
-       background-color: #eeeeff;
-       font-weight: bold;
-       border: 1px solid #CCCCCC;
-       margin: 2px 0px 2px 0;
-       padding: 2px 10px;
-}
-
-td.indexvalue {
-       background-color: #eeeeff;
-       border: 1px solid #CCCCCC;
-       padding: 2px 10px;
-       margin: 2px 0px;
-}
-
-tr.memlist {
-   background-color: #f0f0f0; 
-}
-
-p.formulaDsp { 
-       text-align: center; 
-}
-
-img.formulaDsp { 
-}
-
-img.formulaInl { 
-       vertical-align: middle; 
-}
-
-/* @group Code Colorization */
-
-span.keyword       { color: #008000 }
-span.keywordtype   { color: #604020 }
-span.keywordflow   { color: #e08000 }
-span.comment       { color: #800000 }
-span.preprocessor  { color: #806020 }
-span.stringliteral { color: #002080 }
-span.charliteral   { color: #008080 }
-span.vhdldigit     { color: #ff00ff }
-span.vhdlchar      { color: #000000 }
-span.vhdlkeyword   { color: #700070 }
-span.vhdllogic     { color: #ff0000 }
-
-.mdTable {
-       border: 1px solid #868686;
-       background-color: #F4F4FB;
-}
-
-.mdRow {
-       padding: 8px 10px;
-}
-
-/* @group Member Descriptions */
-
-.mdescLeft, .mdescRight,
-.memItemLeft, .memItemRight,
-.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
-       background-color: #F4F4F4A;
-       border: none;
-       margin: 4px;
-       padding: 3px 8px 4px 8px;
-}
-
-.mdescLeft, .mdescRight {
-       padding: 0px 8px 4px 8px;
-       color: #555;
-}
-
-.memItemLeft, .memItemRight, .memTemplParams {
-       border-top: 1px solid #DBDBDB;
-}
-
-.memTemplParams {
-       color: #606060;
-}
-
-/* @end */
-
-/* @group Member Details */
-
-/* Styles for detailed member documentation */
-
-.memtemplate {
-       font-size: 80%;
-       color: #606060;
-       font-weight: normal;
-       margin-left: 3px;
-}
-
-.memnav {
-       background-color: #eeeeff;
-       border: 1px solid #84b0c7;
-       text-align: center;
-       margin: 2px;
-       margin-right: 15px;
-       padding: 2px;
-}
-
-.memitem {
-       padding: 0;
-}
-
-.memname {
-       white-space: nowrap;
-       font-weight: bold;
-}
-
-.memproto, .memdoc {
-       border: 1px solid #9BBCDD;      
-}
-
-.memproto {
-       padding: 0;
-       background-color: #D5E2EF;
-       font-weight: bold;
-       -webkit-border-top-left-radius: 8px;
-       -webkit-border-top-right-radius: 8px;
-       -moz-border-radius-topleft: 8px;
-       -moz-border-radius-topright: 8px;
-}
-
-.memdoc {
-       padding: 2px 5px;
-       background-color: #eef3f5;
-       border-top-width: 0;
-       -webkit-border-bottom-left-radius: 8px;
-       -webkit-border-bottom-right-radius: 8px;
-       -moz-border-radius-bottomleft: 8px;
-       -moz-border-radius-bottomright: 8px;
-}
-
-.memdoc p, .memdoc dl, .memdoc ul {
-       margin: 6px 0;
-}
-
-.paramkey {
-       text-align: right;
-}
-
-.paramtype {
-       white-space: nowrap;
-}
-
-.paramname {
-       color: #853E0E;
-       white-space: nowrap;
-}
-.paramname em {
-       font-style: normal;
-}
-
-/* @end */
-
-.search     { color: #003399;
-              font-weight: bold;
-}
-
-form.search {
-              margin-bottom: 0px;
-              margin-top: 0px;
-}
-
-input.search { font-size: 75%;
-               color: #000080;
-               font-weight: normal;
-               background-color: #eeeeff;
-}
-
-td.tiny { 
-       font-size: 75%;
-}
-
-.highlight {
-        background-color:#E2E2FF;
-}
-
-/*---------- ide-eclipse Styles ---------*/
-.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
-       margin: 0px 0px;
-       padding: -30px -30px -30px -30px;
-       font-weight: normal;
-       font-style: normal;}
-.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
-/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
-.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
-
-.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
-.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
-
-/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
-.sh_styleFromXML{color:#800000;font-weight:bold;}
-/*-------------------------------------------------------*/
-
-/*-------- Snippet Base Styles ----------*/
-.snippet-wrap {position:relative;}
-*:first-child+html .snippet-wrap {display:inline-block;}
-* html .snippet-wrap {display:inline-block;}
-.snippet-reveal{text-decoration:underline;}
-.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
-.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
-*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
-* html .snippet-wrap .snippet-hide {bottom:1px;}
-.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
-.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
-.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
--moz-border-radius:0px;
--webkit-border-radius:0px;
-border-radius:0px;
-box-shadow: 1px 1px px #000;
--moz-box-shadow: 2px 2px 1px #000;
--webkit-box-shadow: 1px 1px 1px #000;}
-.snippet-wrap pre.snippet-textonly {padding:1em;}
-*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
-* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
-.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
-.snippet-wrap .snippet-num li{padding-left:2px;}
-.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
-.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
-.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
-.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
-.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
-.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
-*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
-.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
-.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
-.snippet-wrap li.box-mid {border-width:0 0px !important;}
-.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
-*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
-* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
-.snippet-wrap .snippet-no-num li.box {border:1px solid;}
-.snippet-wrap .snippet-no-num li .box-sp {display:none;}
-
-/* Layout fixing */
-.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
-.clfix {display: inline-block;}
-.clfix {display: block;}
-* html .clfix {height: 1%;} /* Hides from IE-mac */
-.clfix {zoom:1;} /*for IE 5.5-7*/
-
-.fl {float:left !important;}
-.fr {float:right !important;}
-.cl {clear:both;}
-.rel {position:relative;}
-.abs {position:absolute;}
-.ac {text-align:center !important;}
-.ar {text-align:right !important;}
-.al {text-align:left !important;}
-.at {vertical-align:top !important;}
-.am {vertical-align:middle !important;}
-.ab {vertical-align:bottom;}
-.hand {cursor:pointer;}
-.bgnone {background:none !important;}
-.brnone {border:none !important;}
-.b {font-weight:bold !important;}
-.n {font-weight:normal !important;}
-.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
-.mt5 {margin-top:5px !important;} 
-/* //Layout fixing */
-
-@media print { .hide, .show { display: none; }}
-
-div#profile {
-    position: relative;
-}
-#profile p {
-       text-align: right;
-}
-
-div#toc_border {
-    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;
-}
-
-#contents li {
-       padding-top: 3px;
-       margin-top: 5px;
-       /* overflow: auto; */
-}
-
-p {
-       /* overflow: auto; */
-}
-
-div.table {
-       /* overflow: auto; */
+@charset "utf-8";\r
+\r
+body {\r
+       background: white;\r
+       color: #1C1C1C;\r
+       margin-right: 20px;\r
+       margin-left: 20px;\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       font-family: Arial, Helvetica, sans-serif;\r
+}\r
+\r
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {\r
+       font-family: Arial, Verdana, Helvetica, sans-serif\r
+       }\r
+\r
+/*     Set default font to 9 pt        */\r
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {\r
+       font-size: 9pt;\r
+}\r
+       \r
+pre, code { \r
+       font-family: "Courier New", Courier, monospace;\r
+       border: 1px solid #719cc7;\r
+       margin: 6px 1.5px;\r
+       padding: 1px 1px 1px 1px;\r
+       font-weight: normal;\r
+       font-style: normal;\r
+}\r
+\r
+h1 {font-size: 24pt; color: #0E437D;}\r
+h2 {font-size: 18pt; color: #0E437D;}\r
+h3 {font-size: 14pt; color: #1C1C1C;}\r
+h4 {font-size: 12pt; color: #1C1C1C;}\r
+h5 {font-size: 10pt; color: #1C1C1C;}\r
+       \r
+h1, h2, h3, h4, h5 {\r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+\r
+caption, p.caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: left;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+ol  {\r
+       margin-bottom: 20px;\r
+}\r
+\r
+ul ul , ol ul, ul ol, ol ol{\r
+       margin-top: 10px;\r
+}\r
+\r
+ul li, ol li {\r
+       margin-bottom: 10px;\r
+}\r
+\r
+ol.tutorstep li {\r
+       border-top: 2px solid #719cc7;\r
+       list-style-position: inside;\r
+       font-weight: bold;\r
+       margin-top: 30px;\r
+       margin-left: -20px;\r
+       padding-top: 3px;\r
+       font-size: 12pt;\r
+}\r
+\r
+ol.tutorstep li p{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-top: 10px;\r
+}\r
+\r
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {\r
+       font-size: 9pt;\r
+       list-style-position: outside; \r
+       margin-left: 0px;\r
+       font-weight: normal;\r
+}\r
+\r
+ol.tutorstep ol li p, ol.tutorstep ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal; \r
+       margin-top: 5px;\r
+}\r
+\r
+ol li p, ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-bottom: 2px;\r
+       margin-top: 2px;\r
+}\r
+\r
+ol ol , ol.tutorstep ol{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       list-style-type: lower-alpha;\r
+       color: #1C1C1C; \r
+       border-style: none;\r
+       margin-top: 10px; \r
+}\r
+\r
+ol.tutorstep ul {\r
+       margin-top: 10px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {\r
+       border-style: none;\r
+       margin-top: 5px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ul {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       color: #1C1C1C;\r
+}\r
+\r
+\r
+/*     End of font face declarations   */\r
+\r
+/*     Set table borders and heading row background    */\r
+table {\r
+       border: 0px;\r
+       border-collapse: collapse;\r
+       width: 100%;\r
+       margin-top: 20px;\r
+       margin-bottom: 20px;\r
+       background: white;\r
+}\r
+\r
+th {\r
+       border-top: 2px solid #719cc7;\r
+       border-right: 1px solid #c6d9f1;\r
+       border-left: 1px solid #c6d9f1;\r
+       background-color: #f3f7fb;\r
+       padding: 4px;\r
+       color: #719cc7;\r
+       font-size: 9pt;\r
+       font-weight: bold;\r
+}      \r
+       \r
+td {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:top;\r
+       padding: 3px 20px 5px 20px;\r
+       }\r
+\r
+td.middle {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:middle;\r
+       padding: 3px 20px 5px 20px;\r
+       }       \r
+       \r
+/*     Notes stand out using a light top & bottom borders with yellow background       */\r
+table.note {\r
+       border-top: 2px solid #719cc7;\r
+       border-left: 0px;\r
+       border-right: 0px;\r
+       width: 100%;\r
+}\r
+\r
+tr.note {\r
+       text-align: left;\r
+}\r
+\r
+th.note {\r
+       text-align: left;\r
+       background-color: #ddd9c3;\r
+       background-image: note.gif;\r
+       border-top: 2px solid #719cc7;\r
+       border-bottom:1px solid #719cc7;\r
+       border-right: none;\r
+\r
+}\r
+\r
+td.note, p.note {\r
+       background-color: #eeece1;\r
+       color: #1C1C1C;\r
+       padding: 5px;\r
+       margin-top:12px;\r
+       margin-bottom:12px;\r
+       border: none;\r
+}\r
+       \r
+/*     Figure titles are centered and bolded   */\r
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {\r
+       text-align: center;\r
+       font-weight: bold;\r
+}\r
+\r
+/*     Red background and white text for things that need fixing before release        */\r
+.fix   {\r
+       background-color: red;\r
+       font-weight: bold;\r
+       color: white;\r
+       }\r
+\r
+/* Classes for creating collapsible content */\r
+#banner {\r
+       padding: 8px 4px 8px 4px;\r
+       /* top right bottom left */\r
+       border: 1px solid #7f7f7f;\r
+       width: 100%;\r
+       background-image: url("banner.png");\r
+       text-align: left;\r
+       font-weight: bold;\r
+       font-size: 9pt;\r
+       color: #ffffff;\r
+}\r
+\r
+#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}\r
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}\r
+#main {width: 75%; height: 90%;}\r
+#container {width:100%;}\r
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}\r
+body.no-toc #container #contents {right: 0;padding-right:30px;}\r
+body.no-toc #toc-navigation {width: auto;}\r
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}\r
+body.no-toc #profile {float: right;right: -32px;}\r
+body.no-toc #profile p {padding: 0; margin: 0;}\r
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}\r
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}\r
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }\r
+\r
+.devicespecs-util {float:right; margin-top:25px;}\r
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}\r
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}\r
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}\r
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}\r
+       .devicespecs-util ul.dutil li a:hover { color:#222; }\r
+       .devicespecs-util ul.dutil li a:active { color:#222; }\r
+\r
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}\r
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}\r
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}\r
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}\r
+       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}\r
+\r
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }\r
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }\r
+\r
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}\r
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}\r
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}\r
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}\r
+\r
+.static-cont {width:100%; margin-bottom:40px;}\r
+       \r
+.top {text-align: right;}\r
+.toc, ul.toc{\r
+       margin: 10px 0px 0px 0px;\r
+       padding-left: 13px;\r
+       list-style: disc;\r
+       font-size: 9pt;\r
+       line-height: 115%; \r
+       }\r
+       \r
+.toc-title {\r
+       font-size: 12pt;\r
+       color: #0E437D; \r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+       \r
+a.top {\r
+       display:block; \r
+       float: right; \r
+       position:fixed;\r
+       width: 28px; \r
+       height:89px; \r
+       bottom:50px;\r
+       z-index: 101;\r
+       right: 19%;\r
+       }\r
+\r
+a img {border: 0;}\r
+       \r
+/*     Footer includes space and a gray line above             */\r
+#footer {\r
+       position: fixed;\r
+       /* width: 100%; */\r
+    bottom: 0px;\r
+       text-align: center;\r
+       border-top: 1px solid #CCCCCC;\r
+       background-color: #FFFFFF;      \r
+       left: 21px;  right: 21px;\r
+}\r
+\r
+.footer {font-size: 8pt;}\r
+       \r
+caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: center;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+div.qindex, div.navpath, div.navtab{\r
+       background-color: #e8eef2;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       padding: 2px;\r
+}\r
+\r
+div.qindex, div.navpath {\r
+       width: 100%;\r
+       line-height: 140%;\r
+}\r
+\r
+div.navtab {\r
+       margin-right: 15px;\r
+}\r
+\r
+/* @group Link Styling */\r
+\r
+a:link {\r
+       color: #719cc7;\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+}\r
+\r
+a:hover { \r
+       color: #0e437d;\r
+}\r
+\r
+a:visited {\r
+       text-decoration: underline;\r
+       color: #719cc7;\r
+       font-weight: bold;\r
+}\r
+\r
+a.qindex {\r
+       font-weight: bold;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:hover {\r
+       text-decoration: underline;\r
+       color: #0e437d;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:visited {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       color: #719cc7;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindexHL {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+       border: 1px double #9295C2;\r
+}\r
+\r
+a.qindexHL:hover {\r
+       text-decoration: none;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+}\r
+\r
+dl.el { \r
+       margin-left: -1cm \r
+}\r
+\r
+.fragment {\r
+       font-family: monospace, fixed;\r
+       font-size: 105%;\r
+}\r
+\r
+pre.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 4px 6px;\r
+       margin: 4px 8px 4px 2px;\r
+}\r
+\r
+div.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 6px;\r
+}\r
+\r
+div.ah { \r
+       background-color: black; \r
+       font-weight: bold; \r
+       color: #ffffff; \r
+       margin-bottom: 3px; \r
+       margin-top: 3px \r
+}\r
+\r
+td.md { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+}\r
+\r
+td.mdname1 { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+}\r
+\r
+td.mdname { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+       width: 600px; \r
+}\r
+\r
+div.groupHeader {\r
+       margin-left: 16px;\r
+       margin-top: 12px;\r
+       margin-bottom: 6px;\r
+       font-weight: bold;\r
+}\r
+\r
+div.groupText { \r
+       margin-left: 16px; \r
+       font-style: italic; \r
+}\r
+\r
+td.indexkey {\r
+       background-color: #eeeeff;\r
+       font-weight: bold;\r
+       border: 1px solid #CCCCCC;\r
+       margin: 2px 0px 2px 0;\r
+       padding: 2px 10px;\r
+}\r
+\r
+td.indexvalue {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #CCCCCC;\r
+       padding: 2px 10px;\r
+       margin: 2px 0px;\r
+}\r
+\r
+tr.memlist {\r
+   background-color: #f0f0f0; \r
+}\r
+\r
+p.formulaDsp { \r
+       text-align: center; \r
+}\r
+\r
+img.formulaDsp { \r
+}\r
+\r
+img.formulaInl { \r
+       vertical-align: middle; \r
+}\r
+\r
+/* @group Code Colorization */\r
+\r
+span.keyword       { color: #008000 }\r
+span.keywordtype   { color: #604020 }\r
+span.keywordflow   { color: #e08000 }\r
+span.comment       { color: #800000 }\r
+span.preprocessor  { color: #806020 }\r
+span.stringliteral { color: #002080 }\r
+span.charliteral   { color: #008080 }\r
+span.vhdldigit     { color: #ff00ff }\r
+span.vhdlchar      { color: #000000 }\r
+span.vhdlkeyword   { color: #700070 }\r
+span.vhdllogic     { color: #ff0000 }\r
+\r
+.mdTable {\r
+       border: 1px solid #868686;\r
+       background-color: #F4F4FB;\r
+}\r
+\r
+.mdRow {\r
+       padding: 8px 10px;\r
+}\r
+\r
+/* @group Member Descriptions */\r
+\r
+.mdescLeft, .mdescRight,\r
+.memItemLeft, .memItemRight,\r
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {\r
+       background-color: #F4F4F4A;\r
+       border: none;\r
+       margin: 4px;\r
+       padding: 3px 8px 4px 8px;\r
+}\r
+\r
+.mdescLeft, .mdescRight {\r
+       padding: 0px 8px 4px 8px;\r
+       color: #555;\r
+}\r
+\r
+.memItemLeft, .memItemRight, .memTemplParams {\r
+       border-top: 1px solid #DBDBDB;\r
+}\r
+\r
+.memTemplParams {\r
+       color: #606060;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group Member Details */\r
+\r
+/* Styles for detailed member documentation */\r
+\r
+.memtemplate {\r
+       font-size: 80%;\r
+       color: #606060;\r
+       font-weight: normal;\r
+       margin-left: 3px;\r
+}\r
+\r
+.memnav {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       margin-right: 15px;\r
+       padding: 2px;\r
+}\r
+\r
+.memitem {\r
+       padding: 0;\r
+}\r
+\r
+.memname {\r
+       white-space: nowrap;\r
+       font-weight: bold;\r
+}\r
+\r
+.memproto, .memdoc {\r
+       border: 1px solid #9BBCDD;      \r
+}\r
+\r
+.memproto {\r
+       padding: 0;\r
+       background-color: #D5E2EF;\r
+       font-weight: bold;\r
+       -webkit-border-top-left-radius: 8px;\r
+       -webkit-border-top-right-radius: 8px;\r
+       -moz-border-radius-topleft: 8px;\r
+       -moz-border-radius-topright: 8px;\r
+}\r
+\r
+.memdoc {\r
+       padding: 2px 5px;\r
+       background-color: #eef3f5;\r
+       border-top-width: 0;\r
+       -webkit-border-bottom-left-radius: 8px;\r
+       -webkit-border-bottom-right-radius: 8px;\r
+       -moz-border-radius-bottomleft: 8px;\r
+       -moz-border-radius-bottomright: 8px;\r
+}\r
+\r
+.memdoc p, .memdoc dl, .memdoc ul {\r
+       margin: 6px 0;\r
+}\r
+\r
+.paramkey {\r
+       text-align: right;\r
+}\r
+\r
+.paramtype {\r
+       white-space: nowrap;\r
+}\r
+\r
+.paramname {\r
+       color: #853E0E;\r
+       white-space: nowrap;\r
+}\r
+.paramname em {\r
+       font-style: normal;\r
+}\r
+\r
+/* @end */\r
+\r
+.search     { color: #003399;\r
+              font-weight: bold;\r
+}\r
+\r
+form.search {\r
+              margin-bottom: 0px;\r
+              margin-top: 0px;\r
+}\r
+\r
+input.search { font-size: 75%;\r
+               color: #000080;\r
+               font-weight: normal;\r
+               background-color: #eeeeff;\r
+}\r
+\r
+td.tiny { \r
+       font-size: 75%;\r
+}\r
+\r
+.highlight {\r
+        background-color:#E2E2FF;\r
+}\r
+\r
+/*---------- ide-eclipse Styles ---------*/\r
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;\r
+       margin: 0px 0px;\r
+       padding: -30px -30px -30px -30px;\r
+       font-weight: normal;\r
+       font-style: normal;}\r
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}\r
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/\r
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}\r
+\r
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}\r
+\r
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/\r
+.sh_styleFromXML{color:#800000;font-weight:bold;}\r
+/*-------------------------------------------------------*/\r
+\r
+/*-------- Snippet Base Styles ----------*/\r
+.snippet-wrap {position:relative;}\r
+*:first-child+html .snippet-wrap {display:inline-block;}\r
+* html .snippet-wrap {display:inline-block;}\r
+.snippet-reveal{text-decoration:underline;}\r
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}\r
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}\r
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}\r
+* html .snippet-wrap .snippet-hide {bottom:1px;}\r
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}\r
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}\r
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;\r
+-moz-border-radius:0px;\r
+-webkit-border-radius:0px;\r
+border-radius:0px;\r
+box-shadow: 1px 1px px #000;\r
+-moz-box-shadow: 2px 2px 1px #000;\r
+-webkit-box-shadow: 1px 1px 1px #000;}\r
+.snippet-wrap pre.snippet-textonly {padding:1em;}\r
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}\r
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}\r
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}\r
+.snippet-wrap .snippet-num li{padding-left:2px;}\r
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}\r
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}\r
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}\r
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}\r
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}\r
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}\r
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}\r
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}\r
+.snippet-wrap li.box-mid {border-width:0 0px !important;}\r
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}\r
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}\r
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}\r
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}\r
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}\r
+\r
+/* Layout fixing */\r
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+.clfix {display: inline-block;}\r
+.clfix {display: block;}\r
+* html .clfix {height: 1%;} /* Hides from IE-mac */\r
+.clfix {zoom:1;} /*for IE 5.5-7*/\r
+\r
+.fl {float:left !important;}\r
+.fr {float:right !important;}\r
+.cl {clear:both;}\r
+.rel {position:relative;}\r
+.abs {position:absolute;}\r
+.ac {text-align:center !important;}\r
+.ar {text-align:right !important;}\r
+.al {text-align:left !important;}\r
+.at {vertical-align:top !important;}\r
+.am {vertical-align:middle !important;}\r
+.ab {vertical-align:bottom;}\r
+.hand {cursor:pointer;}\r
+.bgnone {background:none !important;}\r
+.brnone {border:none !important;}\r
+.b {font-weight:bold !important;}\r
+.n {font-weight:normal !important;}\r
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}\r
+.mt5 {margin-top:5px !important;} \r
+/* //Layout fixing */\r
+\r
+@media print { .hide, .show { display: none; }}\r
+\r
+div#profile {\r
+    position: relative;\r
+}\r
+#profile p {\r
+       text-align: right;\r
+}\r
+\r
+div#toc_border {\r
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;\r
+}\r
+\r
+#contents li {\r
+       padding-top: 3px;\r
+       margin-top: 5px;\r
+       /* overflow: auto; */\r
+}\r
+\r
+p {\r
+       /* overflow: auto; */\r
+}\r
+\r
+div.table {\r
+       /* overflow: auto; */\r
 }
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/images/accordion_menu.png b/org.tizen.tutorials/html/images/accordion_menu.png
deleted file mode 100644 (file)
index 9647530..0000000
Binary files a/org.tizen.tutorials/html/images/accordion_menu.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/dragdrop.png b/org.tizen.tutorials/html/images/dragdrop.png
deleted file mode 100644 (file)
index 3fb9ded..0000000
Binary files a/org.tizen.tutorials/html/images/dragdrop.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/grid_layout.png b/org.tizen.tutorials/html/images/grid_layout.png
deleted file mode 100644 (file)
index 04dfd42..0000000
Binary files a/org.tizen.tutorials/html/images/grid_layout.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/multi_node_selection.png b/org.tizen.tutorials/html/images/multi_node_selection.png
deleted file mode 100644 (file)
index 33654de..0000000
Binary files a/org.tizen.tutorials/html/images/multi_node_selection.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/notification_status_sd.png b/org.tizen.tutorials/html/images/notification_status_sd.png
deleted file mode 100644 (file)
index 22db54b..0000000
Binary files a/org.tizen.tutorials/html/images/notification_status_sd.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/opengl1.png b/org.tizen.tutorials/html/images/opengl1.png
deleted file mode 100644 (file)
index d4956d1..0000000
Binary files a/org.tizen.tutorials/html/images/opengl1.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/opengl2.png b/org.tizen.tutorials/html/images/opengl2.png
deleted file mode 100644 (file)
index b8aaa85..0000000
Binary files a/org.tizen.tutorials/html/images/opengl2.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/single_node_selection.png b/org.tizen.tutorials/html/images/single_node_selection.png
deleted file mode 100644 (file)
index 3dc9a26..0000000
Binary files a/org.tizen.tutorials/html/images/single_node_selection.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/index.htm b/org.tizen.tutorials/html/index.htm
index 180c9bd..37f1d4b 100644 (file)
--- a/org.tizen.tutorials/html/index.htm
+++ b/org.tizen.tutorials/html/index.htm
@@ -42,7 +42,6 @@
                                                <li><a href="web/tizen/communication/task_bluetoothchat_w.htm">Task: Bluetooth Chat</a></li>
                                        </ul>
                                </li>
-                               <li><a href="web/tizen/communication/bluetooth_le_tutorial_w.htm">Bluetooth Low Energy</a></li>
                                <li><a href="web/tizen/communication/nfc_tutorial_w.htm">NFC</a>
                                        <ul>
                                                <li><a href="web/tizen/communication/task_contactsexchanger_w.htm">Task: Contacts Exchanger</a></li>
@@ -133,32 +132,12 @@
                                <li><a href="web/tizen/social/contact_tutorial_w.htm">Contact</a></li>
                                <li><a href="web/tizen/social/data_sync_tutorial_w.htm">Data Synchronization</a></li>
                        </ul>
-               </li>
-                       
+               </li>           
                <li><a href="web/tizen/service/service_tutorial_w.htm">Service Application</a></li>             
        </ul>
        </li>
        <li><a href="web/w3c/tutorials_w3c_w.htm">W3C/HTML5/Supplementary Features</a>
        <ul>
-               <li><a href="web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</a>
-                       <ul>
-                               <li><a href="web/w3c/dom/animation_tutorial_w.htm">CSS Animations Module Level 3</a></li>
-                               <li><a href="web/w3c/dom/background_tutorial_w.htm">CSS Backgrounds and Borders Module Level 3</a></li>
-                               <li><a href="web/w3c/dom/basic_ui_tutorial_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></li>    
-                               <li><a href="web/w3c/dom/color_tutorial_w.htm">CSS Color Module Level 3</a></li>
-                               <li><a href="web/w3c/dom/flexible_tutorial_w.htm">CSS Flexible Box Layout Module</a></li>
-                               <li><a href="web/w3c/dom/transform_tutorial_w.htm">CSS Transforms</a></li>
-                               <li><a href="web/w3c/dom/transition_tutorial_w.htm">CSS Transitions Module Level 3</a></li>
-                               <li><a href="web/w3c/dom/font_tutorial_w.htm">CSS Fonts Module Level 3</a></li> 
-                               <li><a href="web/w3c/dom/text_module_tutorial_w.htm">CSS Text Module Level 3</a></li> 
-                               <li><a href="web/w3c/dom/woff_tutorial_w.htm">WOFF File Format 1.0</a></li>                             
-                               <li><a href="web/w3c/dom/html5forms_tutorial_w.htm">HTML5 Forms</a></li>                                
-                               <li><a href="web/w3c/dom/media_query_tutorial_w.htm">Media Queries</a></li>
-                               <li><a href="web/w3c/dom/selector_tutorial_w.htm">Selectors API Level 1 and Level 2</a></li>
-                               <li><a href="web/w3c/dom/session_history_tutorial_w.htm">HTML5 session history of browsing contexts</a></li>
-                               <li><a href="web/w3c/dom/multi_tutorial_w.htm">CSS Multi-column Layout Module</a></li>                          
-                       </ul>
-               </li>
                <li><a href="web/w3c/device/device_tutorials_w.htm">Device</a>
                        <ul>
                                <li><a href="web/w3c/device/battery_tutorial_w.htm">Battery Status</a></li>
@@ -240,18 +219,6 @@
                                <li><a href="web/w3c/location/geolocation_tutorial_w.htm">Geolocation API Specification</a></li>
                        </ul>   
                </li>
-               <li><a href="web/w3c/ui/ui_tutorials_w.htm">UI</a>
-                       <ul>
-                               <li><a href="web/w3c/ui/clipboard_tutorial_w.htm">Clipboard API and events</a></li>
-
-                               <li><a href="web/w3c/ui/drag_drop_tutorial_w.htm">HTML5 Drag and drop</a></li>
-                       </ul>
-               </li>                   
-               <li><a href="web/w3c/useful/useful_tutorials_w.htm">Useful Practices for W3C/HTML5 Features</a>
-                       <ul>
-                               <li><a href="web/w3c/useful/html_priority_tutorial_w.htm">HTML Priorities</a></li>
-                       </ul>   
-               </li>
                <li><a href="web/w3c/supplement/supplement_tutorials_w.htm">Supplementary Features</a>
                        <ul>
                                <li><a href="web/w3c/supplement/typedarray_tutorial_w.htm">Typed Array - Khronos</a></li>
@@ -289,7 +256,7 @@
                                <li><a href="native/app_framework/notification_tutorial_n.htm">Notification</a></li>
                                <li><a href="native/app_framework/package_tutorial_n.htm">Package Manager</a></li>
                                <li><a href="native/app_framework/service_app_tutorial_n.htm">Service Application</a></li>
-                               <li><a href="native/app_framework/widget_tutorial_n.htm">Widget</a></li>                                
+                               <li><a href="native/app_framework/widget_tutorial_n.htm">Widget Application</a></li>                            
                                <li><a href="native/app_framework/shortcut_tutorial_n.htm">Shortcut</a></li>
                                <li><a href="native/app_framework/watch_tutorial_n.htm">Watch Application</a></li>
                        </ul>
@@ -406,53 +373,6 @@
                </li>
                <li><a href="native/ui/ui_tutorials_n.htm">UI Framework</a>
                        <ul>
-                               <li><a href="native/ui/efl_tutorial_n.htm">EFL</a></li>
-                               <li><a href="native/ui/evas_tutorial_n.htm">Evas</a></li>       
-                               <li><a href="native/ui/events_effects_tutorials_n.htm">Event and Effect</a>
-                                       <ul>
-                                               <li><a href="native/ui/animation_event_types_tutorials_n.htm">Animation and Effect Types</a>
-                                                       <ul>
-                                                               <li><a href="native/ui/ecore_effects_tutorial_n.htm">Ecore Animator</a></li>
-                                                               <li><a href="native/ui/edje_effects_tutorial_n.htm">Edje Animation</a></li>
-                                                               <li><a href="native/ui/elm_transit_tutorial_n.htm">Elementary Animations</a>
-                                                                       <ul>
-                                                                               <li><a href="native/ui/transit_effect_tutorial_n.htm">Transit</a></li>
-                                                                       </ul>
-                                                               </li>
-                                                       </ul>
-                                               </li>
-                                               <li><a href="native/ui/gesture_detector_tutorial_n.htm">Gesture Detector</a></li>
-                                               <li><a href="native/ui/multipoint_touch_tutorial_n.htm">Multi-point Touch</a></li>                                      
-                                       </ul>
-                               </li>
-                               <li><a href="native/ui/ui_component_tutorials_n.htm">UI Components</a>
-                                       <ul>
-                                               <li><a href="native/ui/ui_component_tutorials_mn.htm">Mobile Native</a>
-                                                       <ul>
-                                                               <li><a href="native/ui/basic_tutorial_mn.htm">Basic</a></li>
-                                                               <li><a href="native/ui/form_tutorial_mn.htm">Form</a></li>
-                                                               <li><a href="native/ui/naviframe_tutorial_mn.htm">Naviframe</a></li>
-                                                               <li><a href="native/ui/genlist_tutorial_mn.htm">Genlist</a></li>
-                                                               <li><a href="native/ui/menu_tutorial_mn.htm">Menu</a></li>
-                                                               <li><a href="native/ui/panes_tutorial_mn.htm">Panes</a></li>
-                                                               <li><a href="native/ui/ui_layout_tutorial_mn.htm">UI Layout</a></li>
-                                                       </ul>
-                                               </li>
-                                               <li><a href="native/ui/ui_component_tutorials_wn.htm">Wearable Native</a>
-                                                       <ul>                       
-                                                          <li><a href="native/ui/button_tutorial_wn.htm">Button</a></li>
-                                                          <li><a href="native/ui/datetime_tutorial_wn.htm">Datetime</a></li>
-                                                          <li><a href="native/ui/genlist_tutorial_wn.htm">Genlist</a></li>
-                                                          <li><a href="native/ui/popup_tutorial_wn.htm">Popup</a></li> 
-                                                          <li><a href="native/ui/circle_components_tutorial_wn.htm">Circle Components</a></li>
-                                                       </ul>
-                                               </li>
-                                       </ul>
-                               </li>
-                               <li><a href="native/ui/efl_extension_tutorial_n.htm">Efl Extension</a></li>
-                               <li><a href="native/ui/font_settings_tutorial_n.htm">Font Setting</a></li>
-                               <li><a href="native/ui/efl_util_tutorial_n.htm">EFL UTIL</a></li>
-                               <li><a href="native/ui/efl_optimization_tutorial_n.htm">EFL Optimization</a></li>
                                <li><a href="native/ui/eom_tutorial_n.htm">External Output Manager</a></li>
                        </ul>
                </li>
diff --git a/org.tizen.tutorials/html/native/account/account_tutorials_n.htm b/org.tizen.tutorials/html/native/account/account_tutorials_n.htm
index 1e76055..1c62475 100644 (file)
--- a/org.tizen.tutorials/html/native/account/account_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/account/account_tutorials_n.htm
@@ -1,70 +1,70 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Account: Managing Account Data</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/account/account_guide_n.htm">Account Guides</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Wearable Native</a></li>                  
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Account: Managing Account Data</h1>
-
- <p>The account tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
-   <ul>
-       <li><a href="oauth2_tutorial_n.htm">oauth2: Using the Authorization Framework</a>
-    <p>Demonstrates how you can obtain access tokens using oauth2 authorization.</p></li>              
-  </ul>
- 
- <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>  
-  <ul>
-       <li><a href="sync_manager_tutorial_n.htm">Sync Manager: Scheduling for Application Data Syncing</a>
-       <p>Demonstrates how you can receive notifications about syncing operations between a server and the device.</p></li>
-  </ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Account: Managing Account Data</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/account/account_guide_n.htm">Account Guides</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Wearable Native</a></li>                  \r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Account: Managing Account Data</h1>\r
+\r
+ <p>The account tutorials demonstrate how to use the following features in creating Tizen native applications:</p>\r
+   <ul>\r
+       <li><a href="oauth2_tutorial_n.htm">oauth2: Using the Authorization Framework</a>\r
+    <p>Demonstrates how you can obtain access tokens using oauth2 authorization.</p></li>              \r
+  </ul>\r
+ \r
+ <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>  \r
+  <ul>\r
+       <li><a href="sync_manager_tutorial_n.htm">Sync Manager: Scheduling for Application Data Syncing</a>\r
+       <p>Demonstrates how you can receive notifications about syncing operations between a server and the device.</p></li>\r
+  </ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm b/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
index 51a33cf..45040d9 100644 (file)
--- a/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
@@ -46,13 +46,13 @@
    <li><a href="notification_tutorial_n.htm">Notification: Notifying the User of Application Events</a> <p>Demonstrates how you can display notifications on the application screen.</p></li>
    <li><a href="package_tutorial_n.htm">Package Manager: Installing and Uninstalling Applications</a> <p>Demonstrates how you can manage and retrieve package information.</p></li>
    <li><a href="service_app_tutorial_n.htm">Service Application: Creating Background Applications</a> <p>Demonstrates how you can create and manage native service applications.</p></li>
-   <li><a href="widget_tutorial_n.htm">Widget: Creating Widget Applications</a> <p>Demonstrates how you can create and manage widget applications.</p></li>    
+   <li><a href="widget_tutorial_n.htm">Widget Application: Creating Widget Applications</a> <p>Demonstrates how you can create and manage widget applications.</p></li>    
   </ul> 
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
   <ul>   
    <li><a href="shortcut_tutorial_n.htm">Shortcut: Adding a Shortcut to Home</a> <p>Demonstrates how you can create and modify shortcuts on the home screen.</p></li>
   </ul>        
-<p>The following tutorials apply in <span style="color: red">wearable applications only</span>:</p>
+<p>The following tutorials apply in <strong>wearable applications only</strong>:</p>
   <ul>   
    <li><a href="watch_tutorial_n.htm">Watch Application: Creating a Watch Application</a> <p>Demonstrates how you can create a watch application, set the time, and use the ambient mode.</p></li>
   </ul> 
diff --git a/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm
old mode 100755 (executable)
new mode 100644 (file)
index 7f96c38..fd5d066
--- a/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm
@@ -29,7 +29,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/app/package_n.htm">Package Guide</a></li>
+                       <li><a href="../../../../org.tizen.guides/html/native/app/package_n.htm">Package Manager Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Wearable Native</a></li>
                </ul>
@@ -41,7 +41,7 @@
        <h1>Package Manager: Installing and Uninstalling Applications</h1>
 
   
-<p>This tutorial demonstrates how you can manage installed packages with its information.</p>
+<p>This tutorial demonstrates how you can manage installed packages and their information.</p> 
 
   <h2 id="warmup" name="warmup">Warm-up</h2> 
   <p>Become familiar with the Package Manager API basics by learning about:</p> 
@@ -64,11 +64,14 @@
 <pre class="prettyprint">
 #include &lt;package_manager.h&gt;
 </pre></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span> privilege is required to get package information.</p>
-<p>Add this privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p></li></ol></li>
-<li>Prepare callback function <span style="font-family: Courier New,Courier,monospace">package_info_cb</span> which will be invoked for each package information retrieved</li>
+
+<li><p>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span> privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file to get package information.</p>
+</li></ol></li>
+<li>Prepare the <span style="font-family: Courier New,Courier,monospace">package_info_cb()</span> callback function, which is invoked for each retrieved package information:
+
 <pre class="prettyprint">
-void package_info_cb(package_info_h package_info, void *user_data)
+void 
+package_info_cb(package_info_h package_info, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;int ret;
 
@@ -108,26 +111,12 @@ void package_info_cb(package_info_h package_info, void *user_data)
 &nbsp;&nbsp;&nbsp;free(version);
 &nbsp;&nbsp;&nbsp;free(type);
 }
-</pre>
-<li>Use the
-   <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info()</span> function: This function will retrieve all package information and invoke callback for each information retrieved
-
-<pre class="prettyprint">
-package_manager_foreach_package_info(package_manager_package_info_cb callback, void *user_data)
-</pre>
-
-<p>The function takes the following parameters:</p>
-<ul>
-  <li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: Callback function to be invoked for each package information retrieved</li>
-  <li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: User data to be passed to the callback function </li>
-  <li>[out] 0 on success, otherwise a negative error value</li>
-</ul></li>
-
-<li><p> Call <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info</span> with passing callback and userdata </p>
+</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">package_manager_foreach_package_info()</span> function to retrieve all package information and invoke the callback for each retrieved information.  
 
+<p>The function takes as parameters the callback function, and user data to be passed to the callback function. The function returns 0 on success, otherwise a negative error value.</p>
 
 <pre class="prettyprint">
-<<<<<<< Updated upstream
 ret = package_manager_foreach_package_info(package_info_cb, NULL);
 if (ret != PACKAGE_MANAGER_ERROR_NONE) 
 {
@@ -145,21 +134,25 @@ if (ret != PACKAGE_MANAGER_ERROR_NONE)
 <pre class="prettyprint">
 #include &lt;package_manager.h&gt;
 </pre></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span>  privilege is required for this Package Manager API.</p>
-<p>Add the privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p></li></ol></li>
-<li>Use the 
-        <span style="font-family: Courier New,Courier,monospace">package_manager_get_package_info()</span> function:
-<pre class="prettyprint">
-int package_manager_get_package_info(const char *package_id, package_info_h *package_info)
-</pre>
-<p>The function takes the following parameters:</p>
-<ul>
-  <li>[in] <span style="font-family: Courier New,Courier,monospace">package_id</span>: ID of the package</li>
-  <li>[in] <span style="font-family: Courier New,Courier,monospace">package_info</span>: Package information for the given package ID.</li>
-  <li>[out] 0 on success, otherwise a negative error value</li>
-</ul></li>
-
-<li>After getting <span style="font-family: Courier New,Courier,monospace">package_info_h</span> handle, use package_info_get_ functions to retrieve specific information
+
+<li><p>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span> privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file to get package information.</p>
+</li></ol></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">package_manager_get_package_info()</span> function.
+<p>The function takes as parameters the package ID and the package information handle for the specific package ID. The function returns 0 on success, otherwise a negative error value.</p>
+ 
+<p>After getting the <span style="font-family: Courier New,Courier,monospace">package_info_h</span> handle, use any of the following <span style="font-family: Courier New,Courier,monospace">package_info_get_*()</span> functions to retrieve the specific information:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">package_info_get_label()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_get_icon()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_get_version()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_get_type()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_get_installed_storage()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_get_root_path()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_is_system_package()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_is_removable_package()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_is_preload_package()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">package_info_is_accessible()</span></li>
+</ul>
+
 <pre class="prettyprint">
 char *version = NULL;
 char *label = NULL;
@@ -167,40 +160,27 @@ char *type = NULL;
 package_info_h package_info = NULL;
 package_manager_get_package_info(&quot;PACKAGE-ID&quot;, &amp;package_info);
 
-package_info_get_version(package_info, &version);
-package_info_get_label(package_info, &label);
-package_info_get_type(package_info, &type);
+package_info_get_version(package_info, &amp;version);
+package_info_get_label(package_info, &amp;label);
+package_info_get_type(package_info, &amp;type);
 
-dlog_print(DLOG_INFO, TAG, "label \t= [%s]\n", label);
-dlog_print(DLOG_INFO, TAG, "icon \t= [%s]\n", icon);
-dlog_print(DLOG_INFO, TAG, "version \t= [%s]\n", version);
+dlog_print(DLOG_INFO, TAG, &quot;label \t= [%s]\n&quot;, label);
+dlog_print(DLOG_INFO, TAG, &quot;icon \t= [%s]\n&quot;, icon);
+dlog_print(DLOG_INFO, TAG, &quot;version \t= [%s]\n&quot;, version);
 
 free(label);
 free(icon);
 free(version);
 
 // Use package information
-package_info_destroy(package_info);
 </pre>
-
-</li>
-<li>You can get package information with functions listed below:
-       <pre>
-package_info_get_label(package_info_h package_info, char **label)
-package_info_get_icon(package_info_h package_info, char **path)
-package_info_get_version(package_info_h package_info, char **version)
-package_info_get_type(package_info_h package_info, char **type)
-package_info_get_installed_storage(package_info_h package_info, package_info_installed_storage_type_e *storage)
-package_info_get_root_path(package_info_h package_info, char **path)
-package_info_is_system_package(package_info_h package_info, bool *system)
-package_info_is_removable_package(package_info_h package_info, bool *removable)
-package_info_is_preload_package(package_info_h package_info, bool *preload)
-package_info_is_accessible(package_info_h package_info, bool *accessible)</pre>
 </li>
-<li>Package Manager handle shoule be released with <span style="font-family: Courier New,Courier,monospace">package_info_destroy</span> function.</li>
+<li>When no longer needed, release the package information handle with the <span style="font-family: Courier New,Courier,monospace">package_info_destroy()</span> function:
+<pre class="prettyprint">
+package_info_destroy(package_info);
+</pre></li>
 </ol>
 
-
  <h2 id="listen" name="listen">Listening to Package Events</h2>
 
 <p>To detect package events, such as installation, uninstallation, and updates:</p>
@@ -210,54 +190,45 @@ package_info_is_accessible(package_info_h package_info, bool *accessible)</pre>
 <pre class="prettyprint">
 #include &lt;package_manager.h&gt;
 </pre></li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span> privilege is required for this Package Manager API.</p>
-<p>Add privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p></li></ol></li>
+
+<li><p>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span> privilege to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file to get package information.</p>
+</li></ol></li>
 <li>
-<p>Create the package manager (<span style="font-family: Courier New,Courier,monospace">package_manager_h</span>) using the <span style="font-family: Courier New,Courier,monospace">package_manager_create()</span> function:</p>
+<p>Create the package manager (<span style="font-family: Courier New,Courier,monospace">package_manager_h</span>) using the <span style="font-family: Courier New,Courier,monospace">package_manager_create()</span> function.</p>
+<p>The function takes the package manager handle (newly created on success) as a parameter. The function returns 0 on success, otherwise a negative error value.</p>
 
 <pre class="prettyprint">
-package_manager_create(package_manager_h * manager)</pre>
-<pre class="prettyprint">package_manager_h manager;
-package_manager_create(&amp;manager);</pre>
+package_manager_create(package_manager_h *manager)
+</pre>
+
+</li>
+
+<li>Set the package event which you want to listen to by invoking the <span style="font-family: Courier New,Courier,monospace">package_manager_set_event_status()</span> function.
 
+<p>The function takes as parameters the package manager handle and the status of the package. The function returns 0 on success, otherwise a negative error value.</p>
 
-<p>The function takes the following parameters:</p>
-<ul>
-  <li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle that is newly created on success </li>
-  <li>[out] 0 on success, otherwise a negative error value</li>  
+<p>The package status can be one of the following event types you want to listen for:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">PACKAGE_MANAGER_STATUS_TYPE_ALL</span>: All statuses</li>
+<li><span style="font-family: Courier New,Courier,monospace">PACKAGE_MANAGER_STATUS_TYPE_INSTALL</span>:  Install package status</li>
+<li><span style="font-family: Courier New,Courier,monospace">PACKAGE_MANAGER_STATUS_TYPE_UNINSTALL</span>: Uninstall package status</li>
+<li><span style="font-family: Courier New,Courier,monospace">PACKAGE_MANAGER_STATUS_TYPE_UPGRADE</span>: Upgrade package status</li>
+<li><span style="font-family: Courier New,Courier,monospace">PACKAGE_MANAGER_STATUS_TYPE_MOVE</span>: Move package status</li>
+<li><span style="font-family: Courier New,Courier,monospace">PACKAGE_MANAGER_STATUS_TYPE_CLEAR_DATA</span>: Clear data status</li>
+<li><span style="font-family: Courier New,Courier,monospace">PACKAGE_MANAGER_STATUS_TYPE_INSTALL_PROGRESS</span>: Install progress status</li>
+<li><span style="font-family: Courier New,Courier,monospace">PACKAGE_MANAGER_STATUS_TYPE_GET_SIZE</span>: Get size status</li>
 </ul>
-</li>
 
-<li>
-       
-<p>Set the package event which you want to listen by invoking package_manager_set_event_status:</p>
-<pre class="prettyprint">package_manager_set_event_status(package_manager_h manager, int status_type)</pre>
 <pre class="prettyprint">package_manager_set_event_status(manager, PACKAGE_MANAGER_STATUS_TYPE_ALL);</pre>
 
-<p>The function takes the following parameters:</p>
-<ul>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle</li>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">status_type</span>: Status of the package<br>
-       There are several event types want to listen
-       <pre class="prettyprint">
-PACKAGE_MANAGER_STATUS_TYPE_ALL : All status
-PACKAGE_MANAGER_STATUS_TYPE_INSTALL :  Install package status
-PACKAGE_MANAGER_STATUS_TYPE_UNINSTALL : Uninstall package status
-PACKAGE_MANAGER_STATUS_TYPE_UPGRADE : Upgrade package status
-PACKAGE_MANAGER_STATUS_TYPE_MOVE : Move package status
-PACKAGE_MANAGER_STATUS_TYPE_CLEAR_DATA : Clear data status
-PACKAGE_MANAGER_STATUS_TYPE_INSTALL_PROGRESS : Install progress status
-PACKAGE_MANAGER_STATUS_TYPE_GET_SIZE : Get size status
-</pre></li>
- <li>[out] 0 on success, otherwise a negative error value</li>
-</ul>
 </li>
 
-<li>
-       <p>Implement the package manager event callback:</p>
+<li>Implement the package manager event callback:
 
        
-<pre class="prettyprint">void event_cb(const char *type, const char *package, package_manager_event_type_e event_type, package_manager_event_state_e event_state, int progress, package_manager_error_e error, void *user_data)
+<pre class="prettyprint">void 
+event_cb(const char *type, const char *package, package_manager_event_type_e event_type, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package_manager_event_state_e event_state, int progress, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package_manager_error_e error, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (event_state == PACKAGE_MANAGER_EVENT_STATE_STARTED)
 &nbsp;&nbsp;&nbsp;{
@@ -279,27 +250,14 @@ PACKAGE_MANAGER_STATUS_TYPE_GET_SIZE : Get size status
 
 </li>
 
-<li>
-       <p>Register a callback function to be invoked when the event you registered has happened:</p>
-<pre class="prettyprint">
-int package_manager_set_event_cb(package_manager_h manager, package_manager_event_cb callback, void *user_data)</pre>
+<li>Register a callback function to be invoked when the event you registered has happened.
+<p>The function takes as parameters the package manager handle, the callback function, and the user data to be passed to the callback function. The function returns 0 on success, otherwise a negative error value.</p>
 <pre class="prettyprint">
 package_manager_set_event_cb(manager, event_cb, NULL);
 </pre>
-
-<p>The function takes the following parameters:</p>
-<ul>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle</li>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: Callback function to be registered</li>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: User data to be passed to the callback function</li>
- <li>[out] 0 on success, otherwise a negative error value</li>
-</ul>
 </li>
 
-<li>
-       <p>Free the package manager:</p>
-
-       
+<li>Free the package manager:
 <pre class="prettyprint">package_manager_destroy(package_manager_h manager);</pre>
 
 </li>
diff --git a/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm
index 2209aae..1d2ed1f 100644 (file)
--- a/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm
@@ -11,7 +11,7 @@
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Widget: Creating Widget Applications</title>
+       <title>Widget Application: Creating Widget Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,23 +31,23 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/app/widget_n.htm">Widget Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.guides/html/native/app/widget_n.htm">Widget Application Guide</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application API for Wearable Native</a></li>
                </ul>
        </div></div>
 </div> 
 
 <div id="container"><div id="contents"><div class="content">
 
-       <h1>Widget: Creating Widget Applications</h1>
+       <h1>Widget Application: Creating Widget Applications</h1>
 
   
 <p>This tutorial demonstrates how you can create a widget application.</p>
 
   
 <h2>Warm-up</h2>
-<p>Become familiar with the Watch Application API basics by learning about:</p>
+<p>Become familiar with the Widget Application API basics by learning about:</p>
        <ul>
                 <li><a href="#init">Initializing the Widget Application</a>
                 <p>Initialize a widget application for use.</p></li>
@@ -66,7 +66,7 @@
  
 <p>To initialize the widget application:</p>
 <ol>
-<li>To use the functions and data types of the Widget API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__FRAMEWORK.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;widget_app.h&gt;</span> header file in your application:
+<li>To use the functions and data types of the Widget Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__APP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;widget_app.h&gt;</span> header file in your application:
 <pre class="prettyprint">
 #include &lt;widget_app.h&gt;
 </pre></li>
@@ -125,7 +125,7 @@ widget_class_h widget_app_create (void *user_data)
 &nbsp;&nbsp;&nbsp;widget_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_REGION_FORMAT_CHANGED, widget_app_region_changed, NULL);
 
-&nbsp;&nbsp;&nbsp;return widget_app_class_create(obj_callback);
+&nbsp;&nbsp;&nbsp;return widget_app_class_create(obj_callback, user_data);
 }
 </pre>
 <p>When the system-related callback are no longer needed, remove them with the <span style="font-family: Courier New,Courier,monospace">widget_app_remove_event_handler()</span> function.</p>
@@ -182,7 +182,7 @@ widget_app_terminate(void *user_data)
 <li>This callback is triggered when the widget instance is created.
 <p>Initialize resources for this widget instance and <a href="#get_window">draw the UI</a>. If bundle content is not NULL, restore the previous status.</p>
 <pre class="prettyprint">
-int widget_instance_create(widget_context_h context, bundle *content, int w, int h)
+int widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = (widget_instance_data_s*) malloc(sizeof(widget_instance_data_s));
 &nbsp;&nbsp;&nbsp;int ret;
@@ -202,7 +202,7 @@ int widget_instance_create(widget_context_h context, bundle *content, int w, int
 <li>This callback is triggered when the widget instance is destroyed. 
 <p>Release all widget resources. If the <span style="font-family: Courier New,Courier,monospace">reason</span> for the termination is not <span style="font-family: Courier New,Courier,monospace">WIDGET_APP_DESTROY_TYPE_DEFAULT</span>, store the current status with the incoming bundle.</p>
 <pre class="prettyprint">
-int widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason, bundle *content)
+int widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason, bundle *content, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;if (reason != WIDGET_APP_DESTROY_TYPE_DEFAULT) 
 &nbsp;&nbsp;&nbsp;{
@@ -218,7 +218,7 @@ int widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e
 <li>This callback is triggered when the widget instance is paused.
 <p>Take the necessary actions since the widget instance becomes invisible. The framework can destroy a paused widget instance.</p>
 <pre class="prettyprint">
-int widget_instance_pause(widget_context_h context)
+int widget_instance_pause(widget_context_h context, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 }
@@ -227,7 +227,7 @@ int widget_instance_pause(widget_context_h context)
 <li>This callback is triggered when the widget instance is resumed.
 <p>Take the necessary actions since the widget instance becomes visible.</p>
 <pre class="prettyprint">
-int widget_instance_resume(widget_context_h context)
+int widget_instance_resume(widget_context_h context, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 }
@@ -236,7 +236,7 @@ int widget_instance_resume(widget_context_h context)
 <li>This callback is triggered before the widget instance is resized.
 <p>Take the necessary actions to accommodate the new size.</p>
 <pre class="prettyprint">
-int widget_instance_resize(widget_context_h context, int w, int h)
+int widget_instance_resize(widget_context_h context, int w, int h, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 } 
@@ -245,7 +245,7 @@ int widget_instance_resize(widget_context_h context, int w, int h)
 <li>This callback is triggered when a widget update event is received.
 <p>Take the necessary actions for the widget update. If the <span style="font-family: Courier New,Courier,monospace">force</span> parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, the widget can be updated even in the pause state.</p>
 <pre class="prettyprint">
-int widget_instance_update(widget_context_h context, bundle *content, int force)
+int widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
 }
@@ -269,7 +269,7 @@ widget_class_h widget_app_create (void *user_data)
 
 &nbsp;&nbsp;&nbsp;// Register system-related callbacks
 
-&nbsp;&nbsp;&nbsp;return widget_app_class_create(obj_callback);
+&nbsp;&nbsp;&nbsp;return widget_app_class_create(obj_callback, user_data);
 }
 </pre>
 </li>
@@ -290,8 +290,7 @@ typedef struct widget_instance_data
 widget_instance_data_s;
 
 static int
-widget_instance_create(widget_context_h context, bundle *content, 
-int w, int h)
+widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = (widget_instance_data_s*) malloc(sizeof(widget_instance_data_s));
 
@@ -346,21 +345,21 @@ typedef struct
 } user_defined_s;
 
 
-int widget_instance_create(widget_context_h context, bundle *content, int w, int h)
+int widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;user_defined_s *uds = (user_defined_s*)malloc(sizeof(user_defined_s));
 &nbsp;&nbsp;&nbsp;uds-&gt;val1 = 0;
 &nbsp;&nbsp;&nbsp;widget_app_context_set_tag(context, uds);
 }
 
-int widget_instance_destroy(widget_context_h context, widget_destroy_type_e reason, bundle *content)
+int widget_instance_destroy(widget_context_h context, widget_destroy_type_e reason, bundle *content, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;user_defined_s *uds = NULL;
 &nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;uds);
 &nbsp;&nbsp;&nbsp;free(uds);
 }
 
-int widget_instance_update(widget_context_h context, bundle *content, int force)
+int widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;user_defined_s *uds = NULL;
 &nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;uds);
@@ -371,7 +370,7 @@ int widget_instance_update(widget_context_h context, bundle *content, int force)
 
 <li>Get the widget instance ID:
 <pre class="prettyprint">
-int widget_instance_update(widget_context_h context, bundle *content, int force)
+int widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
 {
 &nbsp;&nbsp;&nbsp;const char *inst_id = NULL;
 &nbsp;&nbsp;&nbsp;inst_id = widget_app_get_id(context);
diff --git a/org.tizen.tutorials/html/native/content/content_tutorials_n.htm b/org.tizen.tutorials/html/native/content/content_tutorials_n.htm
index 79556b5..1a42bcb 100644 (file)
--- a/org.tizen.tutorials/html/native/content/content_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/content/content_tutorials_n.htm
@@ -40,7 +40,7 @@
        <p>Demonstrates how you can manage media content.</p></li>
        <li><a href="mime_type_tutorial_n.htm">MIME Type: Mapping MIME Types to and from File Extensions</a> <p>Demonstrates how you can map MIME types to file extensions.</p></li>
   </ul>
-  <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+  <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
   <ul>
        <li><a href="download_tutorial_n.htm">Download: Downloading Content from the Internet</a> <p>Demonstrates how you can download content asynchronously from a given URL into the device storage.</p></li>
   </ul>
diff --git a/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm b/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm
index d3ff254..6ddb43f 100644 (file)
--- a/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm
@@ -1,114 +1,114 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Activity Recognition: Detecting Device Activities</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#activity">Detecting Activities</a></li>
-               </ul>       
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/context/activity_recognition_n.htm">Activity Recognition Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Activity Recognition: Detecting Device Activities</h1>
-
-
-  <p>This tutorial demonstrates how you can manage and monitor various system information and attached devices.</p> 
-
-  <h2>Warm-up</h2>
-    <p>Become familiar with the Activity Recognition API basics by learning about:</p> 
-               <ul>
-                       <li><a href="#activity">Detecting Activities</a>
-                       <p>Detect user activities.</p>
-                       </li>
-               </ul>
-
-<h2 id="activity" name="activity">Detecting Activities</h2>
-
-<p>To set and unset callback functions for the activity monitor and retrieve details from the received activity data:</p>
-<ol><li><p>To use the activity recognition-related features of the Activity Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;activity_recognition.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;activity_recognition.h&gt;
-</pre></li>
-
-<li>Create a handle for activity monitoring using the <span style="font-family: Courier New,Courier,monospace;">activity_create()</span> function:
-<pre class="prettyprint">
-activity_h handle;
-activity_create(&amp;handle);
-</pre>
-</li>
-
-<li>To subscribe to notifications about specific activity state changes, invoke the <span style="font-family: Courier New,Courier,monospace;">activity_start_recognition()</span> function to register a callback function. 
-<p>When specific activity data is received, the <span style="font-family: Courier New,Courier,monospace;">example_activity_callback</span> callback is invoked.</p>
-
-<p>The following example starts the activity monitor to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> activity is detected. Any of the <span style="font-family: Courier New,Courier,monospace;">activity_type_e</span> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">wearable</a> applications) can be used in place of the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> value.</p>
-<pre class="prettyprint">
-activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NULL);
-</pre>
-</li>
-
-<li>When the <span style="font-family: Courier New,Courier,monospace;">example_activity_callback()</span> callback is invoked, the current activity is delivered as a parameter, and you can extract the accuracy of the recognized activity:
-<pre class="prettyprint">void example_activity_callback(activity_type_e activity, const activity_data_h data, double timestamp, activity_error_e error, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;int result;
-
-&nbsp;&nbsp;&nbsp;activity_accuracy_e accuracy;
-&nbsp;&nbsp;&nbsp;result = activity_get_accuracy(data, &amp;accuracy);
-
-&nbsp;&nbsp;&nbsp;if (result != ACTIVITY_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;}
-}</pre></li>
-<li>When activity monitoring is no longer used, unset the callback function and destroy the handle: 
-<pre class="prettyprint">activity_stop_recognition(handle);
-activity_release(handle);</pre></li></ol>  
-               
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Activity Recognition: Detecting Device Activities</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#activity">Detecting Activities</a></li>\r
+               </ul>       \r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/context/activity_recognition_n.htm">Activity Recognition Guide</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Activity Recognition: Detecting Device Activities</h1>\r
+\r
+\r
+  <p>This tutorial demonstrates how you can manage and monitor various system information and attached devices.</p> \r
+\r
+  <h2>Warm-up</h2>\r
+    <p>Become familiar with the Activity Recognition API basics by learning about:</p> \r
+               <ul>\r
+                       <li><a href="#activity">Detecting Activities</a>\r
+                       <p>Detect user activities.</p>\r
+                       </li>\r
+               </ul>\r
+\r
+<h2 id="activity" name="activity">Detecting Activities</h2>\r
+\r
+<p>To set and unset callback functions for the activity monitor and retrieve details from the received activity data:</p>\r
+<ol><li><p>To use the activity recognition-related features of the Activity Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;activity_recognition.h&gt;</span> header file in your application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;activity_recognition.h&gt;\r
+</pre></li>\r
+\r
+<li>Create a handle for activity monitoring using the <span style="font-family: Courier New,Courier,monospace;">activity_create()</span> function:\r
+<pre class="prettyprint">\r
+activity_h handle;\r
+activity_create(&amp;handle);\r
+</pre>\r
+</li>\r
+\r
+<li>To subscribe to notifications about specific activity state changes, invoke the <span style="font-family: Courier New,Courier,monospace;">activity_start_recognition()</span> function to register a callback function. \r
+<p>When specific activity data is received, the <span style="font-family: Courier New,Courier,monospace;">example_activity_callback</span> callback is invoked.</p>\r
+\r
+<p>The following example starts the activity monitor to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> activity is detected. Any of the <span style="font-family: Courier New,Courier,monospace;">activity_type_e</span> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">wearable</a> applications) can be used in place of the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> value.</p>\r
+<pre class="prettyprint">\r
+activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NULL);\r
+</pre>\r
+</li>\r
+\r
+<li>When the <span style="font-family: Courier New,Courier,monospace;">example_activity_callback()</span> callback is invoked, the current activity is delivered as a parameter, and you can extract the accuracy of the recognized activity:\r
+<pre class="prettyprint">void example_activity_callback(activity_type_e activity, const activity_data_h data, double timestamp, activity_error_e error, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;int result;\r
+\r
+&nbsp;&nbsp;&nbsp;activity_accuracy_e accuracy;\r
+&nbsp;&nbsp;&nbsp;result = activity_get_accuracy(data, &amp;accuracy);\r
+\r
+&nbsp;&nbsp;&nbsp;if (result != ACTIVITY_ERROR_NONE) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre></li>\r
+<li>When activity monitoring is no longer used, unset the callback function and destroy the handle: \r
+<pre class="prettyprint">activity_stop_recognition(handle);\r
+activity_release(handle);</pre></li></ol>  \r
+               \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/context/context_tutorials_n.htm b/org.tizen.tutorials/html/native/context/context_tutorials_n.htm
index bc6c5cc..126c4d7 100644 (file)
--- a/org.tizen.tutorials/html/native/context/context_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/context/context_tutorials_n.htm
@@ -1,77 +1,77 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Context: Detecting and Exploiting Contextual Information</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-       
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context Guides</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Context: Detecting and Exploiting Contextual Information</h1>
-
-<p>The context tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
-<ul>
-    <li><a href="activity_tutorial_n.htm">Activity Recognition: Detecting User Activities</a>
-       <p>Demonstrates how you can detect user activities.</p></li>
-    <li><a href="gesture_tutorial_n.htm">Gesture Recognition: Detecting User Gestures</a>
-    <p>Demonstrates how you can detect gestures performed with the device.</p></li>
-</ul>  
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
-    <li><a href="history_tutorial_n.htm">Contextual History: Getting the Device Usage Profiles</a>
-    <p>Demonstrates how you can retrieve the device usage profiles analyzed from the usage history of the device.</p></li>
-       <li><a href="trigger_tutorial_n.htm">Contextual Trigger: Using Context-aware Task Automation</a>
-    <p>Demonstrates how you can automate your tasks by monitoring contextual events and conditions detected on the device.</p></li>
-
-</ul>
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Context: Detecting and Exploiting Contextual Information</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+       \r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context Guides</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Context: Detecting and Exploiting Contextual Information</h1>\r
+\r
+<p>The context tutorials demonstrate how to use the following features in creating Tizen native applications:</p>\r
+<ul>\r
+    <li><a href="activity_tutorial_n.htm">Activity Recognition: Detecting User Activities</a>\r
+       <p>Demonstrates how you can detect user activities.</p></li>\r
+    <li><a href="gesture_tutorial_n.htm">Gesture Recognition: Detecting User Gestures</a>\r
+    <p>Demonstrates how you can detect gestures performed with the device.</p></li>\r
+</ul>  \r
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>\r
+<ul>\r
+    <li><a href="history_tutorial_n.htm">Contextual History: Getting the Device Usage Profiles</a>\r
+    <p>Demonstrates how you can retrieve the device usage profiles analyzed from the usage history of the device.</p></li>\r
+       <li><a href="trigger_tutorial_n.htm">Contextual Trigger: Using Context-aware Task Automation</a>\r
+    <p>Demonstrates how you can automate your tasks by monitoring contextual events and conditions detected on the device.</p></li>\r
+\r
+</ul>\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm b/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm
index 28a8d6b..05b91e3 100644 (file)
--- a/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm
@@ -1,130 +1,130 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Gesture Recognition: Detecting User Gestures</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#gesture">Detecting Gestures</a>
-                       </li>
-               </ul>       
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/context/gesture_recognition_n.htm">Gesture Recognition Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Gesture Recognition: Detecting User Gestures</h1>
-
- 
-       <p>This tutorial demonstrates how you can detect gestures performed with the device.</p> 
-       
-  
-  <h2>Warm-up</h2>
-    <p>Become familiar with the Gesture Recognition API basics by learning about:</p> 
-                       <ul>
-    <li><a href="#gesture">Detecting Gestures</a>
-    <p>Detect user gestures.</p></li>
-               </ul>
-               
-<h2 id="gesture" name="gesture">Detecting Gestures</h2>
-                       
-<p>To set and unset callback functions for user gestures:</p>
-
-<ol><li><p>To use the gesture recognition-related features of the Gesture Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;gesture_recognition.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;gesture_recognition.h&gt;
-</pre></li>
-
-<li>Create a handle for gesture detection using the <span style="font-family: Courier New,Courier,monospace;">gesture_create()</span> function:
-
-<pre class="prettyprint">
-gesture_h handle;
-gesture_create(&amp;handle);</pre></li>
-
-<li><p>To subscribe to notifications about gesture events, invoke the <span style="font-family: Courier New,Courier,monospace;">gesture_start_recognition()</span> function to register a callback function and start gesture detection.</p>
-<p>When the registered gesture is detected, the <span style="font-family: Courier New,Courier,monospace;">gesture_cb</span> callback is invoked.</p>
-
-<pre class="prettyprint">gesture_start_recognition(handle, GESTURE_PICK_UP, GESTURE_OPTION_DEFAULT, gesture_cb, NULL);</pre>
-
-<p>The above example starts gesture detection to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">GESTURE_PICK_UP</span> gesture is detected. The application can use any of the <span style="font-family: Courier New,Courier,monospace;">gesture_type_e</span> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">wearable</a> applications) in place of the <span style="font-family: Courier New,Courier,monospace;">GESTURE_PICK_UP</span> value. Note that not all gestures are supported by all devices. In such cases, the function returns the <span style="font-family: Courier New,Courier,monospace;">GESTURE_ERROR_NOT_SUPPORTED</span> value.</p>
-
-<p>If the default gesture option is designated, the system tries to reduce power consumption to detect the gesture. For example, the gesture is not necessarily detected while the display is switched off. Using the <span style="font-family: Courier New,Courier,monospace;">GESTURE_OPTION_ALWAYS_ON</span> option prevents such power-saving behaviors. For more information about the gesture options, see the <span style="font-family: Courier New,Courier,monospace;">gesture_option_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">wearable</a> applications).</p></li>
-
-<li><p>When the <span style="font-family: Courier New,Courier,monospace;">gesture_cb()</span> callback function is invoked, you can retrieve the event data using the <span style="font-family: Courier New,Courier,monospace;">gesture_get_event()</span> function:</p>
-
-<pre class="prettyprint">void gesture_cb(gesture_type_e gesture, const gesture_data_h data, double timestamp, gesture_error_e error, void *user_data)
-{                      
-&nbsp;&nbsp;&nbsp;gesture_event_e event;
-&nbsp;&nbsp;&nbsp;if (gesture == GESTURE_PICK_UP) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gesture_get_event(data, &amp;event);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event == GESTURE_EVENT_DETECTED) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-
-<p>If the application registered multiple gestures to a single callback function, the input parameter gesture can be used to distinguish the gesture received.</p>
-<p>Some gestures can return different types of events. For example, <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE</span> can return <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_DETECTED</span> or <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_FINISHED</span>.</p>
-
-<p>In case of <span style="font-family: Courier New,Courier,monospace;">GESTURE_TILT</span>, the <span style="font-family: Courier New,Courier,monospace;">gesture_get_tilt()</span> function can be used to extract the tilting angles.</p>
-
-<pre class="prettyprint">int x, y;
-if (gesture == GESTURE_TILT) 
-{
-&nbsp;&nbsp;&nbsp;gesture_get_tilt(data, &amp;x, &amp;y);
-}</pre></li>
-
-<li><p>When gesture detection is no longer used, unset the callback functions with the <span style="font-family: Courier New,Courier,monospace;">gesture_stop_recognition()</span> function and destroy the handle with the <span style="font-family: Courier New,Courier,monospace;">gesture_release()</span> function:</p>
-
-<pre class="prettyprint">gesture_stop_recognition(handle);
-gesture_release(handle);</pre></li></ol>  
-               
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Gesture Recognition: Detecting User Gestures</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#gesture">Detecting Gestures</a>\r
+                       </li>\r
+               </ul>       \r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/context/gesture_recognition_n.htm">Gesture Recognition Guide</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Gesture Recognition: Detecting User Gestures</h1>\r
+\r
+ \r
+       <p>This tutorial demonstrates how you can detect gestures performed with the device.</p> \r
+       \r
+  \r
+  <h2>Warm-up</h2>\r
+    <p>Become familiar with the Gesture Recognition API basics by learning about:</p> \r
+                       <ul>\r
+    <li><a href="#gesture">Detecting Gestures</a>\r
+    <p>Detect user gestures.</p></li>\r
+               </ul>\r
+               \r
+<h2 id="gesture" name="gesture">Detecting Gestures</h2>\r
+                       \r
+<p>To set and unset callback functions for user gestures:</p>\r
+\r
+<ol><li><p>To use the gesture recognition-related features of the Gesture Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;">&lt;gesture_recognition.h&gt;</span> header file in your application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;gesture_recognition.h&gt;\r
+</pre></li>\r
+\r
+<li>Create a handle for gesture detection using the <span style="font-family: Courier New,Courier,monospace;">gesture_create()</span> function:\r
+\r
+<pre class="prettyprint">\r
+gesture_h handle;\r
+gesture_create(&amp;handle);</pre></li>\r
+\r
+<li><p>To subscribe to notifications about gesture events, invoke the <span style="font-family: Courier New,Courier,monospace;">gesture_start_recognition()</span> function to register a callback function and start gesture detection.</p>\r
+<p>When the registered gesture is detected, the <span style="font-family: Courier New,Courier,monospace;">gesture_cb</span> callback is invoked.</p>\r
+\r
+<pre class="prettyprint">gesture_start_recognition(handle, GESTURE_PICK_UP, GESTURE_OPTION_DEFAULT, gesture_cb, NULL);</pre>\r
+\r
+<p>The above example starts gesture detection to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">GESTURE_PICK_UP</span> gesture is detected. The application can use any of the <span style="font-family: Courier New,Courier,monospace;">gesture_type_e</span> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">wearable</a> applications) in place of the <span style="font-family: Courier New,Courier,monospace;">GESTURE_PICK_UP</span> value. Note that not all gestures are supported by all devices. In such cases, the function returns the <span style="font-family: Courier New,Courier,monospace;">GESTURE_ERROR_NOT_SUPPORTED</span> value.</p>\r
+\r
+<p>If the default gesture option is designated, the system tries to reduce power consumption to detect the gesture. For example, the gesture is not necessarily detected while the display is switched off. Using the <span style="font-family: Courier New,Courier,monospace;">GESTURE_OPTION_ALWAYS_ON</span> option prevents such power-saving behaviors. For more information about the gesture options, see the <span style="font-family: Courier New,Courier,monospace;">gesture_option_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#gaf3733ffc829005b3162df4aceecca228">wearable</a> applications).</p></li>\r
+\r
+<li><p>When the <span style="font-family: Courier New,Courier,monospace;">gesture_cb()</span> callback function is invoked, you can retrieve the event data using the <span style="font-family: Courier New,Courier,monospace;">gesture_get_event()</span> function:</p>\r
+\r
+<pre class="prettyprint">void gesture_cb(gesture_type_e gesture, const gesture_data_h data, double timestamp, gesture_error_e error, void *user_data)\r
+{                      \r
+&nbsp;&nbsp;&nbsp;gesture_event_e event;\r
+&nbsp;&nbsp;&nbsp;if (gesture == GESTURE_PICK_UP) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gesture_get_event(data, &amp;event);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event == GESTURE_EVENT_DETECTED) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle the event\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<p>If the application registered multiple gestures to a single callback function, the input parameter gesture can be used to distinguish the gesture received.</p>\r
+<p>Some gestures can return different types of events. For example, <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE</span> can return <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_DETECTED</span> or <span style="font-family: Courier New,Courier,monospace;">GESTURE_SHAKE_FINISHED</span>.</p>\r
+\r
+<p>In case of <span style="font-family: Courier New,Courier,monospace;">GESTURE_TILT</span>, the <span style="font-family: Courier New,Courier,monospace;">gesture_get_tilt()</span> function can be used to extract the tilting angles.</p>\r
+\r
+<pre class="prettyprint">int x, y;\r
+if (gesture == GESTURE_TILT) \r
+{\r
+&nbsp;&nbsp;&nbsp;gesture_get_tilt(data, &amp;x, &amp;y);\r
+}</pre></li>\r
+\r
+<li><p>When gesture detection is no longer used, unset the callback functions with the <span style="font-family: Courier New,Courier,monospace;">gesture_stop_recognition()</span> function and destroy the handle with the <span style="font-family: Courier New,Courier,monospace;">gesture_release()</span> function:</p>\r
+\r
+<pre class="prettyprint">gesture_stop_recognition(handle);\r
+gesture_release(handle);</pre></li></ol>  \r
+               \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/location/location_tutorials_n.htm b/org.tizen.tutorials/html/native/location/location_tutorials_n.htm
index df9ceaf..9eb76f3 100644 (file)
--- a/org.tizen.tutorials/html/native/location/location_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/location/location_tutorials_n.htm
@@ -1,72 +1,72 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Location: Retrieve the Device Location and Create Geofences</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location Guides</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Wearable Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Location: Retrieve the Device Location and Create Geofences</h1>
-
-<p>The location tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
-       <ul>
-        <li><a href="location_tutorial_n.htm">Location: Using Location Information and Service</a> 
-               <p>Demonstrates how you can retrieve the location of the device.</p></li> 
-       </ul>
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
-       <ul>
-        <li><a href="geofence_tutorial_n.htm">Geofence: Creating and Using Geofences</a> 
-               <p>Demonstrates how you can create and use geofences.</p></li>
-               <li><a href="maps_tutorial_n.htm">Maps Service: Using the Map Service</a> 
-        <p>Demonstrates how you can use the map service to query geocodes and routes, and search for places.</p></li>
-
-       </ul>
-
-                       
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Location: Retrieve the Device Location and Create Geofences</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location Guides</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Location: Retrieve the Device Location and Create Geofences</h1>\r
+\r
+<p>The location tutorials demonstrate how to use the following features in creating Tizen native applications:</p>\r
+       <ul>\r
+        <li><a href="location_tutorial_n.htm">Location: Using Location Information and Service</a> \r
+               <p>Demonstrates how you can retrieve the location of the device.</p></li> \r
+       </ul>\r
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>\r
+       <ul>\r
+        <li><a href="geofence_tutorial_n.htm">Geofence: Creating and Using Geofences</a> \r
+               <p>Demonstrates how you can create and use geofences.</p></li>\r
+               <li><a href="maps_tutorial_n.htm">Maps Service: Using the Map Service</a> \r
+        <p>Demonstrates how you can use the map service to query geocodes and routes, and search for places.</p></li>\r
+\r
+       </ul>\r
+\r
+                       \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm
index 6be0acd..80a561f 100644 (file)
--- a/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm
@@ -176,15 +176,15 @@ if (error_code != EMAILS_ERROR_NONE)
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm b/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm
index 194305d..af9fcc7 100644 (file)
--- a/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm
@@ -41,7 +41,7 @@
           <li><a href="sms_mms_tutorial_n.htm">Messages: Creating and Sending SMS and MMS Messages</a> <p>Demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.</p></li>     
           <li><a href="push_tutorial_n.htm">Push: Using the Push Service</a> <p>Demonstrates how you can receive notifications through the Internet even when the application is not running.</p></li>
         </ul>
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
        <ul>
                <li><a href="email_tutorial_n.htm">Email: Managing Emails</a> <p>Demonstrates how you can send emails with attachments.</p></li>
        </ul>
@@ -57,15 +57,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm
index c97b0b2..89b2d09 100644 (file)
--- a/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm
@@ -876,15 +876,15 @@ do
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm
index 7ea74d4..b8c3350 100644 (file)
--- a/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm
@@ -228,15 +228,15 @@ if (error_code != MESSAGES_ERROR_NONE)
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm
index d4e31e7..99580e3 100644 (file)
--- a/org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/media_controller_tutorial_n.htm
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-    <title>Media Controller: Communicating between the Server and Client for Media Control</title>
+    <title>Media Controller: Communicating Between the Server and Client for Media Control</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -37,7 +37,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Media Controller: Communicating between the Server and Client for Media Control</h1>
+<h1>Media Controller: Communicating Between the Server and Client for Media Control</h1>
   
 <p>This tutorial demonstrates how you can transfer information between the server and the client.</p>
 
diff --git a/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm b/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm
index 54c825e..cbbd90a 100644 (file)
--- a/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm
@@ -39,7 +39,7 @@
   <li><a href="camera_tutorial_n.htm">Camera: Controlling a Camera Device</a> <p>Demonstrates how you can access the camera preview, focus, and take photos.</p></li>
   <li><a href="image_util_tutorial_n.htm">Image Util: Encoding, Decoding, and Transforming Images</a> <p>Demonstrates how you can process images and decode or encode JPEG image files.</p></li>
   <li><a href="media_codec_tutorial_n.htm">Media Codec: Encoding and Decoding Media Files</a> <p>Demonstrates how you can encode and decode media files.</p></li>
-  <li><a href="media_controller_tutorial_n.htm">Media Controller: Communicating between the Server and Client for Media Control</a> <p>Demonstrates how you can communicate between the media controller server and the media controller client.</p></li>     
+  <li><a href="media_controller_tutorial_n.htm">Media Controller: Communicating Between the Server and Client for Media Control</a> <p>Demonstrates how you can communicate between the media controller server and the media controller client.</p></li>     
   <li><a href="media_tools_tutorial_n.htm">Media Tool: Managing Media Handles</a> <p>Demonstrates how you can manage media handles.</p></li>
   <li><a href="media_vision_tutorial_n.htm">Media Vision: Generating and Detecting Barcodes</a> <p>Demonstrates how you can create and read barcodes.</p></li>
   <li><a href="metadata_editor_tutorial_n.htm">Metadata Editor: Editing Metadata from an Input Audio File</a> <p>Demonstrates how you can edit the metadata of several popular audio formats.</p></li>  
@@ -51,11 +51,11 @@
   <li><a href="tone_player_tutorial_n.htm">Tone Player: Playing Tones</a> <p>Demonstrates how you can play tones.</p></li>  
   <li><a href="wav_player_tutorial_n.htm">WAV Player: Playing Waveform Audio Files</a> <p>Demonstrates how you can play WAV files.</p></li>  
   <li><a href="sound_manager_tutorial_n.htm">Sound Manager: Managing Sound Parameters</a> <p>Demonstrates how you can set the sound session type and control volume.</p></li>
-  <li><a href="screen_mirroring_tutorial_n.htm">Screen Mirroring Sink: Mirroring Screen and Sound</a>  <p>Demonstrates how you can mirror the device screen and sound to another device wirelessly.</p></li>   
 </ul>
 
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
        <ul>
+    <li><a href="screen_mirroring_tutorial_n.htm">Screen Mirroring Sink: Mirroring Screen and Sound</a>  <p>Demonstrates how you can mirror the device screen and sound to another device wirelessly.</p></li>
        <li><a href="video_util_tutorial_n.htm">Video Util: Transcoding Media Files</a> <p>Demonstrates how you can transcode and trim video files.</p></li>
        </ul>
 
diff --git a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
old mode 100755 (executable)
new mode 100644 (file)
index 4c90d59..343bddb
--- a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm
@@ -18,7 +18,7 @@
 
 <div id="toc-navigation">
     <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/>  <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
     </div>
     <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
@@ -33,7 +33,6 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm">Screen Mirroring Sink Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Wearable Native</a></li>
         </ul>
     </div></div>
 </div>
@@ -43,6 +42,17 @@
 
 <p>This tutorial demonstrates how you can mirror the device screen and sound to another device wirelessly as a sink.</p>
 
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
 <h2>Warm-up</h2>
 <p>Become familiar with Screen Mirroring Sink API basics by learning about:</p>
 
@@ -68,7 +78,7 @@
 
 <p>To initialize the screen mirroring sink:</p>
 
-<ol><li><p>To use the functions and data types of the Screen Mirroring Sink API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">mobile</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;scmirroring_type.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;scmirroring_sink.h&gt;</span> header files in your application:</p>
+<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;scmirroring_type.h&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;scmirroring_sink.h&gt;</span> header files in your application:</p>
 <pre class="prettyprint">
 #include &lt;scmirroring_type.h&gt;
 #include &lt;scmirroring_sink.h&gt;
diff --git a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
index 701e024..3c524f4 100644 (file)
--- a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm
@@ -1771,15 +1771,15 @@ if (ret != BT_ERROR_NONE)
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm
index 1e87bfc..276a948 100644 (file)
--- a/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm
@@ -580,15 +580,15 @@ done:
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/network/network_tutorials_n.htm b/org.tizen.tutorials/html/native/network/network_tutorials_n.htm
index 961c4d1..f1dae2b 100644 (file)
--- a/org.tizen.tutorials/html/native/network/network_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/network/network_tutorials_n.htm
@@ -44,7 +44,7 @@
                   <li><a href="wifi_tutorial_n.htm">Wi-Fi: Managing Wi-Fi and Monitoring Its State</a> <p>Demonstrates how you can manage Wi-Fi connections and monitor the Wi-Fi state.</p></li>
                   
       </ul>
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
        <ul>
        <li><a href="wifi_direct_tutorial_n.htm">Wi-Fi Direct: Managing Wi-Fi Direct&trade;</a> <p>Demonstrates how you can manage Wi-Fi Direct&trade; connections.</p></li>
        </ul>
@@ -61,15 +61,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm b/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm
index 512908e..7e60eaf 100644 (file)
--- a/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm
@@ -987,15 +987,15 @@ nfc_ndef_record_get_text(ndef_record, &amp;email);</pre>
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm b/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm
index 0345761..1855c3d 100644 (file)
--- a/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm
@@ -511,15 +511,15 @@ else
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
index a11d856..452d532 100644 (file)
--- a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm
@@ -480,15 +480,15 @@ wifi_direct_deactivate(NULL);
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
index 696155f..59d3fec 100644 (file)
--- a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm
@@ -298,15 +298,15 @@ wifi_deactivate(NULL, NULL);
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
index 7699d92..4a93e91 100644 (file)
--- a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
@@ -1,1035 +1,1035 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Key Manager: Using Keys and Certificates, and Implementing Access Control</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#initialize">Initializing the Key Manager</a></li>
-                       <li>Repository management
-                               <ul class="toc">
-                                       <li><a href="#savingkey">Saving, Getting, or Removing a Key</a></li>
-                                       <li><a href="#savingcert">Saving, Getting, or Removing a Certificate</a></li>
-                                       <li><a href="#savingdata">Saving, Getting, or Removing Data</a></li>
-                               </ul>
-                       </li>
-                       <li><a href="#creatingkey">Creating Key Pairs</a></li>
-                       <li><a href="#creatingsignat">Creating or Verifying Signatures</a></li>
-                       <li><a href="#verifying">Verifying or Getting a Certificate Chain</a></li>
-                       <li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a></li>
-                       <li><a href="#access">Implementing Access Control</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/security/key_manager_n.htm">Key Manager Guide</a></li>
-                       <li> <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Mobile Native</a></li>
-                       <li> <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Key Manager: Using Keys and Certificates, and Implementing Access Control</h1>
-
-
-<p>This tutorial demonstrates how you can use the key manager to create a secure repository for keys, certificates, and sensitive data.</p>
-
-
-       <h2>Warm-up</h2>
-       <p>Become familiar with the Key Manager API basics by learning about:</p>
-<ul>
-<li><a href="#initialize">Initializing the Key Manager</a>
-<p>Define the header file and privileges required to use the key manager.</p></li>
-
-<li>Repository management
-       <ul>
-               <li><a href="#savingkey">Saving, Getting, or Removing a Key</a>
-               <p>Store, get, or remove a key.</p></li>
-
-               <li><a href="#savingcert">Saving, Getting, or Removing a Certificate</a>
-               <p>Store, get, or remove a certificate.</p></li>
-
-               <li><a href="#savingdata">Saving, Getting, or Removing Data</a>
-               <p>Store, get, or remove data.</p></li>
-       </ul>
-</li>
-<li><a href="#creatingkey">Creating Key Pairs</a>
-<p>Create an RSA/ECDSA private or public key pair and store it inside the key manager.</p></li>
-
-<li><a href="#creatingsignat">Creating or Verifying Signatures</a>
-<p>Create or verify a signature on a given message.</p></li>
-
-<li><a href="#verifying">Verifying or Getting a Certificate Chain</a>
-<p>Verify a certificate chain and get it.</p></li>
-
-<li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a>
-<p>Load a certificate or key from a certificate file or a <span style="font-family: Courier New,Courier,monospace;">PKCS#12</span> file.</p></li>
-
-<li><a href="#access">Implementing Access Control</a>
-<p>Set access control rules for each individual client&#39;s data, certificates, and keys.</p></li>
-</ul>
-               
-<h2 id="initialize" name="initialize">Initializing the Key Manager</h2>
-
-<p>To define the header file and privileges required to use the key manager:</p>
-<ol>           
-<li><p>To use the Key Manager privileged API, declare the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span> privilege in the <span style="font-family: Courier New,Courier,monospace;">manifest.xml</span> file of the application package.</p></li>
-<li><p>To use the functions and data types of the Key Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;ckmc/ckmc-manager.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;ckmc/ckmc-manager.h&gt;
-</pre></li></ol>
-
-<h2 id="savingkey" name="savingkey">Saving, Getting, or Removing a Key</h2>
-
-<p>To store, remove, and retrieve client keys from the key manager:</p>
-
-<ol><li>Store a new key.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_key_s test_key;
-ckmc_policy_s store_policy;
-char* alias= &quot;mykey&quot;;
-char* key_password = NULL;
-
-char* binary_key = &quot;-----BEGIN PUBLIC KEY-----\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;zQIDAQAB\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;-----END PUBLIC KEY-----&quot;;
-
-test_key.raw_key =  (unsigned char *) binary_key;
-test_key.key_size = strlen(binary_key);
-test_key.key_type = CKMC_KEY_NONE; // The real key type is determined by the key manager
-test_key.password = NULL; // This means the binary_key is not encrypted with any password
-
-store_policy.password = key_password; // NULL means that the test_key is not encrypted with a per key password
-store_policy.extractable = true; // This means that the key value is extractable
-
-ret = ckmc_save_key(alias, test_key, store_policy);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li>Get a key from the key manager.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_key_s *test_key;
-char* alias= &quot;mykey&quot;;
-char* key_password = NULL;
-
-ret = ckmc_get_key(alias, key_password, &amp;test_key);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-dlog_print(DLOG_INFO, LOG_TAG, &quot;key size =%d\n&quot;, test_key-&gt;key_size);
-
-ckmc_key_free(test_key); // Called when the key is no longer needed
-</pre></li>
-
-<li>Get the key alias list.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_alias_list_s *alias_list;
-ckmc_alias_list_s *plist;
-ckmc_key_s *test_key;
-char* key_password = NULL;
-int count_list = 0;
-
-ret = ckmc_get_key_alias_list(&amp;alias_list);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-plist = alias_list;
-do
-{
-&nbsp;&nbsp;&nbsp;ckmc_get_key(plist-&gt;alias, key_password, &amp;test_key);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th key : key size =%d\n&quot;, ++count_list, test_key-&gt;key_size);
-&nbsp;&nbsp;&nbsp;ckmc_key_free(test_key);
-&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
-}
-while(plist != NULL);
-
-ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed.
-</pre></li>
-<li>Remove the key.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-const char* alias= &quot;mykey&quot;;
-
-ret = ckmc_remove_key(alias);
-if (CKMC_ERROR_NONE != ret) 
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li></ol>
-
-<h2 id="savingcert" name="savingcert">Saving, Getting, or Removing a Certificate</h2>
-
-<p>To store, remove, or retrieve the client certificate from the key manager:</p>
-
-<ol><li>Store a new certificate.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-char* password = NULL;
-ckmc_cert_s cert;
-const char *alias = &quot;myCert&quot;;
-ckmc_policy_s test_policy;
-
-const char *certPem = &quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIEgDCCA2igAwIBAgIIcjtBYJGQtOAwDQYJKoZIhvcNAQEFBQAwSTELMAkGA1UE\n&quot;
-&quot;BhMCVVMxEzARBgNVBAoTCkdvb2dsZSBJbmMxJTAjBgNVBAMTHEdvb2dsZSBJbnRl\n&quot;
-&quot;cm5ldCBBdXRob3JpdHkgRzIwHhcNMTQwNTIyMTEyOTQyWhcNMTQwODIwMDAwMDAw\n&quot;
-&quot;WjBtMQswCQYDVQQGEwJVUzETMBEGA1UECAwKQ2FsaWZvcm5pYTEWMBQGA1UEBwwN\n&quot;
-&quot;TW91bnRhaW4gVmlldzETMBEGA1UECgwKR29vZ2xlIEluYzEcMBoGA1UEAwwTYWNj\n&quot;
-&quot;b3VudHMuZ29vZ2xlLmNvbTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB\n&quot;
-&quot;ALtlLWVWPN3q3bSEQl1Z97gPdgl5vbgJOZSAr0ZY0tJCuFLBbUKetJWryyE+5KpG\n&quot;
-&quot;gMMpLS4v8/bvXaZc6mAs+RfAqGM24C3vQg5hPnj4dflnhL0WiOCZBurm1tV4oexk\n&quot;
-&quot;HLXs3jr/jpnb738AQpj8zZ9a4VEBuHJRZALnWZ/XhqU+dvYomAoRQNuL5OhkT7uu\n&quot;
-&quot;d0NKJL9JjYLyQglGgE2sVsWv2kj7EO/P9Q6NEKt9BGmhMsFvtfeKUaymynaxpR1g\n&quot;
-&quot;wEPlqYvB38goh1dIOgVLT0OVyLImeg5Mdwar/8c1U0OYhLOc6PJapOZAfUkE+3+w\n&quot;
-&quot;xYt8AChLN1b5szOwInrCVpECAwEAAaOCAUYwggFCMB0GA1UdJQQWMBQGCCsGAQUF\n&quot;
-&quot;BwMBBggrBgEFBQcDAjAeBgNVHREEFzAVghNhY2NvdW50cy5nb29nbGUuY29tMGgG\n&quot;
-&quot;CCsGAQUFBwEBBFwwWjArBggrBgEFBQcwAoYfaHR0cDovL3BraS5nb29nbGUuY29t\n&quot;
-&quot;L0dJQUcyLmNydDArBggrBgEFBQcwAYYfaHR0cDovL2NsaWVudHMxLmdvb2dsZS5j\n&quot;
-&quot;b20vb2NzcDAdBgNVHQ4EFgQU0/UtToEtNIfwDwHuYGuVKcj0xK8wDAYDVR0TAQH/\n&quot;
-&quot;BAIwADAfBgNVHSMEGDAWgBRK3QYWG7z2aLV29YG2u2IaulqBLzAXBgNVHSAEEDAO\n&quot;
-&quot;MAwGCisGAQQB1nkCBQEwMAYDVR0fBCkwJzAloCOgIYYfaHR0cDovL3BraS5nb29n\n&quot;
-&quot;bGUuY29tL0dJQUcyLmNybDANBgkqhkiG9w0BAQUFAAOCAQEAcGNI/X9f0g+7ij0o\n&quot;
-&quot;ehLpk6vxSMQGrmOZ4+PG/MC9SLClCkt7zJkfU7erZnyVXyxCpwlljq+Wk9YTPUOq\n&quot;
-&quot;xD/V2ikQVSAANoxGJFO9UoL5jzWusPhKKv8CcM7fuiERz8K+CfBcqfxbgI5rH0g5\n&quot;
-&quot;dYclmLC81cJ/08i+9Nltvxv69Y3hGfEICT6K+EdSxwnQzOhpMZmvxZsIj+d6CVNa\n&quot;
-&quot;9ICYgUthsNQVWzrIs5wknpjjZ9liDMwJX0vu8A0rce4X/Lna5hh2bW9igz2iP5WM\n&quot;
-&quot;9fuwdbTw4y3jfPQgszU4YZxWxhMzccxe058Qx1tLndAknBQEBesQjXytVQpuM1SV\n&quot;
-&quot;rHva8A==\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
-
-test_policy.password = password;
-test_policy.extractable = true;
-
-cert.raw_cert =  (unsigned char *) certPem;
-cert.cert_size = strlen(certPem);
-cert.data_format = CKMC_FORM_PEM;
-
-ret = ckmc_save_cert(alias, cert, test_policy);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li>Get a certificate from the key manager.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_cert_s *test_cert;
-char* alias= &quot;myCert&quot;;
-char* password = NULL;
-
-ret = ckmc_get_cert(alias, password, &amp;test_cert);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-dlog_print(DLOG_INFO, LOG_TAG, &quot;cert size =%d\n&quot;, test_cert-&gt;cert_size);
-
-ckmc_cert_free(test_cert); // Called when the certificate is no longer needed
-</pre></li>
-<li>Get the certificate alias list.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_alias_list_s *alias_list;
-ckmc_alias_list_s *plist;
-ckmc_cert_s *test_cert;
-char* password = NULL;
-int count_list = 0;
-
-ret = ckmc_get_cert_alias_list(&amp;alias_list);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-plist = alias_list;
-do
-{
-&nbsp;&nbsp;&nbsp;ckmc_get_cert(plist-&gt;alias, password, &amp;test_cert);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th cert : cert size =%d\n&quot;, ++count_list, test_cert-&gt;cert_size);
-&nbsp;&nbsp;&nbsp;ckmc_cert_free(test_cert);
-&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
-}
-while(plist != NULL);
-
-ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed
-</pre></li>
-
-<li>Remove the certificate.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-const char* alias= &quot;myCert&quot;;
-
-ret = ckmc_remove_cert(alias);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li></ol>
-
-<h2 id="savingdata" name="savingdata">Saving, Getting, or Removing Data</h2>
-
-<p>To store, remove, or retrieve client data on or from the key manager:</p>
-
-<ol><li>Store new data.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-char* password = NULL;
-ckmc_raw_buffer_s test_data;
-const char *alias = &quot;myData&quot;;
-ckmc_policy_s test_policy;
-
-const char *char_bin_data = &quot;My Binary Data&quot;;
-
-test_policy.password = password;
-test_policy.extractable = true;
-
-test_data.data = (unsigned char *) char_bin_data;
-test_data.size = strlen(char_bin_data);
-ret = ckmc_save_data(alias, test_data, test_policy);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li>Get data from the key manager.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-char* password = NULL;
-ckmc_raw_buffer_s *test_data;
-const char *alias = &quot;myData&quot;;
-
-ret = ckmc_get_data(alias, password, &amp;test_data);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-dlog_print(DLOG_INFO, LOG_TAG, &quot;data size =%d\n&quot;, test_data-&gt; size);
-
-ckmc_buffer_free(test_data); // Called when the buffer is no longer needed
-</pre></li>
-
-<li>Get the data alias list.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_alias_list_s *alias_list;
-ckmc_alias_list_s *plist;
-ckmc_raw_buffer_s *test_data;
-char* password = NULL;
-int count_list = 0;
-
-ret = ckmc_get_data_alias_list(&amp;alias_list);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-plist = alias_list;
-do
-{
-&nbsp;&nbsp;&nbsp;ckmc_get_data(plist-&gt;alias, password, &amp;test_data);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th data : data size =%d\n&quot;, ++count_list, test_data-&gt;size);
-&nbsp;&nbsp;&nbsp;ckmc_buffer_free(test_data);
-&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
-}
-while(plist != NULL);
-
-ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed
-</pre></li>
-<li>Remove data.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-const char* alias= &quot;myData&quot;;
-
-ret = ckmc_remove_data(alias);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li></ol>
-
-<h2 id="creatingkey" name="creatingkey">Creating Key Pairs</h2>
-
-<p>To generate asymmetric key pairs - the RSA, ECDSA, or DSA key pair:</p>
-
-<ul><li><p>Create the RSA key pair:</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-size_t size = 2048; // Key Manager supports 1024, 2048, 4096
-const char *private_key_alias = &quot;PRV_RSA1&quot;;
-const char *public_key_alias = &quot;PUB_RSA1&quot;;
-ckmc_policy_s policy_private_key;
-ckmc_policy_s policy_public_key;
-
-// This private key is encrypted with a password additionally
-policy_private_key.password = (char *)&quot;pri_password&quot;;
-policy_private_key.extractable = false; // This key cannot be extracted from the key manager
-
-policy_public_key.password = NULL;
-policy_public_key.extractable = true;
-
-ret = ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li><p>Create the ECDSA key pair:</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_ec_type_e ectype = CKMC_EC_PRIME192V1;
-const char *private_key_alias = &quot;PRV_ECDSA1&quot;;
-const char *public_key_alias = &quot;PUB_ECDSA1&quot;;
-ckmc_policy_s policy_private_key;
-ckmc_policy_s policy_public_key;
-
-// This private key is encrypted with the password additionally
-policy_private_key.password = (char *)&quot;pri_password&quot;;
-policy_private_key.extractable = false; // This key cannot be extracted from the key manager
-
-policy_public_key.password = NULL;
-policy_public_key.extractable = true;
-
-ret = ckmc_create_key_pair_ecdsa(ectype, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li><p>Create the DSA  key pair:</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-size_t size = 1024;
-const char *private_key_alias = &quot;PRV_DSA1&quot;;
-const char *public_key_alias = &quot;PUB-DSA1&quot;;
-ckmc_policy_s policy_private_key;
-ckmc_policy_s policy_public_key;
-
-// This private key is encrypted with a password additionally
-policy_private_key.password = (char *)&quot;pri_password&quot;;
-policy_private_key.extractable = false;
-
-policy_public_key.password = NULL;
-policy_public_key.extractable = true;
-
-ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
-if (CKMC_ERROR_NONE != ret)
-
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li></ul>
-
-<h2 id="creatingsignat" name="creatingsignat">Creating or Verifying Signatures</h2>
-
-                       <p>To create or verify signatures:</p>
-<ol><li>Store a private and public key.
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-const char *pub_alias = &quot;pub1&quot;;
-const char *pri_alias = &quot;prv1&quot;;
-char *key_passwd = (char *) &quot;1234&quot;;
-char *pri_passwd = NULL;
-char *pub_passwd = NULL;
-ckmc_hash_algo_e hash_algo = CKMC_HASH_SHA256;
-ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;
-ckmc_raw_buffer_s *signature;
-
-ckmc_key_s pubkey;
-ckmc_policy_s pubpolicy;
-ckmc_key_s prikey;
-ckmc_policy_s pripolicy;
-
-const char *prv = &quot;-----BEGIN RSA PRIVATE KEY-----\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;Proc-Type: 4,ENCRYPTED\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;DEK-Info: DES-EDE3-CBC,6C6507B11671DABC\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;YiKNviNqc/V/i241CKtAVsNckesE0kcaka3VrY7ApXR+Va93YoEwVQ8gB9cE/eHH\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;S0j3ZS1PAVFM/qo4ZnPdMzaSLvTQw0GAL90wWgF3XQ+feMnWyBObEoQdGXE828TB\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;SLz4UOIQ55Dx6JSWTfEhwAlPs2cEWD14xvuxPzAEzBIYmWmBBsCN94YgFeRTzjH0\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;TImoYVMN60GgOfZWw6rXq9RaV5dY0Y6F1piypCLGD35VaXAutdHIDvwUGECPm7SN\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;w05jRro53E1vb4mYlZEY/bs4q7XEOI5+ZKT76Xn0oEJNX1KRL1h2q8fgUkm5j40M\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;uQj71aLR9KyIoQARwGLeRy09tLVjH3fj66CCMqaPcxcIRIyWi5yYBB0s53ipm6A9\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;CYuyc7MS2C0pOdWKsDvYsHR/36KUiIdPuhF4AbaTqqO0eWeuP7Na7dGK56Fl+ooi\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;cUpJr7cIqMl2vL25B0jW7d4TB3zwCEkVVD1fBPeNoZWo30z4bILcBqjjPkQfHZ2e\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;xNraG3qI4FHjoPT8JEE8p+PgwaMoINlICyIMKiCdvwz9yEnsHPy7FkmatpS+jFoS\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;mg8R9vMwgK/HGEm0dmb/7/a0XsG2jCDm6cOmJdZJFQ8JW7hFs3eOHpNlQYDChG2D\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;A1ExslqBtbpicywTZhzFdYU/hxeCr4UqcY27Zmhr4JlBPMyvadWKeOqCamWepjbT\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;T/MhWJbmWgZbI5s5sbpu7cOYubQcUIEsTaQXGx/KEzGo1HLn9tzSeQfP/nqjAD/L\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;T5t1Mb8o4LuV/fGIT33Q3i2FospJMqp2JINNzG18I6Fjo08PTvJ3row40Rb76+lJ\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;wN1IBthgBgsgsOdB6XNc56sV+uq2TACsNNWw+JnFRCkCQgfF/KUrvN+WireWq88B\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;9UPG+Hbans5A6K+y1a+bzfdYnKws7x8wNRyPxb7Vb2t9ZTl5PBorPLVGsjgf9N5X\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;tCdBlfJsUdXot+EOxrIczV5zx0JIB1Y9hrDG07RYkzPuJKxkW7skqeLo8oWGVpaQ\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;LGWvuebky1R75hcSuL3e4QHfjBHPdQ31fScB884tqkbhBAWr2nT9bYEmyT170bno\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;8QkyOSb99xZBX55sLDHs9p61sTJr2C9Lz/KaWQs+3hTkpwSjSRyjEMH2n491qiQX\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;G+kvLEnvtR8sl9zinorj/RfsxyPntAxudfY3qaYUu2QkLvVdfTVUVbxS/Fg8f7B3\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;hEjCtpKgFjPxQuHE3didNOr5xM7mkmLN/QA7yHVgdpE64T5mFgC3JcVRpcR7zBPH\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;3OeXHgjrhDfN8UIX/cq6gNgD8w7O0rhHa3mEXI1xP14ykPcJ7wlRuLm9P3fwx5A2\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;jQrVKJKw1Nzummmspn4VOpJY3LkH4Sxo4e7Soo1l1cxJpzmERwgMF+vGz1L70+DG\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;M0hVrz1PxlOsBBFgcdS4TB91DIs/RcFDqrJ4gOPNKCgBP+rgTXXLFcxUwJfE3lKg\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;Kmpwdne6FuQYX3eyRVAmPgOHbJuRQCh/V4fYo51UxCcEKeKy6UgOPEJlXksWGbH5\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;VFmlytYW6dFKJvjltSmK6L2r+TlyEQoXwTqe4bkfhB2LniDEq28hKQ==\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;-----END RSA PRIVATE KEY-----\n&quot;;
-
-const char *pub = &quot;-----BEGIN PUBLIC KEY-----\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;zQIDAQAB\n&quot;
-&nbsp;&nbsp;&nbsp;&quot;-----END PUBLIC KEY-----\n&quot;;
-pubkey.raw_key = (unsigned char *)pub;
-pubkey.key_size = strlen(pub);
-pubkey.key_type = CKMC_KEY_NONE;
-pubkey.password = NULL;
-
-pubpolicy.password = pub_passwd;
-pubpolicy.extractable = false;
-
-pripolicy.password = pri_passwd;
-pripolicy.extractable = true;
-
-prikey.raw_key = (unsigned char *)prv;
-prikey.key_size = strlen(prv);
-prikey.key_type = CKMC_KEY_NONE;
-prikey.password = key_passwd; // The private key, prv, is encrypted with the key_password
-
-ret = ckmc_save_key(pri_alias, prikey, pripolicy);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-ret = ckmc_save_key(pub_alias, pubkey, pubpolicy);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li>Create and verify the signature:
-<ul>
-<li>Create and verify using a hash algorithm:
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-const char *message = &quot;message test&quot;;
-ckmc_raw_buffer_s msg_buff;
-ckmc_raw_buffer_s *signature;
-ckmc_hash_algo_e hash_algo = CKMC_HASH_SHA256;
-ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;
-
-const char *pub_alias = &quot;pub1&quot;;
-const char *pri_alias = &quot;prv1&quot;;
-char *pri_passwd = NULL;
-char *pub_passwd = NULL;
-
-msg_buff.data = (unsigned char *)message;
-msg_buff.size = strlen(message);
-
-ret = ckmc_create_signature (pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &amp;signature);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-ret = ckmc_verify_signature (pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li>Create and verify without a hash algorithm:
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-const char *message = &quot;message test&quot;;
-ckmc_raw_buffer_s msg_buff;
-ckmc_raw_buffer_s *signature;
-ckmc_hash_algo_e hash_algo = CKMC_HASH_NONE; // Do not use a hash algorithm 
-ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;
-
-const char *pub_alias = &quot;pub1&quot;;
-const char *pri_alias = &quot;prv1&quot;;
-char *pri_passwd = NULL;
-char *pub_passwd = NULL;
-
-msg_buff.data = (unsigned char *)message;
-msg_buff.size = strlen(message);
-
-ret = ckmc_create_signature (pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &amp;signature);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-ret = ckmc_verify_signature (pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-</ul>
-</li></ol>
-
-<h2 id="verifying" name="verifying">Verifying or Getting a Certificate Chain</h2>
-
-                       <p>To verify and get a certificate chain using raw certificates or a certificate alias for untrusted certificates:</p>
-<ul><li><p>Get a certificate chain with raw certificates.</p>
-<p>The key manager verifies a certificate chain and returns it. The trusted root certificate of the chain must exist in the system certificate storage.</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_cert_s c_cert; // For a user certificate
-ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate
-ckmc_cert_list_s untrustedcerts; // Linked list of untrusted CA certificate
-ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain
-
-int cnt = 0;
-ckmc_cert_list_s *current;
-ckmc_cert_list_s *next;
-
-const char * ee =
-&quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIF0TCCBLmgAwIBAgIQaPGTP4aS7Ut/WDNaBzdQrDANBgkqhkiG9w0BAQUFADCB\n&quot;
-&quot;ujELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;
-&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\n&quot;
-&quot;YXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMr\n&quot;
-&quot;VmVyaVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTAeFw0x\n&quot;
-&quot;NDAyMjAwMDAwMDBaFw0xNTAyMjAyMzU5NTlaMIHmMRMwEQYLKwYBBAGCNzwCAQMT\n&quot;
-&quot;AlBMMR0wGwYDVQQPExRQcml2YXRlIE9yZ2FuaXphdGlvbjETMBEGA1UEBRMKMDAw\n&quot;
-&quot;MDAyNTIzNzELMAkGA1UEBhMCUEwxDzANBgNVBBEUBjAwLTk1MDEUMBIGA1UECBML\n&quot;
-&quot;bWF6b3dpZWNraWUxETAPBgNVBAcUCFdhcnN6YXdhMRYwFAYDVQQJFA1TZW5hdG9y\n&quot;
-&quot;c2thIDE4MRMwEQYDVQQKFAptQmFuayBTLkEuMQwwCgYDVQQLFANESU4xGTAXBgNV\n&quot;
-&quot;BAMUEHd3dy5tYmFuay5jb20ucGwwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\n&quot;
-&quot;AoIBAQDph6x8V6xUW/+651+qHF+UmorH9uaz2ZrX2bIWiMKIJFmpDDHlxcapKkqE\n&quot;
-&quot;BV04is83aiCpqKtc2ZHy2g4Hpj1eSF5BP2+OAlo0YUQZPIeRRdiMjmeAxw/ncBDx\n&quot;
-&quot;9rQBuCJ4XTD6cqQox5SI0TASOZ+wyAEjbDRXzL73XqRAFZ1LOpb2ONkolS+RutMB\n&quot;
-&quot;vshvCsWPeNe7eGLuOh6DyC6r1vX9xhw3xnjM2mTSvmtimgzSLacNGKqRrsucUgcb\n&quot;
-&quot;0+O5C2jZAtAMLyZksL92cxmWbtVzUYzem4chjHu5cRxUlPNzUJWrrczueB7Ip4A8\n&quot;
-&quot;aQuFMfNXYc0x+WLWjy//urypMKjhAgMBAAGjggGjMIIBnzAbBgNVHREEFDASghB3\n&quot;
-&quot;d3cubWJhbmsuY29tLnBsMAkGA1UdEwQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud\n&quot;
-&quot;JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjBEBgNVHSAEPTA7MDkGC2CGSAGG+EUB\n&quot;
-&quot;BxcGMCowKAYIKwYBBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMw\n&quot;
-&quot;HQYDVR0OBBYEFN37iGaS7mZnENxZ9FGqNLR+QgoMMB8GA1UdIwQYMBaAFPyKULqe\n&quot;
-&quot;uSVae1WFT5UAY4/pWGtDMEIGA1UdHwQ7MDkwN6A1oDOGMWh0dHA6Ly9FVlNlY3Vy\n&quot;
-&quot;ZS1jcmwudmVyaXNpZ24uY29tL0VWU2VjdXJlMjAwNi5jcmwwfAYIKwYBBQUHAQEE\n&quot;
-&quot;cDBuMC0GCCsGAQUFBzABhiFodHRwOi8vRVZTZWN1cmUtb2NzcC52ZXJpc2lnbi5j\n&quot;
-&quot;b20wPQYIKwYBBQUHMAKGMWh0dHA6Ly9FVlNlY3VyZS1haWEudmVyaXNpZ24uY29t\n&quot;
-&quot;L0VWU2VjdXJlMjAwNi5jZXIwDQYJKoZIhvcNAQEFBQADggEBAD0wO+rooUrIM4qp\n&quot;
-&quot;PHhp+hkXK6WMQ2qzGOmbMcZjw0govg5vkzkefPDryIXXbrF8mRagiJNMSfNaWWeh\n&quot;
-&quot;Cj41OV24EdUl0OLbFxNzcvub599zRs/apfaRLTfsmlmOgi0/YP305i+3tJ2ll946\n&quot;
-&quot;P+qV1wXnXqTqEdIl4Ys3+1HmDCdTB1hoDwAAzqRVUXZ5+iiwPAU7R/LTHfMjV1ke\n&quot;
-&quot;8jtNFfrorlZMCfVH/7eEnHJvVjOJt+YFe4aFMzE+DfuYIK7MH+olC2v79kBwbnEQ\n&quot;
-&quot;fvHMA9gFwOYLUBBdSfcocp8EKZ+mRlNPGR/3LBrPeaQQ0GZEkxzRK+v/aNTuiYfr\n&quot;
-&quot;oFXtrg0=\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
-
-const char *im =
-&quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIF5DCCBMygAwIBAgIQW3dZxheE4V7HJ8AylSkoazANBgkqhkiG9w0BAQUFADCB\n&quot;
-&quot;yjELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;
-&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTowOAYDVQQLEzEoYykgMjAwNiBWZXJp\n&quot;
-&quot;U2lnbiwgSW5jLiAtIEZvciBhdXRob3JpemVkIHVzZSBvbmx5MUUwQwYDVQQDEzxW\n&quot;
-&quot;ZXJpU2lnbiBDbGFzcyAzIFB1YmxpYyBQcmltYXJ5IENlcnRpZmljYXRpb24gQXV0\n&quot;
-&quot;aG9yaXR5IC0gRzUwHhcNMDYxMTA4MDAwMDAwWhcNMTYxMTA3MjM1OTU5WjCBujEL\n&quot;
-&quot;MAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQLExZW\n&quot;
-&quot;ZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2UgYXQg\n&quot;
-&quot;aHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMrVmVy\n&quot;
-&quot;aVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTCCASIwDQYJ\n&quot;
-&quot;KoZIhvcNAQEBBQADggEPADCCAQoCggEBAJjboFXrnP0XeeOabhQdsVuYI4cWbod2\n&quot;
-&quot;nLU4O7WgerQHYwkZ5iqISKnnnbYwWgiXDOyq5BZpcmIjmvt6VCiYxQwtt9citsj5\n&quot;
-&quot;OBfH3doxRpqUFI6e7nigtyLUSVSXTeV0W5K87Gws3+fBthsaVWtmCAN/Ra+aM/EQ\n&quot;
-&quot;wGyZSpIkMQht3QI+YXZ4eLbtfjeubPOJ4bfh3BXMt1afgKCxBX9ONxX/ty8ejwY4\n&quot;
-&quot;P1C3aSijtWZfNhpSSENmUt+ikk/TGGC+4+peGXEFv54cbGhyJW+ze3PJbb0S/5tB\n&quot;
-&quot;Ml706H7FC6NMZNFOvCYIZfsZl1h44TO/7Wg+sSdFb8Di7Jdp91zT91ECAwEAAaOC\n&quot;
-&quot;AdIwggHOMB0GA1UdDgQWBBT8ilC6nrklWntVhU+VAGOP6VhrQzASBgNVHRMBAf8E\n&quot;
-&quot;CDAGAQH/AgEAMD0GA1UdIAQ2MDQwMgYEVR0gADAqMCgGCCsGAQUFBwIBFhxodHRw\n&quot;
-&quot;czovL3d3dy52ZXJpc2lnbi5jb20vY3BzMD0GA1UdHwQ2MDQwMqAwoC6GLGh0dHA6\n&quot;
-&quot;Ly9FVlNlY3VyZS1jcmwudmVyaXNpZ24uY29tL3BjYTMtZzUuY3JsMA4GA1UdDwEB\n&quot;
-&quot;/wQEAwIBBjARBglghkgBhvhCAQEEBAMCAQYwbQYIKwYBBQUHAQwEYTBfoV2gWzBZ\n&quot;
-&quot;MFcwVRYJaW1hZ2UvZ2lmMCEwHzAHBgUrDgMCGgQUj+XTGoasjY5rw8+AatRIGCx7\n&quot;
-&quot;GS4wJRYjaHR0cDovL2xvZ28udmVyaXNpZ24uY29tL3ZzbG9nby5naWYwKQYDVR0R\n&quot;
-&quot;BCIwIKQeMBwxGjAYBgNVBAMTEUNsYXNzM0NBMjA0OC0xLTQ3MD0GCCsGAQUFBwEB\n&quot;
-&quot;BDEwLzAtBggrBgEFBQcwAYYhaHR0cDovL0VWU2VjdXJlLW9jc3AudmVyaXNpZ24u\n&quot;
-&quot;Y29tMB8GA1UdIwQYMBaAFH/TZafC3ey78DAJ80M5+gKvMzEzMA0GCSqGSIb3DQEB\n&quot;
-&quot;BQUAA4IBAQCWovp/5j3t1CvOtxU/wHIDX4u6FpAl98KD2Md1NGNoElMMU4l7yVYJ\n&quot;
-&quot;p8M2RE4O0GJis4b66KGbNGeNUyIXPv2s7mcuQ+JdfzOE8qJwwG6Cl8A0/SXGI3/t\n&quot;
-&quot;5rDFV0OEst4t8dD2SB8UcVeyrDHhlyQjyRNddOVG7wl8nuGZMQoIeRuPcZ8XZsg4\n&quot;
-&quot;z+6Ml7YGuXNG5NOUweVgtSV1LdlpMezNlsOjdv3odESsErlNv1HoudRETifLriDR\n&quot;
-&quot;fip8tmNHnna6l9AW5wtsbfdDbzMLKTB3+p359U64drPNGLT5IO892+bKrZvQTtKH\n&quot;
-&quot;qQ2mRHNQ3XBb7a1+Srwi1agm5MKFIA3Z\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
-
-c_cert.raw_cert = (unsigned char *) ee;
-c_cert.cert_size = strlen(ee);
-c_cert.data_format = CKMC_FORM_PEM;
-
-c_cert1.raw_cert = (unsigned char *) im;
-c_cert1.cert_size = strlen(im);
-c_cert1.data_format = CKMC_FORM_PEM;
-
-untrustedcerts.cert = &amp;c_cert1;
-untrustedcerts.next = NULL;
-
-ret = ckmc_get_cert_chain(&amp;c_cert, &amp;untrustedcerts, &amp;cert_chain_list);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-next=cert_chain_list;
-do
-{
-&nbsp;&nbsp;&nbsp;current = next;
-&nbsp;&nbsp;&nbsp;next = current-&gt;next;
-}
-while(next != NULL);
-
-ckmc_cert_list_all_free(cert_chain_list); // Called when the list is no longer needed
-</pre></li>
-
-<li><p>Get a certificate chain with aliases of untrusted CA certificates.</p>
-<p>The key manager verifies a certificate chain and returns it. The trusted root certificate of the chain must exist in the system certificate storage.</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-char* password = NULL;
-const char *ca_alias = &quot;untrusted_ca_cert1&quot;;
-ckmc_policy_s test_policy;
-
-ckmc_cert_s c_cert; // For a user certificate
-ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate
-ckmc_alias_list_s untrustedcerts; // Linked list of untrusted CA certificate&#39;s alias
-ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain
-
-int cnt = 0;
-ckmc_cert_list_s *current;
-ckmc_cert_list_s *next;
-
-const char * ee =
-&quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIF0TCCBLmgAwIBAgIQaPGTP4aS7Ut/WDNaBzdQrDANBgkqhkiG9w0BAQUFADCB\n&quot;
-&quot;ujELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;
-&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\n&quot;
-&quot;YXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMr\n&quot;
-&quot;VmVyaVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTAeFw0x\n&quot;
-&quot;NDAyMjAwMDAwMDBaFw0xNTAyMjAyMzU5NTlaMIHmMRMwEQYLKwYBBAGCNzwCAQMT\n&quot;
-&quot;AlBMMR0wGwYDVQQPExRQcml2YXRlIE9yZ2FuaXphdGlvbjETMBEGA1UEBRMKMDAw\n&quot;
-&quot;MDAyNTIzNzELMAkGA1UEBhMCUEwxDzANBgNVBBEUBjAwLTk1MDEUMBIGA1UECBML\n&quot;
-&quot;bWF6b3dpZWNraWUxETAPBgNVBAcUCFdhcnN6YXdhMRYwFAYDVQQJFA1TZW5hdG9y\n&quot;
-&quot;c2thIDE4MRMwEQYDVQQKFAptQmFuayBTLkEuMQwwCgYDVQQLFANESU4xGTAXBgNV\n&quot;
-&quot;BAMUEHd3dy5tYmFuay5jb20ucGwwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\n&quot;
-&quot;AoIBAQDph6x8V6xUW/+651+qHF+UmorH9uaz2ZrX2bIWiMKIJFmpDDHlxcapKkqE\n&quot;
-&quot;BV04is83aiCpqKtc2ZHy2g4Hpj1eSF5BP2+OAlo0YUQZPIeRRdiMjmeAxw/ncBDx\n&quot;
-&quot;9rQBuCJ4XTD6cqQox5SI0TASOZ+wyAEjbDRXzL73XqRAFZ1LOpb2ONkolS+RutMB\n&quot;
-&quot;vshvCsWPeNe7eGLuOh6DyC6r1vX9xhw3xnjM2mTSvmtimgzSLacNGKqRrsucUgcb\n&quot;
-&quot;0+O5C2jZAtAMLyZksL92cxmWbtVzUYzem4chjHu5cRxUlPNzUJWrrczueB7Ip4A8\n&quot;
-&quot;aQuFMfNXYc0x+WLWjy//urypMKjhAgMBAAGjggGjMIIBnzAbBgNVHREEFDASghB3\n&quot;
-&quot;d3cubWJhbmsuY29tLnBsMAkGA1UdEwQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud\n&quot;
-&quot;JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjBEBgNVHSAEPTA7MDkGC2CGSAGG+EUB\n&quot;
-&quot;BxcGMCowKAYIKwYBBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMw\n&quot;
-&quot;HQYDVR0OBBYEFN37iGaS7mZnENxZ9FGqNLR+QgoMMB8GA1UdIwQYMBaAFPyKULqe\n&quot;
-&quot;uSVae1WFT5UAY4/pWGtDMEIGA1UdHwQ7MDkwN6A1oDOGMWh0dHA6Ly9FVlNlY3Vy\n&quot;
-&quot;ZS1jcmwudmVyaXNpZ24uY29tL0VWU2VjdXJlMjAwNi5jcmwwfAYIKwYBBQUHAQEE\n&quot;
-&quot;cDBuMC0GCCsGAQUFBzABhiFodHRwOi8vRVZTZWN1cmUtb2NzcC52ZXJpc2lnbi5j\n&quot;
-&quot;b20wPQYIKwYBBQUHMAKGMWh0dHA6Ly9FVlNlY3VyZS1haWEudmVyaXNpZ24uY29t\n&quot;
-&quot;L0VWU2VjdXJlMjAwNi5jZXIwDQYJKoZIhvcNAQEFBQADggEBAD0wO+rooUrIM4qp\n&quot;
-&quot;PHhp+hkXK6WMQ2qzGOmbMcZjw0govg5vkzkefPDryIXXbrF8mRagiJNMSfNaWWeh\n&quot;
-&quot;Cj41OV24EdUl0OLbFxNzcvub599zRs/apfaRLTfsmlmOgi0/YP305i+3tJ2ll946\n&quot;
-&quot;P+qV1wXnXqTqEdIl4Ys3+1HmDCdTB1hoDwAAzqRVUXZ5+iiwPAU7R/LTHfMjV1ke\n&quot;
-&quot;8jtNFfrorlZMCfVH/7eEnHJvVjOJt+YFe4aFMzE+DfuYIK7MH+olC2v79kBwbnEQ\n&quot;
-&quot;fvHMA9gFwOYLUBBdSfcocp8EKZ+mRlNPGR/3LBrPeaQQ0GZEkxzRK+v/aNTuiYfr\n&quot;
-&quot;oFXtrg0=\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
-
-const char *im =
-&quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIF5DCCBMygAwIBAgIQW3dZxheE4V7HJ8AylSkoazANBgkqhkiG9w0BAQUFADCB\n&quot;
-&quot;yjELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;
-&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTowOAYDVQQLEzEoYykgMjAwNiBWZXJp\n&quot;
-&quot;U2lnbiwgSW5jLiAtIEZvciBhdXRob3JpemVkIHVzZSBvbmx5MUUwQwYDVQQDEzxW\n&quot;
-&quot;ZXJpU2lnbiBDbGFzcyAzIFB1YmxpYyBQcmltYXJ5IENlcnRpZmljYXRpb24gQXV0\n&quot;
-&quot;aG9yaXR5IC0gRzUwHhcNMDYxMTA4MDAwMDAwWhcNMTYxMTA3MjM1OTU5WjCBujEL\n&quot;
-&quot;MAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQLExZW\n&quot;
-&quot;ZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2UgYXQg\n&quot;
-&quot;aHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMrVmVy\n&quot;
-&quot;aVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTCCASIwDQYJ\n&quot;
-&quot;KoZIhvcNAQEBBQADggEPADCCAQoCggEBAJjboFXrnP0XeeOabhQdsVuYI4cWbod2\n&quot;
-&quot;nLU4O7WgerQHYwkZ5iqISKnnnbYwWgiXDOyq5BZpcmIjmvt6VCiYxQwtt9citsj5\n&quot;
-&quot;OBfH3doxRpqUFI6e7nigtyLUSVSXTeV0W5K87Gws3+fBthsaVWtmCAN/Ra+aM/EQ\n&quot;
-&quot;wGyZSpIkMQht3QI+YXZ4eLbtfjeubPOJ4bfh3BXMt1afgKCxBX9ONxX/ty8ejwY4\n&quot;
-&quot;P1C3aSijtWZfNhpSSENmUt+ikk/TGGC+4+peGXEFv54cbGhyJW+ze3PJbb0S/5tB\n&quot;
-&quot;Ml706H7FC6NMZNFOvCYIZfsZl1h44TO/7Wg+sSdFb8Di7Jdp91zT91ECAwEAAaOC\n&quot;
-&quot;AdIwggHOMB0GA1UdDgQWBBT8ilC6nrklWntVhU+VAGOP6VhrQzASBgNVHRMBAf8E\n&quot;
-&quot;CDAGAQH/AgEAMD0GA1UdIAQ2MDQwMgYEVR0gADAqMCgGCCsGAQUFBwIBFhxodHRw\n&quot;
-&quot;czovL3d3dy52ZXJpc2lnbi5jb20vY3BzMD0GA1UdHwQ2MDQwMqAwoC6GLGh0dHA6\n&quot;
-&quot;Ly9FVlNlY3VyZS1jcmwudmVyaXNpZ24uY29tL3BjYTMtZzUuY3JsMA4GA1UdDwEB\n&quot;
-&quot;/wQEAwIBBjARBglghkgBhvhCAQEEBAMCAQYwbQYIKwYBBQUHAQwEYTBfoV2gWzBZ\n&quot;
-&quot;MFcwVRYJaW1hZ2UvZ2lmMCEwHzAHBgUrDgMCGgQUj+XTGoasjY5rw8+AatRIGCx7\n&quot;
-&quot;GS4wJRYjaHR0cDovL2xvZ28udmVyaXNpZ24uY29tL3ZzbG9nby5naWYwKQYDVR0R\n&quot;
-&quot;BCIwIKQeMBwxGjAYBgNVBAMTEUNsYXNzM0NBMjA0OC0xLTQ3MD0GCCsGAQUFBwEB\n&quot;
-&quot;BDEwLzAtBggrBgEFBQcwAYYhaHR0cDovL0VWU2VjdXJlLW9jc3AudmVyaXNpZ24u\n&quot;
-&quot;Y29tMB8GA1UdIwQYMBaAFH/TZafC3ey78DAJ80M5+gKvMzEzMA0GCSqGSIb3DQEB\n&quot;
-&quot;BQUAA4IBAQCWovp/5j3t1CvOtxU/wHIDX4u6FpAl98KD2Md1NGNoElMMU4l7yVYJ\n&quot;
-&quot;p8M2RE4O0GJis4b66KGbNGeNUyIXPv2s7mcuQ+JdfzOE8qJwwG6Cl8A0/SXGI3/t\n&quot;
-&quot;5rDFV0OEst4t8dD2SB8UcVeyrDHhlyQjyRNddOVG7wl8nuGZMQoIeRuPcZ8XZsg4\n&quot;
-&quot;z+6Ml7YGuXNG5NOUweVgtSV1LdlpMezNlsOjdv3odESsErlNv1HoudRETifLriDR\n&quot;
-&quot;fip8tmNHnna6l9AW5wtsbfdDbzMLKTB3+p359U64drPNGLT5IO892+bKrZvQTtKH\n&quot;
-&quot;qQ2mRHNQ3XBb7a1+Srwi1agm5MKFIA3Z\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
-
-c_cert.raw_cert = (unsigned char *) ee;
-c_cert.cert_size = strlen(ee);
-c_cert.data_format = CKMC_FORM_PEM;
-
-c_cert1.raw_cert = (unsigned char *) im;
-c_cert1.cert_size = strlen(im);
-c_cert1.data_format = CKMC_FORM_PEM;
-
-test_policy.password = password;
-test_policy.extractable = true;
-
-ret = ckmc_save_cert(ca_alias, c_cert1, test_policy);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-untrustedcerts.alias = (char *)ca_alias;
-untrustedcerts.next = NULL;
-
-ret = ckmc_get_cert_chain_with_alias(&amp;c_cert, &amp;untrustedcerts, &amp;cert_chain_list);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-next=cert_chain_list;
-do
-{
-&nbsp;&nbsp;&nbsp;current = next;
-&nbsp;&nbsp;&nbsp;next = current-&gt;next;
-}
-while(next != NULL);
-
-ckmc_cert_list_all_free(cert_chain_list); // Called when the list is no longer needed
-</pre></li></ul>
-
-<h2 id="pkcs" name="pkcs">Loading a Certificate or a PKCS#12 File</h2>
-
-<p>To load certificates (from a file with the DER or PEM format) or a private key, a certificate, or CA certificates (from a PKCS#12 file):</p>
-
-<ul><li><p>Load from a certificate file.</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_cert_s *pcert;
-// defined_media_storage_directory can be obtained with the storage_get_directory() function
-const char *file_name = &quot;&lt;defined_media_storage_directory&gt;/ckmc_test_cert.pem&quot;; 
-
-ret = ckmc_load_cert_from_file(file_name, &amp;pcert);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-dlog_print(DLOG_INFO, LOG_TAG, &quot;cert size =%d\n&quot;, pcert-&gt;cert_size);
-
-ckmc_cert_free(pcert); // Called when the certificate is no longer needed
-</pre></li>
-
-<li><p>Load from a PKCS#12 file.</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-ckmc_key_s *private_key = NULL;
-ckmc_cert_s *cert = NULL;
-ckmc_cert_list_s *ca_cert_list = NULL;
-// defined_media_storage_directory can be obtained with the storage_get_directory() function
-const char *p12file = &quot;&lt;defined_media_storage_directory&gt;/ckmc_p12_test.p12&quot;; 
-const char *password = &quot;password&quot;;  // PKCS#12 file can be protected by a password
-
-ret = ckmc_load_from_pkcs12_file(p12file, password, &amp;private_key, &amp;cert, &amp;ca_cert_list);
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-if (private_key != NULL)
-{
-&nbsp;&nbsp;&nbsp;// Check a private key
-}
-
-if (cert != NULL)
-{
-&nbsp;&nbsp;&nbsp;// Check a certificate
-
-}
-
-int cnt = 0;
-ckmc_cert_list_s *tmp_list = ca_cert_list;
-while(tmp_list!= NULL)
-{
-&nbsp;&nbsp;&nbsp;// Check a certificate list
-
-&nbsp;&nbsp;&nbsp;tmp_list = tmp_list -&gt;next;
-}
-
-ckmc_key_free(private_key); // Called when the key is no longer needed
-ckmc_cert_free(cert); // Called when the certificate is no longer needed
-ckmc_cert_list_all_free(ca_cert_list); // Called when the list is no longer needed
-</pre></li></ul>
-
-<h2 id="access" name="access">Implementing Access Control</h2>
-
-<p>To implement access control rules for each individual client&#39;s data, certificates, and keys:</p>
-
-<ol><li><p>Store test data:</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-char* password = NULL;
-ckmc_raw_buffer_s test_data;
-const char *alias = &quot;targetData&quot;;
-ckmc_policy_s test_policy;
-
-const char *char_bin_data = &quot;Access control test Data&quot;;
-
-test_policy.password = password;
-test_policy.extractable = true;
-
-test_data.data = (unsigned char *) char_bin_data;
-test_data.size = strlen(char_bin_data);
-ret = ckmc_save_data(alias, test_data, test_policy);
-if (CKMC_ERROR_NONE != ret)
-
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li><p>Set a rule to allow access:</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-const char *target1 = &quot;accessor-allow-1&quot;;
-const char *target2 = &quot;accessor-allow-2&quot;;
-const char *alias = &quot;targetData&quot;;
-
-ret = ckmc_allow_access(alias, target1, CKMC_AR_READ); // Only allow reading data
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-ret = ckmc_allow_access(alias, target2, CKMC_AR_READ_REMOVE); // Allow reading and deleting data
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-
-<li><p>Set a rule to deny access:</p>
-<pre class="prettyprint">
-int ret = CKMC_ERROR_NONE;
-
-const char *target = &quot;denied-accessor&quot;;
-const char *alias = &quot;targetData&quot;;
-
-ret = ckmc_allow_access(alias, target, CKMC_AR_READ); // Allow the target user to a read (alias)
-if (CKMC_ERROR_NONE != ret)
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-
-ret = ckmc_deny_access(alias, target); // Deny the target user access to data (alias)
-if (CKMC_ERROR_NONE != ret)
-
-{
-&nbsp;&nbsp;&nbsp;// Error handling
-}
-</pre></li>
-</ol>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script> 
- 
- </body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+       <title>Key Manager: Using Keys and Certificates, and Implementing Access Control</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#initialize">Initializing the Key Manager</a></li>\r
+                       <li>Repository management\r
+                               <ul class="toc">\r
+                                       <li><a href="#savingkey">Saving, Getting, or Removing a Key</a></li>\r
+                                       <li><a href="#savingcert">Saving, Getting, or Removing a Certificate</a></li>\r
+                                       <li><a href="#savingdata">Saving, Getting, or Removing Data</a></li>\r
+                               </ul>\r
+                       </li>\r
+                       <li><a href="#creatingkey">Creating Key Pairs</a></li>\r
+                       <li><a href="#creatingsignat">Creating or Verifying Signatures</a></li>\r
+                       <li><a href="#verifying">Verifying or Getting a Certificate Chain</a></li>\r
+                       <li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a></li>\r
+                       <li><a href="#access">Implementing Access Control</a></li>\r
+               </ul>           \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.guides/html/native/security/key_manager_n.htm">Key Manager Guide</a></li>\r
+                       <li> <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Mobile Native</a></li>\r
+                       <li> <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Key Manager: Using Keys and Certificates, and Implementing Access Control</h1>\r
+\r
+\r
+<p>This tutorial demonstrates how you can use the key manager to create a secure repository for keys, certificates, and sensitive data.</p>\r
+\r
+\r
+       <h2>Warm-up</h2>\r
+       <p>Become familiar with the Key Manager API basics by learning about:</p>\r
+<ul>\r
+<li><a href="#initialize">Initializing the Key Manager</a>\r
+<p>Define the header file and privileges required to use the key manager.</p></li>\r
+\r
+<li>Repository management\r
+       <ul>\r
+               <li><a href="#savingkey">Saving, Getting, or Removing a Key</a>\r
+               <p>Store, get, or remove a key.</p></li>\r
+\r
+               <li><a href="#savingcert">Saving, Getting, or Removing a Certificate</a>\r
+               <p>Store, get, or remove a certificate.</p></li>\r
+\r
+               <li><a href="#savingdata">Saving, Getting, or Removing Data</a>\r
+               <p>Store, get, or remove data.</p></li>\r
+       </ul>\r
+</li>\r
+<li><a href="#creatingkey">Creating Key Pairs</a>\r
+<p>Create an RSA/ECDSA private or public key pair and store it inside the key manager.</p></li>\r
+\r
+<li><a href="#creatingsignat">Creating or Verifying Signatures</a>\r
+<p>Create or verify a signature on a given message.</p></li>\r
+\r
+<li><a href="#verifying">Verifying or Getting a Certificate Chain</a>\r
+<p>Verify a certificate chain and get it.</p></li>\r
+\r
+<li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a>\r
+<p>Load a certificate or key from a certificate file or a <span style="font-family: Courier New,Courier,monospace;">PKCS#12</span> file.</p></li>\r
+\r
+<li><a href="#access">Implementing Access Control</a>\r
+<p>Set access control rules for each individual client&#39;s data, certificates, and keys.</p></li>\r
+</ul>\r
+               \r
+<h2 id="initialize" name="initialize">Initializing the Key Manager</h2>\r
+\r
+<p>To define the header file and privileges required to use the key manager:</p>\r
+<ol>           \r
+<li><p>To use the Key Manager privileged API, declare the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span> privilege in the <span style="font-family: Courier New,Courier,monospace;">manifest.xml</span> file of the application package.</p></li>\r
+<li><p>To use the functions and data types of the Key Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;ckmc/ckmc-manager.h&gt;</span> header file in your application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;ckmc/ckmc-manager.h&gt;\r
+</pre></li></ol>\r
+\r
+<h2 id="savingkey" name="savingkey">Saving, Getting, or Removing a Key</h2>\r
+\r
+<p>To store, remove, and retrieve client keys from the key manager:</p>\r
+\r
+<ol><li>Store a new key.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_key_s test_key;\r
+ckmc_policy_s store_policy;\r
+char* alias= &quot;mykey&quot;;\r
+char* key_password = NULL;\r
+\r
+char* binary_key = &quot;-----BEGIN PUBLIC KEY-----\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;zQIDAQAB\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;-----END PUBLIC KEY-----&quot;;\r
+\r
+test_key.raw_key =  (unsigned char *) binary_key;\r
+test_key.key_size = strlen(binary_key);\r
+test_key.key_type = CKMC_KEY_NONE; // The real key type is determined by the key manager\r
+test_key.password = NULL; // This means the binary_key is not encrypted with any password\r
+\r
+store_policy.password = key_password; // NULL means that the test_key is not encrypted with a per key password\r
+store_policy.extractable = true; // This means that the key value is extractable\r
+\r
+ret = ckmc_save_key(alias, test_key, store_policy);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li>Get a key from the key manager.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_key_s *test_key;\r
+char* alias= &quot;mykey&quot;;\r
+char* key_password = NULL;\r
+\r
+ret = ckmc_get_key(alias, key_password, &amp;test_key);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+dlog_print(DLOG_INFO, LOG_TAG, &quot;key size =%d\n&quot;, test_key-&gt;key_size);\r
+\r
+ckmc_key_free(test_key); // Called when the key is no longer needed\r
+</pre></li>\r
+\r
+<li>Get the key alias list.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_alias_list_s *alias_list;\r
+ckmc_alias_list_s *plist;\r
+ckmc_key_s *test_key;\r
+char* key_password = NULL;\r
+int count_list = 0;\r
+\r
+ret = ckmc_get_key_alias_list(&amp;alias_list);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+plist = alias_list;\r
+do\r
+{\r
+&nbsp;&nbsp;&nbsp;ckmc_get_key(plist-&gt;alias, key_password, &amp;test_key);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th key : key size =%d\n&quot;, ++count_list, test_key-&gt;key_size);\r
+&nbsp;&nbsp;&nbsp;ckmc_key_free(test_key);\r
+&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;\r
+}\r
+while(plist != NULL);\r
+\r
+ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed.\r
+</pre></li>\r
+<li>Remove the key.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+const char* alias= &quot;mykey&quot;;\r
+\r
+ret = ckmc_remove_key(alias);\r
+if (CKMC_ERROR_NONE != ret) \r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li></ol>\r
+\r
+<h2 id="savingcert" name="savingcert">Saving, Getting, or Removing a Certificate</h2>\r
+\r
+<p>To store, remove, or retrieve the client certificate from the key manager:</p>\r
+\r
+<ol><li>Store a new certificate.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+char* password = NULL;\r
+ckmc_cert_s cert;\r
+const char *alias = &quot;myCert&quot;;\r
+ckmc_policy_s test_policy;\r
+\r
+const char *certPem = &quot;-----BEGIN CERTIFICATE-----\n&quot;\r
+&quot;MIIEgDCCA2igAwIBAgIIcjtBYJGQtOAwDQYJKoZIhvcNAQEFBQAwSTELMAkGA1UE\n&quot;\r
+&quot;BhMCVVMxEzARBgNVBAoTCkdvb2dsZSBJbmMxJTAjBgNVBAMTHEdvb2dsZSBJbnRl\n&quot;\r
+&quot;cm5ldCBBdXRob3JpdHkgRzIwHhcNMTQwNTIyMTEyOTQyWhcNMTQwODIwMDAwMDAw\n&quot;\r
+&quot;WjBtMQswCQYDVQQGEwJVUzETMBEGA1UECAwKQ2FsaWZvcm5pYTEWMBQGA1UEBwwN\n&quot;\r
+&quot;TW91bnRhaW4gVmlldzETMBEGA1UECgwKR29vZ2xlIEluYzEcMBoGA1UEAwwTYWNj\n&quot;\r
+&quot;b3VudHMuZ29vZ2xlLmNvbTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB\n&quot;\r
+&quot;ALtlLWVWPN3q3bSEQl1Z97gPdgl5vbgJOZSAr0ZY0tJCuFLBbUKetJWryyE+5KpG\n&quot;\r
+&quot;gMMpLS4v8/bvXaZc6mAs+RfAqGM24C3vQg5hPnj4dflnhL0WiOCZBurm1tV4oexk\n&quot;\r
+&quot;HLXs3jr/jpnb738AQpj8zZ9a4VEBuHJRZALnWZ/XhqU+dvYomAoRQNuL5OhkT7uu\n&quot;\r
+&quot;d0NKJL9JjYLyQglGgE2sVsWv2kj7EO/P9Q6NEKt9BGmhMsFvtfeKUaymynaxpR1g\n&quot;\r
+&quot;wEPlqYvB38goh1dIOgVLT0OVyLImeg5Mdwar/8c1U0OYhLOc6PJapOZAfUkE+3+w\n&quot;\r
+&quot;xYt8AChLN1b5szOwInrCVpECAwEAAaOCAUYwggFCMB0GA1UdJQQWMBQGCCsGAQUF\n&quot;\r
+&quot;BwMBBggrBgEFBQcDAjAeBgNVHREEFzAVghNhY2NvdW50cy5nb29nbGUuY29tMGgG\n&quot;\r
+&quot;CCsGAQUFBwEBBFwwWjArBggrBgEFBQcwAoYfaHR0cDovL3BraS5nb29nbGUuY29t\n&quot;\r
+&quot;L0dJQUcyLmNydDArBggrBgEFBQcwAYYfaHR0cDovL2NsaWVudHMxLmdvb2dsZS5j\n&quot;\r
+&quot;b20vb2NzcDAdBgNVHQ4EFgQU0/UtToEtNIfwDwHuYGuVKcj0xK8wDAYDVR0TAQH/\n&quot;\r
+&quot;BAIwADAfBgNVHSMEGDAWgBRK3QYWG7z2aLV29YG2u2IaulqBLzAXBgNVHSAEEDAO\n&quot;\r
+&quot;MAwGCisGAQQB1nkCBQEwMAYDVR0fBCkwJzAloCOgIYYfaHR0cDovL3BraS5nb29n\n&quot;\r
+&quot;bGUuY29tL0dJQUcyLmNybDANBgkqhkiG9w0BAQUFAAOCAQEAcGNI/X9f0g+7ij0o\n&quot;\r
+&quot;ehLpk6vxSMQGrmOZ4+PG/MC9SLClCkt7zJkfU7erZnyVXyxCpwlljq+Wk9YTPUOq\n&quot;\r
+&quot;xD/V2ikQVSAANoxGJFO9UoL5jzWusPhKKv8CcM7fuiERz8K+CfBcqfxbgI5rH0g5\n&quot;\r
+&quot;dYclmLC81cJ/08i+9Nltvxv69Y3hGfEICT6K+EdSxwnQzOhpMZmvxZsIj+d6CVNa\n&quot;\r
+&quot;9ICYgUthsNQVWzrIs5wknpjjZ9liDMwJX0vu8A0rce4X/Lna5hh2bW9igz2iP5WM\n&quot;\r
+&quot;9fuwdbTw4y3jfPQgszU4YZxWxhMzccxe058Qx1tLndAknBQEBesQjXytVQpuM1SV\n&quot;\r
+&quot;rHva8A==\n&quot;\r
+&quot;-----END CERTIFICATE-----\n&quot;;\r
+\r
+test_policy.password = password;\r
+test_policy.extractable = true;\r
+\r
+cert.raw_cert =  (unsigned char *) certPem;\r
+cert.cert_size = strlen(certPem);\r
+cert.data_format = CKMC_FORM_PEM;\r
+\r
+ret = ckmc_save_cert(alias, cert, test_policy);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li>Get a certificate from the key manager.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_cert_s *test_cert;\r
+char* alias= &quot;myCert&quot;;\r
+char* password = NULL;\r
+\r
+ret = ckmc_get_cert(alias, password, &amp;test_cert);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+dlog_print(DLOG_INFO, LOG_TAG, &quot;cert size =%d\n&quot;, test_cert-&gt;cert_size);\r
+\r
+ckmc_cert_free(test_cert); // Called when the certificate is no longer needed\r
+</pre></li>\r
+<li>Get the certificate alias list.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_alias_list_s *alias_list;\r
+ckmc_alias_list_s *plist;\r
+ckmc_cert_s *test_cert;\r
+char* password = NULL;\r
+int count_list = 0;\r
+\r
+ret = ckmc_get_cert_alias_list(&amp;alias_list);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+plist = alias_list;\r
+do\r
+{\r
+&nbsp;&nbsp;&nbsp;ckmc_get_cert(plist-&gt;alias, password, &amp;test_cert);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th cert : cert size =%d\n&quot;, ++count_list, test_cert-&gt;cert_size);\r
+&nbsp;&nbsp;&nbsp;ckmc_cert_free(test_cert);\r
+&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;\r
+}\r
+while(plist != NULL);\r
+\r
+ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed\r
+</pre></li>\r
+\r
+<li>Remove the certificate.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+const char* alias= &quot;myCert&quot;;\r
+\r
+ret = ckmc_remove_cert(alias);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li></ol>\r
+\r
+<h2 id="savingdata" name="savingdata">Saving, Getting, or Removing Data</h2>\r
+\r
+<p>To store, remove, or retrieve client data on or from the key manager:</p>\r
+\r
+<ol><li>Store new data.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+char* password = NULL;\r
+ckmc_raw_buffer_s test_data;\r
+const char *alias = &quot;myData&quot;;\r
+ckmc_policy_s test_policy;\r
+\r
+const char *char_bin_data = &quot;My Binary Data&quot;;\r
+\r
+test_policy.password = password;\r
+test_policy.extractable = true;\r
+\r
+test_data.data = (unsigned char *) char_bin_data;\r
+test_data.size = strlen(char_bin_data);\r
+ret = ckmc_save_data(alias, test_data, test_policy);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li>Get data from the key manager.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+char* password = NULL;\r
+ckmc_raw_buffer_s *test_data;\r
+const char *alias = &quot;myData&quot;;\r
+\r
+ret = ckmc_get_data(alias, password, &amp;test_data);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+dlog_print(DLOG_INFO, LOG_TAG, &quot;data size =%d\n&quot;, test_data-&gt; size);\r
+\r
+ckmc_buffer_free(test_data); // Called when the buffer is no longer needed\r
+</pre></li>\r
+\r
+<li>Get the data alias list.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_alias_list_s *alias_list;\r
+ckmc_alias_list_s *plist;\r
+ckmc_raw_buffer_s *test_data;\r
+char* password = NULL;\r
+int count_list = 0;\r
+\r
+ret = ckmc_get_data_alias_list(&amp;alias_list);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+plist = alias_list;\r
+do\r
+{\r
+&nbsp;&nbsp;&nbsp;ckmc_get_data(plist-&gt;alias, password, &amp;test_data);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th data : data size =%d\n&quot;, ++count_list, test_data-&gt;size);\r
+&nbsp;&nbsp;&nbsp;ckmc_buffer_free(test_data);\r
+&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;\r
+}\r
+while(plist != NULL);\r
+\r
+ckmc_alias_list_all_free(alias_list); // Called when the list is no longer needed\r
+</pre></li>\r
+<li>Remove data.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+const char* alias= &quot;myData&quot;;\r
+\r
+ret = ckmc_remove_data(alias);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li></ol>\r
+\r
+<h2 id="creatingkey" name="creatingkey">Creating Key Pairs</h2>\r
+\r
+<p>To generate asymmetric key pairs - the RSA, ECDSA, or DSA key pair:</p>\r
+\r
+<ul><li><p>Create the RSA key pair:</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+size_t size = 2048; // Key Manager supports 1024, 2048, 4096\r
+const char *private_key_alias = &quot;PRV_RSA1&quot;;\r
+const char *public_key_alias = &quot;PUB_RSA1&quot;;\r
+ckmc_policy_s policy_private_key;\r
+ckmc_policy_s policy_public_key;\r
+\r
+// This private key is encrypted with a password additionally\r
+policy_private_key.password = (char *)&quot;pri_password&quot;;\r
+policy_private_key.extractable = false; // This key cannot be extracted from the key manager\r
+\r
+policy_public_key.password = NULL;\r
+policy_public_key.extractable = true;\r
+\r
+ret = ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li><p>Create the ECDSA key pair:</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_ec_type_e ectype = CKMC_EC_PRIME192V1;\r
+const char *private_key_alias = &quot;PRV_ECDSA1&quot;;\r
+const char *public_key_alias = &quot;PUB_ECDSA1&quot;;\r
+ckmc_policy_s policy_private_key;\r
+ckmc_policy_s policy_public_key;\r
+\r
+// This private key is encrypted with the password additionally\r
+policy_private_key.password = (char *)&quot;pri_password&quot;;\r
+policy_private_key.extractable = false; // This key cannot be extracted from the key manager\r
+\r
+policy_public_key.password = NULL;\r
+policy_public_key.extractable = true;\r
+\r
+ret = ckmc_create_key_pair_ecdsa(ectype, private_key_alias, public_key_alias, policy_private_key, policy_public_key);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li><p>Create the DSA  key pair:</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+size_t size = 1024;\r
+const char *private_key_alias = &quot;PRV_DSA1&quot;;\r
+const char *public_key_alias = &quot;PUB-DSA1&quot;;\r
+ckmc_policy_s policy_private_key;\r
+ckmc_policy_s policy_public_key;\r
+\r
+// This private key is encrypted with a password additionally\r
+policy_private_key.password = (char *)&quot;pri_password&quot;;\r
+policy_private_key.extractable = false;\r
+\r
+policy_public_key.password = NULL;\r
+policy_public_key.extractable = true;\r
+\r
+ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);\r
+if (CKMC_ERROR_NONE != ret)\r
+\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li></ul>\r
+\r
+<h2 id="creatingsignat" name="creatingsignat">Creating or Verifying Signatures</h2>\r
+\r
+                       <p>To create or verify signatures:</p>\r
+<ol><li>Store a private and public key.\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+const char *pub_alias = &quot;pub1&quot;;\r
+const char *pri_alias = &quot;prv1&quot;;\r
+char *key_passwd = (char *) &quot;1234&quot;;\r
+char *pri_passwd = NULL;\r
+char *pub_passwd = NULL;\r
+ckmc_hash_algo_e hash_algo = CKMC_HASH_SHA256;\r
+ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;\r
+ckmc_raw_buffer_s *signature;\r
+\r
+ckmc_key_s pubkey;\r
+ckmc_policy_s pubpolicy;\r
+ckmc_key_s prikey;\r
+ckmc_policy_s pripolicy;\r
+\r
+const char *prv = &quot;-----BEGIN RSA PRIVATE KEY-----\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;Proc-Type: 4,ENCRYPTED\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;DEK-Info: DES-EDE3-CBC,6C6507B11671DABC\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;YiKNviNqc/V/i241CKtAVsNckesE0kcaka3VrY7ApXR+Va93YoEwVQ8gB9cE/eHH\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;S0j3ZS1PAVFM/qo4ZnPdMzaSLvTQw0GAL90wWgF3XQ+feMnWyBObEoQdGXE828TB\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;SLz4UOIQ55Dx6JSWTfEhwAlPs2cEWD14xvuxPzAEzBIYmWmBBsCN94YgFeRTzjH0\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;TImoYVMN60GgOfZWw6rXq9RaV5dY0Y6F1piypCLGD35VaXAutdHIDvwUGECPm7SN\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;w05jRro53E1vb4mYlZEY/bs4q7XEOI5+ZKT76Xn0oEJNX1KRL1h2q8fgUkm5j40M\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;uQj71aLR9KyIoQARwGLeRy09tLVjH3fj66CCMqaPcxcIRIyWi5yYBB0s53ipm6A9\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;CYuyc7MS2C0pOdWKsDvYsHR/36KUiIdPuhF4AbaTqqO0eWeuP7Na7dGK56Fl+ooi\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;cUpJr7cIqMl2vL25B0jW7d4TB3zwCEkVVD1fBPeNoZWo30z4bILcBqjjPkQfHZ2e\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;xNraG3qI4FHjoPT8JEE8p+PgwaMoINlICyIMKiCdvwz9yEnsHPy7FkmatpS+jFoS\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;mg8R9vMwgK/HGEm0dmb/7/a0XsG2jCDm6cOmJdZJFQ8JW7hFs3eOHpNlQYDChG2D\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;A1ExslqBtbpicywTZhzFdYU/hxeCr4UqcY27Zmhr4JlBPMyvadWKeOqCamWepjbT\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;T/MhWJbmWgZbI5s5sbpu7cOYubQcUIEsTaQXGx/KEzGo1HLn9tzSeQfP/nqjAD/L\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;T5t1Mb8o4LuV/fGIT33Q3i2FospJMqp2JINNzG18I6Fjo08PTvJ3row40Rb76+lJ\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;wN1IBthgBgsgsOdB6XNc56sV+uq2TACsNNWw+JnFRCkCQgfF/KUrvN+WireWq88B\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;9UPG+Hbans5A6K+y1a+bzfdYnKws7x8wNRyPxb7Vb2t9ZTl5PBorPLVGsjgf9N5X\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;tCdBlfJsUdXot+EOxrIczV5zx0JIB1Y9hrDG07RYkzPuJKxkW7skqeLo8oWGVpaQ\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;LGWvuebky1R75hcSuL3e4QHfjBHPdQ31fScB884tqkbhBAWr2nT9bYEmyT170bno\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;8QkyOSb99xZBX55sLDHs9p61sTJr2C9Lz/KaWQs+3hTkpwSjSRyjEMH2n491qiQX\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;G+kvLEnvtR8sl9zinorj/RfsxyPntAxudfY3qaYUu2QkLvVdfTVUVbxS/Fg8f7B3\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;hEjCtpKgFjPxQuHE3didNOr5xM7mkmLN/QA7yHVgdpE64T5mFgC3JcVRpcR7zBPH\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;3OeXHgjrhDfN8UIX/cq6gNgD8w7O0rhHa3mEXI1xP14ykPcJ7wlRuLm9P3fwx5A2\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;jQrVKJKw1Nzummmspn4VOpJY3LkH4Sxo4e7Soo1l1cxJpzmERwgMF+vGz1L70+DG\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;M0hVrz1PxlOsBBFgcdS4TB91DIs/RcFDqrJ4gOPNKCgBP+rgTXXLFcxUwJfE3lKg\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;Kmpwdne6FuQYX3eyRVAmPgOHbJuRQCh/V4fYo51UxCcEKeKy6UgOPEJlXksWGbH5\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;VFmlytYW6dFKJvjltSmK6L2r+TlyEQoXwTqe4bkfhB2LniDEq28hKQ==\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;-----END RSA PRIVATE KEY-----\n&quot;;\r
+\r
+const char *pub = &quot;-----BEGIN PUBLIC KEY-----\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;zQIDAQAB\n&quot;\r
+&nbsp;&nbsp;&nbsp;&quot;-----END PUBLIC KEY-----\n&quot;;\r
+pubkey.raw_key = (unsigned char *)pub;\r
+pubkey.key_size = strlen(pub);\r
+pubkey.key_type = CKMC_KEY_NONE;\r
+pubkey.password = NULL;\r
+\r
+pubpolicy.password = pub_passwd;\r
+pubpolicy.extractable = false;\r
+\r
+pripolicy.password = pri_passwd;\r
+pripolicy.extractable = true;\r
+\r
+prikey.raw_key = (unsigned char *)prv;\r
+prikey.key_size = strlen(prv);\r
+prikey.key_type = CKMC_KEY_NONE;\r
+prikey.password = key_passwd; // The private key, prv, is encrypted with the key_password\r
+\r
+ret = ckmc_save_key(pri_alias, prikey, pripolicy);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+ret = ckmc_save_key(pub_alias, pubkey, pubpolicy);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li>Create and verify the signature:\r
+<ul>\r
+<li>Create and verify using a hash algorithm:\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+const char *message = &quot;message test&quot;;\r
+ckmc_raw_buffer_s msg_buff;\r
+ckmc_raw_buffer_s *signature;\r
+ckmc_hash_algo_e hash_algo = CKMC_HASH_SHA256;\r
+ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;\r
+\r
+const char *pub_alias = &quot;pub1&quot;;\r
+const char *pri_alias = &quot;prv1&quot;;\r
+char *pri_passwd = NULL;\r
+char *pub_passwd = NULL;\r
+\r
+msg_buff.data = (unsigned char *)message;\r
+msg_buff.size = strlen(message);\r
+\r
+ret = ckmc_create_signature (pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &amp;signature);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+ret = ckmc_verify_signature (pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li>Create and verify without a hash algorithm:\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+const char *message = &quot;message test&quot;;\r
+ckmc_raw_buffer_s msg_buff;\r
+ckmc_raw_buffer_s *signature;\r
+ckmc_hash_algo_e hash_algo = CKMC_HASH_NONE; // Do not use a hash algorithm \r
+ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;\r
+\r
+const char *pub_alias = &quot;pub1&quot;;\r
+const char *pri_alias = &quot;prv1&quot;;\r
+char *pri_passwd = NULL;\r
+char *pub_passwd = NULL;\r
+\r
+msg_buff.data = (unsigned char *)message;\r
+msg_buff.size = strlen(message);\r
+\r
+ret = ckmc_create_signature (pri_alias, pri_passwd, msg_buff, hash_algo, pad_algo, &amp;signature);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+ret = ckmc_verify_signature (pub_alias, pub_passwd, msg_buff, *signature, hash_algo, pad_algo);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+</ul>\r
+</li></ol>\r
+\r
+<h2 id="verifying" name="verifying">Verifying or Getting a Certificate Chain</h2>\r
+\r
+                       <p>To verify and get a certificate chain using raw certificates or a certificate alias for untrusted certificates:</p>\r
+<ul><li><p>Get a certificate chain with raw certificates.</p>\r
+<p>The key manager verifies a certificate chain and returns it. The trusted root certificate of the chain must exist in the system certificate storage.</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_cert_s c_cert; // For a user certificate\r
+ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate\r
+ckmc_cert_list_s untrustedcerts; // Linked list of untrusted CA certificate\r
+ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain\r
+\r
+int cnt = 0;\r
+ckmc_cert_list_s *current;\r
+ckmc_cert_list_s *next;\r
+\r
+const char * ee =\r
+&quot;-----BEGIN CERTIFICATE-----\n&quot;\r
+&quot;MIIF0TCCBLmgAwIBAgIQaPGTP4aS7Ut/WDNaBzdQrDANBgkqhkiG9w0BAQUFADCB\n&quot;\r
+&quot;ujELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;\r
+&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\n&quot;\r
+&quot;YXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMr\n&quot;\r
+&quot;VmVyaVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTAeFw0x\n&quot;\r
+&quot;NDAyMjAwMDAwMDBaFw0xNTAyMjAyMzU5NTlaMIHmMRMwEQYLKwYBBAGCNzwCAQMT\n&quot;\r
+&quot;AlBMMR0wGwYDVQQPExRQcml2YXRlIE9yZ2FuaXphdGlvbjETMBEGA1UEBRMKMDAw\n&quot;\r
+&quot;MDAyNTIzNzELMAkGA1UEBhMCUEwxDzANBgNVBBEUBjAwLTk1MDEUMBIGA1UECBML\n&quot;\r
+&quot;bWF6b3dpZWNraWUxETAPBgNVBAcUCFdhcnN6YXdhMRYwFAYDVQQJFA1TZW5hdG9y\n&quot;\r
+&quot;c2thIDE4MRMwEQYDVQQKFAptQmFuayBTLkEuMQwwCgYDVQQLFANESU4xGTAXBgNV\n&quot;\r
+&quot;BAMUEHd3dy5tYmFuay5jb20ucGwwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\n&quot;\r
+&quot;AoIBAQDph6x8V6xUW/+651+qHF+UmorH9uaz2ZrX2bIWiMKIJFmpDDHlxcapKkqE\n&quot;\r
+&quot;BV04is83aiCpqKtc2ZHy2g4Hpj1eSF5BP2+OAlo0YUQZPIeRRdiMjmeAxw/ncBDx\n&quot;\r
+&quot;9rQBuCJ4XTD6cqQox5SI0TASOZ+wyAEjbDRXzL73XqRAFZ1LOpb2ONkolS+RutMB\n&quot;\r
+&quot;vshvCsWPeNe7eGLuOh6DyC6r1vX9xhw3xnjM2mTSvmtimgzSLacNGKqRrsucUgcb\n&quot;\r
+&quot;0+O5C2jZAtAMLyZksL92cxmWbtVzUYzem4chjHu5cRxUlPNzUJWrrczueB7Ip4A8\n&quot;\r
+&quot;aQuFMfNXYc0x+WLWjy//urypMKjhAgMBAAGjggGjMIIBnzAbBgNVHREEFDASghB3\n&quot;\r
+&quot;d3cubWJhbmsuY29tLnBsMAkGA1UdEwQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud\n&quot;\r
+&quot;JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjBEBgNVHSAEPTA7MDkGC2CGSAGG+EUB\n&quot;\r
+&quot;BxcGMCowKAYIKwYBBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMw\n&quot;\r
+&quot;HQYDVR0OBBYEFN37iGaS7mZnENxZ9FGqNLR+QgoMMB8GA1UdIwQYMBaAFPyKULqe\n&quot;\r
+&quot;uSVae1WFT5UAY4/pWGtDMEIGA1UdHwQ7MDkwN6A1oDOGMWh0dHA6Ly9FVlNlY3Vy\n&quot;\r
+&quot;ZS1jcmwudmVyaXNpZ24uY29tL0VWU2VjdXJlMjAwNi5jcmwwfAYIKwYBBQUHAQEE\n&quot;\r
+&quot;cDBuMC0GCCsGAQUFBzABhiFodHRwOi8vRVZTZWN1cmUtb2NzcC52ZXJpc2lnbi5j\n&quot;\r
+&quot;b20wPQYIKwYBBQUHMAKGMWh0dHA6Ly9FVlNlY3VyZS1haWEudmVyaXNpZ24uY29t\n&quot;\r
+&quot;L0VWU2VjdXJlMjAwNi5jZXIwDQYJKoZIhvcNAQEFBQADggEBAD0wO+rooUrIM4qp\n&quot;\r
+&quot;PHhp+hkXK6WMQ2qzGOmbMcZjw0govg5vkzkefPDryIXXbrF8mRagiJNMSfNaWWeh\n&quot;\r
+&quot;Cj41OV24EdUl0OLbFxNzcvub599zRs/apfaRLTfsmlmOgi0/YP305i+3tJ2ll946\n&quot;\r
+&quot;P+qV1wXnXqTqEdIl4Ys3+1HmDCdTB1hoDwAAzqRVUXZ5+iiwPAU7R/LTHfMjV1ke\n&quot;\r
+&quot;8jtNFfrorlZMCfVH/7eEnHJvVjOJt+YFe4aFMzE+DfuYIK7MH+olC2v79kBwbnEQ\n&quot;\r
+&quot;fvHMA9gFwOYLUBBdSfcocp8EKZ+mRlNPGR/3LBrPeaQQ0GZEkxzRK+v/aNTuiYfr\n&quot;\r
+&quot;oFXtrg0=\n&quot;\r
+&quot;-----END CERTIFICATE-----\n&quot;;\r
+\r
+const char *im =\r
+&quot;-----BEGIN CERTIFICATE-----\n&quot;\r
+&quot;MIIF5DCCBMygAwIBAgIQW3dZxheE4V7HJ8AylSkoazANBgkqhkiG9w0BAQUFADCB\n&quot;\r
+&quot;yjELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;\r
+&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTowOAYDVQQLEzEoYykgMjAwNiBWZXJp\n&quot;\r
+&quot;U2lnbiwgSW5jLiAtIEZvciBhdXRob3JpemVkIHVzZSBvbmx5MUUwQwYDVQQDEzxW\n&quot;\r
+&quot;ZXJpU2lnbiBDbGFzcyAzIFB1YmxpYyBQcmltYXJ5IENlcnRpZmljYXRpb24gQXV0\n&quot;\r
+&quot;aG9yaXR5IC0gRzUwHhcNMDYxMTA4MDAwMDAwWhcNMTYxMTA3MjM1OTU5WjCBujEL\n&quot;\r
+&quot;MAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQLExZW\n&quot;\r
+&quot;ZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2UgYXQg\n&quot;\r
+&quot;aHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMrVmVy\n&quot;\r
+&quot;aVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTCCASIwDQYJ\n&quot;\r
+&quot;KoZIhvcNAQEBBQADggEPADCCAQoCggEBAJjboFXrnP0XeeOabhQdsVuYI4cWbod2\n&quot;\r
+&quot;nLU4O7WgerQHYwkZ5iqISKnnnbYwWgiXDOyq5BZpcmIjmvt6VCiYxQwtt9citsj5\n&quot;\r
+&quot;OBfH3doxRpqUFI6e7nigtyLUSVSXTeV0W5K87Gws3+fBthsaVWtmCAN/Ra+aM/EQ\n&quot;\r
+&quot;wGyZSpIkMQht3QI+YXZ4eLbtfjeubPOJ4bfh3BXMt1afgKCxBX9ONxX/ty8ejwY4\n&quot;\r
+&quot;P1C3aSijtWZfNhpSSENmUt+ikk/TGGC+4+peGXEFv54cbGhyJW+ze3PJbb0S/5tB\n&quot;\r
+&quot;Ml706H7FC6NMZNFOvCYIZfsZl1h44TO/7Wg+sSdFb8Di7Jdp91zT91ECAwEAAaOC\n&quot;\r
+&quot;AdIwggHOMB0GA1UdDgQWBBT8ilC6nrklWntVhU+VAGOP6VhrQzASBgNVHRMBAf8E\n&quot;\r
+&quot;CDAGAQH/AgEAMD0GA1UdIAQ2MDQwMgYEVR0gADAqMCgGCCsGAQUFBwIBFhxodHRw\n&quot;\r
+&quot;czovL3d3dy52ZXJpc2lnbi5jb20vY3BzMD0GA1UdHwQ2MDQwMqAwoC6GLGh0dHA6\n&quot;\r
+&quot;Ly9FVlNlY3VyZS1jcmwudmVyaXNpZ24uY29tL3BjYTMtZzUuY3JsMA4GA1UdDwEB\n&quot;\r
+&quot;/wQEAwIBBjARBglghkgBhvhCAQEEBAMCAQYwbQYIKwYBBQUHAQwEYTBfoV2gWzBZ\n&quot;\r
+&quot;MFcwVRYJaW1hZ2UvZ2lmMCEwHzAHBgUrDgMCGgQUj+XTGoasjY5rw8+AatRIGCx7\n&quot;\r
+&quot;GS4wJRYjaHR0cDovL2xvZ28udmVyaXNpZ24uY29tL3ZzbG9nby5naWYwKQYDVR0R\n&quot;\r
+&quot;BCIwIKQeMBwxGjAYBgNVBAMTEUNsYXNzM0NBMjA0OC0xLTQ3MD0GCCsGAQUFBwEB\n&quot;\r
+&quot;BDEwLzAtBggrBgEFBQcwAYYhaHR0cDovL0VWU2VjdXJlLW9jc3AudmVyaXNpZ24u\n&quot;\r
+&quot;Y29tMB8GA1UdIwQYMBaAFH/TZafC3ey78DAJ80M5+gKvMzEzMA0GCSqGSIb3DQEB\n&quot;\r
+&quot;BQUAA4IBAQCWovp/5j3t1CvOtxU/wHIDX4u6FpAl98KD2Md1NGNoElMMU4l7yVYJ\n&quot;\r
+&quot;p8M2RE4O0GJis4b66KGbNGeNUyIXPv2s7mcuQ+JdfzOE8qJwwG6Cl8A0/SXGI3/t\n&quot;\r
+&quot;5rDFV0OEst4t8dD2SB8UcVeyrDHhlyQjyRNddOVG7wl8nuGZMQoIeRuPcZ8XZsg4\n&quot;\r
+&quot;z+6Ml7YGuXNG5NOUweVgtSV1LdlpMezNlsOjdv3odESsErlNv1HoudRETifLriDR\n&quot;\r
+&quot;fip8tmNHnna6l9AW5wtsbfdDbzMLKTB3+p359U64drPNGLT5IO892+bKrZvQTtKH\n&quot;\r
+&quot;qQ2mRHNQ3XBb7a1+Srwi1agm5MKFIA3Z\n&quot;\r
+&quot;-----END CERTIFICATE-----\n&quot;;\r
+\r
+c_cert.raw_cert = (unsigned char *) ee;\r
+c_cert.cert_size = strlen(ee);\r
+c_cert.data_format = CKMC_FORM_PEM;\r
+\r
+c_cert1.raw_cert = (unsigned char *) im;\r
+c_cert1.cert_size = strlen(im);\r
+c_cert1.data_format = CKMC_FORM_PEM;\r
+\r
+untrustedcerts.cert = &amp;c_cert1;\r
+untrustedcerts.next = NULL;\r
+\r
+ret = ckmc_get_cert_chain(&amp;c_cert, &amp;untrustedcerts, &amp;cert_chain_list);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+next=cert_chain_list;\r
+do\r
+{\r
+&nbsp;&nbsp;&nbsp;current = next;\r
+&nbsp;&nbsp;&nbsp;next = current-&gt;next;\r
+}\r
+while(next != NULL);\r
+\r
+ckmc_cert_list_all_free(cert_chain_list); // Called when the list is no longer needed\r
+</pre></li>\r
+\r
+<li><p>Get a certificate chain with aliases of untrusted CA certificates.</p>\r
+<p>The key manager verifies a certificate chain and returns it. The trusted root certificate of the chain must exist in the system certificate storage.</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+char* password = NULL;\r
+const char *ca_alias = &quot;untrusted_ca_cert1&quot;;\r
+ckmc_policy_s test_policy;\r
+\r
+ckmc_cert_s c_cert; // For a user certificate\r
+ckmc_cert_s c_cert1; // For an intermediate untrusted CA certificate\r
+ckmc_alias_list_s untrustedcerts; // Linked list of untrusted CA certificate&#39;s alias\r
+ckmc_cert_list_s *cert_chain_list; // Linked list of a certificate chain\r
+\r
+int cnt = 0;\r
+ckmc_cert_list_s *current;\r
+ckmc_cert_list_s *next;\r
+\r
+const char * ee =\r
+&quot;-----BEGIN CERTIFICATE-----\n&quot;\r
+&quot;MIIF0TCCBLmgAwIBAgIQaPGTP4aS7Ut/WDNaBzdQrDANBgkqhkiG9w0BAQUFADCB\n&quot;\r
+&quot;ujELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;\r
+&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\n&quot;\r
+&quot;YXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMr\n&quot;\r
+&quot;VmVyaVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTAeFw0x\n&quot;\r
+&quot;NDAyMjAwMDAwMDBaFw0xNTAyMjAyMzU5NTlaMIHmMRMwEQYLKwYBBAGCNzwCAQMT\n&quot;\r
+&quot;AlBMMR0wGwYDVQQPExRQcml2YXRlIE9yZ2FuaXphdGlvbjETMBEGA1UEBRMKMDAw\n&quot;\r
+&quot;MDAyNTIzNzELMAkGA1UEBhMCUEwxDzANBgNVBBEUBjAwLTk1MDEUMBIGA1UECBML\n&quot;\r
+&quot;bWF6b3dpZWNraWUxETAPBgNVBAcUCFdhcnN6YXdhMRYwFAYDVQQJFA1TZW5hdG9y\n&quot;\r
+&quot;c2thIDE4MRMwEQYDVQQKFAptQmFuayBTLkEuMQwwCgYDVQQLFANESU4xGTAXBgNV\n&quot;\r
+&quot;BAMUEHd3dy5tYmFuay5jb20ucGwwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\n&quot;\r
+&quot;AoIBAQDph6x8V6xUW/+651+qHF+UmorH9uaz2ZrX2bIWiMKIJFmpDDHlxcapKkqE\n&quot;\r
+&quot;BV04is83aiCpqKtc2ZHy2g4Hpj1eSF5BP2+OAlo0YUQZPIeRRdiMjmeAxw/ncBDx\n&quot;\r
+&quot;9rQBuCJ4XTD6cqQox5SI0TASOZ+wyAEjbDRXzL73XqRAFZ1LOpb2ONkolS+RutMB\n&quot;\r
+&quot;vshvCsWPeNe7eGLuOh6DyC6r1vX9xhw3xnjM2mTSvmtimgzSLacNGKqRrsucUgcb\n&quot;\r
+&quot;0+O5C2jZAtAMLyZksL92cxmWbtVzUYzem4chjHu5cRxUlPNzUJWrrczueB7Ip4A8\n&quot;\r
+&quot;aQuFMfNXYc0x+WLWjy//urypMKjhAgMBAAGjggGjMIIBnzAbBgNVHREEFDASghB3\n&quot;\r
+&quot;d3cubWJhbmsuY29tLnBsMAkGA1UdEwQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud\n&quot;\r
+&quot;JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjBEBgNVHSAEPTA7MDkGC2CGSAGG+EUB\n&quot;\r
+&quot;BxcGMCowKAYIKwYBBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMw\n&quot;\r
+&quot;HQYDVR0OBBYEFN37iGaS7mZnENxZ9FGqNLR+QgoMMB8GA1UdIwQYMBaAFPyKULqe\n&quot;\r
+&quot;uSVae1WFT5UAY4/pWGtDMEIGA1UdHwQ7MDkwN6A1oDOGMWh0dHA6Ly9FVlNlY3Vy\n&quot;\r
+&quot;ZS1jcmwudmVyaXNpZ24uY29tL0VWU2VjdXJlMjAwNi5jcmwwfAYIKwYBBQUHAQEE\n&quot;\r
+&quot;cDBuMC0GCCsGAQUFBzABhiFodHRwOi8vRVZTZWN1cmUtb2NzcC52ZXJpc2lnbi5j\n&quot;\r
+&quot;b20wPQYIKwYBBQUHMAKGMWh0dHA6Ly9FVlNlY3VyZS1haWEudmVyaXNpZ24uY29t\n&quot;\r
+&quot;L0VWU2VjdXJlMjAwNi5jZXIwDQYJKoZIhvcNAQEFBQADggEBAD0wO+rooUrIM4qp\n&quot;\r
+&quot;PHhp+hkXK6WMQ2qzGOmbMcZjw0govg5vkzkefPDryIXXbrF8mRagiJNMSfNaWWeh\n&quot;\r
+&quot;Cj41OV24EdUl0OLbFxNzcvub599zRs/apfaRLTfsmlmOgi0/YP305i+3tJ2ll946\n&quot;\r
+&quot;P+qV1wXnXqTqEdIl4Ys3+1HmDCdTB1hoDwAAzqRVUXZ5+iiwPAU7R/LTHfMjV1ke\n&quot;\r
+&quot;8jtNFfrorlZMCfVH/7eEnHJvVjOJt+YFe4aFMzE+DfuYIK7MH+olC2v79kBwbnEQ\n&quot;\r
+&quot;fvHMA9gFwOYLUBBdSfcocp8EKZ+mRlNPGR/3LBrPeaQQ0GZEkxzRK+v/aNTuiYfr\n&quot;\r
+&quot;oFXtrg0=\n&quot;\r
+&quot;-----END CERTIFICATE-----\n&quot;;\r
+\r
+const char *im =\r
+&quot;-----BEGIN CERTIFICATE-----\n&quot;\r
+&quot;MIIF5DCCBMygAwIBAgIQW3dZxheE4V7HJ8AylSkoazANBgkqhkiG9w0BAQUFADCB\n&quot;\r
+&quot;yjELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;\r
+&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTowOAYDVQQLEzEoYykgMjAwNiBWZXJp\n&quot;\r
+&quot;U2lnbiwgSW5jLiAtIEZvciBhdXRob3JpemVkIHVzZSBvbmx5MUUwQwYDVQQDEzxW\n&quot;\r
+&quot;ZXJpU2lnbiBDbGFzcyAzIFB1YmxpYyBQcmltYXJ5IENlcnRpZmljYXRpb24gQXV0\n&quot;\r
+&quot;aG9yaXR5IC0gRzUwHhcNMDYxMTA4MDAwMDAwWhcNMTYxMTA3MjM1OTU5WjCBujEL\n&quot;\r
+&quot;MAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQLExZW\n&quot;\r
+&quot;ZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2UgYXQg\n&quot;\r
+&quot;aHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMrVmVy\n&quot;\r
+&quot;aVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTCCASIwDQYJ\n&quot;\r
+&quot;KoZIhvcNAQEBBQADggEPADCCAQoCggEBAJjboFXrnP0XeeOabhQdsVuYI4cWbod2\n&quot;\r
+&quot;nLU4O7WgerQHYwkZ5iqISKnnnbYwWgiXDOyq5BZpcmIjmvt6VCiYxQwtt9citsj5\n&quot;\r
+&quot;OBfH3doxRpqUFI6e7nigtyLUSVSXTeV0W5K87Gws3+fBthsaVWtmCAN/Ra+aM/EQ\n&quot;\r
+&quot;wGyZSpIkMQht3QI+YXZ4eLbtfjeubPOJ4bfh3BXMt1afgKCxBX9ONxX/ty8ejwY4\n&quot;\r
+&quot;P1C3aSijtWZfNhpSSENmUt+ikk/TGGC+4+peGXEFv54cbGhyJW+ze3PJbb0S/5tB\n&quot;\r
+&quot;Ml706H7FC6NMZNFOvCYIZfsZl1h44TO/7Wg+sSdFb8Di7Jdp91zT91ECAwEAAaOC\n&quot;\r
+&quot;AdIwggHOMB0GA1UdDgQWBBT8ilC6nrklWntVhU+VAGOP6VhrQzASBgNVHRMBAf8E\n&quot;\r
+&quot;CDAGAQH/AgEAMD0GA1UdIAQ2MDQwMgYEVR0gADAqMCgGCCsGAQUFBwIBFhxodHRw\n&quot;\r
+&quot;czovL3d3dy52ZXJpc2lnbi5jb20vY3BzMD0GA1UdHwQ2MDQwMqAwoC6GLGh0dHA6\n&quot;\r
+&quot;Ly9FVlNlY3VyZS1jcmwudmVyaXNpZ24uY29tL3BjYTMtZzUuY3JsMA4GA1UdDwEB\n&quot;\r
+&quot;/wQEAwIBBjARBglghkgBhvhCAQEEBAMCAQYwbQYIKwYBBQUHAQwEYTBfoV2gWzBZ\n&quot;\r
+&quot;MFcwVRYJaW1hZ2UvZ2lmMCEwHzAHBgUrDgMCGgQUj+XTGoasjY5rw8+AatRIGCx7\n&quot;\r
+&quot;GS4wJRYjaHR0cDovL2xvZ28udmVyaXNpZ24uY29tL3ZzbG9nby5naWYwKQYDVR0R\n&quot;\r
+&quot;BCIwIKQeMBwxGjAYBgNVBAMTEUNsYXNzM0NBMjA0OC0xLTQ3MD0GCCsGAQUFBwEB\n&quot;\r
+&quot;BDEwLzAtBggrBgEFBQcwAYYhaHR0cDovL0VWU2VjdXJlLW9jc3AudmVyaXNpZ24u\n&quot;\r
+&quot;Y29tMB8GA1UdIwQYMBaAFH/TZafC3ey78DAJ80M5+gKvMzEzMA0GCSqGSIb3DQEB\n&quot;\r
+&quot;BQUAA4IBAQCWovp/5j3t1CvOtxU/wHIDX4u6FpAl98KD2Md1NGNoElMMU4l7yVYJ\n&quot;\r
+&quot;p8M2RE4O0GJis4b66KGbNGeNUyIXPv2s7mcuQ+JdfzOE8qJwwG6Cl8A0/SXGI3/t\n&quot;\r
+&quot;5rDFV0OEst4t8dD2SB8UcVeyrDHhlyQjyRNddOVG7wl8nuGZMQoIeRuPcZ8XZsg4\n&quot;\r
+&quot;z+6Ml7YGuXNG5NOUweVgtSV1LdlpMezNlsOjdv3odESsErlNv1HoudRETifLriDR\n&quot;\r
+&quot;fip8tmNHnna6l9AW5wtsbfdDbzMLKTB3+p359U64drPNGLT5IO892+bKrZvQTtKH\n&quot;\r
+&quot;qQ2mRHNQ3XBb7a1+Srwi1agm5MKFIA3Z\n&quot;\r
+&quot;-----END CERTIFICATE-----\n&quot;;\r
+\r
+c_cert.raw_cert = (unsigned char *) ee;\r
+c_cert.cert_size = strlen(ee);\r
+c_cert.data_format = CKMC_FORM_PEM;\r
+\r
+c_cert1.raw_cert = (unsigned char *) im;\r
+c_cert1.cert_size = strlen(im);\r
+c_cert1.data_format = CKMC_FORM_PEM;\r
+\r
+test_policy.password = password;\r
+test_policy.extractable = true;\r
+\r
+ret = ckmc_save_cert(ca_alias, c_cert1, test_policy);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+untrustedcerts.alias = (char *)ca_alias;\r
+untrustedcerts.next = NULL;\r
+\r
+ret = ckmc_get_cert_chain_with_alias(&amp;c_cert, &amp;untrustedcerts, &amp;cert_chain_list);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+next=cert_chain_list;\r
+do\r
+{\r
+&nbsp;&nbsp;&nbsp;current = next;\r
+&nbsp;&nbsp;&nbsp;next = current-&gt;next;\r
+}\r
+while(next != NULL);\r
+\r
+ckmc_cert_list_all_free(cert_chain_list); // Called when the list is no longer needed\r
+</pre></li></ul>\r
+\r
+<h2 id="pkcs" name="pkcs">Loading a Certificate or a PKCS#12 File</h2>\r
+\r
+<p>To load certificates (from a file with the DER or PEM format) or a private key, a certificate, or CA certificates (from a PKCS#12 file):</p>\r
+\r
+<ul><li><p>Load from a certificate file.</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_cert_s *pcert;\r
+// defined_media_storage_directory can be obtained with the storage_get_directory() function\r
+const char *file_name = &quot;&lt;defined_media_storage_directory&gt;/ckmc_test_cert.pem&quot;; \r
+\r
+ret = ckmc_load_cert_from_file(file_name, &amp;pcert);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+dlog_print(DLOG_INFO, LOG_TAG, &quot;cert size =%d\n&quot;, pcert-&gt;cert_size);\r
+\r
+ckmc_cert_free(pcert); // Called when the certificate is no longer needed\r
+</pre></li>\r
+\r
+<li><p>Load from a PKCS#12 file.</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+ckmc_key_s *private_key = NULL;\r
+ckmc_cert_s *cert = NULL;\r
+ckmc_cert_list_s *ca_cert_list = NULL;\r
+// defined_media_storage_directory can be obtained with the storage_get_directory() function\r
+const char *p12file = &quot;&lt;defined_media_storage_directory&gt;/ckmc_p12_test.p12&quot;; \r
+const char *password = &quot;password&quot;;  // PKCS#12 file can be protected by a password\r
+\r
+ret = ckmc_load_from_pkcs12_file(p12file, password, &amp;private_key, &amp;cert, &amp;ca_cert_list);\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+if (private_key != NULL)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Check a private key\r
+}\r
+\r
+if (cert != NULL)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Check a certificate\r
+\r
+}\r
+\r
+int cnt = 0;\r
+ckmc_cert_list_s *tmp_list = ca_cert_list;\r
+while(tmp_list!= NULL)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Check a certificate list\r
+\r
+&nbsp;&nbsp;&nbsp;tmp_list = tmp_list -&gt;next;\r
+}\r
+\r
+ckmc_key_free(private_key); // Called when the key is no longer needed\r
+ckmc_cert_free(cert); // Called when the certificate is no longer needed\r
+ckmc_cert_list_all_free(ca_cert_list); // Called when the list is no longer needed\r
+</pre></li></ul>\r
+\r
+<h2 id="access" name="access">Implementing Access Control</h2>\r
+\r
+<p>To implement access control rules for each individual client&#39;s data, certificates, and keys:</p>\r
+\r
+<ol><li><p>Store test data:</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+char* password = NULL;\r
+ckmc_raw_buffer_s test_data;\r
+const char *alias = &quot;targetData&quot;;\r
+ckmc_policy_s test_policy;\r
+\r
+const char *char_bin_data = &quot;Access control test Data&quot;;\r
+\r
+test_policy.password = password;\r
+test_policy.extractable = true;\r
+\r
+test_data.data = (unsigned char *) char_bin_data;\r
+test_data.size = strlen(char_bin_data);\r
+ret = ckmc_save_data(alias, test_data, test_policy);\r
+if (CKMC_ERROR_NONE != ret)\r
+\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li><p>Set a rule to allow access:</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+const char *target1 = &quot;accessor-allow-1&quot;;\r
+const char *target2 = &quot;accessor-allow-2&quot;;\r
+const char *alias = &quot;targetData&quot;;\r
+\r
+ret = ckmc_allow_access(alias, target1, CKMC_AR_READ); // Only allow reading data\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+ret = ckmc_allow_access(alias, target2, CKMC_AR_READ_REMOVE); // Allow reading and deleting data\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+\r
+<li><p>Set a rule to deny access:</p>\r
+<pre class="prettyprint">\r
+int ret = CKMC_ERROR_NONE;\r
+\r
+const char *target = &quot;denied-accessor&quot;;\r
+const char *alias = &quot;targetData&quot;;\r
+\r
+ret = ckmc_allow_access(alias, target, CKMC_AR_READ); // Allow the target user to a read (alias)\r
+if (CKMC_ERROR_NONE != ret)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+\r
+ret = ckmc_deny_access(alias, target); // Deny the target user access to data (alias)\r
+if (CKMC_ERROR_NONE != ret)\r
+\r
+{\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+}\r
+</pre></li>\r
+</ol>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script> \r
+ \r
+ </body>\r
  </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
index d4f29a1..13ee06d 100644 (file)
--- a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm
@@ -1,151 +1,151 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Privilege Info: Managing Privilege Information</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#get">Getting Privilege Information</a></li>
-        </ul>          
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/security/privilege_n.htm">Privilege Info Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Privilege Info: Managing Privilege Information</h1>
-
-
-<p>This tutorial demonstrates how you can display privilege information, such as the name and description of a given privilege.</p>
-
-       <h2 id="warm-up" name="warm-up">Warm-up</h2>
-       <p>
-       Become familiar with the Privilege Info API basics by learning about:</p>
-       <ul>
-               <li><a href="#get">Getting Privilege Information</a>
-               <p>Get privilege information, such as the display name and description of a privilege.</p></li>
-       </ul>  
-
-<h2 id="get" name="get">Getting Privilege Information</h2>
-
-<p>To get privilege display information:</p>
-
-<ol>
-<li><p>To use the functions and data types of the Privilege Info API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;privilege_information.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;privilege_information.h&gt;
-</pre></li>
-<li>To get various privilege information:
-<ol type="a">
-
-               <li>Get the privilege display name using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name()</span> function:
-               
-               <pre class="prettyprint">
-char* displayName = NULL;
-int retVal = privilege_info_get_display_name(&quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;displayName);</pre>
-
-               <p>The function takes the following parameters:</p>
-                       <ul>
-                        <li>API version</li>
-                        <li>Privilege name</li>
-                        <li>Privilege display name</li>
-                       </ul>
-                       
-</li>
-
-               <li>Get the privilege display name by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name_by_pkgtype()</span> function:
-               
-               <pre class="prettyprint">
-char* displayName = NULL;
-int retVal = privilege_info_get_display_name_by_pkgtype(&quot;PRVINFO_PACKAGE_TYPE_WEB&quot;, &quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;displayName);</pre>
-
-               <p>The function takes the following parameters:</p>
-                       <ul>
-                       <li>Package type</li>
-                        <li>API version</li>
-                        <li>Privilege name</li>
-                        <li>Privilege display name</li>
-                       </ul>
-                       
-</li>
-
-<li>Get the privilege description using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description()</span> function:
-
-<pre class="prettyprint">
-char* description = NULL;
-int retVal = privilege_info_get_description(&quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;description);</pre>
-
-<p>The function takes the following parameters:</p>
- <ul>
- <li>API version</li>
- <li>Privilege name</li>
- <li>Description of the privilege</li></ul>
-
-</li>
-
-
-<li>Get the privilege description by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description_by_pkgtype()</span> function:
-
-<pre class="prettyprint">
-char* description = NULL;
-int retVal = privilege_info_get_description_by_pkgtype(&quot;PRVINFO_PACKAGE_TYPE_WEB&quot;, &quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;description);</pre>
-
-<p>The function takes the following parameters:</p>
- <ul>
- <li>Package type</li>
- <li>API version</li>
- <li>Privilege name</li>
- <li>Description of the privilege</li></ul>
-
-</li>
-
-</ol>
-<p>All functions above return the defined <span style="font-family: Courier New,Courier,monospace;">privilege_info_error_e</span> enum value that indicates the result of executing the function and provides the privilege description by assigning the matching value to the third parameter.</p>
-
-</li></ol>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script> 
- 
- </body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+       <title>Privilege Info: Managing Privilege Information</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+            <li><a href="#get">Getting Privilege Information</a></li>\r
+        </ul>          \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.guides/html/native/security/privilege_n.htm">Privilege Info Guide</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Wearable Native</a></li>                 \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Privilege Info: Managing Privilege Information</h1>\r
+\r
+\r
+<p>This tutorial demonstrates how you can display privilege information, such as the name and description of a given privilege.</p>\r
+\r
+       <h2 id="warm-up" name="warm-up">Warm-up</h2>\r
+       <p>\r
+       Become familiar with the Privilege Info API basics by learning about:</p>\r
+       <ul>\r
+               <li><a href="#get">Getting Privilege Information</a>\r
+               <p>Get privilege information, such as the display name and description of a privilege.</p></li>\r
+       </ul>  \r
+\r
+<h2 id="get" name="get">Getting Privilege Information</h2>\r
+\r
+<p>To get privilege display information:</p>\r
+\r
+<ol>\r
+<li><p>To use the functions and data types of the Privilege Info API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;privilege_information.h&gt;</span> header file in your application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;privilege_information.h&gt;\r
+</pre></li>\r
+<li>To get various privilege information:\r
+<ol type="a">\r
+\r
+               <li>Get the privilege display name using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name()</span> function:\r
+               \r
+               <pre class="prettyprint">\r
+char* displayName = NULL;\r
+int retVal = privilege_info_get_display_name(&quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;displayName);</pre>\r
+\r
+               <p>The function takes the following parameters:</p>\r
+                       <ul>\r
+                        <li>API version</li>\r
+                        <li>Privilege name</li>\r
+                        <li>Privilege display name</li>\r
+                       </ul>\r
+                       \r
+</li>\r
+\r
+               <li>Get the privilege display name by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name_by_pkgtype()</span> function:\r
+               \r
+               <pre class="prettyprint">\r
+char* displayName = NULL;\r
+int retVal = privilege_info_get_display_name_by_pkgtype(&quot;PRVINFO_PACKAGE_TYPE_WEB&quot;, &quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;displayName);</pre>\r
+\r
+               <p>The function takes the following parameters:</p>\r
+                       <ul>\r
+                       <li>Package type</li>\r
+                        <li>API version</li>\r
+                        <li>Privilege name</li>\r
+                        <li>Privilege display name</li>\r
+                       </ul>\r
+                       \r
+</li>\r
+\r
+<li>Get the privilege description using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description()</span> function:\r
+\r
+<pre class="prettyprint">\r
+char* description = NULL;\r
+int retVal = privilege_info_get_description(&quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;description);</pre>\r
+\r
+<p>The function takes the following parameters:</p>\r
+ <ul>\r
+ <li>API version</li>\r
+ <li>Privilege name</li>\r
+ <li>Description of the privilege</li></ul>\r
+\r
+</li>\r
+\r
+\r
+<li>Get the privilege description by package type using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_description_by_pkgtype()</span> function:\r
+\r
+<pre class="prettyprint">\r
+char* description = NULL;\r
+int retVal = privilege_info_get_description_by_pkgtype(&quot;PRVINFO_PACKAGE_TYPE_WEB&quot;, &quot;2.2&quot;, &quot;http://tizen.org/privilege/application.launch&quot;, &amp;description);</pre>\r
+\r
+<p>The function takes the following parameters:</p>\r
+ <ul>\r
+ <li>Package type</li>\r
+ <li>API version</li>\r
+ <li>Privilege name</li>\r
+ <li>Description of the privilege</li></ul>\r
+\r
+</li>\r
+\r
+</ol>\r
+<p>All functions above return the defined <span style="font-family: Courier New,Courier,monospace;">privilege_info_error_e</span> enum value that indicates the result of executing the function and provides the privilege description by assigning the matching value to the third parameter.</p>\r
+\r
+</li></ol>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script> \r
+ \r
+ </body>\r
  </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/security/security_tutorials_n.htm b/org.tizen.tutorials/html/native/security/security_tutorials_n.htm
index d57853a..ee8f1ea 100644 (file)
--- a/org.tizen.tutorials/html/native/security/security_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/security/security_tutorials_n.htm
@@ -1,66 +1,66 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Security: Handling Keys and Cryptographic Operations</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/security/security_guide_n.htm">Security Guides</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Security: Handling Keys and Cryptographic Operations</h1>
-       <p>The security tutorials demonstrate how to use the following features in creating Tizen native applications:</p> 
-       <ul> 
-               <li><a href="key_tutorial_n.htm">Key Manager: Using Keys and Certificates, and Implementing Access Control</a> <p>Demonstrates how you can create a secure repository for keys, certificates, and sensitive data.</p></li>
-               <li><a href="privilege_tutorial_n.htm">Privilege Info: Managing Privilege Information</a> <p>Demonstrates how you can display privilege information, such as the name and description of a given privilege.</p></li> 
-       </ul>   
-       
-       
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script> 
- 
- </body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+       <title>Security: Handling Keys and Cryptographic Operations</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.guides/html/native/security/security_guide_n.htm">Security Guides</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Security: Handling Keys and Cryptographic Operations</h1>\r
+       <p>The security tutorials demonstrate how to use the following features in creating Tizen native applications:</p> \r
+       <ul> \r
+               <li><a href="key_tutorial_n.htm">Key Manager: Using Keys and Certificates, and Implementing Access Control</a> <p>Demonstrates how you can create a secure repository for keys, certificates, and sensitive data.</p></li>\r
+               <li><a href="privilege_tutorial_n.htm">Privilege Info: Managing Privilege Information</a> <p>Demonstrates how you can display privilege information, such as the name and description of a given privilege.</p></li> \r
+       </ul>   \r
+       \r
+       \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script> \r
+ \r
+ </body>\r
  </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/social/account_tutorial_n.htm b/org.tizen.tutorials/html/native/social/account_tutorial_n.htm
index fca2374..665ecd9 100644 (file)
--- a/org.tizen.tutorials/html/native/social/account_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/social/account_tutorial_n.htm
@@ -1,959 +1,959 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Account Manager: Managing Account Information on the Device</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing the Accounts</a></li>
-                       <li><a href="#add">Creating and Managing an Account</a></li>
-                       <li>Information retrieval
-                               <ul class="toc">
-                                       <li><a href="#get">Getting Account Information</a></li>
-                                       <li><a href="#retrieve">Retrieving Accounts by Package Name</a></li>
-                                       <li><a href="#capability">Retrieving Account Providers by Capability</a></li>
-                               </ul>
-                       </li>
-                       <li><a href="#remove">Removing an Account</a></li>
-                       <li><a href="#disconnect">Destroying the Account Handle</a></li>
-                       <li><a href="#screen">Adding an Application on the Account Screen</a></li>
-                       <li><a href="#queries">Performing Database Queries</a></li>
-                       <li><a href="#secret">Managing Account Secrecy</a></li>
-                       <li><a href="#update">Updating Accounts</a></li>
-                       <li><a href="#type">Retrieving Account Types</a></li>
-               </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Mobile Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Account Manager: Managing Account Information on the Device</h1>
-
-  
- <p>This tutorial demonstrates how you can create, delete, and update accounts in the account database, and manage account information, such as user name, display name, domain name, and email address.</p>
-
-   <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
-<h2>Warm-up</h2>
-<p>Become familiar with the Account Manager API basics by learning about:</p>
-<ul>
-               <li><a href="#init">Initializing the Accounts</a>
-               <p>Initialize the account manager for use.</p></li>
-               <li><a href="#add">Creating and Managing an Account</a>
-               <p>Create an account, set its properties, and insert it to the database.</p></li>
-               <li>Information retrieval
-               <ul>
-               <li><a href="#get">Getting Account Information</a>
-               <p>Retrieve information for each existing account and implement a callback function.</p></li>
-               <li><a href="#retrieve">Retrieving Accounts by Package Name</a>
-               <p>Retrieve accounts based on a specific package.</p></li>
-               <li><a href="#capability">Retrieving Account Providers by Capability</a>
-               <p>Retrieve accounts providers based on a specific capability.</p></li>
-               </ul>
-               </li>
-               <li><a href="#remove">Removing an Account</a>
-               <p>Remove an account from the database.</p></li>
-               <li><a href="#disconnect">Destroying the Account Handle</a>
-               <p>Destroy the account handle.</p></li>
-               <li><a href="#screen">Adding an Application on the Account Screen</a>
-               <p>Display your application on the Add account screen of a Tizen device.</p>
-               </li>
-</ul>
-<h2>Follow-up</h2>
-<p>Once we have learned the basics of the Account Manager API, we can now move on to more advanced tasks, including:</p>
-<ul>
-               <li><a href="#queries">Performing Database Queries</a>
-               <p>Manage accounts and query them based on various attributes.</p></li>
-               <li><a href="#secret">Managing Account Secrecy</a>
-               <p>Manage account secrecy levels.</p></li>
-               <li><a href="#update">Updating Accounts</a>
-               <p>Update account details.</p></li>
-               <li><a href="#type">Retrieving Account Types</a>
-               <p>Retrieve account types.</p></li>
-               
-</ul>
-
- <h2 id="init" name="init">Initializing the Accounts</h2>
-
-<p>To initialize the account manager:</p>
-<ol>
-<li> <p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;account.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;account.h&gt;
-</pre></li>
-<li><p>Declare the necessary global variables. To know, whether a function has been executed properly, see that the return is equal to <span style="font-family: Courier New,Courier,monospace;">ACCOUNT_ERROR_NONE</span>.</p>
- 
-<pre class="prettyprint">
-#include &lt;stdio.h&gt;
-#include &lt;time.h&gt;
-#include &lt;dlog.h&gt;
-
-static account_h account = NULL;
-static int account_id = 0;
-int ret = 0;
-</pre></li>
-
-<li><p>Set up the required privileges for your application:</p>
-
-<ul>
-<li>To use APIs for reading account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span> privilege to the manifest file.
-</li>
-
-<li>To use APIs for writing account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span> privilege to the manifest file.
-</li>
-
-</ul></li></ol>
-
- <h2 id="add" name="add">Creating and Managing an Account</h2>
-
-<p>To create an account, set it properties, and add it to the account database:</p>
-
-
-<ol>
-
-<li>Create an account using the <span style="font-family: Courier New,Courier,monospace;">account_create()</span> function and the previously defined account handle:
-
-<pre class="prettyprint">
-ret = account_create(&amp;account);
-</pre>
-</li>
-<li>When the account is created, you can set account properties, such as name, display name, domain name, and email address:
-
-<pre class="prettyprint">
-char* account_name = &quot;Marcus&quot;;
-char* display_name = &quot;Marcus_display&quot;;
-char* domain_name = &quot;Marcus_domain&quot;;
-char* email_address = &quot;marcus@example.com&quot;;
-char* image_path = &quot;image_path&quot;;
-
-ret = account_set_user_name(account, account_name);
-
-ret = account_set_display_name(account, display_name);
-
-ret = account_set_domain_name(account, domain_name);
-
-ret = account_set_email_address(account, email_address);
-
-ret = account_set_icon_path(account, image_path);
-</pre>
-</li>
-
-<li>When the account is configured, use the <span style="font-family: Courier New,Courier,monospace;">account_insert_to_db()</span> function to insert the account to the account database. Use the account ID as the second parameter (<span style="font-family: Courier New,Courier,monospace;">account_id</span>):
-
- <pre class="prettyprint">
-ret = account_insert_to_db(account, &amp;account_id);
-</pre>
-</li>
-</ol>
-
- <h2 id="get" name="get">Getting Account Information</h2>
-
-<p>To get account information, such as user name, display name, domain name, and email address:</p>
-
-<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace;">account_get_total_count_from_db()</span> function to get the total number of inserted records.
-<p>To get individual records, use the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function, which iterates through all the records and invokes a callback function for each account:</p>
-<pre class="prettyprint">account_foreach_account_from_db (account_cb callback, void *user_data)</pre>
- 
-<p>The function takes the following parameters:</p>
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace;">callback</span>: Callback function to be invoked</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data to be passed to the callback function</li>
-</ul>
- 
-<pre class="prettyprint">
-int total_count = -1;
-ret = account_get_total_count_from_db(&amp;total_count);
-
-ret = account_foreach_account_from_db(on_account_read, NULL);
-</pre> 
-</li>
-
-<li>Define the callback function:
-<pre class="prettyprint">typedef bool(* account_cb)(account_h account, void *user_data)</pre>
- 
-<p>The callback function takes the following parameters:</p>
-<ul>
-    <li><span style="font-family: Courier New,Courier,monospace;">account</span>: Account handle</li>
-       <li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data passed from the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function</li>
-</ul>
-
-<p>This function retrieves information for each account.</p>
-</li>
-<li>To get more details, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_user_name()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_display_name()</span>, and <span style="font-family: Courier New,Courier,monospace;">account_get_icon_path()</span> functions:
-
-<pre class="prettyprint">
-static bool on_account_read(account_h account, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;char *display_name = NULL;
-&nbsp;&nbsp;&nbsp;char *icon_path = NULL;
-&nbsp;&nbsp;&nbsp;// Get the account ID
-&nbsp;&nbsp;&nbsp;ret = account_get_account_id(account, &amp;account_id);
-&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;// Get the user name
-&nbsp;&nbsp;&nbsp;ret = account_get_user_name(account, &amp;name);
-&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;name: %s&quot;, name);
-&nbsp;&nbsp;&nbsp;// Get the display name
-&nbsp;&nbsp;&nbsp;ret = account_get_display_name(account, &amp;display_name);
-&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;display_name: %s&quot;, display_name);
-&nbsp;&nbsp;&nbsp;// Get the icon path
-&nbsp;&nbsp;&nbsp;ret = account_get_icon_path(account, &amp;icon_path);
-&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;icon_path: %s&quot;, icon_path);
-
-&nbsp;&nbsp;&nbsp;free(name);
-&nbsp;&nbsp;&nbsp;free(display_name);
-&nbsp;&nbsp;&nbsp;free(icon_path);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-</li>
-</ol>
-
- <h2 id="retrieve" name="retrieve">Retrieving Accounts by Package Name</h2>
-
- <p>To retrieve accounts by a specific account provider:</p>
-  <ol>
-   <li>Define the <span style="font-family: Courier New,Courier,monospace">account_cb()</span> callback for getting data of accounts as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function.
-   <pre class="prettyprint">
-static bool account_callback(account_h account, void* user_data) // account_cb() callback
-{
-&nbsp;&nbsp;&nbsp;// Called once for each account in the database
-}
-</pre></li>
-   <li>Retrieve the accounts of a specific account provider using the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function, and specifying the package name of the account provider:
-<pre class="prettyprint">int ret = -1;
-char* package_name = &quot;package_name&quot;;
-ret = account_query_account_by_package_name(account_callback, package_name, NULL);
-</pre></li>
-  </ol>
-
- <h2 id="capability" name="capability">Retrieving Account Providers by Capability</h2>
-
- <p>To retrieve account providers by a specific capability:</p>
-  <ol>
-   <li>Define <span style="font-family: Courier New,Courier,monospace">account_type_cb()</span> callback for getting account providers as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function. The callback takes the account provider handle as the first parameter.
-<pre class="prettyprint">
-static bool account_type_callback(account_type_h account_type, void* user_data) // account_type_cb() callback
-{
-&nbsp;&nbsp;&nbsp;// Called once for each account type in the database
-}
-</pre>
-</li>
-   
-   <li>Retrieve the account providers of a specific capability by using the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function:
-<pre class="prettyprint">
-int ret = -1;
-char* capability = &quot;http://tizen.org/account/capability/contact&quot;;
-
-ret = account_type_create(&amp;account_type);
-
-account_type_query_by_provider_feature(account_type_callback, capability, NULL);
-</pre></li>
-  </ol>
-
- <h2 id="remove" name="remove">Removing an Account</h2>
-
-<p>To remove an account, use the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_user_name()</span>, or <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_package_name()</span> function. They all remove a given account record.</p>
-
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">To get the ID needed as an argument of the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span> function, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span> function.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<pre class="prettyprint">
-ret = account_delete_from_db_by_id(account_id);
-</pre>
-
- <h2 id="disconnect" name="disconnect">Destroying the Account Handle</h2>
-
-<p>To destroy the account handle, use the <span style="font-family: Courier New,Courier,monospace;">account_destroy()</span> function:</p>
-<pre class="prettyprint">
-ret = account_destroy(account);
-</pre>
-
- <h2 id="screen" name="screen">Adding an Application on the Account Screen</h2>
-
-<p>To add your application on the Add account screen of the device:</p>
-
-<ol>
-<li>Add the required information in the manifest file:
-<pre class="prettyprint">&lt;account&gt;
-&nbsp;&nbsp;&nbsp;&lt;account-provider appid=&quot;app-id name&quot; providerid=&quot;url style string&quot; multiple-accounts-support=&quot;true or false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account&quot;&gt;application icon name&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account-small&quot;&gt;application small icon name&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Application name&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;ko-kr&quot;&gt;ߖȃخʼnL݇ Lا&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/calendar&lt;/capability&gt;
-&nbsp;&nbsp;&nbsp;&lt;/account-provider&gt;
-&lt;/account&gt;</pre>
-
-<p>The required information includes:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">appid=&quot;app-id name&quot;</span>
-<p>Application ID (for example, <span style="font-family: Courier New,Courier,monospace">appid=&quot;org.tizen.account&quot;</span>).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">providerid=&quot;url style string&quot;</span>
-<p>Provider identification string (for example, <span style="font-family: Courier New,Courier,monospace">providerid=&quot;http://www.tizen.org&quot;</span>).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">multiple-accounts-support=&quot;true or false&quot;</span>
-<p>Multiple account support (if your application can manage 2 or more accounts, set to <span style="font-family: Courier New,Courier,monospace">true</span>; otherwise set to <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;icon section=&quot;account&quot;&gt;application icon name&lt;/icon&gt;</span>
-<p>Icon displayed on the Add account screen.</p>
-<p>The icon size must be 72x72 px and the icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;icon section=&quot;account-small&quot;&gt;application small icon name&lt;/icon&gt;</span>
-<p>Small icon displayed on the Other application screen to represent the account provider.</p>
-<p>The small icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;</span>
-<p>Application name displayed on the Add account screen, according to the selected language.</p>
-<p>An account provider must have at least one label tag.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;</span>
-<p>For more information, see the <a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager</a> guide.</p></li></ul>
-</li>
-
-<li>Create the sign-in screen UI.
-<p>When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (<span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span>) defined in the <span style="font-family: Courier New,Courier,monospace">account-types.h</span> header file, so the sign-in screen must be displayed.</p>
-
-  <p class="figure">Figure: Sign-in screen</p> 
-  <p align="center"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p> 
-</li>
-</ol>
-
- <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">For more information on operations and events, see the <a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager</a> guide.</td>
-    </tr>
-   </tbody>
-  </table>
-
- <h2 id="queries" name="queries">Performing Database Queries</h2>
-
-<p>To perform database queries:</p>
-
-
-<ol>
-<li>Prepare sample content.
-<p>To perform queries, you need existing content in the database. To access existing account, obtain it from the database. It can be done using a few functions, depending on the user requirements.</p>
-<p>To create new content to the database:</p>
-
-<ol type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace;">create_Account()</span> function creates a new account from a given <span style="font-family: Courier New,Courier,monospace;">account_h</span> handle and account details (name, display name, domain, e-mail). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.</p>
-
-<p>After creating the account, it is added to the database. When no longer needed, the account handle has to be destroyed using the <span style="font-family: Courier New,Courier,monospace;">account_destroy(account)</span> function.</p>
-
-<pre class="prettyprint">
-int id[3];
-static account_h account = NULL;
-
-Create_Account(&amp;account, &quot;Person&quot;, &quot;DiplayPerson&quot;, &quot;Person Domain&quot;, &quot;someone1@somewho.com&quot;);
-
-account_set_capability(account, &quot;Custom&quot;, ACCOUNT_CAPABILITY_ENABLED);
-
-account_set_capability(account, &quot;Next&quot;, ACCOUNT_CAPABILITY_ENABLED);
- 
-account_set_capability(account, &quot;Another&quot;, ACCOUNT_CAPABILITY_DISABLED);
-
-account_insert_to_db(account, &amp;id[0]);
-
-account_destroy(account);
-</pre></li>
-
-<li><p>Add 2 more accounts to the database.</p>
-
-<pre class="prettyprint">
-Create_Account(&amp;account, &quot;PersonX&quot;, &quot;DisplayX&quot;, &quot;Other Domain&quot;, &quot;someone2@somewho.com&quot;);
-account_insert_to_db(account, &amp;id[1]);
-
-account_destroy(account);
-
-Create_Account(&amp;account, &quot;Human&quot;, &quot;Humanity&quot;, &quot;Everyone&quot;, &quot;someone3@somewho.com&quot;);
-
-account_insert_to_db(account, &amp;id[2]);
-
-account_destroy(account);
-
-Create_Account(&amp;account, &quot;LastOne&quot;, &quot;LastDisplay&quot;, &quot;Last Domain&quot;, &quot;someone4@somewho.com&quot;);
-account_insert_to_db(account, &amp;id[3]);
-account_destroy(account);
-</pre>
-</li>
-
-<li>Create an account.
-<p>For more information, see <a href="#add">Creating and Managing an Account</a>.</p>
-
-<pre class="prettyprint">
-static int Create_Account(account_h * account, char * account_name, char * display_name, char *  domain_name, char * email_address)
-{
-&nbsp;&nbsp;&nbsp;account_create(account);
-
-&nbsp;&nbsp;&nbsp;account_set_user_name(*account, account_name);
-
-&nbsp;&nbsp;&nbsp;account_set_display_name(*account, display_name);
-
-&nbsp;&nbsp;&nbsp;account_set_domain_name(*account, domain_name);
-
-&nbsp;&nbsp;&nbsp;account_set_email_address(*account, email_address);
-}
-</pre></li></ol>
-</li>
-
-<li>List accounts.
-<ol type="a"><li>
-<p>To verify the database insertion, all accounts are listed.</p>
-
-<pre class="prettyprint">
-struct Account_Records
-{
-&nbsp;&nbsp;&nbsp;int count;
-&nbsp;&nbsp;&nbsp;int tab[100];
-};
-
-struct Account_Records rec;
- 
-List_Accounts(&amp;rec);
-</pre></li>
-
-<li><p>When <span style="font-family: Courier New,Courier,monospace;">struct Account_Records* rec</span> is not <span style="font-family: Courier New,Courier,monospace;">Null</span>, <span style="font-family: Courier New,Courier,monospace;">List_Accounts</span> counts all records in the database. Records are obtained using the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function.</p>
-
-<pre class="prettyprint">
-static void List_Accounts(struct Account_Records* rec)
-{
-&nbsp;&nbsp;&nbsp;if (rec!=NULL)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;count=0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;account_foreach_account_from_db(on_account_read, rec);
-}
-</pre></li>
-
-<li><p>For each found record, the <span style="font-family: Courier New,Courier,monospace;">on_account_read()</span> callback function is called. If <span style="font-family: Courier New,Courier,monospace;">void *user_data</span> is not null, the function is counting the existing accounts. String data returned by the get functions has to be released with <span style="font-family: Courier New,Courier,monospace;">free</span>. Data prepared with the <span style="font-family: Courier New,Courier,monospace;">sprint()</span> function can, for example, be sent for <span style="font-family: Courier New,Courier,monospace;">stdout</span>.</p>
-
-<pre class="prettyprint">
-static bool on_account_read(account_h account, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;int account_id = 0;
-&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;char *display_name = NULL;
-&nbsp;&nbsp;&nbsp;struct Account_Records * rec = (struct Account_Records *)user_data;
-&nbsp;&nbsp;&nbsp;char buf[100];
-
-&nbsp;&nbsp;&nbsp;account_get_account_id(account, &amp;account_id);
-
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback ID: %d\n&quot;, account_id);
-
-&nbsp;&nbsp;&nbsp;if (user_data!=NULL)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;tab[rec-&gt;count++]=account_id;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;account_get_user_name(account, &amp;name);
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback Name: %s\n&quot;, name);
-
-&nbsp;&nbsp;&nbsp;free(name);
-
-&nbsp;&nbsp;&nbsp;account_get_display_name(account, &amp;display_name);
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback Disp.: %s\n&quot;, display_name);
-
-&nbsp;&nbsp;&nbsp;free(display_name);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre></li></ol>
-</li>
-<li>Query the account by ID.
-<p>The easiest way to get access to an account stored in the database is referring to it by its ID. It can be done with the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_account_id()</span> function. This function requires an existing handle to an account as an input parameter. </p>
-
-<pre class="prettyprint">
-for (i=0; i&lt;rec.count; i++)
-{
-&nbsp;&nbsp;&nbsp;account_create(&amp;account);
-&nbsp;&nbsp;&nbsp;account_query_account_by_account_id (rec.tab[i], &amp;account);
-
-&nbsp;&nbsp;&nbsp;Show_Account(account);
-
-&nbsp;&nbsp;&nbsp;account_destroy(account);
-}
-</pre>
-</li>
-
-<li>Show the account.
-<p>The following function prepares data to send it to any text output.</p>
-
-<pre class="prettyprint">
-static int Show_Account(account_h acc)
-{
-&nbsp;&nbsp;&nbsp;int account_id = 0;
-&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;char *display_name = NULL;
-&nbsp;&nbsp;&nbsp;char buf[100];
-
-&nbsp;&nbsp;&nbsp;account_get_account_id(acc, &amp;account_id);
-
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account ID: %d\n&quot;, account_id);
-
-&nbsp;&nbsp;&nbsp;account_get_user_name(acc, &amp;name);
-
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account Name: %s\n&quot;, name);
-
-&nbsp;&nbsp;&nbsp;free(name);
-
-&nbsp;&nbsp;&nbsp;account_get_display_name(acc, &amp;display_name);
-
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account Disp.: %s\n&quot;, display_name);
-
-&nbsp;&nbsp;&nbsp;free(display_name);
-
-&nbsp;&nbsp;&nbsp;return 0;
-}
-</pre>
-</li>
-
-<li>Query the account by various attributes:
-<ul><li>Query by username.
-<p>Querying data by username requires providing a valid username callback function. In this example, it is the same function as for <span style="font-family: Courier New,Courier,monospace;">for_each</span>, but cast without the third parameter.</p>
-
-<pre class="prettyprint">
-account_query_account_by_user_name (on_account_read, &quot;Human&quot;, NULL);
-</pre>
-</li>
-
-<li>Query by package name
-<p>By default, the accounts created in the application context have a package name set to the application name. Change it using the <span style="font-family: Courier New,Courier,monospace;">account_set_package_name()</span> function. To list accounts by package name, the user can provide a name by itself or obtain it with the <span style="font-family: Courier New,Courier,monospace;">account_get_package_name()</span> function.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_package_name()</span> function requires a callback function and a package name. In addition, the user data can be passed to the callback function as a third parameter.</p>
- 
-<p>The package name has to be released when no longer needed.</p>
-
-<pre class="prettyprint">
-char * package_name;
-account_get_package_name (account, &amp;package_name);
-account_query_account_by_package_name (on_account_read, package_name, NULL);
-free(package_name);
-</pre>
-</li>
-
-<li>Query by capability
-<p>The following function allows the user to find all accounts with a specified capability on a specified state. Once again, the callback function is required.</p>
-
-<pre class="prettyprint">
-account_query_account_by_capability (on_account_read, &quot;Custom&quot;, ACCOUNT_CAPABILITY_ENABLED, NULL);
-</pre>
-</li>
-
-<li> Query by capability type
-<p>This function is similar to the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_capability()</span> function, but returns all accounts with a specified capability, without checking its state.</p>
-
-<pre class="prettyprint">
-account_query_account_by_capability_type (on_account_read, &quot;Next&quot;, NULL);
-</pre>
-</li>
-
-<li>Query capability by account ID
-<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_capability_by_account_id()</span> function is different from the previous functions. It lists all capabilities from an account with a specified ID. In this case it requires a different type of callback, as listed below.</p>
-
-<pre class="prettyprint">
-account_query_capability_by_account_id (_capability_cb, id[0], NULL);
-</pre>
-
-<p>The callback function prepares data to be sent to an output.</p>
-
-<pre class="prettyprint">
-static bool _capability_cb(const char *capability_type, account_capability_state_e capability_state, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;char buf[200];
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Found capability: %s on state %d\n&quot;, capability_type, capability_state);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-</li></ul></li>
-
-<li>Clean up.
-<p>When no longer needed, all handles to accounts have to be destroyed.</p>
-
-<pre class="prettyprint">
-account_destroy(account);
-</pre>
-</li>
-</ol>
-
- <h2 id="secret" name="secret">Managing Account Secrecy</h2>
-
-<p>To manage account secrecy:</p>
-<ol>
-<li>Select the secrecy level using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">account_secrecy_state_e</a> enumeration.
-
-<pre class="prettyprint">
-static account_h account = NULL;
-account_secrecy_state_e secret;
- 
-char buf[200];
-int ret;
-int id;
-
-// Account 1
-Create_Account(&amp;account, &quot;Security 1&quot;, &quot;Invalid&quot;, &quot;NOBODY&quot;, &quot;anony@mous.not&quot;);
-
-account_set_secret(account, ACCOUNT_SECRECY_INVALID);
-
-account_get_secret(account, &amp;secret);
-
-account_insert_to_db(account, &amp;id);
-
-sprintf(buf,&quot;Account 1 secret: %d\n&quot;, secret);
-
-account_destroy(account);
-
-// Account 2
-
-Create_Account(&amp;account, &quot;Security 2&quot;, &quot;Invisible&quot;, &quot; NOBODY&quot;, &quot;anony1@mous.not&quot;);
-
-account_set_secret(account, ACCOUNT_SECRECY_INVISIBLE);
-
-account_get_secret(account, &amp;secret);
-
-account_insert_to_db(account, &amp;id);
-
-sprintf(buf, &quot; Account 2 secret: %d\n&quot;, secret);
-
-account_destroy(account);
-
-// Account 3
-
-Create_Account(&amp;account, &quot;Secret 3&quot;, &quot;Visible&quot;, &quot; NOBODY&quot;, &quot;anony2@mous.not&quot;);
-
-ret = account_set_secret(account, ACCOUNT_SECRECY_VISIBLE);
-
-ret = account_get_secret(account, &amp;secret);
-
-ret = account_insert_to_db(account, &amp;id);
-
-sprintf(buf,&quot; Account 3 secret: %d\n&quot;, secret);
-
-account_destroy(account);
-
-List_Accounts(NULL);
-</pre>
-
-<p>Secrecy is linked only with visibility on the account settings screen. The account is still visible and can be accessed using a query or the <span style="font-family: Courier New,Courier,monospace;">for_each</span> function. For further information on how to add your application to the account screen, see <a href="#screen">Adding an Application on the Account Screen</a>.</p>
-
-<pre class="prettyprint">// List_Account() console output
-MyCallback ID: 12
-MyCallback Name: Security 1
-MyCallback Disp.: Invalid
--------------------
-MyCallback ID: 13
-MyCallback Name: Security 2
-MyCallback Disp.: Invisible
--------------------
-MyCallback ID: 14
-MyCallback Name: Secret 3
-MyCallback Disp.: Visible
-</pre>
-</li>
-
-<li>Clean up.
-<p>Account handles have to be destroyed when no longer needed.</p>
-
-<pre class="prettyprint">
-account_destroy(account);
-</pre>
-</li>
-</ol>
-
- <h2 id="update" name="update">Updating Accounts</h2>
-
-<p>To update and track account data.</p>
-
-<ol>
-<li>Subscribe notifications.
-<p>To track account changes, create an <span style="font-family: Courier New,Courier,monospace;">account_subscribe_h</span> instance and register a notification.</p>
-
-<pre class="prettyprint">
-account_subscribe_h account_subscribe;
-
-account_subscribe_create(&amp;account_subscribe);
-
-account_subscribe_notification(account_subscribe, _account_event_cb, NULL);
-</pre>
-</li>
-
-<li>Create an account.
-<p>Accounts are created and then their handles are destroyed. The package name is obtained from the second account.</p>
-
-<pre class="prettyprint">
-Create_Account(&amp;account, &quot;Updater&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);
-account_insert_to_db(account, &amp;id);
-
-Show_Account(account);
-account_destroy(account);
-
-Create_Account(&amp;account, &quot;Another&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);
-account_insert_to_db(account, &amp;id);
-
-account_get_package_name (account, &amp;package_name);
-sprintf(buf, &quot;Package_name: %s\n&quot;, package_name);
-
-Show_Account(account);
-account_destroy(account);
-</pre>
-</li>
-
-<li>Update the account.
-<ul><li><p>To update an account by its ID:</p>
-<ol type="a">
-<li>Create a handle to the account.</li>
-<li>Get the account from the database (also possible by ID).</li>
-<li>Make the necessary changes.</li>
-<li>Update the account using the account handle and a valid ID.</li>
-<li>Destroy the account handle.</li>
-</ol>
-
-<pre class="prettyprint">
-account_create(&amp;account);
-account_query_account_by_account_id(id, &amp;account);
-account_set_display_name(account, &quot;Updated!&quot;);
-account_update_to_db_by_id(account, id);
-account_destroy(account);
-</pre>
-</li>
-
-<li>Update account by user name.
-<p>To update an account by its user name:</p>
-<ol type="a">
-<li>Create a handle to the account.</li>
-<li>Get the account from the database (also by ID).</li>
-<li>Make the necessary changes.</li>
-<li>Update the account using the account handle, a valid user name, and a package name. There can be accounts with the same user names in different packages.</li>
-<li>Destroy the account handle.</li>
-</ol>
-
-<pre class="prettyprint">
-account_create(&amp;account);
-account_query_account_by_account_id(id, &amp;account);
-account_set_display_name(account, &quot;Updated!&quot;);
-account_update_to_db_by_user_name(account, &quot;Another&quot;, package_name);
-account_destroy(account);
-</pre></li></ul>
-</li>
-
-<li>Create the callback.
-<p>When any action is taking place on any account when a notification is subscribed, a callback function is invoked. The callback function provides in its parameters the event type as a string, the ID of the account associated with the actual change, and, additionally, the user data registered while subscribing the notification.</p>
-
-<pre class="prettyprint">
-bool _account_event_cb(const char *event_type, int account_id, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;char buf[200];
-
-&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;ACCOUNT EVENT: %s, %d\n&quot;, event_type, account_id);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-</li>
-
-<li>Show accounts.
-<p>To verify the updates, the account can be shown.</p>
-
-<pre class="prettyprint">
-account_create(&amp;account);
-account_query_account_by_account_id(id, &amp;account);
-Show_Account(account);
-account_destroy(account);
-</pre>
-</li>
-
-<li>Clean up.
-<p>Unsubscribe the notification when no longer needed.</p>
-
-<pre class="prettyprint">
-account_unsubscribe_notification(account_subscribe);
-</pre>
-</li>
-</ol>
-
- <h2 id="type" name="type">Retrieving Account Types</h2>
-
-<p>To retrieve account types:</p>
-
-<ol>
-<li>Create a type.
-<p>To operate on the account type, create a handle to it.</p>
-
-<pre class="prettyprint">
-account_type_h account_type;
-
-account_type_create(&amp;account_type);
-</pre>
-</li>
-
-<li>Get the type information.
-<p>If the account type with a specified ID exists, you can get it from the database with the <span style="font-family: Courier New,Courier,monospace;">account_query_by_app_id()</span> function.</p>
-
-<p>It is possible to set, for example:</p>
-<ul>
-<li>ID</li>
-<li>Labels</li>
-<li>Features</li>
-<li>Multiple account support (this is only a flag)</li>
-</ul>
-
-<p>To get the account types by the application ID, use the <span style="font-family: Courier New,Courier,monospace;">account_type_query_by_app_id()</span> function.</p>
-
-<pre class="prettyprint">
-int multiple_account_support = -1;
-char *your_app_id = &quot;com.tizen.example&quot;; // App ID retrieving account types
-char *app_id = NULL;
-char *provider_feature = NULL;
-char *icon_path = NULL;
-
-if (account_type_query_app_id_exist(your_app_id))
-{
-&nbsp;&nbsp;&nbsp;account_type_query_by_app_id(your_app_id, &amp;account_type);
-
-&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;app_id);
-
-&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;multiple_account_support);
-
-&nbsp;&nbsp;&nbsp;account_type_get_icon_path(account_type, &amp;icon_path);
-
-&nbsp;&nbsp;&nbsp;account_type_get_provider_feature(account_type, &amp;provider_feature);
-}
-</pre>
-</li>
-
-<li>List types and labels.
-<p>To list the account types or all the labels from a specified type, a proper callback function has to be provided.</p>
-
-<pre class="prettyprint">
-account_type_foreach_account_type_from_db(_account_type_cb, NULL);
-
-account_type_query_label_by_app_id(_account_label_cb, type_id, NULL);
-</pre>
-
-<p>While listing the labels, the user has access to the ID of the account type, label and its local value, and the user data passed while casting the query function.</p>
-
-<pre class="prettyprint">
-bool _account_label_cb(char *app_id, char *label, char *locale, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;char buf[200];
-
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Get Label ID: %s LABEL: %s LOCALE %s\n&quot;, app_id, label, locale);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-
-<p>The account type callback has access to the account type and user data.</p>
-
-<pre class="prettyprint">
-bool _account_type_cb(account_type_h account_type, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;char * id;
-&nbsp;&nbsp;&nbsp;int support;
-&nbsp;&nbsp;&nbsp;char buf[200];
-
-&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;id);
-
-&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;support);
-&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Account Type ID: %s Multiple support %d:\n&quot;, id, support);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-</li>
-
-<li>Clean up.
-<p>All allocated handles have to be destroyed.</p>
-
-<pre class="prettyprint">
-free(app_id);
-free(provider_feature);
-free(icon_path);
-
-account_type_destroy(account_type);
-</pre>
-</li>
-</ol>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Account Manager: Managing Account Information on the Device</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#init">Initializing the Accounts</a></li>\r
+                       <li><a href="#add">Creating and Managing an Account</a></li>\r
+                       <li>Information retrieval\r
+                               <ul class="toc">\r
+                                       <li><a href="#get">Getting Account Information</a></li>\r
+                                       <li><a href="#retrieve">Retrieving Accounts by Package Name</a></li>\r
+                                       <li><a href="#capability">Retrieving Account Providers by Capability</a></li>\r
+                               </ul>\r
+                       </li>\r
+                       <li><a href="#remove">Removing an Account</a></li>\r
+                       <li><a href="#disconnect">Destroying the Account Handle</a></li>\r
+                       <li><a href="#screen">Adding an Application on the Account Screen</a></li>\r
+                       <li><a href="#queries">Performing Database Queries</a></li>\r
+                       <li><a href="#secret">Managing Account Secrecy</a></li>\r
+                       <li><a href="#update">Updating Accounts</a></li>\r
+                       <li><a href="#type">Retrieving Account Types</a></li>\r
+               </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager Guide</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Mobile Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Account Manager: Managing Account Information on the Device</h1>\r
+\r
+  \r
+ <p>This tutorial demonstrates how you can create, delete, and update accounts in the account database, and manage account information, such as user name, display name, domain name, and email address.</p>\r
+\r
+   <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+<h2>Warm-up</h2>\r
+<p>Become familiar with the Account Manager API basics by learning about:</p>\r
+<ul>\r
+               <li><a href="#init">Initializing the Accounts</a>\r
+               <p>Initialize the account manager for use.</p></li>\r
+               <li><a href="#add">Creating and Managing an Account</a>\r
+               <p>Create an account, set its properties, and insert it to the database.</p></li>\r
+               <li>Information retrieval\r
+               <ul>\r
+               <li><a href="#get">Getting Account Information</a>\r
+               <p>Retrieve information for each existing account and implement a callback function.</p></li>\r
+               <li><a href="#retrieve">Retrieving Accounts by Package Name</a>\r
+               <p>Retrieve accounts based on a specific package.</p></li>\r
+               <li><a href="#capability">Retrieving Account Providers by Capability</a>\r
+               <p>Retrieve accounts providers based on a specific capability.</p></li>\r
+               </ul>\r
+               </li>\r
+               <li><a href="#remove">Removing an Account</a>\r
+               <p>Remove an account from the database.</p></li>\r
+               <li><a href="#disconnect">Destroying the Account Handle</a>\r
+               <p>Destroy the account handle.</p></li>\r
+               <li><a href="#screen">Adding an Application on the Account Screen</a>\r
+               <p>Display your application on the Add account screen of a Tizen device.</p>\r
+               </li>\r
+</ul>\r
+<h2>Follow-up</h2>\r
+<p>Once we have learned the basics of the Account Manager API, we can now move on to more advanced tasks, including:</p>\r
+<ul>\r
+               <li><a href="#queries">Performing Database Queries</a>\r
+               <p>Manage accounts and query them based on various attributes.</p></li>\r
+               <li><a href="#secret">Managing Account Secrecy</a>\r
+               <p>Manage account secrecy levels.</p></li>\r
+               <li><a href="#update">Updating Accounts</a>\r
+               <p>Update account details.</p></li>\r
+               <li><a href="#type">Retrieving Account Types</a>\r
+               <p>Retrieve account types.</p></li>\r
+               \r
+</ul>\r
+\r
+ <h2 id="init" name="init">Initializing the Accounts</h2>\r
+\r
+<p>To initialize the account manager:</p>\r
+<ol>\r
+<li> <p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;account.h&gt;</span> header file in your application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;account.h&gt;\r
+</pre></li>\r
+<li><p>Declare the necessary global variables. To know, whether a function has been executed properly, see that the return is equal to <span style="font-family: Courier New,Courier,monospace;">ACCOUNT_ERROR_NONE</span>.</p>\r
+ \r
+<pre class="prettyprint">\r
+#include &lt;stdio.h&gt;\r
+#include &lt;time.h&gt;\r
+#include &lt;dlog.h&gt;\r
+\r
+static account_h account = NULL;\r
+static int account_id = 0;\r
+int ret = 0;\r
+</pre></li>\r
+\r
+<li><p>Set up the required privileges for your application:</p>\r
+\r
+<ul>\r
+<li>To use APIs for reading account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span> privilege to the manifest file.\r
+</li>\r
+\r
+<li>To use APIs for writing account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span> privilege to the manifest file.\r
+</li>\r
+\r
+</ul></li></ol>\r
+\r
+ <h2 id="add" name="add">Creating and Managing an Account</h2>\r
+\r
+<p>To create an account, set it properties, and add it to the account database:</p>\r
+\r
+\r
+<ol>\r
+\r
+<li>Create an account using the <span style="font-family: Courier New,Courier,monospace;">account_create()</span> function and the previously defined account handle:\r
+\r
+<pre class="prettyprint">\r
+ret = account_create(&amp;account);\r
+</pre>\r
+</li>\r
+<li>When the account is created, you can set account properties, such as name, display name, domain name, and email address:\r
+\r
+<pre class="prettyprint">\r
+char* account_name = &quot;Marcus&quot;;\r
+char* display_name = &quot;Marcus_display&quot;;\r
+char* domain_name = &quot;Marcus_domain&quot;;\r
+char* email_address = &quot;marcus@example.com&quot;;\r
+char* image_path = &quot;image_path&quot;;\r
+\r
+ret = account_set_user_name(account, account_name);\r
+\r
+ret = account_set_display_name(account, display_name);\r
+\r
+ret = account_set_domain_name(account, domain_name);\r
+\r
+ret = account_set_email_address(account, email_address);\r
+\r
+ret = account_set_icon_path(account, image_path);\r
+</pre>\r
+</li>\r
+\r
+<li>When the account is configured, use the <span style="font-family: Courier New,Courier,monospace;">account_insert_to_db()</span> function to insert the account to the account database. Use the account ID as the second parameter (<span style="font-family: Courier New,Courier,monospace;">account_id</span>):\r
+\r
+ <pre class="prettyprint">\r
+ret = account_insert_to_db(account, &amp;account_id);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="get" name="get">Getting Account Information</h2>\r
+\r
+<p>To get account information, such as user name, display name, domain name, and email address:</p>\r
+\r
+<ol>\r
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">account_get_total_count_from_db()</span> function to get the total number of inserted records.\r
+<p>To get individual records, use the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function, which iterates through all the records and invokes a callback function for each account:</p>\r
+<pre class="prettyprint">account_foreach_account_from_db (account_cb callback, void *user_data)</pre>\r
+ \r
+<p>The function takes the following parameters:</p>\r
+<ul>\r
+    <li><span style="font-family: Courier New,Courier,monospace;">callback</span>: Callback function to be invoked</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data to be passed to the callback function</li>\r
+</ul>\r
+ \r
+<pre class="prettyprint">\r
+int total_count = -1;\r
+ret = account_get_total_count_from_db(&amp;total_count);\r
+\r
+ret = account_foreach_account_from_db(on_account_read, NULL);\r
+</pre> \r
+</li>\r
+\r
+<li>Define the callback function:\r
+<pre class="prettyprint">typedef bool(* account_cb)(account_h account, void *user_data)</pre>\r
+ \r
+<p>The callback function takes the following parameters:</p>\r
+<ul>\r
+    <li><span style="font-family: Courier New,Courier,monospace;">account</span>: Account handle</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data passed from the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function</li>\r
+</ul>\r
+\r
+<p>This function retrieves information for each account.</p>\r
+</li>\r
+<li>To get more details, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_user_name()</span>, <span style="font-family: Courier New,Courier,monospace;">account_get_display_name()</span>, and <span style="font-family: Courier New,Courier,monospace;">account_get_icon_path()</span> functions:\r
+\r
+<pre class="prettyprint">\r
+static bool on_account_read(account_h account, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;char *name = NULL;\r
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;\r
+&nbsp;&nbsp;&nbsp;char *icon_path = NULL;\r
+&nbsp;&nbsp;&nbsp;// Get the account ID\r
+&nbsp;&nbsp;&nbsp;ret = account_get_account_id(account, &amp;account_id);\r
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;// Get the user name\r
+&nbsp;&nbsp;&nbsp;ret = account_get_user_name(account, &amp;name);\r
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;name: %s&quot;, name);\r
+&nbsp;&nbsp;&nbsp;// Get the display name\r
+&nbsp;&nbsp;&nbsp;ret = account_get_display_name(account, &amp;display_name);\r
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;display_name: %s&quot;, display_name);\r
+&nbsp;&nbsp;&nbsp;// Get the icon path\r
+&nbsp;&nbsp;&nbsp;ret = account_get_icon_path(account, &amp;icon_path);\r
+&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;icon_path: %s&quot;, icon_path);\r
+\r
+&nbsp;&nbsp;&nbsp;free(name);\r
+&nbsp;&nbsp;&nbsp;free(display_name);\r
+&nbsp;&nbsp;&nbsp;free(icon_path);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="retrieve" name="retrieve">Retrieving Accounts by Package Name</h2>\r
+\r
+ <p>To retrieve accounts by a specific account provider:</p>\r
+  <ol>\r
+   <li>Define the <span style="font-family: Courier New,Courier,monospace">account_cb()</span> callback for getting data of accounts as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function.\r
+   <pre class="prettyprint">\r
+static bool account_callback(account_h account, void* user_data) // account_cb() callback\r
+{\r
+&nbsp;&nbsp;&nbsp;// Called once for each account in the database\r
+}\r
+</pre></li>\r
+   <li>Retrieve the accounts of a specific account provider using the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function, and specifying the package name of the account provider:\r
+<pre class="prettyprint">int ret = -1;\r
+char* package_name = &quot;package_name&quot;;\r
+ret = account_query_account_by_package_name(account_callback, package_name, NULL);\r
+</pre></li>\r
+  </ol>\r
+\r
+ <h2 id="capability" name="capability">Retrieving Account Providers by Capability</h2>\r
+\r
+ <p>To retrieve account providers by a specific capability:</p>\r
+  <ol>\r
+   <li>Define <span style="font-family: Courier New,Courier,monospace">account_type_cb()</span> callback for getting account providers as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function. The callback takes the account provider handle as the first parameter.\r
+<pre class="prettyprint">\r
+static bool account_type_callback(account_type_h account_type, void* user_data) // account_type_cb() callback\r
+{\r
+&nbsp;&nbsp;&nbsp;// Called once for each account type in the database\r
+}\r
+</pre>\r
+</li>\r
+   \r
+   <li>Retrieve the account providers of a specific capability by using the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function:\r
+<pre class="prettyprint">\r
+int ret = -1;\r
+char* capability = &quot;http://tizen.org/account/capability/contact&quot;;\r
+\r
+ret = account_type_create(&amp;account_type);\r
+\r
+account_type_query_by_provider_feature(account_type_callback, capability, NULL);\r
+</pre></li>\r
+  </ol>\r
+\r
+ <h2 id="remove" name="remove">Removing an Account</h2>\r
+\r
+<p>To remove an account, use the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_user_name()</span>, or <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_package_name()</span> function. They all remove a given account record.</p>\r
+\r
+ <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">To get the ID needed as an argument of the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span> function, use the <span style="font-family: Courier New,Courier,monospace;">account_get_account_id()</span> function.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<pre class="prettyprint">\r
+ret = account_delete_from_db_by_id(account_id);\r
+</pre>\r
+\r
+ <h2 id="disconnect" name="disconnect">Destroying the Account Handle</h2>\r
+\r
+<p>To destroy the account handle, use the <span style="font-family: Courier New,Courier,monospace;">account_destroy()</span> function:</p>\r
+<pre class="prettyprint">\r
+ret = account_destroy(account);\r
+</pre>\r
+\r
+ <h2 id="screen" name="screen">Adding an Application on the Account Screen</h2>\r
+\r
+<p>To add your application on the Add account screen of the device:</p>\r
+\r
+<ol>\r
+<li>Add the required information in the manifest file:\r
+<pre class="prettyprint">&lt;account&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;account-provider appid=&quot;app-id name&quot; providerid=&quot;url style string&quot; multiple-accounts-support=&quot;true or false&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account&quot;&gt;application icon name&lt;/icon&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account-small&quot;&gt;application small icon name&lt;/icon&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Application name&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;ko-kr&quot;&gt;ߖȃخʼnL݇ Lا&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/calendar&lt;/capability&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/account-provider&gt;\r
+&lt;/account&gt;</pre>\r
+\r
+<p>The required information includes:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">appid=&quot;app-id name&quot;</span>\r
+<p>Application ID (for example, <span style="font-family: Courier New,Courier,monospace">appid=&quot;org.tizen.account&quot;</span>).</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">providerid=&quot;url style string&quot;</span>\r
+<p>Provider identification string (for example, <span style="font-family: Courier New,Courier,monospace">providerid=&quot;http://www.tizen.org&quot;</span>).</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">multiple-accounts-support=&quot;true or false&quot;</span>\r
+<p>Multiple account support (if your application can manage 2 or more accounts, set to <span style="font-family: Courier New,Courier,monospace">true</span>; otherwise set to <span style="font-family: Courier New,Courier,monospace">false</span>)</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">&lt;icon section=&quot;account&quot;&gt;application icon name&lt;/icon&gt;</span>\r
+<p>Icon displayed on the Add account screen.</p>\r
+<p>The icon size must be 72x72 px and the icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">&lt;icon section=&quot;account-small&quot;&gt;application small icon name&lt;/icon&gt;</span>\r
+<p>Small icon displayed on the Other application screen to represent the account provider.</p>\r
+<p>The small icon file must be in the <span style="font-family: Courier New,Courier,monospace">{app-root}\shared\res\</span> directory.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;</span>\r
+<p>Application name displayed on the Add account screen, according to the selected language.</p>\r
+<p>An account provider must have at least one label tag.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;</span>\r
+<p>For more information, see the <a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager</a> guide.</p></li></ul>\r
+</li>\r
+\r
+<li>Create the sign-in screen UI.\r
+<p>When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (<span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span>) defined in the <span style="font-family: Courier New,Courier,monospace">account-types.h</span> header file, so the sign-in screen must be displayed.</p>\r
+\r
+  <p class="figure">Figure: Sign-in screen</p> \r
+  <p align="center"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p> \r
+</li>\r
+</ol>\r
+\r
+ <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">For more information on operations and events, see the <a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager</a> guide.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+ <h2 id="queries" name="queries">Performing Database Queries</h2>\r
+\r
+<p>To perform database queries:</p>\r
+\r
+\r
+<ol>\r
+<li>Prepare sample content.\r
+<p>To perform queries, you need existing content in the database. To access existing account, obtain it from the database. It can be done using a few functions, depending on the user requirements.</p>\r
+<p>To create new content to the database:</p>\r
+\r
+<ol type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace;">create_Account()</span> function creates a new account from a given <span style="font-family: Courier New,Courier,monospace;">account_h</span> handle and account details (name, display name, domain, e-mail). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.</p>\r
+\r
+<p>After creating the account, it is added to the database. When no longer needed, the account handle has to be destroyed using the <span style="font-family: Courier New,Courier,monospace;">account_destroy(account)</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+int id[3];\r
+static account_h account = NULL;\r
+\r
+Create_Account(&amp;account, &quot;Person&quot;, &quot;DiplayPerson&quot;, &quot;Person Domain&quot;, &quot;someone1@somewho.com&quot;);\r
+\r
+account_set_capability(account, &quot;Custom&quot;, ACCOUNT_CAPABILITY_ENABLED);\r
+\r
+account_set_capability(account, &quot;Next&quot;, ACCOUNT_CAPABILITY_ENABLED);\r
+ \r
+account_set_capability(account, &quot;Another&quot;, ACCOUNT_CAPABILITY_DISABLED);\r
+\r
+account_insert_to_db(account, &amp;id[0]);\r
+\r
+account_destroy(account);\r
+</pre></li>\r
+\r
+<li><p>Add 2 more accounts to the database.</p>\r
+\r
+<pre class="prettyprint">\r
+Create_Account(&amp;account, &quot;PersonX&quot;, &quot;DisplayX&quot;, &quot;Other Domain&quot;, &quot;someone2@somewho.com&quot;);\r
+account_insert_to_db(account, &amp;id[1]);\r
+\r
+account_destroy(account);\r
+\r
+Create_Account(&amp;account, &quot;Human&quot;, &quot;Humanity&quot;, &quot;Everyone&quot;, &quot;someone3@somewho.com&quot;);\r
+\r
+account_insert_to_db(account, &amp;id[2]);\r
+\r
+account_destroy(account);\r
+\r
+Create_Account(&amp;account, &quot;LastOne&quot;, &quot;LastDisplay&quot;, &quot;Last Domain&quot;, &quot;someone4@somewho.com&quot;);\r
+account_insert_to_db(account, &amp;id[3]);\r
+account_destroy(account);\r
+</pre>\r
+</li>\r
+\r
+<li>Create an account.\r
+<p>For more information, see <a href="#add">Creating and Managing an Account</a>.</p>\r
+\r
+<pre class="prettyprint">\r
+static int Create_Account(account_h * account, char * account_name, char * display_name, char *  domain_name, char * email_address)\r
+{\r
+&nbsp;&nbsp;&nbsp;account_create(account);\r
+\r
+&nbsp;&nbsp;&nbsp;account_set_user_name(*account, account_name);\r
+\r
+&nbsp;&nbsp;&nbsp;account_set_display_name(*account, display_name);\r
+\r
+&nbsp;&nbsp;&nbsp;account_set_domain_name(*account, domain_name);\r
+\r
+&nbsp;&nbsp;&nbsp;account_set_email_address(*account, email_address);\r
+}\r
+</pre></li></ol>\r
+</li>\r
+\r
+<li>List accounts.\r
+<ol type="a"><li>\r
+<p>To verify the database insertion, all accounts are listed.</p>\r
+\r
+<pre class="prettyprint">\r
+struct Account_Records\r
+{\r
+&nbsp;&nbsp;&nbsp;int count;\r
+&nbsp;&nbsp;&nbsp;int tab[100];\r
+};\r
+\r
+struct Account_Records rec;\r
+ \r
+List_Accounts(&amp;rec);\r
+</pre></li>\r
+\r
+<li><p>When <span style="font-family: Courier New,Courier,monospace;">struct Account_Records* rec</span> is not <span style="font-family: Courier New,Courier,monospace;">Null</span>, <span style="font-family: Courier New,Courier,monospace;">List_Accounts</span> counts all records in the database. Records are obtained using the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+static void List_Accounts(struct Account_Records* rec)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (rec!=NULL)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;count=0;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;account_foreach_account_from_db(on_account_read, rec);\r
+}\r
+</pre></li>\r
+\r
+<li><p>For each found record, the <span style="font-family: Courier New,Courier,monospace;">on_account_read()</span> callback function is called. If <span style="font-family: Courier New,Courier,monospace;">void *user_data</span> is not null, the function is counting the existing accounts. String data returned by the get functions has to be released with <span style="font-family: Courier New,Courier,monospace;">free</span>. Data prepared with the <span style="font-family: Courier New,Courier,monospace;">sprint()</span> function can, for example, be sent for <span style="font-family: Courier New,Courier,monospace;">stdout</span>.</p>\r
+\r
+<pre class="prettyprint">\r
+static bool on_account_read(account_h account, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;int account_id = 0;\r
+&nbsp;&nbsp;&nbsp;char *name = NULL;\r
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;\r
+&nbsp;&nbsp;&nbsp;struct Account_Records * rec = (struct Account_Records *)user_data;\r
+&nbsp;&nbsp;&nbsp;char buf[100];\r
+\r
+&nbsp;&nbsp;&nbsp;account_get_account_id(account, &amp;account_id);\r
+\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback ID: %d\n&quot;, account_id);\r
+\r
+&nbsp;&nbsp;&nbsp;if (user_data!=NULL)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;tab[rec-&gt;count++]=account_id;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;account_get_user_name(account, &amp;name);\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback Name: %s\n&quot;, name);\r
+\r
+&nbsp;&nbsp;&nbsp;free(name);\r
+\r
+&nbsp;&nbsp;&nbsp;account_get_display_name(account, &amp;display_name);\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;MyCallback Disp.: %s\n&quot;, display_name);\r
+\r
+&nbsp;&nbsp;&nbsp;free(display_name);\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}\r
+</pre></li></ol>\r
+</li>\r
+<li>Query the account by ID.\r
+<p>The easiest way to get access to an account stored in the database is referring to it by its ID. It can be done with the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_account_id()</span> function. This function requires an existing handle to an account as an input parameter. </p>\r
+\r
+<pre class="prettyprint">\r
+for (i=0; i&lt;rec.count; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;account_create(&amp;account);\r
+&nbsp;&nbsp;&nbsp;account_query_account_by_account_id (rec.tab[i], &amp;account);\r
+\r
+&nbsp;&nbsp;&nbsp;Show_Account(account);\r
+\r
+&nbsp;&nbsp;&nbsp;account_destroy(account);\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Show the account.\r
+<p>The following function prepares data to send it to any text output.</p>\r
+\r
+<pre class="prettyprint">\r
+static int Show_Account(account_h acc)\r
+{\r
+&nbsp;&nbsp;&nbsp;int account_id = 0;\r
+&nbsp;&nbsp;&nbsp;char *name = NULL;\r
+&nbsp;&nbsp;&nbsp;char *display_name = NULL;\r
+&nbsp;&nbsp;&nbsp;char buf[100];\r
+\r
+&nbsp;&nbsp;&nbsp;account_get_account_id(acc, &amp;account_id);\r
+\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account ID: %d\n&quot;, account_id);\r
+\r
+&nbsp;&nbsp;&nbsp;account_get_user_name(acc, &amp;name);\r
+\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account Name: %s\n&quot;, name);\r
+\r
+&nbsp;&nbsp;&nbsp;free(name);\r
+\r
+&nbsp;&nbsp;&nbsp;account_get_display_name(acc, &amp;display_name);\r
+\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Show_Account Disp.: %s\n&quot;, display_name);\r
+\r
+&nbsp;&nbsp;&nbsp;free(display_name);\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Query the account by various attributes:\r
+<ul><li>Query by username.\r
+<p>Querying data by username requires providing a valid username callback function. In this example, it is the same function as for <span style="font-family: Courier New,Courier,monospace;">for_each</span>, but cast without the third parameter.</p>\r
+\r
+<pre class="prettyprint">\r
+account_query_account_by_user_name (on_account_read, &quot;Human&quot;, NULL);\r
+</pre>\r
+</li>\r
+\r
+<li>Query by package name\r
+<p>By default, the accounts created in the application context have a package name set to the application name. Change it using the <span style="font-family: Courier New,Courier,monospace;">account_set_package_name()</span> function. To list accounts by package name, the user can provide a name by itself or obtain it with the <span style="font-family: Courier New,Courier,monospace;">account_get_package_name()</span> function.</p>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_package_name()</span> function requires a callback function and a package name. In addition, the user data can be passed to the callback function as a third parameter.</p>\r
+ \r
+<p>The package name has to be released when no longer needed.</p>\r
+\r
+<pre class="prettyprint">\r
+char * package_name;\r
+account_get_package_name (account, &amp;package_name);\r
+account_query_account_by_package_name (on_account_read, package_name, NULL);\r
+free(package_name);\r
+</pre>\r
+</li>\r
+\r
+<li>Query by capability\r
+<p>The following function allows the user to find all accounts with a specified capability on a specified state. Once again, the callback function is required.</p>\r
+\r
+<pre class="prettyprint">\r
+account_query_account_by_capability (on_account_read, &quot;Custom&quot;, ACCOUNT_CAPABILITY_ENABLED, NULL);\r
+</pre>\r
+</li>\r
+\r
+<li> Query by capability type\r
+<p>This function is similar to the <span style="font-family: Courier New,Courier,monospace;">account_query_account_by_capability()</span> function, but returns all accounts with a specified capability, without checking its state.</p>\r
+\r
+<pre class="prettyprint">\r
+account_query_account_by_capability_type (on_account_read, &quot;Next&quot;, NULL);\r
+</pre>\r
+</li>\r
+\r
+<li>Query capability by account ID\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">account_query_capability_by_account_id()</span> function is different from the previous functions. It lists all capabilities from an account with a specified ID. In this case it requires a different type of callback, as listed below.</p>\r
+\r
+<pre class="prettyprint">\r
+account_query_capability_by_account_id (_capability_cb, id[0], NULL);\r
+</pre>\r
+\r
+<p>The callback function prepares data to be sent to an output.</p>\r
+\r
+<pre class="prettyprint">\r
+static bool _capability_cb(const char *capability_type, account_capability_state_e capability_state, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;char buf[200];\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Found capability: %s on state %d\n&quot;, capability_type, capability_state);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+</li></ul></li>\r
+\r
+<li>Clean up.\r
+<p>When no longer needed, all handles to accounts have to be destroyed.</p>\r
+\r
+<pre class="prettyprint">\r
+account_destroy(account);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="secret" name="secret">Managing Account Secrecy</h2>\r
+\r
+<p>To manage account secrecy:</p>\r
+<ol>\r
+<li>Select the secrecy level using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">account_secrecy_state_e</a> enumeration.\r
+\r
+<pre class="prettyprint">\r
+static account_h account = NULL;\r
+account_secrecy_state_e secret;\r
+ \r
+char buf[200];\r
+int ret;\r
+int id;\r
+\r
+// Account 1\r
+Create_Account(&amp;account, &quot;Security 1&quot;, &quot;Invalid&quot;, &quot;NOBODY&quot;, &quot;anony@mous.not&quot;);\r
+\r
+account_set_secret(account, ACCOUNT_SECRECY_INVALID);\r
+\r
+account_get_secret(account, &amp;secret);\r
+\r
+account_insert_to_db(account, &amp;id);\r
+\r
+sprintf(buf,&quot;Account 1 secret: %d\n&quot;, secret);\r
+\r
+account_destroy(account);\r
+\r
+// Account 2\r
+\r
+Create_Account(&amp;account, &quot;Security 2&quot;, &quot;Invisible&quot;, &quot; NOBODY&quot;, &quot;anony1@mous.not&quot;);\r
+\r
+account_set_secret(account, ACCOUNT_SECRECY_INVISIBLE);\r
+\r
+account_get_secret(account, &amp;secret);\r
+\r
+account_insert_to_db(account, &amp;id);\r
+\r
+sprintf(buf, &quot; Account 2 secret: %d\n&quot;, secret);\r
+\r
+account_destroy(account);\r
+\r
+// Account 3\r
+\r
+Create_Account(&amp;account, &quot;Secret 3&quot;, &quot;Visible&quot;, &quot; NOBODY&quot;, &quot;anony2@mous.not&quot;);\r
+\r
+ret = account_set_secret(account, ACCOUNT_SECRECY_VISIBLE);\r
+\r
+ret = account_get_secret(account, &amp;secret);\r
+\r
+ret = account_insert_to_db(account, &amp;id);\r
+\r
+sprintf(buf,&quot; Account 3 secret: %d\n&quot;, secret);\r
+\r
+account_destroy(account);\r
+\r
+List_Accounts(NULL);\r
+</pre>\r
+\r
+<p>Secrecy is linked only with visibility on the account settings screen. The account is still visible and can be accessed using a query or the <span style="font-family: Courier New,Courier,monospace;">for_each</span> function. For further information on how to add your application to the account screen, see <a href="#screen">Adding an Application on the Account Screen</a>.</p>\r
+\r
+<pre class="prettyprint">// List_Account() console output\r
+MyCallback ID: 12\r
+MyCallback Name: Security 1\r
+MyCallback Disp.: Invalid\r
+-------------------\r
+MyCallback ID: 13\r
+MyCallback Name: Security 2\r
+MyCallback Disp.: Invisible\r
+-------------------\r
+MyCallback ID: 14\r
+MyCallback Name: Secret 3\r
+MyCallback Disp.: Visible\r
+</pre>\r
+</li>\r
+\r
+<li>Clean up.\r
+<p>Account handles have to be destroyed when no longer needed.</p>\r
+\r
+<pre class="prettyprint">\r
+account_destroy(account);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="update" name="update">Updating Accounts</h2>\r
+\r
+<p>To update and track account data.</p>\r
+\r
+<ol>\r
+<li>Subscribe notifications.\r
+<p>To track account changes, create an <span style="font-family: Courier New,Courier,monospace;">account_subscribe_h</span> instance and register a notification.</p>\r
+\r
+<pre class="prettyprint">\r
+account_subscribe_h account_subscribe;\r
+\r
+account_subscribe_create(&amp;account_subscribe);\r
+\r
+account_subscribe_notification(account_subscribe, _account_event_cb, NULL);\r
+</pre>\r
+</li>\r
+\r
+<li>Create an account.\r
+<p>Accounts are created and then their handles are destroyed. The package name is obtained from the second account.</p>\r
+\r
+<pre class="prettyprint">\r
+Create_Account(&amp;account, &quot;Updater&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);\r
+account_insert_to_db(account, &amp;id);\r
+\r
+Show_Account(account);\r
+account_destroy(account);\r
+\r
+Create_Account(&amp;account, &quot;Another&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);\r
+account_insert_to_db(account, &amp;id);\r
+\r
+account_get_package_name (account, &amp;package_name);\r
+sprintf(buf, &quot;Package_name: %s\n&quot;, package_name);\r
+\r
+Show_Account(account);\r
+account_destroy(account);\r
+</pre>\r
+</li>\r
+\r
+<li>Update the account.\r
+<ul><li><p>To update an account by its ID:</p>\r
+<ol type="a">\r
+<li>Create a handle to the account.</li>\r
+<li>Get the account from the database (also possible by ID).</li>\r
+<li>Make the necessary changes.</li>\r
+<li>Update the account using the account handle and a valid ID.</li>\r
+<li>Destroy the account handle.</li>\r
+</ol>\r
+\r
+<pre class="prettyprint">\r
+account_create(&amp;account);\r
+account_query_account_by_account_id(id, &amp;account);\r
+account_set_display_name(account, &quot;Updated!&quot;);\r
+account_update_to_db_by_id(account, id);\r
+account_destroy(account);\r
+</pre>\r
+</li>\r
+\r
+<li>Update account by user name.\r
+<p>To update an account by its user name:</p>\r
+<ol type="a">\r
+<li>Create a handle to the account.</li>\r
+<li>Get the account from the database (also by ID).</li>\r
+<li>Make the necessary changes.</li>\r
+<li>Update the account using the account handle, a valid user name, and a package name. There can be accounts with the same user names in different packages.</li>\r
+<li>Destroy the account handle.</li>\r
+</ol>\r
+\r
+<pre class="prettyprint">\r
+account_create(&amp;account);\r
+account_query_account_by_account_id(id, &amp;account);\r
+account_set_display_name(account, &quot;Updated!&quot;);\r
+account_update_to_db_by_user_name(account, &quot;Another&quot;, package_name);\r
+account_destroy(account);\r
+</pre></li></ul>\r
+</li>\r
+\r
+<li>Create the callback.\r
+<p>When any action is taking place on any account when a notification is subscribed, a callback function is invoked. The callback function provides in its parameters the event type as a string, the ID of the account associated with the actual change, and, additionally, the user data registered while subscribing the notification.</p>\r
+\r
+<pre class="prettyprint">\r
+bool _account_event_cb(const char *event_type, int account_id, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;char buf[200];\r
+\r
+&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;ACCOUNT EVENT: %s, %d\n&quot;, event_type, account_id);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Show accounts.\r
+<p>To verify the updates, the account can be shown.</p>\r
+\r
+<pre class="prettyprint">\r
+account_create(&amp;account);\r
+account_query_account_by_account_id(id, &amp;account);\r
+Show_Account(account);\r
+account_destroy(account);\r
+</pre>\r
+</li>\r
+\r
+<li>Clean up.\r
+<p>Unsubscribe the notification when no longer needed.</p>\r
+\r
+<pre class="prettyprint">\r
+account_unsubscribe_notification(account_subscribe);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="type" name="type">Retrieving Account Types</h2>\r
+\r
+<p>To retrieve account types:</p>\r
+\r
+<ol>\r
+<li>Create a type.\r
+<p>To operate on the account type, create a handle to it.</p>\r
+\r
+<pre class="prettyprint">\r
+account_type_h account_type;\r
+\r
+account_type_create(&amp;account_type);\r
+</pre>\r
+</li>\r
+\r
+<li>Get the type information.\r
+<p>If the account type with a specified ID exists, you can get it from the database with the <span style="font-family: Courier New,Courier,monospace;">account_query_by_app_id()</span> function.</p>\r
+\r
+<p>It is possible to set, for example:</p>\r
+<ul>\r
+<li>ID</li>\r
+<li>Labels</li>\r
+<li>Features</li>\r
+<li>Multiple account support (this is only a flag)</li>\r
+</ul>\r
+\r
+<p>To get the account types by the application ID, use the <span style="font-family: Courier New,Courier,monospace;">account_type_query_by_app_id()</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+int multiple_account_support = -1;\r
+char *your_app_id = &quot;com.tizen.example&quot;; // App ID retrieving account types\r
+char *app_id = NULL;\r
+char *provider_feature = NULL;\r
+char *icon_path = NULL;\r
+\r
+if (account_type_query_app_id_exist(your_app_id))\r
+{\r
+&nbsp;&nbsp;&nbsp;account_type_query_by_app_id(your_app_id, &amp;account_type);\r
+\r
+&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;app_id);\r
+\r
+&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;multiple_account_support);\r
+\r
+&nbsp;&nbsp;&nbsp;account_type_get_icon_path(account_type, &amp;icon_path);\r
+\r
+&nbsp;&nbsp;&nbsp;account_type_get_provider_feature(account_type, &amp;provider_feature);\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>List types and labels.\r
+<p>To list the account types or all the labels from a specified type, a proper callback function has to be provided.</p>\r
+\r
+<pre class="prettyprint">\r
+account_type_foreach_account_type_from_db(_account_type_cb, NULL);\r
+\r
+account_type_query_label_by_app_id(_account_label_cb, type_id, NULL);\r
+</pre>\r
+\r
+<p>While listing the labels, the user has access to the ID of the account type, label and its local value, and the user data passed while casting the query function.</p>\r
+\r
+<pre class="prettyprint">\r
+bool _account_label_cb(char *app_id, char *label, char *locale, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;char buf[200];\r
+\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Get Label ID: %s LABEL: %s LOCALE %s\n&quot;, app_id, label, locale);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+\r
+<p>The account type callback has access to the account type and user data.</p>\r
+\r
+<pre class="prettyprint">\r
+bool _account_type_cb(account_type_h account_type, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;char * id;\r
+&nbsp;&nbsp;&nbsp;int support;\r
+&nbsp;&nbsp;&nbsp;char buf[200];\r
+\r
+&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;id);\r
+\r
+&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;support);\r
+&nbsp;&nbsp;&nbsp;sprintf(buf,&quot;Account Type ID: %s Multiple support %d:\n&quot;, id, support);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Clean up.\r
+<p>All allocated handles have to be destroyed.</p>\r
+\r
+<pre class="prettyprint">\r
+free(app_id);\r
+free(provider_feature);\r
+free(icon_path);\r
+\r
+account_type_destroy(account_type);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm
index 7d94e52..707fdf4 100644 (file)
--- a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm
@@ -1,984 +1,984 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Calendar: Managing Calendar Events and Accessing the Calendar Database</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing the Calendar</a>
-                       </li>
-                       <li>Calendar management
-                       <ul class="toc">
-                               <li><a href="#create_event">Creating an Event</a></li>
-                               <li><a href="#set_event">Setting Event Properties</a></li>
-                               <li><a href="#insert_event">Inserting an Event to the Database</a></li>
-                               <li><a href="#get_event">Getting Events</a></li>
-                               <li><a href="#update_event">Updating an Event</a></li>
-                               <li><a href="#delete_event">Deleting an Event</a></li>
-                               <li><a href="#exception_add">Setting Exceptions when Inserting Events</a></li>
-                               <li><a href="#exception_modify">Adding an Exception Date for an Existing Event</a></li>
-                               <li><a href="#monitor_event">Monitoring Event Changes</a></li>
-                       </ul></li>
-                       <li>Todos
-                               <ul class="toc">
-                               <li><a href="#create">Creating a Todo</a></li>
-                               <li><a href="#set">Setting Todo Properties</a></li>
-                               <li><a href="#insert">Inserting a Todo to the Database</a></li>
-                               <li><a href="#get">Getting Todos</a></li>
-                               <li><a href="#update">Updating a Todo</a></li>
-                               <li><a href="#delete">Deleting a Todo</a></li>
-                               <li><a href="#monitor">Monitoring Todo Changes</a></li>
-                       </ul></li>
-                       <li>vCalendars
-                               <ul class="toc">
-                               <li><a href="#make">Making a vCalendar</a></li>
-                               <li><a href="#parse">Parsing a vCalendar</a></li>
-                       </ul></li>
-               </ul>      
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/social/calendar_n.htm">Calendar Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API for Mobile Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Calendar: Managing Calendar Events and Accessing the Calendar Database</h1>
-
-   
-<p>This tutorial demonstrates how you can manage events and todo tasks, and convert calendar details to and from the vCalendar format.</p>
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-    <h2 id="warmup" name="warmup">Warm-up</h2>
-    <p>Become familiar with the Calendar API basics by learning about:</p>
-    <ul>
-                       <li><a href="#init">Initializing the Calendar</a>
-                       <p>Initialize the calendar for use.</p></li>
-                       <li>Calendar management
-                       <ul>
-                               <li><a href="#create_event">Creating an Event</a>
-                               <p>Create a new event.</p></li>
-                               <li><a href="#set_event">Setting Event Properties</a>
-                               <p>Set event properties, such as subject and description.</p></li>
-                               <li><a href="#insert_event">Inserting an Event to the Database</a>
-                               <p>Insert an event to the Calendar database.</p></li>
-                               <li><a href="#get_event">Getting Events</a>
-                               <p>Retrieve a single event or a list of events.</p></li>
-                               <li><a href="#update_event">Updating an Event</a>
-                               <p>Update event details.</p></li>
-                               <li><a href="#delete_event">Deleting an Event</a>
-                               <p>Delete an event from the database.</p></li>
-                               <li><a href="#exception_add">Setting Exceptions when Inserting Events</a>
-                               <p>Set exceptions when creating an event with a frequency.</p></li>
-                               <li><a href="#exception_modify">Adding an Exception Date for an Existing Event</a>
-                               <p>Add an exception date for an existing event.</p></li>
-                               <li><a href="#monitor_event">Monitoring Event Changes</a>
-                               <p>Receive notifications when changes occur in events.</p></li>
-                       </ul></li>
-                       <li>Todos
-                               <ul>
-                               <li><a href="#create">Creating a Todo</a>
-                               <p>Create a new todo.</p></li>
-                               <li><a href="#set">Setting Todo Properties</a>
-                               <p>Set todo properties, such as subject and description.</p></li>
-                               <li><a href="#insert">Inserting a Todo to the Database</a>
-                               <p>Insert a todo to the calendar database.</p></li>
-                               <li><a href="#get">Getting Todos</a>
-                               <p>Retrieve a single todo or a list of todos.</p></li>
-                               <li><a href="#update">Updating a Todo</a>
-                               <p>Update todo details.</p></li>
-                               <li><a href="#delete">Deleting a Todo</a>
-                               <p>Delete the todo from the database.</p></li>
-                               <li><a href="#monitor">Monitoring Todo Changes</a>
-                               <p>Receive notifications when changes occur in todos.</p></li>
-                       </ul></li>
-                       <li>vCalendars
-                               <ul>
-                               <li><a href="#make">Making a vCalendar</a>
-                               <p>Make a vCalendar stream from an event record.</p></li>
-                               <li><a href="#parse">Parsing a vCalendar</a>
-                               <p>Parse a vCalendar from a file and insert to the database.</p></li>
-                       </ul></li>
-               </ul>
-
-
- <h2 id="init" name="init">Initializing the Calendar</h2>
-                       
-<p>To initialize the Calendar Service:</p>
-<ol><li>                       
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;calendar.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;calendar.h&gt;
-</pre></li>                    
-                       
-<li>           
-<p>Most of API functions return error codes, so you must define at the beginning of your code the <span style="font-family: Courier New,Courier,monospace">int</span> type, which is used to store the error codes. Each time when a function returns error codes, verify the result of the operation.</p></li>
-
-<li><p>To connect to the Calendar Service, call the <span style="font-family: Courier New,Courier,monospace">calendar_connect()</span> function. Without this function, you cannot get access to the Calendar database.</p>
-<pre class="prettyprint">int error_code;
-error_code = calendar_connect();
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_connect: %x\n&quot;, error_code);</pre>
-
-
-<p>When the Calendar APIs are no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">calendar_disconnect()</span> function:</p>
-<pre class="prettyprint">error_code = calendar_disconnect();
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar disconnect failed: %x\n&quot;, error_code);</pre></li></ol>
-
-
- <h2 id="create_event" name="create_event">Creating an Event</h2>
-
-<p>To define and create a new event handle (record), since the Calendar Service uses the event handler mechanism:</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the defined event handle as a parameter to create an event associated to the event handle and an <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> parameter for the event type.</p>
-<p>Verify the status of the error code. If the event is created correctly, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If an error is reported, you can check the error and take appropriate action or stop other operations on the database.</p>
-<pre class="prettyprint">calendar_record_h event = NULL;
-error_code = calendar_record_create(_calendar_event._uri, &amp;event);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_record_create: %x\n&quot;, error_code);</pre>
-
- <h2 id="set_event" name="set_event">Setting Event Properties</h2>
-
-<p>To set the event properties:</p>
-
-<ol><li>Set the event subject.
-<p>To set the subject, call <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span>. This function takes the event handle (created before), as the first argument, <span style="font-family: Courier New,Courier,monospace">_calendar_event.summary</span> for subject type, and the subject, which is a string value, as the third argument. The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
-<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.summary, &quot;summary&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set record summary failed : %x\n&quot;, error_code);</pre></li>
-<li>Set the event description.
-<p>The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function sets the description of the event when the second argument is <span style="font-family: Courier New,Courier,monospace">_calendar_event.description</span>. This function takes the event handle as the first argument, and the description, which is a string value, as the third argument. The description argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
-<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.description, &quot;description&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed : %x\n&quot;, error_code);</pre></li>
-<li>Set the event time zone ID.
-<p>The start and end time must be inserted in the event. If the time zone ID is not inserted, the time zone for the start and end time is considered to be UTC. The properties are in the <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> file.</p>
-<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_tzid failed : %x\n&quot;, error_code);
-
-error_code = calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set end_tzid failed : %x\n&quot;, error_code);</pre></li>
-<li>Set the event start and end dates.
-<p>You can set the other properties similarly. To set the start date, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime()</span> functions and check the error codes. </p>
-<pre class="prettyprint">calendar_time_s starttime = {0};
-starttime.type = CALENDAR_TIME_UTIME;
-starttime.time.utime = 1404036000; // 2014/06/29 10:00:00 UTC
-error_code = calendar_record_set_caltime(event, _calendar_event.start_time, starttime);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);
-
-calendar_time_s endtime = {0};
-endtime.type = CALENDAR_TIME_UTIME;
-endtime.time.utime = 1404036000 + 3600; // 2014/06/29 11:00:00 UTC
-error_code = calendar_record_set_caltime(event, _calendar_event.end_time, endtime);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set end_time failed : %x\n&quot;, error_code);</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">calendar_time_s</span> has 2 types. For more information about the types, see the <a href="../../../../org.tizen.guides/html/native/social/calendar_n.htm">Calendar</a> guide.</p>
-</li>
-<li>Set the event frequency.
-<p>To create recurring events, set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">frequency property</a>.</p>
-<pre class="prettyprint">error_code = calendar_record_set_int(event, _calendar_event.freq, CALENDAR_RECURRENCE_MONTHLY);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);
-
-error_code = calendar_record_set_int(event, _calendar_event.interval, 1);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);
-
-error_code = calendar_record_set_str(event, _calendar_event.bymonthday, &quot;3,4,5&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);</pre></li>
-<li>Set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">range of recurrence</a> for the event.
-<pre class="prettyprint">error_code = calendar_record_set_int(event, _calendar_event.range_type, CALENDAR_RANGE_COUNT);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set range_type failed : %x\n&quot;, error_code);
-
-error_code = calendar_record_set_int(event, _calendar_event.count, 8);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set count failed : %x\n&quot;, error_code);</pre></li>
-
-<li>Add an alarm.
-<p>To add an alarm, create an alarm handle and insert it as a child.</p>
-<pre class="prettyprint">calendar_record_h alarm = NULL;
-calendar_time_s ct;
-error_code = CALENDAR_ERROR_NONE;
-error_code += calendar_record_create(_calendar_alarm._uri, &amp;alarm);
-error_code += calendar_record_set_int(alarm, _calendar_alarm.tick_unit, CALENDAR_ALARM_TIME_UNIT_SPECIFIC);
-ct.type = CALENDAR_TIME_UTIME;
-ct.time.utime = 1404036000 - 60; // 60 sec before starttime (1404036000)
-error_code += calendar_record_set_caltime(alarm, _calendar_alarm.alarm_time, ct);
-error_code += calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);
-
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar add alarm failed \n&quot;);</pre>
-<p>The following alarm tick units are available:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_MINUTE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_HOUR</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_DAY</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_WEEK</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_MONTH</span>     (not recommended)</li>
-<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_SPECIFIC</span> (must use specific unixtime)</li></ul></li>
-<li>Add an attendee.
-<p>To add an attendee, create an attendee handle and insert it as a child.</p>
-<pre class="prettyprint">calendar_record_h attendee = NULL;
-error_code = CALENDAR_ERROR_NONE;
-error_code += calendar_record_create(_calendar_attendee._uri, &amp;attendee);
-error_code += calendar_record_set_str(attendee, _calendar_attendee.name, &quot;John&quot;);
-error_code += calendar_record_add_child_record(event, _calendar_event.calendar_attendee, attendee);
-
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar add alarm failed \n&quot;);</pre></li></ol>
-
- <h2 id="insert_event" name="insert_event">Inserting an Event to the Database</h2>
-
-<p>To insert an event record:</p>
-
-<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the newly created event into the Calendar database. The first argument is the event handle, the second is the record ID - a unique ID is assigned to the event you are adding and returned as the second argument. If the event is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>.
-<pre class="prettyprint">int id = -1;
-error_code = calendar_db_insert_record(event, &amp;id);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);
-
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;id: %d\n&quot;, id);</pre></li>
-<li>After inserting, destroy the used structures:
-<pre class="prettyprint">calendar_record_destroy(event, true);</pre></li></ol>
-
- <h2 id="get_event" name="get_event">Getting Events</h2>
-
-<p>To retrieve a single event or all events one by one. You can also filter the events by one of the properties:</p>
-
-<ol><li>Get a single event record using its ID.
-<pre class="prettyprint">calendar_record_h record;
-const int event_id = ... // Acquire event ID
-error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
-<li>Get the event record list.
-<p>To get all events without filtering, you need a record list:</p>
-<pre class="prettyprint">calendar_list_h list = NULL;
-error_code = calendar_db_get_all_records(_calendar_event._uri, 0, 0, &amp;list);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get all records failed: %x\n&quot;, error_code);</pre></li>
-
-<li>Filter the list.
-<ol type="a"><li>
-<p>To get events with filtering, you need a record list and a query:</p>
-<pre class="prettyprint">calendar_list_h list = NULL;
-calendar_query_h query = NULL;
-
-error_code = calendar_query_create(_calendar_event._uri, &amp;query);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create query failed: %x\n&quot;, error_code);</pre></li>
-<li>Before retrieving the events, create a filter for the list. You can filter the list based on various parameters.
-<pre class="prettyprint">calendar_filter_h filter = NULL;
-
-error_code = calendar_filter_create (_calendar_event._uri, &amp;filter);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create filter failed: %x\n&quot;, error_code);</pre></li>
-<li>Add a condition, such as summary:
-<pre class="prettyprint">error_code = calendar_filter_add_str(filter, _calendar_event.summary, CALENDAR_MATCH_CONTAINS, &quot;summary to find&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>
-</li>
-<li>To add more conditions, define an operator between the conditions:
-<pre class="prettyprint">error_code = calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add operator failed: %x\n&quot;, error_code);
-
-error_code = calendar_filter_add_str(filter, _calendar_event.description, CALENDAR_MATCH_CONTAINS, &quot;description to find&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>
-<p>In the above example, only events which contain a summary &quot;summary to find&quot; and description &quot;description to find&quot; are retrieved.</p>
-<p>You can create a filter with integer and time conditions. For instance, to filter all day events which start after 1st January 2014, add the following filter:</p>
-<pre class="prettyprint">calendar_time_s time_to_compare = {0};
-time_to_compare.type = CALENDAR_TIME_LOCALTIME;
-time_to_compare.time.date.mday = 1;
-time_to_compare.time.date.month = 1;
-time_to_compare.time.date.year = 2014;
-error_code = calendar_filter_add_caltime(filter, _calendar_event.start_time, CALENDAR_MATCH_GREATER_THAN, time_to_compare);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add caltime failed: %x\n&quot;, error_code);</pre>
-<p>The type parameter determines whether the event is a daily (<span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span>) non-all-day event (<span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span>). To get the specified time period, use 2 conditions using <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_GREATER_THAN</span> and <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_LESS_THAN</span> with the operator <span style="font-family: Courier New,Courier,monospace">CALENDAR_FILTER_OPERATOR_OR</span>. You can also use <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_EQUAL</span> to set an equality condition.</p></li>
-<li>Connect the query with the list:
-<pre class="prettyprint">error_code = calendar_query_set_filter(query, filter);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;query set filter failed: %x\n&quot;, error_code);
-
-error_code = calendar_db_get_records_with_query(query, 0, 0, &amp;list);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get records with query failed: %x\n&quot;, error_code);</pre>
-
-<p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>
-<li>Free the filter and query:
-<pre class="prettyprint">calendar_filter_destroy(filter);
-calendar_query_destroy(query);</pre></li></ol></li>
-
-<li>Iterate the list and read the records.
-<ol type="a"><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.
-<p>Note on the returned values&#39; ownership: some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</p>
-<pre class="prettyprint">calendar_record_h record;
-while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;char* summary;
-&nbsp;&nbsp;&nbsp;calendar_record_get_str_p(record, _calendar_event.summary, &amp;summary);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;summary: %s\n&quot;, summary);
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre></li>
-<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">calendar_gl_event_data_t</span> structure like below:
-<pre class="prettyprint">calendar_gl_event_data_t *gl_event_data = NULL;
-calendar_record_h record = NULL;
-while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_event_data = _create_gl_event_data(record);
-&nbsp;&nbsp;&nbsp;// You can get, for example, summary:
-&nbsp;&nbsp;&nbsp;// gl_event_data-&gt;summary
-
-&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre></li>
-
-<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.
-<pre class="prettyprint">typedef struct _calendar_gl_event_data
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;char *summary;
-&nbsp;&nbsp;&nbsp;char *description;
-&nbsp;&nbsp;&nbsp;calendar_time_s start_time;
-} calendar_gl_event_data_t;
-
-static void _free_gl_event_data(calendar_gl_event_data_t *gl_event_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_event_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_event_data-&gt;summary);
-&nbsp;&nbsp;&nbsp;free(gl_event_data-&gt;description);
-&nbsp;&nbsp;&nbsp;free(gl_event_data);
-}
-
-static calendar_gl_event_data_t *_create_gl_event_data(calendar_record_h record)
-{
-&nbsp;&nbsp;&nbsp;calendar_gl_event_data_t *gl_event_data;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;gl_event_data = malloc(sizeof(calendar_gl_event_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_event_data, 0x0, sizeof(calendar_gl_event_data_t));
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_event.summary, &amp;gl_event_data-&gt;summary);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get summary failed: %i\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_event.description, &amp;gl_event_data-&gt;description);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get description failed: %i\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_int(record, _calendar_event.id, &amp;gl_event_data-&gt;id);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get id failed: %i\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_caltime(record, _calendar_event.start_time, &amp;gl_event_data-&gt;start_time);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar get start time failed: %i\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return gl_event_data;
-}</pre>
-<p>To get access to a specified data from the record, firstly it is necessary to get its child responsible for the requested type.</p></li></ol></li>
-<li>Free the list:
-<pre class="prettyprint">calendar_list_destroy(list, true);</pre></li></ol>
-
-
- <h2 id="update_event" name="update_event">Updating an Event</h2>
-
-<p>To update an event record:</p>
-
-<ol><li>Get the event record handle to update with the ID.
-<pre class="prettyprint">calendar_record_h record;
-const int event_id = ... // Acquire event ID
-error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
-<li>Set the properties to update.
-<pre class="prettyprint">error_code = calendar_record_set_str(record, _calendar_event.summary, &quot;summary updated&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set summary failed: %x\n&quot;, error_code);
-
-error_code = calendar_record_set_str(record, _calendar_event.description, &quot;description updated&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set description failed: %x\n&quot;, error_code);</pre></li>
-<li>To update the record, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function.
-<pre class="prettyprint">error_code = calendar_db_update_record(record);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db update record failed: %x\n&quot;, error_code);</pre></li>
-<li>When the event handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function to destroy the event handle and free the allocated memory.
-<pre class="prettyprint">calendar_record_destroy(record, true);</pre></li></ol>
-
- <h2 id="delete_event" name="delete_event">Deleting an Event</h2>
-
-<p>To delete an event, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> as the first parameter and event ID as the second one:</p>
-<pre class="prettyprint">int event_id = ... // Acquire event ID
-error_code = calendar_db_delete_record(_calendar_event._uri, event_id);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db delete record failed: %x\n&quot;, error_code);</pre>
-
- <h2 id="exception_add" name="exception_add">Setting Exceptions when Inserting Events</h2>
-
-<p>To set an exception date to an event record when creating the event:</p>
-
-<ol><li>Create a recurring event.
-<p>The following example creates an event record with the following properties:</p>
-<ul><li>Frequency: <span style="font-family: Courier New,Courier,monospace">CALENDAR_RECURRENCE_MONTHLY</span></li>
-<li>Interval: 1</li>
-<li>Bymonthday: &quot;3, 4, 5&quot;</li>
-<li>Range type: count</li>
-<li>Count: 8</li></ul>
-
-<pre class="prettyprint">int error_code = CALENDAR_ERROR_NONE;
-
-calendar_record_h event = NULL;
-error_code += calendar_record_create(_calendar_event._uri, &amp;event);
-error_code += calendar_record_set_str(event, _calendar_event.summary, &quot;test&quot;);
-error_code += calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);
-error_code += calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);
-
-calendar_time_s st = {0};
-st.type = CALENDAR_TIME_UTIME;
-st.time.utime = 1349226000;
-error_code += calendar_record_set_caltime(event, _calendar_event.start_time, st);
-
-calendar_time_s et = {0};
-et.type = CALENDAR_TIME_UTIME;
-et.time.utime = 1354582800;
-error_code += calendar_record_set_caltime(event, _calendar_event.end_time, et);
-
-error_code += calendar_record_set_int(event, _calendar_event.freq, CALENDAR_RECURRENCE_MONTHLY);
-error_code += calendar_record_set_int(event, _calendar_event.interval, 1);
-error_code += calendar_record_set_str(event, _calendar_event.bymonthday, &quot;3,4,5&quot;);
-
-error_code += calendar_record_set_int(event, _calendar_event.range_type, CALENDAR_RANGE_COUNT);
-error_code += calendar_record_set_int(event, _calendar_event.count, 8);
-
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record create failed: \n&quot;);</pre>
-
-<p>The created event has 8 instances.</p>
-
-  <table>
-   <caption>
-     Table: Event instances
-   </caption>
-   <tbody>
-    <tr>
-     <th>unixtime</th>
-     <th>Date time</th>
-    </tr>
-    <tr>
-     <td>1349226000
-        <br/>1349312400
-        <br/>1349398800
-        <br/>1351904400
-        <br/>1351990800
-        <br/>1352077200
-        <br/>1354496400
-        <br/>1354582800</td>
-     <td>2012-10-03 01:00:00
-        <br/>2012-10-04 01:00:00
-        <br/>2012-10-05 01:00:00
-        <br/>2012-11-03 01:00:00
-        <br/>2012-11-04 01:00:00
-        <br/>2012-11-05 01:00:00
-        <br/>2012-12-03 01:00:00
-        <br/>2012-12-04 01:00:00</td>
-    </tr>
-
-   </tbody>
-  </table></li>
-<li>Set the exdate property to create the exception.
-<p>In vcalendar 2.0 (RFC 2445), exdate is used to identify a deleted instance. If multiple instances are deleted, datetimes are added with a comma (such as 20121104T010000Z, 20121105T010000Z, 20121203T010000Z).</p>
-<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.exdate, &quot;20121104T010000Z&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record set string failed: %x\n&quot;, error_code);</pre></li>
-<li>Insert the record.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the event into the Calendar database.</p>
-<pre class="prettyprint">int event_id;
-error_code = calendar_db_insert_record(event, &amp;event_id);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar db insert record failed: %x\n&quot;, error_code);
-
-calendar_record_destroy(event, true);</pre></li></ol>
-
- <h2 id="exception_modify" name="exception_modify">Adding an Exception Date for an Existing Event</h2>
-
-<p>To add an exception date to an existing event:</p>
-
-<ol><li>Make sure you have an existing event.</li>
-<li>Clone the existing event record and set new properties for the exception.
-<p>Cloning means that the new record has the original event&#39;s properties. In vcalendar 2.0 (RFC 2445), the recurrence ID is used to identify the modified instance (exception).</p>
-<pre class="prettyprint">calendar_record_h clone = NULL;
-error_code = CALENDAR_ERROR_NONE;
-
-error_code += calendar_record_clone(event, &amp;clone);
-error_code += calendar_record_set_int(clone, _calendar_event.original_event_id, event_id);
-error_code += calendar_record_set_str(clone, _calendar_event.recurrence_id, &quot;20121005T010000Z&quot;);
-
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record clone failed: %x\n&quot;, error_code);</pre></li>
-<li>Insert the new record.
-<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the new event record into the Calendar database.</p>
-<pre class="prettyprint">int exdate_event_id = 0;
-error_code = calendar_db_insert_record(clone, &amp;exdate_event_id);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar db insert record failed: %x\n&quot;, error_code);
-
-calendar_record_destroy(clone, true);
-calendar_record_destroy(event, true);</pre></li></ol>
-
-
- <h2 id="monitor_event" name="monitor_event">Monitoring Event Changes</h2>
-
-<p>To register a callback function that listens for event changes:</p>
-<ol><li>Register the callback function.
-<pre class="prettyprint">error_code = calendar_db_add_changed_cb(_calendar_event._uri, _event_changed_callback, NULL);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db add changed cb failed: %x\n&quot;, error_code);</pre></li>
-<li>Define the callback function.
-<p>The callback function is called when an event changes. The code below shows how to get the new event details.</p>
-<pre class="prettyprint">static calendar_gl_event_data_t *_gl_event_data = ...
-static void _event_changed_callback(const char *view_uri, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _calendar_event._uri))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;if (NULL == _gl_event_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;int event_id = _gl_event_data-&gt;id;
-&nbsp;&nbsp;&nbsp;_free_gl_event_data(_gl_event_data);
-&nbsp;&nbsp;&nbsp;_gl_event_data = NULL;
-
-&nbsp;&nbsp;&nbsp;calendar_record_h record = NULL;
-&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp; _gl_event_data = _create_gl_event_data(record);
-&nbsp;&nbsp;&nbsp;// Use _gl_event_data
-
-&nbsp;&nbsp;&nbsp;calendar_record_destroy(record, true);
-}</pre></li></ol>
-
- <h2 id="create" name="create">Creating a Todo</h2>
-
-<p>To define and create a new todo handle record, since the Calendar Service uses a todo handler mechanism:</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the defined todo handle as a parameter to create a todo associated with the todo handle and a <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> parameter for the todo type.</p>
-<p>Verify the status of the error code. If the todo handle is created correctly, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If an error is reported, check the error and take appropriate action, or stop other operations on the database.</p>
-<pre class="prettyprint">calendar_record_h todo = NULL;
-error_code = calendar_record_create(_calendar_todo._uri, &amp;todo);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_record_create: %x\n&quot;, error_code);</pre>
-
- <h2 id="set" name="set">Setting Todo Properties</h2>
-
-<p>To set the todo properties:</p>
-<ol><li>Set the todo subject.
-<p>To set the subject, call <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span>. This function takes the todo handle (created before) as the first argument, <span style="font-family: Courier New,Courier,monospace">_calendar_todo.summary</span> for the subject type, and the subject, which is string value, as the third argument. The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
-<pre class="prettyprint">error_code = calendar_record_set_str(todo, _calendar_todo.summary, &quot;summary&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set summary failed : %x\n&quot;, error_code);</pre></li>
-<li>Set the todo description.
-<p>The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_uri()</span> function sets the description of the todo when the second argument is <span style="font-family: Courier New,Courier,monospace">_calendar_todo.description</span>. This function takes the todo handle as the first argument, and the description, which is string value, as the third argument. The description argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
-<pre class="prettyprint">error_code = calendar_record_set_str(todo, _calendar_todo.description, &quot;description&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed : %x\n&quot;, error_code);</pre></li>
-<li>Set the todo due date.
-<p>To set the due date, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime</span> function and check the error codes. </p>
-<pre class="prettyprint">calendar_time_s duetime = {0};
-duetime.type = CALENDAR_TIME_UTIME;
-duetime.time.utime = 1404036000; // 2014/06/29 11:00:00 UTC
-
-error_code = calendar_record_set_caltime(todo, _calendar_todo.due_time, duetime);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set due_time failed : %x\n&quot;, error_code);</pre></li>
-<li>Set the todo status.
-<p>You can set the other properties similarly. To set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga3e1b9cae05705d471a4746d8ab6d3622">todo status</a>, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_int()</span> function and check the error codes.</p>
-<pre class="prettyprint">error_code = calendar_record_set_int(todo, _calendar_todo.todo_status, CALENDAR_TODO_STATUS_COMPLETED);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set todo_status failed : %x\n&quot;, error_code);</pre></li></ol>
-
- <h2 id="insert" name="insert">Inserting a Todo to the Database</h2>
-
-<p>To insert a todo record:</p>
-<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert a newly created todo into the Calendar database. The first argument is the todo handle, the second is the record ID. A unique ID is assigned to the record you are adding, and is returned as the third argument of the called function. If the todo is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>.
-<pre class="prettyprint">int id;
-error_code = calendar_db_insert_record(todo, &amp;id);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);</pre></li>
-<li>After inserting, destroy the used structures:
-<pre class="prettyprint">calendar_record_destroy(todo, true);</pre></li></ol>
-
- <h2 id="get" name="get">Getting Todos</h2>
-
-<p>To retrieve a single todo or all todos one by one. You can also filter the todos by one of the properties:</p>
-
-<ol><li>Get a single todo record using its ID.
-<pre class="prettyprint">calendar_record_h record;
-const int todo_id = ... // Acquire todo ID
-error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
-<li>Get the todo record list.
-<p>To get all todos without filtering, you need a record list:</p>
-<pre class="prettyprint">calendar_list_h list = NULL;
-error_code = calendar_db_get_all_records(_calendar_todo._uri, 0, 0, &amp;list);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get all records failed: %x\n&quot;, error_code);</pre></li>
-<li>Filter the list.
-<ol type="a"><li>To get todos with filtering, you need a record list and a query:
-<pre class="prettyprint">calendar_list_h list = NULL;
-calendar_query_h query = NULL;
-
-error_code = calendar_query_create(_calendar_todo._uri, &amp;query);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create query failed: %x\n&quot;, error_code);</pre></li>
-<li>Before retrieving the todos, create a filter for the list. You can filter the list based on various parameters.
-<pre class="prettyprint">calendar_filter_h filter = NULL;
-
-error_code = calendar_filter_create (_calendar_todo._uri, &amp;filter);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create filter failed: %x\n&quot;, error_code);</pre></li>
-<li>Add a condition, such as summary:
-<pre class="prettyprint">error_code = calendar_filter_add_str(filter, _calendar_todo.summary, CALENDAR_MATCH_CONTAINS, &quot;summary to find&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre></li>
-<li>To add more conditions, define an operator between the conditions:
-<pre class="prettyprint">error_code = calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add operator failed: %x\n&quot;, error_code);
-
-error_code = calendar_filter_add_str(filter, _calendar_todo.description, CALENDAR_MATCH_CONTAINS, &quot;description to find&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>
-<p>In the above example, only todos which contain a summary &quot;summary to find&quot; and description &quot;description to find&quot; are retrieved.</p>
-<p>You can create a filter with integer and time conditions. For instance, to filter all todos which are completed, add the following filter:</p>
-<pre class="prettyprint">error_code = calendar_filter_add_int(filter, _calendar_todo.todo_status, CALENDAR_MATCH_EQUAL, CALENDAR_TODO_STATUS_COMPLETED);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add integer failed: %x\n&quot;, error_code);</pre></li>
-<li>Connect the query with the list:
-<pre class="prettyprint">error_code = calendar_query_set_filter(query, filter);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;query set filter failed: %x\n&quot;, error_code);
-
-error_code = calendar_db_get_records_with_query(query, 0, 0, &amp;list);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get records with query failed: %x\n&quot;, error_code);</pre>
-<p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>
-
-<li>Free the filter and query:
-<pre class="prettyprint">calendar_filter_destroy(filter);
-calendar_query_destroy(query);</pre></li>
-</ol></li>
-<li>Iterate the list and read the records.
-<ol type="a"><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.
-<p>Note on the returned values&#39; ownership: some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</p>
-<pre class="prettyprint">calendar_record_h record;
-while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;char* summary;
-&nbsp;&nbsp;&nbsp;calendar_record_get_str_p(record, _calendar_todo.summary, &amp;summary);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;summary: %s\n&quot;, summary);
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre></li>
-<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">calendar_gl_todo_data_t</span> structure like below:
-<pre class="prettyprint">calendar_gl_todo_data_t *gl_todo_data = NULL;
-calendar_record_h record = NULL;
-while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_todo_data = _create_gl_todo_data(record);
-&nbsp;&nbsp;&nbsp;// You can get, for example, summary:
-&nbsp;&nbsp;&nbsp;// gl_todo_data-&gt;summary
-
-&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre></li>
-
-<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.
-<pre class="prettyprint">typedef struct _calendar_gl_todo_data
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;char *summary;
-&nbsp;&nbsp;&nbsp;char *description;
-&nbsp;&nbsp;&nbsp;calendar_time_s due_time;
-} calendar_gl_todo_data_t;
-
-static void _free_gl_todo_data(calendar_gl_todo_data_t *gl_todo_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_todo_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_todo_data-&gt;summary);
-&nbsp;&nbsp;&nbsp;free(gl_todo_data-&gt;description);
-&nbsp;&nbsp;&nbsp;free(gl_todo_data);
-}
-
-static calendar_gl_todo_data_t *_create_gl_todo_data(calendar_record_h record)
-{
-&nbsp;&nbsp;&nbsp;calendar_gl_todo_data_t *gl_todo_data;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;gl_todo_data = malloc(sizeof(calendar_gl_todo_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_todo_data, 0x0, sizeof(calendar_gl_todo_data_t));
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_todo.summary, &amp;gl_todo_data-&gt;summary);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get summary failed: %x\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_todo.description, &amp;gl_todo_data-&gt;description);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get description failed: %x\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_int(record, _calendar_todo.id, &amp;gl_todo_data-&gt;id);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get id failed: %x\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_caltime(record, _calendar_todo.due_time, &amp;gl_todo_data-&gt;due_time);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar get due time failed: %x\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return gl_todo_data;
-}</pre>
-<p>To get access to a specified data from the record, firstly you must get its child responsible for the requested type. Data returned by any function with the <span style="font-family: Courier New,Courier,monospace">_p</span> suffix must not be passed to <span style="font-family: Courier New,Courier,monospace">_free_gl_todo_data()</span>.</p></li></ol></li>
-<li>Free the list:
-<pre class="prettyprint">
-calendar_list_destroy(list, true);</pre></li></ol>
-
- <h2 id="update" name="update">Updating a Todo</h2>
-
-<p>To update a todo record:</p>
-<ol><li>Get the todo record handle to update with the ID.
-<pre class="prettyprint">calendar_record_h record;
-const int todo_id = ... // Acquire todo ID
-error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
-<li>Set the properties to update.
-<pre class="prettyprint">error_code = calendar_record_set_str(record, _calendar_todo.summary, &quot;summary updated&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set summary failed: %x\n&quot;, error_code);
-
-error_code = calendar_record_set_str(record, _calendar_todo.description, &quot;description updated&quot;);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set description failed: %x\n&quot;, error_code);</pre></li>
-<li>To update record, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function.
-<pre class="prettyprint">error_code = calendar_db_update_record(record);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db update record failed: %x\n&quot;, error_code);</pre></li>
-<li>When the todo handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function to destroy the todo handle and free the allocated memory.
-<pre class="prettyprint">calendar_record_destroy(record, true);</pre></li></ol>
-
- <h2 id="delete" name="delete">Deleting a Todo</h2>
-
-<p>To delete a todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> as the first parameter and the todo ID as the second one.</p>
-<pre class="prettyprint">int todo_id = ... // Acquire todo ID
-error_code = calendar_db_delete_record(_calendar_todo._uri, todo_id);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db delete record failed: %x\n&quot;, error_code);</pre>
-
- <h2 id="monitor" name="monitor">Monitoring Todo Changes</h2>
-
-<p>To register a callback function that listens for todo changes:</p>
-<ol><li>Register the callback function.
-
-<pre class="prettyprint">error_code = calendar_db_add_changed_cb(_calendar_todo._uri, _todo_changed_callback, NULL);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db add changed cb failed: %x\n&quot;, error_code);</pre></li>
-<li>Define the callback function.
-<p>The callback function is called when a todo changes. The code below shows how to get the new todo details.</p>
-<pre class="prettyprint">static calendar_gl_todo_data_t *_gl_todo_data = ...
-static void _todo_changed_callback(const char *view_uri, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _calendar_todo._uri))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;if (NULL == _gl_todo_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;int todo_id = _gl_todo_data-&gt;id;
-&nbsp;&nbsp;&nbsp;_free_gl_todo_data(_gl_todo_data);
-&nbsp;&nbsp;&nbsp;_gl_todo_data = NULL;
-
-&nbsp;&nbsp;&nbsp;calendar_record_h record = NULL;
-&nbsp;&nbsp;&nbsp;calendar_error_e error_code;
-&nbsp;&nbsp;&nbsp;error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;_gl_todo_data = _create_gl_todo_data(record);
-&nbsp;&nbsp;&nbsp;// Use _gl_todo_data
-
-&nbsp;&nbsp;&nbsp;calendar_record_destroy(record, true);
-}</pre></li></ol>
-
- <h2 id="make" name="make">Making a vCalendar</h2>
-
-<p>To make a vCalendar stream from an event record:</p>
-<ol><li>Get the event record by the event ID.
-<pre class="prettyprint">int event_id = ... // Acquire event ID
-calendar_record_h record = NULL;
-error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>
-<li>Make the vCalendar stream by the event record.
-<pre class="prettyprint">char *vcalendar_stream = NULL;
-calendar_list_h list = NULL;
-
-error_code = calendar_list_create(&amp;list);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;list create failed: %x\n&quot;, error_code);
-
-error_code = calendar_list_add(list, record);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;list add failed: %x\n&quot;, error_code);
-
-error_code = calendar_vcalendar_make_from_records(list, &amp;vcalendar_stream);
-if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;vcalendar make from records failed: %x\n&quot;, error_code);</pre></li>
-<li>When the list handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_list_destroy()</span> function to destroy the list handle and free the allocated memory.
-<pre class="prettyprint">free(vcalendar_stream);
-calendar_list_destroy(list, true);</pre></li></ol>
-
- <h2 id="parse" name="parse">Parsing a vCalendar</h2>
-
-<p>To parse a vCalendar from a file and insert to the database:</p>
-<pre class="prettyprint">char vcalendar_file_path[512] = {0};
-char *resource_path = app_get_resource_path();
-snprintf(vcalendar_file_path, sizeof(vcalendar_file_path), &quot;%s/%s&quot;, resource_path, &quot;vcalendar.ics&quot;);
-free(resource_path);
-
-error_code = calendar_vcalendar_parse_to_calendar_foreach(vcalendar_file_path, // File path of vCalendar
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_vcalendar_parse_cb, // Callback function to invoke
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL); // User data to be passed to the callback function</pre>
-
-<p>The vCalendar stream contains multiple event or todo objects. The callback function is called after parsing each event or todo. If you return <span style="font-family: Courier New,Courier,monospace">false</span> on the callback function, parsing stops.</p>
-<pre class="prettyprint">static bool _vcalendar_parse_cb(calendar_record_h record, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;int id = -1;
-&nbsp;&nbsp;&nbsp;error_code = calendar_db_insert_record(record, &amp;id);
-&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;inserted id: %d\n&quot;, id);
-&nbsp;&nbsp;&nbsp;// Use record
-
-&nbsp;&nbsp;&nbsp;return true;
-}</pre>
-               
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Calendar: Managing Calendar Events and Accessing the Calendar Database</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#init">Initializing the Calendar</a>\r
+                       </li>\r
+                       <li>Calendar management\r
+                       <ul class="toc">\r
+                               <li><a href="#create_event">Creating an Event</a></li>\r
+                               <li><a href="#set_event">Setting Event Properties</a></li>\r
+                               <li><a href="#insert_event">Inserting an Event to the Database</a></li>\r
+                               <li><a href="#get_event">Getting Events</a></li>\r
+                               <li><a href="#update_event">Updating an Event</a></li>\r
+                               <li><a href="#delete_event">Deleting an Event</a></li>\r
+                               <li><a href="#exception_add">Setting Exceptions when Inserting Events</a></li>\r
+                               <li><a href="#exception_modify">Adding an Exception Date for an Existing Event</a></li>\r
+                               <li><a href="#monitor_event">Monitoring Event Changes</a></li>\r
+                       </ul></li>\r
+                       <li>Todos\r
+                               <ul class="toc">\r
+                               <li><a href="#create">Creating a Todo</a></li>\r
+                               <li><a href="#set">Setting Todo Properties</a></li>\r
+                               <li><a href="#insert">Inserting a Todo to the Database</a></li>\r
+                               <li><a href="#get">Getting Todos</a></li>\r
+                               <li><a href="#update">Updating a Todo</a></li>\r
+                               <li><a href="#delete">Deleting a Todo</a></li>\r
+                               <li><a href="#monitor">Monitoring Todo Changes</a></li>\r
+                       </ul></li>\r
+                       <li>vCalendars\r
+                               <ul class="toc">\r
+                               <li><a href="#make">Making a vCalendar</a></li>\r
+                               <li><a href="#parse">Parsing a vCalendar</a></li>\r
+                       </ul></li>\r
+               </ul>      \r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/social/calendar_n.htm">Calendar Guide</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API for Mobile Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Calendar: Managing Calendar Events and Accessing the Calendar Database</h1>\r
+\r
+   \r
+<p>This tutorial demonstrates how you can manage events and todo tasks, and convert calendar details to and from the vCalendar format.</p>\r
+\r
+  <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  \r
+    <h2 id="warmup" name="warmup">Warm-up</h2>\r
+    <p>Become familiar with the Calendar API basics by learning about:</p>\r
+    <ul>\r
+                       <li><a href="#init">Initializing the Calendar</a>\r
+                       <p>Initialize the calendar for use.</p></li>\r
+                       <li>Calendar management\r
+                       <ul>\r
+                               <li><a href="#create_event">Creating an Event</a>\r
+                               <p>Create a new event.</p></li>\r
+                               <li><a href="#set_event">Setting Event Properties</a>\r
+                               <p>Set event properties, such as subject and description.</p></li>\r
+                               <li><a href="#insert_event">Inserting an Event to the Database</a>\r
+                               <p>Insert an event to the Calendar database.</p></li>\r
+                               <li><a href="#get_event">Getting Events</a>\r
+                               <p>Retrieve a single event or a list of events.</p></li>\r
+                               <li><a href="#update_event">Updating an Event</a>\r
+                               <p>Update event details.</p></li>\r
+                               <li><a href="#delete_event">Deleting an Event</a>\r
+                               <p>Delete an event from the database.</p></li>\r
+                               <li><a href="#exception_add">Setting Exceptions when Inserting Events</a>\r
+                               <p>Set exceptions when creating an event with a frequency.</p></li>\r
+                               <li><a href="#exception_modify">Adding an Exception Date for an Existing Event</a>\r
+                               <p>Add an exception date for an existing event.</p></li>\r
+                               <li><a href="#monitor_event">Monitoring Event Changes</a>\r
+                               <p>Receive notifications when changes occur in events.</p></li>\r
+                       </ul></li>\r
+                       <li>Todos\r
+                               <ul>\r
+                               <li><a href="#create">Creating a Todo</a>\r
+                               <p>Create a new todo.</p></li>\r
+                               <li><a href="#set">Setting Todo Properties</a>\r
+                               <p>Set todo properties, such as subject and description.</p></li>\r
+                               <li><a href="#insert">Inserting a Todo to the Database</a>\r
+                               <p>Insert a todo to the calendar database.</p></li>\r
+                               <li><a href="#get">Getting Todos</a>\r
+                               <p>Retrieve a single todo or a list of todos.</p></li>\r
+                               <li><a href="#update">Updating a Todo</a>\r
+                               <p>Update todo details.</p></li>\r
+                               <li><a href="#delete">Deleting a Todo</a>\r
+                               <p>Delete the todo from the database.</p></li>\r
+                               <li><a href="#monitor">Monitoring Todo Changes</a>\r
+                               <p>Receive notifications when changes occur in todos.</p></li>\r
+                       </ul></li>\r
+                       <li>vCalendars\r
+                               <ul>\r
+                               <li><a href="#make">Making a vCalendar</a>\r
+                               <p>Make a vCalendar stream from an event record.</p></li>\r
+                               <li><a href="#parse">Parsing a vCalendar</a>\r
+                               <p>Parse a vCalendar from a file and insert to the database.</p></li>\r
+                       </ul></li>\r
+               </ul>\r
+\r
+\r
+ <h2 id="init" name="init">Initializing the Calendar</h2>\r
+                       \r
+<p>To initialize the Calendar Service:</p>\r
+<ol><li>                       \r
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;calendar.h&gt;</span> header file in your application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;calendar.h&gt;\r
+</pre></li>                    \r
+                       \r
+<li>           \r
+<p>Most of API functions return error codes, so you must define at the beginning of your code the <span style="font-family: Courier New,Courier,monospace">int</span> type, which is used to store the error codes. Each time when a function returns error codes, verify the result of the operation.</p></li>\r
+\r
+<li><p>To connect to the Calendar Service, call the <span style="font-family: Courier New,Courier,monospace">calendar_connect()</span> function. Without this function, you cannot get access to the Calendar database.</p>\r
+<pre class="prettyprint">int error_code;\r
+error_code = calendar_connect();\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_connect: %x\n&quot;, error_code);</pre>\r
+\r
+\r
+<p>When the Calendar APIs are no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">calendar_disconnect()</span> function:</p>\r
+<pre class="prettyprint">error_code = calendar_disconnect();\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar disconnect failed: %x\n&quot;, error_code);</pre></li></ol>\r
+\r
+\r
+ <h2 id="create_event" name="create_event">Creating an Event</h2>\r
+\r
+<p>To define and create a new event handle (record), since the Calendar Service uses the event handler mechanism:</p>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the defined event handle as a parameter to create an event associated to the event handle and an <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> parameter for the event type.</p>\r
+<p>Verify the status of the error code. If the event is created correctly, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If an error is reported, you can check the error and take appropriate action or stop other operations on the database.</p>\r
+<pre class="prettyprint">calendar_record_h event = NULL;\r
+error_code = calendar_record_create(_calendar_event._uri, &amp;event);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_record_create: %x\n&quot;, error_code);</pre>\r
+\r
+ <h2 id="set_event" name="set_event">Setting Event Properties</h2>\r
+\r
+<p>To set the event properties:</p>\r
+\r
+<ol><li>Set the event subject.\r
+<p>To set the subject, call <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span>. This function takes the event handle (created before), as the first argument, <span style="font-family: Courier New,Courier,monospace">_calendar_event.summary</span> for subject type, and the subject, which is a string value, as the third argument. The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>\r
+<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.summary, &quot;summary&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set record summary failed : %x\n&quot;, error_code);</pre></li>\r
+<li>Set the event description.\r
+<p>The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function sets the description of the event when the second argument is <span style="font-family: Courier New,Courier,monospace">_calendar_event.description</span>. This function takes the event handle as the first argument, and the description, which is a string value, as the third argument. The description argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>\r
+<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.description, &quot;description&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed : %x\n&quot;, error_code);</pre></li>\r
+<li>Set the event time zone ID.\r
+<p>The start and end time must be inserted in the event. If the time zone ID is not inserted, the time zone for the start and end time is considered to be UTC. The properties are in the <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> file.</p>\r
+<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_tzid failed : %x\n&quot;, error_code);\r
+\r
+error_code = calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set end_tzid failed : %x\n&quot;, error_code);</pre></li>\r
+<li>Set the event start and end dates.\r
+<p>You can set the other properties similarly. To set the start date, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime()</span> functions and check the error codes. </p>\r
+<pre class="prettyprint">calendar_time_s starttime = {0};\r
+starttime.type = CALENDAR_TIME_UTIME;\r
+starttime.time.utime = 1404036000; // 2014/06/29 10:00:00 UTC\r
+error_code = calendar_record_set_caltime(event, _calendar_event.start_time, starttime);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);\r
+\r
+calendar_time_s endtime = {0};\r
+endtime.type = CALENDAR_TIME_UTIME;\r
+endtime.time.utime = 1404036000 + 3600; // 2014/06/29 11:00:00 UTC\r
+error_code = calendar_record_set_caltime(event, _calendar_event.end_time, endtime);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set end_time failed : %x\n&quot;, error_code);</pre>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">calendar_time_s</span> has 2 types. For more information about the types, see the <a href="../../../../org.tizen.guides/html/native/social/calendar_n.htm">Calendar</a> guide.</p>\r
+</li>\r
+<li>Set the event frequency.\r
+<p>To create recurring events, set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">frequency property</a>.</p>\r
+<pre class="prettyprint">error_code = calendar_record_set_int(event, _calendar_event.freq, CALENDAR_RECURRENCE_MONTHLY);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);\r
+\r
+error_code = calendar_record_set_int(event, _calendar_event.interval, 1);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);\r
+\r
+error_code = calendar_record_set_str(event, _calendar_event.bymonthday, &quot;3,4,5&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed : %x\n&quot;, error_code);</pre></li>\r
+<li>Set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html#CAPI_SOCIAL_CALENDAR_SVC_MODULE_Creating_a_recurring_event">range of recurrence</a> for the event.\r
+<pre class="prettyprint">error_code = calendar_record_set_int(event, _calendar_event.range_type, CALENDAR_RANGE_COUNT);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set range_type failed : %x\n&quot;, error_code);\r
+\r
+error_code = calendar_record_set_int(event, _calendar_event.count, 8);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set count failed : %x\n&quot;, error_code);</pre></li>\r
+\r
+<li>Add an alarm.\r
+<p>To add an alarm, create an alarm handle and insert it as a child.</p>\r
+<pre class="prettyprint">calendar_record_h alarm = NULL;\r
+calendar_time_s ct;\r
+error_code = CALENDAR_ERROR_NONE;\r
+error_code += calendar_record_create(_calendar_alarm._uri, &amp;alarm);\r
+error_code += calendar_record_set_int(alarm, _calendar_alarm.tick_unit, CALENDAR_ALARM_TIME_UNIT_SPECIFIC);\r
+ct.type = CALENDAR_TIME_UTIME;\r
+ct.time.utime = 1404036000 - 60; // 60 sec before starttime (1404036000)\r
+error_code += calendar_record_set_caltime(alarm, _calendar_alarm.alarm_time, ct);\r
+error_code += calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);\r
+\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar add alarm failed \n&quot;);</pre>\r
+<p>The following alarm tick units are available:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_MINUTE</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_HOUR</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_DAY</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_WEEK</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_MONTH</span>     (not recommended)</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_SPECIFIC</span> (must use specific unixtime)</li></ul></li>\r
+<li>Add an attendee.\r
+<p>To add an attendee, create an attendee handle and insert it as a child.</p>\r
+<pre class="prettyprint">calendar_record_h attendee = NULL;\r
+error_code = CALENDAR_ERROR_NONE;\r
+error_code += calendar_record_create(_calendar_attendee._uri, &amp;attendee);\r
+error_code += calendar_record_set_str(attendee, _calendar_attendee.name, &quot;John&quot;);\r
+error_code += calendar_record_add_child_record(event, _calendar_event.calendar_attendee, attendee);\r
+\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar add alarm failed \n&quot;);</pre></li></ol>\r
+\r
+ <h2 id="insert_event" name="insert_event">Inserting an Event to the Database</h2>\r
+\r
+<p>To insert an event record:</p>\r
+\r
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the newly created event into the Calendar database. The first argument is the event handle, the second is the record ID - a unique ID is assigned to the event you are adding and returned as the second argument. If the event is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>.\r
+<pre class="prettyprint">int id = -1;\r
+error_code = calendar_db_insert_record(event, &amp;id);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);\r
+\r
+dlog_print(DLOG_ERROR, LOG_TAG, &quot;id: %d\n&quot;, id);</pre></li>\r
+<li>After inserting, destroy the used structures:\r
+<pre class="prettyprint">calendar_record_destroy(event, true);</pre></li></ol>\r
+\r
+ <h2 id="get_event" name="get_event">Getting Events</h2>\r
+\r
+<p>To retrieve a single event or all events one by one. You can also filter the events by one of the properties:</p>\r
+\r
+<ol><li>Get a single event record using its ID.\r
+<pre class="prettyprint">calendar_record_h record;\r
+const int event_id = ... // Acquire event ID\r
+error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Get the event record list.\r
+<p>To get all events without filtering, you need a record list:</p>\r
+<pre class="prettyprint">calendar_list_h list = NULL;\r
+error_code = calendar_db_get_all_records(_calendar_event._uri, 0, 0, &amp;list);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get all records failed: %x\n&quot;, error_code);</pre></li>\r
+\r
+<li>Filter the list.\r
+<ol type="a"><li>\r
+<p>To get events with filtering, you need a record list and a query:</p>\r
+<pre class="prettyprint">calendar_list_h list = NULL;\r
+calendar_query_h query = NULL;\r
+\r
+error_code = calendar_query_create(_calendar_event._uri, &amp;query);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create query failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Before retrieving the events, create a filter for the list. You can filter the list based on various parameters.\r
+<pre class="prettyprint">calendar_filter_h filter = NULL;\r
+\r
+error_code = calendar_filter_create (_calendar_event._uri, &amp;filter);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create filter failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Add a condition, such as summary:\r
+<pre class="prettyprint">error_code = calendar_filter_add_str(filter, _calendar_event.summary, CALENDAR_MATCH_CONTAINS, &quot;summary to find&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>\r
+</li>\r
+<li>To add more conditions, define an operator between the conditions:\r
+<pre class="prettyprint">error_code = calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add operator failed: %x\n&quot;, error_code);\r
+\r
+error_code = calendar_filter_add_str(filter, _calendar_event.description, CALENDAR_MATCH_CONTAINS, &quot;description to find&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>\r
+<p>In the above example, only events which contain a summary &quot;summary to find&quot; and description &quot;description to find&quot; are retrieved.</p>\r
+<p>You can create a filter with integer and time conditions. For instance, to filter all day events which start after 1st January 2014, add the following filter:</p>\r
+<pre class="prettyprint">calendar_time_s time_to_compare = {0};\r
+time_to_compare.type = CALENDAR_TIME_LOCALTIME;\r
+time_to_compare.time.date.mday = 1;\r
+time_to_compare.time.date.month = 1;\r
+time_to_compare.time.date.year = 2014;\r
+error_code = calendar_filter_add_caltime(filter, _calendar_event.start_time, CALENDAR_MATCH_GREATER_THAN, time_to_compare);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add caltime failed: %x\n&quot;, error_code);</pre>\r
+<p>The type parameter determines whether the event is a daily (<span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_LOCALTIME</span>) non-all-day event (<span style="font-family: Courier New,Courier,monospace">CALENDAR_TIME_UTIME</span>). To get the specified time period, use 2 conditions using <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_GREATER_THAN</span> and <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_LESS_THAN</span> with the operator <span style="font-family: Courier New,Courier,monospace">CALENDAR_FILTER_OPERATOR_OR</span>. You can also use <span style="font-family: Courier New,Courier,monospace">CALENDAR_MATCH_EQUAL</span> to set an equality condition.</p></li>\r
+<li>Connect the query with the list:\r
+<pre class="prettyprint">error_code = calendar_query_set_filter(query, filter);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;query set filter failed: %x\n&quot;, error_code);\r
+\r
+error_code = calendar_db_get_records_with_query(query, 0, 0, &amp;list);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get records with query failed: %x\n&quot;, error_code);</pre>\r
+\r
+<p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>\r
+<li>Free the filter and query:\r
+<pre class="prettyprint">calendar_filter_destroy(filter);\r
+calendar_query_destroy(query);</pre></li></ol></li>\r
+\r
+<li>Iterate the list and read the records.\r
+<ol type="a"><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.\r
+<p>Note on the returned values&#39; ownership: some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</p>\r
+<pre class="prettyprint">calendar_record_h record;\r
+while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;char* summary;\r
+&nbsp;&nbsp;&nbsp;calendar_record_get_str_p(record, _calendar_event.summary, &amp;summary);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;summary: %s\n&quot;, summary);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre></li>\r
+<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">calendar_gl_event_data_t</span> structure like below:\r
+<pre class="prettyprint">calendar_gl_event_data_t *gl_event_data = NULL;\r
+calendar_record_h record = NULL;\r
+while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_event_data = _create_gl_event_data(record);\r
+&nbsp;&nbsp;&nbsp;// You can get, for example, summary:\r
+&nbsp;&nbsp;&nbsp;// gl_event_data-&gt;summary\r
+\r
+&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre></li>\r
+\r
+<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.\r
+<pre class="prettyprint">typedef struct _calendar_gl_event_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;char *summary;\r
+&nbsp;&nbsp;&nbsp;char *description;\r
+&nbsp;&nbsp;&nbsp;calendar_time_s start_time;\r
+} calendar_gl_event_data_t;\r
+\r
+static void _free_gl_event_data(calendar_gl_event_data_t *gl_event_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_event_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_event_data-&gt;summary);\r
+&nbsp;&nbsp;&nbsp;free(gl_event_data-&gt;description);\r
+&nbsp;&nbsp;&nbsp;free(gl_event_data);\r
+}\r
+\r
+static calendar_gl_event_data_t *_create_gl_event_data(calendar_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;calendar_gl_event_data_t *gl_event_data;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_event_data = malloc(sizeof(calendar_gl_event_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_event_data, 0x0, sizeof(calendar_gl_event_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_event.summary, &amp;gl_event_data-&gt;summary);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get summary failed: %i\n&quot;, error_code);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_event.description, &amp;gl_event_data-&gt;description);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get description failed: %i\n&quot;, error_code);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_int(record, _calendar_event.id, &amp;gl_event_data-&gt;id);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get id failed: %i\n&quot;, error_code);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_caltime(record, _calendar_event.start_time, &amp;gl_event_data-&gt;start_time);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar get start time failed: %i\n&quot;, error_code);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_event_data;\r
+}</pre>\r
+<p>To get access to a specified data from the record, firstly it is necessary to get its child responsible for the requested type.</p></li></ol></li>\r
+<li>Free the list:\r
+<pre class="prettyprint">calendar_list_destroy(list, true);</pre></li></ol>\r
+\r
+\r
+ <h2 id="update_event" name="update_event">Updating an Event</h2>\r
+\r
+<p>To update an event record:</p>\r
+\r
+<ol><li>Get the event record handle to update with the ID.\r
+<pre class="prettyprint">calendar_record_h record;\r
+const int event_id = ... // Acquire event ID\r
+error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Set the properties to update.\r
+<pre class="prettyprint">error_code = calendar_record_set_str(record, _calendar_event.summary, &quot;summary updated&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set summary failed: %x\n&quot;, error_code);\r
+\r
+error_code = calendar_record_set_str(record, _calendar_event.description, &quot;description updated&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set description failed: %x\n&quot;, error_code);</pre></li>\r
+<li>To update the record, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function.\r
+<pre class="prettyprint">error_code = calendar_db_update_record(record);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db update record failed: %x\n&quot;, error_code);</pre></li>\r
+<li>When the event handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function to destroy the event handle and free the allocated memory.\r
+<pre class="prettyprint">calendar_record_destroy(record, true);</pre></li></ol>\r
+\r
+ <h2 id="delete_event" name="delete_event">Deleting an Event</h2>\r
+\r
+<p>To delete an event, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> as the first parameter and event ID as the second one:</p>\r
+<pre class="prettyprint">int event_id = ... // Acquire event ID\r
+error_code = calendar_db_delete_record(_calendar_event._uri, event_id);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db delete record failed: %x\n&quot;, error_code);</pre>\r
+\r
+ <h2 id="exception_add" name="exception_add">Setting Exceptions when Inserting Events</h2>\r
+\r
+<p>To set an exception date to an event record when creating the event:</p>\r
+\r
+<ol><li>Create a recurring event.\r
+<p>The following example creates an event record with the following properties:</p>\r
+<ul><li>Frequency: <span style="font-family: Courier New,Courier,monospace">CALENDAR_RECURRENCE_MONTHLY</span></li>\r
+<li>Interval: 1</li>\r
+<li>Bymonthday: &quot;3, 4, 5&quot;</li>\r
+<li>Range type: count</li>\r
+<li>Count: 8</li></ul>\r
+\r
+<pre class="prettyprint">int error_code = CALENDAR_ERROR_NONE;\r
+\r
+calendar_record_h event = NULL;\r
+error_code += calendar_record_create(_calendar_event._uri, &amp;event);\r
+error_code += calendar_record_set_str(event, _calendar_event.summary, &quot;test&quot;);\r
+error_code += calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);\r
+error_code += calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);\r
+\r
+calendar_time_s st = {0};\r
+st.type = CALENDAR_TIME_UTIME;\r
+st.time.utime = 1349226000;\r
+error_code += calendar_record_set_caltime(event, _calendar_event.start_time, st);\r
+\r
+calendar_time_s et = {0};\r
+et.type = CALENDAR_TIME_UTIME;\r
+et.time.utime = 1354582800;\r
+error_code += calendar_record_set_caltime(event, _calendar_event.end_time, et);\r
+\r
+error_code += calendar_record_set_int(event, _calendar_event.freq, CALENDAR_RECURRENCE_MONTHLY);\r
+error_code += calendar_record_set_int(event, _calendar_event.interval, 1);\r
+error_code += calendar_record_set_str(event, _calendar_event.bymonthday, &quot;3,4,5&quot;);\r
+\r
+error_code += calendar_record_set_int(event, _calendar_event.range_type, CALENDAR_RANGE_COUNT);\r
+error_code += calendar_record_set_int(event, _calendar_event.count, 8);\r
+\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record create failed: \n&quot;);</pre>\r
+\r
+<p>The created event has 8 instances.</p>\r
+\r
+  <table>\r
+   <caption>\r
+     Table: Event instances\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>unixtime</th>\r
+     <th>Date time</th>\r
+    </tr>\r
+    <tr>\r
+     <td>1349226000\r
+        <br/>1349312400\r
+        <br/>1349398800\r
+        <br/>1351904400\r
+        <br/>1351990800\r
+        <br/>1352077200\r
+        <br/>1354496400\r
+        <br/>1354582800</td>\r
+     <td>2012-10-03 01:00:00\r
+        <br/>2012-10-04 01:00:00\r
+        <br/>2012-10-05 01:00:00\r
+        <br/>2012-11-03 01:00:00\r
+        <br/>2012-11-04 01:00:00\r
+        <br/>2012-11-05 01:00:00\r
+        <br/>2012-12-03 01:00:00\r
+        <br/>2012-12-04 01:00:00</td>\r
+    </tr>\r
+\r
+   </tbody>\r
+  </table></li>\r
+<li>Set the exdate property to create the exception.\r
+<p>In vcalendar 2.0 (RFC 2445), exdate is used to identify a deleted instance. If multiple instances are deleted, datetimes are added with a comma (such as 20121104T010000Z, 20121105T010000Z, 20121203T010000Z).</p>\r
+<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.exdate, &quot;20121104T010000Z&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record set string failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Insert the record.\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the event into the Calendar database.</p>\r
+<pre class="prettyprint">int event_id;\r
+error_code = calendar_db_insert_record(event, &amp;event_id);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar db insert record failed: %x\n&quot;, error_code);\r
+\r
+calendar_record_destroy(event, true);</pre></li></ol>\r
+\r
+ <h2 id="exception_modify" name="exception_modify">Adding an Exception Date for an Existing Event</h2>\r
+\r
+<p>To add an exception date to an existing event:</p>\r
+\r
+<ol><li>Make sure you have an existing event.</li>\r
+<li>Clone the existing event record and set new properties for the exception.\r
+<p>Cloning means that the new record has the original event&#39;s properties. In vcalendar 2.0 (RFC 2445), the recurrence ID is used to identify the modified instance (exception).</p>\r
+<pre class="prettyprint">calendar_record_h clone = NULL;\r
+error_code = CALENDAR_ERROR_NONE;\r
+\r
+error_code += calendar_record_clone(event, &amp;clone);\r
+error_code += calendar_record_set_int(clone, _calendar_event.original_event_id, event_id);\r
+error_code += calendar_record_set_str(clone, _calendar_event.recurrence_id, &quot;20121005T010000Z&quot;);\r
+\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar record clone failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Insert the new record.\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the new event record into the Calendar database.</p>\r
+<pre class="prettyprint">int exdate_event_id = 0;\r
+error_code = calendar_db_insert_record(clone, &amp;exdate_event_id);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar db insert record failed: %x\n&quot;, error_code);\r
+\r
+calendar_record_destroy(clone, true);\r
+calendar_record_destroy(event, true);</pre></li></ol>\r
+\r
+\r
+ <h2 id="monitor_event" name="monitor_event">Monitoring Event Changes</h2>\r
+\r
+<p>To register a callback function that listens for event changes:</p>\r
+<ol><li>Register the callback function.\r
+<pre class="prettyprint">error_code = calendar_db_add_changed_cb(_calendar_event._uri, _event_changed_callback, NULL);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db add changed cb failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Define the callback function.\r
+<p>The callback function is called when an event changes. The code below shows how to get the new event details.</p>\r
+<pre class="prettyprint">static calendar_gl_event_data_t *_gl_event_data = ...\r
+static void _event_changed_callback(const char *view_uri, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _calendar_event._uri))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;if (NULL == _gl_event_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;int event_id = _gl_event_data-&gt;id;\r
+&nbsp;&nbsp;&nbsp;_free_gl_event_data(_gl_event_data);\r
+&nbsp;&nbsp;&nbsp;_gl_event_data = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;calendar_record_h record = NULL;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp; _gl_event_data = _create_gl_event_data(record);\r
+&nbsp;&nbsp;&nbsp;// Use _gl_event_data\r
+\r
+&nbsp;&nbsp;&nbsp;calendar_record_destroy(record, true);\r
+}</pre></li></ol>\r
+\r
+ <h2 id="create" name="create">Creating a Todo</h2>\r
+\r
+<p>To define and create a new todo handle record, since the Calendar Service uses a todo handler mechanism:</p>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the defined todo handle as a parameter to create a todo associated with the todo handle and a <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> parameter for the todo type.</p>\r
+<p>Verify the status of the error code. If the todo handle is created correctly, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If an error is reported, check the error and take appropriate action, or stop other operations on the database.</p>\r
+<pre class="prettyprint">calendar_record_h todo = NULL;\r
+error_code = calendar_record_create(_calendar_todo._uri, &amp;todo);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_record_create: %x\n&quot;, error_code);</pre>\r
+\r
+ <h2 id="set" name="set">Setting Todo Properties</h2>\r
+\r
+<p>To set the todo properties:</p>\r
+<ol><li>Set the todo subject.\r
+<p>To set the subject, call <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span>. This function takes the todo handle (created before) as the first argument, <span style="font-family: Courier New,Courier,monospace">_calendar_todo.summary</span> for the subject type, and the subject, which is string value, as the third argument. The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>\r
+<pre class="prettyprint">error_code = calendar_record_set_str(todo, _calendar_todo.summary, &quot;summary&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set summary failed : %x\n&quot;, error_code);</pre></li>\r
+<li>Set the todo description.\r
+<p>The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_uri()</span> function sets the description of the todo when the second argument is <span style="font-family: Courier New,Courier,monospace">_calendar_todo.description</span>. This function takes the todo handle as the first argument, and the description, which is string value, as the third argument. The description argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>\r
+<pre class="prettyprint">error_code = calendar_record_set_str(todo, _calendar_todo.description, &quot;description&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed : %x\n&quot;, error_code);</pre></li>\r
+<li>Set the todo due date.\r
+<p>To set the due date, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_caltime</span> function and check the error codes. </p>\r
+<pre class="prettyprint">calendar_time_s duetime = {0};\r
+duetime.type = CALENDAR_TIME_UTIME;\r
+duetime.time.utime = 1404036000; // 2014/06/29 11:00:00 UTC\r
+\r
+error_code = calendar_record_set_caltime(todo, _calendar_todo.due_time, duetime);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set due_time failed : %x\n&quot;, error_code);</pre></li>\r
+<li>Set the todo status.\r
+<p>You can set the other properties similarly. To set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga3e1b9cae05705d471a4746d8ab6d3622">todo status</a>, call the <span style="font-family: Courier New,Courier,monospace">calendar_record_set_int()</span> function and check the error codes.</p>\r
+<pre class="prettyprint">error_code = calendar_record_set_int(todo, _calendar_todo.todo_status, CALENDAR_TODO_STATUS_COMPLETED);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set todo_status failed : %x\n&quot;, error_code);</pre></li></ol>\r
+\r
+ <h2 id="insert" name="insert">Inserting a Todo to the Database</h2>\r
+\r
+<p>To insert a todo record:</p>\r
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert a newly created todo into the Calendar database. The first argument is the todo handle, the second is the record ID. A unique ID is assigned to the record you are adding, and is returned as the third argument of the called function. If the todo is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>.\r
+<pre class="prettyprint">int id;\r
+error_code = calendar_db_insert_record(todo, &amp;id);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);</pre></li>\r
+<li>After inserting, destroy the used structures:\r
+<pre class="prettyprint">calendar_record_destroy(todo, true);</pre></li></ol>\r
+\r
+ <h2 id="get" name="get">Getting Todos</h2>\r
+\r
+<p>To retrieve a single todo or all todos one by one. You can also filter the todos by one of the properties:</p>\r
+\r
+<ol><li>Get a single todo record using its ID.\r
+<pre class="prettyprint">calendar_record_h record;\r
+const int todo_id = ... // Acquire todo ID\r
+error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Get the todo record list.\r
+<p>To get all todos without filtering, you need a record list:</p>\r
+<pre class="prettyprint">calendar_list_h list = NULL;\r
+error_code = calendar_db_get_all_records(_calendar_todo._uri, 0, 0, &amp;list);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get all records failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Filter the list.\r
+<ol type="a"><li>To get todos with filtering, you need a record list and a query:\r
+<pre class="prettyprint">calendar_list_h list = NULL;\r
+calendar_query_h query = NULL;\r
+\r
+error_code = calendar_query_create(_calendar_todo._uri, &amp;query);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create query failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Before retrieving the todos, create a filter for the list. You can filter the list based on various parameters.\r
+<pre class="prettyprint">calendar_filter_h filter = NULL;\r
+\r
+error_code = calendar_filter_create (_calendar_todo._uri, &amp;filter);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;create filter failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Add a condition, such as summary:\r
+<pre class="prettyprint">error_code = calendar_filter_add_str(filter, _calendar_todo.summary, CALENDAR_MATCH_CONTAINS, &quot;summary to find&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre></li>\r
+<li>To add more conditions, define an operator between the conditions:\r
+<pre class="prettyprint">error_code = calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add operator failed: %x\n&quot;, error_code);\r
+\r
+error_code = calendar_filter_add_str(filter, _calendar_todo.description, CALENDAR_MATCH_CONTAINS, &quot;description to find&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add string failed: %x\n&quot;, error_code);</pre>\r
+<p>In the above example, only todos which contain a summary &quot;summary to find&quot; and description &quot;description to find&quot; are retrieved.</p>\r
+<p>You can create a filter with integer and time conditions. For instance, to filter all todos which are completed, add the following filter:</p>\r
+<pre class="prettyprint">error_code = calendar_filter_add_int(filter, _calendar_todo.todo_status, CALENDAR_MATCH_EQUAL, CALENDAR_TODO_STATUS_COMPLETED);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;filter add integer failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Connect the query with the list:\r
+<pre class="prettyprint">error_code = calendar_query_set_filter(query, filter);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;query set filter failed: %x\n&quot;, error_code);\r
+\r
+error_code = calendar_db_get_records_with_query(query, 0, 0, &amp;list);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get records with query failed: %x\n&quot;, error_code);</pre>\r
+<p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>\r
+\r
+<li>Free the filter and query:\r
+<pre class="prettyprint">calendar_filter_destroy(filter);\r
+calendar_query_destroy(query);</pre></li>\r
+</ol></li>\r
+<li>Iterate the list and read the records.\r
+<ol type="a"><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.\r
+<p>Note on the returned values&#39; ownership: some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</p>\r
+<pre class="prettyprint">calendar_record_h record;\r
+while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;char* summary;\r
+&nbsp;&nbsp;&nbsp;calendar_record_get_str_p(record, _calendar_todo.summary, &amp;summary);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;summary: %s\n&quot;, summary);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre></li>\r
+<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">calendar_gl_todo_data_t</span> structure like below:\r
+<pre class="prettyprint">calendar_gl_todo_data_t *gl_todo_data = NULL;\r
+calendar_record_h record = NULL;\r
+while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_todo_data = _create_gl_todo_data(record);\r
+&nbsp;&nbsp;&nbsp;// You can get, for example, summary:\r
+&nbsp;&nbsp;&nbsp;// gl_todo_data-&gt;summary\r
+\r
+&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre></li>\r
+\r
+<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.\r
+<pre class="prettyprint">typedef struct _calendar_gl_todo_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;char *summary;\r
+&nbsp;&nbsp;&nbsp;char *description;\r
+&nbsp;&nbsp;&nbsp;calendar_time_s due_time;\r
+} calendar_gl_todo_data_t;\r
+\r
+static void _free_gl_todo_data(calendar_gl_todo_data_t *gl_todo_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_todo_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_todo_data-&gt;summary);\r
+&nbsp;&nbsp;&nbsp;free(gl_todo_data-&gt;description);\r
+&nbsp;&nbsp;&nbsp;free(gl_todo_data);\r
+}\r
+\r
+static calendar_gl_todo_data_t *_create_gl_todo_data(calendar_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;calendar_gl_todo_data_t *gl_todo_data;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_todo_data = malloc(sizeof(calendar_gl_todo_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_todo_data, 0x0, sizeof(calendar_gl_todo_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_todo.summary, &amp;gl_todo_data-&gt;summary);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get summary failed: %x\n&quot;, error_code);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_todo.description, &amp;gl_todo_data-&gt;description);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get description failed: %x\n&quot;, error_code);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_int(record, _calendar_todo.id, &amp;gl_todo_data-&gt;id);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record get id failed: %x\n&quot;, error_code);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_caltime(record, _calendar_todo.due_time, &amp;gl_todo_data-&gt;due_time);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar get due time failed: %x\n&quot;, error_code);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_todo_data;\r
+}</pre>\r
+<p>To get access to a specified data from the record, firstly you must get its child responsible for the requested type. Data returned by any function with the <span style="font-family: Courier New,Courier,monospace">_p</span> suffix must not be passed to <span style="font-family: Courier New,Courier,monospace">_free_gl_todo_data()</span>.</p></li></ol></li>\r
+<li>Free the list:\r
+<pre class="prettyprint">\r
+calendar_list_destroy(list, true);</pre></li></ol>\r
+\r
+ <h2 id="update" name="update">Updating a Todo</h2>\r
+\r
+<p>To update a todo record:</p>\r
+<ol><li>Get the todo record handle to update with the ID.\r
+<pre class="prettyprint">calendar_record_h record;\r
+const int todo_id = ... // Acquire todo ID\r
+error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Set the properties to update.\r
+<pre class="prettyprint">error_code = calendar_record_set_str(record, _calendar_todo.summary, &quot;summary updated&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set summary failed: %x\n&quot;, error_code);\r
+\r
+error_code = calendar_record_set_str(record, _calendar_todo.description, &quot;description updated&quot;);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;record set description failed: %x\n&quot;, error_code);</pre></li>\r
+<li>To update record, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_update_record()</span> function.\r
+<pre class="prettyprint">error_code = calendar_db_update_record(record);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db update record failed: %x\n&quot;, error_code);</pre></li>\r
+<li>When the todo handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function to destroy the todo handle and free the allocated memory.\r
+<pre class="prettyprint">calendar_record_destroy(record, true);</pre></li></ol>\r
+\r
+ <h2 id="delete" name="delete">Deleting a Todo</h2>\r
+\r
+<p>To delete a todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> as the first parameter and the todo ID as the second one.</p>\r
+<pre class="prettyprint">int todo_id = ... // Acquire todo ID\r
+error_code = calendar_db_delete_record(_calendar_todo._uri, todo_id);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db delete record failed: %x\n&quot;, error_code);</pre>\r
+\r
+ <h2 id="monitor" name="monitor">Monitoring Todo Changes</h2>\r
+\r
+<p>To register a callback function that listens for todo changes:</p>\r
+<ol><li>Register the callback function.\r
+\r
+<pre class="prettyprint">error_code = calendar_db_add_changed_cb(_calendar_todo._uri, _todo_changed_callback, NULL);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db add changed cb failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Define the callback function.\r
+<p>The callback function is called when a todo changes. The code below shows how to get the new todo details.</p>\r
+<pre class="prettyprint">static calendar_gl_todo_data_t *_gl_todo_data = ...\r
+static void _todo_changed_callback(const char *view_uri, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _calendar_todo._uri))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;if (NULL == _gl_todo_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;int todo_id = _gl_todo_data-&gt;id;\r
+&nbsp;&nbsp;&nbsp;_free_gl_todo_data(_gl_todo_data);\r
+&nbsp;&nbsp;&nbsp;_gl_todo_data = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;calendar_record_h record = NULL;\r
+&nbsp;&nbsp;&nbsp;calendar_error_e error_code;\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;_gl_todo_data = _create_gl_todo_data(record);\r
+&nbsp;&nbsp;&nbsp;// Use _gl_todo_data\r
+\r
+&nbsp;&nbsp;&nbsp;calendar_record_destroy(record, true);\r
+}</pre></li></ol>\r
+\r
+ <h2 id="make" name="make">Making a vCalendar</h2>\r
+\r
+<p>To make a vCalendar stream from an event record:</p>\r
+<ol><li>Get the event record by the event ID.\r
+<pre class="prettyprint">int event_id = ... // Acquire event ID\r
+calendar_record_h record = NULL;\r
+error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db get record failed: %x\n&quot;, error_code);</pre></li>\r
+<li>Make the vCalendar stream by the event record.\r
+<pre class="prettyprint">char *vcalendar_stream = NULL;\r
+calendar_list_h list = NULL;\r
+\r
+error_code = calendar_list_create(&amp;list);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;list create failed: %x\n&quot;, error_code);\r
+\r
+error_code = calendar_list_add(list, record);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;list add failed: %x\n&quot;, error_code);\r
+\r
+error_code = calendar_vcalendar_make_from_records(list, &amp;vcalendar_stream);\r
+if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;vcalendar make from records failed: %x\n&quot;, error_code);</pre></li>\r
+<li>When the list handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_list_destroy()</span> function to destroy the list handle and free the allocated memory.\r
+<pre class="prettyprint">free(vcalendar_stream);\r
+calendar_list_destroy(list, true);</pre></li></ol>\r
+\r
+ <h2 id="parse" name="parse">Parsing a vCalendar</h2>\r
+\r
+<p>To parse a vCalendar from a file and insert to the database:</p>\r
+<pre class="prettyprint">char vcalendar_file_path[512] = {0};\r
+char *resource_path = app_get_resource_path();\r
+snprintf(vcalendar_file_path, sizeof(vcalendar_file_path), &quot;%s/%s&quot;, resource_path, &quot;vcalendar.ics&quot;);\r
+free(resource_path);\r
+\r
+error_code = calendar_vcalendar_parse_to_calendar_foreach(vcalendar_file_path, // File path of vCalendar\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_vcalendar_parse_cb, // Callback function to invoke\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL); // User data to be passed to the callback function</pre>\r
+\r
+<p>The vCalendar stream contains multiple event or todo objects. The callback function is called after parsing each event or todo. If you return <span style="font-family: Courier New,Courier,monospace">false</span> on the callback function, parsing stops.</p>\r
+<pre class="prettyprint">static bool _vcalendar_parse_cb(calendar_record_h record, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == record)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+\r
+&nbsp;&nbsp;&nbsp;int id = -1;\r
+&nbsp;&nbsp;&nbsp;error_code = calendar_db_insert_record(record, &amp;id);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;db insert record failed: %x\n&quot;, error_code);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;inserted id: %d\n&quot;, id);\r
+&nbsp;&nbsp;&nbsp;// Use record\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}</pre>\r
+               \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm b/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm
index baa260c..4e30fdd 100644 (file)
--- a/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm
@@ -1,3232 +1,3232 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Contacts: Managing Contacts and Groups, and Accessing the Contact Database</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing Contacts</a></li>
-                       <li>Contacts
-                               <ul class="toc">
-                               <li><a href="#create_contact">Creating a Contact</a></li>
-                               <li><a href="#set_contact">Setting Contact Properties</a></li>
-                               <li><a href="#insert_contact">Inserting a Contact to the Database</a></li>
-                               <li><a href="#get_contact">Getting Contacts</a></li>
-                               <li><a href="#update_contact">Updating a Contact</a></li>
-                               <li><a href="#delete_contact">Deleting a Person</a></li>
-                               <li><a href="#link_contact">Linking and Unlinking Contacts</a></li>
-                               <li><a href="#manage_contact">Managing Favorites</a></li>
-                               <li><a href="#monitor_contact">Monitoring Person Changes</a></li>
-                               </ul></li>
-                       <li>Groups
-                               <ul class="toc">
-                               <li><a href="#create">Creating a Group</a></li>
-                               <li><a href="#set">Setting Group Properties</a></li>
-                               <li><a href="#insert">Inserting a Group to the Database</a></li>
-                               <li><a href="#get">Getting Groups</a></li>
-                               <li><a href="#update">Updating a Group</a></li>
-                               <li><a href="#delete">Deleting a Group</a></li>
-                               <li><a href="#manage">Managing Group Members</a></li>
-                               <li><a href="#monitor">Monitoring Group Changes</a></li>
-                               </ul></li>
-                       <li>vCards
-                               <ul class="toc">
-                               <li><a href="#make">Making a vCard</a></li>
-                               <li><a href="#parse">Parsing a vCard</a></li>
-                               </ul></li>
-                       <li>Speed dials
-                               <ul class="toc">
-                               <li><a href="#sd_create">Creating a Speed Dial</a></li>
-                               <li><a href="#sd_set">Setting Speed Dial Properties</a></li>
-                               <li><a href="#sd_insert">Inserting a Speed Dial to the Database</a></li>
-                               <li><a href="#sd_get">Getting Speed Dials</a></li>
-                               <li><a href="#sd_update">Updating a Speed Dial</a></li>
-                               <li><a href="#sd_delete">Deleting a Speed Dial</a></li>
-                               </ul>
-                       </li>
-                       <li>Phone logs
-                               <ul class="toc">
-                               <li><a href="#pl_create">Creating a Log</a></li>
-                               <li><a href="#pl_set">Setting Log Properties</a></li>
-                               <li><a href="#pl_insert">Inserting a Log to the Database</a></li>
-                               <li><a href="#pl_get">Getting Logs</a></li>
-                               <li><a href="#pl_delete">Deleting a Log</a></li>
-                               </ul>
-                       </li>                   
-                       <li>Records
-                               <ul class="toc">
-                               <li><a href="#insert2">Inserting New Records</a></li>
-                               <li><a href="#get2">Getting Record Details</a></li>
-                               <li><a href="#list2">Handling Lists</a></li>
-                               <li><a href="#delete2">Deleting Records</a></li>
-                               <li><a href="#link2">Linking Persons</a></li>
-                               </ul></li>
-                       <li>Contact settings
-                               <ul class="toc">
-                               <li><a href="#settings">Managing Contact Settings</a></li>
-                               <li><a href="#sim">Managing Contacts on the SIM Card</a></li>
-                               </ul></li>
-                       <li>vCard information
-                               <ul class="toc">
-                               <li><a href="#import">Importing from vCard</a></li>
-                               <li><a href="#export">Exporting to vCard</a></li>
-                               </ul></li>
-               </ul>        
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/social/contact_n.htm">Contacts Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Contacts: Managing Contacts and Groups, and Accessing the Contact Database</h1>
-
-   
-<p>This tutorial demonstrates how you can manage contacts and groups, and import them to or export them from the vCard format.</p>
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <h2>Warm-up</h2>
-      <p>Become familiar with the Contacts API basics by learning about:</p>
-      <ul>
-                       <li><a href="#init">Initializing Contacts</a>
-                       <p>Initialize the contacts for use.</p></li>
-                       <li>Contacts
-                               <ul><li><a href="#create_contact">Creating a Contact</a>
-                               <p>Create a new contact.</p></li>
-                               <li><a href="#set_contact">Setting Contact Properties</a>
-                               <p>Set contact properties, such as name and image.</p></li>
-                               <li><a href="#insert_contact">Inserting a Contact to the Database</a>
-                               <p>Insert a contact to the Contacts database.</p></li>
-                               <li><a href="#get_contact">Getting Contacts</a>
-                               <p>Retrieve single contacts or a list of contacts.</p></li>
-                               <li><a href="#update_contact">Updating a Contact</a>
-                               <p>Update contact details.</p></li>
-                               <li><a href="#delete_contact">Deleting a Person</a>
-                               <p>Delete the person from the database.</p></li>
-                               <li><a href="#link_contact">Linking and Unlinking Contacts</a>
-                               <p>Link and unlink contacts to persons.</p></li>
-                               <li><a href="#manage_contact">Managing Favorites</a>
-                               <p>Set or unset a person to be a favorite.</p></li>
-                               <li><a href="#monitor_contact">Monitoring Person Changes</a>
-                               <p>Receive notifications when changes occur in persons.</p></li>
-                               </ul></li>
-                       <li>Groups
-                               <ul><li><a href="#create">Creating a Group</a>
-                               <p>Create a new group.</p></li>
-                               <li><a href="#set">Setting Group Properties</a>
-                               <p>Set group properties, such as name and image.</p></li>
-                               <li><a href="#insert">Inserting a Group to the Database</a>
-                               <p>Insert a group to the Contacts database.</p></li>
-                               <li><a href="#get">Getting Groups</a>
-                               <p>Retrieve single groups or a list of groups.</p></li>
-                               <li><a href="#update">Updating a Group</a>
-                               <p>Update group details.</p></li>
-                               <li><a href="#delete">Deleting a Group</a>
-                               <p>Delete the group from the database.</p></li>
-                               <li><a href="#manage">Managing Group Members</a>
-                               <p>Add, remove, and retrieve group members.</p></li>
-                               <li><a href="#monitor">Monitoring Group Changes</a>
-                               <p>Receive notifications when changes occur in groups.</p></li>
-                               </ul></li>
-                       <li>vCards
-                               <ul>
-                               <li><a href="#make">Making a vCard</a>
-                               <p>Make a vCard stream from a person record.</p></li>
-                               <li><a href="#parse">Parsing a vCard</a>
-                               <p>Parse a vCard from a file and insert to the database.</p></li>
-                               </ul></li>
-                       <li>Speed dials 
-                               <ul>
-                               <li><a href="#sd_create">Creating a Speed Dial</a>
-                               <p>Create a new speed dial.</p></li>
-                               <li><a href="#sd_set">Setting Speed Dial Properties</a>
-                               <p>Set speed dial properties, such as speed dial number and number ID.</p></li>
-                               <li><a href="#sd_insert">Inserting a Speed Dial to the Database</a>
-                               <p>Insert a speed dial to the database.</p></li>
-                               <li><a href="#sd_get">Getting Speed Dials</a>
-                               <p>Retrieve a single speed dial or a list of speed dials.</p></li>
-                               <li><a href="#sd_update">Updating a Speed Dial</a>
-                               <p>Update speed dial details.</p></li>
-                               <li><a href="#sd_delete">Deleting a Speed Dial</a>
-                               <p>Delete the speed dial from the database.</p></li>
-                               </ul></li>
-                       <li>Phone logs  
-                               <ul>
-                               <li><a href="#pl_create">Creating a Log</a>
-                               <p>Create a new log.</p></li>
-                               <li><a href="#pl_set">Setting Log Properties</a>
-                               <p>Set log properties, such as type, time, and address.</p></li>
-                               <li><a href="#pl_insert">Inserting a Log to the Database</a>
-                               <p>Insert a log to the database.</p></li>
-                               <li><a href="#pl_get">Getting Logs</a>
-                               <p>Retrieve single log or a list of logs.</p></li>
-                               <li><a href="#pl_delete">Deleting a Log</a>
-                               <p>Delete the log from the database.</p></li>
-                               </ul>                           
-                       </li></ul>
-               <h2>Follow-up</h2> 
-               <p>Once we have learned the basics of the Contacts API, we can now move on to more advanced tasks, including:</p>
-               <ul>
-                       <li>Records
-                               <ul>
-                               <li><a href="#insert2">Inserting New Records</a>
-                               <p>Add new records to the database.</p></li>
-                               <li><a href="#get2">Getting Record Details</a>
-                               <p>Get information from existing records.</p></li>
-                               <li><a href="#list2">Handling Lists</a>
-                               <p>Iterate, filter, and sort record lists.</p></li>
-                               <li><a href="#delete2">Deleting Records</a>
-                               <p>Remove records from the database.</p></li>
-                               <li><a href="#link2">Linking Persons</a>
-                               <p>Assign several contacts to one person.</p></li>
-                               </ul></li>
-                       <li>Contact settings
-                               <ul>
-                               <li><a href="#settings">Managing Contact Settings</a>
-                               <p>Change the display settings of contacts.</p></li>                            
-                               <li><a href="#sim">Managing Contacts on the SIM Card</a>
-                               <p>Check that the SIM card is initialized and import contacts from the SIM card.</p></li>
-                               </ul></li>
-                       <li>vCard information
-                               <ul>
-                               <li><a href="#import">Importing from vCard</a>
-                               <p>Import contacts from vCard files.</p></li>
-                               <li><a href="#export">Exporting to vCard</a>
-                               <p>Export contacts to vCard files.</p></li>
-                               </ul></li>
-                               </ul>
-             
-
- <h2 id="init" name="init">Initializing Contacts</h2>
-
-<p>To start with the Contact Service:</p>
-<ol><li>                       
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;contacts.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;contacts.h&gt;
-</pre></li>    
-<li>Most of the API functions return error codes, therefore define at the beginning of your code the <span style="font-family: Courier New,Courier,monospace">int</span> type, which is used to store error codes. Each time when a function returns error codes, verify the result of the operation.</li>
-<li><p>Call the <span style="font-family: Courier New,Courier,monospace">contacts_connect()</span> function, which connects your application with the Contact Service. Without this function, you cannot get access to the Contacts database.</p>
-<pre class="prettyprint">int error_code;
-error_code = contacts_connect();
-</pre></li>
-<li>When the Contacts APIs are not needed anymore, you have to disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function:
-<pre class="prettyprint">error_code = contacts_disconnect();
-</pre></li></ol>
-
- <h2 id="create_contact" name="create_contact">Creating a Contact</h2>
-
-<p>Before you insert a record, you need to create a record handle. To create it and assign a new record:</p>
-<pre class="prettyprint">contacts_record_h contact;
-
-error_code = contacts_record_create(_contacts_contact._uri, &amp;contact);
-</pre>
-
-<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_contact._uri</span> to create contact type records.</p>
-<p>This record, however, contains no additional information, like a name or phone number. To add them, you must set contact properties by creating additional records and setting them as child records of the contact record. Note that records created this way are objects in the memory, with <span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variables as their handles. Changes made to these objects are not reflected in the database until your explicit request, using <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span>.</p>
-
- <h2 id="set_contact" name="set_contact">Setting Contact Properties</h2>
-
-<p>To set the contact name, birthday, and phone number:</p>
-<ol><li>Add the contact name.
-<ol type="a"><li>Create a name record:
-<pre class="prettyprint">contacts_record_h name;
-
-error_code = contacts_record_create(_contacts_name._uri, &amp;name);
-</pre></li>
-<li>To set the first name, set the value of a string type property identified by <span style="font-family: Courier New,Courier,monospace">_contacts_name.first</span>.
-<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function is used to set string field values. There are other similar functions for other types, such as integer and double. The <span style="font-family: Courier New,Courier,monospace">name</span> variable is the record handle created above. The second argument – <span style="font-family: Courier New,Courier,monospace">_contacts_name.first</span> – is the property identifier, and the third argument is the value to be assigned.</p></li>
-<li>Set the last name similarly:
-<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.last, &quot;Smith&quot;);
-</pre>
-</li>
-<li>Associate the <span style="font-family: Courier New,Courier,monospace">name</span> record with the <span style="font-family: Courier New,Courier,monospace">contact</span> record, by setting the name as the contact&#39;s child record. In this example, it is achieved using <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span>.
-<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.name, name);
-</pre>
-<p>The second argument (<span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>) is the parent property to which the child record is assigned. See <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view description in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">Contacts</a> API. In the API, the <span style="font-family: Courier New,Courier,monospace">name</span> property is listed as one of the <span style="font-family: Courier New,Courier,monospace">record</span> type properties, which means that other records can be assigned to this property as child records (&quot;single&quot; means that only 1 <span style="font-family: Courier New,Courier,monospace">_contacts_name</span> type child record is allowed). The required type of the child record is specified in the API. </p></li></ol></li>
-<li>Add an image.
-<ol type="a"><li>Create an image record:
-<pre class="prettyprint">contacts_record_h image;
-
-error_code = contacts_record_create(_contacts_image._uri, &amp;image);
-</pre></li>
-<li>To set the image, set the value of a string type property identified by <span style="font-family: Courier New,Courier,monospace">_contacts_image.path</span>:
-<pre class="prettyprint">
-char *resource_path = app_get_resource_path();
-char caller_id_path[1024];
-snprintf(caller_id_path, sizeof(caller_id_path), &quot;%s/caller_id.jpg&quot;, resource_path);
-free(resource_path);
-error_code = contacts_record_set_str(image, _contacts_image.path, caller_id_path);
-</pre></li>
-<li>Set the image record as the contact&#39;s child record:
-<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.image, image);
-</pre></li></ol></li>
-<li>Add an event.
-<p>You can add a birthday event associated with the contact. An event contains the date and the event type, among other properties.</p>
-<ol type="a"><li>Create an event record:
-<pre class="prettyprint">contacts_record_h event;
-
-error_code = contacts_record_create(_contacts_event._uri, &amp;event);
-</pre></li>
-<li>Set the event date. The date is an integer, equal to year * 10000 + month * 100 + day.
-<pre class="prettyprint">int year = 1990;
-int month = 5;
-int day = 21;
-int int_date = year * 10000 + month * 100 + day;
-
-error_code = contacts_record_set_int(event, _contacts_event.date, int_date);
-</pre></li>
-<li>Set the event type to birthday. For available types, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">contacts_event_type_e</a> enumeration.
-<pre class="prettyprint">error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_BIRTH);
-</pre></li>
-<li>If the type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_EVENT_TYPE_CUSTOM</span>, you can set a custom label (see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_event">_contacts_event view</a>).
-<pre class="prettyprint">error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_CUSTOM);
-
-error_code = contacts_record_set_str(event, _contacts_event.label, &quot;Event description&quot;);
-</pre></li>
-<li>Set the event record as the contact&#39;s child record:
-<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.event, event);
-</pre></li></ol></li>
-<li>Add a phone number.
-<p>The phone number is added to a parent record using an alternative method.</p>
-<ol type="a"><li>Create a phone number record and set the <span style="font-family: Courier New,Courier,monospace">number</span> property:
-<pre class="prettyprint">contacts_record_h number;
-
-error_code = contacts_record_create(_contacts_number._uri, &amp;number);
-
-error_code = contacts_record_set_str(number, _contacts_number.number, &quot;+8210-1234-5678&quot;);
-</pre></li>
-<li>Set the number record as the contact&#39;s child record:
-<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.number, number);
-</pre></li></ol></li></ol>
-
- <h2 id="insert_contact" name="insert_contact">Inserting a Contact to the Database</h2>
-
-<p>To insert a contact:</p>
-
-<ol><li><p>When the data is set for the contact and name records, you can insert them into the database. When you insert a parent record, all child records added to it using <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> are inserted automatically.</p>
-
-<p>Insert a contact record:</p>
-
-<pre class="prettyprint">int id = -1;
-
-error_code = contacts_db_insert_record(contact, &amp;id);
-</pre></li>
-<li>When the records are in the database, the objects representing them in the memory are no longer needed and must be destroyed.
-<pre class="prettyprint">contacts_record_destroy(contact, true);</pre>
-<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, child records of the given record (objects representing them in the memory) are also destroyed. This does not depend on the way the child records were added.</p></li></ol>
-
- <h2 id="get_contact" name="get_contact">Getting Contacts</h2>
-
-<p>To retrieve contact records:</p>
-
-<ol><li><p>A person is an aggregation of one or more contacts associated with the same person. The person is created automatically when inserting a contact record. To use the contact information in your application, you must learn to print basic person information.</p>
-
-<p>To get a single person record:</p>
-<ol type="a"><li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">person_id</span>:</p>
-<pre class="prettyprint">contacts_record_h person  = NULL;
-const int person_id = ... // Acquire person ID
-int error_code;
-
-error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);
-</pre></li>
-<li>When you no longer need the person record, destroy the used structures:
-<pre class="prettyprint">
-contacts_record_destroy(speeddial, true);
-</pre></li></ol></li>
-
-<li>To get the total person record list:
-<ol type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
-<pre class="prettyprint">contacts_list_h list = NULL;
-
-error_code = contacts_db_get_all_records(_contacts_person._uri, 0, 0, &amp;list);
-</pre></li>
-<li><p id="iterate_c" name="iterate_c">Iterate the list and read the records.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<ol type="a"><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>  
-  
-<pre class="prettyprint">contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;char* display_name;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_person.display_name, &amp;display_name);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;display_name: %s&quot;, display_name);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-}</pre></li>
-<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_person_data_t</span> structure like below:
-<pre class="prettyprint">contacts_gl_person_data_t *gl_person_data = NULL;
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_person_data = _create_gl_person_data(record);
-&nbsp;&nbsp;&nbsp;// You can get, for example, display name:
-&nbsp;&nbsp;&nbsp;// gl_person_data-&gt;display_name
-
-&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-}</pre></li>
-<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.
-<pre class="prettyprint">typedef struct _contacts_gl_person_data
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;char *default_phone_number;
-&nbsp;&nbsp;&nbsp;contacts_list_h associated_contacts;
-} contacts_gl_person_data_t;
-
-static void _free_gl_person_data(contacts_gl_person_data_t *gl_person_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_person_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_person_data-&gt;display_name);
-&nbsp;&nbsp;&nbsp;free(gl_person_data-&gt;default_phone_number);
-&nbsp;&nbsp;&nbsp;contacts_list_destroy(gl_person_data-&gt;associated_contacts, true);
-&nbsp;&nbsp;&nbsp;free(gl_person_data);
-}
-
-static contacts_gl_person_data_t* _create_gl_person_data(contacts_record_h record)
-{
-&nbsp;&nbsp;&nbsp;contacts_gl_person_data_t *gl_person_data;
-
-&nbsp;&nbsp;&nbsp;gl_person_data = malloc(sizeof(contacts_gl_person_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_person_data, 0x0, sizeof(contacts_gl_person_data_t));
-&nbsp;&nbsp;&nbsp;if (contacts_record_get_int(record, _contacts_person.id, &amp;gl_person_data-&gt;id) != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get person id failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (false == _get_display_name(record, &amp;gl_person_data-&gt;display_name))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_display_name() failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (false == _get_default_phone_number(record, &amp;gl_person_data-&gt;default_phone_number))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_default_phone_number() failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (false == _get_associated_contacts(record, &amp;gl_person_data-&gt;associated_contacts))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_associated_contacts() failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;_print_phone_numbers(gl_person_data-&gt;associated_contacts);
-&nbsp;&nbsp;&nbsp;_print_events(gl_person_data-&gt;associated_contacts);
-
-&nbsp;&nbsp;&nbsp;return gl_person_data;
-}</pre></li>
-<li>Get person details.
-<ul>
-<li>Get the display name.
-<p>Assuming that you have the person record handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span>), you can access the <span style="font-family: Courier New,Courier,monospace">display_name</span> property. You can read the display name property and print it:</p>
-<pre class="prettyprint">static bool _get_display_name(contacts_record_h record, char **display_name)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(record, _contacts_person.display_name, display_name);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;display name: %s&quot;, *display_name);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;return true;
-}</pre></li>
-<li>Get associated contacts.
-<p>You can get the associated contacts of a person by query. In this example, you get the associated contact records.</p>
-<pre class="prettyprint">static bool _get_associated_contacts(contacts_record_h record, contacts_list_h *associated_contacts)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
-&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_person.id, &amp;person_id);
-
-&nbsp;&nbsp;&nbsp;error_code = CONTACTS_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_contact._uri, &amp;query);
-&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_contact._uri, &amp;filter);
-&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_int(filter, _contacts_contact.person_id, CONTACTS_MATCH_EQUAL, person_id);
-&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);
-
-&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, associated_contacts);
-
-&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
-
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;return true;
-}</pre></li>
-<li>Get phone numbers.
-<p>You can get the numbers of a person by iterating the contacts list. In this example, you get all the number records and print them.</p>
-<pre class="prettyprint">static void _print_phone_numbers(contacts_list_h associated_contacts)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;contacts_record_h contact;
-&nbsp;&nbsp;&nbsp;if (NULL == associated_contacts) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;associated_contacts is NULL&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(associated_contacts, &amp;contact) == CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_count(contact, _contacts_contact.number, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != error_code) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_record_get_child_record_count(%d)&quot;, error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h number = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.number, i, &amp;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int number_id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(number, _contacts_number.id, &amp;number_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;number id: %d&quot;, number_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *number_str = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(number, _contacts_number.number, &amp;number_str);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;number: %s&quot;, number_str);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(associated_contacts);
-&nbsp;&nbsp;&nbsp;}
-}</pre></li>
-<li>Get the default phone number.
-<p>If a contact has multiple phone numbers, one of them is defined as the default phone number. A person also has a default phone number. You can get the default phone number of a person by query. The Contact Service provides the <span style="font-family: Courier New,Courier,monospace">_contacts_person_number</span> view for getting the default phone number of a person. In the default phone number record, the <span style="font-family: Courier New,Courier,monospace">is_primary_default</span> property value is <span style="font-family: Courier New,Courier,monospace">true</span>. This example shows how to get the default phone number of a person by query.</p>
-<pre class="prettyprint">static bool _get_default_phone_number(contacts_record_h record, char **default_phone_number)
-{
-&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
-&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
-&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;
-&nbsp;&nbsp;&nbsp;contacts_record_h record_person_number = NULL;
-&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;int error_code = CONTACTS_ERROR_NONE;
-
-&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_int(record, _contacts_person.id, &amp;person_id);
-
-&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_person_number._uri, &amp;query);
-&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_person_number._uri, &amp;filter);
-&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_bool(filter, _contacts_person_number.is_primary_default, true);
-&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);
-&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, &amp;list);
-&nbsp;&nbsp;&nbsp;error_code += contacts_list_get_current_record_p(list, &amp;record_person_number);
-
-&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_str(record_person_number, _contacts_person_number.number, default_phone_number);
-
-&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);
-&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
-
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;return true;
-}</pre></li>
-<li>Get events.
-<p>You can get the events by iterating the contacts list.</p>
-<pre class="prettyprint">static void _print_events(contacts_list_h associated_contacts)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;contacts_record_h contact;
-&nbsp;&nbsp;&nbsp;if (NULL == associated_contacts) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;associated_contacts is NULL&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(associated_contacts, &amp;contact) == CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_count(contact, _contacts_contact.event, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != error_code) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_record_get_child_record_count(%d)&quot;, error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h event = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, i, &amp;event);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int event_id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(event, _contacts_event.id, &amp;event_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;event id: %d&quot;, event_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int date;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(event, _contacts_event.date, &amp;date);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;event: %d&quot;, date);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(associated_contacts);
-&nbsp;&nbsp;&nbsp;}
-}</pre></li></ul></li></ol></li>
-<li>When you no longer need the person record, destroy the used structures:
-<pre class="prettyprint">
-contacts_list_destroy(list, true);</pre>
-</li></ol></li>
-       <li>To get the filtered person record list:
-       <ol type="a">
-               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function to filter the list with parameters:
-               <ol type="a">
-                       <li>To get a person list with filtering, create a record list and a query:
-                       <pre class="prettyprint">
-contacts_list_h list = NULL;
-contacts_query_h query = NULL;
-
-error_code = contacts_query_create(_contacts_person._uri, &amp;query);
-</pre>
-                       </li>
-                       <li>Create a filter:
-                       <pre class="prettyprint">
-contacts_filter_h filter = NULL;
-
-error_code = contacts_filter_create(_contacts_person._uri, &amp;filter);
-</pre>
-                       </li>
-                       <li>Add a condition, such as display_name:
-                       <pre class="prettyprint">
-error_code = contacts_filter_add_str(filter, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;John&quot;);
-</pre>
-                       </li>
-                       <li>To add multiple conditions, you must define an operator between the conditions:
-                       <pre class="prettyprint">
-error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
-
-error_code = contacts_filter_add_bool(filter, _contacts_person.is_favorite, true);
-</pre>
-                       </li>
-                       <li>Connect the query with the list:
-                       <pre class="prettyprint">
-error_code = contacts_query_set_filter(query, filter);
-
-error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
-</pre>
-
-                       <p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p>
-                       </li>
-                       <li>Free the filter and query:
-                       <pre class="prettyprint">
-contacts_filter_destroy(filter);
-contacts_query_destroy(query);
-</pre>
-                       </li>
-               </ol>
-               </li>
-               <li><a href="#iterate_c">Iterate the list and read the records.</a></li>
-               <li>When you no longer need the person record, destroy the used structures:
-               <pre class="prettyprint">
-contacts_list_destroy(list, true);
-</pre>
-               </li>
-       </ol>
-       </li>
-       <li>To get the searched person record list:
-       <ol type="a">
-               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function.
-               <p>The Contact Service provides an API for the contact search. The <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function provides an easy way to find records based on a given keyword. The following example shows how to find the contact records which contain the &quot;John&quot; keyword:</p>
-
-               <pre class="prettyprint">
-contacts_list_h list = NULL;
-
-error_code = contacts_db_search_records(_contacts_person._uri, &quot;John&quot;, 0, 0, &amp;list);
-</pre>
-               </li>
-               <li><a href="#iterate_c">Iterate the list and read the records.</a></li>
-               <li>When you no longer need the person record, destroy the used structures:
-               <pre class="prettyprint">
-contacts_list_destroy(list, true);
-</pre>
-               </li>
-       </ol>
-       </li>
-</ol>
-
- <h2 id="update_contact" name="update_contact">Updating a Contact</h2>
-
-<p>To change the name, birthday, and phone number of an existing contact:</p>
-<ol><li>Get the contact.
-<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the contact ID:</p>
-<pre class="prettyprint">int contact_id = ... // Acquire contact ID
-contacts_record_h contact = NULL;
-
-error_code = contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact);
-</pre>
-<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p></li>
-<li>Change the name.
-<ol type="a"><li><p>To modify the contact name, get the name record with the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function, which provides a list of the child records of a given type.</p>
-<pre class="prettyprint">contacts_record_h name = NULL;
-
-error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name, 0, &amp;name);
-</pre>
-
-<p>The function parameters are the parent record, the child record type, a child record index, and the resulting child record. Since there can be only one child record of type <span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>, the index is set to 0 to get the first (and only) child record.</p></li>
-
-<li>Change the first name:
-<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.first, &quot;Mark&quot;);
-</pre>
-<p>This only changes the data in the memory object, not in the database. To insert the new value, the <span style="font-family: Courier New,Courier,monospace">name</span> record must be inserted. However, if you acquire this record using <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> (as in this example), you only need to update the parent record.</p></li></ol></li>
-<li>Change the birthday event.
-<ol type="a"><li>If only 1 event is set for the contact, you can call <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> to get the event record. If there are more events, you must iterate over the child records.
-<pre class="prettyprint">contacts_record_h event = NULL;
-error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, 0, &amp;event);
-</pre></li>
-
-<li>Update the record:
-<pre class="prettyprint">int new_date = 1990 * 10000 + 6 * 100 + 21;
-
-error_code = contacts_record_set_int(event, _contacts_event.date, new_date);
-</pre></li></ol></li>
-<li>Update the contact record.
-<p>Update the contact. Any changes in the child records (such as name and birthday) are also inserted.</p>
-<pre class="prettyprint">error_code = contacts_db_update_record(contact);
-</pre></li>
-<li>When the record handle is no more needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory:
-<pre class="prettyprint">contacts_record_destroy(contact, true);</pre></li></ol>
-
- <h2 id="delete_contact" name="delete_contact">Deleting a Person</h2>
-
-<p>To delete a person, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_person._uri</span> as the first parameter and the person ID as the second one:</p>
-<pre class="prettyprint">int person_id = ... // Acquire person ID
-
-error_code = contacts_db_delete_record(_contacts_person._uri, person_id);
-</pre>
-
- <h2 id="link_contact" name="link_contact">Linking and Unlinking Contacts</h2>
-
-<p>To link and unlink contacts (manually and automatically):</p>
-<ul><li>To link a person to another person manually, call the <span style="font-family: Courier New,Courier,monospace">contacts_person_link_person()</span> function with base person ID as the first parameter and another person ID as the second one.
-<pre class="prettyprint">int person_id1 = ... // Acquire base person ID
-int person_id2 = ... // Acquire another person ID
-
-error_code = contacts_person_link_person(person_id1, person_id2);
-</pre></li>
-<li>To link a contact automatically to a person when creating, set the <span style="font-family: Courier New,Courier,monospace">link_mode</span> property to <span style="font-family: Courier New,Courier,monospace">CONTACTS_CONTACT_LINK_MODE_NONE</span> when inserting.
-<p>The Contact Service determines the link based on the <span style="font-family: Courier New,Courier,monospace">number</span> and <span style="font-family: Courier New,Courier,monospace">email</span> properties. If the links leads to  a contact in the same address book, the link does not work.</p>
-<pre class="prettyprint">contacts_record_h contact = NULL;
-
-error_code = CONTACTS_ERROR_NONE;
-error_code += contacts_record_create(_contacts_contact._uri, &amp;contact);
-error_code += contacts_record_set_int(contact, _contacts_contact.link_mode, CONTACTS_CONTACT_LINK_MODE_NONE);
-
-contacts_record_h name = NULL;
-error_code += contacts_record_create(_contacts_name._uri, &amp;name);
-error_code += contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);
-error_code += contacts_record_add_child_record(contact, _contacts_contact.name, name);
-
-contacts_record_h number = NULL;
-error_code += contacts_record_create(_contacts_number._uri, &amp;number);
-error_code += contacts_record_set_str(number, _contacts_number.number, &quot;+8210-1234-5678&quot;);
-error_code += contacts_record_add_child_record(contact, _contacts_contact.number, number);
-
-// Contact is linked automatically if an existing person has the same number in a different address book
-error_code += contacts_db_insert_record(contact, NULL);
-
-contacts_record_destroy(contact, true);</pre></li>
-<li>To unlink a contact from a person, call the <span style="font-family: Courier New,Courier,monospace">contacts_person_unlink_contact()</span> function with the base person ID as the first parameter and the contact ID as the second one. A new person is created when unlinking. You can get the new person ID as the third parameter.
-<pre class="prettyprint">int person_id = ... // Acquire base person ID
-int contact_id = ... // Acquire contact ID
-int unlinked_person_id;
-
-error_code = contacts_person_unlink_contact(person_id, contact_id, &amp;unlinked_person_id);
-</pre></li></ul>
-
- <h2 id="manage_contact" name="manage_contact">Managing Favorites</h2>
-
-<p>To manage person favorites:</p>
-<ul><li>To set a person as favorite when creating a contact, use the <span style="font-family: Courier New,Courier,monospace">is_favorite</span> property of the <span style="font-family: Courier New,Courier,monospace">person</span> record. If the property is set to <span style="font-family: Courier New,Courier,monospace">true</span> when creating a contact, the person is set as favorite:
-<pre class="prettyprint">contacts_record_h contact = NULL;
-
-error_code = CONTACTS_ERROR_NONE;
-error_code += contacts_record_create(_contacts_contact._uri, &amp;contact);
-error_code += contacts_record_set_bool(contact, _contacts_contact.is_favorite, true);
-// Set other properties
-
-// New person is set as favorite
-error_code += contacts_db_insert_record(contact, NULL);
-
-contacts_record_destroy(contact, true);</pre></li>
-<li>To set an existing person as favorite, update the <span style="font-family: Courier New,Courier,monospace">person</span> record:
-<pre class="prettyprint">int person_id = ... // Acquire person ID
-contacts_record_h person = NULL;
-
-error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);
-
-error_code = contacts_record_set_bool(person, _contacts_person.is_favorite, true);
-
-error_code = contacts_db_update_record(person);
-
-contacts_record_destroy(person, true);</pre></li>
-<li>To unset a favorite:
-<pre class="prettyprint">int person_id = ... // Acquire person ID
-contacts_record_h person = NULL;
-
-error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);
-
-error_code = contacts_record_set_bool(person, _contacts_person.is_favorite, false);
-
-error_code = contacts_db_update_record(person);
-
-contacts_record_destroy(person, true);</pre></li></ul>
-
- <h2 id="monitor_contact" name="monitor_contact">Monitoring Person Changes</h2>
-
-<p>To register a callback function to listen for person changes:</p>
-<ol><li>Register the callback function.
-<pre class="prettyprint">error_code = contacts_db_add_changed_cb(_contacts_person._uri, _person_changed_callback, NULL);
-</pre></li>
-<li>Define the callback function.
-<p>The callback function is called when the person data changes. The code below shows how to update person details in the callback function.</p>
-<pre class="prettyprint">static contacts_gl_person_data_t *_gl_person_data = ...
-void _person_changed_callback(const char *view_uri, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _contacts_person._uri))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;if (_gl_person_data == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;int person_id = _gl_person_data-&gt;id;
-&nbsp;&nbsp;&nbsp;_free_gl_person_data(_gl_person_data);
-&nbsp;&nbsp;&nbsp;_gl_person_data = NULL;
-
-&nbsp;&nbsp;&nbsp;contacts_record_h record = NULL;
-&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;record);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;_gl_person_data = _create_gl_person_data(record);
-&nbsp;&nbsp;&nbsp;// Use _gl_person_data
-
-&nbsp;&nbsp;&nbsp;contacts_record_destroy(record, true);
-}</pre></li></ol>
-
- <h2 id="create" name="create">Creating a Group</h2>
-
-<p>To create a new group record:</p>
-<pre class="prettyprint">contacts_record_h group = NULL;
-
-error_code = contacts_record_create(_contacts_group._uri, &amp;group);
-</pre>
-
- <h2 id="set" name="set">Setting Group Properties</h2>
-
-<p>To set group properties:</p>
-
-<ol><li>Set the group name.
-<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function sets the name of the group when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_group.name</span>. This function takes the group record handle as the first argument, and the name, which is a string value, as the third argument. The name argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service if needed.</p>
-<pre class="prettyprint">error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Neighbors&quot;);
-</pre></li>
-<li>Set an image and ringtone path.
-<p>You can set the other properties similarly. To set the image and ringtone path, call the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function and check the error codes.</p>
-<pre class="prettyprint">
-char *resource_path = app_get_resource_path();
-char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/group_image.jpg&quot;, resource_path);
-error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);
-snprintf(temp_path, sizeof(temp_path), &quot;%s/ringtone.mp3&quot;, resource_path);
-free(resource_path);
-error_code = contacts_record_set_str(group, _contacts_group.ringtone_path, temp_path);
-</pre></li></ol>
-
- <h2 id="insert" name="insert">Inserting a Group to the Database</h2>
-
-<p>To insert a group record:</p>
-<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created group into the Contacts database.
-<p> The first argument is the group record handle, the second is the record ID. A unique ID is assigned to the record your are adding, and is returned as the third argument of the called function. If the group is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.</p>
-<pre class="prettyprint">int added_group_id = -1;
-
-error_code = contacts_db_insert_record(group, &amp;added_group_id);
-</pre></li>
-<li>After inserting, the used structures have to be destroyed:
-<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol>
-
- <h2 id="get" name="get">Getting Groups</h2>
-
-<p>To get all of the group records one by one, or to filter them by one of the properties:</p>
-
-<ol><li>To get a single group record:
-<ol type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">group_id</span>:</p>
-<pre class="prettyprint">contacts_record_h group;
-int group_id = ... // Acquire group ID
-error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);
-</pre></li>
-<li>When you no longer need the group record, destroy the used structures:
-
-<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol></li>
-
-<li>To get the total group record list:
-<ol type="a"><li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
-<pre class="prettyprint">contacts_list_h list = NULL;
-error_code = contacts_db_get_all_records(_contacts_group._uri, 0, 0, &amp;list);
-</pre></li>
-
-<li>To iterate the list and read the records:
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-               <ol type="a">
-                       <li>
-                       <p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
-
-                       <pre class="prettyprint">
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;char* name;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_group.name, &amp;name);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, "group name: %s", name);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre>
-                       </li>
-                       <li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_group_data_t</span> structure like below:
-                       <pre class="prettyprint">
-contacts_gl_group_data_t *gl_group_data = NULL;
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_group_data = _create_gl_group_data(record);
-&nbsp;&nbsp;&nbsp;// You can get, for example, display name:
-&nbsp;&nbsp;&nbsp;// gl_group_data-&gt;name
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre>
-                       </li>
-                       <li>The memory for the record data is allocated, and the data is copied from the record by the functions listed in the following snippet:
-                       <pre class="prettyprint">
-typedef struct _contacts_gl_group_data
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;char *name;
-&nbsp;&nbsp;&nbsp;char *image_path;
-&nbsp;&nbsp;&nbsp;char *ringtone_path;
-} contacts_gl_group_data_t;
-
-static void _free_gl_group_data(contacts_gl_group_data_t *gl_group_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_group_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;name);
-&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;image_path);
-&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;ringtone_path);
-&nbsp;&nbsp;&nbsp;free(gl_group_data);
-}
-
-static contacts_gl_group_data_t* _create_gl_group_data(contacts_record_h record)
-{
-&nbsp;&nbsp;&nbsp;contacts_gl_group_data_t *gl_group_data;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;gl_group_data = malloc(sizeof(contacts_gl_group_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));
-
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_group.id, &amp;gl_group_data-&gt;id))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.name, &amp;gl_group_data-&gt;name))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.image_path, &amp;gl_group_data-&gt;image_path))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.ringtone_path, &amp;gl_group_data-&gt;ringtone_path))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return gl_group_data;
-}</pre>
-                       </li>
-               </ol>
-               </li>
-               <li>When you no longer need the group record, destroy the used structures:
-               <pre class="prettyprint">
-contacts_list_destroy(list, true);
-</pre>
-               </li>
-       </ol>
-       </li>
-       <li>To get the filtered group record list:
-       <ol type="a">
-               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function to filter the list with parameters:
-               <ol type="a">
-<li>To get groups with filtering, you need a record list and a query:
-<pre class="prettyprint">contacts_list_h list = NULL;
-contacts_query_h query = NULL;
-
-error_code = contacts_query_create(_contacts_group._uri, &amp;query);
-</pre></li>
-<li>Before getting the groups, filter the list. There is a possibility to filter based on various parameters. To create a filter, the following code is used:
-<pre class="prettyprint">contacts_filter_h filter = NULL;
-
-error_code = contacts_filter_create(_contacts_group._uri, &amp;filter);
-</pre></li>
-<li>Add a condition, such as group name:
-<pre class="prettyprint">error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, &quot;neighbors&quot;);
-</pre>
-<p>That way only groups which contain the name &quot;neighbors&quot; are retrieved. To use multiple conditions, add an operator between them:</p>
-<pre class="prettyprint">error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
-
-error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, &quot;friend&quot;);
-</pre></li>
-<li>Connect the query with the list:
-<pre class="prettyprint">error_code = contacts_query_set_filter(query, filter);
-
-error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
-</pre>
-<p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>
-<li>Free the filter and query:
-<pre class="prettyprint">
-contacts_filter_destroy(filter);
-contacts_query_destroy(query);
-</pre></li>
-</ol></li>
-<li>To iterate the list and read the records:
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<ol type="a"><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
-
-<pre class="prettyprint">contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;char* name;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_group.name, &amp;name);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;group name: %s&quot;, name);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre></li>
-<li><p>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_group_data_t</span> structure like below: </p>
-<pre class="prettyprint">contacts_gl_group_data_t *gl_group_data = NULL;
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_group_data = _create_gl_group_data(record);
-&nbsp;&nbsp;&nbsp;// You can get, for example, display name:
-&nbsp;&nbsp;&nbsp;// gl_group_data-&gt;name
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre></li>
-<li><p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>
-<pre class="prettyprint">typedef struct _contacts_gl_group_data
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;char *name;
-&nbsp;&nbsp;&nbsp;char *image_path;
-&nbsp;&nbsp;&nbsp;char *ringtone_path;
-} contacts_gl_group_data_t;
-
-static void _free_gl_group_data(contacts_gl_group_data_t *gl_group_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_group_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;name);
-&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;image_path);
-&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;ringtone_path);
-&nbsp;&nbsp;&nbsp;free(gl_group_data);
-}
-
-static contacts_gl_group_data_t* _create_gl_group_data(contacts_record_h record)
-{
-&nbsp;&nbsp;&nbsp;contacts_gl_group_data_t *gl_group_data;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;gl_group_data = malloc(sizeof(contacts_gl_group_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));
-
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_group.id, &amp;gl_group_data-&gt;id))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.name, &amp;gl_group_data-&gt;name))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.image_path, &amp;gl_group_data-&gt;image_path))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.ringtone_path, &amp;gl_group_data-&gt;ringtone_path))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return gl_group_data;
-}</pre></li></ol></li>
-<li>When you no longer need the group record, destroy the used structures:
-<pre class="prettyprint">
-contacts_list_destroy(list, true);</pre>
-</li></ol></li></ol>
-
- <h2 id="update" name="update">Updating a Group</h2>
-
-<p>To change the name and image of an existing person:</p>
-<ol><li>Get the group.
-<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h type</span> variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the group ID:</p>
-<pre class="prettyprint">int group_id = ... // Acquire group ID
-contacts_record_h group = NULL;
-
-error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);
-</pre>
-<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>
-</li>
-<li>Change the name and image.
-<p>Change the name and image property using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function.</p>
-<pre class="prettyprint">error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Family&quot;);
-char *resource_path = app_get_resource_path();
-char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/group_image_new.jpg&quot;, resource_path);
-free(resource_path);
-error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);
-</pre></li>
-
-<li>Update the group record.
-<p>Update the group. The above changes (name and image) are also inserted.</p>
-<pre class="prettyprint">error_code = contacts_db_update_record(group);
-</pre></li>
-<li>Clean up.
-<p>When the record handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory.</p>
-<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol>
-
- <h2 id="delete" name="delete">Deleting a Group</h2>
-
-<p>To delete a group, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span> as the first parameter and group ID as the second one;</p>
-<pre class="prettyprint">int group_id = ... // Acquire group ID
-
-error_code = contacts_db_delete_record(_contacts_group._uri, group_id);
-</pre>
-
- <h2 id="manage" name="manage">Managing Group Members</h2>
-
-<p>To manage group members:</p>
-
-<ul><li>To add a group member, you need to know the contact ID and the group ID. Then you need to call <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span>.
-<pre class="prettyprint">int contact_id = ... // Acquire contact ID
-int group_id = ... // Acquire group ID
-
-error_code = contacts_group_add_contact(group_id, contact_id);
-</pre></li>
-<li>To remove a contact from a group, call <span style="font-family: Courier New,Courier,monospace">contacts_group_remove_contact()</span>.
-<pre class="prettyprint">
-error_code = contacts_group_remove_contact(group_id, contact_id);
-</pre></li>
-
-<li>To get a list of persons assigned to a specific group:
-<ol><li>Get the records of type <span style="font-family: Courier New,Courier,monospace">_contacts_person_group_assigned</span>:
-<pre class="prettyprint">
-contacts_query_h query = NULL;
-contacts_filter_h filter = NULL;
-contacts_list_h list = NULL;
-
-contacts_query_create(_contacts_person_group_assigned._uri, &amp;query);
-contacts_filter_create(_contacts_person_group_assigned._uri, &amp;filter);
-contacts_filter_add_int(filter, _contacts_person_group_assigned.group_id, CONTACTS_MATCH_EQUAL, group_id);
-contacts_query_set_filter(query, filter);
-contacts_db_get_records_with_query(query, 0, 0, &amp;list);</pre></li>
-<li>Iterate over the list elements.
-<pre class="prettyprint">contacts_record_h person = NULL;
-int error_code;
-
-while (contacts_list_get_current_record_p(list, &amp;person) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;contacts_record_get_int(person, _contacts_person_group_assigned.person_id, &amp;person_id);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Person id: %d&quot;, person_id);
-
-&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(person, _contacts_person_group_assigned.display_name, &amp;display_name);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Display name: %s&quot;, display_name);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}</pre></li>
-<li>Destroy the filter, query, and list handles when no longer needed.
-<pre class="prettyprint">contacts_list_destroy(list, true);
-contacts_filter_destroy(filter);
-contacts_query_destroy(query);</pre></li></ol></li></ul>
-
- <h2 id="monitor" name="monitor">Monitoring Group Changes</h2>
-
-<p>To register a callback function to listen for group changes:</p>
-<ol><li>Register the callback function.
-<p>The code below shows how to register a callback function to listen for group changes.</p>
-<pre class="prettyprint">error_code = contacts_db_add_changed_cb(_contacts_group._uri, _group_changed_callback, NULL);
-</pre></li>
-<li>Define the callback function.
-<p>The callback function is called when the group data changes. The code below shows how to update the group details in the callback function.</p>
-<pre class="prettyprint">static contacts_gl_group_data_t *_gl_group_data = ...
-static void _group_changed_callback(const char *view_uri, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _contacts_group._uri))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;if (_gl_group_data == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;int group_id = _gl_group_data-&gt;id;
-&nbsp;&nbsp;&nbsp;_free_gl_group_data(_gl_group_data);
-&nbsp;&nbsp;&nbsp;_gl_group_data = NULL;
-
-&nbsp;&nbsp;&nbsp;contacts_record_h record = NULL;
-&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;record);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;_gl_group_data = _create_gl_group_data(record);
-&nbsp;&nbsp;&nbsp;// Use _gl_group_data
-
-&nbsp;&nbsp;&nbsp;contacts_record_destroy(record, true);
-}</pre></li></ol>
-
- <h2 id="make" name="make">Making a vCard</h2>
-
-<p>To make a vCard stream from a person record:</p>
-<ol><li>Get the person record by the person ID.
-<pre class="prettyprint">int person_id = ... // Acquire person ID
-
-contacts_record_h record = NULL;
-error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;record);
-</pre></li>
-<li>Make the vCard stream by the person record.
-<pre class="prettyprint">char *vcard_stream = NULL;
-error_code = contacts_vcard_make_from_person(record, &amp;vcard_stream);
-</pre>
-
-    <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Contact Service API allows you to make a vCard stream from a person, contact, and my profile records:
-<pre class="prettyprint">int contacts_vcard_make_from_person(contacts_record_h person, char **vcard_stream);
-int contacts_vcard_make_from_contact(contacts_record_h contact, char **vcard_stream);
-int contacts_vcard_make_from_my_profile(contacts_record_h my_profile, char **vcard_stream);</pre>
-</td>
-    </tr>
-   </tbody>
-  </table> </li>
-
-<li>Destroy the handle when it is no longer needed.
-<pre class="prettyprint">free(vcard_stream);
-contacts_record_destroy(record, true);</pre>
- </li>   </ol>
-
- <h2 id="parse" name="parse">Parsing a vCard</h2>
-
-<p>To parse a vCard from a file and insert to the database:</p>
-<pre class="prettyprint">
-char *resource_path = app_get_resource_path();
-char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/vcard.vcf&quot;, resource_path);
-free(resource_path);
-error_code = contacts_vcard_parse_to_contact_foreach(temp_path, // File path of vCard
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_vcard_parse_cb, // Callback function to invoke
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL); // User data to be passed to the callback function
-</pre>
-
-<p>The vCard stream contains multiple contact objects. The callback function is called after parsing each contact. If you return <span style="font-family: Courier New,Courier,monospace">false</span> on the callback function, parsing stops.</p>
-<pre class="prettyprint">static bool _vcard_parse_cb(contacts_record_h contact, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == contact)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;int contact_id = -1;
-&nbsp;&nbsp;&nbsp;error_code = contacts_db_insert_record(contact, &amp;contact_id);
-&nbsp;&nbsp;&nbsp;// Use the contact record
-
-&nbsp;&nbsp;&nbsp;return true;
-}</pre>
-
-
- <h2 id="sd_create" name="sd_create">Creating a Speed Dial</h2>
-
-<p>To create a speed dial record:</p>
-<pre class="prettyprint">
-contacts_record_h speeddial;
-error_code = contacts_record_create(_contacts_speeddial._uri, &amp;speeddial);
-</pre>
-<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> to create speed dial type records.</p>
-
- <h2 id="sd_set" name="sd_set">Setting Speed Dial Properties</h2>
-
-<p>To set speed dial properties:</p>
-<ol>
-<li>Set the speed dial number.
-<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function sets the speed dial type when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial.speeddial_number</span>. This function takes the speed dial record handle as the first argument, and the speed dial number, which is an integer value, as the third argument. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, or disconnecting from the service.</p>
-<pre class="prettyprint">
-int speeddial_number = ... // Acquire speed dial number
-error_code = contacts_record_set_int(speeddial, _contacts_speeddial.speeddial_number, speeddial_number);
-</pre>
-</li>
-
-<li>Set the number ID:
-<pre class="prettyprint">
-int number_id = ... // Acquire number id
-error_code = contacts_record_set_int(speeddial, _contacts_speeddial. number_id, number_id);
-</pre>
-</li>
-</ol>
-
-    <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">This tutorial does not describe how to insert a number. For more information, see the <a href="contact_tutorial_n.htm">Contact Tutorial</a>.</td>
-    </tr>
-   </tbody>
-  </table>
-  
- <h2 id="sd_insert" name="sd_insert">Inserting a Speed Dial to the Database</h2>
-
-<p>To insert a speed dial record:</p>
-<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created speed dial into the Contacts database. The first argument is the speed dial record handle, the second is the speed dial number. If the speed dial is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.
-<pre class="prettyprint">
-int added_speeddial_id = -1;
-
-error_code = contacts_db_insert_record(speeddial, &amp;added_speeddial_id);    
-</pre>
-</li>
-
-<li>After inserting the speed dial record, destroy the used structures:
-<pre class="prettyprint">
-contacts_record_destroy(speeddial, true);
-</pre>
-</li>
-</ol>
-
- <h2 id="sd_get" name="sd_get">Getting Speed Dials</h2>
-
-<p>To get all of the speed dial records one by one, or to filter them by one of the properties:</p>
-<ol>
-<li>To get a single speed dial record:
-<ol type="a">
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">speeddial_id</span>:</p>
-<pre class="prettyprint">
-contacts_record_h speeddial;
-int speeddial_id = ... // Acquire speed dial ID
-error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_id, &amp;speeddial);
-</pre>
-</li>
-
-<li>After finish using the speed dial record, destroy the used structures:
-
-<pre class="prettyprint">contacts_record_destroy(speeddial, true);</pre></li></ol></li>
-
-<li>To get the total speed dial record list:
-<ol type="a"><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:
-<pre class="prettyprint">
-contacts_list_h list = NULL;
-error_code = contacts_db_get_all_records(_contacts_speeddial._uri, 0, 0, &amp;list);
-</pre>
-</li>
-
-<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.
-               
-         <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
-    </tr> 
-   </tbody> 
-  </table>     
-               
-
-               <pre class="prettyprint">
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;int number;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;number);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;speed dial number: %d&quot;, number);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}
-</pre>
-
-               <p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_speeddial_data_t</span> structure:</p>
-
-               <pre class="prettyprint">
-contacts_gl_speeddial_data_t *gl_speeddial_data = NULL;
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_speeddial_data = _create_gl_speeddial_data(record);
-
-&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}
-</pre>
-
-               <p>The memory for the record data is allocated, and the data is copied from the record by the functions shown in the following snippet:</p>
-
-               <pre class="prettyprint">
-typedef struct _contacts_gl_speeddial_data
-{
-&nbsp;&nbsp;&nbsp;int speeddial_number;
-&nbsp;&nbsp;&nbsp;char *number;
-&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;char *image_thumbnail_path;
-} contacts_gl_speeddial_data_t;
-
-static void _free_gl_speeddial_data(contacts_gl_speeddial_data_t *gl_speeddial_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_speeddial_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;number);
-&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;display_name);
-&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;image_thumbnail_path);
-&nbsp;&nbsp;&nbsp;free(gl_speeddial_data);
-}
-
-static contacts_gl_speeddial_data_t* _create_gl_speeddial_data(contacts_record_h record)
-{
-&nbsp;&nbsp;&nbsp;contacts_gl_speeddial_data_t *gl_speeddial_data;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));
-
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;gl_speeddial_data-&gt;speeddial_number))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.number, &amp;gl_speeddial_data-&gt;number))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.display_name, &amp;gl_speeddial_data-&gt;display_name))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.image_thumbnail_path, &amp;gl_speeddial_data-&gt;image_thumbnail_path))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return gl_speeddial_data;
-}
-</pre>
-               </li>
-               <li>After you no longer need the speed dial record, destroy the used structures:
-               <pre class="prettyprint">
-contacts_list_destroy(list, true);</pre>
-               </li>
-       </ol>
-       </li>
-       <li>To get the filtered speed dial record list:
-       <ol type="a">
-               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function.
-               <ol type="a">
-                       <li>Create a record list and query:
-
-       <pre class="prettyprint">
-contacts_list_h list = NULL;
-contacts_query_h query = NULL;
-
-error_code = contacts_query_create(_contacts_speeddial._uri, &amp;query);
-</pre>
-       </li>
-       <li>Filter the list before getting the speed dials. It is possible to filter with various parameters. To create a filter:
-       <pre class="prettyprint">
-contacts_filter_h filter = NULL;
-
-error_code = contacts_filter_create(_contacts_speeddial._uri, &amp;filter);
-</pre>
-       </li>
-
-       <li>Add a condition, such as the speed dial number.
-       <p>The following example retrieves only those speed dials whose numbers are less than 3.</p>
-       <pre class="prettyprint">
-error_code = contacts_filter_add_int(filter, _contacts_speeddial.speeddial_number, CONTACTS_MATCH_LESS_THAN, 3);
-</pre>
-       <p>To use multiple conditions, add an operator between them:</p>
-       <pre class="prettyprint">
-error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
-
-error_code = contacts_filter_add_int(filter, _contacts_speeddial.speeddial_number, CONTACTS_MATCH_GREATER_THAN, 15);
-</pre>
-       </li>
-
-       <li>Connect the query with the list: 
-       <pre class="prettyprint">
-error_code = contacts_query_set_filter(query, filter);
-
-error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
-</pre>
-       <p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p>
-       </li>
-
-<li>Free the filter and query: 
-<pre class="prettyprint">
-contacts_filter_destroy(filter);
-contacts_query_destroy(query);
-</pre>
-</li>
-</ol>
-</li>
-
-<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<pre class="prettyprint">
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;int number;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;number);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;speed dial number: %d&quot;, number);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}
-</pre>
-
-<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_speeddial_data_t</span> structure:</p>
-<pre class="prettyprint">
-contacts_gl_speeddial_data_t *gl_speeddial_data = NULL;
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_speeddial_data = _create_gl_speeddial_data(record);
-
-&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}
-</pre>
-<p>The memory for the record data is allocated, and the data is copied from the record by the functions shown in the following snippet.</p>
-<pre class="prettyprint">
-typedef struct _contacts_gl_speeddial_data
-{
-&nbsp;&nbsp;&nbsp;int speeddial_number;
-&nbsp;&nbsp;&nbsp;char *number;
-&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;char *image_thumbnail_path;
-} contacts_gl_speeddial_data_t;
-
-static void _free_gl_speeddial_data(contacts_gl_speeddial_data_t *gl_speeddial_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_speeddial_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;number);
-&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;display_name);
-&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;image_thumbnail_path);
-&nbsp;&nbsp;&nbsp;free(gl_speeddial_data);
-}
-
-static contacts_gl_speeddial_data_t* _create_gl_speeddial_data(contacts_record_h record)
-{
-&nbsp;&nbsp;&nbsp;contacts_gl_speeddial_data_t *gl_speeddial_data;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));
-
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;gl_speeddial_data-&gt;speeddial_number))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.number, &amp;gl_speeddial_data-&gt;number))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.display_name, &amp;gl_speeddial_data-&gt;display_name))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.image_thumbnail_path, &amp;gl_speeddial_data-&gt;image_thumbnail_path))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return gl_speeddial_data;
-}
-</pre>
-</li>
-<li>When you no longer need the speed dial record, destroy the used structures:
-<pre class="prettyprint">
-contacts_list_destroy(list, true);</pre></li>
-</ol></li></ol>
-
- <h2 id="sd_update" name="sd_update">Updating a Speed Dial</h2>
-
-<p>To change the number ID of an existing speed dial:</p>
-<ol>
-<li>Get the speed dial. 
-<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the speed dial number:</p>
-<pre class="prettyprint">
-int speeddial_number = ... // Acquire speed dial number
-contacts_record_h speeddial = NULL;
-
-error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_number, &amp;speeddial);
-</pre>
-
-<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>
-</li>
-
-<li>Change the number ID by setting the <span style="font-family: Courier New,Courier,monospace">number_id</span> property using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function:
-<pre class="prettyprint">
-int number_id = ... // Acquire number id
-error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id, number_id);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);
-</pre>
-</li>
-
-<li>Update the speed dial record. 
-<p>Update the speed dial. The above changes (<span style="font-family: Courier New,Courier,monospace">number_id</span>) are also inserted.</p>
-<pre class="prettyprint">
-error_code = contacts_db_update_record(speeddial);
-</pre>
-</li>
-
-<li>Clean up. 
-<p>When the record handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory.</p>
-<pre class="prettyprint">
-contacts_record_destroy(speeddial, true);
-</pre>
-</li>
-</ol>
-
- <h2 id="sd_delete" name="sd_delete">Deleting a Speed Dial</h2>
-
-<p>To delete a speed dial, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> as the first parameter and speed dial number as the second one;</p>
-<pre class="prettyprint">
-int speeddial_number = ... // Acquire speed dial number
-
-error_code = contacts_db_delete_record(_contacts_speeddial._uri, speeddial_number);
-</pre>
- 
-
- <h2 id="pl_create" name="pl_create">Creating a Log</h2>
-
-<p>To create a log record:</p>
-<pre class="prettyprint">
-contacts_record_h log;
-error_code = contacts_record_create(_contacts_phone_log._uri, &amp;log);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record create failed: %x&quot;, error_code);
-</pre>
-<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> to create log type records.</p>
-
- <h2 id="pl_set" name="pl_set">Setting Log Properties</h2>
-
-<p>To set log properties:</p>
-<ol>
-<li>Set the log type.
-<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function sets the type of the log when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log.log_type</span>. This function takes the log record handle as the first argument, and the type, which is a integer value, as the third argument. The function returns the status code. If the function returns an error, free memory, remove handles, and disconnect from the service, if needed.</p>
-<pre class="prettyprint">
-error_code = contacts_record_set_int(log, _contacts_phone_log.log_type, CONTACTS_PLOG_TYPE_VOICE_INCOMMING);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);
-</pre>
-
-<p>The enumeration flag names for the log types are:</p>
-<pre class="prettyprint">
-CONTACTS_PLOG_TYPE_NONE
-CONTACTS_PLOG_TYPE_VOICE_INCOMMING
-CONTACTS_PLOG_TYPE_VOICE_OUTGOING
-CONTACTS_PLOG_TYPE_VIDEO_INCOMING
-CONTACTS_PLOG_TYPE_VIDEO_OUTGOING
-CONTACTS_PLOG_TYPE_VOICE_INCOMMING_UNSEEN
-CONTACTS_PLOG_TYPE_VOICE_INCOMMING_SEEN
-CONTACTS_PLOG_TYPE_VIDEO_INCOMING_UNSEEN
-CONTACTS_PLOG_TYPE_VIDEO_INCOMING_SEEN
-CONTACTS_PLOG_TYPE_VOICE_REJECT
-CONTACTS_PLOG_TYPE_VIDEO_REJECT
-CONTACTS_PLOG_TYPE_VOICE_BLOCKED
-CONTACTS_PLOG_TYPE_VIDEO_BLOCKED
-CONTACTS_PLOG_TYPE_MMS_INCOMING
-CONTACTS_PLOG_TYPE_MMS_OUTGOING
-CONTACTS_PLOG_TYPE_SMS_INCOMING
-CONTACTS_PLOG_TYPE_SMS_OUTGOING
-CONTACTS_PLOG_TYPE_SMS_BLOCKED
-CONTACTS_PLOG_TYPE_MMS_BLOCKED
-CONTACTS_PLOG_TYPE_EMAIL_RECEIVED
-CONTACTS_PLOG_TYPE_EMAIL_SENT
-</pre></li>
-
-<li>Set time, duration, and address:
-<pre class="prettyprint">
-error_code = contacts_record_set_int(log, _contacts_phone_log.log_time, (int)time(NULL));
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);
-
-error_code = contacts_record_set_int(log, _contacts_phone_log.extra_data1, 37);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);
-
-error_code = contacts_record_set_str(log, _contacts_phone_log.address, &quot;+8231-1234-5678&quot;);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set string failed: %x&quot;, error_code);
-</pre>
-
-<p>Log time means the number of seconds since 1970-01-01 00:00:00 (UTC). The <span style="font-family: Courier New,Courier,monospace">extra_data1</span> property means the <span style="font-family: Courier New,Courier,monospace">message_id</span>, <span style="font-family: Courier New,Courier,monospace">email_id</span>, or duration (seconds) of a call. The address property means a number or an email.</p>
-</li>
-</ol>
-
- <h2 id="pl_insert" name="pl_insert">Inserting a Log to the Database</h2>
-
-<p>To insert a log record:</p>
-<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created log into the Contacts database. The first argument is the log record handle, the second is the record ID. If the log is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.
-<pre class="prettyprint">
-int added_log_id = -1;
-
-error_code = contacts_db_insert_record(log, &amp;added_log_id);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db insert record failed: %x&quot;, error_code);
-</pre>
-</li>
-<li>After inserting the log, destroy the used structures:
-<pre class="prettyprint">contacts_record_destroy(log, true);</pre>
-</li>
-</ol>
-
- <h2 id="pl_get" name="pl_get">Getting Logs</h2>
-
-<p>To get all log records one by one, or to filter them by one of the properties:</p>
-<ol>
-<li>To get a single log record: 
-<ol type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">log_id</span>:</p>
-<pre class="prettyprint">contacts_record_h log;
-int log_id = ... // Acquire log ID
-error_code = contacts_db_get_record(_contacts_phone_log._uri, log_id, &amp;log);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get record failed: %x&quot;, error_code);
-</pre></li>
-<li>After inserting the log, destroy the used structures:
-<pre class="prettyprint">contacts_record_destroy(log, true);</pre></li></ol>
-</li>
-<li>To get the total log record list:
-<ol type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
-<pre class="prettyprint">
-contacts_list_h list = NULL;
-error_code = contacts_db_get_all_records(_contacts_phone_log._uri, 0, 0, &amp;list);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get all records failed: %x&quot;, error_code);
-</pre>
-</li>
-
-<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-
-<pre class="prettyprint">
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;int type;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;type);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;log type: %d&quot;, type);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}
-</pre>
-
-<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_log_data_t</span> structure:</p>
-
-<pre class="prettyprint">
-contacts_gl_log_data_t *gl_log_data = NULL;
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_log_data = _create_gl_log_data(record);
-
-&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}
-</pre>
-
-<p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>
-
-               <pre class="prettyprint">
-typedef struct _contacts_gl_log_data
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;char *address;
-&nbsp;&nbsp;&nbsp;int log_type;
-&nbsp;&nbsp;&nbsp;int log_time;
-} contacts_gl_log_data_t;
-
-static void _free_gl_log_data(contacts_gl_log_data_t *gl_log_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_log_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_log_data-&gt;address);
-&nbsp;&nbsp;&nbsp;free(gl_log_data);
-}
-
-static contacts_gl_log_data_t* _create_gl_log_data(contacts_record_h record)
-{
-&nbsp;&nbsp;&nbsp;contacts_gl_log_data_t *gl_log_data;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;gl_log_data = malloc(sizeof(contacts_gl_log_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_log_data, 0x0, sizeof(contacts_gl_log_data_t));
-
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.id, &amp;gl_log_data-&gt;id))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_phone_log.address, &amp;gl_log_data-&gt;address))
-&nbsp;&nbsp;&nbsp;{                                                            
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;gl_log_data-&gt;log_type))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_time, &amp;gl_log_data-&gt;log_time))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return gl_log_data;
-}
-</pre>
-               </li>
-<li>After getting the log record, destroy the used structures:
-<pre class="prettyprint">
-contacts_list_destroy(list, true);</pre>
-               </li>
-       </ol>
-       </li>
-       <li>To get the filtered log record list:
-       <ol type="a">
-               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function.
-               <ol type="a">
-<li>Create a record list and query:
-<pre class="prettyprint">
-contacts_list_h list = NULL;
-contacts_query_h query = NULL;
-
-error_code = contacts_query_create(_contacts_phone_log._uri, &amp;query);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts query create failed: %x&quot;, error_code);
-</pre>
-       </li>
-       
-       <li>Before getting the logs, filter the list. There is a possibility to filter based on various parameters. To create a filter, use the following code: 
-       <pre class="prettyprint">
-contacts_filter_h filter = NULL;
-
-error_code = contacts_filter_create(_contacts_phone_log._uri, &amp;filter);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter create failed: %x&quot;, error_code);
-</pre>
-       </li>
-       
-       <li>Add a condition, such as the log type.
-       <p>The following example retrieves only those logs which type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_PLOG_TYPE_VOICE_INCOMMING</span>.</p>
-       <pre class="prettyprint">
-error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type, CONTACTS_MATCH_EQUAL, CONTACTS_PLOG_TYPE_VOICE_INCOMMING);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add integer failed: %x&quot;, error_code);
-</pre>
-        
-       <p>To use multiple conditions, add an operator between them:</p>
-       <pre class="prettyprint">
-error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add operator failed: %x&quot;, error_code);
-error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type, CONTACTS_MATCH_EQUAL, CONTACTS_PLOG_TYPE_VOICE_OUTGOING);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add integer failed: %x&quot;, error_code);
-</pre>
-       </li>
-       
-       <li>Connect the query with the list: 
-       <pre class="prettyprint">
-error_code = contacts_query_set_filter(query, filter);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts query set filter failed: %x&quot;, error_code);
-
-error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get records with query failed: %x&quot;, error_code);
-</pre>
-       <p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. After all operations, release the list.</p>
-       </li>
-       
-       <li>Free the filter and query: 
-       <pre class="prettyprint">
-contacts_filter_destroy(filter);
-contacts_query_destroy(query);
-</pre>
-       </li>
-</ol>
-</li>
-
-<li>To iterate the list and read the records, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.
-
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<pre class="prettyprint">
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;int type;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;type);
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;log type: %d&quot;, type);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}
-</pre>
-
-<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_log_data_t</span> structure:</p>
-<pre class="prettyprint">
-contacts_gl_log_data_t *gl_log_data = NULL;
-contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)
-{
-&nbsp;&nbsp;&nbsp;gl_log_data = _create_gl_log_data(record);
-
-&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-}
-</pre>
-<p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>
-<pre class="prettyprint">
-typedef struct _contacts_gl_log_data
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;char *address;
-&nbsp;&nbsp;&nbsp;int log_type;
-&nbsp;&nbsp;&nbsp;int log_time;
-} contacts_gl_log_data_t;
-
-static void _free_gl_log_data(contacts_gl_log_data_t *gl_log_data)
-{
-&nbsp;&nbsp;&nbsp;if (NULL == gl_log_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;free(gl_log_data-&gt;address);
-&nbsp;&nbsp;&nbsp;free(gl_log_data);
-}
-
-static contacts_gl_log_data_t* _create_gl_log_data(contacts_record_h record)
-{
-&nbsp;&nbsp;&nbsp;contacts_gl_log_data_t *gl_log_data;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;gl_log_data = malloc(sizeof(contacts_gl_log_data_t));
-&nbsp;&nbsp;&nbsp;memset(gl_log_data, 0x0, sizeof(contacts_gl_log_data_t));
-
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.id, &amp;gl_log_data-&gt;id))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_phone_log.address, &amp;gl_log_data-&gt;address))
-&nbsp;&nbsp;&nbsp;{                                                            
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;gl_log_data-&gt;log_type))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_time, &amp;gl_log_data-&gt;log_time))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return gl_log_data;
-}
-</pre>
-</li>
-<li>After getting the log record, destroy the used structures.
-<pre class="prettyprint">
-contacts_list_destroy(list, true);</pre></li>
-</ol></li></ol>
-
- <h2 id="pl_delete" name="pl_delete">Deleting a Log</h2>
-
-<p>To delete a log, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> as the first parameter and log ID as the second one:</p>
-<pre class="prettyprint">
-int log_id = ... // Acquire log ID
-
-error_code = contacts_db_delete_record(_contacts_phone_log._uri, log_id);
-if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db delete record failed: %x&quot;, error_code);
-</pre>
-
- <h2 id="insert2" name="insert2">Inserting New Records</h2>
-
-<p>To insert a new record:</p>
-
-<ol>
-<li>Create a record.
-
-<p>The basic concept in the Contacts API is a record. A record can be a complex set of data, containing other data. For example, an address record can contain the country, region, and street. Also, the contained data can be a reference to another record. For example, a contact record contains the <span style="font-family: Courier New,Courier,monospace;">address</span> property, which is a reference to an address record. Effectively, a record can be a node in a tree or a graph of relations between records.</p>
-
-<p>Each record type has a special <span style="font-family: Courier New,Courier,monospace;">view</span> structure, which contains identifiers of its properties. For example, the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view describes the properties of the contact record. It contains properties, such as the name, company, and nickname of the contact. A special property in such structures is the URI, which is used to identify the record type. Every view describing a record has this property.</p>
-
-<p>To create a new contact record, create a root record of the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view type:</p>
-
-<pre class="prettyprint">
-contacts_record_h hcontact = NULL;
-
-error_code = contacts_record_create(_contacts_contact._uri, &amp;hcontact);
-</pre>
-
-<p>Creating a group is similar to creating a record. The only difference is using another view – the group view.</p>
-</li>
-
-<li>Set properties.
-<p>Set the properties of the newly created record. Almost every property in the contact view is a record itself, so create more records, as needed. The following example shows how to add an address record to a contact.</p>
-
-<ol type="a">
-<li>Create a new record.
-<p>Use the address view because the added record is an address:</p>
-
-<pre class="prettyprint">
-contacts_record_h haddress = NULL;
-contacts_record_create(_contacts_address._uri, &amp;haddress);
-</pre>
-</li>
-
-<li>Set the address record properties (parameters available in the current view):
-
-<pre class="prettyprint">
-contacts_record_set_str(haddress, _contacts_address.country, &quot;Korea&quot;);
-</pre>
-</li>
-
-<li>Add the address record to your contact:
-
-<pre class="prettyprint">
-contacts_record_add_child_record(hcontact, _contacts_contact.address, haddress
-</pre>
-<p>Do not destroy the record handle which is added to another as a child.</p>
-</li></ol>
-</li>
-
-<li>Insert records.
-<p>After setting properties, insert the root record only to the database. You receive the ID of this record in the database.</p>
-
-<pre class="prettyprint">
-int id;
-error_code = contacts_db_insert_record(hcontact, &amp;id);
-</pre>
-</li>
-
-<li>Clean up.
-<p>Destroy the record structure.</p>
-
-<pre class="prettyprint">
-error_code = contacts_record_destroy(hcontact, true);
-</pre>
-</li>
-</ol>
-
- <h2 id="get2" name="get2">Getting Record Details</h2>
-
-<p>To find all records and get their details:</p>
-
-<ol>
-<li>Get a single record.
-<p>Get a record handle when you know its ID:</p>
-
-<pre class="prettyprint">
-contacts_record_h record;
-const int ID = 2;
-
-contacts_db_get_record(_contacts_contact._uri, ID, &amp;record);
-</pre>
-</li>
-
-<li>Get record details.
-<p>To get the details, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_*</span> function with the record handle. The following example gets the contact display name:</p>
-
-<pre class="prettyprint">
-char * d_name;
-contacts_record_get_str(record, _contacts_contact.display_name, d_name);
-free(d_name);
-</pre>
-</li>
-
-<li>Get child record details.
-<p>When using 1 view, you sometimes need details from another view. For example, you get records using the contact view and need to get the first or last name. If you want to get the name, get the record from the name view using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_child_record_at_p()</span> function:</p>
-
-<pre class="prettyprint">
-contacts_record_h child_record;
-contacts_record_get_child_record_at_p(record, _contacts_contact.name, 0, &amp;child_record);
-// In the child_record, you have the record form name view
-char *f_name;
-contacts_record_get_str(record, _contacts_name.first_name, f_name);
-free(f_name);
-</pre>
-</li>
-
-<li>Get parent record details.
-<p>When using the child view, you sometimes need to get details of the parent. For example, you get records using the name view and want to know whether the contact has an email address. To get the parent details, get its ID in almost every view with <span style="font-family: Courier New,Courier,monospace;">contact_id</span>. After that, get the parent record:</p>
-
-<pre class="prettyprint">
-contacts_record_h parent_record;
-int parent_id;
-contacts_record_get_int(record, _contacts_name.contact_id, &amp;parent_id);
-contacts_db_get_child_record(_contacts_contact._uri, parent_id, &amp;parent_record);
-// In the parent_record, get bool
-bool h_email;
-contacts_record_get_bool(parent_record, _contacts_contact.has_email, &amp;h_email);
-</pre>
-</li>
-
-<li>Get details through a structure.
-<ol type="a"><li><p>For more record details, use a structure to get them.</p>
-<p>The memory for the record data is allocated and the data is copied from the record by functions listed in the following step.</p>
-
-<pre class="prettyprint">
-gldata = _create_gl_data(record);
-char * number = gldata-&gt;number;
-
-typedef struct _contact_gl_data
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;char *first;
-&nbsp;&nbsp;&nbsp;char *last;
-&nbsp;&nbsp;&nbsp;char *number;
-&nbsp;&nbsp;&nbsp;char *image_path;
-} contact_gl_data_t;
-
-static contact_gl_data_t *_create_gl_data(contacts_record_h r_contact)
-{
-&nbsp;&nbsp;&nbsp;contact_gl_data_t *data;
-&nbsp;&nbsp;&nbsp;data = malloc(sizeof(contact_gl_data_t));
-&nbsp;&nbsp;&nbsp;memset(data, 0x0, sizeof(contact_gl_data_t));
-
-&nbsp;&nbsp;&nbsp;if (! _get_contact_id(r_contact, &amp;data-&gt;id))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;if (!_get_contact_number(r_contact, &amp;data-&gt;number))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (!_get_contact_first(r_contact, &amp;data-&gt;first))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (!_get_contact_last(r_contact, &amp;data-&gt;last))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;first);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (!_get_contact_image(r_contact, &amp;data-&gt;image_path))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;first);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;last);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return data;
-}
-</pre>
-</li>
-
-<li>Retrieve record data into the structure.
-<p>Contacts are organized in a parent-child structure. To access specified data from a record, get the child responsible for the requested type using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function (for the property lists, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a>). Do not pass any data returned by a function with the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix to the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
-
-<ul><li><p>To get the name details, get the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.name</span> (representing the child) from the <span style="font-family: Courier New,Courier,monospace;">r_contact</span> parent. Both structures have the <span style="font-family: Courier New,Courier,monospace;">contacts_record_h</span> type. After obtaining a child record, get the desired data from it using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function.</p>
-
-<pre class="prettyprint">
-static bool _get_contact_last(contacts_record_h r_contact, char **last)
-{
-&nbsp;&nbsp;&nbsp;contacts_record_h r_name;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact,  _contacts_contact.name, 0, &amp;r_name);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_name, _contacts_name.last, last);
-}
-</pre></li>
-
-<li><p>The record ID is obtained directly from the parent record. An ID is a unique number representing the record key in the database. You can manipulate a record with functions, such as <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_record()</span> or <span style="font-family: Courier New,Courier,monospace;">contacts_db_delete_records()</span>, if you know their ID.</p>
-
-<pre class="prettyprint">
-static bool _get_contact_id(contacts_record_h r_contact, int *id)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(r_contact, _contacts_contact.id, id);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre></li>
-
-<li><p>To get a contact number, check whether it exists using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_bool()</span> function. If it exists, use the various <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">Query</a>  and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">Filter</a> functions from the Contacts API to make a query to get a list. At the end, free any data returned by a function not containing the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix.</p>
-<ul><li>Get a list of all numbers and filter the list to get the default:
-<pre class="prettyprint">
-static bool _get_contact_number(contacts_record_h r_contact, char **number)
-{
-&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;contacts_record_h r_number;
-&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
-&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
-&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;
-
-&nbsp;&nbsp;&nbsp;if (!_get_contact_id(r_contact, &amp;id))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-
-&nbsp;&nbsp;&nbsp;bool has_number;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_contact, _contacts_contact.has_phonenumber, &amp;has_number);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_query_create(_contacts_number._uri, &amp;query);
-
-&nbsp;&nbsp;&nbsp;unsigned int fields[] = { _contacts_number.number };
-&nbsp;&nbsp;&nbsp;error_code = contacts_query_set_projection(query, fields, 1);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_filter_create(_contacts_number._uri, &amp;filter);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_int(filter, _contacts_number.contact_id, CONTACTS_MATCH_EXACTLY, id);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_bool(filter, _contacts_number.is_default, true);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_query_set_filter(query, filter);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_records_with_query(query, 0, 1, &amp;list);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_get_current_record_p(list, &amp;r_number);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_number, _contacts_number.number, number);
-
-&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
-&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);
-}
-</pre></li>
-
-<li><p>Directly access the default number:</p>
-
-<pre class="prettyprint">
-static bool _get_contact_number(contacts_record_h r_contact, char **number)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;contacts_record_h r_number;
-
-&nbsp;&nbsp;&nbsp;bool has_number;
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_contact, _contacts_contact.has_phonenumber, &amp;has_number);
-
-&nbsp;&nbsp;&nbsp;if (!has_number)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*number = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.number, 0, &amp;r_number);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_number, _contacts_number.number, number);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-<p>To get a second number, change the third parameter (<span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p</span>) from 0 to 1.</p></li></ul></li>
-
-
-<li><p>An image can be obtained directly from the parent record:</p>
-
-<pre class="prettyprint">
-static bool _get_contact_image(contacts_record_h r_contact, char **image_path)
-{
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_contact, _contacts_contact.image_thumbnail_path, image_path);
-
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Thumb path: \&#39;%s\&#39;&quot;, *image_path);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre></li>
-
-<li><p>Get the first name as the last name:</p>
-
-<pre class="prettyprint">
-static bool _get_contact_first(contacts_record_h r_contact, char **first)
-{
-&nbsp;&nbsp;&nbsp;contacts_record_h r_name;
-&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.name, 0, &amp;r_name);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_name, _contacts_name.first, first);
-}
-</pre></li></ul>
-</li></ol></li>
-
-<li>Clean up.
-<ol type="a"><li><p>Destroy the <span style="font-family: Courier New,Courier,monospace;">contacts_list_h</span> list.</p>
-<p>When the access to the database is no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace;">contact_disconnect()</span> function.</p>
-
-<pre class="prettyprint">
-error_code = contacts_list_destroy(list, true);
-
-error_code = contacts_disconnect();
-</pre></li>
-
-<li><p>Destroy all other used handles as well:</p>
-
-<pre class="prettyprint">
-contacts_query_destroy(query); // If query has been used
-contacts_filter_destroy(filter); // If filter has been used
-</pre></li></ol>
-</li>
-</ol>
-
- <h2 id="list2" name="list2">Handling Lists</h2>
-
-<p>To access multiple records using lists and contact property filters, and to sort records:</p>
-
-<ol>
-<li>Get a record list.
-<ul><li>To get all records:
-<p>The following function retrieves all records and returns the result list. After all operations, the list must be released with the <span style="font-family: Courier New,Courier,monospace;">contacts_list_destroy()</span> function.</p>
-
-<pre class="prettyprint">
-contacts_list_h list = NULL;
-
-contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &amp;list);
-</pre>
-</li>
-<li>To filter and get specific records:
-<ol type="a">
-<li>Create a query for a list.
-<p>To filter or sort records, you need a record list and query:</p>
-
-<pre class="prettyprint">
-contacts_list_h list = NULL;
-contacts_query_h query = NULL;
-
-contacts_query_create(_contacts_name._uri, &amp;query);
-</pre>
-</li>
-
-<li>Create a filter for the query.
-<p>Before getting contacts, filter the list. It is possible to filter by various parameters, such as the name view.</p>
-
-<pre class="prettyprint">
-contacts_filter_h filter = NULL;
-
-contacts_filter_create (_contacts_name._uri, &amp;filter);
-</pre>
-
-<p>The first parameter defines in which view to place the filter. To filter by the first and last name, use the <span style="font-family: Courier New,Courier,monospace;">_contacts_name</span> filter. The first parameter of the <span style="font-family: Courier New,Courier,monospace;">contacts_query_create()</span> function must be the same parameter as in the filter to be appended. For more information on views, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a> tables.</p></li>
-
-<li><p>Add a condition, such as the following where only contacts beginning with &quot;Za&quot; are shown:</p>
-
-<pre class="prettyprint">
-contacts_filter_add_str(filter, _contacts_name.last_name, CONTACTS_MATCH_CONTAINS, &quot;Za&quot;);
-</pre>
-
-<p>To receive contacts which starts by a given string, the <span style="font-family: Courier New,Courier,monospace;">CONTACTS_MATCH_CONTAINS</span> parameter has to be set. Use the parameter if you need to get records which contain the given string anywhere.</p></li>
-
-<li><p>To add more conditions, add operators between them. In this case, define the operator between conditions first:</p>
-
-<pre class="prettyprint">
-contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
-</pre>
-
-<p>After that you can add another condition. If you need to use a logic expression &quot;C1 AND (C2 OR C3)&quot;, conditions 2 and 3 must be in another filter to have logical brackets. The following example shows a filter that passes through contacts with a first name starting with &quot;Ada&quot; or &quot;Igo&quot;:</p>
-
-<pre class="prettyprint">
-contacts_filter_h n_filter = NULL;
-contacts_filter_create (_contacts_name._uri, &amp;n_filter);
-contacts_filter_add_str(n_filter, _contacts_name.first_name, CONTACTS_MATCH_STARTSWITH, &quot;Ada&quot;);
-contacts_filter_add_operator(n_filter, CONTACTS_FILTER_OPERATOR_OR);
-contacts_filter_add_str(n_filter, _contacts_name.first_name, CONTACTS_MATCH_STARTSWITH, &quot;Igo”&quot;);
-</pre></li>
-
-<li><p>To add an extra filter to a parent filter:</p>
-
-<pre class="prettyprint">
-contacts_filter_add_filter(filter, n_filter);
-</pre>
-
-<p>The parent filter passes through contacts with a last name beginning with &quot;Za&quot; and a first name starting with &quot;Ada&quot; or &quot;Igo&quot;.</p></li>
-<li><p>Connect a filter with query:</p>
-
-<pre class="prettyprint">
-contacts_query_set_filter(query, filter);
-</pre></li></ol></li></ul>
-</li>
-
-<li>Sort a record list.
-<p>To sort records by any of its view details:</p>
-
-<pre class="prettyprint">
-contacts_query_set_sort(query, _contacts_name.first, true);
-</pre>
-
-<p>The first parameter is the query to be filtered, the second is the property to sort, and the last sets the ascending order.</p>
-</li>
-
-<li>Set a projection to a list.
-<p>A projection allows you to query the data for specific properties of a record. It can reduce latency in case of a large database.</p>
-<p>To set the projection, use the <span style="font-family: Courier New,Courier,monospace;">contacts_query_set_projection()</span> function. The following example limits the properties from the previous steps to the first and last name:</p>
-
-<pre class="prettyprint">
-unsigned my_projection[] = {_contacts_name.contact_id, _contacts_name.first, _contacts_name.last}
-contacts_query_set_projection(query, my_projection, sizeof(my_projection)/sizeof(int));
-</pre>
-
-<p>After filtering, such as getting numbers, there can be several records which differ only in a few detail types. When setting the projection, the results can contain identical records. To avoid these situations, use the distinction function:</p>
-
-<pre class="prettyprint">
-contacts_query_set_distinct(query, true);
-</pre>
-</li>
-
-<li>Get the record list with a query.
-<p>Get the list with the query:</p>
-
-<pre class="prettyprint">
-contacts_db_get_records_with_query(query, 0, 0, &amp;list);
-</pre>
-
-<p>The third parameter refers to limiting results. If 0 is passed, there are no limits. Release the list after all the operations.</p>
-</li>
-
-<li id="iterate_l" name="iterate_l">Iterate on the list and read the records.
-<p>The <span style="font-family: Courier New,Courier,monospace;">contacts_list_get_current_record_p()</span> function retrieves a record from the contacts list. The current default record is the first record.</p>
-
-<p>To iterate on a list, use the <span style="font-family: Courier New,Courier,monospace;">contacts_list_prev()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_list_next()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_list_first()</span>, and <span style="font-family: Courier New,Courier,monospace;">contacts_list_last()</span> functions.</p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace;">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to data in an existing record.</td>
-    </tr>
-   </tbody>
-  </table>
-
-<p>To read records:</p>
-
-<ul><li>To get only a few details:
-
-<pre class="prettyprint">
-contacts_record_h record;
-
-while (contacts_list_get_current_record_p(list, &amp;record) == 0)
-{
-&nbsp;&nbsp;&nbsp;// Get details
-&nbsp;&nbsp;&nbsp;char * disp_name;
-&nbsp;&nbsp;&nbsp;contacts_record_get_str(record, _contacts_contact.display_name, &amp;disp_name);
-&nbsp;&nbsp;&nbsp;free(disp_name);
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-}
-</pre></li>
-
-<li><p>To get more details, use the following example, where the obtained records are passed to the <span style="font-family: Courier New,Courier,monospace;">_create_gl_data()</span> function for further processing:</p>
-
-<pre class="prettyprint">
-contacts_record_h record;
-contact_gl_data_t *gldata = NULL;
-
-while (contacts_list_get_current_record_p(list, &amp;record) == 0)
-{
-&nbsp;&nbsp;&nbsp;gldata = _create_gl_data(record);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-}
-</pre></li>
-
-<li><p>The previous examples work if you use the default (<span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span>) view. If you use filtering in another view as shown in the filter example, and you want to use this structure (change view to default), use the following code:</p>
-
-<pre class="prettyprint">
-contacts_record_h record;
-contact_gl_data_t *gldata = NULL;
-
-while (contacts_list_get_current_record_p(list, &amp;record) == 0)
-{
-&nbsp;&nbsp;&nbsp;int record_id;
-&nbsp;&nbsp;&nbsp;contacts_record_h c_record;
-&nbsp;&nbsp;&nbsp;contacts_record_get_int(record, _contacts_name._uri, &amp;contact_id);
-&nbsp;&nbsp;&nbsp;contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;c_record);
-&nbsp;&nbsp;&nbsp;gldata = _create_gl_data(c_record);
-
-&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-}
-</pre>
-
-<p>This way it is possible to switch to the default view from another view (in a similar manner to the above example <span style="font-family: Courier New,Courier,monospace;">_contacts_name</span>).</p></li></ul>
-</li>
-
-<li>Insert the list to the database.
-<p>You can insert a whole list to the database. This can be useful when you have several records to create and you want to insert them all at once.</p>
-
-<ol type="a">
-<li>If you have a list, use it or create a new one:
-
-<pre class="prettyprint">
-contacts_list_h list;
-contacts_list_create(&amp;list);
-</pre>
-</li>
-
-<li>Add records to the list:
-
-<pre class="prettyprint">
-contacts_list_add (list, record);
-</pre>
-</li>
-
-<li>Insert the list into the database:
-
-<pre class="prettyprint">
-int *ids = NULL;
-unsigned int count = 0;
-contacts_db_insert_records(list, &amp;ids, &amp;count);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%d records inserted&quot;, count);
-free(ids);
-</pre>
-
-<p>This inserts the entire list to the database and gets the IDs of the inserted records.</p>
-</li>
-
-<li>Destroy the list:
-
-<pre class="prettyprint">
-contacts_list_destroy(list, true);
-</pre>
-</li>
-</ol>
-</li>
-</ol>
-
- <h2 id="delete2" name="delete2">Deleting Records</h2>
-
-<p>To delete records from the contact database, you need to know their ID:</p>
-
-<pre class="prettyprint">
-int id;
-// Get id
-int error = contacts_db_delete_record(_contacts_contact._uri, id);
-</pre>
-
-<p>If you only have the record handle, get the ID first:</p>
-
-<pre class="prettyprint">
-contacts_record_get_int(record, _contacts_contact.id, &amp;id);
-</pre>
-
- <h2 id="link2" name="link2">Linking Persons</h2>
-
-<p>To link persons (a useful joining method if there are several contacts assigned to one person):</p>
-
-<ol>
-<li>Link a person to another person.
-<p>To link persons with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_link_person()</span> function, you need the person ID. To get the person ID, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_int()</span> function.</p>
-
-<pre class="prettyprint">
-int first_person_id;
-contacts_record h record1;
-// Get the first record
-int error_code = contacts_record_get_int(record1, _contacts_contact.person_id, &amp;first_person_id);
-
-contacts_record h record2;
-// Get the second record
-error_code = contacts_record_get_int(record2, _contacts_contact.person_id, &amp;second_person_id);
-
-contacts_person_link_person(first_person_id, second_person_id);
-</pre>
-
-<p>This links the 2 contacts available through record handles.</p>
-</li>
-
-<li>Set the default properties.
-<p>Set the default values from one of the linked contacts with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_set_default_property()</span> function. The first parameter determines the detail to be set using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">contacts_person_property_e</a> enum.</p>
-
-<p>To set a default number from one of the persons, you have to know its ID. Get the detail ID using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function, because you need to get the value from the <span style="font-family: Courier New,Courier,monospace;">_contact_number</span> view.</p>
-
-<pre class="prettyprint">
-contacts_record_h record;
-int record_number = -1;
-// Get the record handle
-contacts_record_h record_number;
-error_code = contacts_record_get_child_record_at_p(record, _contacts_contact.number, 0, &amp;record_number);
-
-error_code = contacts_record_get_int(record_number, _contacts_number.id, &amp;number_id);
-
-error_code = contacts_record_destroy(record_number, true);
-
-// Use the record_number variable
-error_code = contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBER, person_id, number_id);
-</pre>
-</li>
-
-<li>Get default properties.
-<p>Get the default property values of a person with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_get_default_property()</span> function:</p>
-
-<ol type="a"><li><p>Get the ID of the default email details:</p>
-
-<pre class="prettyprint">
-int person_email_number;
-error_code = contacts_person_get_default_property (CONTACTS_PERSON_PROPERTY_EMAIL, person_id, &amp;person_email_number);
-</pre></li>
-
-<li><p>Get the default email: </p>
-
-<pre class="prettyprint">
-int person_email_detail_number;
-error_code = contacts_person_get_default_property (CONTACTS_PERSON_PROPERTY_EMAIL, person_id, &amp;person_email_number);
-
-contacts_record_h email_record;
-error_code = contacts_db_get_record(_contacts_email._uri, person_email_detail_number, &amp;email_record);
-char * default_email;
-
-error_code = contacts_record_get_str_p(email_record, _contacts_email.email, &amp;default_email);
-
-// Use default_email
-
-error_code = contacts_record_destroy(email_record, true);
-</pre></li></ol>
-</li>
-
-<li>Unlink persons.
-<p>To unlink a contact using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_unlink_contact()</span> function:</p>
-
-<ol type="a"><li><p>If you have the record handle, get the contact ID: </p>
-
-<pre class="prettyprint">
-int person_id;
-contacts_record_get_int(record, _contacts_contact.id, &amp;person_id);
-</pre></li>
-
-<li><p>Unlink a contact from another and get its ID:</p>
-
-<pre class="prettyprint">
-int unlinked_person_id;
-int contacts_person_unlink_contact(person_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contact_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;unlinked_person_id)
-</pre></li></ol>
-</li>
-</ol>
-
- <h2 id="settings" name="settings">Managing Contact Settings</h2>
-
-<p>To manage the display settings of contacts:</p>
-
-<ol>
-<li>Get the display and sorting order.
-<p>Check the current display order (the order in which the names are displayed) using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_get_name_display_order()</span> function, and the sorting order using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_get_name_sorting_order()</span> function:</p>
-
-<pre class="prettyprint">
-contacts_name_display_order_e display_order;
-contacts_setting_get_name_display_order (&amp;display_order);
-// Now you have the display order
-sprintf(&quot;Display order: %s&quot;, display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST&quot;);
-
-contacts_name_sorting_order_e sorting_order;
-contacts_setting_get_name_sorting_order (&amp;sorting_order);
-// Now you have the sorting order
-sprintf(&quot;Sorting order: %s&quot;, sorting_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_SORTING_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_SORTING_ORDER_LASTFIRST&quot;);
-</pre>
-</li>
-
-<li>Change the display and sorting orders.
-<p>To change the display and sorting orders, use the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_set_name_display_order()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_set_name_sorting_order()</span> functions:</p>
-
-<pre class="prettyprint">
-contacts_setting_set_name_display_order (CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST);
-
-contacts_setting_set_name_sorting_order (CONTACTS_NAME_SORTING_ORDER_FIRSTLAST);
-</pre>
-</li>
-
-<li>Track the order changes with callbacks.
-<p>To track changes in the display and sorting orders:</p>
-<ol type="a"><li>Register callbacks with the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_sorting_order_changed_cb()</span> functions. </li>
-<li>Define the callbacks themselves:
-<pre class="prettyprint">
-static void display_changed_cb(contacts_name_display_order_e name_display_order, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;changed display order: %s&quot;, name_display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST&quot;);
-}
-
-static void sorting_changed_cb(contacts_name_sorting_order_e name_display_order, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;changed sorting order: %s&quot;, name_display_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST?"CONTACTS_NAME_SORTING_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_SORTING_ORDER_LASTFIRST&quot;);
-}
-</pre>
-<p>The above examples cause a message to be printed when the order changes. To track the changes, write a timeout function after setting the callback.</p></li>
-<li>Unregister the callbacks when they are no longer needed using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_remove_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_remove_name_sorting_order_changed_cb()</span> functions.</li></ol>
-
-</li>
-</ol>
-
- <h2 id="sim" name="sim">Managing Contacts on the SIM Card</h2>
-
-<p>To check whether the SIM card is initialized and then import contacts from the SIM card:</p>
-<ol>
-<li>Check whether the SIM card is initialized.
-<p>Before using any SIM card methods, ensure that the SIM card initialization is complete:</p>
-
-<pre class="prettyprint">
-bool completed = false;
-contacts_sim_get_initialization_status(&amp;completed);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;SIM %s completed&quot;, completed?&quot;&quot;:&quot;not &quot;);
-</pre></li>
-
-<li>Import all contacts from the SIM card.
-<p>When the contacts from the SIM card are available, import them:</p>
-
-<pre class="prettyprint">
-int err = contacts_sim_import_all_contacts();
-</pre>
-</li>
-
-</ol>
-
- <h2 id="import" name="import">Importing from vCard</h2>
-
-<p>To import contacts from all vCard files from a specified directory:</p>
-
-<ul>
-<li>Get contact records from a stream.
-<p>To receive a records list from the vCard stream, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contacts()</span> function. Afterwards, the received list is ready to use and you can perform the iteration on the list.</p>
-
-<p>The following example uses the stream in the vCard format and gets the records from the received list: </p>
-
-<pre class="prettyprint">
-char * vcard_stream;
-// Get vCard stream
-contacts_list_h contacts_list;
-int err = contacts_vcard_parse_to_contacts(vcard_stream, contacts_list);
-
-while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) 
-{
-&nbsp;&nbsp;&nbsp;// Get next records from file
-&nbsp;&nbsp;&nbsp;err = contacts_list_next(list_import);
-}
-err = contacts_list_destroy(list_import, true);
-</pre>
-
-<p>You can also use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contact_foreach()</span> function. With this function, you have to get the file content manually, and it needs a callback:</p>
-
-<pre class="prettyprint">
-bool contacts_vcard_cb(contacts_record_h record, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Here you have a record
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-
-<p>The callback is called for each record from a vCard file. The iteration continues as long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>.</p>
-
-<p>To check how many records are contained in a vCard file, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_get_entity_count()</span> function.</p>
-
-</li>
-
-<li>Import the vCard stream.
-<ul><li><p>Get all the files with a <span style="font-family: Courier New,Courier,monospace;">.vcf</span> extension from the directory. It can be done through dirent structures available in the <span style="font-family: Courier New,Courier,monospace;">&lt;dirent.h&gt;</span> header. The following example gets the path to every file in a directory:</p>
-
-<pre class="prettyprint">
-int internal_storage_id;
-char *vcf_path = NULL;
-
-static bool 
-storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-void 
-_get_storage_path()
-{
-&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;error_code = storage_foreach_device_supported(storage_cb, NULL);
-&nbsp;&nbsp;&nbsp;error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_DOWNLOADS, &amp;path);
-&nbsp;&nbsp;&nbsp;if (error_code != STORAGE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vcf_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;}
-}
-
-void 
-_import_vcard()
-{
-&nbsp;&nbsp;&nbsp;int path_len = 0;
-
-&nbsp;&nbsp;&nbsp;DIR *dir = opendir(vcf_path);
-&nbsp;&nbsp;&nbsp;struct dirent *pDirent = NULL;
-&nbsp;&nbsp;&nbsp;if (NULL == dir)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(vcf_path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pDirent-&gt;d_type != DT_REG)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *extension = strrchr(pDirent-&gt;d_name, &#39;.&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!extension || strcmp(extension, &quot;.vcf&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char * filepath = malloc(strlen(vcf_path)+strlen(pDirent-&gt;d_name)+4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(filepath, &quot;%s/%s&quot;, vcf_path, pDirent-&gt;d_name);
-        
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Full path to file available through filepath string
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(filepath);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre></li>
-
-<li><p>If you use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contacts()</span> function, you need to get the file stream manually. The following example shows how to get a records list from a file:</p>
-
-<pre class="prettyprint">
-FILE *fp = fopen(filepath, &quot;r&quot;);
-fseek(fp, 0, 2);
-int bufsize = ftell(fp);
-rewind(fp);
-if (bufsize &lt; 1)
-&nbsp;&nbsp;&nbsp;return 1;
-char * vcard_stream = malloc(sizeof(char) * (bufsize));
-memset(vcard_stream, &#39;\0&#39;, sizeof(vcard_stream));
-if (fp != NULL) 
-{
-&nbsp;&nbsp;&nbsp;char str[200];
-&nbsp;&nbsp;&nbsp;while(fgets(str, 200, fp) != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(vcard_stream+strlen(vcard_stream), &quot;%s&quot;, str);
-&nbsp;&nbsp;&nbsp;fclose(fp); 
-} 
-else
-&nbsp;&nbsp;&nbsp;// Error handling
-int err = contacts_vcard_parse_to_contacts(vcard_stream, contacts_list);
-free(vcard_stream);
-</pre></li>
-
-<li><p>You can also use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contact_foreach()</span>  function. It requires a callback and retrieves the file path instead of a file stream:</p>
-
-<pre class="prettyprint">
-bool contacts_vcard_cb(contacts_record_h record, void *user_data)
-{
-&nbsp;&nbsp;&nbsp;// Here you have a record
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-err = contacts_vcard_parse_to_contact_foreach (filepath, contacts_vcard_cb, NULL);
-</pre></li>
-
-<li><p>Add a record in  a callback function:</p>
-
-<pre class="prettyprint">
-int id = -1;
-err = contacts_db_insert_record(record, &amp;id);
-</pre></li></ul>
-
-<p>The following example represents the full code of the previous step:</p>
-
-<pre class="prettyprint">
-char []folder = &quot;/path/&quot;;
-contacts_list_h list_import;
-contacts_record_h record;
-err = contacts_vcard_parse_to_contacts(content, &amp;list_import);
-
-while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) 
-{
-&nbsp;&nbsp;&nbsp;int id = -1;
-&nbsp;&nbsp;&nbsp;err = contacts_db_insert_record(record, &amp;id); // Add to list
-
-&nbsp;&nbsp;&nbsp;contacts_list_next(list_import);
-}
-
-DIR *dir = opendir(folder);
-struct dirent *pDirent = NULL;
-if (dir) 
-{
-&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pDirent-&gt;d_type != DT_REG)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *exte = strrchr(pDirent-&gt;d_name, &#39;.&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!exte || strcmp(exte, &quot;.vcf&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;file %s&quot;, pDirent-&gt;d_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char * file_path = malloc(strlen(folder)+strlen(pDirent-&gt;d_name)+4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(file_path, &quot;%s/%s&quot;, folder, pDirent-&gt;d_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int count;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_vcard_get_entity_count(file_path, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Number of records in file: count
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count &lt; 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FILE * fp = fopen(file_path, &quot;r&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fseek(fp, 0, 2) != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int bufsize = ftell(fp);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rewind(fp);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;file size: %i&quot;, bufsize); 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bufsize &lt; 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char * vcard_stream = malloc(sizeof(char) * (bufsize));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memset(vcard_stream, &#39;\0&#39;, sizeof(vcard_stream));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fp != NULL) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char str[150];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(fgets(str, 150, fp) != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(vcard_stream+strlen(vcard_stream), &quot;%s&quot;, str);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fclose(fp);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Import the contacts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h list_import;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_vcard_parse_to_contacts(vcard_stream, &amp;list_import);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_vcard_parse_to_contacts failed: %d&quot;, err);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(vcard_stream);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int id = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_db_insert_record(record, &amp;id); // Add to list
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_list_add failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_list_next(list_import);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_list_destroy(list_import, true);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_list_destroy failed: %d&quot;, err);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free (file_path);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;closedir(dir);
-}
-</pre>
-</li>
-</ul>
-
- <h2 id="export" name="export">Exporting to vCard</h2>
-
-<p>To export your contacts to a vCard file:</p>
-
-<ol>
-<li>Export contacts to a file.
-<ul><li><p>To export a contact from the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view to the vCard format, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_contact()</span> function.</p></li>
-
-
-<li><p>To export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_person</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_person()</span> function. If you need to export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_my_profile</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_my_profile()</span> function.</p></li></ul>
-
-<p>The following example uses the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view, but the use of the other views is the same:</p>
-
-<pre class="prettyprint">
-contacts_record_h contact;
-// Get record to contacts_record_h
-char *vcard_stream;
-int err = contacts_vcard_make_from_contact(contact, &amp;vcard_stream);
-
-// Stream in vCard format is now in vcard_stream
-free(vcard_stream);
-</pre></li>
-
-<li><p>Write to a file:</p>
-
-<pre class="prettyprint">
-FILE * file = fopen(&quot;/path/contacts.vcf&quot;, &quot;w&quot;);
-fwrite(vcard_stream, 1, strlen(vcard_stream), file);
-fclose(file);
-</pre></li></ol>
-
-
-<p>The following example shows how to get all records from a database and put them into a single file.</p>
-<p>Get the list of all records using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_all_records()</span> function and the current records using the <span style="font-family: Courier New,Courier,monospace;">contacts_list_get_current_record_p()</span> function. Get the vCard stream and write to the file in a <span style="font-family: Courier New,Courier,monospace;">while</span> loop:</p>
-
-<pre class="prettyprint">
-char file_path[] = &quot;/path/contacts.vcf&quot;;
-contacts_list_h list = NULL;
-err = contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &amp;list);
-
-contacts_record_h record;
-FILE * file = fopen(file_path, &quot;w&quot;);
-
-while (contacts_list_get_current_record_p(list, &amp;record) == 0) 
-{
-&nbsp;&nbsp;&nbsp;err = contacts_vcard_make_from_contact(record, &amp;vcard_stream);
-&nbsp;&nbsp;&nbsp;// Save to file
-&nbsp;&nbsp;&nbsp;fwrite(vcard_stream, 1, strlen(vcard_stream), file);
-&nbsp;&nbsp;&nbsp;free(vcard_stream);
-&nbsp;&nbsp;&nbsp;err = contacts_list_next(list);
-}
-fclose(file);
-contacts_list_destroy(list, true);
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Contacts: Managing Contacts and Groups, and Accessing the Contact Database</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#init">Initializing Contacts</a></li>\r
+                       <li>Contacts\r
+                               <ul class="toc">\r
+                               <li><a href="#create_contact">Creating a Contact</a></li>\r
+                               <li><a href="#set_contact">Setting Contact Properties</a></li>\r
+                               <li><a href="#insert_contact">Inserting a Contact to the Database</a></li>\r
+                               <li><a href="#get_contact">Getting Contacts</a></li>\r
+                               <li><a href="#update_contact">Updating a Contact</a></li>\r
+                               <li><a href="#delete_contact">Deleting a Person</a></li>\r
+                               <li><a href="#link_contact">Linking and Unlinking Contacts</a></li>\r
+                               <li><a href="#manage_contact">Managing Favorites</a></li>\r
+                               <li><a href="#monitor_contact">Monitoring Person Changes</a></li>\r
+                               </ul></li>\r
+                       <li>Groups\r
+                               <ul class="toc">\r
+                               <li><a href="#create">Creating a Group</a></li>\r
+                               <li><a href="#set">Setting Group Properties</a></li>\r
+                               <li><a href="#insert">Inserting a Group to the Database</a></li>\r
+                               <li><a href="#get">Getting Groups</a></li>\r
+                               <li><a href="#update">Updating a Group</a></li>\r
+                               <li><a href="#delete">Deleting a Group</a></li>\r
+                               <li><a href="#manage">Managing Group Members</a></li>\r
+                               <li><a href="#monitor">Monitoring Group Changes</a></li>\r
+                               </ul></li>\r
+                       <li>vCards\r
+                               <ul class="toc">\r
+                               <li><a href="#make">Making a vCard</a></li>\r
+                               <li><a href="#parse">Parsing a vCard</a></li>\r
+                               </ul></li>\r
+                       <li>Speed dials\r
+                               <ul class="toc">\r
+                               <li><a href="#sd_create">Creating a Speed Dial</a></li>\r
+                               <li><a href="#sd_set">Setting Speed Dial Properties</a></li>\r
+                               <li><a href="#sd_insert">Inserting a Speed Dial to the Database</a></li>\r
+                               <li><a href="#sd_get">Getting Speed Dials</a></li>\r
+                               <li><a href="#sd_update">Updating a Speed Dial</a></li>\r
+                               <li><a href="#sd_delete">Deleting a Speed Dial</a></li>\r
+                               </ul>\r
+                       </li>\r
+                       <li>Phone logs\r
+                               <ul class="toc">\r
+                               <li><a href="#pl_create">Creating a Log</a></li>\r
+                               <li><a href="#pl_set">Setting Log Properties</a></li>\r
+                               <li><a href="#pl_insert">Inserting a Log to the Database</a></li>\r
+                               <li><a href="#pl_get">Getting Logs</a></li>\r
+                               <li><a href="#pl_delete">Deleting a Log</a></li>\r
+                               </ul>\r
+                       </li>                   \r
+                       <li>Records\r
+                               <ul class="toc">\r
+                               <li><a href="#insert2">Inserting New Records</a></li>\r
+                               <li><a href="#get2">Getting Record Details</a></li>\r
+                               <li><a href="#list2">Handling Lists</a></li>\r
+                               <li><a href="#delete2">Deleting Records</a></li>\r
+                               <li><a href="#link2">Linking Persons</a></li>\r
+                               </ul></li>\r
+                       <li>Contact settings\r
+                               <ul class="toc">\r
+                               <li><a href="#settings">Managing Contact Settings</a></li>\r
+                               <li><a href="#sim">Managing Contacts on the SIM Card</a></li>\r
+                               </ul></li>\r
+                       <li>vCard information\r
+                               <ul class="toc">\r
+                               <li><a href="#import">Importing from vCard</a></li>\r
+                               <li><a href="#export">Exporting to vCard</a></li>\r
+                               </ul></li>\r
+               </ul>        \r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/social/contact_n.htm">Contacts Guide</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Contacts: Managing Contacts and Groups, and Accessing the Contact Database</h1>\r
+\r
+   \r
+<p>This tutorial demonstrates how you can manage contacts and groups, and import them to or export them from the vCard format.</p>\r
+\r
+  <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <h2>Warm-up</h2>\r
+      <p>Become familiar with the Contacts API basics by learning about:</p>\r
+      <ul>\r
+                       <li><a href="#init">Initializing Contacts</a>\r
+                       <p>Initialize the contacts for use.</p></li>\r
+                       <li>Contacts\r
+                               <ul><li><a href="#create_contact">Creating a Contact</a>\r
+                               <p>Create a new contact.</p></li>\r
+                               <li><a href="#set_contact">Setting Contact Properties</a>\r
+                               <p>Set contact properties, such as name and image.</p></li>\r
+                               <li><a href="#insert_contact">Inserting a Contact to the Database</a>\r
+                               <p>Insert a contact to the Contacts database.</p></li>\r
+                               <li><a href="#get_contact">Getting Contacts</a>\r
+                               <p>Retrieve single contacts or a list of contacts.</p></li>\r
+                               <li><a href="#update_contact">Updating a Contact</a>\r
+                               <p>Update contact details.</p></li>\r
+                               <li><a href="#delete_contact">Deleting a Person</a>\r
+                               <p>Delete the person from the database.</p></li>\r
+                               <li><a href="#link_contact">Linking and Unlinking Contacts</a>\r
+                               <p>Link and unlink contacts to persons.</p></li>\r
+                               <li><a href="#manage_contact">Managing Favorites</a>\r
+                               <p>Set or unset a person to be a favorite.</p></li>\r
+                               <li><a href="#monitor_contact">Monitoring Person Changes</a>\r
+                               <p>Receive notifications when changes occur in persons.</p></li>\r
+                               </ul></li>\r
+                       <li>Groups\r
+                               <ul><li><a href="#create">Creating a Group</a>\r
+                               <p>Create a new group.</p></li>\r
+                               <li><a href="#set">Setting Group Properties</a>\r
+                               <p>Set group properties, such as name and image.</p></li>\r
+                               <li><a href="#insert">Inserting a Group to the Database</a>\r
+                               <p>Insert a group to the Contacts database.</p></li>\r
+                               <li><a href="#get">Getting Groups</a>\r
+                               <p>Retrieve single groups or a list of groups.</p></li>\r
+                               <li><a href="#update">Updating a Group</a>\r
+                               <p>Update group details.</p></li>\r
+                               <li><a href="#delete">Deleting a Group</a>\r
+                               <p>Delete the group from the database.</p></li>\r
+                               <li><a href="#manage">Managing Group Members</a>\r
+                               <p>Add, remove, and retrieve group members.</p></li>\r
+                               <li><a href="#monitor">Monitoring Group Changes</a>\r
+                               <p>Receive notifications when changes occur in groups.</p></li>\r
+                               </ul></li>\r
+                       <li>vCards\r
+                               <ul>\r
+                               <li><a href="#make">Making a vCard</a>\r
+                               <p>Make a vCard stream from a person record.</p></li>\r
+                               <li><a href="#parse">Parsing a vCard</a>\r
+                               <p>Parse a vCard from a file and insert to the database.</p></li>\r
+                               </ul></li>\r
+                       <li>Speed dials \r
+                               <ul>\r
+                               <li><a href="#sd_create">Creating a Speed Dial</a>\r
+                               <p>Create a new speed dial.</p></li>\r
+                               <li><a href="#sd_set">Setting Speed Dial Properties</a>\r
+                               <p>Set speed dial properties, such as speed dial number and number ID.</p></li>\r
+                               <li><a href="#sd_insert">Inserting a Speed Dial to the Database</a>\r
+                               <p>Insert a speed dial to the database.</p></li>\r
+                               <li><a href="#sd_get">Getting Speed Dials</a>\r
+                               <p>Retrieve a single speed dial or a list of speed dials.</p></li>\r
+                               <li><a href="#sd_update">Updating a Speed Dial</a>\r
+                               <p>Update speed dial details.</p></li>\r
+                               <li><a href="#sd_delete">Deleting a Speed Dial</a>\r
+                               <p>Delete the speed dial from the database.</p></li>\r
+                               </ul></li>\r
+                       <li>Phone logs  \r
+                               <ul>\r
+                               <li><a href="#pl_create">Creating a Log</a>\r
+                               <p>Create a new log.</p></li>\r
+                               <li><a href="#pl_set">Setting Log Properties</a>\r
+                               <p>Set log properties, such as type, time, and address.</p></li>\r
+                               <li><a href="#pl_insert">Inserting a Log to the Database</a>\r
+                               <p>Insert a log to the database.</p></li>\r
+                               <li><a href="#pl_get">Getting Logs</a>\r
+                               <p>Retrieve single log or a list of logs.</p></li>\r
+                               <li><a href="#pl_delete">Deleting a Log</a>\r
+                               <p>Delete the log from the database.</p></li>\r
+                               </ul>                           \r
+                       </li></ul>\r
+               <h2>Follow-up</h2> \r
+               <p>Once we have learned the basics of the Contacts API, we can now move on to more advanced tasks, including:</p>\r
+               <ul>\r
+                       <li>Records\r
+                               <ul>\r
+                               <li><a href="#insert2">Inserting New Records</a>\r
+                               <p>Add new records to the database.</p></li>\r
+                               <li><a href="#get2">Getting Record Details</a>\r
+                               <p>Get information from existing records.</p></li>\r
+                               <li><a href="#list2">Handling Lists</a>\r
+                               <p>Iterate, filter, and sort record lists.</p></li>\r
+                               <li><a href="#delete2">Deleting Records</a>\r
+                               <p>Remove records from the database.</p></li>\r
+                               <li><a href="#link2">Linking Persons</a>\r
+                               <p>Assign several contacts to one person.</p></li>\r
+                               </ul></li>\r
+                       <li>Contact settings\r
+                               <ul>\r
+                               <li><a href="#settings">Managing Contact Settings</a>\r
+                               <p>Change the display settings of contacts.</p></li>                            \r
+                               <li><a href="#sim">Managing Contacts on the SIM Card</a>\r
+                               <p>Check that the SIM card is initialized and import contacts from the SIM card.</p></li>\r
+                               </ul></li>\r
+                       <li>vCard information\r
+                               <ul>\r
+                               <li><a href="#import">Importing from vCard</a>\r
+                               <p>Import contacts from vCard files.</p></li>\r
+                               <li><a href="#export">Exporting to vCard</a>\r
+                               <p>Export contacts to vCard files.</p></li>\r
+                               </ul></li>\r
+                               </ul>\r
+             \r
+\r
+ <h2 id="init" name="init">Initializing Contacts</h2>\r
+\r
+<p>To start with the Contact Service:</p>\r
+<ol><li>                       \r
+<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a> API, include the <span style="font-family: Courier New,Courier,monospace">&lt;contacts.h&gt;</span> header file in your application:</p>\r
+<pre class="prettyprint">\r
+#include &lt;contacts.h&gt;\r
+</pre></li>    \r
+<li>Most of the API functions return error codes, therefore define at the beginning of your code the <span style="font-family: Courier New,Courier,monospace">int</span> type, which is used to store error codes. Each time when a function returns error codes, verify the result of the operation.</li>\r
+<li><p>Call the <span style="font-family: Courier New,Courier,monospace">contacts_connect()</span> function, which connects your application with the Contact Service. Without this function, you cannot get access to the Contacts database.</p>\r
+<pre class="prettyprint">int error_code;\r
+error_code = contacts_connect();\r
+</pre></li>\r
+<li>When the Contacts APIs are not needed anymore, you have to disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function:\r
+<pre class="prettyprint">error_code = contacts_disconnect();\r
+</pre></li></ol>\r
+\r
+ <h2 id="create_contact" name="create_contact">Creating a Contact</h2>\r
+\r
+<p>Before you insert a record, you need to create a record handle. To create it and assign a new record:</p>\r
+<pre class="prettyprint">contacts_record_h contact;\r
+\r
+error_code = contacts_record_create(_contacts_contact._uri, &amp;contact);\r
+</pre>\r
+\r
+<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_contact._uri</span> to create contact type records.</p>\r
+<p>This record, however, contains no additional information, like a name or phone number. To add them, you must set contact properties by creating additional records and setting them as child records of the contact record. Note that records created this way are objects in the memory, with <span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variables as their handles. Changes made to these objects are not reflected in the database until your explicit request, using <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span>.</p>\r
+\r
+ <h2 id="set_contact" name="set_contact">Setting Contact Properties</h2>\r
+\r
+<p>To set the contact name, birthday, and phone number:</p>\r
+<ol><li>Add the contact name.\r
+<ol type="a"><li>Create a name record:\r
+<pre class="prettyprint">contacts_record_h name;\r
+\r
+error_code = contacts_record_create(_contacts_name._uri, &amp;name);\r
+</pre></li>\r
+<li>To set the first name, set the value of a string type property identified by <span style="font-family: Courier New,Courier,monospace">_contacts_name.first</span>.\r
+<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);\r
+</pre>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function is used to set string field values. There are other similar functions for other types, such as integer and double. The <span style="font-family: Courier New,Courier,monospace">name</span> variable is the record handle created above. The second argument – <span style="font-family: Courier New,Courier,monospace">_contacts_name.first</span> – is the property identifier, and the third argument is the value to be assigned.</p></li>\r
+<li>Set the last name similarly:\r
+<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.last, &quot;Smith&quot;);\r
+</pre>\r
+</li>\r
+<li>Associate the <span style="font-family: Courier New,Courier,monospace">name</span> record with the <span style="font-family: Courier New,Courier,monospace">contact</span> record, by setting the name as the contact&#39;s child record. In this example, it is achieved using <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span>.\r
+<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.name, name);\r
+</pre>\r
+<p>The second argument (<span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>) is the parent property to which the child record is assigned. See <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view description in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">Contacts</a> API. In the API, the <span style="font-family: Courier New,Courier,monospace">name</span> property is listed as one of the <span style="font-family: Courier New,Courier,monospace">record</span> type properties, which means that other records can be assigned to this property as child records (&quot;single&quot; means that only 1 <span style="font-family: Courier New,Courier,monospace">_contacts_name</span> type child record is allowed). The required type of the child record is specified in the API. </p></li></ol></li>\r
+<li>Add an image.\r
+<ol type="a"><li>Create an image record:\r
+<pre class="prettyprint">contacts_record_h image;\r
+\r
+error_code = contacts_record_create(_contacts_image._uri, &amp;image);\r
+</pre></li>\r
+<li>To set the image, set the value of a string type property identified by <span style="font-family: Courier New,Courier,monospace">_contacts_image.path</span>:\r
+<pre class="prettyprint">\r
+char *resource_path = app_get_resource_path();\r
+char caller_id_path[1024];\r
+snprintf(caller_id_path, sizeof(caller_id_path), &quot;%s/caller_id.jpg&quot;, resource_path);\r
+free(resource_path);\r
+error_code = contacts_record_set_str(image, _contacts_image.path, caller_id_path);\r
+</pre></li>\r
+<li>Set the image record as the contact&#39;s child record:\r
+<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.image, image);\r
+</pre></li></ol></li>\r
+<li>Add an event.\r
+<p>You can add a birthday event associated with the contact. An event contains the date and the event type, among other properties.</p>\r
+<ol type="a"><li>Create an event record:\r
+<pre class="prettyprint">contacts_record_h event;\r
+\r
+error_code = contacts_record_create(_contacts_event._uri, &amp;event);\r
+</pre></li>\r
+<li>Set the event date. The date is an integer, equal to year * 10000 + month * 100 + day.\r
+<pre class="prettyprint">int year = 1990;\r
+int month = 5;\r
+int day = 21;\r
+int int_date = year * 10000 + month * 100 + day;\r
+\r
+error_code = contacts_record_set_int(event, _contacts_event.date, int_date);\r
+</pre></li>\r
+<li>Set the event type to birthday. For available types, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">contacts_event_type_e</a> enumeration.\r
+<pre class="prettyprint">error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_BIRTH);\r
+</pre></li>\r
+<li>If the type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_EVENT_TYPE_CUSTOM</span>, you can set a custom label (see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html#CAPI_SOCIAL_CONTACTS_SVC_VIEW_MODULE_contacts_event">_contacts_event view</a>).\r
+<pre class="prettyprint">error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_CUSTOM);\r
+\r
+error_code = contacts_record_set_str(event, _contacts_event.label, &quot;Event description&quot;);\r
+</pre></li>\r
+<li>Set the event record as the contact&#39;s child record:\r
+<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.event, event);\r
+</pre></li></ol></li>\r
+<li>Add a phone number.\r
+<p>The phone number is added to a parent record using an alternative method.</p>\r
+<ol type="a"><li>Create a phone number record and set the <span style="font-family: Courier New,Courier,monospace">number</span> property:\r
+<pre class="prettyprint">contacts_record_h number;\r
+\r
+error_code = contacts_record_create(_contacts_number._uri, &amp;number);\r
+\r
+error_code = contacts_record_set_str(number, _contacts_number.number, &quot;+8210-1234-5678&quot;);\r
+</pre></li>\r
+<li>Set the number record as the contact&#39;s child record:\r
+<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.number, number);\r
+</pre></li></ol></li></ol>\r
+\r
+ <h2 id="insert_contact" name="insert_contact">Inserting a Contact to the Database</h2>\r
+\r
+<p>To insert a contact:</p>\r
+\r
+<ol><li><p>When the data is set for the contact and name records, you can insert them into the database. When you insert a parent record, all child records added to it using <span style="font-family: Courier New,Courier,monospace">contacts_record_add_child_record()</span> are inserted automatically.</p>\r
+\r
+<p>Insert a contact record:</p>\r
+\r
+<pre class="prettyprint">int id = -1;\r
+\r
+error_code = contacts_db_insert_record(contact, &amp;id);\r
+</pre></li>\r
+<li>When the records are in the database, the objects representing them in the memory are no longer needed and must be destroyed.\r
+<pre class="prettyprint">contacts_record_destroy(contact, true);</pre>\r
+<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, child records of the given record (objects representing them in the memory) are also destroyed. This does not depend on the way the child records were added.</p></li></ol>\r
+\r
+ <h2 id="get_contact" name="get_contact">Getting Contacts</h2>\r
+\r
+<p>To retrieve contact records:</p>\r
+\r
+<ol><li><p>A person is an aggregation of one or more contacts associated with the same person. The person is created automatically when inserting a contact record. To use the contact information in your application, you must learn to print basic person information.</p>\r
+\r
+<p>To get a single person record:</p>\r
+<ol type="a"><li>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">person_id</span>:</p>\r
+<pre class="prettyprint">contacts_record_h person  = NULL;\r
+const int person_id = ... // Acquire person ID\r
+int error_code;\r
+\r
+error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);\r
+</pre></li>\r
+<li>When you no longer need the person record, destroy the used structures:\r
+<pre class="prettyprint">\r
+contacts_record_destroy(speeddial, true);\r
+</pre></li></ol></li>\r
+\r
+<li>To get the total person record list:\r
+<ol type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>\r
+<pre class="prettyprint">contacts_list_h list = NULL;\r
+\r
+error_code = contacts_db_get_all_records(_contacts_person._uri, 0, 0, &amp;list);\r
+</pre></li>\r
+<li><p id="iterate_c" name="iterate_c">Iterate the list and read the records.</p>\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<ol type="a"><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>  \r
+  \r
+<pre class="prettyprint">contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;char* display_name;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_person.display_name, &amp;display_name);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;display_name: %s&quot;, display_name);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+}</pre></li>\r
+<li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_person_data_t</span> structure like below:\r
+<pre class="prettyprint">contacts_gl_person_data_t *gl_person_data = NULL;\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_person_data = _create_gl_person_data(record);\r
+&nbsp;&nbsp;&nbsp;// You can get, for example, display name:\r
+&nbsp;&nbsp;&nbsp;// gl_person_data-&gt;display_name\r
+\r
+&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+}</pre></li>\r
+<li>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.\r
+<pre class="prettyprint">typedef struct _contacts_gl_person_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;char *display_name;\r
+&nbsp;&nbsp;&nbsp;char *default_phone_number;\r
+&nbsp;&nbsp;&nbsp;contacts_list_h associated_contacts;\r
+} contacts_gl_person_data_t;\r
+\r
+static void _free_gl_person_data(contacts_gl_person_data_t *gl_person_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_person_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_person_data-&gt;display_name);\r
+&nbsp;&nbsp;&nbsp;free(gl_person_data-&gt;default_phone_number);\r
+&nbsp;&nbsp;&nbsp;contacts_list_destroy(gl_person_data-&gt;associated_contacts, true);\r
+&nbsp;&nbsp;&nbsp;free(gl_person_data);\r
+}\r
+\r
+static contacts_gl_person_data_t* _create_gl_person_data(contacts_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_gl_person_data_t *gl_person_data;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_person_data = malloc(sizeof(contacts_gl_person_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_person_data, 0x0, sizeof(contacts_gl_person_data_t));\r
+&nbsp;&nbsp;&nbsp;if (contacts_record_get_int(record, _contacts_person.id, &amp;gl_person_data-&gt;id) != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get person id failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (false == _get_display_name(record, &amp;gl_person_data-&gt;display_name))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_display_name() failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (false == _get_default_phone_number(record, &amp;gl_person_data-&gt;default_phone_number))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_default_phone_number() failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (false == _get_associated_contacts(record, &amp;gl_person_data-&gt;associated_contacts))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_associated_contacts() failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;_print_phone_numbers(gl_person_data-&gt;associated_contacts);\r
+&nbsp;&nbsp;&nbsp;_print_events(gl_person_data-&gt;associated_contacts);\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_person_data;\r
+}</pre></li>\r
+<li>Get person details.\r
+<ul>\r
+<li>Get the display name.\r
+<p>Assuming that you have the person record handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span>), you can access the <span style="font-family: Courier New,Courier,monospace">display_name</span> property. You can read the display name property and print it:</p>\r
+<pre class="prettyprint">static bool _get_display_name(contacts_record_h record, char **display_name)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(record, _contacts_person.display_name, display_name);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;display name: %s&quot;, *display_name);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}</pre></li>\r
+<li>Get associated contacts.\r
+<p>You can get the associated contacts of a person by query. In this example, you get the associated contact records.</p>\r
+<pre class="prettyprint">static bool _get_associated_contacts(contacts_record_h record, contacts_list_h *associated_contacts)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+&nbsp;&nbsp;&nbsp;int person_id;\r
+&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;\r
+&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_person.id, &amp;person_id);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = CONTACTS_ERROR_NONE;\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_contact._uri, &amp;query);\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_contact._uri, &amp;filter);\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_int(filter, _contacts_contact.person_id, CONTACTS_MATCH_EQUAL, person_id);\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, associated_contacts);\r
+\r
+&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);\r
+&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);\r
+\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}</pre></li>\r
+<li>Get phone numbers.\r
+<p>You can get the numbers of a person by iterating the contacts list. In this example, you get all the number records and print them.</p>\r
+<pre class="prettyprint">static void _print_phone_numbers(contacts_list_h associated_contacts)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+&nbsp;&nbsp;&nbsp;contacts_record_h contact;\r
+&nbsp;&nbsp;&nbsp;if (NULL == associated_contacts) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;associated_contacts is NULL&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(associated_contacts, &amp;contact) == CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_count(contact, _contacts_contact.number, &amp;count);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != error_code) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_record_get_child_record_count(%d)&quot;, error_code);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h number = NULL;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.number, i, &amp;number);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int number_id;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(number, _contacts_number.id, &amp;number_id);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;number id: %d&quot;, number_id);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *number_str = NULL;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(number, _contacts_number.number, &amp;number_str);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;number: %s&quot;, number_str);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(associated_contacts);\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre></li>\r
+<li>Get the default phone number.\r
+<p>If a contact has multiple phone numbers, one of them is defined as the default phone number. A person also has a default phone number. You can get the default phone number of a person by query. The Contact Service provides the <span style="font-family: Courier New,Courier,monospace">_contacts_person_number</span> view for getting the default phone number of a person. In the default phone number record, the <span style="font-family: Courier New,Courier,monospace">is_primary_default</span> property value is <span style="font-family: Courier New,Courier,monospace">true</span>. This example shows how to get the default phone number of a person by query.</p>\r
+<pre class="prettyprint">static bool _get_default_phone_number(contacts_record_h record, char **default_phone_number)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;\r
+&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;\r
+&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;\r
+&nbsp;&nbsp;&nbsp;contacts_record_h record_person_number = NULL;\r
+&nbsp;&nbsp;&nbsp;int person_id;\r
+&nbsp;&nbsp;&nbsp;int error_code = CONTACTS_ERROR_NONE;\r
+\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_int(record, _contacts_person.id, &amp;person_id);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_person_number._uri, &amp;query);\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_person_number._uri, &amp;filter);\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_bool(filter, _contacts_person_number.is_primary_default, true);\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, &amp;list);\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_list_get_current_record_p(list, &amp;record_person_number);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_str(record_person_number, _contacts_person_number.number, default_phone_number);\r
+\r
+&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);\r
+&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);\r
+&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);\r
+\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}</pre></li>\r
+<li>Get events.\r
+<p>You can get the events by iterating the contacts list.</p>\r
+<pre class="prettyprint">static void _print_events(contacts_list_h associated_contacts)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+&nbsp;&nbsp;&nbsp;contacts_record_h contact;\r
+&nbsp;&nbsp;&nbsp;if (NULL == associated_contacts) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;associated_contacts is NULL&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(associated_contacts, &amp;contact) == CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_count(contact, _contacts_contact.event, &amp;count);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != error_code) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_record_get_child_record_count(%d)&quot;, error_code);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h event = NULL;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, i, &amp;event);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int event_id;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(event, _contacts_event.id, &amp;event_id);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;event id: %d&quot;, event_id);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int date;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(event, _contacts_event.date, &amp;date);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;event: %d&quot;, date);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(associated_contacts);\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre></li></ul></li></ol></li>\r
+<li>When you no longer need the person record, destroy the used structures:\r
+<pre class="prettyprint">\r
+contacts_list_destroy(list, true);</pre>\r
+</li></ol></li>\r
+       <li>To get the filtered person record list:\r
+       <ol type="a">\r
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function to filter the list with parameters:\r
+               <ol type="a">\r
+                       <li>To get a person list with filtering, create a record list and a query:\r
+                       <pre class="prettyprint">\r
+contacts_list_h list = NULL;\r
+contacts_query_h query = NULL;\r
+\r
+error_code = contacts_query_create(_contacts_person._uri, &amp;query);\r
+</pre>\r
+                       </li>\r
+                       <li>Create a filter:\r
+                       <pre class="prettyprint">\r
+contacts_filter_h filter = NULL;\r
+\r
+error_code = contacts_filter_create(_contacts_person._uri, &amp;filter);\r
+</pre>\r
+                       </li>\r
+                       <li>Add a condition, such as display_name:\r
+                       <pre class="prettyprint">\r
+error_code = contacts_filter_add_str(filter, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, &quot;John&quot;);\r
+</pre>\r
+                       </li>\r
+                       <li>To add multiple conditions, you must define an operator between the conditions:\r
+                       <pre class="prettyprint">\r
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);\r
+\r
+error_code = contacts_filter_add_bool(filter, _contacts_person.is_favorite, true);\r
+</pre>\r
+                       </li>\r
+                       <li>Connect the query with the list:\r
+                       <pre class="prettyprint">\r
+error_code = contacts_query_set_filter(query, filter);\r
+\r
+error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);\r
+</pre>\r
+\r
+                       <p>The third parameter refers to a limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p>\r
+                       </li>\r
+                       <li>Free the filter and query:\r
+                       <pre class="prettyprint">\r
+contacts_filter_destroy(filter);\r
+contacts_query_destroy(query);\r
+</pre>\r
+                       </li>\r
+               </ol>\r
+               </li>\r
+               <li><a href="#iterate_c">Iterate the list and read the records.</a></li>\r
+               <li>When you no longer need the person record, destroy the used structures:\r
+               <pre class="prettyprint">\r
+contacts_list_destroy(list, true);\r
+</pre>\r
+               </li>\r
+       </ol>\r
+       </li>\r
+       <li>To get the searched person record list:\r
+       <ol type="a">\r
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function.\r
+               <p>The Contact Service provides an API for the contact search. The <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function provides an easy way to find records based on a given keyword. The following example shows how to find the contact records which contain the &quot;John&quot; keyword:</p>\r
+\r
+               <pre class="prettyprint">\r
+contacts_list_h list = NULL;\r
+\r
+error_code = contacts_db_search_records(_contacts_person._uri, &quot;John&quot;, 0, 0, &amp;list);\r
+</pre>\r
+               </li>\r
+               <li><a href="#iterate_c">Iterate the list and read the records.</a></li>\r
+               <li>When you no longer need the person record, destroy the used structures:\r
+               <pre class="prettyprint">\r
+contacts_list_destroy(list, true);\r
+</pre>\r
+               </li>\r
+       </ol>\r
+       </li>\r
+</ol>\r
+\r
+ <h2 id="update_contact" name="update_contact">Updating a Contact</h2>\r
+\r
+<p>To change the name, birthday, and phone number of an existing contact:</p>\r
+<ol><li>Get the contact.\r
+<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the contact ID:</p>\r
+<pre class="prettyprint">int contact_id = ... // Acquire contact ID\r
+contacts_record_h contact = NULL;\r
+\r
+error_code = contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact);\r
+</pre>\r
+<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p></li>\r
+<li>Change the name.\r
+<ol type="a"><li><p>To modify the contact name, get the name record with the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function, which provides a list of the child records of a given type.</p>\r
+<pre class="prettyprint">contacts_record_h name = NULL;\r
+\r
+error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name, 0, &amp;name);\r
+</pre>\r
+\r
+<p>The function parameters are the parent record, the child record type, a child record index, and the resulting child record. Since there can be only one child record of type <span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>, the index is set to 0 to get the first (and only) child record.</p></li>\r
+\r
+<li>Change the first name:\r
+<pre class="prettyprint">error_code = contacts_record_set_str(name, _contacts_name.first, &quot;Mark&quot;);\r
+</pre>\r
+<p>This only changes the data in the memory object, not in the database. To insert the new value, the <span style="font-family: Courier New,Courier,monospace">name</span> record must be inserted. However, if you acquire this record using <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> (as in this example), you only need to update the parent record.</p></li></ol></li>\r
+<li>Change the birthday event.\r
+<ol type="a"><li>If only 1 event is set for the contact, you can call <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> to get the event record. If there are more events, you must iterate over the child records.\r
+<pre class="prettyprint">contacts_record_h event = NULL;\r
+error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, 0, &amp;event);\r
+</pre></li>\r
+\r
+<li>Update the record:\r
+<pre class="prettyprint">int new_date = 1990 * 10000 + 6 * 100 + 21;\r
+\r
+error_code = contacts_record_set_int(event, _contacts_event.date, new_date);\r
+</pre></li></ol></li>\r
+<li>Update the contact record.\r
+<p>Update the contact. Any changes in the child records (such as name and birthday) are also inserted.</p>\r
+<pre class="prettyprint">error_code = contacts_db_update_record(contact);\r
+</pre></li>\r
+<li>When the record handle is no more needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory:\r
+<pre class="prettyprint">contacts_record_destroy(contact, true);</pre></li></ol>\r
+\r
+ <h2 id="delete_contact" name="delete_contact">Deleting a Person</h2>\r
+\r
+<p>To delete a person, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_person._uri</span> as the first parameter and the person ID as the second one:</p>\r
+<pre class="prettyprint">int person_id = ... // Acquire person ID\r
+\r
+error_code = contacts_db_delete_record(_contacts_person._uri, person_id);\r
+</pre>\r
+\r
+ <h2 id="link_contact" name="link_contact">Linking and Unlinking Contacts</h2>\r
+\r
+<p>To link and unlink contacts (manually and automatically):</p>\r
+<ul><li>To link a person to another person manually, call the <span style="font-family: Courier New,Courier,monospace">contacts_person_link_person()</span> function with base person ID as the first parameter and another person ID as the second one.\r
+<pre class="prettyprint">int person_id1 = ... // Acquire base person ID\r
+int person_id2 = ... // Acquire another person ID\r
+\r
+error_code = contacts_person_link_person(person_id1, person_id2);\r
+</pre></li>\r
+<li>To link a contact automatically to a person when creating, set the <span style="font-family: Courier New,Courier,monospace">link_mode</span> property to <span style="font-family: Courier New,Courier,monospace">CONTACTS_CONTACT_LINK_MODE_NONE</span> when inserting.\r
+<p>The Contact Service determines the link based on the <span style="font-family: Courier New,Courier,monospace">number</span> and <span style="font-family: Courier New,Courier,monospace">email</span> properties. If the links leads to  a contact in the same address book, the link does not work.</p>\r
+<pre class="prettyprint">contacts_record_h contact = NULL;\r
+\r
+error_code = CONTACTS_ERROR_NONE;\r
+error_code += contacts_record_create(_contacts_contact._uri, &amp;contact);\r
+error_code += contacts_record_set_int(contact, _contacts_contact.link_mode, CONTACTS_CONTACT_LINK_MODE_NONE);\r
+\r
+contacts_record_h name = NULL;\r
+error_code += contacts_record_create(_contacts_name._uri, &amp;name);\r
+error_code += contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);\r
+error_code += contacts_record_add_child_record(contact, _contacts_contact.name, name);\r
+\r
+contacts_record_h number = NULL;\r
+error_code += contacts_record_create(_contacts_number._uri, &amp;number);\r
+error_code += contacts_record_set_str(number, _contacts_number.number, &quot;+8210-1234-5678&quot;);\r
+error_code += contacts_record_add_child_record(contact, _contacts_contact.number, number);\r
+\r
+// Contact is linked automatically if an existing person has the same number in a different address book\r
+error_code += contacts_db_insert_record(contact, NULL);\r
+\r
+contacts_record_destroy(contact, true);</pre></li>\r
+<li>To unlink a contact from a person, call the <span style="font-family: Courier New,Courier,monospace">contacts_person_unlink_contact()</span> function with the base person ID as the first parameter and the contact ID as the second one. A new person is created when unlinking. You can get the new person ID as the third parameter.\r
+<pre class="prettyprint">int person_id = ... // Acquire base person ID\r
+int contact_id = ... // Acquire contact ID\r
+int unlinked_person_id;\r
+\r
+error_code = contacts_person_unlink_contact(person_id, contact_id, &amp;unlinked_person_id);\r
+</pre></li></ul>\r
+\r
+ <h2 id="manage_contact" name="manage_contact">Managing Favorites</h2>\r
+\r
+<p>To manage person favorites:</p>\r
+<ul><li>To set a person as favorite when creating a contact, use the <span style="font-family: Courier New,Courier,monospace">is_favorite</span> property of the <span style="font-family: Courier New,Courier,monospace">person</span> record. If the property is set to <span style="font-family: Courier New,Courier,monospace">true</span> when creating a contact, the person is set as favorite:\r
+<pre class="prettyprint">contacts_record_h contact = NULL;\r
+\r
+error_code = CONTACTS_ERROR_NONE;\r
+error_code += contacts_record_create(_contacts_contact._uri, &amp;contact);\r
+error_code += contacts_record_set_bool(contact, _contacts_contact.is_favorite, true);\r
+// Set other properties\r
+\r
+// New person is set as favorite\r
+error_code += contacts_db_insert_record(contact, NULL);\r
+\r
+contacts_record_destroy(contact, true);</pre></li>\r
+<li>To set an existing person as favorite, update the <span style="font-family: Courier New,Courier,monospace">person</span> record:\r
+<pre class="prettyprint">int person_id = ... // Acquire person ID\r
+contacts_record_h person = NULL;\r
+\r
+error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);\r
+\r
+error_code = contacts_record_set_bool(person, _contacts_person.is_favorite, true);\r
+\r
+error_code = contacts_db_update_record(person);\r
+\r
+contacts_record_destroy(person, true);</pre></li>\r
+<li>To unset a favorite:\r
+<pre class="prettyprint">int person_id = ... // Acquire person ID\r
+contacts_record_h person = NULL;\r
+\r
+error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);\r
+\r
+error_code = contacts_record_set_bool(person, _contacts_person.is_favorite, false);\r
+\r
+error_code = contacts_db_update_record(person);\r
+\r
+contacts_record_destroy(person, true);</pre></li></ul>\r
+\r
+ <h2 id="monitor_contact" name="monitor_contact">Monitoring Person Changes</h2>\r
+\r
+<p>To register a callback function to listen for person changes:</p>\r
+<ol><li>Register the callback function.\r
+<pre class="prettyprint">error_code = contacts_db_add_changed_cb(_contacts_person._uri, _person_changed_callback, NULL);\r
+</pre></li>\r
+<li>Define the callback function.\r
+<p>The callback function is called when the person data changes. The code below shows how to update person details in the callback function.</p>\r
+<pre class="prettyprint">static contacts_gl_person_data_t *_gl_person_data = ...\r
+void _person_changed_callback(const char *view_uri, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _contacts_person._uri))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;if (_gl_person_data == NULL)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;int person_id = _gl_person_data-&gt;id;\r
+&nbsp;&nbsp;&nbsp;_free_gl_person_data(_gl_person_data);\r
+&nbsp;&nbsp;&nbsp;_gl_person_data = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;contacts_record_h record = NULL;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;record);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;_gl_person_data = _create_gl_person_data(record);\r
+&nbsp;&nbsp;&nbsp;// Use _gl_person_data\r
+\r
+&nbsp;&nbsp;&nbsp;contacts_record_destroy(record, true);\r
+}</pre></li></ol>\r
+\r
+ <h2 id="create" name="create">Creating a Group</h2>\r
+\r
+<p>To create a new group record:</p>\r
+<pre class="prettyprint">contacts_record_h group = NULL;\r
+\r
+error_code = contacts_record_create(_contacts_group._uri, &amp;group);\r
+</pre>\r
+\r
+ <h2 id="set" name="set">Setting Group Properties</h2>\r
+\r
+<p>To set group properties:</p>\r
+\r
+<ol><li>Set the group name.\r
+<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function sets the name of the group when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_group.name</span>. This function takes the group record handle as the first argument, and the name, which is a string value, as the third argument. The name argument is taken from the UI part of the application. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service if needed.</p>\r
+<pre class="prettyprint">error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Neighbors&quot;);\r
+</pre></li>\r
+<li>Set an image and ringtone path.\r
+<p>You can set the other properties similarly. To set the image and ringtone path, call the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function and check the error codes.</p>\r
+<pre class="prettyprint">\r
+char *resource_path = app_get_resource_path();\r
+char temp_path[1024];\r
+snprintf(temp_path, sizeof(temp_path), &quot;%s/group_image.jpg&quot;, resource_path);\r
+error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);\r
+snprintf(temp_path, sizeof(temp_path), &quot;%s/ringtone.mp3&quot;, resource_path);\r
+free(resource_path);\r
+error_code = contacts_record_set_str(group, _contacts_group.ringtone_path, temp_path);\r
+</pre></li></ol>\r
+\r
+ <h2 id="insert" name="insert">Inserting a Group to the Database</h2>\r
+\r
+<p>To insert a group record:</p>\r
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created group into the Contacts database.\r
+<p> The first argument is the group record handle, the second is the record ID. A unique ID is assigned to the record your are adding, and is returned as the third argument of the called function. If the group is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.</p>\r
+<pre class="prettyprint">int added_group_id = -1;\r
+\r
+error_code = contacts_db_insert_record(group, &amp;added_group_id);\r
+</pre></li>\r
+<li>After inserting, the used structures have to be destroyed:\r
+<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol>\r
+\r
+ <h2 id="get" name="get">Getting Groups</h2>\r
+\r
+<p>To get all of the group records one by one, or to filter them by one of the properties:</p>\r
+\r
+<ol><li>To get a single group record:\r
+<ol type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">group_id</span>:</p>\r
+<pre class="prettyprint">contacts_record_h group;\r
+int group_id = ... // Acquire group ID\r
+error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);\r
+</pre></li>\r
+<li>When you no longer need the group record, destroy the used structures:\r
+\r
+<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol></li>\r
+\r
+<li>To get the total group record list:\r
+<ol type="a"><li>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>\r
+<pre class="prettyprint">contacts_list_h list = NULL;\r
+error_code = contacts_db_get_all_records(_contacts_group._uri, 0, 0, &amp;list);\r
+</pre></li>\r
+\r
+<li>To iterate the list and read the records:\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+               <ol type="a">\r
+                       <li>\r
+                       <p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>\r
+\r
+                       <pre class="prettyprint">\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;char* name;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_group.name, &amp;name);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, "group name: %s", name);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre>\r
+                       </li>\r
+                       <li>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_group_data_t</span> structure like below:\r
+                       <pre class="prettyprint">\r
+contacts_gl_group_data_t *gl_group_data = NULL;\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_group_data = _create_gl_group_data(record);\r
+&nbsp;&nbsp;&nbsp;// You can get, for example, display name:\r
+&nbsp;&nbsp;&nbsp;// gl_group_data-&gt;name\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre>\r
+                       </li>\r
+                       <li>The memory for the record data is allocated, and the data is copied from the record by the functions listed in the following snippet:\r
+                       <pre class="prettyprint">\r
+typedef struct _contacts_gl_group_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;char *name;\r
+&nbsp;&nbsp;&nbsp;char *image_path;\r
+&nbsp;&nbsp;&nbsp;char *ringtone_path;\r
+} contacts_gl_group_data_t;\r
+\r
+static void _free_gl_group_data(contacts_gl_group_data_t *gl_group_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_group_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;name);\r
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;image_path);\r
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;ringtone_path);\r
+&nbsp;&nbsp;&nbsp;free(gl_group_data);\r
+}\r
+\r
+static contacts_gl_group_data_t* _create_gl_group_data(contacts_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_gl_group_data_t *gl_group_data;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_group_data = malloc(sizeof(contacts_gl_group_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_group.id, &amp;gl_group_data-&gt;id))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.name, &amp;gl_group_data-&gt;name))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.image_path, &amp;gl_group_data-&gt;image_path))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.ringtone_path, &amp;gl_group_data-&gt;ringtone_path))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_group_data;\r
+}</pre>\r
+                       </li>\r
+               </ol>\r
+               </li>\r
+               <li>When you no longer need the group record, destroy the used structures:\r
+               <pre class="prettyprint">\r
+contacts_list_destroy(list, true);\r
+</pre>\r
+               </li>\r
+       </ol>\r
+       </li>\r
+       <li>To get the filtered group record list:\r
+       <ol type="a">\r
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function to filter the list with parameters:\r
+               <ol type="a">\r
+<li>To get groups with filtering, you need a record list and a query:\r
+<pre class="prettyprint">contacts_list_h list = NULL;\r
+contacts_query_h query = NULL;\r
+\r
+error_code = contacts_query_create(_contacts_group._uri, &amp;query);\r
+</pre></li>\r
+<li>Before getting the groups, filter the list. There is a possibility to filter based on various parameters. To create a filter, the following code is used:\r
+<pre class="prettyprint">contacts_filter_h filter = NULL;\r
+\r
+error_code = contacts_filter_create(_contacts_group._uri, &amp;filter);\r
+</pre></li>\r
+<li>Add a condition, such as group name:\r
+<pre class="prettyprint">error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, &quot;neighbors&quot;);\r
+</pre>\r
+<p>That way only groups which contain the name &quot;neighbors&quot; are retrieved. To use multiple conditions, add an operator between them:</p>\r
+<pre class="prettyprint">error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);\r
+\r
+error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, &quot;friend&quot;);\r
+</pre></li>\r
+<li>Connect the query with the list:\r
+<pre class="prettyprint">error_code = contacts_query_set_filter(query, filter);\r
+\r
+error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);\r
+</pre>\r
+<p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p></li>\r
+<li>Free the filter and query:\r
+<pre class="prettyprint">\r
+contacts_filter_destroy(filter);\r
+contacts_query_destroy(query);\r
+</pre></li>\r
+</ol></li>\r
+<li>To iterate the list and read the records:\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<ol type="a"><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>\r
+\r
+<pre class="prettyprint">contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;char* name;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_group.name, &amp;name);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;group name: %s&quot;, name);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre></li>\r
+<li><p>If you want to get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_group_data_t</span> structure like below: </p>\r
+<pre class="prettyprint">contacts_gl_group_data_t *gl_group_data = NULL;\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_group_data = _create_gl_group_data(record);\r
+&nbsp;&nbsp;&nbsp;// You can get, for example, display name:\r
+&nbsp;&nbsp;&nbsp;// gl_group_data-&gt;name\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre></li>\r
+<li><p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>\r
+<pre class="prettyprint">typedef struct _contacts_gl_group_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;char *name;\r
+&nbsp;&nbsp;&nbsp;char *image_path;\r
+&nbsp;&nbsp;&nbsp;char *ringtone_path;\r
+} contacts_gl_group_data_t;\r
+\r
+static void _free_gl_group_data(contacts_gl_group_data_t *gl_group_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_group_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;name);\r
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;image_path);\r
+&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;ringtone_path);\r
+&nbsp;&nbsp;&nbsp;free(gl_group_data);\r
+}\r
+\r
+static contacts_gl_group_data_t* _create_gl_group_data(contacts_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_gl_group_data_t *gl_group_data;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_group_data = malloc(sizeof(contacts_gl_group_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_group.id, &amp;gl_group_data-&gt;id))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.name, &amp;gl_group_data-&gt;name))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.image_path, &amp;gl_group_data-&gt;image_path))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.ringtone_path, &amp;gl_group_data-&gt;ringtone_path))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_group_data;\r
+}</pre></li></ol></li>\r
+<li>When you no longer need the group record, destroy the used structures:\r
+<pre class="prettyprint">\r
+contacts_list_destroy(list, true);</pre>\r
+</li></ol></li></ol>\r
+\r
+ <h2 id="update" name="update">Updating a Group</h2>\r
+\r
+<p>To change the name and image of an existing person:</p>\r
+<ol><li>Get the group.\r
+<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h type</span> variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the group ID:</p>\r
+<pre class="prettyprint">int group_id = ... // Acquire group ID\r
+contacts_record_h group = NULL;\r
+\r
+error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);\r
+</pre>\r
+<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>\r
+</li>\r
+<li>Change the name and image.\r
+<p>Change the name and image property using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_str()</span> function.</p>\r
+<pre class="prettyprint">error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Family&quot;);\r
+char *resource_path = app_get_resource_path();\r
+char temp_path[1024];\r
+snprintf(temp_path, sizeof(temp_path), &quot;%s/group_image_new.jpg&quot;, resource_path);\r
+free(resource_path);\r
+error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);\r
+</pre></li>\r
+\r
+<li>Update the group record.\r
+<p>Update the group. The above changes (name and image) are also inserted.</p>\r
+<pre class="prettyprint">error_code = contacts_db_update_record(group);\r
+</pre></li>\r
+<li>Clean up.\r
+<p>When the record handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory.</p>\r
+<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol>\r
+\r
+ <h2 id="delete" name="delete">Deleting a Group</h2>\r
+\r
+<p>To delete a group, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span> as the first parameter and group ID as the second one;</p>\r
+<pre class="prettyprint">int group_id = ... // Acquire group ID\r
+\r
+error_code = contacts_db_delete_record(_contacts_group._uri, group_id);\r
+</pre>\r
+\r
+ <h2 id="manage" name="manage">Managing Group Members</h2>\r
+\r
+<p>To manage group members:</p>\r
+\r
+<ul><li>To add a group member, you need to know the contact ID and the group ID. Then you need to call <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span>.\r
+<pre class="prettyprint">int contact_id = ... // Acquire contact ID\r
+int group_id = ... // Acquire group ID\r
+\r
+error_code = contacts_group_add_contact(group_id, contact_id);\r
+</pre></li>\r
+<li>To remove a contact from a group, call <span style="font-family: Courier New,Courier,monospace">contacts_group_remove_contact()</span>.\r
+<pre class="prettyprint">\r
+error_code = contacts_group_remove_contact(group_id, contact_id);\r
+</pre></li>\r
+\r
+<li>To get a list of persons assigned to a specific group:\r
+<ol><li>Get the records of type <span style="font-family: Courier New,Courier,monospace">_contacts_person_group_assigned</span>:\r
+<pre class="prettyprint">\r
+contacts_query_h query = NULL;\r
+contacts_filter_h filter = NULL;\r
+contacts_list_h list = NULL;\r
+\r
+contacts_query_create(_contacts_person_group_assigned._uri, &amp;query);\r
+contacts_filter_create(_contacts_person_group_assigned._uri, &amp;filter);\r
+contacts_filter_add_int(filter, _contacts_person_group_assigned.group_id, CONTACTS_MATCH_EQUAL, group_id);\r
+contacts_query_set_filter(query, filter);\r
+contacts_db_get_records_with_query(query, 0, 0, &amp;list);</pre></li>\r
+<li>Iterate over the list elements.\r
+<pre class="prettyprint">contacts_record_h person = NULL;\r
+int error_code;\r
+\r
+while (contacts_list_get_current_record_p(list, &amp;person) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;int person_id;\r
+&nbsp;&nbsp;&nbsp;contacts_record_get_int(person, _contacts_person_group_assigned.person_id, &amp;person_id);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Person id: %d&quot;, person_id);\r
+\r
+&nbsp;&nbsp;&nbsp;char *display_name;\r
+&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(person, _contacts_person_group_assigned.display_name, &amp;display_name);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Display name: %s&quot;, display_name);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}</pre></li>\r
+<li>Destroy the filter, query, and list handles when no longer needed.\r
+<pre class="prettyprint">contacts_list_destroy(list, true);\r
+contacts_filter_destroy(filter);\r
+contacts_query_destroy(query);</pre></li></ol></li></ul>\r
+\r
+ <h2 id="monitor" name="monitor">Monitoring Group Changes</h2>\r
+\r
+<p>To register a callback function to listen for group changes:</p>\r
+<ol><li>Register the callback function.\r
+<p>The code below shows how to register a callback function to listen for group changes.</p>\r
+<pre class="prettyprint">error_code = contacts_db_add_changed_cb(_contacts_group._uri, _group_changed_callback, NULL);\r
+</pre></li>\r
+<li>Define the callback function.\r
+<p>The callback function is called when the group data changes. The code below shows how to update the group details in the callback function.</p>\r
+<pre class="prettyprint">static contacts_gl_group_data_t *_gl_group_data = ...\r
+static void _group_changed_callback(const char *view_uri, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _contacts_group._uri))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;if (_gl_group_data == NULL)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;int group_id = _gl_group_data-&gt;id;\r
+&nbsp;&nbsp;&nbsp;_free_gl_group_data(_gl_group_data);\r
+&nbsp;&nbsp;&nbsp;_gl_group_data = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;contacts_record_h record = NULL;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;record);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;_gl_group_data = _create_gl_group_data(record);\r
+&nbsp;&nbsp;&nbsp;// Use _gl_group_data\r
+\r
+&nbsp;&nbsp;&nbsp;contacts_record_destroy(record, true);\r
+}</pre></li></ol>\r
+\r
+ <h2 id="make" name="make">Making a vCard</h2>\r
+\r
+<p>To make a vCard stream from a person record:</p>\r
+<ol><li>Get the person record by the person ID.\r
+<pre class="prettyprint">int person_id = ... // Acquire person ID\r
+\r
+contacts_record_h record = NULL;\r
+error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;record);\r
+</pre></li>\r
+<li>Make the vCard stream by the person record.\r
+<pre class="prettyprint">char *vcard_stream = NULL;\r
+error_code = contacts_vcard_make_from_person(record, &amp;vcard_stream);\r
+</pre>\r
+\r
+    <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">The Contact Service API allows you to make a vCard stream from a person, contact, and my profile records:\r
+<pre class="prettyprint">int contacts_vcard_make_from_person(contacts_record_h person, char **vcard_stream);\r
+int contacts_vcard_make_from_contact(contacts_record_h contact, char **vcard_stream);\r
+int contacts_vcard_make_from_my_profile(contacts_record_h my_profile, char **vcard_stream);</pre>\r
+</td>\r
+    </tr>\r
+   </tbody>\r
+  </table> </li>\r
+\r
+<li>Destroy the handle when it is no longer needed.\r
+<pre class="prettyprint">free(vcard_stream);\r
+contacts_record_destroy(record, true);</pre>\r
+ </li>   </ol>\r
+\r
+ <h2 id="parse" name="parse">Parsing a vCard</h2>\r
+\r
+<p>To parse a vCard from a file and insert to the database:</p>\r
+<pre class="prettyprint">\r
+char *resource_path = app_get_resource_path();\r
+char temp_path[1024];\r
+snprintf(temp_path, sizeof(temp_path), &quot;%s/vcard.vcf&quot;, resource_path);\r
+free(resource_path);\r
+error_code = contacts_vcard_parse_to_contact_foreach(temp_path, // File path of vCard\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_vcard_parse_cb, // Callback function to invoke\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL); // User data to be passed to the callback function\r
+</pre>\r
+\r
+<p>The vCard stream contains multiple contact objects. The callback function is called after parsing each contact. If you return <span style="font-family: Courier New,Courier,monospace">false</span> on the callback function, parsing stops.</p>\r
+<pre class="prettyprint">static bool _vcard_parse_cb(contacts_record_h contact, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == contact)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+\r
+&nbsp;&nbsp;&nbsp;int contact_id = -1;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_db_insert_record(contact, &amp;contact_id);\r
+&nbsp;&nbsp;&nbsp;// Use the contact record\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}</pre>\r
+\r
+\r
+ <h2 id="sd_create" name="sd_create">Creating a Speed Dial</h2>\r
+\r
+<p>To create a speed dial record:</p>\r
+<pre class="prettyprint">\r
+contacts_record_h speeddial;\r
+error_code = contacts_record_create(_contacts_speeddial._uri, &amp;speeddial);\r
+</pre>\r
+<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> to create speed dial type records.</p>\r
+\r
+ <h2 id="sd_set" name="sd_set">Setting Speed Dial Properties</h2>\r
+\r
+<p>To set speed dial properties:</p>\r
+<ol>\r
+<li>Set the speed dial number.\r
+<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function sets the speed dial type when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial.speeddial_number</span>. This function takes the speed dial record handle as the first argument, and the speed dial number, which is an integer value, as the third argument. The function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, or disconnecting from the service.</p>\r
+<pre class="prettyprint">\r
+int speeddial_number = ... // Acquire speed dial number\r
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial.speeddial_number, speeddial_number);\r
+</pre>\r
+</li>\r
+\r
+<li>Set the number ID:\r
+<pre class="prettyprint">\r
+int number_id = ... // Acquire number id\r
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial. number_id, number_id);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+    <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">This tutorial does not describe how to insert a number. For more information, see the <a href="contact_tutorial_n.htm">Contact Tutorial</a>.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+  \r
+ <h2 id="sd_insert" name="sd_insert">Inserting a Speed Dial to the Database</h2>\r
+\r
+<p>To insert a speed dial record:</p>\r
+<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created speed dial into the Contacts database. The first argument is the speed dial record handle, the second is the speed dial number. If the speed dial is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.\r
+<pre class="prettyprint">\r
+int added_speeddial_id = -1;\r
+\r
+error_code = contacts_db_insert_record(speeddial, &amp;added_speeddial_id);    \r
+</pre>\r
+</li>\r
+\r
+<li>After inserting the speed dial record, destroy the used structures:\r
+<pre class="prettyprint">\r
+contacts_record_destroy(speeddial, true);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="sd_get" name="sd_get">Getting Speed Dials</h2>\r
+\r
+<p>To get all of the speed dial records one by one, or to filter them by one of the properties:</p>\r
+<ol>\r
+<li>To get a single speed dial record:\r
+<ol type="a">\r
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">speeddial_id</span>:</p>\r
+<pre class="prettyprint">\r
+contacts_record_h speeddial;\r
+int speeddial_id = ... // Acquire speed dial ID\r
+error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_id, &amp;speeddial);\r
+</pre>\r
+</li>\r
+\r
+<li>After finish using the speed dial record, destroy the used structures:\r
+\r
+<pre class="prettyprint">contacts_record_destroy(speeddial, true);</pre></li></ol></li>\r
+\r
+<li>To get the total speed dial record list:\r
+<ol type="a"><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:\r
+<pre class="prettyprint">\r
+contacts_list_h list = NULL;\r
+error_code = contacts_db_get_all_records(_contacts_speeddial._uri, 0, 0, &amp;list);\r
+</pre>\r
+</li>\r
+\r
+<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.\r
+               \r
+         <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>     \r
+               \r
+\r
+               <pre class="prettyprint">\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;int number;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;number);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;speed dial number: %d&quot;, number);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}\r
+</pre>\r
+\r
+               <p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_speeddial_data_t</span> structure:</p>\r
+\r
+               <pre class="prettyprint">\r
+contacts_gl_speeddial_data_t *gl_speeddial_data = NULL;\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_speeddial_data = _create_gl_speeddial_data(record);\r
+\r
+&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}\r
+</pre>\r
+\r
+               <p>The memory for the record data is allocated, and the data is copied from the record by the functions shown in the following snippet:</p>\r
+\r
+               <pre class="prettyprint">\r
+typedef struct _contacts_gl_speeddial_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int speeddial_number;\r
+&nbsp;&nbsp;&nbsp;char *number;\r
+&nbsp;&nbsp;&nbsp;char *display_name;\r
+&nbsp;&nbsp;&nbsp;char *image_thumbnail_path;\r
+} contacts_gl_speeddial_data_t;\r
+\r
+static void _free_gl_speeddial_data(contacts_gl_speeddial_data_t *gl_speeddial_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_speeddial_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;number);\r
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;display_name);\r
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;image_thumbnail_path);\r
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data);\r
+}\r
+\r
+static contacts_gl_speeddial_data_t* _create_gl_speeddial_data(contacts_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_gl_speeddial_data_t *gl_speeddial_data;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;gl_speeddial_data-&gt;speeddial_number))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.number, &amp;gl_speeddial_data-&gt;number))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.display_name, &amp;gl_speeddial_data-&gt;display_name))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.image_thumbnail_path, &amp;gl_speeddial_data-&gt;image_thumbnail_path))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_speeddial_data;\r
+}\r
+</pre>\r
+               </li>\r
+               <li>After you no longer need the speed dial record, destroy the used structures:\r
+               <pre class="prettyprint">\r
+contacts_list_destroy(list, true);</pre>\r
+               </li>\r
+       </ol>\r
+       </li>\r
+       <li>To get the filtered speed dial record list:\r
+       <ol type="a">\r
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function.\r
+               <ol type="a">\r
+                       <li>Create a record list and query:\r
+\r
+       <pre class="prettyprint">\r
+contacts_list_h list = NULL;\r
+contacts_query_h query = NULL;\r
+\r
+error_code = contacts_query_create(_contacts_speeddial._uri, &amp;query);\r
+</pre>\r
+       </li>\r
+       <li>Filter the list before getting the speed dials. It is possible to filter with various parameters. To create a filter:\r
+       <pre class="prettyprint">\r
+contacts_filter_h filter = NULL;\r
+\r
+error_code = contacts_filter_create(_contacts_speeddial._uri, &amp;filter);\r
+</pre>\r
+       </li>\r
+\r
+       <li>Add a condition, such as the speed dial number.\r
+       <p>The following example retrieves only those speed dials whose numbers are less than 3.</p>\r
+       <pre class="prettyprint">\r
+error_code = contacts_filter_add_int(filter, _contacts_speeddial.speeddial_number, CONTACTS_MATCH_LESS_THAN, 3);\r
+</pre>\r
+       <p>To use multiple conditions, add an operator between them:</p>\r
+       <pre class="prettyprint">\r
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);\r
+\r
+error_code = contacts_filter_add_int(filter, _contacts_speeddial.speeddial_number, CONTACTS_MATCH_GREATER_THAN, 15);\r
+</pre>\r
+       </li>\r
+\r
+       <li>Connect the query with the list: \r
+       <pre class="prettyprint">\r
+error_code = contacts_query_set_filter(query, filter);\r
+\r
+error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);\r
+</pre>\r
+       <p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. Remember that after all operations, the list must be released.</p>\r
+       </li>\r
+\r
+<li>Free the filter and query: \r
+<pre class="prettyprint">\r
+contacts_filter_destroy(filter);\r
+contacts_query_destroy(query);\r
+</pre>\r
+</li>\r
+</ol>\r
+</li>\r
+\r
+<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<pre class="prettyprint">\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;int number;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;number);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;speed dial number: %d&quot;, number);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}\r
+</pre>\r
+\r
+<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_speeddial_data_t</span> structure:</p>\r
+<pre class="prettyprint">\r
+contacts_gl_speeddial_data_t *gl_speeddial_data = NULL;\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_speeddial_data = _create_gl_speeddial_data(record);\r
+\r
+&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}\r
+</pre>\r
+<p>The memory for the record data is allocated, and the data is copied from the record by the functions shown in the following snippet.</p>\r
+<pre class="prettyprint">\r
+typedef struct _contacts_gl_speeddial_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int speeddial_number;\r
+&nbsp;&nbsp;&nbsp;char *number;\r
+&nbsp;&nbsp;&nbsp;char *display_name;\r
+&nbsp;&nbsp;&nbsp;char *image_thumbnail_path;\r
+} contacts_gl_speeddial_data_t;\r
+\r
+static void _free_gl_speeddial_data(contacts_gl_speeddial_data_t *gl_speeddial_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_speeddial_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;number);\r
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;display_name);\r
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;image_thumbnail_path);\r
+&nbsp;&nbsp;&nbsp;free(gl_speeddial_data);\r
+}\r
+\r
+static contacts_gl_speeddial_data_t* _create_gl_speeddial_data(contacts_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_gl_speeddial_data_t *gl_speeddial_data;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_speeddial.speeddial_number, &amp;gl_speeddial_data-&gt;speeddial_number))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.number, &amp;gl_speeddial_data-&gt;number))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.display_name, &amp;gl_speeddial_data-&gt;display_name))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_speeddial.image_thumbnail_path, &amp;gl_speeddial_data-&gt;image_thumbnail_path))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_speeddial_data;\r
+}\r
+</pre>\r
+</li>\r
+<li>When you no longer need the speed dial record, destroy the used structures:\r
+<pre class="prettyprint">\r
+contacts_list_destroy(list, true);</pre></li>\r
+</ol></li></ol>\r
+\r
+ <h2 id="sd_update" name="sd_update">Updating a Speed Dial</h2>\r
+\r
+<p>To change the number ID of an existing speed dial:</p>\r
+<ol>\r
+<li>Get the speed dial. \r
+<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the speed dial number:</p>\r
+<pre class="prettyprint">\r
+int speeddial_number = ... // Acquire speed dial number\r
+contacts_record_h speeddial = NULL;\r
+\r
+error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_number, &amp;speeddial);\r
+</pre>\r
+\r
+<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p>\r
+</li>\r
+\r
+<li>Change the number ID by setting the <span style="font-family: Courier New,Courier,monospace">number_id</span> property using the <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function:\r
+<pre class="prettyprint">\r
+int number_id = ... // Acquire number id\r
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id, number_id);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);\r
+</pre>\r
+</li>\r
+\r
+<li>Update the speed dial record. \r
+<p>Update the speed dial. The above changes (<span style="font-family: Courier New,Courier,monospace">number_id</span>) are also inserted.</p>\r
+<pre class="prettyprint">\r
+error_code = contacts_db_update_record(speeddial);\r
+</pre>\r
+</li>\r
+\r
+<li>Clean up. \r
+<p>When the record handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory.</p>\r
+<pre class="prettyprint">\r
+contacts_record_destroy(speeddial, true);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="sd_delete" name="sd_delete">Deleting a Speed Dial</h2>\r
+\r
+<p>To delete a speed dial, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> as the first parameter and speed dial number as the second one;</p>\r
+<pre class="prettyprint">\r
+int speeddial_number = ... // Acquire speed dial number\r
+\r
+error_code = contacts_db_delete_record(_contacts_speeddial._uri, speeddial_number);\r
+</pre>\r
+ \r
+\r
+ <h2 id="pl_create" name="pl_create">Creating a Log</h2>\r
+\r
+<p>To create a log record:</p>\r
+<pre class="prettyprint">\r
+contacts_record_h log;\r
+error_code = contacts_record_create(_contacts_phone_log._uri, &amp;log);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record create failed: %x&quot;, error_code);\r
+</pre>\r
+<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> to create log type records.</p>\r
+\r
+ <h2 id="pl_set" name="pl_set">Setting Log Properties</h2>\r
+\r
+<p>To set log properties:</p>\r
+<ol>\r
+<li>Set the log type.\r
+<p>The <span style="font-family: Courier New,Courier,monospace">contacts_record_set_int()</span> function sets the type of the log when the second argument is <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log.log_type</span>. This function takes the log record handle as the first argument, and the type, which is a integer value, as the third argument. The function returns the status code. If the function returns an error, free memory, remove handles, and disconnect from the service, if needed.</p>\r
+<pre class="prettyprint">\r
+error_code = contacts_record_set_int(log, _contacts_phone_log.log_type, CONTACTS_PLOG_TYPE_VOICE_INCOMMING);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);\r
+</pre>\r
+\r
+<p>The enumeration flag names for the log types are:</p>\r
+<pre class="prettyprint">\r
+CONTACTS_PLOG_TYPE_NONE\r
+CONTACTS_PLOG_TYPE_VOICE_INCOMMING\r
+CONTACTS_PLOG_TYPE_VOICE_OUTGOING\r
+CONTACTS_PLOG_TYPE_VIDEO_INCOMING\r
+CONTACTS_PLOG_TYPE_VIDEO_OUTGOING\r
+CONTACTS_PLOG_TYPE_VOICE_INCOMMING_UNSEEN\r
+CONTACTS_PLOG_TYPE_VOICE_INCOMMING_SEEN\r
+CONTACTS_PLOG_TYPE_VIDEO_INCOMING_UNSEEN\r
+CONTACTS_PLOG_TYPE_VIDEO_INCOMING_SEEN\r
+CONTACTS_PLOG_TYPE_VOICE_REJECT\r
+CONTACTS_PLOG_TYPE_VIDEO_REJECT\r
+CONTACTS_PLOG_TYPE_VOICE_BLOCKED\r
+CONTACTS_PLOG_TYPE_VIDEO_BLOCKED\r
+CONTACTS_PLOG_TYPE_MMS_INCOMING\r
+CONTACTS_PLOG_TYPE_MMS_OUTGOING\r
+CONTACTS_PLOG_TYPE_SMS_INCOMING\r
+CONTACTS_PLOG_TYPE_SMS_OUTGOING\r
+CONTACTS_PLOG_TYPE_SMS_BLOCKED\r
+CONTACTS_PLOG_TYPE_MMS_BLOCKED\r
+CONTACTS_PLOG_TYPE_EMAIL_RECEIVED\r
+CONTACTS_PLOG_TYPE_EMAIL_SENT\r
+</pre></li>\r
+\r
+<li>Set time, duration, and address:\r
+<pre class="prettyprint">\r
+error_code = contacts_record_set_int(log, _contacts_phone_log.log_time, (int)time(NULL));\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);\r
+\r
+error_code = contacts_record_set_int(log, _contacts_phone_log.extra_data1, 37);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set integer failed: %x&quot;, error_code);\r
+\r
+error_code = contacts_record_set_str(log, _contacts_phone_log.address, &quot;+8231-1234-5678&quot;);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record set string failed: %x&quot;, error_code);\r
+</pre>\r
+\r
+<p>Log time means the number of seconds since 1970-01-01 00:00:00 (UTC). The <span style="font-family: Courier New,Courier,monospace">extra_data1</span> property means the <span style="font-family: Courier New,Courier,monospace">message_id</span>, <span style="font-family: Courier New,Courier,monospace">email_id</span>, or duration (seconds) of a call. The address property means a number or an email.</p>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="pl_insert" name="pl_insert">Inserting a Log to the Database</h2>\r
+\r
+<p>To insert a log record:</p>\r
+<ol>\r
+<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created log into the Contacts database. The first argument is the log record handle, the second is the record ID. If the log is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.\r
+<pre class="prettyprint">\r
+int added_log_id = -1;\r
+\r
+error_code = contacts_db_insert_record(log, &amp;added_log_id);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db insert record failed: %x&quot;, error_code);\r
+</pre>\r
+</li>\r
+<li>After inserting the log, destroy the used structures:\r
+<pre class="prettyprint">contacts_record_destroy(log, true);</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="pl_get" name="pl_get">Getting Logs</h2>\r
+\r
+<p>To get all log records one by one, or to filter them by one of the properties:</p>\r
+<ol>\r
+<li>To get a single log record: \r
+<ol type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">log_id</span>:</p>\r
+<pre class="prettyprint">contacts_record_h log;\r
+int log_id = ... // Acquire log ID\r
+error_code = contacts_db_get_record(_contacts_phone_log._uri, log_id, &amp;log);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get record failed: %x&quot;, error_code);\r
+</pre></li>\r
+<li>After inserting the log, destroy the used structures:\r
+<pre class="prettyprint">contacts_record_destroy(log, true);</pre></li></ol>\r
+</li>\r
+<li>To get the total log record list:\r
+<ol type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>\r
+<pre class="prettyprint">\r
+contacts_list_h list = NULL;\r
+error_code = contacts_db_get_all_records(_contacts_phone_log._uri, 0, 0, &amp;list);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get all records failed: %x&quot;, error_code);\r
+</pre>\r
+</li>\r
+\r
+<li>To iterate the list and read the records, you can get the records from the list using the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;int type;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;type);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;log type: %d&quot;, type);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}\r
+</pre>\r
+\r
+<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_log_data_t</span> structure:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_gl_log_data_t *gl_log_data = NULL;\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_log_data = _create_gl_log_data(record);\r
+\r
+&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}\r
+</pre>\r
+\r
+<p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>\r
+\r
+               <pre class="prettyprint">\r
+typedef struct _contacts_gl_log_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;char *address;\r
+&nbsp;&nbsp;&nbsp;int log_type;\r
+&nbsp;&nbsp;&nbsp;int log_time;\r
+} contacts_gl_log_data_t;\r
+\r
+static void _free_gl_log_data(contacts_gl_log_data_t *gl_log_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_log_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_log_data-&gt;address);\r
+&nbsp;&nbsp;&nbsp;free(gl_log_data);\r
+}\r
+\r
+static contacts_gl_log_data_t* _create_gl_log_data(contacts_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_gl_log_data_t *gl_log_data;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_log_data = malloc(sizeof(contacts_gl_log_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_log_data, 0x0, sizeof(contacts_gl_log_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.id, &amp;gl_log_data-&gt;id))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_phone_log.address, &amp;gl_log_data-&gt;address))\r
+&nbsp;&nbsp;&nbsp;{                                                            \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;gl_log_data-&gt;log_type))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_time, &amp;gl_log_data-&gt;log_time))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_log_data;\r
+}\r
+</pre>\r
+               </li>\r
+<li>After getting the log record, destroy the used structures:\r
+<pre class="prettyprint">\r
+contacts_list_destroy(list, true);</pre>\r
+               </li>\r
+       </ol>\r
+       </li>\r
+       <li>To get the filtered log record list:\r
+       <ol type="a">\r
+               <li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function.\r
+               <ol type="a">\r
+<li>Create a record list and query:\r
+<pre class="prettyprint">\r
+contacts_list_h list = NULL;\r
+contacts_query_h query = NULL;\r
+\r
+error_code = contacts_query_create(_contacts_phone_log._uri, &amp;query);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts query create failed: %x&quot;, error_code);\r
+</pre>\r
+       </li>\r
+       \r
+       <li>Before getting the logs, filter the list. There is a possibility to filter based on various parameters. To create a filter, use the following code: \r
+       <pre class="prettyprint">\r
+contacts_filter_h filter = NULL;\r
+\r
+error_code = contacts_filter_create(_contacts_phone_log._uri, &amp;filter);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter create failed: %x&quot;, error_code);\r
+</pre>\r
+       </li>\r
+       \r
+       <li>Add a condition, such as the log type.\r
+       <p>The following example retrieves only those logs which type is <span style="font-family: Courier New,Courier,monospace">CONTACTS_PLOG_TYPE_VOICE_INCOMMING</span>.</p>\r
+       <pre class="prettyprint">\r
+error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type, CONTACTS_MATCH_EQUAL, CONTACTS_PLOG_TYPE_VOICE_INCOMMING);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add integer failed: %x&quot;, error_code);\r
+</pre>\r
+        \r
+       <p>To use multiple conditions, add an operator between them:</p>\r
+       <pre class="prettyprint">\r
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add operator failed: %x&quot;, error_code);\r
+error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type, CONTACTS_MATCH_EQUAL, CONTACTS_PLOG_TYPE_VOICE_OUTGOING);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts filter add integer failed: %x&quot;, error_code);\r
+</pre>\r
+       </li>\r
+       \r
+       <li>Connect the query with the list: \r
+       <pre class="prettyprint">\r
+error_code = contacts_query_set_filter(query, filter);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts query set filter failed: %x&quot;, error_code);\r
+\r
+error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db get records with query failed: %x&quot;, error_code);\r
+</pre>\r
+       <p>The third parameter refers to the limit of the results. If 0 is passed, there are no limits. After all operations, release the list.</p>\r
+       </li>\r
+       \r
+       <li>Free the filter and query: \r
+       <pre class="prettyprint">\r
+contacts_filter_destroy(filter);\r
+contacts_query_destroy(query);\r
+</pre>\r
+       </li>\r
+</ol>\r
+</li>\r
+\r
+<li>To iterate the list and read the records, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> function. Get the details of each record in the loop.\r
+\r
+\r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+\r
+<pre class="prettyprint">\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;int type;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;type);\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;log type: %d&quot;, type);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}\r
+</pre>\r
+\r
+<p>To get more details of each record, use the <span style="font-family: Courier New,Courier,monospace">contacts_gl_log_data_t</span> structure:</p>\r
+<pre class="prettyprint">\r
+contacts_gl_log_data_t *gl_log_data = NULL;\r
+contacts_record_h record;\r
+while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;gl_log_data = _create_gl_log_data(record);\r
+\r
+&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+}\r
+</pre>\r
+<p>The memory for the record data is allocated, and the data is copied from the record by the functions listed further on in this document.</p>\r
+<pre class="prettyprint">\r
+typedef struct _contacts_gl_log_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;char *address;\r
+&nbsp;&nbsp;&nbsp;int log_type;\r
+&nbsp;&nbsp;&nbsp;int log_time;\r
+} contacts_gl_log_data_t;\r
+\r
+static void _free_gl_log_data(contacts_gl_log_data_t *gl_log_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (NULL == gl_log_data)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;free(gl_log_data-&gt;address);\r
+&nbsp;&nbsp;&nbsp;free(gl_log_data);\r
+}\r
+\r
+static contacts_gl_log_data_t* _create_gl_log_data(contacts_record_h record)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_gl_log_data_t *gl_log_data;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;gl_log_data = malloc(sizeof(contacts_gl_log_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(gl_log_data, 0x0, sizeof(contacts_gl_log_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.id, &amp;gl_log_data-&gt;id))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_phone_log.address, &amp;gl_log_data-&gt;address))\r
+&nbsp;&nbsp;&nbsp;{                                                            \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get string failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_type, &amp;gl_log_data-&gt;log_type))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_phone_log.log_time, &amp;gl_log_data-&gt;log_time))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts record get integer failed &quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return gl_log_data;\r
+}\r
+</pre>\r
+</li>\r
+<li>After getting the log record, destroy the used structures.\r
+<pre class="prettyprint">\r
+contacts_list_destroy(list, true);</pre></li>\r
+</ol></li></ol>\r
+\r
+ <h2 id="pl_delete" name="pl_delete">Deleting a Log</h2>\r
+\r
+<p>To delete a log, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> as the first parameter and log ID as the second one:</p>\r
+<pre class="prettyprint">\r
+int log_id = ... // Acquire log ID\r
+\r
+error_code = contacts_db_delete_record(_contacts_phone_log._uri, log_id);\r
+if (error_code != CONTACTS_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts db delete record failed: %x&quot;, error_code);\r
+</pre>\r
+\r
+ <h2 id="insert2" name="insert2">Inserting New Records</h2>\r
+\r
+<p>To insert a new record:</p>\r
+\r
+<ol>\r
+<li>Create a record.\r
+\r
+<p>The basic concept in the Contacts API is a record. A record can be a complex set of data, containing other data. For example, an address record can contain the country, region, and street. Also, the contained data can be a reference to another record. For example, a contact record contains the <span style="font-family: Courier New,Courier,monospace;">address</span> property, which is a reference to an address record. Effectively, a record can be a node in a tree or a graph of relations between records.</p>\r
+\r
+<p>Each record type has a special <span style="font-family: Courier New,Courier,monospace;">view</span> structure, which contains identifiers of its properties. For example, the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view describes the properties of the contact record. It contains properties, such as the name, company, and nickname of the contact. A special property in such structures is the URI, which is used to identify the record type. Every view describing a record has this property.</p>\r
+\r
+<p>To create a new contact record, create a root record of the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view type:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h hcontact = NULL;\r
+\r
+error_code = contacts_record_create(_contacts_contact._uri, &amp;hcontact);\r
+</pre>\r
+\r
+<p>Creating a group is similar to creating a record. The only difference is using another view – the group view.</p>\r
+</li>\r
+\r
+<li>Set properties.\r
+<p>Set the properties of the newly created record. Almost every property in the contact view is a record itself, so create more records, as needed. The following example shows how to add an address record to a contact.</p>\r
+\r
+<ol type="a">\r
+<li>Create a new record.\r
+<p>Use the address view because the added record is an address:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h haddress = NULL;\r
+contacts_record_create(_contacts_address._uri, &amp;haddress);\r
+</pre>\r
+</li>\r
+\r
+<li>Set the address record properties (parameters available in the current view):\r
+\r
+<pre class="prettyprint">\r
+contacts_record_set_str(haddress, _contacts_address.country, &quot;Korea&quot;);\r
+</pre>\r
+</li>\r
+\r
+<li>Add the address record to your contact:\r
+\r
+<pre class="prettyprint">\r
+contacts_record_add_child_record(hcontact, _contacts_contact.address, haddress\r
+</pre>\r
+<p>Do not destroy the record handle which is added to another as a child.</p>\r
+</li></ol>\r
+</li>\r
+\r
+<li>Insert records.\r
+<p>After setting properties, insert the root record only to the database. You receive the ID of this record in the database.</p>\r
+\r
+<pre class="prettyprint">\r
+int id;\r
+error_code = contacts_db_insert_record(hcontact, &amp;id);\r
+</pre>\r
+</li>\r
+\r
+<li>Clean up.\r
+<p>Destroy the record structure.</p>\r
+\r
+<pre class="prettyprint">\r
+error_code = contacts_record_destroy(hcontact, true);\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="get2" name="get2">Getting Record Details</h2>\r
+\r
+<p>To find all records and get their details:</p>\r
+\r
+<ol>\r
+<li>Get a single record.\r
+<p>Get a record handle when you know its ID:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h record;\r
+const int ID = 2;\r
+\r
+contacts_db_get_record(_contacts_contact._uri, ID, &amp;record);\r
+</pre>\r
+</li>\r
+\r
+<li>Get record details.\r
+<p>To get the details, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_*</span> function with the record handle. The following example gets the contact display name:</p>\r
+\r
+<pre class="prettyprint">\r
+char * d_name;\r
+contacts_record_get_str(record, _contacts_contact.display_name, d_name);\r
+free(d_name);\r
+</pre>\r
+</li>\r
+\r
+<li>Get child record details.\r
+<p>When using 1 view, you sometimes need details from another view. For example, you get records using the contact view and need to get the first or last name. If you want to get the name, get the record from the name view using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_child_record_at_p()</span> function:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h child_record;\r
+contacts_record_get_child_record_at_p(record, _contacts_contact.name, 0, &amp;child_record);\r
+// In the child_record, you have the record form name view\r
+char *f_name;\r
+contacts_record_get_str(record, _contacts_name.first_name, f_name);\r
+free(f_name);\r
+</pre>\r
+</li>\r
+\r
+<li>Get parent record details.\r
+<p>When using the child view, you sometimes need to get details of the parent. For example, you get records using the name view and want to know whether the contact has an email address. To get the parent details, get its ID in almost every view with <span style="font-family: Courier New,Courier,monospace;">contact_id</span>. After that, get the parent record:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h parent_record;\r
+int parent_id;\r
+contacts_record_get_int(record, _contacts_name.contact_id, &amp;parent_id);\r
+contacts_db_get_child_record(_contacts_contact._uri, parent_id, &amp;parent_record);\r
+// In the parent_record, get bool\r
+bool h_email;\r
+contacts_record_get_bool(parent_record, _contacts_contact.has_email, &amp;h_email);\r
+</pre>\r
+</li>\r
+\r
+<li>Get details through a structure.\r
+<ol type="a"><li><p>For more record details, use a structure to get them.</p>\r
+<p>The memory for the record data is allocated and the data is copied from the record by functions listed in the following step.</p>\r
+\r
+<pre class="prettyprint">\r
+gldata = _create_gl_data(record);\r
+char * number = gldata-&gt;number;\r
+\r
+typedef struct _contact_gl_data\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;char *first;\r
+&nbsp;&nbsp;&nbsp;char *last;\r
+&nbsp;&nbsp;&nbsp;char *number;\r
+&nbsp;&nbsp;&nbsp;char *image_path;\r
+} contact_gl_data_t;\r
+\r
+static contact_gl_data_t *_create_gl_data(contacts_record_h r_contact)\r
+{\r
+&nbsp;&nbsp;&nbsp;contact_gl_data_t *data;\r
+&nbsp;&nbsp;&nbsp;data = malloc(sizeof(contact_gl_data_t));\r
+&nbsp;&nbsp;&nbsp;memset(data, 0x0, sizeof(contact_gl_data_t));\r
+\r
+&nbsp;&nbsp;&nbsp;if (! _get_contact_id(r_contact, &amp;data-&gt;id))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;if (!_get_contact_number(r_contact, &amp;data-&gt;number))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (!_get_contact_first(r_contact, &amp;data-&gt;first))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (!_get_contact_last(r_contact, &amp;data-&gt;last))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;first);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;if (!_get_contact_image(r_contact, &amp;data-&gt;image_path))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;first);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;last);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return data;\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>Retrieve record data into the structure.\r
+<p>Contacts are organized in a parent-child structure. To access specified data from a record, get the child responsible for the requested type using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function (for the property lists, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a>). Do not pass any data returned by a function with the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix to the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>\r
+\r
+<ul><li><p>To get the name details, get the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.name</span> (representing the child) from the <span style="font-family: Courier New,Courier,monospace;">r_contact</span> parent. Both structures have the <span style="font-family: Courier New,Courier,monospace;">contacts_record_h</span> type. After obtaining a child record, get the desired data from it using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+static bool _get_contact_last(contacts_record_h r_contact, char **last)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_record_h r_name;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact,  _contacts_contact.name, 0, &amp;r_name);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_name, _contacts_name.last, last);\r
+}\r
+</pre></li>\r
+\r
+<li><p>The record ID is obtained directly from the parent record. An ID is a unique number representing the record key in the database. You can manipulate a record with functions, such as <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_record()</span> or <span style="font-family: Courier New,Courier,monospace;">contacts_db_delete_records()</span>, if you know their ID.</p>\r
+\r
+<pre class="prettyprint">\r
+static bool _get_contact_id(contacts_record_h r_contact, int *id)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(r_contact, _contacts_contact.id, id);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre></li>\r
+\r
+<li><p>To get a contact number, check whether it exists using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_bool()</span> function. If it exists, use the various <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">Query</a>  and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">Filter</a> functions from the Contacts API to make a query to get a list. At the end, free any data returned by a function not containing the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix.</p>\r
+<ul><li>Get a list of all numbers and filter the list to get the default:\r
+<pre class="prettyprint">\r
+static bool _get_contact_number(contacts_record_h r_contact, char **number)\r
+{\r
+&nbsp;&nbsp;&nbsp;int id;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+&nbsp;&nbsp;&nbsp;contacts_record_h r_number;\r
+&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;\r
+&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;\r
+&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;if (!_get_contact_id(r_contact, &amp;id))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+\r
+\r
+&nbsp;&nbsp;&nbsp;bool has_number;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_contact, _contacts_contact.has_phonenumber, &amp;has_number);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_query_create(_contacts_number._uri, &amp;query);\r
+\r
+&nbsp;&nbsp;&nbsp;unsigned int fields[] = { _contacts_number.number };\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_query_set_projection(query, fields, 1);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_filter_create(_contacts_number._uri, &amp;filter);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_int(filter, _contacts_number.contact_id, CONTACTS_MATCH_EXACTLY, id);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_bool(filter, _contacts_number.is_default, true);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_query_set_filter(query, filter);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_records_with_query(query, 0, 1, &amp;list);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_get_current_record_p(list, &amp;r_number);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_number, _contacts_number.number, number);\r
+\r
+&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);\r
+&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);\r
+&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);\r
+}\r
+</pre></li>\r
+\r
+<li><p>Directly access the default number:</p>\r
+\r
+<pre class="prettyprint">\r
+static bool _get_contact_number(contacts_record_h r_contact, char **number)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+&nbsp;&nbsp;&nbsp;contacts_record_h r_number;\r
+\r
+&nbsp;&nbsp;&nbsp;bool has_number;\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_contact, _contacts_contact.has_phonenumber, &amp;has_number);\r
+\r
+&nbsp;&nbsp;&nbsp;if (!has_number)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*number = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.number, 0, &amp;r_number);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_number, _contacts_number.number, number);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+<p>To get a second number, change the third parameter (<span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p</span>) from 0 to 1.</p></li></ul></li>\r
+\r
+\r
+<li><p>An image can be obtained directly from the parent record:</p>\r
+\r
+<pre class="prettyprint">\r
+static bool _get_contact_image(contacts_record_h r_contact, char **image_path)\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_contact, _contacts_contact.image_thumbnail_path, image_path);\r
+\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Thumb path: \&#39;%s\&#39;&quot;, *image_path);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre></li>\r
+\r
+<li><p>Get the first name as the last name:</p>\r
+\r
+<pre class="prettyprint">\r
+static bool _get_contact_first(contacts_record_h r_contact, char **first)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts_record_h r_name;\r
+&nbsp;&nbsp;&nbsp;int error_code;\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.name, 0, &amp;r_name);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_name, _contacts_name.first, first);\r
+}\r
+</pre></li></ul>\r
+</li></ol></li>\r
+\r
+<li>Clean up.\r
+<ol type="a"><li><p>Destroy the <span style="font-family: Courier New,Courier,monospace;">contacts_list_h</span> list.</p>\r
+<p>When the access to the database is no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace;">contact_disconnect()</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+error_code = contacts_list_destroy(list, true);\r
+\r
+error_code = contacts_disconnect();\r
+</pre></li>\r
+\r
+<li><p>Destroy all other used handles as well:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_query_destroy(query); // If query has been used\r
+contacts_filter_destroy(filter); // If filter has been used\r
+</pre></li></ol>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="list2" name="list2">Handling Lists</h2>\r
+\r
+<p>To access multiple records using lists and contact property filters, and to sort records:</p>\r
+\r
+<ol>\r
+<li>Get a record list.\r
+<ul><li>To get all records:\r
+<p>The following function retrieves all records and returns the result list. After all operations, the list must be released with the <span style="font-family: Courier New,Courier,monospace;">contacts_list_destroy()</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_list_h list = NULL;\r
+\r
+contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &amp;list);\r
+</pre>\r
+</li>\r
+<li>To filter and get specific records:\r
+<ol type="a">\r
+<li>Create a query for a list.\r
+<p>To filter or sort records, you need a record list and query:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_list_h list = NULL;\r
+contacts_query_h query = NULL;\r
+\r
+contacts_query_create(_contacts_name._uri, &amp;query);\r
+</pre>\r
+</li>\r
+\r
+<li>Create a filter for the query.\r
+<p>Before getting contacts, filter the list. It is possible to filter by various parameters, such as the name view.</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_filter_h filter = NULL;\r
+\r
+contacts_filter_create (_contacts_name._uri, &amp;filter);\r
+</pre>\r
+\r
+<p>The first parameter defines in which view to place the filter. To filter by the first and last name, use the <span style="font-family: Courier New,Courier,monospace;">_contacts_name</span> filter. The first parameter of the <span style="font-family: Courier New,Courier,monospace;">contacts_query_create()</span> function must be the same parameter as in the filter to be appended. For more information on views, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a> tables.</p></li>\r
+\r
+<li><p>Add a condition, such as the following where only contacts beginning with &quot;Za&quot; are shown:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_filter_add_str(filter, _contacts_name.last_name, CONTACTS_MATCH_CONTAINS, &quot;Za&quot;);\r
+</pre>\r
+\r
+<p>To receive contacts which starts by a given string, the <span style="font-family: Courier New,Courier,monospace;">CONTACTS_MATCH_CONTAINS</span> parameter has to be set. Use the parameter if you need to get records which contain the given string anywhere.</p></li>\r
+\r
+<li><p>To add more conditions, add operators between them. In this case, define the operator between conditions first:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);\r
+</pre>\r
+\r
+<p>After that you can add another condition. If you need to use a logic expression &quot;C1 AND (C2 OR C3)&quot;, conditions 2 and 3 must be in another filter to have logical brackets. The following example shows a filter that passes through contacts with a first name starting with &quot;Ada&quot; or &quot;Igo&quot;:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_filter_h n_filter = NULL;\r
+contacts_filter_create (_contacts_name._uri, &amp;n_filter);\r
+contacts_filter_add_str(n_filter, _contacts_name.first_name, CONTACTS_MATCH_STARTSWITH, &quot;Ada&quot;);\r
+contacts_filter_add_operator(n_filter, CONTACTS_FILTER_OPERATOR_OR);\r
+contacts_filter_add_str(n_filter, _contacts_name.first_name, CONTACTS_MATCH_STARTSWITH, &quot;Igo”&quot;);\r
+</pre></li>\r
+\r
+<li><p>To add an extra filter to a parent filter:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_filter_add_filter(filter, n_filter);\r
+</pre>\r
+\r
+<p>The parent filter passes through contacts with a last name beginning with &quot;Za&quot; and a first name starting with &quot;Ada&quot; or &quot;Igo&quot;.</p></li>\r
+<li><p>Connect a filter with query:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_query_set_filter(query, filter);\r
+</pre></li></ol></li></ul>\r
+</li>\r
+\r
+<li>Sort a record list.\r
+<p>To sort records by any of its view details:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_query_set_sort(query, _contacts_name.first, true);\r
+</pre>\r
+\r
+<p>The first parameter is the query to be filtered, the second is the property to sort, and the last sets the ascending order.</p>\r
+</li>\r
+\r
+<li>Set a projection to a list.\r
+<p>A projection allows you to query the data for specific properties of a record. It can reduce latency in case of a large database.</p>\r
+<p>To set the projection, use the <span style="font-family: Courier New,Courier,monospace;">contacts_query_set_projection()</span> function. The following example limits the properties from the previous steps to the first and last name:</p>\r
+\r
+<pre class="prettyprint">\r
+unsigned my_projection[] = {_contacts_name.contact_id, _contacts_name.first, _contacts_name.last}\r
+contacts_query_set_projection(query, my_projection, sizeof(my_projection)/sizeof(int));\r
+</pre>\r
+\r
+<p>After filtering, such as getting numbers, there can be several records which differ only in a few detail types. When setting the projection, the results can contain identical records. To avoid these situations, use the distinction function:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_query_set_distinct(query, true);\r
+</pre>\r
+</li>\r
+\r
+<li>Get the record list with a query.\r
+<p>Get the list with the query:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_db_get_records_with_query(query, 0, 0, &amp;list);\r
+</pre>\r
+\r
+<p>The third parameter refers to limiting results. If 0 is passed, there are no limits. Release the list after all the operations.</p>\r
+</li>\r
+\r
+<li id="iterate_l" name="iterate_l">Iterate on the list and read the records.\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">contacts_list_get_current_record_p()</span> function retrieves a record from the contacts list. The current default record is the first record.</p>\r
+\r
+<p>To iterate on a list, use the <span style="font-family: Courier New,Courier,monospace;">contacts_list_prev()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_list_next()</span>, <span style="font-family: Courier New,Courier,monospace;">contacts_list_first()</span>, and <span style="font-family: Courier New,Courier,monospace;">contacts_list_last()</span> functions.</p>\r
+\r
+  <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">Some functions have the <span style="font-family: Courier New,Courier,monospace;">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to data in an existing record.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<p>To read records:</p>\r
+\r
+<ul><li>To get only a few details:\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h record;\r
+\r
+while (contacts_list_get_current_record_p(list, &amp;record) == 0)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Get details\r
+&nbsp;&nbsp;&nbsp;char * disp_name;\r
+&nbsp;&nbsp;&nbsp;contacts_record_get_str(record, _contacts_contact.display_name, &amp;disp_name);\r
+&nbsp;&nbsp;&nbsp;free(disp_name);\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+}\r
+</pre></li>\r
+\r
+<li><p>To get more details, use the following example, where the obtained records are passed to the <span style="font-family: Courier New,Courier,monospace;">_create_gl_data()</span> function for further processing:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h record;\r
+contact_gl_data_t *gldata = NULL;\r
+\r
+while (contacts_list_get_current_record_p(list, &amp;record) == 0)\r
+{\r
+&nbsp;&nbsp;&nbsp;gldata = _create_gl_data(record);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+}\r
+</pre></li>\r
+\r
+<li><p>The previous examples work if you use the default (<span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span>) view. If you use filtering in another view as shown in the filter example, and you want to use this structure (change view to default), use the following code:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h record;\r
+contact_gl_data_t *gldata = NULL;\r
+\r
+while (contacts_list_get_current_record_p(list, &amp;record) == 0)\r
+{\r
+&nbsp;&nbsp;&nbsp;int record_id;\r
+&nbsp;&nbsp;&nbsp;contacts_record_h c_record;\r
+&nbsp;&nbsp;&nbsp;contacts_record_get_int(record, _contacts_name._uri, &amp;contact_id);\r
+&nbsp;&nbsp;&nbsp;contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;c_record);\r
+&nbsp;&nbsp;&nbsp;gldata = _create_gl_data(c_record);\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);\r
+}\r
+</pre>\r
+\r
+<p>This way it is possible to switch to the default view from another view (in a similar manner to the above example <span style="font-family: Courier New,Courier,monospace;">_contacts_name</span>).</p></li></ul>\r
+</li>\r
+\r
+<li>Insert the list to the database.\r
+<p>You can insert a whole list to the database. This can be useful when you have several records to create and you want to insert them all at once.</p>\r
+\r
+<ol type="a">\r
+<li>If you have a list, use it or create a new one:\r
+\r
+<pre class="prettyprint">\r
+contacts_list_h list;\r
+contacts_list_create(&amp;list);\r
+</pre>\r
+</li>\r
+\r
+<li>Add records to the list:\r
+\r
+<pre class="prettyprint">\r
+contacts_list_add (list, record);\r
+</pre>\r
+</li>\r
+\r
+<li>Insert the list into the database:\r
+\r
+<pre class="prettyprint">\r
+int *ids = NULL;\r
+unsigned int count = 0;\r
+contacts_db_insert_records(list, &amp;ids, &amp;count);\r
+dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%d records inserted&quot;, count);\r
+free(ids);\r
+</pre>\r
+\r
+<p>This inserts the entire list to the database and gets the IDs of the inserted records.</p>\r
+</li>\r
+\r
+<li>Destroy the list:\r
+\r
+<pre class="prettyprint">\r
+contacts_list_destroy(list, true);\r
+</pre>\r
+</li>\r
+</ol>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="delete2" name="delete2">Deleting Records</h2>\r
+\r
+<p>To delete records from the contact database, you need to know their ID:</p>\r
+\r
+<pre class="prettyprint">\r
+int id;\r
+// Get id\r
+int error = contacts_db_delete_record(_contacts_contact._uri, id);\r
+</pre>\r
+\r
+<p>If you only have the record handle, get the ID first:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_get_int(record, _contacts_contact.id, &amp;id);\r
+</pre>\r
+\r
+ <h2 id="link2" name="link2">Linking Persons</h2>\r
+\r
+<p>To link persons (a useful joining method if there are several contacts assigned to one person):</p>\r
+\r
+<ol>\r
+<li>Link a person to another person.\r
+<p>To link persons with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_link_person()</span> function, you need the person ID. To get the person ID, use the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_int()</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+int first_person_id;\r
+contacts_record h record1;\r
+// Get the first record\r
+int error_code = contacts_record_get_int(record1, _contacts_contact.person_id, &amp;first_person_id);\r
+\r
+contacts_record h record2;\r
+// Get the second record\r
+error_code = contacts_record_get_int(record2, _contacts_contact.person_id, &amp;second_person_id);\r
+\r
+contacts_person_link_person(first_person_id, second_person_id);\r
+</pre>\r
+\r
+<p>This links the 2 contacts available through record handles.</p>\r
+</li>\r
+\r
+<li>Set the default properties.\r
+<p>Set the default values from one of the linked contacts with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_set_default_property()</span> function. The first parameter determines the detail to be set using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">contacts_person_property_e</a> enum.</p>\r
+\r
+<p>To set a default number from one of the persons, you have to know its ID. Get the detail ID using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function, because you need to get the value from the <span style="font-family: Courier New,Courier,monospace;">_contact_number</span> view.</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h record;\r
+int record_number = -1;\r
+// Get the record handle\r
+contacts_record_h record_number;\r
+error_code = contacts_record_get_child_record_at_p(record, _contacts_contact.number, 0, &amp;record_number);\r
+\r
+error_code = contacts_record_get_int(record_number, _contacts_number.id, &amp;number_id);\r
+\r
+error_code = contacts_record_destroy(record_number, true);\r
+\r
+// Use the record_number variable\r
+error_code = contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBER, person_id, number_id);\r
+</pre>\r
+</li>\r
+\r
+<li>Get default properties.\r
+<p>Get the default property values of a person with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_get_default_property()</span> function:</p>\r
+\r
+<ol type="a"><li><p>Get the ID of the default email details:</p>\r
+\r
+<pre class="prettyprint">\r
+int person_email_number;\r
+error_code = contacts_person_get_default_property (CONTACTS_PERSON_PROPERTY_EMAIL, person_id, &amp;person_email_number);\r
+</pre></li>\r
+\r
+<li><p>Get the default email: </p>\r
+\r
+<pre class="prettyprint">\r
+int person_email_detail_number;\r
+error_code = contacts_person_get_default_property (CONTACTS_PERSON_PROPERTY_EMAIL, person_id, &amp;person_email_number);\r
+\r
+contacts_record_h email_record;\r
+error_code = contacts_db_get_record(_contacts_email._uri, person_email_detail_number, &amp;email_record);\r
+char * default_email;\r
+\r
+error_code = contacts_record_get_str_p(email_record, _contacts_email.email, &amp;default_email);\r
+\r
+// Use default_email\r
+\r
+error_code = contacts_record_destroy(email_record, true);\r
+</pre></li></ol>\r
+</li>\r
+\r
+<li>Unlink persons.\r
+<p>To unlink a contact using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_unlink_contact()</span> function:</p>\r
+\r
+<ol type="a"><li><p>If you have the record handle, get the contact ID: </p>\r
+\r
+<pre class="prettyprint">\r
+int person_id;\r
+contacts_record_get_int(record, _contacts_contact.id, &amp;person_id);\r
+</pre></li>\r
+\r
+<li><p>Unlink a contact from another and get its ID:</p>\r
+\r
+<pre class="prettyprint">\r
+int unlinked_person_id;\r
+int contacts_person_unlink_contact(person_id,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contact_id,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;unlinked_person_id)\r
+</pre></li></ol>\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="settings" name="settings">Managing Contact Settings</h2>\r
+\r
+<p>To manage the display settings of contacts:</p>\r
+\r
+<ol>\r
+<li>Get the display and sorting order.\r
+<p>Check the current display order (the order in which the names are displayed) using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_get_name_display_order()</span> function, and the sorting order using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_get_name_sorting_order()</span> function:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_name_display_order_e display_order;\r
+contacts_setting_get_name_display_order (&amp;display_order);\r
+// Now you have the display order\r
+sprintf(&quot;Display order: %s&quot;, display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST&quot;);\r
+\r
+contacts_name_sorting_order_e sorting_order;\r
+contacts_setting_get_name_sorting_order (&amp;sorting_order);\r
+// Now you have the sorting order\r
+sprintf(&quot;Sorting order: %s&quot;, sorting_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_SORTING_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_SORTING_ORDER_LASTFIRST&quot;);\r
+</pre>\r
+</li>\r
+\r
+<li>Change the display and sorting orders.\r
+<p>To change the display and sorting orders, use the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_set_name_display_order()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_set_name_sorting_order()</span> functions:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_setting_set_name_display_order (CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST);\r
+\r
+contacts_setting_set_name_sorting_order (CONTACTS_NAME_SORTING_ORDER_FIRSTLAST);\r
+</pre>\r
+</li>\r
+\r
+<li>Track the order changes with callbacks.\r
+<p>To track changes in the display and sorting orders:</p>\r
+<ol type="a"><li>Register callbacks with the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_sorting_order_changed_cb()</span> functions. </li>\r
+<li>Define the callbacks themselves:\r
+<pre class="prettyprint">\r
+static void display_changed_cb(contacts_name_display_order_e name_display_order, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;changed display order: %s&quot;, name_display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST?&quot;CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST&quot;);\r
+}\r
+\r
+static void sorting_changed_cb(contacts_name_sorting_order_e name_display_order, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;changed sorting order: %s&quot;, name_display_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST?"CONTACTS_NAME_SORTING_ORDER_FIRSTLAST&quot;:&quot;CONTACTS_NAME_SORTING_ORDER_LASTFIRST&quot;);\r
+}\r
+</pre>\r
+<p>The above examples cause a message to be printed when the order changes. To track the changes, write a timeout function after setting the callback.</p></li>\r
+<li>Unregister the callbacks when they are no longer needed using the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_remove_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_remove_name_sorting_order_changed_cb()</span> functions.</li></ol>\r
+\r
+</li>\r
+</ol>\r
+\r
+ <h2 id="sim" name="sim">Managing Contacts on the SIM Card</h2>\r
+\r
+<p>To check whether the SIM card is initialized and then import contacts from the SIM card:</p>\r
+<ol>\r
+<li>Check whether the SIM card is initialized.\r
+<p>Before using any SIM card methods, ensure that the SIM card initialization is complete:</p>\r
+\r
+<pre class="prettyprint">\r
+bool completed = false;\r
+contacts_sim_get_initialization_status(&amp;completed);\r
+dlog_print(DLOG_DEBUG, LOG_TAG, &quot;SIM %s completed&quot;, completed?&quot;&quot;:&quot;not &quot;);\r
+</pre></li>\r
+\r
+<li>Import all contacts from the SIM card.\r
+<p>When the contacts from the SIM card are available, import them:</p>\r
+\r
+<pre class="prettyprint">\r
+int err = contacts_sim_import_all_contacts();\r
+</pre>\r
+</li>\r
+\r
+</ol>\r
+\r
+ <h2 id="import" name="import">Importing from vCard</h2>\r
+\r
+<p>To import contacts from all vCard files from a specified directory:</p>\r
+\r
+<ul>\r
+<li>Get contact records from a stream.\r
+<p>To receive a records list from the vCard stream, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contacts()</span> function. Afterwards, the received list is ready to use and you can perform the iteration on the list.</p>\r
+\r
+<p>The following example uses the stream in the vCard format and gets the records from the received list: </p>\r
+\r
+<pre class="prettyprint">\r
+char * vcard_stream;\r
+// Get vCard stream\r
+contacts_list_h contacts_list;\r
+int err = contacts_vcard_parse_to_contacts(vcard_stream, contacts_list);\r
+\r
+while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) \r
+{\r
+&nbsp;&nbsp;&nbsp;// Get next records from file\r
+&nbsp;&nbsp;&nbsp;err = contacts_list_next(list_import);\r
+}\r
+err = contacts_list_destroy(list_import, true);\r
+</pre>\r
+\r
+<p>You can also use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contact_foreach()</span> function. With this function, you have to get the file content manually, and it needs a callback:</p>\r
+\r
+<pre class="prettyprint">\r
+bool contacts_vcard_cb(contacts_record_h record, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Here you have a record\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+</pre>\r
+\r
+<p>The callback is called for each record from a vCard file. The iteration continues as long as the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>.</p>\r
+\r
+<p>To check how many records are contained in a vCard file, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_get_entity_count()</span> function.</p>\r
+\r
+</li>\r
+\r
+<li>Import the vCard stream.\r
+<ul><li><p>Get all the files with a <span style="font-family: Courier New,Courier,monospace;">.vcf</span> extension from the directory. It can be done through dirent structures available in the <span style="font-family: Courier New,Courier,monospace;">&lt;dirent.h&gt;</span> header. The following example gets the path to every file in a directory:</p>\r
+\r
+<pre class="prettyprint">\r
+int internal_storage_id;\r
+char *vcf_path = NULL;\r
+\r
+static bool \r
+storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+\r
+void \r
+_get_storage_path()\r
+{\r
+&nbsp;&nbsp;&nbsp;int error_code = 0;\r
+&nbsp;&nbsp;&nbsp;char *path = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;error_code = storage_foreach_device_supported(storage_cb, NULL);\r
+&nbsp;&nbsp;&nbsp;error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_DOWNLOADS, &amp;path);\r
+&nbsp;&nbsp;&nbsp;if (error_code != STORAGE_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vcf_path = strdup(path);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+void \r
+_import_vcard()\r
+{\r
+&nbsp;&nbsp;&nbsp;int path_len = 0;\r
+\r
+&nbsp;&nbsp;&nbsp;DIR *dir = opendir(vcf_path);\r
+&nbsp;&nbsp;&nbsp;struct dirent *pDirent = NULL;\r
+&nbsp;&nbsp;&nbsp;if (NULL == dir)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(vcf_path);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pDirent-&gt;d_type != DT_REG)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *extension = strrchr(pDirent-&gt;d_name, &#39;.&#39;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!extension || strcmp(extension, &quot;.vcf&quot;))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char * filepath = malloc(strlen(vcf_path)+strlen(pDirent-&gt;d_name)+4);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(filepath, &quot;%s/%s&quot;, vcf_path, pDirent-&gt;d_name);\r
+        \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Full path to file available through filepath string\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(filepath);\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre></li>\r
+\r
+<li><p>If you use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contacts()</span> function, you need to get the file stream manually. The following example shows how to get a records list from a file:</p>\r
+\r
+<pre class="prettyprint">\r
+FILE *fp = fopen(filepath, &quot;r&quot;);\r
+fseek(fp, 0, 2);\r
+int bufsize = ftell(fp);\r
+rewind(fp);\r
+if (bufsize &lt; 1)\r
+&nbsp;&nbsp;&nbsp;return 1;\r
+char * vcard_stream = malloc(sizeof(char) * (bufsize));\r
+memset(vcard_stream, &#39;\0&#39;, sizeof(vcard_stream));\r
+if (fp != NULL) \r
+{\r
+&nbsp;&nbsp;&nbsp;char str[200];\r
+&nbsp;&nbsp;&nbsp;while(fgets(str, 200, fp) != NULL)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(vcard_stream+strlen(vcard_stream), &quot;%s&quot;, str);\r
+&nbsp;&nbsp;&nbsp;fclose(fp); \r
+} \r
+else\r
+&nbsp;&nbsp;&nbsp;// Error handling\r
+int err = contacts_vcard_parse_to_contacts(vcard_stream, contacts_list);\r
+free(vcard_stream);\r
+</pre></li>\r
+\r
+<li><p>You can also use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contact_foreach()</span>  function. It requires a callback and retrieves the file path instead of a file stream:</p>\r
+\r
+<pre class="prettyprint">\r
+bool contacts_vcard_cb(contacts_record_h record, void *user_data)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Here you have a record\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+\r
+err = contacts_vcard_parse_to_contact_foreach (filepath, contacts_vcard_cb, NULL);\r
+</pre></li>\r
+\r
+<li><p>Add a record in  a callback function:</p>\r
+\r
+<pre class="prettyprint">\r
+int id = -1;\r
+err = contacts_db_insert_record(record, &amp;id);\r
+</pre></li></ul>\r
+\r
+<p>The following example represents the full code of the previous step:</p>\r
+\r
+<pre class="prettyprint">\r
+char []folder = &quot;/path/&quot;;\r
+contacts_list_h list_import;\r
+contacts_record_h record;\r
+err = contacts_vcard_parse_to_contacts(content, &amp;list_import);\r
+\r
+while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) \r
+{\r
+&nbsp;&nbsp;&nbsp;int id = -1;\r
+&nbsp;&nbsp;&nbsp;err = contacts_db_insert_record(record, &amp;id); // Add to list\r
+\r
+&nbsp;&nbsp;&nbsp;contacts_list_next(list_import);\r
+}\r
+\r
+DIR *dir = opendir(folder);\r
+struct dirent *pDirent = NULL;\r
+if (dir) \r
+{\r
+&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pDirent-&gt;d_type != DT_REG)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *exte = strrchr(pDirent-&gt;d_name, &#39;.&#39;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!exte || strcmp(exte, &quot;.vcf&quot;))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;file %s&quot;, pDirent-&gt;d_name);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char * file_path = malloc(strlen(folder)+strlen(pDirent-&gt;d_name)+4);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(file_path, &quot;%s/%s&quot;, folder, pDirent-&gt;d_name);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int count;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_vcard_get_entity_count(file_path, &amp;count);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Number of records in file: count\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count &lt; 1)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FILE * fp = fopen(file_path, &quot;r&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fseek(fp, 0, 2) != 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int bufsize = ftell(fp);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rewind(fp);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;file size: %i&quot;, bufsize); \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bufsize &lt; 1)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char * vcard_stream = malloc(sizeof(char) * (bufsize));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memset(vcard_stream, &#39;\0&#39;, sizeof(vcard_stream));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fp != NULL) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char str[150];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(fgets(str, 150, fp) != NULL)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(vcard_stream+strlen(vcard_stream), &quot;%s&quot;, str);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fclose(fp);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Import the contacts\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h list_import;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_vcard_parse_to_contacts(vcard_stream, &amp;list_import);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_vcard_parse_to_contacts failed: %d&quot;, err);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(vcard_stream);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(list_import, &amp;record) == 0) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int id = -1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_db_insert_record(record, &amp;id); // Add to list\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_list_add failed&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_list_next(list_import);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = contacts_list_destroy(list_import, true);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err != 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_list_destroy failed: %d&quot;, err);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free (file_path);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;closedir(dir);\r
+}\r
+</pre>\r
+</li>\r
+</ul>\r
+\r
+ <h2 id="export" name="export">Exporting to vCard</h2>\r
+\r
+<p>To export your contacts to a vCard file:</p>\r
+\r
+<ol>\r
+<li>Export contacts to a file.\r
+<ul><li><p>To export a contact from the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view to the vCard format, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_contact()</span> function.</p></li>\r
+\r
+\r
+<li><p>To export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_person</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_person()</span> function. If you need to export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_my_profile</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_my_profile()</span> function.</p></li></ul>\r
+\r
+<p>The following example uses the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view, but the use of the other views is the same:</p>\r
+\r
+<pre class="prettyprint">\r
+contacts_record_h contact;\r
+// Get record to contacts_record_h\r
+char *vcard_stream;\r
+int err = contacts_vcard_make_from_contact(contact, &amp;vcard_stream);\r
+\r
+// Stream in vCard format is now in vcard_stream\r
+free(vcard_stream);\r
+</pre></li>\r
+\r
+<li><p>Write to a file:</p>\r
+\r
+<pre class="prettyprint">\r
+FILE * file = fopen(&quot;/path/contacts.vcf&quot;, &quot;w&quot;);\r
+fwrite(vcard_stream, 1, strlen(vcard_stream), file);\r
+fclose(file);\r
+</pre></li></ol>\r
+\r
+\r
+<p>The following example shows how to get all records from a database and put them into a single file.</p>\r
+<p>Get the list of all records using the <span style="font-family: Courier New,Courier,monospace;">contacts_db_get_all_records()</span> function and the current records using the <span style="font-family: Courier New,Courier,monospace;">contacts_list_get_current_record_p()</span> function. Get the vCard stream and write to the file in a <span style="font-family: Courier New,Courier,monospace;">while</span> loop:</p>\r
+\r
+<pre class="prettyprint">\r
+char file_path[] = &quot;/path/contacts.vcf&quot;;\r
+contacts_list_h list = NULL;\r
+err = contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &amp;list);\r
+\r
+contacts_record_h record;\r
+FILE * file = fopen(file_path, &quot;w&quot;);\r
+\r
+while (contacts_list_get_current_record_p(list, &amp;record) == 0) \r
+{\r
+&nbsp;&nbsp;&nbsp;err = contacts_vcard_make_from_contact(record, &amp;vcard_stream);\r
+&nbsp;&nbsp;&nbsp;// Save to file\r
+&nbsp;&nbsp;&nbsp;fwrite(vcard_stream, 1, strlen(vcard_stream), file);\r
+&nbsp;&nbsp;&nbsp;free(vcard_stream);\r
+&nbsp;&nbsp;&nbsp;err = contacts_list_next(list);\r
+}\r
+fclose(file);\r
+contacts_list_destroy(list, true);\r
+</pre>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/social/social_tutorials_n.htm b/org.tizen.tutorials/html/native/social/social_tutorials_n.htm
index 0b1f6d4..90f94ee 100644 (file)
--- a/org.tizen.tutorials/html/native/social/social_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/social/social_tutorials_n.htm
@@ -1,71 +1,71 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-    <script type="text/javascript" src="../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Social: Managing Personal Data</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social Guides</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API for Wearable Native</a></li>                    
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Social: Managing Personal Data</h1>
-
- <p>The social tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
-   <ul>
-       <li><a href="service_adaptor_tutorial_n.htm">Service Adaptor: Working with Plugins</a> 
-       <p>Demonstrates how you can manage adaptors between the Service Adaptor Client and related plugins.</p></li>            
-  </ul>
- 
- <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>  
-  <ul>
-   <li><a href="account_tutorial_n.htm">Account Manager: Managing Account Information on the Device</a> <p>Demonstrates how you can connect to and disconnect from the Account Service, create, delete, and update accounts in the account database, and manage account information.</p></li>
-   <li><a href="calendar_tutorial_n.htm">Calendar: Managing Calendar Events and Accessing the Calendar Database</a> <p> Demonstrates how you can manage calendars, events, and tasks.</p> </li>
-   <li><a href="contact_tutorial_n.htm">Contacts: Managing Contacts and Groups, and Accessing the Contact Database</a> <p>Demonstrates how you can manage contact information, contact groups, vCards, and phone logs.</p></li>
-  </ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Social: Managing Personal Data</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social Guides</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API for Wearable Native</a></li>                    \r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Social: Managing Personal Data</h1>\r
+\r
+ <p>The social tutorials demonstrate how to use the following features in creating Tizen native applications:</p>\r
+   <ul>\r
+       <li><a href="service_adaptor_tutorial_n.htm">Service Adaptor: Working with Plugins</a> \r
+       <p>Demonstrates how you can manage adaptors between the Service Adaptor Client and related plugins.</p></li>            \r
+  </ul>\r
+ \r
+ <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>  \r
+  <ul>\r
+   <li><a href="account_tutorial_n.htm">Account Manager: Managing Account Information on the Device</a> <p>Demonstrates how you can connect to and disconnect from the Account Service, create, delete, and update accounts in the account database, and manage account information.</p></li>\r
+   <li><a href="calendar_tutorial_n.htm">Calendar: Managing Calendar Events and Accessing the Calendar Database</a> <p> Demonstrates how you can manage calendars, events, and tasks.</p> </li>\r
+   <li><a href="contact_tutorial_n.htm">Contacts: Managing Contacts and Groups, and Accessing the Contact Database</a> <p>Demonstrates how you can manage contact information, contact groups, vCards, and phone logs.</p></li>\r
+  </ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm b/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
index 5725912..19adc11 100644 (file)
--- a/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
@@ -483,15 +483,15 @@ void tutorial_telephony_modem_get_imei()
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm b/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm
index 38e5266..d7f3c5c 100644 (file)
--- a/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm
@@ -53,15 +53,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm
deleted file mode 100644 (file)
index 1ead5df..0000000
--- a/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Animation and Effect Types: Using Various Effect and Effect Types</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm">Animation and Effect Types Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                     
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Animation and Effect Types: Using Various Effect and Effect Types</h1>
-
-<p>The animation and effect tutorials demonstrate how to create and implement a variety of animation effects in Tizen native applications:</p> 
-       <ul> 
-          <li><a href="ecore_effects_tutorial_n.htm">Ecore Animator: Creating Ecore Animations</a> <p>Demonstrates how you can create an animation by changing and manipulating the Evas object attributes.</p></li>
-          <li><a href="edje_effects_tutorial_n.htm">Edje Animation: Using the Edje Library to Create Animations</a> <p>Demonstrates how you can use the Edje library to create your own animations.</p></li>
-          <li><a href="elm_transit_tutorial_n.htm">Elementary Animations: Applying Transition Effects to an Evas Object</a> <p>Demonstrates how you can create animated transitions effects to an Evas object using ELM transit.</p></li>
-          
-       </ul>
-  
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/basic_tutorial_mn.htm b/org.tizen.tutorials/html/native/ui/basic_tutorial_mn.htm
deleted file mode 100644 (file)
index b518575..0000000
--- a/org.tizen.tutorials/html/native/ui/basic_tutorial_mn.htm
+++ /dev/null
@@ -1,297 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Basic: Using Basic Interactions</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#button">Using Buttons</a></li>
-                       <li><a href="#simple_text">Using Simple Text</a></li>
-                       <li><a href="#simple_list">Using Simple Lists</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/components_mn.htm">Components Guide for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>             
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Basic: Using Basic Interactions</h1>
-
-  
-<p>This tutorial teaches the basics of UI components interactions. It builds upon the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#button">Using Buttons</a>
-               <p>Use buttons in your application.</p></li>
-               <li><a href="#simple_text">Using Simple Text</a>
-               <p>Use simple text and text styles in your application.</p></li>
-               <li><a href="#simple_list">Using Simple Lists</a>
-               <p>Use different kinds of lists in your application.</p></li>
-       </ul>
-
- <h2 id="button" name="button">Using Buttons</h2>
-
-<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
-
-<h3>Button Styles </h3>
-<h4>Basic Text Button</h4>
-
-<p>To create a text-only button, use the following code.</p>
-<pre class="prettyprint">Evas_Object* button;
-
-button = elm_button_add(box);
-elm_object_text_set(button, &quot;Click me&quot;);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button);
-evas_object_show(button);
-</pre>
-
-<h4>Basic Icon Button</h4>
-<p>Instead of a button with text, create a button with an icon.</p>
-<pre class="prettyprint">Evas_Object* button2;
-Evas_Object* icon2;
-
-button2 = elm_button_add(box);
-icon2 = elm_icon_add(box);
-elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(button2, &quot;icon&quot;, icon2);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button);
-evas_object_show(button);
-</pre>
-
-<h4>Icon and Text Button</h4>
-<p>Create buttons with both an icon and a text label.</p>
-<pre class="prettyprint">Evas_Object* button3;
-Evas_Object* icon3;
-button3 = elm_button_add(box);
-icon3 = elm_icon_add(box);
-elm_image_file_set(icon, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(button3, &quot;icon&quot;, icon3);
-elm_object_text_set(button3, &quot;Press me&quot;);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button);
-evas_object_show(button);
-</pre>
-
-<h4>Disabled Button</h4>
-<p>To disable a button so that it is not in use, only shown.</p>
-<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
-</pre>
-
-<h3>Callbacks </h3>
-<p>The Elementary buttons respond to user interactions with several events.</p>
-
-<h4>Click Event</h4>
-<p>The &quot;click&quot; event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
-<pre class="prettyprint">
-static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
-}
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
-</pre>
-
-<h4>Press/Unpress Events</h4>
-<p>The button can respond to the press and unpress events instead of the entire click event.</p>
-<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
-}
-static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
-}
-
-evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
-evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
-</pre>
-
-<h4>Repeated Events</h4>
-<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
-<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;char buf[16];
-
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
-
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
-}
-
-elm_button_autorepeat_set(button3, EINA_TRUE);
-elm_button_autorepeat_initial_timeout_set(button3, 1.0);
-elm_button_autorepeat_gap_timeout_set(button3, 0.5);
-evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
-</pre>
-
- <h2 id="simple_text" name="simple_text">Using Simple Text</h2>
-
-<h3>Basic Text</h3>
-<p>To create a label object, use the following code.</p>
-<pre class="prettyprint">label = elm_label_add(ad-&gt;win);
-elm_object_text_set(label, &quot;My label&quot;);
-evas_object_show(label);
-</pre>
-
-<h3>Sliding Text</h3>
-<p>If your text is too long, set it to slide. The duration of the slide is set to five seconds in the following example. There are several styles available:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text stops at an edge, reverts to its initial position and slides again.</li>
-<li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text is originally empty. It slides in, all the way to the edge, continues sliding until the label is empty, and loops.</li>
-<li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text moves backwards after stopping at the edge. In the example, it is set to bounce.</li>
-</ul>
-
-<pre class="prettyprint">Evas_Object* label;
-label = elm_label_add(-&gt;win);
-elm_object_text_set(label, &quot;This text is supposed to be really long.&quot;);
-elm_label_slide_set(label, EINA_TRUE);
-elm_label_slide_duration_set(label, 5.);
-elm_object_style_set(label, &quot;slide_bounce&quot;);
-evas_object_show(label);
-</pre>
-
-<p>If needed, you can use the <span style="font-family: Courier New,Courier,monospace">slide,end</span> event to respond to the moment when the sliding text reaches its end.</p>
-
-<h3>Marker Text</h3>
-<p>A marker is a text that is centered and bold by default. As the default color is white, set the blue color in this example.</p>
-<pre class="prettyprint">elm_object_style_set(label, &quot;marker&quot;);
-evas_object_color_set(label, 0, 0, 255, 255);
-</pre>
-
-<h3>Styling the Text</h3>
-<p>You can apply basic styles to the text. For a bolded text, do as follows.</p>
-<pre class="prettyprint">elm_object_text_set(label, &quot;&lt;b&gt;This text is bold.&lt;/b&gt;&quot;);
-</pre>
-
- <h2 id="simple_list" name="simple_list">Using Simple Lists</h2>
-
-<h3>Basic List</h3>
-<p>A list is a scrollable container, whose children are selected.</p>
-<pre class="prettyprint">Evas_Object* list;
-Evas_Object* icon;
-list = elm_list_add(ad-&gt;win);
-elm_list_item_append(list, &quot;Text item&quot;, NULL, NULL, NULL, NULL);
-icon = elm_icon_add(ad-&gt;win);
-elm_icon_standard_set(icon, &quot;chat&quot;);
-elm_list_item_append(list, &quot;Second item&quot;, icon, NULL, NULL, NULL);
-Evas_Object* button;
-button = elm_button_add();
-elm_object_text_set(button, &quot;Button&quot;);
-elm_list_item_append(list, &quot;Fourth item&quot;, NULL, button, NULL, NULL);
-elm_list_go(list);
-</pre>
-
-<p>Any Evas Object can be added as an icon, either at the beginning (third parameter) or the end (fourth parameter).</p>
-
-<h3>List Orientation</h3>
-<p>By default, a list is set vertically. This is how to display it horizontally.</p>
-<pre class="prettyprint">elm_list_horizontal_set(list, EINA_TRUE);
-</pre>
-
-<h3>List Mode</h3>
-<p>There are several modes for the list item dimensions.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>: The list does not set any size measures to inform the container how to resize it. If the list is not created as a &quot;resize object&quot;, its dimensions are zeroed. The list respects the container&#39;s geometry and if any of the list items do not fit into the container transverse axis, the list does not scroll in that direction.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_SCROLL</span>: This is the default value. This list is the same as ELM_LIST_COMPRESS, with the exception that if any of the list items do not fit into the container transverse axis, the list still scrolls in that direction.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>: This list sets a minimum size measure on the list object, so that containers may respect it (and resize themselves to fit the child properly). More specifically, a minimum size measure is set for its transverse axis, so that the largest item in that direction fits well. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_EXPAND</span>: Besides setting a minimum size on the transverse axis, as in <span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>, this list sets a minimum size on the longitudinal axis to reserve space for all its children to be visible at the same time. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
-</ul>
-<pre class="prettyprint">elm_list_mode_set(list, ELM_LIST_COMPRESS);
-</pre>
-
-<h3>Scroller Policy</h3>
-<p>Several effects are shown on a list.</p>
-<p>For example, the scroller is set to bounce at the end on either direction.</p>
-<pre class="prettyprint">elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
-</pre>
-
-
-<p>This is how to control displaying scrollbars. The second argument is for the horizontal axis, the third one for the vertical axis.</p>
-<pre class="prettyprint">elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_ON);
-</pre>
-
-<p>As for the bounce preference, the second argument is for the horizontal axis, the third one for the vertical axis.</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> hides the scrollbar</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> shows the scrollbar</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> the scrollbar is  shown only when needed and stays hidden at other times</li>
-</ul>
-
-<h3>Events</h3>
-<p>A list responds to several events:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user clicks or presses an item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The user scrolls the list to the top edge.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The user scrolls the list to the bottom edge.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The user scrolls the list to the left edge.</li>
-<li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The user scrolls the list to the right edge.</li>
-<li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: An item is pressed and highlighted.</li>
-<li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The press and highlight is removed on an item.</li>
-</ul>
-       
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/button_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/button_tutorial_wn.htm
deleted file mode 100644 (file)
index f7fcf7c..0000000
--- a/org.tizen.tutorials/html/native/ui/button_tutorial_wn.htm
+++ /dev/null
@@ -1,240 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Button: Using Buttons</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing the Button Application</a></li>
-                       <li><a href="#style">Using Button Styles</a></li>
-                       <li><a href="#event">Managing Button Events</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#button">Button Guide for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Button.html">Button API for Wearable Native</a></li>             
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Button: Using Buttons</h1>
-
-  
-<p>This tutorial teaches the basics of the button component interactions.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Button API basics by learning about:</p>
-       <ul>
-               <li><a href="#init">Initializing the Button Application</a>
-               <p>Create a base application where buttons can be used.</p></li>
-               <li><a href="#style">Using Button Styles</a>
-               <p>Create various button styles.</p></li>
-               <li><a href="#event">Managing Button Events</a>
-               <p>Handle various button events.</p></li>
-       </ul>
-
-<h2 id="init" name="init">Initializing the Button Application</h2>
-       
-<p>This use case creates an application with a window entitled &quot;Button Basic Tutorial&quot;. The window consists of a box component, and a button is placed inside the box.</p>
-       
-<p>To create a typical elementary application:</p> 
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad) 
-{
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;Evas_Object *btn1, *btn2, *btn3;
-
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Button Basic Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;box);
-
-&nbsp;&nbsp;&nbsp;create_button(ad-&gt;box);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;struct app_data ad = {0,};
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}</pre>
-       
-       
- <h2 id="style" name="style">Using Button Styles</h2>
-
-<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
-
-<p>To use various button styles:</p>
-
-<ol><li><p>To create buttons using various styles:</p>
-
-<ul><li>Create a basic text-only button:
-
-<pre class="prettyprint">Evas_Object* button;
-
-button = elm_button_add(box);
-elm_object_text_set(button, &quot;Click me&quot;);
-evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button);
-evas_object_show(button);
-</pre></li>
-
-<li>Create a basic icon button (no text, just an icon):
-<pre class="prettyprint">Evas_Object* button2;
-Evas_Object* icon2;
-
-button2 = elm_button_add(box);
-icon2 = elm_icon_add(box);
-elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
-elm_object_content_set(button2, icon2);
-evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button2, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button2);
-evas_object_show(button2);
-</pre></li>
-
-<li>Create a button with both an icon and a text label:
-<pre class="prettyprint">Evas_Object* button3;
-Evas_Object* icon3;
-button3 = elm_button_add(box);
-icon3 = elm_icon_add(box);
-elm_image_file_set(icon3, &quot;icon.png&quot;, NULL);
-elm_object_content_set(button3, icon3);
-elm_object_text_set(button3, &quot;Press me&quot;);
-evas_object_size_hint_weight_set(button3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(button3, EVAS_HINT_FILL, 0.5);
-elm_box_pack_end(box, button3);
-evas_object_show(button3);
-</pre></li>
-</ul></li>
-<li><p>To disable a button so that it is not in use, only shown:</p>
-<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
-</pre></li></ol>
-
- <h2 id="event" name="event">Managing Button Events</h2>
-<p>The Elementary buttons respond to user interactions with several events.</p>
-<p>To manage button events:</p>
-
-<ul> 
-<li>Handle click events:
-<p>The &quot;click&quot; event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
-<pre class="prettyprint">
-static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
-}
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
-</pre></li>
-
-<li>Handle press and unpress events:
-<p>The button can respond to the separate press and unpress events instead of the entire click event.</p>
-<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
-}
-static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
-}
-
-evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
-evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
-</pre></li>
-
-<li>Handle repeated events:
-<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
-<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
-{
-&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;char buf[16];
-
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
-
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
-}
-
-elm_button_autorepeat_set(button3, EINA_TRUE);
-elm_button_autorepeat_initial_timeout_set(button3, 1.0);
-elm_button_autorepeat_gap_timeout_set(button3, 0.5);
-evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
-</pre></li></ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm
deleted file mode 100644 (file)
index 8ca2a27..0000000
--- a/org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Circle Components: Creating a Circular View</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#create">Creating the Circle Surface</a></li>
-                       <li><a href="#components">Creating the Circle Components</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/circle_components_wn.htm">Circle Components Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Circle Components: Creating a Circular View</h1>
-
-
-<p>This tutorial demonstrates how you can create a circular view with circle UI components, or circle components, which are supported by EFL Extension library. Additionally, you learn how to make your application to operate with rotary events. You need to test your application with a circular device or an emulator with circular display which has a rotary device in it.</p>
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-<h2>Warm-up</h2>
-<p>Become familiar with the Efl Extension circle component basics by learning about:</p>
-<ul>
-       <li><a href="#create">Creating the Circle Surface</a>
-       <p>Create a surface to show the circular UI of your application.</p></li>
-       <li><a href="#components">Creating the Circle Components</a>
-       <p>Use circular UI components which operate with rotary events.</p></li>
-</ul>
-
- <h2 id="create" name="create">Creating the Circle Surface</h2>
- 
- <p class="figure">Figure: An application view with Circle Slider</p> 
-<p align="center"><img alt="Circle Slider" src="../../images/circle_slider.png" /></p> 
-
-<p>To show the circular UI of circle components, circle surface (<span style="font-family: Courier New,Courier,monospace">Eext_Circle_Surface</span> type) object is needed. The surface object can be connected with several circle components to manage the display. The following code shows how to create a surface object in an elementary naviframe component.</p>
-<pre class="prettyprint">
-Evas_Object *naviframe;
-Eext_Circle_Surface * surface;
-
-naviframe = elm_naviframe_add(parent);
-evas_object_show(naviframe);
-
-surface = eext_circle_surface_naviframe_add(naviframe);
-</pre>
- 
-<h2 id="components">Creating the Circle Components</h2>
-<p>EFL Extension supports several circle components which operate with rotary events. There circle components are responsible for circular UI which fits with circular display.</p>
-<p>To create the circle components:</p>
-<ul>
-<li>Create the circle slider.
-<p>The circle slider provides a circular UI and operates with rotary events to change its value. After calling <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set</span> to the circle slider, every rotary event changes its value with step 0.5.</p>
-<pre class="prettyprint">
-Evas_Object* slider;
-
-slider = eext_circle_object_slider_add(parent, surface);
-eext_circle_object_slider_step_set(slider, 0.5);
-eext_rotary_object_event_activated_set(slider, EINA_TRUE);
-</pre>
-</li>
-
-<li>Create the circle progressbar.
-<p>The circle progressbar provides a circular UI only. Its design can be changed by <span style="font-family: Courier New,Courier,monospace">eext_circle_object</span> APIs.</p>
-<pre class="prettyprint">
-Evas_Object* progressbar;
-
-progressbar = eext_circle_object_progressbar_add(parent, surface);
-eext_circle_object_value_min_max_set(progressbar, 0.0, 100.0);
-eext_circle_object_value_set(progressbar, 50);
-evas_object_show(progressbar);
-</pre>
-</li>
-
-<li>Create the circle scroller.
-<p>The circle scroller provides a circular scroll bar UI to an elementary scroller and operates with rotary events to scroll its content. After calling <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set</span> to the circle scroller, every rotary event moves its content following the scroll direction.</p>
-<pre class="prettyprint">
-Evas_Object* scroller;
-Evas_Object* circle_scroller;
-
-scroller = elm_scroller_add(parent);
-elm_object_content_set(parent, scroller);
-
-circle_scroller = eext_circle_object_scroller_add(scroller, surface);
-eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
-eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
-</pre>
-</li>
-
-<li>Create the circle genlist.
-<p>The circle genlist provides circular scroll bar UI to an elementary genlist and operates with rotary events to move to the next or the previous item. After calling <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set</span> to the circle genlist, every rotary event shows the next or the previous item.</p>
-<pre class="prettyprint">
-Evas_Object* genlist;
-Evas_Object* circle_genlist;
-
-genlist = elm_genlist_add(parent);
-elm_object_content_set(parent, genlist);
-
-circle_genlist = eext_circle_object_genlist_add(genlist, surface);
-eext_circle_object_genlist_scroller_policy_set(circle_genlist, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
-eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
-</pre>
-</li>
-
-<li>Create the circle datetime.
-<p>The circle datetime provides a circular UI which is proper to each date or time field of the elementary datetime and operates with rotary events to change its value. After calling <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set</span> to circle datetime, every rotary event changes the value of each date or time field.</p>
-<pre class="prettyprint">
-Evas_Object* datetime;
-Evas_Object* circle_datetime;
-
-datetime = elm_datetime_add(parent);
-elm_datetime_format_set(datetime, &quot;%d/%b/%Y%I:%M%p&quot;);
-elm_object_content_set(parent, datetime);
-
-circle_datetime = eext_circle_object_datetime_add(datetime, surface);
-eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
-</pre>
-</li>
-</ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/datetime_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/datetime_tutorial_wn.htm
deleted file mode 100644 (file)
index 9ff654a..0000000
--- a/org.tizen.tutorials/html/native/ui/datetime_tutorial_wn.htm
+++ /dev/null
@@ -1,118 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Datetime: Using Datetime</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#date">Creating a Date Picker</a></li>
-                       <li><a href="#time">Creating a Time Picker</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#datetime">Datetime Guide for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Datetime.html">Datetime API for Wearable Native</a></li>         
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Datetime: Using Datetime</h1>
-
-  
-<p>This tutorial explains how you can create UI components that allow the user to select a date or time.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Datetime API basics by learning about:</p>
-       <ul>
-               <li><a href="#date">Creating a Date Picker</a>
-               <p>Create a datetime component with the datepicker style.</p></li>
-               <li><a href="#time">Creating a Time Picker</a>
-               <p>Create a datetime component with the timepicker style.</p></li>
-       </ul>
-
- <h2 id="date" name="date">Creating a Date Picker</h2>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a date picker style (Year : Month : Day).</p>
-<p>The following example creates the datepicker-styled Datetime and adds it in the conform.</p>
-
-<pre class="prettyprint">
-// Add a datepicker style Datetime component
-datetime = elm_datetime_add(ad-&gt;win);
-evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
-evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
-elm_object_style_set(datetime, &quot;datepicker_layout&quot;);
-evas_object_show(datetime);
-
-elm_object_content_set(ad-&gt;conform, datetime);
-</pre>
-
- <h2 id="time" name="time">Creating a Time Picker</h2>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a time picker style (Hour(12) : Min : AM/PM, or Hour(24) : Min).</p>
-<p>The following example creates the timepicker-styled Datetime and adds it in the conform.</p>
-
-<pre class="prettyprint">
-// Add a timepicker style Datetime component
-datetime = elm_datetime_add(ad-&gt;win);
-evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
-evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
-elm_object_style_set(datetime, &quot;timepicker_layout&quot;);
-evas_object_show(datetime);
-
-elm_object_content_set(ad-&gt;conform, datetime);
-</pre>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm
deleted file mode 100644 (file)
index 623195c..0000000
--- a/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm
+++ /dev/null
@@ -1,438 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Ecore Animator: Creating Ecore Animations</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#setup">Setting Up the Application</a></li>
-                       <li><a href="#rotate">Creating a Rotation Effect</a></li>
-                       <li><a href="#zoom">Creating a Zoom Effect</a></li>
-                       <li><a href="#3d_rotate">Creating a 3D Rotation Effect</a></li>
-                       <li><a href="#drop_bounce">Creating Drop and Bounce Effects</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#ecore_animation">Ecore Animator Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Ecore Animator: Creating Ecore Animations</h1>
-
-  
-<p>This tutorial demonstrates how you can use Ecore animators to simplify the creation of animations. Using Ecore animators, you can manually create your own animations by changing and manipulating Evas object attributes. Ecore animators work like timers, running callback functions over a given duration (an animation timeline).</p>
-
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#setup">Setting Up the Application</a>
-               <p>Prepare the application for use.</p> </li>
-               <li><a href="#rotate">Creating a Rotation Effect</a>
-               <p>Create rotation animation effects.</p> </li>
-               <li><a href="#zoom">Creating a Zoom Effect</a>
-               <p>Create zoom animation effects.</p></li>
-               <li><a href="#3d_rotate">Creating a 3D Rotation Effect</a>
-               <p>Create 3D rotation effects.</p></li>
-               <li><a href="#drop_bounce">Creating Drop and Bounce Effects</a>
-               <p>Create drop and bounce effects.</p></li>
-       </ul>
-
- <h2 id="setup" name="setup">Setting Up the Application</h2>
-
-<p>In this part of the tutorial, we create a simple application that manipulates and animates an Evas object. We use a &quot;Basic UI Application&quot; as the basis for the application.</p>
-<p>First, we set up the UI components we are going to use in the application:</p>
-
-<pre class="prettyprint">typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;// Main window
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;// Application title
-&nbsp;&nbsp;&nbsp;Evas_Object *label;
-
-&nbsp;&nbsp;&nbsp;// Buttons
-&nbsp;&nbsp;&nbsp;Evas_Object *bt1;
-&nbsp;&nbsp;&nbsp;Evas_Object *bt2;
-&nbsp;&nbsp;&nbsp;Evas_Object *bt3;
-
-&nbsp;&nbsp;&nbsp;// Animation target
-&nbsp;&nbsp;&nbsp;Evas_Object *target;
-} appdata_s;
-</pre>
-
-<p>We then create the actual UI components in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, starting with the main window and application title:</p>
-
-<pre class="prettyprint">// Main window
-ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-{
-&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-}
-
-evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-// Application title
-ad-&gt;label = elm_label_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;label, &quot;Ecore Animator Tutorial&quot;);
-evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
-evas_object_show(ad-&gt;label);
-</pre>
-
-<p>Next, we create the animation target, which is an Evas object of type <span style="font-family: Courier New,Courier,monospace">Elm_Image</span>. The image that is used in the source code is stored in the <span style="font-family: Courier New,Courier,monospace">res/images</span> folder of the application. The image that is used in the EDC file is stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> folder.</p>
-
-<pre class="prettyprint">// Animation target
-// Setting the image path
-char buf[PATH_MAX];
-snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
-// Adding the image
-ad-&gt;target = elm_image_add(ad-&gt;win);
-// Setting the image path
-if (!elm_image_file_set(ad-&gt;target, buf, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
-evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
-// Moving the image
-evas_object_move(ad-&gt;target, 130, 100);
-// Resizing the image
-evas_object_resize(ad-&gt;target, 200, 100);
-// Showing the image
-evas_object_show(ad-&gt;target);
-</pre>
-
-<p>All images are available in the <span style="font-family: Courier New,Courier,monospace">/opt/usr/apps/&lt;PACKAGE_NAME&gt;/res/images</span> folder of the application. The package name is defined at the begin of the application code:</p>
-
-<pre class="prettyprint">#if !defined(PACKAGE)
-#define PACKAGE &quot;org.tizen.ecoreanimator&quot;
-#endif
-</pre>
-
-<p>The image path is set by calling the <span style="font-family: Courier New,Courier,monospace">elm_image_file_set()</span> function. This function takes as arguments the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object and the path of the image file, built with the <span style="font-family: Courier New,Courier,monospace">snprintf()</span> function and stored in a buffer.</p>
-
-<pre class="prettyprint">// Setting the image path
-char buf[PATH_MAX];
-snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
-// Adding the image
-ad-&gt;target = elm_image_add(ad-&gt;win);
-// Setting the image path
-if (!elm_image_file_set(ad-&gt;target, buf, NULL))
-&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
-evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre>
-
-<p>The remaining code moves and resizes the image:</p>
-
-<pre class="prettyprint">//Moving the image
-evas_object_move(ad-&gt;target, 130, 100);
-//Resizing the image
-evas_object_resize(ad-&gt;target, 200, 100);
-//Showing the image
-</pre>
-
- <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
-
-<p>After the animation target is created, we can create the first button and the associated rotation animation:</p>
-
-<pre class="prettyprint">// Button 1
-ad-&gt;bt1 = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;bt1, &quot;Rotate&quot;);
-evas_object_size_hint_weight_set(ad-&gt;bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_move(ad-&gt;bt1, 25, 0);
-evas_object_resize(ad-&gt;bt1, 90, 70);
-evas_object_smart_callback_add(ad-&gt;bt1, &quot;clicked&quot;, _btn_rotate_cb, ad);
-evas_object_show(ad-&gt;bt1);
-</pre>
-
-<p>We create the button for triggering the rotation effect. The button is placed and resized, and associated with the <span style="font-family: Courier New,Courier,monospace">_btn_rotate_cb()</span> callback function. This callback function calls the animation on the animation target.</p>
-
-<pre class="prettyprint">static void _btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_rotate, ad-&gt;target);
-}
-</pre>
-
-<p>In this callback function, we create an Ecore animator timeline using the <span style="font-family: Courier New,Courier,monospace">ecore_animator_timeline_add()</span> function. This function adds an animator that runs for a limited time: we run the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> animation callback function for 1 second on the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object.</p>
-
-<p>Next, we write the animation callback function that actually runs the animation. This callback is an <span style="font-family: Courier New,Courier,monospace">Ecore_Timeline_Cb</span> function, meaning it returns an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span> value and takes as arguments some <span style="font-family: Courier New,Courier,monospace">data</span> and the current position along the animation timeline (<span style="font-family: Courier New,Courier,monospace">pos</span>).</p>
-
-<p>To create the rotation animation, we use an Evas Map. The map handles the necessary map points and allows you to manipulate the target Evas object on the X, Y, and Z axes.</p>
-
-<pre class="prettyprint">static Eina_Bool
-_do_rotate(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;// Get the animation target
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
-&nbsp;&nbsp;&nbsp;// Declaration of an `Evas_Map`
-&nbsp;&nbsp;&nbsp;Evas_Map *m;
-&nbsp;&nbsp;&nbsp;// Variables to store the target size and position
-&nbsp;&nbsp;&nbsp;int x, y, w, h;
-
-&nbsp;&nbsp;&nbsp;// Getting the size and position of the target
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;// Creation of an `Evas_Map` of 4 points
-&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
-&nbsp;&nbsp;&nbsp;// Populate source and destination map points to match exactly object.
-&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
-&nbsp;&nbsp;&nbsp;// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center.
-&nbsp;&nbsp;&nbsp;evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
-&nbsp;&nbsp;&nbsp;// Setting the object to &quot;animate&quot; in the `Evas_Map`
-&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
-&nbsp;&nbsp;&nbsp;// Starting the Animation
-&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;// Free used memory
-&nbsp;&nbsp;&nbsp;evas_map_free(m);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>In the animation callback function, we first declare the Evas Map. To implement the rotation, we need to set an X and Y center, so we create 4 integer variables to store the size and position of the target. This information is provided by the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function, which returns the X and Y coordinates and the weight and height of the target Evas object. Now we have all the required data to build the animation.</p>
-
-<p>We create an Evas Map consisting of four points, and we populate these points with the animation target:</p>
-
-<pre class="prettyprint">// Creation of an Evas_Map of 4 points
-m = evas_map_new(4);
-// Populate source and destination map points to match the object.
-evas_map_util_points_populate_from_object(m, obj);
-</pre>
-
-<p>Now we can define the rotation using the <span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate()</span> function:</p>
-
-<pre class="prettyprint">// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center.
-evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
-</pre>
-
-<p>The animation callback function will be called at several points along the timeline, which is why we multiply the rotation angle (360°) by the timeline position (<span style="font-family: Courier New,Courier,monospace">pos</span>) to get the actual animation angle. If we do not do this, we will never see the animation take place. We then join the target object to the map and run the animation: </p>
-
-<pre class="prettyprint">// Setting the object to &quot;animate&quot; in the Evas Map
-evas_object_map_set(obj, m);
-// Starting the Animation
-evas_object_map_enable_set(obj, EINA_TRUE);
-</pre>
-
-<p>Each call to the animation callback function will rotate the object (360 * timeline position) degrees.</p>
-
-<p>Finally, we free up the memory allocated to the Evas Map:</p>
-
-<pre class="prettyprint">// Free used memory
-evas_map_free(m);
-</pre>
-
- <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
-
-<p>The next animation is a zoom, for which we also use an Evas Map.</p>
-
-<p>First, we create the button in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
-
-<pre class="prettyprint">// Button 2
-ad-&gt;bt2 = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;bt2, &quot;Zoom&quot;);
-evas_object_size_hint_weight_set(ad-&gt;bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_move(ad-&gt;bt2, 315, 0);
-evas_object_resize(ad-&gt;bt2, 90, 70);
-evas_object_smart_callback_add(ad-&gt;bt2, &quot;clicked&quot;, _btn_zoom_cb, ad);
-evas_object_show(ad-&gt;bt2);
-</pre>
-
-<p>We then create the button callback function with a new timeline:</p>
-
-<pre class="prettyprint">static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_zoom, ad-&gt;target);
-}
-</pre>
-
-<p>Next, we create the <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> animation callback function, which is almost identical to the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> callback function, except that we use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function to create the animation:</p>
-
-<pre class="prettyprint">static Eina_Bool
-_do_zoom(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
-&nbsp;&nbsp;&nbsp;Evas_Map *m;
-&nbsp;&nbsp;&nbsp;int x, y, w, h;
-
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
-&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
-&nbsp;&nbsp;&nbsp;evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
-&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
-&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_map_free(m);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function takes the following arguments:</p>
-
-<ul>
-<li>The map to change</li>
-<li>The horizontal zoom factor</li>
-<li>The vertical zoom factor</li>
-<li>The horizontal position (X coordinate) of the zooming center</li>
-<li>The vertical position (Y coordinate) of the zooming center</li>
-</ul>
-
-<p>Here, we use a horizontal and vertical zoom factor of 2, and the X and Y coordinates of the target as the horizontal and vertical center coordinates.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> callback function is called at several points along the animation timeline, which is why we multiply the horizontal and vertical zoom factor values by the timeline position. Each call will zoom more than the previous one, thereby creating the animation effect.</p>
-
- <h2 id="3d_rotate" name="3d_rotate">Creating a 3D Rotation Effect</h2>
-
-<p>The last animation is a 3D rotation. For this one, we are going to rotate the Evas object on all three axes (X, Y, Z).</p>
-
-<p>First, we create the button and its callback function:</p>
-
-<pre class="prettyprint">// Button 3
-ad-&gt;bt3 = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;bt3, &quot;3D&quot;);
-evas_object_size_hint_weight_set(ad-&gt;bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_move(ad-&gt;bt3, 170, 0);
-evas_object_resize(ad-&gt;bt3, 90, 70);
-evas_object_smart_callback_add(ad-&gt;bt3, &quot;clicked&quot;, _btn_3d_cb, ad);
-evas_object_show(ad-&gt;bt3);
-</pre>
-
-<pre class="prettyprint">static void _btn_3d_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_3d, ad-&gt;target);
-}
-</pre>
-
-<p>Next, we create the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> animation callback function, which is very similar to the rotate and zoom callback functions. To create the animation, we use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function, which allows you to rotate any Evas object on all three axes.</p>
-
-<pre class="prettyprint">static Eina_Bool
-_do_3d(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
-&nbsp;&nbsp;&nbsp;Evas_Map *m;
-&nbsp;&nbsp;&nbsp;int x, y, w, h;
-
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
-&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
-&nbsp;&nbsp;&nbsp;evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y + 60, 0);
-&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
-&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_map_free(m);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function takes the following arguments:</p>
-
-<ul>
-<li>The map to change</li>
-<li>The angle (0-360°) to rotate around the X axis</li>
-<li>The angle (0-360°) to rotate around the Y axis</li>
-<li>The angle (0-360°) to rotate around the Z axis</li>
-<li>The X coordinate of the rotation center</li>
-<li>The Y coordinate of the rotation center</li>
-<li>The Z coordinate of the rotation center</li>
-</ul>
-
-<p>Here, we rotate 360 degrees around each axis. The horizontal (X) rotation center is the X position of the target plus its width divided by 2. The vertical (Y) rotation center is the Y position of the target plus 60. The Z rotation center is 0.</p>
-
-<p>As with the rotation and zoom animations, we multiply the angles by the timeline position to gently rotate the target on each call to the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> callback function along the timeline.</p>
-
- <h2 id="drop_bounce" name="drop_bounce">Creating Drop and Bounce Effects</h2>
-
-<p>To finish, we add drop and bounce effects to our buttons at application start. To do this, we create one timeline per button after creating the buttons in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
-
-<pre class="prettyprint">ecore_animator_timeline_add(2, _do_drop, ad-&gt;bt1);
-ecore_animator_timeline_add(2.3, _do_drop, ad-&gt;bt2);
-ecore_animator_timeline_add(2.5, _do_drop, ad-&gt;bt3);
-</pre>
-
-<p>We call the same <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> animation callback function for each timeline. In this callback, instead of using an Evas Map, we simply change the position of the target using the <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span> function:</p>
-
-<pre class="prettyprint">static Eina_Bool
-_do_drop(void *data, double pos)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
-&nbsp;&nbsp;&nbsp;int x, y, w, h;
-&nbsp;&nbsp;&nbsp;double frame = pos;
-&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
-
-&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-</pre>
-
-<p>To get the bounce effect, we use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_pos_map()</span> function, which maps an input position from 0.0 to 1.0 along the timeline to a position on a different curve. The curve can be of different types, such as <span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and <span style="font-family: Courier New,Courier,monospace">BOUNCE</span>. This function takes the following arguments:</p>
-
-<ul>
-<li>The input position to map</li>
-<li>The mapping to use (<span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and so on)</li>
-<li>v1, which is the first parameter used by the mapping</li>
-<li>v2, which is the second parameter used by the mapping</li>
-</ul>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">ECORE_POS_MAP_BOUNCE</span> map we use starts at 0.0, then drops like a ball bouncing to the ground at 1.0, bouncing v2 times with a decay factor of v1. Here, we bounce 4 times with a decay factor of 2:</p>
-
-<pre class="prettyprint">frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
-</pre>
-
-<p>This frame is used in the move function to create the animation. The value increases on each <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> call along the timeline, which produces a nice drop of the buttons from their initial position to 600 pixels on the vertical axis.</p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm
deleted file mode 100644 (file)
index 664a280..0000000
--- a/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm
+++ /dev/null
@@ -1,390 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Edje Animation: Using the Edje Library to Create Animations</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#startup">Animating on Application Start-up</a>
-                       </li>
-                       <li><a href="#click">Animating Object on Click</a>
-                       </li>
-               </ul>   
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">                
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#edje_animation">Edje Animation Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Edje Animation: Using the Edje Library to Create Animations</h1>
-
-  
-<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> can create pre-defined animations, but you can also use the Edje library to create your own animations.</p>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Edje, Elementary, and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#startup">Animating on Application Start-up</a>
-               <p>Run an animation on application start-up.</p></li>
-               <li><a href="#click">Animating Object on Click</a>
-               <p>Animate an object when clicking.</p></li>
-       </ul>
-
- <h2 id="startup" name="startup">Animating on Application Start-up</h2>
-
-
-<p>The goal of this tutorial is to create an animation target and buttons to start animations, all this in an EDC (Edje Data Collection) file.</p>
-<p>First create an application using Basic EDC UI Application. This model provides a simple application just like the one used in the previous chapter, but with one more element: an <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
-<p>Animations can be run at application startup. By default the Basic EDC UI Application model produces an empty window with a title. In this example a Tizen logo is added to the window and the behavior of the window title is changed.</p>
-<p>The images used by the Edje file are stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> directory of the application. Copy the Tizen logo available in <span style="font-family: Courier New,Courier,monospace">shared/res/&lt;yourapplicationname&gt;.png</span> into the Edje image directory <span style="font-family: Courier New,Courier,monospace">edje/images</span>. Then add the image to the Edje images collection.</p>
-<pre class="prettyprint">images 
-{
-&nbsp;&nbsp;&nbsp;image: &quot;edceffects.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;image: &quot;tizen-logo.png&quot; COMP;
-}
-</pre>
-
-<p>Then add an Edje part using the small logo: this part has two states. This is the first important notion for animations. The <span style="font-family: Courier New,Courier,monospace">STATE</span> describes the appearance of a part: size, position, color, etc.</p>
-<p>In this example, the part has two states, default and down-state:</p>
-<pre class="prettyprint">// An image using the tizen logo
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
-&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 63 63;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 63 63;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;small-logo.png&quot;; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;down-state&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.92;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.05 1.0;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre><p>The logo part has the <span style="font-family: Courier New,Courier,monospace">IMAGE</span> type. The default state contains in the first description of the part sets:</p>
-<ul>
-<li>the maximum and minimum size using the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> statements</li>
-<li>the image to use in this <span style="font-family: Courier New,Courier,monospace">part</span></li>
-<li>the default position.</li>
-</ul>
-<p>The second state, down-state, inherits all of the default&#39;s attributes, and only changes the position to put the image at the bottom of the application window.</p>
-<p>These two states are the start and end states of the animation. To actually create the animation, add a <span style="font-family: Courier New,Courier,monospace">program</span> to the Edge <span style="font-family: Courier New,Courier,monospace">programs</span> collection.</p>
-<pre class="prettyprint">// Icon drop animation
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;down-state&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;logo&quot;;
-&nbsp;&nbsp;&nbsp;transition: BOUNCE 2.5 0.0 5.0;
-}
-</pre><p>This program is named <span style="font-family: Courier New,Courier,monospace">animation,state1</span> and is started when the application receives the <span style="font-family: Courier New,Courier,monospace">load</span> signal immediately on startup. It runs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action so it changes the object state from default to down-state. The target of the program is the logo <span style="font-family: Courier New,Courier,monospace">part</span>.</p>
-<p>In order to switch from one state to another, it uses a <span style="font-family: Courier New,Courier,monospace">transition</span> of the <span style="font-family: Courier New,Courier,monospace">BOUNCE</span> type with three parameters, the <span style="font-family: Courier New,Courier,monospace">FIXME</span>, the <span style="font-family: Courier New,Courier,monospace">FIXME</span>, and the duration which here is set to five seconds.</p>
-<p>This produces an falling and bouncing effect.</p>
-<p>Also add an animation for the window title to make it move from the left to the right with a bounce effect while growing the font size.</p>
-<p>Create a new state on the part called &quot;txt_title&quot; inside which both the font size and position are changed.</p>
-<pre class="prettyprint">part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;txt_title&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-
-&nbsp;&nbsp;&nbsp;// The default State
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.0 0.0; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 24;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;// The &quot;Bigger&quot; state
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;Bigger&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.75 0.0; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 28;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>Create a program to animate this part on startup, just like the small Tizen logo.</p>
-<pre class="prettyprint">// Make the title bigger
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,bigtitle&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;Bigger&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 5.0;
-}
-</pre>
-<p>This program goes from the default state to the bigger state in five seconds with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> effect, automatically running on the application startup.</p>
-
- <h2 id="click" name="click">Animating Object on Click</h2>
-
-<p>All the previous animations are automatic and do not have any relation with the user&#39;s actions. Next animate a part by clicking on another one. Make the title restore its default aspect when clicking on the small logo.</p>
-<p>The parts and the states are already defined. The animation goes back to the default state, there is no need to add any parts or states: only add a program which makes the transition when clicking on logo part.</p>
-<pre class="prettyprint">// Make the title go back to normal
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;animation,normaltitle&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;logo&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
-}
-</pre><p>This program starts when the application receives the signal <span style="font-family: Courier New,Courier,monospace">mouse,clicked,*</span> (any button of the mouse is clicked) from the part called logo, (<span style="font-family: Courier New,Courier,monospace">source</span>). It performs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action and sets the default state on the target <span style="font-family: Courier New,Courier,monospace">txt_file</span> part with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> transition.</p>
-<p>When clicking any mouse button on the small logo, the title goes back to its original state.</p>
-<h3>Rotating Parts</h3>
-<p>Next add two more buttons to the application and create programs to animate a target.</p>
-<p>It is possible to create a button with Edje from scratch, but to save time, the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is used in this example to store Elementary UI components.</p>
-<p>First create the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts, and then the <span style="font-family: Courier New,Courier,monospace">Elementary</span> UI components in the <span style="font-family: Courier New,Courier,monospace">.c</span> file.</p>
-<pre class="prettyprint">// Container for the rotate button
-part 
-{
-&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;name: &quot;btn/rotate&quot;;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.10 0.80;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.30 0.90;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre><p>This part is called <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, it only has a <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> type and a default state with its position being on the bottom left of the screen.</p>
-<pre class="prettyprint">// Container for the grow button
-part 
-{
-&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;name: &quot;btn/grow&quot;;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.02 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;btn/rotate&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 2.02 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;btn/rotate&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre><p>This second <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is very similar to the first one. It is placed relatively to <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, in order to remain next to it.</p>
-<p>Next create the actual UI components. This is done in the <span style="font-family: Courier New,Courier,monospace">.c</span> file and is very similar to what is done for the buttons in the first chapter.</p>
-<p>This code is added to the <span style="font-family: Courier New,Courier,monospace">create_base_ui</span> function.</p>
-<pre class="prettyprint">// Creation button in the app window
-ad-&gt;button = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
-// Add the button to the edje layout container called &quot;btn/rotate&quot;
-elm_object_part_content_set(ad-&gt;layout, &quot;btn/rotate&quot;, ad-&gt;button);
-evas_object_show(ad-&gt;button);
-
-// Creation a up button in the app window
-ad-&gt;btn_up = elm_button_add(ad-&gt;win);
-// Add the button to the edje layout container called &quot;btn/grow&quot;
-elm_object_text_set(ad-&gt;btn_up, &quot;Grow&quot;);
-elm_object_part_content_set(ad-&gt;layout, &quot;btn/grow&quot;, ad-&gt;btn_up);
-evas_object_show(ad-&gt;btn_up);
-</pre><p>In the default Basic EDC UI Application, the Edje layout is loaded by default. Create two Elementary buttons and add them to the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> containers, without having to setup sizes or positions as this is done in the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> container.</p>
-<p>Note that the part name is very important because it is used to be merged the Elementary UI component and the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part.</p>
-<p>When the buttons placed and set, create the animation target. it is done in the EDC file.</p>
-<p>Add the animation target part.</p>
-<p>The part initialization and the default <span style="font-family: Courier New,Courier,monospace">state</span>:</p>
-<pre class="prettyprint">// The animation target
-part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;type: IMAGE;
-
-&nbsp;&nbsp;&nbsp;// Default state
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;tizen-logo.png&quot;; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; // red
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.3 0.3; }
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.7 0.4; }
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>This <span style="font-family: Courier New,Courier,monospace">part</span> is an image displaying a big Tizen logo, placed on the top of the screen more or less centered.</p>
-<p>Create a state to change the color and add the <span style="font-family: Courier New,Courier,monospace">map</span> statement.</p>
-<pre class="prettyprint">// The rotate state
-description 
-{
-&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-
-&nbsp;&nbsp;&nbsp;map 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable Map on the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable smooth rendering
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable perspective
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Apply rotations on the part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.x: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.y: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.z: 0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;color: 0 255 0 255; // green
-}
-</pre><p>This part changes the color to green and defines the <span style="font-family: Courier New,Courier,monospace">map</span>. This statement makes rotations possible on an Edje <span style="font-family: Courier New,Courier,monospace">part</span>. Rotations are done around the x, y or z axes. In this example, the map is enabled and a 0&#176; rotation is applied around each axis.</p>
-<p>Add a state with a rotation around the z axis of 360&#176;.</p>
-<pre class="prettyprint">description 
-{
-&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 1.0;
-&nbsp;&nbsp;&nbsp;inherit: &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;map.rotation.z: 360;
-}
-</pre><p>This <span style="font-family: Courier New,Courier,monospace">state</span> inherits from the default state parameters and add a rotation around the z axis.</p>
-<p>Finally add a state to the other button animation grow. Change the size of the animation target and add an offset.</p>
-<pre class="prettyprint">// The grow state
-description {
-&nbsp;&nbsp;&nbsp;state: &quot;grow&quot; 0.0;
-&nbsp;&nbsp;&nbsp;color: 0 0 255 255; // blue
-&nbsp;&nbsp;&nbsp;rel1 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;rel2 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.7 0.4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre><p>The last step is to create the programs to make all these states animate.</p>
-<p>To make the rotation animation smoother, create and chain several <span style="font-family: Courier New,Courier,monospace">programs</span> with different durations.</p>
-<p>First create the main one: it goes from the default state to the rotate 0.0 state in 0.2 seconds.</p>
-<p>Note that the states are all named the same way (rotate) but not with the same version. This version allows you to have more than one state with the same name, in fact the actual name of the state is the name plus the version.</p>
-<pre class="prettyprint">// Change the color of target to green
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;rotate,target&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;btn/rotate&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 0.2;
-&nbsp;&nbsp;&nbsp;after: &quot;rotate,target,2&quot;;
-}
-</pre><p>The program starts when the <span style="font-family: Courier New,Courier,monospace">btn/rotate</span> part is clicked with any mouse button. When the animation ends, it calls the next one called <span style="font-family: Courier New,Courier,monospace">rotate,target,2</span>.</p>
-<pre class="prettyprint">// Rotate 360&#176;
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;rotate,target,2&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 0.7;
-&nbsp;&nbsp;&nbsp;after: &quot;rotate,end&quot;;
-}
-</pre><p>This program sets the part state to <span style="font-family: Courier New,Courier,monospace">rotate 1.0</span> in 0.7 seconds, and when done calls the next one <span style="font-family: Courier New,Courier,monospace">rotate,end</span>.</p>
-<pre class="prettyprint">// Go back to the normal
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;rotate,end&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-}
-</pre><p><span style="font-family: Courier New,Courier,monospace">rotate,end</span> is the last program of the rotation effect: it sets the state to <span style="font-family: Courier New,Courier,monospace">rotate 0.0</span> very fast.</p>
-<p>The last program of this example is the grow effect, it switches from one state to another.</p>
-<pre class="prettyprint">// Grow the target and go back to normal state
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;grow,target&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;btn/grow&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;grow&quot; 1.0;
-&nbsp;&nbsp;&nbsp;after: &quot;go,default&quot;;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
-}
-</pre><p>It starts when the <span style="font-family: Courier New,Courier,monospace">btn/grow</span> part is clicked, it goes from the current state to <span style="font-family: Courier New,Courier,monospace">grow 1.0</span> in one second. It then calls the <span style="font-family: Courier New,Courier,monospace">go,default</span> program. In this program, both size and color change during the transition.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">go,default</span> program sets the status back default for the animation target.</p>
-<pre class="prettyprint">// Go back to normal (default) state
-program 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;go,default&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 1.0;
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm
deleted file mode 100644 (file)
index 806cdd7..0000000
--- a/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm
+++ /dev/null
@@ -1,385 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Efl Extension: Creating a Naviframe Window</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing the EFL Extension</a>
-                       </li>
-                       <li><a href="#hw">Managing Hardware Key Events</a>
-                       </li>
-                       <li><a href="#rotary">Managing Rotary Events</a>
-                       </li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/efl_extension_n.htm">Efl Extension Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>             
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                         
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Efl Extension: Creating a Naviframe Window</h1>
-
-
-<p>This tutorial demonstrates how you can handle hardware key and rotary events.</p>
- 
-<h2>Warm-up</h2>
-<p>Become familiar with the Efl Extension, Elementary, and Evas API basics by learning about:</p>
-<ul>
-       <li><a href="#init">Initializing the EFL Extension</a>
-       <p>Initialize the EFL Extension for use.</p></li>
-       <li><a href="#hw">Managing Hardware Key Events</a>
-       <p>Use the <strong>Menu</strong> and <strong>Back</strong> keys in your application.</p></li>
-       <li><a href="#rotary">Managing Rotary Events</a>
-       <p>Manage rotary events on a circular device.</p></li>
-</ul>
-
- <h2 id="init" name="init">Initializing the EFL Extension</h2>
-
-<p>To use the functions and data types of the Efl Extension API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file in your application:</p>
-<pre class="prettyprint">
-#include &lt;efl_extension.h&gt;
-</pre>
-
-<h2 id="hw" name="hw">Managing Hardware Key Events</h2>
-
-<table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Hardware key events are only supported in mobile devices.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p>The application has a window that contains a naviframe and registers the EFL Extension <strong>Menu</strong> and <strong>Back</strong> key events for the naviframe.</p>
-<p>When the <strong>Menu</strong> key is pressed, a popup is created and an EFL Extension <strong>Back</strong> key event for this popup is registered. If the popup is shown and the <strong>Back</strong> key is pressed, the popup is removed. Otherwise, if the <strong>Back</strong> key is pressed and there is no popup, the application is hidden.</p>
-
-<p>To manage hardware key events:</p>
-<ol>
-<li>Create objects using the window and naviframe:
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
-
-&nbsp;&nbsp;&nbsp;// Create the window
-&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, _win_del, NULL);
-
-&nbsp;&nbsp;&nbsp;// Create the naviframe
-&nbsp;&nbsp;&nbsp;Evas_Object *nf = NULL;
-&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, nf);
-&nbsp;&nbsp;&nbsp;evas_object_show(nf);
-
-&nbsp;&nbsp;&nbsp;// Content
-&nbsp;&nbsp;&nbsp;Evas_Object *label = NULL;
-&nbsp;&nbsp;&nbsp;label = elm_label_add(nf);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(label, &quot;Press menu key to show popup,&lt;br/&gt;back key to exit.&quot;);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(nf, &quot;Efl Extension usage&quot;, NULL, NULL, label, NULL);
-
-&nbsp;&nbsp;&nbsp;// Show the window
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-}
-</pre>
-</li>
-
-<li>Register EFL Extension callbacks for the naviframe:
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Register the EFL extension callbacks for Menu and Back key events
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_MORE, _create_popup, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_BACK, _nf_back_cb, win);
-}
-</pre>
-</li>
-
-<li>Create a popup and register EFL Extension <strong>Back</strong> key event callbacks for it:
-<pre class="prettyprint">
-static void
-_create_popup(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *parent = obj;
-
-&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL, *content = NULL;
-&nbsp;&nbsp;&nbsp;popup = elm_popup_add(parent);
-&nbsp;&nbsp;&nbsp;elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
-&nbsp;&nbsp;&nbsp;elm_popup_orient_set(popup, ELM_POPUP_ORIENT_CENTER);
-
-&nbsp;&nbsp;&nbsp;// Popup content
-&nbsp;&nbsp;&nbsp;content = elm_label_add(parent);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(content, &quot;Press back key to remove popup.&quot;);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, content);
-
-&nbsp;&nbsp;&nbsp;// Register the EFL extension callback for the Back key event
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_show(popup);
-}
-</pre>
-
-<p>To remove the popup when a <strong>Back</strong> key event occurs, use the <span style="font-family: Courier New,Courier,monospace;">eext_popup_back_cb</span> callback.</p>
-
-<p>The callback function for menu key callback:</p>
-<pre class="prettyprint">
-static void
-_nf_back_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win = data;
-
-&nbsp;&nbsp;&nbsp;// Hide the window
-&nbsp;&nbsp;&nbsp;elm_win_lower(win);
-}
-</pre>
-</li>
-</ol>
-
-<h2 id="rotary">Managing Rotary Events</h2>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Rotary events are only supported in devices with a circular screen.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-<p>To manage rotary events:</p>
-<ol>
-<li>Create the rotary event handler:
-<ol type="a">
-<li>Create the window:
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-Evas_Object *win = NULL;
-
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension circle sample&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Show the window after base gui is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-}
-</pre>
-</li>
-
-<li>Register the rotary event handler:
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Register the rotary event handler
-&nbsp;&nbsp;&nbsp;eext_rotary_event_handler_add(_rotary_handler_cb, NULL);
-}
-</pre></li>
-<li>Define the callback function:
-<pre class="prettyprint">
-Eina_Bool _rotary_handler_cb(void *data, Eext_Rotary_Event_Info *ev)
-{
-&nbsp;&nbsp;&nbsp;if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGD(&quot;Rotary device rotated in clockwise direction&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGD(&quot;Rotary device rotated in counter clockwise direction&quot;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-</pre>
-</li>
-
-<li>Remove the rotary event handler and release all resources when you do not need it anymore.
-<pre class="prettyprint">
-static void
-app_terminate(void *data)
-{
-&nbsp;&nbsp;&nbsp;// Release all resources
-&nbsp;&nbsp;&nbsp;eext_rotary_event_handler_del(_rotary_handler_cb);
-}
-</pre>
-</li>
-</ol>
-</li>
-<li>Create a rotary event callback for a normal Evas object. 
-<p>When a rotary event occurs, the slider value is adjusted accordingly.</p>
-<ol type="a">
-<li>Create the objects.
-<p>The window and the slider are created using the Elementary APIs.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL, *slider = NULL;
-
-&nbsp;&nbsp;&nbsp;// Window 
-&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Slider
-&nbsp;&nbsp;&nbsp;slider = elm_slider_add(win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(slider, 0, 50);
-&nbsp;&nbsp;&nbsp;elm_slider_step_set(slider, 1.0);
-&nbsp;&nbsp;&nbsp;evas_object_show(slider);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, slider);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up 
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-}
-</pre>
-</li>
-<li>Register the rotary event callback.
-<p>To receive the rotary event, register the rotary event callback and set the activated object as the slider object.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Register rotary event callback 
-&nbsp;&nbsp;&nbsp;ext_rotary_object_event_callback_add(slider, _rotary_event_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_rotary_object_event_activated_set(slider, EINA_TRUE);
-}
-</pre>
-<p>Define the rotary callback function:</p>
-<pre class="prettyprint">
-Eina_Bool _rotary_event_cb(void *data, Evas_Object *obj, Eext_Rotary_Event_Info *ev)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *slider = obj;
-&nbsp;&nbsp;&nbsp;int val = elm_slider_value_get(slider);
-&nbsp;&nbsp;&nbsp;if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, val + 1);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, val - 1);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return EINA_FALSE;
-}
-</pre>
-</li>
-</ol>
-</li>
-<li>Create a rotary event callback for an EFL Extension object. 
-<p>When a rotary event occurs, the slider value is adjusted accordingly.</p>
-<ol type="a">
-<li>Create the objects:
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL, *conform = NULL;
-&nbsp;&nbsp;&nbsp;Eext_Circle_Surface *sur = NULL;
-
-&nbsp;&nbsp;&nbsp;// Window 
-&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension circle sample&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Conformant
-&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(win);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(win, ELM_WIN_INDICATOR_OPAQUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(conform);
-
-&nbsp;&nbsp;&nbsp;// Surface 
-&nbsp;&nbsp;&nbsp;sur = eext_circle_surface_conformant_add(conform);
-
-&nbsp;&nbsp;&nbsp;// Slider
-&nbsp;&nbsp;&nbsp;slider = eext_circle_object_slider_add(conform, sur);
-&nbsp;&nbsp;&nbsp;eext_circle_object_value_min_max_set(slider, 0.0, 30.0);
-&nbsp;&nbsp;&nbsp;eext_circle_object_value_set(slider, 0.0);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-}
-</pre>
-</li>
-<li>Set the activated object.
-<p>Since the EFL Extension API is used to create the slider object, the created slider object already registers the rotary event callbacks internally. To receive a rotary event, you only need to set the activated object as the desired object (slider).</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Activate circle slider&#39;s rotary object event
-&nbsp;&nbsp;&nbsp;// Its value increases/decreases its value by 1.0 to clockwise or 
-&nbsp;&nbsp;&nbsp;// counter-clockwise rotary event
-&nbsp;&nbsp;&nbsp;eext_rotary_object_event_activated_set(slider, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;eext_circle_object_slider_step_set(slider, 1.0);
-}
-</pre>
-</li>
-</ol>
-</li>
-</ol>
-
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm
deleted file mode 100644 (file)
index ff00863..0000000
--- a/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm
+++ /dev/null
@@ -1,727 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>EFL Optimization: Optimizing Tizen Native Applications</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#edc">Optimizing EDC</a></li>
-                       <li><a href="#evas">Optimizing Evas</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                        <li><a href="../../../../org.tizen.gettingstarted/html/native/process/performance_n.htm">Optimizing Application Performance</a></li>
-                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>                    
-                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>                        
-                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                         
-                </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>EFL Optimization: Optimizing Tizen Native Applications</h1>
-
-
-<p>This tutorial demonstrates how you can optimize your Tizen native application.</p>
-
-  <h2>Warm-up</h2>
-  <p>Become familiar with the Edje, Elementary, and Evas API basics by learning about:</p>
-  <ul>
-<li><a href="#edc">Optimizing EDC</a>
-<p>Optimize the EDC code.</p></li>
-<li><a href="#evas">Optimizing Evas</a>
-<p>Optimize the Evas code.</p></li>
-  </ul>
-
-<h2 id="edc" name="edc">Optimizing EDC</h2>
-
-<p>To optimize EDC:</p>
-<ol>
-<li>Remove unnecessary parts.
-<p>When you create EDC, there can be obsolete and unnecessary parts. Since they have an effect on performance, remove them.</p>
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-     <th>After</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;new&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;old&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;new&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
-
-
-
-
-
-
-
-
-
-
-
-
-
-       
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </p> </td> 
-       </tr>
-</tbody>
-</table>
-
-</li>
-
-<li>Use Text, if possible, instead of Textblock.
-<p>The following EDCs lead to the same result. However, use TEXT for the simple texts for high performance apart from using tags or multiple lines.</p>
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-     <th>After</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;styles 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_style&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=&quot;Sans&quot; font_size=30 text_class=entry 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color=#0088AA style=shadow,bottom 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadow_color=#00000080 valign=0.5 ellipsis=1.0 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wrap=none align=center&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style: &quot;text_style&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;simple&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: SHADOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 30;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </p> </td> 
-       </tr>
-</tbody>
-</table>
-
-</li>
-
-<li>Compress images and embed your images into EDC.
-<p>When you use a fixed image, it is more efficient to call an image within EDC. This save time in accessing the image data and is more suitable for the data size.</p>
-
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;<strong>images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;logo.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}</strong>
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;logo.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-</li>
-
-<li>Use a SPACER part, if possible.
-<p>When you use a part (such as Padding) which is invisible but has a size, using Spacer is more efficient.
-Since Spacer is invisible, it does not have the visible and color options.</p>
-
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-     <th>After</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_left_top&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>color: 0 0 0 0;</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;               
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;        
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_right_bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>color: 0 0 0 0;</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;               
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_left_top&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;               
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_right_bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;               
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </p> </td> 
-       </tr>
-</tbody>
-</table>
-
-</li>
-
-<li>Use the image border feature.
-<p>When you use an image, you do not need to use a full size or larger size image. As you can see below, it is much more efficient to scale the image using a border option.</p>
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-    <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-     <th>After</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;test&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </p> </td> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-collections 
-{
-&nbsp;&nbsp;&nbsp;images 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;test&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>image.border: 5 5 5 5</strong>;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> </p> </td> 
-       </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p align="center"><img alt="Image before" src="../../images/image_before.png" /></p> </td> 
-     <td rowspan="1" colspan="1" class="middle"><p align="center"><img alt="Image after" src="../../images/image_after.png" /></p> </td> 
-       </tr>
-</tbody>
-</table>
-
-</li>
-</ol>
-
-<h2 id="evas" name="evas">Optimizing Evas</h2>
-
-<p>To optimize Evas:</p>
-<ol>
-<li>Use a rectangle object instead of using a solid color image.
-<p>When you need a solid color object, it is better (more efficient) to use a rectangle object than the image.</p>
-<table>
-   <colgroup> 
-    <col width="100%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-image = elm_image_add(win);
-snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
-elm_image_file_set(image, buf, NULL);
-evas_object_size_hint_weight_set(image, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(win, image);
-evas_object_show(image);
-</pre> </p> </td> 
-       </tr>
-    <tr> 
-     <th>After</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-rect = evas_object_rectangle_add(evas_object_evas_get(win));
-evas_object_color_set(rect, 255, 255, 255, 255);
-evas_object_size_hint_weight_set(rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(win, rect);
-evas_object_show(rect);
-</pre> </p> </td> 
-       </tr>
-</tbody>
-</table>
-
-</li>
-
-<li>Make an object invisible instead of setting alpha as 0.
-<p>To make an object invisible, it is more efficient to use <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> instead of changing the alpha value to 0.</p>
-<table>
-   <colgroup> 
-    <col width="50%" /> 
-       <col width="50%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-        <th>After</th>
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-static void
-_invisible_cb(void *data, Evas_Object *obj, void *ev)
-{
-&nbsp;&nbsp;&nbsp;evas_object_color_set(obj, 0, 0, 0, 0);   
-}
-</pre> </p> </td>
-<td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-static void
-_invisible_cb(void *data, Evas_Object *obj, void *ev)
-{
-&nbsp;&nbsp;&nbsp;evas_object_hide(obj);   
-}
-</pre> </p> </td>  
-       </tr>
-</tbody>
-</table>
-
-</li>
-
-<li>If you need maximum optimization, use <span style="font-family: Courier New,Courier,monospace">evas_object_image</span> instead of <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">elm_icon</span>.
-<table>
-   <colgroup> 
-    <col width="100%" /> 
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-img = elm_image_add((parent);
-snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
-elm_image_file_set(img, buf, NULL);
-evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(img);
-</pre> </p> </td> 
-       </tr>
-    <tr> 
-     <th>After</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-img = evas_object_image_add(evas_object_evas_get(parent));
-snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
-evas_object_image_file_set(img, buf, NULL);
-evas_object_image_filled_set(img, EINA_TRUE);
-evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(img);
-</pre> </p> </td> 
-       </tr>
-</tbody>
-</table>
-</li>
-
-<li>Set the parent correctly to avoid the elementary tree reconstruction.
-<p>Before creating an object, make sure that the relationship between parent and child is set correctly to avoid having to reconstruct later. </p>
-<table>
-   <colgroup> 
-    <col width="50%" />
-    <col width="50%" />        
-   </colgroup> 
-<tbody>
-    <tr> 
-     <th>Before</th> 
-         <th>After</th>
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-win = elm_win_add();
-
-scroller = elm_scroller_add(win);
-
-box = elm_box_add(win);
-
-button = elm_button_add(win);
-</pre> </p> </td> 
-<td rowspan="1" colspan="1"> <p> 
-<pre class="prettyprint">
-win = elm_win_add();
-
-scroller = elm_scroller_add(win);
-
-box = elm_box_add(scroller);
-
-button = elm_button_add(box);
-</pre> </p> </td> 
-       </tr>
-</tbody>
-</table>
-
-</li>
-</ol>
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script> 
-  
- </body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm
deleted file mode 100644 (file)
index a5d82fe..0000000
--- a/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm
+++ /dev/null
@@ -1,658 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>EFL: Using EFL Features for Designing the UI</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                 <li><a href="#basic">Learning EFL Basics</a></li>     
-                 <li><a href="#native">Using EFL in Tizen Native Applications</a></li>
-                 <li><a href="#layout">Using the Base Application Layout</a></li>
-                 <li><a href="#ClockSimple">Creating a Simple Clock View</a></li>
-                 <li><a href="#ClockComplex">Creating a Complex Clock View</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                         <li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>        
-                         <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>
-                         <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>  
-                         <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                         <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API for Wearable Native</a></li>
-                         <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>      
-                         <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                     
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>EFL: Using EFL Features for Designing the UI</h1>
-
-
-<p>This tutorial demonstrates how you can use EFL to create your application UI. EFL is an open-source toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from data structures to UI component sets. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.</p>
-  
- 
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Efl Extension and Elementary API basics by learning about:</p>
-
-<ul>
-  <li><a href="#basic">Learning EFL Basics</a> 
-         <p>Learn the basic EFL characteristics and the EFL libraries supported in Tizen.</p></li>     
-  <li><a href="#native">Using EFL in Tizen Native Applications</a> 
-         <p>Start the Ecore main loop.</p> </li>
-  <li><a href="#layout">Using the Base Application Layout</a> 
-         <p>Use the base layout with EFL for your application.</p> </li>
-  <li><a href="#ClockSimple">Creating a Simple Clock View</a> 
-         <p>Create a simple clock view using a box, container UI component, and label to create a basic layout.</p> </li>
-  <li><a href="#ClockComplex">Creating a Complex Clock View</a> 
-         <p>Create a complex clock view by organizing a basic layout using boxes.</p> </li>
-
-</ul>
-
- <h2 id="basic" name="basic">Learning EFL Basics</h2>
-
-<p>EFL stands for Enlightenment Foundation Libraries. Enlightenment is a project consisting of the Enlightenment window manager, EFL libraries, and various utilities and applications. The Enlightenment team needed powerful libraries to handle, among others, rendering, main loops, and events, so EFL was introduced during the development of the Enlightenment window manager to fill these gaps. EFL is now widely used outside of the Enlightenment window manager.</p>
-
-<p>Currently, five EFL libraries are publicly available to Tizen native applications. These libraries provide the following features, among others:</p>
-
-<ul>
- <li>Data structures</li>
- <li>Optimized rendering</li>
- <li>Thread pool</li>
- <li>Events and callbacks</li>
- <li>Fd handlers</li>
- <li>Timers and animators</li>
- <li>UI components</li>
- <li>Layout scripts</li>
-</ul>
-
-<h3>EFL Characteristics</h3>
-
-<p>EFL is aimed at not only desktop computers but also touch-screen and embedded devices, making EFL applications portable to many different types of devices. Applications do not need to care about the types of devices and profiles they run on. Instead of changing the code, it is typically enough to simply configure the applications for different devices.</p>
-
-<p>The key characteristics of EFL include:</p>
-
-<ul>
- <li><strong>Performance</strong>
-  <p>The main reason Tizen adopted EFL as its native toolkit is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering. EFL is fast even in software rendering.</p></li>
- <li><strong>Small memory footprint</strong>
-  <p>Despite its fast performance, EFL's memory footprint is smaller than that of other toolkits with similar features. A small memory footprint is useful in the embedded world, since embedded devices do not normally have much memory.</p></li>
- <li><strong>Back-end engine support</strong>
-  <p>EFL supports several back-end engines, such as X11 (OpenGL, Xlib, Xcb), Wayland (OpenGL, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows, and Mac OS. Applications do not need to deal with each back-end engine separately.</p></li>
- <li><strong>GUI and logic separation</strong>
-  <p>EFL supports GUI layout and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
- <li><strong>Themeable</strong>
-  <p>An EFL theme can be changed at runtime without restarting the application. UI components are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of UI components to achieve a specific look and feel.</p></li>
- <li><strong>Scalable</strong>
-  <p>EFL supports a scale factor that affects the size of objects in the application at runtime. By configuring the scale factor, applications can scale up and down as needed. The scale factor also supports a default setting that allows applications to scale nicely out-of-the-box.</p></li>
- <li><strong>Animations</strong>
-  <p>EFL supports different types of animations. Evas supports Evas maps with low-level APIs for performing 2D, 2.5D, and 3D object transformations. Edje supports pre-defined transitions and wrapping of Evas maps. Elementary supports transit APIs for various types of animations, which can be combined.</p></li>
- <li><strong>Hardware acceleration</strong>
-  <p>EFL supports OpenGL&reg; and OpenGL-ES acceleration.</p></li>
-</ul>
-       
-       
-       <h3 name="libraries" id="libraries">EFL Libraries</h3>
-
-<p class="figure">Figure: EFL libraries</p>
-<p align="center"><img alt="EFL libraries" src="../../images/efl_libraries.png"/></p>
-
-<p>Tizen supports the following EFL libraries:</p>
-
-<ul>
- <li><strong>Ecore</strong>
-  <p>A clean and tiny event loop library with many convenience modules supporting operating system abstraction and integration. Ecore runs a main loop that is a key feature for event-driven applications and the rest of EFL. The Ecore main loop runs infinitely (or until requested to quit) and handles all registered events, such as touch, mouse, key, timers, animators, idlers, and fd handlers. Ecore also provides modules for handling network connections, files, input methods, and so on. EFL assumes that you run an Ecore main loop at all times (except at application startup and shutdown) and use the main loop to handle all callbacks (unless otherwise documented). ELF also assumes that threads use the Ecore infrastructure to return the results of their work back to the main loop for implementation.</p></li>
- <li><strong>Edje</strong>
-  <p>A complex graphical design and layout library. Edje supports a separation between layout and logic. Edje was designed as a theme layer for moving the look, feel, and animation of objects into separate data files loaded at runtime, as opposed to being defined in-code. Using a plain text <span style="font-family: Courier New,Courier,monospace">edc</span> file, you can describe your application's layout without writing a line of code.</p></li>
- <li><strong>Eina</strong>
-  <p>A library for data types and other useful tools. Eina provides data types such as lists, in-line lists, arrays, in-line arrays, hash tables, compact lists, iterator functions, sparse matrices, red-black trees, string buffers, shared string tokens, rectangle regions, generic value storage, and data models. Eina also supports tools such as benchmarking infrastructure, converters, counters, error handlers, basic file handlers, lazy allocators, loggers, magic number handlers, memory pools, modules, rectangles, safety checks, and string handlers.</p></li>
- <li><strong>Elementary</strong>
-  <p>A UI component set library. Elementary is composed of several common UI components, such as buttons, check boxes, entries, lists, pop-ups, and windows. Some infrastructure is shipped with Elementary, such as scale configuration handling, finger-size configuration for touch UIs, theme handling, focus handling, accessibility, UI mirroring, and profile handling.</p></li>
- <li><strong>Evas</strong>
-  <p>A highly optimized scene graph and rendering library. Evas is a stateful canvas scene graph in which you can place objects such as rectangles, lines, polygons, text, text blocks, images, and smart objects. Evas uses a scene graph to keep track of the state of all objects. You do not need to worry about objects repainting or keeping their states. You only need to modify them for the new state and let Evas take care of the rest. Evas supports anti-aliased text, smooth super and sub-sampled scaled images, alpha-blended objects, and more.</p></li>
-</ul>
-
- <h2 id="native" name="native">Using EFL in Tizen Native Applications</h2>
-
-<p>To start the Ecore main loop and move your application into the running state, call the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
-
-<pre class="prettyprint">
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-</pre>
-
-After your application is running:
-
-<ol>
- <li>Create a window, and organize your UI components inside the window.</li>
- <li>Create the application logic code to be called when callbacks or timed events occurs (for example, animators for animations, timers for timeouts).</li>
-</ol>
-
- <h2 id="layout" name="layout">Using the Base Application Layout</h2>
-
-<p>This section provides how to use base layout with EFL for your application. Also, you can get some idea of sample layouts for applications.</p>
-
-<h3>Using the Base Layout</h3>
-
-<p>When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and UI component hierarchy of the base layout:</p>
-
-<p class="figure">Figure: Base layout wireframe and UI component hierarchy</p>
-<p align="center"><img alt="Base layout wireframe and UI component hierarchy" src="../../images/base_layout.png"/></p>
-
-<p>The UI components have the following roles:</p>
-
-<ul>
- <li>Window (Elm_win): Every UI component from Elementary is rendered in a Window.</li>
- <li>Conformant (Elm_Conformant): The Conformant supports the indicator area and resizing the application due to rotation or the ISF (keypad).</li>
- <li>Naviframe (Elm_Naviframe): The Naviframe acts as a view manager and optionally provides the application title. The main layout of the application is added to the Naviframe's view area.</li>
-</ul>
-
-
-<h3>Sample Applications with the Base Layout</h3>
-
-<h4>Setting</h4>
-
-<p>The Setting application consists of a list to show as a menu. For organizing the application, create the application layout with a screen-size-list and place the layout into the Naviframe's view area.</p>
-
-<p class="figure">Figure: Setting UI and layout</p>
-<p align="center"><img alt="Settings UI and layout" src="../../images/setting_sd.png"/></p>
-
-<p>For more information, see the Setting sample application.</p>
-
-<h4>Application Store</h4>
-
-<p>For organizing the Application Store application, you need to add a scroller to the base layout, since the total height of the layout will be greater than the screen size, and you will therefore need to scroll the screen contents up and down. If the layout is larger than the screen, the scroller makes the view itself scrollable.</p>
-
-<p>You can use a list or grid if the same objects are shown repeatedly. In this sample application, however, the various items are shown in a layout.</p>
-
-<p class="figure">Figure: Application Store UI and layout</p>
-<p align="center"><img alt="Application Store UI and layout" src="../../images/application_store_sd.png"/></p>
-
-<p>For more information, see the Application Store sample application.</p>
-
-<h3>Sample Applications with a Custom Layout</h3>
-
-<h4>Calculator - No Naviframe</h4>
-
-<p>The Calculator is a good example of an exception to the base layout. The application has no view changes and no application title. As these are the two reasons why you should use a Naviframe, you do not need to add a Naviframe to the Calculator.</p>
-
-<p>You can organize the application layout with container components. Container components are used for arranging UI components, both basic UI components and other container components.</p>
-
-<p class="figure">Figure: Calculator UI and layout</p>
-<p align="center"><img alt="Calculator UI and layout" src="../../images/calculator_sd.png"/></p>
-
-<p>For more information, see the Calculator sample application.</p>
-
-<h4>Email - Drawer</h4>
-
-<p>The Email application shows information using a list. The main view is the same as in the Setting application, consisting of a screen-size-list for displaying emails. However, the Email application has an additional feature: the Drawer, which is used for displaying the menu with a hierarchy.</p>
-
-<p>To develop the application as a Tizen native application, add a layout on the Conformant, and add a Naviframe to the layout. This layout has a content area for the Drawer and Naviframe, and its style name is "layout/drawer/panel". To use this layout, use the following code:</p>
-
-<pre class="prettyprint">
-layout = elm_layout_add(parent);
-elm_layout_theme_set(layout, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
-</pre>
-
-<p>The style includes parts for locating the Drawer and the main view. In the Drawer area, you can add a list to indicate the menu. In the main view, you can add a Naviframe to organize the view of the layout.</p>
-
-<p class="figure">Figure: Email UI and layout</p>
-<p align="center"><img alt="Email UI and layout" src="../../images/email_sample.png"/></p>
-
-<p>For more information, see the Email sample application.</p>
-
- <h2 id="ClockSimple" name="ClockSimple">Creating a Simple Clock View</h2>
-
-<p>This sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box, container component, and label to create a basic layout. The application includes the following UI components:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
-</ul> 
-
-<p>The following figure illustrates the main view of the simple clock sample application and its wireframe structure.</p>
-  
-<p class="figure">Figure: Simple clock screen</p>
-<p align="center"><img alt="Simple clock screen" src="../../images/efl_simple_clock.png" /></p>
-
-<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
-
-<pre class="prettyprint">typedef struct appdata
-{
-&nbsp;&nbsp;&nbsp;// Save the window
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-} 
-appdata_s;
-</pre>
-
-<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the HW back key.</p> 
-
-<p>The  single callback function for application handling is <span style="font-family: Courier New,Courier,monospace">app_create</span>, and it only creates the basic GUI:</p>
-
-<pre class="prettyprint">int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
-&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;int ret = 0;
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
-
-&nbsp;&nbsp;&nbsp;ret = app_main(argc, argv, &amp;event_callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;app_main() is failed. err = %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function to create a basic layout with a window, conformant and naviframe. This is the basic layout in the Tizen mobile environment.</p>
-  
-<pre class="prettyprint">ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-// Conformant
-conform = elm_conformant_add(ad-&gt;win);
-elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(ad-&gt;win, conform);
-evas_object_show(conform);
-
-// Naviframe
-nf = elm_naviframe_add(conform);
-elm_object_content_set(conform, nf);
-evas_object_show(nf);
-</pre>
-
-<p>After creating a basic layout, create the main layout for the application. In this sample, it contains a box with 3 labels. The labels show the time, city and date. To add the labels to the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function.</p>
-  
-<p>After adding the labels, you must set their text. You can set or decorate the text in the labels using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function. You can modify the text size (<span style="font-family: Courier New,Courier,monospace">font_size</span>), color (<span style="font-family: Courier New,Courier,monospace">color</span>), and thickness (<span style="font-family: Courier New,Courier,monospace">b</span>).</p>
-  
-  <pre class="prettyprint">
-// Add the box
-box = elm_box_add(nf);
-// Create a label
-label1 = elm_label_add(box);
-// Set text to the label with a tag
-elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
-// Add the label to the box
-elm_box_pack_end(box, label1);
-// Change label visibility
-evas_object_show(label1);
-
-// Repeat with other labels
-
-evas_object_show(box);
-</pre>
-
-<p>After creating the box with labels, set the box as a new view. You can also set the title of the application. These operations are handled by the naviframe using the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_push()</span> function:</p>
-  
-  <pre class="prettyprint">elm_naviframe_item_push(nf, _(&quot;World Clock&quot;), NULL, NULL, box, &quot;basic&quot;);</pre>
-  
-<p>The parameters include the title, the name of the UI component added as a new view, and the naviframe style. The basic style is used for a simple view with normal title.</p>
-  
-  <p>The following figure illustrates the UI component hierarchy of the application.</p>
-
-<p class="figure">Figure: Simple clock components</p>
-<p align="center"><img alt="Simple clock components" src="../../images/efl_simple_clock_tree.png" /></p>
-  
-<p>Set the HW key handler. The Tizen mobile environment supports the <strong>More</strong> and back keys, but only the back key is handled in this sample. </p> 
-<pre class="prettyprint">eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-</pre> 
-
-<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback will hide the window:</p> 
-<pre class="prettyprint">static void
-win_back_cb(void *data , int type , void *event)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-}
-</pre>
-
- <h2 id="ClockComplex" name="ClockComplex">Creating a Complex Clock View</h2>
- 
-<p>This sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following UI components:</p>
-
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_genlist</span>: List component</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_button</span>: Simple push button</li>
-</ul> 
-  
-<p>The following figure illustrates the main view of the complex clock sample application and its wireframe structure.</p>
-  
-<p class="figure">Figure: Complex clock screen</p>
-<p align="center"><img alt="Complex clock screen" src="../../images/efl_complex_clock.png" /></p>
-
-<h3>Basic GUI</h3> 
-
-<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
-
-<pre class="prettyprint">typedef struct appdata
-{
-&nbsp;&nbsp;&nbsp;// Save the window
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-} 
-appdata_s;
-</pre>
-
-<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the HW back key.</p> 
-
-<p>The  single callback function for application handling is <span style="font-family: Courier New,Courier,monospace">app_create</span>, and it only creates the basic GUI:</p>
-
-<pre class="prettyprint">int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
-&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;int ret = 0;
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
-
-&nbsp;&nbsp;&nbsp;ret = app_main(argc, argv, &amp;event_callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;app_main() is failed. err = %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-</pre>
-
-<p>The base GUI of the application contains the following elements:</p>
-
-<ul>
-<li>Clock</li>
-<li>List</li>
-<li>Main layout with buttons</li>
-</ul>
-
-<h3>Clock</h3> 
-
- <p>The clock element contains 3 labels. The labels are packed as a single box component, which is part of the main layout.</p> 
-<pre class="prettyprint">static Evas_Object *
-create_clock(Evas_Object *nf)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box, *label1, *label2, *label3;
-
-&nbsp;&nbsp;&nbsp;// Box
-&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
-
-&nbsp;&nbsp;&nbsp;label1 = elm_label_add(box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, label1);
-&nbsp;&nbsp;&nbsp;evas_object_show(label1);
-
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-
-&nbsp;&nbsp;&nbsp;return box;
-}
-</pre>
-
-<h3>List</h3> 
-
-<p>This element contains a list of cities. The UI component used is <span style="font-family: Courier New,Courier,monospace">genlist</span>, which is a complex list able to show information with various styles.</p> 
-<pre class="prettyprint">static Evas_Object *
-create_list(Evas_Object *nf)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object* list;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc = NULL;
-&nbsp;&nbsp;&nbsp;int i, num_of_item;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;list = elm_genlist_add(nf);
-</pre> 
-  
-<p>To add items to the list, use the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> class. After adding a new class, set callback function to detect, when the item is rendered. </p> 
-<pre class="prettyprint">itc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;2line.top.4&quot;;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = gl_text_get_cb;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = NULL;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
-</pre> 
-
-<p>In this application, all the list items are similar and use the same callback function (<span style="font-family: Courier New,Courier,monospace">gl_text_get_cb()</span>) for setting text, so only 1 item class is created:</p> 
-<pre class="prettyprint">static char*
-gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;item_data_s *id = data;
-&nbsp;&nbsp;&nbsp;char buf[1024];
-
-&nbsp;&nbsp;&nbsp;if (id-&gt;index == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text.main.left.top&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;07:26&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.top&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Cardiff&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.left.bottom&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Wen, Jan 1&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.bottom&quot;)) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;wales&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return NULL;
-}
-</pre> 
-
-<p>Append items using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function. In this application, 3 items are added:</p> 
-<pre class="prettyprint">num_of_item = 3;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; num_of_item; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item_data_s *id = calloc(sizeof(item_data_s), 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = it;
-&nbsp;&nbsp;&nbsp;}
-</pre>
- 
- <h3>Main Layout with a Button</h3> 
- 
-<p>In the main layout, the other layout elements are merged together and a button added. The following example describes handling the main layout:</p>
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *conform, *nf, *box, *clock, *layout, *rect, *button;
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;// Conformant
-&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(conform);
-
-&nbsp;&nbsp;&nbsp;// Naviframe
-&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(conform);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(conform, nf);
-&nbsp;&nbsp;&nbsp;evas_object_show(nf);
-}
-</pre> 
-
-<p>The box component is used to organize the main layout. The box is expanded as much as possible to fill the entire view.</p> 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Box
-&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
-</pre> 
-
-<p>The box contains the following elements:</p> 
-
-<ul>
-
-<li><p>The clock element contains 3 labels. The parameter for the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function is 0.1 meaning that the height of the clock box occupies 30% of the available area. </p> 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;clock = create_clock(nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(clock, EVAS_HINT_EXPAND, 0.3);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(clock, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, clock);
-</pre> 
-</li>
-
-<li><p>The list element is packed into the box. As the <span style="font-family: Courier New,Courier,monospace">genlist</span> elements does not have a determined size, its size depends on the <span style="font-family: Courier New,Courier,monospace">layout</span> parameter.</p> 
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;layout = elm_layout_add(box);
-&nbsp;&nbsp;&nbsp;elm_layout_theme_set(layout, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;rect = create_list(nf);
-&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, &quot;elm.swallow.content&quot;, rect);
-&nbsp;&nbsp;&nbsp;evas_object_show(rect);
-&nbsp;&nbsp;&nbsp;evas_object_show(layout);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, layout);
-</pre> 
-</li>
-
-<li><p>The button element has a callback function to detect, when the button is clicked.</p> 
-<pre class="prettyprint">button = elm_button_add(box);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, btn_clicked_cb, NULL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.1);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Terminate&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_show(button);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
-</pre> 
-</li>
-</ul>
-
-<p>The following figure illustrates the UI component hierarchy of the application.</p>
-
-<p class="figure">Figure: Complex clock components</p>
-<p align="center"><img alt="Complex clock components" src="../../images/efl_complex_clock_tree.png" /></p>
-
-<p>Add the main layout to the naviframe, and set the HW key handler:</p> 
-<pre class="prettyprint">eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-</pre> 
-
-<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback will hide the window:</p> 
-<pre class="prettyprint">static void
-win_back_cb(void *data , int type , void *event)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-}
-</pre> 
-       
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
-
diff --git a/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm
deleted file mode 100644 (file)
index 17b545a..0000000
--- a/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm
+++ /dev/null
@@ -1,312 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>EFL UTIL: Using EFL Utilities</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing EFL Utility</a></li>
-                       <li><a href="#create">Creating a Notification Window and Setting a Notification Window Level</a></li>
-                       <li><a href="#getting">Getting the Notification Window Level</a></li>
-            <li><a href="#screenshot">Getting a Screenshot</a></li>
-            <li><a href="#input_gen_key">Generating a Key Input Event </a></li>
-            <li><a href="#input_gen_touch">Generating a Touch Input Event </a></li>
-                       
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/efl_util_n.htm">EFL UTIL Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>EFL UTIL: Using EFL Utilities</h1>
-
-  
- <p>This tutorial demonstrates how you can adjust the level of a notification window using the EFL UTIL API.</p>
-  
-  <h2>Warm-up</h2>
-  <p>Become familiar with the EFL UTIL, Elementary, and Evas API basics by learning about:</p>
-  
-  <ul>
-  <li><a href="#init">Initializing EFL Utility</a><p>Initialize the EFL Util for use.</p></li>
-  <li><a href="#create">Creating a Notification Window and Setting a Notification Window Level</a>
-  <p>Create a notification window and set the window level.</p></li>
-  <li><a href="#getting">Getting the Notification Window Level</a>
-  <p>Get the notification window level.</p></li>
-  <li><a href="#screenshot">Getting a Screenshot</a>
-  <p>Capture a screenshot.</p></li>
-  <li><a href="#input_gen_key">Generating a Key Input Event</a>
-  <p>Set the input device type and generate a key input event.</p></li>
-  <li><a href="#input_gen_touch">Generating a Touch Input Event</a>
-  <p>Set the input device type and generate a touch input event.</p></li>
-  
-  </ul>
-       
-
- <h2 id="init" name="init">Initializing EFL Utility</h2>
- 
- <p>To use the EFL UTIL API, the following header file has to be included:</p>
-  <pre class="prettyprint">#include &lt;efl_util.h&gt;</pre> 
-
- <h2 id="create" name="create">Creating a Notification Window and Setting a Notification Window Level</h2>
-
-<p>To create a notification window and set the window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_set_notification_window_level()</span> function. If the window type is not notification type, the function returns an error.</p> 
-<pre class="prettyprint">#include &lt;Elementary.h&gt;
-#include &lt;dlog.h&gt;
-
-void create_win() 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *eo;
-&nbsp;&nbsp;&nbsp;efl_util_error_e error;
-&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Create notification window
-&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
-&nbsp;&nbsp;&nbsp;if (!eo) return;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Set notification level
-&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
-&nbsp;&nbsp;&nbsp;if (error != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do error handling
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-
- <h2 id="getting" name="getting">Getting the Notification Window Level</h2>
-
-<p>To get the notification window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_get_notification_window_level()</span> function:</p>
-
-<pre class="prettyprint">void create_win() 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *eo;
-&nbsp;&nbsp;&nbsp;efl_util_error_e error;
-&nbsp;&nbsp;&nbsp;efl_util_notification_level_e notification_level;
-&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Create notification window
-&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
-&nbsp;&nbsp;&nbsp;if (!eo) return;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;// Get notification level
-&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, &amp;notification_level);
-&nbsp;&nbsp;&nbsp;if (error == EFL_UTIL_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 1
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 2
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-  
-<h2 id="screenshot" name="screenshot">Getting a Screenshot</h2>
-
- <p>To get a screenshot:</p>
- 
-<ol><li>Initialize with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_initialize()</span> function:
-  <pre class="prettyprint">
-#include &lt;tbm_surface.h&gt;
-#include &lt;X11/Xlib.h&gt;
-
-void capture()
-{
-&nbsp;&nbsp;&nbsp;efl_util_screenshot_h screenshot = NULL;
-&nbsp;&nbsp;&nbsp;tbm_surface_h tbm_surface = NULL;
-&nbsp;&nbsp;&nbsp;tbm_surface_info_s tsuri;
-
-&nbsp;&nbsp;&nbsp;screenshot = efl_util_screenshot_initialize(width, height);
-</pre></li>
-
-<li>After getting the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_h</span> structure, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_take_tbm_surface()</span> function to get the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> handler which has the screenshot data.
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;if (screenshot) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tbm_surface = efl_util_screenshot_take_tbm_surface(screenshot);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tbm_surface) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Treat tbm_surface handler (screenshot data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-</pre></li>
-
-<li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_deinitialize()</span> function:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_screenshot_deinitialize(screenshot);
-&nbsp;&nbsp;&nbsp;}
-}</pre></li></ol>
-
- <h2 id="input_gen_key" name="input_gen_key">Generating a Key Input Event</h2>
-
- <p>To generate key input events:</p>
- 
- <ol><li>Execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_initialize_generator()</span> function:
-  <pre class="prettyprint">
-void key_event_generator()
-{
-&nbsp;&nbsp;&nbsp;int ret = EFL_UTIL_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;efl_util_inputgen_h inputgen = NULL;
-
-&nbsp;&nbsp;&nbsp;inputgen = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_KEYBOARD);
-&nbsp;&nbsp;&nbsp;if (!inputgen)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to initiailize input generator system.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-</pre></li>
- <li>After setting input device type, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_generate_key()</span> function to generate key input events:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_key(inputgen, &quot;XF86Menu&quot;, 1);
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a &quot;XF86Menu&quot; key press event
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize input generator system.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_key(inputgen, &quot;XF86Menu&quot;, 0);
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a &quot;XF86Menu&quot; key release event
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize input generator system.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-</pre></li>
- <li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize input generator system.
-&nbsp;&nbsp;&nbsp;}
-}</pre></li></ol>
-
-
- <h2 id="input_gen_touch" name="input_gen_touch">Generating a Touch Input Event</h2>
-
-  <p>To generate touch input events:</p>
- 
- <ol><li>Execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_initialize_generator()</span> function:
-  <pre class="prettyprint">
-void touch_event_generator()
-{
-&nbsp;&nbsp;&nbsp;int ret = EFL_UTIL_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;efl_util_inputgen_h inputgen = NULL;
-
-&nbsp;&nbsp;&nbsp;inputgen = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_TOUCHSCREEN);
-&nbsp;&nbsp;&nbsp;if (!inputgen)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;   // Failed to initiailize input generator system.
-&nbsp;&nbsp;&nbsp;   return;
-&nbsp;&nbsp;&nbsp;}
-</pre></li>
- <li>After setting input device type, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_generate_touch()</span> function to generate touch input events:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_BEGIN, 100, 100);
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch press event on (100, 100)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize input generator system.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_UPDATE, 110, 110);
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch move event to (110, 110)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize input generator system.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_END, 110, 110);
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch release event to (110, 110)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize input generator system.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-</pre></li>
- <li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize input generator system.
-&nbsp;&nbsp;&nbsp;}
-}</pre></li></ol>
-  
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm
deleted file mode 100644 (file)
index 17799e9..0000000
--- a/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm
+++ /dev/null
@@ -1,654 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Elementary Animations: Applying Transition Effects to an Evas Object</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#setup">Setting Up the Application</a></li>
-                       <li><a href="#rotate">Creating a Rotation Effect</a></li>
-                       <li><a href="#zoom">Creating a Zoom Effect</a></li>
-                       <li><a href="#flip">Creating a Flip Effect</a></li>
-                       <li><a href="#blend">Creating a Blend Transition</a></li>
-                       <li><a href="#fade">Creating a Fade Effect</a></li>
-                       <li><a href="#flip_y">Creating a Flip on y Axis</a></li>
-                       <li><a href="#wipe">Creating a Wipe Effect</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">                
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#elm_transit">Elementary Animations Guide</a> </li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Elementary Animations: Applying Transition Effects to an Evas Object</h1>
-
-  
-<p>This tutorial demonstrates how you can use Elm Transit to create animated transitions effects, such as rotation, wiping, zooming, resizing, and fading, to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
-       <ul> 
-                       <li><a href="#setup">Setting Up the Application</a>
-                       <p>Prepare the application for use.</p></li>
-                       <li><a href="#rotate">Creating a Rotation Effect</a>
-                       <p>Create a rotation effect in your application.</p></li>
-                       <li><a href="#zoom">Creating a Zoom Effect</a>
-                       <p>Create a zoom effect in  your application.</p></li>
-                       <li><a href="#flip">Creating a Flip Effect</a>
-                       <p>Create a flip effect in your application.</p></li>
-                       <li><a href="#blend">Creating a Blend Transition</a>
-                       <p>Create a blend transition in your application.</p></li>
-                       <li><a href="#fade">Creating a Fade Effect</a>
-                       <p>Create a fade effect in your application.</p></li>
-                       <li><a href="#flip_y">Creating a Flip on y Axis</a>
-                       <p>Create a flip on y axis in your application.</p></li>
-                       <li><a href="#wipe">Creating a Wipe Effect</a>
-                       <p>Create a wipe effect in your application.</p></li>           
-                       <li><a href="transit_effect_tutorial_n.htm">Implementing Elementary Transit Effects</a> <p>Demonstrates how you can implement a variety of EFL animation effects.</p></li>
-       </ul>
-               
- <h2 id="setup" name="setup">Setting Up the Application</h2>
-
-<p>First create a basic application like explained in the <a href="basic_tutorial_mn.htm">Basic Tutorial</a>.</p>
-
-<p>When the application is ready, create Evas objects and animate them. In this example, one single object is animated with different type of animations.</p>
-
-<p>Create the structure of our application represented by a struct named <span style="font-family: Courier New,Courier,monospace">appdata</span></p>
-
-<pre class="prettyprint">typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *label;
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-&nbsp;&nbsp;&nbsp;Evas_Object *buttonbck;
-&nbsp;&nbsp;&nbsp;Evas_Object *hbox;
-&nbsp;&nbsp;&nbsp;Evas_Object *left_vbox;
-&nbsp;&nbsp;&nbsp;Evas_Object *center_vbox;
-&nbsp;&nbsp;&nbsp;Evas_Object *right_vbox;
-&nbsp;&nbsp;&nbsp;float rt_angle, zto, zfrom;
-} appdata_s;
-</pre>
-
-<p>This structure holds the main UI components of the application:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">win</span>: the main window</li>
-<li><span style="font-family: Courier New,Courier,monospace">label</span>: the title label</li>
-<li><span style="font-family: Courier New,Courier,monospace">button</span>: a button object, the target of the animations</li>
-<li><span style="font-family: Courier New,Courier,monospace">buttonbck</span>: a button representing the back of the target button</li>
-<li><span style="font-family: Courier New,Courier,monospace">left_vbox</span>: a vertical box to place the first buttons column</li>
-<li><span style="font-family: Courier New,Courier,monospace">center_vbox</span>: a vertical box to store the second buttons column</li>
-<li><span style="font-family: Courier New,Courier,monospace">right_vbox</span>: a vertical box to store the last buttons column</li>
-<li><span style="font-family: Courier New,Courier,monospace">hbox</span>: a horizontal box to store the vertical boxes</li>
-<li><span style="font-family: Courier New,Courier,monospace">rt_angle</span>, <span style="font-family: Courier New,Courier,monospace">zto</span>, <span style="font-family: Courier New,Courier,monospace">zfrom</span>: these variables are used to store values for animations</li>
-</ul>
-
-<p>Place the UI components on the application&#39;s canvas. To make things easier, the UI component creation is split into two functions.</p>
-
-<p>The first function creates UI components on the main window, and the second in the boxes.</p>
-
-<pre class="prettyprint">create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;ad-&gt;rt_angle = 360.0;
-&nbsp;&nbsp;&nbsp;ad-&gt;zfrom = 1.0;
-&nbsp;&nbsp;&nbsp;ad-&gt;zto = 2.0;
-
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Label
-&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Creation a button in the app window
-&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;// Moving the button to x=50 y=100
-&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;button, 50, 100);
-
-&nbsp;&nbsp;&nbsp;// Resizing the button 100x50
-&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;button, 200, 50);
-
-&nbsp;&nbsp;&nbsp;// Showing the button
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;button);
-
-&nbsp;&nbsp;&nbsp;// Creation a back button in the app window
-&nbsp;&nbsp;&nbsp;ad-&gt;buttonbck = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;buttonbck, &quot;Button back&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;buttonbck, 50, 100);
-&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;buttonbck, 200, 50);
-
-&nbsp;&nbsp;&nbsp;_create_btn_box(ad);
-
-} // End of create_base_gui
-</pre>
-
-<p>This function takes <span style="font-family: Courier New,Courier,monospace">appdata_s *ad</span> as its only parameter. This function is called by the creation callback <span style="font-family: Courier New,Courier,monospace">app_create</span> of the Tizen application (<span style="font-family: Courier New,Courier,monospace">event_callback.create = app_create;</span>) in the <span style="font-family: Courier New,Courier,monospace">main</span> function of the application.</p>
-
-<p>Set up the needed values like the rotation angle, the original zoom value (<span style="font-family: Courier New,Courier,monospace">zfrom</span>), and the destination zoom value (<span style="font-family: Courier New,Courier,monospace">zto</span>).</p>
-
-<pre class="prettyprint">ad-&gt;rt_angle = 360.0;
-ad-&gt;zfrom = 1.0;
-ad-&gt;zto = 2.0;
-</pre>
-
-<p>Create the main window with a title and add the <span style="font-family: Courier New,Courier,monospace">delete</span> callback:</p>
-
-<pre class="prettyprint">// Window
-ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-{
-&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-}
-
-evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-// Label
-ad-&gt;label = elm_label_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
-evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
-evas_object_show(ad-&gt;label);
-
-// Show the window after the base GUI is set up
-evas_object_show(ad-&gt;win);
-
-ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
-</pre>
-
-<p>Next create the animation target button and the back button. Call the button box creation function with the application data as its parameter.</p>
-
-<pre class="prettyprint">_create_btn_box(ad);
-</pre>
-
-<p>Add a set of buttons to this box that starts animations on the animation target.</p>
-
-<p>Create the structure of the buttons box with three columns (vertical boxes) and one horizontal for the main container.</p>
-
-<pre class="prettyprint">// Creation of the main container box
-ad-&gt;hbox = elm_box_add(ad-&gt;win);
-elm_box_horizontal_set(ad-&gt;hbox, EINA_TRUE);
-elm_box_homogeneous_set(ad-&gt;hbox, EINA_TRUE);
-evas_object_move(ad-&gt;hbox, 10, 500);
-evas_object_show(ad-&gt;hbox);
-
-// Creation of the first column
-ad-&gt;left_vbox = elm_box_add(ad-&gt;hbox);
-elm_box_horizontal_set(ad-&gt;left_vbox, EINA_FALSE);
-elm_box_homogeneous_set(ad-&gt;left_vbox, EINA_TRUE);
-evas_object_show(ad-&gt;left_vbox);
-elm_box_pack_start(ad-&gt;hbox, ad-&gt;left_vbox);
-
-// Creation of the second column
-ad-&gt;center_vbox = elm_box_add(ad-&gt;hbox);
-elm_box_horizontal_set(ad-&gt;center_vbox, EINA_FALSE);
-elm_box_homogeneous_set(ad-&gt;center_vbox, EINA_TRUE);
-evas_object_show(ad-&gt;center_vbox);
-elm_box_pack_end(ad-&gt;hbox, ad-&gt;center_vbox);
-
-// Creation of the last column
-ad-&gt;right_vbox = elm_box_add(ad-&gt;hbox);
-elm_box_horizontal_set(ad-&gt;right_vbox, EINA_FALSE);
-elm_box_homogeneous_set(ad-&gt;right_vbox, EINA_TRUE);
-evas_object_show(ad-&gt;right_vbox);
-elm_box_pack_end(ad-&gt;hbox, ad-&gt;right_vbox);
-</pre>
-
-<p>Then create the first action button for the resize effect.</p>
-
-<pre class="prettyprint">// Button creation
-btn_resize = elm_button_add(ad-&gt;win);
-// Setting the button text
-elm_object_text_set(btn_resize, &quot;Resize&quot;);
-// Setting the hint weight policy
-evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);
-// Showing the button
-evas_object_show(btn_resize);
-// Setting the &quot;clicked&quot; callback
-evas_object_smart_callback_add(btn_resize, &quot;clicked&quot;, _btn_resize_cb, ad);
-// Adding the button to the first column
-elm_box_pack_end(ad-&gt;left_vbox, btn_resize);
-</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> defines the callback function that is to be called when the button is clicked. In this example, set a <span style="font-family: Courier New,Courier,monospace">_btn_resize_cb</span> function and pass the application data <span style="font-family: Courier New,Courier,monospace">ad</span> to this callback function.</p>
-
-<p>The callback by itself only sets a new text for the animation target button, and calls a function which will actually animate the button.</p>
-
-<pre class="prettyprint">static void _btn_resize_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
-&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Resize&quot;);
-&nbsp;&nbsp;&nbsp;_resize_effect(ad-&gt;button);
-
-}
-</pre>
-
-<p>This function is an <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback</span> and thus needs to have its specific prototype: it does not return anything and receives three parameters:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">data</span>: data to be passed</li>
-<li><span style="font-family: Courier New,Courier,monospace">btn</span>: the object the callback is being called about</li>
-<li><span style="font-family: Courier New,Courier,monospace">ev</span>: the actual event, seldom used</li>
-</ul>
-
-<p>In this case, use <span style="font-family: Courier New,Courier,monospace">data</span> to pass the application data to the callback. However, the parameter&#39;s type is <span style="font-family: Courier New,Courier,monospace">void *</span> and not <span style="font-family: Courier New,Courier,monospace">appdata_s *</span>. Initialize a variable of the correct type with the pointer.</p>
-<pre class="prettyprint">appdata_s *ad = data;
-</pre>
-
-<p>Then use the application data in the callback function. At this point create the animation directly in the callback function, but it is more straightforward to encapsulate the animation process into a dedicated function. <span style="font-family: Courier New,Courier,monospace">_resize_effect</span> implements the animation code:</p>
-
-<pre class="prettyprint">static void _resize_effect(Evas_Object *obj)
-{
-&nbsp;&nbsp;&nbsp;// Elementary Transition declaration and creation
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
-
-&nbsp;&nbsp;&nbsp;// Adding the transition target object
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-
-&nbsp;&nbsp;&nbsp;// Setting the resize effect
-&nbsp;&nbsp;&nbsp;elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
-
-&nbsp;&nbsp;&nbsp;// Setting the transition duration
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-
-&nbsp;&nbsp;&nbsp;// Starting the transition
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
-<p>Create an <span style="font-family: Courier New,Courier,monospace">Elm_Transit *</span> object representing the transition.</p>
-
-<pre class="prettyprint">Elm_Transit *trans = elm_transit_add();
-</pre>
-
-<p>Then add the target object to the transition</p>
-
-<pre class="prettyprint">elm_transit_object_add(trans, obj);
-</pre>
-
-<p>Add a resizing transition to the object with the origin and destination width and height in pixels.</p>
-
-<pre class="prettyprint">elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
-</pre>
-<p>100 and 50 are respectively the object&#39;s width and height when the effect begins, whereas 300 and 150 are respectively the object&#39;s width and height when the effect ends: the object grows from 100×50 to 300×150.</p>
-
-<p>After that set the transition duration with <span style="font-family: Courier New,Courier,monospace">elm_transit_duration_set</span>.</p>
-<pre class="prettyprint">elm_transit_duration_set(trans, 3.0);
-</pre>
-
-<p>The animation lasts three seconds. The duration parameter is a double.</p>
-
-<p>Now start the animation by calling <span style="font-family: Courier New,Courier,monospace">elm_transit_go</span> with the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> object.</p>
-
-<pre class="prettyprint">elm_transit_go(trans);
-</pre>
-
-<p>When the resize button is clicked, the animation target button grows.</p>
-
-<p>All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.</p>
-
- <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
-
-<p>This effect rotates the animation target button with an angle of 360&deg;. This angle is stored in the application data as <span style="font-family: Courier New,Courier,monospace">ad-&gt;rt_angle</span>.</p>
-
-<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
-
-<pre class="prettyprint">// The rotation button
-btn_rotate = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_rotate, &quot;Rotate&quot;);
-evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_rotate);
-evas_object_smart_callback_add(btn_rotate, &quot;clicked&quot;, _btn_rotate_cb, ad);
-elm_box_pack_end(ad-&gt;center_vbox, btn_rotate);
-</pre>
-
-<p>In the rotate button callback, call the effect function with the target button as first parameter and the rotation angle as the second one.</p>
-
-<pre class="prettyprint">static void _btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
-&nbsp;&nbsp;&nbsp;_rotation_effect(ad-&gt;button, ad-&gt;rt_angle);
-}
-</pre>
-
-<p>The animation function rotates the animation target by adding a rotation effect with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_rotation_add</span>. This function takes three parameters:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_Transit</span></li>
-<li>the rotation position at which the effect begins</li>
-<li>the rotation position at which the effect ends</li>
-</ul>
-
-<p>Rotation starts at 0&deg; to finish at 360&deg;. The animation lasts two seconds.</p>
-
-<pre class="prettyprint">static void _rotation_effect(Evas_Object *obj, float angle)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-
-&nbsp;&nbsp;&nbsp;// Rotates the object from its original angle to given degrees to the right
-&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(trans, 0.0, angle);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
-
-<p>The zoom effect zooms on the animation target to make it twice bigger. Store the source rate and the destination rate in the application data using <span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>.</p>
-<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
-
-<pre class="prettyprint">// The zoom button
-btn_zoom = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_zoom, &quot;Zoom&quot;);
-evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_zoom);
-evas_object_smart_callback_add(btn_zoom, &quot;clicked&quot;, _btn_zoom_cb, ad);
-elm_box_pack_end(ad-&gt;right_vbox, btn_zoom);
-</pre>
-
-<p>Then add a callback function in order to perform the animation.</p>
-
-<pre class="prettyprint">static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
-&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Zoom&quot;);
-&nbsp;&nbsp;&nbsp;_zoom_effect(ad-&gt;button, ad-&gt;zfrom, ad-&gt;zto);
-}
-</pre>
-
-<p>To create the zoom effect, use <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_zoom_add</span> with the start rate and the destination rate stored in application data (<span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>)</p>
-
-<pre class="prettyprint">static void _zoom_effect(Evas_Object *obj, float from, float to)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-
-&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(trans, from, to);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
-
- <h2 id="flip" name="flip">Creating a Flip Effect</h2>
- 
-<p>This effect is applied to a pair of objects, in the order they are added, to the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> transition. In this example, add the animation target button and the button called buttonbck which represents the back of the target button.</p>
-
-<p>Create the action button for the flip effect:</p>
-
-<pre class="prettyprint">// The flip button
-btn_flip = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_flip, &quot;Flip x&quot;);
-evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_flip);
-evas_object_smart_callback_add(btn_flip, &quot;clicked&quot;, _btn_flip_cb, ad);
-elm_box_pack_end(ad-&gt;left_vbox, btn_flip);
-</pre>
-
-<p>The corresponding callback to create and start the animation with the two objects (target button and back button) to animate is like follows.</p>
-
-<pre class="prettyprint">static void _btn_flip_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip&quot;);
-&nbsp;&nbsp;&nbsp;_flip_effect(ad-&gt;button, ad-&gt;buttonbck);
-}
-</pre>
-
-<p>Create the function which runs the animation. This flip animation is created using <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_flip_add</span>. The second parameter is the axis of the flip: in this example it is the X axis, so the button flips down to top to show the back button. The last parameter is the flip direction: <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> means clockwise.</p>
-
-<pre class="prettyprint">static void _flip_effect(Evas_Object *obj, Evas_Object *obj2)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="blend" name="blend">Creating a Blend Transition</h2>
-
-<p>The blend effect also works the same way as the flip, but without the axes or direction information. Use the back button here as well. To create the blend effect button:</p>
-
-<pre class="prettyprint">// The blend button
-btn_blend = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_blend, &quot;Blend&quot;);
-evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_blend);
-evas_object_smart_callback_add(btn_blend, &quot;clicked&quot;, _btn_blend_cb, ad);
-elm_box_pack_end(ad-&gt;center_vbox, btn_blend);
-</pre>
-
-<p>The blend transition callback is:</p>
-
-<pre class="prettyprint">static void _btn_blend_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Blend&quot;);
-&nbsp;&nbsp;&nbsp;_blend_effect(ad-&gt;button, ad-&gt;buttonbck);
-}
-</pre>
-
-<p>Create and start the blend animation. This animation is created by adding it to and <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add</span>. Add two objects, as for the flip.</p>
-
-<pre class="prettyprint">static void _blend_effect(Evas_Object *obj, Evas_Object *obj2)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_blend_add(trans);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="fade" name="fade">Creating a Fade Effect</h2>
-
-<p>The fade effect works exactly the same way as the blend effect. First create the button:</p>
-
-<pre class="prettyprint">// The fade button
-btn_fade = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_fade, &quot;Fade&quot;);
-evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_fade);
-evas_object_smart_callback_add(btn_fade, &quot;clicked&quot;, _btn_fade_cb, ad);
-elm_box_pack_end(ad-&gt;right_vbox, btn_fade);
-</pre>
-
-<p>Then add the button&#39;s callback:</p>
-
-<pre class="prettyprint">static void _btn_fade_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Fade&quot;);
-&nbsp;&nbsp;&nbsp;_fade_effect(ad-&gt;button, ad-&gt;buttonbck);
-}
-</pre>
-
-<p>The animation function calls <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_fade_add</span> instead of <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add</span>.</p>
-
-<pre class="prettyprint">static void _fade_effect(Evas_Object *obj, Evas_Object *obj2)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_fade_add(trans);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="flip_y" name="flip_y">Creating a Flip on y Axis</h2>
-
-<p>This is same as the flip transition, but on y axis. To create a flip on y axis:</p>
-
-<pre class="prettyprint">// The flip y button
-btn_flip_y = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_flip_y, &quot;Flip y&quot;);
-evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_flip_y);
-evas_object_smart_callback_add(btn_flip_y, &quot;clicked&quot;, _btn_flip_y_cb, ad);
-elm_box_pack_end(ad-&gt;left_vbox, btn_flip_y);
-
-static void _btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip 2&quot;);
-&nbsp;&nbsp;&nbsp;_flip_y_effect(ad-&gt;button, ad-&gt;buttonbck);
-}
-
-static void _flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
-{
-&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
-}
-</pre>
-
- <h2 id="wipe" name="wipe">Creating a Wipe Effect</h2>
-
-<p>The wipe transition is applied on an Evas object considering the wipe type and the direction. Use <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> to hide the button, and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> to do it from left to right.</p>
-
-<p>The wipe animation button is as follows:</p>
-
-<pre class="prettyprint">// The wipe button
-btn_wipe = elm_button_add(ad-&gt;win);
-elm_object_text_set(btn_wipe, &quot;Wipe&quot;);
-evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(btn_wipe);
-evas_object_smart_callback_add(btn_wipe, &quot;clicked&quot;, _btn_wipe_cb, ad);
-elm_box_pack_end(ad-&gt;right_vbox, btn_wipe);
-</pre>
-
-<p>The wipe button callback looks like:</p>
-
-<pre class="prettyprint">static void _btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
-&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
-&nbsp;&nbsp;&nbsp;// Setting the button text
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Wipe&quot;);
-&nbsp;&nbsp;&nbsp;_wipe_effect(ad-&gt;button);
-}
-</pre>
-
-<p>The animation function calls <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_wipe_add</span> with <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> as the second parameter to hide the button and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> as last parameter to set the direction (left to right).</p>
-
-<pre class="prettyprint">static void _wipe_effect(Evas_Object *obj)
-{
-&nbsp;&nbsp;&nbsp; Elm_Transit *trans;
-
-&nbsp;&nbsp;&nbsp; trans = elm_transit_add();
-&nbsp;&nbsp;&nbsp; elm_transit_object_add(trans, obj);
-&nbsp;&nbsp;&nbsp; elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
-&nbsp;&nbsp;&nbsp; elm_transit_duration_set(trans, 3.0);
-&nbsp;&nbsp;&nbsp; elm_transit_go(trans);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm
deleted file mode 100644 (file)
index 7f0ecb0..0000000
--- a/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Evas: Creating and Managing Image Objects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#manage">Managing Images</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-            <li><a href="../../../../org.tizen.guides/html/native/ui/evas_n.htm">Evas Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Evas: Creating and Managing Image Objects</h1>
-
-
-<p>This tutorial demonstrates how you can create and manage image objects.</p>
- 
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Evas API basics by learning about:</p>
-<ul>
-<li><a href="#manage">Managing Images</a>
-<p>Manage image objects, for example, by scaling and improving their performance.</p></li>
-
-</ul>
-
-<h2 id="manage" name="manage">Managing Images</h2>
-
-<p>To manage image objects in Evas:</p>
-
-<ul>
-<li>Limit visibility.
-<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_extension_can_load_get()</span> function.</p>
-
-<p>Create the image object. Set a source file on it, so that the object knows where to fetch the image data.</p>
-<p>Define how to fill the image object area with the given pixel data. You can use a sub-region of the original image, or have it tiled repeatedly on the image object.</p>
-
-<pre class="prettyprint">
-img = evas_object_image_add(canvas);
-evas_object_image_file_set(img, &quot;path/to/img&quot;, NULL);
-evas_object_image_fill_set(img, 0, 0, w, h);
-</pre>
-
-
-<p>If the entire source image is to be displayed on the image object, stretched to the destination size, use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function helper that you can use instead of the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> function:</p>
-
-<pre class="prettyprint">
-evas_object_image_filled_set(img, EINA_TRUE);
-</pre>
-</li>
-
-<li>Scale image objects.
-<p>Resizing image objects scales the source images to the image object size, if the source images are set to fill the object area using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function.</p>
-<p>Control the aspect ratio of an image for different sizes with functions to load images scaled up or down in memory.</p>
-
-<p>Evas has a scale cache, which caches scaled versions of images used often. You can also have Evas rescale the images smoothly, however, that is computationally expensive.</p>
-</li>
-
-<li>Give performance hints.
-<p>In image viewer applications, you can display an image in full size. The navigation to the adjacent images on your album must be fluid and fast. Thus, while displaying a given image, the program can load the next and previous image in the background to be able to immediately repaint the screen with a new image.</p>
-
-<p>Evas addresses this issue with image preloading:</p>
-
-<pre class="prettyprint">
-prev = evas_object_image_filled_add(canvas);
-evas_object_image_file_set(prev, &quot;/path/to/prev&quot;, NULL);
-evas_object_image_preload(prev, EINA_TRUE);
-next = evas_object_image_filled_add(canvas);
-evas_object_image_file_set(next, &quot;/path/to/next&quot;, NULL);
-evas_object_image_preload(next, EINA_TRUE);
-</pre>
-
-<p>If you are loading an image which is too big, set its loading size smaller.</p>
-
-<p>Load a scaled down version of the image in the memory if that is the size you are displaying (this can speed up the loading considerably):</p>
-<pre class="prettyprint">evas_object_image_load_scale_down_set(img, zoom);</pre>
-<p>If you know you are showing a sub-set of the image pixels, you can avoid loading the complementary data:</p>
-<pre class="prettyprint">evas_object_image_load_region_set(img, x, y, w, h);
-</pre>
-</li>
-
-<li>Specify borders.
-<p>With Evas, you can specify image margins to be treated as borders. The margins then maintain their aspects when the image is resized. This makes setting frames around other UI objects easier. The following figure illustrates the border behavior, when the image is resized.</p>
-
-<p class="figure">Figure: Borders in Evas</p> 
-<p align="center"><img alt="Borders in Evas" src="../../images/9patch.png" /></p> 
-
-</li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm
deleted file mode 100644 (file)
index 7afe60c..0000000
--- a/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Event and Effect: Using Animations and Effects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Event and Effect: Using Animations and Effects</h1>
-
-<p>The event and effect tutorials demonstrate how to create and implement a variety of animation effects and use gestures in Tizen native applications:</p> 
-       <ul> 
-          <li><a href="animation_event_types_tutorials_n.htm">Animation and Effect Types: Using Various Effect and Effect Types</a> <p>Demonstrates how you can create different kinds of animations and effects.</p></li>
-          <li><a href="gesture_detector_tutorial_n.htm">Gesture Detector: Implementing Gestures Provided by the EFL Library</a> <p>Demonstrates how you can implement gestures provided by the EFL library.</p></li>
-          <li><a href="multipoint_touch_tutorial_n.htm">Multi-point Touch: Tracking Touch Events</a> <p>Demonstrates how you can paint on a canvas using touch gestures, and track touch events.</p></li>
-          
-       </ul>
-  
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm
deleted file mode 100644 (file)
index d897433..0000000
--- a/org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm
+++ /dev/null
@@ -1,301 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Font Setting: Using Various Fonts in the Application</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#component">Setting the Font for a UI Component</a></li>
-                       <li><a href="#edc">Setting the Font Using EDC</a></li>
-                       <li><a href="#edje">Using the Edje Text Class</a></li>
-                       <li><a href="#own">Setting Your Own Font</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/font_setting_n.htm">Font Setting Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>     
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                                         
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Font Setting: Using Various Fonts in the Application</h1>
-
-
-<p>This tutorial demonstrates how you can use different methods to set and change the font style in your application. You can change the font to another system-default font or one of your own fonts.</p>
-
-<h2>Warm-up</h2> 
-<p>Become familiar with the Edje, Elementary, and Evas API basics by learning about:</p>
-       <ul> 
-               <li><a href="#component">Setting the Font for a UI Component</a>
-               <p>Set the font of a UI component.</p></li>
-               <li><a href="#edc">Setting the Font Using EDC</a>
-               <p>Create a layout with text using the EDC.</p></li>
-               <li><a href="#edje">Using the Edje Text Class</a>
-               <p>Change the font of several text parts simultaneously.</p></li>
-               <li><a href="#own">Setting Your Own Font</a>
-               <p>Change the font of several text parts simultaneously.</p></li>
-       </ul>
-
-<h2 name="component" id="component">Setting the Font for a UI Component</h2>
-
-<p>You can use the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications) to set the font for an application.</p>
-<p>To set a font for a UI component:</p>
-<ul>
-<li>Set the font for a common UI component:
-
- <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">You can set the font for a textblock in the code, but not in EDC (Edje Data Collection). If you add markup tags for the font inside the text, you can change the font of the text. However, you cannot set the font for a text part in this way because the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> type does not support markup tags.</td> 
-    </tr> 
-   </tbody>
-  </table>
-
-<pre class="prettyprint">
-char *buf = &quot;&lt;font=Sans:style=Regular font_size=50&gt;Hello&lt;/font/&gt;Font&quot;;
-elm_object_part_text_set(layout, &quot;textblock1&quot;, buf);
-</pre>
-</li>
-<li>Set the font for an entry component (in <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Entry.html">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. It overrides the default style of the entry component for each attribute.
-
- <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags.</td> 
-    </tr> 
-   </tbody>
-  </table>
-<pre class="prettyprint">
-char *user_style = &quot;DEFAULT=&#39;font=Sans:style=Regular font_size=40&#39;&quot;;
-elm_entry_text_style_user_push(entry, user_style);
-elm_object_part_text_set(entry, &quot;elm.guide&quot;,
-&nbsp;&nbsp;&nbsp;&quot;&lt;font=Sans:style=Regular font_size=40&gt;Guide Text&lt;/font&gt;&quot;);
-</pre>
-</li>
-</ul>
-
-<h2 name="edc" id="edc">Setting the Font Using EDC</h2>
-
-<p>To create a layout with text using the EDC, you can set the font for each text part or textblock:</p>
-<ul>
-<li id="TEXT">Set the font of a text part using the font family name and a specific style of the font family:
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-
-<li>Add style information, which can be used for multiple textblock parts:
-<pre class="prettyprint">
-styles 
-{
-&nbsp;&nbsp;&nbsp;style 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-</ul>
-
-<h2 name="edje" id="edje">Using the Edje Text Class</h2>
-
-<p>You can use the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.</p>
-
- <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">Note that the <span style="font-family: Courier New,Courier,monospace;">text_class</span> cannot be used in a UI component with markup text or the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. You must set the <span style="font-family: Courier New,Courier,monospace;">text_class</span> in EDC.</td> 
-    </tr> 
-   </tbody>
-  </table>
-
-
-<p>To set the text class, you can use reserved words for text class, but you can also make your own text class:</p>
-
-<ul>
-       <li>Set a class for a text part:
-
-<pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;my_class&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-<li>Set a class for a textblock:
-<pre class="prettyprint">
-styles 
-{
-&nbsp;&nbsp;&nbsp;style 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30 ... text_class=my_class&quot;;
-&nbsp;&nbsp;&nbsp;}
-}
-
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-<li>
-<p>You can handle font and font style per <span style="font-family: Courier New,Courier,monospace;">text_class</span>. If you set your own <span style="font-family: Courier New,Courier,monospace;">text_class</span> in the EDC, you can change the font and font size:</p>
-
-<pre class="prettyprint">
-elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, 30);
-elm_config_font_overlay_apply();
-</pre>
-</li>
-<li>
-<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
-<pre class="prettyprint">
-elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
-elm_config_font_overlay_apply();
-</pre>
-</li>
-</ul>
-
-<h2 name="own" id="own">Setting Your Own Font</h2>
-
-<p>You can create your own font and use them in your application. Before using your fonts, set the path for the fonts. Use the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> or prepend function once when the application is launched.</p>
-<pre class="prettyprint">
-char *font_path = &quot;/opt/usr/apps/org.tizen.myapp/res/fonts/&quot;;
-evas_font_path_global_append(font_path);
-</pre>
-
-<p>After calling the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> function, you can load your fonts including the family name and style.</p>        
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm b/org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm
deleted file mode 100644 (file)
index a19c1c4..0000000
--- a/org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm
+++ /dev/null
@@ -1,336 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Form: Creating the Basic Application and Layout</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#create">Creating the Basic Application</a></li>
-                       <li><a href="#naviframe">Creating the Naviframe</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Form: Creating the Basic Application and Layout</h1>
-
-  
-<p>This tutorial explains how to create a basic application for displaying a list of contacts, and a form for displaying and editing contact information when an item is selected on the contact list.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Eina, Elementary, and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#create">Creating the Basic Application</a>
-               <p>Create an elementary application.</p></li>
-               <li><a href="#naviframe">Creating the Naviframe</a>
-               <p>Create the application layout.</p></li>
-       </ul>
-
- <h2 id="create" name="create">Creating the Basic Application</h2>
-
-<p>To create an elementary application with a single window, use the following code.</p>
-<pre class="prettyprint">static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_gui(ad);
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;appdata_s ad = { 0 };
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;// Zero out the structure
-&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
-
-&nbsp;&nbsp;&nbsp;// Run the mainloop
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}
-</pre> 
-
- <h2 id="naviframe" name="naviframe">Creating the Naviframe</h2>
-
-<p>Use a naviframe in this application to switch between different views. The first view that is displayed is the list of contacts. When a user selects an item on this list, information on the contact is displayed in a form. Both the view list and the form are opened in a naviframe, which handles the animations between the views for you. It also manages creating a back button in the top bar and launching the back animation when you select it, deletes the form view, and shows the list of contacts again.</p>
-
-<h3>Naviframe</h3>
-<p>The naviframe is the main layout of the window, so it takes all the space available. To configure this, use the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add</span> function. The first parameter is the main window, the second is the naviframe object. The naviframe is to be resized along with the window. The object (the naviframe) fills its parent (the main window) by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_resize_hint_weight_set</span> function on the naviframe object. The naviframe object expands in both x and y directions. In the end, evas shows the naviframe object on the screen.</p>
-<pre class="prettyprint"> // Create the naviframe
-nav = elm_naviframe_add(win);
-evas_object_size_hint_weight_set(nav, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(win, nav);
-evas_object_show(nav);
-</pre> 
-
-<h3>Contact List</h3>
-<p>Handle the contact list with the <span style="font-family: Courier New,Courier,monospace">_create_contact_list</span> function. This function takes the parent object as the parameter (in this case the naviframe) and returns the genlist. To create the genlist, use the following code.</p>
-<pre class="prettyprint">static Evas_Object *
-_create_contact_list(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *list;
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;// Create a new genlist
-&nbsp;&nbsp;&nbsp;list = elm_genlist_add(parent);
-&nbsp;&nbsp;&nbsp;evas_object_show(list);
-
-&nbsp;&nbsp;&nbsp;// Create a new item class for the genlist
-&nbsp;&nbsp;&nbsp;itc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;default&quot;;
-&nbsp;&nbsp;&nbsp;// Set the callback used when the genlist text is created
-&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = _genlist_text_get;
-&nbsp;&nbsp;&nbsp;// Set the callback be used when the content of the item is created
-&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get&nbsp;&nbsp;&nbsp;= _genlist_content_get;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.state_get = NULL;
-&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
-}
-</pre>
-
-<p>itc is a static variable containing the item class. The item class contains all functions that are called back when an item is created. In this case, create the callbacks <span style="font-family: Courier New,Courier,monospace">_genlist_text_get</span> (for labels) and <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> (for icons). These functions are called when labels and icons of the genlist item are created.</p>
-<p>The list of contacts is contained in an array of Contacts.</p>
-<pre class="prettyprint">typedef struct _Contact Contact;
-
-struct _Contact
-{
-&nbsp;&nbsp;&nbsp;const char *name;
-&nbsp;&nbsp;&nbsp;const char *mobile;
-&nbsp;&nbsp;&nbsp;const char *address;
-&nbsp;&nbsp;&nbsp;const char *email;
-&nbsp;&nbsp;&nbsp;const char *icon;
-};
-
-static Contact contacts[] = 
-{
-&nbsp;&nbsp;&nbsp;{&quot;Alexander Holmes&quot;, &quot;+1234567896&quot;, &quot;&quot;, &quot;alexander_holmes@tizen.org&quot;, &quot;c1.png&quot;},
-&nbsp;&nbsp;&nbsp;{&quot;Lara Alvaréz&quot;,&nbsp;&nbsp;&nbsp; &quot;+9876543216&quot;, &quot;&quot;, &quot;lara_alvares@tizen.org&quot;, &quot;c2.png&quot;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;{&quot;Aksel Møller&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;aksel_moller@tizen.org&quot;, &quot;c3.png&quot;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;{&quot;Anir Amghar&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;+1679432846&quot;, &quot;&quot;, &quot;anir_amghar@tizen.org&quot;, &quot;c4.png&quot;&nbsp;&nbsp;&nbsp; },
-&nbsp;&nbsp;&nbsp;{&quot;Noémie Cordier&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;noemie_cordier@tizen.org&quot;, &quot;c5.png&quot;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;{&quot;Henry Thompson&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;henry_thompson@tizen.org&quot;, &quot;c6.png&quot;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;{&quot;Mai Phan&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;mai_phan@tizen.org&quot;, &quot;c7.png&quot;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-};
-</pre>
-
-<p>Create a genlist item for each item of the array with the following code.</p>
-<pre class="prettyprint">
-// Create a genlist item for each item in the contacts array
-for (i = 0; i &lt; EINA_C_ARRAY_LENGTH(contacts); i++)
-{
-&nbsp;&nbsp;&nbsp;// Append the item, add a callback when the item is selected, and use the
-&nbsp;&nbsp;&nbsp;// current contact item as data pointer for the callbacks
-&nbsp;&nbsp;&nbsp;elm_genlist_item_append(list, itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contacts[i],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contact_selected_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contacts[i]);
-}
-</pre>
-
-<p>Attach the <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb</span> callback function to the genlist item. When an item is selected in the list, the data pointer passed as the argument calls this function. Here it is a pointer on the contact. Pass the contact in the array to all the Item Class callbacks.</p>
-<p>Push the list at the top of the naviframe with the following code.</p>
-<pre class="prettyprint">
-// Create the list of contacts
-list = _create_contact_list(win);
-
-// Push the list on top of the naviframe
-elm_naviframe_item_push(nav, NULL, NULL, NULL, list, NULL);
-</pre>
-
-<p>The Item class functions are called, the <span style="font-family: Courier New,Courier,monospace">_genlist_text_get</span> first.</p>
-<pre class="prettyprint">
-static char *
-_genlist_text_get(void *data, Evas_Object *obj EINA_UNUSED, const char *part)
-{
-&nbsp;&nbsp;&nbsp;Contact *contact = data;
-
-&nbsp;&nbsp;&nbsp;// Return a new allocated string for the contact name
-&nbsp;&nbsp;&nbsp;return strdup(contact-&gt;name);
-}
-</pre>
-
-<p>These functions show the index of the contact in the array and return a freshly allocated string with the name of the contact.</p>
-<p>When the user selects an item in the list, a callback registers on the select signal and calls the corresponding function; in this case, <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb()</span>. The user retrieves the index of the array passed in the data and creates the form on contact information based on this index.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function is called several times depending on the style of the created item. In this case, with the default style for the genlist item, there are two different swallow parts. A swallow part is a container in the edje file of the genlist item, which may contain an evas object. The following figure shows the layout of different parts in the theme.</p>
-
-
-<p class="figure">Figure: Genlist item</p> 
-<p align="center"><img alt="Genlist item" src="../../images/genlist_item.png" /></p>   
- 
-
-<p>There are two elm.swallow parts. When the callback function for the creation of icons is called, the part name is passed via the <span style="font-family: Courier New,Courier,monospace">part</span> variable. Compare this variable to <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> for the first object and to <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> for the icon at the end.</p>
-
-<h3>Icon</h3>
-<p>Create the icon when the callback is recognized. In this example, we use an <span style="font-family: Courier New,Courier,monospace">elm_icon</span> object.</p>
-<pre class="prettyprint">
-static Evas_Object *
-_genlist_content_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;Contact *contact = data;
-
-&nbsp;&nbsp;&nbsp;// Test which part is being created
-&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.swallow.icon&quot;))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char filename[PATH_MAX];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create a new icon
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ic = elm_icon_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the filename of the file which is to be loaded
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, filename, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the ratio squared
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return the icon
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ic;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return NULL;
-}
-</pre>
-
-<p>Note that in case of <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> the return is NULL, and no icon is added.</p>
-<p>The user may question the complexity of creating a genlist, and the benefits of callbacks for the creation of items. In a genlist with thousands of elements, graphical items are not created. Only the ones currently displayed on the screen are created with the callbacks in the Genlist Item Class. Otherwise, objects are created by calling the respective callback function when the user scrolls the list.</p>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">When the genlist is first created, the Elementary needs to know the height of the list. All elements in the list are not necessarily the same size due to different kind of styles. Thus, the Elementary creates all elements once to know the size, and displays the scroll bars correctly. If all your items have the same height, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set</span> to impose the same height to all items. The Elementary does not create the complete list as the global size is a multiple of the height of the first item. It saves you cpu time.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-  
-<h3>Contact Form</h3>
-<p>The contact list is created inside the <span style="font-family: Courier New,Courier,monospace">_create_contact_form</span> function. This function takes a parent Evas_Object and a contact item as parameters, and returns an Evas_Object. The parent is the naviframe object, and the contact item contains the information on the contact.</p>
-<p>To display the various information about the contact, we use boxes in this example.</p>
-
-   <p class="figure">Figure: Form contact layout</p> 
-   <p align="center"><img alt="Form contact layout" src="../../images/form_contact_layout.png" /></p>
-
-
-<p>The first box is an vertical box.</p>
-<pre class="prettyprint">vbox = elm_box_add(parent);
-elm_box_align_set(vbox, 0, 0);
-evas_object_show(vbox);
-</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_box_align_set</span> keeps the box element aligned to the top left corner.</p>
-<p>To add an icon, use the <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function to create the icon in the genlist item. For a bigger icon, set the minimum size of the icon object to 96x96 px.</p>
-<p>The most important function in this case is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end</span>. It adds the icon object at the end of the vbox. As the icon is the first object added, it is displayed on top of the box.</p>
-<pre class="prettyprint">
-ic = elm_icon_add(vbox);
-snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
-elm_image_file_set(ic, filename, NULL);
-evas_object_size_hint_min_set(ic, 96, 96);
-evas_object_show(ic);
-elm_box_pack_end(vbox, ic);
-</pre>
-
-<p>In the following example, add the information on the contact: the name, the mobile phone number, the postal address and the e-mail address. For each information item, create a label and an edit line. The label contains the kind of the information, and the edit box, the information itself. To set the UI components in a horizontal layout, use a horizontal box.</p>
-<pre class="prettyprint">
-hbox = elm_box_add(vbox);
-elm_box_horizontal_set(hbox, EINA_TRUE);
-elm_box_padding_set(hbox, 32, 32);
-evas_object_size_hint_weight_set(hbox, EVAS_HINT_EXPAND, 0);
-evas_object_size_hint_align_set(hbox, EVAS_HINT_FILL, 0);
-evas_object_show(hbox);
-</pre>
-
-<p>Change the orientation of the box with <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set</span>. To get space between the elements of the vbox, set the padding to 32px. To set the item of the box not to expand vertically, use <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set</span>.</p>
-<p>Create the label object, which is an elm_label. Set its text, and do not align or expand it.</p>
-<pre class="prettyprint">
-label = elm_label_add(hbox);
-elm_object_text_set(label, form_items[i]);
-evas_object_size_hint_weight_set(label, 0, 0);
-evas_object_size_hint_align_set(label, 0, 0);
-evas_object_show(label);
-</pre>
-
-<p>Create the edit line, which is an elm_entry.</p>
-<pre class="prettyprint">
-edit = elm_entry_add(hbox);
-evas_object_size_hint_weight_set(edit, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(edit, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(edit);
-</pre>
-
-<p>Add the label and the edit inside the horizontal box and add the horizontal box to the vertical box.</p>
-<pre class="prettyprint">
-elm_box_pack_end(hbox, label);
-elm_box_pack_end(hbox, edit);
-
-elm_box_pack_end(vbox, hbox);
-</pre>
-
-       <p class="figure">Figure: Form tutorial: form</p> 
-    <p align="center"><img alt="Form tutorial: form" src="../../images/screenshot_1.png" /></p>
-
-   <p class="figure">Figure: Form tutorial: list</p> 
-   <p align="center"><img alt="Form tutorial: list" src="../../images/screenshot_2.png" /></p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm b/org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm
deleted file mode 100644 (file)
index 7dcc7b8..0000000
--- a/org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm
+++ /dev/null
@@ -1,496 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Genlist: Managing Large Element Sets</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li>Set-up
-                               <ul class="toc">
-                                       <li><a href="#genlist_application_init">Initializing the Application</a></li>
-                                       <li><a href="#genlist_creation">Creating a Genlist</a></li>
-                                       <li><a href="#entries_creation">Adding New Entries</a></li>
-                               </ul>
-                       </li>
-                       <li>Modifications
-                               <ul class="toc">
-                                       <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
-                                       <li><a href="#item_modes">Using Item Modes</a></li>
-                                       <li><a href="#other_apis">Using Other APIs</a></li>
-                               </ul>
-                       </li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/components_mn.htm#genlist">Genlist Guide for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>     
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Genlist: Managing Large Element Sets</h1>
-
-  
-<p>This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
-       <ul>
-               <li>Set-up
-                       <ul>
-                               <li><a href="#genlist_application_init">Initializing the Application</a>
-                               <p>Initialize the application for use.</p></li>
-                               <li><a href="#genlist_creation">Creating a Genlist</a>
-                               <p>Create a genlist.</p></li>
-                               <li><a href="#entries_creation">Adding New Entries</a>
-                               <p>Add new entries to the list.</p></li>
-                       </ul>
-               </li>
-               <li>Modifications
-                       <ul>
-                               <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a>
-                               <p>Customize your list.</p></li>
-                               <li><a href="#item_modes">Using Item Modes</a>
-                               <p>Use different list modes in your application.</p></li>
-                               <li><a href="#other_apis">Using Other APIs</a>
-                               <p>Change the item class and size of the genlist.</p></li>
-                       </ul>
-               </li>
-       </ul>
-
- <h2 id="genlist_application_init" name="genlist_application_init">Initializing the Application</h2>
-
-   <p class="figure">Figure: Example of a genlist</p> 
-   <p align="center"><img alt="Example of a genlist" src="../../images/genlist_1line.png" /></p>
-  <p>The code below shows a typical elementary application that creates a window entitled &quot;Genlist Basic Tutorial&quot;. It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
-<pre class="prettyprint">static bool
-_app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *app = data;
-
-&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
-
-&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;_create_list(app);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
-&nbsp;&nbsp;&nbsp;struct app_data app = { 0 };
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
-
-&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
-
-&nbsp;&nbsp;&nbsp;// Run the mainloop
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}
-</pre>
-<p> The declaration of the <span style="font-family: Courier New,Courier,monospace">struct app_data</span> is shown below:</p>
-<pre class="prettyprint">struct app_data
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
-&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
-&nbsp;&nbsp;&nbsp;Evas_Object *list;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
-};
-</pre>
-
- <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
-
-<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
-<pre class="prettyprint">Evas_Object *list = elm_genlist_add(parent);
-</pre>
-
- <h2 id="entries_creation" name="entries_creation">Adding New Entries</h2>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
-<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
-Building a Basic Item Class</h3>
-<p>The code for the minimal genlist item class is below: </p>
-
-<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-itc-&gt;item_style = &quot;default&quot;;
-itc-&gt;func.text_get = NULL;
-itc-&gt;func.content_get = NULL;
-itc-&gt;func.state_get = NULL;
-itc-&gt;func.del = NULL;
-</pre>
-
-<p>It creates a simple item class, sets the <span style="font-family: Courier New,Courier,monospace">item_style</span> to &quot;default&quot; and every other field to NULL. However, this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields which are used to add text and an icon to the list entry. This is explained in another section.</p>
-<h3 id="elm_genlist_item_append" name="elm_genlist_item_append">Adding the Element</h3>
-<p>Once the genlist item class object is created, a new element is added to the list by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>. </p>
-<pre class="prettyprint">elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;NULL,                    // Item data
-&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
-&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type; this is the common one
-&nbsp;&nbsp;&nbsp;NULL,                    // Callback on selection of the item
-&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
-);
-</pre>
-<p>With most parameters as NULL and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.</p>
-<h3 id="text_get" name="text_get">Text in the List Elements</h3>
-<p> Use <span style="font-family: Courier New,Courier,monospace">text_get</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure. These callbacks must have a prototype matching to the following: </p>
-
-<pre class="prettyprint">char * text_get(void *data, Evas_Object *obj, const char *part);
-</pre>
-<p>This callbacks returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. This callback is called for each user-settable text part according to the current theme.</p>
-<p>If you are not familiar with the concept of parts in the EFLs,  read the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm#simple_edc_file">Write a Simple EDC File</a> section.</p>
-
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>For the default theme there is one part named <span style="font-family: Courier New,Courier,monospace">elm.text</span>. A possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is therefore: </p>
-<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;// Check this is text for the part we&#39;re expecting
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The names and positions of parts depends on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. The <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide explains how to do that.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
-<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
-{
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-
-<h3 id="content_get" name="content_get">Evas_Objects in the List Elements</h3>
-<p>Icons are added in a similar fashion: there is a callback named <span style="font-family: Courier New,Courier,monospace">content_get</span> which returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part which contents can be set.</p>
-<p>The prototype of the callback must match this one: </p>
-<pre class="prettyprint">Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
-</pre>
-
-<p>The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is that it returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
-<p>This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:</p>
-<pre class="prettyprint">
-static Evas_Object *
-_genlist_content_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
-
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p> For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.</p>
-<h3 id="state_get" name="state_get">Events on Genlist Items</h3>
-<p>Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>):</p>
-<pre class="prettyprint">elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;NULL,                    // item data
-&nbsp;&nbsp;&nbsp;NULL,                    // parent item for trees, NULL if none
-&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // item type, other values are used for trees
-&nbsp;&nbsp;&nbsp;_genlist_selected_cb,      // callback on selection of the item
-&nbsp;&nbsp;&nbsp;NULL                     // data for that callback function
-);
-</pre>
-
-<p>This callback adheres to the following prototype: </p>
-<pre class="prettyprint">void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
-</pre>
-
-<p>The implementation below changes the item style of items when they are selected:</p>
-<pre class="prettyprint">static void
-_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;struct app_data *app = data;
-
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-}
-</pre>
-
-       <h2 id="item_style" name="item_style">Choosing Another Item Style to Add or Remove Parts</h2>
- 
-<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
-<pre class="prettyprint">app-&gt;itc-&gt;item_style = &quot;default&quot;;
-</pre>
-<p>The <a href="../../../../org.tizen.guides/html/native/ui/components_mn.htm#genlist">Genlist</a> component lists all available item styles.</p>
-<p>Further customization is achieved by modifying the theme as explained in the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide.</p>
-<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
-
- <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
-
-<p>So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a &quot;group&quot; mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.</p>
-<h3 id="item_group" name="item_group">Group Mode</h3>
-<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for &quot;title&quot; items.</p>
-<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
-<p>Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:</p>
-<pre class="prettyprint">
-app-&gt;itc = elm_genlist_item_class_new();
-app-&gt;itc-&gt;item_style = &quot;default_style&quot;;
-app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
-app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
-app-&gt;itc-&gt;func.state_get = NULL;
-app-&gt;itc-&gt;func.del = NULL; 
-
-app-&gt;itc2 = elm_genlist_item_class_new();
-app-&gt;itc2-&gt;item_style = &quot;icon_top_text_bottom&quot;;
-app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
-app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
-app-&gt;itc2-&gt;func.state_get = NULL;
-app-&gt;itc2-&gt;func.del = NULL; 
-</pre>
-
-<p> Then add a group header and follow it with 10 children. This is repeated 1000 times.</p>
-<p>The parent has type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> while the children have type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span>.</p>
-<p>The other important point is that the value returned by <span style="font-family: Courier New,Courier,monospace">lm_genlist_item_append()</span> is stored in it and then sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-children relationship.</p>
-<pre class="prettyprint">
-for (i = 0; i &lt; 1000; i++) 
-{
-&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (10 * i),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
-&nbsp;&nbsp;&nbsp;);
-&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (10 * i + j),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3 id="item_tree" name="item_tree">Tree Mode</h3>
-<p>Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: <span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>. Like any smart callback, they are registered through <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> on the genlist object:</p>
-<pre class="prettyprint">evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_expand_request, NULL);
-evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_expanded, NULL);
-
-evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_contract_request, NULL);
-evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_contracted, NULL);
-</pre>
-
-<p> The callbacks <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> do only one thing: decide whether the element is expanded or contracted. This is done by using <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). A minimal implementation of these callbacks is therefore:</p>
-<pre class="prettyprint">
-static void
-_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The example above has an extra line: the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span>. It changes the item style and is explained in the <a href="#item_class_update">Changing the item class of an item after its creation</a> section.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<pre class="prettyprint">
-static void
-_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
-}
-</pre>
-
-<p> As said above, once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions like <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>, like for the group mode.</p>
-<p>The function below is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passes to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
-<pre class="prettyprint">static void
-_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
-&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (i + i_parent),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it_parent,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It imply calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
-<pre class="prettyprint">static void
-_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
-}
-</pre>
-
-<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
-<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
-
- <h2 id="other_apis" name="other_apis">Using Other APIs</h2>
-
-<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
-<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
-
-<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
-<p>Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
-<pre class="prettyprint">static void
-_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded.
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm
deleted file mode 100644 (file)
index 6418d83..0000000
--- a/org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm
+++ /dev/null
@@ -1,507 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Genlist: Managing Large Element Sets</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li>Set-up
-                               <ul class="toc">
-                                       <li><a href="#genlist_application_init">Initializing the Application</a></li>
-                                       <li><a href="#genlist_creation">Creating a Genlist</a></li>
-                                       <li><a href="#entries_creation">Adding New Entries</a></li>
-                               </ul>
-                       </li>
-                       <li>Modifications
-                               <ul class="toc">
-                                       <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
-                                       <li><a href="#item_modes">Using Item Modes</a></li>
-                                       <li><a href="#other_apis">Using Other APIs</a></li>
-                               </ul>
-                       </li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#genlist">Genlist Guide for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Genlist: Managing Large Element Sets</h1>
-
-<p>This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
-       <ul>
-               <li>Set-up
-                       <ul>
-                               <li><a href="#genlist_application_init">Initializing the Application</a>
-                               <p>Initialize the application for use.</p></li>
-                               <li><a href="#genlist_creation">Creating a Genlist</a>
-                               <p>Create a genlist.</p></li>
-                               <li><a href="#entries_creation">Adding New Entries</a>
-                               <p>Add new entries to the list.</p></li>
-                       </ul>
-               </li>
-               <li>Modifications
-                       <ul>
-                               <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a>
-                               <p>Customize your list.</p></li>
-                               <li><a href="#item_modes">Using Item Modes</a>
-                               <p>Use different list modes in your application.</p></li>
-                               <li><a href="#other_apis">Using Other APIs</a>
-                               <p>Change the item class and size of the genlist.</p></li>
-                       </ul>
-               </li>
-       </ul>
-
- <h2 id="genlist_application_init" name="genlist_application_init">Initializing the Application</h2>
-
-   <p class="figure">Figure: Example of a genlist</p> 
-   <p align="center"><img alt="Example of a genlist" src="../../images/genlist_wn.png" /></p>
-  <p>The code below shows a typical elementary application that creates a window entitled &quot;Genlist Basic Tutorial&quot;. It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
-<pre class="prettyprint">static bool
-_app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *app = data;
-
-&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
-
-&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;_create_list(app);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
-&nbsp;&nbsp;&nbsp;struct app_data app = { 0 };
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
-
-&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
-
-&nbsp;&nbsp;&nbsp;// Run the mainloop
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}
-</pre>
-<p> The declaration of the <span style="font-family: Courier New,Courier,monospace">struct app_data</span> is shown below:</p>
-<pre class="prettyprint">struct app_data
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
-&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
-&nbsp;&nbsp;&nbsp;Evas_Object *list;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
-&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
-};
-</pre>
-
- <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
-
-<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
-<pre class="prettyprint">Evas_Object *list = elm_genlist_add(parent);
-</pre>
-
- <h2 id="entries_creation" name="entries_creation">Adding New Entries</h2>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
-<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
-Building a Basic Item Class</h3>
-<p>The code for the minimal genlist item class is below: </p>
-
-<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-itc-&gt;item_style = &quot;default&quot;;
-itc-&gt;func.text_get = NULL;
-itc-&gt;func.content_get = NULL;
-itc-&gt;func.state_get = NULL;
-itc-&gt;func.del = NULL;
-</pre>
-
-<p>It creates a simple item class, sets the <span style="font-family: Courier New,Courier,monospace">item_style</span> to &quot;default&quot; and every other field to NULL. However, this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields which are used to add text and an icon to the list entry. This is explained in another section.</p>
-<h3 id="elm_genlist_item_append" name="elm_genlist_item_append">Adding the Element</h3>
-<p>Once the genlist item class object is created, a new element is added to the list by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>. </p>
-<pre class="prettyprint">elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;NULL,                    // Item data
-&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
-&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type; this is the common one
-&nbsp;&nbsp;&nbsp;NULL,                    // Callback on selection of the item
-&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
-);
-</pre>
-<p>With most parameters as NULL and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.</p>
-<h3 id="text_get" name="text_get">Text in the List Elements</h3>
-<p> Use <span style="font-family: Courier New,Courier,monospace">text_get</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure. These callbacks must have a prototype matching to the following: </p>
-
-<pre class="prettyprint">char * text_get(void *data, Evas_Object *obj, const char *part);
-</pre>
-<p>This callbacks returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. This callback is called for each user-settable text part according to the current theme.</p>
-<p>If you are not familiar with the concept of parts in the EFLs,  read the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm#simple_edc_file">Write a Simple EDC File</a> section.</p>
-
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>For the default theme there is one part named <span style="font-family: Courier New,Courier,monospace">elm.text</span>. A possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is therefore: </p>
-<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;// Check this is text for the part we&#39;re expecting
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The names and positions of parts depends on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. The <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide explains how to do that.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
-<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
-{
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre> 
-
-<h3 id="content_get" name="content_get">Evas_Objects in the List Elements</h3>
-<p>Icons are added in a similar fashion: there is a callback named <span style="font-family: Courier New,Courier,monospace">content_get</span> which returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part which contents can be set.</p>
-<p>The prototype of the callback must match this one: </p>
-<pre class="prettyprint">Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
-</pre>
-
-<p>The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is that it returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
-<p>This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:</p>
-<pre class="prettyprint">
-static Evas_Object *
-_genlist_content_get(void *data, Evas_Object *obj, const char *part)
-{
-&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
-
-&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p> For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.</p>
-<h3 id="state_get" name="state_get">Events on Genlist Items</h3>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The swallow parts have no minimum size. This means that if you do not fix the minimum size, the part cannot be seen.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<p>Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>):</p>
-<pre class="prettyprint">elm_genlist_item_append(list,
-&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;NULL,                    // item data
-&nbsp;&nbsp;&nbsp;NULL,                    // parent item for trees, NULL if none
-&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // item type, other values are used for trees
-&nbsp;&nbsp;&nbsp;_genlist_selected_cb,      // callback on selection of the item
-&nbsp;&nbsp;&nbsp;NULL                     // data for that callback function
-);
-</pre>
-
-<p>This callback adheres to the following prototype: </p>
-<pre class="prettyprint">void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
-</pre>
-
-<p>The implementation below changes the item style of items when they are selected:</p>
-<pre class="prettyprint">static void
-_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *app = data;
-
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-}
-</pre>
-
-       <h2 id="item_style" name="item_style">Choosing Another Item Style to Add or Remove Parts</h2>
- 
-<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
-<pre class="prettyprint">app-&gt;itc-&gt;item_style = &quot;default&quot;;
-</pre>
-<p>The <a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#genlist">Genlist</a> component lists all available item styles.</p>
-<p>Further customization is achieved by modifying the theme as explained in the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide.</p>
-<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
-
- <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
-
-<p>So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a &quot;group&quot; mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.</p>
-<h3 id="item_group" name="item_group">Group Mode</h3>
-<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for &quot;title&quot; items.</p>
-<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
-<p>Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:</p>
-<pre class="prettyprint">
-app-&gt;itc = elm_genlist_item_class_new();
-app-&gt;itc-&gt;item_style = &quot;default&quot;;
-app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
-app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
-app-&gt;itc-&gt;func.state_get = NULL;
-app-&gt;itc-&gt;func.del = NULL; 
-
-app-&gt;itc2 = elm_genlist_item_class_new();
-app-&gt;itc2-&gt;item_style = &quot;1text.1icon&quot;;
-app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
-app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
-app-&gt;itc2-&gt;func.state_get = NULL;
-app-&gt;itc2-&gt;func.del = NULL; 
-</pre>
-
-<p> Then add a group header and follow it with 10 children. This is repeated 1000 times.</p>
-<p>The parent has type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> while the children have type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span>.</p>
-<p>The other important point is that the value returned by <span style="font-family: Courier New,Courier,monospace">lm_genlist_item_append()</span> is stored in it and then sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-children relationship.</p>
-<pre class="prettyprint">
-for (i = 0; i &lt; 1000; i++) 
-{
-&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (10 * i),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
-&nbsp;&nbsp;&nbsp;);
-&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (10 * i + j),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<h3 id="item_tree" name="item_tree">Tree Mode</h3>
-<p>Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: <span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>. Like any smart callback, they are registered through <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> on the genlist object:</p>
-<pre class="prettyprint">evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_expand_request, NULL);
-evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_expanded, NULL);
-
-evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_contract_request, NULL);
-evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
-&nbsp;&nbsp;&nbsp;_tree_item_contracted, NULL);
-</pre>
-
-<p> The callbacks <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> do only one thing: decide whether the element is expanded or contracted. This is done by using <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). A minimal implementation of these callbacks is therefore:</p>
-<pre class="prettyprint">
-static void
-_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
-}
-</pre>
-
-  <table class="note"> 
-   <tbody> 
-  <tr> 
-   <th class="note">Note</th> 
-  </tr> 
-  <tr> 
-   <td class="note">The example above has an extra line: the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span>. It changes the item style and is explained in the <a href="#item_class_update">Changing the item class of an item after its creation</a> section.</td> 
-  </tr> 
-   </tbody> 
-  </table> 
-
-<pre class="prettyprint">
-static void
-_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
-}
-</pre>
-
-<p> As said above, once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions like <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>, like for the group mode.</p>
-<p>The function below is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passes to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
-<pre class="prettyprint">static void
-_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
-&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(uintptr_t) (i + i_parent),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it_parent,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-
-<p>The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It imply calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
-<pre class="prettyprint">static void
-_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
-}
-</pre>
-
-<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
-<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
-
- <h2 id="other_apis" name="other_apis">Using Other APIs</h2>
-
-<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
-<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
-
-<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
-<p>Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
-<pre class="prettyprint">static void
-_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
-
-&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded.
-&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
-
-&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/gesture_detector_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/gesture_detector_tutorial_n.htm
deleted file mode 100644 (file)
index b9b9b5a..0000000
--- a/org.tizen.tutorials/html/native/ui/gesture_detector_tutorial_n.htm
+++ /dev/null
@@ -1,278 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Gesture Detector: Implementing Gestures Provided by the EFL Library</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing Touch Gestures</a></li>
-                       <li><a href="#touch">Implementing Touch Gestures</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Gesture Detector: Implementing Gestures Provided by the EFL Library</h1>
-
-  
-<p>This tutorial demonstrates how you can implement different types of gestures provided by the EFL library and instructions on how to use them.</p>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Elementary and Evas API basics by learning about:</p> 
-       <ul>
-               <li><a  href="#init">Initializing Touch Gestures</a>
-               <p>Initialize the touch gestures for use.</p></li>
-               <li><a  href="#touch">Implementing Touch Gestures</a>
-               <p>Implement different kinds of touch gestures.</p></li>
-       </ul>
-
-
- <h2 id="init" name="init">Initializing Touch Gestures</h2>
-
-<p>The EFL library provides a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum, line, zoom and rotate, which can be used by the application to build a dynamic user interface interaction which is simple to use as well as intuitive.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and adds it to naviframe.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;// Conformant
-&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;layout);
-&nbsp;&nbsp;&nbsp;// Calendar View
-&nbsp;&nbsp;&nbsp;create_main_view(ad);
-&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;nf, &quot;Calendar&quot;, NULL, NULL, ad-&gt;calendar, NULL);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;elm.swallow.content&quot;, ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view</span> function creates the application layout by arranging the labels and rectangles by using recursive composition of the box layout:</p>
-<pre class="prettyprint">
-static void
-create_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Box
-&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(ad-&gt;box, 0, 5 * elm_config_scale_get());
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
-&nbsp;&nbsp;&nbsp;// Event Rect
-&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(ad-&gt;box));
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
-&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;gl = create_gesture_layer(ad);
-
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;box, ad-&gt;rect);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
-}
-</pre>
-
-<p>A gesture layer is added to the rectangle object. This layer is able to receive the gesture event:</p>
-<pre class="prettyprint">
-static Evas_Object *
-create_gesture_layer(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *g = elm_gesture_layer_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_gesture_layer_attach(g, ad-&gt;rect);
-}
-</pre>
-
-<p>The following figure illustrates the Gesture Detector.</p>
-
-  <p class="figure">Figure: Gesture Detector screen</p> 
-  <p align="center"><img alt="Gesture Detector screen" src="../../images/gesture_view2.png" /></p> 
-
- <h2 id="touch" name="touch">Implementing Touch Gestures</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_attach()</span> is the function to which a gesture layer for a particular object is attached.</p>
-<p>A gesture can have 4 different states:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_MOVE</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span></li></ul>
-<p>Every gesture starts with the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span> state and finishes with either the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span> or <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span> state depending on whether the gesture is completed or aborted on that object. </p>
-<p>If an application only needs to track a finished gesture, it can listen for the finished state only. For a more complete control of the gesture, an application can listen for all state changes for that particular gesture.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function is used for registering state change callback for a particular gesture.</p>
-<p>For more information about the gestures, see the gesture documentation.</p>
-
-<p>To detect touch gestures:</p>
-<ul>
-<li><p>The following example adds callbacks for listening to the tap gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, n_finger_tap_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, n_finger_tap_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, n_finger_tap_abort, ad);
-</pre></li>
-<li><p>The following example adds callbacks for listening to the double tap gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, dbl_click_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, dbl_click_move, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, dbl_click_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, dbl_click_abort, ad);
-</pre></li>
-
-<li><p>The following example adds callbacks for listening to the triple tap gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, triple_click_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, triple_click_move, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, triple_click_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, triple_click_abort, ad);
-</pre></li>
-<li><p>The following example adds callbacks for listening to the long tap gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
-</pre></li>
-
-<li><p>The following example adds callbacks for listening to the momentum gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
-</pre></li>
-
-<li><p>The following example adds callbacks for listening to the line gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, line_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, line_move, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, line_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, line_abort, ad);
-</pre></li>
- 
-<li><p>The following examples add callbacks for listening to the flick gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, flick_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, flick_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, flick_abort, ad);
-</pre></li>
-
-<li><p>The following examples add callbacks for listening to the zoom gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, zoom_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, zoom_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, zoom_abort, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, zoom_move, ad);
-</pre></li>
- 
-<li><p>The following example adds callbacks for listening to the rotate gesture:</p>
-<pre class="prettyprint">
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, rotate_start, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, rotate_end, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, rotate_abort, ad);
-elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
-&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, rotate_move, ad);
-</pre></li>
-
-<li><p>The following example adds a callback for getting the tap gesture finishing notification:</p>
-<pre class="prettyprint">
-static Evas_Event_Flags
-n_finger_tap_end(void *data, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *) event_info;
-&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
-}
-</pre></li>
-</ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm b/org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm
deleted file mode 100644 (file)
index 9b4587e..0000000
--- a/org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm
+++ /dev/null
@@ -1,555 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Menu: Adding Menus to the Application</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#structure">Defining the Application &quot;Structure&quot;</a></li>
-                       <li><a href="#theme">Defining the Application Theme</a></li>
-                       <li><a href="#basic_ui">Creating the Basic UI</a></li>
-                       <li><a href="#hidden_menu">Creating a Hidden Menu</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>             
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Menu: Adding Menus to the Application</h1>
-
-  
-<p>This tutorial shows how to add menus to the application. The example code creates an application with 3 views, these views are showed by an interaction with a menu bar, placed on the top of the application. The application has also a hidden menu that appears only when the menu button is pressed.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#structure">Defining the Application &quot;Structure&quot;</a>
-               <p>Define the structure of the application.</p></li>
-               <li><a href="#theme">Defining the Application Theme</a>
-               <p>Create a theme using Basic EDC UI Application.</p></li>
-               <li><a href="#basic_ui">Creating the Basic UI</a>
-               <p>Create menus and toolbars.</p></li>
-               <li><a href="#hidden_menu">Creating a Hidden Menu</a>
-               <p>Create a hidden menu in your application.</p></li>
-       </ul>
-               
- <h2 id="structure" name="structure">Defining the Application &quot;Structure&quot;</h2>
- 
-<p>Define the structure of the application:</p>
- <pre class="prettyprint">typedef struct appdata
-{
-&nbsp;&nbsp;&nbsp;Evas_Object* win; // The main window
-&nbsp;&nbsp;&nbsp;Evas_Object* layout; // The Edje layout
-&nbsp;&nbsp;&nbsp;Evas_Object* conform; // The conform
-&nbsp;&nbsp;&nbsp;Evas_Object *nf; // The Naviframe to handle the views
-&nbsp;&nbsp;&nbsp;appmenu_s *menu; // The main menu
-&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu; // The side menu
-&nbsp;&nbsp;&nbsp;mainview_s *main_view; // The main view (dayselector)
-&nbsp;&nbsp;&nbsp;calview_s *cal_view; // The calendar view
-&nbsp;&nbsp;&nbsp;dateview_s *date_view; // The date and time view
-&nbsp;&nbsp;&nbsp;settview_s *settings_view; // The settings view
-&nbsp;&nbsp;&nbsp;Eina_Bool sdmenu_up; // A Boolean variable to keep the side menu status
-} appdata_s;
-</pre>
-<p>This structure contains some specific variables for the views and the menus.</p>
-<p>Define the main view by using the structure <span style="font-family: Courier New,Courier,monospace">mainview</span>, it is composed of a <span style="font-family: Courier New,Courier,monospace">box</span> (the main container), a <span style="font-family: Courier New,Courier,monospace">dayselector</span>, an image <span style="font-family: Courier New,Courier,monospace">img</span>, and a label <span style="font-family: Courier New,Courier,monospace">lb_main</span>.</p>
- <pre class="prettyprint">typedef struct mainview
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view
-&nbsp;&nbsp;&nbsp;Evas_Object *colorselector; // A color selector
-&nbsp;&nbsp;&nbsp;Evas_Object *img; // An image 
-&nbsp;&nbsp;&nbsp;Evas_Object *lb_day; // A label
-} mainview_s;
-</pre>
-<p>The date view is very similar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">datetime</span> component and a label <span style="font-family: Courier New,Courier,monospace">lb_date</span>.</p>
- <pre class="prettyprint">typedef struct dateview
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view 
-&nbsp;&nbsp;&nbsp;Evas_Object *datetime; // A datetime component 
-&nbsp;&nbsp;&nbsp;Evas_Object *lb_date; // A label 
-} dateview_s;
-</pre>
-<p>The last view is the calendar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">calendar</span> and a label <span style="font-family: Courier New,Courier,monospace">lb_cal</span>.</p>
- <pre class="prettyprint">typedef struct calview
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view 
-&nbsp;&nbsp;&nbsp;Evas_Object *calendar; // A calendar component  
-&nbsp;&nbsp;&nbsp;Evas_Object *lb_cal; // A label component
-} calview_s;
-</pre>
-<p>The last members of the application structure are the 2 menus. The main menu is fixed and visible, and the side menu is hidden on application starts. These menus are represented by the <span style="font-family: Courier New,Courier,monospace">appmenu</span> structure.</p>
- <pre class="prettyprint">typedef struct appmenu
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *tb; // The toolbar
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *submenu; // The submenu item
-} appmenu_s;
-</pre>
-
- <h2 id="theme" name="theme">Defining the Application Theme</h2>
-
-<p>After the structure is defined, define the UI. In this tutorial, Basic EDC UI Application is used. </p>
-<p>This application structure is based on this skeleton:</p>
-
-<p class="figure">Figure: Menu skeleton</p> 
-<p align="center"><img alt="Menu skeleton" src="../../images/menu_skeleton.png" /></p>
-  
-
-<p>The window, the conformant and the layout are set by the Basic EDC UI Application skeleton. Setup the containers for UI components and views.</p>
-<p>Create the <span style="font-family: Courier New,Courier,monospace">main_menu</span> <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part in the <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
- <pre class="prettyprint">
-part
-{
-&nbsp;&nbsp;&nbsp;name: &quot;menu/main&quot;;
-&nbsp;&nbsp;&nbsp;type: SWALLOW;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;}
-} // End menu/main
-</pre>
-<p>This part has two descriptions, one for the real position named <span style="font-family: Courier New,Courier,monospace">up</span> and another out of the screen as the default position. Create these states to animate the menu on application start. The animation is run by <span style="font-family: Courier New,Courier,monospace">animation,menu_main</span>.</p>
- <pre class="prettyprint">program
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_main&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/main&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
-} // END animation,menu_main
-</pre>
-<p>For more information about animations, see the Effects tutorial.</p>
-<p>Create another container for the views. This container is also a &quot;SWALLOW&quot; part.</p>
- <pre class="prettyprint">part 
-{
-&nbsp;&nbsp;&nbsp;name: &quot;view/main&quot;;
-&nbsp;&nbsp;&nbsp;type: SWALLOW;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;menu/main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255; 
-&nbsp;&nbsp;&nbsp;}
-} // END view/main 
-</pre>
-<p>This part has also two descriptions for animation purpose, like the <span style="font-family: Courier New,Courier,monospace">main_menu</span> part.</p>
-<p>The program:</p>
- <pre class="prettyprint">program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,view_main&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;view/main&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-} // END animation,view_main
-</pre>
-<p>The last container is the side menu called <span style="font-family: Courier New,Courier,monospace">menu/side</span>.</p>
- <pre class="prettyprint">
-part 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: -0.3 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: -0.3 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; 
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.3 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;}
-} // END menu/side
-</pre>
-<p>By default, this container is hidden. Clicking menu button makes it appear. The second description places the container on the left of the screen. Here is the program to run animation:</p>
- <pre class="prettyprint">
- program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-} // END animation,menu_side
-</pre>
-<p>This program runs when it receives an event called <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
-<p>Create a program that does the opposite and starts when it receives a signal called <span style="font-family: Courier New,Courier,monospace">hide,menu_side</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
- <pre class="prettyprint">
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-} //END animation,menu_side,hide
-
-program 
-{ 
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-} //END animation,menu_side
-</pre>
-
- <h2 id="basic_ui" name="basic_ui">Creating the Basic UI</h2>
-
-<p>The view container <span style="font-family: Courier New,Courier,monospace">view/main</span> is structured like this:</p>
-
-
-<p class="figure">Figure: Main view</p> 
-<p align="center"><img alt="Main view" src="../../images/view_main.png" /></p>
-
-<p>The naviframe contains and manages the boxes. For more information, see the Container programming guide. This UI component handle views. In this example each view is contained in a <span style="font-family: Courier New,Courier,monospace">box</span> and the <span style="font-family: Courier New,Courier,monospace">box</span> is contained in the naviframe.</p>
-<p>Create the naviframe in the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function and allocate the memory to handle the views and menus of the application.</p>
- <pre class="prettyprint">
-// Memory allocation
-ad-&gt;main_view = calloc(1, sizeof(mainview_s)); // Allocating memory for the main view 
-ad-&gt;cal_view = calloc(1, sizeof(calview_s));   // Allocating memory for the calendar view 
-ad-&gt;date_view = calloc(1, sizeof(dateview_s)); // allocating memory for the date view 
-ad-&gt;settings_view = calloc(1, sizeof(settview_s)); // allocating memory for the Settings view
-// END of Memory allocation
-</pre>
-<p>Use <span style="font-family: Courier New,Courier,monospace">app_terminate</span> function to free the memory:</p>
- <pre class="prettyprint">app_terminate(void *data)
-{
-&nbsp;&nbsp;&nbsp;// Release all resources
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;free(ad-&gt;menu);
-&nbsp;&nbsp;&nbsp;free(ad-&gt;sidemenu);
-&nbsp;&nbsp;&nbsp;free(ad-&gt;main_view);
-&nbsp;&nbsp;&nbsp;free(ad-&gt;cal_view);
-&nbsp;&nbsp;&nbsp;free(ad-&gt;settings_view);
-} // END of app_terminate
-</pre>
-<p>Create the naviframe:</p>
-
-<p>Create the main menu after most of the containers are created. First create a new <span style="font-family: Courier New,Courier,monospace">_build_main_menu</span> function, it takes an <span style="font-family: Courier New,Courier,monospace">appdata_s</span> as a parameter. This function is called by <span style="font-family: Courier New,Courier,monospace">create_base_gui</span>.</p>
- <pre class="prettyprint">static void _build_main_menu(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Memory allocation for the main menu function
-&nbsp;&nbsp;&nbsp;appmenu_s *menu = calloc(1, sizeof(appmenu_s));
-&nbsp;&nbsp;&nbsp;// Putting the &quot;main&quot; menu in the application data
-&nbsp;&nbsp;&nbsp;ad-&gt;menu = menu;
-
-&nbsp;&nbsp;&nbsp;// Creation of the &quot;Menu&quot; toolbar
-&nbsp;&nbsp;&nbsp;menu-&gt;tb = elm_toolbar_add(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;// Setting the &quot;Menu&quot; Toolbar properties
-&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(menu-&gt;tb, ELM_TOOLBAR_SHRINK_NONE);
-&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(menu-&gt;tb, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(menu-&gt;tb, EINA_FALSE);
-
-&nbsp;&nbsp;&nbsp;// Adding menu items to the &quot;Menu&quot; toolbar
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/calendar.png&quot;, &quot;Calendar&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Date&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/settings.png&quot;, &quot;Settings&quot;, _menu_item_selected_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Showing the UI component
-&nbsp;&nbsp;&nbsp;evas_object_show(menu-&gt;tb);
-
-&nbsp;&nbsp;&nbsp;// Adding the UI component to the &quot;menu/main&quot; SWALLOW container defined in the .edc theme file.
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/main&quot;, menu-&gt;tb);
-
-&nbsp;&nbsp;&nbsp;// Set the default view 
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(menu-&gt;tb), EINA_TRUE);
-}
-</pre>
-<p>Create a toolbar with <span style="font-family: Courier New,Courier,monospace">elm_toolbar_add</span>. This toolbar is a child of the main window so set <span style="font-family: Courier New,Courier,monospace">ad-&gt;win</span> as parameter.</p>
-<p>Setup the behavior of the toolbar, the display mode is set by using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_shrink_mode_set</span>. The toolbar does not scroll under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_NONE</span> mode, but it enforces a minimum size, so that all the items fit inside it. It does not scroll or show the items that do not fit under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_HIDE</span> mode. Finally, it scrolls under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_SCROLL</span> mode, and it creates a button to aggregate items which did not fit with the <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_MENU</span> mode.</p>
-
-<p>In this example, there is only a limited number of menu elements and thus <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span> is used.</p>
-
-<p>Expand the transverse length of the item according the transverse length of the toolbar, giving <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as second parameter of <span style="font-family: Courier New,Courier,monospace">elm_toolbar_transverse_expanded_set</span>.</p>
-
-<p>Make the menu items have the same size by setting <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> to <span style="font-family: Courier New,Courier,monospace">elm_toolbar_homogeneous_set</span>. This activates the homogeneous mode of the toolbar.</p>
-<p>Add menu items to the toolbar using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span>. This function takes 4 parameters:</p>
-<ul>
-<li>the target toolbar</li>
-<li>the icon path for the menu item</li>
-<li>the item label</li>
-<li>the function to call when the item is clicked</li>
-<li>the data to associate with the item for related callbacks.</li>
-</ul>
-<p>For the icons, add some images in the resource directory of the application <span style="font-family: Courier New,Courier,monospace">res/images</span> and define a macro to contain this path in the application <span style="font-family: Courier New,Courier,monospace">.h</span> file. In this example it is <span style="font-family: Courier New,Courier,monospace">inc/menututorial.h</span>.</p>
-
-<pre class="prettyprint">#define ICON_DIR &quot;/opt/usr/apps/&quot;PACKAGE&quot;/res/images&quot;
-</pre>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">PACKAGE</span> macro to setup this <span style="font-family: Courier New,Courier,monospace">ICON_DIR</span> macro. This way you can add items to the toolbar using icon images placed in the resource directory of the application.</p>
-
-<p>The item label is very important, it is used in the item callback function.</p>
-
-<p>In this example, only one callback is created to manage all the items but there can be several callback functions. Pass the application data to the callback.</p>
-
-<p>This callback is an <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb</span>, it must have this prototype:</p>
-<pre class="prettyprint">
-_mycallback(void *data, Evas_Object *obj, void *ev)
-</pre>
-
-<p>In this example, the aim of the callback is to create the view which the user has requested. It is named <span style="font-family: Courier New,Courier,monospace">_menu_item_selected_cb</span>, and in this function we recover the calling object text to call the correct view creation function.</p>
-<pre class="prettyprint">
-it = ev;
-
-// Get the menu item text
-str = elm_object_item_text_get(it);
-
-// Comparing with the possible view names
-if (!strcmp(str, &quot;Calendar&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Calendar View&quot;
-&nbsp;&nbsp;&nbsp;_build_calendar_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;cal_view-&gt;box;
-}
-else if (!strcmp(str, &quot;Date&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot;
-&nbsp;&nbsp;&nbsp;_build_date_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
-}
-else if (!strcmp(str, &quot;Home&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Home or main View&quot;
-&nbsp;&nbsp;&nbsp;_build_main_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;main_view-&gt;box;
-}
-else if (!strcmp(str, &quot;Settings&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Settings&quot; view
-&nbsp;&nbsp;&nbsp;_build_settings_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;settings_view-&gt;box;
-}
-else if (!strcmp(str, &quot;Clock&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot; 
-&nbsp;&nbsp;&nbsp;_build_date_view(ad);
-&nbsp;&nbsp;&nbsp;// Set the view from the application data
-&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
-}
-
-// Show the view in the naviframe 
-elm_object_content_set(ad-&gt;nf, view);
-</pre>
-<p>The menu has views, Calendar, Date, Settings, and Home (main view). The view names are stored in the menu item label, to get the label compare the returned string with the view names. When the name matches, the view is built by calling the correct function. Store the view in the application data and set up a new content to the naviframe before exit.</p>
-<p>This way when the user clicks a menu item, the view changes. The naviframe component destroys its content on each call of <span style="font-family: Courier New,Courier,monospace">elm_object_content_set</span>. That is why the content must be built again on each item click.</p>
-<p>Create the functions which create the views.</p>
- <pre class="prettyprint">static void _build_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;mainview_s *view = ad-&gt;main_view;
-&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
-
-&nbsp;&nbsp;&nbsp;// Main box
-&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;view-&gt;colorselector = elm_colorselector_add(view-&gt;box);
-&nbsp;&nbsp;&nbsp;elm_colorselector_mode_set(view-&gt;colorselector, ELM_COLORSELECTOR_PALETTE);
-&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;colorselector);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;colorselector);
-
-&nbsp;&nbsp;&nbsp;view-&gt;img = elm_image_add(view-&gt;box);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;img, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;img, 0.5, 0.5);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;img, 256, 256);
-&nbsp;&nbsp;&nbsp;;snprintf(buf, sizeof(buf), &quot;%s/%s&quot;, ICON_DIR, &quot;tizen-logo.png&quot;);
-&nbsp;&nbsp;&nbsp;if (!elm_image_file_set(view-&gt;img, buf, NULL))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Problem loading image&quot;);
-&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;img);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;img);
-
-&nbsp;&nbsp;&nbsp;view-&gt;lb_day = elm_label_add(view-&gt;box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Main view&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_day, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_day);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_day);
-}
-
-static void
-_build_calendar_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;calview_s *view = ad-&gt;cal_view;
-
-&nbsp;&nbsp;&nbsp;// Main box image = elm_image_add(win);
-
-&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;view-&gt;calendar = elm_image_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;calendar, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;calendar, 0.5, 0.5);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;calendar, 256, 256);
-&nbsp;&nbsp;&nbsp;elm_image_file_set(view-&gt;calendar, ICON_DIR&quot;/calendar.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;calendar);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;calendar);
-
-&nbsp;&nbsp;&nbsp;view-&gt;lb_cal = elm_label_add(view-&gt;box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_cal, &quot;The calendar view&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_cal, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_cal);
-&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_cal);
-} // End of_build_calendar_view
-</pre>
-<p>Each function creates a view and stores it in the application data.</p>
-
- <h2 id="hidden_menu" name="hidden_menu">Creating a Hidden Menu</h2>
-
-<p>Add a new function called <span style="font-family: Courier New,Courier,monospace">_build_side_menu</span> to create the side Menu toolbar and add some items to it. This function takes the application data as parameter and stores the built menu in the sidemenu attribute of the structure.</p>
- <pre class="prettyprint">static void _build_side_menu(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu = calloc(1, sizeof(appmenu_s));
-&nbsp;&nbsp;&nbsp;ad-&gt;sidemenu = sidemenu;
-
-&nbsp;&nbsp;&nbsp;sidemenu-&gt;tb = elm_toolbar_add(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(sidemenu-&gt;tb, ELM_TOOLBAR_SHRINK_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(sidemenu-&gt;tb, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/account.png&quot;, &quot;Account&quot;, NULL, NULL);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/contacts.png&quot;, &quot;Friends&quot;, NULL, NULL);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Clock&quot;, _menu_item_selected_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(sidemenu-&gt;tb, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;evas_object_show(sidemenu-&gt;tb);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/side&quot;, sidemenu-&gt;tb);
-&nbsp;&nbsp;&nbsp;elm_toolbar_horizontal_set(sidemenu-&gt;tb, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(sidemenu-&gt;tb), EINA_TRUE);
-}
-</pre>
-<p>The side menu is created but hidden by default, to make it appear the use must click Home button.</p>
-
-<p>By default the Basic EDC UI application creates a function <span style="font-family: Courier New,Courier,monospace">keydown_cb</span> to handle the key down events. In the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function an <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add</span> function is called with the <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> macro and with <span style="font-family: Courier New,Courier,monospace">keydown_cb</span> as callback. In this callback, the <span style="font-family: Courier New,Courier,monospace">KEY_END</span> event puts the window on the lower state.</p>
- <pre class="prettyprint">keydown_cb(void *data , int type , void *event)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Ecore_Event_Key *ev = event;
-&nbsp;&nbsp;&nbsp;if (!strcmp(ev-&gt;keyname, KEY_END)) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Let window go to hide state
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_DONE;
-}
-</pre>
-<p>The key name of menu button is <span style="font-family: Courier New,Courier,monospace">XF86Send</span>. Add the menu button key press handling to the <span style="font-family: Courier New,Courier,monospace">keydown_cb</span>. The menu is shown on the first press and hidden it on the second press. Use <span style="font-family: Courier New,Courier,monospace">Eina_Bool sdmenu_up</span> on the application data to store the menu status during the application execution. If <span style="font-family: Courier New,Courier,monospace">ad-&gt;sdmenu_up</span> is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> the menu is visible.</p>
-
-<p>A program <span style="font-family: Courier New,Courier,monospace">animation,menu_side</span> is defined in the <span style="font-family: Courier New,Courier,monospace">.edc</span> theme file. This program is run when the signal <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> is received with the source MenuButton. Also the program who hides the side menu is defined and is called <span style="font-family: Courier New,Courier,monospace">animation,menu_side,hide</span> which start on signal <span style="font-family: Courier New,Courier,monospace">hide,sidemenu</span>.</p>
-
-<p>Test side menu status by sending the signals using <span style="font-family: Courier New,Courier,monospace">elm_object_signal_emit</span></p>
- <pre class="prettyprint">
-if (!strcmp(ev-&gt;keyname, &quot;XF86Send&quot;)) 
-{
-&nbsp;&nbsp;&nbsp;if (ad-&gt;sdmenu_up == EINA_TRUE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If the menu is visible send a &quot;hide,sidemenu&quot; signal
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Store the new menu status (hidden)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>Now the menu appears and disappears when the menu button is pressed.</p>
-<p>The first side menu button sends back to the main view:</p>
- <pre class="prettyprint">
-// Hide the side menu if it&#39;s visible
-if (ad-&gt;sdmenu_up == EINA_TRUE) 
-{
-&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
-}
-</pre>
-<p>This way the menu disappears when the view is selected by the user.</p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm
deleted file mode 100644 (file)
index 338954e..0000000
--- a/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm
+++ /dev/null
@@ -1,278 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Multi-point Touch: Tracking Touch Events</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing Multi-point Touch</a></li>
-                       <li><a href="#canvas">Handling the Canvas</a></li>
-                       <li><a href="#touch">Managing Touch Events</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Multi-point Touch: Tracking Touch Events</h1>
-
-  
-<p>This tutorial demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> to paint on a canvas and track touch events.</p>
-
-<h2>Warm-up</h2>
-  <p>Become familiar with the Eina, Elementary, and Evas API basics by learning about:</p> 
-       <ul>
-               <li><a href="#init">Initializing Multi-point Touch</a>
-               <p>Initialize multi-point touch for use.</p></li>
-               <li><a href="#canvas">Handling the Canvas</a>
-               <p>Paint on a canvas.</p></li>
-               <li><a href="#touch">Managing Touch Events</a>
-               <p>Manage and track different touch events.</p></li>
-       </ul>
-
- <h2 id="init" name="init">Initializing Multi-point Touch</h2>
-
-<p>This sample is a fully functional application able to track multiple simultaneous clicks. For every click, a black rectangle spot is drawn on the screen. This way it is easy to test the multi-point touch operation with the application.</p>
-
-<p>Initialization is implemented in the <span style="font-family: Courier New,Courier,monospace">multitouch.c</span> file.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">appdata</span> structure includes <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> pointers, a list, and a Boolean flag.</p>
-<pre class="prettyprint">
-typedef struct appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;Evas_Object *nf;
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-&nbsp;&nbsp;&nbsp;Evas_Object *box;
-&nbsp;&nbsp;&nbsp;Evas_Object *rect;
-&nbsp;&nbsp;&nbsp;Evas_Object *label;
-
-&nbsp;&nbsp;&nbsp;// List of mouse spots
-&nbsp;&nbsp;&nbsp;Eina_List *spots;
-
-&nbsp;&nbsp;&nbsp;// Flag for checking the mouse down event
-&nbsp;&nbsp;&nbsp;Eina_Bool down; 
-} 
-appdata_s;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function initializes event callbacks and calls the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function to start the EFL application.</p>
-<pre class="prettyprint">
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
-&nbsp;&nbsp;&nbsp;int ret = 0;
-
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
-
-&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-</pre>
-
-
-<p>The following figure illustrates the Multi-point Touch.</p>
-
-  <p class="figure">Figure: Multi-point Touch screens</p> 
-  <p align="center"><img alt="Multi-point Touch screens" src="../../images/multipoint_touch.png" /></p> 
-
- <h2 id="canvas" name="canvas">Handling the Canvas</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates base GUI elements including Naviframe and the Naviframe button. Naviframe includes each view screen as an item, which in turn includes the title and a button which clears spots when clicked.</p> 
-
-<pre class="prettyprint">static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
-
-&nbsp;&nbsp;&nbsp;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
-
-&nbsp;&nbsp;&nbsp;// Button
-&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Clear&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, button_clicked_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Create main view
-&nbsp;&nbsp;&nbsp;ad-&gt;box = create_main_view(ad);
-&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;Multi-point Touch&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL, ad-&gt;box, NULL);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, ad-&gt;button);
-} 
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main view including the label and an event rectangle. </p> 
-<p>The label displays information on mouse event status and coordinates (x, y positions). The event rectangle is received completely through mouse (touch) events. To show 2 elements in a Naviframe content area, a container combining those elements is necessary. A box container functions in that role. The label and rectangle pack end the box and the box is embedded into the Naviframe content area.</p> 
-
-<pre class="prettyprint">static Evas_Object *
-create_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box;
-
-&nbsp;&nbsp;&nbsp;// Box
-&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-
-&nbsp;&nbsp;&nbsp;// Label
-&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;None&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, 0);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;label, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;label, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;label);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
-
-&nbsp;&nbsp;&nbsp;// Event Rect
-&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(box));
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
-&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;rect);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_spot()</span> function creates a rectangle, resizes the rectangle according to received size input, and moves the rectangle according to received coordinates (x, y positions) input.</p>
-
-<pre class="prettyprint">Evas_Object *
-create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-&nbsp;&nbsp;&nbsp;spot = evas_object_rectangle_add(evas_object_evas_get(parent));
-&nbsp;&nbsp;&nbsp;evas_object_resize(spot, size, size);
-&nbsp;&nbsp;&nbsp;// Adjust x, y positions to be center of object
-&nbsp;&nbsp;&nbsp;evas_object_move(spot, x - (size/2), y - (size/2));
-&nbsp;&nbsp;&nbsp;evas_object_show(spot);
-
-&nbsp;&nbsp;&nbsp;return spot;
-}
-</pre>
-
-<p>The rectangle object is stored in <span style="font-family: Courier New,Courier,monospace">Eina_List (ad-&gt;spots)</span> for managing other functions. The <span style="font-family: Courier New,Courier,monospace">button_clicked_cb()</span> function removes all <span style="font-family: Courier New,Courier,monospace">evas_objects</span> into the <span style="font-family: Courier New,Courier,monospace">ad-&gt;spots</span> list, meaning all spot rectangles are cleared.</p>
-
-<pre class="prettyprint">static void
-button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-
-&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(ad-&gt;spots, spot)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(spot);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spot = NULL;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Clear&quot;);
-}
-</pre>
-
- <h2 id="touch" name="touch">Managing Touch Events</h2>
-
-<p>On the bottom of the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function, event callbacks are added to the event rectangle. An event callback is added using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
-
-<p>The following touch event types are supported:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: This event is called when the given object receives the mouse down event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: This event is called when the given object receives the mouse up event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: This event is called when the given object receives the mouse move event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: This event is called when the given object has already received the mouse down event and receives the multi-mouse down event.</li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: This event is called when the given object receives the multi-mouse up event. </li>
-<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: This event is called when the given object receives the multi-mouse move event.</li>
-</ul>
-<p>If the given object receives a mouse event, a callback function is called, and event information, such as coordinates (x, y positions) is passed. The <span style="font-family: Courier New,Courier,monospace">mousemove_cb()</span> function sets the mouse status, positions text in the label, and draws a spot rectangle. To distinguish down and up positions, set different colors for the down and up rectangles.</p>
-
-<pre class="prettyprint">
-static void
-mousemove_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-&nbsp;&nbsp;&nbsp;char buf[1024];
-&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev = event_info;
-&nbsp;&nbsp;&nbsp;Evas_Coord x = ev-&gt;cur.canvas.x;
-&nbsp;&nbsp;&nbsp;Evas_Coord y = ev-&gt;cur.canvas.y;
-&nbsp;&nbsp;&nbsp;int size = (int) 5 * elm_config_scale_get();
-
-&nbsp;&nbsp;&nbsp;if (!ad-&gt;down)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Mouse Move, %d, %d&quot;, x, y);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
-
-&nbsp;&nbsp;&nbsp;// Draw spot on event position
-&nbsp;&nbsp;&nbsp;spot = create_spot(ad-&gt;rect, x, y, size);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(spot, 0, 0, 0, 255);
-&nbsp;&nbsp;&nbsp;ad-&gt;spots= eina_list_append(ad-&gt;spots, spot);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm b/org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm
deleted file mode 100644 (file)
index c343af1..0000000
--- a/org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm
+++ /dev/null
@@ -1,274 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Naviframe: Creating Navigation Using Naviframes</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#create">Creating Naviframes</a>
-                       </li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/containers_mn.htm#naviframe">Naviframe Guide for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>     
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Naviframe: Creating Navigation Using Naviframes</h1>
-
-  
-<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Eina, Elementary, and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#create">Creating Naviframes</a>
-               <p>Create a UI with naviframes.</p></li>
-       </ul>
-       
- <h2 id="create" name="create">Creating Naviframes</h2>
-
-<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
-
-<p>This tutorial shows a UI with three naviframes. Each naviframe is made of 20 screens, each made up of a label with the text &quot;label
-&lt;n&gt;&quot;, a title with the same text, and previous and next buttons, which are used to navigate between the screens.</p>
-<p>TODO: screenshots of the staged interface</p>
-<p>The naviframe is &quot;one-way&quot;: elements are added, and when the user clicks on the &quot;previous&quot; button, they are removed; there is no &quot;next&quot; button by default. To add it, we define a structure that holds the naviframe object along with a stack of the elements that the user has popped by using the &quot;previous&quot; button.</p>
-<p>Note that it is possible to create the elements on-the-fly each time the &quot;next&quot; button is pressed. Both approaches are valid.</p>
-<pre class="prettyprint">// NOTE: A zipper is a datastructure for an ordered set of elements and a
-// cursor in this set, meaning there are elements before the cursor (which are
-// stored inside the naviframe) and after (which are stored in the &quot;popped&quot;
-// list.
-struct naviframe_zipper 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
-&nbsp;&nbsp;&nbsp;Eina_List *popped;
-};
-</pre>
-
-<p>To add several naviframes, create a function that factors their creation and initializes the naviframe_zipper structure defined above.</p>
-<pre class="prettyprint">static struct naviframe_zipper *
-_naviframe_add(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = malloc(sizeof(struct naviframe_zipper));
-&nbsp;&nbsp;&nbsp;z-&gt;naviframe = elm_naviframe_add(parent);
-&nbsp;&nbsp;&nbsp;z-&gt;popped = NULL;
-
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(z-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(z-&gt;naviframe, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_show(z-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;// By default, objects are destroyed when they are popped from the naviframe
-&nbsp;&nbsp;&nbsp;// To save and re-use them, enable &quot;preserve_on_pop&quot;
-&nbsp;&nbsp;&nbsp;elm_naviframe_content_preserve_on_pop_set(z-&gt;naviframe, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;return z;
-}
-</pre>
-<p>Create buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe component builds a button for &quot;previous&quot; by default, but allows the programmers to provide their own buttons. It has a specific slot for the &quot;next&quot; button.</p>
-<pre class="prettyprint">// Save the element that is popped from the naviframe
-static void
-_naviframe_prev(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
-&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_prepend(z-&gt;popped, elm_naviframe_item_pop(z-&gt;naviframe));
-}
-
-// Set the first element after the current one available and push it to the
-// naviframe
-static void
-_naviframe_next(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
-{
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
-&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
-&nbsp;&nbsp;&nbsp;const char *text;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
-
-&nbsp;&nbsp;&nbsp;label = eina_list_data_get(z-&gt;popped);
-&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_remove_list(z-&gt;popped, z-&gt;popped);
-&nbsp;&nbsp;&nbsp;if (label != NULL) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The UI component is saved inside the naviframe but nothing more; we need
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// to create new buttons and set the title text again (copy the one
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// from the label that is saved).
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text = elm_object_text_get(label);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The _button function creates a button which is either &quot;Previous&quot; (-1) or
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;Next&quot; (1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_naviframe_item_push(z-&gt;naviframe, text, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p> When a naviframe and the pages that go inside it are built, populate it.</p>
-<p>Remember that three naviframes are created, each populated in a different way. The common bits have been factored out as a function and the specific parts are executed through a callback. The generic function is shown below.</p>
-<pre class="prettyprint">// Generic naviframe-populate function:
-// Its third (and last) parameter is a callback for customization, i.e. pushes
-// the new items to a specific position; it returns a &quot;context&quot; value that is
-// used between its calls and enables behaviors such as &quot;push after the
-// previously-pushed item&quot; 
-static struct naviframe_zipper*
-_naviframe_populate_gen(Evas_Object *parent, const char *id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void * (*populate_cb) (Evas_Object *nav, const char *title, Evas_Object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*prev, Evas_Object *next, Evas_Object *label, Elm_Object_Item *context)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)
-{
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
-&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *context = NULL;
-&nbsp;&nbsp;&nbsp;char buf[256];
-&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;z = _naviframe_add(parent);
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 20; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label = elm_label_add(z-&gt;naviframe);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s [%d]&quot;, id, i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(label, buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(label);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(label, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The _button function creates a button which is either &quot;Previous&quot; (-1) or
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;Next&quot; (1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Use the populate_cb callback to provide the customization of the way the
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// elements are added inside the naviframe
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context = populate_cb(z-&gt;naviframe, buf, prev, next, label, context);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return z;
-}
-</pre>
-<p>The prototype of the callbacks is fairly large, but that is because of the syntax for callbacks in C.</p>
-<pre class="prettyprint">// Push items one after the other
-static Elm_Object_Item *
-_populate_cb__push(Evas_Object *nav, const char *title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
-{
-&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
-}
-
-// Push items one after the other but use insert_after for it
-static Elm_Object_Item *
-_populate_cb__push_then_insert_after(Evas_Object *nav, const char *title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
-{
-&nbsp;&nbsp;&nbsp;if (context == NULL) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_after(nav, context, title, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-
-// Push one item and repeatedly insert new items before the last inserted
-// item
-static Elm_Object_Item *
-_populate_cb__push_then_insert_before(Evas_Object *nav, const char *title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
-{
-&nbsp;&nbsp;&nbsp;if (context == NULL) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_before(nav, context, title, prev, next, label, NULL);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<p>Create a window with a vertical box, which holds the three naviframes from the Appcore&#39;s <span style="font-family: Courier New,Courier,monospace">app_create</span> callback.</p>
-
-<pre class="prettyprint">static bool
-_app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *w, *box;
-&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
-
-&nbsp;&nbsp;&nbsp;w = elm_win_util_standard_add(&quot;Naviframe Test&quot;, &quot;Naviframe Test&quot;);
-
-&nbsp;&nbsp;&nbsp;box = elm_box_add(w);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_show(box);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(w, box);
-
-&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Before&quot;, _populate_cb__push_then_insert_before);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;After&quot;, _populate_cb__push_then_insert_after);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Push&quot;, _populate_cb__push);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
-
-&nbsp;&nbsp;&nbsp;evas_object_show(w);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/panes_tutorial_mn.htm b/org.tizen.tutorials/html/native/ui/panes_tutorial_mn.htm
deleted file mode 100644 (file)
index 590d75d..0000000
--- a/org.tizen.tutorials/html/native/ui/panes_tutorial_mn.htm
+++ /dev/null
@@ -1,338 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Panes: Using Panes</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing the Application</a></li>
-               <li><a href="#create">Creating a Panes Component</a></li>
-               <li><a href="#config">Configuring the Panes</a></li>
-               <li><a href="#signals">Handling Signals</a></li>
-               </ul>   
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/containers_mn.htm#panes">Panes Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>             
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Panes: Using Panes</h1>
-
-  
-<p>This tutorial explains how to use Panes in the application.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#init">Initializing the Application</a>
-               <p>Initialize the application for use.</p></li>
-               <li><a href="#create">Creating a Panes Component</a>
-               <p>Create panes to the application.</p></li>
-               <li><a href="#config">Configuring the Panes</a>
-               <p>Change the pane settings and layout.</p></li>
-               <li><a href="#signals">Handling Signals</a>
-               <p>Handle signals based on user interaction.</p></li>
-       </ul> 
-
- <h2 id="init" name="init">Initializing the Application</h2>
-
-<p>This is how to start an Appcore application.</p>
-<pre class="prettyprint">#include &lt;Elementary.h&gt;
-#include &lt;app.h&gt;
-
-struct _appdata 
-{
-&nbsp;&nbsp;&nbsp;const char *name;
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-};
-
-static void app_terminate(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;struct _appdata *ad;
-
-&nbsp;&nbsp;&nbsp;if (!user_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;ad = user_data;
-
-&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;win);
-}
-
-static bool app_create(void *user_data)
-{
-&nbsp;&nbsp;&nbsp;struct _appdata *ad;
-&nbsp;&nbsp;&nbsp;Evas_Object *win, *conformant, *naviframe, *panes, *panes_h, *nav_it, *bt;
-
-&nbsp;&nbsp;&nbsp;if (!user_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;ad = user_data;
-
-&nbsp;&nbsp;&nbsp;// Create window 
-&nbsp;&nbsp;&nbsp;elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
-&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(&quot;panes&quot;, &quot;Panes tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;if (!win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;ad-&gt;win = win;
-
-&nbsp;&nbsp;&nbsp;// Add elm_conformant 
-&nbsp;&nbsp;&nbsp;conformant = elm_conformant_add(win);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conformant);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(conformant);
-
-&nbsp;&nbsp;&nbsp;// Add naviframe to conformant 
-&nbsp;&nbsp;&nbsp;naviframe = elm_naviframe_add(conformant);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(conformant, naviframe);
-&nbsp;&nbsp;&nbsp;evas_object_show(naviframe);
-
-&nbsp;&nbsp;&nbsp;evas_object_resize(win, 320, 400);
-&nbsp;&nbsp;&nbsp;evas_object_show(win);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
-&nbsp;&nbsp;&nbsp;int ret = 0;
-
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
-
-&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;return ret;
-}
-</pre>
-<p>The code above creates a window entitled &quot;Panes tutorial&quot;, composed of a conformant component that contains a naviframe component. To add a new Panes object, use the <span style="font-family: Courier New,Courier,monospace">_create()</span> function.</p>
-
- <h2 id="create" name="create">Creating a Panes Component</h2>
-
-<p>The elm_panes component adds a draggable bar between two contents. When dragged, this bar resizes the contents&#39; size. To create a new Panes into an Elementary object, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
-<pre class="prettyprint">// Add an elm_panes 
-panes = elm_panes_add(naviframe);
-evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_win_resize_object_add(win, panes);
-evas_object_show(panes);
-
-nav_it = elm_naviframe_item_push (naviframe, &quot;Panes view&quot;, NULL, NULL, panes, NULL);
-</pre>
-<p>Here the Panes is created and added in the naviframe.</p>
-
- <h2 id="config" name="config">Configuring the Panes</h2>
-
-<p>By default, the orientation of the Panes is vertical. To modify the orientation, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
-<pre class="prettyprint">// Add a horizontal elm_panes 
-panes_h = elm_panes_add(naviframe);
-elm_panes_horizontal_set(panes_h, EINA_TRUE);
-</pre>
-<p>The code above creates another Panes object and sets the horizontal orientation. To add content in a panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. Here we add the horizontal Panes (panes_h) to the &quot;left&quot; part of the first created Panes (panes).</p>
-<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, panes_h);
-</pre>
-
-<p>This is how to set a button object to the &quot;right&quot; side of our vertical Panes component.</p>
-<pre class="prettyprint">// Create a button object 
-bt = elm_button_add(naviframe);
-elm_object_text_set(bt, &quot;Right&quot;);
-evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(bt);
-
-// and set it to the &quot;right&quot; part of the vertical Panes 
-elm_object_part_content_set(panes, &quot;right&quot;, bt);
-</pre>
-
-<p>The content of the horizontal Panes is set with two button objects (up and down). When populating a vertically displayed Panes, the left content is placed at the top, and the right content is placed at the bottom.</p>
-<pre class="prettyprint">// Create a &quot;Up&quot; button 
-bt = elm_button_add(naviframe);
-elm_object_text_set(bt, &quot;Up&quot;);
-evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(bt);
-elm_object_part_content_set(panes_h, &quot;left&quot;, bt);
-
-// Create a &quot;Down&quot; button 
-bt = elm_button_add(naviframe);
-elm_object_text_set(bt, &quot;Down&quot;);
-evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
-evas_object_show(bt);
-elm_object_part_content_set(panes_h, &quot;right&quot;, bt);
-</pre>
-
-<p>The elm_panes can be dragged with the mouse but the proportion can also be set with the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions. As an example, this is how to set the left size of both panes to 80%.</p>
-<pre class="prettyprint">// Set the proportion of the panes to 80% 
-elm_panes_content_left_size_set(panes, 0.8);
-elm_panes_content_left_size_set(panes_h, 0.8);
-</pre>
-
-<p>The Panes proportions can also be fixed so that the user is not able to drag them. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_fixed_set()</span> function.</p>
-<pre class="prettyprint">// Fix the Panes proportion 
-elm_panes_fixed_set(panes_h, EINA_TRUE);
-</pre>
-
- <h2 id="signals" name="signals">Handling Signals</h2>
-
-<p>The Panes components emit four different signals, depending on the users&#39; interaction with the draggable bar.</p>
-<ul>
-<li>&quot;press&quot; - The pane is pressed.</li>
-<li>&quot;unpressed&quot; - The pane is released after being pressed.</li>
-<li>&quot;clicked&quot; - The pane is clicked.</li>
-<li>&quot;clicked,double&quot; - The pane is double clicked.</li>
-</ul>
-<p>We add a callback function for each of them.</p>
-
-<h3>&quot;clicked&quot; Signal </h3>
-
-<p>The callback function for the clicked signal prints &quot;Clicked&quot; to standard output.</p>
-<pre class="prettyprint">// clicked callback 
-static void
-_clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Clicked\n&quot;);
-}
-</pre>
-
-<p>This is how to register this callback function to the vertical panes.</p>
-<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;clicked&quot;, _clicked_cb, panes);
-</pre>
-
-<h3>&quot;press&quot; Signal </h3>
-
-<p>The callback function for the &quot;press&quot; signal prints &quot;Pressed&quot; to the standard output.</p>
-<pre class="prettyprint">// press callback 
-static void
-_press_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Pressed\n&quot;);
-}
-</pre>
-
-<p>This is how to register this callback function to the vertical panes.</p>
-<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;press&quot;, _press_cb, panes);
-</pre>
-
-<h3>&quot;unpress&quot; Signal </h3>
-
-<p>For the &quot;unpress&quot; signal, the proportion size of the left content of the Panes component is printed to the standard output. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> function.</p>
-<pre class="prettyprint">// unpress callback 
-static void
-_unpress_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Unpressed, size : %f\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_get(obj));
-}
-</pre>
-<p>This is how to register this callback function to the Panes.</p>
-<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;unpress&quot;, _unpress_cb, panes);
-</pre>
-
-<h3>&quot;clicked,double&quot; Signal </h3>
-
-<p>Hide the left part of the Panes component on the &quot;clicked,double&quot; signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> functions, and a variable to store the value of the current proportion.</p>
-
-<pre class="prettyprint">// double clicked callback 
-static void
-_clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;static double size = 0.0;
-&nbsp;&nbsp;&nbsp;double tmp_size = 0.0;
-&nbsp;&nbsp;&nbsp;tmp_size = elm_panes_content_left_size_get(obj);
-&nbsp;&nbsp;&nbsp;if (tmp_size &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, 0.0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Double clicked, hidden.\n&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &quot;Double clicked, restoring size.\n&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;size = tmp_size;
-}
-</pre>
-
-<p>This is how to register this callback function to the Panes.</p>
-<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;clicked,double&quot;, _clicked_double_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;panes);
-</pre>
-
-<p class="figure">Figure: Panes tutorial in action</p> 
-<p align="center"><img alt="Panes tutorial in action" src="../../images/pane_tuto.png" /></p>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/popup_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/popup_tutorial_wn.htm
deleted file mode 100644 (file)
index d3a2ac9..0000000
--- a/org.tizen.tutorials/html/native/ui/popup_tutorial_wn.htm
+++ /dev/null
@@ -1,254 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Popup: Using Popups</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Initializing the Popup Application</a></li>
-                       <li><a href="#style">Using Popup Styles</a></li>
-                       <li><a href="#event">Managing Popup Events</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#popup">Popup Guide for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Popup.html">Popup API for Wearable Native</a></li>               
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Popup: Using Popups</h1>
-
-  
-<p>This tutorial teaches the basics of the popup component interactions.</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in wearable applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Popup API basics by learning about:</p>
-       <ul>
-               <li><a href="#init">Initializing the Popup Application</a>
-               <p>Create a base application where popups can be used.</p></li>
-               <li><a href="#style">Using Popup Styles</a>
-               <p>Create various popup styles to customize the your popup.</p></li>
-               <li><a href="#event">Managing Popup Events</a>
-               <p>Handle various popup events.</p></li>
-       </ul>
-
-<h2 id="init" name="init">Initializing the Popup Application</h2>
-       
-<p>This use case creates an application with a window entitled &quot;Popup Basic Tutorial&quot;. The window consists of a conformant component, and a popup is placed inside the conformant.</p>
-       
-<p>To create a typical elementary application:</p>     
-       
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Popup Basic Tutorial&quot;);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Conformant
-&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;create_popup(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-
-static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char **argv)
-{
-&nbsp;&nbsp;&nbsp;struct app_data ad = {0,};
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
-}</pre>        
-       
- <h2 id="style" name="style">Using Popup Styles</h2>
-
-<p>To create popups using various styles:</p>
-
-<ul><li>Create a basic text-only popup:
-
-<pre class="prettyprint">
-Evas_Object *popup;
-struct appdata *ad;
-ad = (struct appdata *) data;
-
-popup = elm_popup_add(ad-&gt;win_main);
-evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-elm_object_text_set(popup, &quot;This has only texts&quot;);
-evas_object_show(popup);
-</pre></li>
-
-<li>Create a popup with a title and text. The <span style="font-family: Courier New,Courier,monospace">title,text</span> attribute is the title area text part that defines the title label.
-<pre class="prettyprint">
-Evas_Object *popup;
-struct appdata *ad;
-ad = (struct appdata *) data;
-
-popup = elm_popup_add(ad-&gt;win_main);
-evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
-elm_object_text_set(popup,&quot;This Popup has title area and text&quot;);
-eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-evas_object_show(popup);
-</pre></li>
-
-<li>Create a popup with a title, text, and 2 buttons:
-<pre class="prettyprint">
-Evas_Object *popup;
-Evas_Object *btn;
-struct appdata *ad = (struct appdata *) data;
-
-popup = elm_popup_add(ad-&gt;win_main);
-evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
-eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-elm_object_text_set(popup, &quot;This is title text 2button popup&quot;);
-
-btn = elm_button_add(popup);
-elm_object_style_set(btn, &quot;popup&quot;);
-evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(btn, &quot;Cancel&quot;);
-elm_object_part_content_set(popup, &quot;button1&quot;, btn);
-evas_object_smart_callback_add(btn, &quot;clicked&quot;, _response_cb, popup);
-
-btn = elm_button_add(popup);
-elm_object_style_set(btn, &quot;popup&quot;);
-evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(btn, &quot;OK&quot;);
-elm_object_part_content_set(popup, &quot;button2&quot;, btn);
-evas_object_smart_callback_add(btn, &quot;clicked&quot;, _response_cb, popup);
-
-evas_object_show(popup);
-</pre></li>
-
-<li>Create a toast popup:
-<pre class="prettyprint">
-Evas_Object *popup;
-struct appdata *ad = (struct appdata *) data;
-
-popup = elm_popup_add(ad-&gt;win_main);
-elm_object_style_set(popup, &quot;toast&quot;);
-elm_popup_orient_set(popup, ELM_POPUP_ORIENT_BOTTOM);
-evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
-eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-elm_object_part_text_set(popup,&quot;elm.text&quot;, &quot;Saving Contacts to sim&quot;);
-
-evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, _block_clicked_cb, NULL);
-elm_popup_timeout_set(popup, 2.0);
-evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, NULL);
-
-evas_object_show(popup);
-</pre></li>
-</ul>
-
- <h2 id="event" name="event">Managing Popup Events</h2>
-<p>The Elementary popups respond to user interactions with several events.</p>
-<p>To manage popup events:</p>
-
-<ul> 
-<li>Handle timeout events:
-<p>The &quot;timeout&quot; event is triggered whenever a popup is closed as a result of timeout.</p>
-<pre class="prettyprint">
-static void _timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;evas_object_del(obj);
-}
-elm_popup_timeout_set(popup, 3.0);
-evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, NULL);
-</pre></li>
-
-<li>Handle the <span style="font-family: Courier New,Courier,monospace">block,clicked</span> events:
-<p>The &quot;block,clicked&quot; event is triggered whenever the user taps on a blocked event area.</p>
-<pre class="prettyprint">
-static void _block_clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;evas_object_del(obj);
-}
-evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, _block_clicked_cb, NULL);
-</pre></li>
-
-</ul>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm
deleted file mode 100644 (file)
index cdae081..0000000
--- a/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm
+++ /dev/null
@@ -1,230 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Transit: Implementing Elementary Transit Effects</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#initial">Initializing the Application Layout</a></li>
-                       <li><a href="#rotation">Implementing the Rotation Effect</a></li>
-                       <li><a href="#zoom">Implementing the Zoom Effect</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#elm_transit">Elementary Animations Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Transit: Implementing Elementary Transit Effects</h1>
-
-<p>This tutorial demonstrates how you can implement a variety of EFL animation effects using the APIs available in the EFL library.</p>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#initial">Initializing the Application Layout</a>
-               <p>Initialize the application layout for use.</p></li>
-               <li><a href="#rotation">Implementing the Rotation Effect</a>
-               <p>Implement the rotation effect to the UI layout.</p></li>
-               <li><a href="#zoom">Implementing the Zoom Effect</a>
-               <p>Implement the zooming effect to the UI layout.</p></li>
-       </ul>   
-
-
- <h2 id="initial" name="initial">Initializing the Application Layout</h2>
-
-<p>The application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> for view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
-<p>The transit is designed to apply various animated transition effects to the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. The following transition effects are supported in the Tizen native applications:</p>
-<ul>
-<li>Blend</li>
-<li>Color</li>
-<li>Fade</li>
-<li>Flip</li>
-<li>Rotation</li>
-<li>Transition</li>
-<li>Wipe</li>
-<li>Zoom</li>
-</ul>
-
-<p>The application layout is created by the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function. First, a window is created and the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component is added to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component, which acts as a view manager for the window and provides the window title functionality.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Conformant
-&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = create_main_view(ad);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
-
-&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main content. It consists of a naviframe containing a list. This function returns a list of naviframe object pointers for the content set.</p>
-<pre class="prettyprint">
-static Evas_Object*
-create_main_view(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
-&nbsp;&nbsp;&nbsp;Evas_Object *navi, *list;
-
-&nbsp;&nbsp;&nbsp;navi = elm_naviframe_add(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;list = elm_list_add(navi);
-&nbsp;&nbsp;&nbsp;elm_list_mode_set(list, ELM_LIST_COMPRESS);
-
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Blend&quot;, NULL, NULL, blend_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Color&quot;, NULL, NULL, color_cb, navi
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Fade&quot;, NULL, NULL, fade_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Flip&quot;, NULL, NULL, flip_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Rotation&quot;, NULL, NULL, rotation_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;ResizableFlip&quot;, NULL, NULL, resizable_flip_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Translation&quot;, NULL, NULL, translation_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Wipe&quot;, NULL, NULL, wipe_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Zoom&quot;, NULL, NULL, zoom_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Custom&quot;, NULL, NULL, custom_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_go(list);
-
-&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(navi, &quot;Transit&quot;, NULL, NULL, list, NULL);
-
-&nbsp;&nbsp;&nbsp;return navi;
-}
-</pre>
-
-<p>This document describes only the rotation and zoom implementations. For more information about other effects, see the <span style="font-family: Courier New,Courier,monospace">transit.c</span> file and the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> document. The following figure illustrates the rotation and zoom effects.</p>
-
-<p class="figure">Figure: Rotation and zoom</p>
-<p align="center"><img alt="Rotation and zoom" src="../../images/transit_rotation_zoom.png" /></p> 
-
- <h2 id="rotation" name="rotation">Implementing the Rotation Effect</h2>
-
-<p>If the list item named by rotation includes the touch event, the callback function for this event is called.</p>
-<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
-<p>To implement the rotation effect:</p>
-<ol>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> object with the <span style="font-family: Courier New,Courier,monospace">elm_transit_add()</span> function to add the transit effect.</li>
-<li>Set the transit rotation amount and duration.</li>
-<li>To start the transit animation, use the <span style="font-family: Courier New,Courier,monospace">elm_transit_go()</span> function.</li>
-</ol>
-<pre class="prettyprint">
-static void
-rotation_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
-&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
-
-&nbsp;&nbsp;&nbsp;// 360 degree rotation effect in the clock-wise direction
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(transit, 0, 360);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 1);
-&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit, transit_del_cb, NULL);
-&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
-}
-</pre>
-
- <h2 id="zoom" name="zoom">Implementing the Zoom Effect</h2>
-
-<p>If the list item named by zoom includes the touch event, the callback function for this event is called.</p>
-<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
-<p>There are 2 transit functions: one is for the zoom effect and the other is for returning to the original effect:</p>
-<ol>
-<li>After adding the transit object, add an <span style="font-family: Courier New,Courier,monospace">evas_object</span> to get the effect.</li>
-<li>Set the zoom from the original size (1.0) to 0.4 times the original size, and set the duration.</li>
-<li>Similarly, set the zoom size (0.4) back to the original size (1.0), and set the duration.</li>
-<li>Set both of effects to be applied in sequence.</li>
-</ol>
-<pre class="prettyprint">
-static void
-zoom_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
-&nbsp;&nbsp;&nbsp;// Zoom out to scale 0.6
-&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit, 1.0, 0.4);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 0.5);
-
-&nbsp;&nbsp;&nbsp;// Zoom in to the original size
-&nbsp;&nbsp;&nbsp;Elm_Transit *transit2 = elm_transit_add();
-&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit2, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit2, layout);
-&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
-&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit2, 0.5);
-&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit2, transit_del_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;elm_transit_chain_transit_add(transit, transit2);
-&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
-}
-</pre>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm
deleted file mode 100644 (file)
index 94f4f50..0000000
--- a/org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>UI Components: Managing UI Elements</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/ui_component_mn.htm">UI Components Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li> 
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>UI Components: Managing UI Elements</h1>
-
-       <p>The UI component tutorials demonstrate how to manage user interface-related features in Tizen native applications:</p> 
-
-               <ul> 
-                   <li><a href="basic_tutorial_mn.htm">Basic: Using  Basic Interactions</a> <p>Demonstrates how you can implement an application with basic UI component interactions.</p></li>
-                       <li><a href="form_tutorial_mn.htm">Form: Creating the Basic Application and Layout</a> <p>Demonstrates how you can create a basic application that provides a form.</p></li>
-                       <li><a href="naviframe_tutorial_mn.htm">Naviframe: Creating Navigation Using Naviframes</a> <p>Demonstrates how you can use a naviframe container in your application.</p></li> 
-                       <li><a href="genlist_tutorial_mn.htm">Genlist: Managing Large Element Sets</a> <p>Demonstrates how you can use a genlist component to manage large element sets in your application.</p></li>
-                       <li><a href="menu_tutorial_mn.htm">Menu: Adding Menus to the Application</a> <p>Demonstrates how you can create menus for your application.</p></li>    
-                       <li><a href="panes_tutorial_mn.htm">Panes: Using Panes</a> <p>Demonstrates how you can use a panes component in your application.</p></li>
-                       <li><a href="ui_layout_tutorial_mn.htm">UI Layout: Creating a UI Screen Layout</a> <p>Demonstrates how you can compose a UI screen using the layout classes available in the EFL UI component library.</p></li>
-               </ul>
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm
deleted file mode 100644 (file)
index 3b6e88f..0000000
--- a/org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Components: Managing UI Elements</title> 
- </head> 
- <body onload="prettyPrint()" style="overflow: auto;">
-  <div id="container"><div id="contents"><div class="content">
-  <h1>UI Components: Managing UI Elements</h1> 
-
-<p>Click the profile you want:</p>
-<p><a href="ui_component_tutorials_mn.htm"><img alt="Mobile native" src="../../images/mn_division.png"/></a> <a href="ui_component_tutorials_wn.htm"><img alt="Wearable native" src="../../images/wn_division.png"/></a></p> 
-  
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-</div></div></div>
-
-<div id="footer"> 
-<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p> 
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm
deleted file mode 100644 (file)
index 59ba0f7..0000000
--- a/org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>UI Components: Managing UI Elements</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/ui_component_wn.htm">UI Components Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                     
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>UI Components: Managing UI Elements</h1>
-
-       <p>The UI component tutorials demonstrate how to manage user interface-related features in Tizen native applications:</p> 
-       
-  <ul>   
-   <li><a href="button_tutorial_wn.htm">Button: Using Buttons</a> <p>Demonstrates how you can create various button component styles and handle button events.</p></li>
-   <li><a href="datetime_tutorial_wn.htm">Datetime: Using Datetime</a> <p>Demonstrates how you can create UI components that allow the user to select a date or time.</p></li>
-   <li><a href="genlist_tutorial_wn.htm">Genlist: Managing Large Element Sets</a> <p>Demonstrates how you can use a genlist component to manage large element sets in your application.</p></li>
-   <li><a href="popup_tutorial_wn.htm">Popup: Using Popups</a> <p>Demonstrates how you can create various popup component styles and handle popup events.</p></li>
-   <li><a href="circle_components_tutorial_wn.htm">Circle Components: Creating a Circular View</a> <p>Demonstrates how you can create various UI components for a circular screen.</p></li>
-  </ul>                
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_mn.htm b/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_mn.htm
deleted file mode 100644 (file)
index 4ed59e0..0000000
--- a/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_mn.htm
+++ /dev/null
@@ -1,292 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
-       <title>UI Layout: Creating a UI Screen Layout</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-       
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#init">Creating the UI Layout</a></li>
-                       <li><a href="#add_content">Adding Content to the Screen</a></li>
-               </ul>           
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework Guides</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>             
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>UI Layout: Creating a UI Screen Layout</h1>
-
-  
-<p>This tutorial demonstrates how you can compose a UI screen using the layout classes available in the EFL UI component library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).</p>
-
- <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-<h2>Warm-up</h2>
-<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
-       <ul>
-               <li><a href="#init">Creating the UI Layout</a>
-               <p>Create an application layout.</p></li>
-               <li><a href="#add_content">Adding Content to the Screen</a>
-               <p>Add content to UI screens.</p></li>
-       </ul>
-
- <h2 id="init" name="init">Creating the UI Layout</h2>
-
-<p>The sample application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> for the view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span>, <span style="font-family: Courier New,Courier,monospace">elm_box</span>, and <span style="font-family: Courier New,Courier,monospace">elm_grid</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_label</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates the toolbar using the <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function and adds it to naviframe.</p>
-<pre class="prettyprint">
-static void
-create_base_gui(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_wm_desktop_layout_support_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;// Conformant
-&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;// Naviframe
-&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;UiLayout&quot;, NULL, NULL, NULL, &quot;tabbar/icon/notitle&quot;);
-
-&nbsp;&nbsp;&nbsp;// Tabbar
-&nbsp;&nbsp;&nbsp;ad-&gt;tabbar = create_toolbar(ad);
-&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, ad-&gt;tabbar);
-
-&nbsp;&nbsp;&nbsp;// Set the first view
-&nbsp;&nbsp;&nbsp;tabbar_it = elm_toolbar_first_item_get(ad-&gt;tabbar);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
-}
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function creates the toolbar which is then added to the naviframe.</p>
-<pre class="prettyprint">
-static Evas_Object*
-create_toolbar(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *tabbar;
-
-&nbsp;&nbsp;&nbsp;tabbar = elm_toolbar_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;elm_object_style_set(tabbar, &quot;tabbar&quot;);
-&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Box&quot;, tabbar_item_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Grid&quot;, tabbar_item_cb, ad);
-&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Table&quot;, tabbar_item_cb, ad);
-
-&nbsp;&nbsp;&nbsp;return tabbar;
-}
-</pre>
-
-<p>The following figure illustrates the UI Layout.</p>
-
-  <p class="figure">Figure: UI Layout screen</p> 
-  <p align="center"><img alt="UI Layout screen" src="../../images/uilayout_view2.png" /></p> 
-
- <h2 id="add_content" name="add_content">Adding Content to the Screen</h2>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_box_view()</span> function creates the screen using a recursive composition of the box layout.</p> 
-
-<pre class="prettyprint">static Evas_Object*
-create_box_view(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *box, *box1, *box2, *box3;
-
-&nbsp;&nbsp;&nbsp;box = elm_box_add(parent);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(box, 10, 10);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
-
-&nbsp;&nbsp;&nbsp;box1 = elm_box_add(box);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box1, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(box1, 8, 8);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box1, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_show(box1);
-
-&nbsp;&nbsp;&nbsp;box2 = elm_box_add(box);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(box2, 6, 6);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_show(box2);
-
-&nbsp;&nbsp;&nbsp;box3 = elm_box_add(box);
-&nbsp;&nbsp;&nbsp;elm_box_padding_set(box3, 5, 5);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box3, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box3, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;evas_object_show(box3);
-} 
-</pre>
-
-<p>Once the box layout is created, content or another box layout is added to the box. Box implements the size policy during the size calculation.</p> 
-
-<pre class="prettyprint">// Add an item to the box
-Evas_Object *item1 = create_content(box, &quot;Item 1&quot;);
-evas_object_size_hint_min_set(item1, 0, 40);
-elm_box_pack_end(box, item1);
-elm_box_pack_end(box, box1);
-elm_box_pack_end(box, box3);
-elm_box_pack_end(box, create_content(box, &quot;Item 4&quot;));
-
-// Add an item to the box1
-elm_box_pack_end(box1, create_content(box1, &quot;Item 2.1&quot;));
-elm_box_pack_end(box1, box2);
-elm_box_pack_end(box1, create_content(box1, &quot;Item 2.3&quot;));
-
-// Add an item to the box2
-elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.1&quot;));
-elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.2&quot;));
-
-// Add an item to the box3
-elm_box_pack_end(box3, create_content(box3, &quot;Item 3.1&quot;));
-elm_box_pack_end(box3, create_content(box3, &quot;Item 3.2&quot;));
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">create_table_view()</span> function creates the screen by composing table layout with content and grid view.</p>
-
-<pre class="prettyprint">static Evas_Object*
-create_table_view(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *table, *item;
-
-&nbsp;&nbsp;&nbsp;table = elm_table_add(parent);
-&nbsp;&nbsp;&nbsp;elm_table_padding_set(table, 10, 10);
-&nbsp;&nbsp;&nbsp;elm_table_homogeneous_set(table, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(table, EVAS_HINT_FILL, EVAS_HINT_FILL);
-
-&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 1&quot;);
-&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 0, 2, 1);
-
-&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 2&quot;);
-&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 2, 0, 1, 1);
-
-&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 3&quot;);
-&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 1, 3, 1);
-
-&nbsp;&nbsp;&nbsp;// Add a grid view item
-&nbsp;&nbsp;&nbsp;item = create_grid_view(table);
-&nbsp;&nbsp;&nbsp;evas_object_show(item);
-&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 2, 3, 10);
-
-&nbsp;&nbsp;&nbsp;return table;
-}
-</pre>
-
-<p>The table layout can be used for freestyle layouting, and for standard layouts, such as lists and grids. It does not consider the size policy of the child item during size calculation.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">create_grid_view()</span> function composes a screen using the grid layout and also uses box and table layout as a child item to pack inside a grid. It uses free style layouting, and during size evaluation of the child item, it does not take the size policy of the child item into consideration.</p>
-
-<pre class="prettyprint">static Evas_Object*
-create_grid_view(Evas_Object *parent)
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *grid, *item;
-
-&nbsp;&nbsp;&nbsp;grid = elm_grid_add(parent);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
-
-&nbsp;&nbsp;&nbsp;// Red background for the grid
-&nbsp;&nbsp;&nbsp;item = create_bg(grid, 255, 0, 0);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 0, 0, 100, 100);
-
-&nbsp;&nbsp;&nbsp;// Add the item to the grid
-&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item1&quot;);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 1, 1, 98, 98);
-
-&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item2&quot;);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 5, 20, 20);
-
-&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item3&quot;);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 23, 5, 76, 94);
-
-&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item4&quot;);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 27, 20, 70);
-
-&nbsp;&nbsp;&nbsp;// Black background for the box view item
-&nbsp;&nbsp;&nbsp;item = create_bg(grid, 40, 40, 40);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 25, 10, 73, 87);
-
-&nbsp;&nbsp;&nbsp;// Add the box view item to the grid
-&nbsp;&nbsp;&nbsp;item = create_box_view(grid);
-&nbsp;&nbsp;&nbsp;evas_object_show(item);
-&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 26, 11, 71, 85);
-
-&nbsp;&nbsp;&nbsp;return grid;
-}
-</pre>
-
-
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm
index 0687922..e427f65 100644 (file)
--- a/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm
@@ -33,20 +33,12 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>UI Framework: Creating the Application UI</h1>
-       <p>The UI framework tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen native applications:</p> 
+       <p>The UI framework tutorials demonstrate how to create a visual outlook for your application to ensure the best possible user experience:</p> 
   <ul> 
-    <li><a href="efl_tutorial_n.htm">EFL: Using EFL Features for Designing the UI</a> <p>Demonstrates how you can use EFL to create your application UI.</p></li>
-       <li><a  href="evas_tutorial_n.htm">Evas: Creating and Managing Image Objects</a> <p>Demonstrates how you can create and manage image objects.</p></li>  
-       <li><a href="events_effects_tutorials_n.htm">Event and Effect: Using Animations and Effects</a> <p>Demonstrates how you can create and implement a variety of animation effects and use gestures in applications.</p></li>  
-       <li><a href="ui_component_tutorials_n.htm">UI Components: Managing UI Elements</a> <p>Demonstrates how you can manage user interface-related features.</p></li> 
-       <li><a href="efl_extension_tutorial_n.htm">Efl Extension: Creating a Naviframe Window</a> <p>Demonstrates how you can register the EFL Extension Menu and Back key events.</p></li> 
-    <li><a href="font_settings_tutorial_n.htm">Font Setting: Using Various Fonts in the Application</a> <p>Demonstrates how you can modify the fonts and text size of your application, or set your own font.</p></li>         
-    <li><a href="efl_util_tutorial_n.htm">EFL UTIL: Adjusting the Notification Window Level</a> <p>Demonstrates how you can create a notification window and adjust its position.</p></li>
-       <li><a href="efl_optimization_tutorial_n.htm">EFL Optimization: Optimizing Tizen Native Applications</a> <p>Demonstrates how you can optimize your Tizen native application.</p></li>
        <li><a href="eom_tutorial_n.htm">External Output Manager: Using External Output Devices</a> <p>Demonstrates how you can use external output devices.</p></li>         
-        
-        
   </ul>
+
+<p>For more information about implementing the UI for your application using the EFL features, see <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a>.</p>
   
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.tutorials/html/scripts/common.js b/org.tizen.tutorials/html/scripts/common.js
index 60250b6..d46479a 100644 (file)
--- a/org.tizen.tutorials/html/scripts/common.js
+++ b/org.tizen.tutorials/html/scripts/common.js
@@ -1,1752 +1,1752 @@
-$(document).ready(function(){
-       $('#contents table').each(function(){
-               if (!$(this).parent().hasClass('table')) {
-                       $(this).wrap('<div class="table"></div>');
-               }
-       });
-
-       // Lnb Menu Initialize
-       if($('div#contents').find('.lnb').length){
-               if($("ul li.events_news").size() > 0) {
-                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
-               }
-               initLnb();
-               initScript(staticURL + "/js/fixednavbar.js", function(){});
-       }
-
-       //family site
-       if($('div#footer').find('dl#familySlider').length){
-               fn_rollToEx('familySlider', 'sliderBanner', 1, true);
-       }
-
-       // Svn Commit Test
-       
-       // Language Selection
-       if($('div#header').find('.util').length){
-               var $lang = $('div#header').find('.util');
-               $lang.find('a.lang').toggle(function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
-                       },function(){
-                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
-                       });
-
-               $lang.bind('mouseleave',function(){
-                       $(this).find('ul.language').hide();
-                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-               });
-
-               $lang.find('ul.language').children().last().on("keydown", function(e) {
-                       if(e.which == 9 && e.shiftKey) {
-                               return true;
-                       }
-                       
-                       if(e.which == 9) {
-                               e.preventDefault();
-                               $lang.find('ul.language').hide();
-                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
-                               setTimeout(function() {
-                                       $("#searchTop").focus();
-                               }, 1);
-                       }
-               });
-       }
-
-       // Open the Sitemap
-       var $open = $('div#header').find('.bt-open');
-       $open.bind('click',function(){
-               var $self = $(this);
-               var $sitemap = $('div#wrapper').find('div#sitemap');
-               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
-
-               if($sitemap.is(':visible')){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
-
-                       $self.attr('title','open sitemap');
-               }else{
-                       var source = $self.css('background-image').replace('.gif','_.gif');
-                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
-
-                       $self.attr('title','close sitemap');
-               }
-               
-               $self.css('background-image',source);
-               $sitemap.slideToggle('fast');
-               
-               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
-                       var source = $self.css('background-image').replace('_.gif','.gif');
-                       $self.css('background-image',source);
-                       $sitemap.slideToggle('fast');
-               });
-
-       });
-
-       // Search Auto Complete
-       var $search = $('div#header').find('fieldset.search');
-       var $searchList = $search.find('#topAutocomplete>ul');
-
-       if($search.length){
-               $search.find('> input').each(function(){
-                       $(this).bind({
-                               keydown : function(e){
-                       
-                                       if(e.type=='keydown'&& $(this).val().length!=0){
-                                               $search.find('#topAutocomplete').show();
-                                               var hei = $searchList.outerHeight();
-                                               if(hei>400){
-                                                       $searchList.css({'height':'400px','overflow-y':'auto'});
-                                               }
-                                       }
-                                       if(e.keyCode==9){
-                                               $search.unbind('focusout.search');
-                                       }
-                                       if(e.keyCode==40){
-                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
-                                               //window.scrollTo(0,0);
-                                       }
-                               },
-                               focusin : function(e){
-                                       if($(this).val()==='Search'){
-                                               $(this).val('');
-                                       }
-                               },
-                               focusout : function(e){
-                                       if($(this).val().length==0) $(this).val('Search');
-                               }
-                       });
-               });
-
-               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
-               //      if(e.keyCode==40){
-               //              $(this).parent().next().css('border','1px solid red').find('a').focus();
-               //      }
-               //});
-
-               $search.find('#topAutocomplete').bind('mouseleave',function(e){
-                       if($search.find('> input').val().length==0){
-                               $search.find('> input').val('Search');
-                       }
-                       $search.find('#topAutocomplete').hide();
-               });
-
-               $search.find('#topAutocomplete>ul').children().last().focusout(function(){
-                       $search.find('> input').val('Search');
-                       $search.find('#topAutocomplete').hide();
-                       
-                       //$search.bind('focusout.search', function(){
-                       //      $(this).find('> input').val('Search');
-                       //      $(this).find('#topAutocomplete').hide();
-                       //});
-               });
-       }
-});
-
-// 비차단 동적 스크립트 로딩
-function initScript(url, callback){
-       var script = document.createElement("script");
-       script.type = "text/javascript";
-
-       if(script.readyState){ // 인터넷 익스플로러
-               script.onreadystatechange = function(){
-                       if(script.readyState=="loaded" || script.readyState=="complete"){
-                               script.onreadystatechange = null;
-                               callback();
-                       }
-               };
-       }else{  // 다른  브라우저
-               script.onload = function(){
-                       callback();
-               };
-       }
-
-       script.src = url;
-       document.getElementsByTagName("head")[0].appendChild(script);
-}
-
-
-// lnb
-function initLnb(){
-       var sMenu = $('.lnb');
-       var sItem = sMenu.find('>li');
-
-       sItem.each(function(){
-               if($(this).find('a').hasClass('more')){
-                       if($(this).find('ul').is(":visible")) {
-                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); 
-                       } else {
-                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
-                       }
-               }
-       });
-       
-       var setIcoArrText = function(obj) {
-               if(obj.next().is(":visible")) {
-                       obj.text("close submenu");
-               } else {
-                       obj.text("open submenu");
-               }
-       }
-       
-       sItem.find('.ico-arr').on("click", function() {
-               var $that = $(this);
-               var liBox = $that.parent();   
-               var ulBox = $that.next();
-               
-               sItem.not(liBox).not(".on").find("a.more").next().next().hide();
-               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
-               
-               if(liBox.hasClass("on")) {
-                       if(ulBox.is(":visible")) {
-                               ulBox.hide();
-                               $that.addClass("ico-on");
-                       } else {
-                               ulBox.show();
-                               $that.removeClass("ico-on");
-                       }
-                       setIcoArrText($that);
-                       return true;
-               }
-               
-               if(liBox.hasClass("active")) {
-                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");
-                       ulBox.hide();
-               } else {
-                       liBox.addClass("active").find("a").eq(0).addClass("bov");
-                       ulBox.show();
-               }
-               setIcoArrText($that);
-       });
-
-       sItem.hover(function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-               $(this).find("a").eq(0).addClass("bov");
-       },function(){
-               if($(this).hasClass('on')||$(this).hasClass('active')) return false;
-                $(this).find("a").eq(0).removeClass("bov");
-
-       });
-}
-
-//footer rolling banner
-function fn_rollToEx(container,objectId,step,auto){
-
-       // 롤링할 객체를 변수에 담아둔다.
-       var el = $('#'+container).find('#'+objectId);
-       var lastChild;
-       var speed = 3000;
-       var timer = 0;
-       var autoplay = false;
-
-       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.
-       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.
-       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.
-       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수
-       el.data('animating',false);
-       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.
-       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.
-
-       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.
-
-       if(arguments.length==4){
-               el.data('autoStart', auto);
-       }
-
-       if(el.data('autoStart')){
-               if(timer==0){
-                       timer = setInterval(moveNextSlide, speed);
-                       autoplay = true;
-               }
-       }
-
-       el.bind({
-               mouseenter:function(){
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-
-       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
-       el.data('prev').bind({
-               click:function(e){
-                       e.preventDefault();
-                       movePrevSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
-       el.data('next').bind({
-               click:function(e){
-                       e.preventDefault();
-                       moveNextSlide();
-               },
-               mouseenter:function(){
-
-                       $(this).find('img').addClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer!=0 && el.data('autoStart')){
-                               clearInterval(timer);
-                               timer=0;
-                       }
-               },
-               mouseleave:function(){
-
-                       $(this).find('img').removeClass('btnOn');
-
-                       if(!autoplay) return false;
-
-                       if(timer==0 && el.data('autoStart')){
-                               timer = setInterval(moveNextSlide, speed);
-                       }
-               }
-       });
-
-       function movePrevSlide(){
-               if(!el.data('animating')){
-                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
-                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
-                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.
-                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다
-                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.
-               
-                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
-
-                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-    function moveNextSlide(){
-               if(!el.data('animating')){
-                       el.data('animating',true);
-
-                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
-                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
-                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
-                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.
-                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다
-                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.
-
-                               el.data('animating',false);
-                       });
-               }
-               return false;
-       }
-
-}
-
-function fn_slide(options){
-
-       var opts = jQuery.extend({},options);
-
-       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자
-       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자
-       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자
-       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자
-       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값
-       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수
-       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수
-       var auto = false;
-       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
-       var time;
-
-
-       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정
-       effect = opts.effect;
-       auto = opts.auto;
-
-       if(auto){
-               time = setTimeout('slideShow()',3000);
-       }
-
-       slideShow = function(){
-
-               if(current < len-1){
-                       current++;
-               }else{
-                       current=0;
-               }
-
-               controllStatus();
-
-               moveControl('next');
-
-               time = setTimeout('slideShow()',3000);
-       }
-
-       controllStatus = function(){
-               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
-               if(current>0||current<len-1){                           
-                       $prev.show();
-                       $next.show();
-               }
-               if(current==0){
-                       $prev.hide();
-                       $next.show();
-               }
-               if(current>=len-1){
-                       $prev.show();
-                       $next.hide();
-               }
-       }
-
-       moveControl = function(msg){
-               if(opts.bt!=null){
-                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
-                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화
-                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화
-               }
-
-               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                       $obj.children().hide();
-                       $obj.children().eq(current).show();
-               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                       $obj.animate({'left':'-'+size*current},'slow');
-               }
-       }
-
-       $obj.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               }
-       });
-
-       //롤링 버튼 클릭시
-       $bt.bind({
-               mouseenter:function(){
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장
-
-                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
-
-                       controllStatus();
-
-                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
-                               $obj.children().hide();
-                               $obj.children().eq(current).show();
-                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
-                               $obj.animate({'left':'-'+size*current},'slow');
-                       }
-
-                       // 모든 롤링 버튼을 비활성화
-                       $bt.each(function(){
-                               var source = $(this).find('img').attr('src').replace('_.png','.png');
-                                $(this).find('img').attr('src',source);
-                       });
-
-                       // 선택한 롤링버튼을 활성화
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-
-                       return false;
-               }
-       });
-
-       //이전 버튼 클릭시
-       $prev.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 
-                       current--;                                                      //이미지 인덱스값 1씩 감소
-
-                       moveControl('prev');
-
-                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
-
-                       return false;
-               }
-       });
-
-       //다음 버튼 클릭시
-       $next.bind({
-               mouseenter:function(){
-                       var source = $(this).find('img').attr('src').replace('.png','_.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       clearTimeout(time);
-               },
-               mouseleave:function(){
-                       var source = $(this).find('img').attr('src').replace('_.png','.png');
-                       $(this).find('img').attr('src',source);
-                       if(!auto) return false;
-                       time = setTimeout('slideShow()',3000);
-               },
-               click:function(){
-                       current++;                                                      //이미지 인덱스값 1씩 증가
-                       
-                       moveControl('next');
-
-                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
-                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
-
-                       return false;
-               }
-       });
-
-}
-
-// main rolling banner
-function slideMotion1(){
-       var $banner = $('#rolling .motionview'),
-               //$nav = $('#rolling ul.nav'),
-               banner = {prev:null, next:null},
-               size = $banner.children().length;
-               index = 1,
-               speed = 3000,
-               timer = null,
-               auto = true,
-               width = parseInt(100/size),
-               rest = parseInt(100%size);
-
-       var $nav = $('<ul class="nav">').insertAfter($banner);
-
-       $banner.children().each(function(index){
-               index++;
-               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
-               if(index==size){
-                       $nav.children().eq(-1).find('a').css('background-image','none');
-               }
-       });
-
-       if(rest>0){
-               width+=rest;
-               $nav.children().eq(-1).css('width',width+'%');
-       }
-
-       $nav.delegate("li",'click',function(){
-               var idx = $nav.children().index(this);
-               index = idx;
-               banner.prev = $banner.find('a.active');
-               banner.next = $banner.find('a').eq(index);
-
-               clearInterval(timer);
-               auto = false;
-               
-               $nav.trigger('change.banner',banner)
-                       .trigger('change.tab',index);
-
-               return false;
-       });
-
-       $nav.bind('change.banner',function(event, banner){
-               aniMotion();
-       });
-
-       $nav.bind('change.tab',function(event, index){
-               $nav.children().find('a').removeClass('sel');
-               $nav.children().eq(index).find('a').addClass('sel');
-       });
-
-       timer = setInterval(autoMotion, speed);
-
-       function autoMotion(){
-               if(index > size-1) index = 0;
-
-               aniMotion();
-       }
-
-       function aniMotion(){
-               if(auto){
-                       banner.prev = $banner.find('a.active');
-                       banner.next = $banner.find('a').eq(index);
-
-                       $nav.children().find('a').removeClass('sel');
-                       $nav.children().eq(index).find('a').addClass('sel');
-               }
-               banner.prev.addClass('last-active');
-               banner.next.css({'opacity':0.0})
-                       .addClass('active')
-                       .animate({'opacity':1.0}, 1000, function(){
-                               banner.prev.removeClass('active last-active');
-
-                               if(auto){
-                                       index++;
-                               }else{
-                                       index++;
-                                       timer = setInterval(autoMotion, speed*1.5);
-                                       auto = true;
-                               }
-                       });
-       }
-}
-
-// forum list show or hide function
-function toggleFunc(){
-       
-       var defaulNum = [2];
-
-       $('.forum-tit').each(function(){
-               var self = $(this);
-
-               var idx = $('.forum-tit').index(this);
-
-               for(i=0;i<=defaulNum.length;i++){
-                       if(idx==defaulNum[i]){
-                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
-                               self.find('a.toggle').css('background-image',source);
-
-                               self.find('a.toggle').text('Show');
-                               self.addClass('mb35').next().hide();
-                       }
-               }
-
-               self.find('a.toggle').click(function(){
-                       
-                       if(self.next().is(':visible')){
-                               var source = $(this).css('background-image').replace('.gif','_.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Show');
-                               self.addClass('mb35').next().hide();
-                       }else{
-                               var source = $(this).css('background-image').replace('_.gif','.gif');
-                               $(this).css('background-image',source);
-
-                               $(this).text('Hide');
-                               self.removeClass('mb35').next().show();
-                       }
-
-                       return false;
-
-               });
-
-       });
-}
-
-// 파일 업로드
-function fileUpload( width ){
-       //var $img = $('.attach input[type=image]');
-       //var width = $img.attr('width');
-
-       // 2012-08-08 추가 : 파일 input 너비영역 셋팅
-       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
-
-       var $file = $('.attach input.upload').css({
-               "position": "absolute",
-               "top": "0px",
-               "right": "0px",
-               "width": w,
-               "cursor": "pointer",
-               "opacity": "0.0",
-               "height": "23px"
-       });
-       $file.off('change');
-       $file.on('change',function(e){
-               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
-                       return;
-               }
-               var idx = $file.index(this);
-               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
-               var fileErrMsg = {
-                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
-                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
-                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
-                           ,ext_ko : "지원하지 않는 확장자 입니다."
-                           ,ext_zh : "不允许上传具有该扩展名的文件。"
-                           ,ext_en : "File extention not allowed for upload."
-               };
-               var initFileInput = function(obj) {
-                       $(obj).parent().find('input.file').val("");
-                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );
-                       else $(obj).val("");
-               };
-               
-               var filename = $(this).val();
-               
-               //CHK File ext
-               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
-                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
-                                     , "jpg", "png", "zip"];
-               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
-               var findFlag = false;
-               for(var i = 0; i < imgExts.length; i++) {
-                       if(imgExts[i] == fileExt) {
-                               findFlag = true;
-                               break;
-                       }
-               }
-       
-               if(findFlag == false) {
-                       alert( fileErrMsg["ext_" + localeCode] );
-                       initFileInput(this);
-//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
-                       return;
-               }
-               
-               //CHK File Size
-               if(
-                               ($.browser.msie && $.browser.version >= 10.0 ) //msie
-                               || $.browser.mozilla //FF
-                               || $.browser.safari //Chrome
-               )
-               {
-                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;
-                       if( filesize > 200 ) {
-                               alert( fileErrMsg["limit_" + localeCode] );
-                               initFileInput(this);
-                               return;
-                       }
-               }
-               
-               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
-       });
-};
-
-
-// Show or Hide Toggle
-function showToEx(args){
-
-       if(!arguments.length) return false;
-       
-       var bt = $('#'+args.bt);
-       var obj = $('#'+args.obj);
-
-       var source = bt.css('background-image');
-       
-       if(obj.is(':visible')){
-               obj.hide();
-       }
-
-       bt.toggle(function(){
-               var src = source.replace('.gif','_.gif');
-               bt.css('background-image', src);
-               obj.show();
-               
-               return false;
-       },function(){
-               var src = source.replace('_.gif','.gif');
-               bt.css('background-image', src);
-               obj.hide();
-
-               return false;
-       });
-
-}
-
-
-// FAQ 20131016
-function faqToEx(){
-
- var $question = $('#contents').find('.question');
- var $answer = $('#contents').find('.answer');
-
- // All Answer Rows Hide
- $answer.hide().find('.conts').hide();
-
- $question.each(function(){
-  var $self = $(this);
-  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
-  
-  $self.find('a').bind('click',function(){
-   $("#selArea ul").hide();
-   /*
-   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
-
-   $answer.hide().find('.conts').hide();
-   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
-   */
-
-   /* 20120822 hjh modify*/
-   /* if ( this open )?  close : all close, e.target open */
-   var cutTtl  = $(this).parent().children("div").html();
-   var ttl     = $(this).parent().parent().children("td.real_question").html();
-   
-   if($(this).parents('tr').next().find('.answer').is(':visible')){
-    $(this).html(cutTtl);
-    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
-     $answer.hide();
-    });
-   }else{
-    titleInit();
-    $(this).html(ttl);
-    $answer.hide().find('.conts').hide();
-    //$answer.slideUp('normal').find('.conts').hide();
-    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); 
-   }   
-
-   return false;
-  });
- });
-
- $answer.each(function(){
-  var $self = $(this);
-
-  $(this).find('a.bt-close-faq').bind('click',function(){
-   var question_td = $(this).parent().parent().parent().prev().children("td.question");
-   var cutTtl      = question_td.children("div").html();
-   question_td.children("a").html(cutTtl);
-   
-   $self.find('.conts').slideUp('fast',function(){
-    $self.hide();
-   });
-
-   return false;
-  });
- });
- 
- var titleInit = function() {
-  $question.each(function(i) {
-   $(this).find("a").html($(this).find("div").html());
-  });
- }
-}
-
-
-
-/**
- *  쓰기페이지 Tab 영역 컨트롤
- *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
- */
-function setSwitchTab( selector ) {
-       var tabs = $('.tab-list').find("li");
-       var elements = $( selector );
-
-       $( elements ).each( function( i ) {
-               if( i != 0 )
-               {
-                       $(this).hide();
-               }
-       })
-
-       // Control Tabs
-       $( tabs ).each( function( i ) {
-               $( this ).click( function(){
-                       resetClass();
-
-                       $( this ).find( 'a' ).addClass( "sel" );
-                       $( elements[i] ).show();
-
-                       return false;
-               });
-       });
-
-       // Class 리셋
-       function resetClass()
-       {
-               $( tabs ).each( function( i ) {
-                       $( this ).find( 'a' ).removeClass( 'sel' );
-               });
-
-               $( elements ).each( function( i ) {
-                       $( this ).hide();
-               });
-       }
-}
-
-var SET_ATTACH_LIMIT;
-var SET_ATTACH_WIDTH;
-var SET_ATTACH_BTNNAME;
-
-var firstAddAction = function(obj, limit, w, btnName) {
- var bn            = btnName || 'File';
- var fileAttachStr = "<li class='clfix no-first'>";
- fileAttachStr += '<div class="attach">';
- fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
- fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
- fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
- fileAttachStr += '</div>';
- fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
- fileAttachStr += '</li>';
- obj.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    $("a.remove-btn").eq(0).focus();
-   }, 1);
-  }
- });
- 
- obj.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- 
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-}
-
-var firstRemoveAction = function(id) {
- var obj = $("#" + id);
- var compFile    = $("input[type=file]");
- var compFileCnt = compFile.size();
- var ulObj       = compFile.eq(0).parent().parent().parent();
- if(compFileCnt <= 1) {
-  var firstCompFile = compFile.eq(0);
-  firstCompFile.prev().prev().val("");
-  if ($.browser.msie) {
-               $(obj).parent().find('input.file').val("");
-               firstCompFile.replaceWith( firstCompFile.clone(true) );
-       } else {
-               firstCompFile.val("");
-               firstCompFile.prev().prev().val("");
-  }
- } else {
-  obj.parent().remove();
-  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
-  
-  //add-btn event..
-  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
- }
- 
- ulObj
- .find("li")
- .eq(0)
- .removeClass("no-first")
- .find("a.remove-btn")
- .attr("id", id)
- .unbind("click");
- 
- setTimeout(function() {
-  $("#" + id).focus();
- }, 100);
- 
- $("#" + id).on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   var that = $(this);
-   setTimeout(function() {
-    that.prev().focus();
-   }, 1);
-  }
- });
- 
- $("#" + id).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-/** 
- * File 첨부컨트롤
- * @param limit 최대 파일 첨부 갯수
- * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
- */
-function setAttachFile( limit, width, btnName, removeBtnId )
-{
- var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;
- var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
- var inputFile     = $( 'ul.file-att-form input[type=file]' );
- 
- SET_ATTACH_LIMIT = limit;
- SET_ATTACH_WIDTH = w;
- SET_ATTACH_BTNNAME = btnName;
- 
- inputFile.on("keydown", function(e) {
-  var that = $(this);
-  
-  if(e.which == 9 && e.shiftKey) {
-   return true;
-  }
-  
-  if(e.which === 9) {
-   e.preventDefault();
-   setTimeout(function() {
-    that.parent().parent().find("#" + removeBtnId).eq(0).focus();
-   }, 1);
-  }
- });
- 
- inputFile.on("focusin", function(e) {
-  $(this).parent().css("outline", "1px dotted #2d2d2d");
- }).on("focusout", function(e) {
-  $(this).parent().css("outline", "");
- });
- 
- firstAddAction(btnFileAttach, limit, w, btnName);
- 
- /*
- btnFileAttach.on("keydown", function(e) {
-  if(e.which == 9 && e.shiftKey) {
-   e.preventDefault();
-   setTimeout(function() {
-    inputFile.focus();
-   }, 1);
-  }
- });
- 
- btnFileAttach.click( function()
- {
-  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
-  
-  if( $( ul ).find( "li" ).length >= limit )
-  {
-   alert( "Only " + limit + " files are allowed" );
-   return;
-  }
-  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
-  $( ul ).append( fileAttachStr );
-  var removeBtns = $( ul ).find( ".remove-btn" ).last();
-  $( removeBtns ).bind( "click", onBtnFileDetachClick );
-  
-  
-  removeBtns.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.prev().find("input[type=file]").focus();
-    }, 1);
-   }
-  });
-  
-  var addInputFile = $("ul.file-att-form input[type=file]").last(); 
-  
-  addInputFile.on("keydown", function(e) {
-   var that = $(this);
-   if(e.which == 9 && e.shiftKey) {
-    return true;
-   }
-   
-   if(e.which === 9) {
-    e.preventDefault();
-    setTimeout(function() {
-     that.parent().parent().find("a.remove-btn").eq(0).focus();
-    }, 1);
-   }
-  }).on("focusin", function(e) {
-   $(this).parent().css("outline", "1px dotted #2d2d2d");
-  }).on("focusout", function(e) {
-   $(this).parent().css("outline", "");
-  });
-
-  fileUpload( w + 50 );
-  updateFileField();
-  return false;
- });
- 
-
- // File 제거 버튼
- function onBtnFileDetachClick()
- {
-  var that = $(this);
-  $( this ).unbind( "click", onBtnFileDetachClick );
-   var a = that.parent().prev().children("a").eq(0);
-   setTimeout(function() {
-   that.parents(".no-first").remove();
-  }, 1);
-  
-  setTimeout(function() {
-   a.focus();
-  }, 300);
-  return false;
- }
- */
- /**
-  *  2012-08-08 전종호 추가
-  *  파일 Input Text 영역 너비를 잡아주는 메서드
-  */
- function updateFileField()
- {
-  var ul = $( ".file-att-form" );
-  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
- }
-
- updateFileField();
- fileUpload( w + 50 );
- 
- $("#" + removeBtnId).on("click", function(e) {
-  firstRemoveAction($(this).attr("id"));
- });
-}
-
-
-
-/** 
- * [PAGE] device speces list page
- * date : 20120808
- * id : hjh
- */
-function initDevicespecsList (){
-       var isCompareView=false;
-       $("#devicespecs-list > li").each( 
-               function(i){ 
-                       $(".info", this).bind("click", devicespecsListInfoToggle);
-                       $(".xx", this).bind("click", devicespecsListInfoToggle);
-                       
-                       //detail info layer toggle function
-                       function devicespecsListInfoToggle (){
-                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
-                               return false;
-                       }
-       });
-
-
-       /* DEVICE COMPARE 열리는 부분
-       - defualt : close. 
-       - 최초 한번만 열림 
-       - 현재는 compare 버튼에 공통으로 함수 바인딩
-       */
-       function devicespecsCompareOnOff (){
-               if ( isCompareView ) return;
-               var ww = ( isCompareView ) ? "30px":"207px";
-               $("#devicespecs-compare").animate({
-                   height: ww }, 300, "linear", function(){ });
-
-               isCompareView = ( isCompareView ) ? false:true;
-               return false;
-       }
-
-       //compare 버튼 공통으로 클릭 이벤트 걸림 
-       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
-}
-
-/** 
- * [PAGE] device speces view page
- * date : 20120808
- * id : hjh
- */
- function initDevicespecsView (){
-       var isImgView = false;
-       var isView = 0;
-       
-       //thumbnail overevent bind
-       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
-       focusDeviceDetail (1);
-       
-       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.type === "keydown" && e.which == 9) {
-                       setTimeout(function() {
-                               $("#img-viewer-handle a").eq(0).focus();        
-                       }, 1);
-               }
-       });
-       
-       //thumbnail viewarea controll handler bind
-       $("#img-viewer-handle").click(function () {
-               var ww;
-               var src = $("#img-viewer-handle img").attr("src");
-               if ( isImgView ){
-                       ww = "300px";
-                       src = src.replace(".gif", "_.gif");
-                       $("#img-viewer-thumbnail").hide();
-                       $("#device-info").show();
-               }else{
-                       ww = "730px";
-                       src = src.replace("_.gif", ".gif");
-                       $("#img-viewer-thumbnail").show();
-                       $("#device-info").hide();
-                       focusDeviceDetail(1);
-               }
-               
-               $("#img-viewer-handle img").attr("src", src);
-       $("#img-viewer").animate({
-                   width: ww
-                       }, 300, "linear", function(){
-                       if($.browser.msie)
-                               $("#img-inner").css("width", ww);
-               });
-               
-       isImgView = ( isImgView ) ? false:true;
-    });
-
-       //thumbnail overevent function (update date 2012.09.05 kangki)
-       function focusDeviceDetail ( id ) {
-               if ( isView == id ) return;
-
-               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
-               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
-
-               $( "#img-viewer-bic > img").attr("src", imgSrc);
-               isView = (id);          
-       }
-
-       /*toggle devicespecs List*/
-       if($('div#contents').find('.devicespec-tit').length){
-               
-               $('.devicespec-tit').each(function(){
-                       var self = $(this);
-                       $('a', self).bind ("click", fnToggle);
-
-                       function fnToggle(){
-
-                               if ( $(this).parent().parent().next().is(':visible') ){
-                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-                                       self.find('em').text('Show');
-                                       self.next().hide();
-
-                                       return false;
-                               }else{
-                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-                                       self.find('em').text('Hide');
-                                       self.next().show();
-
-                                       return false;
-                               }
-                       }
-                                                       
-               });
-       }
-
-       /*all Show Hide devicespecs List*/
-       if($('div#contents').find('.devicespecs-util').length){
-               var self = $('div#contents').find('.devicespecs-util');
-
-               $('.showA', self).bind ("click", function (){
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( !me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-                                       me.find('em').text('Hide');
-                                       me.next().show();
-                               }
-                       });
-                       return false;
-               })
-               $('.hideA', self).bind ("click", function (){
-                       
-                       $('.devicespec-tit').each(function(){
-
-                               var me = $(this);
-                               if ( me.next().is(':visible') ){
-                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-                                       me.find('em').text('Show');
-                                       me.next().hide();
-                               }
-                                                               
-                       });
-                       return false;
-               })
-       }       
-}
-
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
-function searchInit()
-{
-       var focusTarget = "input";
-
-       $("#searchInput").bind("keydown", checkSearchText);
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-
-       $(".autocomplete").mouseleave(function(){
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".autocomplete").css("visibility", "visible");
-
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-
-                       var hei = $(".autocomplete").find('>ul').outerHeight();
-                       if(hei>400){
-                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
-                       }
-               }
-               else{
-                       $(".autocomplete").css("visibility", "hidden");
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
- */
-
-function setTopScroll(selector) {
-       if ( !selector ) return false;
-       var btn = $( selector );
-       var w = $( window );
-       btn.css( "position", "absolute" );
-
-
-       btn.click( function(){ w.scrollTop( 0 ) } );
-
-       var wheight = w.innerHeight();
-       
-       $(window).resize( function() {
-               wheight = w.innerHeight();
-               redraw();
-       });
-
-       $(window).scroll( function() {
-               redraw();
-       })
-
-       /**
-        *      Top 버튼의 재정렬 메서드
-        */
-       function redraw()
-       {
-               var t = w.scrollTop() + wheight - 289;
-
-               if( t < wheight / 2 && w.scrollTop() == 0 )     {
-                       t = wheight / 2;
-               }
-               
-               btn.clearQueue();
-
-               btn.animate({
-           top: t
-               }, 500, function() {
-           // Animation complete.
-               });
-               //btn.css( "top", t );
-               //console.log( "target : " + t );
-       }
-
-       redraw();
-       /*
-       obj.initTop = position;
-       obj.topLimit = topLimit;
-       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
-
-       obj.style.position = "absolute";
-       obj.top = obj.initTop;
-       // obj.left = obj.initLeft;
-
-       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit
-               obj.getTop = function() {
-                       return window.pageYOffset;
-               }
-       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
-               obj.getTop = function() {
-                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
-               }
-       } else {
-               obj.getTop = function() {
-                       return 0;
-               }
-       }
-
-       if ( self.innerHeight ) {       //WebKit
-               obj.getHeight = function() {
-                       return self.innerHeight;
-               }
-       } else if( document.documentElement.clientHeight ) {
-               obj.getHeight = function() {
-                       return document.documentElement.clientHeight;
-               }
-       } else {
-               obj.getHeight = function() {
-                       return 500;
-               }
-       }
-
-       obj.move = setInterval( function() {
-               if ( obj.initTop > 0 ) {
-                       pos = obj.getTop() + obj.initTop;
-               } else {
-                       pos = obj.getTop() + obj.getHeight() + obj.initTop;
-               }
-
-               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
-               if ( pos < obj.topLimit ) pos = obj.topLimit;
-
-               interval = obj.top - pos;
-               obj.top = obj.top - interval / 3;
-               obj.style.top = obj.top + "px";
-       }, 30 )
-       */
-}
-
-
-//popup
-function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
-function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
-
-//popup 중앙에 띄우기
-function pop_center(){ 
-       var x,y; 
-       if (window.innerHeight) { // IE 외 모든 브라우저 
-               x = (screen.availWidth - self.innerWidth) / 2; 
-               y = (screen.availHeight - self.innerHeight) / 2; 
-       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 
-               x = (screen.availWidth - document.documentElement.clientWidth) / 2; 
-               y = (screen.availHeight - document.documentElement.clientHeight) / 2; 
-       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) 
-               x = (screen.availWidth - document.body.clientWidth) / 2; 
-               y = (screen.availHeight - document.body.clientHeight) / 2; 
-       } 
-       window.moveTo(x,y); 
-}
-
-// Layer Popup Open
-function layer_open(el){
-       var temp = $('#' + el);
-
-       if(!temp.hasClass('sty2')){
-               $('.layer').fadeIn();
-       }
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       if(temp.hasClass('sty2')){
-               temp.fadeIn();
-
-               temp.find('a.cbtn').click(function(e){
-                       temp.fadeOut();
-               });
-               temp.find('a.gbtn').click(function(e){
-                       temp.fadeOut();
-               });
-
-               return false;
-       }
-       // 닫는 버튼 gbtn-c 추가 20130627
-       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
-               $('.layer').fadeOut();
-               return false;
-       });
-}
-
-// background dim - 2013-05-31
-function layer_open2(el){
-       var temp = $('#' + el);
-       $('input').attr('disabled', 'disabled');
-       $('.layerPop').fadeIn();
-       
-
-       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
-       else temp.css('top', '0px');
-       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
-       else temp.css('left', '0px');
-
-       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
-               $('.layerPop').fadeOut();
-               $('input').removeAttr('disabled');
-               return false;
-       });
-}
-
-
-function pop_account(url){
-       window.open(url,'account','width=619,height=591,scrollbars=yes')
-}
-
-function pop_loadDoc(url){
-       window.open(url,'online','width=850,height=600,scrollbars=yes')
-}
-
-/** 
- *  [PAGE] Tags
- *  date : 20120820
- *  author : 전종호
- */
-function initTags()
-{
-       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
-       // 마지막 아이템은 제외
-       var eleArr = $(".tag-list").find("li");
-
-       $( eleArr ).each( function( i ) {
-               if( i < eleArr.length - 1 )
-               {
-                       var target = $(this).find("a")[0];
-                       var content = $( target ).html();
-
-                       $( target ).html( content + "," );
-               }
-       })
-}
-
-$(document).ready(function(){
-       $(".tip_info").css("cursor","pointer");
-       $(".tip_info > img").mouseover(function(){
-               $(".tip_cont").css("display","block");
-       });
-       $(".tip_info > img").mouseout(function(){
-               $(".tip_cont").css("display","none");
-       });
-});
-
-// new layer popup script by ygh 2013.11.14
-
-var isPopup = false ;
-
-function popupLayerView(id){
-
-       var $L = $("#" + id) ;
-       var $D  = $("#" + id + "down") ;
-
-       $T = $("#" + id) ;
-
-       $L.show();
-       isPopup = true ;
-
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-
-       $("#" + id + "agree").focus() ;
-
-       jQuery(":focusable").focusin(function(e){
-               if (isPopup) {
-                       e.stopPropagation() ;
-                       if ($L.find(jQuery(this)).length > 0) {
-                       } else {
-                               jQuery(this).blur() ;
-                               jQuery("#" + id + " :focusable:first").focus() ;
-                       }
-               }
-       }) ;
-
-       $L.find('.close').click(function(){
-               resetPopup(id) ;
-       });
-
-       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
-}
-
-function resetPopup(T) {
-       $("#" + T + "down").hide();
-       $("#" + T + "agree").attr("checked", false) ;
-       isPopup = false ;
-       $("#" + T).hide() ;
-       $("#" + T + "Btn").focus() ;
-}
-
-function getDownload(T, F, I) {
-       if ($("#" + T + "agree").is(':checked')) {
-               commonDownloadLog(F, I) ;
-               resetPopup(T) ;
-       }
-}
-
-function focusable( element, isTabIndexNotNaN ) {
-       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
-       if ( "area" === nodeName ) {
-               map = element.parentNode;
-               mapName = map.name;
-               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
-               img = $( "img[usemap=#" + mapName + "]" )[0];
-               return !!img && visible( img );
-       }
-       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
-                       visible( element ) ;
-}
-
-function visible( element ) {
-       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
-               return $.css( this, "visibility" ) === "hidden";
-       }).length;
-}
-if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
-
-$.extend( $.expr[ ":" ], {
-       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
-       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
-       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
-});
-// new layer popup script by ygh 2013.11.14
-
-// 2013-11-15 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device1').hide();
-       
-       $('#thumb_view_btn').hover(function() {
-               $('.view_device1').show();
-       },function() {
-               $('.view_device1').hide();
-       });
-               
-});
-
-// 2014-04-22 타이젠 썸네일 추가
-$(document).ready(function() {
-       $('.view_device2').hide();
-       
-       $('#thumb_view_btn2').hover(function() {
-               $('.view_device2').show();
-       },function() {
-               $('.view_device2').hide();
-       });
-               
-});
-
-
-function beforePopupLayerView(popId, popId2, popContinue){
-       var $L = $("#" + popId) ;
-       $L.show(100);
-       $('html, body').animate({ scrollTop: $L.offset().top }, 500);
-       $L.find('.close').click(function(){
-               $L.hide();
-       });
-       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
-}
+$(document).ready(function(){\r
+       $('#contents table').each(function(){\r
+               if (!$(this).parent().hasClass('table')) {\r
+                       $(this).wrap('<div class="table"></div>');\r
+               }\r
+       });\r
+\r
+       // Lnb Menu Initialize\r
+       if($('div#contents').find('.lnb').length){\r
+               if($("ul li.events_news").size() > 0) {\r
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");\r
+               }\r
+               initLnb();\r
+               initScript(staticURL + "/js/fixednavbar.js", function(){});\r
+       }\r
+\r
+       //family site\r
+       if($('div#footer').find('dl#familySlider').length){\r
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);\r
+       }\r
+\r
+       // Svn Commit Test\r
+       \r
+       // Language Selection\r
+       if($('div#header').find('.util').length){\r
+               var $lang = $('div#header').find('.util');\r
+               $lang.find('a.lang').toggle(function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();\r
+                       },function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();\r
+                       });\r
+\r
+               $lang.bind('mouseleave',function(){\r
+                       $(this).find('ul.language').hide();\r
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+               });\r
+\r
+               $lang.find('ul.language').children().last().on("keydown", function(e) {\r
+                       if(e.which == 9 && e.shiftKey) {\r
+                               return true;\r
+                       }\r
+                       \r
+                       if(e.which == 9) {\r
+                               e.preventDefault();\r
+                               $lang.find('ul.language').hide();\r
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+                               setTimeout(function() {\r
+                                       $("#searchTop").focus();\r
+                               }, 1);\r
+                       }\r
+               });\r
+       }\r
+\r
+       // Open the Sitemap\r
+       var $open = $('div#header').find('.bt-open');\r
+       $open.bind('click',function(){\r
+               var $self = $(this);\r
+               var $sitemap = $('div#wrapper').find('div#sitemap');\r
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');\r
+\r
+               if($sitemap.is(':visible')){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');\r
+\r
+                       $self.attr('title','open sitemap');\r
+               }else{\r
+                       var source = $self.css('background-image').replace('.gif','_.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');\r
+\r
+                       $self.attr('title','close sitemap');\r
+               }\r
+               \r
+               $self.css('background-image',source);\r
+               $sitemap.slideToggle('fast');\r
+               \r
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       $self.css('background-image',source);\r
+                       $sitemap.slideToggle('fast');\r
+               });\r
+\r
+       });\r
+\r
+       // Search Auto Complete\r
+       var $search = $('div#header').find('fieldset.search');\r
+       var $searchList = $search.find('#topAutocomplete>ul');\r
+\r
+       if($search.length){\r
+               $search.find('> input').each(function(){\r
+                       $(this).bind({\r
+                               keydown : function(e){\r
+                       \r
+                                       if(e.type=='keydown'&& $(this).val().length!=0){\r
+                                               $search.find('#topAutocomplete').show();\r
+                                               var hei = $searchList.outerHeight();\r
+                                               if(hei>400){\r
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});\r
+                                               }\r
+                                       }\r
+                                       if(e.keyCode==9){\r
+                                               $search.unbind('focusout.search');\r
+                                       }\r
+                                       if(e.keyCode==40){\r
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();\r
+                                               //window.scrollTo(0,0);\r
+                                       }\r
+                               },\r
+                               focusin : function(e){\r
+                                       if($(this).val()==='Search'){\r
+                                               $(this).val('');\r
+                                       }\r
+                               },\r
+                               focusout : function(e){\r
+                                       if($(this).val().length==0) $(this).val('Search');\r
+                               }\r
+                       });\r
+               });\r
+\r
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){\r
+               //      if(e.keyCode==40){\r
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();\r
+               //      }\r
+               //});\r
+\r
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){\r
+                       if($search.find('> input').val().length==0){\r
+                               $search.find('> input').val('Search');\r
+                       }\r
+                       $search.find('#topAutocomplete').hide();\r
+               });\r
+\r
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){\r
+                       $search.find('> input').val('Search');\r
+                       $search.find('#topAutocomplete').hide();\r
+                       \r
+                       //$search.bind('focusout.search', function(){\r
+                       //      $(this).find('> input').val('Search');\r
+                       //      $(this).find('#topAutocomplete').hide();\r
+                       //});\r
+               });\r
+       }\r
+});\r
+\r
+// 비차단 동적 스크립트 로딩\r
+function initScript(url, callback){\r
+       var script = document.createElement("script");\r
+       script.type = "text/javascript";\r
+\r
+       if(script.readyState){ // 인터넷 익스플로러\r
+               script.onreadystatechange = function(){\r
+                       if(script.readyState=="loaded" || script.readyState=="complete"){\r
+                               script.onreadystatechange = null;\r
+                               callback();\r
+                       }\r
+               };\r
+       }else{  // 다른  브라우저\r
+               script.onload = function(){\r
+                       callback();\r
+               };\r
+       }\r
+\r
+       script.src = url;\r
+       document.getElementsByTagName("head")[0].appendChild(script);\r
+}\r
+\r
+\r
+// lnb\r
+function initLnb(){\r
+       var sMenu = $('.lnb');\r
+       var sItem = sMenu.find('>li');\r
+\r
+       sItem.each(function(){\r
+               if($(this).find('a').hasClass('more')){\r
+                       if($(this).find('ul').is(":visible")) {\r
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); \r
+                       } else {\r
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));\r
+                       }\r
+               }\r
+       });\r
+       \r
+       var setIcoArrText = function(obj) {\r
+               if(obj.next().is(":visible")) {\r
+                       obj.text("close submenu");\r
+               } else {\r
+                       obj.text("open submenu");\r
+               }\r
+       }\r
+       \r
+       sItem.find('.ico-arr').on("click", function() {\r
+               var $that = $(this);\r
+               var liBox = $that.parent();   \r
+               var ulBox = $that.next();\r
+               \r
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();\r
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");\r
+               \r
+               if(liBox.hasClass("on")) {\r
+                       if(ulBox.is(":visible")) {\r
+                               ulBox.hide();\r
+                               $that.addClass("ico-on");\r
+                       } else {\r
+                               ulBox.show();\r
+                               $that.removeClass("ico-on");\r
+                       }\r
+                       setIcoArrText($that);\r
+                       return true;\r
+               }\r
+               \r
+               if(liBox.hasClass("active")) {\r
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");\r
+                       ulBox.hide();\r
+               } else {\r
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");\r
+                       ulBox.show();\r
+               }\r
+               setIcoArrText($that);\r
+       });\r
+\r
+       sItem.hover(function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+               $(this).find("a").eq(0).addClass("bov");\r
+       },function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+                $(this).find("a").eq(0).removeClass("bov");\r
+\r
+       });\r
+}\r
+\r
+//footer rolling banner\r
+function fn_rollToEx(container,objectId,step,auto){\r
+\r
+       // 롤링할 객체를 변수에 담아둔다.\r
+       var el = $('#'+container).find('#'+objectId);\r
+       var lastChild;\r
+       var speed = 3000;\r
+       var timer = 0;\r
+       var autoplay = false;\r
+\r
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.\r
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수\r
+       el.data('animating',false);\r
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.\r
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.\r
+\r
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.\r
+\r
+       if(arguments.length==4){\r
+               el.data('autoStart', auto);\r
+       }\r
+\r
+       if(el.data('autoStart')){\r
+               if(timer==0){\r
+                       timer = setInterval(moveNextSlide, speed);\r
+                       autoplay = true;\r
+               }\r
+       }\r
+\r
+       el.bind({\r
+               mouseenter:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+\r
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('prev').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       movePrevSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('next').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       moveNextSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       function movePrevSlide(){\r
+               if(!el.data('animating')){\r
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);\r
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.\r
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다\r
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.\r
+               \r
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.\r
+\r
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+    function moveNextSlide(){\r
+               if(!el.data('animating')){\r
+                       el.data('animating',true);\r
+\r
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.\r
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);\r
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.\r
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다\r
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.\r
+\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+}\r
+\r
+function fn_slide(options){\r
+\r
+       var opts = jQuery.extend({},options);\r
+\r
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자\r
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자\r
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자\r
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자\r
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값\r
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수\r
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수\r
+       var auto = false;\r
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수\r
+       var time;\r
+\r
+\r
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정\r
+       effect = opts.effect;\r
+       auto = opts.auto;\r
+\r
+       if(auto){\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       slideShow = function(){\r
+\r
+               if(current < len-1){\r
+                       current++;\r
+               }else{\r
+                       current=0;\r
+               }\r
+\r
+               controllStatus();\r
+\r
+               moveControl('next');\r
+\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       controllStatus = function(){\r
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정\r
+               if(current>0||current<len-1){                           \r
+                       $prev.show();\r
+                       $next.show();\r
+               }\r
+               if(current==0){\r
+                       $prev.hide();\r
+                       $next.show();\r
+               }\r
+               if(current>=len-1){\r
+                       $prev.show();\r
+                       $next.hide();\r
+               }\r
+       }\r
+\r
+       moveControl = function(msg){\r
+               if(opts.bt!=null){\r
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))\r
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화\r
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화\r
+               }\r
+\r
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                       $obj.children().hide();\r
+                       $obj.children().eq(current).show();\r
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                       $obj.animate({'left':'-'+size*current},'slow');\r
+               }\r
+       }\r
+\r
+       $obj.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               }\r
+       });\r
+\r
+       //롤링 버튼 클릭시\r
+       $bt.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장\r
+\r
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정\r
+\r
+                       controllStatus();\r
+\r
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                               $obj.children().hide();\r
+                               $obj.children().eq(current).show();\r
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                               $obj.animate({'left':'-'+size*current},'slow');\r
+                       }\r
+\r
+                       // 모든 롤링 버튼을 비활성화\r
+                       $bt.each(function(){\r
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                                $(this).find('img').attr('src',source);\r
+                       });\r
+\r
+                       // 선택한 롤링버튼을 활성화\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //이전 버튼 클릭시\r
+       $prev.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 \r
+                       current--;                                                      //이미지 인덱스값 1씩 감소\r
+\r
+                       moveControl('prev');\r
+\r
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //다음 버튼 클릭시\r
+       $next.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       current++;                                                      //이미지 인덱스값 1씩 증가\r
+                       \r
+                       moveControl('next');\r
+\r
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화\r
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+}\r
+\r
+// main rolling banner\r
+function slideMotion1(){\r
+       var $banner = $('#rolling .motionview'),\r
+               //$nav = $('#rolling ul.nav'),\r
+               banner = {prev:null, next:null},\r
+               size = $banner.children().length;\r
+               index = 1,\r
+               speed = 3000,\r
+               timer = null,\r
+               auto = true,\r
+               width = parseInt(100/size),\r
+               rest = parseInt(100%size);\r
+\r
+       var $nav = $('<ul class="nav">').insertAfter($banner);\r
+\r
+       $banner.children().each(function(index){\r
+               index++;\r
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);\r
+               if(index==size){\r
+                       $nav.children().eq(-1).find('a').css('background-image','none');\r
+               }\r
+       });\r
+\r
+       if(rest>0){\r
+               width+=rest;\r
+               $nav.children().eq(-1).css('width',width+'%');\r
+       }\r
+\r
+       $nav.delegate("li",'click',function(){\r
+               var idx = $nav.children().index(this);\r
+               index = idx;\r
+               banner.prev = $banner.find('a.active');\r
+               banner.next = $banner.find('a').eq(index);\r
+\r
+               clearInterval(timer);\r
+               auto = false;\r
+               \r
+               $nav.trigger('change.banner',banner)\r
+                       .trigger('change.tab',index);\r
+\r
+               return false;\r
+       });\r
+\r
+       $nav.bind('change.banner',function(event, banner){\r
+               aniMotion();\r
+       });\r
+\r
+       $nav.bind('change.tab',function(event, index){\r
+               $nav.children().find('a').removeClass('sel');\r
+               $nav.children().eq(index).find('a').addClass('sel');\r
+       });\r
+\r
+       timer = setInterval(autoMotion, speed);\r
+\r
+       function autoMotion(){\r
+               if(index > size-1) index = 0;\r
+\r
+               aniMotion();\r
+       }\r
+\r
+       function aniMotion(){\r
+               if(auto){\r
+                       banner.prev = $banner.find('a.active');\r
+                       banner.next = $banner.find('a').eq(index);\r
+\r
+                       $nav.children().find('a').removeClass('sel');\r
+                       $nav.children().eq(index).find('a').addClass('sel');\r
+               }\r
+               banner.prev.addClass('last-active');\r
+               banner.next.css({'opacity':0.0})\r
+                       .addClass('active')\r
+                       .animate({'opacity':1.0}, 1000, function(){\r
+                               banner.prev.removeClass('active last-active');\r
+\r
+                               if(auto){\r
+                                       index++;\r
+                               }else{\r
+                                       index++;\r
+                                       timer = setInterval(autoMotion, speed*1.5);\r
+                                       auto = true;\r
+                               }\r
+                       });\r
+       }\r
+}\r
+\r
+// forum list show or hide function\r
+function toggleFunc(){\r
+       \r
+       var defaulNum = [2];\r
+\r
+       $('.forum-tit').each(function(){\r
+               var self = $(this);\r
+\r
+               var idx = $('.forum-tit').index(this);\r
+\r
+               for(i=0;i<=defaulNum.length;i++){\r
+                       if(idx==defaulNum[i]){\r
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');\r
+                               self.find('a.toggle').css('background-image',source);\r
+\r
+                               self.find('a.toggle').text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }\r
+               }\r
+\r
+               self.find('a.toggle').click(function(){\r
+                       \r
+                       if(self.next().is(':visible')){\r
+                               var source = $(this).css('background-image').replace('.gif','_.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }else{\r
+                               var source = $(this).css('background-image').replace('_.gif','.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Hide');\r
+                               self.removeClass('mb35').next().show();\r
+                       }\r
+\r
+                       return false;\r
+\r
+               });\r
+\r
+       });\r
+}\r
+\r
+// 파일 업로드\r
+function fileUpload( width ){\r
+       //var $img = $('.attach input[type=image]');\r
+       //var width = $img.attr('width');\r
+\r
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅\r
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";\r
+\r
+       var $file = $('.attach input.upload').css({\r
+               "position": "absolute",\r
+               "top": "0px",\r
+               "right": "0px",\r
+               "width": w,\r
+               "cursor": "pointer",\r
+               "opacity": "0.0",\r
+               "height": "23px"\r
+       });\r
+       $file.off('change');\r
+       $file.on('change',function(e){\r
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드\r
+                       return;\r
+               }\r
+               var idx = $file.index(this);\r
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();\r
+               var fileErrMsg = {\r
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"\r
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"\r
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"\r
+                           ,ext_ko : "지원하지 않는 확장자 입니다."\r
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"\r
+                           ,ext_en : "File extention not allowed for upload."\r
+               };\r
+               var initFileInput = function(obj) {\r
+                       $(obj).parent().find('input.file').val("");\r
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );\r
+                       else $(obj).val("");\r
+               };\r
+               \r
+               var filename = $(this).val();\r
+               \r
+               //CHK File ext\r
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"\r
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"\r
+                                     , "jpg", "png", "zip"];\r
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();\r
+               var findFlag = false;\r
+               for(var i = 0; i < imgExts.length; i++) {\r
+                       if(imgExts[i] == fileExt) {\r
+                               findFlag = true;\r
+                               break;\r
+                       }\r
+               }\r
+       \r
+               if(findFlag == false) {\r
+                       alert( fileErrMsg["ext_" + localeCode] );\r
+                       initFileInput(this);\r
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.\r
+                       return;\r
+               }\r
+               \r
+               //CHK File Size\r
+               if(\r
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie\r
+                               || $.browser.mozilla //FF\r
+                               || $.browser.safari //Chrome\r
+               )\r
+               {\r
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;\r
+                       if( filesize > 200 ) {\r
+                               alert( fileErrMsg["limit_" + localeCode] );\r
+                               initFileInput(this);\r
+                               return;\r
+                       }\r
+               }\r
+               \r
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);\r
+       });\r
+};\r
+\r
+\r
+// Show or Hide Toggle\r
+function showToEx(args){\r
+\r
+       if(!arguments.length) return false;\r
+       \r
+       var bt = $('#'+args.bt);\r
+       var obj = $('#'+args.obj);\r
+\r
+       var source = bt.css('background-image');\r
+       \r
+       if(obj.is(':visible')){\r
+               obj.hide();\r
+       }\r
+\r
+       bt.toggle(function(){\r
+               var src = source.replace('.gif','_.gif');\r
+               bt.css('background-image', src);\r
+               obj.show();\r
+               \r
+               return false;\r
+       },function(){\r
+               var src = source.replace('_.gif','.gif');\r
+               bt.css('background-image', src);\r
+               obj.hide();\r
+\r
+               return false;\r
+       });\r
+\r
+}\r
+\r
+\r
+// FAQ 20131016\r
+function faqToEx(){\r
+\r
+ var $question = $('#contents').find('.question');\r
+ var $answer = $('#contents').find('.answer');\r
+\r
+ // All Answer Rows Hide\r
+ $answer.hide().find('.conts').hide();\r
+\r
+ $question.each(function(){\r
+  var $self = $(this);\r
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");\r
+  \r
+  $self.find('a').bind('click',function(){\r
+   $("#selArea ul").hide();\r
+   /*\r
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;\r
+\r
+   $answer.hide().find('.conts').hide();\r
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');\r
+   */\r
+\r
+   /* 20120822 hjh modify*/\r
+   /* if ( this open )?  close : all close, e.target open */\r
+   var cutTtl  = $(this).parent().children("div").html();\r
+   var ttl     = $(this).parent().parent().children("td.real_question").html();\r
+   \r
+   if($(this).parents('tr').next().find('.answer').is(':visible')){\r
+    $(this).html(cutTtl);\r
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){\r
+     $answer.hide();\r
+    });\r
+   }else{\r
+    titleInit();\r
+    $(this).html(ttl);\r
+    $answer.hide().find('.conts').hide();\r
+    //$answer.slideUp('normal').find('.conts').hide();\r
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); \r
+   }   \r
+\r
+   return false;\r
+  });\r
+ });\r
+\r
+ $answer.each(function(){\r
+  var $self = $(this);\r
+\r
+  $(this).find('a.bt-close-faq').bind('click',function(){\r
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");\r
+   var cutTtl      = question_td.children("div").html();\r
+   question_td.children("a").html(cutTtl);\r
+   \r
+   $self.find('.conts').slideUp('fast',function(){\r
+    $self.hide();\r
+   });\r
+\r
+   return false;\r
+  });\r
+ });\r
+ \r
+ var titleInit = function() {\r
+  $question.each(function(i) {\r
+   $(this).find("a").html($(this).find("div").html());\r
+  });\r
+ }\r
+}\r
+\r
+\r
+\r
+/**\r
+ *  쓰기페이지 Tab 영역 컨트롤\r
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'\r
+ */\r
+function setSwitchTab( selector ) {\r
+       var tabs = $('.tab-list').find("li");\r
+       var elements = $( selector );\r
+\r
+       $( elements ).each( function( i ) {\r
+               if( i != 0 )\r
+               {\r
+                       $(this).hide();\r
+               }\r
+       })\r
+\r
+       // Control Tabs\r
+       $( tabs ).each( function( i ) {\r
+               $( this ).click( function(){\r
+                       resetClass();\r
+\r
+                       $( this ).find( 'a' ).addClass( "sel" );\r
+                       $( elements[i] ).show();\r
+\r
+                       return false;\r
+               });\r
+       });\r
+\r
+       // Class 리셋\r
+       function resetClass()\r
+       {\r
+               $( tabs ).each( function( i ) {\r
+                       $( this ).find( 'a' ).removeClass( 'sel' );\r
+               });\r
+\r
+               $( elements ).each( function( i ) {\r
+                       $( this ).hide();\r
+               });\r
+       }\r
+}\r
+\r
+var SET_ATTACH_LIMIT;\r
+var SET_ATTACH_WIDTH;\r
+var SET_ATTACH_BTNNAME;\r
+\r
+var firstAddAction = function(obj, limit, w, btnName) {\r
+ var bn            = btnName || 'File';\r
+ var fileAttachStr = "<li class='clfix no-first'>";\r
+ fileAttachStr += '<div class="attach">';\r
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';\r
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';\r
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';\r
+ fileAttachStr += '</div>';\r
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';\r
+ fileAttachStr += '</li>';\r
+ obj.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    $("a.remove-btn").eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ obj.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ \r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+}\r
+\r
+var firstRemoveAction = function(id) {\r
+ var obj = $("#" + id);\r
+ var compFile    = $("input[type=file]");\r
+ var compFileCnt = compFile.size();\r
+ var ulObj       = compFile.eq(0).parent().parent().parent();\r
+ if(compFileCnt <= 1) {\r
+  var firstCompFile = compFile.eq(0);\r
+  firstCompFile.prev().prev().val("");\r
+  if ($.browser.msie) {\r
+               $(obj).parent().find('input.file').val("");\r
+               firstCompFile.replaceWith( firstCompFile.clone(true) );\r
+       } else {\r
+               firstCompFile.val("");\r
+               firstCompFile.prev().prev().val("");\r
+  }\r
+ } else {\r
+  obj.parent().remove();\r
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");\r
+  \r
+  //add-btn event..\r
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);\r
+ }\r
+ \r
+ ulObj\r
+ .find("li")\r
+ .eq(0)\r
+ .removeClass("no-first")\r
+ .find("a.remove-btn")\r
+ .attr("id", id)\r
+ .unbind("click");\r
+ \r
+ setTimeout(function() {\r
+  $("#" + id).focus();\r
+ }, 100);\r
+ \r
+ $("#" + id).on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   var that = $(this);\r
+   setTimeout(function() {\r
+    that.prev().focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ $("#" + id).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+/** \r
+ * File 첨부컨트롤\r
+ * @param limit 최대 파일 첨부 갯수\r
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가\r
+ */\r
+function setAttachFile( limit, width, btnName, removeBtnId )\r
+{\r
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;\r
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );\r
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );\r
+ \r
+ SET_ATTACH_LIMIT = limit;\r
+ SET_ATTACH_WIDTH = w;\r
+ SET_ATTACH_BTNNAME = btnName;\r
+ \r
+ inputFile.on("keydown", function(e) {\r
+  var that = $(this);\r
+  \r
+  if(e.which == 9 && e.shiftKey) {\r
+   return true;\r
+  }\r
+  \r
+  if(e.which === 9) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ inputFile.on("focusin", function(e) {\r
+  $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+ }).on("focusout", function(e) {\r
+  $(this).parent().css("outline", "");\r
+ });\r
+ \r
+ firstAddAction(btnFileAttach, limit, w, btnName);\r
+ \r
+ /*\r
+ btnFileAttach.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    inputFile.focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ btnFileAttach.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+\r
+ // File 제거 버튼\r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ */\r
+ /**\r
+  *  2012-08-08 전종호 추가\r
+  *  파일 Input Text 영역 너비를 잡아주는 메서드\r
+  */\r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+\r
+ updateFileField();\r
+ fileUpload( w + 50 );\r
+ \r
+ $("#" + removeBtnId).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+\r
+\r
+/** \r
+ * [PAGE] device speces list page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+function initDevicespecsList (){\r
+       var isCompareView=false;\r
+       $("#devicespecs-list > li").each( \r
+               function(i){ \r
+                       $(".info", this).bind("click", devicespecsListInfoToggle);\r
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);\r
+                       \r
+                       //detail info layer toggle function\r
+                       function devicespecsListInfoToggle (){\r
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();\r
+                               return false;\r
+                       }\r
+       });\r
+\r
+\r
+       /* DEVICE COMPARE 열리는 부분\r
+       - defualt : close. \r
+       - 최초 한번만 열림 \r
+       - 현재는 compare 버튼에 공통으로 함수 바인딩\r
+       */\r
+       function devicespecsCompareOnOff (){\r
+               if ( isCompareView ) return;\r
+               var ww = ( isCompareView ) ? "30px":"207px";\r
+               $("#devicespecs-compare").animate({\r
+                   height: ww }, 300, "linear", function(){ });\r
+\r
+               isCompareView = ( isCompareView ) ? false:true;\r
+               return false;\r
+       }\r
+\r
+       //compare 버튼 공통으로 클릭 이벤트 걸림 \r
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });\r
+}\r
+\r
+/** \r
+ * [PAGE] device speces view page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+ function initDevicespecsView (){\r
+       var isImgView = false;\r
+       var isView = 0;\r
+       \r
+       //thumbnail overevent bind\r
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );\r
+       focusDeviceDetail (1);\r
+       \r
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.type === "keydown" && e.which == 9) {\r
+                       setTimeout(function() {\r
+                               $("#img-viewer-handle a").eq(0).focus();        \r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       //thumbnail viewarea controll handler bind\r
+       $("#img-viewer-handle").click(function () {\r
+               var ww;\r
+               var src = $("#img-viewer-handle img").attr("src");\r
+               if ( isImgView ){\r
+                       ww = "300px";\r
+                       src = src.replace(".gif", "_.gif");\r
+                       $("#img-viewer-thumbnail").hide();\r
+                       $("#device-info").show();\r
+               }else{\r
+                       ww = "730px";\r
+                       src = src.replace("_.gif", ".gif");\r
+                       $("#img-viewer-thumbnail").show();\r
+                       $("#device-info").hide();\r
+                       focusDeviceDetail(1);\r
+               }\r
+               \r
+               $("#img-viewer-handle img").attr("src", src);\r
+       $("#img-viewer").animate({\r
+                   width: ww\r
+                       }, 300, "linear", function(){\r
+                       if($.browser.msie)\r
+                               $("#img-inner").css("width", ww);\r
+               });\r
+               \r
+       isImgView = ( isImgView ) ? false:true;\r
+    });\r
+\r
+       //thumbnail overevent function (update date 2012.09.05 kangki)\r
+       function focusDeviceDetail ( id ) {\r
+               if ( isView == id ) return;\r
+\r
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");\r
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');\r
+\r
+               $( "#img-viewer-bic > img").attr("src", imgSrc);\r
+               isView = (id);          \r
+       }\r
+\r
+       /*toggle devicespecs List*/\r
+       if($('div#contents').find('.devicespec-tit').length){\r
+               \r
+               $('.devicespec-tit').each(function(){\r
+                       var self = $(this);\r
+                       $('a', self).bind ("click", fnToggle);\r
+\r
+                       function fnToggle(){\r
+\r
+                               if ( $(this).parent().parent().next().is(':visible') ){\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+                                       self.find('em').text('Show');\r
+                                       self.next().hide();\r
+\r
+                                       return false;\r
+                               }else{\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+                                       self.find('em').text('Hide');\r
+                                       self.next().show();\r
+\r
+                                       return false;\r
+                               }\r
+                       }\r
+                                                       \r
+               });\r
+       }\r
+\r
+       /*all Show Hide devicespecs List*/\r
+       if($('div#contents').find('.devicespecs-util').length){\r
+               var self = $('div#contents').find('.devicespecs-util');\r
+\r
+               $('.showA', self).bind ("click", function (){\r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( !me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+                                       me.find('em').text('Hide');\r
+                                       me.next().show();\r
+                               }\r
+                       });\r
+                       return false;\r
+               })\r
+               $('.hideA', self).bind ("click", function (){\r
+                       \r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+                                       me.find('em').text('Show');\r
+                                       me.next().hide();\r
+                               }\r
+                                                               \r
+                       });\r
+                       return false;\r
+               })\r
+       }       \r
+}\r
+\r
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       $("#searchInput").bind("keydown", checkSearchText);\r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+\r
+       $(".autocomplete").mouseleave(function(){\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".autocomplete").css("visibility", "visible");\r
+\r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+\r
+                       var hei = $(".autocomplete").find('>ul').outerHeight();\r
+                       if(hei>400){\r
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});\r
+                       }\r
+               }\r
+               else{\r
+                       $(".autocomplete").css("visibility", "hidden");\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+ */\r
+\r
+function setTopScroll(selector) {\r
+       if ( !selector ) return false;\r
+       var btn = $( selector );\r
+       var w = $( window );\r
+       btn.css( "position", "absolute" );\r
+\r
+\r
+       btn.click( function(){ w.scrollTop( 0 ) } );\r
+\r
+       var wheight = w.innerHeight();\r
+       \r
+       $(window).resize( function() {\r
+               wheight = w.innerHeight();\r
+               redraw();\r
+       });\r
+\r
+       $(window).scroll( function() {\r
+               redraw();\r
+       })\r
+\r
+       /**\r
+        *      Top 버튼의 재정렬 메서드\r
+        */\r
+       function redraw()\r
+       {\r
+               var t = w.scrollTop() + wheight - 289;\r
+\r
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {\r
+                       t = wheight / 2;\r
+               }\r
+               \r
+               btn.clearQueue();\r
+\r
+               btn.animate({\r
+           top: t\r
+               }, 500, function() {\r
+           // Animation complete.\r
+               });\r
+               //btn.css( "top", t );\r
+               //console.log( "target : " + t );\r
+       }\r
+\r
+       redraw();\r
+       /*\r
+       obj.initTop = position;\r
+       obj.topLimit = topLimit;\r
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;\r
+\r
+       obj.style.position = "absolute";\r
+       obj.top = obj.initTop;\r
+       // obj.left = obj.initLeft;\r
+\r
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit\r
+               obj.getTop = function() {\r
+                       return window.pageYOffset;\r
+               }\r
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {\r
+               obj.getTop = function() {\r
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );\r
+               }\r
+       } else {\r
+               obj.getTop = function() {\r
+                       return 0;\r
+               }\r
+       }\r
+\r
+       if ( self.innerHeight ) {       //WebKit\r
+               obj.getHeight = function() {\r
+                       return self.innerHeight;\r
+               }\r
+       } else if( document.documentElement.clientHeight ) {\r
+               obj.getHeight = function() {\r
+                       return document.documentElement.clientHeight;\r
+               }\r
+       } else {\r
+               obj.getHeight = function() {\r
+                       return 500;\r
+               }\r
+       }\r
+\r
+       obj.move = setInterval( function() {\r
+               if ( obj.initTop > 0 ) {\r
+                       pos = obj.getTop() + obj.initTop;\r
+               } else {\r
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;\r
+               }\r
+\r
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;\r
+               if ( pos < obj.topLimit ) pos = obj.topLimit;\r
+\r
+               interval = obj.top - pos;\r
+               obj.top = obj.top - interval / 3;\r
+               obj.style.top = obj.top + "px";\r
+       }, 30 )\r
+       */\r
+}\r
+\r
+\r
+//popup\r
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)\r
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)\r
+\r
+//popup 중앙에 띄우기\r
+function pop_center(){ \r
+       var x,y; \r
+       if (window.innerHeight) { // IE 외 모든 브라우저 \r
+               x = (screen.availWidth - self.innerWidth) / 2; \r
+               y = (screen.availHeight - self.innerHeight) / 2; \r
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 \r
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; \r
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; \r
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) \r
+               x = (screen.availWidth - document.body.clientWidth) / 2; \r
+               y = (screen.availHeight - document.body.clientHeight) / 2; \r
+       } \r
+       window.moveTo(x,y); \r
+}\r
+\r
+// Layer Popup Open\r
+function layer_open(el){\r
+       var temp = $('#' + el);\r
+\r
+       if(!temp.hasClass('sty2')){\r
+               $('.layer').fadeIn();\r
+       }\r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       if(temp.hasClass('sty2')){\r
+               temp.fadeIn();\r
+\r
+               temp.find('a.cbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+               temp.find('a.gbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+\r
+               return false;\r
+       }\r
+       // 닫는 버튼 gbtn-c 추가 20130627\r
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){\r
+               $('.layer').fadeOut();\r
+               return false;\r
+       });\r
+}\r
+\r
+// background dim - 2013-05-31\r
+function layer_open2(el){\r
+       var temp = $('#' + el);\r
+       $('input').attr('disabled', 'disabled');\r
+       $('.layerPop').fadeIn();\r
+       \r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){\r
+               $('.layerPop').fadeOut();\r
+               $('input').removeAttr('disabled');\r
+               return false;\r
+       });\r
+}\r
+\r
+\r
+function pop_account(url){\r
+       window.open(url,'account','width=619,height=591,scrollbars=yes')\r
+}\r
+\r
+function pop_loadDoc(url){\r
+       window.open(url,'online','width=850,height=600,scrollbars=yes')\r
+}\r
+\r
+/** \r
+ *  [PAGE] Tags\r
+ *  date : 20120820\r
+ *  author : 전종호\r
+ */\r
+function initTags()\r
+{\r
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.\r
+       // 마지막 아이템은 제외\r
+       var eleArr = $(".tag-list").find("li");\r
+\r
+       $( eleArr ).each( function( i ) {\r
+               if( i < eleArr.length - 1 )\r
+               {\r
+                       var target = $(this).find("a")[0];\r
+                       var content = $( target ).html();\r
+\r
+                       $( target ).html( content + "," );\r
+               }\r
+       })\r
+}\r
+\r
+$(document).ready(function(){\r
+       $(".tip_info").css("cursor","pointer");\r
+       $(".tip_info > img").mouseover(function(){\r
+               $(".tip_cont").css("display","block");\r
+       });\r
+       $(".tip_info > img").mouseout(function(){\r
+               $(".tip_cont").css("display","none");\r
+       });\r
+});\r
+\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+var isPopup = false ;\r
+\r
+function popupLayerView(id){\r
+\r
+       var $L = $("#" + id) ;\r
+       var $D  = $("#" + id + "down") ;\r
+\r
+       $T = $("#" + id) ;\r
+\r
+       $L.show();\r
+       isPopup = true ;\r
+\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+\r
+       $("#" + id + "agree").focus() ;\r
+\r
+       jQuery(":focusable").focusin(function(e){\r
+               if (isPopup) {\r
+                       e.stopPropagation() ;\r
+                       if ($L.find(jQuery(this)).length > 0) {\r
+                       } else {\r
+                               jQuery(this).blur() ;\r
+                               jQuery("#" + id + " :focusable:first").focus() ;\r
+                       }\r
+               }\r
+       }) ;\r
+\r
+       $L.find('.close').click(function(){\r
+               resetPopup(id) ;\r
+       });\r
+\r
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });\r
+}\r
+\r
+function resetPopup(T) {\r
+       $("#" + T + "down").hide();\r
+       $("#" + T + "agree").attr("checked", false) ;\r
+       isPopup = false ;\r
+       $("#" + T).hide() ;\r
+       $("#" + T + "Btn").focus() ;\r
+}\r
+\r
+function getDownload(T, F, I) {\r
+       if ($("#" + T + "agree").is(':checked')) {\r
+               commonDownloadLog(F, I) ;\r
+               resetPopup(T) ;\r
+       }\r
+}\r
+\r
+function focusable( element, isTabIndexNotNaN ) {\r
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;\r
+       if ( "area" === nodeName ) {\r
+               map = element.parentNode;\r
+               mapName = map.name;\r
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }\r
+               img = $( "img[usemap=#" + mapName + "]" )[0];\r
+               return !!img && visible( img );\r
+       }\r
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible\r
+                       visible( element ) ;\r
+}\r
+\r
+function visible( element ) {\r
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {\r
+               return $.css( this, "visibility" ) === "hidden";\r
+       }).length;\r
+}\r
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }\r
+\r
+$.extend( $.expr[ ":" ], {\r
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },\r
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },\r
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }\r
+});\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+// 2013-11-15 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device1').hide();\r
+       \r
+       $('#thumb_view_btn').hover(function() {\r
+               $('.view_device1').show();\r
+       },function() {\r
+               $('.view_device1').hide();\r
+       });\r
+               \r
+});\r
+\r
+// 2014-04-22 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device2').hide();\r
+       \r
+       $('#thumb_view_btn2').hover(function() {\r
+               $('.view_device2').show();\r
+       },function() {\r
+               $('.view_device2').hide();\r
+       });\r
+               \r
+});\r
+\r
+\r
+function beforePopupLayerView(popId, popId2, popContinue){\r
+       var $L = $("#" + popId) ;\r
+       $L.show(100);\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+       $L.find('.close').click(function(){\r
+               $L.hide();\r
+       });\r
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });\r
+}\r
diff --git a/org.tizen.tutorials/html/scripts/core.js b/org.tizen.tutorials/html/scripts/core.js
index 68dea4c..31ad7ff 100644 (file)
--- a/org.tizen.tutorials/html/scripts/core.js
+++ b/org.tizen.tutorials/html/scripts/core.js
@@ -1,899 +1,899 @@
-// /////////////////////////////////////////////////////////////////////////////////////////////////
-// # com.samsung.devloper common core javascript #
-// # Create Date : 2012.07.10. 
-// # Create By : kangki
-;(function ($) {
-/**
- * Samsung Developer Common JavaScript
- */
-$.SD = {};
-
-/*
- * Method Common
- */
-$.SD.message = function (msg) { if (msg) alert(msg); };
-$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
-$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
-$.SD.typeTest = function (data, datatype) {
-       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
-       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
-       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
-       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
-       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
-       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
-       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
-
-       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
-};
-
-$.SD.toDate = function (date, seperator) {
-       if (!seperator) seperator = '-';
-
-       date = $.SD.replaceAll(date, seperator, '');
-       date = $.SD.replaceAll(date, '/', '');
-
-       if (date.length !== 8) return null;
-       
-       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
-
-       if (date.valueOf().toString() === 'NaN') return null;
-
-       return date;
-};
-
-$.SD.toDateString = function (date, seperator) {
-       if (!seperator) seperator = '/';
-       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
-       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
-
-       var str, dateString = date.getFullYear();
-
-       str             = "0" + (date.getMonth()+1);
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-       str             = "0" + date.getDate();
-       dateString      = dateString + seperator + str.substring(str.length-2, str.length);
-
-       return dateString;
-};
-
-$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
-$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
-$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
-
-$.SD.insertComma = function(num) {
-       var tnum    = num + "";
-       var tarr    = new Array();
-       var dot     = "";
-       var idxDot  = tnum.indexOf(".");
-       var sign    = "";
-       var tinx    = 0;
-       var fnum    = tnum;
-        
-       
-       if(idxDot > -1) {
-               fnum = tnum.substring(0, idxDot);
-               dot  = tnum.substring(idxDot);
-               tnum = fnum;
-       } 
-       
-       if(tnum.indexOf("-") > -1) {
-               fnum = tnum.substring(1);
-               sign = tnum.substring(0, 1);
-       }
-       
-       for(var inx = fnum.length; inx > 0; ) {
-               tarr[tinx++] = fnum.substring(inx, inx - 3);
-               inx = inx - 3;
-       }
-       
-       return sign + tarr.reverse().join(",") + dot;
-}
-
-/**
- * Method Ajax
- */
-$.SD.ajax = {
-       doAjax : function (json) {
-               var param = {
-                       async : json.async,
-                       type : json.type,
-                       dataType : json.dataType,
-                       cache: json.cache,
-                       timeout : json.timeout,
-                       success : json.success,
-                       error : json.error
-               };
-
-               if (param.dataType === 'jsonp') {
-                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';
-               } else {
-                       param.url = json.url;
-                       param.data = json.data;
-               }
-               $.ajax(param);
-       },
-       
-       get : function (json) {
-               $.SD.ajax.doAjax({ 
-                       url:json.url,
-                       cache:json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'get', 
-                       dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       },
-       
-       post : function (json) {
-               $.SD.ajax.doAjax({ url:json.url,
-                       cache: json.cache != null ? json.cache : false,
-                       async:json.async != null ? json.async : true,
-                       type:'post', dataType:'json',
-                       data:json.data != null ? json.data : {}, 
-                       timeout:10000, success:json.success, 
-                       error: function(){ if(json.error != null)json.error(); }
-               });
-       }
-};
-
-/**
- * SD20 password check
- */
-
-$.SD.isSD20Pwd = function(pwd) {
-       
-       if(/[a-zA-Z]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/[0-9]{1,}/.test(pwd) == false) {
-               return false;
-       }
-       
-       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
-               return false;
-       }
-       
-       return true;
-};
-
-$.SD.popupCenter = function(popObj) {
-       var scrollbars  = "no";
-       var resizeable  = "no";
-       
-       if(popObj.scrollbars) {
-               scrollbars = popObj.scrollbars; 
-       }
-       
-       if(popObj.resizeable) {
-               resizeable = popObj.resizeable;
-       }
-       
-       var width  = screen.width;
-       var height = screen.height;
-
-       var x = ( width / 2 ) - ( popObj.width / 2 );
-       var y = ( height / 2 ) - ( popObj.height / 2 );
-
-       var opt = "left=" + x +
-                 ",top=" + y +
-                 ",width=" + popObj.width +
-                 ",height=" + popObj.height +
-                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
-                 ",scrollbars=" + scrollbars +
-                 ",resizable=" + resizeable;
-       var pop = window.open(popObj.url, popObj.target, opt);
-       if(pop) {
-               pop.focus();
-       }
-}
-
-$.SD.isValidDate = function(val) {
-       if(val.length != 8) {
-               return false;
-       }
-       
-       var yyyy = Number(val.substring(0, 4)); 
-       var mm   = Number(val.substring(4, 6));
-       var dd   = Number(val.substring(6));
-       
-       if( mm < 1 || mm > 12 ) {
-               return false;
-       }
-       
-       var endDay  = 0;
-       
-       if( mm == 2 ) {
-               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
-                       endDay = 29;
-               } else {
-                       endDay = 28;
-               }
-               
-       } else {
-               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
-               endDay = endDays[mm - 1];
-       }
-       
-       if( dd <= 0 || dd > endDay ) {
-               return false;
-       } 
-       
-       return true;
-       
-}
-
-$.SD.boardDownload = function(option, func) {
-       var jsonData = {
-               url: "/board/ajaxDwnldProc.do",
-               async: false,
-               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
-                               //location.href = $(obj).attr("href");
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.commonDownload = function(fileName, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDwnldProc.do",
-               async: false,
-               data: {fileName: fileName, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               location.href = fileFullPath;
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonDownloadLogProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {
-                       if(data.existFileYn == "Y") {
-                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
-                               if(target == 'new'){
-                                       window.open(fileFullPath, '');
-                               }else{
-                                       location.href = fileFullPath;
-                               }
-                               
-                               if(func) {
-                                       func(data);
-                               }       
-                       } else {
-                               alert("File does not exist.");
-                       }
-               }
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
-       var jsonData = {
-               url: "/common/ajaxCommonAllShareClickCountProc.do",
-               async: false,
-               data: {fileFullPath: fileFullPath, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData); 
-}
-
-$.SD.commonClickCount = function(categoryName, categoryId) {
-       var jsonData = {
-               url: "/common/ajaxCommonClickCountProc.do",
-               data: {categoryName: categoryName, categoryId: categoryId},
-               success: function(data) {}
-       }
-       
-       $.SD.ajax.get(jsonData);
-}
-
-$.SD.getByteLen = function(str) {
-       var resultSize = 0;
-       if(str == null){
-               return 0;
-       }
-       for(var i=0; i<str.length; i++){
-         var c = escape(str.charAt(i));
-         if(c.length == 1){
-                 resultSize ++;
-         }     else if(c.indexOf("%u") != -1) {
-                 resultSize += 2;
-         }     else if(c.indexOf("%") != -1) {
-                 resultSize += c.length/3;
-         }
-       }
-       return resultSize;
-}
-
-$.SD.cutByte = function(str, limit) {
-       var tempStr = new String(str);
-       var len = 0;
-       for ( var i = 0; i < str.length; i++) {
-               var c = escape(str.charAt(i));
-               if (c.length == 1)
-                       len++;
-               else if (c.indexOf("%u") != -1)
-                       len += 2;
-               else if (c.indexOf("%") != -1)
-                       len += c.length / 3;
-               if (len > limit) {
-                       tempStr = tempStr.substring(0, i);
-                       break;
-               }
-       }
-       return tempStr;
-}
-
-$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
-
-/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
-
-/** 
- * Method pagination 
- * */
-$.fn.frontPagination = function (pageInfo, func) {
-       var info = {
-                        prev : 1
-                       ,first : 1
-                       ,begin : pageInfo.begin - 0
-                       ,current : pageInfo.current - 0
-                       ,end : pageInfo.end - 0
-                       ,last : pageInfo.last - 0
-                       ,next : 1
-               },
-               target  = this, 
-               page    = $('<span class="page"></span>'),
-               prev    = "", 
-               next    = "", 
-               i               = 0, 
-               n               = 0;
-
-       info.begin       = info.begin < 1 ? 1 : info.begin;
-       info.current = info.current < 1 ? 1 : info.current;
-       info.end         = info.end < 1 ? 1 : info.end;
-       info.last        = info.last < 1 ? 1 : info.last;
-
-       info.prev = info.current - 1;
-       info.next = info.current + 1;
-
-       target.addClass("pageNumber");
-       target.addClass("mt20");
-       target.children().remove();
-
-       if (info.first < info.begin) {
-               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.first);
-               }));
-       }
-
-       if (info.prev >= info.first) {
-               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.prev);
-               }));
-       }
-
-       i = info.begin;
-       n = info.end;
-       for(; i <= n; i++) {
-               if (i === info.current) {
-                       page.append('<strong>'+i+'</strong>');
-               } else {
-                       (function(index){
-                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
-                                       e.preventDefault();
-                                       func(index);
-                               }));
-                       })(i);
-               }
-       }
-
-       target.append(page);
-
-       if (info.next <= info.last) {
-               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.next);
-               }));
-       }
-       
-       if (info.last > info.end) {
-               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
-                       e.preventDefault();
-                       func(info.last);
-               }));
-       }       
-};
-
-/**
- *  Method : popup Show Hide 
- */
-$.fn.popupShow = function(options) {
-       var opts = $.extend({}, $.fn.popupShow.defaults, options);
-       
-       if($("body div#" + opts.maskId).size() == 0) {
-               $("body").append("<div id='" + opts.maskId + "'></div>");
-               $("#" + opts.maskId).css({
-                       "position" : "absolute",
-                       "left"     : "0",
-                       "top"      : "0",
-                       "z-index"  : "9000",
-                       "background-color" : "#000",
-                       "display"  : "none"
-               });
-       }
-       
-       var mask_layer  = $("#" + opts.maskId);
-       var popup_layer = $(this);
-       
-       popup_layer.css("z-index", "9999");
-       
-       var maskHeight = $(document).height();
-       var maskWidth = $(window).width();
-       
-       mask_layer.css({'width':maskWidth,'height':maskHeight});
-       
-       mask_layer.fadeIn(opts.fadeSec);
-       mask_layer.fadeTo(opts.speed, opts.fadeLow);
-       
-       var winH = $(window).height();
-       var winW = $(window).width();
-       
-       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-       
-       popup_layer.fadeIn(opts.fadeSec);
-       
-       var init_num = 0;
-       
-       if(init_num == 0) {
-               mask_layer.click(function() {
-                       $(this).hide();
-                       popup_layer.hide();
-               });
-               
-               
-               $("#" + opts.closeId).click( function(e) {
-                       e.preventDefault();
-                       popup_layer.popupHidden(opts.maskId);
-               });
-               
-               
-               $(window).resize( function() {
-                       var maskHeight = $(document).height();
-                       var maskWidth  = $(window).width();
-                       var winH       = $(window).height();
-                       var winW       = $(window).width();
-                       
-                       mask_layer.css({'width':maskWidth,'height':maskHeight});
-                       
-                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);
-                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);
-               });
-               
-               init_num++;
-       }
-};
-
-$.fn.popupHidden = function(maskId) {
-       var id = "#";
-       
-       if(maskId) {
-               id = id + maskId;
-       } else {
-               id = id + $.fn.popupShow.defaults.maskId; 
-       }
-       
-       $(id).hide();
-       $(this).hide();
-};
-
-
-$.fn.popupShow.defaults = {
-       speed : "slow",
-       fadeLow : 0.8,
-       fadeSec : 100,
-       maskId  : "mask",
-       popupId : "layer-pop",
-       closeId : "layer-pop-close"
-};
-
-/**
- *  Method : validate File Ext
- */
-$.fn.isNotValidateFileExt = function(imgExts) {
-       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
-       var that = this;
-       var target = null;
-
-       that.each(function (i, item) {
-               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
-               if (filePath != "") {
-                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
-                       if (!imgExts[fileExt]) {
-                               target = item;
-                               return false;
-                       }
-               }
-       });
-
-       return target;
-}      
-
-/**
- *  Method : validate SD20 Password
- */
-$.validator.addMethod("isSD20Pwd", function(value, element) {
-       return this.optional(element) 
-              || $.SD.isSD20Pwd(value);
-}, "비밀번호를 다시 입력해 주세요.");
-
-$.SD.alterParent = function(options, event) {
-    var label = $(this).data('label');
-    
-    /*
-    if (event && event.type === 'focusin') {
-      label.hide();
-    } else if (event && event.type === 'focusout') {
-      label.css('opacity', options.placeholderOpacity);
-    }
-    */
-    
-    if (event && event.type !== 'keydown') {
-      toggleLabel(this, label);
-    } else {
-      // Use timeout to catch val() just after the key is pressed
-      // Using keyup is too slow.   
-      (function(input) {
-        setTimeout(function() {
-          toggleLabel(input, label);
-        }, 0);
-      })(this);
-    }
-    
-    if (event && event.type === 'focusin') {
-       label.hide();
-    }
-  };
-  
-  var toggleLabel = function(input, label) {
-    if ($(input).val()) {
-      label.hide();
-    } else {
-      label.show();
-    }
-  };
-
-  $.fn.stickyPlaceholders = function(options) {
-    var defaults = {
-      wrapperClass: 'sticky-placeholder-wrapper',
-      wrapperDisplay: 'block',
-      labelClass: 'sticky-placeholder-label',
-      placeholderAttr: 'placeholder',
-      dataAttr: 'data-sticky-placeholder',
-      placeholderColor: '#000',
-      placeholderOpacity: 0.5,
-      placeholderFocusOpacity: 0.25
-    };
-    options = $.extend(defaults, options);
-
-    return this.each(function() {
-      var input       = $(this),
-          placeholder = input.attr(options.placeholderAttr),
-          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
-          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
-          labelStyle;
-
-      // store a reference to each input's label
-      input.data('label', label);
-
-      // remove the placeholder attribute to avoid conflcits
-      input.removeAttr('placeholder');
-      
-      // If the dataAttr is set and it's not equal to the placeholderAttr
-      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
-        input.attr('data-sticky-placeholder', placeholder);
-      }
-
-      labelStyle = {
-        'color': options.placeholderColor,
-        'cursor': 'text',
-        'font-family': input.css('font-family'),
-        'font-weight': input.css('font-weight'),
-        'font-size': input.css('font-size'),
-        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
-        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
-        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
-        'opacity': options.placeholderOpacity,
-        'padding-left': input.css('padding-left'),
-        'padding-top': input.css('padding-top'),
-        'position': 'absolute',
-        'text-transform': input.css('text-transform'),
-        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
-      };
-      label.css(labelStyle);
-      
-      // hide the placeholder if the input already has a value
-      if (input.val()) {
-        label.hide();
-      }
-
-      $(this).bind('keydown input focusin focusout', function(event) {
-        $.SD.alterParent.call(this, options, event);
-      });
-        
-      // prevent click/dblclick from selecting the label text
-      label.bind('mousedown', function(e) {
-        e.preventDefault();
-      });
-      
-      // call alterParent initially without an event to set up the wrapper elements
-      $.SD.alterParent.call(this, options);
-    });
-  };
- 
-$.SD.setInputFileKeyEvent = function(file_id, after_id) {
-       $("#" + file_id).on("keydown", function(e) {
-               var that = $(this);
-               if(e.which == 9 && e.shiftKey) {
-                       return true;
-               }
-               
-               if(e.which === 9) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + after_id).focus();
-                       }, 1);
-               }
-       });
-       
-       $("#" + after_id).on("keydown", function(e) {
-               if(e.which == 9 && e.shiftKey) {
-                       e.preventDefault();
-                       setTimeout(function() {
-                               $("#" + file_id).focus();
-                       }, 1);
-               }
-       });
-}  
-
-$.SD.closeWP = function() {
-       var Browser = navigator.appName;
-       var indexB = Browser.indexOf('Explorer');
-       if (indexB > 0) {
-           var indexV = navigator.userAgent.indexOf('MSIE') + 5;
-           var Version = navigator.userAgent.substring(indexV, indexV + 1);
-           window.opener.focus();
-           if (Version >= 7) {
-               window.open('', '_self', '');
-               window.close();
-           }
-           else if (Version == 6) {
-               window.opener = null;
-               window.close();
-           }
-           else {
-               window.opener = '';
-               window.close();
-           }
-       }
-       else {
-           window.close();
-       }
-}
-
-$.SD.profileFacebook = function() {
-       location.replace("http://facebook.com/profile.php");
-}
-
-/* ------------------------------ END --------------------------------------- */
-window.$SD = $.SD;
-
-})(jQuery);
-
-
-$(document).ready(function(){
-//document rady Start #########################################
-
-// Top menu action Start
-var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
-var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
-var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
-var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
-var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
-var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
-var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
-var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; 
-var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
-var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
-
-$("#wrapper").on('click', 'a', function(e) {
-        switch($(this).attr('id')) {
-        case 'changeEn': onClickChangeEn(e);  break;
-        case 'changeZh': onClickChangeZh(e); break;
-        case 'changeKo': onClickChangeKo(e); break;
-        case 'signOut': onClickSignOut(e); break;
-        case 'signUp': onClickSignUp(e); break;
-        case 'signIn': onClickSignIn(e); break;
-        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
-        case 'signOff': onClickSignOff(e); break;
-        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
-        case 'deleteAccount' : onClickDeleteAccount(e); break;
-        }
-});
- 
-//Top menu action End
-
-
-$("#sendFacebook, #sendTwitter").click(function(e) {
-       e.preventDefault();
-       var $this = $(this);
-       
-       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
-               var sns = $this.attr("id").substring(4).toLowerCase();
-               switch(sns) {
-               case "facebook" :
-                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
-                       $("div.content img").each(function() {
-                               var that = $(this);
-                               if(that.width() > 200 && that.height() > 200) {
-                                       imgUrl = that.attr("src");
-                                       return false;
-                               }
-                       });
-                       
-                       var data = {
-                               app_id : $("#sd_appId").text(),
-                               link : copyUrl,
-                               picture : imgUrl,
-                               name : $("title").text(),
-                               caption : "developer.samsung.com",
-                               description : $("div.content p").eq(0).text(),
-                               redirectUri : "http://" + location.host + "/board/sns.do"
-                       };
-                       var url = "https://www.facebook.com/dialog/feed?" ;
-                       url += "app_id=" + data.app_id + "&" ;
-                       url += "link=" + data.link + "&" ;
-                       url += "picture=" + data.picture + "&" ;
-                       url += "name=" + encodeURIComponent(data.name) + "&" ;
-                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;
-                       url += "description=" + encodeURIComponent(data.description) + "&" ;
-                       url += "redirect_uri=" + data.redirectUri ;
-                       sendSNS(sns, url, 850, 600);
-                       break;
-               case "twitter" :
-                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
-                       break;
-               }
-       }
-       
-       function sendSNS(sns, url, iWidth, iHeight) {
-               var popObj = { url : url
-                                    , width : iWidth
-                                    , height: iHeight
-                                    , target: sns
-                                    , scrollbars: "yes"
-                                    , resizeable: "yes"};
-       
-               $SD.popupCenter(popObj);
-       }
-})
- 
-//document rady End #########################################
- });
-
-;(function(){
-       window.deviceImageError = function(el) {
-               var noImage = noImage || '/images/common/device_details_noimage.gif';
-               if (el.src === noImage) 
-                       return;
-               el.src = noImage;
-       };
-})();
-
-function commonDownload(fileName, categoryId){
-       if (fileName == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!!!")
-               return;
-       }else{
-               $SD.commonDownload(fileName, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLog(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-function commonDownloadLogTarget(fileFullPath, categoryId, target){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
-               });
-       }
-}
-
-function commonAllShareClickCount(fileFullPath, categoryId){
-       if (fileFullPath == "" || categoryId == ""){
-               alert("필요한 인자값을 확인해주세요!!")
-               return;
-       }else{
-               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
-               });
-       }
-}
-
-/*
-function layer_view(id){
-
-       var $layer = $('#'+id);
-       var $down  = $('.license-layer').find('a#down');
-
-       $layer.show();
-       $layer.find('.close, #down').click(function(){
-               $layer.hide();
-       });
-
-       function countChecked() {
-               $(":checkbox").is(':checked') ? $down.show() : $down.hide()
-       }
-
-       $(":checkbox").click(countChecked);
-}
-*/
+// /////////////////////////////////////////////////////////////////////////////////////////////////\r
+// # com.samsung.devloper common core javascript #\r
+// # Create Date : 2012.07.10. \r
+// # Create By : kangki\r
+;(function ($) {\r
+/**\r
+ * Samsung Developer Common JavaScript\r
+ */\r
+$.SD = {};\r
+\r
+/*\r
+ * Method Common\r
+ */\r
+$.SD.message = function (msg) { if (msg) alert(msg); };\r
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }\r
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };\r
+$.SD.typeTest = function (data, datatype) {\r
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));\r
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));\r
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));\r
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));\r
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));\r
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));\r
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));\r
+\r
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));\r
+};\r
+\r
+$.SD.toDate = function (date, seperator) {\r
+       if (!seperator) seperator = '-';\r
+\r
+       date = $.SD.replaceAll(date, seperator, '');\r
+       date = $.SD.replaceAll(date, '/', '');\r
+\r
+       if (date.length !== 8) return null;\r
+       \r
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));\r
+\r
+       if (date.valueOf().toString() === 'NaN') return null;\r
+\r
+       return date;\r
+};\r
+\r
+$.SD.toDateString = function (date, seperator) {\r
+       if (!seperator) seperator = '/';\r
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);\r
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";\r
+\r
+       var str, dateString = date.getFullYear();\r
+\r
+       str             = "0" + (date.getMonth()+1);\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+       str             = "0" + date.getDate();\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+\r
+       return dateString;\r
+};\r
+\r
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };\r
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };\r
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };\r
+\r
+$.SD.insertComma = function(num) {\r
+       var tnum    = num + "";\r
+       var tarr    = new Array();\r
+       var dot     = "";\r
+       var idxDot  = tnum.indexOf(".");\r
+       var sign    = "";\r
+       var tinx    = 0;\r
+       var fnum    = tnum;\r
+        \r
+       \r
+       if(idxDot > -1) {\r
+               fnum = tnum.substring(0, idxDot);\r
+               dot  = tnum.substring(idxDot);\r
+               tnum = fnum;\r
+       } \r
+       \r
+       if(tnum.indexOf("-") > -1) {\r
+               fnum = tnum.substring(1);\r
+               sign = tnum.substring(0, 1);\r
+       }\r
+       \r
+       for(var inx = fnum.length; inx > 0; ) {\r
+               tarr[tinx++] = fnum.substring(inx, inx - 3);\r
+               inx = inx - 3;\r
+       }\r
+       \r
+       return sign + tarr.reverse().join(",") + dot;\r
+}\r
+\r
+/**\r
+ * Method Ajax\r
+ */\r
+$.SD.ajax = {\r
+       doAjax : function (json) {\r
+               var param = {\r
+                       async : json.async,\r
+                       type : json.type,\r
+                       dataType : json.dataType,\r
+                       cache: json.cache,\r
+                       timeout : json.timeout,\r
+                       success : json.success,\r
+                       error : json.error\r
+               };\r
+\r
+               if (param.dataType === 'jsonp') {\r
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';\r
+               } else {\r
+                       param.url = json.url;\r
+                       param.data = json.data;\r
+               }\r
+               $.ajax(param);\r
+       },\r
+       \r
+       get : function (json) {\r
+               $.SD.ajax.doAjax({ \r
+                       url:json.url,\r
+                       cache:json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'get', \r
+                       dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       },\r
+       \r
+       post : function (json) {\r
+               $.SD.ajax.doAjax({ url:json.url,\r
+                       cache: json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'post', dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       }\r
+};\r
+\r
+/**\r
+ * SD20 password check\r
+ */\r
+\r
+$.SD.isSD20Pwd = function(pwd) {\r
+       \r
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/[0-9]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       return true;\r
+};\r
+\r
+$.SD.popupCenter = function(popObj) {\r
+       var scrollbars  = "no";\r
+       var resizeable  = "no";\r
+       \r
+       if(popObj.scrollbars) {\r
+               scrollbars = popObj.scrollbars; \r
+       }\r
+       \r
+       if(popObj.resizeable) {\r
+               resizeable = popObj.resizeable;\r
+       }\r
+       \r
+       var width  = screen.width;\r
+       var height = screen.height;\r
+\r
+       var x = ( width / 2 ) - ( popObj.width / 2 );\r
+       var y = ( height / 2 ) - ( popObj.height / 2 );\r
+\r
+       var opt = "left=" + x +\r
+                 ",top=" + y +\r
+                 ",width=" + popObj.width +\r
+                 ",height=" + popObj.height +\r
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +\r
+                 ",scrollbars=" + scrollbars +\r
+                 ",resizable=" + resizeable;\r
+       var pop = window.open(popObj.url, popObj.target, opt);\r
+       if(pop) {\r
+               pop.focus();\r
+       }\r
+}\r
+\r
+$.SD.isValidDate = function(val) {\r
+       if(val.length != 8) {\r
+               return false;\r
+       }\r
+       \r
+       var yyyy = Number(val.substring(0, 4)); \r
+       var mm   = Number(val.substring(4, 6));\r
+       var dd   = Number(val.substring(6));\r
+       \r
+       if( mm < 1 || mm > 12 ) {\r
+               return false;\r
+       }\r
+       \r
+       var endDay  = 0;\r
+       \r
+       if( mm == 2 ) {\r
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {\r
+                       endDay = 29;\r
+               } else {\r
+                       endDay = 28;\r
+               }\r
+               \r
+       } else {\r
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);\r
+               endDay = endDays[mm - 1];\r
+       }\r
+       \r
+       if( dd <= 0 || dd > endDay ) {\r
+               return false;\r
+       } \r
+       \r
+       return true;\r
+       \r
+}\r
+\r
+$.SD.boardDownload = function(option, func) {\r
+       var jsonData = {\r
+               url: "/board/ajaxDwnldProc.do",\r
+               async: false,\r
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;\r
+                               //location.href = $(obj).attr("href");\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.commonDownload = function(fileName, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDwnldProc.do",\r
+               async: false,\r
+               data: {fileName: fileName, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               location.href = fileFullPath;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(target == 'new'){\r
+                                       window.open(fileFullPath, '');\r
+                               }else{\r
+                                       location.href = fileFullPath;\r
+                               }\r
+                               \r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonAllShareClickCountProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonClickCount = function(categoryName, categoryId) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonClickCountProc.do",\r
+               data: {categoryName: categoryName, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.getByteLen = function(str) {\r
+       var resultSize = 0;\r
+       if(str == null){\r
+               return 0;\r
+       }\r
+       for(var i=0; i<str.length; i++){\r
+         var c = escape(str.charAt(i));\r
+         if(c.length == 1){\r
+                 resultSize ++;\r
+         }     else if(c.indexOf("%u") != -1) {\r
+                 resultSize += 2;\r
+         }     else if(c.indexOf("%") != -1) {\r
+                 resultSize += c.length/3;\r
+         }\r
+       }\r
+       return resultSize;\r
+}\r
+\r
+$.SD.cutByte = function(str, limit) {\r
+       var tempStr = new String(str);\r
+       var len = 0;\r
+       for ( var i = 0; i < str.length; i++) {\r
+               var c = escape(str.charAt(i));\r
+               if (c.length == 1)\r
+                       len++;\r
+               else if (c.indexOf("%u") != -1)\r
+                       len += 2;\r
+               else if (c.indexOf("%") != -1)\r
+                       len += c.length / 3;\r
+               if (len > limit) {\r
+                       tempStr = tempStr.substring(0, i);\r
+                       break;\r
+               }\r
+       }\r
+       return tempStr;\r
+}\r
+\r
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};\r
+\r
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */\r
+\r
+/** \r
+ * Method pagination \r
+ * */\r
+$.fn.frontPagination = function (pageInfo, func) {\r
+       var info = {\r
+                        prev : 1\r
+                       ,first : 1\r
+                       ,begin : pageInfo.begin - 0\r
+                       ,current : pageInfo.current - 0\r
+                       ,end : pageInfo.end - 0\r
+                       ,last : pageInfo.last - 0\r
+                       ,next : 1\r
+               },\r
+               target  = this, \r
+               page    = $('<span class="page"></span>'),\r
+               prev    = "", \r
+               next    = "", \r
+               i               = 0, \r
+               n               = 0;\r
+\r
+       info.begin       = info.begin < 1 ? 1 : info.begin;\r
+       info.current = info.current < 1 ? 1 : info.current;\r
+       info.end         = info.end < 1 ? 1 : info.end;\r
+       info.last        = info.last < 1 ? 1 : info.last;\r
+\r
+       info.prev = info.current - 1;\r
+       info.next = info.current + 1;\r
+\r
+       target.addClass("pageNumber");\r
+       target.addClass("mt20");\r
+       target.children().remove();\r
+\r
+       if (info.first < info.begin) {\r
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.first);\r
+               }));\r
+       }\r
+\r
+       if (info.prev >= info.first) {\r
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.prev);\r
+               }));\r
+       }\r
+\r
+       i = info.begin;\r
+       n = info.end;\r
+       for(; i <= n; i++) {\r
+               if (i === info.current) {\r
+                       page.append('<strong>'+i+'</strong>');\r
+               } else {\r
+                       (function(index){\r
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){\r
+                                       e.preventDefault();\r
+                                       func(index);\r
+                               }));\r
+                       })(i);\r
+               }\r
+       }\r
+\r
+       target.append(page);\r
+\r
+       if (info.next <= info.last) {\r
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.next);\r
+               }));\r
+       }\r
+       \r
+       if (info.last > info.end) {\r
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.last);\r
+               }));\r
+       }       \r
+};\r
+\r
+/**\r
+ *  Method : popup Show Hide \r
+ */\r
+$.fn.popupShow = function(options) {\r
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);\r
+       \r
+       if($("body div#" + opts.maskId).size() == 0) {\r
+               $("body").append("<div id='" + opts.maskId + "'></div>");\r
+               $("#" + opts.maskId).css({\r
+                       "position" : "absolute",\r
+                       "left"     : "0",\r
+                       "top"      : "0",\r
+                       "z-index"  : "9000",\r
+                       "background-color" : "#000",\r
+                       "display"  : "none"\r
+               });\r
+       }\r
+       \r
+       var mask_layer  = $("#" + opts.maskId);\r
+       var popup_layer = $(this);\r
+       \r
+       popup_layer.css("z-index", "9999");\r
+       \r
+       var maskHeight = $(document).height();\r
+       var maskWidth = $(window).width();\r
+       \r
+       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+       \r
+       mask_layer.fadeIn(opts.fadeSec);\r
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);\r
+       \r
+       var winH = $(window).height();\r
+       var winW = $(window).width();\r
+       \r
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+       \r
+       popup_layer.fadeIn(opts.fadeSec);\r
+       \r
+       var init_num = 0;\r
+       \r
+       if(init_num == 0) {\r
+               mask_layer.click(function() {\r
+                       $(this).hide();\r
+                       popup_layer.hide();\r
+               });\r
+               \r
+               \r
+               $("#" + opts.closeId).click( function(e) {\r
+                       e.preventDefault();\r
+                       popup_layer.popupHidden(opts.maskId);\r
+               });\r
+               \r
+               \r
+               $(window).resize( function() {\r
+                       var maskHeight = $(document).height();\r
+                       var maskWidth  = $(window).width();\r
+                       var winH       = $(window).height();\r
+                       var winW       = $(window).width();\r
+                       \r
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+                       \r
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+               });\r
+               \r
+               init_num++;\r
+       }\r
+};\r
+\r
+$.fn.popupHidden = function(maskId) {\r
+       var id = "#";\r
+       \r
+       if(maskId) {\r
+               id = id + maskId;\r
+       } else {\r
+               id = id + $.fn.popupShow.defaults.maskId; \r
+       }\r
+       \r
+       $(id).hide();\r
+       $(this).hide();\r
+};\r
+\r
+\r
+$.fn.popupShow.defaults = {\r
+       speed : "slow",\r
+       fadeLow : 0.8,\r
+       fadeSec : 100,\r
+       maskId  : "mask",\r
+       popupId : "layer-pop",\r
+       closeId : "layer-pop-close"\r
+};\r
+\r
+/**\r
+ *  Method : validate File Ext\r
+ */\r
+$.fn.isNotValidateFileExt = function(imgExts) {\r
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};\r
+       var that = this;\r
+       var target = null;\r
+\r
+       that.each(function (i, item) {\r
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';\r
+               if (filePath != "") {\r
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();\r
+                       if (!imgExts[fileExt]) {\r
+                               target = item;\r
+                               return false;\r
+                       }\r
+               }\r
+       });\r
+\r
+       return target;\r
+}      \r
+\r
+/**\r
+ *  Method : validate SD20 Password\r
+ */\r
+$.validator.addMethod("isSD20Pwd", function(value, element) {\r
+       return this.optional(element) \r
+              || $.SD.isSD20Pwd(value);\r
+}, "비밀번호를 다시 입력해 주세요.");\r
+\r
+$.SD.alterParent = function(options, event) {\r
+    var label = $(this).data('label');\r
+    \r
+    /*\r
+    if (event && event.type === 'focusin') {\r
+      label.hide();\r
+    } else if (event && event.type === 'focusout') {\r
+      label.css('opacity', options.placeholderOpacity);\r
+    }\r
+    */\r
+    \r
+    if (event && event.type !== 'keydown') {\r
+      toggleLabel(this, label);\r
+    } else {\r
+      // Use timeout to catch val() just after the key is pressed\r
+      // Using keyup is too slow.   \r
+      (function(input) {\r
+        setTimeout(function() {\r
+          toggleLabel(input, label);\r
+        }, 0);\r
+      })(this);\r
+    }\r
+    \r
+    if (event && event.type === 'focusin') {\r
+       label.hide();\r
+    }\r
+  };\r
+  \r
+  var toggleLabel = function(input, label) {\r
+    if ($(input).val()) {\r
+      label.hide();\r
+    } else {\r
+      label.show();\r
+    }\r
+  };\r
+\r
+  $.fn.stickyPlaceholders = function(options) {\r
+    var defaults = {\r
+      wrapperClass: 'sticky-placeholder-wrapper',\r
+      wrapperDisplay: 'block',\r
+      labelClass: 'sticky-placeholder-label',\r
+      placeholderAttr: 'placeholder',\r
+      dataAttr: 'data-sticky-placeholder',\r
+      placeholderColor: '#000',\r
+      placeholderOpacity: 0.5,\r
+      placeholderFocusOpacity: 0.25\r
+    };\r
+    options = $.extend(defaults, options);\r
+\r
+    return this.each(function() {\r
+      var input       = $(this),\r
+          placeholder = input.attr(options.placeholderAttr),\r
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),\r
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),\r
+          labelStyle;\r
+\r
+      // store a reference to each input's label\r
+      input.data('label', label);\r
+\r
+      // remove the placeholder attribute to avoid conflcits\r
+      input.removeAttr('placeholder');\r
+      \r
+      // If the dataAttr is set and it's not equal to the placeholderAttr\r
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {\r
+        input.attr('data-sticky-placeholder', placeholder);\r
+      }\r
+\r
+      labelStyle = {\r
+        'color': options.placeholderColor,\r
+        'cursor': 'text',\r
+        'font-family': input.css('font-family'),\r
+        'font-weight': input.css('font-weight'),\r
+        'font-size': input.css('font-size'),\r
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),\r
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),\r
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671\r
+        'opacity': options.placeholderOpacity,\r
+        'padding-left': input.css('padding-left'),\r
+        'padding-top': input.css('padding-top'),\r
+        'position': 'absolute',\r
+        'text-transform': input.css('text-transform'),\r
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)\r
+      };\r
+      label.css(labelStyle);\r
+      \r
+      // hide the placeholder if the input already has a value\r
+      if (input.val()) {\r
+        label.hide();\r
+      }\r
+\r
+      $(this).bind('keydown input focusin focusout', function(event) {\r
+        $.SD.alterParent.call(this, options, event);\r
+      });\r
+        \r
+      // prevent click/dblclick from selecting the label text\r
+      label.bind('mousedown', function(e) {\r
+        e.preventDefault();\r
+      });\r
+      \r
+      // call alterParent initially without an event to set up the wrapper elements\r
+      $.SD.alterParent.call(this, options);\r
+    });\r
+  };\r
+ \r
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {\r
+       $("#" + file_id).on("keydown", function(e) {\r
+               var that = $(this);\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.which === 9) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + after_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       $("#" + after_id).on("keydown", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + file_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+}  \r
+\r
+$.SD.closeWP = function() {\r
+       var Browser = navigator.appName;\r
+       var indexB = Browser.indexOf('Explorer');\r
+       if (indexB > 0) {\r
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;\r
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);\r
+           window.opener.focus();\r
+           if (Version >= 7) {\r
+               window.open('', '_self', '');\r
+               window.close();\r
+           }\r
+           else if (Version == 6) {\r
+               window.opener = null;\r
+               window.close();\r
+           }\r
+           else {\r
+               window.opener = '';\r
+               window.close();\r
+           }\r
+       }\r
+       else {\r
+           window.close();\r
+       }\r
+}\r
+\r
+$.SD.profileFacebook = function() {\r
+       location.replace("http://facebook.com/profile.php");\r
+}\r
+\r
+/* ------------------------------ END --------------------------------------- */\r
+window.$SD = $.SD;\r
+\r
+})(jQuery);\r
+\r
+\r
+$(document).ready(function(){\r
+//document rady Start #########################################\r
+\r
+// Top menu action Start\r
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };\r
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };\r
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };\r
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };\r
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };\r
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };\r
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };\r
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; \r
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };\r
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };\r
+\r
+$("#wrapper").on('click', 'a', function(e) {\r
+        switch($(this).attr('id')) {\r
+        case 'changeEn': onClickChangeEn(e);  break;\r
+        case 'changeZh': onClickChangeZh(e); break;\r
+        case 'changeKo': onClickChangeKo(e); break;\r
+        case 'signOut': onClickSignOut(e); break;\r
+        case 'signUp': onClickSignUp(e); break;\r
+        case 'signIn': onClickSignIn(e); break;\r
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;\r
+        case 'signOff': onClickSignOff(e); break;\r
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;\r
+        case 'deleteAccount' : onClickDeleteAccount(e); break;\r
+        }\r
+});\r
+ \r
+//Top menu action End\r
+\r
+\r
+$("#sendFacebook, #sendTwitter").click(function(e) {\r
+       e.preventDefault();\r
+       var $this = $(this);\r
+       \r
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {\r
+               var sns = $this.attr("id").substring(4).toLowerCase();\r
+               switch(sns) {\r
+               case "facebook" :\r
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";\r
+                       $("div.content img").each(function() {\r
+                               var that = $(this);\r
+                               if(that.width() > 200 && that.height() > 200) {\r
+                                       imgUrl = that.attr("src");\r
+                                       return false;\r
+                               }\r
+                       });\r
+                       \r
+                       var data = {\r
+                               app_id : $("#sd_appId").text(),\r
+                               link : copyUrl,\r
+                               picture : imgUrl,\r
+                               name : $("title").text(),\r
+                               caption : "developer.samsung.com",\r
+                               description : $("div.content p").eq(0).text(),\r
+                               redirectUri : "http://" + location.host + "/board/sns.do"\r
+                       };\r
+                       var url = "https://www.facebook.com/dialog/feed?" ;\r
+                       url += "app_id=" + data.app_id + "&" ;\r
+                       url += "link=" + data.link + "&" ;\r
+                       url += "picture=" + data.picture + "&" ;\r
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;\r
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;\r
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;\r
+                       url += "redirect_uri=" + data.redirectUri ;\r
+                       sendSNS(sns, url, 850, 600);\r
+                       break;\r
+               case "twitter" :\r
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);\r
+                       break;\r
+               }\r
+       }\r
+       \r
+       function sendSNS(sns, url, iWidth, iHeight) {\r
+               var popObj = { url : url\r
+                                    , width : iWidth\r
+                                    , height: iHeight\r
+                                    , target: sns\r
+                                    , scrollbars: "yes"\r
+                                    , resizeable: "yes"};\r
+       \r
+               $SD.popupCenter(popObj);\r
+       }\r
+})\r
+ \r
+//document rady End #########################################\r
+ });\r
+\r
+;(function(){\r
+       window.deviceImageError = function(el) {\r
+               var noImage = noImage || '/images/common/device_details_noimage.gif';\r
+               if (el.src === noImage) \r
+                       return;\r
+               el.src = noImage;\r
+       };\r
+})();\r
+\r
+function commonDownload(fileName, categoryId){\r
+       if (fileName == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownload(fileName, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLog(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLogTarget(fileFullPath, categoryId, target){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonAllShareClickCount(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+/*\r
+function layer_view(id){\r
+\r
+       var $layer = $('#'+id);\r
+       var $down  = $('.license-layer').find('a#down');\r
+\r
+       $layer.show();\r
+       $layer.find('.close, #down').click(function(){\r
+               $layer.hide();\r
+       });\r
+\r
+       function countChecked() {\r
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()\r
+       }\r
+\r
+       $(":checkbox").click(countChecked);\r
+}\r
+*/\r
diff --git a/org.tizen.tutorials/html/scripts/jquery.util.js b/org.tizen.tutorials/html/scripts/jquery.util.js
index 3fc3ad0..a8516b0 100644 (file)
--- a/org.tizen.tutorials/html/scripts/jquery.util.js
+++ b/org.tizen.tutorials/html/scripts/jquery.util.js
@@ -1,1441 +1,1441 @@
-/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
-(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
-
-
-/*! jQuery v1.7.1 jquery.com | jquery.org/license */
-(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
-f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
-{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
-
-/*
- * Metadata - jQuery plugin for parsing metadata from elements
- *
- * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- *
- * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
- *
- */
-
-/**
- * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
- * in the JSON will become a property of the element itself.
- *
- * There are three supported types of metadata storage:
- *
- *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
- *          
- *   class: Inside the class attribute, wrapped in curly braces: { }
- *   
- *   elem:  Inside a child element (e.g. a script tag). The
- *          name parameter indicates *which* element.
- *          
- * The metadata for an element is loaded the first time the element is accessed via jQuery.
- *
- * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
- * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
- * 
- * @name $.metadata.setType
- *
- * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("class")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from the class attribute
- * 
- * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("attr", "data")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a "data" attribute
- * 
- * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
- * @before $.metadata.setType("elem", "script")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a nested script element
- * 
- * @param String type The encoding type
- * @param String name The name of the attribute to be used to get metadata (optional)
- * @cat Plugins/Metadata
- * @descr Sets the type of encoding to be used when loading metadata for the first time
- * @type undefined
- * @see metadata()
- */
-
-(function($) {
-
-$.extend({
-       metadata : {
-               defaults : {
-                       type: 'class',
-                       name: 'metadata',
-                       cre: /({.*})/,
-                       single: 'metadata'
-               },
-               setType: function( type, name ){
-                       this.defaults.type = type;
-                       this.defaults.name = name;
-               },
-               get: function( elem, opts ){
-                       var settings = $.extend({},this.defaults,opts);
-                       // check for empty string in single property
-                       if ( !settings.single.length ) settings.single = 'metadata';
-                       
-                       var data = $.data(elem, settings.single);
-                       // returned cached data if it already exists
-                       if ( data ) return data;
-                       
-                       data = "{}";
-                       
-                       if ( settings.type == "class" ) {
-                               var m = settings.cre.exec( elem.className );
-                               if ( m )
-                                       data = m[1];
-                       } else if ( settings.type == "elem" ) {
-                               if( !elem.getElementsByTagName )
-                                       return undefined;
-                               var e = elem.getElementsByTagName(settings.name);
-                               if ( e.length )
-                                       data = $.trim(e[0].innerHTML);
-                       } else if ( elem.getAttribute != undefined ) {
-                               var attr = elem.getAttribute( settings.name );
-                               if ( attr )
-                                       data = attr;
-                       }
-                       
-                       if ( data.indexOf( '{' ) <0 )
-                       data = "{" + data + "}";
-                       
-                       data = eval("(" + data + ")");
-                       
-                       $.data( elem, settings.single, data );
-                       return data;
-               }
-       }
-});
-
-/**
- * Returns the metadata object for the first member of the jQuery object.
- *
- * @name metadata
- * @descr Returns element's metadata object
- * @param Object opts An object contianing settings to override the defaults
- * @type jQuery
- * @cat Plugins/Metadata
- */
-$.fn.metadata = function( opts ){
-       return $.metadata.get( this[0], opts );
-};
-
-})(jQuery);
-
-
-/**
- * jQuery Validation Plugin 1.9.0
-
- *
- * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- * http://docs.jquery.com/Plugins/Validation
- *
- * Copyright (c) 2006 - 2011 J철rn Zaefferer
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- */
-
-/**
- * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
- */
-
-(function($) {
-
-$.extend($.fn, {
-       // http://docs.jquery.com/Plugins/Validation/validate
-       validate: function( options ) {
-
-               // if nothing is selected, return nothing; can't chain anyway
-               if (!this.length) {
-                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
-                       return;
-               }
-
-               // check if a validator for this form was already created
-               var validator = $.data(this[0], 'validator');
-               if ( validator ) {
-                       return validator;
-               }
-
-               // Add novalidate tag if HTML5.
-               this.attr('novalidate', 'novalidate');
-
-               validator = new $.validator( options, this[0] );
-               $.data(this[0], 'validator', validator);
-
-               if ( validator.settings.onsubmit ) {
-
-                       var inputsAndButtons = this.find("input, button");
-
-                       // allow suppresing validation by adding a cancel class to the submit button
-                       inputsAndButtons.filter(".cancel").click(function () {
-                               validator.cancelSubmit = true;
-                       });
-
-                       // when a submitHandler is used, capture the submitting button
-                       if (validator.settings.submitHandler) {
-                               inputsAndButtons.filter(":submit").click(function () {
-                                       validator.submitButton = this;
-                               });
-                       }
-
-                       // validate the form on submit
-                       this.submit( function( event ) {
-                               if ( validator.settings.debug )
-                                       // prevent form submit to be able to see console output
-                                       event.preventDefault();
-
-                               function handle() {
-                                       if ( validator.settings.submitHandler ) {
-                                               if (validator.submitButton) {
-                                                       // insert a hidden input as a replacement for the missing submit button
-                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
-                                               }
-                                               validator.settings.submitHandler.call( validator, validator.currentForm );
-                                               if (validator.submitButton) {
-                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
-                                                       hidden.remove();
-                                               }
-                                               return false;
-                                       }
-                                       return true;
-                               }
-
-                               // prevent submit for invalid forms or custom submit handlers
-                               if ( validator.cancelSubmit ) {
-                                       validator.cancelSubmit = false;
-                                       return handle();
-                               }
-                               if ( validator.form() ) {
-                                       if ( validator.pendingRequest ) {
-                                               validator.formSubmitted = true;
-                                               return false;
-                                       }
-                                       return handle();
-                               } else {
-                                       validator.focusInvalid();
-                                       return false;
-                               }
-                       });
-               }
-
-               return validator;
-       },
-       // http://docs.jquery.com/Plugins/Validation/valid
-       valid: function() {
-        if ( $(this[0]).is('form')) {
-            return this.validate().form();
-        } else {
-            var valid = true;
-            var validator = $(this[0].form).validate();
-            this.each(function() {
-                               valid &= validator.element(this);
-            });
-            return valid;
-        }
-    },
-       // attributes: space seperated list of attributes to retrieve and remove
-       removeAttrs: function(attributes) {
-               var result = {},
-                       $element = this;
-               $.each(attributes.split(/\s/), function(index, value) {
-                       result[value] = $element.attr(value);
-                       $element.removeAttr(value);
-               });
-               return result;
-       },
-       // http://docs.jquery.com/Plugins/Validation/rules
-       rules: function(command, argument) {
-               var element = this[0];
-
-               if (command) {
-                       var settings = $.data(element.form, 'validator').settings;
-                       var staticRules = settings.rules;
-                       var existingRules = $.validator.staticRules(element);
-                       switch(command) {
-                       case "add":
-                               $.extend(existingRules, $.validator.normalizeRule(argument));
-                               staticRules[element.name] = existingRules;
-                               if (argument.messages)
-                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
-                               break;
-                       case "remove":
-                               if (!argument) {
-                                       delete staticRules[element.name];
-                                       return existingRules;
-                               }
-                               var filtered = {};
-                               $.each(argument.split(/\s/), function(index, method) {
-                                       filtered[method] = existingRules[method];
-                                       delete existingRules[method];
-                               });
-                               return filtered;
-                       }
-               }
-
-               var data = $.validator.normalizeRules(
-               $.extend(
-                       {},
-                       $.validator.metadataRules(element),
-                       $.validator.classRules(element),
-                       $.validator.attributeRules(element),
-                       $.validator.staticRules(element)
-               ), element);
-
-               // make sure required is at front
-               if (data.required) {
-                       var param = data.required;
-                       delete data.required;
-                       data = $.extend({required: param}, data);
-               }
-
-               return data;
-       }
-});
-
-// Custom selectors
-$.extend($.expr[":"], {
-       // http://docs.jquery.com/Plugins/Validation/blank
-       blank: function(a) {return !$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/filled
-       filled: function(a) {return !!$.trim("" + a.value);},
-       // http://docs.jquery.com/Plugins/Validation/unchecked
-       unchecked: function(a) {return !a.checked;}
-});
-
-// constructor for validator
-$.validator = function( options, form ) {
-       this.settings = $.extend( true, {}, $.validator.defaults, options );
-       this.currentForm = form;
-       this.init();
-};
-
-$.validator.format = function(source, params) {
-       if ( arguments.length == 1 )
-               return function() {
-                       var args = $.makeArray(arguments);
-                       args.unshift(source);
-                       return $.validator.format.apply( this, args );
-               };
-       if ( arguments.length > 2 && params.constructor != Array  ) {
-               params = $.makeArray(arguments).slice(1);
-       }
-       if ( params.constructor != Array ) {
-               params = [ params ];
-       }
-       $.each(params, function(i, n) {
-               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
-       });
-       return source;
-};
-
-$.extend($.validator, {
-
-       defaults: {
-               messages: {},
-               groups: {},
-               rules: {},
-               errorClass: "error",
-               validClass: "valid",
-               errorElement: "label",
-               focusInvalid: true,
-               errorContainer: $( [] ),
-               errorLabelContainer: $( [] ),
-               onsubmit: true,
-               ignore: ":hidden",
-               ignoreTitle: false,
-               onfocusin: function(element, event) {
-                       this.lastActive = element;
-
-                       // hide error label and remove error class on focus if enabled
-                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
-                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
-                               this.addWrapper(this.errorsFor(element)).hide();
-                       }
-               },
-               onfocusout: function(element, event) {
-                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
-                               this.element(element);
-                       }
-               },
-               onkeyup: function(element, event) {
-                       if ( element.name in this.submitted || element == this.lastElement ) {
-                               this.element(element);
-                       }
-               },
-               onclick: function(element, event) {
-                       // click on selects, radiobuttons and checkboxes
-                       if ( element.name in this.submitted )
-                               this.element(element);
-                       // or option elements, check parent select in that case
-                       else if (element.parentNode.name in this.submitted)
-                               this.element(element.parentNode);
-               },
-               highlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);
-                       } else {
-                               $(element).addClass(errorClass).removeClass(validClass);
-                       }
-               },
-               unhighlight: function(element, errorClass, validClass) {
-                       if (element.type === 'radio') {
-                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);
-                       } else {
-                               $(element).removeClass(errorClass).addClass(validClass);
-                       }
-               }
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
-       setDefaults: function(settings) {
-               $.extend( $.validator.defaults, settings );
-       },
-
-       messages: {
-               required: "This field is required.",
-               remote: "Please fix this field.",
-               email: "Please enter a valid email address.",
-               url: "Please enter a valid URL.",
-               date: "Please enter a valid date.",
-               dateISO: "Please enter a valid date (ISO).",
-               number: "Please enter a valid number.",
-               digits: "Please enter only digits.",
-               creditcard: "Please enter a valid credit card number.",
-               equalTo: "Please enter the same value again.",
-               accept: "Please enter a value with a valid extension.",
-               maxlength: $.validator.format("Please enter no more than {0} characters."),
-               minlength: $.validator.format("Please enter at least {0} characters."),
-               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
-               range: $.validator.format("Please enter a value between {0} and {1}."),
-               max: $.validator.format("Please enter a value less than or equal to {0}."),
-               min: $.validator.format("Please enter a value greater than or equal to {0}.")
-       },
-
-       autoCreateRanges: false,
-
-       prototype: {
-
-               init: function() {
-                       this.labelContainer = $(this.settings.errorLabelContainer);
-                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
-                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
-                       this.submitted = {};
-                       this.valueCache = {};
-                       this.pendingRequest = 0;
-                       this.pending = {};
-                       this.invalid = {};
-                       this.reset();
-
-                       var groups = (this.groups = {});
-                       $.each(this.settings.groups, function(key, value) {
-                               $.each(value.split(/\s/), function(index, name) {
-                                       groups[name] = key;
-                               });
-                       });
-                       var rules = this.settings.rules;
-                       $.each(rules, function(key, value) {
-                               rules[key] = $.validator.normalizeRule(value);
-                       });
-
-                       function delegate(event) {
-                               var validator = $.data(this[0].form, "validator"),
-                                       eventType = "on" + event.type.replace(/^validate/, "");
-                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
-                       }
-                       $(this.currentForm)
-                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
-                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
-                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
-                                               "[type='week'], [type='time'], [type='datetime-local'], " +
-                                               "[type='range'], [type='color'] ",
-                                               "focusin focusout keyup", delegate)
-                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
-
-                       if (this.settings.invalidHandler)
-                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/form
-               form: function() {
-                       this.checkForm();
-                       $.extend(this.submitted, this.errorMap);
-                       this.invalid = $.extend({}, this.errorMap);
-                       if (!this.valid())
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                       this.showErrors();
-                       return this.valid();
-               },
-
-               // 원본소스
-               /*
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               this.check( elements[i] );
-                       }
-                       return this.valid();
-               },
-               */
-
-               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
-               checkForm: function() {
-                       this.prepareForm();
-                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
-                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
-                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
-                                               this.check( this.findByName( elements[i].name )[cnt] );
-                                       }
-                               } else {
-                                       this.check( elements[i] );
-                               }
-                       }
-                       return this.valid();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/element
-               element: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-                       this.lastElement = element;
-                       this.prepareElement( element );
-                       this.currentElements = $(element);
-                       var result = this.check( element );
-                       if ( result ) {
-                               delete this.invalid[element.name];
-                       } else {
-                               this.invalid[element.name] = true;
-                       }
-                       if ( !this.numberOfInvalids() ) {
-                               // Hide error containers on last error
-                               this.toHide = this.toHide.add( this.containers );
-                       }
-                       this.showErrors();
-                       return result;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
-               showErrors: function(errors) {
-                       if(errors) {
-                               // add items to error list and map
-                               $.extend( this.errorMap, errors );
-                               this.errorList = [];
-                               for ( var name in errors ) {
-                                       this.errorList.push({
-                                               message: errors[name],
-                                               element: this.findByName(name)[0]
-                                       });
-                               }
-                               // remove items from success list
-                               this.successList = $.grep( this.successList, function(element) {
-                                       return !(element.name in errors);
-                               });
-                       }
-                       this.settings.showErrors
-                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
-                               : this.defaultShowErrors();
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
-               resetForm: function() {
-                       if ( $.fn.resetForm )
-                               $( this.currentForm ).resetForm();
-                       this.submitted = {};
-                       this.lastElement = null;
-                       this.prepareForm();
-                       this.hideErrors();
-                       this.elements().removeClass( this.settings.errorClass );
-               },
-
-               numberOfInvalids: function() {
-                       return this.objectLength(this.invalid);
-               },
-
-               objectLength: function( obj ) {
-                       var count = 0;
-                       for ( var i in obj )
-                               count++;
-                       return count;
-               },
-
-               hideErrors: function() {
-                       this.addWrapper( this.toHide ).hide();
-               },
-
-               valid: function() {
-                       return this.size() == 0;
-               },
-
-               size: function() {
-                       return this.errorList.length;
-               },
-
-               focusInvalid: function() {
-                       if( this.settings.focusInvalid ) {
-                               try {
-                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
-                                       .filter(":visible")
-                                       .focus()
-                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
-                                       .trigger("focusin");
-                               } catch(e) {
-                                       // ignore IE throwing errors when focusing hidden elements
-                               }
-                       }
-               },
-
-               findLastActive: function() {
-                       var lastActive = this.lastActive;
-                       return lastActive && $.grep(this.errorList, function(n) {
-                               return n.element.name == lastActive.name;
-                       }).length == 1 && lastActive;
-               },
-
-               elements: function() {
-                       var validator = this,
-                               rulesCache = {};
-
-                       // select all valid inputs inside the form (no submit or reset buttons)
-                       return $(this.currentForm)
-                       .find("input, select, textarea")
-                       .not(":submit, :reset, :image, [disabled]")
-                       .not( this.settings.ignore )
-                       .filter(function() {
-                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
-
-                               // select only the first element for each name, and only those with rules specified
-                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
-                                       return false;
-
-                               rulesCache[this.name] = true;
-                               return true;
-                       });
-               },
-
-               clean: function( selector ) {
-                       return $( selector )[0];
-               },
-
-               errors: function() {
-                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
-               },
-
-               reset: function() {
-                       this.successList = [];
-                       this.errorList = [];
-                       this.errorMap = {};
-                       this.toShow = $([]);
-                       this.toHide = $([]);
-                       this.currentElements = $([]);
-               },
-
-               prepareForm: function() {
-                       this.reset();
-                       this.toHide = this.errors().add( this.containers );
-               },
-
-               prepareElement: function( element ) {
-                       this.reset();
-                       this.toHide = this.errorsFor(element);
-               },
-
-               check: function( element ) {
-                       element = this.validationTargetFor( this.clean( element ) );
-
-                       var rules = $(element).rules();
-                       var dependencyMismatch = false;
-                       for (var method in rules ) {
-                               var rule = { method: method, parameters: rules[method] };
-                               try {
-                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
-
-                                       // if a method indicates that the field is optional and therefore valid,
-                                       // don't mark it as valid when there are no other rules
-                                       if ( result == "dependency-mismatch" ) {
-                                               dependencyMismatch = true;
-                                               continue;
-                                       }
-                                       dependencyMismatch = false;
-
-                                       if ( result == "pending" ) {
-                                               this.toHide = this.toHide.not( this.errorsFor(element) );
-                                               return;
-                                       }
-
-                                       if( !result ) {
-                                               this.formatAndAdd( element, rule );
-                                               return false;
-                                       }
-                               } catch(e) {
-                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
-                                                + ", check the '" + rule.method + "' method", e);
-                                       throw e;
-                               }
-                       }
-                       if (dependencyMismatch)
-                               return;
-                       if ( this.objectLength(rules) )
-                               this.successList.push(element);
-                       return true;
-               },
-
-               // return the custom message for the given element and validation method
-               // specified in the element's "messages" metadata
-               customMetaMessage: function(element, method) {
-                       if (!$.metadata)
-                               return;
-
-                       var meta = this.settings.meta
-                               ? $(element).metadata()[this.settings.meta]
-                               : $(element).metadata();
-
-                       return meta && meta.messages && meta.messages[method];
-               },
-
-               // return the custom message for the given element name and validation method
-               customMessage: function( name, method ) {
-                       var m = this.settings.messages[name];
-                       return m && (m.constructor == String
-                               ? m
-                               : m[method]);
-               },
-
-               // return the first defined argument, allowing empty strings
-               findDefined: function() {
-                       for(var i = 0; i < arguments.length; i++) {
-                               if (arguments[i] !== undefined)
-                                       return arguments[i];
-                       }
-                       return undefined;
-               },
-
-               defaultMessage: function( element, method) {
-                       return this.findDefined(
-                               this.customMessage( element.name, method ),
-                               this.customMetaMessage( element, method ),
-                               // title is never undefined, so handle empty string as undefined
-                               !this.settings.ignoreTitle && element.title || undefined,
-                               $.validator.messages[method],
-                               "<strong>Warning: No message defined for " + element.name + "</strong>"
-                       );
-               },
-
-               formatAndAdd: function( element, rule ) {
-                       var message = this.defaultMessage( element, rule.method ),
-                               theregex = /\$?\{(\d+)\}/g;
-                       if ( typeof message == "function" ) {
-                               message = message.call(this, rule.parameters, element);
-                       } else if (theregex.test(message)) {
-                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
-                       }
-                       this.errorList.push({
-                               message: message,
-                               element: element
-                       });
-
-                       this.errorMap[element.name] = message;
-                       this.submitted[element.name] = message;
-               },
-
-               addWrapper: function(toToggle) {
-                       if ( this.settings.wrapper )
-                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
-                       return toToggle;
-               },
-
-               defaultShowErrors: function() {
-                       for ( var i = 0; this.errorList[i]; i++ ) {
-                               var error = this.errorList[i];
-                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
-                               this.showLabel( error.element, error.message );
-                       }
-                       if( this.errorList.length ) {
-                               this.toShow = this.toShow.add( this.containers );
-                       }
-                       if (this.settings.success) {
-                               for ( var i = 0; this.successList[i]; i++ ) {
-                                       this.showLabel( this.successList[i] );
-                               }
-                       }
-                       if (this.settings.unhighlight) {
-                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
-                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
-                               }
-                       }
-                       this.toHide = this.toHide.not( this.toShow );
-                       this.hideErrors();
-                       this.addWrapper( this.toShow ).show();
-               },
-
-               validElements: function() {
-                       return this.currentElements.not(this.invalidElements());
-               },
-
-               invalidElements: function() {
-                       return $(this.errorList).map(function() {
-                               return this.element;
-                       });
-               },
-
-               showLabel: function(element, message) {
-                       var label = this.errorsFor( element );
-                       if ( label.length ) {
-                               // refresh error/success class
-                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
-
-                               // check if we have a generated label, replace the message then
-                               label.attr("generated") && label.html(message);
-                       } else {
-                               // create label
-                               label = $("<" + this.settings.errorElement + "/>")
-                                       .attr({"for":  this.idOrName(element), generated: true})
-                                       .addClass(this.settings.errorClass)
-                                       .html(message || "");
-                               if ( this.settings.wrapper ) {
-                                       // make sure the element is visible, even in IE
-                                       // actually showing the wrapped element is handled elsewhere
-                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
-                               }
-                               if ( !this.labelContainer.append(label).length )
-                                       this.settings.errorPlacement
-                                               ? this.settings.errorPlacement(label, $(element) )
-                                               : label.insertAfter(element);
-                       }
-                       if ( !message && this.settings.success ) {
-                               label.text("");
-                               typeof this.settings.success == "string"
-                                       ? label.addClass( this.settings.success )
-                                       : this.settings.success( label );
-                       }
-                       this.toShow = this.toShow.add(label);
-               },
-
-               errorsFor: function(element) {
-                       var name = this.idOrName(element);
-               return this.errors().filter(function() {
-                               return $(this).attr('for') == name;
-                       });
-               },
-
-               idOrName: function(element) {
-                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
-               },
-
-               validationTargetFor: function(element) {
-                       // if radio/checkbox, validate first element in group instead
-                       if (this.checkable(element)) {
-                               element = this.findByName( element.name ).not(this.settings.ignore)[0];
-                       }
-                       return element;
-               },
-
-               checkable: function( element ) {
-                       return /radio|checkbox/i.test(element.type);
-               },
-
-               findByName: function( name ) {
-                       // select by name and filter by form for performance over form.find("[name=...]")
-                       var form = this.currentForm;
-                       return $(document.getElementsByName(name)).map(function(index, element) {
-                               return element.form == form && element.name == name && element  || null;
-                       });
-               },
-
-               getLength: function(value, element) {
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               return $("option:selected", element).length;
-                       case 'input':
-                               if( this.checkable( element) )
-                                       return this.findByName(element.name).filter(':checked').length;
-                       }
-                       return value.length;
-               },
-
-               depend: function(param, element) {
-                       return this.dependTypes[typeof param]
-                               ? this.dependTypes[typeof param](param, element)
-                               : true;
-               },
-
-               dependTypes: {
-                       "boolean": function(param, element) {
-                               return param;
-                       },
-                       "string": function(param, element) {
-                               return !!$(param, element.form).length;
-                       },
-                       "function": function(param, element) {
-                               return param(element);
-                       }
-               },
-
-               optional: function(element) {
-                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
-               },
-
-               startRequest: function(element) {
-                       if (!this.pending[element.name]) {
-                               this.pendingRequest++;
-                               this.pending[element.name] = true;
-                       }
-               },
-
-               stopRequest: function(element, valid) {
-                       this.pendingRequest--;
-                       // sometimes synchronization fails, make sure pendingRequest is never < 0
-                       if (this.pendingRequest < 0)
-                               this.pendingRequest = 0;
-                       delete this.pending[element.name];
-                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
-                               $(this.currentForm).submit();
-                               this.formSubmitted = false;
-                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
-                               $(this.currentForm).triggerHandler("invalid-form", [this]);
-                               this.formSubmitted = false;
-                       }
-               },
-
-               previousValue: function(element) {
-                       return $.data(element, "previousValue") || $.data(element, "previousValue", {
-                               old: null,
-                               valid: true,
-                               message: this.defaultMessage( element, "remote" )
-                       });
-               }
-
-       },
-
-       classRuleSettings: {
-               required: {required: true},
-               email: {email: true},
-               url: {url: true},
-               date: {date: true},
-               dateISO: {dateISO: true},
-               dateDE: {dateDE: true},
-               number: {number: true},
-               numberDE: {numberDE: true},
-               digits: {digits: true},
-               creditcard: {creditcard: true}
-       },
-
-       addClassRules: function(className, rules) {
-               className.constructor == String ?
-                       this.classRuleSettings[className] = rules :
-                       $.extend(this.classRuleSettings, className);
-       },
-
-       classRules: function(element) {
-               var rules = {};
-               var classes = $(element).attr('class');
-               classes && $.each(classes.split(' '), function() {
-                       if (this in $.validator.classRuleSettings) {
-                               $.extend(rules, $.validator.classRuleSettings[this]);
-                       }
-               });
-               return rules;
-       },
-
-       attributeRules: function(element) {
-               var rules = {};
-               var $element = $(element);
-
-               for (var method in $.validator.methods) {
-                       var value;
-                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required
-                       if (method === 'required' && typeof $.fn.prop === 'function') {
-                               value = $element.prop(method);
-                       } else {
-                               value = $element.attr(method);
-                       }
-                       if (value) {
-                               rules[method] = value;
-                       } else if ($element[0].getAttribute("type") === method) {
-                               rules[method] = true;
-                       }
-               }
-
-               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
-               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
-                       delete rules.maxlength;
-               }
-
-               return rules;
-       },
-
-       metadataRules: function(element) {
-               if (!$.metadata) return {};
-
-               var meta = $.data(element.form, 'validator').settings.meta;
-               return meta ?
-                       $(element).metadata()[meta] :
-                       $(element).metadata();
-       },
-
-       staticRules: function(element) {
-               var rules = {};
-               var validator = $.data(element.form, 'validator');
-               if (validator.settings.rules) {
-                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
-               }
-               return rules;
-       },
-
-       normalizeRules: function(rules, element) {
-               // handle dependency check
-               $.each(rules, function(prop, val) {
-                       // ignore rule when param is explicitly false, eg. required:false
-                       if (val === false) {
-                               delete rules[prop];
-                               return;
-                       }
-                       if (val.param || val.depends) {
-                               var keepRule = true;
-                               switch (typeof val.depends) {
-                                       case "string":
-                                               keepRule = !!$(val.depends, element.form).length;
-                                               break;
-                                       case "function":
-                                               keepRule = val.depends.call(element, element);
-                                               break;
-                               }
-                               if (keepRule) {
-                                       rules[prop] = val.param !== undefined ? val.param : true;
-                               } else {
-                                       delete rules[prop];
-                               }
-                       }
-               });
-
-               // evaluate parameters
-               $.each(rules, function(rule, parameter) {
-                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
-               });
-
-               // clean number parameters
-               $.each(['minlength', 'maxlength', 'min', 'max'], function() {
-                       if (rules[this]) {
-                               rules[this] = Number(rules[this]);
-                       }
-               });
-               $.each(['rangelength', 'range'], function() {
-                       if (rules[this]) {
-                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
-                       }
-               });
-
-               if ($.validator.autoCreateRanges) {
-                       // auto-create ranges
-                       if (rules.min && rules.max) {
-                               rules.range = [rules.min, rules.max];
-                               delete rules.min;
-                               delete rules.max;
-                       }
-                       if (rules.minlength && rules.maxlength) {
-                               rules.rangelength = [rules.minlength, rules.maxlength];
-                               delete rules.minlength;
-                               delete rules.maxlength;
-                       }
-               }
-
-               // To support custom messages in metadata ignore rule methods titled "messages"
-               if (rules.messages) {
-                       delete rules.messages;
-               }
-
-               return rules;
-       },
-
-       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
-       normalizeRule: function(data) {
-               if( typeof data == "string" ) {
-                       var transformed = {};
-                       $.each(data.split(/\s/), function() {
-                               transformed[this] = true;
-                       });
-                       data = transformed;
-               }
-               return data;
-       },
-
-       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
-       addMethod: function(name, method, message) {
-               $.validator.methods[name] = method;
-               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
-               if (method.length < 3) {
-                       $.validator.addClassRules(name, $.validator.normalizeRule(name));
-               }
-       },
-
-       methods: {
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/required
-               required: function(value, element, param) {
-                       // check if dependency is met
-                       if ( !this.depend(param, element) )
-                               return "dependency-mismatch";
-                       switch( element.nodeName.toLowerCase() ) {
-                       case 'select':
-                               // could be an array for select-multiple or a string, both are fine this way
-                               var val = $(element).val();
-                               return val && val.length > 0;
-                       case 'input':
-                               if ( this.checkable(element) )
-                                       return this.getLength(value, element) > 0;
-                       default:
-                               return $.trim(value).length > 0;
-                       }
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/remote
-               remote: function(value, element, param) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-
-                       var previous = this.previousValue(element);
-                       if (!this.settings.messages[element.name] )
-                               this.settings.messages[element.name] = {};
-                       previous.originalMessage = this.settings.messages[element.name].remote;
-                       this.settings.messages[element.name].remote = previous.message;
-
-                       param = typeof param == "string" && {url:param} || param;
-
-                       if ( this.pending[element.name] ) {
-                               return "pending";
-                       }
-                       if ( previous.old === value ) {
-                               return previous.valid;
-                       }
-
-                       previous.old = value;
-                       var validator = this;
-                       this.startRequest(element);
-                       var data = {};
-                       data[element.name] = value;
-                       $.ajax($.extend(true, {
-                               url: param,
-                               mode: "abort",
-                               port: "validate" + element.name,
-                               dataType: "json",
-                               data: data,
-                               success: function(response) {
-                                       validator.settings.messages[element.name].remote = previous.originalMessage;
-                                       var valid = response === true;
-                                       if ( valid ) {
-                                               var submitted = validator.formSubmitted;
-                                               validator.prepareElement(element);
-                                               validator.formSubmitted = submitted;
-                                               validator.successList.push(element);
-                                               validator.showErrors();
-                                       } else {
-                                               var errors = {};
-                                               var message = response || validator.defaultMessage( element, "remote" );
-                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
-                                               validator.showErrors(errors);
-                                       }
-                                       previous.valid = valid;
-                                       validator.stopRequest(element, valid);
-                               }
-                       }, param));
-                       return "pending";
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/minlength
-               minlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
-               maxlength: function(value, element, param) {
-                       return this.optional(element) || this.getLength($.trim(value), element) <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
-               rangelength: function(value, element, param) {
-                       var length = this.getLength($.trim(value), element);
-                       return this.optional(element) || ( length >= param[0] && length <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/min
-               min: function( value, element, param ) {
-                       return this.optional(element) || value >= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/max
-               max: function( value, element, param ) {
-                       return this.optional(element) || value <= param;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/range
-               range: function( value, element, param ) {
-                       return this.optional(element) || ( value >= param[0] && value <= param[1] );
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/email
-               email: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
-                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/url
-               url: function(value, element) {
-                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
-                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/date
-               date: function(value, element) {
-                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
-               dateISO: function(value, element) {
-                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/number
-               number: function(value, element) {
-                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/digits
-               digits: function(value, element) {
-                       return this.optional(element) || /^\d+$/.test(value);
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
-               // based on http://en.wikipedia.org/wiki/Luhn
-               creditcard: function(value, element) {
-                       if ( this.optional(element) )
-                               return "dependency-mismatch";
-                       // accept only spaces, digits and dashes
-                       if (/[^0-9 -]+/.test(value))
-                               return false;
-                       var nCheck = 0,
-                               nDigit = 0,
-                               bEven = false;
-
-                       value = value.replace(/\D/g, "");
-
-                       for (var n = value.length - 1; n >= 0; n--) {
-                               var cDigit = value.charAt(n);
-                               var nDigit = parseInt(cDigit, 10);
-                               if (bEven) {
-                                       if ((nDigit *= 2) > 9)
-                                               nDigit -= 9;
-                               }
-                               nCheck += nDigit;
-                               bEven = !bEven;
-                       }
-
-                       return (nCheck % 10) == 0;
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/accept
-               accept: function(value, element, param) {
-                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
-                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
-               },
-
-               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
-               equalTo: function(value, element, param) {
-                       // bind to the blur event of the target in order to revalidate whenever the target field is updated
-                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
-                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
-                               $(element).valid();
-                       });
-                       return value == target.val();
-               }
-
-       }
-
-});
-
-// deprecated, use $.validator.format instead
-$.format = $.validator.format;
-
-})(jQuery);
-
-// ajax mode: abort
-// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
-// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
-;(function($) {
-       var pendingRequests = {};
-       // Use a prefilter if available (1.5+)
-       if ( $.ajaxPrefilter ) {
-               $.ajaxPrefilter(function(settings, _, xhr) {
-                       var port = settings.port;
-                       if (settings.mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               pendingRequests[port] = xhr;
-                       }
-               });
-       } else {
-               // Proxy ajax
-               var ajax = $.ajax;
-               $.ajax = function(settings) {
-                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
-                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;
-                       if (mode == "abort") {
-                               if ( pendingRequests[port] ) {
-                                       pendingRequests[port].abort();
-                               }
-                               return (pendingRequests[port] = ajax.apply(this, arguments));
-                       }
-                       return ajax.apply(this, arguments);
-               };
-       }
-})(jQuery);
-
-// provides cross-browser focusin and focusout events
-// IE has native support, in other browsers, use event caputuring (neither bubbles)
-
-// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
-// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
-;(function($) {
-       // only implement if not provided by jQuery core (since 1.4)
-       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
-       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
-               $.each({
-                       focus: 'focusin',
-                       blur: 'focusout'
-               }, function( original, fix ){
-                       $.event.special[fix] = {
-                               setup:function() {
-                                       this.addEventListener( original, handler, true );
-                               },
-                               teardown:function() {
-                                       this.removeEventListener( original, handler, true );
-                               },
-                               handler: function(e) {
-                                       arguments[0] = $.event.fix(e);
-                                       arguments[0].type = fix;
-                                       return $.event.handle.apply(this, arguments);
-                               }
-                       };
-                       function handler(e) {
-                               e = $.event.fix(e);
-                               e.type = fix;
-                               return $.event.handle.call(this, e);
-                       }
-               });
-       };
-       $.extend($.fn, {
-               validateDelegate: function(delegate, type, handler) {
-                       return this.bind(type, function(event) {
-                               var target = $(event.target);
-                               if (target.is(delegate)) {
-                                       return handler.apply(target, arguments);
-                               }
-                       });
-               }
-       });
-})(jQuery);
-
-/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
- * Licensed under the MIT License (LICENSE.txt).
- *
- * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
- * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
- * Thanks to: Seamus Leahy for adding deltaX and deltaY
- *
- * Version: 3.0.6
- * 
- * Requires: 1.2.2+
- */
-
-(function($) {
-
-var types = ['DOMMouseScroll', 'mousewheel'];
-
-if ($.event.fixHooks) {
-    for ( var i=types.length; i; ) {
-        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
-    }
-}
-
-$.event.special.mousewheel = {
-    setup: function() {
-        if ( this.addEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.addEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = handler;
-        }
-    },
-    
-    teardown: function() {
-        if ( this.removeEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.removeEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = null;
-        }
-    }
-};
-
-$.fn.extend({
-    mousewheel: function(fn) {
-        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-    },
-    
-    unmousewheel: function(fn) {
-        return this.unbind("mousewheel", fn);
-    }
-});
-
-
-function handler(event) {
-    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
-    event = $.event.fix(orgEvent);
-    event.type = "mousewheel";
-    
-    // Old school scrollwheel delta
-    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
-    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
-    
-    // New school multidimensional scroll (touchpads) deltas
-    deltaY = delta;
-    
-    // Gecko
-    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
-        deltaY = 0;
-        deltaX = -1*delta;
-    }
-    
-    // Webkit
-    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
-    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
-    
-    // Add event and delta to the front of the arguments
-    args.unshift(event, delta, deltaX, deltaY);
-    
-    return ($.event.dispatch || $.event.handle).apply(this, args);
-}
-
-})(jQuery);
-
-/*
- * jScrollPane - v2.0.0beta12 - 2012-07-24
- * http://jscrollpane.kelvinluck.com/
- *
- * Copyright (c) 2010 Kelvin Luck
- * Dual licensed under the MIT and GPL licenses.
- */
-(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
-if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
-}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */\r
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);\r
+\r
+\r
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */\r
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};\r
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()\r
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);\r
+\r
+/*\r
+ * Metadata - jQuery plugin for parsing metadata from elements\r
+ *\r
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ *\r
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $\r
+ *\r
+ */\r
+\r
+/**\r
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property\r
+ * in the JSON will become a property of the element itself.\r
+ *\r
+ * There are three supported types of metadata storage:\r
+ *\r
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.\r
+ *          \r
+ *   class: Inside the class attribute, wrapped in curly braces: { }\r
+ *   \r
+ *   elem:  Inside a child element (e.g. a script tag). The\r
+ *          name parameter indicates *which* element.\r
+ *          \r
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.\r
+ *\r
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements\r
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.\r
+ * \r
+ * @name $.metadata.setType\r
+ *\r
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("class")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from the class attribute\r
+ * \r
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("attr", "data")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a "data" attribute\r
+ * \r
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>\r
+ * @before $.metadata.setType("elem", "script")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a nested script element\r
+ * \r
+ * @param String type The encoding type\r
+ * @param String name The name of the attribute to be used to get metadata (optional)\r
+ * @cat Plugins/Metadata\r
+ * @descr Sets the type of encoding to be used when loading metadata for the first time\r
+ * @type undefined\r
+ * @see metadata()\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend({\r
+       metadata : {\r
+               defaults : {\r
+                       type: 'class',\r
+                       name: 'metadata',\r
+                       cre: /({.*})/,\r
+                       single: 'metadata'\r
+               },\r
+               setType: function( type, name ){\r
+                       this.defaults.type = type;\r
+                       this.defaults.name = name;\r
+               },\r
+               get: function( elem, opts ){\r
+                       var settings = $.extend({},this.defaults,opts);\r
+                       // check for empty string in single property\r
+                       if ( !settings.single.length ) settings.single = 'metadata';\r
+                       \r
+                       var data = $.data(elem, settings.single);\r
+                       // returned cached data if it already exists\r
+                       if ( data ) return data;\r
+                       \r
+                       data = "{}";\r
+                       \r
+                       if ( settings.type == "class" ) {\r
+                               var m = settings.cre.exec( elem.className );\r
+                               if ( m )\r
+                                       data = m[1];\r
+                       } else if ( settings.type == "elem" ) {\r
+                               if( !elem.getElementsByTagName )\r
+                                       return undefined;\r
+                               var e = elem.getElementsByTagName(settings.name);\r
+                               if ( e.length )\r
+                                       data = $.trim(e[0].innerHTML);\r
+                       } else if ( elem.getAttribute != undefined ) {\r
+                               var attr = elem.getAttribute( settings.name );\r
+                               if ( attr )\r
+                                       data = attr;\r
+                       }\r
+                       \r
+                       if ( data.indexOf( '{' ) <0 )\r
+                       data = "{" + data + "}";\r
+                       \r
+                       data = eval("(" + data + ")");\r
+                       \r
+                       $.data( elem, settings.single, data );\r
+                       return data;\r
+               }\r
+       }\r
+});\r
+\r
+/**\r
+ * Returns the metadata object for the first member of the jQuery object.\r
+ *\r
+ * @name metadata\r
+ * @descr Returns element's metadata object\r
+ * @param Object opts An object contianing settings to override the defaults\r
+ * @type jQuery\r
+ * @cat Plugins/Metadata\r
+ */\r
+$.fn.metadata = function( opts ){\r
+       return $.metadata.get( this[0], opts );\r
+};\r
+\r
+})(jQuery);\r
+\r
+\r
+/**\r
+ * jQuery Validation Plugin 1.9.0\r
+\r
+ *\r
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/\r
+ * http://docs.jquery.com/Plugins/Validation\r
+ *\r
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ */\r
+\r
+/**\r
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend($.fn, {\r
+       // http://docs.jquery.com/Plugins/Validation/validate\r
+       validate: function( options ) {\r
+\r
+               // if nothing is selected, return nothing; can't chain anyway\r
+               if (!this.length) {\r
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );\r
+                       return;\r
+               }\r
+\r
+               // check if a validator for this form was already created\r
+               var validator = $.data(this[0], 'validator');\r
+               if ( validator ) {\r
+                       return validator;\r
+               }\r
+\r
+               // Add novalidate tag if HTML5.\r
+               this.attr('novalidate', 'novalidate');\r
+\r
+               validator = new $.validator( options, this[0] );\r
+               $.data(this[0], 'validator', validator);\r
+\r
+               if ( validator.settings.onsubmit ) {\r
+\r
+                       var inputsAndButtons = this.find("input, button");\r
+\r
+                       // allow suppresing validation by adding a cancel class to the submit button\r
+                       inputsAndButtons.filter(".cancel").click(function () {\r
+                               validator.cancelSubmit = true;\r
+                       });\r
+\r
+                       // when a submitHandler is used, capture the submitting button\r
+                       if (validator.settings.submitHandler) {\r
+                               inputsAndButtons.filter(":submit").click(function () {\r
+                                       validator.submitButton = this;\r
+                               });\r
+                       }\r
+\r
+                       // validate the form on submit\r
+                       this.submit( function( event ) {\r
+                               if ( validator.settings.debug )\r
+                                       // prevent form submit to be able to see console output\r
+                                       event.preventDefault();\r
+\r
+                               function handle() {\r
+                                       if ( validator.settings.submitHandler ) {\r
+                                               if (validator.submitButton) {\r
+                                                       // insert a hidden input as a replacement for the missing submit button\r
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);\r
+                                               }\r
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );\r
+                                               if (validator.submitButton) {\r
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced\r
+                                                       hidden.remove();\r
+                                               }\r
+                                               return false;\r
+                                       }\r
+                                       return true;\r
+                               }\r
+\r
+                               // prevent submit for invalid forms or custom submit handlers\r
+                               if ( validator.cancelSubmit ) {\r
+                                       validator.cancelSubmit = false;\r
+                                       return handle();\r
+                               }\r
+                               if ( validator.form() ) {\r
+                                       if ( validator.pendingRequest ) {\r
+                                               validator.formSubmitted = true;\r
+                                               return false;\r
+                                       }\r
+                                       return handle();\r
+                               } else {\r
+                                       validator.focusInvalid();\r
+                                       return false;\r
+                               }\r
+                       });\r
+               }\r
+\r
+               return validator;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/valid\r
+       valid: function() {\r
+        if ( $(this[0]).is('form')) {\r
+            return this.validate().form();\r
+        } else {\r
+            var valid = true;\r
+            var validator = $(this[0].form).validate();\r
+            this.each(function() {\r
+                               valid &= validator.element(this);\r
+            });\r
+            return valid;\r
+        }\r
+    },\r
+       // attributes: space seperated list of attributes to retrieve and remove\r
+       removeAttrs: function(attributes) {\r
+               var result = {},\r
+                       $element = this;\r
+               $.each(attributes.split(/\s/), function(index, value) {\r
+                       result[value] = $element.attr(value);\r
+                       $element.removeAttr(value);\r
+               });\r
+               return result;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/rules\r
+       rules: function(command, argument) {\r
+               var element = this[0];\r
+\r
+               if (command) {\r
+                       var settings = $.data(element.form, 'validator').settings;\r
+                       var staticRules = settings.rules;\r
+                       var existingRules = $.validator.staticRules(element);\r
+                       switch(command) {\r
+                       case "add":\r
+                               $.extend(existingRules, $.validator.normalizeRule(argument));\r
+                               staticRules[element.name] = existingRules;\r
+                               if (argument.messages)\r
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );\r
+                               break;\r
+                       case "remove":\r
+                               if (!argument) {\r
+                                       delete staticRules[element.name];\r
+                                       return existingRules;\r
+                               }\r
+                               var filtered = {};\r
+                               $.each(argument.split(/\s/), function(index, method) {\r
+                                       filtered[method] = existingRules[method];\r
+                                       delete existingRules[method];\r
+                               });\r
+                               return filtered;\r
+                       }\r
+               }\r
+\r
+               var data = $.validator.normalizeRules(\r
+               $.extend(\r
+                       {},\r
+                       $.validator.metadataRules(element),\r
+                       $.validator.classRules(element),\r
+                       $.validator.attributeRules(element),\r
+                       $.validator.staticRules(element)\r
+               ), element);\r
+\r
+               // make sure required is at front\r
+               if (data.required) {\r
+                       var param = data.required;\r
+                       delete data.required;\r
+                       data = $.extend({required: param}, data);\r
+               }\r
+\r
+               return data;\r
+       }\r
+});\r
+\r
+// Custom selectors\r
+$.extend($.expr[":"], {\r
+       // http://docs.jquery.com/Plugins/Validation/blank\r
+       blank: function(a) {return !$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/filled\r
+       filled: function(a) {return !!$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/unchecked\r
+       unchecked: function(a) {return !a.checked;}\r
+});\r
+\r
+// constructor for validator\r
+$.validator = function( options, form ) {\r
+       this.settings = $.extend( true, {}, $.validator.defaults, options );\r
+       this.currentForm = form;\r
+       this.init();\r
+};\r
+\r
+$.validator.format = function(source, params) {\r
+       if ( arguments.length == 1 )\r
+               return function() {\r
+                       var args = $.makeArray(arguments);\r
+                       args.unshift(source);\r
+                       return $.validator.format.apply( this, args );\r
+               };\r
+       if ( arguments.length > 2 && params.constructor != Array  ) {\r
+               params = $.makeArray(arguments).slice(1);\r
+       }\r
+       if ( params.constructor != Array ) {\r
+               params = [ params ];\r
+       }\r
+       $.each(params, function(i, n) {\r
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);\r
+       });\r
+       return source;\r
+};\r
+\r
+$.extend($.validator, {\r
+\r
+       defaults: {\r
+               messages: {},\r
+               groups: {},\r
+               rules: {},\r
+               errorClass: "error",\r
+               validClass: "valid",\r
+               errorElement: "label",\r
+               focusInvalid: true,\r
+               errorContainer: $( [] ),\r
+               errorLabelContainer: $( [] ),\r
+               onsubmit: true,\r
+               ignore: ":hidden",\r
+               ignoreTitle: false,\r
+               onfocusin: function(element, event) {\r
+                       this.lastActive = element;\r
+\r
+                       // hide error label and remove error class on focus if enabled\r
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {\r
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );\r
+                               this.addWrapper(this.errorsFor(element)).hide();\r
+                       }\r
+               },\r
+               onfocusout: function(element, event) {\r
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onkeyup: function(element, event) {\r
+                       if ( element.name in this.submitted || element == this.lastElement ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onclick: function(element, event) {\r
+                       // click on selects, radiobuttons and checkboxes\r
+                       if ( element.name in this.submitted )\r
+                               this.element(element);\r
+                       // or option elements, check parent select in that case\r
+                       else if (element.parentNode.name in this.submitted)\r
+                               this.element(element.parentNode);\r
+               },\r
+               highlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);\r
+                       } else {\r
+                               $(element).addClass(errorClass).removeClass(validClass);\r
+                       }\r
+               },\r
+               unhighlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);\r
+                       } else {\r
+                               $(element).removeClass(errorClass).addClass(validClass);\r
+                       }\r
+               }\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults\r
+       setDefaults: function(settings) {\r
+               $.extend( $.validator.defaults, settings );\r
+       },\r
+\r
+       messages: {\r
+               required: "This field is required.",\r
+               remote: "Please fix this field.",\r
+               email: "Please enter a valid email address.",\r
+               url: "Please enter a valid URL.",\r
+               date: "Please enter a valid date.",\r
+               dateISO: "Please enter a valid date (ISO).",\r
+               number: "Please enter a valid number.",\r
+               digits: "Please enter only digits.",\r
+               creditcard: "Please enter a valid credit card number.",\r
+               equalTo: "Please enter the same value again.",\r
+               accept: "Please enter a value with a valid extension.",\r
+               maxlength: $.validator.format("Please enter no more than {0} characters."),\r
+               minlength: $.validator.format("Please enter at least {0} characters."),\r
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),\r
+               range: $.validator.format("Please enter a value between {0} and {1}."),\r
+               max: $.validator.format("Please enter a value less than or equal to {0}."),\r
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")\r
+       },\r
+\r
+       autoCreateRanges: false,\r
+\r
+       prototype: {\r
+\r
+               init: function() {\r
+                       this.labelContainer = $(this.settings.errorLabelContainer);\r
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);\r
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );\r
+                       this.submitted = {};\r
+                       this.valueCache = {};\r
+                       this.pendingRequest = 0;\r
+                       this.pending = {};\r
+                       this.invalid = {};\r
+                       this.reset();\r
+\r
+                       var groups = (this.groups = {});\r
+                       $.each(this.settings.groups, function(key, value) {\r
+                               $.each(value.split(/\s/), function(index, name) {\r
+                                       groups[name] = key;\r
+                               });\r
+                       });\r
+                       var rules = this.settings.rules;\r
+                       $.each(rules, function(key, value) {\r
+                               rules[key] = $.validator.normalizeRule(value);\r
+                       });\r
+\r
+                       function delegate(event) {\r
+                               var validator = $.data(this[0].form, "validator"),\r
+                                       eventType = "on" + event.type.replace(/^validate/, "");\r
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);\r
+                       }\r
+                       $(this.currentForm)\r
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +\r
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +\r
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +\r
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +\r
+                                               "[type='range'], [type='color'] ",\r
+                                               "focusin focusout keyup", delegate)\r
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);\r
+\r
+                       if (this.settings.invalidHandler)\r
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/form\r
+               form: function() {\r
+                       this.checkForm();\r
+                       $.extend(this.submitted, this.errorMap);\r
+                       this.invalid = $.extend({}, this.errorMap);\r
+                       if (!this.valid())\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                       this.showErrors();\r
+                       return this.valid();\r
+               },\r
+\r
+               // 원본소스\r
+               /*\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               this.check( elements[i] );\r
+                       }\r
+                       return this.valid();\r
+               },\r
+               */\r
+\r
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {\r
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {\r
+                                               this.check( this.findByName( elements[i].name )[cnt] );\r
+                                       }\r
+                               } else {\r
+                                       this.check( elements[i] );\r
+                               }\r
+                       }\r
+                       return this.valid();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/element\r
+               element: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+                       this.lastElement = element;\r
+                       this.prepareElement( element );\r
+                       this.currentElements = $(element);\r
+                       var result = this.check( element );\r
+                       if ( result ) {\r
+                               delete this.invalid[element.name];\r
+                       } else {\r
+                               this.invalid[element.name] = true;\r
+                       }\r
+                       if ( !this.numberOfInvalids() ) {\r
+                               // Hide error containers on last error\r
+                               this.toHide = this.toHide.add( this.containers );\r
+                       }\r
+                       this.showErrors();\r
+                       return result;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors\r
+               showErrors: function(errors) {\r
+                       if(errors) {\r
+                               // add items to error list and map\r
+                               $.extend( this.errorMap, errors );\r
+                               this.errorList = [];\r
+                               for ( var name in errors ) {\r
+                                       this.errorList.push({\r
+                                               message: errors[name],\r
+                                               element: this.findByName(name)[0]\r
+                                       });\r
+                               }\r
+                               // remove items from success list\r
+                               this.successList = $.grep( this.successList, function(element) {\r
+                                       return !(element.name in errors);\r
+                               });\r
+                       }\r
+                       this.settings.showErrors\r
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )\r
+                               : this.defaultShowErrors();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm\r
+               resetForm: function() {\r
+                       if ( $.fn.resetForm )\r
+                               $( this.currentForm ).resetForm();\r
+                       this.submitted = {};\r
+                       this.lastElement = null;\r
+                       this.prepareForm();\r
+                       this.hideErrors();\r
+                       this.elements().removeClass( this.settings.errorClass );\r
+               },\r
+\r
+               numberOfInvalids: function() {\r
+                       return this.objectLength(this.invalid);\r
+               },\r
+\r
+               objectLength: function( obj ) {\r
+                       var count = 0;\r
+                       for ( var i in obj )\r
+                               count++;\r
+                       return count;\r
+               },\r
+\r
+               hideErrors: function() {\r
+                       this.addWrapper( this.toHide ).hide();\r
+               },\r
+\r
+               valid: function() {\r
+                       return this.size() == 0;\r
+               },\r
+\r
+               size: function() {\r
+                       return this.errorList.length;\r
+               },\r
+\r
+               focusInvalid: function() {\r
+                       if( this.settings.focusInvalid ) {\r
+                               try {\r
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])\r
+                                       .filter(":visible")\r
+                                       .focus()\r
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find\r
+                                       .trigger("focusin");\r
+                               } catch(e) {\r
+                                       // ignore IE throwing errors when focusing hidden elements\r
+                               }\r
+                       }\r
+               },\r
+\r
+               findLastActive: function() {\r
+                       var lastActive = this.lastActive;\r
+                       return lastActive && $.grep(this.errorList, function(n) {\r
+                               return n.element.name == lastActive.name;\r
+                       }).length == 1 && lastActive;\r
+               },\r
+\r
+               elements: function() {\r
+                       var validator = this,\r
+                               rulesCache = {};\r
+\r
+                       // select all valid inputs inside the form (no submit or reset buttons)\r
+                       return $(this.currentForm)\r
+                       .find("input, select, textarea")\r
+                       .not(":submit, :reset, :image, [disabled]")\r
+                       .not( this.settings.ignore )\r
+                       .filter(function() {\r
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);\r
+\r
+                               // select only the first element for each name, and only those with rules specified\r
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )\r
+                                       return false;\r
+\r
+                               rulesCache[this.name] = true;\r
+                               return true;\r
+                       });\r
+               },\r
+\r
+               clean: function( selector ) {\r
+                       return $( selector )[0];\r
+               },\r
+\r
+               errors: function() {\r
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );\r
+               },\r
+\r
+               reset: function() {\r
+                       this.successList = [];\r
+                       this.errorList = [];\r
+                       this.errorMap = {};\r
+                       this.toShow = $([]);\r
+                       this.toHide = $([]);\r
+                       this.currentElements = $([]);\r
+               },\r
+\r
+               prepareForm: function() {\r
+                       this.reset();\r
+                       this.toHide = this.errors().add( this.containers );\r
+               },\r
+\r
+               prepareElement: function( element ) {\r
+                       this.reset();\r
+                       this.toHide = this.errorsFor(element);\r
+               },\r
+\r
+               check: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+\r
+                       var rules = $(element).rules();\r
+                       var dependencyMismatch = false;\r
+                       for (var method in rules ) {\r
+                               var rule = { method: method, parameters: rules[method] };\r
+                               try {\r
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );\r
+\r
+                                       // if a method indicates that the field is optional and therefore valid,\r
+                                       // don't mark it as valid when there are no other rules\r
+                                       if ( result == "dependency-mismatch" ) {\r
+                                               dependencyMismatch = true;\r
+                                               continue;\r
+                                       }\r
+                                       dependencyMismatch = false;\r
+\r
+                                       if ( result == "pending" ) {\r
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );\r
+                                               return;\r
+                                       }\r
+\r
+                                       if( !result ) {\r
+                                               this.formatAndAdd( element, rule );\r
+                                               return false;\r
+                                       }\r
+                               } catch(e) {\r
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id\r
+                                                + ", check the '" + rule.method + "' method", e);\r
+                                       throw e;\r
+                               }\r
+                       }\r
+                       if (dependencyMismatch)\r
+                               return;\r
+                       if ( this.objectLength(rules) )\r
+                               this.successList.push(element);\r
+                       return true;\r
+               },\r
+\r
+               // return the custom message for the given element and validation method\r
+               // specified in the element's "messages" metadata\r
+               customMetaMessage: function(element, method) {\r
+                       if (!$.metadata)\r
+                               return;\r
+\r
+                       var meta = this.settings.meta\r
+                               ? $(element).metadata()[this.settings.meta]\r
+                               : $(element).metadata();\r
+\r
+                       return meta && meta.messages && meta.messages[method];\r
+               },\r
+\r
+               // return the custom message for the given element name and validation method\r
+               customMessage: function( name, method ) {\r
+                       var m = this.settings.messages[name];\r
+                       return m && (m.constructor == String\r
+                               ? m\r
+                               : m[method]);\r
+               },\r
+\r
+               // return the first defined argument, allowing empty strings\r
+               findDefined: function() {\r
+                       for(var i = 0; i < arguments.length; i++) {\r
+                               if (arguments[i] !== undefined)\r
+                                       return arguments[i];\r
+                       }\r
+                       return undefined;\r
+               },\r
+\r
+               defaultMessage: function( element, method) {\r
+                       return this.findDefined(\r
+                               this.customMessage( element.name, method ),\r
+                               this.customMetaMessage( element, method ),\r
+                               // title is never undefined, so handle empty string as undefined\r
+                               !this.settings.ignoreTitle && element.title || undefined,\r
+                               $.validator.messages[method],\r
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"\r
+                       );\r
+               },\r
+\r
+               formatAndAdd: function( element, rule ) {\r
+                       var message = this.defaultMessage( element, rule.method ),\r
+                               theregex = /\$?\{(\d+)\}/g;\r
+                       if ( typeof message == "function" ) {\r
+                               message = message.call(this, rule.parameters, element);\r
+                       } else if (theregex.test(message)) {\r
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);\r
+                       }\r
+                       this.errorList.push({\r
+                               message: message,\r
+                               element: element\r
+                       });\r
+\r
+                       this.errorMap[element.name] = message;\r
+                       this.submitted[element.name] = message;\r
+               },\r
+\r
+               addWrapper: function(toToggle) {\r
+                       if ( this.settings.wrapper )\r
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );\r
+                       return toToggle;\r
+               },\r
+\r
+               defaultShowErrors: function() {\r
+                       for ( var i = 0; this.errorList[i]; i++ ) {\r
+                               var error = this.errorList[i];\r
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );\r
+                               this.showLabel( error.element, error.message );\r
+                       }\r
+                       if( this.errorList.length ) {\r
+                               this.toShow = this.toShow.add( this.containers );\r
+                       }\r
+                       if (this.settings.success) {\r
+                               for ( var i = 0; this.successList[i]; i++ ) {\r
+                                       this.showLabel( this.successList[i] );\r
+                               }\r
+                       }\r
+                       if (this.settings.unhighlight) {\r
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {\r
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );\r
+                               }\r
+                       }\r
+                       this.toHide = this.toHide.not( this.toShow );\r
+                       this.hideErrors();\r
+                       this.addWrapper( this.toShow ).show();\r
+               },\r
+\r
+               validElements: function() {\r
+                       return this.currentElements.not(this.invalidElements());\r
+               },\r
+\r
+               invalidElements: function() {\r
+                       return $(this.errorList).map(function() {\r
+                               return this.element;\r
+                       });\r
+               },\r
+\r
+               showLabel: function(element, message) {\r
+                       var label = this.errorsFor( element );\r
+                       if ( label.length ) {\r
+                               // refresh error/success class\r
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );\r
+\r
+                               // check if we have a generated label, replace the message then\r
+                               label.attr("generated") && label.html(message);\r
+                       } else {\r
+                               // create label\r
+                               label = $("<" + this.settings.errorElement + "/>")\r
+                                       .attr({"for":  this.idOrName(element), generated: true})\r
+                                       .addClass(this.settings.errorClass)\r
+                                       .html(message || "");\r
+                               if ( this.settings.wrapper ) {\r
+                                       // make sure the element is visible, even in IE\r
+                                       // actually showing the wrapped element is handled elsewhere\r
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();\r
+                               }\r
+                               if ( !this.labelContainer.append(label).length )\r
+                                       this.settings.errorPlacement\r
+                                               ? this.settings.errorPlacement(label, $(element) )\r
+                                               : label.insertAfter(element);\r
+                       }\r
+                       if ( !message && this.settings.success ) {\r
+                               label.text("");\r
+                               typeof this.settings.success == "string"\r
+                                       ? label.addClass( this.settings.success )\r
+                                       : this.settings.success( label );\r
+                       }\r
+                       this.toShow = this.toShow.add(label);\r
+               },\r
+\r
+               errorsFor: function(element) {\r
+                       var name = this.idOrName(element);\r
+               return this.errors().filter(function() {\r
+                               return $(this).attr('for') == name;\r
+                       });\r
+               },\r
+\r
+               idOrName: function(element) {\r
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);\r
+               },\r
+\r
+               validationTargetFor: function(element) {\r
+                       // if radio/checkbox, validate first element in group instead\r
+                       if (this.checkable(element)) {\r
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];\r
+                       }\r
+                       return element;\r
+               },\r
+\r
+               checkable: function( element ) {\r
+                       return /radio|checkbox/i.test(element.type);\r
+               },\r
+\r
+               findByName: function( name ) {\r
+                       // select by name and filter by form for performance over form.find("[name=...]")\r
+                       var form = this.currentForm;\r
+                       return $(document.getElementsByName(name)).map(function(index, element) {\r
+                               return element.form == form && element.name == name && element  || null;\r
+                       });\r
+               },\r
+\r
+               getLength: function(value, element) {\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               return $("option:selected", element).length;\r
+                       case 'input':\r
+                               if( this.checkable( element) )\r
+                                       return this.findByName(element.name).filter(':checked').length;\r
+                       }\r
+                       return value.length;\r
+               },\r
+\r
+               depend: function(param, element) {\r
+                       return this.dependTypes[typeof param]\r
+                               ? this.dependTypes[typeof param](param, element)\r
+                               : true;\r
+               },\r
+\r
+               dependTypes: {\r
+                       "boolean": function(param, element) {\r
+                               return param;\r
+                       },\r
+                       "string": function(param, element) {\r
+                               return !!$(param, element.form).length;\r
+                       },\r
+                       "function": function(param, element) {\r
+                               return param(element);\r
+                       }\r
+               },\r
+\r
+               optional: function(element) {\r
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";\r
+               },\r
+\r
+               startRequest: function(element) {\r
+                       if (!this.pending[element.name]) {\r
+                               this.pendingRequest++;\r
+                               this.pending[element.name] = true;\r
+                       }\r
+               },\r
+\r
+               stopRequest: function(element, valid) {\r
+                       this.pendingRequest--;\r
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0\r
+                       if (this.pendingRequest < 0)\r
+                               this.pendingRequest = 0;\r
+                       delete this.pending[element.name];\r
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {\r
+                               $(this.currentForm).submit();\r
+                               this.formSubmitted = false;\r
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                               this.formSubmitted = false;\r
+                       }\r
+               },\r
+\r
+               previousValue: function(element) {\r
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {\r
+                               old: null,\r
+                               valid: true,\r
+                               message: this.defaultMessage( element, "remote" )\r
+                       });\r
+               }\r
+\r
+       },\r
+\r
+       classRuleSettings: {\r
+               required: {required: true},\r
+               email: {email: true},\r
+               url: {url: true},\r
+               date: {date: true},\r
+               dateISO: {dateISO: true},\r
+               dateDE: {dateDE: true},\r
+               number: {number: true},\r
+               numberDE: {numberDE: true},\r
+               digits: {digits: true},\r
+               creditcard: {creditcard: true}\r
+       },\r
+\r
+       addClassRules: function(className, rules) {\r
+               className.constructor == String ?\r
+                       this.classRuleSettings[className] = rules :\r
+                       $.extend(this.classRuleSettings, className);\r
+       },\r
+\r
+       classRules: function(element) {\r
+               var rules = {};\r
+               var classes = $(element).attr('class');\r
+               classes && $.each(classes.split(' '), function() {\r
+                       if (this in $.validator.classRuleSettings) {\r
+                               $.extend(rules, $.validator.classRuleSettings[this]);\r
+                       }\r
+               });\r
+               return rules;\r
+       },\r
+\r
+       attributeRules: function(element) {\r
+               var rules = {};\r
+               var $element = $(element);\r
+\r
+               for (var method in $.validator.methods) {\r
+                       var value;\r
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required\r
+                       if (method === 'required' && typeof $.fn.prop === 'function') {\r
+                               value = $element.prop(method);\r
+                       } else {\r
+                               value = $element.attr(method);\r
+                       }\r
+                       if (value) {\r
+                               rules[method] = value;\r
+                       } else if ($element[0].getAttribute("type") === method) {\r
+                               rules[method] = true;\r
+                       }\r
+               }\r
+\r
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs\r
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {\r
+                       delete rules.maxlength;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       metadataRules: function(element) {\r
+               if (!$.metadata) return {};\r
+\r
+               var meta = $.data(element.form, 'validator').settings.meta;\r
+               return meta ?\r
+                       $(element).metadata()[meta] :\r
+                       $(element).metadata();\r
+       },\r
+\r
+       staticRules: function(element) {\r
+               var rules = {};\r
+               var validator = $.data(element.form, 'validator');\r
+               if (validator.settings.rules) {\r
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};\r
+               }\r
+               return rules;\r
+       },\r
+\r
+       normalizeRules: function(rules, element) {\r
+               // handle dependency check\r
+               $.each(rules, function(prop, val) {\r
+                       // ignore rule when param is explicitly false, eg. required:false\r
+                       if (val === false) {\r
+                               delete rules[prop];\r
+                               return;\r
+                       }\r
+                       if (val.param || val.depends) {\r
+                               var keepRule = true;\r
+                               switch (typeof val.depends) {\r
+                                       case "string":\r
+                                               keepRule = !!$(val.depends, element.form).length;\r
+                                               break;\r
+                                       case "function":\r
+                                               keepRule = val.depends.call(element, element);\r
+                                               break;\r
+                               }\r
+                               if (keepRule) {\r
+                                       rules[prop] = val.param !== undefined ? val.param : true;\r
+                               } else {\r
+                                       delete rules[prop];\r
+                               }\r
+                       }\r
+               });\r
+\r
+               // evaluate parameters\r
+               $.each(rules, function(rule, parameter) {\r
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;\r
+               });\r
+\r
+               // clean number parameters\r
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = Number(rules[this]);\r
+                       }\r
+               });\r
+               $.each(['rangelength', 'range'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];\r
+                       }\r
+               });\r
+\r
+               if ($.validator.autoCreateRanges) {\r
+                       // auto-create ranges\r
+                       if (rules.min && rules.max) {\r
+                               rules.range = [rules.min, rules.max];\r
+                               delete rules.min;\r
+                               delete rules.max;\r
+                       }\r
+                       if (rules.minlength && rules.maxlength) {\r
+                               rules.rangelength = [rules.minlength, rules.maxlength];\r
+                               delete rules.minlength;\r
+                               delete rules.maxlength;\r
+                       }\r
+               }\r
+\r
+               // To support custom messages in metadata ignore rule methods titled "messages"\r
+               if (rules.messages) {\r
+                       delete rules.messages;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}\r
+       normalizeRule: function(data) {\r
+               if( typeof data == "string" ) {\r
+                       var transformed = {};\r
+                       $.each(data.split(/\s/), function() {\r
+                               transformed[this] = true;\r
+                       });\r
+                       data = transformed;\r
+               }\r
+               return data;\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod\r
+       addMethod: function(name, method, message) {\r
+               $.validator.methods[name] = method;\r
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];\r
+               if (method.length < 3) {\r
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));\r
+               }\r
+       },\r
+\r
+       methods: {\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/required\r
+               required: function(value, element, param) {\r
+                       // check if dependency is met\r
+                       if ( !this.depend(param, element) )\r
+                               return "dependency-mismatch";\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               // could be an array for select-multiple or a string, both are fine this way\r
+                               var val = $(element).val();\r
+                               return val && val.length > 0;\r
+                       case 'input':\r
+                               if ( this.checkable(element) )\r
+                                       return this.getLength(value, element) > 0;\r
+                       default:\r
+                               return $.trim(value).length > 0;\r
+                       }\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote\r
+               remote: function(value, element, param) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+\r
+                       var previous = this.previousValue(element);\r
+                       if (!this.settings.messages[element.name] )\r
+                               this.settings.messages[element.name] = {};\r
+                       previous.originalMessage = this.settings.messages[element.name].remote;\r
+                       this.settings.messages[element.name].remote = previous.message;\r
+\r
+                       param = typeof param == "string" && {url:param} || param;\r
+\r
+                       if ( this.pending[element.name] ) {\r
+                               return "pending";\r
+                       }\r
+                       if ( previous.old === value ) {\r
+                               return previous.valid;\r
+                       }\r
+\r
+                       previous.old = value;\r
+                       var validator = this;\r
+                       this.startRequest(element);\r
+                       var data = {};\r
+                       data[element.name] = value;\r
+                       $.ajax($.extend(true, {\r
+                               url: param,\r
+                               mode: "abort",\r
+                               port: "validate" + element.name,\r
+                               dataType: "json",\r
+                               data: data,\r
+                               success: function(response) {\r
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;\r
+                                       var valid = response === true;\r
+                                       if ( valid ) {\r
+                                               var submitted = validator.formSubmitted;\r
+                                               validator.prepareElement(element);\r
+                                               validator.formSubmitted = submitted;\r
+                                               validator.successList.push(element);\r
+                                               validator.showErrors();\r
+                                       } else {\r
+                                               var errors = {};\r
+                                               var message = response || validator.defaultMessage( element, "remote" );\r
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;\r
+                                               validator.showErrors(errors);\r
+                                       }\r
+                                       previous.valid = valid;\r
+                                       validator.stopRequest(element, valid);\r
+                               }\r
+                       }, param));\r
+                       return "pending";\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength\r
+               minlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength\r
+               maxlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength\r
+               rangelength: function(value, element, param) {\r
+                       var length = this.getLength($.trim(value), element);\r
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/min\r
+               min: function( value, element, param ) {\r
+                       return this.optional(element) || value >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/max\r
+               max: function( value, element, param ) {\r
+                       return this.optional(element) || value <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/range\r
+               range: function( value, element, param ) {\r
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/email\r
+               email: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/\r
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/url\r
+               url: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/\r
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/date\r
+               date: function(value, element) {\r
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO\r
+               dateISO: function(value, element) {\r
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/number\r
+               number: function(value, element) {\r
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits\r
+               digits: function(value, element) {\r
+                       return this.optional(element) || /^\d+$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard\r
+               // based on http://en.wikipedia.org/wiki/Luhn\r
+               creditcard: function(value, element) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+                       // accept only spaces, digits and dashes\r
+                       if (/[^0-9 -]+/.test(value))\r
+                               return false;\r
+                       var nCheck = 0,\r
+                               nDigit = 0,\r
+                               bEven = false;\r
+\r
+                       value = value.replace(/\D/g, "");\r
+\r
+                       for (var n = value.length - 1; n >= 0; n--) {\r
+                               var cDigit = value.charAt(n);\r
+                               var nDigit = parseInt(cDigit, 10);\r
+                               if (bEven) {\r
+                                       if ((nDigit *= 2) > 9)\r
+                                               nDigit -= 9;\r
+                               }\r
+                               nCheck += nDigit;\r
+                               bEven = !bEven;\r
+                       }\r
+\r
+                       return (nCheck % 10) == 0;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept\r
+               accept: function(value, element, param) {\r
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";\r
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo\r
+               equalTo: function(value, element, param) {\r
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated\r
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead\r
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {\r
+                               $(element).valid();\r
+                       });\r
+                       return value == target.val();\r
+               }\r
+\r
+       }\r
+\r
+});\r
+\r
+// deprecated, use $.validator.format instead\r
+$.format = $.validator.format;\r
+\r
+})(jQuery);\r
+\r
+// ajax mode: abort\r
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});\r
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()\r
+;(function($) {\r
+       var pendingRequests = {};\r
+       // Use a prefilter if available (1.5+)\r
+       if ( $.ajaxPrefilter ) {\r
+               $.ajaxPrefilter(function(settings, _, xhr) {\r
+                       var port = settings.port;\r
+                       if (settings.mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               pendingRequests[port] = xhr;\r
+                       }\r
+               });\r
+       } else {\r
+               // Proxy ajax\r
+               var ajax = $.ajax;\r
+               $.ajax = function(settings) {\r
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,\r
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;\r
+                       if (mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               return (pendingRequests[port] = ajax.apply(this, arguments));\r
+                       }\r
+                       return ajax.apply(this, arguments);\r
+               };\r
+       }\r
+})(jQuery);\r
+\r
+// provides cross-browser focusin and focusout events\r
+// IE has native support, in other browsers, use event caputuring (neither bubbles)\r
+\r
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation\r
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target\r
+;(function($) {\r
+       // only implement if not provided by jQuery core (since 1.4)\r
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs\r
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {\r
+               $.each({\r
+                       focus: 'focusin',\r
+                       blur: 'focusout'\r
+               }, function( original, fix ){\r
+                       $.event.special[fix] = {\r
+                               setup:function() {\r
+                                       this.addEventListener( original, handler, true );\r
+                               },\r
+                               teardown:function() {\r
+                                       this.removeEventListener( original, handler, true );\r
+                               },\r
+                               handler: function(e) {\r
+                                       arguments[0] = $.event.fix(e);\r
+                                       arguments[0].type = fix;\r
+                                       return $.event.handle.apply(this, arguments);\r
+                               }\r
+                       };\r
+                       function handler(e) {\r
+                               e = $.event.fix(e);\r
+                               e.type = fix;\r
+                               return $.event.handle.call(this, e);\r
+                       }\r
+               });\r
+       };\r
+       $.extend($.fn, {\r
+               validateDelegate: function(delegate, type, handler) {\r
+                       return this.bind(type, function(event) {\r
+                               var target = $(event.target);\r
+                               if (target.is(delegate)) {\r
+                                       return handler.apply(target, arguments);\r
+                               }\r
+                       });\r
+               }\r
+       });\r
+})(jQuery);\r
+\r
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)\r
+ * Licensed under the MIT License (LICENSE.txt).\r
+ *\r
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.\r
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.\r
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY\r
+ *\r
+ * Version: 3.0.6\r
+ * \r
+ * Requires: 1.2.2+\r
+ */\r
+\r
+(function($) {\r
+\r
+var types = ['DOMMouseScroll', 'mousewheel'];\r
+\r
+if ($.event.fixHooks) {\r
+    for ( var i=types.length; i; ) {\r
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;\r
+    }\r
+}\r
+\r
+$.event.special.mousewheel = {\r
+    setup: function() {\r
+        if ( this.addEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.addEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = handler;\r
+        }\r
+    },\r
+    \r
+    teardown: function() {\r
+        if ( this.removeEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.removeEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = null;\r
+        }\r
+    }\r
+};\r
+\r
+$.fn.extend({\r
+    mousewheel: function(fn) {\r
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");\r
+    },\r
+    \r
+    unmousewheel: function(fn) {\r
+        return this.unbind("mousewheel", fn);\r
+    }\r
+});\r
+\r
+\r
+function handler(event) {\r
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;\r
+    event = $.event.fix(orgEvent);\r
+    event.type = "mousewheel";\r
+    \r
+    // Old school scrollwheel delta\r
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }\r
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }\r
+    \r
+    // New school multidimensional scroll (touchpads) deltas\r
+    deltaY = delta;\r
+    \r
+    // Gecko\r
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {\r
+        deltaY = 0;\r
+        deltaX = -1*delta;\r
+    }\r
+    \r
+    // Webkit\r
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }\r
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }\r
+    \r
+    // Add event and delta to the front of the arguments\r
+    args.unshift(event, delta, deltaX, deltaY);\r
+    \r
+    return ($.event.dispatch || $.event.handle).apply(this, args);\r
+}\r
+\r
+})(jQuery);\r
+\r
+/*\r
+ * jScrollPane - v2.0.0beta12 - 2012-07-24\r
+ * http://jscrollpane.kelvinluck.com/\r
+ *\r
+ * Copyright (c) 2010 Kelvin Luck\r
+ * Dual licensed under the MIT and GPL licenses.\r
+ */\r
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);\r
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)\r
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()\r
 })}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/scripts/jquery.zclip.min.js b/org.tizen.tutorials/html/scripts/jquery.zclip.min.js
index 51471a1..3548cc2 100644 (file)
--- a/org.tizen.tutorials/html/scripts/jquery.zclip.min.js
+++ b/org.tizen.tutorials/html/scripts/jquery.zclip.min.js
@@ -1,12 +1,12 @@
-/*
- * zClip :: jQuery ZeroClipboard v1.1.1
- * http://steamdev.com/zclip
- *
- * Copyright 2011, SteamDev
- * Released under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- *
- * Date: Wed Jun 01, 2011
- */
-
+/*\r
+ * zClip :: jQuery ZeroClipboard v1.1.1\r
+ * http://steamdev.com/zclip\r
+ *\r
+ * Copyright 2011, SteamDev\r
+ * Released under the MIT license.\r
+ * http://www.opensource.org/licenses/mit-license.php\r
+ *\r
+ * Date: Wed Jun 01, 2011\r
+ */\r
+\r
 (function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/scripts/navi.js b/org.tizen.tutorials/html/scripts/navi.js
index badc738..e4569c3 100644 (file)
--- a/org.tizen.tutorials/html/scripts/navi.js
+++ b/org.tizen.tutorials/html/scripts/navi.js
@@ -1,192 +1,192 @@
-//<![CDATA[
-    var staticURL = "http://img-developer.samsung.com";
-       var sslCall = "";
-
-       if('' !== 'N') {
-               var locationStr = location.href;
-               if(locationStr.indexOf("https://") > -1) {
-                       location.href = "http://" + locationStr.substring(8);
-               }     
-    }
-
-//     if( typeof($) === function ) {
-               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
-               //? ??? ?? ?? ??? ?? ?? ???.
-//     }
-    $SD.pagination.alt = {
-               first:"go first",
-               prev:"go prev",
-               next:"go next",
-               last:"go last"
-    };
-    $(document).ready(function(){
-       var myVar;
-           topSearchInit();//top search ??
-           $('#searchTop').attr("autocomplete","off");
-           var searchingBoolean = false;
-           
-           var topSearchChange = function(){
-               
-               if (searchingBoolean) return;
-               
-                       var searchInput = $('#searchTop').val();
-                       
-                       if($('#searchTop').val() != ""){
-                               $("#topAutocomplete").hide();
-                               searchingBoolean = true;
-                               
-                               var jsonData = {
-                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
-                                               async : true,
-                                               data : { searchInput : searchInput},
-                                               success : function(data){
-                                                       if (searchInput == $('#searchTop').val()){
-                                                               var autoComplete = data.kwdNm;
-                                                               var tmpHtml = "";
-                                                               
-                                                               if (autoComplete.length > 0){
-                                                                       $('#topAutocomplete').children().remove();
-                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
-                                                                       $.each(autoComplete, function(i, item){
-                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
-                                                                               a.data('keyword', item.kwdNm);
-                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));
-                                                                       });
-                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
-                                                                               if(e.which == 9 && e.shiftKey) {
-                                                                                       return true;
-                                                                               }
-                                                                               
-                                                                               if(e.which == 9) {
-                                                                                       e.preventDefault();
-                                                                                       $('#topAutocomplete').hide();   
-                                                                                       setTimeout(function() {
-                                                                                               $("#searchTopBtn").focus();
-                                                                                       }, 1);
-                                                                               }
-                                                                               
-                                                                       });
-                                                                       $("#searchTopBtn").off("focusout", function(e) {});
-                                                                   $("#searchTopBtn").on("focusout", function(e) {
-                                                                               $('#topAutocomplete').hide();
-                                                                       });
-                                                               }else{
-                                                                       $('#topAutocomplete').children().remove();
-                                                               }
-                                                               if($('#searchTop').val() == ""){
-                                                                       $("#topAutocomplete").hide();
-                                                                       searchingBoolean = false;
-                                                                       return;
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               searchingBoolean = false;
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                               if (autoComplete.length == 0){
-                                                                       $("#topAutocomplete").hide();
-                                                               }else{
-                                                                       if (searchInput == $('#searchTop').val()){
-                                                                               $("#topAutocomplete").show();
-                                                                               var $searchList = $("#topAutocomplete").find('ul');
-                                                                               var hei = $searchList.outerHeight();
-                                                                               if(hei>180){
-                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});
-                                                                               }
-                                                                       }else{
-                                                                               searchingBoolean = false;
-                                                                               topSearchChange();
-                                                                       }
-                                                               }
-                                                       }else{
-                                                               searchingBoolean = false;
-                                                               topSearchChange();
-                                                       }
-                                               },
-                                               error : function() {searchingBoolean = false;}
-                                               
-                               };
-                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);
-                               $SD.ajax.get(jsonData);
-                               searchingBoolean = false;
-                       }
-                       
-                       //console.log("/search/autoComplete.do end");
-                       //console.groupEnd();
-               };
-               
-               $('#searchTop').keyup(function(e){
-                       if($('#searchTop').val() == ""){
-                               $('#topAutocomplete').children().remove();
-                               $("#topAutocomplete").hide();
-                       }else{
-                               if(e.which == 13){
-                                       search();
-                               }else{
-                                       topSearchChange();
-                               }
-                       }
-               });
-               
-               var search = function(){
-                       if($.trim($('#searchTop').val()) == ""){
-                               alert('Search keyword is required.');
-                       }else{
-                               $('#topSearchForm').submit();
-                       }
-               };
-               $("#topAutocomplete").on('mousedown','ul li a', function(e){
-                       e.preventDefault();
-                       var keyword = $(this).data('keyword');
-                       $("#searchTop").val(keyword);
-                       $('#topSearchForm').submit();
-               });
-               
-               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
-                       if(e.which == 13) {
-                               e.preventDefault();
-                               var keyword = $(this).data('keyword');
-                               $("#searchTop").val(keyword);
-                               $('#topSearchForm').submit();                   
-                       }
-               });
-               
-               $('#searchTopBtn').click(function(e){
-                       search();       
-               });  
-    });
-    
-    function topSearchEnter(){
-       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
-               alert('Search keyword is required.');
-               return false;
-       }else{
-               return true;
-       }
-    }
-
-/* Tracking Code TOTAL */
-               var _gaq = _gaq || [];
-               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
-               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
-               _gaq.push(['_setAccount', 'UA-6892706-3']);
-               _gaq.push(['_setDomainName', 'samsung.com']);
-               _gaq.push(['_setAllowLinker', true]);
-               _gaq.push(['_trackPageview']);
-               (function() {
-                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-               })();
-       
-               <!--// Tracking Code 1 -->
-                       var _gaq = _gaq || [];
-                       _gaq.push(['_setAccount', 'UA-6892706-4']);
-                       _gaq.push(['_trackPageview']);
-                       (function() {
-                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-                       })();
+//<![CDATA[\r
+    var staticURL = "http://img-developer.samsung.com";\r
+       var sslCall = "";\r
+\r
+       if('' !== 'N') {\r
+               var locationStr = location.href;\r
+               if(locationStr.indexOf("https://") > -1) {\r
+                       location.href = "http://" + locationStr.substring(8);\r
+               }     \r
+    }\r
+\r
+//     if( typeof($) === function ) {\r
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.\r
+               //? ??? ?? ?? ??? ?? ?? ???.\r
+//     }\r
+    $SD.pagination.alt = {\r
+               first:"go first",\r
+               prev:"go prev",\r
+               next:"go next",\r
+               last:"go last"\r
+    };\r
+    $(document).ready(function(){\r
+       var myVar;\r
+           topSearchInit();//top search ??\r
+           $('#searchTop').attr("autocomplete","off");\r
+           var searchingBoolean = false;\r
+           \r
+           var topSearchChange = function(){\r
+               \r
+               if (searchingBoolean) return;\r
+               \r
+                       var searchInput = $('#searchTop').val();\r
+                       \r
+                       if($('#searchTop').val() != ""){\r
+                               $("#topAutocomplete").hide();\r
+                               searchingBoolean = true;\r
+                               \r
+                               var jsonData = {\r
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",\r
+                                               async : true,\r
+                                               data : { searchInput : searchInput},\r
+                                               success : function(data){\r
+                                                       if (searchInput == $('#searchTop').val()){\r
+                                                               var autoComplete = data.kwdNm;\r
+                                                               var tmpHtml = "";\r
+                                                               \r
+                                                               if (autoComplete.length > 0){\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));\r
+                                                                       $.each(autoComplete, function(i, item){\r
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");\r
+                                                                               a.data('keyword', item.kwdNm);\r
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));\r
+                                                                       });\r
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {\r
+                                                                               if(e.which == 9 && e.shiftKey) {\r
+                                                                                       return true;\r
+                                                                               }\r
+                                                                               \r
+                                                                               if(e.which == 9) {\r
+                                                                                       e.preventDefault();\r
+                                                                                       $('#topAutocomplete').hide();   \r
+                                                                                       setTimeout(function() {\r
+                                                                                               $("#searchTopBtn").focus();\r
+                                                                                       }, 1);\r
+                                                                               }\r
+                                                                               \r
+                                                                       });\r
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});\r
+                                                                   $("#searchTopBtn").on("focusout", function(e) {\r
+                                                                               $('#topAutocomplete').hide();\r
+                                                                       });\r
+                                                               }else{\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                               }\r
+                                                               if($('#searchTop').val() == ""){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                                       searchingBoolean = false;\r
+                                                                       return;\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               searchingBoolean = false;\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                               if (autoComplete.length == 0){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               $("#topAutocomplete").show();\r
+                                                                               var $searchList = $("#topAutocomplete").find('ul');\r
+                                                                               var hei = $searchList.outerHeight();\r
+                                                                               if(hei>180){\r
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});\r
+                                                                               }\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                       }else{\r
+                                                               searchingBoolean = false;\r
+                                                               topSearchChange();\r
+                                                       }\r
+                                               },\r
+                                               error : function() {searchingBoolean = false;}\r
+                                               \r
+                               };\r
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);\r
+                               $SD.ajax.get(jsonData);\r
+                               searchingBoolean = false;\r
+                       }\r
+                       \r
+                       //console.log("/search/autoComplete.do end");\r
+                       //console.groupEnd();\r
+               };\r
+               \r
+               $('#searchTop').keyup(function(e){\r
+                       if($('#searchTop').val() == ""){\r
+                               $('#topAutocomplete').children().remove();\r
+                               $("#topAutocomplete").hide();\r
+                       }else{\r
+                               if(e.which == 13){\r
+                                       search();\r
+                               }else{\r
+                                       topSearchChange();\r
+                               }\r
+                       }\r
+               });\r
+               \r
+               var search = function(){\r
+                       if($.trim($('#searchTop').val()) == ""){\r
+                               alert('Search keyword is required.');\r
+                       }else{\r
+                               $('#topSearchForm').submit();\r
+                       }\r
+               };\r
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){\r
+                       e.preventDefault();\r
+                       var keyword = $(this).data('keyword');\r
+                       $("#searchTop").val(keyword);\r
+                       $('#topSearchForm').submit();\r
+               });\r
+               \r
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){\r
+                       if(e.which == 13) {\r
+                               e.preventDefault();\r
+                               var keyword = $(this).data('keyword');\r
+                               $("#searchTop").val(keyword);\r
+                               $('#topSearchForm').submit();                   \r
+                       }\r
+               });\r
+               \r
+               $('#searchTopBtn').click(function(e){\r
+                       search();       \r
+               });  \r
+    });\r
+    \r
+    function topSearchEnter(){\r
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){\r
+               alert('Search keyword is required.');\r
+               return false;\r
+       }else{\r
+               return true;\r
+       }\r
+    }\r
+\r
+/* Tracking Code TOTAL */\r
+               var _gaq = _gaq || [];\r
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';\r
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);\r
+               _gaq.push(['_setAccount', 'UA-6892706-3']);\r
+               _gaq.push(['_setDomainName', 'samsung.com']);\r
+               _gaq.push(['_setAllowLinker', true]);\r
+               _gaq.push(['_trackPageview']);\r
+               (function() {\r
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+               })();\r
+       \r
+               <!--// Tracking Code 1 -->\r
+                       var _gaq = _gaq || [];\r
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);\r
+                       _gaq.push(['_trackPageview']);\r
+                       (function() {\r
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+                       })();\r
diff --git a/org.tizen.tutorials/html/scripts/search.js b/org.tizen.tutorials/html/scripts/search.js
index d1ae5ad..a67a795 100644 (file)
--- a/org.tizen.tutorials/html/scripts/search.js
+++ b/org.tizen.tutorials/html/scripts/search.js
@@ -1,168 +1,168 @@
-/** 
- * [PAGE] Search Result
- * date : 20120810
- * author : 전종호
- */
-function searchInit()
-{
-       var focusTarget = "input";
-
-       //$("#autocomplete").hide();
-
-       //$("#searchInput").bind("keydown", checkSearchText);
-       
-       $("#searchInput").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchInput" ).focusin( function() {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $("#autocomplete").bind("mouseleave",function(){
-               $(this).hide();
-               $("#btnDropdown").removeClass("dropdownoff");
-               $("#btnDropdown").addClass("dropdown");         
-       });
-
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       });
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchInput").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       //$(".autocomplete").css("visibility", "visible");
-                       $("#autocomplete").show();
-                       
-                       $("#btnDropdown").removeClass("dropdown");
-                       $("#btnDropdown").addClass("dropdownoff");
-               }
-               else{
-                       //$(".autocomplete").css("visibility", "hidden");
-                       $("#autocomplete").hide();
-                       
-                       $("#btnDropdown").removeClass("dropdownoff");
-                       $("#btnDropdown").addClass("dropdown");
-               }
-       }
-}
-
-
-
-function topSearchInit()
-{
-       var focusTarget = "input";
-
-       //$("#searchTop").bind("keydown", checkSearchText);
-       
-       $("#searchTop").focusout(function() {
-               if( focusTarget == "dropdown" )
-               {
-                       return false;
-               }
-               else
-               {       
-                       //toggleClass( false );
-               }
-       });
-       
-       $( "#searchTop" ).focusin( function()   {
-               focusTarget = "input";
-       });
-
-       $("#btnDropdown").mousedown( function(){
-               focusTarget = "dropdown";
-       });
-
-       $(".autocomplete ul li").focusin( function() {
-               //
-       });
-       
-       $(".autocomplete ul li:last-child").focusout( function() {
-               toggleClass( false );
-       })
-       
-       $("#btnDropdown").click( function(){
-               //alert("btn click");
-               if( $("#searchInput").val().length == 0 ){ 
-                       return false;
-               }
-               else{
-                       if( $("#btnDropdown").hasClass("dropdown") ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );
-                       }
-               }
-
-               return false;
-       });
-
-       function checkSearchText(){
-               setTimeout(function(){
-                       var txt = $("#searchTop").val();
-
-                       if( txt.length > 0 ){
-                               toggleClass( true );
-                       }
-                       else{
-                               toggleClass( false );   
-                       }
-               }, 1);
-       }
-
-       function toggleClass( bo ){
-               if( bo ){
-                       $(".topAutocomplete").css("visibility", "visible");
-               }else{
-                       $(".topAutocomplete").css("visibility", "hidden");
-                       $("#topAutocomplete").hide();
-               }
-       }
-}
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+ */\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#autocomplete").hide();\r
+\r
+       //$("#searchInput").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $("#autocomplete").bind("mouseleave",function(){\r
+               $(this).hide();\r
+               $("#btnDropdown").removeClass("dropdownoff");\r
+               $("#btnDropdown").addClass("dropdown");         \r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       //$(".autocomplete").css("visibility", "visible");\r
+                       $("#autocomplete").show();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+               }\r
+               else{\r
+                       //$(".autocomplete").css("visibility", "hidden");\r
+                       $("#autocomplete").hide();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+\r
+\r
+\r
+function topSearchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#searchTop").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchTop").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {       \r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchTop" ).focusin( function()   {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchTop").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".topAutocomplete").css("visibility", "visible");\r
+               }else{\r
+                       $(".topAutocomplete").css("visibility", "hidden");\r
+                       $("#topAutocomplete").hide();\r
+               }\r
+       }\r
+}\r
diff --git a/org.tizen.tutorials/html/scripts/showhide.js b/org.tizen.tutorials/html/scripts/showhide.js
index 2e85407..b882d14 100644 (file)
--- a/org.tizen.tutorials/html/scripts/showhide.js
+++ b/org.tizen.tutorials/html/scripts/showhide.js
@@ -1,204 +1,204 @@
-/*all Show Hide devicespecs List*/
-if($('div#contents').find('.devicespecs-util').length){
-var self = $('div#contents').find('.devicespecs-util');
-
-$('.showA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-var me = $(this);
-var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-if ( !me.next().is(':visible') ){
-       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
-       me.find('em').text('Hide');
-       me.next().show();
-}
-});
-return false;
-})
-$('.hideA', self).bind ("click", function (){
-$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
-
-       var me = $(this);
-       var idx = $('.devicespecifications .devicespec-tit').index(this);
-
-       if ( me.next().is(':visible') ){
-               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
-               me.find('em').text('Show');
-               me.next().hide();
-       }
-                                       
-});
-return false;
-})
-}      
-
-/*toggle devicespecs List*/
-if($('div#contents').find('.devicespec-tit').length){
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-$('a', self).bind ("click", function(){
-       var idx = $('.devicespec-tit a').index(this);
-
-       if ( $(this).parent().parent().next().is(':visible') ){
-               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
-
-               self.find('em').text('Show');
-               self.next().hide();
-
-               return false;
-       }else{
-               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
-               self.find('em').text('Hide');
-
-               self.next().show();
-
-               return false;
-       }
-
-});
-
-});
-}
-
-$('ul.devicespecifications li div.devicespec-con').hide();
-
-
-$('.devicespec-tit').each(function(){
-var self = $(this);
-var arrow =  $('a', self);
-
-if(self.next().is(':visible')){
-arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
-self.find('em').text('Hide');
-}else{
-arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
-self.find('em').text('Show');
-}
-
-});
-
-$(document).ready(function(){
-       var openheading = function(target) {
-               var origin = $(target);
-               target = origin.closest('.devicespec-con');
-               if (!(target.length > 0)) {
-                       target = origin.closest('.devicespec-tit');
-               }
-               if (target.length > 0) {
-                       if (!$('.devicespec-con', target.parent()).is(":visible")) {
-                               $("div.devicespec-tit a.bt-arr", target.parent()).click();
-                       }
-               }
-
-               $(window.location.hash)[0].scrollIntoView();
-       };
-
-       $(".opensection").click(function(){
-               var target = $($(this).attr("href"));//.closest('.devicespec-con');
-               openheading(target);
-       });
-
-       if (window.location.hash) {
-               var target = $(window.location.hash);
-               openheading(target);
-               //$(target).focus(); //uncomment if fail to work
-       }
-
-       var isScrolledIntoView = function(elem)
-       {
-               var docViewTop = $('#contents').scrollTop();
-               var docViewBottom = docViewTop + $('#contents').height();
-
-               var elemTop = $(elem).offset().top;
-               var elemBottom = elemTop + $(elem).height();
-
-               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
-                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
-       }
-
-       $('#contents').scroll();
-
-       var checkBreadCrumbs = function() {
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-                       $('.help_breadcrumbs').hide();
-               } else {
-                       $('a.top.sms').hide();
-                       $('.help_breadcrumbs').show();
-               }
-               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
-       }       
-
-       var updateH = function(){
-               checkBreadCrumbs();
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
-
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
-               if ($('a.top').is(':visible'))
-               {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
-               } else {
-                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
-               }
-               $('#toc').css('height', $('#toc').css('height') - 5);
-
-               $('#toc_border').height($('#toc').outerHeight() + 5);
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
-               $('#toc').css('top', $('#toc_border').position()['top'] + 7);
-               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
-               //$('#toc').css('width', $('#toc_border').width() - 40);
-               $('#toc').css('width', $('#toc_border').width() - 49);
-       };
-
-       var updateH_no_toc = function() {
-               checkBreadCrumbs();
-               if (!isScrolledIntoView($('#contents .content h1')))
-               {
-                       $('a.top.sms').show();
-               } else {
-                       $('a.top.sms').hide();
-               }
-               $('a.top').css('bottom', $('#footer').outerHeight());
-               
-               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
-       }
-
-       if ($('body').hasClass('no-toc')) {
-               updateH = updateH_no_toc;
-       }
-       $(window).resize(updateH);
-       $('#contents').scroll(updateH);
-       $(window).resize();
-       
-       $('a.top').click(function(){$('#contents').scrollTop(0)});
-
-       var hashchanged = function() {
-               if (window.location.hash.length) {
-                       openheading(window.location.hash);
-                       //$(window.location.hash).scrollTo();
-                       $(window.location.hash)[0].scrollIntoView();
-
-               } else 
-               {
-                       $('#contents').scrollTop(0);
-               }
-       };
-
-       if (("onhashchange" in window) && !($.browser.msie)) { 
-               $(window).bind( 'hashchange',hashchanged);
-       }
-       else { 
-               var prevHash = window.location.hash;
-               window.setInterval(function () {
-                       if (window.location.hash != prevHash) {
-                               hashchanged();
-                               prevHash = window.location.hash;
-                       }
-               }, 100);
-       }
-});
+/*all Show Hide devicespecs List*/\r
+if($('div#contents').find('.devicespecs-util').length){\r
+var self = $('div#contents').find('.devicespecs-util');\r
+\r
+$('.showA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+var me = $(this);\r
+var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+if ( !me.next().is(':visible') ){\r
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+       me.find('em').text('Hide');\r
+       me.next().show();\r
+}\r
+});\r
+return false;\r
+})\r
+$('.hideA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+\r
+       var me = $(this);\r
+       var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+       if ( me.next().is(':visible') ){\r
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+               me.find('em').text('Show');\r
+               me.next().hide();\r
+       }\r
+                                       \r
+});\r
+return false;\r
+})\r
+}      \r
+\r
+/*toggle devicespecs List*/\r
+if($('div#contents').find('.devicespec-tit').length){\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+$('a', self).bind ("click", function(){\r
+       var idx = $('.devicespec-tit a').index(this);\r
+\r
+       if ( $(this).parent().parent().next().is(':visible') ){\r
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+               self.find('em').text('Show');\r
+               self.next().hide();\r
+\r
+               return false;\r
+       }else{\r
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+               self.find('em').text('Hide');\r
+\r
+               self.next().show();\r
+\r
+               return false;\r
+       }\r
+\r
+});\r
+\r
+});\r
+}\r
+\r
+$('ul.devicespecifications li div.devicespec-con').hide();\r
+\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+var arrow =  $('a', self);\r
+\r
+if(self.next().is(':visible')){\r
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));\r
+self.find('em').text('Hide');\r
+}else{\r
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));\r
+self.find('em').text('Show');\r
+}\r
+\r
+});\r
+\r
+$(document).ready(function(){\r
+       var openheading = function(target) {\r
+               var origin = $(target);\r
+               target = origin.closest('.devicespec-con');\r
+               if (!(target.length > 0)) {\r
+                       target = origin.closest('.devicespec-tit');\r
+               }\r
+               if (target.length > 0) {\r
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {\r
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();\r
+                       }\r
+               }\r
+\r
+               $(window.location.hash)[0].scrollIntoView();\r
+       };\r
+\r
+       $(".opensection").click(function(){\r
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');\r
+               openheading(target);\r
+       });\r
+\r
+       if (window.location.hash) {\r
+               var target = $(window.location.hash);\r
+               openheading(target);\r
+               //$(target).focus(); //uncomment if fail to work\r
+       }\r
+\r
+       var isScrolledIntoView = function(elem)\r
+       {\r
+               var docViewTop = $('#contents').scrollTop();\r
+               var docViewBottom = docViewTop + $('#contents').height();\r
+\r
+               var elemTop = $(elem).offset().top;\r
+               var elemBottom = elemTop + $(elem).height();\r
+\r
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)\r
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );\r
+       }\r
+\r
+       $('#contents').scroll();\r
+\r
+       var checkBreadCrumbs = function() {\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+                       $('.help_breadcrumbs').hide();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+                       $('.help_breadcrumbs').show();\r
+               }\r
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));\r
+       }       \r
+\r
+       var updateH = function(){\r
+               checkBreadCrumbs();\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));\r
+\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+\r
+               if ($('a.top').is(':visible'))\r
+               {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);\r
+               } else {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);\r
+               }\r
+               $('#toc').css('height', $('#toc').css('height') - 5);\r
+\r
+               $('#toc_border').height($('#toc').outerHeight() + 5);\r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);\r
+               //$('#toc').css('width', $('#toc_border').width() - 40);\r
+               $('#toc').css('width', $('#toc_border').width() - 49);\r
+       };\r
+\r
+       var updateH_no_toc = function() {\r
+               checkBreadCrumbs();\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+               }\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               \r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+       }\r
+\r
+       if ($('body').hasClass('no-toc')) {\r
+               updateH = updateH_no_toc;\r
+       }\r
+       $(window).resize(updateH);\r
+       $('#contents').scroll(updateH);\r
+       $(window).resize();\r
+       \r
+       $('a.top').click(function(){$('#contents').scrollTop(0)});\r
+\r
+       var hashchanged = function() {\r
+               if (window.location.hash.length) {\r
+                       openheading(window.location.hash);\r
+                       //$(window.location.hash).scrollTo();\r
+                       $(window.location.hash)[0].scrollIntoView();\r
+\r
+               } else \r
+               {\r
+                       $('#contents').scrollTop(0);\r
+               }\r
+       };\r
+\r
+       if (("onhashchange" in window) && !($.browser.msie)) { \r
+               $(window).bind( 'hashchange',hashchanged);\r
+       }\r
+       else { \r
+               var prevHash = window.location.hash;\r
+               window.setInterval(function () {\r
+                       if (window.location.hash != prevHash) {\r
+                               hashchanged();\r
+                               prevHash = window.location.hash;\r
+                       }\r
+               }, 100);\r
+       }\r
+});\r
diff --git a/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm
index a92eba2..02511a8 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm
@@ -41,7 +41,7 @@
    <li><a href="package_tutorial_w.htm">Package: Providing Information about Package Installation and Installed Packages</a> <p>Demonstrates how you can retrieve package information, receive package notifications, and perform package management actions.</p></li> 
   </ul> 
   
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>      
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>     
 <ul>
    <li><a href="data_tutorial_w.htm">Data Control: Providing Information about Packages and their Installation</a> <p>Demonstrates how you can share data between applications.</p></li>  
 </ul>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm
deleted file mode 100644 (file)
index af78b91..0000000
--- a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm
+++ /dev/null
@@ -1,487 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-    <title>Bluetooth Low Energy: Managing a Bluetooth Low Energy Device</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/><img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a></li>
-            <li><a href="#Discovering_BT_Devices">Discovering Bluetooth Low Energy Devices</a></li>
-            <li><a href="#Managing_Advertising">Managing the Advertising Options</a></li>
-            <li><a href="#Connecting">Connecting to a Bluetooth Low Energy Device</a></li>
-            <li><a href="#Connection_Notification">Receiving Notifications on Connection State Changes</a></li>
-            <li><a href="#Retrieving_Services">Retrieving Bluetooth GATT Services</a></li>
-            <li><a href="#Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</a></li>
-           <li><a href="#Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</a></li>
-            <li><a href="#Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm">Bluetooth Guide</a></li>
-            <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li>
-            <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html">Bluetooth API for Wearable Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Bluetooth Low Energy: Managing a Bluetooth Low Energy Device</h1>
-
-
- <p>This tutorial demonstrates how you can manage Bluetooth Low Energy devices and exchange data with a peer device.</p>
-
-   <table class="note">
-<tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.</td>
-    </tr>
-    <tr>
-     <td class="note">The Bluetooth API is not supported on any Tizen Emulators.</td>
-    </tr>
-   </tbody>
-  </table>
-
-      <h2 id="warm_up" name="warm_up">Warm-up</h2>
-      <p>Become familiar with the Bluetooth Low Energy API basics by learning about:</p>
-      <ul>
-       <li><a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a> <p>Enable and disable the local Bluetooth adapter, and change the device name for it.</p></li>
-       <li><a href="#Discovering_BT_Devices">Discovering Bluetooth Low Energy Devices</a> <p>Search for remote devices.</p></li>
-       <li><a href="#Managing_Advertising">Managing the Advertising Options</a> <p>Manage what information is advertised to any Bluetooth Low Energy device in the proximity.</p></li>
-       <li><a href="#Connecting">Connecting to a Bluetooth Low Energy Device</a> <p>Connect to a detected Bluetooth Low Energy device.</p></li>
-       <li><a href="#Connection_Notification">Receiving Notifications on Connection State Changes</a> <p>Monitor the connection state to a remote Bluetooth Low Energy device.</p></li>
-       <li><a href="#Retrieving_Services">Retrieving Bluetooth GATT Services</a> <p>Check information about the Bluetooth GATT services provided by a remote device.</p></li>
-       <li><a href="#Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</a> <p>Read and write a value of the Bluetooth GATT characteristic of a remote device.</p></li>
-       <li><a href="#Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</a> <p>Monitor changes in a Bluetooth GATT characteristic value.</p></li>
-       <li><a href="#Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</a> <p>Read and write a value of the Bluetooth GATT characteristic descriptor of a remote device.</p></li>
-      </ul>
-
-  <h2 id="Managing_BT_Adapter" name="Managing_BT_Adapter">Managing the Local Bluetooth Adapter</h2>
-
-  <p>To enable the Bluetooth device, request the built-in Settings application to present the relevant switch to the user so that they can enable or disable the Bluetooth. For more information, see <a href="bluetooth_tutorial_w.htm#Managing_BT_Adapter">Managing the Local Bluetooth Adapter in the Bluetooth Tutorial</a>.</p>
-
-  <h2 id="Discovering_BT_Devices" name="Discovering_BT_Devices">Discovering Bluetooth Low Energy Devices</h2>
-
-  <p>Learning how to search for remote devices is a basic Bluetooth management skill:</p>
-  <ol>
-   <li>Define a scan event handler by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEScanCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEScanCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEScanCallback">wearable</a> applications).
-    <p>The callback is invoked when the scan has started, a remote device has been detected, or the scan is finished.</p>
-<pre class="prettyprint">
-var callbacks = 
-{
-&nbsp;&nbsp;&nbsp;onstarted: function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Scan started&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;ondevicefound: function(device) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device: &quot; + device.name + &quot; [&quot; + device.address + &quot;]&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onfinished: function(devices) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Scan finished. Found &quot; + devices.length + &quot; devices.&quot;);
-&nbsp;&nbsp;&nbsp;}
-};
-</pre>
-    <table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.</td>
-      </tr>
-     </tbody>
-    </table> </li>
-
-   <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
-   </li>
-
-   <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.startScan(callbacks);</pre>
-   </li>
-   <li><p>When you find the right remote device or the user cancels the scanning, disable the scan using the <span style="font-family: Courier New,Courier,monospace">stopScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.stopScan();</pre>
-   </li>
-
-  </ol>
-
-  <h2 id="Managing_Advertising" name="Managing_Advertising">Managing the Advertising Options</h2>
-  <p>The Bluetooth Low Energy technology allows a device to broadcast some information without a connection between devices. The Bluetooth Low Energy API provides methods to control this advertising (broadcasting).</p>
-  <p>Learning how to control what information is advertised by the device is a useful Bluetooth Low Energy skill:</p>
-
-  <ol>
-   <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
-   </li>
-
-   <li><p>Set up options and start advertising with the <span style="font-family: Courier New,Courier,monospace">startAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">
-var advertiseData = new tizen.BluetoothLEAdvertiseData(
-{
-&nbsp;&nbsp;&nbsp;includeName: true,
-&nbsp;&nbsp;&nbsp;serviceuuids: [&quot;180f&quot;]  /* 180F is 16bit Battery Service UUID */
-});
-var connectable = true;
-
-adapter.startAdvertise(advertiseData, &quot;ADVERTISE&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function onstate(state)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Advertising configured: &quot; + state);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(error)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;startAdvertise() failed: &quot; + error.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;LOW_LATENCY&quot;, connectable);
-</pre>
-    <table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">To learn how to make your mobile device visible to other Bluetooth devices, see <a href="bluetooth_tutorial_w.htm#Managing_BT_Adapter">Managing the Local Bluetooth Adapter of the Bluetooth Tutorial</a>.</td>
-      </tr>
-     </tbody>
-    </table>
-   </li>
-   <li><p>To disable the advertising, use the <span style="font-family: Courier New,Courier,monospace">stopAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.stopAdvertise();</pre>
-   </li>
-  </ol>
-
-  <h2 id="Connecting" name="Connecting">Connecting to a Bluetooth Low Energy Device</h2>
-
-  <p>Learning how to connect to other devices is a basic Bluetooth Low Energy management skill:</p>
-  <ol>
-   <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
-   </li>
-   <li><p>Define success and error callbacks for the connect operation:</p>
-<pre class="prettyprint">
-function connectFail(error) 
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Failed to connect to device: &quot; + e.message);
-}
-
-function connectSuccess() 
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Connected to device&quot;);
-}
-</pre>
-   </li>
-
-   <li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
-     <p>Within the callback request, establish a connection with the found device using the <span style="font-family: Courier New,Courier,monospace">connect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">
-var remoteDevice = null;
-
-function onDeviceFound(device)
-{
-&nbsp;&nbsp;&nbsp;if (remoteDevice === null) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice = device;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device &quot; + device.name + &quot;. Connecting...&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.connect(connectSuccess, connectFail);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;adapter.stopScan();
-}
-</pre>
-   </li>
-
-   <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan using the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> adapter:</p>
-<pre class="prettyprint">adapter.startScan({ondevicefound: onDeviceFound});</pre></li>
-
-   <li><p>When the connection to the remote device is no longer required, disconnect from the device by calling the <span style="font-family: Courier New,Courier,monospace">disconnect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
-<pre class="prettyprint">remoteDevice.disconnect();</pre></li>
-
-  </ol>
-
-  <h2 id="Connection_Notification" name="Connection_Notification">Receiving Notifications on Connection State Changes</h2>
-
-  <p>Learning how to receive notifications whenever the device connection is established or lost is a useful Bluetooth management skill:</p>
-  <ol>
-
-   <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
-   </li>
-   <li><p>Define a connection state change listener by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
-<pre class="prettyprint">
-var connectionListener = 
-{
-&nbsp;&nbsp;&nbsp;onconnected: function(device) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Connected to the device: &quot; + device.name + &quot; [&quot; + device.address + &quot;]&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;ondisconnected: function(device) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Disconnected from the device &quot; + device.name + &quot; [&quot; + device.address + &quot;]&quot;);
-&nbsp;&nbsp;&nbsp;}
-};
-</pre>
-   </li>
-
-   <li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
-     <p>Within the callback, register a connection state change listener using the <span style="font-family: Courier New,Courier,monospace">addConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">
-var remoteDevice = null;
-var watchId;
-
-function onDeviceFound(device)
-{
-&nbsp;&nbsp;&nbsp;if (remoteDevice === null) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice = device;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device &quot; + device.name + &quot;. Connecting...&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;watchId = remoteDevice.addConnectStateChangeListener(connectionListener);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice.connect();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;adapter.stopScan();
-}
-</pre>
-   </li>
-
-   <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan:</p>
-<pre class="prettyprint">adapter.startScan({ondevicefound: onDeviceFound});</pre></li>
-
-   <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
-<pre class="prettyprint">remoteDevice.removeConnectStateChangeListener(watchId);</pre></li>
-  </ol>
-
-  <h2 id="Retrieving_Services" name="Retrieving_Services">Retrieving Bluetooth GATT Services</h2>
-
-  <p>Learning how to retrieve a list of GATT services (Generic Attribute) provided by a remote device is basic Bluetooth Low Energy management skill:</p>
-  <ol>
-
-   <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
-   <li><p>Define a connection state change listener by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
-<pre class="prettyprint">
-function showGATTService(service, indent)
-{
-&nbsp;&nbsp;&nbsp;if (indent === undefined) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indent = &quot;&quot;;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;console.log(indent + &quot;Service &quot; + service.uuid + &quot;. Has &quot; + service.characteristics.length 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; characteristics and &quot; + service.services.length + &quot; sub-services.&quot;);
-
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; service.services.length; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showGATTService(service.services[i], indent + &quot;   &quot;);
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-   </li>
-   <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
-   </li>
-   <li><p>Retrieve GATT service information using the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface for every service UUID:</p>
-<pre class="prettyprint">
-var i = 0, service = null;
-
-for (i; i &lt; serviceUUIDs.length; i++) 
-{
-
-&nbsp;&nbsp;&nbsp;service = remoteDevice.getService(serviceUUIDs[i]);
-
-&nbsp;&nbsp;&nbsp;showGATTService(service);
-}</pre>
-   </li>
-
-  </ol>
-
-       <h2 id="Characteristic_Value" name="Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</h2>
-
-  <p>Learning how to read and write a value of the Bluetooth characteristic is a useful Bluetooth Low Energy management skill:</p>
-  <ol>
-
-    <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
-   <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
-   </li>
-   <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
-   </li>
-   <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
-   </li>
-   <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic:</p>
-<pre class="prettyprint">
-function readSuccess(value)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Characteristic value: &quot; + value);
-}
-
-function readFail(error)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;readValue() failed: &quot; + error);
-}
-</pre>
-   </li>
-   <li><p>To retrieve the GATT characteristic value, use the <span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
-<pre class="prettyprint">
-if (!property.isReadable) 
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Property seems not to be readable. Attempting to read...&quot;);
-}
-property.readValue(readSuccess, readFail);</pre>
-   </li>
-   <li><p>To change the characteristic value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
-<pre class="prettyprint">
-function writeSuccess(value)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Written&quot;);
-}
-
-function writeFail(error)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;writeValue() failed: &quot; + error);
-}
-
-if (!property.isWritable) 
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Property seems not to be writable. Attempting to write...&quot;);
-}
-var newValue = [82];
-
-property.writeValue(newValue, writeSuccess, writeFail);
-</pre>
-   </li>
-  </ol>
-
-  <h2 id="Characterictic_Notification" name="Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</h2>
-
-  <p>Learning how to monitor a changes in a Bluetooth characteristic is a useful Bluetooth Low Energy management skill:</p>
-  <ol>
-
-    <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
-   <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
-   </li>
-   <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
-   </li>
-   <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
-   </li>
-   <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic every time the value changes:</p>
-<pre class="prettyprint">
-function onValueChange(value)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Characteristic value is now: &quot; + value);
-}
-</pre>
-   </li>
-
-   <li><p>Register a value change listener using the <span style="font-family: Courier New,Courier,monospace">addValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
-<pre class="prettyprint">var watchId = property.addValueChangeListener(onValueChange);</pre></li>
-
-   <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
-<pre class="prettyprint">property.removeValueChangeListener(watchId);</pre></li>
-  </ol>
-
-  <h2 id="Descriptor_Value" name="Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</h2>
-
-  <p>Learning how to read and write a value of the Bluetooth descriptor is a useful Bluetooth Low Energy management skill:</p>
-  <ol>
-
-   <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
-   <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
-   </li>
-   <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method  of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
-   </li>
-   <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var characteristic = gattService.characteristics[0];</pre></li>
-   <li><p>Select an interesting descriptor from the <span style="font-family: Courier New,Courier,monospace">descriptors</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications). In this example, the first descriptor is used:</p>
-<pre class="prettyprint">var descriptor = characteristic.descriptors[0];</pre>
-   </li>
-   <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the descriptor:</p>
-<pre class="prettyprint">
-function readSuccess(value)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Descriptor value: &quot; + value);
-}
-
-function readFail(error)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;readValue() failed: &quot; + error);
-}
-</pre>
-   </li>
-   <li><p>To retrieve the GATT descriptor value, use the <span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTDescriptor">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTDescriptor">wearable</a> applications):</p>
-<pre class="prettyprint">
-descriptor.readValue(readSuccess, readFail);</pre>
-   </li>
-   <li><p>To change the descriptor value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface:</p>
-<pre class="prettyprint">
-function writeSuccess(value)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;Written&quot;);
-}
-
-function writeFail(error)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;writeValue() failed: &quot; + error);
-}
-
-var newValue = [3];
-
-descriptor.writeValue(newValue, writeSuccess, writeFail);
-</pre>
-   </li>
-  </ol>
-         
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
- </body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm
index 4a5fc50..e7e86f8 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm
@@ -28,6 +28,18 @@
             <li><a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a></li>
             <li><a href="#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a></li>
             <li><a href="#Communicating_Health">Communicating with a Health Source Device</a></li>
+                       <li>Bluetooth Low Energy
+                           <ul class="toc">
+                                       <li><a href="#Discovering_BT_LE_Devices">Discovering Bluetooth Low Energy Devices</a></li>
+                                       <li><a href="#Managing_Advertising">Managing the Advertising Options</a></li>
+                                       <li><a href="#Connecting">Connecting to a Bluetooth Low Energy Device</a></li>
+                                       <li><a href="#Connection_Notification">Receiving Notifications on Connection State Changes</a></li>
+                                       <li><a href="#Retrieving_Services">Retrieving Bluetooth GATT Services</a></li>
+                                       <li><a href="#Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</a></li>
+                                  <li><a href="#Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</a></li>
+                                       <li><a href="#Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</a></li>
+                               </ul>
+                       </li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -65,6 +77,18 @@
        <li><a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a> <p>Create and end a bonding with a Bluetooth device.</p></li>
        <li><a href="#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a> <p>Register a service as a server, connect as a client to the service provided by the server device, and exchange data with the device.</p></li>
        <li><a href="#Communicating_Health">Communicating with a Health Source Device</a> <p>Act as a sink and communicate with a health source device.</p></li>
+          <li>Bluetooth Low Energy
+                 <ul>
+                  <li><a href="#Discovering_BT_LE_Devices">Discovering Bluetooth Low Energy Devices</a> <p>Search for remote devices.</p></li>
+                  <li><a href="#Managing_Advertising">Managing the Advertising Options</a> <p>Manage what information is advertised to any Bluetooth Low Energy device in the proximity.</p></li>
+                  <li><a href="#Connecting">Connecting to a Bluetooth Low Energy Device</a> <p>Connect to a detected Bluetooth Low Energy device.</p></li>
+                  <li><a href="#Connection_Notification">Receiving Notifications on Connection State Changes</a> <p>Monitor the connection state to a remote Bluetooth Low Energy device.</p></li>
+                  <li><a href="#Retrieving_Services">Retrieving Bluetooth GATT Services</a> <p>Check information about the Bluetooth GATT services provided by a remote device.</p></li>
+                  <li><a href="#Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</a> <p>Read and write a value of the Bluetooth GATT characteristic of a remote device.</p></li>
+                  <li><a href="#Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</a> <p>Monitor changes in a Bluetooth GATT characteristic value.</p></li>
+                  <li><a href="#Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</a> <p>Read and write a value of the Bluetooth GATT characteristic descriptor of a remote device.</p></li>
+                 </ul>    
+          </li>
       </ul>
        <h2 id="task" name="task">Task</h2>
       <p>In the <a href="task_bluetoothchat_w.htm">Bluetooth Chat</a> task, we will walk through how to use the device as a Bluetooth server or client in a chat application.</p>
@@ -320,6 +344,378 @@ healthChannel.close();
 <p>When the channel is disconnected, the <span style="font-family: Courier New,Courier,monospace">onclose</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannelChangeCallback</span> interface is called.</p></li>   
   </ol> 
     
+<h2 id="Discovering_BT_LE_Devices" name="Discovering_BT_LE_Devices">Discovering Bluetooth Low Energy Devices</h2>
+
+  <p>Learning how to search for remote devices is a basic Bluetooth management skill:</p>
+  <ol>
+   <li>Define a scan event handler by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEScanCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEScanCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEScanCallback">wearable</a> applications).
+    <p>The callback is invoked when a remote device has been detected.</p>
+<pre class="prettyprint">
+var callbacks = 
+{
+&nbsp;&nbsp;&nbsp;onsuccess: function(device)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device: &quot;  device.name  &quot; [&quot;  device.address  &quot;]&quot;);
+&nbsp;&nbsp;&nbsp;}
+};
+</pre>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.</td>
+      </tr>
+     </tbody>
+    </table> </li>
+
+   <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+   </li>
+
+   <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+<pre class="prettyprint">adapter.startScan(callbacks);</pre>
+   </li>
+   <li><p>When you find the right remote device or the user cancels the scanning, disable the scan using the <span style="font-family: Courier New,Courier,monospace">stopScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+<pre class="prettyprint">adapter.stopScan();</pre>
+   </li>
+
+  </ol>
+
+  <h2 id="Managing_Advertising" name="Managing_Advertising">Managing the Advertising Options</h2>
+  <p>The Bluetooth Low Energy technology allows a device to broadcast some information without a connection between devices. The Bluetooth Low Energy API provides methods to control this advertising (broadcasting).</p>
+  <p>Learning how to control what information is advertised by the device is a useful Bluetooth Low Energy skill:</p>
+
+  <ol>
+   <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+   </li>
+
+   <li><p>Set up options and start advertising with the <span style="font-family: Courier New,Courier,monospace">startAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+<pre class="prettyprint">
+var advertiseData = new tizen.BluetoothLEAdvertiseData(
+{
+&nbsp;&nbsp;&nbsp;includeName: true,
+&nbsp;&nbsp;&nbsp;serviceuuids: [&quot;180f&quot;]  /* 180F is 16bit Battery Service UUID */
+});
+var connectable = true;
+
+adapter.startAdvertise(advertiseData, &quot;ADVERTISE&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function onstate(state)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Advertising configured: &quot; + state);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(error)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;startAdvertise() failed: &quot; + error.message);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;LOW_LATENCY&quot;, connectable);
+</pre>
+    <table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">To learn how to make your mobile device visible to other Bluetooth devices, see <a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a>.</td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li><p>To disable the advertising, use the <span style="font-family: Courier New,Courier,monospace">stopAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+<pre class="prettyprint">adapter.stopAdvertise();</pre>
+   </li>
+  </ol>
+
+  <h2 id="Connecting" name="Connecting">Connecting to a Bluetooth Low Energy Device</h2>
+
+  <p>Learning how to connect to other devices is a basic Bluetooth Low Energy management skill:</p>
+  <ol>
+   <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+   </li>
+   <li><p>Define success and error callbacks for the connect operation:</p>
+<pre class="prettyprint">
+function connectFail(error) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Failed to connect to device: &quot; + e.message);
+}
+
+function connectSuccess() 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Connected to device&quot;);
+}
+</pre>
+   </li>
+
+   <li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
+     <p>Within the callback request, establish a connection with the found device using the <span style="font-family: Courier New,Courier,monospace">connect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">
+var remoteDevice = null;
+
+function onDeviceFound(device)
+{
+&nbsp;&nbsp;&nbsp;if (remoteDevice === null) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice = device;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device &quot; + device.name + &quot;. Connecting...&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.connect(connectSuccess, connectFail);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;adapter.stopScan();
+}
+</pre>
+   </li>
+
+   <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan using the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> adapter:</p>
+<pre class="prettyprint">adapter.startScan({onsuccess: onDeviceFound});</pre></li>
+
+   <li><p>When the connection to the remote device is no longer required, disconnect from the device by calling the <span style="font-family: Courier New,Courier,monospace">disconnect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
+<pre class="prettyprint">remoteDevice.disconnect();</pre></li>
+
+  </ol>
+
+  <h2 id="Connection_Notification" name="Connection_Notification">Receiving Notifications on Connection State Changes</h2>
+
+  <p>Learning how to receive notifications whenever the device connection is established or lost is a useful Bluetooth management skill:</p>
+  <ol>
+
+   <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+   </li>
+   <li><p>Define a connection state change listener by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
+<pre class="prettyprint">
+var connectionListener = 
+{
+&nbsp;&nbsp;&nbsp;onconnected: function(device) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Connected to the device: &quot; + device.name + &quot; [&quot; + device.address + &quot;]&quot;);
+&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;ondisconnected: function(device) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Disconnected from the device &quot; + device.name + &quot; [&quot; + device.address + &quot;]&quot;);
+&nbsp;&nbsp;&nbsp;}
+};
+</pre>
+   </li>
+
+   <li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
+     <p>Within the callback, register a connection state change listener using the <span style="font-family: Courier New,Courier,monospace">addConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">
+var remoteDevice = null;
+var watchId;
+
+function onDeviceFound(device)
+{
+&nbsp;&nbsp;&nbsp;if (remoteDevice === null) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice = device;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device &quot; + device.name + &quot;. Connecting...&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;watchId = remoteDevice.addConnectStateChangeListener(connectionListener);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice.connect();
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;adapter.stopScan();
+}
+</pre>
+   </li>
+
+   <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan:</p>
+<pre class="prettyprint">adapter.startScan({onsuccess: onDeviceFound});</pre></li>
+
+   <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
+<pre class="prettyprint">remoteDevice.removeConnectStateChangeListener(watchId);</pre></li>
+  </ol>
+
+  <h2 id="Retrieving_Services" name="Retrieving_Services">Retrieving Bluetooth GATT Services</h2>
+
+  <p>Learning how to retrieve a list of GATT services (Generic Attribute) provided by a remote device is basic Bluetooth Low Energy management skill:</p>
+  <ol>
+
+   <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
+   <li><p>Define a connection state change listener by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
+<pre class="prettyprint">
+function showGATTService(service, indent)
+{
+&nbsp;&nbsp;&nbsp;if (indent === undefined) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indent = &quot;&quot;;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;console.log(indent + &quot;Service &quot; + service.uuid + &quot;. Has &quot; + service.characteristics.length 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; characteristics and &quot; + service.services.length + &quot; sub-services.&quot;);
+
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; service.services.length; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showGATTService(service.services[i], indent + &quot;   &quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+   </li>
+   <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+   </li>
+   <li><p>Retrieve GATT service information using the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface for every service UUID:</p>
+<pre class="prettyprint">
+var i = 0, service = null;
+
+for (i; i &lt; serviceUUIDs.length; i++) 
+{
+
+&nbsp;&nbsp;&nbsp;service = remoteDevice.getService(serviceUUIDs[i]);
+
+&nbsp;&nbsp;&nbsp;showGATTService(service);
+}</pre>
+   </li>
+
+  </ol>
+
+       <h2 id="Characteristic_Value" name="Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</h2>
+
+  <p>Learning how to read and write a value of the Bluetooth characteristic is a useful Bluetooth Low Energy management skill:</p>
+  <ol>
+
+    <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
+   <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+   </li>
+   <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+   </li>
+   <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
+   </li>
+   <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic:</p>
+<pre class="prettyprint">
+function readSuccess(value)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Characteristic value: &quot; + value);
+}
+
+function readFail(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;readValue() failed: &quot; + error);
+}
+</pre>
+   </li>
+   <li><p>To retrieve the GATT characteristic value, use the <span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
+<pre class="prettyprint">
+if (!property.isReadable) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Property seems not to be readable. Attempting to read...&quot;);
+}
+property.readValue(readSuccess, readFail);</pre>
+   </li>
+   <li><p>To change the characteristic value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
+<pre class="prettyprint">
+function writeSuccess(value)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Written&quot;);
+}
+
+function writeFail(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;writeValue() failed: &quot; + error);
+}
+
+if (!property.isWritable) 
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Property seems not to be writable. Attempting to write...&quot;);
+}
+var newValue = [82];
+
+property.writeValue(newValue, writeSuccess, writeFail);
+</pre>
+   </li>
+  </ol>
+
+  <h2 id="Characterictic_Notification" name="Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</h2>
+
+  <p>Learning how to monitor a changes in a Bluetooth characteristic is a useful Bluetooth Low Energy management skill:</p>
+  <ol>
+
+    <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
+   <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+   </li>
+   <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+   </li>
+   <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
+   </li>
+   <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic every time the value changes:</p>
+<pre class="prettyprint">
+function onValueChange(value)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Characteristic value is now: &quot; + value);
+}
+</pre>
+   </li>
+
+   <li><p>Register a value change listener using the <span style="font-family: Courier New,Courier,monospace">addValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
+<pre class="prettyprint">var watchId = property.addValueChangeListener(onValueChange);</pre></li>
+
+   <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
+<pre class="prettyprint">property.removeValueChangeListener(watchId);</pre></li>
+  </ol>
+
+  <h2 id="Descriptor_Value" name="Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</h2>
+
+  <p>Learning how to read and write a value of the Bluetooth descriptor is a useful Bluetooth Low Energy management skill:</p>
+  <ol>
+
+   <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
+   <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+   </li>
+   <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method  of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+   </li>
+   <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">var characteristic = gattService.characteristics[0];</pre></li>
+   <li><p>Select an interesting descriptor from the <span style="font-family: Courier New,Courier,monospace">descriptors</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications). In this example, the first descriptor is used:</p>
+<pre class="prettyprint">var descriptor = characteristic.descriptors[0];</pre>
+   </li>
+   <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the descriptor:</p>
+<pre class="prettyprint">
+function readSuccess(value)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Descriptor value: &quot; + value);
+}
+
+function readFail(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;readValue() failed: &quot; + error);
+}
+</pre>
+   </li>
+   <li><p>To retrieve the GATT descriptor value, use the <span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTDescriptor">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTDescriptor">wearable</a> applications):</p>
+<pre class="prettyprint">
+descriptor.readValue(readSuccess, readFail);</pre>
+   </li>
+   <li><p>To change the descriptor value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface:</p>
+<pre class="prettyprint">
+function writeSuccess(value)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;Written&quot;);
+}
+
+function writeFail(error)
+{
+&nbsp;&nbsp;&nbsp;console.log(&quot;writeValue() failed: &quot; + error);
+}
+
+var newValue = [3];
+
+descriptor.writeValue(newValue, writeSuccess, writeFail);
+</pre>
+   </li>
+  </ol>        
          
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
@@ -332,15 +728,15 @@ healthChannel.close();
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm
index 1137a13..a82293d 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm
@@ -37,13 +37,12 @@
 <p>The communication tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
   <ul>
    <li><a href="bluetooth_tutorial_w.htm">Bluetooth: Managing a Bluetooth Device and Supporting RFCOMM and HDP</a> <p>Demonstrates how you can manage Bluetooth and exchange data with a peer device.</p></li> 
-   <li><a href="bluetooth_le_tutorial_w.htm">Bluetooth Low Energy: Managing a Bluetooth Low Energy Device</a> <p>Demonstrates how you can manage Bluetooth Low Energy devices and exchange data with peer devices.</p></li>
    <li><a href="nfc_tutorial_w.htm">NFC: Managing an NFC Device and Detecting NFC Tags and Peers</a> <p>Demonstrates how you can use NFC connectivity to exchange data with NFC tags and NFC-enabled devices.</p></li>
    <li><a href="push_tutorial_w.htm">Push: Receiving Push Notifications from a Push Server</a> <p>Demonstrates how you can register your application, connect to the push service, and start receiving push notifications.</p></li>
    <li><a href="secure_element_tutorial_w.htm">Secure Element: Accessing Secure Elements</a> <p>Demonstrates how you can access and manage secure elements in a device.</p></li>
   </ul>
 
-    <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+    <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
 <ul>
    <li><a href="messaging_tutorial_w.htm">Messaging: Managing and Receiving SMS, MMS, and Email Messages</a> <p>Demonstrates how you can create, send, and read messages as well as manage messages in the message storage.</p></li>
 </ul>
@@ -60,15 +59,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm
index 2224f9a..74d12bf 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm
@@ -378,15 +378,15 @@ watchId = msgService.messageStorage.addMessagesChangeListener(messageChangeCallb
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm
index 8754265..5362f58 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm
@@ -377,15 +377,15 @@ adapter.cardEmulationMode = &quot;OFF&quot;;
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm
index 4eb8064..979d00c 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm
@@ -111,15 +111,15 @@ function notificationCallback(noti)
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm
index c5f04ca..e8e40b5 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm
@@ -198,15 +198,15 @@ reader.closeSessions();
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
index d09b484..791e957 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-    <title>Media Controller: Communicating between the Media Controller Server and Client</title>
+    <title>Media Controller: Communicating Between the Media Controller Server and Client</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -38,7 +38,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Media Controller: Communicating between the Media Controller Server and Client</h1>
+<h1>Media Controller: Communicating Between the Media Controller Server and Client</h1>
 
 <p>
 This tutorial demonstrates how you can to develop server and client applications for controlling various media functions of the device.</p>
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
index 46efd76..fdde298 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
@@ -35,7 +35,7 @@
 
     <p>The multimedia tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
   <ul>
-   <li><a href="media_controller_tutorial_w.htm">Media Controller: Communicating between the Media Controller Server and Client</a> <p>Demonstrates how you can communicate between the media controller server and client.</p></li>
+   <li><a href="media_controller_tutorial_w.htm">Media Controller: Communicating Between the Media Controller Server and Client</a> <p>Demonstrates how you can communicate between the media controller server and client.</p></li>
    <li><a href="media_key_tutorial_w.htm">Media Key: Controlling Multimedia Playback</a> <p>Demonstrates how you can control multimedia playback.</p></li>
    <li><a href="sound_tutorial_w.htm">Sound: Controlling the Sound Volume Level and the Sound Devices</a> <p>Demonstrates how you can manage the device volume levels and the sound devices.</p></li>
   </ul>
diff --git a/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
index 1cc4809..6b6f6c5 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
@@ -1,317 +1,317 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Account: Managing Accounts and Account Information</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#get_account">Retrieving Accounts</a></li>
-            <li><a href="#get_providers">Retrieving Providers</a></li>
-            <li><a href="#manage">Managing Accounts</a></li>
-            <li><a href="#listener">Receiving Notifications on Account Changes</a></li>
-            <li><a href="#extend">Managing Extended Account Data</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/account_w.htm">Account Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Account: Managing Accounts and Account Information</h1>
-       
-<p>This tutorial demonstrates how you can manage accounts and retrieve account information.</p>
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  
-<h2>Warm-up</h2>
-<p>Become familiar with the Account API basics by learning about:</p>
-<ul>
-<li><a href="#get_account">Retrieving Accounts</a>
-<p>Get all accounts or one with a specific ID.</p>
-</li>
-<li><a href="#get_providers">Retrieving Providers</a>
-<p>Get the account provider belonging to current application or get all account providers.</p>
-</li>
-<li><a href="#manage">Managing Accounts</a>
-<p>Add, update, and remove an account.</p>
-</li>
-<li><a href="#listener">Receiving Notifications on Account Changes</a>
-<p>Register and remove an account change listener.</p>
-</li>
-<li><a href="#extend">Managing Extended Account Data</a>
-<p>Get and set extended data for an account.</p>
-</li>
-</ul>
-
-                <h2 id="get_account" name="get_account">Retrieving Accounts</h2>
-                               
-
-<p>Learning how to retrieve account information enables you to include account support into your applications:</p>
-
-<ul>
-<li>To retrieve information about all available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
-
-<pre class="prettyprint">function getAccountsSuccess(accounts)
-{
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; accounts.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Use the retrieved accounts */
-&nbsp;&nbsp;&nbsp;}
-}
-function getAccountsError(error)
-{
-&nbsp;&nbsp;&nbsp;console.log(&#39;Error: &#39; + error.message);
-}
-tizen.account.getAccounts(getAccountsSuccess, getAccountsError);</pre>
-</li>
-
-<li>If you already know the ID of the account, you can get the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> object using the <span style="font-family: Courier New,Courier,monospace">getAccount()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
-
-<pre class="prettyprint">var account = tizen.account.getAccount(my_account_id);</pre>
-</li>
-</ul>
-         
-                <h2 id="get_providers" name="get_providers">Retrieving Providers</h2>
-
-<p>To create accounts, you must learn how to get access to account providers:</p>
-
-<table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>
-    </tr>
-   </tbody>
-</table>
-
-<ul>
-<li>Get a specific account provider with the given application ID using the <span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">ApplicationManager</a> interface.
-<p>If the current application is an account provider application (meaning that it contains the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_account">&lt;tizen:account&gt;</a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), you can use the current application ID.  Otherwise, get the ID of the current application using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p>
-
-<pre class="prettyprint">var appId = tizen.application.getCurrentApplication().appInfo.id;
-var provider = tizen.account.getProvider(appId);</pre>
-</li>
-<li>To get information about all available account providers, use the <span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
-
-<pre class="prettyprint">function getProvidersSuccess(providers)
-{
-&nbsp;&nbsp;&nbsp;/* Providers is an array whose members are providers with contact capability */
-}
-function getProvidersError(error)
-{
-&nbsp;&nbsp;&nbsp;console.log(&#39;Error: &#39; + error.message);
-}
-
-tizen.account.getProviders(getProvidersSuccess, getProvidersError, &quot;http://tizen.org/account/capability/contact&quot;);</pre>
-</li>
-</ul>
-           
-                <h2 id="manage" name="manage">Managing Accounts</h2>
-
-<p>Creating, adding, updating, and deleting accounts is a basic account management skill:</p>
-
-<table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.write</span> privilege and must be the account provider.</td>
-    </tr>
-   </tbody>
-</table>
-
-<ol>
-<li>To create an account, first get an account provider. If your application is an account provider application (meaning that it contains the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_account">&lt;tizen:account&gt;</a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), use the <span style="font-family: Courier New,Courier,monospace">getProvider()</span> method:
-
-<pre class="prettyprint">var appId = tizen.application.getCurrentApplication().appInfo.id;
-var accountProvider = tizen.account.getProvider(appId);</pre>
-</li>
-<li>Create an instance of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> interface:
-
-<pre class="prettyprint">var account = new tizen.Account(accountProvider, {userName: &#39;admin&#39;, iconUri: &#39;path/to/icon.jpg&#39;});</pre>
-</li>
-<li>Add the account to the account database:
-
-<pre class="prettyprint">tizen.account.add(account);</pre>
-</li>
-<li>To update the account information, change the attributes of the <span style="font-family: Courier New,Courier,monospace">Account</span> object for the relevant account:
-
-<pre class="prettyprint">account.userName = &#39;new username&#39;;</pre>
-</li>
-<li>To save the changed values, use the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
-
-<pre class="prettyprint">tizen.account.update(account);</pre>
-</li>
-
-<li>To remove the account from the system, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of  the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface, providing the account ID:
-
-<pre class="prettyprint">tizen.account.remove(account.id);</pre>
-</li>
-</ol>
-           
-                <h2 id="listener" name="listener">Receiving Notifications on Account Changes</h2>
-
-<p>Learning how to register change listeners enables you to synchronize the view of your application with the changes in the account database:</p>
-
-<table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>
-    </tr>
-   </tbody>
-</table>
-
-<ol>
-<li>Define a listener implementing the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountChangeCallback">AccountChangeCallback</a> interface:
-
-<pre class="prettyprint">var accountChangeListener =
-{
-&nbsp;&nbsp;&nbsp;onadded: function(account)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when an account is added */
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onremoved: function(accountId)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when an account is removed */
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onupdated: function(account)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when a registered account is changed */
-&nbsp;&nbsp;&nbsp;}
-};</pre>
-</li>
-<li>Register the account listener using the <span style="font-family: Courier New,Courier,monospace">addAccountListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface to start receiving notifications about changes:
-
-<pre class="prettyprint">var watchId = tizen.account.addAccountListener(accountChangeListener);</pre>
-</li>
-<li>When notifications are no longer required, unregister the listener using the <span style="font-family: Courier New,Courier,monospace">removeAccountListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:
-
-<pre class="prettyprint">tizen.account.removeAccountListener(watchId);</pre>
-</li>
-</ol>
-                <h2 id="extend" name="extend">Managing Extended Account Data</h2>
-
-<p>Learning how to manage extended data for an account enables you to include account support into your applications:</p>
-
-<ol>
-<li><a href="#get_account">Retrieve the account object</a>.</li>
-<li>Manage the extended data for the retrieved account:
-<ul><li>To set extended data:
-<p>Set the additional information with the <span style="font-family: Courier New,Courier,monospace">setExtendedData()</span> method:</p>
-
-<pre class="prettyprint">var key = &#39;nickname&#39;;
-var value = &#39;nickname of anonymous user&#39;;
-account.setExtendedData(key, value);</pre>
-
-<table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">To perform this operation, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.write</span> privilege.</td>
-    </tr>
-   </tbody>
-</table>
-<p>To overwrite the previous data value, set a new value with the same key:</p>
-
-<pre class="prettyprint">account.setExtendedData(key, &#39;nickname updated&#39;);</pre>
-</li>
-
-<li>To get extended data:
-<ul><li>To retrieve extended data value for a specific key, use the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method:
-
-<pre class="prettyprint">var key = &#39;accessToken&#39;;
-var value = account.getExtendedData(key); </pre>
-
-<table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">To perform this operation, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>
-    </tr>
-   </tbody>
-</table>
-</li>
-<li>To retrieve all extended data for an account, use the asynchronous version of the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method. The success callback contains an array of the extended data key-value pairs.
-
-<pre class="prettyprint">account.getExtendedData(function(extendedData)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; extendedData.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var key = extendedData.key;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var value = extendedData.value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(key + &quot; : &quot; + value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Error : &quot; + e.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</pre>
-
-</li></ul></li></ul></li>
-
-</ol>
-         
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Account: Managing Accounts and Account Information</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+            <li><a href="#get_account">Retrieving Accounts</a></li>\r
+            <li><a href="#get_providers">Retrieving Providers</a></li>\r
+            <li><a href="#manage">Managing Accounts</a></li>\r
+            <li><a href="#listener">Receiving Notifications on Account Changes</a></li>\r
+            <li><a href="#extend">Managing Extended Account Data</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/account_w.htm">Account Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Account: Managing Accounts and Account Information</h1>\r
+       \r
+<p>This tutorial demonstrates how you can manage accounts and retrieve account information.</p>\r
+\r
+  <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  \r
+<h2>Warm-up</h2>\r
+<p>Become familiar with the Account API basics by learning about:</p>\r
+<ul>\r
+<li><a href="#get_account">Retrieving Accounts</a>\r
+<p>Get all accounts or one with a specific ID.</p>\r
+</li>\r
+<li><a href="#get_providers">Retrieving Providers</a>\r
+<p>Get the account provider belonging to current application or get all account providers.</p>\r
+</li>\r
+<li><a href="#manage">Managing Accounts</a>\r
+<p>Add, update, and remove an account.</p>\r
+</li>\r
+<li><a href="#listener">Receiving Notifications on Account Changes</a>\r
+<p>Register and remove an account change listener.</p>\r
+</li>\r
+<li><a href="#extend">Managing Extended Account Data</a>\r
+<p>Get and set extended data for an account.</p>\r
+</li>\r
+</ul>\r
+\r
+                <h2 id="get_account" name="get_account">Retrieving Accounts</h2>\r
+                               \r
+\r
+<p>Learning how to retrieve account information enables you to include account support into your applications:</p>\r
+\r
+<ul>\r
+<li>To retrieve information about all available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:\r
+\r
+<pre class="prettyprint">function getAccountsSuccess(accounts)\r
+{\r
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; accounts.length; i++)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Use the retrieved accounts */\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+function getAccountsError(error)\r
+{\r
+&nbsp;&nbsp;&nbsp;console.log(&#39;Error: &#39; + error.message);\r
+}\r
+tizen.account.getAccounts(getAccountsSuccess, getAccountsError);</pre>\r
+</li>\r
+\r
+<li>If you already know the ID of the account, you can get the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> object using the <span style="font-family: Courier New,Courier,monospace">getAccount()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:\r
+\r
+<pre class="prettyprint">var account = tizen.account.getAccount(my_account_id);</pre>\r
+</li>\r
+</ul>\r
+         \r
+                <h2 id="get_providers" name="get_providers">Retrieving Providers</h2>\r
+\r
+<p>To create accounts, you must learn how to get access to account providers:</p>\r
+\r
+<table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>\r
+    </tr>\r
+   </tbody>\r
+</table>\r
+\r
+<ul>\r
+<li>Get a specific account provider with the given application ID using the <span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">ApplicationManager</a> interface.\r
+<p>If the current application is an account provider application (meaning that it contains the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_account">&lt;tizen:account&gt;</a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), you can use the current application ID.  Otherwise, get the ID of the current application using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p>\r
+\r
+<pre class="prettyprint">var appId = tizen.application.getCurrentApplication().appInfo.id;\r
+var provider = tizen.account.getProvider(appId);</pre>\r
+</li>\r
+<li>To get information about all available account providers, use the <span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:\r
+\r
+<pre class="prettyprint">function getProvidersSuccess(providers)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Providers is an array whose members are providers with contact capability */\r
+}\r
+function getProvidersError(error)\r
+{\r
+&nbsp;&nbsp;&nbsp;console.log(&#39;Error: &#39; + error.message);\r
+}\r
+\r
+tizen.account.getProviders(getProvidersSuccess, getProvidersError, &quot;http://tizen.org/account/capability/contact&quot;);</pre>\r
+</li>\r
+</ul>\r
+           \r
+                <h2 id="manage" name="manage">Managing Accounts</h2>\r
+\r
+<p>Creating, adding, updating, and deleting accounts is a basic account management skill:</p>\r
+\r
+<table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.write</span> privilege and must be the account provider.</td>\r
+    </tr>\r
+   </tbody>\r
+</table>\r
+\r
+<ol>\r
+<li>To create an account, first get an account provider. If your application is an account provider application (meaning that it contains the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_account">&lt;tizen:account&gt;</a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), use the <span style="font-family: Courier New,Courier,monospace">getProvider()</span> method:\r
+\r
+<pre class="prettyprint">var appId = tizen.application.getCurrentApplication().appInfo.id;\r
+var accountProvider = tizen.account.getProvider(appId);</pre>\r
+</li>\r
+<li>Create an instance of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> interface:\r
+\r
+<pre class="prettyprint">var account = new tizen.Account(accountProvider, {userName: &#39;admin&#39;, iconUri: &#39;path/to/icon.jpg&#39;});</pre>\r
+</li>\r
+<li>Add the account to the account database:\r
+\r
+<pre class="prettyprint">tizen.account.add(account);</pre>\r
+</li>\r
+<li>To update the account information, change the attributes of the <span style="font-family: Courier New,Courier,monospace">Account</span> object for the relevant account:\r
+\r
+<pre class="prettyprint">account.userName = &#39;new username&#39;;</pre>\r
+</li>\r
+<li>To save the changed values, use the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:\r
+\r
+<pre class="prettyprint">tizen.account.update(account);</pre>\r
+</li>\r
+\r
+<li>To remove the account from the system, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of  the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface, providing the account ID:\r
+\r
+<pre class="prettyprint">tizen.account.remove(account.id);</pre>\r
+</li>\r
+</ol>\r
+           \r
+                <h2 id="listener" name="listener">Receiving Notifications on Account Changes</h2>\r
+\r
+<p>Learning how to register change listeners enables you to synchronize the view of your application with the changes in the account database:</p>\r
+\r
+<table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">To perform these operations, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>\r
+    </tr>\r
+   </tbody>\r
+</table>\r
+\r
+<ol>\r
+<li>Define a listener implementing the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountChangeCallback">AccountChangeCallback</a> interface:\r
+\r
+<pre class="prettyprint">var accountChangeListener =\r
+{\r
+&nbsp;&nbsp;&nbsp;onadded: function(account)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when an account is added */\r
+&nbsp;&nbsp;&nbsp;},\r
+&nbsp;&nbsp;&nbsp;onremoved: function(accountId)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when an account is removed */\r
+&nbsp;&nbsp;&nbsp;},\r
+&nbsp;&nbsp;&nbsp;onupdated: function(account)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when a registered account is changed */\r
+&nbsp;&nbsp;&nbsp;}\r
+};</pre>\r
+</li>\r
+<li>Register the account listener using the <span style="font-family: Courier New,Courier,monospace">addAccountListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface to start receiving notifications about changes:\r
+\r
+<pre class="prettyprint">var watchId = tizen.account.addAccountListener(accountChangeListener);</pre>\r
+</li>\r
+<li>When notifications are no longer required, unregister the listener using the <span style="font-family: Courier New,Courier,monospace">removeAccountListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">AccountManager</span> interface:\r
+\r
+<pre class="prettyprint">tizen.account.removeAccountListener(watchId);</pre>\r
+</li>\r
+</ol>\r
+                <h2 id="extend" name="extend">Managing Extended Account Data</h2>\r
+\r
+<p>Learning how to manage extended data for an account enables you to include account support into your applications:</p>\r
+\r
+<ol>\r
+<li><a href="#get_account">Retrieve the account object</a>.</li>\r
+<li>Manage the extended data for the retrieved account:\r
+<ul><li>To set extended data:\r
+<p>Set the additional information with the <span style="font-family: Courier New,Courier,monospace">setExtendedData()</span> method:</p>\r
+\r
+<pre class="prettyprint">var key = &#39;nickname&#39;;\r
+var value = &#39;nickname of anonymous user&#39;;\r
+account.setExtendedData(key, value);</pre>\r
+\r
+<table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">To perform this operation, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.write</span> privilege.</td>\r
+    </tr>\r
+   </tbody>\r
+</table>\r
+<p>To overwrite the previous data value, set a new value with the same key:</p>\r
+\r
+<pre class="prettyprint">account.setExtendedData(key, &#39;nickname updated&#39;);</pre>\r
+</li>\r
+\r
+<li>To get extended data:\r
+<ul><li>To retrieve extended data value for a specific key, use the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method:\r
+\r
+<pre class="prettyprint">var key = &#39;accessToken&#39;;\r
+var value = account.getExtendedData(key); </pre>\r
+\r
+<table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">To perform this operation, your application needs the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span> privilege.</td>\r
+    </tr>\r
+   </tbody>\r
+</table>\r
+</li>\r
+<li>To retrieve all extended data for an account, use the asynchronous version of the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method. The success callback contains an array of the extended data key-value pairs.\r
+\r
+<pre class="prettyprint">account.getExtendedData(function(extendedData)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; extendedData.length; i++)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var key = extendedData.key;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var value = extendedData.value;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(key + &quot; : &quot; + value);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(e)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Error : &quot; + e.message);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</pre>\r
+\r
+</li></ul></li></ul></li>\r
+\r
+</ol>\r
+         \r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm
index e093ffc..483c1e0 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm
@@ -1,145 +1,145 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Bookmark: Managing Web Browser Bookmarks</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#Creating_Bookmark">Creating Bookmark Folders and Items</a></li>
-                       <li><a href="#Deleting_Bookmark">Deleting Bookmarks</a></li>
-                       <li><a href="#Retrieving_Bookmark">Retrieving the Bookmark List</a></li>
-               </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/bookmark_w.htm">Bookmark Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">Bookmark API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Bookmark: Managing Web Browser Bookmarks</h1>
-  
-      <p>This tutorial demonstrates how you can manage Tizen Web browser bookmarks on the device.</p>
-         
-           <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-      
-  <h2>Warm-up</h2>
-      <p>Become familiar with the Bookmark API basics by learning about:</p>
-      <ul>
-       <li><a href="#Creating_Bookmark">Creating Bookmarks Folders and Items</a> <p>Add bookmark folders and items in the root bookmark folder, or in subfolders.</p> </li>
-       <li><a href="#Deleting_Bookmark">Deleting Bookmarks</a> <p>Remove bookmark folders or items.</p></li>
-       <li><a href="#Retrieving_Bookmark">Retrieving the Bookmark List</a> <p>Retrieve a list of the current bookmarks in the root bookmark folder.</p> </li>
-      </ul>
-
- <h2 id="Creating_Bookmark" name="Creating_Bookmark">Creating Bookmark Folders and Items</h2>
- 
-  <p>To create engaging applications with bookmark-related features, you must learn how to add bookmark folders and items to the root bookmark folder and subfolders:</p> 
-  <ul> 
-   <li>To add a folder and a bookmark to the root bookmark folder: 
-    <ol> 
-     <li><p>Create an instance of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkFolder">BookmarkFolder</a> interface by specifying the bookmark folder name:</p> <pre class="prettyprint">
-var folder1 = new tizen.BookmarkFolder(&quot;folder1&quot;);
-</pre> </li> 
-     <li><p>Create an instance of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkItem">BookmarkItem</a> interface by specifying the bookmark item name and URL:</p> <pre class="prettyprint">
-var tizen = new tizen.BookmarkItem(&quot;tizen&quot;, &quot;https://www.tizen.org&quot;);</pre> </li> 
-     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface to add both a bookmark folder and a bookmark to the root bookmark folder:</p> <pre class="prettyprint">tizen.bookmark.add(folder1);
-tizen.bookmark.add(tizen);
-</pre> </li> 
-    </ol> </li> 
-   <li>To add a folder and a bookmark to a subfolder: 
-    <ol> 
-     <li><p>Create an instance of the <span style="font-family: Courier New,Courier,monospace">BookmarkFolder</span> and <span style="font-family: Courier New,Courier,monospace">BookmarkItem</span> interface:</p> <pre class="prettyprint">
-var folder2 = new tizen.BookmarkFolder(&quot;folder2&quot;);
-var developerTizen = new tizen.BookmarkItem(&quot;developerTizen&quot;, &quot;https://developer.tizen.org&quot;);
-</pre> </li> 
-     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">add()</span> method to add a folder and a bookmark to a bookmark subfolder by specifying the parent bookmark folder name:</p> <pre class="prettyprint">
-tizen.bookmark.add(folder2, folder1);
-tizen.bookmark.add(developerTizen, folder1);
-</pre> 
-<p>As a result of the code snippet above, the <span style="font-family: Courier New,Courier,monospace">folder1</span> folder contains the <span style="font-family: Courier New,Courier,monospace">developerTizen</span> bookmark and the <span style="font-family: Courier New,Courier,monospace">folder2</span> subfolder.</p></li> 
-    </ol> </li> 
-  </ul> 
-  
-                       
-  <h2 id="Deleting_Bookmark" name="Deleting_Bookmark">Deleting Bookmarks</h2>
-  
-  <p>To create engaging applications with bookmark-related features, you must learn how to delete bookmarks:</p> 
-  <ol> 
-   <li><p>To remove a bookmark item, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface and specify the bookmark item:</p> <pre class="prettyprint">
-tizen.bookmark.remove(tizen);
-</pre> </li> 
-   <li><p>To remove a bookmark folder, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method and specify the bookmark folder:</p> <pre class="prettyprint">
-tizen.bookmark.remove(folder2);</pre> </li> 
-   <li><p>To remove all the bookmark folders and items from the bookmarks list, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method without specifying a parameter:</p> <pre class="prettyprint">tizen.bookmark.remove();
-</pre> </li> 
-  </ol> 
-  
-    
-  <h2 id="Retrieving_Bookmark" name="Retrieving_Bookmark">Retrieving the Bookmark List</h2>
-  
-  
-  <p>To create engaging applications with bookmark-related features, you must learn how to retrieve the bookmarks:</p> 
-  <ol> 
-   <li><p>To retrieve bookmarks only from the root bookmark folder, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface without specifying any parameter:</p> <pre class="prettyprint">
-tizen.bookmark.get();
-</pre> </li> 
-   <li><p>To retrieve bookmarks from the root bookmark folder and subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method and set the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">
-tizen.bookmark.get(null, true);</pre> </li> 
-   <li><p>To retrieve bookmarks only from a specific bookmark folder excluding its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method and specify the bookmark folder name:</p> <pre class="prettyprint">tizen.bookmark.get(folder1);
-</pre> </li> 
-   <li><p>To retrieve bookmarks from a specific bookmark folder and its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method, specifying the bookmark folder name and setting the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">tizen.bookmark.get(folder1, true);
-</pre> </li> 
-  </ol>
-                       
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Bookmark: Managing Web Browser Bookmarks</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#Creating_Bookmark">Creating Bookmark Folders and Items</a></li>\r
+                       <li><a href="#Deleting_Bookmark">Deleting Bookmarks</a></li>\r
+                       <li><a href="#Retrieving_Bookmark">Retrieving the Bookmark List</a></li>\r
+               </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/bookmark_w.htm">Bookmark Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">Bookmark API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Bookmark: Managing Web Browser Bookmarks</h1>\r
+  \r
+      <p>This tutorial demonstrates how you can manage Tizen Web browser bookmarks on the device.</p>\r
+         \r
+           <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+      \r
+  <h2>Warm-up</h2>\r
+      <p>Become familiar with the Bookmark API basics by learning about:</p>\r
+      <ul>\r
+       <li><a href="#Creating_Bookmark">Creating Bookmarks Folders and Items</a> <p>Add bookmark folders and items in the root bookmark folder, or in subfolders.</p> </li>\r
+       <li><a href="#Deleting_Bookmark">Deleting Bookmarks</a> <p>Remove bookmark folders or items.</p></li>\r
+       <li><a href="#Retrieving_Bookmark">Retrieving the Bookmark List</a> <p>Retrieve a list of the current bookmarks in the root bookmark folder.</p> </li>\r
+      </ul>\r
+\r
+ <h2 id="Creating_Bookmark" name="Creating_Bookmark">Creating Bookmark Folders and Items</h2>\r
+ \r
+  <p>To create engaging applications with bookmark-related features, you must learn how to add bookmark folders and items to the root bookmark folder and subfolders:</p> \r
+  <ul> \r
+   <li>To add a folder and a bookmark to the root bookmark folder: \r
+    <ol> \r
+     <li><p>Create an instance of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkFolder">BookmarkFolder</a> interface by specifying the bookmark folder name:</p> <pre class="prettyprint">\r
+var folder1 = new tizen.BookmarkFolder(&quot;folder1&quot;);\r
+</pre> </li> \r
+     <li><p>Create an instance of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkItem">BookmarkItem</a> interface by specifying the bookmark item name and URL:</p> <pre class="prettyprint">\r
+var tizen = new tizen.BookmarkItem(&quot;tizen&quot;, &quot;https://www.tizen.org&quot;);</pre> </li> \r
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface to add both a bookmark folder and a bookmark to the root bookmark folder:</p> <pre class="prettyprint">tizen.bookmark.add(folder1);\r
+tizen.bookmark.add(tizen);\r
+</pre> </li> \r
+    </ol> </li> \r
+   <li>To add a folder and a bookmark to a subfolder: \r
+    <ol> \r
+     <li><p>Create an instance of the <span style="font-family: Courier New,Courier,monospace">BookmarkFolder</span> and <span style="font-family: Courier New,Courier,monospace">BookmarkItem</span> interface:</p> <pre class="prettyprint">\r
+var folder2 = new tizen.BookmarkFolder(&quot;folder2&quot;);\r
+var developerTizen = new tizen.BookmarkItem(&quot;developerTizen&quot;, &quot;https://developer.tizen.org&quot;);\r
+</pre> </li> \r
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">add()</span> method to add a folder and a bookmark to a bookmark subfolder by specifying the parent bookmark folder name:</p> <pre class="prettyprint">\r
+tizen.bookmark.add(folder2, folder1);\r
+tizen.bookmark.add(developerTizen, folder1);\r
+</pre> \r
+<p>As a result of the code snippet above, the <span style="font-family: Courier New,Courier,monospace">folder1</span> folder contains the <span style="font-family: Courier New,Courier,monospace">developerTizen</span> bookmark and the <span style="font-family: Courier New,Courier,monospace">folder2</span> subfolder.</p></li> \r
+    </ol> </li> \r
+  </ul> \r
+  \r
+                       \r
+  <h2 id="Deleting_Bookmark" name="Deleting_Bookmark">Deleting Bookmarks</h2>\r
+  \r
+  <p>To create engaging applications with bookmark-related features, you must learn how to delete bookmarks:</p> \r
+  <ol> \r
+   <li><p>To remove a bookmark item, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface and specify the bookmark item:</p> <pre class="prettyprint">\r
+tizen.bookmark.remove(tizen);\r
+</pre> </li> \r
+   <li><p>To remove a bookmark folder, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method and specify the bookmark folder:</p> <pre class="prettyprint">\r
+tizen.bookmark.remove(folder2);</pre> </li> \r
+   <li><p>To remove all the bookmark folders and items from the bookmarks list, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method without specifying a parameter:</p> <pre class="prettyprint">tizen.bookmark.remove();\r
+</pre> </li> \r
+  </ol> \r
+  \r
+    \r
+  <h2 id="Retrieving_Bookmark" name="Retrieving_Bookmark">Retrieving the Bookmark List</h2>\r
+  \r
+  \r
+  <p>To create engaging applications with bookmark-related features, you must learn how to retrieve the bookmarks:</p> \r
+  <ol> \r
+   <li><p>To retrieve bookmarks only from the root bookmark folder, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface without specifying any parameter:</p> <pre class="prettyprint">\r
+tizen.bookmark.get();\r
+</pre> </li> \r
+   <li><p>To retrieve bookmarks from the root bookmark folder and subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method and set the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">\r
+tizen.bookmark.get(null, true);</pre> </li> \r
+   <li><p>To retrieve bookmarks only from a specific bookmark folder excluding its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method and specify the bookmark folder name:</p> <pre class="prettyprint">tizen.bookmark.get(folder1);\r
+</pre> </li> \r
+   <li><p>To retrieve bookmarks from a specific bookmark folder and its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method, specifying the bookmark folder name and setting the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">tizen.bookmark.get(folder1, true);\r
+</pre> </li> \r
+  </ol>\r
+                       \r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm
index 49a5d74..36ef391 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm
@@ -1,616 +1,616 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Calendar: Managing Calendars and Calendar Events</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-               <li><a href="#Creating_Calendar">Creating a Calendar</a></li>
-               <li>Events
-               <ul class="toc">
-                       <li><a href="#Adding_Events">Adding Events to a Calendar</a></li> 
-                       <li><a href="#Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</a></li> 
-                       <li><a href="#Managing_Event">Managing a Single Calendar Event</a></li>
-                       <li><a href="#Updating_Event">Updating Recurring Calendar Events</a></li>
-                       <li><a href="#Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</a></li>
-                       <li><a href="#Converting_Event">Converting Calendar Event Formats</a></li>
-               </ul></li>
-               <li>Tasks
-               <ul class="toc">
-                       <li><a href="#Adding_Tasks">Adding Tasks to a Calendar</a></li>
-                       <li><a href="#Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</a></li>
-                       <li><a href="#Managing_Task">Managing a Single Calendar Task</a></li>
-                       <li><a href="#Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</a></li>
-                       <li><a href="#Converting_Task">Converting Calendar Task Formats</a></li>  
-               </ul></li>
-               <li><a href="#Receiving_Calendar">Receiving Notifications on Calendar Changes</a></li>          
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/calendar_w.htm">Calendar Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Calendar: Managing Calendars and Calendar Events</h1>
-        
-      <p>This tutorial demonstrates how you can manage calendars in the device to access, modify, add, and remove calendar items within a specified calendar on the device.</p>
-         
-           <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-      
-  <h2>Warm-up</h2>
-      <p>Become familiar with the Calendar API basics by learning about:</p>
-      <ul>
-           <li><a href="#Creating_Calendar">Creating a Calendar</a> <p>Create a new calendar using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> constructor.</p></li>
-               <li>Events
-               <ul>
-                       <li><a href="#Adding_Events">Adding Events to a Calendar</a> <p>Add events to the default calendar, and define an alarm and recurrence rule for an event.</p> </li> 
-                       <li><a href="#Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</a> <p>Add events to the default calendar in the batch mode.</p></li> 
-                       <li><a href="#Managing_Event">Managing a Single Calendar Event</a> <p>Update and delete an existing calendar event.</p> </li>
-                       <li><a href="#Updating_Event">Updating Recurring Calendar Events</a> <p>Update a single instance of a recurring event.</p> </li>
-                       <li><a href="#Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</a> <p>Update and delete calendar events in the batch mode.</p> </li>
-                       <li><a href="#Converting_Event">Converting Calendar Event Formats</a> <p>Convert a calendar event to the iCalendar format and back.</p></li>
-               </ul></li>
-               <li>Tasks
-               <ul>
-                       <li><a href="#Adding_Tasks">Adding Tasks to a Calendar</a> <p>Add tasks to the default calendar, and define an alarm for a task.</p></li>
-                       <li><a href="#Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</a> <p>Add tasks to the default calendar in the batch mode.</p></li>
-                       <li><a href="#Managing_Task">Managing a Single Calendar Task</a> <p>Update and delete an existing calendar task.</p></li>
-                       <li><a href="#Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</a> <p>Update and delete calendar tasks in the batch mode.</p> </li>
-                       <li><a href="#Converting_Task">Converting Calendar Task Formats</a> <p>Convert a calendar task to the iCalendar format and back.</p></li>  
-               </ul></li>
-               <li><a href="#Receiving_Calendar">Receiving Notifications on Calendar Changes</a> <p>Receive notifications when calendar items are added, updated, or deleted.</p></li>
-      </ul>
-  <h2 id="task" name="task">Task</h2>
-        <p>In the <a href="task_eventmanager_w.htm">Event Manager</a> task, we will walk through how to manage calendar events in your application.</p>
-       
- <h2 id="Creating_Calendar" name="Creating_Calendar">Creating a Calendar</h2>
- 
-  <p>Creating a new calendar is a basic calendar management skill:</p>
-  
-    <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The created calendar is associated with a specified account. Therefore, you must retrieve the account before creating a new calendar.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  <ol> 
-   <li>Declare a variable to store the created calendar:
-<pre class="prettyprint">var myCalendar = null;</pre>
-   </li>
-   <li>Define a success callback for the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The callback receives a list of <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> objects. Use the first account ID to construct a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object. 
-   <p>Add the new calendar to the system using the <span style="font-family: Courier New,Courier,monospace">addCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p>
-<pre class="prettyprint">function getAccountsSuccess(accounts)
-{
-&nbsp;&nbsp;&nbsp;var account = accounts[0];
-&nbsp;&nbsp;&nbsp;if (account)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New calendar can be created and added */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myCalendar = new tizen.Calendar(account.id, &quot;remote calendar&quot;, &quot;TASK&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.calendar.addCalendar(myCalendar);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;New calendar created with ID=&quot; + myCalendar.id);
-&nbsp;&nbsp;&nbsp;}
-}</pre></li>
-   <li>To retrieve available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The following method call invokes the <span style="font-family: Courier New,Courier,monospace">getAccountsSuccess</span> event handler defined above:
-<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));
-</pre></li>
-  </ol>
-
-              
- <h2 id="Adding_Events" name="Adding_Events">Adding Events to a Calendar</h2>
- 
- 
-  <p>To create engaging applications with various calendar features, you must learn to add events to calendars:</p>
-  <ol>
-    <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as an event.</p> <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
-</pre> </li>
-     <li><p>Create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object and define the event properties:</p> <pre class="prettyprint">var ev = new tizen.CalendarEvent
-({
-&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,
-&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(1, &quot;HOURS&quot;),
-&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;,
-</pre> </li>
-     <li><p>To make a recurring event, define a recurrence rule.</p> <p>In this example, the event repeats once a day for 3 days.</p> <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;recurrenceRule: new tizen.CalendarRecurrenceRule(&quot;DAILY&quot;, {occurrenceCount: 3})
-});
-</pre> </li>
-    <li><p>To set up an alarm to remind the user about the event, create an alarm with the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface, and add the alarm to the event:</p> <pre class="prettyprint">
-/* Alarm is triggered with sound 30 minutes before the event start time */
-var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, &quot;MINS&quot;), &quot;SOUND&quot;);
-
-ev.alarms = [alarm];
-</pre></li>
-     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object.</p> <pre class="prettyprint">calendar.add(ev);  /* ev.id attribute is generated */</pre> </li>
-    </ol>
-                
-  <h2 id="Adding_Events_Batch" name="Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</h2>
-  
-  
-  <p>To create engaging applications with various calendar features, you must learn to add events to calendars in the batch mode:</p>
-    <ol>
-     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p> <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
-</pre> </li>
-     <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">
-var ev = new tizen.CalendarEvent
-({
-&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,
-&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(1, &quot;HOURS&quot;),
-&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;
-});
-</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">To keep the example as simple as possible, the array above includes only 1 event.</td>
-        </tr>
-       </tbody>
-      </table> </li>
-     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the events in the array to the calendar:</p> <pre class="prettyprint">
-calendar.addBatch([ev]);
-</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous, and its callbacks must be used to react to the success or failure of the operation.</td>
-        </tr>
-       </tbody>
-      </table>
-</li>
-    </ol>
-       
-  <h2 id="Managing_Event" name="Managing_Event">Managing a Single Calendar Event</h2>
-                       
-  <p>To create engaging applications with various calendar features, you must learn to manage a single calendar event:</p>
-    <ol>
-     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p> <pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
-</pre> </li>
-     <li><p>Retrieve all events stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
-myCalendar.find(eventSearchSuccessCallback);</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">To retrieve a specific set of events, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the events are retrieved because no filter is used.</p> </td>
-        </tr>
-       </tbody>
-      </table> </li>
-     <li><p>Update or delete the found item inside the <span style="font-family: Courier New,Courier,monospace">eventSearchSuccessCallback()</span> event handler.</p> <p>In this example, the description parameter of the first event is changed and the event is updated in the calendar using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second event is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
-function eventSearchSuccessCallback(events)
-{
-&nbsp;&nbsp;&nbsp;/* Update the first existing event */
-&nbsp;&nbsp;&nbsp;events[0].description = &quot;New Description&quot;;
-&nbsp;&nbsp;&nbsp;myCalendar.update(events[0]);
-
-&nbsp;&nbsp;&nbsp;/* Delete the second existing event */
-&nbsp;&nbsp;&nbsp;myCalendar.remove(events[1].id);
-}</pre> </li>
-    </ol>
-            
-  <h2 id="Updating_Event" name="Updating_Event">Updating Recurring Calendar Events</h2>
-                       
-  <p>To create engaging applications with various calendar features, you must learn to update recurring calendar events:</p>
-  <ol>
-     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p>
-<p>Retrieve the calendar event using the <span style="font-family: Courier New,Courier,monospace">get()</span> method by specifying the event ID.</p>     <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
-var event = calendar.get(evId);
-</pre> </li>
-     <li>Expand the recurring event to get its instances by using the <span style="font-family: Courier New,Courier,monospace">expandRecurrence()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object: <pre class="prettyprint">
-event.expandRecurrence(new tizen.TZDate(2012, 2, 1), new tizen.TZDate(2012, 2, 15),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eventExpandSuccessCB);</pre> <p>The expanded event instances have their own <span style="font-family: Courier New,Courier,monospace">id.uid</span> and <span style="font-family: Courier New,Courier,monospace">id.rid</span> attributes, where the <span style="font-family: Courier New,Courier,monospace">id.uid</span> attribute is the same for all instances.</p> </li>
-     <li><p>Update a single instance of the expanded recurring event.</p> <p>In case of recurring events, you can use the second parameter of the <span style="font-family: Courier New,Courier,monospace">update()</span> method to determine whether a single instance or all occurrences of the event are updated. If the parameter is set to <span style="font-family: Courier New,Courier,monospace">true</span>, all instances are updated, while if it is set to <span style="font-family: Courier New,Courier,monospace">false</span>, only the indicated instance of the recurring event is updated (based on the <span style="font-family: Courier New,Courier,monospace">id.rid</span> attribute).</p> <p>In this example, the second instance of the event is updated.</p> <pre class="prettyprint">
-/* Success event handler */
-function eventExpandSuccessCB(events)
-{
-&nbsp;&nbsp;&nbsp;events[1].summary = &#39;updated summary&#39;;
-&nbsp;&nbsp;&nbsp;calendar.update(events[1], false);
-}
-</pre> </li>
-    </ol>
-           
-  <h2 id="Managing_Event_Batch" name="Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</h2>
-  
-  <p>To create engaging applications with various calendar features, you must learn to manage multiple calendar events in the batch mode:</p>
-  <ol>
-   <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p> <pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
-</pre> </li>
-     <li><p>Retrieve all events stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
-myCalendar.find(eventSearchSuccessCallback, errorCallback);</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">To retrieve a specific set of events, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the events are retrieved because no filter is used.</p> </td>
-        </tr>
-       </tbody>
-      </table> </li>
-
-     <li>To update events:
-      <ol type="a">
-       <li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint">
-function eventSearchSuccessCallback(events)
-{
-&nbsp;&nbsp;&nbsp;events[0].description = &quot;New Description 1&quot;;
-&nbsp;&nbsp;&nbsp;events[1].description = &quot;New Description 2&quot;;
-</pre> </li>
-       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple calendar items asynchronously:</p> <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Update the first 2 existing events */
-&nbsp;&nbsp;&nbsp;myCalendar.updateBatch(events.slice(0, 2));
-}
-</pre> </li>
-      </ol> </li>
-     <li><p>To delete events, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple calendar items asynchronously:</p> <pre class="prettyprint">
-function eventSearchSuccessCallback(events)
-{
-&nbsp;&nbsp;&nbsp;/* Delete the first 2 existing events */
-&nbsp;&nbsp;&nbsp;myCalendar.removeBatch([events[0].id, events[1].id]);
-}
-</pre> </li>
-    </ol>
-       
-  <h2 id="Converting_Event" name="Converting_Event">Converting Calendar Event Formats</h2>
-  
-  <p>The following examples illustrate how to make calendar event exchange more efficient in your application by converting the calendar events to iCalendar format or the other way around using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object respectively:</p>
-  <ul>
-   <li>To convert an iCalendar string to a calendar event:
-    <ol>
-     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p> <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);</pre> </li>
-     <li>Create a new <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object from the iCalendar string and add it to the default calendar: <pre class="prettyprint">
-try
-{
-&nbsp;&nbsp;&nbsp;var ev = new tizen.CalendarEvent
-&nbsp;&nbsp;&nbsp;(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;BEGIN:VCALENDAR\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;BEGIN:VEVENT\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTSTAMP:19970901T1300Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTSTART:19970903T163000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTEND:19970903T190000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SUMMARY:Tizen, Annual Employee Review\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CATEGORIES:BUSINESS,HUMAN RESOURCES\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VEVENT\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VCALENDAR&quot;, &quot;ICALENDAR_20&quot;
-&nbsp;&nbsp;&nbsp;);
-
-&nbsp;&nbsp;&nbsp;calendar.add(ev);
-&nbsp;&nbsp;&nbsp;console.log(&#39;Event added with UID &#39; + ev.id.uid);
-}</pre> </li>
-    </ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method to <a href="#Adding_Events_Batch">add all the events at once in a batch mode</a>.</p> </li>
-   <li>To convert a calendar event to the iCalendar format:
-    <ol>
-     <li>Get the default calendar and find all calendar events which include the &quot;Tizen&quot; string in the <span style="font-family: Courier New,Courier,monospace">Summary</span> attribute: <pre class="prettyprint">
-var myCalendar;
-
-myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
-
-/* Define a filter */
-var filter = new tizen.AttributeFilter(&quot;summary&quot;, &quot;CONTAINS&quot;, &quot;Tizen&quot;);
-
-/* Search for the events */
-myCalendar.find(eventSearchSuccessCallback, errorCallback, filter);
-</pre> </li>
-     <li>Convert a calendar event to an iCalendar string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method using the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method: <pre class="prettyprint">
-function eventSearchSuccessCallback(events)
-{
-&nbsp;&nbsp;&nbsp;/* Convert the first event */
-&nbsp;&nbsp;&nbsp;var vevent = events[0].convertToString(&quot;ICALENDAR_20&quot;);
-}
-</pre> </li>
-    </ol>
-<p>To export and convert multiple events from a calendar, find the required events using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found events one by one.</p> </li></ul>
-
-       
- <h2 id="Adding_Tasks" name="Adding_Tasks">Adding Tasks to a Calendar</h2>
- 
-  <p>To create engaging applications with various calendar features, you must learn to add tasks to calendars:</p>
-  <ol>
-    <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
-</pre> </li>
-     <li><p>Create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object and define the task properties:</p> <pre class="prettyprint">var task = new tizen.CalendarTask
-({
-&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,
-&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 10, 10, 0),
-&nbsp;&nbsp;&nbsp;dueDate: new tizen.TZDate(2011, 3, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;completedDate: new tizen.TZDate(2011, 3, 20, 10, 0),
-&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;
-});
-</pre> </li>
-        <li><p>To set up an alarm to remind the user about the task, create an alarm with the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface, and add the alarm to the task:</p> <pre class="prettyprint">
-/* Alarm is triggered with sound 30 minutes before the task start time */
-var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, &quot;MINS&quot;), &quot;SOUND&quot;);
-
-task.alarms = [alarm];
-</pre></li>
-     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">calendar.add(task);  /* task.id attribute is generated */</pre> </li>
-    </ol>
-               
- <h2 id="Adding_Tasks_Batch" name="Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</h2>
- 
-  <p>To create engaging applications with various calendar features, you must learn to add tasks to calendars in the batch mode:</p>
-    <ol>
-     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p> <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
-</pre> </li>
-     <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">
-var task = new tizen.CalendarTask
-({
-&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,
-&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;dueDate: new tizen.TZDate(2011, 5, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;completedDate: new tizen.TZDate(2011, 4, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;
-});
-</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">To keep the example as simple as possible, the array above includes only 1 task.
-                 </td>
-        </tr>
-       </tbody>
-      </table> </li>
-     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the tasks in the array to the calendar:</p> <pre class="prettyprint">
-calendar.addBatch([task]);
-</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous, and its callbacks must be used if you want to react to the success or failure of the operation.</td>
-        </tr>
-       </tbody>
-      </table>
-</li>
-    </ol>
-       
- <h2 id="Managing_Task" name="Managing_Task">Managing a Single Calendar Task</h2>
- 
-  <p>To create engaging applications with various calendar features, you must learn to manage a single calendar task:</p>
-    <ol>
-     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
-</pre> </li>
-     <li><p>Retrieve all tasks stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
-myCalendar.find(taskSearchSuccessCallback);</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">To retrieve a specific set of tasks, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the tasks are retrieved because no filter is used.</p> </td>
-        </tr>
-       </tbody>
-      </table> </li>
-     <li><p>Update or delete the found item inside the <span style="font-family: Courier New,Courier,monospace">taskSearchSuccessCallback()</span> event handler.</p> <p>In this example, the description parameter of the first task is changed and the task is updated in the calendar using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second task is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
-function taskSearchSuccessCallback(tasks)
-{
-&nbsp;&nbsp;&nbsp;/* Update the first existing task */
-&nbsp;&nbsp;&nbsp;tasks[0].description = &quot;New Description&quot;;
-&nbsp;&nbsp;&nbsp;myCalendar.update(tasks[0]);
-
-&nbsp;&nbsp;&nbsp;/* Delete the second existing task */
-&nbsp;&nbsp;&nbsp;myCalendar.remove(tasks[1].id);
-}</pre> </li>
-    </ol>
-               
- <h2 id="Managing_Task_Batch" name="Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</h2>
- 
-  <p>To create engaging applications with various calendar features, you must learn to manage multiple calendar tasks in the batch mode:</p>
-  <ol>
-   <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
-</pre> </li>
-     <li><p>Retrieve all tasks stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">
-myCalendar.find(taskSearchSuccessCallback);</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">To retrieve a specific set of tasks, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the tasks are retrieved because no filter is used.</p> </td>
-        </tr>
-       </tbody>
-      </table> </li>
-     <li>To update tasks:
-      <ol type="a">
-       <li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint open-bottom">
-function taskSearchSuccessCallback(tasks)
-{
-&nbsp;&nbsp;&nbsp;tasks[0].description = &quot;New Description 1&quot;;
-&nbsp;&nbsp;&nbsp;tasks[1].description = &quot;New Description 2&quot;;
-</pre> </li>
-       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple calendar items asynchronously:</p> <pre class="prettyprint open-top">
-&nbsp;&nbsp;&nbsp;/* Update the first 2 existing tasks */
-&nbsp;&nbsp;&nbsp;myCalendar.updateBatch(tasks.slice(0, 2));
-}
-</pre> </li>
-      </ol> </li>
-     <li><p>To delete tasks, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple calendar items asynchronously:</p> <pre class="prettyprint">
-function taskSearchSuccessCallback(tasks)
-{
-&nbsp;&nbsp;&nbsp;/* Delete the first 2 existing tasks */
-&nbsp;&nbsp;&nbsp;myCalendar.removeBatch([tasks[0].id, tasks[1].id]);
-}
-</pre> </li>
-    </ol>             
- 
- <h2 id="Converting_Task" name="Converting_Task">Converting Calendar Task Formats</h2>
-                       
-  <p>The following examples illustrate how to make calendar task exchange more efficient in your application by converting the calendar task to iCalendar format or the other way around using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object respectively:</p>
-  <ul>
-   <li>To convert an iCalendar string to a calendar task:
-    <ol>
-     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);</pre> </li>
-     <li>Create a new <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object from the iCalendar string and add it to the default calendar: <pre class="prettyprint">
-var task = new tizen.CalendarTask
-(
-&nbsp;&nbsp;&nbsp;&quot;BEGIN:VCALENDAR\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;VERSION:2.0\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;BEGIN:VTODO\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;DTSTAMP:TZID=CET:20110902T110000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;DTSTART;TZID=CET:20110906T140000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;DUE;TZID=CET:20110906T150000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;SUMMARY:Tizen, discuss the schedule\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;DESCRIPTION:Find the feasible schedule\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;CATEGORIES:HUMAN RESOURCES\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;END:VTODO\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;END:VCALENDAR&quot;, &quot;ICALENDAR_20&quot;
-);
-
-calendar.add(task);
-console.log(&#39;Task added with id &#39; + task.id);
-</pre> </li>
-    </ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method to <a href="#Adding_Tasks_Batch">add all the tasks at once in a batch mode</a>.</p> </li>
-   <li>To convert a calendar task to the iCalendar format:
-    <ol>
-     <li>Get the default calendar and find all calendar items which include the &quot;Tizen&quot; string in the <span style="font-family: Courier New,Courier,monospace">Summary</span> attribute: <pre class="prettyprint">
-var myCalendar;
-
-myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
-
-/* Define a filter */
-var filter = new tizen.AttributeFilter(&quot;summary&quot;, &quot;CONTAINS&quot;, &quot;Tizen&quot;);
-
-/* Search for the tasks */
-myCalendar.find(taskSearchSuccessCallback, null, filter);
-</pre> </li>
-     <li>Convert a calendar item to an iCalendar string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method using the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method: <pre class="prettyprint">
-function taskSearchSuccessCallback(tasks)
-{
-&nbsp;&nbsp;&nbsp;/* Convert the first task */
-&nbsp;&nbsp;&nbsp;var vtodo = tasks[0].convertToString(&quot;ICALENDAR_20&quot;);
-}
-</pre> </li>
-    </ol> <p>To export and convert multiple tasks from a calendar, find the required tasks using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found tasks one by one.</p> </li>
-  </ul>
-                 
-  <h2 id="Receiving_Calendar" name="Receiving_Calendar">Receiving Notifications on Calendar Changes</h2>
-  
-  <p>To create engaging applications with various calendar features, you must learn to receive notifications when calendar items are added, updated, or removed:</p>
-  <ol>
-   <li><p>Define the needed variables:</p> <pre class="prettyprint">
-/* Watcher identifier */
-var watcherId = 0;
-
-/* This example assumes that the calendar is initialized */
-var calendar;
-</pre> </li>
-   <li><p>Define the event handlers for different notifications using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarChangeCallback">CalendarChangeCallback</a> listener interface:</p> <pre class="prettyprint">
-var watcher =
-{
-&nbsp;&nbsp;&nbsp;/* When new items are added */
-&nbsp;&nbsp;&nbsp;onitemsadded: function(items)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(items.length + &quot; items were added&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When items are updated */
-&nbsp;&nbsp;&nbsp;onitemsupdated: function(items)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(items.length + &quot; items were updated&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When items are deleted */
-&nbsp;&nbsp;&nbsp;onitemsremoved: function(ids)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ids.length + &quot; items were removed&quot;);
-&nbsp;&nbsp;&nbsp;}
-};
-</pre> </li>
-   <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">
-watcherId = calendar.addChangeListener(watcher);
-</pre> </li>
-   <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method: </p> <pre class="prettyprint">
-function cancelWatch()
-{
-&nbsp;&nbsp;&nbsp;calendar.removeChangeListener(watcherId);
-}
-</pre> </li>
-  </ol>
-            
-               
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Calendar: Managing Calendars and Calendar Events</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+               <li><a href="#Creating_Calendar">Creating a Calendar</a></li>\r
+               <li>Events\r
+               <ul class="toc">\r
+                       <li><a href="#Adding_Events">Adding Events to a Calendar</a></li> \r
+                       <li><a href="#Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</a></li> \r
+                       <li><a href="#Managing_Event">Managing a Single Calendar Event</a></li>\r
+                       <li><a href="#Updating_Event">Updating Recurring Calendar Events</a></li>\r
+                       <li><a href="#Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</a></li>\r
+                       <li><a href="#Converting_Event">Converting Calendar Event Formats</a></li>\r
+               </ul></li>\r
+               <li>Tasks\r
+               <ul class="toc">\r
+                       <li><a href="#Adding_Tasks">Adding Tasks to a Calendar</a></li>\r
+                       <li><a href="#Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</a></li>\r
+                       <li><a href="#Managing_Task">Managing a Single Calendar Task</a></li>\r
+                       <li><a href="#Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</a></li>\r
+                       <li><a href="#Converting_Task">Converting Calendar Task Formats</a></li>  \r
+               </ul></li>\r
+               <li><a href="#Receiving_Calendar">Receiving Notifications on Calendar Changes</a></li>          \r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/calendar_w.htm">Calendar Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Calendar: Managing Calendars and Calendar Events</h1>\r
+        \r
+      <p>This tutorial demonstrates how you can manage calendars in the device to access, modify, add, and remove calendar items within a specified calendar on the device.</p>\r
+         \r
+           <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+      \r
+  <h2>Warm-up</h2>\r
+      <p>Become familiar with the Calendar API basics by learning about:</p>\r
+      <ul>\r
+           <li><a href="#Creating_Calendar">Creating a Calendar</a> <p>Create a new calendar using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> constructor.</p></li>\r
+               <li>Events\r
+               <ul>\r
+                       <li><a href="#Adding_Events">Adding Events to a Calendar</a> <p>Add events to the default calendar, and define an alarm and recurrence rule for an event.</p> </li> \r
+                       <li><a href="#Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</a> <p>Add events to the default calendar in the batch mode.</p></li> \r
+                       <li><a href="#Managing_Event">Managing a Single Calendar Event</a> <p>Update and delete an existing calendar event.</p> </li>\r
+                       <li><a href="#Updating_Event">Updating Recurring Calendar Events</a> <p>Update a single instance of a recurring event.</p> </li>\r
+                       <li><a href="#Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</a> <p>Update and delete calendar events in the batch mode.</p> </li>\r
+                       <li><a href="#Converting_Event">Converting Calendar Event Formats</a> <p>Convert a calendar event to the iCalendar format and back.</p></li>\r
+               </ul></li>\r
+               <li>Tasks\r
+               <ul>\r
+                       <li><a href="#Adding_Tasks">Adding Tasks to a Calendar</a> <p>Add tasks to the default calendar, and define an alarm for a task.</p></li>\r
+                       <li><a href="#Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</a> <p>Add tasks to the default calendar in the batch mode.</p></li>\r
+                       <li><a href="#Managing_Task">Managing a Single Calendar Task</a> <p>Update and delete an existing calendar task.</p></li>\r
+                       <li><a href="#Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</a> <p>Update and delete calendar tasks in the batch mode.</p> </li>\r
+                       <li><a href="#Converting_Task">Converting Calendar Task Formats</a> <p>Convert a calendar task to the iCalendar format and back.</p></li>  \r
+               </ul></li>\r
+               <li><a href="#Receiving_Calendar">Receiving Notifications on Calendar Changes</a> <p>Receive notifications when calendar items are added, updated, or deleted.</p></li>\r
+      </ul>\r
+  <h2 id="task" name="task">Task</h2>\r
+        <p>In the <a href="task_eventmanager_w.htm">Event Manager</a> task, we will walk through how to manage calendar events in your application.</p>\r
+       \r
+ <h2 id="Creating_Calendar" name="Creating_Calendar">Creating a Calendar</h2>\r
+ \r
+  <p>Creating a new calendar is a basic calendar management skill:</p>\r
+  \r
+    <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The created calendar is associated with a specified account. Therefore, you must retrieve the account before creating a new calendar.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  <ol> \r
+   <li>Declare a variable to store the created calendar:\r
+<pre class="prettyprint">var myCalendar = null;</pre>\r
+   </li>\r
+   <li>Define a success callback for the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The callback receives a list of <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> objects. Use the first account ID to construct a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object. \r
+   <p>Add the new calendar to the system using the <span style="font-family: Courier New,Courier,monospace">addCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p>\r
+<pre class="prettyprint">function getAccountsSuccess(accounts)\r
+{\r
+&nbsp;&nbsp;&nbsp;var account = accounts[0];\r
+&nbsp;&nbsp;&nbsp;if (account)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New calendar can be created and added */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myCalendar = new tizen.Calendar(account.id, &quot;remote calendar&quot;, &quot;TASK&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.calendar.addCalendar(myCalendar);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;New calendar created with ID=&quot; + myCalendar.id);\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre></li>\r
+   <li>To retrieve available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The following method call invokes the <span style="font-family: Courier New,Courier,monospace">getAccountsSuccess</span> event handler defined above:\r
+<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));\r
+</pre></li>\r
+  </ol>\r
+\r
+              \r
+ <h2 id="Adding_Events" name="Adding_Events">Adding Events to a Calendar</h2>\r
+ \r
+ \r
+  <p>To create engaging applications with various calendar features, you must learn to add events to calendars:</p>\r
+  <ol>\r
+    <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as an event.</p> <pre class="prettyprint">\r
+var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);\r
+</pre> </li>\r
+     <li><p>Create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object and define the event properties:</p> <pre class="prettyprint">var ev = new tizen.CalendarEvent\r
+({\r
+&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,\r
+&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,\r
+&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),\r
+&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(1, &quot;HOURS&quot;),\r
+&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;,\r
+</pre> </li>\r
+     <li><p>To make a recurring event, define a recurrence rule.</p> <p>In this example, the event repeats once a day for 3 days.</p> <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;recurrenceRule: new tizen.CalendarRecurrenceRule(&quot;DAILY&quot;, {occurrenceCount: 3})\r
+});\r
+</pre> </li>\r
+    <li><p>To set up an alarm to remind the user about the event, create an alarm with the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface, and add the alarm to the event:</p> <pre class="prettyprint">\r
+/* Alarm is triggered with sound 30 minutes before the event start time */\r
+var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, &quot;MINS&quot;), &quot;SOUND&quot;);\r
+\r
+ev.alarms = [alarm];\r
+</pre></li>\r
+     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object.</p> <pre class="prettyprint">calendar.add(ev);  /* ev.id attribute is generated */</pre> </li>\r
+    </ol>\r
+                \r
+  <h2 id="Adding_Events_Batch" name="Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</h2>\r
+  \r
+  \r
+  <p>To create engaging applications with various calendar features, you must learn to add events to calendars in the batch mode:</p>\r
+    <ol>\r
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p> <pre class="prettyprint">\r
+var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);\r
+</pre> </li>\r
+     <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">\r
+var ev = new tizen.CalendarEvent\r
+({\r
+&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,\r
+&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,\r
+&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),\r
+&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(1, &quot;HOURS&quot;),\r
+&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;\r
+});\r
+</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">To keep the example as simple as possible, the array above includes only 1 event.</td>\r
+        </tr>\r
+       </tbody>\r
+      </table> </li>\r
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the events in the array to the calendar:</p> <pre class="prettyprint">\r
+calendar.addBatch([ev]);\r
+</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous, and its callbacks must be used to react to the success or failure of the operation.</td>\r
+        </tr>\r
+       </tbody>\r
+      </table>\r
+</li>\r
+    </ol>\r
+       \r
+  <h2 id="Managing_Event" name="Managing_Event">Managing a Single Calendar Event</h2>\r
+                       \r
+  <p>To create engaging applications with various calendar features, you must learn to manage a single calendar event:</p>\r
+    <ol>\r
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p> <pre class="prettyprint">\r
+var myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);\r
+</pre> </li>\r
+     <li><p>Retrieve all events stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">\r
+myCalendar.find(eventSearchSuccessCallback);</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">To retrieve a specific set of events, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the events are retrieved because no filter is used.</p> </td>\r
+        </tr>\r
+       </tbody>\r
+      </table> </li>\r
+     <li><p>Update or delete the found item inside the <span style="font-family: Courier New,Courier,monospace">eventSearchSuccessCallback()</span> event handler.</p> <p>In this example, the description parameter of the first event is changed and the event is updated in the calendar using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second event is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */\r
+function eventSearchSuccessCallback(events)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Update the first existing event */\r
+&nbsp;&nbsp;&nbsp;events[0].description = &quot;New Description&quot;;\r
+&nbsp;&nbsp;&nbsp;myCalendar.update(events[0]);\r
+\r
+&nbsp;&nbsp;&nbsp;/* Delete the second existing event */\r
+&nbsp;&nbsp;&nbsp;myCalendar.remove(events[1].id);\r
+}</pre> </li>\r
+    </ol>\r
+            \r
+  <h2 id="Updating_Event" name="Updating_Event">Updating Recurring Calendar Events</h2>\r
+                       \r
+  <p>To create engaging applications with various calendar features, you must learn to update recurring calendar events:</p>\r
+  <ol>\r
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p>\r
+<p>Retrieve the calendar event using the <span style="font-family: Courier New,Courier,monospace">get()</span> method by specifying the event ID.</p>     <pre class="prettyprint">\r
+var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);\r
+var event = calendar.get(evId);\r
+</pre> </li>\r
+     <li>Expand the recurring event to get its instances by using the <span style="font-family: Courier New,Courier,monospace">expandRecurrence()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object: <pre class="prettyprint">\r
+event.expandRecurrence(new tizen.TZDate(2012, 2, 1), new tizen.TZDate(2012, 2, 15),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eventExpandSuccessCB);</pre> <p>The expanded event instances have their own <span style="font-family: Courier New,Courier,monospace">id.uid</span> and <span style="font-family: Courier New,Courier,monospace">id.rid</span> attributes, where the <span style="font-family: Courier New,Courier,monospace">id.uid</span> attribute is the same for all instances.</p> </li>\r
+     <li><p>Update a single instance of the expanded recurring event.</p> <p>In case of recurring events, you can use the second parameter of the <span style="font-family: Courier New,Courier,monospace">update()</span> method to determine whether a single instance or all occurrences of the event are updated. If the parameter is set to <span style="font-family: Courier New,Courier,monospace">true</span>, all instances are updated, while if it is set to <span style="font-family: Courier New,Courier,monospace">false</span>, only the indicated instance of the recurring event is updated (based on the <span style="font-family: Courier New,Courier,monospace">id.rid</span> attribute).</p> <p>In this example, the second instance of the event is updated.</p> <pre class="prettyprint">\r
+/* Success event handler */\r
+function eventExpandSuccessCB(events)\r
+{\r
+&nbsp;&nbsp;&nbsp;events[1].summary = &#39;updated summary&#39;;\r
+&nbsp;&nbsp;&nbsp;calendar.update(events[1], false);\r
+}\r
+</pre> </li>\r
+    </ol>\r
+           \r
+  <h2 id="Managing_Event_Batch" name="Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</h2>\r
+  \r
+  <p>To create engaging applications with various calendar features, you must learn to manage multiple calendar events in the batch mode:</p>\r
+  <ol>\r
+   <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p> <pre class="prettyprint">\r
+var myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);\r
+</pre> </li>\r
+     <li><p>Retrieve all events stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">\r
+myCalendar.find(eventSearchSuccessCallback, errorCallback);</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">To retrieve a specific set of events, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the events are retrieved because no filter is used.</p> </td>\r
+        </tr>\r
+       </tbody>\r
+      </table> </li>\r
+\r
+     <li>To update events:\r
+      <ol type="a">\r
+       <li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint">\r
+function eventSearchSuccessCallback(events)\r
+{\r
+&nbsp;&nbsp;&nbsp;events[0].description = &quot;New Description 1&quot;;\r
+&nbsp;&nbsp;&nbsp;events[1].description = &quot;New Description 2&quot;;\r
+</pre> </li>\r
+       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple calendar items asynchronously:</p> <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;/* Update the first 2 existing events */\r
+&nbsp;&nbsp;&nbsp;myCalendar.updateBatch(events.slice(0, 2));\r
+}\r
+</pre> </li>\r
+      </ol> </li>\r
+     <li><p>To delete events, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple calendar items asynchronously:</p> <pre class="prettyprint">\r
+function eventSearchSuccessCallback(events)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Delete the first 2 existing events */\r
+&nbsp;&nbsp;&nbsp;myCalendar.removeBatch([events[0].id, events[1].id]);\r
+}\r
+</pre> </li>\r
+    </ol>\r
+       \r
+  <h2 id="Converting_Event" name="Converting_Event">Converting Calendar Event Formats</h2>\r
+  \r
+  <p>The following examples illustrate how to make calendar event exchange more efficient in your application by converting the calendar events to iCalendar format or the other way around using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object respectively:</p>\r
+  <ul>\r
+   <li>To convert an iCalendar string to a calendar event:\r
+    <ol>\r
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p> <pre class="prettyprint">\r
+var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);</pre> </li>\r
+     <li>Create a new <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object from the iCalendar string and add it to the default calendar: <pre class="prettyprint">\r
+try\r
+{\r
+&nbsp;&nbsp;&nbsp;var ev = new tizen.CalendarEvent\r
+&nbsp;&nbsp;&nbsp;(\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;BEGIN:VCALENDAR\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;BEGIN:VEVENT\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTSTAMP:19970901T1300Z\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTSTART:19970903T163000Z\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTEND:19970903T190000Z\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SUMMARY:Tizen, Annual Employee Review\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CATEGORIES:BUSINESS,HUMAN RESOURCES\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VEVENT\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VCALENDAR&quot;, &quot;ICALENDAR_20&quot;\r
+&nbsp;&nbsp;&nbsp;);\r
+\r
+&nbsp;&nbsp;&nbsp;calendar.add(ev);\r
+&nbsp;&nbsp;&nbsp;console.log(&#39;Event added with UID &#39; + ev.id.uid);\r
+}</pre> </li>\r
+    </ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method to <a href="#Adding_Events_Batch">add all the events at once in a batch mode</a>.</p> </li>\r
+   <li>To convert a calendar event to the iCalendar format:\r
+    <ol>\r
+     <li>Get the default calendar and find all calendar events which include the &quot;Tizen&quot; string in the <span style="font-family: Courier New,Courier,monospace">Summary</span> attribute: <pre class="prettyprint">\r
+var myCalendar;\r
+\r
+myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);\r
+\r
+/* Define a filter */\r
+var filter = new tizen.AttributeFilter(&quot;summary&quot;, &quot;CONTAINS&quot;, &quot;Tizen&quot;);\r
+\r
+/* Search for the events */\r
+myCalendar.find(eventSearchSuccessCallback, errorCallback, filter);\r
+</pre> </li>\r
+     <li>Convert a calendar event to an iCalendar string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method using the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method: <pre class="prettyprint">\r
+function eventSearchSuccessCallback(events)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Convert the first event */\r
+&nbsp;&nbsp;&nbsp;var vevent = events[0].convertToString(&quot;ICALENDAR_20&quot;);\r
+}\r
+</pre> </li>\r
+    </ol>\r
+<p>To export and convert multiple events from a calendar, find the required events using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found events one by one.</p> </li></ul>\r
+\r
+       \r
+ <h2 id="Adding_Tasks" name="Adding_Tasks">Adding Tasks to a Calendar</h2>\r
+ \r
+  <p>To create engaging applications with various calendar features, you must learn to add tasks to calendars:</p>\r
+  <ol>\r
+    <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">\r
+var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);\r
+</pre> </li>\r
+     <li><p>Create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object and define the task properties:</p> <pre class="prettyprint">var task = new tizen.CalendarTask\r
+({\r
+&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,\r
+&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,\r
+&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 10, 10, 0),\r
+&nbsp;&nbsp;&nbsp;dueDate: new tizen.TZDate(2011, 3, 30, 10, 0),\r
+&nbsp;&nbsp;&nbsp;completedDate: new tizen.TZDate(2011, 3, 20, 10, 0),\r
+&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;\r
+});\r
+</pre> </li>\r
+        <li><p>To set up an alarm to remind the user about the task, create an alarm with the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface, and add the alarm to the task:</p> <pre class="prettyprint">\r
+/* Alarm is triggered with sound 30 minutes before the task start time */\r
+var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, &quot;MINS&quot;), &quot;SOUND&quot;);\r
+\r
+task.alarms = [alarm];\r
+</pre></li>\r
+     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">calendar.add(task);  /* task.id attribute is generated */</pre> </li>\r
+    </ol>\r
+               \r
+ <h2 id="Adding_Tasks_Batch" name="Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</h2>\r
+ \r
+  <p>To create engaging applications with various calendar features, you must learn to add tasks to calendars in the batch mode:</p>\r
+    <ol>\r
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p> <pre class="prettyprint">\r
+var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);\r
+</pre> </li>\r
+     <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">\r
+var task = new tizen.CalendarTask\r
+({\r
+&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,\r
+&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,\r
+&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),\r
+&nbsp;&nbsp;&nbsp;dueDate: new tizen.TZDate(2011, 5, 30, 10, 0),\r
+&nbsp;&nbsp;&nbsp;completedDate: new tizen.TZDate(2011, 4, 30, 10, 0),\r
+&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;\r
+});\r
+</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">To keep the example as simple as possible, the array above includes only 1 task.\r
+                 </td>\r
+        </tr>\r
+       </tbody>\r
+      </table> </li>\r
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object to add the tasks in the array to the calendar:</p> <pre class="prettyprint">\r
+calendar.addBatch([task]);\r
+</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method is asynchronous, and its callbacks must be used if you want to react to the success or failure of the operation.</td>\r
+        </tr>\r
+       </tbody>\r
+      </table>\r
+</li>\r
+    </ol>\r
+       \r
+ <h2 id="Managing_Task" name="Managing_Task">Managing a Single Calendar Task</h2>\r
+ \r
+  <p>To create engaging applications with various calendar features, you must learn to manage a single calendar task:</p>\r
+    <ol>\r
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">\r
+var myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);\r
+</pre> </li>\r
+     <li><p>Retrieve all tasks stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">\r
+myCalendar.find(taskSearchSuccessCallback);</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">To retrieve a specific set of tasks, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the tasks are retrieved because no filter is used.</p> </td>\r
+        </tr>\r
+       </tbody>\r
+      </table> </li>\r
+     <li><p>Update or delete the found item inside the <span style="font-family: Courier New,Courier,monospace">taskSearchSuccessCallback()</span> event handler.</p> <p>In this example, the description parameter of the first task is changed and the task is updated in the calendar using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second task is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */\r
+function taskSearchSuccessCallback(tasks)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Update the first existing task */\r
+&nbsp;&nbsp;&nbsp;tasks[0].description = &quot;New Description&quot;;\r
+&nbsp;&nbsp;&nbsp;myCalendar.update(tasks[0]);\r
+\r
+&nbsp;&nbsp;&nbsp;/* Delete the second existing task */\r
+&nbsp;&nbsp;&nbsp;myCalendar.remove(tasks[1].id);\r
+}</pre> </li>\r
+    </ol>\r
+               \r
+ <h2 id="Managing_Task_Batch" name="Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</h2>\r
+ \r
+  <p>To create engaging applications with various calendar features, you must learn to manage multiple calendar tasks in the batch mode:</p>\r
+  <ol>\r
+   <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">\r
+var myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);\r
+</pre> </li>\r
+     <li><p>Retrieve all tasks stored in the calendar by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">\r
+myCalendar.find(taskSearchSuccessCallback);</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">To retrieve a specific set of tasks, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#calendar">Calendar Filter Attributes</a>). <p>In this example, all the tasks are retrieved because no filter is used.</p> </td>\r
+        </tr>\r
+       </tbody>\r
+      </table> </li>\r
+     <li>To update tasks:\r
+      <ol type="a">\r
+       <li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint open-bottom">\r
+function taskSearchSuccessCallback(tasks)\r
+{\r
+&nbsp;&nbsp;&nbsp;tasks[0].description = &quot;New Description 1&quot;;\r
+&nbsp;&nbsp;&nbsp;tasks[1].description = &quot;New Description 2&quot;;\r
+</pre> </li>\r
+       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple calendar items asynchronously:</p> <pre class="prettyprint open-top">\r
+&nbsp;&nbsp;&nbsp;/* Update the first 2 existing tasks */\r
+&nbsp;&nbsp;&nbsp;myCalendar.updateBatch(tasks.slice(0, 2));\r
+}\r
+</pre> </li>\r
+      </ol> </li>\r
+     <li><p>To delete tasks, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple calendar items asynchronously:</p> <pre class="prettyprint">\r
+function taskSearchSuccessCallback(tasks)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Delete the first 2 existing tasks */\r
+&nbsp;&nbsp;&nbsp;myCalendar.removeBatch([tasks[0].id, tasks[1].id]);\r
+}\r
+</pre> </li>\r
+    </ol>             \r
+ \r
+ <h2 id="Converting_Task" name="Converting_Task">Converting Calendar Task Formats</h2>\r
+                       \r
+  <p>The following examples illustrate how to make calendar task exchange more efficient in your application by converting the calendar task to iCalendar format or the other way around using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object respectively:</p>\r
+  <ul>\r
+   <li>To convert an iCalendar string to a calendar task:\r
+    <ol>\r
+     <li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">\r
+var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);</pre> </li>\r
+     <li>Create a new <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object from the iCalendar string and add it to the default calendar: <pre class="prettyprint">\r
+var task = new tizen.CalendarTask\r
+(\r
+&nbsp;&nbsp;&nbsp;&quot;BEGIN:VCALENDAR\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;VERSION:2.0\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;BEGIN:VTODO\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;DTSTAMP:TZID=CET:20110902T110000Z\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;DTSTART;TZID=CET:20110906T140000Z\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;DUE;TZID=CET:20110906T150000Z\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;SUMMARY:Tizen, discuss the schedule\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;DESCRIPTION:Find the feasible schedule\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;CATEGORIES:HUMAN RESOURCES\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;END:VTODO\r\n&quot; +\r
+&nbsp;&nbsp;&nbsp;&quot;END:VCALENDAR&quot;, &quot;ICALENDAR_20&quot;\r
+);\r
+\r
+calendar.add(task);\r
+console.log(&#39;Task added with id &#39; + task.id);\r
+</pre> </li>\r
+    </ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method to <a href="#Adding_Tasks_Batch">add all the tasks at once in a batch mode</a>.</p> </li>\r
+   <li>To convert a calendar task to the iCalendar format:\r
+    <ol>\r
+     <li>Get the default calendar and find all calendar items which include the &quot;Tizen&quot; string in the <span style="font-family: Courier New,Courier,monospace">Summary</span> attribute: <pre class="prettyprint">\r
+var myCalendar;\r
+\r
+myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);\r
+\r
+/* Define a filter */\r
+var filter = new tizen.AttributeFilter(&quot;summary&quot;, &quot;CONTAINS&quot;, &quot;Tizen&quot;);\r
+\r
+/* Search for the tasks */\r
+myCalendar.find(taskSearchSuccessCallback, null, filter);\r
+</pre> </li>\r
+     <li>Convert a calendar item to an iCalendar string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method using the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method: <pre class="prettyprint">\r
+function taskSearchSuccessCallback(tasks)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Convert the first task */\r
+&nbsp;&nbsp;&nbsp;var vtodo = tasks[0].convertToString(&quot;ICALENDAR_20&quot;);\r
+}\r
+</pre> </li>\r
+    </ol> <p>To export and convert multiple tasks from a calendar, find the required tasks using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found tasks one by one.</p> </li>\r
+  </ul>\r
+                 \r
+  <h2 id="Receiving_Calendar" name="Receiving_Calendar">Receiving Notifications on Calendar Changes</h2>\r
+  \r
+  <p>To create engaging applications with various calendar features, you must learn to receive notifications when calendar items are added, updated, or removed:</p>\r
+  <ol>\r
+   <li><p>Define the needed variables:</p> <pre class="prettyprint">\r
+/* Watcher identifier */\r
+var watcherId = 0;\r
+\r
+/* This example assumes that the calendar is initialized */\r
+var calendar;\r
+</pre> </li>\r
+   <li><p>Define the event handlers for different notifications using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarChangeCallback">CalendarChangeCallback</a> listener interface:</p> <pre class="prettyprint">\r
+var watcher =\r
+{\r
+&nbsp;&nbsp;&nbsp;/* When new items are added */\r
+&nbsp;&nbsp;&nbsp;onitemsadded: function(items)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(items.length + &quot; items were added&quot;);\r
+&nbsp;&nbsp;&nbsp;},\r
+\r
+&nbsp;&nbsp;&nbsp;/* When items are updated */\r
+&nbsp;&nbsp;&nbsp;onitemsupdated: function(items)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(items.length + &quot; items were updated&quot;);\r
+&nbsp;&nbsp;&nbsp;},\r
+\r
+&nbsp;&nbsp;&nbsp;/* When items are deleted */\r
+&nbsp;&nbsp;&nbsp;onitemsremoved: function(ids)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ids.length + &quot; items were removed&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+};\r
+</pre> </li>\r
+   <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">\r
+watcherId = calendar.addChangeListener(watcher);\r
+</pre> </li>\r
+   <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method: </p> <pre class="prettyprint">\r
+function cancelWatch()\r
+{\r
+&nbsp;&nbsp;&nbsp;calendar.removeChangeListener(watcherId);\r
+}\r
+</pre> </li>\r
+  </ol>\r
+            \r
+               \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm
index 50163e2..aae5dc0 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm
@@ -1,201 +1,201 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Call History: Managing the Call History on the Device</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#Searching_Call_History">Searching for Call History Items</a></li>
-                       <li><a href="#Removing_Call_History">Removing Call History Items</a></li>
-                       <li><a href="#Monitoring_Call_History">Monitoring the Call History</a></li>
-               </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/call_history_w.htm">Call History Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Call History: Managing the Call History on the Device</h1>
-       
-      <p>This tutorial demonstrates how you can manage and monitor the call history.</p>
-         
-            <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-   
-      <h2>Warm-up</h2>
-      <p>Become familiar with the Call History API basics by learning about:</p>
-      <ul>
-       <li><a href="#Searching_Call_History">Searching for Call History Items</a> <p>Retrieve call history items.</p></li>
-       <li><a href="#Removing_Call_History">Removing Call History Items</a> <p>Retrieve and remove call history items.</p></li>
-       <li><a href="#Monitoring_Call_History">Monitoring the Call History</a> <p>Use event handlers to track changes in the call history.</p></li>
-      </ul>
-  <h2 id="task" name="task">Task</h2>
-      <p>In the <a href="task_calllog_w.htm">Call Log</a> task, we will walk through how to manage call logs in your application.</p>
-
-
-  <h2 id="Searching_Call_History" name="Searching_Call_History">Searching for Call History Items</h2>
-                       
-  <p>Learning how to retrieve call history items using different parameters allows you to view specific items in a specific order, making call history monitoring easy and convenient.</p> 
-  <ol> 
-   <li>To retrieve call history items, use the <span style="font-family: Courier New,Courier,monospace">find(successCallback, errorCallback, filter, sortMode, limit, offset)</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface.<p></p> <p>This method is asynchronous, and the result of the query is an array of <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> objects.</p> <pre class="prettyprint">tizen.callhistory.find(onSuccess, onError, ifilter, sortMode, 20, 10);</pre> </li> 
-   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to define an event handler for the query result set.</p> <p>In the following code snippet, the found call history items are appended to the console log.</p> <pre class="prettyprint">function onSuccess(results) 
-{
-&nbsp;&nbsp;&nbsp;console.log(results.length + &quot; call history item(s) found!&quot;);
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; results.length; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i + &quot;. &quot; + results[i].toString()); 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Process the CallHistoryEntry */
-&nbsp;&nbsp;&nbsp;}
-}</pre> </li> 
-   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">filter</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to define a filter for the query result set. A filter with the <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry </span>attributes is used to limit the results of the call history search.</p> <p>You can define various filters:</p> 
-    <ul> 
-     <li><p>The <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> type is used to search based on a single <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry</span> attribute (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#call">CallHistory Filter Attributes</a>).</p> <p>For example, the following filters define that only cellular calls or calls where the remote party has the telephone number 123456789 are included in the query results:</p> <pre class="prettyprint">/* First filter example */
-var filter = new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, &quot;TEL&quot;);
-
-/* Second filter example */
-var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;, &quot;EXACTLY&quot;, &quot;123456789&quot;)</pre> </li> 
-     <li> <p> The <span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> type represents a set of filters. The <span style="font-family: Courier New,Courier,monospace">UNION</span> type composite filter matches any object that is matched by any of its filters; the <span style="font-family: Courier New,Courier,monospace">INTERSECTION</span> type composite filter matches all objects that are matched by all of its filters.</p> <p>For example, the following code snippet defines a set of filters that include in the query results only the video calls where the remote party has the telephone number 123456789 and the call has started during the year 2009 or 2011:</p> <pre class="prettyprint">/* Create the ranges for the time filter */
-var y2009Filter = new tizen.AttributeRangeFilter(&quot;startTime&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2009, 0, 1),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2010, 0, 1));
-var y2011Filter = new tizen.AttributeRangeFilter(&quot;startTime&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2011, 0, 1),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2012, 0, 1));
-
-/* Create a time filter */
-var dataFilter = new tizen.CompositeFilter(&quot;UNION&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[y2009Filter, y2011Filter]);
-
-/* Create a video call filter */
-var tfilter = new tizen.AttributeFilter(&quot;features&quot;, &quot;EXACTLY&quot;, &quot;VIDEOCALL&quot;);
-
-/* Combine the filters into a set */
-var ifilter = new tizen.CompositeFilter(&quot;INTERSECTION&quot;, [numberFilter, dataFilter, tfilter]);</pre> </li> 
-    </ul> </li> 
-   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameter to order the query result set. If the parameter is undefined or set to <span style="font-family: Courier New,Courier,monospace">null</span>, the results are sorted by default in a descending order.</p> <p>In the following code snippet, the found call history items are sorted according to the start time, in descending order:</p> <pre class="prettyprint">var sortMode = new tizen.SortMode(&quot;startTime&quot;, &quot;DESC&quot;);</pre> </li> 
-   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">limit</span> and <span style="font-family: Courier New,Courier,monospace">offset</span> parameters of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to specify the starting point and upper limit of the results that are returned.</p> <p>The <span style="font-family: Courier New,Courier,monospace">limit</span> parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the <span style="font-family: Courier New,Courier,monospace">offset</span> parameter skips that many matching results that are to be returned (the value 0 means nothing is skipped).</p> <p>For example, if your search results consist of 100 matching results and you have specified an offset of 10 and a limit of 20, you get the objects from 10-29. The matching results from 0-9 are skipped due to the offset, and the 20 results starting from the first result after the offset are returned.</p> </li> 
-  </ol> 
-
-  
-  <h2 id="Removing_Call_History" name="Removing_Call_History">Removing Call History Items</h2>
-                       
-  <p>Learning how to remove call history items allows you to keep the call history list organized and save storage space on the device:</p> 
-  <ol> 
-   <li><p> Use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to remove a specific item from the call history. First, search for the entry to be removed with the <span style="font-family: Courier New,Courier,monospace">find()</span> method, and then handle the removal in the event handler that is called when the <span style="font-family: Courier New,Courier,monospace">find()</span> method is successful.</p> <pre class="prettyprint">/* Remove the found call history item */
-function onSuccess(results) 
-{
-&nbsp;&nbsp;&nbsp;if (results.length &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.callhistory.remove(results[0]);
-}
-
-var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EXACTLY&quot;, &quot;123456789&quot;); 
-/* Search for the item to be removed */
-tizen.callhistory.find(onSuccess, onError, numberFilter, null, 1);
-</pre> </li> 
-   <li><p> To remove multiple call history items, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method.</p> <p>The <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method functions similarly as the <span style="font-family: Courier New,Courier,monospace">remove()</span> method, except that it removes a list of call history items instead of a single item:</p> <pre class="prettyprint">/* Define success callback */
-function onSuccess(results) 
-{
-&nbsp;&nbsp;&nbsp;tizen.callhistory.removeBatch(results);
-}
-
-var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EXACTLY&quot;, &quot;123456789&quot;); 
-tizen.callhistory.find(onSuccess, onError, numberFilter);
-</pre> </li> 
-   <li><p> To remove all call history items, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method:</p> <pre class="prettyprint">tizen.callhistory.removeAll();</pre> </li> 
-  </ol> 
-  
-               
-  
-  <h2 id="Monitoring_Call_History" name="Monitoring_Call_History">Monitoring the Call History</h2>
-                       
-  <p>Learning how to register change listeners allows you to synchronize the view of your application to changes in the call history database.</p> 
-  <ol> 
-
-   <li> <p>Define the <span style="font-family: Courier New,Courier,monospace">onadded</span> event handler of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryChangeCallback">CallHistoryChangeCallback</a> listener interface, which tracks all new incoming and outgoing calls that are added to the call history.</p> <pre class="prettyprint">var onHistoryChange = 
-{
-&nbsp;&nbsp;&nbsp;onadded: function(newItems)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in newItems)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is newly added. Its startTime: &quot; + newItems[i].startTime);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},</pre> </li> 
-   <li> <p>Define the <span style="font-family: Courier New,Courier,monospace">onchanged</span> event handler, which tracks all changes in the call history.</p> <p>The event handler receives as an argument an array of <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> instances, which represent the changed items in the call history.</p> <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;onchanged: function(changedItems)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in changedItems)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is updated. Its direction: &quot; + changedItems[i].direction);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
-</pre> </li> 
-<li><p>Define the <span style="font-family: Courier New,Courier,monospace">onremoved</span> event handler, which tracks all items that are removed from the call history:</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;onremoved: function(removedItems) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in removedItems)  
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is removed. The removed item&#39;s UID: &quot; + removedItems[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-};</pre>
-</li>
-<li> <p>Use the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to register a listener for observing call history changes:</p> <pre class="prettyprint">var callHistoryListener = tizen.callhistory.addChangeListener(onHistoryChange);</pre> </li>
-
-   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method to unregister a previously registered listener. Use the ID returned by the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span>:</p> <pre class="prettyprint">tizen.callhistory.removeChangeListener(callHistoryListener);</pre> </li> 
-  </ol> 
-       
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Call History: Managing the Call History on the Device</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#Searching_Call_History">Searching for Call History Items</a></li>\r
+                       <li><a href="#Removing_Call_History">Removing Call History Items</a></li>\r
+                       <li><a href="#Monitoring_Call_History">Monitoring the Call History</a></li>\r
+               </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/call_history_w.htm">Call History Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Call History: Managing the Call History on the Device</h1>\r
+       \r
+      <p>This tutorial demonstrates how you can manage and monitor the call history.</p>\r
+         \r
+            <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+   \r
+      <h2>Warm-up</h2>\r
+      <p>Become familiar with the Call History API basics by learning about:</p>\r
+      <ul>\r
+       <li><a href="#Searching_Call_History">Searching for Call History Items</a> <p>Retrieve call history items.</p></li>\r
+       <li><a href="#Removing_Call_History">Removing Call History Items</a> <p>Retrieve and remove call history items.</p></li>\r
+       <li><a href="#Monitoring_Call_History">Monitoring the Call History</a> <p>Use event handlers to track changes in the call history.</p></li>\r
+      </ul>\r
+  <h2 id="task" name="task">Task</h2>\r
+      <p>In the <a href="task_calllog_w.htm">Call Log</a> task, we will walk through how to manage call logs in your application.</p>\r
+\r
+\r
+  <h2 id="Searching_Call_History" name="Searching_Call_History">Searching for Call History Items</h2>\r
+                       \r
+  <p>Learning how to retrieve call history items using different parameters allows you to view specific items in a specific order, making call history monitoring easy and convenient.</p> \r
+  <ol> \r
+   <li>To retrieve call history items, use the <span style="font-family: Courier New,Courier,monospace">find(successCallback, errorCallback, filter, sortMode, limit, offset)</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface.<p></p> <p>This method is asynchronous, and the result of the query is an array of <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> objects.</p> <pre class="prettyprint">tizen.callhistory.find(onSuccess, onError, ifilter, sortMode, 20, 10);</pre> </li> \r
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to define an event handler for the query result set.</p> <p>In the following code snippet, the found call history items are appended to the console log.</p> <pre class="prettyprint">function onSuccess(results) \r
+{\r
+&nbsp;&nbsp;&nbsp;console.log(results.length + &quot; call history item(s) found!&quot;);\r
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; results.length; i++) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i + &quot;. &quot; + results[i].toString()); \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Process the CallHistoryEntry */\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre> </li> \r
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">filter</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to define a filter for the query result set. A filter with the <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry </span>attributes is used to limit the results of the call history search.</p> <p>You can define various filters:</p> \r
+    <ul> \r
+     <li><p>The <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> type is used to search based on a single <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry</span> attribute (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#call">CallHistory Filter Attributes</a>).</p> <p>For example, the following filters define that only cellular calls or calls where the remote party has the telephone number 123456789 are included in the query results:</p> <pre class="prettyprint">/* First filter example */\r
+var filter = new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, &quot;TEL&quot;);\r
+\r
+/* Second filter example */\r
+var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;, &quot;EXACTLY&quot;, &quot;123456789&quot;)</pre> </li> \r
+     <li> <p> The <span style="font-family: Courier New,Courier,monospace">CompositeFilter</span> type represents a set of filters. The <span style="font-family: Courier New,Courier,monospace">UNION</span> type composite filter matches any object that is matched by any of its filters; the <span style="font-family: Courier New,Courier,monospace">INTERSECTION</span> type composite filter matches all objects that are matched by all of its filters.</p> <p>For example, the following code snippet defines a set of filters that include in the query results only the video calls where the remote party has the telephone number 123456789 and the call has started during the year 2009 or 2011:</p> <pre class="prettyprint">/* Create the ranges for the time filter */\r
+var y2009Filter = new tizen.AttributeRangeFilter(&quot;startTime&quot;, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2009, 0, 1),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2010, 0, 1));\r
+var y2011Filter = new tizen.AttributeRangeFilter(&quot;startTime&quot;,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2011, 0, 1),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2012, 0, 1));\r
+\r
+/* Create a time filter */\r
+var dataFilter = new tizen.CompositeFilter(&quot;UNION&quot;,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[y2009Filter, y2011Filter]);\r
+\r
+/* Create a video call filter */\r
+var tfilter = new tizen.AttributeFilter(&quot;features&quot;, &quot;EXACTLY&quot;, &quot;VIDEOCALL&quot;);\r
+\r
+/* Combine the filters into a set */\r
+var ifilter = new tizen.CompositeFilter(&quot;INTERSECTION&quot;, [numberFilter, dataFilter, tfilter]);</pre> </li> \r
+    </ul> </li> \r
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameter to order the query result set. If the parameter is undefined or set to <span style="font-family: Courier New,Courier,monospace">null</span>, the results are sorted by default in a descending order.</p> <p>In the following code snippet, the found call history items are sorted according to the start time, in descending order:</p> <pre class="prettyprint">var sortMode = new tizen.SortMode(&quot;startTime&quot;, &quot;DESC&quot;);</pre> </li> \r
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">limit</span> and <span style="font-family: Courier New,Courier,monospace">offset</span> parameters of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to specify the starting point and upper limit of the results that are returned.</p> <p>The <span style="font-family: Courier New,Courier,monospace">limit</span> parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the <span style="font-family: Courier New,Courier,monospace">offset</span> parameter skips that many matching results that are to be returned (the value 0 means nothing is skipped).</p> <p>For example, if your search results consist of 100 matching results and you have specified an offset of 10 and a limit of 20, you get the objects from 10-29. The matching results from 0-9 are skipped due to the offset, and the 20 results starting from the first result after the offset are returned.</p> </li> \r
+  </ol> \r
+\r
+  \r
+  <h2 id="Removing_Call_History" name="Removing_Call_History">Removing Call History Items</h2>\r
+                       \r
+  <p>Learning how to remove call history items allows you to keep the call history list organized and save storage space on the device:</p> \r
+  <ol> \r
+   <li><p> Use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to remove a specific item from the call history. First, search for the entry to be removed with the <span style="font-family: Courier New,Courier,monospace">find()</span> method, and then handle the removal in the event handler that is called when the <span style="font-family: Courier New,Courier,monospace">find()</span> method is successful.</p> <pre class="prettyprint">/* Remove the found call history item */\r
+function onSuccess(results) \r
+{\r
+&nbsp;&nbsp;&nbsp;if (results.length &gt; 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.callhistory.remove(results[0]);\r
+}\r
+\r
+var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EXACTLY&quot;, &quot;123456789&quot;); \r
+/* Search for the item to be removed */\r
+tizen.callhistory.find(onSuccess, onError, numberFilter, null, 1);\r
+</pre> </li> \r
+   <li><p> To remove multiple call history items, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method.</p> <p>The <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method functions similarly as the <span style="font-family: Courier New,Courier,monospace">remove()</span> method, except that it removes a list of call history items instead of a single item:</p> <pre class="prettyprint">/* Define success callback */\r
+function onSuccess(results) \r
+{\r
+&nbsp;&nbsp;&nbsp;tizen.callhistory.removeBatch(results);\r
+}\r
+\r
+var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EXACTLY&quot;, &quot;123456789&quot;); \r
+tizen.callhistory.find(onSuccess, onError, numberFilter);\r
+</pre> </li> \r
+   <li><p> To remove all call history items, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method:</p> <pre class="prettyprint">tizen.callhistory.removeAll();</pre> </li> \r
+  </ol> \r
+  \r
+               \r
+  \r
+  <h2 id="Monitoring_Call_History" name="Monitoring_Call_History">Monitoring the Call History</h2>\r
+                       \r
+  <p>Learning how to register change listeners allows you to synchronize the view of your application to changes in the call history database.</p> \r
+  <ol> \r
+\r
+   <li> <p>Define the <span style="font-family: Courier New,Courier,monospace">onadded</span> event handler of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryChangeCallback">CallHistoryChangeCallback</a> listener interface, which tracks all new incoming and outgoing calls that are added to the call history.</p> <pre class="prettyprint">var onHistoryChange = \r
+{\r
+&nbsp;&nbsp;&nbsp;onadded: function(newItems)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in newItems)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is newly added. Its startTime: &quot; + newItems[i].startTime);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;},</pre> </li> \r
+   <li> <p>Define the <span style="font-family: Courier New,Courier,monospace">onchanged</span> event handler, which tracks all changes in the call history.</p> <p>The event handler receives as an argument an array of <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> instances, which represent the changed items in the call history.</p> <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;onchanged: function(changedItems)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in changedItems)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is updated. Its direction: &quot; + changedItems[i].direction);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;},\r
+</pre> </li> \r
+<li><p>Define the <span style="font-family: Courier New,Courier,monospace">onremoved</span> event handler, which tracks all items that are removed from the call history:</p>\r
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;onremoved: function(removedItems) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in removedItems)  \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is removed. The removed item&#39;s UID: &quot; + removedItems[i]);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+};</pre>\r
+</li>\r
+<li> <p>Use the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to register a listener for observing call history changes:</p> <pre class="prettyprint">var callHistoryListener = tizen.callhistory.addChangeListener(onHistoryChange);</pre> </li>\r
+\r
+   <li> <p>Use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method to unregister a previously registered listener. Use the ID returned by the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span>:</p> <pre class="prettyprint">tizen.callhistory.removeChangeListener(callHistoryListener);</pre> </li> \r
+  </ol> \r
+       \r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm
index 091ecef..c283388 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm
@@ -1,532 +1,532 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Contact: Managing Contacts and Handling Contact Information</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-                       <li>Address book
-                               <ul class="toc">
-                                       <li><a href="#Adding_Addressbook">Creating an Address Book</a></li>
-                                       <li><a href="#Getting_Address_Books">Getting Address Books</a></li>
-                               </ul>
-                       </li>
-                       <li>Single contacts
-                               <ul class="toc">
-                                       <li><a href="#Adding_Contact">Adding a Contact</a></li>
-                                       <li><a href="#Managing_Contact">Managing a Contact</a></li>
-                                       <li><a href="#Receiving_Contact">Receiving Notifications on Contact Changes</a></li>
-                                       <li><a href="#Importing_Contact">Importing Contacts</a></li>
-                                       <li><a href="#Exporting_Contact">Exporting Contacts</a></li>
-                               </ul>
-                       </li>
-                       <li>Multiple contacts
-                               <ul class="toc">
-                                       <li><a href="#Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</a></li>
-                                       <li><a href="#Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</a></li>
-                                       <li><a href="#Managing_Groups">Managing Contact Groups</a></li>
-                               </ul>
-                       </li>
-            <li>Persons
-                               <ul class="toc">
-                                       <li><a href="#Managing_Persons">Managing Persons</a></li>
-                               </ul>
-                       </li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/contact_w.htm">Contact Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Contact: Managing Contacts and Handling Contact Information</h1>
-   
-      <p>This tutorial demonstrates how you can manage address books in the device to access, modify, add, and remove contacts within a specified address book on the device.</p>
-         
-           <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-
-  <h2>Warm-up</h2>
-      <p>Become familiar with the Contact API basics by learning about:</p>
-      <ul>
-               <li>Address book
-                       <ul>
-                          <li><a href="#Adding_Addressbook">Creating an Address Book</a> <p>Create a new address book using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> constructor.</p> </li>
-                          <li><a href="#Getting_Address_Books">Getting Address Books</a> <p>Access the address books in which contacts are listed.</p> </li>
-                   </ul>
-           </li>
-           <li>Single contacts
-                       <ul>
-                          <li><a href="#Adding_Contact">Adding a Contact</a> <p>Add a contact to an address book.</p> </li>
-                          <li><a href="#Managing_Contact">Managing a Contact</a> <p>Find, update, and delete an existing contact item.</p> </li>
-                          <li><a href="#Receiving_Contact">Receiving Notifications on Contact Changes </a> <p>Receive notifications when contacts are added, updated, or deleted.</p></li>
-                          <li><a href="#Importing_Contact">Importing Contacts</a> <p>Import contacts with the help of the vCard format.</p></li>
-                          <li><a href="#Exporting_Contact">Exporting Contacts</a> <p>Export contacts with the help of the vCard format.</p></li>
-                       </ul>
-          </li>
-          <li>Multiple contacts
-                       <ul>
-                          <li><a href="#Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</a> <p>Add multiple contacts to an address book in the batch mode.</p> </li>
-                          
-                          <li><a href="#Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</a> <p>Find, update, and delete multiple contact items in the batch mode.</p> </li>
-                          <li><a href="#Managing_Groups">Managing Contact Groups</a> <p>Add, get, update, and remove groups.</p> </li>   
-                       </ul>
-               </li>   
-               <li>Persons
-                       <ul>
-                               <li><a href="#Managing_Persons">Managing Persons</a> <p>Find and link existing persons.</p> </li>
-                       </ul>
-               </li>
-      </ul>
-
-  <h2 id="Adding_Addressbook" name="Adding_Addressbook">Creating an Address Book</h2>
-  
-  <p>Creating a new address book is a basic contact management skill:</p>
-  
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The created address book is associated with a specified account. Therefore, you must retrieve the account before creating a new address book.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-  <ol> 
-   <li>Declare a variable to store the created address book:
-<pre class="prettyprint">var myAddressBook = null;</pre>
-   </li>
-   <li>Define a success callback for the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The callback receives a list of <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> objects. Use the first account ID to construct a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> object.
-   
-   <p>Add the new address book to the system using the <span style="font-family: Courier New,Courier,monospace">addAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>
-<pre class="prettyprint">function getAccountsSuccess(accounts)
-{
-&nbsp;&nbsp;&nbsp;var account = accounts[0];
-&nbsp;&nbsp;&nbsp;if (account)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New address book can be created and added */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myAddressBook = new tizen.AddressBook(account.id, &quot;remote address book&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.addAddressBook(myAddressBook);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;New address book created with ID=&quot; + myAddressBook.id);
-&nbsp;&nbsp;&nbsp;}
-}</pre></li>
-   <li>To retrieve available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The following method call invokes the <span style="font-family: Courier New,Courier,monospace">getAccountsSuccess</span> event handler defined above.
-<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));
-</pre></li>
-  </ol>
-  <h2 id="Getting_Address_Books" name="Getting_Address_Books">Getting Address Books</h2>
-  
-  <p>To create engaging applications with various contacts features, you must learn to access the address books in which the contacts are listed:</p>
-  <ol>
-   <li><p>To get the default address book, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface to retrieve the default address book as an <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> object:</p> <pre class="prettyprint">
-var myAddressbook;
-
-/* Get the default address book */
-myAddressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
-   <li><p>To get all available address books, use the <span style="font-family: Courier New,Courier,monospace">getAddressBooks()</span> method. This method passes an array of <span style="font-family: Courier New,Courier,monospace">AddressBook</span> objects to the success event handler.</p> <pre class="prettyprint">
-var addressBook;
-
-function addressBooksCB(addressBooks)
-{
-&nbsp;&nbsp;&nbsp;if (addressBooks.length &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressBook = addressBooks[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The addressbook name is &quot; + addressBook.name);
-&nbsp;&nbsp;&nbsp;}
-}
-
-/* Get the list of available address books */
-tizen.contact.getAddressBooks(addressBooksCB);
-</pre>
-   <p>All available address books on the device are retrieved. You can use an <span style="font-family: Courier New,Courier,monospace">AddressBook</span> object ID to select a specific address book with the <span style="font-family: Courier New,Courier,monospace">getAddressBook()</span> method, if you know the ID of the address book in advance.</p>
- </li>
-
-  </ol>
-           
-  <h2 id="Adding_Contact" name="Adding_Contact">Adding a Contact</h2>
-
-  <p>To create engaging applications with various contacts features, you must learn to add a contact to an address book:</p>
-    <ol>
-     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
-var addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
-     <li><p>Create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object and define its properties as a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactInit">ContactInit</a> object (the parameter of the <span style="font-family: Courier New,Courier,monospace">Contact</span> constructor):</p> <pre class="prettyprint">
-var contact = new tizen.Contact
-({
-&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName: &quot;Jeffrey&quot;, lastName: &quot;Hyman&quot;}),
-&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user@example.com&quot;)]
-});
-</pre> </li>
-     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">Contact</span> object to the default address book with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">addressbook.add(contact);</pre> </li>
-    </ol>
-               
-  <h2 id="Managing_Contact" name="Managing_Contact">Managing a Contact</h2>
-  
-  <p>To create engaging applications with various contacts features, you must learn to manage a contact in your address book:</p>
-  <ol>
-   <li>To retrieve a single contact, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface with the <span style="font-family: Courier New,Courier,monospace">ContactID</span> as a parameter:
-   <p>The following example uses the object of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactRef">ContactRef</a> interface. The <span style="font-family: Courier New,Courier,monospace">ContactRef</span> object contains both <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> ID and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> ID.</p> <pre class="prettyprint">
-/* contactRef is retrieved by other APIs */
-var contactRef;
-try
-{
-&nbsp;&nbsp;&nbsp;/* Retrieve the contact corresponding to the given reference */
-&nbsp;&nbsp;&nbsp;var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
-&nbsp;&nbsp;&nbsp;var contact = addressBook.get(contactRef.contactId);
-}
-</pre> </li>
-   <li>To manage a single contact:
-    <ol type="a">
-     <li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">
-var addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
-     <li><p>Retrieve contacts stored in the address book by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">
-var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;);
-var sortMode = new tizen.SortMode(&quot;name.lastName&quot;, &quot;ASC&quot;);
-
-try
-{
-&nbsp;&nbsp;&nbsp;addressbook.find(contactsFoundCB, null, filter, sortMode);
-}</pre>
-      <table class="note">
-       <tbody>
-        <tr>
-         <th class="note">Note</th>
-        </tr>
-        <tr>
-         <td class="note">To retrieve a specific contact, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#contact">Contact Filter Attributes</a>). <p>In this example, contacts whose first name contains &quot;Chris&quot; are retrieved and sorted in the ascending order based on their last name. The filter includes the standard English characters in the uppercase and lowercase. The entire list consists of ASCII characters from 32 to 126, and from 160 to 255.</p> </td>
-        </tr>
-       </tbody>
-      </table> <p>The contacts that match the filter are passed as an array to the registered success event handler in the selected sorting order.</p> </li>
-     <li><p>Update or delete the found contact inside the <span style="font-family: Courier New,Courier,monospace">contactsFoundCB</span> event handler.</p> <p>In this example, the first name of the first contact is changed and the contact is updated in the address book using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second contact is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
-function contactsFoundCB(contacts)
-{
-&nbsp;&nbsp;&nbsp;contacts[0].name.firstName = &quot;Christopher&quot;;
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Update the first found contact */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressbook.update(contacts[0]);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the second found contact */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressbook.remove(contacts[1].id);
-&nbsp;&nbsp;&nbsp;}
-}</pre> </li>
-    </ol> </li>
-  </ol>
-            
-  <h2 id="Receiving_Contact" name="Receiving_Contact">Receiving Notifications on Contact Changes</h2>
-  
-  <p>To create engaging applications with various contacts features, you must learn to receive notifications when contacts are added, updated, or removed:</p>
-  <ol>
-   <li><p>Define the needed variables:</p> <pre class="prettyprint">
-/* Watcher identifier */
-var watcherId = 0;
-
-/* This example assumes that the address book is initialized */
-var addressbook;
-</pre> </li>
-   <li><p>Define the event handlers for different notifications about changes in the selected address book using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBookChangeCallback">AddressBookChangeCallback</a> listener interface:</p> <pre class="prettyprint">
-var watcher =
-{
-&nbsp;&nbsp;&nbsp;/* When contacts are added */
-&nbsp;&nbsp;&nbsp;oncontactsadded: function(contacts)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(contacts.length + &quot; contacts were added&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When contacts are updated */
-&nbsp;&nbsp;&nbsp;oncontactsupdated: function(contacts)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(contacts.length + &quot; contacts were updated&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When contacts are deleted */
-&nbsp;&nbsp;&nbsp;oncontactsremoved: function(ids)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ids.length + &quot; contacts were deleted&quot;);
-&nbsp;&nbsp;&nbsp;}
-};
-</pre> </li>
-   <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">
-watcherId = addressbook.addChangeListener(watcher);
-</pre> </li>
-   <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">
-addressbook.removeChangeListener(watcherId);
-</pre> </li>
-  </ol>
-           
-  <h2 id="Importing_Contact" name="Importing_Contact">Importing Contacts</h2>
-  
-  <p>To create engaging applications with various contacts features, you must learn to import contacts with the help of the vCard format:</p>
-
-    <ol>
-     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
-var addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
-     <li><p>Create a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object from the vCard string and add it to the default address book:</p> <pre class="prettyprint">
-var contact = null;
-
-try
-{
-&nbsp;&nbsp;&nbsp;contact = new tizen.Contact(&quot;BEGIN:VCARD\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VERSION:3.0\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;N:Gump;Forrest\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;FN:Forrest Gump\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ORG:Bubba Gump Shrimp Co.\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TITLE:Shrimp Man\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TEL;WORK:(111) 555-1212\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TEL;HOME:(404) 555-1212\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EMAIL;WORK;PREF:forrestgump@example.com\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VCARD&quot;);
-
-&nbsp;&nbsp;&nbsp;addressbook.add(contact);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Contact was added with ID &quot; + contact.id);
-}</pre> </li>
-    </ol> <p>To convert multiple strings and import them to an address book, convert the strings one by one and then use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to <a href="#Adding_Multiple_Contact">add all the contacts at once in the batch mode</a>.</p>
-             
-  <h2 id="Exporting_Contact" name="Exporting_Contact">Exporting Contacts</h2>
-  
-  <p>To create engaging applications with various contacts features, you must learn to export contacts with the help of the vCard format:</p>
-    <ol>
-     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface and find all contacts with &quot;Chris&quot; in the first name:</p> <pre class="prettyprint">
-var addressbook;
-
-var addressbook = tizen.contact.getDefaultAddressBook();
-
-/* Define a filter */
-var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;);
-
-/* Search for the contacts */
-addressbook.find(contactsFoundCB, errorCB, filter);
-</pre> </li>
-     <li><p>Convert a contact to a vCard string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method.</p> <p>In the following example, the first found contact is exported by converting it to the vCard version 3.0 format.</p> <pre class="prettyprint">
-function contactsFoundCB(contacts)
-{
-&nbsp;&nbsp;&nbsp;/* Convert the first contact */
-&nbsp;&nbsp;&nbsp;var vcard = contacts[0].convertToString(&quot;VCARD_30&quot;);
-}</pre></li>
-    </ol>
-         
-  <h2 id="Adding_Multiple_Contact" name="Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</h2>
-  
-  <p>To create engaging applications with various contacts features, you must learn to add multiple contacts to an address book in the batch mode:</p>
-<ol>
-     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">
-addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
-     <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">
-var c1 = new tizen.Contact(
-{
-&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName:&quot;Jeffrey&quot;, lastName:&quot;Hyman&quot;}),
-&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user1@example.com&quot;)]
-});
-
-var c2 = new tizen.Contact(
-{
-&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName:&quot;Elton&quot;, lastName:&quot;John&quot;}),
-&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user2@example.com&quot;)]
-});
-</pre> </li>
-     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to add the contacts in the array to the address book:</p> <pre class="prettyprint">
-addressbook.addBatch([c1, c2]);
-</pre>
-    <table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span>, <span style="font-family: Courier New,Courier,monospace">updateBatch()</span>, and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> methods are asynchronous. Provide success and error callbacks with them.</td>
-      </tr>
-     </tbody>
-    </table>
-</li>
-    </ol>
-           
-  <h2 id="Managing_Multiple_Contact" name="Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</h2>
-  
-  <p>To create engaging applications with various contacts features, you must learn to manage multiple contacts in your address books in the batch mode:</p>
-  <ol>
-     <li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">
-var addressbook = tizen.contact.getDefaultAddressBook();
-</pre> </li>
-     <li><p>Retrieve contacts stored in the address book by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">
-var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;};
-var sortMode = new tizen.SortMode(&quot;name.lastName&quot;, &quot;ASC&quot;);
-
-try
-{
-&nbsp;&nbsp;&nbsp;addressbook.find(contactsFoundCB, null, filter, sortMode);
-}</pre> </li>
-     <li>To update contacts:
-      <ol type="a">
-       <li><p>Define the contact changes to be made in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint">
-function contactsFoundCB(contacts)
-{
-&nbsp;&nbsp;&nbsp;/* Change the first names of all the found contacts */
-&nbsp;&nbsp;&nbsp;for (var i=0; i&lt;contacts.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts[i].name.firstName = &quot;Christopher&quot;;
-&nbsp;&nbsp;&nbsp;}
-</pre> </li>
-       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple contacts asynchronously:</p> <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Update all found contacts */
-&nbsp;&nbsp;&nbsp;addressbook.updateBatch(contacts);
-}
-</pre> </li>
-      </ol> </li>
-     <li><p>To delete contacts, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple contacts asynchronously:</p> <pre class="prettyprint">
-function contactsFoundCB(contacts)
-{
-&nbsp;&nbsp;&nbsp;/* Delete the first 2 found contacts */
-&nbsp;&nbsp;&nbsp;addressbook.removeBatch([contacts[0].id, contacts[1].id]);
-}
-</pre> </li>
-    </ol>
-             
-  <h2 id="Managing_Groups" name="Managing_Groups">Managing Contact Groups</h2>
-  
-  <p>To create engaging applications with various contact features, you must learn to manage contact groups:</p>
-  <ol>
-    <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>
-<pre class="prettyprint">
-var addressbook = tizen.contact.getDefaultAddressBook();</pre> </li>
-   <li><p>To create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactGroup">ContactGroup</a> object and add the newly create group to the system, use the constructor and the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p>
-<pre class="prettyprint">
-var group;
-try 
-{
-&nbsp;&nbsp;&nbsp;group = new tizen.ContactGroup(&quot;Company&quot;);
-&nbsp;&nbsp;&nbsp;addressbook.addGroup(group)
-&nbsp;&nbsp;&nbsp;console.log(&quot;Group added with ID &quot; + group.id);
-}
-</pre></li>
-
-<li>To manage groups:
-
-<ul>   <li><p>To retrieve all the contact groups from the address book, use the <span style="font-family: Courier New,Courier,monospace">getGroups()</span> method
-   of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
-<pre class="prettyprint">
-var groups;
-try 
-{
-&nbsp;&nbsp;&nbsp;groups = addressbook.getGroups();
-}
-</pre></li>
-   <li><p>To change the name of the group, assign the <span style="font-family: Courier New,Courier,monospace">name</span> property a new value and use the <span style="font-family: Courier New,Courier,monospace">updateGroup()</span>
-   method of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
-<pre class="prettyprint">
-try 
-{
-&nbsp;&nbsp;&nbsp;groups[0].name = &quot;Friends&quot;;
-&nbsp;&nbsp;&nbsp;addressbook.updateGroup(groups[0]);
-&nbsp;&nbsp;&nbsp;console.log(&quot;First group updated&quot;);
-}
-</pre></li>
-   <li><p>To retrieve a specific group, use the <span style="font-family: Courier New,Courier,monospace">getGroup()</span> method of
-   the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
-<pre class="prettyprint">
-try 
-{
-&nbsp;&nbsp;&nbsp;group = addressbook.getGroup(group.id);
-}
-</pre></li>
-   <li><p>To remove a group from the address book, use the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method of
-   the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
-<pre class="prettyprint">
-try 
-{
-&nbsp;&nbsp;&nbsp;addressbook.removeGroup(group.id);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Group was removed&quot;);
-}
-</pre></li></ul></li>
-  </ol>
-              
-  <h2 id="Managing_Persons" name="Managing_Persons">Managing Persons</h2>
-  
-  <p>To create engaging applications with various contacts features, you must learn to manage persons in your contact database:</p>
-  <ol>
-   <li>To manage a single person:
-    <ol type="a">
-     <li><p>To retrieve persons, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">tizen.contact.find(personsFoundCB);</pre></li>
-     <li><p>Update or delete the found persons in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler. In this example, the favorite flag of the first person is changed and the contact is updated using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second person is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
-function personsFoundCB(persons)
-{
-&nbsp;&nbsp;&nbsp;persons[0].isFavorite = true;
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Update the first found person */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.update(persons[0]);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the second found person */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.remove(persons[1].id);
-&nbsp;&nbsp;&nbsp;}
-}</pre></li>
-    </ol> </li>
-   <li>To merge multiple persons into a single person item:
-    <ol type="a">
-     <li>Retrieve the persons as described above.</li>
-     <li><p>Define the persons to be merged in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler:</p> <pre class="prettyprint">function personsFoundCB(persons)
-{
-&nbsp;&nbsp;&nbsp;var sourcePerson = persons[0];
-&nbsp;&nbsp;&nbsp;var targetPerson = persons[1];</pre></li>
-     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">link()</span> method to link contacts that are linked to the other person:</p> <pre class="prettyprint">&nbsp;&nbsp;&nbsp;/* Link 2 persons, contacts from sourcePerson are added to targetPerson and sourcePerson is removed */
-&nbsp;&nbsp;&nbsp;targetPerson.link(sourcePerson.id);
-}</pre></li>
-    </ol> </li>
-  </ol>
-  
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Contact: Managing Contacts and Handling Contact Information</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                       <li>Address book\r
+                               <ul class="toc">\r
+                                       <li><a href="#Adding_Addressbook">Creating an Address Book</a></li>\r
+                                       <li><a href="#Getting_Address_Books">Getting Address Books</a></li>\r
+                               </ul>\r
+                       </li>\r
+                       <li>Single contacts\r
+                               <ul class="toc">\r
+                                       <li><a href="#Adding_Contact">Adding a Contact</a></li>\r
+                                       <li><a href="#Managing_Contact">Managing a Contact</a></li>\r
+                                       <li><a href="#Receiving_Contact">Receiving Notifications on Contact Changes</a></li>\r
+                                       <li><a href="#Importing_Contact">Importing Contacts</a></li>\r
+                                       <li><a href="#Exporting_Contact">Exporting Contacts</a></li>\r
+                               </ul>\r
+                       </li>\r
+                       <li>Multiple contacts\r
+                               <ul class="toc">\r
+                                       <li><a href="#Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</a></li>\r
+                                       <li><a href="#Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</a></li>\r
+                                       <li><a href="#Managing_Groups">Managing Contact Groups</a></li>\r
+                               </ul>\r
+                       </li>\r
+            <li>Persons\r
+                               <ul class="toc">\r
+                                       <li><a href="#Managing_Persons">Managing Persons</a></li>\r
+                               </ul>\r
+                       </li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/contact_w.htm">Contact Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Contact: Managing Contacts and Handling Contact Information</h1>\r
+   \r
+      <p>This tutorial demonstrates how you can manage address books in the device to access, modify, add, and remove contacts within a specified address book on the device.</p>\r
+         \r
+           <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+  <h2>Warm-up</h2>\r
+      <p>Become familiar with the Contact API basics by learning about:</p>\r
+      <ul>\r
+               <li>Address book\r
+                       <ul>\r
+                          <li><a href="#Adding_Addressbook">Creating an Address Book</a> <p>Create a new address book using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> constructor.</p> </li>\r
+                          <li><a href="#Getting_Address_Books">Getting Address Books</a> <p>Access the address books in which contacts are listed.</p> </li>\r
+                   </ul>\r
+           </li>\r
+           <li>Single contacts\r
+                       <ul>\r
+                          <li><a href="#Adding_Contact">Adding a Contact</a> <p>Add a contact to an address book.</p> </li>\r
+                          <li><a href="#Managing_Contact">Managing a Contact</a> <p>Find, update, and delete an existing contact item.</p> </li>\r
+                          <li><a href="#Receiving_Contact">Receiving Notifications on Contact Changes </a> <p>Receive notifications when contacts are added, updated, or deleted.</p></li>\r
+                          <li><a href="#Importing_Contact">Importing Contacts</a> <p>Import contacts with the help of the vCard format.</p></li>\r
+                          <li><a href="#Exporting_Contact">Exporting Contacts</a> <p>Export contacts with the help of the vCard format.</p></li>\r
+                       </ul>\r
+          </li>\r
+          <li>Multiple contacts\r
+                       <ul>\r
+                          <li><a href="#Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</a> <p>Add multiple contacts to an address book in the batch mode.</p> </li>\r
+                          \r
+                          <li><a href="#Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</a> <p>Find, update, and delete multiple contact items in the batch mode.</p> </li>\r
+                          <li><a href="#Managing_Groups">Managing Contact Groups</a> <p>Add, get, update, and remove groups.</p> </li>   \r
+                       </ul>\r
+               </li>   \r
+               <li>Persons\r
+                       <ul>\r
+                               <li><a href="#Managing_Persons">Managing Persons</a> <p>Find and link existing persons.</p> </li>\r
+                       </ul>\r
+               </li>\r
+      </ul>\r
+\r
+  <h2 id="Adding_Addressbook" name="Adding_Addressbook">Creating an Address Book</h2>\r
+  \r
+  <p>Creating a new address book is a basic contact management skill:</p>\r
+  \r
+  <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The created address book is associated with a specified account. Therefore, you must retrieve the account before creating a new address book.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+  <ol> \r
+   <li>Declare a variable to store the created address book:\r
+<pre class="prettyprint">var myAddressBook = null;</pre>\r
+   </li>\r
+   <li>Define a success callback for the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The callback receives a list of <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> objects. Use the first account ID to construct a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> object.\r
+   \r
+   <p>Add the new address book to the system using the <span style="font-family: Courier New,Courier,monospace">addAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>\r
+<pre class="prettyprint">function getAccountsSuccess(accounts)\r
+{\r
+&nbsp;&nbsp;&nbsp;var account = accounts[0];\r
+&nbsp;&nbsp;&nbsp;if (account)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New address book can be created and added */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myAddressBook = new tizen.AddressBook(account.id, &quot;remote address book&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.addAddressBook(myAddressBook);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;New address book created with ID=&quot; + myAddressBook.id);\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre></li>\r
+   <li>To retrieve available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method. The following method call invokes the <span style="font-family: Courier New,Courier,monospace">getAccountsSuccess</span> event handler defined above.\r
+<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));\r
+</pre></li>\r
+  </ol>\r
+  <h2 id="Getting_Address_Books" name="Getting_Address_Books">Getting Address Books</h2>\r
+  \r
+  <p>To create engaging applications with various contacts features, you must learn to access the address books in which the contacts are listed:</p>\r
+  <ol>\r
+   <li><p>To get the default address book, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface to retrieve the default address book as an <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> object:</p> <pre class="prettyprint">\r
+var myAddressbook;\r
+\r
+/* Get the default address book */\r
+myAddressbook = tizen.contact.getDefaultAddressBook();\r
+</pre> </li>\r
+   <li><p>To get all available address books, use the <span style="font-family: Courier New,Courier,monospace">getAddressBooks()</span> method. This method passes an array of <span style="font-family: Courier New,Courier,monospace">AddressBook</span> objects to the success event handler.</p> <pre class="prettyprint">\r
+var addressBook;\r
+\r
+function addressBooksCB(addressBooks)\r
+{\r
+&nbsp;&nbsp;&nbsp;if (addressBooks.length &gt; 0)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressBook = addressBooks[0];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The addressbook name is &quot; + addressBook.name);\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+/* Get the list of available address books */\r
+tizen.contact.getAddressBooks(addressBooksCB);\r
+</pre>\r
+   <p>All available address books on the device are retrieved. You can use an <span style="font-family: Courier New,Courier,monospace">AddressBook</span> object ID to select a specific address book with the <span style="font-family: Courier New,Courier,monospace">getAddressBook()</span> method, if you know the ID of the address book in advance.</p>\r
+ </li>\r
+\r
+  </ol>\r
+           \r
+  <h2 id="Adding_Contact" name="Adding_Contact">Adding a Contact</h2>\r
+\r
+  <p>To create engaging applications with various contacts features, you must learn to add a contact to an address book:</p>\r
+    <ol>\r
+     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">\r
+var addressbook = tizen.contact.getDefaultAddressBook();\r
+</pre> </li>\r
+     <li><p>Create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object and define its properties as a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactInit">ContactInit</a> object (the parameter of the <span style="font-family: Courier New,Courier,monospace">Contact</span> constructor):</p> <pre class="prettyprint">\r
+var contact = new tizen.Contact\r
+({\r
+&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName: &quot;Jeffrey&quot;, lastName: &quot;Hyman&quot;}),\r
+&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user@example.com&quot;)]\r
+});\r
+</pre> </li>\r
+     <li><p>Add the <span style="font-family: Courier New,Courier,monospace">Contact</span> object to the default address book with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">addressbook.add(contact);</pre> </li>\r
+    </ol>\r
+               \r
+  <h2 id="Managing_Contact" name="Managing_Contact">Managing a Contact</h2>\r
+  \r
+  <p>To create engaging applications with various contacts features, you must learn to manage a contact in your address book:</p>\r
+  <ol>\r
+   <li>To retrieve a single contact, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface with the <span style="font-family: Courier New,Courier,monospace">ContactID</span> as a parameter:\r
+   <p>The following example uses the object of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactRef">ContactRef</a> interface. The <span style="font-family: Courier New,Courier,monospace">ContactRef</span> object contains both <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> ID and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> ID.</p> <pre class="prettyprint">\r
+/* contactRef is retrieved by other APIs */\r
+var contactRef;\r
+try\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Retrieve the contact corresponding to the given reference */\r
+&nbsp;&nbsp;&nbsp;var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);\r
+&nbsp;&nbsp;&nbsp;var contact = addressBook.get(contactRef.contactId);\r
+}\r
+</pre> </li>\r
+   <li>To manage a single contact:\r
+    <ol type="a">\r
+     <li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">\r
+var addressbook = tizen.contact.getDefaultAddressBook();\r
+</pre> </li>\r
+     <li><p>Retrieve contacts stored in the address book by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">\r
+var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;);\r
+var sortMode = new tizen.SortMode(&quot;name.lastName&quot;, &quot;ASC&quot;);\r
+\r
+try\r
+{\r
+&nbsp;&nbsp;&nbsp;addressbook.find(contactsFoundCB, null, filter, sortMode);\r
+}</pre>\r
+      <table class="note">\r
+       <tbody>\r
+        <tr>\r
+         <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+         <td class="note">To retrieve a specific contact, you can specify a filter and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#contact">Contact Filter Attributes</a>). <p>In this example, contacts whose first name contains &quot;Chris&quot; are retrieved and sorted in the ascending order based on their last name. The filter includes the standard English characters in the uppercase and lowercase. The entire list consists of ASCII characters from 32 to 126, and from 160 to 255.</p> </td>\r
+        </tr>\r
+       </tbody>\r
+      </table> <p>The contacts that match the filter are passed as an array to the registered success event handler in the selected sorting order.</p> </li>\r
+     <li><p>Update or delete the found contact inside the <span style="font-family: Courier New,Courier,monospace">contactsFoundCB</span> event handler.</p> <p>In this example, the first name of the first contact is changed and the contact is updated in the address book using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second contact is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */\r
+function contactsFoundCB(contacts)\r
+{\r
+&nbsp;&nbsp;&nbsp;contacts[0].name.firstName = &quot;Christopher&quot;;\r
+&nbsp;&nbsp;&nbsp;try\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Update the first found contact */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressbook.update(contacts[0]);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the second found contact */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressbook.remove(contacts[1].id);\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre> </li>\r
+    </ol> </li>\r
+  </ol>\r
+            \r
+  <h2 id="Receiving_Contact" name="Receiving_Contact">Receiving Notifications on Contact Changes</h2>\r
+  \r
+  <p>To create engaging applications with various contacts features, you must learn to receive notifications when contacts are added, updated, or removed:</p>\r
+  <ol>\r
+   <li><p>Define the needed variables:</p> <pre class="prettyprint">\r
+/* Watcher identifier */\r
+var watcherId = 0;\r
+\r
+/* This example assumes that the address book is initialized */\r
+var addressbook;\r
+</pre> </li>\r
+   <li><p>Define the event handlers for different notifications about changes in the selected address book using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBookChangeCallback">AddressBookChangeCallback</a> listener interface:</p> <pre class="prettyprint">\r
+var watcher =\r
+{\r
+&nbsp;&nbsp;&nbsp;/* When contacts are added */\r
+&nbsp;&nbsp;&nbsp;oncontactsadded: function(contacts)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(contacts.length + &quot; contacts were added&quot;);\r
+&nbsp;&nbsp;&nbsp;},\r
+\r
+&nbsp;&nbsp;&nbsp;/* When contacts are updated */\r
+&nbsp;&nbsp;&nbsp;oncontactsupdated: function(contacts)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(contacts.length + &quot; contacts were updated&quot;);\r
+&nbsp;&nbsp;&nbsp;},\r
+\r
+&nbsp;&nbsp;&nbsp;/* When contacts are deleted */\r
+&nbsp;&nbsp;&nbsp;oncontactsremoved: function(ids)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ids.length + &quot; contacts were deleted&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+};\r
+</pre> </li>\r
+   <li><p>Register the listener to use the defined event handlers:</p> <pre class="prettyprint">\r
+watcherId = addressbook.addChangeListener(watcher);\r
+</pre> </li>\r
+   <li><p>To stop the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">\r
+addressbook.removeChangeListener(watcherId);\r
+</pre> </li>\r
+  </ol>\r
+           \r
+  <h2 id="Importing_Contact" name="Importing_Contact">Importing Contacts</h2>\r
+  \r
+  <p>To create engaging applications with various contacts features, you must learn to import contacts with the help of the vCard format:</p>\r
+\r
+    <ol>\r
+     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">\r
+var addressbook = tizen.contact.getDefaultAddressBook();\r
+</pre> </li>\r
+     <li><p>Create a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object from the vCard string and add it to the default address book:</p> <pre class="prettyprint">\r
+var contact = null;\r
+\r
+try\r
+{\r
+&nbsp;&nbsp;&nbsp;contact = new tizen.Contact(&quot;BEGIN:VCARD\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VERSION:3.0\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;N:Gump;Forrest\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;FN:Forrest Gump\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ORG:Bubba Gump Shrimp Co.\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TITLE:Shrimp Man\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TEL;WORK:(111) 555-1212\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TEL;HOME:(404) 555-1212\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EMAIL;WORK;PREF:forrestgump@example.com\n&quot;+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VCARD&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;addressbook.add(contact);\r
+&nbsp;&nbsp;&nbsp;console.log(&quot;Contact was added with ID &quot; + contact.id);\r
+}</pre> </li>\r
+    </ol> <p>To convert multiple strings and import them to an address book, convert the strings one by one and then use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to <a href="#Adding_Multiple_Contact">add all the contacts at once in the batch mode</a>.</p>\r
+             \r
+  <h2 id="Exporting_Contact" name="Exporting_Contact">Exporting Contacts</h2>\r
+  \r
+  <p>To create engaging applications with various contacts features, you must learn to export contacts with the help of the vCard format:</p>\r
+    <ol>\r
+     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface and find all contacts with &quot;Chris&quot; in the first name:</p> <pre class="prettyprint">\r
+var addressbook;\r
+\r
+var addressbook = tizen.contact.getDefaultAddressBook();\r
+\r
+/* Define a filter */\r
+var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;);\r
+\r
+/* Search for the contacts */\r
+addressbook.find(contactsFoundCB, errorCB, filter);\r
+</pre> </li>\r
+     <li><p>Convert a contact to a vCard string in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method.</p> <p>In the following example, the first found contact is exported by converting it to the vCard version 3.0 format.</p> <pre class="prettyprint">\r
+function contactsFoundCB(contacts)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Convert the first contact */\r
+&nbsp;&nbsp;&nbsp;var vcard = contacts[0].convertToString(&quot;VCARD_30&quot;);\r
+}</pre></li>\r
+    </ol>\r
+         \r
+  <h2 id="Adding_Multiple_Contact" name="Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</h2>\r
+  \r
+  <p>To create engaging applications with various contacts features, you must learn to add multiple contacts to an address book in the batch mode:</p>\r
+<ol>\r
+     <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">\r
+addressbook = tizen.contact.getDefaultAddressBook();\r
+</pre> </li>\r
+     <li><p>Define the items to be added as an array:</p> <pre class="prettyprint">\r
+var c1 = new tizen.Contact(\r
+{\r
+&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName:&quot;Jeffrey&quot;, lastName:&quot;Hyman&quot;}),\r
+&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user1@example.com&quot;)]\r
+});\r
+\r
+var c2 = new tizen.Contact(\r
+{\r
+&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName:&quot;Elton&quot;, lastName:&quot;John&quot;}),\r
+&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user2@example.com&quot;)]\r
+});\r
+</pre> </li>\r
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to add the contacts in the array to the address book:</p> <pre class="prettyprint">\r
+addressbook.addBatch([c1, c2]);\r
+</pre>\r
+    <table class="note">\r
+     <tbody>\r
+      <tr>\r
+       <th class="note">Note</th>\r
+      </tr>\r
+      <tr>\r
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">addBatch()</span>, <span style="font-family: Courier New,Courier,monospace">updateBatch()</span>, and <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> methods are asynchronous. Provide success and error callbacks with them.</td>\r
+      </tr>\r
+     </tbody>\r
+    </table>\r
+</li>\r
+    </ol>\r
+           \r
+  <h2 id="Managing_Multiple_Contact" name="Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</h2>\r
+  \r
+  <p>To create engaging applications with various contacts features, you must learn to manage multiple contacts in your address books in the batch mode:</p>\r
+  <ol>\r
+     <li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">\r
+var addressbook = tizen.contact.getDefaultAddressBook();\r
+</pre> </li>\r
+     <li><p>Retrieve contacts stored in the address book by using the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">\r
+var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;};\r
+var sortMode = new tizen.SortMode(&quot;name.lastName&quot;, &quot;ASC&quot;);\r
+\r
+try\r
+{\r
+&nbsp;&nbsp;&nbsp;addressbook.find(contactsFoundCB, null, filter, sortMode);\r
+}</pre> </li>\r
+     <li>To update contacts:\r
+      <ol type="a">\r
+       <li><p>Define the contact changes to be made in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint">\r
+function contactsFoundCB(contacts)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Change the first names of all the found contacts */\r
+&nbsp;&nbsp;&nbsp;for (var i=0; i&lt;contacts.length; i++)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts[i].name.firstName = &quot;Christopher&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+</pre> </li>\r
+       <li><p>Use the <span style="font-family: Courier New,Courier,monospace">updateBatch()</span> method to update multiple contacts asynchronously:</p> <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;/* Update all found contacts */\r
+&nbsp;&nbsp;&nbsp;addressbook.updateBatch(contacts);\r
+}\r
+</pre> </li>\r
+      </ol> </li>\r
+     <li><p>To delete contacts, use the <span style="font-family: Courier New,Courier,monospace">removeBatch()</span> method in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to delete multiple contacts asynchronously:</p> <pre class="prettyprint">\r
+function contactsFoundCB(contacts)\r
+{\r
+&nbsp;&nbsp;&nbsp;/* Delete the first 2 found contacts */\r
+&nbsp;&nbsp;&nbsp;addressbook.removeBatch([contacts[0].id, contacts[1].id]);\r
+}\r
+</pre> </li>\r
+    </ol>\r
+             \r
+  <h2 id="Managing_Groups" name="Managing_Groups">Managing Contact Groups</h2>\r
+  \r
+  <p>To create engaging applications with various contact features, you must learn to manage contact groups:</p>\r
+  <ol>\r
+    <li><p>Retrieve the default system address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>\r
+<pre class="prettyprint">\r
+var addressbook = tizen.contact.getDefaultAddressBook();</pre> </li>\r
+   <li><p>To create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactGroup">ContactGroup</a> object and add the newly create group to the system, use the constructor and the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p>\r
+<pre class="prettyprint">\r
+var group;\r
+try \r
+{\r
+&nbsp;&nbsp;&nbsp;group = new tizen.ContactGroup(&quot;Company&quot;);\r
+&nbsp;&nbsp;&nbsp;addressbook.addGroup(group)\r
+&nbsp;&nbsp;&nbsp;console.log(&quot;Group added with ID &quot; + group.id);\r
+}\r
+</pre></li>\r
+\r
+<li>To manage groups:\r
+\r
+<ul>   <li><p>To retrieve all the contact groups from the address book, use the <span style="font-family: Courier New,Courier,monospace">getGroups()</span> method\r
+   of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>\r
+<pre class="prettyprint">\r
+var groups;\r
+try \r
+{\r
+&nbsp;&nbsp;&nbsp;groups = addressbook.getGroups();\r
+}\r
+</pre></li>\r
+   <li><p>To change the name of the group, assign the <span style="font-family: Courier New,Courier,monospace">name</span> property a new value and use the <span style="font-family: Courier New,Courier,monospace">updateGroup()</span>\r
+   method of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>\r
+<pre class="prettyprint">\r
+try \r
+{\r
+&nbsp;&nbsp;&nbsp;groups[0].name = &quot;Friends&quot;;\r
+&nbsp;&nbsp;&nbsp;addressbook.updateGroup(groups[0]);\r
+&nbsp;&nbsp;&nbsp;console.log(&quot;First group updated&quot;);\r
+}\r
+</pre></li>\r
+   <li><p>To retrieve a specific group, use the <span style="font-family: Courier New,Courier,monospace">getGroup()</span> method of\r
+   the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>\r
+<pre class="prettyprint">\r
+try \r
+{\r
+&nbsp;&nbsp;&nbsp;group = addressbook.getGroup(group.id);\r
+}\r
+</pre></li>\r
+   <li><p>To remove a group from the address book, use the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method of\r
+   the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>\r
+<pre class="prettyprint">\r
+try \r
+{\r
+&nbsp;&nbsp;&nbsp;addressbook.removeGroup(group.id);\r
+&nbsp;&nbsp;&nbsp;console.log(&quot;Group was removed&quot;);\r
+}\r
+</pre></li></ul></li>\r
+  </ol>\r
+              \r
+  <h2 id="Managing_Persons" name="Managing_Persons">Managing Persons</h2>\r
+  \r
+  <p>To create engaging applications with various contacts features, you must learn to manage persons in your contact database:</p>\r
+  <ol>\r
+   <li>To manage a single person:\r
+    <ol type="a">\r
+     <li><p>To retrieve persons, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">tizen.contact.find(personsFoundCB);</pre></li>\r
+     <li><p>Update or delete the found persons in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler. In this example, the favorite flag of the first person is changed and the contact is updated using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second person is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */\r
+function personsFoundCB(persons)\r
+{\r
+&nbsp;&nbsp;&nbsp;persons[0].isFavorite = true;\r
+&nbsp;&nbsp;&nbsp;try\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Update the first found person */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.update(persons[0]);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the second found person */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.remove(persons[1].id);\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre></li>\r
+    </ol> </li>\r
+   <li>To merge multiple persons into a single person item:\r
+    <ol type="a">\r
+     <li>Retrieve the persons as described above.</li>\r
+     <li><p>Define the persons to be merged in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler:</p> <pre class="prettyprint">function personsFoundCB(persons)\r
+{\r
+&nbsp;&nbsp;&nbsp;var sourcePerson = persons[0];\r
+&nbsp;&nbsp;&nbsp;var targetPerson = persons[1];</pre></li>\r
+     <li><p>Use the <span style="font-family: Courier New,Courier,monospace">link()</span> method to link contacts that are linked to the other person:</p> <pre class="prettyprint">&nbsp;&nbsp;&nbsp;/* Link 2 persons, contacts from sourcePerson are added to targetPerson and sourcePerson is removed */\r
+&nbsp;&nbsp;&nbsp;targetPerson.link(sourcePerson.id);\r
+}</pre></li>\r
+    </ol> </li>\r
+  </ol>\r
+  \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm
index 0fdf709..dd624a5 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm
@@ -1,128 +1,128 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#Creating_Sync_Profile">Creating a Sync Profile</a></li>
-            <li><a href="#Starting_Sync">Starting and Monitoring Data Synchronization</a></li>
-        </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/data_sync_w.htm">Data Synchronization Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">Data Synchronization API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</h1>
-       
-      <p>This tutorial demonstrates how you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p>
-         
-            <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
-    
-  <h2>Warm-up</h2>
-      <p>Become familiar with the Data Synchronization API basics by learning about:</p>
-      <ul>
-       <li><a href="#Creating_Sync_Profile">Creating a Sync Profile</a> <p>Check whether the device has a free slot for a new sync profile and create the profile.</p> </li>
-       <li><a href="#Starting_Sync">Starting and Monitoring Data Synchronization</a> <p>Start the synchronization operation and receive notifications about its progress.</p></li>
-      </ul>
-
- <h2 id="Creating_Sync_Profile" name="Creating_Sync_Profile">Creating a Sync Profile</h2>
- 
-  <p>To be able to synchronize your device data, such as contacts and calendar events, with the OMA DS server, you must learn how to create a sync profile:</p>
-  <ol>
-   <li><p>Check whether there are available profile slots on the device:</p> <pre class="prettyprint">
-var numMaxProfiles = tizen.datasync.getMaxProfilesNum();
-var numProfiles = tizen.datasync.getProfilesNum();
-</pre> </li>
-   <li><p>Create a sync profile. Use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncInfo">SyncInfo</a>, <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncServiceInfo">SyncServiceInfo</a>, and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProfileInfo">SyncProfileInfo</a> interfaces to provide sync profile and operation information:</p> <pre class="prettyprint">
-if ((numMaxProfiles &lt;= 0) || (numProfiles &lt; numMaxProfiles))
-{
-&nbsp;&nbsp;&nbsp;var syncInfo = new tizen.SyncInfo(&quot;http://example.com/sync&quot;, &quot;myId&quot;, &quot;myPassword&quot;, &quot;MANUAL&quot;, &quot;TWO_WAY&quot;);
-&nbsp;&nbsp;&nbsp;var contactInfo = new tizen.SyncServiceInfo(true, &quot;CONTACT&quot;, &quot;serverContact&quot;);
-&nbsp;&nbsp;&nbsp;var eventInfo = new tizen.SyncServiceInfo(true, &quot;EVENT&quot;, &quot;serverEvent&quot;);
-&nbsp;&nbsp;&nbsp;var serviceInfo = [contactInfo, eventInfo];
-&nbsp;&nbsp;&nbsp;var profile = new tizen.SyncProfileInfo(&quot;MyProfile&quot;, syncInfo, serviceInfo);
-</pre> </li>
-   <li><p>To be able to use the created profile, add it to your device using the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#DataSynchronizationManager">DataSynchronizationManager</a> interface:</p> <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;tizen.datasync.add(profile);
-&nbsp;&nbsp;&nbsp;var profileId = profile.profileId;
-}</pre> </li>
-  </ol>
-       
-  <h2 id="Starting_Sync" name="Starting_Sync">Starting and Monitoring Data Synchronization</h2>
-  
-  <p>Learning how to start and monitor the data synchronization process is a basic data management skill:</p>
-  <ol>
-   <li><p>Define the event handlers for the notifications using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> listener interface:</p> <pre class="prettyprint">
-var syncCallback =
-{
-&nbsp;&nbsp;&nbsp;onprogress: function(profileId, serviceType, isFromServer, totalPerType, syncedPerType)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Total: &#39; + totalPerType + &#39;, synced: &#39; + syncedPerType + &#39; for the sync type: &#39; + serviceType);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onfailed: function(profileId, error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Failed with id: &#39; + profileId + &#39;, error name: &#39; + error.name);
-&nbsp;&nbsp;&nbsp;}
-};
-</pre> </li>
-   <li><p>Start the sync operation using the <span style="font-family: Courier New,Courier,monospace">startSync()</span> method, with the corresponding listener as a parameter:</p> <pre class="prettyprint">
-tizen.datasync.startSync(profileId, syncCallback);
-</pre> </li>
-  </ol>
-                 
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+            <li><a href="#Creating_Sync_Profile">Creating a Sync Profile</a></li>\r
+            <li><a href="#Starting_Sync">Starting and Monitoring Data Synchronization</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/data_sync_w.htm">Data Synchronization Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">Data Synchronization API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</h1>\r
+       \r
+      <p>This tutorial demonstrates how you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p>\r
+         \r
+            <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+    \r
+  <h2>Warm-up</h2>\r
+      <p>Become familiar with the Data Synchronization API basics by learning about:</p>\r
+      <ul>\r
+       <li><a href="#Creating_Sync_Profile">Creating a Sync Profile</a> <p>Check whether the device has a free slot for a new sync profile and create the profile.</p> </li>\r
+       <li><a href="#Starting_Sync">Starting and Monitoring Data Synchronization</a> <p>Start the synchronization operation and receive notifications about its progress.</p></li>\r
+      </ul>\r
+\r
+ <h2 id="Creating_Sync_Profile" name="Creating_Sync_Profile">Creating a Sync Profile</h2>\r
+ \r
+  <p>To be able to synchronize your device data, such as contacts and calendar events, with the OMA DS server, you must learn how to create a sync profile:</p>\r
+  <ol>\r
+   <li><p>Check whether there are available profile slots on the device:</p> <pre class="prettyprint">\r
+var numMaxProfiles = tizen.datasync.getMaxProfilesNum();\r
+var numProfiles = tizen.datasync.getProfilesNum();\r
+</pre> </li>\r
+   <li><p>Create a sync profile. Use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncInfo">SyncInfo</a>, <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncServiceInfo">SyncServiceInfo</a>, and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProfileInfo">SyncProfileInfo</a> interfaces to provide sync profile and operation information:</p> <pre class="prettyprint">\r
+if ((numMaxProfiles &lt;= 0) || (numProfiles &lt; numMaxProfiles))\r
+{\r
+&nbsp;&nbsp;&nbsp;var syncInfo = new tizen.SyncInfo(&quot;http://example.com/sync&quot;, &quot;myId&quot;, &quot;myPassword&quot;, &quot;MANUAL&quot;, &quot;TWO_WAY&quot;);\r
+&nbsp;&nbsp;&nbsp;var contactInfo = new tizen.SyncServiceInfo(true, &quot;CONTACT&quot;, &quot;serverContact&quot;);\r
+&nbsp;&nbsp;&nbsp;var eventInfo = new tizen.SyncServiceInfo(true, &quot;EVENT&quot;, &quot;serverEvent&quot;);\r
+&nbsp;&nbsp;&nbsp;var serviceInfo = [contactInfo, eventInfo];\r
+&nbsp;&nbsp;&nbsp;var profile = new tizen.SyncProfileInfo(&quot;MyProfile&quot;, syncInfo, serviceInfo);\r
+</pre> </li>\r
+   <li><p>To be able to use the created profile, add it to your device using the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#DataSynchronizationManager">DataSynchronizationManager</a> interface:</p> <pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;tizen.datasync.add(profile);\r
+&nbsp;&nbsp;&nbsp;var profileId = profile.profileId;\r
+}</pre> </li>\r
+  </ol>\r
+       \r
+  <h2 id="Starting_Sync" name="Starting_Sync">Starting and Monitoring Data Synchronization</h2>\r
+  \r
+  <p>Learning how to start and monitor the data synchronization process is a basic data management skill:</p>\r
+  <ol>\r
+   <li><p>Define the event handlers for the notifications using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> listener interface:</p> <pre class="prettyprint">\r
+var syncCallback =\r
+{\r
+&nbsp;&nbsp;&nbsp;onprogress: function(profileId, serviceType, isFromServer, totalPerType, syncedPerType)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Total: &#39; + totalPerType + &#39;, synced: &#39; + syncedPerType + &#39; for the sync type: &#39; + serviceType);\r
+&nbsp;&nbsp;&nbsp;},\r
+&nbsp;&nbsp;&nbsp;onfailed: function(profileId, error)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Failed with id: &#39; + profileId + &#39;, error name: &#39; + error.name);\r
+&nbsp;&nbsp;&nbsp;}\r
+};\r
+</pre> </li>\r
+   <li><p>Start the sync operation using the <span style="font-family: Courier New,Courier,monospace">startSync()</span> method, with the corresponding listener as a parameter:</p> <pre class="prettyprint">\r
+tizen.datasync.startSync(profileId, syncCallback);\r
+</pre> </li>\r
+  </ol>\r
+                 \r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm
index 42d77f2..01267bc 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm
@@ -1,79 +1,79 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Social: Managing Personal Data</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/social_guide_w.htm">Social Guides</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Social">Social API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Social: Managing Personal Data</h1>
-
-     <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Social API domain is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
- <p>The social data tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
-  <ul>
-   <li><a href="account_tutorial_w.htm">Account: Managing Accounts and Account Information</a> <p>Demonstrates how you can manage accounts and retrieve account information.</p></li>
-   <li><a href="bookmark_tutorial_w.htm">Bookmark: Managing Web Browser Bookmarks</a> <p>Demonstrates how you can manage Tizen Web browser bookmarks on the device.</p></li>   
-   <li><a href="calendar_tutorial_w.htm">Calendar: Managing Calendars and Calendar Events</a> <p>Demonstrates how you can manage and monitor calendar items, and convert them to the iCalender format.</p></li> 
-   <li><a href="call_history_tutorial_w.htm">Call History: Managing the Call History on the Device</a> <p>Demonstrates how you can manage the call history.</p></li>
-   <li><a href="contact_tutorial_w.htm">Contact: Managing Contacts and Handling Contact Information</a> <p>Demonstrates how you can manage and monitor contacts, and convert them to the vCard format.</p></li>  
-   <li><a href="data_sync_tutorial_w.htm">Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</a> <p>Demonstrates how you can create a sync profile and manage data synchronization operations.</p></li>
-  </ul>
-
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Social: Managing Personal Data</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/tizen/social/social_guide_w.htm">Social Guides</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Social">Social API for Mobile Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Social: Managing Personal Data</h1>\r
+\r
+     <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The Social API domain is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+ <p>The social data tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>\r
+  <ul>\r
+   <li><a href="account_tutorial_w.htm">Account: Managing Accounts and Account Information</a> <p>Demonstrates how you can manage accounts and retrieve account information.</p></li>\r
+   <li><a href="bookmark_tutorial_w.htm">Bookmark: Managing Web Browser Bookmarks</a> <p>Demonstrates how you can manage Tizen Web browser bookmarks on the device.</p></li>   \r
+   <li><a href="calendar_tutorial_w.htm">Calendar: Managing Calendars and Calendar Events</a> <p>Demonstrates how you can manage and monitor calendar items, and convert them to the iCalender format.</p></li> \r
+   <li><a href="call_history_tutorial_w.htm">Call History: Managing the Call History on the Device</a> <p>Demonstrates how you can manage the call history.</p></li>\r
+   <li><a href="contact_tutorial_w.htm">Contact: Managing Contacts and Handling Contact Information</a> <p>Demonstrates how you can manage and monitor contacts, and convert them to the vCard format.</p></li>  \r
+   <li><a href="data_sync_tutorial_w.htm">Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</a> <p>Demonstrates how you can create a sync profile and manage data synchronization operations.</p></li>\r
+  </ul>\r
+\r
+ \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
index 79f3b5c..5f885ac 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
@@ -43,7 +43,7 @@
    <li><a href="time_tutorial_w.htm">Time: Exposing Information about Date, Time, and Time Zones</a> <p>Demonstrates how you can manage date and time information.</p></li>   
   </ul>
 
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
 <ul>
    <li><a href="fm_radio_tutorial_w.htm">FM Radio: Listening to the FM Radio</a> <p>Demonstrates how you can manage a FM radio on the device.</p></li>  
    <li><a href="web_setting_tutorial_w.htm">Web Setting: Managing the Setting States of the Web View</a> <p>Demonstrates how you can manage Web view properties.</p></li>
diff --git a/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm b/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
index 96312b9..32089c9 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
@@ -68,13 +68,16 @@
        <p>Demonstrates how you can manage and retrieve information from the device and its sensors.</p></li>
        <li><a href="ui/ui_tutorials_w.htm">User Interface: Notifying Users of New Application Information</a>
        <p>Demonstrates how you can manage badges and notifications on the screen.</p></li>
-       <li><a href="social/social_tutorials_w.htm">Social: Managing Personal Data</a> <span style="color: red">in mobile applications only</span>
+       <li><a href="social/social_tutorials_w.htm">Social: Managing Personal Data</a> <strong>in mobile applications only</strong>
        <p>Demonstrates how you can manage the user&#39;s personal data, such as contacts, calendars, location data, and call and browsing history, on the device.</p></li>             
 </ul>
 
+
+<p>For more information about implementing the UI for your application using the Advanced UI Framework (TAU) features, see <a href="../../../../org.tizen.ui.guides/html/web/tau/guides_tau_w.htm">TAU</a>.</p>
+
 <p>In addition to the Tizen Web Device API tutorials above, you can implement the following features:</p>
 <ul>   
-       <li><a href="service/service_tutorial_w.htm">Service Application: Creating a Service Application</a> <span style="color: red">in wearable applications only</span> <p>Demonstrates how you can create a wearable Web service application.</p></li>      
+       <li><a href="service/service_tutorial_w.htm">Service Application: Creating a Service Application</a> <strong>in wearable applications only</strong> <p>Demonstrates how you can create a wearable Web service application.</p></li>     
 </ul>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.tutorials/html/web/tutorials_w.htm b/org.tizen.tutorials/html/web/tutorials_w.htm
index 6d1ac08..6359524 100644 (file)
--- a/org.tizen.tutorials/html/web/tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tutorials_w.htm
@@ -41,7 +41,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">The API support differs based on the application profile (mobile or wearable). For a complete list of APIs and their supported profiles, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>,  <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>, and <a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Web UI Framework Reference</a>.</td> 
+     <td class="note">The API support differs based on the application profile (mobile or wearable). For a complete list of APIs and their supported profiles, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a> and <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</td> 
     </tr> 
    </tbody> 
   </table> 
diff --git a/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm
index 3a91d89..aa7266a 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm
@@ -41,7 +41,7 @@
    <li><a href="xmlhttprequest_tutorial_w.htm">XMLHttpRequest Level 1 and 2: Communicating with the Server</a> <p>Demonstrates how you can communicate with a Web server using HTTP requests.</p></li>
   </ul>
 
-  <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+  <p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
  <ul>
    <li><a href="server_sent_tutorial_w.htm">Server-Sent Events: Using Server Push in Web Environment</a> <p>Demonstrates how you can implement server push messaging.</p></li> 
  </ul> 
@@ -57,15 +57,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm
index 1b6d715..d26ec30 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm
@@ -168,15 +168,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm
index 3914590..78b599b 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm
@@ -171,15 +171,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm
index 04be639..503f642 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm
@@ -202,15 +202,15 @@ function closeConnection()
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm
index 652fe9e..530df2e 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm
@@ -312,15 +312,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script>
 
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm
index afee198..211cdaf 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm
@@ -40,7 +40,7 @@
    <li><a href="touch_tutorial_w.htm">Touch Events version 1: Controlling Touch Events</a> <p>Demonstrates how you can use touch events.</p></li>  
    <li><a href="vibration_tutorial_w.htm">Vibration: Managing the Vibration Mechanism</a> <p>Demonstrates how you can launch and stop vibration on Tizen devices.</p></li>
   </ul>
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
   <ul>
    <li><a href="browser_state_tutorial_w.htm">HTML5 Browser state: Monitoring Browser Network Connection</a> <p>Demonstrates how you can access the browser connection state.</p></li>   
    <li><a href="screen_orientation_tutorial_w.htm">Screen Orientation: Managing Screen Orientation State</a> <p>Demonstrates how you can detect rotation and acceleration motions on the device.</p></li>    
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm b/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm
index 64218da..81e3254 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm
@@ -154,7 +154,7 @@ else
 angleMemory = angle;
 </pre></li>
 
-<li><p>The needle position is updated by rotating the needle with the <span style="font-family: Courier New,Courier,monospace">rotate()</span> method of the <a href="../../../../../org.tizen.guides/html/web/w3c/dom/transform_w.htm#twod">transform function</a>, based on the angle calculated above.</p>
+<li><p>The needle position is updated by rotating the needle with the <span style="font-family: Courier New,Courier,monospace">rotate()</span> method of the <a href="../../../../../org.tizen.ui.guides/html/web/w3c/transform_w.htm#twod">transform function</a>, based on the angle calculated above.</p>
 
 
 <pre class="prettyprint">$(&#39;#direction&#39;).text(text);
diff --git a/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm
deleted file mode 100644 (file)
index a86b60e..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm
+++ /dev/null
@@ -1,220 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Animations Module Level 3: Creating Animations</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#create">Creating a Logo Animation</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/animation_w.htm">CSS Animations Module Level 3 Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#animations">CSS Animations Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#animations">CSS Animations Module Level 3 API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Animations Module Level 3: Creating Animations</h1>
-
-
-<p>This tutorial demonstrates how you can create animations in your application.</p>
-
- 
-<h2>Warm-up</h2>
-<p>Become familiar with the CSS Animations Module Level 3 API basics by learning about:</p>
-<ul>
-<li><a href="#create">Creating a Logo Animation</a> 
-<p>Animate the Tizen logo on the screen.</p></li>
-</ul>   
-
-                               <h2 id="create" name="create">Creating a Logo Animation</h2>
-                               
-                               <p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or Emulator) is switched on:</p>
-
-<ol>  
-<li>No elements are initially shown on the screen.  </li>
-<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller.</li>
-<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location.</li>
-</ol>
-<p class="figure">Figure: Logo animation (in mobile applications only)</p> 
-<p align="center"><img alt="Logo animation" src="../../../images/animation1.png" /></p> 
-<p>To create a logo animation:</p>
-<ol>
-<li>Create the HTML layout for the animation. To be able to manage the movement of each animation part separately, you must define individual elements for each part.
-<pre class="prettyprint">
-&lt;div class=&quot;animation-holder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-</li>
-<li>Define the basic style for the animation:
-<pre class="prettyprint">
-.example-body {width: 320px; height: 480px; background: #000; margin: 0 auto; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; border: 2px solid #fff; overflow: hidden;}
-.animation-holder {width: 280px; height: 88px; position: absolute; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 50%; top: 50%; margin: -54px 0 0 -140px;} 
-
-.tizen-txt, .tizen-logo {position: absolute; display: block; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat; background-position: 50% 50%}
-.tizen-txt.t {width: 48px; height: 56px; background-image: url(images/txt_t.png);}
-.tizen-txt.i {width: 15px; height: 56px; background-image: url(images/txt_i.png);}
-.tizen-txt.z {width: 46px; height: 56px; background-image: url(images/txt_z.png);}
-.tizen-txt.e {width: 45px; height: 56px; background-image: url(images/txt_e.png);}
-.tizen-txt.n {width: 54px; height: 58px; background-image: url(images/txt_n.png);}
-.tizen-txt.tm {width: 11px; height: 6px; background-image: url(images/txt_tm.png);}
-.tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(images/logo_tizen.png); background-size: 100% 100%;}
-</pre>
-</li>
-<li>Create the animation:
-<ol type="a">
-<li>To ensure that all the animation elements are played within the same time frame, some common properties are defined for the animation. The animation movement time is 7 seconds, and the animation repeats infinitely.
-<p>When an animation that repeats itself is activated, it can look unnatural when it suddenly returns to its initial position after finishing an iteration. To make the repetition move naturally, set the <span style="font-family: Courier New,Courier,monospace">animation-direction</span> property to <span style="font-family: Courier New,Courier,monospace">alternate</span>. The alternate direction means that during the odd iterations the animation proceeds in the normal direction (from the 0% keyframe to the 100% keyframe), while during the even iterations the keyframes are played in the opposite direction from 100% to 0%.</p>
-<pre class="prettyprint">
-.tizen-txt, .tizen-logo 
-{
-&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 7s;
-&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;
-&nbsp;&nbsp;&nbsp;-webkit-animation-direction: alternate;
-}
-</pre>
-</li>
-<li>Create the keyframes to implement the flow for the Tizen logo:
-<ul>
-<li>During the first 25% of the animation total playing time (7 seconds), the transparency disappears and the Tizen logo appears.</li>
-<li>During the 25 - 50% of the playing time, the logo size becomes smaller as the width and height values are reduced, and due to the left and top value, the logo is positioned to the top right corner of the screen.</li>
-<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li> 
-</ul> 
-<p></p>
-<pre class="prettyprint">
-@-webkit-keyframes tizen-logo 
-{
-&nbsp;&nbsp;&nbsp;0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}
-&nbsp;&nbsp;&nbsp;25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}
-&nbsp;&nbsp;&nbsp;50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
-&nbsp;&nbsp;&nbsp;100% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
-}
-</pre>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If the 100% keyframe is not defined, the animation is executed based on the original properties, and the logo size increases to its original size at the end.</td> 
-      </tr> 
-     </tbody> 
-    </table></li>
-<li>Create the keyframes to implement the flow for each letter in the word &quot;TIZEN&quot;:
-<ul>
-<li>To hide the letter initially, the property has been assigned outside the screen at the 0% keyframe. To allow the Tizen logo to appear first, the first letter is introduced at the 30% keyframe.</li>
-<li>To create a slight collision animation, the letter element moves to -10 px of the final value at the 40% keyframe before reaching its final 0 px value at the 45% keyframe.</li>
-<li>The <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> property can be changed for each keyframe point, and is used to determine the pace of the animation. When the letter is actually shown on the screen and moved to its final location, the ease in and out timing functions are used.</li>
-</ul>
-
-<p>To show the letters one at a time, the timing is pushed back a bit more for each consecutive letter:</p>
-<pre class="prettyprint">
-&lt;!--Letter T--&gt;
-@-webkit-keyframes tizen-txt-t 
-{
-&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}
-&nbsp;&nbsp;&nbsp;30% {left: 340px; top: 31px; animation-timing-function: ease-in;}
-&nbsp;&nbsp;&nbsp;40% {left: -10px; top: 31px; animation-timing-function: ease-out;}
-&nbsp;&nbsp;&nbsp;45% {left: 0; top: 31px;}
-&nbsp;&nbsp;&nbsp;100% {left: 0; top: 31px;}
-}
-
-&lt;!--Letter I--&gt;
-@-webkit-keyframes tizen-txt-i 
-{
-&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}
-&nbsp;&nbsp;&nbsp;40% {left: 340px; top: 31px; animation-timing-function: ease-in;}
-&nbsp;&nbsp;&nbsp;50% {left: 47px; top: 31px; animation-timing-function: ease-out;}
-&nbsp;&nbsp;&nbsp;55% {left: 57px; top: 31px;}
-&nbsp;&nbsp;&nbsp;100% {left: 57px; top: 31px;}
-}
-
-&lt;!--Remaining letters--&gt;
-</pre></li>
-
-<li><p>After creating all the keyframes, define the <span style="font-family: Courier New,Courier,monospace">animation-name</span> property for each element:</p>
-<pre class="prettyprint">
-.tizen-txt.t 
-{
-&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-t;
-}
-.tizen-txt.i 
-{
-&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-i;
-}
-</pre></li>
-
-</ol></li></ol>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_practical.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_e.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_i.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_n.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_t.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_tm.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_z.png</a></li>
- </ul>
-               
-       
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm
deleted file mode 100644 (file)
index b44ad7d..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm
+++ /dev/null
@@ -1,132 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#create">Creating Backgrounds</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/background_w.htm">CSS Backgrounds and Borders Module Level 3 Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#border">CSS Backgrounds and Borders Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#border">CSS Backgrounds and Borders Module Level 3 API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</h1>
-
-<p>This tutorial demonstrates how you can create a background for your application.</p>
-
-
-<h2>Warm-up</h2>
-<p>Become familiar with the CSS Backgrounds and Borders Module Level 3 API basics by learning about:</p>
-<ul>
-<li><a href="#create">Creating Backgrounds</a> 
-<p>Create a multilayer background with the parallax effect.</p></li>
-</ul>   
-
-                               <h2 id="create" name="create">Creating Backgrounds</h2>
-                       <p>To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>
-
-<p class="figure">Figure: Background with the parallax effect</p> 
-<p align="center"><img alt="Background with the parallax effect" src="../../../images/css_bg_tutorial1.png" /></p> 
-
-<ol><li>Prepare 3 images (<span style="font-family: Courier New,Courier,monospace">tizen.png</span>, <span style="font-family: Courier New,Courier,monospace">tizen2.png</span>, and <span style="font-family: Courier New,Courier,monospace">dot.png</span>), each with a transparent background.
-
-<p align="center"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../../images/css_bg_tutorial2.png" /></p> </li>
-
-<li>Create a <span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">id=&quot;parallelexample&quot;</span> and a slider input element with the minimum, maximum, and initial value:
-<pre class="prettyprint">
-&lt;div id=&quot;parallelexample&quot;&gt;&lt;/div&gt;
-&lt;input id=&quot;position&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;200&quot; value=&quot;50&quot;&gt;
-</pre></li>
-
-<li>Define the needed styles for the  <span style="font-family: Courier New,Courier,monospace">div</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section using the <span style="font-family: Courier New,Courier,monospace">parallelexample</span> ID.
-<p>Define a background using the prepared images in the correct order. The images are shown in the order they have been added, with the first image on the topmost layer. Use the same order when defining the background position for each image.</p>
-<pre class="prettyprint">
-#parallelexample
-{
-&nbsp;&nbsp;&nbsp;width: 300px;
-&nbsp;&nbsp;&nbsp;height: 300px;
-&nbsp;&nbsp;&nbsp;background-image: url(tizen2_32.png), url(tizen3_32.png), url(dot.png);
-&nbsp;&nbsp;&nbsp;background-position: 6.25em 8em, 3.125em 4em, center top;
-&nbsp;&nbsp;&nbsp;background-repeat: repeat, repeat, repeat;
-&nbsp;&nbsp;&nbsp;border: 1px solid black;
-&nbsp;&nbsp;&nbsp;margin: 0px auto;
-}
-</pre></li>
-<li>To create the parallax effect, create a method that moves the background layers by changing the horizontal position values of the images in the <span style="font-family: Courier New,Courier,monospace">div</span> element. To determine the position value change, add an <span style="font-family: Courier New,Courier,monospace">onchange</span> event handler for the slider to determine the change based on the slider handle movement.
-<pre class="prettyprint">
-function moveLayers() 
-{
-&nbsp;&nbsp;&nbsp;/* Get slider value */
-&nbsp;&nbsp;&nbsp;var poz = document.getElementById(&#39;position&#39;);
-&nbsp;&nbsp;&nbsp;/* Get the div element */
-&nbsp;&nbsp;&nbsp;var example = document.getElementById(&#39;ParallaxExamle&#39;);
-&nbsp;&nbsp;&nbsp;/* Add the event handler */
-&nbsp;&nbsp;&nbsp;poz.onchange = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var layer1 = this.value/8, layer2 = this.value/16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;example.style.backgroundPosition = layer1 +&#39;em 8em, &#39; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ layer2 + &#39;em 4em, center top&#39;;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre></li></ol>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">css_background.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">dot.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen2_32_s.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen3_32.png</a></li>
- </ul>
-               
-
-       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm
deleted file mode 100644 (file)
index 0513c78..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm
+++ /dev/null
@@ -1,189 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#selector">Using Pseudo-element Selectors</a></li>
-                       <li><a href="#boxmodel">Using Box Model Properties</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI) Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</h1>
-
-
-<p>This tutorial demonstrates how you can change the Web form UI and control the box model in HTML documents.</p>
-
-<h2 id="warm-up" name="warm-up">Warm-up</h2>
-<p>Become familiar with the CSS Basic User Interface Module Level 3 (CSS3 UI) API basics by learning about:</p>
-<ul>
-<li><a href="#selector">Using Pseudo-element Selectors</a><p>Change the Web Form UI using a CSS3 pseudo-class based on the user actions.</p></li>
-<li><a href="#boxmodel">Using Box Model Properties</a><p>Use the box model properties to control the box model.</p></li>
-</ul>  
-
-
-                               <h2 id="selector" name="selector">Using Pseudo-element Selectors</h2>
-                               
-                       <p>To enhance the user experience of your application, you must learn how to use pseudo-element selectors:</p>
-<ol>
-<li><p>Use the pseudo-classes, such as <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span>, to add different styles based on the state of the DOM elements:</p>
-<pre class="prettyprint">input: enabled {border: 1px solid blue}
-input: disabled {border: 1px solid red}</pre>
-<table class="note"> 
-    <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">In the versions prior to CSS3, pseudo-elements, such as <span style="font-family: Courier New,Courier,monospace">:hover</span>, <span style="font-family: Courier New,Courier,monospace">:active</span>, and <span style="font-family: Courier New,Courier,monospace">:focus</span>, were used, and required an attribute selector. Since the <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span> classes are not influenced by the <span style="font-family: Courier New,Courier,monospace">display</span> and <span style="font-family: Courier New,Courier,monospace">visibility</span> attributes, they improve the accessibility.</td> 
-      </tr> 
-     </tbody> 
-   </table></li>
-<li>To control the state of the HTML5 Web Forms (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <span style="font-family: Courier New,Courier,monospace">:in-range</span> and <span style="font-family: Courier New,Courier,monospace">:out-of-range</span> pseudo-classes. 
-<p>They check for any values that have exceeded the inserted range. (The following figure applies to mobile applications only.)</p>
-<pre class="prettyprint">
-&lt;!--HTML--&gt; 
-&lt;input type=&quot;number&quot; step=&quot;10&quot; min=&quot;10&quot; max=&quot;100&quot;&gt;
-</pre>
-<pre class="prettyprint">
-&lt;!--CSS--&gt;
-input[type=&quot;number&quot;]: in-range {border: 3px solid blue; width: 90%}
-input[type=&quot;number&quot;]: out-of-range {border: 3px solid red; width: 90%}
-</pre>
-<p align="center"><img alt="Element ranges (in mobile applications only)" src="../../../images/pseudo_elements_selector_range.png"/></p></li>
-<li>To apply different styles to required input items and option items, use the <span style="font-family: Courier New,Courier,monospace">:required</span> and <span style="font-family: Courier New,Courier,monospace">:optional</span> pseudo-classes. (The following figure applies to mobile applications only.)
-<pre class="prettyprint">
-&lt;!--HTML--&gt;
-&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&lt;legend&gt;required and optional&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;email: &lt;input type=&quot;email&quot; required&gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;password: &lt;input type=&quot;Password&quot; placeholder=&quot;required area&quot; required&gt;&lt;/label&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;date: &lt;input type=&quot;date&quot; placeholder=&quot;You know what to do, huh?&quot;&gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;textarea placeholder=&quot;Comment&quot;&gt;&lt;/textarea&gt;
-&lt;/fieldset&gt;</pre>
-<pre class="prettyprint">
-&lt;!--CSS--&gt;
-input: required, textarea: required {border: 1px solid red}
-input: optional, textarea: optional {border: 1px solid #777}
-</pre>
-<p align="center"><img alt="Required and optional elements (in mobile applications only)" src="../../../images/pseudo_elements_selector_required.png"/></p></li></ol>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">range.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">required_and_optional.html</a></li>
- </ul>
-                       
-                               <h2 id="boxmodel" name="boxmodel">Using Box Model Properties</h2>
-                               
-                       <p>To enhance the user experience of your application, you must learn how to use box model properties:</p> 
-<table>
-<tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The properties dependent on mouse and keyboard functions are not discussed in this tutorial.</td> 
-      </tr> 
-     </tbody> 
-   </table>
-<ol>
-<li>To assign the area that is included in the width and height of the box automatically, use the <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property. To assign the width without a margin, use the <span style="font-family: Courier New,Courier,monospace">box-sizing: border-box</span> property.
-<pre class="prettyprint lang-html">
-div.content-box {box-sizing: content-box} &lt;!--width (height) = content--&gt;
-div.border-box {box-sizing: border-box} &lt;!--width (height) = content + padding + border--&gt;
-div.border-box: before {height: 40px}
-</pre></li>
-
-<li>To draw an outline without using up the area, use the <span style="font-family: Courier New,Courier,monospace">outline</span> property:
-<pre class="prettyprint">
-.Test-Box {outline: 5px dashed red}
-.outline: before {outline: 2px dashed red}
-.outline-offset: before {outline-offset: 35px}
-</pre></li>
-
-<li>To handle text that exceeds the area of the box model, use the <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property. The <span style="font-family: Courier New,Courier,monospace">text-overflow: ellipsis</span> property is used to indicate the text exceeded the padding area as &#39;...&#39;.
-<pre class="prettyprint">div 
-{
-&nbsp;&nbsp;&nbsp;width: 250px;
-&nbsp;&nbsp;&nbsp;margin: 20px auto;
-&nbsp;&nbsp;&nbsp;padding: 20px 30px;
-&nbsp;&nbsp;&nbsp;background-color: #eee;
-&nbsp;&nbsp;&nbsp;color: #333;
-&nbsp;&nbsp;&nbsp;border: 5px solid #333;
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-&nbsp;&nbsp;&nbsp;white-space: nowrap;
-}
-
-.clip {text-overflow: clip}
-.ellipsis {text-overflow: ellipsis}</pre></li>
-</ol>
-
-<p>The following figure illustrates the box model properties; from left to right, it shows the effects of the box sizing, outline, and text overflow properties.</p>
-<p class="figure">Figure: Box model properties (in mobile applications only)</p>
-<p align="center"><img alt="Box model properties (in mobile applications only)" src="../../../images/box_model_properties.png"/></p>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">box_sizing_property.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">outline_property.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">text_overflow_property.html</a></li>
- </ul>
-               
-               
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm
deleted file mode 100644 (file)
index c1439a9..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/color_tutorial_w.htm
+++ /dev/null
@@ -1,148 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Color Module Level 3: Specifying Color and Opacity</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#create">Creating a Color Generator</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/color_w.htm">CSS Color Module Level 3 Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#color">CSS Color Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#color">CSS Color Module Level 3 API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Color Module Level 3: Specifying Color and Opacity</h1>
-
-<p>This tutorial demonstrates how you can manage colors in your application.</p>
- 
- 
-<h2>Warm-up</h2>
-<p>Become familiar with the CSS Color Module Level 3 API basics by learning about:</p>
-<ul>
-<li><a href="#create">Creating a Color Generator</a> 
-<p>Create a HSLA color generator to set the color value for an element in the HSLA format.</p></li>
-</ul>   
-
-                               <h2 id="create" name="create">Creating a Color Generator</h2>
-                       <p>To enhance the user experience of your application, you must learn to create a HSLA color generator to set the color value for an element in the HSLA format.</p>
-
-<p class="figure">Figure: HSLA color generator</p> 
-<p align="center"><img alt="HSLA color generator" src="../../../images/css_color_tutorial1.png" /></p>
-
-
-
-<ol><li>To create the color generator, define 2 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> elements for displaying the HSLA value as text and in a color box. You also need 4 slider inputs for defining the HSLA color:
-<ul>
-<li>The first input has a range of 0 - 360 and represents hue.</li>
-<li>The second and third inputs have a range of 0 - 100 and represent saturation and lightness.</li>
-<li>The last input has a range of 0 - 10 and represents alpha transparency.
-<p>The range should be 0.1 - 1, but the minimum value of the <span style="font-family: Courier New,Courier,monospace">min</span> attribute is 0 so the value can be divided by 10. </p></li></ul>
-
-<pre class="prettyprint lang-html">
-&lt;div id=&quot;color-generator&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;text-box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;color-box&quot;&gt;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Hue&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;hue&quot; value=&quot;0&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;360&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Saturation&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;saturation&quot; value=&quot;100&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Lightness&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;lightness&quot; value=&quot;50&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Alpha&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;alpha&quot; value=&quot;10&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;10&quot;&gt;
-&lt;/div&gt;
-</pre></li>
-<li>Obtain the values from the slider inputs with the <span style="font-family: Courier New,Courier,monospace">getElementById</span> method. Remember to divide the alpha value by 10 to reach the correct range of 0.1 - 1.
-<pre class="prettyprint">
-var h = document.getElementById(&#39;hue&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;s = document.getElementById(&#39;saturation&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;l = document.getElementById(&#39;lightness&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;a = document.getElementById(&#39;alpha&#39;).value / 10;
-</pre></li>
-<li>Set the HSLA text and the color of the color box by defining the color from the inputs in the HSL and HSLA formats.
-<p>If the alpha is 1, the HSL format is displayed. Otherwise, the HSLA format is used.</p>
-<pre class="prettyprint">
-/* Define formats */
-hsl = &#39;hsl(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%)&#39;;
-hsla = &#39;hsla(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%, &#39; + a + &#39;)&#39;;
-
-/* Set the color of the box */
-cBox = document.querySelector(&#39;#color-box&#39;),
-
-/* Set the text */
-tBox = document.querySelector(&#39;#text-box&#39;);
-</pre></li>
-
-<li>Add an event handler to the input sliders to change the displayed text and color box color when the slider values change.
-<pre class="prettyprint">
-var inputs = document.querySelectorAll(&#39;#color-generator input[type=range]&#39;);
-                       
-for (i = 0; i &lt; inputs.length; i++)
-{
-&nbsp;&nbsp;&nbsp;inputs[i].onchange = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show color */
-&nbsp;&nbsp;&nbsp;}
-}
-</pre></li></ol>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">css_color.html</a></li>   
- </ul>
-               
-
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm
deleted file mode 100644 (file)
index cb4b26d..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>DOM, Forms and Styles: Managing CSS Styles and HTML Forms</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles Guides</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>DOM, Forms and Styles: Managing CSS Styles and HTML Forms</h1>
-
-       <p>The DOM, forms and styles tutorials demonstrate how to manage CSS style and HTML5 form features in all Tizen Web applications:</p> 
-  <ul> 
-   <li><a href="animation_tutorial_w.htm">CSS Animations Module Level 3: Creating Animations</a> <p>Demonstrates how you can create animations.</p></li>  
-   <li><a href="background_tutorial_w.htm">CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</a> <p>Demonstrates how you can create multilayer backgrounds.</p></li> 
-   <li><a href="basic_ui_tutorial_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</a> <p>Demonstrates how you can apply styles to HTML documents.</p></li>
-   <li><a href="color_tutorial_w.htm">CSS Color Module Level 3: Specifying Color and Opacity</a> <p>Demonstrates how you can use colors on the screen.</p></li> 
-   <li><a href="flexible_tutorial_w.htm">CSS Flexible Box Layout Module: Adjusting the Layout</a> <p>Demonstrates how you can create flexible box layouts.</p></li> 
-   <li><a href="transform_tutorial_w.htm">CSS Transforms: Manipulating Elements</a> <p>Demonstrates how you can create animations with transforms.</p></li> 
-   <li><a href="transition_tutorial_w.htm">CSS Transitions Module Level 3: Changing Element Styles</a> <p>Demonstrates how you can use transitions.</p></li>
-   <li><a href="font_tutorial_w.htm">CSS Fonts Module Level 3: Manipulating Fonts</a> <p>Demonstrates how you can modify fonts.</p></li> 
-   <li><a href="text_module_tutorial_w.htm">CSS Text Module Level 3: Manipulating Text</a> <p>Demonstrates how you can manipulate and transform text.</p></li> 
-   <li><a href="woff_tutorial_w.htm">WOFF File Format 1.0: Changing Fonts Using WOFF</a> <p>Demonstrates how you can modify fonts with WOFF.</p></li> 
-   <li><a href="html5forms_tutorial_w.htm">HTML5 Forms: Managing User Input</a> <p>Demonstrates how you can use Web forms in HTML5.</p></li>
-   <li><a href="media_query_tutorial_w.htm">Media Queries: Labeling Output Devices in Style Sheets</a> <p>Demonstrates how you can define media queries to determine the styles to be used in the Web document.</p></li> 
-   <li><a href="selector_tutorial_w.htm">Selectors API Level 1 and Level 2: Selecting DOM Elements</a> <p>Demonstrates how you can select elements on an HTML page.</p></li>
-   <li><a href="session_history_tutorial_w.htm">HTML5 session history of browsing contexts: Managing Browsing Contexts</a><p>Demonstrates how you can store and use session history details.</p></li>   
-   </ul>       
-
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
- <ul>
- <li><a href="multi_tutorial_w.htm">CSS Multi-column Layout Module: Creating Multi-column Layouts</a> <p>Demonstrates how you can create multi-column layouts.</p></li> 
- </ul> 
-   
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm
deleted file mode 100644 (file)
index 4e42c82..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/flexible_tutorial_w.htm
+++ /dev/null
@@ -1,362 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Flexible Box Layout Module: Adjusting the Layout</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#usecont">Using the Flex Container</a></li>
-                       <li><a href="#item">Using the Flex Items</a></li>
-                       <li><a href="#create">Creating a Flexible Layout with CSS3</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/flexible_w.htm">CSS Flexible Box Layout Module Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">CSS Flexible Box Layout Module API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">CSS Flexible Box Layout Module API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Flexible Box Layout Module: Adjusting the Layout</h1>
-
-<p>This tutorial demonstrates how you can create a flexible box layout.</p>
-  
-
-<h2 id="warm-up" name="warm-up">Warm-up</h2>
-<p>Become familiar with the CSS Flexible Box Layout Module API basics by learning about:</p>
-<ul>
-<li><a href="#usecont">Using the Flex Container</a><p>Assign a flexible area and align flex items within the area.</p></li>
-<li><a href="#item">Using the Flex Items</a><p>Set the properties of the flex items included in the flexible area.</p></li>
-</ul>
-
-<h2 id="follow-up" name="follow-up">Follow-up</h2>
-<p>Once we have learned the basics of the CSS Flexible Box Layout Module API, we can now move on to more advanced tasks, including:</p>
-<ul>
-<li><a href="#create">Creating a Flexible Layout with CSS3</a><p>Use CSS3 to create a flexible box layout for your application.</p></li>
-</ul>
-                       
-
-                               <h2 id="usecont" name="usecont">Using the Flex Container</h2>
-                       <p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex container:</p>
-
-<ol>
-<li>Assign the area (flex container) where the flexible box layout is applied by using the <span style="font-family: Courier New,Courier,monospace">display: flex</span> property:
-<pre class="prettyprint">&lt;style&gt;
-&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}
-&lt;/style&gt;
-
-&lt;div class=&quot;flex_container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>D&lt;/div&gt;
-&lt;div&gt;</pre>
-
-<p>The child nodes within the assigned flex container become flex items.</p>
-</li>
-<li><p>Define the necessary properties for the flex container to assign the alignment of the flex items within it:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-direction</span> property sets the alignment direction of the flex items:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">row</span>: Align from left to right.</li>
-<li><span style="font-family: Courier New,Courier,monospace">row-reverse</span>: Align from right to left.</li>
-<li><span style="font-family: Courier New,Courier,monospace">column</span>: Align from top to bottom.</li>
-<li><span style="font-family: Courier New,Courier,monospace">column-reverse</span>: Align from bottom to top.</li>
-</ul></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property sets the line changing of the flex items:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">nowrap</span>: Reduces the size of the flex items without changing lines.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the cross axis direction of the current writing mode.</li>
-<li><span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the opposite cross axis direction than in the <span style="font-family: Courier New,Courier,monospace">wrap</span> value.</li>
-</ul></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">justify-content</span> property sets the handling of gaps between the flex items on the main axis:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Gathers the items at the alignment starting point.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Gathers the items at the alignment finishing point.</li>
-<li><span style="font-family: Courier New,Courier,monospace">center</span>: Gathers the items in the center.</li>
-<li><span style="font-family: Courier New,Courier,monospace">space-between</span>: Aligns the start and end item at both ends, and creates equal gaps in between the rest of the items.</li>
-<li><span style="font-family: Courier New,Courier,monospace">space-around</span>: Creates equal gaps between all items.</li>
-</ul>
-<table class="note"> 
-    <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">This property is similar to <span style="font-family: Courier New,Courier,monospace">text-align</span>, but the alignment direction and the starting point are based on the <span style="font-family: Courier New,Courier,monospace">flex-direction</span> and <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> properties.</td> 
-      </tr> 
-     </tbody> 
-   </table></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">align-content</span> property sets the handling of gaps between the flex items on the cross axis. It has the same values as the <span style="font-family: Courier New,Courier,monospace">justify-content</span> property, and 1 additional value:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the size of the flex items and aligns them without gaps.</li>
-</ul></li>
-<li id="alignitems"><span style="font-family: Courier New,Courier,monospace">align-items</span> property sets the relative location and size between the flex items on the cross axis:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Aligns the items vertically to the top.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Aligns the items vertically to the bottom.</li>
-<li><span style="font-family: Courier New,Courier,monospace">center</span>: Aligns the items vertically to the middle.</li>
-<li><span style="font-family: Courier New,Courier,monospace">baseline</span>: Aligns the items vertically to the baseline.</li>
-<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the height of the flex items and aligns them without gaps.</li>
-</ul>
-<table class="note"> 
-    <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If the <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property is set to <span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>, the start and end points of the alignment are reversed.</td> 
-      </tr> 
-     </tbody> 
-   </table></li></ul></li></ol>
-<p>The following figure shows examples of flex containers and how their flex items have been aligned.</p>
-<p class="figure">Figure: Flex container properties (in mobile applications only)</p> 
-<p align="center"><img alt="Flex container properties (in mobile applications only)" src="../../../images/flexcontainer_properties.png"/></p>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_2.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_3.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_4.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_5.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_6.html</a></li>  
- </ul>
-               
-                               <h2 id="item" name="item">Using the Flex Items</h2>
-                               
-                       <p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex items:</p>
-
-<ol>
-<li>Assign the area (flex container) where the flexible box layout is applied, and define the flex items for it:
-<pre class="prettyprint">&lt;style&gt;
-&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}
-&lt;/style&gt;
-
-&lt;div class=&quot;flex_container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;
-&lt;div&gt;</pre>
-</li>
-
-<li><p>Define the necessary properties for the flex items:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">align-self</span> property is similar as the <a href="#usecont">align-items</a> property of the flex container.
-<table class="note"> 
-    <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If both the <span style="font-family: Courier New,Courier,monospace">align-self</span> and <span style="font-family: Courier New,Courier,monospace">align-items</span> properties are used simultaneously, the <span style="font-family: Courier New,Courier,monospace">align-items</span> property is ignored.</td> 
-      </tr> 
-     </tbody> 
-   </table></li>
-
-<li><span style="font-family: Courier New,Courier,monospace">flex</span> property is a shorthand expression defining the flex item size handling:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">flex-grow</span>: Sets whether the spaces between flex items are filled.</li> 
-<li><span style="font-family: Courier New,Courier,monospace">flex-shrink</span>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>
-<li><span style="font-family: Courier New,Courier,monospace">flex-basis</span>: Sets the default width of the relevant flex items.</li>
-</ul></li></ul></li></ol>
-<p>The following figure shows examples of how flex items can be placed and sized within a flex container.</p>
-<p class="figure">Figure: Flex items (in mobile applications only)</p>
-<p align="center"><img alt="Flex items (in mobile applications only)" src="../../../images/flexitem_properties.png"/></p>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_2.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_3.html</a></li>           
- </ul>
-                       
-                               <h2 id="create" name="create">Creating a Flexible Layout with CSS3</h2>
-                       <p>To enhance the user experience of your application, you must learn how to create flexible box layout:</p>
-<ol>
-<li>Define the HTML content for the flexible layout. In this example, create 2 articles areas, 1 for a text list and 1 for an icon list:
-<pre class="prettyprint">&lt;div class=&quot;container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;article class=&quot;events&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;UPCOMING EVENTS&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;date&quot;&gt;&lt;span&gt;APR&lt;/span&gt;&lt;br&gt; 15&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;title&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Linux Foundation Collaboration Summit &lt;span class=&quot;local&quot;>San Francisco, CA&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other text items--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;article class=&quot;schedule&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;SCHEDULE&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;img_list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;folder.png&quot; alt=&quot;folder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;alert.png&quot; alt=&quot;alert&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other icons--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&lt;/div&gt;</pre></li>
-
-<li>Define styles to decorate the article areas. (The following figure applies to mobile applications only.)
-<pre class="prettyprint">&lt;!--Border for the article areas--&gt;
-.container article &gt; * {border: 1px solid #ccc;}
-
-&lt;!--Font style for the article area titles--&gt;
-.container .events &gt; h2, .container .schedule &gt; h2 
-{
-&nbsp;&nbsp;&nbsp;padding: 10px 20px;
-&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
-}
-
-&lt;!--List styles--&gt;
-.container .events &gt; ul, .container .schedule .img_list  
-{
-&nbsp;&nbsp;&nbsp;height: 100%; 
-&nbsp;&nbsp;&nbsp;padding: 10px;
-}
-
-&lt;!--Text style for the text list item title--&gt;
-.container .events &gt; ul &gt; li .title 
-{
-&nbsp;&nbsp;&nbsp;color: #51809e;
-&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #000;
-}
-
-&lt;!--Text style for the text list item location info--&gt;
-.container .events &gt; ul &gt; li .title .local 
-{
-&nbsp;&nbsp;&nbsp;text-indent: 10px;
-&nbsp;&nbsp;&nbsp;text-shadow: 0 0 0 #fff;
-}
-
-&lt;!--Styles for the text list item date box--&gt;
-.container .events &gt; ul &gt; li .date 
-{
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-.container .events &gt; ul &gt; li .date 
-{
-&nbsp;&nbsp;&nbsp;background-color: #ddd;
-&nbsp;&nbsp;&nbsp;border-radius: 10px;
-&nbsp;&nbsp;&nbsp;box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .5);
-}
-.container .events &gt; ul &gt; li .date &gt; span 
-{
-&nbsp;&nbsp;&nbsp;background-color: #fff;
-&nbsp;&nbsp;&nbsp;border-radius: 5px;
-}</pre>
-<p align="center"><img alt="Article areas with styles defined (in mobile applications only)" src="../../../images/flexible_default_structure.png"/></p></li>
-
-
-<li>Define a flexible alignment for the article areas to support screen orientation changes and ensure that the content fills up the entire available screen area regardless of the orientation:
-<ol type="a">
-<li>Define the text list items and the icon list as flex containers using the <span style="font-family: Courier New,Courier,monospace">display: -webkit-flex;</span> property:
-<ul>
-<li>For the text list items, align them vertically in the middle, define a 0 margin at the top for the first item, and center-align the text for the date box.</li>
-<li>For the icon list, align the icon list so that the first and last icon are placed at the ends and the gaps between the rest of the icons are equal.</li></ul>
-<p>(The following figure applies to mobile applications only.)</p>
-<pre class="prettyprint">&lt;!--Flexible alignment of text list--&gt;
-.container .events &gt; ul &gt; li 
-{
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
-}
-.container .events &gt; ul &gt; li: first-child 
-{
-&nbsp;&nbsp;&nbsp;margin-top: 0;
-}
-
-.container .events &gt; ul &gt; li .date 
-{
-&nbsp;&nbsp;&nbsp;-webkit-flex: 0 0 20%;
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-
-&lt;!--Flexible alignment of icon list--&gt;
-.container .schedule .img_list 
-{
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;
-}</pre>
-<p align="center"><img alt="Article areas with a flexible box layout defined (in mobile applications only)" src="../../../images/flexible_box_allignment.png"/></p></li>
-
-
-<li>Special consideration can be given for some screen sizes. The following example defines a specific layout for small screens (where the screen width is less than 390 pixels). (The following figure applies to mobile applications only.)
-<pre class="prettyprint">
-@media screen and (min-width: 390px) 
-{
-&nbsp;&nbsp;&nbsp;.container .schedule .img_list 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-flex-wrap: wrap;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-align-content: space-around;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}
-&nbsp;&nbsp;&nbsp;.container &gt; * {-webkit-align-content: center;}
-&nbsp;&nbsp;&nbsp;.container article {height: 250px;}
-}</pre>
-<p align="center"><img alt="Article areas with a flexible box layout for small screens (in mobile applications only)" src="../../../images/flexible_screen_size.png"/></p>
-<p>For more information on defining screen-size-specific rules, see <a href="../../../../../org.tizen.guides/html/web/w3c/dom/media_query_w.htm">Media Queries</a>.</p>
-</li></ol></li></ol>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_1.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_2.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">alert.png</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">folder.png</a></li>        
- </ul>
-                       
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm
deleted file mode 100644 (file)
index b846b38..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm
+++ /dev/null
@@ -1,220 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Fonts Module Level 3: Manipulating Fonts</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#font">Manipulating Fonts</a></li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/font_w.htm">CSS Fonts Module Level 3 Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">CSS Fonts Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">CSS Fonts Module Level 3 API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Fonts Module Level 3: Manipulating Fonts</h1>
-
-<p>This tutorial demonstrates how you can modify fonts.</p>
- 
-<h2>Warm-up</h2>
-<p>Become familiar with the CSS Fonts Module Level 3 API basics by learning about:</p>
-<ul>
-<li><a href="#font">Manipulating Fonts</a> 
-<p>Control the appearance of text using the CSS font properties.</p></li>
-</ul>  
-       
-                <h2 id="font" name="font">Manipulating Fonts</h2>
-                               
-            <p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>
-
-<ol>
-<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-style</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to apply different font styles:</p>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) em{font-style: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) em{font-style: italic}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) em{font-style: oblique}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;oblique&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-weight</span> property,
-which controls the weight of the text:</p>
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-weight: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-weight: bold}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-weight: 300}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-weight: 500}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-weight: 700}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;bold&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;300&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;500&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;700&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-variant</span> property to
-change the font to, for example, use small capital letters:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-variant: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-variant: small-caps}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;small-caps&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-size</span> property, which controls the size of the font:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-size: 150%}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-size: 1.2em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;150%&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;1.2em&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">line-height</span> property, which controls the height of a text line:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {line-height: 1}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {line-height: 1.5}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {line-height: 5}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1.5&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;5&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">font-family</span> property, which assigns a specific font or its representative to an element. The list order within the <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element determines the property priority.
-<p>If the assigned font is not installed on the target, a different font is obtained based on the user system.</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-family: serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: monospace}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: cursive}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-family: fantasy}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {font-family: &#39;Arial Black&#39;, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(7) {font-family: Tahoma, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(8) {font-family: Verdana, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(9) {font-family: Arial, sans-serif}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;monospace&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;cursive&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;fantasy&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;&#39;Arial Black&#39;, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Tahoma, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Verdana, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Arial, sans-serif&lt;/em&gt;&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</li>
-</ol>
-
-
-<p>The following figure shows examples of manipulating the text font properties.</p>
-<p class="figure">Figure: Font properties (in mobile applications only)</p>
-<p align="center"><img alt="Font properties (in mobile applications only)" src="../../../images/font_properties.png"/></p>
-
-   <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#property-index" target="_blank">Property index</a>.</td>
-    </tr>
-   </tbody>
-  </table>
-           
-       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm
deleted file mode 100644 (file)
index a327409..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm
+++ /dev/null
@@ -1,208 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>HTML5 Forms: Managing User Input</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#basic">Creating a Basic Login Form</a></li>
-                       <li><a href="#advanced">Creating an Advanced Login Form</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/html5forms_w.htm">HTML5 Forms Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">HTML5 Forms API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">HTML5 Forms API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>HTML5 Forms: Managing User Input</h1>
-
-
-<p>This tutorial demonstrates how you can implement Web forms with HTML5.</p>
-
-
-<h2>Warm-up</h2>
-<p>Become familiar with the HTML5 Forms API basics by learning about:</p>
-<ul>
-<li><a href="#basic">Creating a Basic Login Form</a>
-<p>Create a login form with mandatory fields, validity checks, and hint texts.</p></li>
-
-<li><a href="#advanced">Creating an Advanced Login Form</a>
-<p>Create a login form with autofocus, autocompletion, password security, and specific input value patterns.</p></li>
-</ul>
-    
-                               <h2 id="basic" name="basic">Creating a Basic Login Form</h2>
-                               
-                       <p>To create simple user input forms, you must learn to use the HTML5 features in Web forms:</p>  
-
-<ol>
-<li><p>Create a simple form where the user can enter their login details (email address and password):</p>
-<pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;email: &lt;input type=&quot;text&quot;&gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;password: &lt;input type=&quot;password&quot;&gt;&lt;/label&gt;
-    
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
-&lt;/form&gt;
-</pre></li>
-<li><p>To check the validity of the entered email address automatically, add the <span style="font-family: Courier New,Courier,monospace">required</span> attribute to the <span style="font-family: Courier New,Courier,monospace">input</span> element with the <span style="font-family: Courier New,Courier,monospace">email</span> type:</p>
-<pre class="prettyprint">
-&lt;label&gt;email: &lt;input type=&quot;email&quot; required&gt;&lt;/label&gt;
-</pre></li>
-<li><p>Define the password field as mandatory by using the <span style="font-family: Courier New,Courier,monospace">required</span> attribute in that <span style="font-family: Courier New,Courier,monospace">input</span> element too:</p>
-<pre class="prettyprint">
-&lt;label&gt;password: &lt;input type=&quot;password&quot; required&gt;&lt;/label&gt;
-</pre></li>
-<li><p>Because a device has limited space on the screen, remove the field labels and replace them with hint texts using the <span style="font-family: Courier New,Courier,monospace">placeholder</span> attribute:</p>
-<pre class="prettyprint">
-&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;
-&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required&gt;
-</pre></li></ol>
-
-<p>The final form that checks the email validity and requires the mandatory password input is complete:</p>
-<pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required&gt;
-&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
-    
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
-&lt;/form&gt;
-</pre>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">basicLogin.html</a></li>
- </ul>
-                       
-                               <h2 id="advanced" name="advanced">Creating an Advanced Login Form</h2>
-                               
-                       <p>To create advanced user input forms, you must learn to use the HTML5 features in Web forms:</p> 
- 
-<ol>
-<li><p><a href="#basic">Create a login form</a> that checks the email validity and requires the mandatory password input:</p>
-<pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required&gt;
-&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
-    
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
-&lt;/form&gt;
-</pre></li>
-
-<li><p>When the form page is loaded on the screen, put the focus automatically to the email field by using the <span style="font-family: Courier New,Courier,monospace">autofocus</span> attribute:</p>
-<pre class="prettyprint">
-&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required autofocus&gt;
-</pre></li>
-
-<li>
-<p>To spare the user from filling in information that they have given previously, use the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute, which shows the previously successfully inserted entries in a <span style="font-family: Courier New,Courier,monospace">datalist</span>, from which the user can select and use them.</p>
-<p>You can apply the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute to  a specific field by adding it to the appropriate <span style="font-family: Courier New,Courier,monospace">input</span> element. If you add it to the <span style="font-family: Courier New,Courier,monospace">form</span> element, it applies to all child elements within the form.</p>
-
-<pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot; autocomplete=&quot;on&quot;&gt;
-</pre>
-</li>
-<li><p>In general, apply the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute to the <span style="font-family: Courier New,Courier,monospace">form</span> element, and then separately set it to <span style="font-family: Courier New,Courier,monospace">off</span> for those fields that must not use it. </p>
-<p>In the following example, the password field must not use autocomplete, to prevent unauthorized access by any user.</p>
-<pre class="prettyprint">
-&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required autocomplete=&quot;off&quot;&gt;
-</pre>
-</li>
-<li><p>Protect the password with private and public key pair using the <span style="font-family: Courier New,Courier,monospace">keygen</span> element.</p>
-<p>The element is used to transform the data sent from the connected form to a pair of encrypted keys using the RSA (Rivest Shamir Adleman) method. When the input data is sent from the form, the private key is saved in the local computer, and the public key is delivered to the server. Only if the keys match, the login process proceeds forwards.</p> 
-
-<pre class="prettyprint">
-&lt;keygen name=&quot;keyvalue&quot;&gt;
-</pre></li>
-
-<li><p>Use the <span style="font-family: Courier New,Courier,monospace">pattern</span> attribute to perform a validity check that ensures that the password field value matches the given regular expression. The <span style="font-family: Courier New,Courier,monospace">required</span> attribute is used to ensure that the field value must be entered and then the validity check can be performed.</p>
-<p>In the following example, the password only accepts numbers and letters of the alphabet. If an invalid value is entered, the login cannot proceed.</p> 
-
-<pre class="prettyprint">&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;&gt;
-</pre></li>
-<li><p>Define the required length of the password within the <span style="font-family: Courier New,Courier,monospace">pattern</span> attribute. </p>
-<p>In the following example, the password must be 6 to 12 characters long.</p> 
-
-<pre class="prettyprint">
-&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;&gt;
-</pre></li>
-</ol>
-
-<p>The final form with autofocus and autocomplete features, strengthened security, and password value requirements is complete:</p>
-
-<pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot; autocomplete=&quot;on&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required autofocus&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;keygen name=&quot;keyvalue&quot;&gt;
-    
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
-&lt;/form&gt;
-</pre>
-                       
-
-
-       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm
deleted file mode 100644 (file)
index 357e457..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm
+++ /dev/null
@@ -1,171 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Media Queries: Labeling Output Devices in Style Sheets</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#create">Creating a Liquid Layout</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/media_query_w.htm">Media Queries Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediaquery">Media Queries API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#mediaquery">Media Queries API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Media Queries: Labeling Output Devices in Style Sheets</h1>
-
-  
-<p>This tutorial demonstrates how you can define media queries to determine the styles to be used in the Web document.</p>
- 
- 
- <h2>Warm-up</h2>
-<p>Become familiar with the Media Queries API basics by learning about:</p>
-<ul>
-<li><a href="#create">Creating a Liquid Layout</a> 
-<p>Create a liquid document layout that organically changes according to the device resolution.</p></li>
-</ul>   
-                       
-                               <h2 id="create" name="create">Creating a Liquid Layout</h2>
-                       <p>To enhance the user experience of your application, you must learn to define media queries to determine the styles to be used in the Web document. This example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show the optimized layout on both portrait and landscape modes.</p>
-
-
-<ol>
-<li>Define a page with title and content elements:
-<pre class="prettyprint">
-&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Media queries tutorial&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;&lt;img src=&quot;logo.png&quot; alt=&quot;Tizen&quot;&gt;&lt;/h1&gt;
-&lt;/header&gt;
-&lt;div class=&quot;container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;section class=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Section Title&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;desc&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The quick brown fox jumps over a lazy dog.  The quick brown...
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;aside&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aside
-&nbsp;&nbsp;&nbsp;&lt;/aside&gt;
-&lt;/div&gt;
-</pre></li>
-<li>Define basic styles for the page, using a flexible box (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">wearable</a> applications) and <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">multi-column</a> (in mobile applications only) layout with 2 columns. (The following figure applies to mobile applications only.)
-<pre class="prettyprint">
-.container 
-{
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-}
-.container aside 
-{
-&nbsp;&nbsp;&nbsp;-webkit-flex: 1 0 20%;
-}
-.contents 
-{
-&nbsp;&nbsp;&nbsp;-webkit-columns: 5em 3;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule: 1px solid #999;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 2em;
-&nbsp;&nbsp;&nbsp;-webkit-flex: 1 1 auto;
-}
-.contents h2 
-{
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
-}
-</pre>
-
-<p align="center"><img alt="Fixed layout example (in mobile applications only)" src="../../../images/media_queries1.png" /></p>
-<p>The page is easy to view as long as the screen width is about 600 px; however, in a smaller screen below 400 px, the legibility rapidly decreases. You can edit the layout by reducing the number of columns to 1 and moving the <strong>Aside</strong> area at the bottom of the screen, but those changes then decrease legibility on a wider screen.</p>
-
-</li>
-<li>
-<p>To solve the problem, use a media query to define a liquid layout that changes according to the screen resolution:</p>
-
-<pre class="prettyprint">
-@media all and (max-width: 480px) and (orientation: portrait) 
-{
-&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 1;}
-}
-@media all and (min-width: 480px) and (max-width: 768px) 
-{
-&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 2;}
-&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}
-}
-</pre>
-<p>With the above media query, the normal resolution has 2 columns (shown on the right in the figure), while in a smaller resolution in a portrait mode only 1 column is used (shown on the left). (The following figure applies to mobile applications only.)</p>
-<p align="center"><img alt="Liquid layout example (in mobile applications only)" src="../../../images/media_queries3.png" /></p> 
-
-</li>
-<li><p>If you need to define specific styles for a certain resolution range, simply add more media queries. However, too many conditions make the maintenance harder, so carefully consider what kind of resolution ranges you need.
-</p>
-
-<p>The following conditions are generally used and cover all possibilities up to a Web browser in a PC:</p>
-<pre class="prettyprint">
-&lt;!--Portrait mode of a smart phone--&gt;
-@media screen and (max-width: 480px) and (orientation: portrait) {&lt;!--Specific layout--&gt;}
-
-&lt;!--Landscape mode of a smart phone and a small tablet--&gt;
-@media screen and (min-width: 480px) and (max-width: 768px) {&lt;!--Specific layout--&gt;}
-
-&lt;!--Tablet and a small laptop--&gt;
-@media screen and (min-width: 768px) and (max-width: 1024px) {&lt;!--Specific layout--&gt;}
-
-&lt;!--PC browser--&gt;
-@media screen and (min-width: 1024px) {&lt;!--Specific layout--&gt;}
-@media print {&lt;!--Specific layout--&gt;}
-</pre></li>
-
-</ol>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">liquid_layout_2.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">logo.png</a></li>
- </ul>
-
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm
deleted file mode 100644 (file)
index f5da892..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm
+++ /dev/null
@@ -1,489 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Multi-column Layout Module: Creating Multi-column Layouts</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#basic">Creating a Basic Layout</a></li>
-                       <li><a href="#dynamic">Creating a Layout with Dynamic Content</a></li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/multi_w.htm">CSS Multi-column Layout Module Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">CSS Multi-column Layout Module API for Mobile Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Multi-column Layout Module: Creating Multi-column Layouts</h1>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p>This tutorial demonstrates how you can create a layout with multiple columns in your application.</p>
-
- 
-<h2>Warm-up</h2>
-<p>Become familiar with the CSS Multi-column Layout API basics by learning about:</p>
-<ul>
-<li><a href="#basic">Creating a Basic Layout</a> 
-<p>Build a basic graphic user interface (GUI) that uses the CSS column properties.</p></li>
-</ul>
-
-<h2>Follow-up</h2>
-<p>Once we have learned the basics of CSS Multi-column Layout API, we can now move on to more advanced tasks, including:</p>
-<ul>
-<li><a href="#dynamic">Creating a Layout with Dynamic Content</a> 
-<p>Build a GUI with a changing amount of data displayed in multiple columns.</p></li>
-</ul>  
-
-                               <h2 id="basic" name="basic">Creating a Basic Layout</h2>
-                       <p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a basic layout using CSS:</p>
-
-<ol>
-<li>
-<p>Create the HTML layout, defining separate sections for the column content and including an image file:</p>
-<pre class="prettyprint">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 1&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Lorem ipsum dolor (...), id.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/pinwheel_green.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Maecenas at (...)tortor.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 2&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Nullam bibendum (...) Curabitur.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_WhiteFold_4.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 3&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Sed sagittis, (...) Vivamus sed est sit amet.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;figure&quot; src=&quot;images/pinwheel_yellow.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Pellentesque habitant (...). Duis lobortis, nibh.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&lt;/body&gt;
-</pre></li>
-
-<li>Set the CSS column properties:
-<ol type="a">
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element acts as a multi-column container. Set the <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span>) property to enable the multi-column layout:</p>
-
-<pre class="prettyprint">
-article 
-{
-&nbsp;&nbsp;&nbsp;width: 80vw;
-&nbsp;&nbsp;&nbsp;column-width: 119px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 119px;
-
-&nbsp;&nbsp;&nbsp;margin: 2vh 5vw;
-&nbsp;&nbsp;&nbsp;padding: 2vh 5vw;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> property defines the default column width but the visible width is not always similar. An algorithm calculates the width according to available space. Normally, a column has a different display width from the one set in the property because as the columns are sized to fill all available space.</p>
-<p>For example, on a 480 x 800 display with portrait orientation, the device width is 123 px, whereas on a 720 x 1280 display with a landscape orientation, the width is 120 px. The space available for columns is the <span style="font-family: Courier New,Courier,monospace">width</span> attribute value reduced by <span style="font-family: Courier New,Courier,monospace">padding</span>, in this case 80vw - (2 * 5vw) = 70vw, which means 70/100 width of the device display.</p>
-</li>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property to set the distance between columns:</p>
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;column-gap: 10px;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 10px;
-</pre>
-</li>
-<li>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property to draw a vertical line between columns. Define the width, color, and style of the rule:</p>
-
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 1px;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: #677784;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;
-&nbsp;&nbsp;&nbsp;column-rule-width: 1px;
-&nbsp;&nbsp;&nbsp;column-rule-color: #677784;
-&nbsp;&nbsp;&nbsp;column-rule-style: solid;
-}</pre>
-
-<p>The rule width does not increase the distance between columns. It is drawn under the column gap and can be even wider than the gap.</p>
-
-</li></ol>
-
- <p>The figure below shows the layout with the <span style="font-family: Courier New,Courier,monospace">column-rule</span> <span style="font-family: Courier New,Courier,monospace">width</span> set to 40 px and the <span style="font-family: Courier New,Courier,monospace">column-gap</span> set to 10 px.</p>
-
-<p class="figure">Figure: Column settings</p> 
-<p align="center"><img alt="Column settings" src="../../../images/column_settings.png" /></p>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">footer</span> element with the display height set to 5/100 and padding set to 2 * 2vh:</p> 
-
-<pre class="prettyprint">
-footer 
-{
-&nbsp;&nbsp;&nbsp;padding: 2vh;
-&nbsp;&nbsp;&nbsp;height: 5vh;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
-}
-</pre>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">section</span> elements setting the <span style="font-family: Courier New,Courier,monospace">border-bottom</span> and vertical <span style="font-family: Courier New,Courier,monospace">padding</span> values. It is not necessary to define horizontal padding, as it has been defined for the <span style="font-family: Courier New,Courier,monospace">article</span> element.</p>
-
-<pre class="prettyprint">
-article&gt;section
-{
-&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;
-&nbsp;&nbsp;&nbsp;padding: 4px 0;
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-</pre>
-</li>
-<li>
-<p>Set image elements to have an automatic <span style="font-family: Courier New,Courier,monospace">margin</span> to center them within the column.</p>
-<p>In case of the image whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">figure</span>, set it to be a floating element with text drawn around it.</p>
-
-<pre class="prettyprint">
-img{
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;margin: 4px auto;
-}
-
-#figure
-{
-&nbsp;&nbsp;&nbsp;float: right;        
-&nbsp;&nbsp;&nbsp;margin: 4px;
-}
-</pre>
-</li></ol>
-
-<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
-
-<p class="figure">Figure: Basic layout on a 480 x 800 display</p> 
-<p align="center"><img alt="Basic layout on a 480 x 800 display" src="../../../images/basic_layout_480x800.png" /></p>
-
-<p class="figure">Figure: Basic layout on a 720 x 1280 display</p> 
-<p align="center"><img alt="Basic layout on a 720 x 1280 display" src="../../../images/basic_layout_720x1280.png" /></p>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up" target="_blank">renamed_index.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/css" target="_blank">style.css</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_green.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_yellow.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
- </ul>
-                       
-                               <h2 id="dynamic" name="dynamic">Creating a Layout with Dynamic Content</h2>
-                               
-                       <p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:</p>
-<ol>
-<li>
-<p>Create the HTML layout. The <span style="font-family: Courier New,Courier,monospace">article</span> element displays the columns, and the <span style="font-family: Courier New,Courier,monospace">nav</span> element contains buttons to add and remove content in the columns.</p>
-<pre class="prettyprint">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;nav&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;addSections&quot; href=&quot;#&quot;&gt;Add images&lt;/a&gt; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;howMany&quot; value=&quot;3&quot;&gt; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;removeGroup&quot; href=&quot;#&quot;&gt;Remove last Group&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/nav&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer&gt; Multicolumn Layout Tutorial 02&lt;/footer&gt;
-&lt;/body&gt;
-</pre>
-</li>
-<li>Set the CSS properties:
-<ol type="a">
-<li>
-<p>Define the CSS display and column properties:</p>
-<pre class="prettyprint">
-body 
-{
-&nbsp;&nbsp;&nbsp;display: flex;
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;flex-direction: column;
-&nbsp;&nbsp;&nbsp;-webkit-flex-direction: column;
-&nbsp;&nbsp;&nbsp;background: #fefffa;
-}
-</pre>
-</li>
-<li>
-<p>Set the <span style="font-family: Courier New,Courier,monospace">article</span>, <span style="font-family: Courier New,Courier,monospace">nav</span> and <span style="font-family: Courier New,Courier,monospace">footer</span> elements in one column using the flexible box layout.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">nav</span> element is also a flexible box layout container to set UI elements in.</p>
-<pre class="prettyprint">
-nav 
-{
-&nbsp;&nbsp;&nbsp;height: 20vh;
-&nbsp;&nbsp;&nbsp;padding-left: 20%;
-&nbsp;&nbsp;&nbsp;padding-top: 10px;
-&nbsp;&nbsp;&nbsp;display: flex;
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;flex-flow: row wrap;
-&nbsp;&nbsp;&nbsp;-webkit-flex-flow: row wrap;
-&nbsp;&nbsp;&nbsp;flex: none;
-&nbsp;&nbsp;&nbsp;-webkit-flex: none;
-&nbsp;&nbsp;&nbsp;justify-content: space-around;
-&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-around;
-&nbsp;&nbsp;&nbsp;align-items: center;
-&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
-&nbsp;&nbsp;&nbsp;background: url(../images/white_logo.png) no-repeat;
-&nbsp;&nbsp;&nbsp;background-position: 2%;
-&nbsp;&nbsp;&nbsp;background-size: auto 70%;
-}
-</pre>
-</li>
-<li>
-<p>Define the styles for the <span style="font-family: Courier New,Courier,monospace">a</span> elements within the <span style="font-family: Courier New,Courier,monospace">nav</span> element to make them appear as buttons:</p>
-<pre class="prettyprint">
-nav a 
-{
-&nbsp;&nbsp;&nbsp;margin: 3px;
-&nbsp;&nbsp;&nbsp;border-radius: 5px;
-&nbsp;&nbsp;&nbsp;padding: 5px 15px;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-}
-</pre>
-<p>When the user taps the <strong>Add images</strong> button, the images and their descriptions are displayed.</p>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">input</span> element (with the property type set to <span style="font-family: Courier New,Courier,monospace">number</span>) style with an increased height to match the buttons around it:</p>
-<pre class="prettyprint">
-nav input
-{
-&nbsp;&nbsp;&nbsp;width: 50px;
-&nbsp;&nbsp;&nbsp;height: 2em;
-}
-</pre>
-</li>
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element contains the column properties. Use the <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span> property to set the column width. The real width is calculated based on available space.</p>
-<pre class="prettyprint">
-article 
-{
-&nbsp;&nbsp;&nbsp;width: 90vw;
-&nbsp;&nbsp;&nbsp;column-width: 136px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 136px;
-&nbsp;&nbsp;&nbsp;margin: 1vh 2vh;
-&nbsp;&nbsp;&nbsp;padding: 1vh;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
-}
-</pre>
-</li>
-<li>
-<p>Set the images within the <span style="font-family: Courier New,Courier,monospace">article</span> element with a block display to separate them from text:</p>
-<pre class="prettyprint">
-article img 
-{
-&nbsp;&nbsp;&nbsp;margin: 0 auto;
-&nbsp;&nbsp;&nbsp;display: block;
-}
-</pre>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">column-span</span> property as <span style="font-family: Courier New,Courier,monospace">all</span> for the <span style="font-family: Courier New,Courier,monospace">h1</span> elements:</p>
-<pre class="prettyprint">
-article&gt;h1 
-{
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.5);
-&nbsp;&nbsp;&nbsp;padding: 4px;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;color: #eed484;
-&nbsp;&nbsp;&nbsp;column-span: all;
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
-}
-</pre>
-<p> As a result, the <span style="font-family: Courier New,Courier,monospace">h1</span> elements are spread across the columns. When the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is used, you cannot have more columns than can fit in the available horizontal space.</p>
-</li>
-<li>
-<p>Define the <span style="font-family: Courier New,Courier,monospace">break-inside</span> property as <span style="font-family: Courier New,Courier,monospace">avoid</span> to avoid breaking elements between columns:</p>
-<pre class="prettyprint">
-article&gt;section 
-{
-&nbsp;&nbsp;&nbsp;break-inside: avoid;
-&nbsp;&nbsp;&nbsp;-webkit-column-break-inside: avoid;
-&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;
-&nbsp;&nbsp;&nbsp;padding: 4px 0;
-&nbsp;&nbsp;&nbsp;text-align: center;
-}
-</pre>
-</li>
-<li>
-<p>Set the <span style="font-family: Courier New,Courier,monospace">footer</span> size:</p>
-<pre class="prettyprint">
-footer 
-{
-&nbsp;&nbsp;&nbsp;padding: 2vh;
-&nbsp;&nbsp;&nbsp;height: 5vh;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
-}
-</pre>
-</li>
-</ol>
-</li>
-<li>Add the JavaScript code to make the content dynamic:
-<ol type="a">
-<li>
-<p>Declare a variable for the images. Elements included in the variable amount to data displayed in a column layout, such as a newsfeed:</p>
-<pre class="prettyprint">
-var images = [&quot;images/pinwheel_green.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_WhiteFold_4.png&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/pinwheel_yellow.png&quot;];
-</pre>
-</li>
-<li>
-<p>Declare a variable for the input element for selecting the number of images added to the content:</p>
-<pre class="prettyprint">
-var howManyInput;
-</pre>
-</li>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method with the input parameter value to add random images to the column layout and initialize the button events:</p>
-
-<pre class="prettyprint">
-window.onload = function() 
-{
-&nbsp;&nbsp;&nbsp;addGroup(4);
-&nbsp;&nbsp;&nbsp;howManyInput = document.getElementById(&#39;howMany&#39;);
-&nbsp;&nbsp;&nbsp;var addBtn = document.getElementById(&#39;addSections&#39;);
-&nbsp;&nbsp;&nbsp;addBtn.onclick = function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addGroup(howManyInput.value);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;var removeBtn = document.getElementById(&#39;removeGroup&#39;);
-&nbsp;&nbsp;&nbsp;removeBtn.onclick = function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeGroup();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;};
-};
-</pre>
-</li>
-<li>
-<p>Declare the <span style="font-family: Courier New,Courier,monospace">h1No</span> variable containing the number of <span style="font-family: Courier New,Courier,monospace">h1</span> elements included in the <span style="font-family: Courier New,Courier,monospace">article</span> elements, and one added to next lines.</p>
-
-<p>Declare the <span style="font-family: Courier New,Courier,monospace">newHTML</span> variable to add new content to the column layout. Each added element contains an <span style="font-family: Courier New,Courier,monospace">h1</span> element as a header, and <span style="font-family: Courier New,Courier,monospace">section</span> elements. Include an <span style="font-family: Courier New,Courier,monospace">img</span> element with a text description in each <span style="font-family: Courier New,Courier,monospace">section</span> element to display a random image. The <span style="font-family: Courier New,Courier,monospace">art</span> variable is initialized, and new HTML code (<span style="font-family: Courier New,Courier,monospace">newHTML</span>) is concatenated with the existing one (<span style="font-family: Courier New,Courier,monospace">innerHTML</span>):</p>
-<pre class="prettyprint">
-function addGroup(howMany) 
-{
-&nbsp;&nbsp;&nbsp;var h1No = document.querySelectorAll(&#39;article&gt;h1&#39;).length + 1;
-&nbsp;&nbsp;&nbsp;var newHTML = &quot;&lt;h1&gt;Group &quot; + h1No + &quot;&lt;/h1&gt;&quot;;
-&nbsp;&nbsp;&nbsp;var i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; howMany; ++i) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&lt;section&gt;&lt;img alt=&#39;&#39; src=&#39;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += images[Math.floor(Math.random() * 4)];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&#39;&gt;Lorem ipsum dolor sit amet diam sodales rutrum.&lt;/section&gt;&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;var art = document.getElementById(&quot;article&quot;);
-&nbsp;&nbsp;&nbsp;art.innerHTML += newHTML;
-}
-</pre>
-</li>
-<li>
-<p>When the user taps the <strong>Remove last Group</strong> button, the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method is called to remove the group of images that was added last. Use the <span style="font-family: Courier New,Courier,monospace">all</span> variable to select all  <span style="font-family: Courier New,Courier,monospace">h1</span> elements in the content using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method. If the <span style="font-family: Courier New,Courier,monospace">last</span> value is less than 0, there is no element to remove. Use the <span style="font-family: Courier New,Courier,monospace">removeNextSibling()</span> method to recursively delete the next sibling element, and the  <span style="font-family: Courier New,Courier,monospace">removeChild()</span> method to remove the <span style="font-family: Courier New,Courier,monospace">h1</span> elements from its parent.</p>
-<pre class="prettyprint">
-function removeGroup() 
-{
-&nbsp;&nbsp;&nbsp;var all = document.querySelectorAll(&#39;article&gt;h1&#39;);
-&nbsp;&nbsp;&nbsp;var last = all.length - 1;
-&nbsp;&nbsp;&nbsp;if (last &lt; 0) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;removeNextSibling(all[last].nextSibling);
-&nbsp;&nbsp;&nbsp;all[last].parentElement.removeChild(all[last]);
-}
-</pre>
-</li>
-</ol>
-</li></ol>
-<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
-
-<p class="figure">Figure: Dynamic layout on a 480 x 800 display</p> 
-<p align="center"><img alt="Dynamic layout on a 480 x 800 display" src="../../../images/dynamic_layout_480x800.png" /></p>
-
-<p class="figure">Figure: Dynamic layout on a 720 x 1280 display</p> 
-<p align="center"><img alt="Dynamic layout on a 720 x 1280 display" src="../../../images/dynamic_layout_720x1280.png" /></p>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up" target="_blank">renamed_index.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/css" target="_blank">style.css</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/js" target="_blank">main.js</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">pinwheel_green.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">pinwheel_yellow.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">white_logo.png</a></li>
- </ul>
-                       
-                       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm
deleted file mode 100644 (file)
index e2fb817..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm
+++ /dev/null
@@ -1,221 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Selectors API Level 1 and Level 2: Selecting DOM Elements</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-       <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#single">Selecting a Single Node</a></li>
-                       <li><a href="#multi">Selecting Multiple Nodes</a></li>
-                       <li><a href="#create">Creating an Accordion Menu</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/selector_w.htm">Selectors API Level 1 and Level 2 Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors1">Selectors API Level 1 for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors2">Selectors API Level 2 for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors1">Selectors API Level 1 for Wearable Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors2">Selectors API Level 2 for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Selectors API Level 1 and Level 2: Selecting DOM Elements</h1>
-
- <p>This tutorial demonstrates how you can retrieve desired elements from a page and modify them.</p>
-
-  <h2 id="warm-up" name="warm-up">Warm-up</h2>
-  <p>Become familiar with the Selectors API Level 1 and Level 2 basics by learning about:</p>
-  <ul>
-  <li><a href="#single">Selecting a Single Node</a> <p>Select a single element using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method.</p></li>
-  <li><a href="#multi">Selecting Multiple Nodes</a> <p>Select multiple elements using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method.</p></li>
-  </ul>
-  <h2 id="follow-up" name="follow-up">Follow-up</h2>
-  <p>Once we have learned the basics of the Selectors API Level 1 and Level 2, we can now move on to more advanced tasks, including:</p>
-  <ul>
-  <li><a href="#create">Creating an Accordion Menu</a> <p>Create a simple accordion menu.</p></li>
-  </ul>
- 
- 
-                               <h2 id="single" name="single">Selecting a Single Node</h2>
-                       <p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select a single node:</p>
-  <ol>
-  <li>To select the first matching element found in the child nodes, use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method with <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS selectors</a>. You get the same result as when using the <span style="font-family: Courier New,Courier,monospace">getElementById()</span>, <span style="font-family: Courier New,Courier,monospace">getElementsByTagName()</span>, and <span style="font-family: Courier New,Courier,monospace">getElementsByClassName()</span> methods.
-  <pre class="prettyprint">var obj1 = document.getElementsByTagName(&#39;td&#39;)[0]; /* First &lt;td&gt; element in the document */
-var obj2 = document.getElementById(&#39;foo&#39;); /* Element with the ID #foo */
-var obj3 = document.getElementsByClassName(&#39;bar&#39;)[0]; /* First element in the bar class */
-  
-var obj4 = document.querySelector(&#39;td&#39;); /* Same as obj1 */
-var obj5 = document.querySelector(&#39;#foo&#39;); /* Same as obj2 */ 
-var obj6 = document.querySelector(&#39;.bar&#39;); /* Same as obj3 */</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <span style="font-family: Courier New,Courier,monospace">null</span>.</p></li>
-  <li>You can use the CSS selectors to ensure that elements with complex structures can be easily selected.
-  <p>For example, the following example selects the last element among the child nodes of the second <span style="font-family: Courier New,Courier,monospace">&lt;tr&gt;</span> element, which is a child of the <span style="font-family: Courier New,Courier,monospace">&lt;tbody&gt;</span> element in the second <span style="font-family: Courier New,Courier,monospace">&lt;table&gt;</span> element of the document.</p>
-  <pre class="prettyprint">var obj = document.querySelector(&#39;table:nth-child(2) tbody &gt; tr:nth-child(2) :last-child&#39;);</pre></li>
-  <li>You can use method chaining to select an element:
-  <pre class="prettyprint">var obj = document.querySelector(&#39;table:nth-child(2)&#39;);
-var targetObj = obj.querySelector(&#39;tbody &gt; tr:nth-child(2) :last-child&#39;)</pre></li>
-</ol>
-
-<p class="figure">Figure: Single node selection (in mobile applications only)</p> 
-<p align="center"><img alt="Single node selection (in mobile applications only)" src="../../../images/single_node_selection.png" /></p> 
-  <h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
- </ul>
-               
-                               <h2 id="multi" name="multi">Selecting Multiple Nodes</h2>
-                       <p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select multiple nodes in a node list:</p>
-  <ol>
-  <li>Select an element in the node list using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method:
-  <pre class="prettyprint">var obj = document.querySelector(&#39;table:nth-child(2)&#39;);</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <span style="font-family: Courier New,Courier,monospace">null</span>. The query above selects the second <span style="font-family: Courier New,Courier,monospace">&lt;table&gt;</span> element in the document as a single element.</p>
-</li>
-
-<li>Select multiple elements in the node list using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method, and define a variable to represent the length of the <span style="font-family: Courier New,Courier,monospace">targetObj</span> node list:
-<pre class="prettyprint">var targetObj = obj.querySelectorAll(&#39;thead th, tbody td&#39;);
-var i = targetObj.length;</pre>
-<p> The <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method returns an array containing all of the matching element nodes within the subtrees of the context node, in the document order, and saves the elements in a node list. If there are no matching nodes, the method returns an empty array. The query above selects the <span style="font-family: Courier New,Courier,monospace">&lt;th&gt;</span> elements in the table head and the <span style="font-family: Courier New,Courier,monospace">&lt;td&gt;</span> elements in the table body.</p>
- </li> 
-<li>Apply a defined style to all elements stored in the <span style="font-family: Courier New,Courier,monospace">targetObj</span> node list:
-<pre class="prettyprint">while (0 &lt; i) 
-{
-&nbsp;&nbsp;&nbsp;i--;
-&nbsp;&nbsp;&nbsp;targetObj[i].style.backgroundColor = &#39;orange&#39;;
-&nbsp;&nbsp;&nbsp;targetObj[i].textContent = &#39;Exam 3&#39; + i;
-}</pre></li></ol>
-
-  <p class="figure">Figure: Multiple node selection (in mobile applications only)</p> 
-  <p align="center"><img alt="Multiple node selection (in mobile applications only)" src="../../../images/multi_node_selection.png" /></p>
-   <h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
- </ul>
-               
-                               <h2 id="create" name="create">Creating an Accordion Menu</h2>
-                               
-                       <p>To enhance the user experience of your application, you must learn to retrieve element nodes from the DOM tree to create a simple accordion menu.</p>
-  <p>The accordion menu is created using the CSS3 Basic User Interface Module Level 3 API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">wearable</a> applications). When a title is touched, the relevant content is shown, and other content is hidden.</p>
-  <ol>
-  <li>Create the HTML layout: 
-  <pre class="prettyprint">&lt;ul class=&quot;accordion&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;title current&quot;&gt;Title 1&lt;p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;contents 1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class="title"&gt;Title 2&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;contents 2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other list elements--&gt;
-&lt;/ul&gt;</pre></li>
-
-<li>Use <a href="../../../../../org.tizen.guides/html/web/w3c/dom/transition_w.htm">CSS transitions</a> to add sliding effects when content appears:
-<pre class="prettyprint lang-html">.accordion  &gt; li  &gt; div 
-{
-&nbsp;&nbsp;&nbsp;padding: 0 15px;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Assign time for CSS transformation--&gt;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all .5s;
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;height: 0;
-&nbsp;&nbsp;&nbsp;box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .5);
-&nbsp;&nbsp;&nbsp;line-height: 2;
-}
-&lt;!--Assign styles to be applied in case the current class is added to p.title--&gt;
-.accordion  &gt; li  &gt; p.current 
-{
-&nbsp;&nbsp;&nbsp;background: -webkit-linear-gradient(top, #666, #000);
-&nbsp;&nbsp;&nbsp;color: #fff;
-}
-.accordion &gt; li &gt; p.current + div 
-{
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;height: 200px;
-}</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> and <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> methods to change the class of the subject in the elements where the event is fired:
-<pre class="prettyprint">var testAccordion = function(obj) 
-{
-&nbsp;&nbsp;&nbsp;var targetObj = document.querySelector(obj);
-&nbsp;&nbsp;&nbsp;var targetLength = document.querySelectorAll(obj + &#39;li&#39;).length;
-
-&nbsp;&nbsp;&nbsp;/* In case the elements are not selected */
-&nbsp;&nbsp;&nbsp;if (targetLength &lt;= 0) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;targetObj.onclick = function(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var that = e.target;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* In case the e.target class is not title */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((that.className !== &#39;title&#39;)) return false;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; targetLength; i++) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Change all classes of the &#39;li p&#39; elements at the bottom of .accordion to title */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;targetObj.querySelectorAll(&#39;li p&#39;)[i].className = &#39;title&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Define the e.target class as current */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;that.className += &#39;current&#39;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-</li>
-<li>Define the elements that use the accordion menu:
-<pre class="prettyprint">testAccordion(&#39;.accordion&#39;);</pre></li></ol>
-
- <p class="figure">Figure: Accordion menu (in mobile applications only)</p> 
- <p align="center"><img alt="Accordion menu (in mobile applications only)" src="../../../images/accordion_menu.png" /></p>
-   <h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">selector_sample.html</a></li>
- </ul>
-                       
-
-            
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm
deleted file mode 100644 (file)
index e9d7803..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm
+++ /dev/null
@@ -1,205 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-    <title>HTML5 session history of browsing contexts: Managing Browsing Contexts</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#Managing_Session_History">Managing Session History Entries</a></li>
-                       <li><a href="#Detecting_Session_History">Detecting Session History Changes</a></li>
-               </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/session_history_w.htm">HTML5 session history of browsing contexts Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#history">HTML5 session history of browsing contexts API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#history">HTML5 session history of browsing contexts API for Wearable Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>HTML5 session history of browsing contexts: Managing Browsing Contexts</h1>
-     <p>This tutorial demonstrates how you can store and use session history details.</p>
-   
-
-    <h2 id="warmup" name="warmup">Warm-up</h2>
-    <p>Become familiar with the HTML5 session history of browsing contexts API basics by learning about:</p>
-    <ul>
-        <li><a href="#Managing_Session_History">Managing Session History Entries</a>
-        <p>Add a new entry to the session history and update its details.</p></li>
-        <li><a href="#Detecting_Session_History">Detecting Session History Changes</a>
-        <p>Register a change event handler and use the event to take advantage of the stored history information.</p></li>
-    </ul>
-         
- 
- <h2 id="Managing_Session_History" name="Managing_Session_History">Managing Session History Entries</h2>
-                       
-<p>Learning how to manage the session history enhances the user browsing experience in your application:</p> 
-
-<ol>
-<li>To add an entry to the session history, use the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface:
-<pre class="prettyprint">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;history.pushState({index: currentIndex}, document.title);
-&lt;/script&gt;
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">The <span style="font-family: Courier New,Courier,monospace">pushState()</span> method accepts the <span style="font-family: Courier New,Courier,monospace">data</span>, <span style="font-family: Courier New,Courier,monospace">title</span>, and <span style="font-family: Courier New,Courier,monospace">url</span> (optional) parameters. The <span style="font-family: Courier New,Courier,monospace">title</span> parameter refers to the key value used to search for entries saved in the session history, and is currently ignored in all browsers.</td> 
-      </tr> 
-     </tbody> 
-    </table>
-</li>
-
-<li>To update the entry details, use the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method:
-<pre class="prettyprint">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;history.replaceState({index: currentIndex}, document.title, &#39;#page&#39; + currentIndex);
-&lt;/script&gt;
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method uses the same parameters as the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method. The <span style="font-family: Courier New,Courier,monospace">history_sample.html</span> is the <span style="font-family: Courier New,Courier,monospace">url</span> parameter, which refers to the address of the page that is to be changed.</p>
-</li>
-
-<li>To use the session history information:
-<ol type="a">
-<li>Implement a page with the <strong>Prev</strong> and <strong>Next</strong> buttons:
-<pre class="prettyprint">
-&lt;nav class=&quot;paging&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;Prev&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;Next&lt;/a&gt;
-&lt;/nav&gt;
-&lt;p&gt;Current Index: &lt;output&gt; &lt;/output&gt;&lt;/p&gt;
-
-&lt;a href=&quot;http://tizen.org/&quot;&gt;Tizen.org&lt;/a&gt;
-</pre>
-</li>
-<li>When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object of the <span style="font-family: Courier New,Courier,monospace">history</span> interface:
-<pre class="prettyprint">
-var currentIndex = 0;
-var prev = document.querySelector(&#39;.paging &gt; a:nth-child(1)&#39;);
-var next = document.querySelector(&#39;.paging &gt; a:nth-child(2)&#39;);
-
-/* Prev button click event */ 
-prev.onclick = function() 
-{
-&nbsp;&nbsp;&nbsp;currentIndex -= 1;   
-&nbsp;&nbsp;&nbsp;setState(currentIndex);
-    
-&nbsp;&nbsp;&nbsp;return false;
-};
-    
-/* Next button click event */ 
-next.onclick = function() 
-{
-&nbsp;&nbsp;&nbsp;currentIndex += 1;  
-&nbsp;&nbsp;&nbsp;setState(currentIndex);
-    
-&nbsp;&nbsp;&nbsp;return false;
-};
-</pre>
-</li>
-
-<li>If the <span style="font-family: Courier New,Courier,monospace">state</span> object has data in it, use the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method to change the previously stored information. Otherwise, add new info with the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method.
-<pre class="prettyprint">
-function setState(currentIndex) 
-{
-&nbsp;&nbsp;&nbsp;if (history.state) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;history.replaceState({index: currentIndex}, document.title, &#39;#page&#39; + currentIndex);
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;history.pushState({index: currentIndex}, document.title);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;output.textContent = currentIndex;
-}
-</pre>
-</li>
-</ol>
-</li>
-</ol>
- <h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_the_session_history_of_browsing_contexts" target="_blank">history_state.html</a></li>
- </ul>
-
-<h2 id="Detecting_Session_History" name="Detecting_Session_History">Detecting Session History Changes</h2>
- 
-<p>Learning how to track session history changes enhances the user browsing experience in your application: </p> 
- 
-<ol><li>A page with data stored in the session history fires a <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event when the page is loaded (for example, because it is refreshed or moved to from the previous page).
-<p>Register the event listener:</p>
-
-<pre class="prettyprint">
-window.addEventListener(&quot;popstate&quot;, foo, false);
-</pre></li>
-
-<li>Define the event handler for the event. You can use the data stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to retrieve the correct location on the page to be loaded.
-<pre class="prettyprint">
-var output = document.querySelector(&#39;output&#39;);
-
-window.onpopstate = function() 
-{
-&nbsp;&nbsp;&nbsp;currentIndex = history.state.index;
-&nbsp;&nbsp;&nbsp;output.textContent = currentIndex;
-}
-</pre>
-<p>In the snippet above, when a <span style="font-family: Courier New,Courier,monospace">popstate</span> event is fired, it saves the index value stored in the <span style="font-family: Courier New,Courier,monospace">state</span> object to the <span style="font-family: Courier New,Courier,monospace">currentIndex</span> variable, and outputs the <span style="font-family: Courier New,Courier,monospace">&lt;output&gt;</span> element from the correct index location.
-</p>
-
-</li></ol>
- <h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_the_session_history_of_browsing_contexts" target="_blank">history_state.html</a></li>
- </ul> 
-               
-
-                
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
- </body>
-</html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm
deleted file mode 100644 (file)
index 4192c0f..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm
+++ /dev/null
@@ -1,253 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Text Module Level 3: Manipulating Text</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#text">Manipulating Text</a>
-            </li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/text_module_w.htm">CSS Text Module Level 3 Guide</a></li>
-       
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">CSS Text Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">CSS Text Module Level 3 API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Text Module Level 3: Manipulating Text</h1>
-
-<p>This tutorial demonstrates how you can manipulate and transform text.</p>
- 
-<h2>Warm-up</h2>
-<p>Become familiar with the CSS Text Module Level 3 API basics by learning about:</p>
-<ul>
-<li><a href="#text">Manipulating Text</a> 
-<p>Control the appearance of text using the CSS text properties.</p></li>
-</ul>  
-
-                <h2 id="text" name="text">Manipulating Text</h2>
-                               
-                <p>To enhance the user experience of your application, you must learn to handle line breaking, justification, alignment, white space handling, and text transformations using CSS text properties:</p>
-
-<ol>
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-transform</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to control the text capitalization:
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-transform: none;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-transform: capitalize;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-transform: uppercase;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-transform: lowercase;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-transform: full-width;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-align</span> property, which controls the text alignment:
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-align: start;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-align: end;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-align: left;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-align: right;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-align: center;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {text-align: justify;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-indent</span> property, which controls the text indentation:
-
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-indent: 0}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-indent: 1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-indent: -1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-indent: 5%}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-indent: -5%}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">letter-spacing</span> property, which controls the letter spacing:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {letter-spacing: .5em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {letter-spacing: -.1em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-spacing</span> property, which controls the space between words:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-spacing: 1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-spacing: -.1em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-break</span> property, which determines the line breaking rules for non-CJK (Chinese, Japanese, and Korean) scripts:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-break: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-break: keep-all}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {word-break: break-all}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">white-space</span> property, which determines the handling of empty space within an element:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {white-space: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {white-space: pre}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {white-space: nowrap}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {white-space: pre-wrap}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {white-space: pre-line}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">text-shadow</span> property, which adds a shadow effect to text:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, .7)}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-shadow: -0.2em 0.2em 0.2em #000, 0.2em -0.2em 0.2em #f00}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {color: #fff; text-shadow: 0 0 .7em #000;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {color: #fff; text-shadow: 0 0 1px #f00;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-</pre>
-
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">word-wrap</span> and  <span style="font-family: Courier New,Courier,monospace">overflow-wrap</span> properties, which control forced line breaks when the length of a word is longer than the area where it is displayed:
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-wrap: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-wrap: break-word}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {overflow-wrap: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {overflow-wrap: break-word}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&lt;/body&gt;
-</pre>
-
-</li>
-
-</ol>
-
-
-<p>The following figure shows examples of manipulating the text properties.</p>
-<p class="figure">Figure: Text properties (in mobile applications only)</p>
-<p align="center"><img alt="Text properties (in mobile applications only)" src="../../../images/text_properties.png"/></p>
-
-  <table class="note">
-   <tbody>
-    <tr>
-     <th class="note">Note</th>
-    </tr>
-    <tr>
-     <td class="note">For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/#appendix-h-full-property-index" target="_blank">Property index</a>.</td>
-    </tr>
-   </tbody>
-  </table>
-          
-       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm
deleted file mode 100644 (file)
index 204f3d4..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm
+++ /dev/null
@@ -1,588 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Transforms: Manipulating Elements</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#animation">Creating an Animation with Transforms</a></li>
-                       <li><a href="#effect">Creating Fade Animation Effect</a></li>
-                       <li><a href="#hw">Using Hardware Acceleration</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/transform_w.htm">CSS Transforms Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transforms">CSS Transforms API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Transforms: Manipulating Elements</h1> 
-
-<p>This tutorial demonstrates how you can use transforms with animations. </p>
-   
-
-<h2>Warm-up</h2>
-<p>Become familiar with the CSS Transforms API basics by learning about:</p>
-<ul>
-<li><a href="#animation">Creating an Animation with Transforms</a> 
-<p>Create a logo animation where the animation parts rotate and are translated in the 3D space.</p></li>
-</ul>  
-
-<h2>Follow-up</h2>
-<p>Once we have learned the basics of CSS Transforms API, we can now move on to more advanced tasks, including:</p>
-<ul>
-<li><a href="#effect">Creating Fade Animation Effects</a> 
-<p>Create a fade animation effect using JavaScript and CSS3.</p>
-</li>
-<li><a href="#hw">Using Hardware Acceleration</a> 
-<p>Use hardware acceleration to enhance performance.</p></li>
-</ul>  
-
-                               <h2 id="animation" name="animation">Creating an Animation with Transforms</h2>
-                       <p>To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_tutorial_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <span style="font-family: Courier New,Courier,monospace">transform</span> property. In the modified animation:</p>
-
-<ul>
-<li>As in the original animation, no elements are initially shown on the screen.</li>
-<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the logo is made to rotate.</li> 
-<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
-</ul>
-
-<p class="figure">Figure: Tizen logo to be transformed</p> 
-<p align="center"><img alt="Tizen logo to be transformed" src="../../../images/css_transforms1.png" /></p>
-
-
-<ol>
-<li>Create the HTML layout to control the movement of each individual animation element:
-<pre class="prettyprint">
-&lt;div class=&quot;animation-holder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-</li>
-<li>Define the basic style of the animation elements. Add the <span style="font-family: Courier New,Courier,monospace">perspective</span> property to increase the Z axis effect of the 3D transform.
-<pre class="prettyprint">
-.animation-holder 
-{
-&nbsp;&nbsp;&nbsp;-webkit-perspective: 1000px;
-&nbsp;&nbsp;&nbsp;height: 88px;
-&nbsp;&nbsp;&nbsp;left: 50%;
-&nbsp;&nbsp;&nbsp;margin: -54px 0px 0px -140px;
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;width: 280px;
-}
-.tizen-txt,
-.tizen-logo 
-{
-&nbsp;&nbsp;&nbsp;background-position: 50% 50%;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;position: absolute;
-}
-.tizen-txt.t 
-{
-&nbsp;&nbsp;&nbsp;background-image: url(&quot;images/txt_t.png&quot;);
-&nbsp;&nbsp;&nbsp;height: 56px;
-&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;top: 31px;
-&nbsp;&nbsp;&nbsp;width: 48px;
-}
-</pre>
-</li>
-<li>Create the animation:
-<ol type="a">
-<li>
-<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: rotate()</span> function, which defines the angle of the rotation.  
-</p>
-<pre class="prettyprint">
-@-webkit-keyframes tizen-logo 
-{
-&nbsp;&nbsp;&nbsp;0% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-in;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(0deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;30% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-out;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(720deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;50% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;100% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">For a rotation, the image has to be carefully created to ensure the correct end result. The rotation occurs with the center of the element as the center. If the rotation center must be moved because the image center is not aligned, use the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property to adjust the rotation location.</td> 
-      </tr> 
-     </tbody> 
-    </table></li>
-<li>Create the keyframes for the first letter in the word &quot;TIZEN&quot;. In the animation, due to the <span style="font-family: Courier New,Courier,monospace">translate3d()</span> and <span style="font-family: Courier New,Courier,monospace">rotateY()</span> methods, each letter transforms slightly from the right to the left as it comes in.
-
-<p align="center"><img alt="Animation" src="../../../images/css_transforms2.png" /></p>
-
-<pre class="prettyprint">
-@-webkit-keyframes tizen-txt-t 
-{
-&nbsp;&nbsp;&nbsp;0% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;30% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;35% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;100% {}
-}
-</pre></li>
-<li>To emphasize the fact that the letters are being created on the right, change the location of the transform. If the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property is declared for the entire animation element, the logo rotation changes. Consequently, you must only declared it for the letters.
-<pre class="prettyprint">
-.tizen-txt 
-{
-&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 100% 50%;
-}
-</pre></li>
-
-<li><p>Create the keyframes for the other letters similarly:</p>
-<pre class="prettyprint">
-@-webkit-keyframes tizen-txt-i 
-{
-&nbsp;&nbsp;&nbsp;0% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;32% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;37% 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translateX(0) rotateY(0deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp; 100% {}
-}
-</pre></li></ol>
-
-</li>
-</ol>
-
-<p>The following figure shows the full Tizen logo animation with the <span style="font-family: Courier New,Courier,monospace">transform</span> properties.</p>
-<p class="figure">Figure: Full Tizen logo animation</p> 
-<p align="center"><img alt="Full Tizen logo animation" src="../../../images/css_transforms5.png" /></p>
-
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">transform_practical.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_e.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_i.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_n.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_t.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_tm.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_z.png</a></li>
- </ul>
-                       
-                               <h2 id="effect" name="effect">Creating Fade Animation Effects</h2>
-                               
-                               
-                       <p>To enhance the user experience of your application, you must learn to use fade animation effects.</p>
-<p>The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:</p>
-<ul>
-<li>If an event is fired, it gradually becomes visible. This is known as the Fade In effect.</li>
-<li>The existing background is covered with a translucent layer to make the user focus on the pop-up.</li> 
-<li>When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.</li>
-</ul>
-
-<p class="figure">Figure: Fade effect</p> 
-<p align="center"><img alt="Fade effect" src="../../../images/fade_affect_animation.png" /></p>
-
-<p>You can control UI events and change the DOM elements in the following ways:</p>
-<ul>
-<li>Events can be controlled with JavaScript, and DOM elements can be devised with CSS.</li>
-<li>You can use JavaScript frameworks, such as jQuery, Prototype, and Dojo.</li> 
-</ul>
-
-<p>To create fade effects:</p>
-
-<ul>
-<li>Create a modal layer pop-up using jQuery:
-
-<pre class="prettyprint">
-(function($) 
-{
-&nbsp;&nbsp;&nbsp;function showModalPopup(url) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).append(&#39;&lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;&#39;); /* Mask in body appended */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).css({&#39;height&#39;: $(window).height()}); /* Mask area set */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Target layer position set */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).css(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;top&#39;: ($(window).height()/2 + $(document).scrollTop() - $(url).height()/2) + &#39;px&#39;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;left&#39;: ($(window).width()/2 + $(document).scrollLeft() - $(url).width()/2) + &#39;px&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Fade effect */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeTo(&#39;slow&#39;, 0.7);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).fadeTo(&#39;slow&#39;, 1);
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;$(&#39;.layerpopupActive a&#39;).on(&#39;click&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var targetUrl = $(this).attr(&#39;href&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showModalPopup(targetUrl);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;});
-  
-&nbsp;&nbsp;&nbsp;/* End processing - Fade Out effect */
-    
-&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).on(&#39;click&#39;, function(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.target.className === &#39;mask&#39;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.layerpop&#39;).fadeOut();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeOut(400, function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).remove();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;});
-})(jQuery);</pre>
-
-<p>If the animation effect is created by using JavaScript, the browser executes the following tasks:</p>
-<ol>
-       <li>A structure layer is created and added to the document. This is a CPU task.</li>
-       <li>The added layer is painted as a default value. This is a GPU task.</li>
-       <li>The layer is painted once again according to the change of value. This is a CPU operation.</li>
-</ol>
-
-<p>Steps a and c incur CPU tasks, which affect performance the most.</p>  
-<p>In case of step a, only 2 layers are created, but as the number of layers created increases, the efficiency of page rendering work drops. In case of step c as well, the more steps it undergoes, the slower the rendering becomes.</p>  
-<p>In certain browsers, even if the style of just 1 layer is changed, the entire document is repainted. As the repainting takes only a moment, any animation effects that are supposed to happen cannot be executed in such a short time. This issue occurs frequently in Android&trade; with severe fragmentation.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If a new layer is created in Android 4.0X version, and if the fade effect is used, it only shows the initial value and the result value of the layer style.</td> 
-      </tr> 
-     </tbody> 
-</table>
-
-<p>To avoid such a situation to the maximum possible extent, CPU tasks must be reduced to the minimum, and it is better to use transition or animation that uses the internal timer of the browser.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">In case of using 3D effects, <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translateZ(0);</span> can be used to accelerate the hardware. However, since hardware acceleration support varies between the OS and devices, the actual resulting effects can vary too. Moreover, in the case of version Android&trade; 2.1, iOS&trade;3.X and below, note that transition and animation may not be realized.</td> 
-      </tr> 
-     </tbody> 
-</table>
-</li>
-<li>Create a modal layer pop-up using CSS3:
-<pre class="prettyprint">
-&lt;!--CSS--&gt;
-.mask 
-{
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;z-index: -1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 400ms ease-in-out;
-}
-
-.mask.active 
-{
-&nbsp;&nbsp;&nbsp;opacity: .7;
-&nbsp;&nbsp;&nbsp;z-index: 498;
-}
-
-&lt;!--Layer pop-up public styles--&gt;
-.layerpop 
-{
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;z-index: -1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 300ms ease-in-out;
-}
-
-.layerpop.active 
-{
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;z-index: 499;
-}
-/* JavaScript */
-function showModalPopup(url) 
-{
-&nbsp;&nbsp;&nbsp;url.className += &#39;active&#39;;
-}</pre>
-</li>
-</ul>
-<h3>Performance Differences</h3>
-
-<p>There can be a difference in performance depending on how the modal layer pop-up is used.</p>
-<p>The following figures illustrate the difference in event performance, when using JavaScript and CSS3.</p>
-<p class="figure">Figure: Event performance using JavaScript</p> 
-<p align="center"><img alt="Events using JavaScript" src="../../../images/events_using_javascript.png" /></p>
-
-<p class="figure">Figure: Event performance using CSS3</p> 
-<p align="center"><img alt="Events using CSS3" src="../../../images/events_using_css3.png" /></p>
-
-<p>The following figures illustrate the difference in memory performance, when using JavaScript and CSS3.</p>
-<p class="figure">Figure: Memory performance using JavaScript</p> 
-<p align="center"><img alt="Memory when using JavaScript" src="../../../images/memory_using_javascript.png" /></p>
-
-<p class="figure">Figure: Memory performance using CSS3</p> 
-<p align="center"><img alt="Memory when using CSS3" src="../../../images/memory_using_css3.png" /></p>
-
-<p>When the styles are applied using JavaScript, the UI thread is used to create the pop-up. The UI thread increases the usage of CPU memory in proportion to the number of pop-ups used.</p>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Tizen provides remote debugging through the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">JavaScript Debugger tool</a>.</td> 
-      </tr> 
-     </tbody> 
-</table>
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note"><p>If CSS is used, the handling of JavaScript events and UI DOM operations becomes unnecessary, so the load of the UI thread decreases, and the usage of CPU memory decreases as well. However, CSS3 transitions cannot be applied to versions below Android&trade; 2.3 and for versions above iOS&trade; 4.3, which are still widely used, so attention is needed when distributing it to various devices.</p></td> 
-      </tr> 
-     </tbody> 
-</table>  
-                       
-                               <h2 id="hw" name="hw">Using Hardware Acceleration</h2>
-                               
-                       <p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
- <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
- 
- <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
- <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
-<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
- <p class="figure">Figure: Blue box</p> 
- <p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p> 
-
- <ul>
- <li>Use CPU painting:
- <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
- <ol>
-       <li>Construct the blue box and set its position on the screen:
-       <pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;</pre>
-</li>
-<li>
-<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>
-               <pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process ()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre></li></ol></li>
-       <li>Use CSS transition:
-       <p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
-               <pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate(200px, 200px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-</li>
-               <li>Use 3D transform:
-               <p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
-               <pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate3d(200px, 200px, 0px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-</li>
-       </ul>
- <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
- <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
- <pre class="prettyprint">#scroll_area 
-{
-&nbsp;&nbsp;&nbsp;overflow: scroll;
-&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
-}</pre>  
-                       
-                       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm
deleted file mode 100644 (file)
index 79ae46c..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm
+++ /dev/null
@@ -1,320 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>CSS Transitions Module Level 3: Changing Element Styles</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#modify">Modifying Element Properties</a></li>
-                       <li><a href="#hw">Using Hardware Acceleration</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/transition_w.htm">CSS Transitions Module Level 3 Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transitions">CSS Transitions Module Level 3 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transitions">CSS Transitions Module Level 3 API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>CSS Transitions Module Level 3: Changing Element Styles</h1>
-
-<p>This tutorial demonstrates how you can use transitions to change element property values naturally.</p>   
-
-<h2>Warm-up</h2>
-<p>Become familiar with the CSS Transitions Module Level 3 API basics by learning about:</p>
-<ul>
-<li><a href="#modify">Modifying Element Properties</a> 
-<p>Modify element properties by adding a background color and transition effects, and changing the font color and size.</p></li>
-</ul> 
-<h2>Follow-up</h2>
-<p>Once we have learned the basics of CSS Transitions Module Level 3 API, we can now move on to more advanced tasks, including:</p>
-<ul>
-<li><a href="#hw">Using Hardware Acceleration</a> 
-<p>Use hardware acceleration to enhance performance.</p>
-</li>
-</ul>  
-
-<h2 id="modify" name="modify">Modifying Element Properties</h2>
-                               
-<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <span style="font-family: Courier New,Courier,monospace">http://tizen.org</span> Web site, where the current &quot;UPCOMING EVENTS&quot; area only has the <span style="font-family: Courier New,Courier,monospace">text-decoration: underline</span> property in a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <span style="font-family: Courier New,Courier,monospace">transitions</span> properties in this area.</p>
-
-
-<p class="figure">Figure: Tizen site section to be transitioned</p> 
-<p align="center"><img alt="Tizen site section to be transitioned" src="../../../images/transitions1.png" /></p>
-
-  
-<ol><li><p>Add a background color change to the &quot;UPCOMING EVENTS&quot; area during a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state:</p>
-
-<ol type="a"><li><p>Originally, the area on the site is defined as follows:</p>
-
-<pre class="prettyprint">
-&lt;h2 class=&quot;block-title&quot;&gt;Upcoming Events&lt;/h2&gt;
-</pre>
-
-
-<p>Additionally, a <span style="font-family: Courier New,Courier,monospace">transition</span> property is declared in the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:</p>
-
-<pre class="prettyprint">
-.block-title 
-{
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 2s ease;
-}
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">all</span> value in the transition property means that the transition effect applies to all CSS properties of the element.</p>
-</li>
-
-<li>Define the <span style="font-family: Courier New,Courier,monospace">mouseover</span> state for the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:
-
-<pre class="prettyprint">
-.block-title: hover {background: #eaeaea;}
-</pre>
-
-<p>Due to the CSS characteristics, adding a class through an event allows immediate rendering in the screen.</p></li></ol>
-
-<p>When the mouse is moved over the &quot;UPCOMING EVENTS&quot; area, the background color changes.</p>
-
-<p align="center"><img alt="Background color change" src="../../../images/transitions2.png" /></p> </li>
-
-<li>
-
-<p>Apply the transition effect in other elements:</p>
-
-<ol type="a"><li>To avoid unnecessary repetition, tie a list of <span style="font-family: Courier New,Courier,monospace">transition</span> elements together into groups <span style="font-family: Courier New,Courier,monospace">a</span> and <span style="font-family: Courier New,Courier,monospace">span</span>:
-
-<pre class="prettyprint">
-.location, .date, .location .anibg, h3 &gt; a, .day &gt; span 
-{
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
-}
-</pre></li>
-
-<li><p>When the mouse hovers over the date element, change the background of the date and the font size of all the elements tied into the <span style="font-family: Courier New,Courier,monospace">span</span> group. When the mouse hovers over the title element, change the color of all elements tied into the <span style="font-family: Courier New,Courier,monospace">a</span> group.</p>
-<pre class="prettyprint">
-.date: hover {background: #d2ecff !important;}
-.date: hover .day &gt; span {font-size: 1.9em;}
-
-.event-info: hover h3 &gt; a {color: #ec4986;}
-</pre></li></ol>
-
-<p align="center"><img alt="Before mouseover" src="../../../images/transitions3.png" />
-</p> </li>
-<li>
-
-<p>Emphasize the location phrase by adding an empty element. The emphasis is made by filling the background with black from left to right, and changing the font color to an appropriate value for the black background.</p>
-<ol type="a">
-<li><p>Add the empty element:</p>
-
-<pre class="prettyprint">
-&lt;div class=&quot;location&quot;&gt;San Francisco, CA&lt;span class=&quot;anibg&quot;&gt;&lt;/span&gt;&lt;/div&gt;
-</pre></li>
-<li><p>Create the effect using the width value of the added element:</p>
-<pre class="prettyprint">
-.location {position: relative; z-index: 3; margin-top: 3px;}
-.location .anibg 
-{
-&nbsp;&nbsp;&nbsp;position: absolute; 
-&nbsp;&nbsp;&nbsp;left: -3px; top: 0; 
-&nbsp;&nbsp;&nbsp;display: block; 
-&nbsp;&nbsp;&nbsp;width: 0; height: 100%; 
-&nbsp;&nbsp;&nbsp;background: #000; 
-&nbsp;&nbsp;&nbsp;z-index: -1;
-}
-</pre>
-
-<p>The effect is defined by using the <span style="font-family: Courier New,Courier,monospace">position</span> property. The location element position is declared <span style="font-family: Courier New,Courier,monospace">relative</span>, while the <span style="font-family: Courier New,Courier,monospace">anibg</span> child element position is declared as <span style="font-family: Courier New,Courier,monospace">absolute</span>. The width of the child element basic state is set as 0. Since the child element layer covers the location text, the child element has been defined to come out from the back of the text in the <span style="font-family: Courier New,Courier,monospace">z-index</span> value of the child.</p></li>
-<li><p>Define the state to be changed:</p>
-<pre class="prettyprint">
-.location, .date, .location .anibg, h3 &gt; a, .day &gt; span 
-{
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
-}
-
-.event-info: hover .location {color: #fff;}
-.event-info: hover .location .anibg {width: 100%; color: #fff;}
-</pre>
-
-<p>The transition takes place when the property in question is at the front on the screen. The <span style="font-family: Courier New,Courier,monospace">event-info</span> class is used as the subject for the change, and it has been defined so that  the transition occurs simultaneously in the <span style="font-family: Courier New,Courier,monospace">.location</span> and <span style="font-family: Courier New,Courier,monospace">.anibg</span> elements when the mouse hovers over any of the elements tied together as group <span style="font-family: Courier New,Courier,monospace">a</span>.
-</p></li>
-
- </ol><p align="center"><img alt="Location phrase emphasis" src="../../../images/transitions5.png" /></p>
-</li></ol>
-<h3>Source Code</h3>
- <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_practical.html</a></li>
- </ul>  
-               
-                               <h2 id="hw" name="hw">Using Hardware Acceleration</h2>
-                               
-                       <p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
- <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
- 
- <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
- <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
-<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
- <p class="figure">Figure: Blue box</p> 
- <p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p> 
-
- <ul>
- <li>Use CPU painting:
- <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
- <ol>
-       <li>Construct the blue box and set its position on the screen:
-       <pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;</pre>
-</li>
-<li>
-<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>
-               <pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process ()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre></li></ol></li>
-       <li>Use CSS transition:
-       <p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
-               <pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate(200px, 200px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-</li>
-               <li>Use 3D transform:
-               <p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
-               <pre class="prettyprint">&lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate3d(200px, 200px, 0px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt;</pre>
-</li>
-       </ul>
- <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
- <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
- <pre class="prettyprint">#scroll_area 
-{
-&nbsp;&nbsp;&nbsp;overflow: scroll;
-&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
-}</pre>
-               
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm
deleted file mode 100644 (file)
index c26e71b..0000000
--- a/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>WOFF File Format 1.0: Changing Fonts Using WOFF</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#woff">Using the WOFF File Format</a></li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/woff_w.htm">WOFF File Format 1.0 Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 1.0 API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#woff">WOFF File Format 1.0 API for Wearable Web</a></li>     
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>WOFF File Format 1.0: Changing Fonts Using WOFF</h1>
-
-<p>This tutorial demonstrates how you can modify fonts with WOFF.</p>
- 
-<h2>Warm-up</h2>
-<p>Become familiar with the WOFF File Format 1.0 API basics by learning about:</p>
-<ul>
-<li><a href="#woff">Using the WOFF File Format</a> 
-<p>Change fonts using the WOFF (Web Open Font Format) packaging format.</p></li>
-</ul>  
-
-                <h2 id="woff" name="woff">Using the WOFF File Format</h2>
-                               
-                <p>To enhance the user experience of your application, you must learn to use the WOFF (Web Open Font Format) file format 1.0, which is a W3C standard font packaging format used in Web pages:</p>
-
-<ol>
-<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rules</a>. Within the rules, you can define the following properties:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">font-family</span>
-<p>Defines a name for the font. This property is mandatory.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">src</span>
-<p>Defines the URL of the font file on the server. This property is mandatory. If the <span style="font-family: Courier New,Courier,monospace">local</span> attribute is defined, the font resource is not downloaded from the server if it already exists in the local storage. </p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-stretch</span>
-<p>Defines the way the font is stretched. This property is optional.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-style</span>
-<p>Defines the font style. This property is optional.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">font-weight</span>
-<p>Defines the font weight. This property is optional.</p></li>
-</ul>
-<p>Define the rules with in a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of a Web page:</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_1_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_0_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: 900;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_2_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: MuseoSans}
-&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: MuseoSans; font-weight: bold;}
-&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: MuseoSans; font-weight: 900;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;</pre>
-</li>
-<li>In the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> section, create <span style="font-family: Courier New,Courier,monospace">&lt;p&gt;</span> elements containing text in which the font rules are implemented:
-<pre class="prettyprint">&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</li>
-</ol>
-<p class="figure">Figure: Implementing the @font-face rules (in mobile applications only)</p>
-<p align="center"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../../images/font_face.png" /></p>
-         
-
-       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm
index 7a20b7b..410567a 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/location/geolocation_tutorial_w.htm
@@ -1,165 +1,165 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Geolocation API Specification: Managing Location Information</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#Retrieving_Location_Info">Retrieving Location Information</a>
-                       </li>
-               </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/w3c/location/geolocation_w.htm">Geolocation API Specification Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">Geolocation API Specification for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">Geolocation API Specification for Wearable Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Geolocation API Specification: Managing Location Information</h1>
- 
-     <p>This tutorial demonstrates how you can retrieve location information.</p>
-
-  <h2>Warm-up</h2>
-   <p>Become familiar with the Geolocation API Specification basics by learning about:</p>
-   <ul>
-    <li><a href="#Retrieving_Location_Info">Retrieving Location Information</a><p>Create a mobile GPS application to retrieve location information.</p></li>
-   </ul>
-      
-         
-<h2 id="Retrieving_Location_Info" name="Retrieving_Location_Info">Retrieving Location Information</h2>
-
-   <p>To provide users with location-based features, you must learn to create a mobile GPS application to retrieve location information:</p>
-   <ol>
-    <li>Create event handlers for the location requests. 
-               <p>The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface allows 2 types of location requests: &quot;one-shot&quot; position request and repeated position updates. Both request types use the same event handlers. The success event handler is invoked when an attempt to obtain the current location is successful, while the error event handler is invoked when the attempt fails. The success event handler is mandatory, and contains a <span style="font-family: Courier New,Courier,monospace">position</span> parameter that hold the actual position information.</p>
-
-               <pre class="prettyprint">
-function successCallback(position) 
-{
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Latitude: &quot; +   
-&nbsp;&nbsp;&nbsp;position.coords.latitude + &quot;&lt;br&gt;Longitude: &quot; + position.coords.longitude;
-}
-
-function errorCallback(error) 
-{
-&nbsp;&nbsp;&nbsp;var errorInfo = document.getElementById(&quot;locationInfo&quot;);
-
-&nbsp;&nbsp;&nbsp;switch (error.code) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.PERMISSION_DENIED:         
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;User denied the request for Geolocation.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.POSITION_UNAVAILABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;Location information is unavailable.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.TIMEOUT:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;The request to get user location timed out.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.UNKNOWN_ERROR:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;An unknown error occurred.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-       </li>
-       <li>Create a &quot;one-shot&quot; position request with the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method.
-               <p>The <span style="font-family: Courier New,Courier,monospace">maximumAge</span> parameter determines that if the user agent does not have cached position information that is fresher than 60000 milliseconds (1 minute), new location information is automatically obtained.</p>
-               <pre class="prettyprint">
-function oneShotFunc() 
-{
-&nbsp;&nbsp;&nbsp;if (navigator.geolocation) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.geolocation.getCurrentPosition(successCallback, errorCallback, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{maximumAge: 60000});
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Geolocation is not supported.&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-               <p>If you do not want to wait for new position information, but are willing to use cached information regardless of how old it is, you can use the <span style="font-family: Courier New,Courier,monospace">maximumAge</span> and <span style="font-family: Courier New,Courier,monospace">timeout</span> parameters together (<span style="font-family: Courier New,Courier,monospace">{maximumAge: Infinity, timeout: 0}</span>). In this case, if the user agent has no position information cached, it automatically invokes the error event handler.</p>
-
-       </li>
-       <li>Create a repeated position update request with the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> method:
-               <pre class="prettyprint">
-function watchFunc() 
-{
-&nbsp;&nbsp;&nbsp;if (navigator.geolocation) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Geolocation is not supported.&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-       </li>
-       <li>The repeated position update request continues until the <span style="font-family: Courier New,Courier,monospace">clearWatch()</span> method is called with the corresponding identifier:
-               <pre class="prettyprint">
-function stopWatchFunc() 
-{
-&nbsp;&nbsp;&nbsp;if (navigator.geolocation) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.geolocation.clearWatch(watchId);
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Geolocation is not supported.&quot;;
-&nbsp;&nbsp;&nbsp;}
-}</pre>
-       </li>
-   </ol>
-
-   <p>The following figure illustrates the GPS application.</p>
-   <p class="figure">Figure: GPS application (in mobile applications only)</p> 
-   <p align="center"><img alt="GPS application (in mobile applications only)" src="../../../images/geolocation.png" /></p>
-
-  <h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following file:</p>
-       <ul>
-               <li><a href="http://download.tizen.org/misc/examples/w3c_html5/location/geolocation_api_specification" target="_blank">geolocation tutorial.html</a></li>
-       </ul>
-         
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Geolocation API Specification: Managing Location Information</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#Retrieving_Location_Info">Retrieving Location Information</a>\r
+                       </li>\r
+               </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/location/geolocation_w.htm">Geolocation API Specification Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">Geolocation API Specification for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">Geolocation API Specification for Wearable Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Geolocation API Specification: Managing Location Information</h1>\r
+ \r
+     <p>This tutorial demonstrates how you can retrieve location information.</p>\r
+\r
+  <h2>Warm-up</h2>\r
+   <p>Become familiar with the Geolocation API Specification basics by learning about:</p>\r
+   <ul>\r
+    <li><a href="#Retrieving_Location_Info">Retrieving Location Information</a><p>Create a mobile GPS application to retrieve location information.</p></li>\r
+   </ul>\r
+      \r
+         \r
+<h2 id="Retrieving_Location_Info" name="Retrieving_Location_Info">Retrieving Location Information</h2>\r
+\r
+   <p>To provide users with location-based features, you must learn to create a mobile GPS application to retrieve location information:</p>\r
+   <ol>\r
+    <li>Create event handlers for the location requests. \r
+               <p>The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface allows 2 types of location requests: &quot;one-shot&quot; position request and repeated position updates. Both request types use the same event handlers. The success event handler is invoked when an attempt to obtain the current location is successful, while the error event handler is invoked when the attempt fails. The success event handler is mandatory, and contains a <span style="font-family: Courier New,Courier,monospace">position</span> parameter that hold the actual position information.</p>\r
+\r
+               <pre class="prettyprint">\r
+function successCallback(position) \r
+{\r
+&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Latitude: &quot; +   \r
+&nbsp;&nbsp;&nbsp;position.coords.latitude + &quot;&lt;br&gt;Longitude: &quot; + position.coords.longitude;\r
+}\r
+\r
+function errorCallback(error) \r
+{\r
+&nbsp;&nbsp;&nbsp;var errorInfo = document.getElementById(&quot;locationInfo&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;switch (error.code) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.PERMISSION_DENIED:         \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;User denied the request for Geolocation.&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.POSITION_UNAVAILABLE:\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;Location information is unavailable.&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.TIMEOUT:\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;The request to get user location timed out.&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.UNKNOWN_ERROR:\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;An unknown error occurred.&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+       </li>\r
+       <li>Create a &quot;one-shot&quot; position request with the <span style="font-family: Courier New,Courier,monospace">getCurrentPosition()</span> method.\r
+               <p>The <span style="font-family: Courier New,Courier,monospace">maximumAge</span> parameter determines that if the user agent does not have cached position information that is fresher than 60000 milliseconds (1 minute), new location information is automatically obtained.</p>\r
+               <pre class="prettyprint">\r
+function oneShotFunc() \r
+{\r
+&nbsp;&nbsp;&nbsp;if (navigator.geolocation) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.geolocation.getCurrentPosition(successCallback, errorCallback, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{maximumAge: 60000});\r
+&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Geolocation is not supported.&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+               <p>If you do not want to wait for new position information, but are willing to use cached information regardless of how old it is, you can use the <span style="font-family: Courier New,Courier,monospace">maximumAge</span> and <span style="font-family: Courier New,Courier,monospace">timeout</span> parameters together (<span style="font-family: Courier New,Courier,monospace">{maximumAge: Infinity, timeout: 0}</span>). In this case, if the user agent has no position information cached, it automatically invokes the error event handler.</p>\r
+\r
+       </li>\r
+       <li>Create a repeated position update request with the <span style="font-family: Courier New,Courier,monospace">watchPosition()</span> method:\r
+               <pre class="prettyprint">\r
+function watchFunc() \r
+{\r
+&nbsp;&nbsp;&nbsp;if (navigator.geolocation) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);\r
+&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Geolocation is not supported.&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+       </li>\r
+       <li>The repeated position update request continues until the <span style="font-family: Courier New,Courier,monospace">clearWatch()</span> method is called with the corresponding identifier:\r
+               <pre class="prettyprint">\r
+function stopWatchFunc() \r
+{\r
+&nbsp;&nbsp;&nbsp;if (navigator.geolocation) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.geolocation.clearWatch(watchId);\r
+&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML = &quot;Geolocation is not supported.&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+       </li>\r
+   </ol>\r
+\r
+   <p>The following figure illustrates the GPS application.</p>\r
+   <p class="figure">Figure: GPS application (in mobile applications only)</p> \r
+   <p align="center"><img alt="GPS application (in mobile applications only)" src="../../../images/geolocation.png" /></p>\r
+\r
+  <h3>Source Code</h3>\r
+       <p>For the complete source code related to this use case, see the following file:</p>\r
+       <ul>\r
+               <li><a href="http://download.tizen.org/misc/examples/w3c_html5/location/geolocation_api_specification" target="_blank">geolocation tutorial.html</a></li>\r
+       </ul>\r
+         \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm
index 8b2f6b3..3ffd3fb 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm
@@ -1,64 +1,64 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Location: Using Location Features</title>
- </head>
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location Guides</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Location API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#location">Location API for Wearable Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Location: Using Location Features</h1>
-
- <p>The location tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
-  <ul>
-    <li><a href="geolocation_tutorial_w.htm">Geolocation API Specification: Managing Location Information</a> <p>Demonstrates how you can determine the geographical position of the device and handle location information.</p></li>
-  </ul>
-
- 
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Location: Using Location Features</title>\r
+ </head>\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+    </div>\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+            <li><a href="../../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location Guides</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Location API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#location">Location API for Wearable Web</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Location: Using Location Features</h1>\r
+\r
+ <p>The location tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>\r
+  <ul>\r
+    <li><a href="geolocation_tutorial_w.htm">Geolocation API Specification: Managing Location Information</a> <p>Demonstrates how you can determine the geographical position of the device and handle location information.</p></li>\r
+  </ul>\r
+\r
+ \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
 </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm
index 5a9fa3c..def7baf 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm
@@ -39,7 +39,7 @@
    <li><a href="video_audio_tutorial_w.htm">HTML5 video and audio element: Playing and Managing Multimedia Content</a> <p>Demonstrates how you can create a player using video and audio elements.</p></li>
   </ul>
 
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
     <ul>
    <li><a href="media_capture_tutorial_w.htm">HTML Media Capture: Activating Media Capture Capabilities</a> <p>Demonstrates how you can activate the media capture feature during file upload.</p></li>
    <li><a href="webaudio_tutorial_w.htm">Web Audio: Playing Audio Content</a> <p>Demonstrates how you can play audio content using the HTML5 <span style="font-family: Courier New,Courier,monospace">audio</span> element.</p></li>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm
index 9aa4dd5..409c54c 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/page_tutorial_w.htm
@@ -201,15 +201,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div> 
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm
index 62115c9..5562228 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm
@@ -52,15 +52,15 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div> 
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm
index 2f6f8f5..51431e9 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/timing_control_tutorial_w.htm
@@ -197,15 +197,15 @@ handlerRequest = window.webkitRequestAnimationFrame(nextFrame);
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div> 
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm
index fb0727e..bbccb9b 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm
@@ -24,7 +24,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#Creating_Web_Worker">Creating a Web Worker and Handling Errors</a></li>
-                       <li><a href="#Sending_Messages">Sending Messages between Web Workers</a></li>
+                       <li><a href="#Sending_Messages">Sending Messages Between Web Workers</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -46,7 +46,7 @@
   <ul>
    <li><a href="#Creating_Web_Worker">Creating a Web Worker and Handling Errors</a>
    <p>Create and execute a Web worker and a subworker, and handle worker-related errors.</p></li>
-   <li><a href="#Sending_Messages">Sending Messages between Web Workers</a>
+   <li><a href="#Sending_Messages">Sending Messages Between Web Workers</a>
    <p>Send messages between host workers and subworkers.</p></li>
   </ul>
 
@@ -118,7 +118,7 @@ worker.addEventListener(&#39;error&#39;, errorMessage, false);</pre></li>
                </li>
        </ol>  
                
-                               <h2 id="Sending_Messages" name="Sending_Messages">Sending Messages between Web Workers</h2>
+                               <h2 id="Sending_Messages" name="Sending_Messages">Sending Messages Between Web Workers</h2>
                                
                        <p>Learning how to send messages between Web workers is a useful resource management skill:</p>
 
@@ -209,15 +209,15 @@ self.onmessage = function(e)
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div> 
 
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
 </script> 
   
  </body>
diff --git a/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm
index f549c88..f1ad7cc 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/security/cors_tutorial_w.htm
@@ -1,255 +1,255 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-       <title>Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-        <ul class="toc">
-            <li><a href="#Using_Simple_Requests">Using Simple Requests</a></li>
-            <li><a href="#Using_Preflight_Requests">Using Preflight Requests</a></li>
-        </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/cors_w.htm">Cross-Origin Resource Sharing Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</h1>
-
-
-<p>This tutorial demonstrates how you can allow cross-origin resource sharing (CORS) through simple and preflight requests.</p>
-
-
-       <h2>Warm-up</h2>
-       <p>Become familiar with the Cross-Origin Resource Sharing API basics by learning about:</p>
-       <ul>
-       <li><a href="#Using_Simple_Requests">Using Simple Requests</a>
-       <p>Create a simple request based on <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP Request level 2</a>, and receive a response.</p></li>
-       
-       <li><a href="#Using_Preflight_Requests">Using Preflight Requests</a>
-       <p>Create a preflight request based on <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP Request level 2</a>, and receive a response. After a successful authorization, send the actual data request and receive a response.</p></li>
-       </ul>  
-       
-                <h2 id="Using_Simple_Requests" name="Using_Simple_Requests">Using Simple Requests</h2>
-                               
-<p>Learning how to handle a simple request based on XML HTTP Request level 2 enhances the security features of your application:</p>
-
-<ol>
-<li>Create an <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication:
-<pre class="prettyprint">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var method = &quot;GET&quot;;
-&nbsp;&nbsp;&nbsp;var url = &quot;http://another-domain.com/CORS/&quot;;
-&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();
-
-&nbsp;&nbsp;&nbsp;xhr.open(method, url);
-&nbsp;&nbsp;&nbsp;xhr.send();
-&lt;/script&gt;
-</pre>
-</li>
-
-<li>On the server side, define the domain from which requests are allowed. In this case, the <span style="font-family: Courier New,Courier,monospace">http://origin-domain.com</span> domain has the required authority.
-<pre class="prettyprint">
-&lt;?php
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: http://origin-domain.com&quot;);
-?&gt;
-</pre>
-<p>If all sites are allowed to send requests, use the wildcard (*):</p>
-<pre class="prettyprint">
-&lt;?php
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: *&quot;);
-?&gt;
-</pre>
-</li>
-
-<li>Check the request header.
-<p>If you check the request header through the network log, you find that an additional <span style="font-family: Courier New,Courier,monospace">Origin</span> header has been added. This header informs the relevant server of the sender side domain. The <span style="font-family: Courier New,Courier,monospace">Origin</span> header is protected in the browser side, and cannot be changed by the user.</p>
-<pre class="prettyprint">
-GET http://origin-domain.com/CORS/simple_reqeust.html HTTP/1.1
-Host: origin-domain.com
-Origin: http://origin-domain.com
-</pre>
-</li>
-
-<li>Check the response header:
-<ul>
-<li><p>If the request is received from a domain with access authority, the server allows a response.
-The response header includes the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header set in the server side.</p>
-<pre class="prettyprint">
-HTTP/1/1 200 OK
-Access-Control-Allow-Origin: http://origin-domain.com
-</pre></li>
-<li>If the request is received from a domain without access authority, the server sends no response, and the following error occurs:
-<pre class="prettyprint">
-XMLHttpRequest cannot load http://another-domain.com/CORS.
-Origin http://another-domain.com/CORS is not allowed by Access-Control-Allow-Origin.
-</pre></li></ul>
-
-<table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.</td>
-      </tr>
-     </tbody>
-</table>
-</li>
-</ol>
- <h3>Source Code</h3>
-    <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/cross_origin_resource_sharing" target="_blank">simple_request.html</a></li>
- </ul>
-           
-                <h2 id="Using_Preflight_Requests" name="Using_Preflight_Requests">Using Preflight Requests</h2>
-                               
-<p>Learning how to handle a preflight request based on XML HTTP Request level 2 enhances the security features of your application.</p>
-
-<ol>
-<li>Create an <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication. In addition, define the request <span style="font-family: Courier New,Courier,monospace">Content-Type</span> and add a custom header.
-<pre class="prettyprint">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();
-&nbsp;&nbsp;&nbsp;xhr.open(&quot;PUT&quot;, &quot;http://another-domain.com/CORS/&quot;);
-
-&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/json&quot;);
-
-&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Header-Custom-TizenCORS&quot;, &quot;OK&quot;);
-&nbsp;&nbsp;&nbsp;xhr.send(data);
-&lt;/script&gt;
-</pre>
-</li>
-
-<li><p>On the server side, define the domain from which requests are allowed. In this case, the <span style="font-family: Courier New,Courier,monospace">http://110.0.0.160:8081</span> domain has the required authority. In addition, define various server settings.</p>
-<pre class="prettyprint">
-&lt;?php
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: http://110.0.0.160:8081&quot;);
-
-&nbsp;&nbsp;&nbsp;/* Allowed request method */
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Methods: PUT&quot;);
-
-&nbsp;&nbsp;&nbsp;/* Allowed custom header */
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Headers: Content-Type&quot;);
-
-&nbsp;&nbsp;&nbsp;/* Age set to 1 day to improve speed caching */
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Max-Age: 86400&quot;);
-
-&nbsp;&nbsp;&nbsp;/* Options request exits before the page is completely loaded */
-&nbsp;&nbsp;&nbsp;if (strtolower($_SERVER[&#39;REQUEST_METHOD&#39;]) == &#39;options&#39;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exit();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* Response data */
-&nbsp;&nbsp;&nbsp;$arr = array(&quot;user_name&quot; => &quot;tizen&quot;, &quot;phone_number&quot; => &quot;12312334234&quot;);
-
-&nbsp;&nbsp;&nbsp;/* Response data returned in JSON format */
-&nbsp;&nbsp;&nbsp;echo json_encode($arr);
-?&gt;
-</pre>
-</li>
-
-<li>Check the request and response headers.
-<p>If you check the network log, you find that 2 communications between the browser and server occur consecutively: first the preflight request and response, and then the actual request and response.</p>
-<ul>
-<li><p>The preflight request checks the access authority before sending the actual data. The <span style="font-family: Courier New,Courier,monospace">Origin</span> and <span style="font-family: Courier New,Courier,monospace">Access-Control-Request-Headers</span> headers have been added to the request, because the request has a user-defined custom header, and the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> set to <span style="font-family: Courier New,Courier,monospace">application/json</span>:</p>
-<pre>
-OPTION http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1
-Host: origin-domain.com
-Origin: http://origin-domain.com
-Access-Control-Request-Headers: Header-Custom-Tizen, origin, content-type
-</pre></li>
-<li><p>If the request is sent from the browser side, a preflight response is sent for it from the server side. The browser determines from the response whether the actual data is sent. In the following preflight response example, the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> and <span style="font-family: Courier New,Courier,monospace">Header-Custom-Tizen</span> are included in the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Headers</span> header:</p>
-<pre>
-HTTP/1/1 200 OK
-Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen
-Access-Control-Allow-Methods:PUT
-Access-Control-Allow-Origin:http://origin-domain.com
-Access-Control-Max-Age:86400
-</pre></li>
-<li><p>Once the access authority is checked, the browser sends the actual data request to the server side. This request includes the actual data:</p>
-<pre>
-PUT http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1
-Content-Type: application/json
-Host: origin-domain.com
-Origin: http://origin-domain.com
-Header-Custom-TizenCOURSTest: OK
-</pre></li>
-<li><p>The response to the actual data request contains the actual handled result:</p>
-<pre>
-HTTP/1/1 200 OK
-Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen
-Access-Control-Allow-Methods: PUT
-Access-Control-Allow-Origin: http://origin-domain.com
-Access-Control-Max-Age:86400
-</pre></li></ul>
-
-<p>If the access authority fails, the browser does not send the actual data request. Instead, the following error occurs in the browser side:</p>
-<pre>
-XMLHttpRequest cannot load http://another-domain.com/CORS.
-Request header field Header-Custom-Tizen is not allowed by Access-Control-Allow-Headers.
-</pre>
-
-<table class="note">
-     <tbody>
-      <tr>
-       <th class="note">Note</th>
-      </tr>
-      <tr>
-       <td class="note">You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.</td>
-      </tr>
-     </tbody>
-</table>
-</li>
-</ol>
-
-          
-
-                       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script> 
- 
- </body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+       <title>Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+            <li><a href="#Using_Simple_Requests">Using Simple Requests</a></li>\r
+            <li><a href="#Using_Preflight_Requests">Using Preflight Requests</a></li>\r
+        </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/cors_w.htm">Cross-Origin Resource Sharing Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing API for Wearable Web</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</h1>\r
+\r
+\r
+<p>This tutorial demonstrates how you can allow cross-origin resource sharing (CORS) through simple and preflight requests.</p>\r
+\r
+\r
+       <h2>Warm-up</h2>\r
+       <p>Become familiar with the Cross-Origin Resource Sharing API basics by learning about:</p>\r
+       <ul>\r
+       <li><a href="#Using_Simple_Requests">Using Simple Requests</a>\r
+       <p>Create a simple request based on <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP Request level 2</a>, and receive a response.</p></li>\r
+       \r
+       <li><a href="#Using_Preflight_Requests">Using Preflight Requests</a>\r
+       <p>Create a preflight request based on <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP Request level 2</a>, and receive a response. After a successful authorization, send the actual data request and receive a response.</p></li>\r
+       </ul>  \r
+       \r
+                <h2 id="Using_Simple_Requests" name="Using_Simple_Requests">Using Simple Requests</h2>\r
+                               \r
+<p>Learning how to handle a simple request based on XML HTTP Request level 2 enhances the security features of your application:</p>\r
+\r
+<ol>\r
+<li>Create an <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication:\r
+<pre class="prettyprint">\r
+&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;var method = &quot;GET&quot;;\r
+&nbsp;&nbsp;&nbsp;var url = &quot;http://another-domain.com/CORS/&quot;;\r
+&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();\r
+\r
+&nbsp;&nbsp;&nbsp;xhr.open(method, url);\r
+&nbsp;&nbsp;&nbsp;xhr.send();\r
+&lt;/script&gt;\r
+</pre>\r
+</li>\r
+\r
+<li>On the server side, define the domain from which requests are allowed. In this case, the <span style="font-family: Courier New,Courier,monospace">http://origin-domain.com</span> domain has the required authority.\r
+<pre class="prettyprint">\r
+&lt;?php\r
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: http://origin-domain.com&quot;);\r
+?&gt;\r
+</pre>\r
+<p>If all sites are allowed to send requests, use the wildcard (*):</p>\r
+<pre class="prettyprint">\r
+&lt;?php\r
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: *&quot;);\r
+?&gt;\r
+</pre>\r
+</li>\r
+\r
+<li>Check the request header.\r
+<p>If you check the request header through the network log, you find that an additional <span style="font-family: Courier New,Courier,monospace">Origin</span> header has been added. This header informs the relevant server of the sender side domain. The <span style="font-family: Courier New,Courier,monospace">Origin</span> header is protected in the browser side, and cannot be changed by the user.</p>\r
+<pre class="prettyprint">\r
+GET http://origin-domain.com/CORS/simple_reqeust.html HTTP/1.1\r
+Host: origin-domain.com\r
+Origin: http://origin-domain.com\r
+</pre>\r
+</li>\r
+\r
+<li>Check the response header:\r
+<ul>\r
+<li><p>If the request is received from a domain with access authority, the server allows a response.\r
+The response header includes the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header set in the server side.</p>\r
+<pre class="prettyprint">\r
+HTTP/1/1 200 OK\r
+Access-Control-Allow-Origin: http://origin-domain.com\r
+</pre></li>\r
+<li>If the request is received from a domain without access authority, the server sends no response, and the following error occurs:\r
+<pre class="prettyprint">\r
+XMLHttpRequest cannot load http://another-domain.com/CORS.\r
+Origin http://another-domain.com/CORS is not allowed by Access-Control-Allow-Origin.\r
+</pre></li></ul>\r
+\r
+<table class="note">\r
+     <tbody>\r
+      <tr>\r
+       <th class="note">Note</th>\r
+      </tr>\r
+      <tr>\r
+       <td class="note">You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.</td>\r
+      </tr>\r
+     </tbody>\r
+</table>\r
+</li>\r
+</ol>\r
+ <h3>Source Code</h3>\r
+    <p>For the complete source code related to this use case, see the following file:</p>\r
+ <ul>\r
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/cross_origin_resource_sharing" target="_blank">simple_request.html</a></li>\r
+ </ul>\r
+           \r
+                <h2 id="Using_Preflight_Requests" name="Using_Preflight_Requests">Using Preflight Requests</h2>\r
+                               \r
+<p>Learning how to handle a preflight request based on XML HTTP Request level 2 enhances the security features of your application.</p>\r
+\r
+<ol>\r
+<li>Create an <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication. In addition, define the request <span style="font-family: Courier New,Courier,monospace">Content-Type</span> and add a custom header.\r
+<pre class="prettyprint">\r
+&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();\r
+&nbsp;&nbsp;&nbsp;xhr.open(&quot;PUT&quot;, &quot;http://another-domain.com/CORS/&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/json&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Header-Custom-TizenCORS&quot;, &quot;OK&quot;);\r
+&nbsp;&nbsp;&nbsp;xhr.send(data);\r
+&lt;/script&gt;\r
+</pre>\r
+</li>\r
+\r
+<li><p>On the server side, define the domain from which requests are allowed. In this case, the <span style="font-family: Courier New,Courier,monospace">http://110.0.0.160:8081</span> domain has the required authority. In addition, define various server settings.</p>\r
+<pre class="prettyprint">\r
+&lt;?php\r
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: http://110.0.0.160:8081&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;/* Allowed request method */\r
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Methods: PUT&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;/* Allowed custom header */\r
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Headers: Content-Type&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;/* Age set to 1 day to improve speed caching */\r
+&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Max-Age: 86400&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;/* Options request exits before the page is completely loaded */\r
+&nbsp;&nbsp;&nbsp;if (strtolower($_SERVER[&#39;REQUEST_METHOD&#39;]) == &#39;options&#39;)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exit();\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;/* Response data */\r
+&nbsp;&nbsp;&nbsp;$arr = array(&quot;user_name&quot; => &quot;tizen&quot;, &quot;phone_number&quot; => &quot;12312334234&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;/* Response data returned in JSON format */\r
+&nbsp;&nbsp;&nbsp;echo json_encode($arr);\r
+?&gt;\r
+</pre>\r
+</li>\r
+\r
+<li>Check the request and response headers.\r
+<p>If you check the network log, you find that 2 communications between the browser and server occur consecutively: first the preflight request and response, and then the actual request and response.</p>\r
+<ul>\r
+<li><p>The preflight request checks the access authority before sending the actual data. The <span style="font-family: Courier New,Courier,monospace">Origin</span> and <span style="font-family: Courier New,Courier,monospace">Access-Control-Request-Headers</span> headers have been added to the request, because the request has a user-defined custom header, and the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> set to <span style="font-family: Courier New,Courier,monospace">application/json</span>:</p>\r
+<pre>\r
+OPTION http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1\r
+Host: origin-domain.com\r
+Origin: http://origin-domain.com\r
+Access-Control-Request-Headers: Header-Custom-Tizen, origin, content-type\r
+</pre></li>\r
+<li><p>If the request is sent from the browser side, a preflight response is sent for it from the server side. The browser determines from the response whether the actual data is sent. In the following preflight response example, the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> and <span style="font-family: Courier New,Courier,monospace">Header-Custom-Tizen</span> are included in the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Headers</span> header:</p>\r
+<pre>\r
+HTTP/1/1 200 OK\r
+Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen\r
+Access-Control-Allow-Methods:PUT\r
+Access-Control-Allow-Origin:http://origin-domain.com\r
+Access-Control-Max-Age:86400\r
+</pre></li>\r
+<li><p>Once the access authority is checked, the browser sends the actual data request to the server side. This request includes the actual data:</p>\r
+<pre>\r
+PUT http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1\r
+Content-Type: application/json\r
+Host: origin-domain.com\r
+Origin: http://origin-domain.com\r
+Header-Custom-TizenCOURSTest: OK\r
+</pre></li>\r
+<li><p>The response to the actual data request contains the actual handled result:</p>\r
+<pre>\r
+HTTP/1/1 200 OK\r
+Access-Control-Allow-Headers: Content-Type, Header-Custom-Tizen\r
+Access-Control-Allow-Methods: PUT\r
+Access-Control-Allow-Origin: http://origin-domain.com\r
+Access-Control-Max-Age:86400\r
+</pre></li></ul>\r
+\r
+<p>If the access authority fails, the browser does not send the actual data request. Instead, the following error occurs in the browser side:</p>\r
+<pre>\r
+XMLHttpRequest cannot load http://another-domain.com/CORS.\r
+Request header field Header-Custom-Tizen is not allowed by Access-Control-Allow-Headers.\r
+</pre>\r
+\r
+<table class="note">\r
+     <tbody>\r
+      <tr>\r
+       <th class="note">Note</th>\r
+      </tr>\r
+      <tr>\r
+       <td class="note">You must define the authorized domains on the server side to ensure that CORS is handled properly. For more information on setting the authorization settings on different platforms, see <a href="http://enable-cors.org/server.html" target="_blank">Enable CORS Web site</a>.</td>\r
+      </tr>\r
+     </tbody>\r
+</table>\r
+</li>\r
+</ol>\r
+\r
+          \r
+\r
+                       \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script> \r
+ \r
+ </body>\r
  </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm
index a7c2ffc..09c61bc 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/security/iframe_tutorial_w.htm
@@ -1,424 +1,424 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-       <title>HTML5 iframe element: Controlling HTML Elements</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#Sandboxed_Cookies">Accessing Sandboxed Cookies</a></li>
-                       <li><a href="#Sandboxed_Page">Redirecting a Sandboxed Page</a></li>
-                       <li><a href="#Sandboxed_Form">Submitting a Sandboxed Form</a></li>
-                       <li><a href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a></li>
-                       <li><a href="#Parent_Document">Including Rendered Content in the Parent Document</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/iframe_w.htm">HTML5 iframe element Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#iframe">HTML5 iframe element API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#iframe">HTML5 iframe element API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>HTML5 iframe element: Controlling HTML Elements</h1>
-
-<p>This tutorial demonstrates how you can block areas that threaten security using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element, and render the browsing content to include it seamlessly in the parent document.</p>
-
-
-       <h2 id="warm-up" name="warm-up">Warm-up</h2>
-       <p>Become familiar with the HTML5 iframe element API basics by learning about:</p>
-       <ul>
-       <li><a href="#Sandboxed_Cookies">Accessing Sandboxed Cookies</a> <p>Allow or block access to cookies within the same domain.</p></li>
-       <li><a href="#Sandboxed_Page">Redirecting a Sandboxed Page</a> <p>Allow or block external links from the <span style="font-family: Courier New,Courier,monospace">iframe</span> element.</p></li>
-       <li><a href="#Sandboxed_Form">Submitting a Sandboxed Form</a> <p>Allow or block form submission.</p></li>
-       <li><a href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a> <p>Allow or block pop-up alarm within the <span style="font-family: Courier New,Courier,monospace">iframe</span> content.</p></li>
-       <li><a href="#Parent_Document">Including Rendered Content in the Parent Document</a> <p>Include rendered content seamlessly in the parent document.</p></li>
-       </ul>  
-       
-                               <h2 id="Sandboxed_Cookies" name="Sandboxed_Cookies">Accessing Sandboxed Cookies</h2>
-                               
-                               <p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when accessing the cookies of the parent document enhances the security features of your application:</p>
-<ol>
-<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow script execution in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content and cookie access, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>:
-<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox
-&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;
-
-&lt;iframe src=&quot;iframe_cookie_stolen.html&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;100%&quot; height=&quot;350px&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border: 1px solid #DCDCDC;&quot;&gt;&lt;/iframe&gt;</pre></li>
-<li>Create a test cookie:
-<pre class="prettyprint">&lt;script&gt; 
-&nbsp;&nbsp;&nbsp;SetCookie(&#39;userid&#39;, &#39;example@tizen.org&#39;, 7);
-       
-&nbsp;&nbsp;&nbsp;function SetCookie(name, value, expiredays) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var today = new Date();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;today.setDate(today.getDate() + expiredays);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.cookie = name + &quot;=&quot; + escape(value) + 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;; path=/; expires=&quot; + today.toGMTString() + &quot;;&quot;;
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt;</pre></li>
-
-<li>To block cookie access, remove the <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span> attribute from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:
-<pre class="prettyprint">&lt;script&gt;
-&nbsp;&nbsp;&nbsp;function setSandbox() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Access to cookies within the same domain is not allowed */                    
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Access to cookies within the same domain is allowed */                   
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_cookie_stolen.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt;</pre></li>
-<li>Display the result:
-<pre class="prettyprint">&lt;div id=&quot;message&quot;&gt;&lt;/div&gt;</pre></li>
-<li>If the sandboxing functionality is active, a message is displayed. If the sandboxing functionality is inactive, the imported cookie is displayed:
-<pre class="prettyprint">&lt;script&gt;
-&nbsp;&nbsp;&nbsp;window.onload = function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var message = document.getElementById(&quot;message&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = &quot;&lt;h3&gt;stole parent window&#39;s cookie&lt;/h3&gt; userid: &quot; + GetCookie(&quot;userid&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (e) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = &quot;&lt;h3&gt;HTML5 Sandbox blocked access to cookies.&lt;/h3&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function GetCookie(Name) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var search = Name + &quot;=&quot;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.cookie.length &gt; 0) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset = document.cookie.indexOf(search)
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (offset != -1) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset += search.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end = document.cookie.indexOf(&quot;;&quot;, offset)
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (end == -1) end = document.cookie.length
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return unescape(document.cookie.substring(offset, end))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;&quot;;
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt;</pre></li>
-</ol>
-<p class="figure">Figure: Sandbox cookie access (in mobile applications only)</p>
-<p align="center"><img alt="Sandbox cookie access (in mobile applications only)" src="../../../images/sandbox_cookie_access.png"/></p>
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">cookie_stolen.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_cookie_stolen.html</a></li>
- </ul>
-
-                               <h2 id="Sandboxed_Page" name="Sandboxed_Page">Redirecting a Sandboxed Page</h2>
-  
-<p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when redirecting a page enhances the security features of your application:</p>
-<ol>
-<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that disables the sandbox. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property:
-<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Disable Sandbox
-&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;
-
-&lt;iframe src=&quot;iframe_page_redirection.html&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless&gt;&lt;/iframe&gt;</pre></li>
-<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is deactivated, set the <span style="font-family: Courier New,Courier,monospace">allow-top-navigation</span> attribute to the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:
-<pre class="prettyprint">&lt;script&gt; 
-&nbsp;&nbsp;&nbsp;function setSandbox() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&quot;#chkSandbox&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&quot;#iframe&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-top-navigation&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-top-navigation&quot;&gt;&lt;/iframe&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_page_redirection.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt;</pre></li>
-
-
-<li>Include the image displayed on the page:
-<pre class="prettyprint">&lt;img id=&quot;img&quot; alt=&quot;Tizen Lockup on Dark&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src=&quot;http://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-dark.png&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;alert(&#39;fake advertisement!&#39;);&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;240&quot; height=&quot;103&quot; /&gt;</pre></li>
-<li>If the page redirection is blocked, a message is displayed. If not, the user is redirected to the <span style="font-family: Courier New,Courier,monospace">warning.html</span> page:
-<pre class="prettyprint">&lt;script&gt; 
-&nbsp;&nbsp;&nbsp;try 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location = &quot;warning.html&quot;;
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;catch (e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;HTML5 Sandbox prevented top level navigation.&quot;);
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt;</pre></li>
-</ol>
-
-<p class="figure">Figure: Sandbox page redirection (in mobile applications only)</p>
-<p align="center"><img alt="Sandbox page redirection (in mobile applications only)" src="../../../images/sandbox_page_redirection.png"/></p>
-
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_page_redirection.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">page_redirection.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">warning.html</a></li>
- </ul>  
- 
-                               <h2 id="Sandboxed_Form" name="Sandboxed_Form">Submitting a Sandboxed Form</h2>
-                               <p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when submitting a form enhances the security features of your application:</p>
-<ol>
-<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow form submission, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-forms</span>:
-<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox
-&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;
-
-&lt;iframe src=&quot;iframe_form_submission.html&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin allow-forms&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;100%&quot; height=&quot;200px&quot;&gt;&lt;/iframe&gt;</pre></li>
-<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is activated, remove the <span style="font-family: Courier New,Courier,monospace">allow-forms</span> attribute from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:
-<pre class="prettyprint">&lt;script&gt; 
-&nbsp;&nbsp;&nbsp;function setSandbox() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin allow-forms&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&#39;allow-scripts allow-same-origin allow-forms&#39;&gt;&lt;/iframe&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_form_submission.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt;</pre></li>
-<li>Create a form for the login screen with <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> elements to enter an email and password, and submit them:
-<pre class="prettyprint">&lt;form method=&quot;get&quot; action=&quot;iframe_form_submission.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Advertisement, SNS&lt;/h3&gt;
-            
-&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;password&quot; required&gt;
-&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
-&lt;/form&gt;</pre></li>
-
-<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is deactivated, the imported login information is displayed:
-<pre class="prettyprint">&lt;script&gt;
-&nbsp;&nbsp;&nbsp;window.onload = function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var html;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (location.href.indexOf(&quot;?&quot;) &gt;= 0) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html = [&#39;&lt;div id=&quot;message&quot;&gt;&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;h3&gt;Catches login qualification certifying information&lt;/h3&gt;&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(location.href.split(&quot;?&quot;)[1]).replace(&quot;&amp;&quot;, &quot;&lt;br /&gt;&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;/div&gt;&#39;].join(&#39;&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.innerHTML = html;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt;</pre></li>
-</ol>
-<p class="figure">Figure: Sandbox form submission (in mobile applications only)</p>
-<p align="center"><img alt="Sandbox form submission (in mobile applications only)" src="../../../images/sandbox_form_submission.png"/></p>
-
-
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">form_submission.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_form_submission.html</a></li>
- </ul> 
-               
-                               <h2 id="Sandboxed_Popups" name="Sandboxed_Popups">Managing Sandboxed Pop-ups</h2>
-                               
-                               <p>Learning how to control the opening of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content enhances the security features of your application:</p>
-<ol>
-<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow pop-ups, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-popups</span>:
-<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox
-&lt;div id=&quot;description&quot; style=&quot;padding:10 px; margin:10 px;&quot;&gt;&lt;/div&gt;
-
-&lt;iframe src=&quot;iframe_popup.html&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin allow-popups&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border: 1px solid #DCDCDC;&quot;&gt;&lt;/iframe&gt;
-</pre></li>
-<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is activated, remove the <span style="font-family: Courier New,Courier,monospace">allow-popups</span> flag from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:
-<pre class="prettyprint">&lt;script&gt; 
-&nbsp;&nbsp;&nbsp;function setSandbox() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag =&quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &#39;allow-scripts allow-same-origin&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &#39;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &#39;allow-scripts allow-same-origin allow-popups&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &#39;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin allow-popups&quot;&gt;&lt;/iframe&gt;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_popup.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt;</pre></li>
-<li>Create an external link in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element:
-<pre class="prettyprint">&lt;p&gt;[&lt;a href=&quot;https://www.tizen.org/about&quot; target=&quot;_blank&quot;&gt;Click Link!&lt;/a&gt;]&lt;/p&gt;</pre></li>
-</ol>
-
-<p class="figure">Figure: Sandbox pop-up (in mobile applications only)</p>
-<p align="center"><img alt="Sandbox pop-up (in mobile applications only)" src="../../../images/sandbox_popup.png"/></p>
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_popup.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">popup.html</a></li>
- </ul>  
-               
-                               <h2 id="Parent_Document" name="Parent_Document">Including Rendered Content in the Parent Document</h2>
-                               
-                               <p>Learning how to include rendered content seamlessly in the parent document using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element enhances the security features of your application:</p>
-<ol>
-<li>Create the needed HTML elements, including the CSS style of the parent document. Create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute setting, and another <span style="font-family: Courier New,Courier,monospace">iframe</span> element without the setting:
-<pre class="prettyprint">&lt;head&gt; 
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body, html 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0; padding: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt; 
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;HTML5 iframe&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;iframe seamless src=&quot;iframe.html&quot;&gt;&lt;/iframe&gt;
-&nbsp;&nbsp;&nbsp;&lt;iframe src=&quot;iframe.html&quot;&gt;&lt;/iframe&gt;
-&lt;/body&gt;</pre></li>
-<li>Create the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content. The <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <span style="font-family: Courier New,Courier,monospace">seamless</span> attribute set displays the content with the inherited CSS style:
-<pre class="prettyprint">&lt;body&gt; 
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;iframe! h3 Content&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;http://tizen.org&quot;&gt;tizen.org&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;http://tizen.org&quot; target=&quot;_self&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.org target=&quot;_self&quot;&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&lt;/body&gt;</pre></li>
-</ol>
-<p class="figure">Figure: Seamless content appending (in mobile applications only)</p>
-<p align="center"><img alt="Seamless content appending (in mobile applications only)" src="../../../images/execution_screen.png"/></p>
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_seamless.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">seamless.html</a></li>
- </ul>
-               
-
-                       
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script> 
- 
- </body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+       <title>HTML5 iframe element: Controlling HTML Elements</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#Sandboxed_Cookies">Accessing Sandboxed Cookies</a></li>\r
+                       <li><a href="#Sandboxed_Page">Redirecting a Sandboxed Page</a></li>\r
+                       <li><a href="#Sandboxed_Form">Submitting a Sandboxed Form</a></li>\r
+                       <li><a href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a></li>\r
+                       <li><a href="#Parent_Document">Including Rendered Content in the Parent Document</a>\r
+                       </li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/iframe_w.htm">HTML5 iframe element Guide</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#iframe">HTML5 iframe element API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#iframe">HTML5 iframe element API for Wearable Web</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>HTML5 iframe element: Controlling HTML Elements</h1>\r
+\r
+<p>This tutorial demonstrates how you can block areas that threaten security using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element, and render the browsing content to include it seamlessly in the parent document.</p>\r
+\r
+\r
+       <h2 id="warm-up" name="warm-up">Warm-up</h2>\r
+       <p>Become familiar with the HTML5 iframe element API basics by learning about:</p>\r
+       <ul>\r
+       <li><a href="#Sandboxed_Cookies">Accessing Sandboxed Cookies</a> <p>Allow or block access to cookies within the same domain.</p></li>\r
+       <li><a href="#Sandboxed_Page">Redirecting a Sandboxed Page</a> <p>Allow or block external links from the <span style="font-family: Courier New,Courier,monospace">iframe</span> element.</p></li>\r
+       <li><a href="#Sandboxed_Form">Submitting a Sandboxed Form</a> <p>Allow or block form submission.</p></li>\r
+       <li><a href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a> <p>Allow or block pop-up alarm within the <span style="font-family: Courier New,Courier,monospace">iframe</span> content.</p></li>\r
+       <li><a href="#Parent_Document">Including Rendered Content in the Parent Document</a> <p>Include rendered content seamlessly in the parent document.</p></li>\r
+       </ul>  \r
+       \r
+                               <h2 id="Sandboxed_Cookies" name="Sandboxed_Cookies">Accessing Sandboxed Cookies</h2>\r
+                               \r
+                               <p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when accessing the cookies of the parent document enhances the security features of your application:</p>\r
+<ol>\r
+<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow script execution in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content and cookie access, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>:\r
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox\r
+&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;\r
+\r
+&lt;iframe src=&quot;iframe_cookie_stolen.html&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;100%&quot; height=&quot;350px&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border: 1px solid #DCDCDC;&quot;&gt;&lt;/iframe&gt;</pre></li>\r
+<li>Create a test cookie:\r
+<pre class="prettyprint">&lt;script&gt; \r
+&nbsp;&nbsp;&nbsp;SetCookie(&#39;userid&#39;, &#39;example@tizen.org&#39;, 7);\r
+       \r
+&nbsp;&nbsp;&nbsp;function SetCookie(name, value, expiredays) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var today = new Date();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;today.setDate(today.getDate() + expiredays);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.cookie = name + &quot;=&quot; + escape(value) + \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;; path=/; expires=&quot; + today.toGMTString() + &quot;;&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/script&gt;</pre></li>\r
+\r
+<li>To block cookie access, remove the <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span> attribute from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:\r
+<pre class="prettyprint">&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;function setSandbox() \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Access to cookies within the same domain is not allowed */                    \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts&#39;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Access to cookies within the same domain is allowed */                   \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_cookie_stolen.html&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/script&gt;</pre></li>\r
+<li>Display the result:\r
+<pre class="prettyprint">&lt;div id=&quot;message&quot;&gt;&lt;/div&gt;</pre></li>\r
+<li>If the sandboxing functionality is active, a message is displayed. If the sandboxing functionality is inactive, the imported cookie is displayed:\r
+<pre class="prettyprint">&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;window.onload = function() \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var message = document.getElementById(&quot;message&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = &quot;&lt;h3&gt;stole parent window&#39;s cookie&lt;/h3&gt; userid: &quot; + GetCookie(&quot;userid&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (e) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = &quot;&lt;h3&gt;HTML5 Sandbox blocked access to cookies.&lt;/h3&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;function GetCookie(Name) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var search = Name + &quot;=&quot;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.cookie.length &gt; 0) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset = document.cookie.indexOf(search)\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (offset != -1) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset += search.length\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end = document.cookie.indexOf(&quot;;&quot;, offset)\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (end == -1) end = document.cookie.length\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return unescape(document.cookie.substring(offset, end))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/script&gt;</pre></li>\r
+</ol>\r
+<p class="figure">Figure: Sandbox cookie access (in mobile applications only)</p>\r
+<p align="center"><img alt="Sandbox cookie access (in mobile applications only)" src="../../../images/sandbox_cookie_access.png"/></p>\r
+<h3>Source Code</h3>\r
+       <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">cookie_stolen.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_cookie_stolen.html</a></li>\r
+ </ul>\r
+\r
+                               <h2 id="Sandboxed_Page" name="Sandboxed_Page">Redirecting a Sandboxed Page</h2>\r
+  \r
+<p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when redirecting a page enhances the security features of your application:</p>\r
+<ol>\r
+<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that disables the sandbox. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property:\r
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Disable Sandbox\r
+&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;\r
+\r
+&lt;iframe src=&quot;iframe_page_redirection.html&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless&gt;&lt;/iframe&gt;</pre></li>\r
+<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is deactivated, set the <span style="font-family: Courier New,Courier,monospace">allow-top-navigation</span> attribute to the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:\r
+<pre class="prettyprint">&lt;script&gt; \r
+&nbsp;&nbsp;&nbsp;function setSandbox() \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&quot;#chkSandbox&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&quot;#iframe&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-top-navigation&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-top-navigation&quot;&gt;&lt;/iframe&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_page_redirection.html&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/script&gt;</pre></li>\r
+\r
+\r
+<li>Include the image displayed on the page:\r
+<pre class="prettyprint">&lt;img id=&quot;img&quot; alt=&quot;Tizen Lockup on Dark&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src=&quot;http://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-dark.png&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;alert(&#39;fake advertisement!&#39;);&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;240&quot; height=&quot;103&quot; /&gt;</pre></li>\r
+<li>If the page redirection is blocked, a message is displayed. If not, the user is redirected to the <span style="font-family: Courier New,Courier,monospace">warning.html</span> page:\r
+<pre class="prettyprint">&lt;script&gt; \r
+&nbsp;&nbsp;&nbsp;try \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location = &quot;warning.html&quot;;\r
+&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;catch (e) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;HTML5 Sandbox prevented top level navigation.&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/script&gt;</pre></li>\r
+</ol>\r
+\r
+<p class="figure">Figure: Sandbox page redirection (in mobile applications only)</p>\r
+<p align="center"><img alt="Sandbox page redirection (in mobile applications only)" src="../../../images/sandbox_page_redirection.png"/></p>\r
+\r
+<h3>Source Code</h3>\r
+       <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_page_redirection.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">page_redirection.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">warning.html</a></li>\r
+ </ul>  \r
+ \r
+                               <h2 id="Sandboxed_Form" name="Sandboxed_Form">Submitting a Sandboxed Form</h2>\r
+                               <p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when submitting a form enhances the security features of your application:</p>\r
+<ol>\r
+<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow form submission, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-forms</span>:\r
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox\r
+&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;\r
+\r
+&lt;iframe src=&quot;iframe_form_submission.html&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin allow-forms&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;100%&quot; height=&quot;200px&quot;&gt;&lt;/iframe&gt;</pre></li>\r
+<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is activated, remove the <span style="font-family: Courier New,Courier,monospace">allow-forms</span> attribute from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:\r
+<pre class="prettyprint">&lt;script&gt; \r
+&nbsp;&nbsp;&nbsp;function setSandbox() \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin allow-forms&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&#39;allow-scripts allow-same-origin allow-forms&#39;&gt;&lt;/iframe&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_form_submission.html&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/script&gt;</pre></li>\r
+<li>Create a form for the login screen with <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> elements to enter an email and password, and submit them:\r
+<pre class="prettyprint">&lt;form method=&quot;get&quot; action=&quot;iframe_form_submission.html&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;Advertisement, SNS&lt;/h3&gt;\r
+            \r
+&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;password&quot; required&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;\r
+&lt;/form&gt;</pre></li>\r
+\r
+<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is deactivated, the imported login information is displayed:\r
+<pre class="prettyprint">&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;window.onload = function() \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var html;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (location.href.indexOf(&quot;?&quot;) &gt;= 0) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html = [&#39;&lt;div id=&quot;message&quot;&gt;&#39;,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;h3&gt;Catches login qualification certifying information&lt;/h3&gt;&#39;,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(location.href.split(&quot;?&quot;)[1]).replace(&quot;&amp;&quot;, &quot;&lt;br /&gt;&quot;),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;/div&gt;&#39;].join(&#39;&#39;);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.innerHTML = html;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/script&gt;</pre></li>\r
+</ol>\r
+<p class="figure">Figure: Sandbox form submission (in mobile applications only)</p>\r
+<p align="center"><img alt="Sandbox form submission (in mobile applications only)" src="../../../images/sandbox_form_submission.png"/></p>\r
+\r
+\r
+<h3>Source Code</h3>\r
+       <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">form_submission.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_form_submission.html</a></li>\r
+ </ul> \r
+               \r
+                               <h2 id="Sandboxed_Popups" name="Sandboxed_Popups">Managing Sandboxed Pop-ups</h2>\r
+                               \r
+                               <p>Learning how to control the opening of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content enhances the security features of your application:</p>\r
+<ol>\r
+<li>Create an <span style="font-family: Courier New,Courier,monospace">&lt;input&gt;</span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow pop-ups, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-popups</span>:\r
+<pre class="prettyprint">&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot; /&gt; Enable Sandbox\r
+&lt;div id=&quot;description&quot; style=&quot;padding:10 px; margin:10 px;&quot;&gt;&lt;/div&gt;\r
+\r
+&lt;iframe src=&quot;iframe_popup.html&quot; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin allow-popups&quot;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border: 1px solid #DCDCDC;&quot;&gt;&lt;/iframe&gt;\r
+</pre></li>\r
+<li>If the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute is activated, remove the <span style="font-family: Courier New,Courier,monospace">allow-popups</span> flag from the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value:\r
+<pre class="prettyprint">&lt;script&gt; \r
+&nbsp;&nbsp;&nbsp;function setSandbox() \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag =&quot;&quot;;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &#39;allow-scripts allow-same-origin&#39;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &#39;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&#39;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &#39;allow-scripts allow-same-origin allow-popups&#39;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &#39;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin allow-popups&quot;&gt;&lt;/iframe&gt;&#39;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_popup.html&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/script&gt;</pre></li>\r
+<li>Create an external link in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element:\r
+<pre class="prettyprint">&lt;p&gt;[&lt;a href=&quot;https://www.tizen.org/about&quot; target=&quot;_blank&quot;&gt;Click Link!&lt;/a&gt;]&lt;/p&gt;</pre></li>\r
+</ol>\r
+\r
+<p class="figure">Figure: Sandbox pop-up (in mobile applications only)</p>\r
+<p align="center"><img alt="Sandbox pop-up (in mobile applications only)" src="../../../images/sandbox_popup.png"/></p>\r
+<h3>Source Code</h3>\r
+       <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_popup.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">popup.html</a></li>\r
+ </ul>  \r
+               \r
+                               <h2 id="Parent_Document" name="Parent_Document">Including Rendered Content in the Parent Document</h2>\r
+                               \r
+                               <p>Learning how to include rendered content seamlessly in the parent document using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element enhances the security features of your application:</p>\r
+<ol>\r
+<li>Create the needed HTML elements, including the CSS style of the parent document. Create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute setting, and another <span style="font-family: Courier New,Courier,monospace">iframe</span> element without the setting:\r
+<pre class="prettyprint">&lt;head&gt; \r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body, html \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0; padding: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: blue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt; \r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h2&gt;HTML5 iframe&lt;/h2&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;iframe seamless src=&quot;iframe.html&quot;&gt;&lt;/iframe&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;iframe src=&quot;iframe.html&quot;&gt;&lt;/iframe&gt;\r
+&lt;/body&gt;</pre></li>\r
+<li>Create the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content. The <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <span style="font-family: Courier New,Courier,monospace">seamless</span> attribute set displays the content with the inherited CSS style:\r
+<pre class="prettyprint">&lt;body&gt; \r
+&nbsp;&nbsp;&nbsp;&lt;h3&gt;iframe! h3 Content&lt;/h3&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;ul&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;http://tizen.org&quot;&gt;tizen.org&lt;/a&gt;&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;http://tizen.org&quot; target=&quot;_self&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.org target=&quot;_self&quot;&lt;/a&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&lt;/body&gt;</pre></li>\r
+</ol>\r
+<p class="figure">Figure: Seamless content appending (in mobile applications only)</p>\r
+<p align="center"><img alt="Seamless content appending (in mobile applications only)" src="../../../images/execution_screen.png"/></p>\r
+<h3>Source Code</h3>\r
+       <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_seamless.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">seamless.html</a></li>\r
+ </ul>\r
+               \r
+\r
+                       \r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script> \r
+ \r
+ </body>\r
  </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm
index 4a0f6fa..86e7811 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm
@@ -1,66 +1,66 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-       <title>Security: Enhancing Application and User Security</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                       <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security Guides</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security API for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security API for Wearable Web</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Security: Enhancing Application and User Security</h1>
-
-       <p>The security tutorials demonstrate how to use the following features in creating Tizen Web applications:</p> 
-       <ul> 
-               <li><a href="cors_tutorial_w.htm">Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</a> <p>Demonstrates how you can allow cross-origin resource sharing (CORS) through simple and preflight requests.</p></li>
-               <li><a href="iframe_tutorial_w.htm">HTML5 iframe element: Controlling HTML Elements</a> <p>Demonstrates how you can block areas that threaten security using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element, and render the browsing content to include it seamlessly in the parent document.</p></li> 
-       </ul>   
-
-       
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-  <script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script> 
- 
- </body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      \r
+       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>\r
+       <title>Security: Enhancing Application and User Security</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security Guides</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security API for Mobile Web</a></li>\r
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security API for Wearable Web</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Security: Enhancing Application and User Security</h1>\r
+\r
+       <p>The security tutorials demonstrate how to use the following features in creating Tizen Web applications:</p> \r
+       <ul> \r
+               <li><a href="cors_tutorial_w.htm">Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</a> <p>Demonstrates how you can allow cross-origin resource sharing (CORS) through simple and preflight requests.</p></li>\r
+               <li><a href="iframe_tutorial_w.htm">HTML5 iframe element: Controlling HTML Elements</a> <p>Demonstrates how you can block areas that threaten security using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element, and render the browsing content to include it seamlessly in the parent document.</p></li> \r
+       </ul>   \r
+\r
+       \r
+\r
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script> \r
+ \r
+ </body>\r
  </html>
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm
index 339f63f..cb579f1 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm
@@ -40,7 +40,7 @@
     <li><a href="webstorage_tutorial_w.htm">Web Storage: Saving Structured Data on the Client Side</a> <p>Demonstrates how you can use the Web storage.</p></li>
   </ul>
 
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>
 <ul>
     <li><a href="appcache_tutorial_w.htm">HTML5 Application caches: Storing Application Resources</a> <p>Demonstrates how you can use HTML5 application cache.</p></li>
     <li><a href="websql_tutorial_w.htm">Web SQL Database: Creating and Querying Databases</a> <p>Demonstrates how you can use SQL databases.</p></li>
diff --git a/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm
index 8ee917e..cde38c7 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm
@@ -39,11 +39,11 @@
    <li><a href="webgl_tutorial_w.htm">WebGL - Khronos: Creating 3D Graphics</a> <p>Demonstrates how you can create 3D visual elements and display them on the screen.</p></li> 
   </ul>
 
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>  
+<p>The following tutorials apply in <strong>mobile applications only</strong>:</p>  
    <ul>
    <li><a href="fullscreen_tutorial_w.htm">FullScreen API - Mozilla: Using Fullscreen Display</a> <p>Demonstrates how you can convert an element into fullscreen mode.</p></li>        
   </ul>
-<p>The following tutorials apply in <span style="color: red">wearable applications only</span>:</p> 
+<p>The following tutorials apply in <strong>wearable applications only</strong>:</p> 
   <ul>
    <li><a href="camera_tutorial_w.htm">Camera API (Tizen Extension): Using the Camera</a> <p>Demonstrates how you can control the camera on a wearable device.</p></li>        
   </ul>  
diff --git a/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm b/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm
index 08204d2..d89903d 100644 (file)
--- a/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/tutorials_w3c_w.htm
@@ -37,8 +37,6 @@
 <p>Select the feature you are interested in and see how you can implement its various functionalities into your application:</p>
 
 <ul>
-       <li><a href="dom/dom_tutorials_w.htm">DOM, Forms and Styles: Managing CSS Styles and HTML Forms</a>
-       <p>Demonstrates how you can use various CSS style and HTML5 form features.</p></li>
        <li><a href="device/device_tutorials_w.htm">Device: Getting Information about the Device, and Managing Device Events</a>
        <p>Demonstrates how you can manage information about device-specific features, such as vibration and browser state.</p></li>
        <li><a href="graphics/graphics_tutorials_w.htm">Graphics: Creating Graphics with HTML5 Features</a>
@@ -55,17 +53,13 @@
        <p>Demonstrates how you can use Web workers used to run scripts in the background.</p></li>
        <li><a href="location/location_tutorials_w.htm">Location: Using Location Features</a>
        <p>Demonstrates how you can use geolocation features.</p></li>  
-       <li><a href="ui/ui_tutorials_w.htm">UI: Handling User Events on the Screen</a> <span style="color: red">in mobile applications only</span>
-       <p>Demonstrates how you can handle the application UI through the clipboard and drag and drop events.</p></li>  
-       <li><a href="useful/useful_tutorials_w.htm">Useful Practices for W3C/HTML5 Features: Managing Information Related to Various APIs</a>
-       <p>Demonstrates how you can use W3C features related to multiple APIs.</p></li>
        <li><a href="supplement/supplement_tutorials_w.htm">Supplementary Features: Managing Supplementary Features</a>
        <p>Demonstrates how you can take advantage of supplementary features, such as full screen views, typed arrays, and the WebGL graphics library.</p></li> 
-       <li><a href="watchface/developing_watch_app.htm">Watch Application: Developing a Watch Face Application</a> <span style="color: red">in wearable applications only</span>
+       <li><a href="watchface/developing_watch_app.htm">Watch Application: Developing a Watch Face Application</a> <strong>in wearable applications only</strong>
        <p>Demonstrates how you can create and run a wearable watch face application using the Tizen IDE.</p></li>      
 </ul>
 
-
+<p>For more information about implementing the UI for your application using the W3C features, see <a href="../../../../org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm">W3C</a>.</p>
 
     
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm
deleted file mode 100644 (file)
index 0eb2862..0000000
--- a/org.tizen.tutorials/html/web/w3c/ui/clipboard_tutorial_w.htm
+++ /dev/null
@@ -1,303 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-    <title>Clipboard API and events: Transferring Content Between Applications</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#copy">Copying Content</a></li>
-                       <li><a href="#cut">Cutting Content</a></li>
-                       <li><a href="#paste">Pasting Content</a></li>
-                       <li><a href="#target">Copying and Pasting Content into an Editable Element</a></li>
-               </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/w3c/ui/clipboard_w.htm">Clipboard API and events Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#clipboard">Clipboard and events API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Clipboard API and events: Transferring Content Between Applications</h1>
-
-<p>This tutorial demonstrates how you can use clipboard operations in Tizen.</p>
-                                 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>
- 
-
-  <h2>Warm-up</h2>
-  <p>Become familiar with the Clipboard API and events basics by learning about:</p>
-  <ul>
-   <li><a href="#copy">Copying Content</a> <p>Use the clipboard events to copy content.</p></li>
-   <li><a href="#cut">Cutting Content</a> <p>Use the clipboard events to cut content.</p></li>
-   <li><a href="#paste">Pasting Content</a> <p>Use the clipboard events to paste content.</p></li>
-  </ul>
-
-  <h2>Follow-up</h2>
-  <p>Once we have learned the basics of using clipboard events, we can now move on to more advanced tasks, including:</p>
-  <ul>
-   <li><a href="#target">Copying and Pasting Content into an Editable Element</a> <p>Copy content and paste in a specific editable area.</p></li>
-  </ul>
-
-<h2 id="copy" name="copy">Copying Content</h2>
-
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">copy</span> event:</p> 
-<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> event:
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);</pre>
-    </li>
-       <li><p>When you start copying, the <span style="font-family: Courier New,Courier,monospace">copy</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">copyHandler()</span> method is called.</p>
-       <p>Stop the system clipboard basic operation and set the range you want to copy:</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function copyHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">If the current selection is not influenced and there is no selected range, the clipboard imports the <span style="font-family: Courier New,Courier,monospace">setData()</span> method. The copied content cannot be edited apart from adding a <a href="http://www.w3.org/TR/2014/WD-html51-20140617/editing.html#the-datatransferitemlist-interface" target="_blank">DataTransferItemList</a> item.</td> 
-      </tr> 
-     </tbody>
-</table>
-</li>
-<li>Store the data of the selected range: 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;};
-&lt;/script&gt;
-</pre>
-</li>
-</ol>
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul>  
-
- <h2 id="cut" name="cut">Cutting Content</h2>
-
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">cut</span> event:</p> 
-<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">cut</span> event:
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;cut&quot;, function(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cutHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);</pre>
-
-    </li>
-       <li><p>When you start cutting, the <span style="font-family: Courier New,Courier,monospace">cut</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">cutHandler()</span> method is called.</p>
-       <p>Stop the system clipboard basic operation and set the range you want to cut:</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function cutHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
-
-</li>
-<li>Store the data of the selected range: 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;};   
-&lt;/script&gt;
-</pre>
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">Before the <span style="font-family: Courier New,Courier,monospace">setData()</span> method is imported, the basic motion of the system event must be cancelled using the <span style="font-family: Courier New,Courier,monospace">preventDefault()</span> method. Otherwise, the data to be allocated to the clipboard is overwritten by the system clipboard.</td> 
-      </tr> 
-     </tbody>
-</table>
-</li>
-</ol>
-
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul> 
-
- <h2 id="paste" name="paste">Pasting Content</h2>
-
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">paste</span> event:</p> 
-<ol>
-<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">paste</span> event:
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);</pre>
-</li>
-       <li><p>When you start pasting, the <span style="font-family: Courier New,Courier,monospace">paste</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">pasteHandler()</span> method is called.</p>
-       <p>Stop the system clipboard basic operation:</p>
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();</pre>
-</li>
-       <li>Paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
-&nbsp;&nbsp;&nbsp;};              
-&lt;/script&gt;
-</pre>
-</li>
-</ol>
-
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul>  
-
- <h2 id="target" name="target">Copying and Pasting Content into an Editable Element</h2>
-
-<p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p> 
-
-<ol>
-<li><p>Define the editable element into which copied data is to be pasted:</p>
-<pre class="prettyprint">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.log {border: 1px solid #d9d9d9; margin: 10px; padding: 5px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.target {border: 1px solid #36c; margin: 10px; padding: 5px;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Clipboard API&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 300px; height: 100px; border: 1px solid #d9d9d9&quot; contenteditable&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edit Section
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div  class=&quot;target&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;Target Element&lt;/h4&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target contenteditable&quot;&gt;Paste content&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ev-log&quot; class=&quot;log&quot;&gt;Event log&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div contenteditable&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This section is informative
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This specification defines the common clipboard operations of cutting, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copying and pasting, in such a way that they are exposed to Web Applications 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and can be adapted to provide advanced functionalities. 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Its goal is to provide for compatibility where possible with existing implementations.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;body&gt;
-</pre>
-</li>
-
-<li><p>Add event listeners to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> and <span style="font-family: Courier New,Courier,monospace">paste</span> events:</p>
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var pasteTarget = document.getElementById(&quot;target&quot;);
-&nbsp;&nbsp;&nbsp;var evLogBox = document.getElementById(&quot;ev-log&quot;);    
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
-&nbsp;&nbsp;&nbsp;}, false);
-</pre>
-</li>
-
-<li>When the <span style="font-family: Courier New,Courier,monospace">copy</span> event occurs, stop the system clipboard basic operation and set the range you want to copy:
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function copyHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
-</li>
-<li>Store the data of the selected range: 
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log : copy&quot;;
-&nbsp;&nbsp;&nbsp;};</pre>
-</li>
-<li>When the <span style="font-family: Courier New,Courier,monospace">paste</span> event occurs, stop the system clipboard basic operation and paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
-<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log : paste&quot;;
-&nbsp;&nbsp;&nbsp;};  
-&lt;/script&gt;
-</pre>
-</li>
-</ol>
-
-<p class="figure">Figure: Copying and pasting</p> 
-<p align="center"><img alt="Copying and pasting" src="../../../images/copy_pasting.png" /></p>
-
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul>  
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm
deleted file mode 100644 (file)
index 061aebe..0000000
--- a/org.tizen.tutorials/html/web/w3c/ui/drag_drop_tutorial_w.htm
+++ /dev/null
@@ -1,311 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-    <title>HTML5 Drag and drop: Handling Drag and Drop Events</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#handle">Handling Drag and Drop Events</a></li>
-                       <li><a href="#transfer">Transferring Data over Drag and Drop</a></li>
-               </ul>
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm">HTML5 Drag and drop Guide</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dnd">HTML5 Drag and drop API for Mobile Web</a></li>
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>HTML5 Drag and drop: Handling Drag and Drop Events</h1>
-
-<p>This tutorial demonstrates how you can use drag and drop in Tizen.</p>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This feature is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table>                             
-                       
-
-<h2>Warm-up</h2>
-<p>Become familiar with the HTML5 Drag and drop API basics by learning about:</p>
-<ul>
-<li><a href="#handle">Handling Drag and Drop Events</a>
-<p>Create draggable elements and event listeners to track drag and drop events.</p></li>
-
-<li><a href="#transfer">Transferring Data over Drag and Drop</a>
-<p>Make a simple puzzle to transfer puzzle pieces with drag and drop.</p></li>
-  </ul>
-
-<h2 id="handle" name="handle">Handling Drag and Drop Events</h2>
-
-<p>Learning how to handle drag and drop events is a basic user interaction skill:</p>
-
-
-<ol>
-<li><p>Define the draggable elements by adding the <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> attribute to them:</p>
-<pre class="prettyprint lang-html">
-&lt;h1&gt;Drag and drop tutorial&lt;/h1&gt;
-&lt;div class=&quot;example_body&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;drag-list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;drag-row&quot; draggable=&quot;true&quot;&gt;1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;drag-row&quot; draggable=&quot;true&quot;&gt;2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Drag state: &lt;span id=&quot;log&quot;&gt;&lt;/span&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<li>Add event listeners for the various drag and drop events:
-<pre class="prettyprint">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var cols = document.querySelectorAll(&#39;#drag-list_.drag-row&#39;);
-&nbsp;&nbsp;&nbsp;var colsLength = cols.length;
-
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragstart&#39;, dragStart, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drag&#39;, dragIng, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragenter&#39;, dragEnter, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragover&#39;, dragOver, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragleave&#39;, dragLeave, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drop&#39;, dragDrop, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragend&#39;, dragEnd, false);
-&nbsp;&nbsp;&nbsp;};
-&lt;/script&gt;
-</pre>
-</li>
-
-<li>Define event handlers for the events. In this case, each event handler displays a text on the screen.
-<pre class="prettyprint">
-function dragStart(e) 
-{
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragStart&quot;
-};
-
-function dragIng(e) 
-{
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;drag&quot;
-};
-
-function dragOver(e) 
-{
-&nbsp;&nbsp;&nbsp;e.preventDefault();
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragOver&quot;
-};
-
-function dragEnter(e) 
-{
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragEnter&quot;
-};     
-
-function dragLeave(e) 
-{
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragLeave&quot;
-};
-
-function dragDrop(e) 
-{
-&nbsp;&nbsp;&nbsp;e.stopPropagation();
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragDrop&quot; 
-};
-       
-function dragEnd(e) 
-{
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragEnd&quot;
-};
-</pre>
-</li>
-</ol>
-
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following file:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop" target="_blank">drag_and_drop.html</a></li>
- </ul>
-
- <h2 id="transfer" name="transfer">Transferring Data over Drag and Drop</h2>
-
-<p>Learning how to transfer data in a simple drag and drop puzzle is a basic user interaction skill:</p>
-
-<ol>
-<li>Define the draggable elements by adding the <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> attribute to them.
-<p>In this example, the Tizen logo image has been divided and allocated randomly. Each imager part is defined as draggable, so that the user can rearrange the image parts in the correct order.</p>
-<pre class="prettyprint lang-html">
-&lt;h1&gt;Drag and drop tutorial&lt;/h1&gt;
-&lt;div class=&quot;example_body&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Drag state: &lt;span id=&quot;log&quot;&gt;&lt;/span&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;holder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/logo.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;txt&quot;&gt;Complete the puzzle to see a picture&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;puzzle&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_06.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_02.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_04.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_05.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_01.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_03.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-</li>
-
-<li>Add event listeners for the <span style="font-family: Courier New,Courier,monospace">dragover</span>, <span style="font-family: Courier New,Courier,monospace">dragleave</span>, <span style="font-family: Courier New,Courier,monospace">dragstart</span>, and <span style="font-family: Courier New,Courier,monospace">drop</span> events:
-<pre class="prettyprint lang-js">
-&lt;script&gt;
-&nbsp;&nbsp;&nbsp;var cols = document.querySelectorAll(&#39;#puzzle_.puzzle-piece&#39;);
-&nbsp;&nbsp;&nbsp;var colsLength = cols.length;
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragstart&#39;, dragStartHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragover&#39;, dragOverHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragleave&#39;, dragLeaveHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drop&#39;, dragDropHandler, false);
-&nbsp;&nbsp;&nbsp;};
-&lt;/script&gt;
-</pre>
-</li>
-
-<li>Transfer data (in this case, image parts):
-<ol type="a">
-<li>Declare the <span style="font-family: Courier New,Courier,monospace">dragElem</span> variable, which is an empty object for the data exchange:
-<pre class="prettyprint">
-var dragElem = null;
-</pre>
-</li>
-
-<li>Use the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface in the <span style="font-family: Courier New,Courier,monospace">dragStartHandler()</span> and <span style="font-family: Courier New,Courier,monospace">dragDropHandler()</span> event handlers to exchange image parts:
-<pre class="prettyprint">
-function dragStartHandler(e) 
-{
-&nbsp;&nbsp;&nbsp;/* Set data */
-&nbsp;&nbsp;&nbsp;dragElem = this;
-&nbsp;&nbsp;&nbsp;e.dataTransfer.effectAllowed = &#39;move&#39;;
-&nbsp;&nbsp;&nbsp;e.dataTransfer.setData(&#39;text/html&#39;, this.innerHTML);
-&nbsp;&nbsp;&nbsp;this.classList.add(&#39;over&#39;);
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].classList.add(&#39;start&#39;);
-&nbsp;&nbsp;&nbsp;};
-};
-function dragDropHandler(e) 
-{
-&nbsp;&nbsp;&nbsp;/* Get data */
-&nbsp;&nbsp;&nbsp;dragElem.innerHTML = this.innerHTML;
-&nbsp;&nbsp;&nbsp;this.innerHTML = e.dataTransfer.getData(&#39;text/html&#39;);
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].className = &quot;puzzle-piece&quot;;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;/* Check key */
-&nbsp;&nbsp;&nbsp;puzzleCheck();
-};
-</pre>
-</li>
-
-<li>Check the completion of the puzzle by making a user key using a simple array, and comparing the user key against the puzzle key (correct answer):
-<pre class="prettyprint">
-var puzzleKey =  [&quot;01&quot;, &quot;02&quot;, &quot;03&quot;, &quot;04&quot;, &quot;05&quot;, &quot;06&quot;];
-var puzzleArray = [];
-
-function puzzleCheck() 
-{
-&nbsp;&nbsp;&nbsp;/* Initialize the user key */
-&nbsp;&nbsp;&nbsp;puzzleArray = [];
-&nbsp;&nbsp;&nbsp;/* Insert the keys in the array */
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;puzzleArray.push(cols[i].children[0].getAttribute(&#39;src&#39;).substring(12, 14));
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;originKey = puzzleKey.join();
-&nbsp;&nbsp;&nbsp;userKey = puzzleArray.join();
-
-&nbsp;&nbsp;&nbsp;if (originKey === userKey)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;Success !&quot;);
-&nbsp;&nbsp;&nbsp;};
-};
-</pre>
-</li>
-</ol>
-</li>
-</ol>
-<p class="figure">Figure: Drag and drop puzzle</p> 
-<p align="center"><img alt="Drag and drop puzzle" src="../../../images/dragdrop.png" /></p> 
-<h3>Source Code</h3>
-       <p>For the complete source code related to this use case, see the following files:</p>
- <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop" target="_blank">drag_and_drop_practical.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">logo.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_01.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_02.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_03.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_04.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_05.png</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_06.png</a></li>
- </ul>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm
deleted file mode 100644 (file)
index d3a320f..0000000
--- a/org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm
+++ /dev/null
@@ -1,78 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-    <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-    <script type="text/javascript" src="../../../scripts/snippet.js"></script>
-    <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-    <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-    <title>UI: Handling User Events on the Screen</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-    <div id="profile">
-        <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
-    </div>
-    <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>
-        <ul class="toc">
-            <li><a href="../../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">UI Guides</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI API for Mobile Web</a></li>
-                       
-        </ul>
-    </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>UI: Handling User Events on the Screen</h1>
-
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The UI API domain is supported in mobile applications only.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-    <p>The UI tutorials demonstrate how to manage screen elements and events related to them in creating Tizen Web applications:</p>
-  <ul>
-   <li><a href="clipboard_tutorial_w.htm">Clipboard API and events: Transferring Content Between Applications</a> <p>Demonstrates how you can use clipboard operations.</p></li>
-   <li><a href="drag_drop_tutorial_w.htm">HTML5 Drag and drop: Handling Drag and Drop Events</a> <p>Demonstrates how you can use the drag and drop features.</p></li>
-</ul>
-
-   
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm
deleted file mode 100644 (file)
index 2584860..0000000
--- a/org.tizen.tutorials/html/web/w3c/useful/html_priority_tutorial_w.htm
+++ /dev/null
@@ -1,140 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>HTML Priorities: Understanding HTML Behavior</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Content</p>
-               <ul class="toc">
-                       <li><a href="#use">Using JavaScript Code within HTML</a>
-                       </li>
-               </ul>
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/useful/html_priority_w.htm">HTML Priorities Guide</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>HTML Priorities: Understanding HTML Behavior</h1>
-
-<p>The HTML behavior tutorial demonstrates how you can use JavaScript methods within HTML code.</p>
-
- <h2>Warm-up</h2>
-<p>Become familiar with HTML priorities by learning about:</p>
-<ul>
-<li><a href="#use">Using JavaScript Code within HTML</a> 
-<p>Learn how to format and place JavaScript code within HTML code.</p></li>
-</ul>
-
-<h2 id="use" name="use">Using JavaScript Code within HTML</h2>
-
-<p>To provide users with JavaScript-based features, you must learn to use JavaScript code within an HTML document:</p>
-
-<ul>
-<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag:
-<pre class="prettyprint lang-html">
-&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;       
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head onload&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head ready&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/head&gt;</pre> 
-
-<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is sent to Interpreter. As there are no methods to be handled immediately, its execution is suspended.</p>
-</li>
-<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag:
-<pre class="prettyprint lang-html">
-&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function testLog(txt) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logText = document.querySelector(&#39;.log&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML += &#39;&lt;li&gt;JavaScript in HTML &#39; + txt + &#39;&lt;/li&gt;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-    
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body onload&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body ready&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function() 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body anonymous function&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}();
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&lt;/body&gt;
-</pre>
-<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is sent to Interpreter. The anonymous method is immediately executed, and the HTML DOM structure is set up. The methods in the <span style="font-family: Courier New,Courier,monospace;">$(document).ready</span> method and in the <span style="font-family: Courier New,Courier,monospace;">onload</span> event are executed in the stored order.</p>
-</li></ul>
-
-
-<table class="note"> 
-     <tbody> 
-      <tr> 
-       <th class="note">Note</th> 
-      </tr> 
-      <tr> 
-       <td class="note">jQuery has to be called from both the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements. The <span style="font-family: Courier New,Courier,monospace;">logText</span> variable has to be called from the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element. The method connected to the <span style="font-family: Courier New,Courier,monospace;">onload</span> event in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is not executed. </td> 
-      </tr> 
-     </tbody> 
-    </table>
-
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm
deleted file mode 100644 (file)
index 65da720..0000000
--- a/org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />
-       <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
-       <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
-       <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
-       <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-
-       <title>Useful Practices for W3C/HTML5 Features: Managing Information Related to Various APIs</title>  
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
-       <div id="profile">
-               <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
-       </div>
-       <div id="toc_border"><div id="toc">
-               <p class="toc-title">Related Info</p>
-               <ul class="toc">
-                   <li><a href="../../../../../org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a></li>
-               </ul>
-       </div></div>
-</div> 
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Useful Practices for W3C/HTML5 Features: Managing Information Related to Various APIs</h1>
-
-       <p>The useful practices for W3C/HTML5 features tutorials demonstrate how to manage W3C information related to multiple APIs:</p> 
-  <ul> 
-   <li><a href="html_priority_tutorial_w.htm">HTML Priorities: Understanding HTML Behavior</a> <p>Demonstrates how you can use JavaScript methods within HTML code.</p></li>
-   </ul>       
-
-   
-<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../../../scripts/showhide.js"></script>
-
-</div></div></div>
-
-<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
-
-<div id="footer">
-<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div>
-
-<script type="text/javascript">
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-25976949-1']);
-_gaq.push(['_trackPageview']);
-(function() {
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
-
-</body>
-</html>
diff --git a/org.tizen.tutorials/index.xml b/org.tizen.tutorials/index.xml
index 8e4512e..585f239 100644 (file)
--- a/org.tizen.tutorials/index.xml
+++ b/org.tizen.tutorials/index.xml
@@ -16,7 +16,6 @@
                        <topic href="html/web/tizen/communication/bluetooth_tutorial_w.htm" label="Bluetooth">                                  
                                <topic href="html/web/tizen/communication/task_bluetoothchat_w.htm" label="Task: Bluetooth Chat"></topic>               
                        </topic>
-                       <topic href="html/web/tizen/communication/bluetooth_le_tutorial_w.htm" label="Bluetooth Low Energy"></topic>
                        <topic href="html/web/tizen/communication/nfc_tutorial_w.htm" label="NFC">                      
                                <topic href="html/web/tizen/communication/task_contactsexchanger_w.htm" label="Task: Contacts Exchanger"></topic>                                       
                        </topic>
@@ -80,23 +79,6 @@
                <topic href="html/web/tizen/service/service_tutorial_w.htm" label="Service Application"></topic>                
        </topic>
        <topic href="html/web/w3c/tutorials_w3c_w.htm" label="W3C/HTML5/Supplementary Features">        
-               <topic href="html/web/w3c/dom/dom_tutorials_w.htm" label="DOM, Forms and Styles">                       
-                       <topic href="html/web/w3c/dom/animation_tutorial_w.htm" label="CSS Animations Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/background_tutorial_w.htm" label="CSS Backgrounds and Borders Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/basic_ui_tutorial_w.htm" label="CSS Basic User Interface Module Level 3 (CSS3 UI)"></topic>
-                       <topic href="html/web/w3c/dom/color_tutorial_w.htm" label="CSS Color Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/flexible_tutorial_w.htm" label="CSS Flexible Box Layout Module"></topic>
-                       <topic href="html/web/w3c/dom/transform_tutorial_w.htm" label="CSS Transforms"></topic>
-                       <topic href="html/web/w3c/dom/transition_tutorial_w.htm" label="CSS Transitions Module Level 3"></topic>
-                       <topic href="html/web/w3c/dom/font_tutorial_w.htm" label="CSS Fonts Module Level 3"></topic> 
-                       <topic href="html/web/w3c/dom/text_module_tutorial_w.htm" label="CSS Text Module Level 3"></topic> 
-                       <topic href="html/web/w3c/dom/woff_tutorial_w.htm" label="WOFF File Format 1.0"></topic>        
-                       <topic href="html/web/w3c/dom/html5forms_tutorial_w.htm" label="HTML5 Forms"></topic>
-                       <topic href="html/web/w3c/dom/media_query_tutorial_w.htm" label="Media Queries"></topic>
-                       <topic href="html/web/w3c/dom/selector_tutorial_w.htm" label="Selectors API Level 1 and Level 2"></topic>
-                       <topic href="html/web/w3c/dom/session_history_tutorial_w.htm" label="HTML5 session history of browsing contexts"></topic>               
-                       <topic href="html/web/w3c/dom/multi_tutorial_w.htm" label="CSS Multi-column Layout Module"></topic>
-               </topic>
                <topic href="html/web/w3c/device/device_tutorials_w.htm" label="Device">                        
                        <topic href="html/web/w3c/device/battery_tutorial_w.htm" label="Battery Status"></topic>
                        <topic href="html/web/w3c/device/device_orientation_tutorial_w.htm" label="DeviceOrientation Event Specification">
@@ -151,13 +133,6 @@
                <topic href="html/web/w3c/location/location_tutorials_w.htm" label="Location">                  
                        <topic href="html/web/w3c/location/geolocation_tutorial_w.htm" label="Geolocation API Specification"></topic>   
                </topic>
-               <topic href="html/web/w3c/ui/ui_tutorials_w.htm" label="UI">                    
-                       <topic href="html/web/w3c/ui/clipboard_tutorial_w.htm" label="Clipboard API and events"></topic>
-                       <topic href="html/web/w3c/ui/drag_drop_tutorial_w.htm" label="HTML5 Drag and drop"></topic>                     
-               </topic>                
-               <topic href="html/web/w3c/useful/useful_tutorials_w.htm" label="Useful Practices for W3C/HTML5 Features">                       
-                       <topic href="html/web/w3c/useful/html_priority_tutorial_w.htm" label="HTML Priorities"></topic>                         
-               </topic>
                <topic href="html/web/w3c/supplement/supplement_tutorials_w.htm" label="Supplementary Features">                        
                        <topic href="html/web/w3c/supplement/typedarray_tutorial_w.htm" label="Typed Array - Khronos"></topic>
                        <topic href="html/web/w3c/supplement/webgl_tutorial_w.htm" label="WebGL - Khronos"></topic>     
@@ -186,7 +161,7 @@
                <topic href="html/native/app_framework/notification_tutorial_n.htm" label="Notification"></topic>
                <topic href="html/native/app_framework/package_tutorial_n.htm" label="Package Manager"></topic>
                <topic href="html/native/app_framework/service_app_tutorial_n.htm" label="Service Application"></topic>
-               <topic href="html/native/app_framework/widget_tutorial_n.htm" label="Widget"></topic>           
+               <topic href="html/native/app_framework/widget_tutorial_n.htm" label="Widget Application"></topic>               
                <topic href="html/native/app_framework/shortcut_tutorial_n.htm" label="Shortcut"></topic>
                <topic href="html/native/app_framework/watch_tutorial_n.htm" label="Watch Application"></topic>
        </topic>
@@ -275,41 +250,6 @@
                <topic href="html/native/telephony/telephony_info_tutorial_n.htm" label="Telephony Information"></topic>
        </topic>
        <topic href="html/native/ui/ui_tutorials_n.htm" label="UI Framework">
-               <topic href="html/native/ui/efl_tutorial_n.htm" label="EFL"></topic>
-               <topic href="html/native/ui/evas_tutorial_n.htm" label="Evas"></topic>          
-               <topic href="html/native/ui/events_effects_tutorials_n.htm" label="Event and Effect">
-                       <topic href="html/native/ui/animation_event_types_tutorials_n.htm" label="Animation and Effect Types">
-                               <topic href="html/native/ui/ecore_effects_tutorial_n.htm" label="Ecore Animator"></topic>
-                               <topic href="html/native/ui/edje_effects_tutorial_n.htm" label="Edje Animation"></topic>
-                               <topic href="html/native/ui/elm_transit_tutorial_n.htm" label="Elementary Animations">
-                                       <topic href="html/native/ui/transit_effect_tutorial_n.htm" label="Transit"></topic>
-                               </topic>
-                       </topic>
-                       <topic href="html/native/ui/gesture_detector_tutorial_n.htm" label="Gesture Detector"></topic>
-                       <topic href="html/native/ui/multipoint_touch_tutorial_n.htm" label="Multi-point Touch"></topic> 
-               </topic>        
-               <topic href="html/native/ui/ui_component_tutorials_n.htm" label="UI Components">
-                       <topic href="html/native/ui/ui_component_tutorials_mn.htm" label="Mobile Native">
-                               <topic href="html/native/ui/basic_tutorial_mn.htm" label="Basic"></topic>
-                               <topic href="html/native/ui/form_tutorial_mn.htm" label="Form"></topic>
-                               <topic href="html/native/ui/naviframe_tutorial_mn.htm" label="Naviframe"></topic>
-                               <topic href="html/native/ui/genlist_tutorial_mn.htm" label="Genlist"></topic>
-                               <topic href="html/native/ui/menu_tutorial_mn.htm" label="Menu"></topic>
-                               <topic href="html/native/ui/panes_tutorial_mn.htm" label="Panes"></topic>
-                               <topic href="html/native/ui/ui_layout_tutorial_mn.htm" label="UI Layout"></topic>
-                       </topic>
-                       <topic href="html/native/ui/ui_component_tutorials_wn.htm" label="Wearable Native">
-                               <topic href="html/native/ui/button_tutorial_wn.htm" label="Button"></topic>
-                               <topic href="html/native/ui/datetime_tutorial_wn.htm" label="Datetime"></topic>
-                               <topic href="html/native/ui/genlist_tutorial_wn.htm" label="Genlist"></topic>
-                               <topic href="html/native/ui/popup_tutorial_wn.htm" label="Popup"></topic>
-                               <topic href="html/native/ui/circle_components_tutorial_wn.htm" label="Circle Components"></topic>
-                       </topic>
-               </topic>
-               <topic href="html/native/ui/efl_extension_tutorial_n.htm" label="Efl Extension"></topic>
-               <topic href="html/native/ui/font_settings_tutorial_n.htm" label="Font Setting"></topic>         
-               <topic href="html/native/ui/efl_util_tutorial_n.htm" label="EFL UTIL"></topic>
-               <topic href="html/native/ui/efl_optimization_tutorial_n.htm" label="EFL Optimization"></topic>
                <topic href="html/native/ui/eom_tutorial_n.htm" label="External Output Manager"></topic>
        </topic>
        <topic href="html/native/uix/uix_tutorials_n.htm" label="UIX">
diff --git a/org.tizen.tutorials/plugin.xml b/org.tizen.tutorials/plugin.xml
index 90140e5..4c22a91 100644 (file)
--- a/org.tizen.tutorials/plugin.xml
+++ b/org.tizen.tutorials/plugin.xml
@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?eclipse version="3.0"?>
-
-<plugin>
-       <extension point="org.eclipse.help.toc">
-               <toc file="index.xml" primary="true" />
-       </extension>
-</plugin>
+<?xml version="1.0" encoding="UTF-8"?>\r
+<?eclipse version="3.0"?>\r
+\r
+<plugin>\r
+       <extension point="org.eclipse.help.toc">\r
+               <toc file="index.xml" primary="true" />\r
+       </extension>\r
+</plugin>\r
diff --git a/org.tizen.ui.guides/.project b/org.tizen.ui.guides/.project
new file mode 100755 (executable)
index 0000000..2c22bce
--- /dev/null
+++ b/org.tizen.ui.guides/.project
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>\r
+<projectDescription>\r
+       <name>org.tizen.ui.guides_2.4.0</name>\r
+       <comment></comment>\r
+       <projects>\r
+       </projects>\r
+       <buildSpec>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.ManifestBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+               <buildCommand>\r
+                       <name>org.eclipse.pde.SchemaBuilder</name>\r
+                       <arguments>\r
+                       </arguments>\r
+               </buildCommand>\r
+       </buildSpec>\r
+       <natures>\r
+               <nature>org.eclipse.pde.PluginNature</nature>\r
+       </natures>\r
+</projectDescription>\r
diff --git a/org.tizen.ui.guides/META-INF/MANIFEST.MF b/org.tizen.ui.guides/META-INF/MANIFEST.MF
new file mode 100755 (executable)
index 0000000..3ef5790
--- /dev/null
+++ b/org.tizen.ui.guides/META-INF/MANIFEST.MF
@@ -0,0 +1,7 @@
+Manifest-Version: 1.0\r
+Bundle-ManifestVersion: 1\r
+Bundle-Name: Tizen UI Guides\r
+Bundle-SymbolicName: org.tizen.ui.guides;singleton=true\r
+Bundle-Version: 2.4.0\r
+Bundle-Vendor: The Linux Foundation\r
+\r
diff --git a/org.tizen.ui.guides/about.html b/org.tizen.ui.guides/about.html
new file mode 100755 (executable)
index 0000000..814330e
--- /dev/null
+++ b/org.tizen.ui.guides/about.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head> 
+  <script type="text/javascript" src="html/scripts/snippet.js"></script> 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+  <link href="html/css/styles.css" rel="StyleSheet" type="text/css" /> 
+  <link href="html/css/snippet.css" rel="StyleSheet" type="text/css" /> 
+  <title>About This Content</title> 
+ </head> 
+ <body onload="prettyPrint()"> 
+ 
+  <h1><a name="Creating2" id="Creating2">About This Content</a></h1> 
+  <p>Tizen 2.4.0</p> 
+
+  <h1>License</h1> 
+   <p>Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/build.properties b/org.tizen.ui.guides/build.properties
new file mode 100755 (executable)
index 0000000..264c2a1
--- /dev/null
+++ b/org.tizen.ui.guides/build.properties
@@ -0,0 +1,8 @@
+bin.includes = plugin.xml,\\r
+               META-INF/,\\r
+               html/,\\r
+               build.properties,\\r
+               .project,\\r
+                          about.html,\\r
+               index.xml\r
+\r
diff --git a/org.tizen.ui.guides/html/cover_page.htm b/org.tizen.ui.guides/html/cover_page.htm
new file mode 100755 (executable)
index 0000000..1d59870
--- /dev/null
+++ b/org.tizen.ui.guides/html/cover_page.htm
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
+
+       <title>Tizen UI Guides</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">UI Guides</font></h1>
+
+<p>Click the application type you want:</p>
+<p><a href="web/guides_w.htm"><img alt="Web Application" src="images/w_division.png"/></a> <a href="native/guides_n.htm"><img alt="Native Application" src="images/n_division.png"/></a></p> 
+
+   
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/css/snippet.css b/org.tizen.ui.guides/html/css/snippet.css
new file mode 100755 (executable)
index 0000000..2be1b1f
--- /dev/null
+++ b/org.tizen.ui.guides/html/css/snippet.css
@@ -0,0 +1,52 @@
+/* Pretty printing styles. Used with prettify.js. */\r
+\r
+/* SPAN elements with the classes below are added by prettyprint. */\r
+.pln { color: #000 }  /* plain text */\r
+\r
+@media screen {\r
+  .str { color: #793AFF }  /* string content */\r
+  .kwd { color: #7F0055 }  /* a keyword */\r
+  .com { color: green}  /* a comment */\r
+  .typ { color: #1C1C1C }  /* a type name */\r
+  .lit { color: black }  /* a literal value */\r
+  /* punctuation, lisp open bracket, lisp close bracket */\r
+  .pun, .opn, .clo { color: #1C1C1C}\r
+  .tag { color: #008 }  /* a markup tag name */\r
+  .atn { color: #606 }  /* a markup attribute name */\r
+  .atv { color: #080 }  /* a markup attribute value */\r
+  .dec, .var { color: #606 }  /* a declaration; a variable name */\r
+  .fun { color: red }  /* a function name */\r
+}\r
+\r
+/* Use higher contrast and text-weight for printable form. */\r
+@media print, projection {\r
+  .str { color: #060 }\r
+  .kwd { color: #006; font-weight: bold }\r
+  .com { color: #600; font-style: italic }\r
+  .typ { color: #404; font-weight: bold }\r
+  .lit { color: #044 }\r
+  .pun, .opn, .clo { color: #440 }\r
+  .tag { color: #006; font-weight: bold }\r
+  .atn { color: #404 }\r
+  .atv { color: #060 }\r
+}\r
+\r
+/* Put a border around prettyprinted code snippets. */\r
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }\r
+\r
+/* Specify class=linenums on a pre to get line numbering */\r
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */\r
+li.L0,\r
+li.L1,\r
+li.L2,\r
+li.L3,\r
+li.L5,\r
+li.L6,\r
+li.L7,\r
+li.L8 { list-style-type: none }\r
+/* Alternate shading for lines */\r
+li.L1,\r
+li.L3,\r
+li.L5,\r
+li.L7,\r
+li.L9 { background: #eee }\r
diff --git a/org.tizen.ui.guides/html/css/styles.css b/org.tizen.ui.guides/html/css/styles.css
new file mode 100755 (executable)
index 0000000..ad7ebcb
--- /dev/null
+++ b/org.tizen.ui.guides/html/css/styles.css
@@ -0,0 +1,756 @@
+@charset "utf-8";\r
+\r
+body {\r
+       background: white;\r
+       color: #1C1C1C;\r
+       margin-right: 20px;\r
+       margin-left: 20px;\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       font-family: Arial, Helvetica, sans-serif;\r
+}\r
+\r
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th,  ol, dl,  dd, dt, footer {\r
+       font-family: Arial, Verdana, Helvetica, sans-serif\r
+       }\r
+\r
+/*     Set default font to 9 pt        */\r
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {\r
+       font-size: 9pt;\r
+}\r
+       \r
+pre, code { \r
+       font-family: "Courier New", Courier, monospace;\r
+       border: 1px solid #719cc7;\r
+       margin: 6px 1.5px;\r
+       padding: 1px 1px 1px 1px;\r
+       font-weight: normal;\r
+       font-style: normal;\r
+}\r
+\r
+h1 {font-size: 24pt; color: #0E437D;}\r
+h2 {font-size: 18pt; color: #0E437D;}\r
+h3 {font-size: 14pt; color: #1C1C1C;}\r
+h4 {font-size: 12pt; color: #1C1C1C;}\r
+h5 {font-size: 10pt; color: #1C1C1C;}\r
+       \r
+h1, h2, h3, h4, h5 {\r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+\r
+caption, p.caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: left;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+ol  {\r
+       margin-bottom: 20px;\r
+}\r
+\r
+ul ul , ol ul, ul ol, ol ol{\r
+       margin-top: 10px;\r
+}\r
+\r
+ul li, ol li {\r
+       margin-bottom: 10px;\r
+}\r
+\r
+ol.tutorstep li {\r
+       border-top: 2px solid #719cc7;\r
+       list-style-position: inside;\r
+       font-weight: bold;\r
+       margin-top: 30px;\r
+       margin-left: -20px;\r
+       padding-top: 3px;\r
+       font-size: 12pt;\r
+}\r
+\r
+ol.tutorstep li p{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-top: 10px;\r
+}\r
+\r
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {\r
+       font-size: 9pt;\r
+       list-style-position: outside; \r
+       margin-left: 0px;\r
+       font-weight: normal;\r
+}\r
+\r
+ol.tutorstep ol li p, ol.tutorstep ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal; \r
+       margin-top: 5px;\r
+}\r
+\r
+ol li p, ul li p {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       margin-bottom: 2px;\r
+       margin-top: 2px;\r
+}\r
+\r
+ol ol , ol.tutorstep ol{\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       list-style-type: lower-alpha;\r
+       color: #1C1C1C; \r
+       border-style: none;\r
+       margin-top: 10px; \r
+}\r
+\r
+ol.tutorstep ul {\r
+       margin-top: 10px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {\r
+       border-style: none;\r
+       margin-top: 5px;\r
+       font-size: 9pt;\r
+}\r
+\r
+ul {\r
+       font-size: 9pt;\r
+       font-weight: normal;\r
+       color: #1C1C1C;\r
+}\r
+\r
+\r
+/*     End of font face declarations   */\r
+\r
+/*     Set table borders and heading row background    */\r
+table {\r
+       border: 0px;\r
+       border-collapse: collapse;\r
+       width: 100%;\r
+       margin-top: 20px;\r
+       margin-bottom: 20px;\r
+       background: white;\r
+}\r
+\r
+th {\r
+       border-top: 2px solid #719cc7;\r
+       border-right: 1px solid #c6d9f1;\r
+       border-left: 1px solid #c6d9f1;\r
+       background-color: #f3f7fb;\r
+       padding: 4px;\r
+       color: #719cc7;\r
+       font-size: 9pt;\r
+       font-weight: bold;\r
+}      \r
+       \r
+td {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:top;\r
+       padding: 3px 20px 5px 20px;\r
+       }\r
+\r
+td.middle {\r
+       border: 1px solid #c6d9f1;\r
+       vertical-align:middle;\r
+       padding: 3px 20px 5px 20px;\r
+       }       \r
+       \r
+/*     Notes stand out using a light top & bottom borders with yellow background       */\r
+table.note {\r
+       border-top: 2px solid #719cc7;\r
+       border-left: 0px;\r
+       border-right: 0px;\r
+       width: 100%;\r
+}\r
+\r
+tr.note {\r
+       text-align: left;\r
+}\r
+\r
+th.note {\r
+       text-align: left;\r
+       background-color: #ddd9c3;\r
+       background-image: note.gif;\r
+       border-top: 2px solid #719cc7;\r
+       border-bottom:1px solid #719cc7;\r
+       border-right: none;\r
+\r
+}\r
+\r
+td.note, p.note {\r
+       background-color: #eeece1;\r
+       color: #1C1C1C;\r
+       padding: 5px;\r
+       margin-top:12px;\r
+       margin-bottom:12px;\r
+       border: none;\r
+}\r
+       \r
+/*     Figure titles are centered and bolded   */\r
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {\r
+       text-align: center;\r
+       font-weight: bold;\r
+}\r
+\r
+/*     Red background and white text for things that need fixing before release        */\r
+.fix   {\r
+       background-color: red;\r
+       font-weight: bold;\r
+       color: white;\r
+       }\r
+\r
+/* Classes for creating collapsible content */\r
+#banner {\r
+       padding: 8px 4px 8px 4px;\r
+       /* top right bottom left */\r
+       border: 1px solid #7f7f7f;\r
+       width: 100%;\r
+       background-image: url("banner.png");\r
+       text-align: left;\r
+       font-weight: bold;\r
+       font-size: 9pt;\r
+       color: #ffffff;\r
+}\r
+\r
+#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}\r
+#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}\r
+#main {width: 75%; height: 90%;}\r
+#container {width:100%;}\r
+#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}\r
+body.no-toc #container #contents {right: 0;padding-right:30px;}\r
+body.no-toc #toc-navigation {width: auto;}\r
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}\r
+body.no-toc #profile {float: right;right: -32px;}\r
+body.no-toc #profile p {padding: 0; margin: 0;}\r
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}\r
+       #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}\r
+       #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }\r
+\r
+.devicespecs-util {float:right; margin-top:25px;}\r
+       .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}\r
+       .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+       .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}\r
+       .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}\r
+       .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}\r
+       .devicespecs-util ul.dutil li a:hover { color:#222; }\r
+       .devicespecs-util ul.dutil li a:active { color:#222; }\r
+\r
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}\r
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}\r
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}\r
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+       ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}\r
+\r
+       ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr   {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}\r
+       ul.devicespecifications li div.devicespec-tit > span a.bt-arr em        {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}\r
+       ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}\r
+\r
+       ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }\r
+       ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }\r
+\r
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}\r
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}\r
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}\r
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}\r
+\r
+.static-cont {width:100%; margin-bottom:40px;}\r
+       \r
+.top {text-align: right;}\r
+.toc, ul.toc{\r
+       margin: 10px 0px 0px 0px;\r
+       padding-left: 13px;\r
+       list-style: disc;\r
+       font-size: 9pt;\r
+       line-height: 115%; \r
+       }\r
+       \r
+.toc-title {\r
+       font-size: 12pt;\r
+       color: #0E437D; \r
+       font-weight: bold;\r
+       font-style: normal; \r
+       line-height: normal; \r
+       margin-top: 16pt;\r
+}\r
+       \r
+a.top {\r
+       display:block; \r
+       float: right; \r
+       position:fixed;\r
+       width: 28px; \r
+       height:89px; \r
+       bottom:50px;\r
+       z-index: 101;\r
+       right: 19%;\r
+       }\r
+\r
+a img {border: 0;}\r
+       \r
+/*     Footer includes space and a gray line above             */\r
+#footer {\r
+       position: fixed;\r
+       /* width: 100%; */\r
+    bottom: 0px;\r
+       text-align: center;\r
+       border-top: 1px solid #CCCCCC;\r
+       background-color: #FFFFFF;      \r
+       left: 21px;  right: 21px;\r
+}\r
+\r
+.footer {font-size: 8pt;}\r
+       \r
+caption { \r
+       font-size: 9pt;\r
+       color: #1C1C1C;\r
+       font-weight: bold;\r
+       text-align: center;\r
+       margin-top: 20px;\r
+       margin-bottom: 0px;\r
+}\r
+\r
+div.qindex, div.navpath, div.navtab{\r
+       background-color: #e8eef2;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       padding: 2px;\r
+}\r
+\r
+div.qindex, div.navpath {\r
+       width: 100%;\r
+       line-height: 140%;\r
+}\r
+\r
+div.navtab {\r
+       margin-right: 15px;\r
+}\r
+\r
+/* @group Link Styling */\r
+\r
+a:link {\r
+       color: #719cc7;\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+}\r
+\r
+a:hover { \r
+       color: #0e437d;\r
+}\r
+\r
+a:visited {\r
+       text-decoration: underline;\r
+       color: #719cc7;\r
+       font-weight: bold;\r
+}\r
+\r
+a.qindex {\r
+       font-weight: bold;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:hover {\r
+       text-decoration: underline;\r
+       color: #0e437d;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindex:visited {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       color: #719cc7;\r
+       padding: 2px;\r
+}\r
+\r
+a.qindexHL {\r
+       text-decoration: underline;\r
+       font-weight: bold;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+       border: 1px double #9295C2;\r
+}\r
+\r
+a.qindexHL:hover {\r
+       text-decoration: none;\r
+       background-color: #6666cc;\r
+       color: #ffffff;\r
+       padding: 2px 6px;\r
+}\r
+\r
+dl.el { \r
+       margin-left: -1cm \r
+}\r
+\r
+.fragment {\r
+       font-family: monospace, fixed;\r
+       font-size: 105%;\r
+}\r
+\r
+pre.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 4px 6px;\r
+       margin: 4px 8px 4px 2px;\r
+}\r
+\r
+div.fragment {\r
+       border: 1px solid #CCCCCC;\r
+       background-color: #f5f5f5;\r
+       padding: 6px;\r
+}\r
+\r
+div.ah { \r
+       background-color: black; \r
+       font-weight: bold; \r
+       color: #ffffff; \r
+       margin-bottom: 3px; \r
+       margin-top: 3px \r
+}\r
+\r
+td.md { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+}\r
+\r
+td.mdname1 { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+}\r
+\r
+td.mdname { \r
+       background-color: #f5f5f5; \r
+       font-weight: bold; \r
+       color: #602020; \r
+       width: 600px; \r
+}\r
+\r
+div.groupHeader {\r
+       margin-left: 16px;\r
+       margin-top: 12px;\r
+       margin-bottom: 6px;\r
+       font-weight: bold;\r
+}\r
+\r
+div.groupText { \r
+       margin-left: 16px; \r
+       font-style: italic; \r
+}\r
+\r
+td.indexkey {\r
+       background-color: #eeeeff;\r
+       font-weight: bold;\r
+       border: 1px solid #CCCCCC;\r
+       margin: 2px 0px 2px 0;\r
+       padding: 2px 10px;\r
+}\r
+\r
+td.indexvalue {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #CCCCCC;\r
+       padding: 2px 10px;\r
+       margin: 2px 0px;\r
+}\r
+\r
+tr.memlist {\r
+   background-color: #f0f0f0; \r
+}\r
+\r
+p.formulaDsp { \r
+       text-align: center; \r
+}\r
+\r
+img.formulaDsp { \r
+}\r
+\r
+img.formulaInl { \r
+       vertical-align: middle; \r
+}\r
+\r
+/* @group Code Colorization */\r
+\r
+span.keyword       { color: #008000 }\r
+span.keywordtype   { color: #604020 }\r
+span.keywordflow   { color: #e08000 }\r
+span.comment       { color: #800000 }\r
+span.preprocessor  { color: #806020 }\r
+span.stringliteral { color: #002080 }\r
+span.charliteral   { color: #008080 }\r
+span.vhdldigit     { color: #ff00ff }\r
+span.vhdlchar      { color: #000000 }\r
+span.vhdlkeyword   { color: #700070 }\r
+span.vhdllogic     { color: #ff0000 }\r
+\r
+.mdTable {\r
+       border: 1px solid #868686;\r
+       background-color: #F4F4FB;\r
+}\r
+\r
+.mdRow {\r
+       padding: 8px 10px;\r
+}\r
+\r
+/* @group Member Descriptions */\r
+\r
+.mdescLeft, .mdescRight,\r
+.memItemLeft, .memItemRight,\r
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {\r
+       background-color: #F4F4F4A;\r
+       border: none;\r
+       margin: 4px;\r
+       padding: 3px 8px 4px 8px;\r
+}\r
+\r
+.mdescLeft, .mdescRight {\r
+       padding: 0px 8px 4px 8px;\r
+       color: #555;\r
+}\r
+\r
+.memItemLeft, .memItemRight, .memTemplParams {\r
+       border-top: 1px solid #DBDBDB;\r
+}\r
+\r
+.memTemplParams {\r
+       color: #606060;\r
+}\r
+\r
+/* @end */\r
+\r
+/* @group Member Details */\r
+\r
+/* Styles for detailed member documentation */\r
+\r
+.memtemplate {\r
+       font-size: 80%;\r
+       color: #606060;\r
+       font-weight: normal;\r
+       margin-left: 3px;\r
+}\r
+\r
+.memnav {\r
+       background-color: #eeeeff;\r
+       border: 1px solid #84b0c7;\r
+       text-align: center;\r
+       margin: 2px;\r
+       margin-right: 15px;\r
+       padding: 2px;\r
+}\r
+\r
+.memitem {\r
+       padding: 0;\r
+}\r
+\r
+.memname {\r
+       white-space: nowrap;\r
+       font-weight: bold;\r
+}\r
+\r
+.memproto, .memdoc {\r
+       border: 1px solid #9BBCDD;      \r
+}\r
+\r
+.memproto {\r
+       padding: 0;\r
+       background-color: #D5E2EF;\r
+       font-weight: bold;\r
+       -webkit-border-top-left-radius: 8px;\r
+       -webkit-border-top-right-radius: 8px;\r
+       -moz-border-radius-topleft: 8px;\r
+       -moz-border-radius-topright: 8px;\r
+}\r
+\r
+.memdoc {\r
+       padding: 2px 5px;\r
+       background-color: #eef3f5;\r
+       border-top-width: 0;\r
+       -webkit-border-bottom-left-radius: 8px;\r
+       -webkit-border-bottom-right-radius: 8px;\r
+       -moz-border-radius-bottomleft: 8px;\r
+       -moz-border-radius-bottomright: 8px;\r
+}\r
+\r
+.memdoc p, .memdoc dl, .memdoc ul {\r
+       margin: 6px 0;\r
+}\r
+\r
+.paramkey {\r
+       text-align: right;\r
+}\r
+\r
+.paramtype {\r
+       white-space: nowrap;\r
+}\r
+\r
+.paramname {\r
+       color: #853E0E;\r
+       white-space: nowrap;\r
+}\r
+.paramname em {\r
+       font-style: normal;\r
+}\r
+\r
+/* @end */\r
+\r
+.search     { color: #003399;\r
+              font-weight: bold;\r
+}\r
+\r
+form.search {\r
+              margin-bottom: 0px;\r
+              margin-top: 0px;\r
+}\r
+\r
+input.search { font-size: 75%;\r
+               color: #000080;\r
+               font-weight: normal;\r
+               background-color: #eeeeff;\r
+}\r
+\r
+td.tiny { \r
+       font-size: 75%;\r
+}\r
+\r
+.highlight {\r
+        background-color:#E2E2FF;\r
+}\r
+\r
+/*---------- ide-eclipse Styles ---------*/\r
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;\r
+       margin: 0px 0px;\r
+       padding: -30px -30px -30px -30px;\r
+       font-weight: normal;\r
+       font-style: normal;}\r
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}\r
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/\r
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}\r
+\r
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}\r
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}\r
+\r
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/\r
+.sh_styleFromXML{color:#800000;font-weight:bold;}\r
+/*-------------------------------------------------------*/\r
+\r
+/*-------- Snippet Base Styles ----------*/\r
+.snippet-wrap {position:relative;}\r
+*:first-child+html .snippet-wrap {display:inline-block;}\r
+* html .snippet-wrap {display:inline-block;}\r
+.snippet-reveal{text-decoration:underline;}\r
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}\r
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}\r
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}\r
+* html .snippet-wrap .snippet-hide {bottom:1px;}\r
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}\r
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}\r
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;\r
+-moz-border-radius:0px;\r
+-webkit-border-radius:0px;\r
+border-radius:0px;\r
+box-shadow: 1px 1px px #000;\r
+-moz-box-shadow: 2px 2px 1px #000;\r
+-webkit-box-shadow: 1px 1px 1px #000;}\r
+.snippet-wrap pre.snippet-textonly {padding:1em;}\r
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}\r
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}\r
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}\r
+.snippet-wrap .snippet-num li{padding-left:2px;}\r
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}\r
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}\r
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}\r
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}\r
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}\r
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}\r
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}\r
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}\r
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}\r
+.snippet-wrap li.box-mid {border-width:0 0px !important;}\r
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}\r
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}\r
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}\r
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}\r
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}\r
+\r
+/* Layout fixing */\r
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}\r
+.clfix {display: inline-block;}\r
+.clfix {display: block;}\r
+* html .clfix {height: 1%;} /* Hides from IE-mac */\r
+.clfix {zoom:1;} /*for IE 5.5-7*/\r
+\r
+.fl {float:left !important;}\r
+.fr {float:right !important;}\r
+.cl {clear:both;}\r
+.rel {position:relative;}\r
+.abs {position:absolute;}\r
+.ac {text-align:center !important;}\r
+.ar {text-align:right !important;}\r
+.al {text-align:left !important;}\r
+.at {vertical-align:top !important;}\r
+.am {vertical-align:middle !important;}\r
+.ab {vertical-align:bottom;}\r
+.hand {cursor:pointer;}\r
+.bgnone {background:none !important;}\r
+.brnone {border:none !important;}\r
+.b {font-weight:bold !important;}\r
+.n {font-weight:normal !important;}\r
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}\r
+.mt5 {margin-top:5px !important;} \r
+/* //Layout fixing */\r
+\r
+@media print { .hide, .show { display: none; }}\r
+\r
+div#profile {\r
+    position: relative;\r
+}\r
+#profile p {\r
+       text-align: right;\r
+}\r
+\r
+div#toc_border {\r
+    border: 2px solid rgb(86, 122, 156);  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  height: 565px;\r
+}\r
+\r
+#contents li {\r
+       padding-top: 3px;\r
+       margin-top: 5px;\r
+       /* overflow: auto; */\r
+}\r
+\r
+p {\r
+       /* overflow: auto; */\r
+}\r
+\r
+div.table {\r
+       /* overflow: auto; */\r
+}
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/images/9patch_buffer.png b/org.tizen.ui.guides/html/images/9patch_buffer.png
new file mode 100755 (executable)
index 0000000..3895bc8
Binary files /dev/null and b/org.tizen.ui.guides/html/images/9patch_buffer.png differ
diff --git a/org.tizen.ui.guides/html/images/9patch_resource.png b/org.tizen.ui.guides/html/images/9patch_resource.png
new file mode 100755 (executable)
index 0000000..7a20d38
Binary files /dev/null and b/org.tizen.ui.guides/html/images/9patch_resource.png differ
diff --git a/org.tizen.ui.guides/html/images/9patch_zoomed.png b/org.tizen.ui.guides/html/images/9patch_zoomed.png
new file mode 100755 (executable)
index 0000000..2196d66
Binary files /dev/null and b/org.tizen.ui.guides/html/images/9patch_zoomed.png differ
diff --git a/org.tizen.ui.guides/html/images/actor_coordinates.png b/org.tizen.ui.guides/html/images/actor_coordinates.png
new file mode 100755 (executable)
index 0000000..039b06d
Binary files /dev/null and b/org.tizen.ui.guides/html/images/actor_coordinates.png differ
diff --git a/org.tizen.ui.guides/html/images/actor_position.png b/org.tizen.ui.guides/html/images/actor_position.png
new file mode 100755 (executable)
index 0000000..f591fdc
Binary files /dev/null and b/org.tizen.ui.guides/html/images/actor_position.png differ
diff --git a/org.tizen.ui.guides/html/images/after_resize.png b/org.tizen.ui.guides/html/images/after_resize.png
new file mode 100755 (executable)
index 0000000..e045c5e
Binary files /dev/null and b/org.tizen.ui.guides/html/images/after_resize.png differ
diff --git a/org.tizen.guides/html/images/align.png b/org.tizen.ui.guides/html/images/align.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/align.png
rename to org.tizen.ui.guides/html/images/align.png
diff --git a/org.tizen.ui.guides/html/images/align_hints.png b/org.tizen.ui.guides/html/images/align_hints.png
new file mode 100755 (executable)
index 0000000..4ca26c6
Binary files /dev/null and b/org.tizen.ui.guides/html/images/align_hints.png differ
diff --git a/org.tizen.ui.guides/html/images/anchor_point.png b/org.tizen.ui.guides/html/images/anchor_point.png
new file mode 100755 (executable)
index 0000000..1db87e5
Binary files /dev/null and b/org.tizen.ui.guides/html/images/anchor_point.png differ
diff --git a/org.tizen.ui.guides/html/images/animation_components.png b/org.tizen.ui.guides/html/images/animation_components.png
new file mode 100755 (executable)
index 0000000..3e00baf
Binary files /dev/null and b/org.tizen.ui.guides/html/images/animation_components.png differ
diff --git a/org.tizen.ui.guides/html/images/application_store_sd.png b/org.tizen.ui.guides/html/images/application_store_sd.png
new file mode 100755 (executable)
index 0000000..0e2e0fa
Binary files /dev/null and b/org.tizen.ui.guides/html/images/application_store_sd.png differ
diff --git a/org.tizen.ui.guides/html/images/applying_color.png b/org.tizen.ui.guides/html/images/applying_color.png
new file mode 100755 (executable)
index 0000000..c23e828
Binary files /dev/null and b/org.tizen.ui.guides/html/images/applying_color.png differ
diff --git a/org.tizen.ui.guides/html/images/applying_invisibility.png b/org.tizen.ui.guides/html/images/applying_invisibility.png
new file mode 100755 (executable)
index 0000000..53a1529
Binary files /dev/null and b/org.tizen.ui.guides/html/images/applying_invisibility.png differ
diff --git a/org.tizen.ui.guides/html/images/aspect-control-both.png b/org.tizen.ui.guides/html/images/aspect-control-both.png
new file mode 100755 (executable)
index 0000000..b807599
Binary files /dev/null and b/org.tizen.ui.guides/html/images/aspect-control-both.png differ
diff --git a/org.tizen.ui.guides/html/images/aspect-control-horizontal.png b/org.tizen.ui.guides/html/images/aspect-control-horizontal.png
new file mode 100755 (executable)
index 0000000..143d8fb
Binary files /dev/null and b/org.tizen.ui.guides/html/images/aspect-control-horizontal.png differ
diff --git a/org.tizen.ui.guides/html/images/aspect-control-none.png b/org.tizen.ui.guides/html/images/aspect-control-none.png
new file mode 100755 (executable)
index 0000000..6d35d33
Binary files /dev/null and b/org.tizen.ui.guides/html/images/aspect-control-none.png differ
diff --git a/org.tizen.ui.guides/html/images/background_order.png b/org.tizen.ui.guides/html/images/background_order.png
new file mode 100755 (executable)
index 0000000..05c958c
Binary files /dev/null and b/org.tizen.ui.guides/html/images/background_order.png differ
diff --git a/org.tizen.ui.guides/html/images/base_layout.png b/org.tizen.ui.guides/html/images/base_layout.png
new file mode 100755 (executable)
index 0000000..7976836
Binary files /dev/null and b/org.tizen.ui.guides/html/images/base_layout.png differ
diff --git a/org.tizen.ui.guides/html/images/base_scales.png b/org.tizen.ui.guides/html/images/base_scales.png
new file mode 100755 (executable)
index 0000000..7f7b224
Binary files /dev/null and b/org.tizen.ui.guides/html/images/base_scales.png differ
diff --git a/org.tizen.ui.guides/html/images/before_resize.png b/org.tizen.ui.guides/html/images/before_resize.png
new file mode 100755 (executable)
index 0000000..476210f
Binary files /dev/null and b/org.tizen.ui.guides/html/images/before_resize.png differ
diff --git a/org.tizen.guides/html/images/bg.png b/org.tizen.ui.guides/html/images/bg.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/bg.png
rename to org.tizen.ui.guides/html/images/bg.png
diff --git a/org.tizen.ui.guides/html/images/bg_util_bar.gif b/org.tizen.ui.guides/html/images/bg_util_bar.gif
new file mode 100755 (executable)
index 0000000..977f94d
Binary files /dev/null and b/org.tizen.ui.guides/html/images/bg_util_bar.gif differ
diff --git a/org.tizen.guides/html/images/bg_wn.png b/org.tizen.ui.guides/html/images/bg_wn.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/bg_wn.png
rename to org.tizen.ui.guides/html/images/bg_wn.png
diff --git a/org.tizen.guides/html/images/border.png b/org.tizen.ui.guides/html/images/border.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/border.png
rename to org.tizen.ui.guides/html/images/border.png
diff --git a/org.tizen.guides/html/images/bottom.png b/org.tizen.ui.guides/html/images/bottom.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/bottom.png
rename to org.tizen.ui.guides/html/images/bottom.png
diff --git a/org.tizen.guides/html/images/box.png b/org.tizen.ui.guides/html/images/box.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/box.png
rename to org.tizen.ui.guides/html/images/box.png
diff --git a/org.tizen.ui.guides/html/images/btn_top.gif b/org.tizen.ui.guides/html/images/btn_top.gif
new file mode 100755 (executable)
index 0000000..d35e824
Binary files /dev/null and b/org.tizen.ui.guides/html/images/btn_top.gif differ
diff --git a/org.tizen.guides/html/images/button.png b/org.tizen.ui.guides/html/images/button.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/button.png
rename to org.tizen.ui.guides/html/images/button.png
diff --git a/org.tizen.ui.guides/html/images/calculator_sd.png b/org.tizen.ui.guides/html/images/calculator_sd.png
new file mode 100755 (executable)
index 0000000..9434f41
Binary files /dev/null and b/org.tizen.ui.guides/html/images/calculator_sd.png differ
diff --git a/org.tizen.ui.guides/html/images/change_text_globally.png b/org.tizen.ui.guides/html/images/change_text_globally.png
new file mode 100755 (executable)
index 0000000..70880a1
Binary files /dev/null and b/org.tizen.ui.guides/html/images/change_text_globally.png differ
diff --git a/org.tizen.ui.guides/html/images/changed_order.png b/org.tizen.ui.guides/html/images/changed_order.png
new file mode 100755 (executable)
index 0000000..93c9844
Binary files /dev/null and b/org.tizen.ui.guides/html/images/changed_order.png differ
diff --git a/org.tizen.ui.guides/html/images/changing_opacity.png b/org.tizen.ui.guides/html/images/changing_opacity.png
new file mode 100755 (executable)
index 0000000..629eb70
Binary files /dev/null and b/org.tizen.ui.guides/html/images/changing_opacity.png differ
diff --git a/org.tizen.guides/html/images/check.png b/org.tizen.ui.guides/html/images/check.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/check.png
rename to org.tizen.ui.guides/html/images/check.png
diff --git a/org.tizen.ui.guides/html/images/checkbox_button.png b/org.tizen.ui.guides/html/images/checkbox_button.png
new file mode 100755 (executable)
index 0000000..c716296
Binary files /dev/null and b/org.tizen.ui.guides/html/images/checkbox_button.png differ
diff --git a/org.tizen.ui.guides/html/images/dali_component.png b/org.tizen.ui.guides/html/images/dali_component.png
new file mode 100755 (executable)
index 0000000..db4bc0a
Binary files /dev/null and b/org.tizen.ui.guides/html/images/dali_component.png differ
diff --git a/org.tizen.guides/html/images/date2.png b/org.tizen.ui.guides/html/images/date2.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/date2.png
rename to org.tizen.ui.guides/html/images/date2.png
diff --git a/org.tizen.ui.guides/html/images/default_order.png b/org.tizen.ui.guides/html/images/default_order.png
new file mode 100755 (executable)
index 0000000..b57aebb
Binary files /dev/null and b/org.tizen.ui.guides/html/images/default_order.png differ
diff --git a/org.tizen.ui.guides/html/images/depth.png b/org.tizen.ui.guides/html/images/depth.png
new file mode 100755 (executable)
index 0000000..fcbf576
Binary files /dev/null and b/org.tizen.ui.guides/html/images/depth.png differ
diff --git a/org.tizen.ui.guides/html/images/dimension_dependency.png b/org.tizen.ui.guides/html/images/dimension_dependency.png
new file mode 100755 (executable)
index 0000000..cc41c53
Binary files /dev/null and b/org.tizen.ui.guides/html/images/dimension_dependency.png differ
diff --git a/org.tizen.ui.guides/html/images/display_text_classes.png b/org.tizen.ui.guides/html/images/display_text_classes.png
new file mode 100755 (executable)
index 0000000..6ebc34f
Binary files /dev/null and b/org.tizen.ui.guides/html/images/display_text_classes.png differ
diff --git a/org.tizen.ui.guides/html/images/edc_masking.png b/org.tizen.ui.guides/html/images/edc_masking.png
new file mode 100755 (executable)
index 0000000..0bc695d
Binary files /dev/null and b/org.tizen.ui.guides/html/images/edc_masking.png differ
diff --git a/org.tizen.ui.guides/html/images/edje_color.png b/org.tizen.ui.guides/html/images/edje_color.png
new file mode 100755 (executable)
index 0000000..72bd27c
Binary files /dev/null and b/org.tizen.ui.guides/html/images/edje_color.png differ
diff --git a/org.tizen.ui.guides/html/images/edje_message.png b/org.tizen.ui.guides/html/images/edje_message.png
new file mode 100755 (executable)
index 0000000..8f0dcfd
Binary files /dev/null and b/org.tizen.ui.guides/html/images/edje_message.png differ
diff --git a/org.tizen.ui.guides/html/images/edje_object_scales.png b/org.tizen.ui.guides/html/images/edje_object_scales.png
new file mode 100755 (executable)
index 0000000..a79d6de
Binary files /dev/null and b/org.tizen.ui.guides/html/images/edje_object_scales.png differ
diff --git a/org.tizen.ui.guides/html/images/edje_signal1.png b/org.tizen.ui.guides/html/images/edje_signal1.png
new file mode 100755 (executable)
index 0000000..afabbed
Binary files /dev/null and b/org.tizen.ui.guides/html/images/edje_signal1.png differ
diff --git a/org.tizen.ui.guides/html/images/edje_signal2.png b/org.tizen.ui.guides/html/images/edje_signal2.png
new file mode 100755 (executable)
index 0000000..5ba68a2
Binary files /dev/null and b/org.tizen.ui.guides/html/images/edje_signal2.png differ
diff --git a/org.tizen.ui.guides/html/images/edje_text_main.png b/org.tizen.ui.guides/html/images/edje_text_main.png
new file mode 100755 (executable)
index 0000000..9021e98
Binary files /dev/null and b/org.tizen.ui.guides/html/images/edje_text_main.png differ
diff --git a/org.tizen.ui.guides/html/images/efl_complex_clock.png b/org.tizen.ui.guides/html/images/efl_complex_clock.png
new file mode 100755 (executable)
index 0000000..28d02e8
Binary files /dev/null and b/org.tizen.ui.guides/html/images/efl_complex_clock.png differ
diff --git a/org.tizen.ui.guides/html/images/efl_complex_clock_tree.png b/org.tizen.ui.guides/html/images/efl_complex_clock_tree.png
new file mode 100755 (executable)
index 0000000..2703c4a
Binary files /dev/null and b/org.tizen.ui.guides/html/images/efl_complex_clock_tree.png differ
diff --git a/org.tizen.ui.guides/html/images/efl_simple_clock.png b/org.tizen.ui.guides/html/images/efl_simple_clock.png
new file mode 100755 (executable)
index 0000000..62092e6
Binary files /dev/null and b/org.tizen.ui.guides/html/images/efl_simple_clock.png differ
diff --git a/org.tizen.ui.guides/html/images/efl_simple_clock_tree.png b/org.tizen.ui.guides/html/images/efl_simple_clock_tree.png
new file mode 100755 (executable)
index 0000000..9b4a6ed
Binary files /dev/null and b/org.tizen.ui.guides/html/images/efl_simple_clock_tree.png differ
diff --git a/org.tizen.ui.guides/html/images/efllibs.png b/org.tizen.ui.guides/html/images/efllibs.png
new file mode 100755 (executable)
index 0000000..696f6bb
Binary files /dev/null and b/org.tizen.ui.guides/html/images/efllibs.png differ
diff --git a/org.tizen.ui.guides/html/images/elementary_app.png b/org.tizen.ui.guides/html/images/elementary_app.png
new file mode 100755 (executable)
index 0000000..2e86785
Binary files /dev/null and b/org.tizen.ui.guides/html/images/elementary_app.png differ
diff --git a/org.tizen.ui.guides/html/images/email_sample.png b/org.tizen.ui.guides/html/images/email_sample.png
new file mode 100755 (executable)
index 0000000..66204fb
Binary files /dev/null and b/org.tizen.ui.guides/html/images/email_sample.png differ
diff --git a/org.tizen.ui.guides/html/images/empty_window.png b/org.tizen.ui.guides/html/images/empty_window.png
new file mode 100755 (executable)
index 0000000..3fffe12
Binary files /dev/null and b/org.tizen.ui.guides/html/images/empty_window.png differ
diff --git a/org.tizen.guides/html/images/entry.png b/org.tizen.ui.guides/html/images/entry.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/entry.png
rename to org.tizen.ui.guides/html/images/entry.png
diff --git a/org.tizen.guides/html/images/entry2.png b/org.tizen.ui.guides/html/images/entry2.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/entry2.png
rename to org.tizen.ui.guides/html/images/entry2.png
diff --git a/org.tizen.ui.guides/html/images/evas_advanced.png b/org.tizen.ui.guides/html/images/evas_advanced.png
new file mode 100755 (executable)
index 0000000..5cad8b2
Binary files /dev/null and b/org.tizen.ui.guides/html/images/evas_advanced.png differ
diff --git a/org.tizen.ui.guides/html/images/evas_map_effect.png b/org.tizen.ui.guides/html/images/evas_map_effect.png
new file mode 100755 (executable)
index 0000000..3b144eb
Binary files /dev/null and b/org.tizen.ui.guides/html/images/evas_map_effect.png differ
diff --git a/org.tizen.guides/html/images/events.png b/org.tizen.ui.guides/html/images/events.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/events.png
rename to org.tizen.ui.guides/html/images/events.png
diff --git a/org.tizen.ui.guides/html/images/fill_to_parent.png b/org.tizen.ui.guides/html/images/fill_to_parent.png
new file mode 100755 (executable)
index 0000000..12f3fe7
Binary files /dev/null and b/org.tizen.ui.guides/html/images/fill_to_parent.png differ
diff --git a/org.tizen.ui.guides/html/images/first_screen_edc.png b/org.tizen.ui.guides/html/images/first_screen_edc.png
new file mode 100755 (executable)
index 0000000..04d6b7b
Binary files /dev/null and b/org.tizen.ui.guides/html/images/first_screen_edc.png differ
diff --git a/org.tizen.ui.guides/html/images/fit_to_children.png b/org.tizen.ui.guides/html/images/fit_to_children.png
new file mode 100755 (executable)
index 0000000..fcea3a4
Binary files /dev/null and b/org.tizen.ui.guides/html/images/fit_to_children.png differ
diff --git a/org.tizen.ui.guides/html/images/fixed.png b/org.tizen.ui.guides/html/images/fixed.png
new file mode 100755 (executable)
index 0000000..c0eeb6c
Binary files /dev/null and b/org.tizen.ui.guides/html/images/fixed.png differ
diff --git a/org.tizen.ui.guides/html/images/focal_length.png b/org.tizen.ui.guides/html/images/focal_length.png
new file mode 100755 (executable)
index 0000000..789ea75
Binary files /dev/null and b/org.tizen.ui.guides/html/images/focal_length.png differ
diff --git a/org.tizen.ui.guides/html/images/global_scales.png b/org.tizen.ui.guides/html/images/global_scales.png
new file mode 100755 (executable)
index 0000000..849dd6d
Binary files /dev/null and b/org.tizen.ui.guides/html/images/global_scales.png differ
diff --git a/org.tizen.guides/html/images/glview.png b/org.tizen.ui.guides/html/images/glview.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/glview.png
rename to org.tizen.ui.guides/html/images/glview.png
diff --git a/org.tizen.ui.guides/html/images/google_cardboard.png b/org.tizen.ui.guides/html/images/google_cardboard.png
new file mode 100755 (executable)
index 0000000..8ee3877
Binary files /dev/null and b/org.tizen.ui.guides/html/images/google_cardboard.png differ
diff --git a/org.tizen.ui.guides/html/images/grid.png b/org.tizen.ui.guides/html/images/grid.png
new file mode 100755 (executable)
index 0000000..c9d22ae
Binary files /dev/null and b/org.tizen.ui.guides/html/images/grid.png differ
diff --git a/org.tizen.ui.guides/html/images/ico_arr_hidden.gif b/org.tizen.ui.guides/html/images/ico_arr_hidden.gif
new file mode 100755 (executable)
index 0000000..9a9d3ff
Binary files /dev/null and b/org.tizen.ui.guides/html/images/ico_arr_hidden.gif differ
diff --git a/org.tizen.ui.guides/html/images/ico_bullet_2_7.gif b/org.tizen.ui.guides/html/images/ico_bullet_2_7.gif
new file mode 100755 (executable)
index 0000000..8de872c
Binary files /dev/null and b/org.tizen.ui.guides/html/images/ico_bullet_2_7.gif differ
diff --git a/org.tizen.guides/html/images/icon.png b/org.tizen.ui.guides/html/images/icon.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/icon.png
rename to org.tizen.ui.guides/html/images/icon.png
diff --git a/org.tizen.guides/html/images/idlers.png b/org.tizen.ui.guides/html/images/idlers.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/idlers.png
rename to org.tizen.ui.guides/html/images/idlers.png
diff --git a/org.tizen.guides/html/images/image.png b/org.tizen.ui.guides/html/images/image.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/image.png
rename to org.tizen.ui.guides/html/images/image.png
diff --git a/org.tizen.guides/html/images/index.png b/org.tizen.ui.guides/html/images/index.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/index.png
rename to org.tizen.ui.guides/html/images/index.png
diff --git a/org.tizen.guides/html/images/label.png b/org.tizen.ui.guides/html/images/label.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/label.png
rename to org.tizen.ui.guides/html/images/label.png
diff --git a/org.tizen.guides/html/images/list.png b/org.tizen.ui.guides/html/images/list.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/list.png
rename to org.tizen.ui.guides/html/images/list.png
diff --git a/org.tizen.ui.guides/html/images/main_app_layout.png b/org.tizen.ui.guides/html/images/main_app_layout.png
new file mode 100755 (executable)
index 0000000..5ea87a5
Binary files /dev/null and b/org.tizen.ui.guides/html/images/main_app_layout.png differ
diff --git a/org.tizen.guides/html/images/mascot.gif b/org.tizen.ui.guides/html/images/mascot.gif
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/mascot.gif
rename to org.tizen.ui.guides/html/images/mascot.gif
diff --git a/org.tizen.guides/html/images/memory.png b/org.tizen.ui.guides/html/images/memory.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/memory.png
rename to org.tizen.ui.guides/html/images/memory.png
diff --git a/org.tizen.ui.guides/html/images/mn_division.png b/org.tizen.ui.guides/html/images/mn_division.png
new file mode 100755 (executable)
index 0000000..1f7e337
Binary files /dev/null and b/org.tizen.ui.guides/html/images/mn_division.png differ
diff --git a/org.tizen.ui.guides/html/images/mn_icon.png b/org.tizen.ui.guides/html/images/mn_icon.png
new file mode 100755 (executable)
index 0000000..19a0fd3
Binary files /dev/null and b/org.tizen.ui.guides/html/images/mn_icon.png differ
diff --git a/org.tizen.ui.guides/html/images/moving1.png b/org.tizen.ui.guides/html/images/moving1.png
new file mode 100755 (executable)
index 0000000..0aed153
Binary files /dev/null and b/org.tizen.ui.guides/html/images/moving1.png differ
diff --git a/org.tizen.ui.guides/html/images/moving2.png b/org.tizen.ui.guides/html/images/moving2.png
new file mode 100755 (executable)
index 0000000..cc92469
Binary files /dev/null and b/org.tizen.ui.guides/html/images/moving2.png differ
diff --git a/org.tizen.ui.guides/html/images/multi_threading.png b/org.tizen.ui.guides/html/images/multi_threading.png
new file mode 100755 (executable)
index 0000000..2d481f1
Binary files /dev/null and b/org.tizen.ui.guides/html/images/multi_threading.png differ
diff --git a/org.tizen.ui.guides/html/images/multi_threading2.png b/org.tizen.ui.guides/html/images/multi_threading2.png
new file mode 100755 (executable)
index 0000000..ebe0bef
Binary files /dev/null and b/org.tizen.ui.guides/html/images/multi_threading2.png differ
diff --git a/org.tizen.ui.guides/html/images/mw_division.png b/org.tizen.ui.guides/html/images/mw_division.png
new file mode 100755 (executable)
index 0000000..8fc3efa
Binary files /dev/null and b/org.tizen.ui.guides/html/images/mw_division.png differ
diff --git a/org.tizen.ui.guides/html/images/mw_icon.png b/org.tizen.ui.guides/html/images/mw_icon.png
new file mode 100755 (executable)
index 0000000..a089898
Binary files /dev/null and b/org.tizen.ui.guides/html/images/mw_icon.png differ
diff --git a/org.tizen.ui.guides/html/images/mw_icon_optional.png b/org.tizen.ui.guides/html/images/mw_icon_optional.png
new file mode 100755 (executable)
index 0000000..4fbf95b
Binary files /dev/null and b/org.tizen.ui.guides/html/images/mw_icon_optional.png differ
diff --git a/org.tizen.ui.guides/html/images/n_division.png b/org.tizen.ui.guides/html/images/n_division.png
new file mode 100755 (executable)
index 0000000..d687bc5
Binary files /dev/null and b/org.tizen.ui.guides/html/images/n_division.png differ
diff --git a/org.tizen.ui.guides/html/images/object_size_16.png b/org.tizen.ui.guides/html/images/object_size_16.png
new file mode 100755 (executable)
index 0000000..1e560bd
Binary files /dev/null and b/org.tizen.ui.guides/html/images/object_size_16.png differ
diff --git a/org.tizen.ui.guides/html/images/object_size_22.png b/org.tizen.ui.guides/html/images/object_size_22.png
new file mode 100755 (executable)
index 0000000..34e86ed
Binary files /dev/null and b/org.tizen.ui.guides/html/images/object_size_22.png differ
diff --git a/org.tizen.ui.guides/html/images/object_size_44.png b/org.tizen.ui.guides/html/images/object_size_44.png
new file mode 100755 (executable)
index 0000000..2512226
Binary files /dev/null and b/org.tizen.ui.guides/html/images/object_size_44.png differ
diff --git a/org.tizen.ui.guides/html/images/padding-hints.png b/org.tizen.ui.guides/html/images/padding-hints.png
new file mode 100755 (executable)
index 0000000..3f29fae
Binary files /dev/null and b/org.tizen.ui.guides/html/images/padding-hints.png differ
diff --git a/org.tizen.guides/html/images/panes.png b/org.tizen.ui.guides/html/images/panes.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/panes.png
rename to org.tizen.ui.guides/html/images/panes.png
diff --git a/org.tizen.ui.guides/html/images/parent_origin.png b/org.tizen.ui.guides/html/images/parent_origin.png
new file mode 100755 (executable)
index 0000000..0317fe4
Binary files /dev/null and b/org.tizen.ui.guides/html/images/parent_origin.png differ
diff --git a/org.tizen.ui.guides/html/images/path_animation.png b/org.tizen.ui.guides/html/images/path_animation.png
new file mode 100755 (executable)
index 0000000..0a2ca2e
Binary files /dev/null and b/org.tizen.ui.guides/html/images/path_animation.png differ
diff --git a/org.tizen.ui.guides/html/images/perspective_buttons.png b/org.tizen.ui.guides/html/images/perspective_buttons.png
new file mode 100755 (executable)
index 0000000..60c4fcc
Binary files /dev/null and b/org.tizen.ui.guides/html/images/perspective_buttons.png differ
diff --git a/org.tizen.ui.guides/html/images/perspective_screen.png b/org.tizen.ui.guides/html/images/perspective_screen.png
new file mode 100755 (executable)
index 0000000..f761980
Binary files /dev/null and b/org.tizen.ui.guides/html/images/perspective_screen.png differ
diff --git a/org.tizen.ui.guides/html/images/perspective_swallow.png b/org.tizen.ui.guides/html/images/perspective_swallow.png
new file mode 100755 (executable)
index 0000000..298bf9b
Binary files /dev/null and b/org.tizen.ui.guides/html/images/perspective_swallow.png differ
diff --git a/org.tizen.guides/html/images/popup.png b/org.tizen.ui.guides/html/images/popup.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/popup.png
rename to org.tizen.ui.guides/html/images/popup.png
diff --git a/org.tizen.ui.guides/html/images/push_button.png b/org.tizen.ui.guides/html/images/push_button.png
new file mode 100755 (executable)
index 0000000..08a8ef2
Binary files /dev/null and b/org.tizen.ui.guides/html/images/push_button.png differ
diff --git a/org.tizen.guides/html/images/radio.png b/org.tizen.ui.guides/html/images/radio.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/radio.png
rename to org.tizen.ui.guides/html/images/radio.png
diff --git a/org.tizen.ui.guides/html/images/radio_button.png b/org.tizen.ui.guides/html/images/radio_button.png
new file mode 100755 (executable)
index 0000000..496adf3
Binary files /dev/null and b/org.tizen.ui.guides/html/images/radio_button.png differ
diff --git a/org.tizen.ui.guides/html/images/radio_state_changes.png b/org.tizen.ui.guides/html/images/radio_state_changes.png
new file mode 100755 (executable)
index 0000000..39cbffb
Binary files /dev/null and b/org.tizen.ui.guides/html/images/radio_state_changes.png differ
diff --git a/org.tizen.ui.guides/html/images/rel1_rel2_offsets.png b/org.tizen.ui.guides/html/images/rel1_rel2_offsets.png
new file mode 100755 (executable)
index 0000000..bacdaab
Binary files /dev/null and b/org.tizen.ui.guides/html/images/rel1_rel2_offsets.png differ
diff --git a/org.tizen.ui.guides/html/images/rel1_rel2_offsets_and_relative.png b/org.tizen.ui.guides/html/images/rel1_rel2_offsets_and_relative.png
new file mode 100755 (executable)
index 0000000..51a9ec7
Binary files /dev/null and b/org.tizen.ui.guides/html/images/rel1_rel2_offsets_and_relative.png differ
diff --git a/org.tizen.ui.guides/html/images/removing_padding.png b/org.tizen.ui.guides/html/images/removing_padding.png
new file mode 100755 (executable)
index 0000000..2a5dbfe
Binary files /dev/null and b/org.tizen.ui.guides/html/images/removing_padding.png differ
diff --git a/org.tizen.ui.guides/html/images/scalable_group1.png b/org.tizen.ui.guides/html/images/scalable_group1.png
new file mode 100755 (executable)
index 0000000..c9a6830
Binary files /dev/null and b/org.tizen.ui.guides/html/images/scalable_group1.png differ
diff --git a/org.tizen.ui.guides/html/images/scalable_group2.png b/org.tizen.ui.guides/html/images/scalable_group2.png
new file mode 100755 (executable)
index 0000000..88a2d5f
Binary files /dev/null and b/org.tizen.ui.guides/html/images/scalable_group2.png differ
diff --git a/org.tizen.guides/html/images/scale.png b/org.tizen.ui.guides/html/images/scale.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/scale.png
rename to org.tizen.ui.guides/html/images/scale.png
diff --git a/org.tizen.ui.guides/html/images/scale_testing_app.png b/org.tizen.ui.guides/html/images/scale_testing_app.png
new file mode 100755 (executable)
index 0000000..bd71b4f
Binary files /dev/null and b/org.tizen.ui.guides/html/images/scale_testing_app.png differ
diff --git a/org.tizen.ui.guides/html/images/scale_values.png b/org.tizen.ui.guides/html/images/scale_values.png
new file mode 100755 (executable)
index 0000000..84587f8
Binary files /dev/null and b/org.tizen.ui.guides/html/images/scale_values.png differ
diff --git a/org.tizen.ui.guides/html/images/scale_values2.png b/org.tizen.ui.guides/html/images/scale_values2.png
new file mode 100755 (executable)
index 0000000..9770638
Binary files /dev/null and b/org.tizen.ui.guides/html/images/scale_values2.png differ
diff --git a/org.tizen.ui.guides/html/images/scrollview.png b/org.tizen.ui.guides/html/images/scrollview.png
new file mode 100755 (executable)
index 0000000..f302903
Binary files /dev/null and b/org.tizen.ui.guides/html/images/scrollview.png differ
diff --git a/org.tizen.ui.guides/html/images/setting_sd.png b/org.tizen.ui.guides/html/images/setting_sd.png
new file mode 100755 (executable)
index 0000000..fd39a6e
Binary files /dev/null and b/org.tizen.ui.guides/html/images/setting_sd.png differ
diff --git a/org.tizen.ui.guides/html/images/show_frametime.png b/org.tizen.ui.guides/html/images/show_frametime.png
new file mode 100755 (executable)
index 0000000..04c1066
Binary files /dev/null and b/org.tizen.ui.guides/html/images/show_frametime.png differ
diff --git a/org.tizen.ui.guides/html/images/signal_slot.png b/org.tizen.ui.guides/html/images/signal_slot.png
new file mode 100755 (executable)
index 0000000..18d2f4e
Binary files /dev/null and b/org.tizen.ui.guides/html/images/signal_slot.png differ
diff --git a/org.tizen.guides/html/images/slider.png b/org.tizen.ui.guides/html/images/slider.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/slider.png
rename to org.tizen.ui.guides/html/images/slider.png
diff --git a/org.tizen.guides/html/images/spin.png b/org.tizen.ui.guides/html/images/spin.png
old mode 100644 (file)
new mode 100755 (executable)
similarity index 100%
rename from org.tizen.guides/html/images/spin.png
rename to org.tizen.ui.guides/html/images/spin.png
diff --git a/org.tizen.ui.guides/html/images/spiral.png b/org.tizen.ui.guides/html/images/spiral.png
new file mode 100755 (executable)
index 0000000..05f4f02
Binary files /dev/null and b/org.tizen.ui.guides/html/images/spiral.png differ
diff --git a/org.tizen.ui.guides/html/images/stereo_projection.png b/org.tizen.ui.guides/html/images/stereo_projection.png
new file mode 100755 (executable)
index 0000000..bb7ec22
Binary files /dev/null and b/org.tizen.ui.guides/html/images/stereo_projection.png differ
diff --git a/org.tizen.ui.guides/html/images/tableview.png b/org.tizen.ui.guides/html/images/tableview.png
new file mode 100755 (executable)
index 0000000..46f4b71
Binary files /dev/null and b/org.tizen.ui.guides/html/images/tableview.png differ
diff --git a/org.tizen.ui.guides/html/images/text_class_list.png b/org.tizen.ui.guides/html/images/text_class_list.png
new file mode 100755 (executable)
index 0000000..51abc95
Binary files /dev/null and b/org.tizen.ui.guides/html/images/text_class_list.png differ
diff --git a/org.tizen.ui.guides/html/images/text_class_list_del.png b/org.tizen.ui.guides/html/images/text_class_list_del.png
new file mode 100755 (executable)
index 0000000..967cfa8
Binary files /dev/null and b/org.tizen.ui.guides/html/images/text_class_list_del.png differ
diff --git a/org.tizen.ui.guides/html/images/text_class_properties.png b/org.tizen.ui.guides/html/images/text_class_properties.png
new file mode 100755 (executable)
index 0000000..146d0c9
Binary files /dev/null and b/org.tizen.ui.guides/html/images/text_class_properties.png differ
diff --git a/org.tizen.ui.guides/html/images/text_screen_2.png b/org.tizen.ui.guides/html/images/text_screen_2.png
new file mode 100755 (executable)
index 0000000..8062f32
Binary files /dev/null and b/org.tizen.ui.guides/html/images/text_screen_2.png differ
diff --git a/org.tizen.ui.guides/html/images/textfield.png b/org.tizen.ui.guides/html/images/textfield.png
new file mode 100755 (executable)
index 0000000..8da1e07
Binary files /dev/null and b/org.tizen.ui.guides/html/images/textfield.png differ
diff --git a/org.tizen.ui.guides/html/images/textlabel.png b/org.tizen.ui.guides/html/images/textlabel.png
new file mode 100755 (executable)
index 0000000..d91cca2
Binary files /dev/null and b/org.tizen.ui.guides/html/images/textlabel.png differ
diff --git a/org.tizen.ui.guides/html/images/ui_control_hierarchy.png b/org.tizen.ui.guides/html/images/ui_control_hierarchy.png
new file mode 100755 (executable)
index 0000000..f45a416
Binary files /dev/null and b/org.tizen.ui.guides/html/images/ui_control_hierarchy.png differ
diff --git a/org.tizen.ui.guides/html/images/ui_controls.png b/org.tizen.ui.guides/html/images/ui_controls.png
new file mode 100755 (executable)
index 0000000..f5daefb
Binary files /dev/null and b/org.tizen.ui.guides/html/images/ui_controls.png differ
diff --git a/org.tizen.ui.guides/html/images/use_natural_size.png b/org.tizen.ui.guides/html/images/use_natural_size.png
new file mode 100755 (executable)
index 0000000..d314b04
Binary files /dev/null and b/org.tizen.ui.guides/html/images/use_natural_size.png differ
diff --git a/org.tizen.ui.guides/html/images/using_clipper.png b/org.tizen.ui.guides/html/images/using_clipper.png
new file mode 100755 (executable)
index 0000000..e249cc9
Binary files /dev/null and b/org.tizen.ui.guides/html/images/using_clipper.png differ
diff --git a/org.tizen.ui.guides/html/images/using_clipper2.png b/org.tizen.ui.guides/html/images/using_clipper2.png
new file mode 100755 (executable)
index 0000000..89ee144
Binary files /dev/null and b/org.tizen.ui.guides/html/images/using_clipper2.png differ
diff --git a/org.tizen.ui.guides/html/images/w_division.png b/org.tizen.ui.guides/html/images/w_division.png
new file mode 100755 (executable)
index 0000000..88d9959
Binary files /dev/null and b/org.tizen.ui.guides/html/images/w_division.png differ
diff --git a/org.tizen.ui.guides/html/images/wn_division.png b/org.tizen.ui.guides/html/images/wn_division.png
new file mode 100755 (executable)
index 0000000..11a7876
Binary files /dev/null and b/org.tizen.ui.guides/html/images/wn_division.png differ
diff --git a/org.tizen.ui.guides/html/images/wn_icon.png b/org.tizen.ui.guides/html/images/wn_icon.png
new file mode 100755 (executable)
index 0000000..bb5c915
Binary files /dev/null and b/org.tizen.ui.guides/html/images/wn_icon.png differ
diff --git a/org.tizen.ui.guides/html/images/ww_division.png b/org.tizen.ui.guides/html/images/ww_division.png
new file mode 100755 (executable)
index 0000000..65e7ab7
Binary files /dev/null and b/org.tizen.ui.guides/html/images/ww_division.png differ
diff --git a/org.tizen.ui.guides/html/images/ww_icon.png b/org.tizen.ui.guides/html/images/ww_icon.png
new file mode 100755 (executable)
index 0000000..40de988
Binary files /dev/null and b/org.tizen.ui.guides/html/images/ww_icon.png differ
diff --git a/org.tizen.ui.guides/html/images/ww_icon_optional.png b/org.tizen.ui.guides/html/images/ww_icon_optional.png
new file mode 100755 (executable)
index 0000000..464ba76
Binary files /dev/null and b/org.tizen.ui.guides/html/images/ww_icon_optional.png differ
diff --git a/org.tizen.ui.guides/html/index.htm b/org.tizen.ui.guides/html/index.htm
new file mode 100755 (executable)
index 0000000..e93a5b0
--- /dev/null
+++ b/org.tizen.ui.guides/html/index.htm
@@ -0,0 +1,243 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="css/snippet.css" />
+    <script type="text/javascript" src="scripts/snippet.js"></script>
+    <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
+
+    <title>UI Guides</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1><a href="cover_page.htm">UI Guides</a></h1>
+
+<h2><a href="web/guides_w.htm">Web Application</a></h2>
+       <ul>
+               <li><a href="web/tau/guides_tau_w.htm">TAU</a>
+                       <ul>
+                               <li><a href="web/tau/helloworld_w.htm">Hello World</a></li>
+                               <li><a href="web/tau/managing_page_w.htm">Managing Pages</a></li>
+                               <li><a href="web/tau/event_handling_w.htm">Event Handling</a></li>
+                               <li><a href="web/tau/ui_component_w.htm">UI Components</a></li>
+                               <li><a href="web/tau/notepad_w.htm">Creating a UI</a></li>
+                               <li><a href="web/tau/circular_ui_ww.htm">Circular UI</a>
+                                       <ul>
+                                               <li><a href="web/tau/list_ww.htm">List</a></li>
+                                               <li><a href="web/tau/helper_ww.htm">Helper Script</a></li>
+                                               <li><a href="web/tau/header_ww.htm">Header</a></li>
+                                               <li><a href="web/tau/circle_progressbar_ww.htm">Circle Progress Bar</a></li>
+                                               <li><a href="web/tau/processing_ww.htm">Processing</a></li>
+                                               <li><a href="web/tau/moreoptions_ww.htm">More Options</a></li>
+                                               <li><a href="web/tau/footerbutton_ww.htm">Footer Button</a></li>
+                                               <li><a href="web/tau/thumbnail_ww.htm">Thumbnail</a></li>               
+                                               <li><a href="web/tau/popup_ww.htm">Popup</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="web/tau/accessibility_w.htm">Accessibility</a></li>
+                               <li><a href="web/tau/globalization_w.htm">Globalization</a></li>
+                       </ul>
+               </li>
+               <li><a href="web/w3c/guides_w3c_w.htm">W3C</a>
+                       <ul>
+                               <li><a href="web/w3c/html_priority_w.htm">HTML Priorities</a></li>
+                               <li><a href="web/w3c/media_query_w.htm">Media Queries</a></li>
+                               <li><a href="web/w3c/multiple_screens_mw.htm">Multiple Screen Support</a></li>
+                               <li><a href="web/w3c/ui_layout_ww.htm">Multiple UI Layouts</a></li>
+                               <li><a href="web/w3c/frame_flattening_mw.htm">Frame Flattening</a></li>
+                               <li><a href="web/w3c/clipboard_mw.htm">Clipboard API and events</a></li>
+                               <li><a href="web/w3c/transform_w.htm">CSS Transforms</a></li>
+                               <li><a href="web/w3c/animation_w.htm">CSS Animations Module Level 3</a></li>
+                               <li><a href="web/w3c/transition_w.htm">CSS Transitions Module Level 3</a></li>
+                               <li><a href="web/w3c/color_w.htm">CSS Color Module Level 3</a></li>
+                               <li><a href="web/w3c/background_w.htm">CSS Backgrounds and Borders Module Level 3</a></li>
+                               <li><a href="web/w3c/flexible_w.htm">CSS Flexible Box Layout Module</a></li>
+                               <li><a href="web/w3c/multi_mw.htm">CSS Multi-column Layout Module</a></li>
+                               <li><a href="web/w3c/text_module_w.htm">CSS Text Module Level 3</a></li>
+                               <li><a href="web/w3c/basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></li>
+                               <li><a href="web/w3c/font_w.htm">CSS Fonts Module Level 3</a></li>              
+                               <li><a href="web/w3c/woff_w.htm">WOFF File Format 1.0</a></li>  
+                       </ul>
+               </li>           
+       </ul>
+
+<h2><a href="native/guides_n.htm">Native Application</a></h2>
+       <ul>
+               <li><a href="native/efl/guides_efl_n.htm">EFL</a>
+                       <ul>            
+                               <li><a href="native/efl/efl_overview_n.htm">EFL Overview</a></li>
+                               <li><a href="native/efl/ui_components_n.htm">UI Components</a>
+                                       <ul>
+                                               <li><a href="native/efl/ui_components_mn.htm">Mobile UI Components</a>
+                                               <ul>
+                                                       <li><a href="native/efl/components_mn.htm">Using Mobile UI Components</a></li>
+                                                       <li><a href="native/efl/basic_tutorial_mn.htm">Creating Basic Mobile Interactions</a></li>
+                                                       <li><a href="native/efl/genlist_tutorial_mn.htm">Creating Mobile Genlists</a></li>
+                                                       <li><a href="native/efl/menu_tutorial_mn.htm">Creating Mobile Menus</a></li>
+                                               </ul>
+                                               </li>
+                                               <li><a href="native/efl/ui_components_wn.htm">Wearable UI Components</a>
+                                               <ul>
+                                                       <li><a href="native/efl/components_wn.htm">Using Wearable UI Components</a></li>
+                                                       <li><a href="native/efl/button_tutorial_wn.htm">Creating Wearable Buttons</a></li>
+                                                       <li><a href="native/efl/datetime_tutorial_wn.htm">Creating Wearable Datetimes</a></li>
+                                                       <li><a href="native/efl/genlist_tutorial_wn.htm">Creating Wearable Genlists</a></li>
+                                                       <li><a href="native/efl/popup_tutorial_wn.htm">Creating Wearable Popups</a></li>
+                                                       <li><a href="native/efl/circle_components_wn.htm">Creating Wearable Circle Components</a></li>
+                                               </ul>
+                                               </li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/component_infra_n.htm">UI Component Infrastructure Modules</a>
+                                       <ul>
+                                               <li><a href="native/efl/component_focus_n.htm">Managing Component Focus</a></li>
+                                               <li><a href="native/efl/component_custom_n.htm">Customizing Components</a></li>
+                                               <li><a href="native/efl/touch_gesture_n.htm">Handling Component Touch Gestures</a></li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/ui_containers_n.htm">UI Containers</a>
+                                       <ul>
+                                               <li><a href="native/efl/containers_n.htm">Using Container UI Components</a></li>
+                                               <li><a href="native/efl/form_tutorial_n.htm">Creating a Form for a Basic Application Layout</a></li>
+                                               <li><a href="native/efl/naviframe_tutorial_n.htm">Creating a Naviframe for Navigation</a></li>
+                                               <li><a href="native/efl/layout_tutorial_n.htm">Creating UI Screen Layouts</a></li>
+                                               <li><a href="native/efl/panes_tutorial_mn.htm">Creating Panes</a></li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/theme_n.htm">Themes</a>
+                                       <ul>
+                                               <li><a href="native/efl/edje_intro_n.htm">Introduction to EDC Programming</a></li>
+                                               <li><a href="native/efl/edc_positioning_n.htm">Positioning Parts with the EDC File</a></li>
+                                               <li><a href="native/efl/edc_part_block_n.htm">EDJE Data Collection Reference</a></li>
+                                               <li><a href="native/efl/edc_optimization_n.htm">Optimizing EDC</a></li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/edje_objects_n.htm">Edje Objects</a>
+                                       <ul>
+                                               <li><a href="native/efl/edje_files_n.htm">Handling Edje Files</a></li>
+                                               <li><a href="native/efl/edje_scaling_n.htm">Scaling Edje Objects</a></li>
+                                               <li><a href="native/efl/edje_color_n.htm">Using Edje Color Classes</a></li>
+                                               <li><a href="native/efl/edje_text_n.htm">Using Edje Text Classes</a></li>
+                                               <li><a href="native/efl/edje_perspective_n.htm">Using Edje Perspective</a></li>
+                                               <li><a href="native/efl/edje_message_signal_n.htm">Managing Signals and Messages</a></li>
+                                               <li><a href="native/efl/edje_manage_animation_n.htm">Managing Edje Animations</a></li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/font_setting_n.htm">Fonts</a></li>
+                               <li><a href="native/efl/ui_scalability_n.htm">Scaling</a>
+                                       <ul>
+                                               <li><a href="native/efl/multiple_screens_n.htm">Multiple Screen Support</a></li>
+                                               <li><a href="native/efl/scalability_n.htm">Scalability Support</a></li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/notification_window_n.htm">Notification Windows</a></li>
+                               <li><a href="native/efl/core_loop_n.htm">Core Loop and OS Interfacing</a>
+                                       <ul>
+                                               <li><a href="native/efl/main_loop_n.htm">Handling the Main Loop</a></li>
+                                               <li><a href="native/efl/threads_n.htm">Using Threads</a></li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/graphical_objects_n.htm">Graphical Objects</a>
+                                       <ul>
+                                               <li><a href="native/efl/evas_objects_n.htm">Evas Objects</a></li>
+                                               <li><a href="native/efl/evas_rendering_n.htm">Evas Rendering Concept and Method</a></li>
+                                               <li><a href="native/efl/evas_basic_objects_n.htm">Basic Manipulation of Evas Objects</a></li>
+                                               <li><a href="native/efl/evas_advanced_objects_n.htm">Advanced Manipulation of Evas Objects</a></li>
+                                               <li><a href="native/efl/evas_optimization_n.htm">Optimizing Evas</a></li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/event_handling_n.htm">Event Handling</a>
+                                       <ul>
+                                               <li><a href="native/efl/event_types_n.htm">Event Types</a></li>
+                                               <li><a href="native/efl/multipoint_touch_n.htm">Tracking Multi-point Touch Events</a></li>
+                                       </ul>                           
+                               </li>
+                               <li><a href="native/efl/animation_effects_n.htm">Animations and Effects</a>
+                                       <ul>
+                                               <li><a href="native/efl/ecore_animation_n.htm">Ecore Animations</a></li>
+                                               <li><a href="native/efl/ecore_animation_tutorial_n.htm">Creating Ecore Animations</a></li>
+                                               <li><a href="native/efl/edje_animation_n.htm">Edje Animations</a></li>
+                                               <li><a href="native/efl/edje_animation_tutorial_n.htm">Creating Edje Animations</a></li>
+                                               <li><a href="native/efl/elementary_animation_n.htm">Elementary Animations</a></li>
+                                               <li><a href="native/efl/elementary_animation_tutorial_n.htm">Creating Elementary Animations</a></li>
+                                               <li><a href="native/efl/elementary_transit_effect_tutorial_n.htm">Creating Elementary Transit Effects</a></li>
+                                               <li><a href="native/efl/evas_map_animation_n.htm">Evas Map Effects</a></li>
+                                               <li><a href="native/efl/evas_map_effects_n.htm">Creating Evas Map Effects</a></li>
+                                       </ul>                           
+                               </li>                           
+                               <li><a href="native/efl/data_types_tools_n.htm">Data Types and Tools</a>
+                                       <ul>
+                                               <li><a href="native/efl/data_types_n.htm">Data Types</a></li>
+                                               <li><a href="native/efl/tools_n.htm">Tools</a></li>
+                                       </ul>                           
+                               </li>   
+                               <li><a href="native/efl/hw_input_n.htm">Hardware Input Handling: Managing Hardware Events with EFL Extension</a>
+                                       <ul>
+                                               <li><a href="native/efl/key_events_n.htm">Managing Menu and Back Key Events</a></li>
+                                               <li><a href="native/efl/rotary_events_n.htm">Managing Rotary Events</a></li>
+                                       </ul>                           
+                               </li>                           
+                       </ul>
+               </li>
+               <li><a href="native/dali/guides_dali_n.htm">DALi</a>
+                       <ul>
+                               <li><a href="native/dali/dali_overview_n.htm">DALi Overview</a></li>
+                               <li><a href="native/dali/actors_n.htm">Actors</a></li>
+                               <li><a href="native/dali/event_handling_n.htm">Event Handling</a></li>
+                               <li><a href="native/dali/ui_components_n.htm">UI Components</a>
+                                       <ul>
+                                               <li><a href="native/dali/buttons_n.htm">Buttons</a></li>
+                                               <li><a href="native/dali/itemview_n.htm">ItemView</a></li>
+                                               <li><a href="native/dali/scrollview_n.htm">ScrollView</a></li>
+                                               <li><a href="native/dali/tableview_n.htm">TableView</a></li>
+                                               <li><a href="native/dali/textfield_n.htm">TextField</a></li>
+                                               <li><a href="native/dali/textlabel_n.htm">TextLabel</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="native/dali/animation_n.htm">Animations</a>
+                                       <ul>
+                                               <li><a href="native/dali/basic_framework_n.htm">Basic Framework</a></li>
+                                               <li><a href="native/dali/advanced_animation_n.htm">Advanced Animations</a></li>
+                                               <li><a href="native/dali/constraints_n.htm">Constraints</a></li>
+                                               <li><a href="native/dali/multi_threading_n.htm">Multi-threading</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="native/dali/dali_applications_n.htm">DALi Applications</a></li>
+                               <li><a href="native/dali/resources_n.htm">Resources</a></li>
+                               <li><a href="native/dali/rendering_effects_n.htm">Rendering and Effects</a></li>
+                       </ul>
+               </li>
+       </ul>
+
+<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="scripts/showhide.js"></script>
+</div></div></div>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/dali/actors_n.htm b/org.tizen.ui.guides/html/native/dali/actors_n.htm
new file mode 100755 (executable)
index 0000000..825357a
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/actors_n.htm
@@ -0,0 +1,396 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Actors: Working with Basic DALi Components</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#basics">Actor Basics</a></li>\r
+                       <li><a href="#layout">Layout Management</a></li>\r
+                       <li><a href="#image">Image Actor</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>                   \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Actors: Working with Basic DALi Components</h1>\r
+\r
+<p>Actor is the primary object in DALi application.</p>\r
+\r
+<h2 id="basics" name="basics">Actor Basics</h2>\r
+\r
+\r
+<p>Actor is the basic component that composes the entire scene. It can have visible (for example, UI components, image actor) or invisible (for example, camera actor or layer) forms.</p>\r
+<p>Actor is also the primary object with which DALi applications interact. Multiple types of event signals provided by actors can be handled in a application through user-defined callback functions.</p>\r
+\r
+<h3 id="actors" name="actors">Actors and Stage</h3>\r
+\r
+<p>Stage is a top-level object that represents the entire scene or screen. It is used for displaying a hierarchy of actors managed by the <a href="http://en.wikipedia.org/wiki/Scene_graph" target="_blank">scene graph</a> structure. An actor inherits a position relative to its parent, and can be moved in relation to this point.</p>\r
+\r
+<p>To display the contents of an actor, it must be added to a stage. The following example shows how to connect a new actor to the stage:</p>\r
+\r
+<pre class="prettyprint">Actor actor = Actor::New();\r
+Stage::GetCurrent().Add(actor);\r
+</pre>\r
+\r
+<h3 id="coordinate" name="coordinate">Coordinate System</h3>\r
+\r
+<p>The stage has a 2D size that matches the size of the application window. The default unit 1 is 1 pixel with default camera.</p>\r
+\r
+<p>DALi uses a left-handed coordinate system with the origin at the top-left corner, with positive X to right, positive Y going downwards, and positive Z going outside the screen. This is convenient when creating 2D views.</p>\r
+\r
+<p class="figure">Figure: DALi coordinate system</p>  \r
+       <p align="center"><img alt="DALi coordinate system" src="../../images/actor_coordinates.png"/></p> \r
+       \r
+       \r
+<h3 id="position" name="position">Positioning Actors</h3>\r
+<p>An actor inherits its parent&#39;s position. The relative position between the actor &amp; parent is determined by the following properties:</p>\r
+<ul>\r
+<li>Parent origin\r
+<p>This Vector3 property defines a point within the parent actor&#39;s area.</p>\r
+\r
+<p class="figure">Figure: Parent origin</p>  \r
+       <p align="center"><img alt="Parent origin" src="../../images/parent_origin.png"/></p> \r
+ \r
+<p>The default is top-left, which can be visualized in 2D as (0, 0), but is actually Vector3 (0, 0, 0.5) in the 3D DALi world. The actor position is relative to this point.</p></li>\r
+<li>Anchor point\r
+<p>This Vector3 property defines a point within the child actor area.</p>\r
+\r
+<p class="figure">Figure: Anchor point</p>  \r
+       <p align="center"><img alt="Anchor point" src="../../images/anchor_point.png"/></p> \r
+ \r
+<p>The default is center, which can be visualized in 2D as (0.5, 0.5), but is actually Vector3 (0.5, 0.5, 0.5) in the 3D DALi world. The actor position is also relative to this point.</p></li>\r
+\r
+<li>Position\r
+<p>This is the position vector between the parent origin and anchor point.</p>\r
+\r
+<p class="figure">Figure: Position</p>  \r
+       <p align="center"><img alt="Position" src="../../images/actor_position.png"/></p> \r
+ \r
+<p>By default, an actor&#39;s position is the distance between its center and the top-left corner of its parent.</p>\r
+\r
+<p>An actor added directly to the stage with position (X = stageWidth*0.5, Y = stageHeight*0.5) appears in the center of the screen. Likewise, an actor with the position (X = actorWidth*0.5, Y = actorWidth*0.5) appears at the top-left corner of the screen.</p>\r
+\r
+<p>Since DALi is a 3D toolkit, this behavior is the result of a default perspective camera setup.</p> \r
+\r
+</li>\r
+</ul> \r
+\r
+<h3 id="event" name="event">Event Handling for Actors</h3>\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides following event signals:</p> \r
+\r
+<table>\r
+   <caption>\r
+     Table: Event signals\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Event signal</th>\r
+     <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>\r
+     <td>This signal is emitted when a touch input is received.</td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>\r
+     <td>This signal is emitted when a hover input is received.</td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">WheelEventSignal()</span></td>\r
+     <td>This signal is emitted when a wheel event is received.</td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">OnStageSignal()</span></td>\r
+     <td>This signal is emitted after the actor has been connected to the stage.</td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">OffStageSignal()</span></td>\r
+     <td>This signal is emitted after the actor has been disconnected from the stage.</td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">OnRelayoutSignal()</span></td>\r
+     <td>This signal is emitted after the size has been set on the actor during relayout.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<p>For example, a touch event can be handled as follows:</p> \r
+<pre class="prettyprint">bool OnTouch(Actor actor, const TouchEvent&amp; touch)\r
+{\r
+&nbsp;&nbsp;&nbsp;bool handled = false;\r
+\r
+&nbsp;&nbsp;&nbsp;switch(touch.GetPointCount())\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1: // Single touch\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (touch.GetPoint(0).GetState == TouchPoint::Down)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do action when first touches the touch screen.\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handled = true;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 2: // Multi-touch event\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return handled;&nbsp;&nbsp;&nbsp;// true if the operation was successful\r
+}\r
+\r
+// Elsewhere\r
+Actor actor = Actor::New();\r
+actor.TouchedSignal().Connect(&amp;OnTouch);</pre>\r
+\r
+<p>For more information, see <a href="event_handling_n.htm">Event Handling</a>.</p> \r
+\r
+<h2 id="layout" name="layout">Layout Management</h2>\r
+\r
+<p>DALi provides rule-based layout management, size negotiation, which is used to allocate the sizes of the actors on the stage based on rules of dependency between the actors.</p> \r
+\r
+<h3 id="dimension" name="dimension">Dimensions</h3>\r
+<p>The notion of width and height is generalized into the concept of a dimension. Several methods take the <span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <span style="font-family: Courier New,Courier,monospace;">Dimension</span> enum specifies the available dimensions as bit fields:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>\r
+</ul>\r
+<p>If a method can process width and height at the same time, the <span style="font-family: Courier New,Courier,monospace;">Dimension::ALL_DIMENSIONS</span> mask can be specified.</p> \r
+\r
+<h3 id="resize" name="resize">Resize Policies</h3>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">ResizePolicy</span> enum specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: Resizing rules\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Resize policy</th>\r
+     <th>Description</th>\r
+        <th>Illustration</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIXED</span></td>\r
+     <td>Use this option to maintain a specific size as set by the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function. This is the default for all actors.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fixed.png" /></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::USE_NATURAL_SIZE</span></td>\r
+     <td>Use this option for objects, such as images or text to get their natural size. This can mean the dimensions of an image or the size of text with no wrapping. You can also use this option with table views when the size of the table depends on its children.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/use_natural_size.png" /></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span></td>\r
+     <td>The size of the actor is similar to its parent&#39;s size with proportionate filling considered.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fill_to_parent.png" /></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_RELATIVE_TO_PARENT</span></td>\r
+     <td>The size of the actor is similar to its parent&#39;s size with a relative scale. Use the <span style="font-family: Courier New,Courier,monospace;">SetSizeModeFactor()</span> function to specify the ratio.</td>\r
+        <td style="text-align:center;"></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</span></td>\r
+     <td>The size of the actor is similar to its parent&#39;s size with a fixed offset using the SetSizeModeFactor function.</td>\r
+        <td style="text-align:center;"></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span></td>\r
+     <td>The size of the actor is scaled around the size of the its children. For example, the height of a pop-up can be resized according to its contents.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fit_to_children.png" /></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span></td>\r
+     <td>This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/dimension_dependency.png" /></td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+\r
+<h3 id="example" name="example">Example with Actors</h3>\r
+\r
+<p>This section describes a layout example with a actor.</p> \r
+\r
+<h4>Enabling Size Negotiation</h4>\r
+\r
+<p>Text and image actors have relayout enabled by default, while plain actors are disabled unless the <span style="font-family: Courier New,Courier,monospace;">SetResizePolicy()</span> function is called.</p> \r
+\r
+<h4>Specifying Size Policies</h4>\r
+\r
+<p>Actors have different size policies by default. For example, the  image actor is set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span>. This ensures that an image actor uses its natural size by default when it is placed on the stage. However, if the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function is used with sizes other than 0 on the image actor, the current resize policy is overridden by the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> policy and the actor takes the specified size.</p> \r
+\r
+<p>You can specify how an actor is size-negotiated:</p> \r
+\r
+<pre class="prettyprint">void SetResizePolicy(ResizePolicy::Type policy, Dimension::Type dimension) @endcode</pre>\r
+\r
+<p>It is possible to specify different policies for the different dimensions of width and height to archive different layouts. Different actors have different resize policies specified. For example, image actors are set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> by default.</p> \r
+\r
+<p>The following example shows the <span style="font-family: Courier New,Courier,monospace;">rootActor</span> with its width set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span> and its height set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. It has an image actor added to it with an explicit call to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> in both dimensions called on it. This creates an actor that fills the space of its parent in the width dimension and fits its child in the height dimension. As the image actor child is using its natural size, the height of the root actor fits the height of the child image.</p> \r
+\r
+<pre class="prettyprint">Actor rootActor = Actor::New();\r
+rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
+rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);\r
+ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));\r
+image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);\r
+rootActor.Add(image);</pre>\r
+\r
+<p>The following images show the before and after layouts for this code example.</p>\r
+\r
+<p class="figure">Figure: Before and after setting the resize policy</p>  \r
+       <p align="center"><img alt="Before and after setting the resize policy" src="../../images/before_resize.png"/></p>\r
+       <p align="center"><img alt="Before and after setting the resize policy" src="../../images/after_resize.png"/></p> \r
+\r
+\r
+<p>This example shows a root actor set to expand to its parent&#39;s width and adjust around its child&#39;s height. The child image actor is set to its natural size.</p> \r
+\r
+<p>To specify that a dimension has a dependency on another dimension, use the <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> policy. For example, if the dimension is <span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span> and the dependency is <span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span>, there is a height-for-width dependency in effect. You can use the policy in a text view that wraps its text. The following example  shows a text view that expands its width according to the size of its parent, wraps its contents and then determines its height based on the width.</p> \r
+\r
+<pre class="prettyprint">TextLabel text = TextLabel::New(&quot;Example&quot;);\r
+text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
+text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);</pre>\r
+\r
+<h4>Specifying Sizes and Size Limits</h4>\r
+\r
+<p>To specify a fixed size for an actor, use the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> resize policy and set the desired size using the SetSize function. If only 1 dimension is <span style="font-family: Courier New,Courier,monospace;">FIXED</span>, the other value in the size parameter is ignored, so it is safe to set it to 0.</p>\r
+<p>To constrain the final negotiated size of an actor, set the following minimum and maximum sizes, respectively:</p> \r
+\r
+<pre class="prettyprint">void SetMinimumSize(const Vector2&amp; size)\r
+void SetMaximumSize(const Vector2&amp; size)</pre>\r
+\r
+<h4>Adjusting the Negotiated Size</h4>\r
+\r
+<p>When an actor must to maintain the aspect ratio of its natural size, use the <span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy()</span> function. This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>\r
+<p>You can use the following resize policies:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>\r
+<p>This is the default policy.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FIT_WITH_ASPECT_RATIO</span>\r
+<p>Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FILL_WITH_ASPECT_RATIO</span>\r
+<p>Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.</p></li>\r
+</ul>\r
+\r
+<pre class="prettyprint">void SetSizeScalePolicy(SizeScalePolicy::Type policy)</pre>\r
+\r
+<h4>Using Actors in Containers</h4>\r
+\r
+<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor. The padding specifies the left, right, bottom, and top padding value.</p> \r
+\r
+<pre class="prettyprint">void SetPadding(const Padding&amp; padding)</pre>\r
+\r
+ <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note"><p>Beware of infinite dependency loops!</p>\r
+<p>The simplest form of this is shown when the resize policy of a parent actor is set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span> with a child that has a resize policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>.</p> \r
+<p>A more complex loop occurs when a parent actor has a width policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with a height policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. The parent has a single child with a height policy <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with width. If the child&#39;s width policy is <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>, a loop occurs.</p>\r
+<p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates  actors 0 sizes.</p> </td>\r
+    </tr>\r
+   </tbody>\r
+ </table>\r
+\r
+<h2 id="image" name="image">Image Actor</h2>\r
+<p>An image can be displayed through an image actor. THe <span style="font-family: Courier New,Courier,monospace;">Dali::ImageActor</span> class inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class and provides means to display resources, such as images on the stage.</p>\r
+\r
+<h3 id="construction" name="construction">Construction</h3>\r
+\r
+<p>The image actor is constructed by passing a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object. The <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> is an abstract base class with multiple derived classes, and the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> class is used for loading an image from a file.</p> \r
+\r
+<pre class="prettyprint">Dali::Image image = ResourceImage::New(myImageFilename);\r
+Dali::ImageActor myImageActor = ImageActor::New(image);</pre>\r
+\r
+<h3 id="style" name="style">Style</h3>\r
+\r
+<p>The image actor can render an image in 2 different ways. Although the nine-patch feature is supported by the image actor, using 9-patch image (.9.png or .9.jpg) is encouraged.</p>\r
+<ul> \r
+<li><span style="font-family: Courier New,Courier,monospace;">STYLE_QUAD</span>: A simple flat quad style for rendering images.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">STYLE_NINE_PATCH</span>: This style gives the flexibility to stretch images by dividing it into 9 sections. The corners are not scaled; the edges are scaled on 1 axis, and the middle is scaled in both axes.</li>\r
+</ul>\r
+\r
+<pre class="prettyprint">myImageActor.SetStyle (Dali::ImageActor::STYLE_NINE_PATCH);</pre>\r
+\r
+<h3 id="border" name="border">Border</h3>\r
+\r
+<p>The border is used in the <span style="font-family: Courier New,Courier,monospace;">ImageActor::STYLE_NINE_PATCH</span>. It defines the border values of the image for stretching.</p> \r
+\r
+<pre class="prettyprint">Dali::ImageActor::Border border(0.45,0.15,0.45,0.15);\r
+myImageActor.SetBorder(border);</pre>\r
+\r
+<h3 id="pixel" name="pixel">Pixel Area</h3>\r
+\r
+<p>The area of the image to be displayed by the image actor can be set by setting the pixel area. The pixel area is relative to the top-left (0,0) coordinates of the image.</p> \r
+\r
+<pre class="prettyprint">Rect&lt;int&gt; pixel1(myX, myY, myWidth, myHeight);\r
+if(!myImageActor.IsPixelAreaSet())\r
+{\r
+&nbsp;&nbsp;&nbsp;myImageActor.SetPixelArea(pixel1);\r
+}\r
+\r
+//Removes the pixel area setting\r
+myImageActor.ClearPixelArea();</pre>\r
+\r
+<h3 id="initial" name="initial">Changing an Image</h3>\r
+\r
+<p>The image actor needs a reference to a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object on creation. However the Image object can be later changed by calling <span style="font-family: Courier New,Courier,monospace;">DaliActor:SetImage()</span> function.</p>\r
+\r
+<pre class="prettyprint">myImageActor.SetImage(newImage);</pre>\r
+\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/advanced_animation_n.htm b/org.tizen.ui.guides/html/native/dali/advanced_animation_n.htm
new file mode 100755 (executable)
index 0000000..cbfb7ca
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/advanced_animation_n.htm
@@ -0,0 +1,133 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Advanced Animations</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#frame">Frame Animation</a></li>\r
+                       <li><a href="#path">Path Animation</a></li>\r
+                       <li><a href="#shader">Shader Effect Animation</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1KeyFrames.html">Dali::KeyFrames API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">Dali::Path API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1KeyFrames.html">Dali::KeyFrames API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">Dali::Path API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Wearable Native</a></li>                     \r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Advanced Animations</h1>\r
+\r
+<h2 id="frame" name="frame">Frame Animation</h2>\r
+\r
+<p>DALi provides support for animating between several different values, or key frames. A key frame takes a progress value between 0.0f and 1.0f (0 and 100% respectively) and portrays the value of the property when the animation has progressed that much. You can create several key frames:</p>\r
+<pre class="prettyprint">\r
+Dali::KeyFrames keyFrames = Dali::KeyFrames::New();\r
+keyFrames.Add(0.0f, Vector3(10.0f, 10.0f, 10.0f));\r
+keyFrames.Add(0.7f, Vector3(200.0f, 200.0f, 200.0f));\r
+keyFrames.Add(1.0f, Vector3(100.0f, 100.0f, 100.0f));\r
+</pre>\r
+\r
+<p>Next, you can add them to your animation.</p>\r
+<pre class="prettyprint">\r
+animation.AnimateBetween(Property(actor1, Dali::Actor::Property::POSITION), keyFrames);\r
+</pre>\r
+<p>When you play the animation, DALi animates the position of <span style="font-family: Courier New,Courier,monospace;">actor1</span> between the key frames specified. The <span style="font-family: Courier New,Courier,monospace;">actor1</span> animates from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time, and then spends the remaining time animating back to (100.0f, 100.0f, 100.0f).</p>\r
+<p>The advantage of specifying a key frame at 0% is that regardless of where the <span style="font-family: Courier New,Courier,monospace;">actor1</span> is, it starts from position (10.0f, 10.0f, 10.0f). If <span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span> is used, the start position is the <span style="font-family: Courier New,Courier,monospace;">actor1</span>&#39;s current position.</p>\r
+\r
+<h2 id="path" name="path">Path Animation</h2>\r
+<p>The Dali::Path API can be used to animate the position and orientation of actors.</p>\r
+\r
+<p>The black points in the following figure are points where the DALi logo travels to. The red points are the control points which express the curvature of the path on the black points.</p>\r
+\r
+<p class="figure">Figure: Path animation</p>  \r
+       <p align="center"><img alt="Path animation" src="../../images/path_animation.png"/></p> \r
+       \r
+<p>In the code, this is represented as follows:</p>\r
+<pre class="prettyprint">\r
+Path path = Path::New();\r
+path.AddPoint(Vector3(50.0f, 10.0f, 0.0f));\r
+path.AddPoint(Vector3(90.0f, 50.0f, 0.0f));\r
+path.AddPoint(Vector3(10.0f, 90.0f, 0.0f));\r
+</pre>\r
+<p>The control points can be added manually using <span style="font-family: Courier New,Courier,monospace;">Dali::Path::AddControlPoint</span>. The Path API can also auto-generate the control points for you.</p>\r
+<pre class="prettyprint">\r
+path.GenerateControlPoints(0.25f);\r
+</pre>\r
+<p>Here 0.25f represents the curvature of the path you require. For more information, see the <span style="font-family: Courier New,Courier,monospace;">GenerateControlPoints()</span> function in <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">wearable</a> applications).</p>\r
+<p>To animate <span style="font-family: Courier New,Courier,monospace;">actor1</span> along this path, use the following function:</p>\r
+<pre class="prettyprint">\r
+animation.Animate(actor1, path, Vector3::ZERO);\r
+</pre>\r
+<p>The third parameter is the forward vector (in a local space coordinate system) that is oriented with the path&#39;s tangent direction.</p>\r
+\r
+\r
+<h2 id="shader" name="shader">Shader Effect Animation</h2>\r
+<p>Shader effects provide a visual effect for actors. In a shader, uniforms are set according to the purpose of applications. The uniforms of a shader can be animated using the <span style="font-family: Courier New,Courier,monospace;">Animation::AnimateTo()</span> functions.</p>\r
+<p>For example, to animate the center point of the Bendy shader effect:</p>\r
+<pre class="prettyprint">\r
+Dali::Animation animation = Dali::Animation::New(1.0f);\r
+\r
+Vector2 newPosition(0.0f, 0.0f);\r
+animation.AnimateTo(Property(shaderEffect, shaderEffect.GetPositionPropertyName()), newPosition);\r
+</pre>\r
+<p>To animate a uniform of a custom shader effect, you must use the name of the uniform:</p>\r
+<pre class="prettyprint">\r
+Dali::Animation animation = Dali::Animation::New(1.0f);\r
+\r
+// Set the initial value for the uniform\r
+shaderEffect.SetUniform(&quot;myUniform&quot;, -0.5f);\r
+\r
+// Animate the uniform to a value\r
+animation.AnimateTo(Property(shaderEffect, &quot;myUniform&quot;), 0.5f);\r
+</pre>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/animation_n.htm b/org.tizen.ui.guides/html/native/dali/animation_n.htm
new file mode 100755 (executable)
index 0000000..5314cba
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/animation_n.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Animations: Creating Transformations</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">DALi::Animation API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">DALi::Animation API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Animations: Creating Transformations</h1>\r
+\r
+<p>Animation is an effect that shows sequential frames in quick succession to give the illusion of movement.</p>\r
+\r
+<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. The Dali::Animation API can be used to animate the properties of any number of objects, typically Actors. Animation components are shown in a following figure.</p>\r
+\r
+<p class="figure">Figure: DALi animation components</p>  \r
+       <p align="center"><img alt="DALi animation components" src="../../images/animation_components.png"/></p> \r
+\r
+<p>DALi animations occur in a dedicated thread. This allows animations to run smoothly, regardless of the time taken to process inputs events and other factors in the application code.</p>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/basic_framework_n.htm b/org.tizen.ui.guides/html/native/dali/basic_framework_n.htm
new file mode 100755 (executable)
index 0000000..bb026fb
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/basic_framework_n.htm
@@ -0,0 +1,168 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Basic Framework</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#basic">Creating a Basic Animation</a></li>\r
+                       <li><a href="#properties">Animating Properties</a></li>\r
+                       <li><a href="#playback">Playback Control</a></li>\r
+                       <li><a href="#notifications">Notifications</a></li>\r
+                       <li><a href="#alpha">Alpha Functions</a></li>\r
+                       <li><a href="#other">Other Actions</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">Dali::Animation API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/###.html">Dali::AlphaFunction API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">Dali::Animation API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/###.html">Dali::AlphaFunction API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Wearable Native</a></li>                        \r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Basic Framework</h1>\r
+\r
+<h2 id="basic" name="basic">Creating a Basic Animation</h2>\r
+\r
+<p>Create an animation object that takes place over 3 seconds:</p>\r
+<pre class="prettyprint">\r
+Dali::Animation animation = Animation::New(3.0f);\r
+</pre>\r
+\r
+<h2 id="properties" name="properties">Animating Properties</h2>\r
+\r
+<p>There are two distinct methods to animate the properties within DALi:</p>\r
+<ul>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span>: The property animates TO the value in the given time.</li>\r
+       <li><span style="font-family: Courier New,Courier,monospace;">AnimateBy()</span>: The property animates BY the value in the given time.</li>\r
+</ul>\r
+\r
+<p>In the following example, it is assumed that <span style="font-family: Courier New,Courier,monospace;">actor1</span> and <span style="font-family: Courier New,Courier,monospace;">actor2</span> are at position 10.0f, 10.0f, 0.0f at the start of the animation.</p>\r
+<pre class="prettyprint">\r
+// Animate the position of actor1 TO 10.0f, 50.0f, 0.0f\r
+animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); \r
+// End Position: 10.0f, 50.0f, 0.0f\r
+\r
+// Animate the position of actor2 BY 10.0f, 50.0f, 0.0f\r
+animation.AnimateBy(Property(actor2, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f)); \r
+// End Position: 20.0f, 60.0f, 0.0f\r
+</pre>\r
+\r
+<h2 id="playback" name="playback">Playback Control</h2>\r
+\r
+<p>When an animation is created, it can be played using the <span style="font-family: Courier New,Courier,monospace;">Play()</span> method.</p>\r
+<pre class="prettyprint">\r
+animation.Play();\r
+</pre>\r
+<p>This is not a synchronous method. The <span style="font-family: Courier New,Courier,monospace;">Play()</span> method returns after sending a message. After the message is processed in a separate thread, the animation starts. Blocking the application thread does not stop the animation from playing.</p>\r
+<p><span style="font-family: Courier New,Courier,monospace;">Stop()</span> and <span style="font-family: Courier New,Courier,monospace;">Pause()</span> methods are also supported.</p>\r
+<pre class="prettyprint">\r
+animation.Stop();\r
+animation.Pause();\r
+</pre> \r
+\r
+<h2 id="notifications" name="notifications">Notifications</h2>\r
+<p>Using DALi&#39;s signal framework applications can be notified when the animation finishes. The Dali::Animation API supports &quot;fire and forget&quot; behavior, which means that an animation continues to play if the handle is discarded. Note that in the following example, the &quot;Finish&quot; signal is emitted.</p>\r
+<pre class="prettyprint">\r
+void ExampleCallback(Animation&amp; source)\r
+{\r
+&nbsp;&nbsp;&nbsp;std::cout &lt;&lt; &quot;Animation has finished&quot; &lt;&lt; std::endl;\r
+}\r
+\r
+void ExampleAnimation(Actor actor)\r
+{\r
+&nbsp;&nbsp;&nbsp;Animation animation = Animation::New(2.0f); // Duration 2 seconds\r
+&nbsp;&nbsp;&nbsp;animation.AnimateTo(Property(actor, Actor::Property::POSITION), 10.0f, 50.0f, 0.0f);\r
+&nbsp;&nbsp;&nbsp;animation.FinishedSignal().Connect(ExampleCallback);\r
+&nbsp;&nbsp;&nbsp;animation.Play();\r
+} // At this point the animation handle has gone out of scope\r
+\r
+Actor actor = Actor::New();\r
+Stage::GetCurrent().Add(actor);\r
+\r
+// Fire the animation and forget about it\r
+ExampleAnimation(actor);\r
+\r
+// The animation continues, and &quot;Animation has finished&quot; is printed after 2 seconds\r
+</pre>\r
+\r
+<h2 id="alpha" name="alpha">Alpha Functions</h2>\r
+\r
+<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <span style="font-family: Courier New,Courier,monospace;">Dali::AlphaFunction::BuiltinFunction</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/###.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/###.html">wearable</a> applications).</p>\r
+<pre class="prettyprint">\r
+animation.SetDefaultAlphaFunction(Dali::AlphaFunction::EASE_IN);\r
+</pre>\r
+<p>You can also create your own alpha function:</p>\r
+<pre class="prettyprint">\r
+float MyAlphaFunction(float progress)\r
+{\r
+&nbsp;&nbsp;&nbsp;return progress;\r
+}\r
+\r
+AlphaFunction alphaFunction(&amp;MyAlphaFunction);\r
+animation.SetDefaultAlphaFunction(alphaFunction);\r
+</pre>\r
+<p>It is possible to specify a different alpha function for each animator in an Animation object.</p>\r
+<pre class="prettyprint">\r
+animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), Vector3(10.0f, 50.0f, 0.0f), Dali::AlphaFunction::EASE_IN);\r
+</pre>\r
+\r
+<h2 id="other" name="other">Other Actions</h2>\r
+\r
+<p>An animation can be looped:</p>\r
+<pre class="prettyprint">\r
+animation.SetLooping(true);\r
+</pre>\r
+<p>By default, when an animation ends, the properties that it was animating are baked (saved). Using the following function, the property changes can be discarded when the animation ends or is stopped:</p>\r
+<pre class="prettyprint">\r
+animation.SetEndAction(Animation::Discard);\r
+</pre>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/buttons_n.htm b/org.tizen.ui.guides/html/native/dali/buttons_n.htm
new file mode 100755 (executable)
index 0000000..b2f4b99
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/buttons_n.htm
@@ -0,0 +1,279 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Buttons</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#PushButton">Push Button</a></li>\r
+                       <li><a href="#CheckBoxButton">CheckBox Button</a></li>\r
+                       <li><a href="#RadioButton">Radio Button</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Button.html">Dali::Toolkit::Button API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Button.html">Dali::Toolkit::Button API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Wearable Native</a></li>                   \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Buttons</h1>\r
+\r
+<p>Button is a small object on UI that you press in order to operate it. Dali provides button controls, such as <span style="font-family: Courier New,Courier,monospace;">PushButton</span> , <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span> , and <span style="font-family: Courier New,Courier,monospace;">RadioButton</span> . The base class for button controls is <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span>. The <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> class provides the <span style="font-family: Courier New,Courier,monospace;">disabled</span> property and the <span style="font-family: Courier New,Courier,monospace;">clicked</span> signal. Basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> class are listed in the following table.</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> input signals\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Input signal</th>\r
+        <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">PressedSignal()</span></td>\r
+               <td>Emitted when the button is pressed.\r
+               </td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">ReleasedSignal()</span></td>\r
+               <td>Emitted when the button is released.\r
+               </td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">ClickedSignal()</span></td>\r
+               <td>Emitted when the button is clicked.\r
+               </td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">StateChangedSignal()</span></td>\r
+               <td>Emitted when the button state is changed.\r
+               </td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<h2 id="PushButton" name="PushButton">Push Button</h2>\r
+ \r
+<p>The <span style="font-family: Courier New,Courier,monospace;">PushButton</span> class provides a button that can be pressed to operate it. A push button changes its appearance when is pressed and returns to its original when is released.</p>\r
+\r
+<p class="figure">Figure: Push button</p>  \r
+       <p align="center"><img alt="Push button" src="../../images/push_button.png"/></p> \r
+\r
+<p>By default, a push button emits a <span style="font-family: Courier New,Courier,monospace;">Button::PressedSignal()</span> signal when the button is pressed, a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when clicked, and a <span style="font-family: Courier New,Courier,monospace;">Button::ReleasedSignal()</span> signal when released, or of the touch point leaves the boundary of the button. The following is a basic example of implementing a push button:</p>\r
+\r
+<pre class="prettyprint">class ButtonsController: public ConnectionTracker\r
+{\r
+&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PushButton button = PushButton::New();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;Select&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension:;ALL_DIMENSIONS);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetSelectedImage(Dali::ResourceImage::New(&quot;pressedImage.png&quot;));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetDisabledImage(Dali::ResourceImage::New(&quot;disabledImage.png&quot;));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetButtonImage(Dali::ResourceImage::New(&quot;buttonImage.png&quot;));\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.ClickedSignal().Connect(this, &amp;ButtonsController::OnButtonClicked);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(button);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;bool OnButtonClicked(Toolkit::Button button)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Application developer code\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
+}</pre>\r
+\r
+<h2 id="CheckBoxButton" name="CheckBoxButton">CheckBox Button</h2>\r
+ \r
+<p>The <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span> class provides check box button which can be checked or unchecked.</p>\r
+\r
+<p class="figure">Figure: Checkbox button</p>  \r
+       <p align="center"><img alt="Checkbox button" src="../../images/checkbox_button.png"/></p> \r
+\r
+<p>By default, a checkbox button emits a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when the button changes its state to selected or unselected. The following is a basic example of implementing a checkbox button:</p>\r
+\r
+<pre class="prettyprint">class ButtonsController: public ConnectionTracker\r
+{\r
+&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Actor checkBoxBackground = Actor::New();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(checkBoxBackground);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.SetParentOrigin(ParentOrigin::TOP_LEFT);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.SetAnchorPoint(ParentOrigin::TOP_LEFT);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.SetPosition(0.0f, 0.0f);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.SetSize(400.0f, 400.0);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dali::Image unselected = Dali::ResourceImage::New(&quot;UnSelectedImage.png&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dali::Image selected = Dali::ResourceImage::New(&quot;SelectedImage.png&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checkBox.SetName(&quot;checkbox1&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBox.SetBackgroundImage(unselected);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBox.SetSelectedImage(selected);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBox.SetLabel(&quot;CheckBox1 is unselected&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBox.StateChangedSignal().Connect(this, &amp;ButtonsController::OnCheckBoxesSelected);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBoxBackground.Add(checkBox);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetName(&quot;checkbox2&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetBackgroundImage(unselected);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetSelectedImage(selected);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetLabel(&quot;CheckBox2 is selected&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetSelected(true);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.StateChangedSignal().Connect(this, &amp;ButtonsController::OnCheckBoxesSelected);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.Add(checkBox);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;bool OnCheckBoxesSelected(Toolkit::Button button)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(button.GetName() == &quot;checkbox1&quot;)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(button.IsSelected())\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;CheckBox1 is selected&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;CheckBox1 is unselected&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(button.GetName() == &quot;checkbox2&quot;)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(button.IsSelected())\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;CheckBox2 is selected&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;CheckBox2 is unselected&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
+}</pre>\r
+\r
+<h2 id="RadioButton" name="RadioButton">Radio Button</h2>\r
+ \r
+<p>The <span style="font-family: Courier New,Courier,monospace;">RadioButton</span> class provides a radio button with 2 states: selected and unselected.</p>\r
+\r
+<p class="figure">Figure: Radio button</p>  \r
+       <p align="center"><img alt="Radio button" src="../../images/radio_button.png"/></p> \r
+\r
+<p>Radio buttons can be grouped. 2 or more radio buttons are in the same group when they have the same parent. In each group, only 1 radio button can be selected at a given time. The following is a basic example of implementing a radio button:</p>\r
+\r
+<pre class="prettyprint">class ButtonsController: public ConnectionTracker\r
+{\r
+&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Actor radioGroup = Actor::New();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(redioGroup);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.SetParentOrigin(ParentOrigin::TOP_LEFT);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.SetAnchorPoint(ParentOrigin::TOP_LEFT);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.SetPosition(0.0f, 0.0f);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.SetSize(400.0f, 400.0);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RadioButton radioButton1 = RadioButton::New(&quot;label&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton1.SetParentOrigin(ParentOrigin::TOP_LEFT);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton1.SetAnchorPoint(ParentOrigin::TOP_LEFT);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton1.SetPosition(0.0f, 0.0f);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RadioButton radioButton2 = RadioButton::New(&quot;label&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton2.SetParentOrigin(ParentOrigin::TOP_LEFT);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton2.SetAnchorPoint(ParentOrigin::TOP_LEFT);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton2.SetPosition(0.0f, 40.0f);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton1.StateChangedSignal().Connect(this, &amp;ButtonsController::EnableSelectButton);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.Add(radioButton1);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.Add(radioButton2);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
+}</pre>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/constraints_n.htm b/org.tizen.ui.guides/html/native/dali/constraints_n.htm
new file mode 100755 (executable)
index 0000000..40c10c0
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/constraints_n.htm
@@ -0,0 +1,294 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Constraints</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#use">Using a Constraint</a></li>\r
+                       <li><a href="#source">Constraint Sources</a></li>\r
+                       <li><a href="#function">Constraint Function</a></li>\r
+                       <li><a href="#create">Creating a Constraint</a></li>\r
+                       <li><a href="#remove">Removing Constraints</a></li>\r
+                       <li><a href="#equal">Equal To Constraint</a></li>\r
+                       <li><a href="#relative">Relative To Constraint</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">DALi::Constraint API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">DALi::Constraint API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Constraints</h1>\r
+\r
+<p>Constraints are used to modify the property of an actor, based on other properties of the same actor; properties of the actor&#39;s parent; or properties of another actor altogether, when the modification needs to be at run-time. Custom functions or functors can be supplied, where the desired value of the property can be calculated. These functions (or functors) are called in every frame, therefore they must be fast and not too complex, otherwise they can affect performance.</p>\r
+<p>Multiple constraints can be applied to the same actor at the same time. The order in which constraints are applied is important as this is the order in which they are processed in the update thread.</p>\r
+<p>Constraints are applied after animations have been applied. This means that Constraints override the values set by Animations. Constraints are not applied to off-stage actors.</p>\r
+<p>Not all properties can be used as a constraint input. For more details, see the <span style="font-family: Courier New,Courier,monospace;">IsPropertyAConstraintInput()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications).</p>\r
+\r
+<h2 id="use" name="use">Using a Constraint</h2>\r
+\r
+<p>Constraints are designed as a way of modifying properties that cannot be modified by any existing built-in functionality, such as animations, size negotiation, parent anchor, or origin settings. As they provide the ability for the application developer to execute their own code within the update thread, DALi can no longer guarantee the timeliness of this code, or how optimized it can be.</p>\r
+<p>Generally, you must not use constraints with the <span style="font-family: Courier New,Courier,monospace;">size</span> property as constraining the size and size negotiation are mutually exclusive. Consider the following use cases as an example of when and when not to use a constraint:</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: Examples of constraint use\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Requirement</th>\r
+        <th>Solution</th>\r
+    </tr>\r
+    <tr>\r
+               <td>Need a child to be 50% the size of it&#39;s parent.</td>\r
+               <td>Use size negotiation.</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Need to zoom an actor in to the screen using its scale property.</td>\r
+               <td>Use an animation.</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Need an actor to appear centered around the bottom-right corner of its parent.</td>\r
+               <td>Use ParentOrigin and AnchorPoint.</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Need to lay out a series of controls with various alignment requirements.</td>\r
+               <td>Use either Anchor and origin settings, or a TableView.</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Need to automatically modify the position property of one actor based on the position property of another actor, that is neither a parent OR a child.</td>\r
+               <td>Use a constraint.</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Need to position an actor relative to its parent actor in a NON-UNIFORM way, or a non-linear calculation needs to be performed that requires a functor.</td>\r
+               <td>Use a constraint.</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Need to modify an actor&#39;s property in real time based on some calculations that require additional data to be stored in-between frames.</td>\r
+               <td>Use a constraint. The constraint functor can hold any variables within it that need to be preserved frame-to-frame.</td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<p>For most general cases, the position and size requirements of a child or parent actor (from its child or parent) can be calculated with size negotiation.</p>\r
+\r
+<h2 id="source" name="source">Constraint Sources</h2>\r
+<p>These properties are used as input sources to the constraint. The constraint takes these values, optionally performs a calculation on them (if using a custom functor) and writes the result to the specified property of the target actor. The source actor is specified as either the same actor, its parent, or another actor.</p>\r
+<ul>\r
+<li>Local source\r
+<p>A local source is based on the local properties (such as size, position, scale, orientation, or color) of an actor. For example, the actor&#39;s orientation can be used as a constraint input source.</p>\r
+<pre class="prettyprint">\r
+Dali::ConstraintSource source(Dali::LocalSource(Dali::Actor::Property::ORIENTATION));\r
+</pre>\r
+</li>\r
+<li>Parent Source\r
+<p>A parent source is based on properties of the actor's parent. For example, a parent&#39;s position can be used as a constraint input source.</p>\r
+<pre class="prettyprint">\r
+Dali::ConstraintSource source(Dali::ParentSource(Dali::Actor::Property::POSITION));\r
+</pre>\r
+</li>\r
+<li>Other Handle Source\r
+<p>You can base your source on the properties of another handle altogether. For example, a sibling actor&#39;s color can be used as a constraint input source.</p>\r
+<pre class="prettyprint">\r
+Dali::ConstraintSource source(Dali::Source(anotherHandle, Dali::Actor::Property::COLOR));\r
+</pre>\r
+</li>\r
+</ul>\r
+\r
+<h2 id="function" name="function">Constraint Function</h2>\r
+\r
+<p>The signature of the constraint function is:</p>\r
+\r
+<pre class="prettyprint">\r
+void Function(PropertyType &amp;current, const Dali::PropertyInputContainer &amp;inputs);\r
+</pre>\r
+<p>In this function the <span style="font-family: Courier New,Courier,monospace;">current</span> parameter is a reference to the target property type, such as float, Vector2, or Vector3. This is an in or out parameter. It represents the current value of the property and the expectation is that it is modified by the function to the desired value.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">inputs</span> parameter holds all the constraint input sources. Each element is a pointer to the property-input and can be accessed using the indexing operator [ ]. The order in which the sources are added is the order in which the property-inputs are sorted in the container. For example:</p>\r
+<pre class="prettyprint">\r
+constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION));\r
+constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::SIZE));\r
+constraint.AddSource(Dali::ParentSource(Dali::Actor::Property::POSITION));\r
+constraint.AddSource(Dali::ParentSource(Dali::Actor::Property::SIZE));\r
+</pre>\r
+<p>In the constraint function this equals to:</p>\r
+<pre class="prettyprint">\r
+const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());\r
+const Dali::Vector3&amp; size(inputs[1]-&gt;GetVector3());\r
+const Dali::Vector3&amp; parentPosition(inputs[2]-&gt;GetVector3());\r
+const Dali::Vector3&amp; parentSize(inputs[3]-&gt;GetVector3());\r
+</pre>\r
+\r
+\r
+<h2 id="create" name="create">Creating a Constraint</h2>\r
+<h3>Using C Functions</h3>\r
+<p>If you do not have any data that is changed at runtime, C functions must be used. For example, the color of an actor can be changed based on its position along the x-axis to a preset distance of 100, beyond which it is transparent.</p>\r
+<pre class="prettyprint">\r
+Dali::Actor actor = Actor::New();\r
+\r
+// Create a constraint that targets actor\r
+Dali::Constraint constraint = Dali::Constraint::New&lt; Vector4 &gt;(actor, Dali::Actor::Property::COLOR, MyConstraintFunction); \r
+\r
+// Add the POSITION property as a constraint input\r
+constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION)); \r
+\r
+// Apply the constraint\r
+constraint.Apply(); \r
+</pre>\r
+\r
+<p>The following example shows the actual C function:</p>\r
+<pre class="prettyprint">\r
+void MyConstraintFunction(Dali::Vector4&amp; current, const Dali::PropertyInputContainer&amp; inputs)\r
+{\r
+&nbsp;&nbsp;&nbsp;const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());\r
+\r
+&nbsp;&nbsp;&nbsp;float distance = fabs(position.x);\r
+\r
+&nbsp;&nbsp;&nbsp;// More than 100.0f away, opacity is 0.0f\r
+&nbsp;&nbsp;&nbsp;if (distance &gt; 100.0f)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = 0.0f;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Otherwise it blends between fully opaque and transparent\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = (100.0f - distance) / 100.0f;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+\r
+<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>\r
+\r
+<h3>Using Functors</h3>\r
+\r
+<p>If you need to store some data in a struct or class, a functor can be used. Reusing the last example, the color of an actor is changed based on its position along the x-axis, but the distance when it is transparent is different for each applied constraint.</p>\r
+<pre class="prettyprint">\r
+Dali::Actor actor = Actor::New();\r
+\r
+// Create a constraint that targets actor, and uses MyFunctor with a distance of 200\r
+Dali::Constraint constraint = Dali::Constraint::New&lt; Vector4 &gt;(actor, Dali::Actor::Property::COLOR, MyFunctor(200)); \r
+\r
+// Add the POSITION property as a constraint input\r
+constraint.AddSource(Dali::LocalSource(Dali::Actor::Property::POSITION)); \r
+\r
+// Apply the constraint\r
+constraint.Apply(); \r
+</pre>\r
+<p>The following example shows the structure:</p>\r
+<pre class="prettyprint">\r
+struct MyFunctor\r
+{\r
+&nbsp;&nbsp;&nbsp;// Constructor which takes the distance at which the actor is fully transparent\r
+&nbsp;&nbsp;&nbsp;MyFunctor(float distance)\r
+&nbsp;&nbsp;&nbsp;: mDistance(distance)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;// Functor\r
+&nbsp;&nbsp;&nbsp;void operator()(Dali::Vector4 &amp;current, const Dali::PropertyInputContainer &amp;inputs)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const Dali::Vector3&amp; position(inputs[0]-&gt;GetVector3());\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float distance = fabs(position.x);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// More than mDistance away, opacity is 0.0f\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (distance &gt; mDistance)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = 0.0f;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Otherwise it blends between fully opaque and transparent\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.a = (100.0f - mDistance) / 100.0f;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;// Data\r
+&nbsp;&nbsp;&nbsp;const float mDistance;\r
+};\r
+</pre>\r
+<p><span style="font-family: Courier New,Courier,monospace;">MyFunctor()</span> can be used also with another constraint with a different distance.</p>\r
+<p>Instead of using the default functor, another method can be declared in the class or struct and used as the constraint function.</p>\r
+<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>\r
+\r
+\r
+<h2 id="remove" name="remove">Removing Constraints</h2>\r
+\r
+<p>The actor&#39;s constraints can later be removed in several ways:</p>\r
+<pre class="prettyprint">\r
+mConstraint.Remove(); // mConstraint is a base-handle to a constraint\r
+actor.RemoveConstraints(); // Removes ALL constraints applied to an actor\r
+actor.RemoveConstraint(tag); // All constraints with the tag are removed from the actor (tag can be set using SetTag)\r
+</pre> \r
+\r
+\r
+<h2 id="equal" name="equal">Equal To Constraint</h2>\r
+\r
+<p>The built-in <span style="font-family: Courier New,Courier,monospace;">Dali::EqualToConstraint</span> function can be used if only setting a property equal to another property is required:</p>\r
+<pre class="prettyprint">\r
+Dali::Constraint constraint = Dali::Constraint::New&lt; Vector3 &gt;(actor, Dali::Actor::Property::POSITION, Dali::EqualToConstraint());\r
+constraint.AddSource(Dali::Source(anotherActor, Dali::Actor::Property::POSITION));\r
+constraint.Apply();\r
+</pre>\r
+<p>Here actor's position is set to equal the position of <span style="font-family: Courier New,Courier,monospace;">anotherActor</span>.</p>\r
+\r
+\r
+<h2 id="relative" name="relative">Relative To Constraint</h2>\r
+\r
+<p>The built in <span style="font-family: Courier New,Courier,monospace;">Dali::RelativeToConstraint</span> and <span style="font-family: Courier New,Courier,monospace;">Dali::RelativeToConstraintFloat</span> functions can be used if only setting a property relative to another property is required:</p>\r
+\r
+<pre class="prettyprint">\r
+Dali::Constraint constraint = Dali::Constraint::New&lt; Vector3 &gt;(actor, Dali::Actor::Property::POSITION, Dali::RelativeToConstraint(2.0f));\r
+constraint.AddSource(Dali::Source(anotherActor, Dali::Actor::Property::POSITION));\r
+constraint.Apply();\r
+</pre>\r
+<p>Here the actor&#39;s position is relative to the position of <span style="font-family: Courier New,Courier,monospace;">anotherActor</span>. If <span style="font-family: Courier New,Courier,monospace;">anotherActor</span> is at (10.0f, 20.0f, 30.0f), <span style="font-family: Courier New,Courier,monospace;">actor</span> is at (20.0f, 40.0f, 60.0f).</p>\r
+\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/dali_applications_n.htm b/org.tizen.ui.guides/html/native/dali/dali_applications_n.htm
new file mode 100755 (executable)
index 0000000..fd09eec
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/dali_applications_n.htm
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>DALi Applications: Creating Your First DALi Application</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">DALi::Application API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">DALi::Application API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>DALi Applications: Creating Your First DALi Application</h1>\r
+\r
+<p>The Adaptor framework provides the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class, which initializes and sets up DALi appropriately. The class provides many platform-related services.</p>\r
+\r
+<p>Several signals can be connected to keep you informed when certain platform-related activities occur. It also ensures that, upon system events, DALi is called in a thread-safe manner.</p>\r
+\r
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance and connect to its initialize signal, where the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> hierarchy is created:</p>\r
+\r
+<pre class="prettyprint">void CreateProgram(Application&amp; app)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Create DALi components...\r
+&nbsp;&nbsp;&nbsp;Dali::Actor actor = Actor::New();\r
+&nbsp;&nbsp;&nbsp;...\r
+}\r
+int main (int argc, char **argv)\r
+{\r
+&nbsp;&nbsp;&nbsp;Dali::Application app = Application::New(&amp;argc, &amp;argv);\r
+&nbsp;&nbsp;&nbsp;app.InitSignal().Connect(&amp;CreateProgram);\r
+&nbsp;&nbsp;&nbsp;app.MainLoop();\r
+}</pre>\r
+\r
+<h2 id="window" name="window">Window</h2>\r
+\r
+<p>DALi provides the <span style="font-family: Courier New,Courier,monospace;">Window</span> class to manage drawing to a default surface. The class is also responsible for drawing the Indicator bar if required. The <span style="font-family: Courier New,Courier,monospace;">Application</span> class automatically creates a <span style="font-family: Courier New,Courier,monospace;">Window</span> which the you can access after the <span style="font-family: Courier New,Courier,monospace;">SignalInit()</span> function has fired.</p>\r
+\r
+<pre class="prettyprint">void CreateProgram(Application&amp; app)\r
+{\r
+&nbsp;&nbsp;&nbsp;app.GetWindow().ShowIndicator(Dali::Window::VISIBLE);\r
+}\r
+int main (int argc, char **argv)\r
+{\r
+&nbsp;&nbsp;&nbsp;Dali::Application app = Application::New(argc, argv);\r
+&nbsp;&nbsp;&nbsp;app.SignalInit().Connect(&amp;CreateProgram);\r
+&nbsp;&nbsp;&nbsp;app.MainLoop();\r
+}</pre>\r
+\r
+\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm b/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm
new file mode 100755 (executable)
index 0000000..47184a2
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm
@@ -0,0 +1,192 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>DALi Overview: Getting Started with DALi UI Programming</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#dali">Dali Fundamentals</a></li>\r
+                       <li><a href="#create">Creating a DALi Application</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/###.html">DALi API References for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/###.html">DALi API References for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>DALi Overview: Getting Started with DALi UI Programming</h1>\r
+\r
+<p>Dynamic Animation Library (DALi) internally defines a virtual 3D world (space) and maintains hierarchical objects in the 3D world. The hierarchical object tree is known as the <a href="http://en.wikipedia.org/wiki/Scene_graph" target="_blank">scene graph</a>. A node in the scene graph can have several children but often only a single parent, with the effect of a parent applied to all its child nodes; an operation performed on a group automatically propagates its effect to all of its members.</p>\r
+<p>There are various types of nodes, such as image, text, and 3D object.</p>\r
+\r
+<h2 id="dali" name="dali">DALi Fundamentals</h2>\r
+\r
+<p>Before starting UI programming with DALi, familiarize yourself with the basic concepts.</p>\r
+\r
+<h3>Actor and Stage</h3>\r
+\r
+<p>Actor is the primary object for interaction in DALi applications. Actors are effective nodes that receive input (touch events) and act as a container for drawable elements and other actors. A DALi application uses a hierarchy of actor objects to position visible content. An actor inherits a position relative to its parent, and can be moved relative to this point. UI components can be built by combining multiple actors.</p>\r
+<p>Stage is a top-level node of the scene graph used for displaying a tree of actors. To display an actor, add is to the stage.</p>\r
+\r
+<h3>Signal and Slot</h3>\r
+\r
+<p><a href="http://doc.qt.io/qt-5/signalsandslots.html" target="_blank">Signals and slots</a> are used in the QT GUI library for communication between objects. Objects can send signals containing event information, which can be received by other objects using special functions known as slots. The DALi event system follows the signal and slot mechanism.</p>\r
+\r
+<p>Signal events are emitted when a certain action or event occurs. The application can connect using these signals. Standard C-style functions can be used to connect to these signals if no local data needs to be accessed, otherwise a class method can also be connected.</p>\r
+<p>Applications can manually disconnect from signals when required. However, DALi also provides safe signal disconnection. This means that when the connecting object is deleted, the signal is automatically disconnected.</p>\r
+\r
+<h3>DALi Internal Structure</h3>\r
+\r
+<p>DALi consists of the following modules:</p>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">dali-core</span>\r
+<p>This module provides scene graph -based rendering, animation, and event handling. It is a base module and forms the biggest part of \r
+DALi.</p>\r
+</li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">dali-toolkit</span>\r
+<p>This module provides UI components and various effects on top of the dali-core.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span>\r
+<p><span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span> is a platform adaptation layer. It initializes and sets up DALi appropriately. The module provides many platform-related services. Several signals can be connected to it to keep you informed when certain platform-related activities occur.</p></li>\r
+</ul>\r
+<p class="figure">Figure: DALi internal structure</p>\r
+<p align="center"><img alt="DALi internal structure" src="../../images/dali_component.png" /></p>\r
+\r
+<h2 id="create" name="create">Creating a DALi Application</h2>\r
+\r
+<p>To create a &#39;Hello World&#39; application with Dali:</p>\r
+<ol>\r
+<li><a href="#initial">Initialize the DALi application</a></li>\r
+<li><a href="#actor">Create an actor and add to a stage</a></li>\r
+</ol>\r
+\r
+<pre class="prettyprint">#include &lt; dali-toolkit/dali-toolkit.h&gt;\r
+\r
+using namespace Dali;\r
+using Dali::Toolkit::TextLabel;\r
+\r
+// This example shows how to create and display Hello World! using a simple TextActor\r
+\r
+class HelloWorldController : public ConnectionTracker\r
+{\r
+public:\r
+\r
+&nbsp;&nbsp;&nbsp;HelloWorldController(Application&amp; application) : mApplication(application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Connect to the Application&#39;s Init signal\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;HelloWorldController::Create);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;~HelloWorldController()\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Remove Hello World actor from stage\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Remove(mTextLabel);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;// The Init signal is received once (only) during the Application lifetime\r
+&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get a handle to the stage\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mTextLabel = TextLabel::New(&quot;Hello World&quot;);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(mTextLabel);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+private:\r
+&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
+&nbsp;&nbsp;&nbsp;TextLabel mTextLabel;\r
+};&nbsp;&nbsp;&nbsp;\r
+\r
+// Entry point for Linux &amp; Tizen applications\r
+int main(int argc, char **argv)\r
+{\r
+\r
+&nbsp;&nbsp;&nbsp;Application application = Application::New(&amp;argc, &amp;argv);&nbsp;&nbsp;&nbsp; \r
+&nbsp;&nbsp;&nbsp;HelloWorldController test(application); \r
+&nbsp;&nbsp;&nbsp;application.MainLoop();\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}\r
+</pre>\r
+\r
+<h3 id="initial" name="initial">Initializing the DALi Application</h3>\r
+\r
+<p>To use DALi APIs, include the <span style="font-family: Courier New,Courier,monospace;">dali-toolkit.h</span> header file. It includes the <span style="font-family: Courier New,Courier,monospace;">dali-core</span> and <span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span> modules.</p>\r
+\r
+<pre class="prettyprint">#include &lt; dali-toolkit/dali-toolkit.h&gt;</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications) initializes and sets up DALi.</p>\r
+<p>Several signals can be connected to keep you informed when certain platform related activities occur and ensure that, upon system events, DALi is called in a thread-safe manner.</p>\r
+\r
+<p>Create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance:</p>\r
+\r
+<pre class="prettyprint">\r
+Application application = Application::New(&amp;argc, &amp;argv);</pre>\r
+  \r
+<p>After getting the initialized signal from the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance, you can the DALi APIs for building the scene graph. Connect the <span style="font-family: Courier New,Courier,monospace;">HelloWorldController::Create</span> callback to <span style="font-family: Courier New,Courier,monospace;">DALi::Application InitSignal()</span> function:</p>\r
+\r
+<pre class="prettyprint">\r
+mApplication.InitSignal().Connect(this, &amp;HelloWorldController::Create);</pre>\r
+\r
+<p>To run the application, start its main loop. This ensures that images are displayed and events as well as signals are dispatched and captured.</p>\r
+<pre class="prettyprint">\r
+application.MainLoop();</pre>\r
+  \r
+<h3 id="actor" name="actor">Creating an Actor and Adding It to a Stage</h3>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> UI component renders a short text string. To display the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component, add it to a stage. The <span style="font-family: Courier New,Courier,monospace;">stage</span> instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function:</p>\r
+\r
+<pre class="prettyprint">mTextLabel = TextLabel::New(&quot;Hello World&quot;);\r
+\r
+Stage stage = Stage::GetCurrent();\r
+stage.Add(mTextLabel);</pre>\r
+\r
+<p>The application stores actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Therefore, store the actor handle. Even if the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component is removed from the stage, it remains alive through the reference.</p>\r
+\r
+\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/event_handling_n.htm b/org.tizen.ui.guides/html/native/dali/event_handling_n.htm
new file mode 100755 (executable)
index 0000000..8eace44
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/event_handling_n.htm
@@ -0,0 +1,367 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Event Handling: Managing the Event Flow</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#touch">Using Signals and Slots with Touch Events</a></li>\r
+                       <li><a href="#input">Input Signals</a></li>\r
+                       <li><a href="#gesture">Gestures</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1LongPressGestureDetector.html">Dali::LongPressGestureDetector API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1PanGestureDetector.html">Dali::PanGestureDetector API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1PinchGestureDetector.html">Dali::PinchGestureDetector API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Signal.html">Dali::Signal API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1TapGestureDetector.html">Dali::TapGestureDetector API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">Dali::Toolkit::KeyboardFocusManager API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1LongPressGestureDetector.html">Dali::LongPressGestureDetector API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1PanGestureDetector.html">Dali::PanGestureDetector API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1PinchGestureDetector.html">Dali::PinchGestureDetector API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Signal.html">Dali::Signal API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1TapGestureDetector.html">Dali::TapGestureDetector API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">Dali::Toolkit::KeyboardFocusManager API for Wearable Native</a></li>                 \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+<h1>Event Handling: Managing the Event Flow</h1>\r
+\r
+<p>DALi event handling system is composed of 2 major concepts:</p>\r
+\r
+<ul>\r
+<li>Signal\r
+<p>Notifications containing event information emitted by GUI components. Similar to events or notifications.</p></li>\r
+<li>Slot\r
+<p>Special functions receiving signals. Similar to event handlers, observer, listener, or callbacks.</p></li>\r
+</ul>\r
+<p>DALi emits various types of signals to an application to inform it of user actions and the application can handle them through slots.</p>\r
+\r
+<p>The concept of signal and slots were introduced by Qt for communication between objects. The event mechanism of DALi is inspired by Qt.</p>\r
+\r
+<p class="figure">Figure: Signal and slot event handling</p>  \r
+       <p align="center"><img alt="Signal and slot event handling" src="../../images/signal_slot.png"/></p> \r
+ \r
+<p>The signal and slot system has following advantages:</p>\r
+<ul>\r
+<li>Object-oriented: must support callbacks for C++ member functions</li>\r
+<li>Type safe: compiler must be able to check for type safety</li>\r
+<li>Non-coupling: no dependency between caller and callee</li>\r
+<li>Non-type-intrusive: no modification to caller or callee types</li>\r
+<li>Generic: must work for all types of call-backs</li>\r
+<li>Many-to-many relationship: for example, 1 slot can connect to many signals and 1 signal can be connected to many slots</li>\r
+</ul>\r
+\r
+<h2 id="touch" name="touch">Using Signals and Slots with Touch Events</h2>\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function to inform the application that a user touches the actor. It is defined as follows:</p>\r
+\r
+<pre class="prettyprint">typedef Signal&lt; bool (Actor, const TouchEvent&amp;)&gt; TouchSignalType;\r
+TouchSignalType&amp;TouchedSignal();</pre>\r
+\r
+<p>This means that a slot of the following type can be connected to the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function:</p>\r
+\r
+<pre class="prettyprint">bool YourCallbackName(Actor actor, const TouchEvent&amp;event);</pre>\r
+\r
+<p>The return value <span style="font-family: Courier New,Courier,monospace;">true</span> indicates that the touch event can be consumed. Otherwise, the signal is emitted on the next sensitive parent of the actor. The return value is valid only for the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function and other types of signals may not have a return values.</p>\r
+\r
+<p>Each point on the screen being or having been touched is represented by the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchPoint</span> object. This object stores information about the state of the touch point (such as down, up, or motion.) and the coordinates of the touch.</p>\r
+\r
+<p>A collection of touch points at a specific moment in time is collated into the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchEvent</span> object. When a multi-touch event occurs, each touch point represents the points that are currently being touched or the points where touch has stopped.</p>\r
+\r
+<p>The following example shows how a connection to a touch event signal can be established:</p>\r
+\r
+<pre class="prettyprint">bool OnTouch(Actor actor, const TouchEvent&amp;touch)\r
+{\r
+&nbsp;&nbsp;&nbsp;bool handled = false;\r
+\r
+&nbsp;&nbsp;&nbsp;switch(touch.GetPointCount())\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1: // Single touch\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (touch.GetPoint(0).GetState == TouchPoint::Down)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do action when first touch on screen\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handled = true;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 2: // Multi-touch event\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
+\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;return handled;&nbsp;&nbsp;&nbsp;// true if we have handled the touch, false otherwise\r
+}\r
+\r
+// Elsewhere\r
+Actor actor = Actor::New();\r
+actor.TouchedSignal().Connect(&amp;OnTouch);</pre>\r
+\r
+<p>The touch event is first emitted to the hit actor by the primary touch point, which is the first point that the user touches. If this hit actor does not handle the event, then the event is offered to the hit actor&#39;s parent. Again, if the parent does not handle this event, it is then offered to its parent and so on until the stage is reached or the event is consumed.</p>\r
+\r
+<p>If a parent and child both connect to the touch signal, the touch event is first offered to the child. If it is consumed by the child, the is not informed.</p>\r
+\r
+<h2 id="input" name="input">Input Signals</h2>\r
+\r
+<p>Many DALi classes provide various signals to notify events to the application. The basic DALi input signals are as follows:</p>\r
+\r
+<ul>\r
+<li>Touched signal: notify screen touch or mouse click</li>\r
+<li>Hovered signal: notify mouse hovering</li>\r
+<li>Wheel event signal: notify mouse wheel rolling</li>\r
+<li>Key event signal: notify keyboard input</li>\r
+<li>Key input focus signals: notify that a control is ready to receive key event signals</li>\r
+<li>Keyboard focus signals: notify moved focus by navigation keys (such as left or right)</li>\r
+</ul>\r
+<p>These signals are provided by the following classes:</p>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>\r
+\r
+<table>\r
+   <caption>\r
+     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> input signals\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Input signals</th>\r
+        <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>\r
+               <td>Emitted when touch input is received by the actor.\r
+               <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const TouchEvent&amp;event);</span></p></td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>\r
+               <td>Emitted when hover input is received by the actor.\r
+               <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const HoverEvent&amp;event);</span></p></td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">WheelEventSignal()</span></td>\r
+               <td>Emitted when wheel event is received by the actor.\r
+               <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName(Actor actor, const WheelEvent&amp;event);</span></p></td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+  \r
+  <p>The actor receiving events is passed to the callbacks.</p>\r
+</li>\r
+\r
+<li>\r
+<span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span>\r
+\r
+<table>\r
+   <caption>\r
+     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> input signals\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Input signals</th>\r
+        <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>\r
+               <td>Emitted when touch input is received by the actor.\r
+               <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const TouchEvent&amp;event)</span></p></td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>\r
+               <td>Emitted when hover input is received by the actor.\r
+               <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const TouchEvent&amp;event);</span></p></td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">KeyEventSignal()</span></td>\r
+               <td>Emitted when a key event is received by the actor.\r
+               <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName(const KeyEvent&amp;event);</span></p></td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<p>Only events are passed to the callbacks since only a single stage instance can exist in DALi application. The callback return types are <span style="font-family: Courier New,Courier,monospace;">void</span> because the stage has no parent to pass events to, even though it does not consume the events.</p>\r
+</li>\r
+\r
+<li>\r
+<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span>\r
+\r
+<table>\r
+   <caption>\r
+     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> input signals\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Input signals</th>\r
+        <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">KeyEventSignal()</span></td>\r
+               <td>Emitted when touch input is received by the actor.\r
+               </td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">KeyInputFocusGainedSignal()</span></td>\r
+               <td>Emitted when hover input is received by the actor.\r
+               </td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">KeyInputFocusLostSignal()</span></td>\r
+               <td>Emitted when a key event is received by the actor.\r
+               </td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<p>The key event signal is provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> and <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> classes, not by the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class. The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class is not designed to get key events. To receive key events, an actor must be an instance of the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control </span> class or one of its subclasses.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control </span> class can receive touch, hover, and wheel events as it inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span>  class.</p>\r
+</li>\r
+\r
+<li>\r
+<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> \r
+\r
+<table>\r
+   <caption>\r
+     Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span>  input signals\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Input signals</th>\r
+        <th>Description</th>\r
+    </tr>\r
+    <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">PreFocusChangeSignal()</span></td>\r
+               <td>Emitted when touch input is received by the actor.\r
+               </td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">FocusChangedSignal()</span></td>\r
+               <td>Emitted when hover input is received by the actor.\r
+               </td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">FocusGroupChangedSignal()</span></td>\r
+               <td>Emitted when a wheel event is received by the actor.\r
+               </td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">FocusedActorActivatedSignal()</span></td>\r
+               <td>Emitted when a wheel event is received by the actor.\r
+               </td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+</li>\r
+</ul>\r
+\r
+The following DALi classes provide signals:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Window</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Timer</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::RenderTask</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::ObjectRegistry</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PropertyNotification</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::View</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::GaussianBlurViewSignal</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::ScrollBar</span> </li> \r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Scrollable</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::AccessibilityFocusManager</span> </li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> </li>\r
+</ul>\r
+<p>For the signals of each class and their usage, see the API Reference.</p>\r
+\r
+<h2 id="gesture" name="gesture">Gestures</h2>\r
+<p>Gesture is a user-friendly high-level event produced from a stream of touch events. The <span style="font-family: Courier New,Courier,monospace;">Dali::GestureDetector </span> class analyzes a stream of touch events and attempts to determine the intention of the user. </p>\r
+<p>If an actor is attached to a gesture detector and the detector recognizes a user intention (detects a predefined pattern in a stream of touch events), the actor emits a detected gesture signal to the application.</p>\r
+\r
+<p>DALi currently supports following gesture detectors:</p>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span>: detects when the user does a long-press action.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span>: detects when the user does a tap action.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span>: detects when the user moves two fingers towards or away from each other.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span>: detects when the user moves one or more fingers in the same direction.</li>\r
+</ul>\r
+\r
+<p>The example below shows how an application can be notified of a pinch gesture:</p>\r
+\r
+<pre class="prettyprint">void OnPinch(Actor actor, PinchGesture pinch)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Scale your actor according to the pinch scale\r
+&nbsp;&nbsp;&nbsp;Vector3 newSize = actor.GetCurrentSize() * pinch.GetScale();\r
+&nbsp;&nbsp;&nbsp;actor.SetSize(newSize);\r
+}\r
+\r
+// Elsewhere\r
+PinchDetector detector = PinchDetector::New();\r
+detector.Attach(myActor);\r
+detector.DetectedSignal().Connect(&amp;OnPinch);</pre>\r
+\r
+\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm b/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm
new file mode 100755 (executable)
index 0000000..9bfd3d7
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>DALi</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/###.html">DALi API Reference for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/###.html">DALi API Reference for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>DALi</h1>
+
+<p>DALi is a cross-platform 3D UI Toolkit for embedded systems. Its 3D user interface engine enables you to create rich and high-performance UI applications. DALi is based on OpenGL ES 2.0, but provides a clean cross-platform C++ framework. This means that you can use high-level DALi APIs instead of accessing low-level OpenGL APIs directly.</p>
+
+<p>When creating a DALi application, make sure you understand the following main features:</p>
+
+<ul>
+       <li><a href="dali_overview_n.htm">DALi Overview: Getting Started with DALi UI Programming</a>
+       <p>Enables you to get started with the DALi UI programming.</p></li>
+       <li><a href="actors_n.htm">Actors: Working with Basic DALi Components</a>
+       <p>Enables you to handle DALi actors.</p></li>
+       <li><a href="event_handling_n.htm">Event Handling: Managing the Event Flow</a>
+       <p>Enables you to handle DALi events.</p></li>
+       <li><a href="ui_components_n.htm">UI Components: Creating the Application Layout</a>
+       <p>Enables you to handle DALi UI components.</p></li>
+       <li><a href="animation_n.htm">Animations: Creating Transformations</a>
+       <p>Enables you to create animated effects.</p></li>
+       <li><a href="dali_applications_n.htm">DALi Applications: Creating Your First DALi Application</a>
+       <p>Enables you to create your first DALi application.</p></li>
+       <li><a href="resources_n.htm">Resources: Handling Images</a>
+       <p>Enables you to manage resource images.</p></li>
+       <li><a href="rendering_effects_n.htm">Rendering and Effects: Managing Viewing Modes and Shader Effects</a>
+       <p>Enables you to manage DALi viewing modes and create shade effects.</p></li>
+</ul>
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/native/dali/itemview_n.htm b/org.tizen.ui.guides/html/native/dali/itemview_n.htm
new file mode 100755 (executable)
index 0000000..2f1a533
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/itemview_n.htm
@@ -0,0 +1,145 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>ItemView</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#factory">Item Factory</a></li>\r
+                       <li><a href="#create">Creating an ItemView</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemFactory.html">Dali::Toolkit::ItemFactory API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemLayout.html">Dali::Toolkit::ItemLayout API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/structDali_1_1Toolkit_1_1ItemRange.html">Dali::Toolkit::ItemRange API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemView.html">Dali::Toolkit::ItemView API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemFactory.html">Dali::Toolkit::ItemFactory API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemLayout.html">Dali::Toolkit::ItemLayout API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/structDali_1_1Toolkit_1_1ItemRange.html">Dali::Toolkit::ItemRange API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemView.html">Dali::Toolkit::ItemView API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Wearable Native</a></li>             \r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>ItemView</h1>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">ItemView</span> class provides scrollable layout for item sets. The <span style="font-family: Courier New,Courier,monospace;">ItemView</span> is a scrollable container that can contain many items. It can have several layouts. There are also built-in layouts that you can use, as illustrated in the following figure.</p>\r
+\r
+<p class="figure">Figure: ItemView layouts</p>  \r
+\r
+       <table>\r
+   <tbody>\r
+    <tr>\r
+     <td>Grid</td>\r
+     <td>Spiral</td>\r
+        <td>Depth</td>\r
+    </tr>\r
+       <tr>\r
+     <td style="text-align:center;"><img alt="captured screen2" src="../../images/grid.png" /></td>\r
+     <td style="text-align:center;"><img alt="captured screen2" src="../../images/spiral.png" /></td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/depth.png" /></td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+<p>You can also create your own custom layout by inheriting from the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemLayout</span> class.</p>\r
+\r
+<h2 id="factory" name="factory">Item Factory</h2>\r
+\r
+<p>Before creating an <span style="font-family: Courier New,Courier,monospace;">ItemView</span>, you must establish an <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span>. The <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> provides functions to create items and to get the number of created items. The following is a basic example of implementing an <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span>:</p>\r
+\r
+<pre class="prettyprint">class MyFactory : public Dali::Toolkit::ItemFactory\r
+{\r
+public:  \r
+&nbsp;&nbsp;&nbsp;virtual unsigned int GetNumberOfItems()  \r
+&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return the number of items&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return MY_ITEM_COUNT;  \r
+&nbsp;&nbsp;&nbsp;}  \r
+\r
+&nbsp;&nbsp;&nbsp;virtual Actor NewItem(unsigned int itemId)  \r
+&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create the actor representing the item based on the itemId \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;std::ostringstream imageName;&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageName &lt;&lt; &quot;my-image-folder/&quot; &lt;&lt; itemId &lt;&lt; &quot;.png&quot;; \r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If item is 10, this results in my-image-folder/10.png\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dali::ResourceImage image = Dali::ResourceImage::New(imageName.str());\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create an ImageActor from the image\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return Dali::ImageActor::New(image);\r
+&nbsp;&nbsp;&nbsp;}\r
+};</pre>\r
+\r
+<p>The overridden functions in the factory are called by the <span style="font-family: Courier New,Courier,monospace;">ItemView</span> object.</p>\r
+\r
+<h2 id="create" name="create">Creating an ItemView</h2>\r
+\r
+<p>The following is a basic example of implementing an <span style="font-family: Courier New,Courier,monospace;">ItemView</span>:</p>\r
+\r
+<pre class="prettyprint">// Store this as a member variable\r
+MyFactory factory; \r
+\r
+// Pass in the factory\r
+Dali::Toolkit::ItemView itemView = Dali::Toolkit::ItemView::New(factory); \r
+\r
+itemView.SetParentOrigin(ParentOrigin::CENTER);\r
+itemView.SetAnchorPoint(AnchorPoint::CENTER);\r
+\r
+// Create a layout\r
+Dali::Toolkit::ItemLayoutPtr spiralLayout = Dali::Toolkit::DefaultItemLayout::New(Dali::Toolkit::DefaultItemLayout::SPIRAL);\r
+\r
+// Add the layout to the ItemView\r
+itemView.AddLayout(spiralLayout);\r
+\r
+// More layouts can be created and added to the ItemView\r
+// Activate the layout\r
+itemView.ActivateLayout(0, Dali::Stage::GetCurrent().GetSize(), 0);\r
+\r
+Dali::Stage::GetCurrent().Add(itemView);</pre>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/multi_threading_n.htm b/org.tizen.ui.guides/html/native/dali/multi_threading_n.htm
new file mode 100755 (executable)
index 0000000..61c1110
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/multi_threading_n.htm
@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Multi-threading</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#hierachy">Multi-threaded Architecture</a></li>\r
+                       <li><a href="#read">Reading an Animated Value</a></li>\r
+                       <li><a href="#set">Setting a Property during an Animation</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">DALi::Animation API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">DALi::Animation API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Multi-threading</h1>\r
+\r
+<h2 id="hierachy" name="hierachy">Multi-threaded Architecture</h2>\r
+\r
+<p>DALi animations and rendering occur in a dedicated rendering thread. This allows animations to run smoothly, regardless of the time taken to process inputs events in the application code.</p>\r
+\r
+<p>Internally, DALi contains the scene graph that mirrors the actor hierarchy. The scene graph objects perform the actual animation and rendering, while the actors provide thread-safe access. Actors and scene graph objects communicate through messaging.</p>\r
+\r
+<p>The following figure shows an actor hierarchy, in which one of the actors is being animated. The green objects in are created by the application code, while the blue private objects are used in the dedicated rendering thread.</p>\r
+\r
+<p class="figure">Figure: Actor hierarchy with an animation</p> \r
+       <p align="center"><img alt="Actor hierarchy with an animation" src="../../images/multi_threading2.png"/></p> \r
+ \r
+<h2 id="read" name="read">Reading an Animated Value</h2>\r
+\r
+<p>When a property is animatable, it can only be modified in the rendering thread. The value returned from a getter method is the value used when the previous frame was rendered.</p>\r
+\r
+<p>For example, the <span style="font-family: Courier New,Courier,monospace;">GetCurrentPosition()</span> function returns the position in which the actor was last rendered. Since the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function is asynchronous, a call to <span style="font-family: Courier New,Courier,monospace;">GetCurrentPosition()</span> function does not immediately return the same value.</p>\r
+\r
+<pre class="prettyprint">Actor actor = Actor::New();\r
+Stage::GetCurrent().Add(actor); // Initial position is 0,0,0\r
+\r
+actor.SetPosition(Vector3(10,10,10));\r
+\r
+Vector3 current;\r
+current = actor.GetCurrentPosition();\r
+std::cout &lt;&lt; &quot;Current position: &quot; &lt;&lt; current.x &lt;&lt; &quot;, &quot; &lt;&lt; current.y &lt;&lt; &quot;, &quot; &lt;&lt; current.z &lt;&lt; std::endl;\r
+\r
+std::cout &lt;&lt; &quot;...&quot; &lt;&lt; std::endl;\r
+\r
+// Handling another event\r
+\r
+current = actor.GetCurrentPosition();\r
+std::cout &lt;&lt; &quot;Current position: &quot; &lt;&lt; current.x &lt;&lt; &quot;, &quot; &lt;&lt; current.y &lt;&lt; &quot;, &quot; &lt;&lt; current.z &lt;&lt; std::endl;\r
+</pre>\r
+\r
+<p>The above code is likely to output:</p>\r
+<pre class="prettyprint">Actor actor = Actor::New();\r
+&quot;Current position: 0,0,0&quot;\r
+// Other positions\r
+&quot;Current position: 10,10,10&quot;</pre>\r
+\r
+<h2 id="set" name="set">Setting a Property during an Animation</h2>\r
+\r
+<p>When a property is being animated, the animation overrides all values set with other functions, such as the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function.</p>\r
+\r
+<p class="figure">Figure: Actor hierarchy with an animated property</p>  \r
+       <p align="center"><img alt="Actor hierarchy with an animated property" src="../../images/multi_threading.png"/></p> \r
+ \r
+<p>The order of execution in the render thread is:</p>\r
+<ol>\r
+<li>Process message and call the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function</li>\r
+<li>Apply animation and call the <span style="font-family: Courier New,Courier,monospace;">SetPosition()</span> function</li>\r
+<li>Render frame</li>\r
+</ol>\r
+\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/rendering_effects_n.htm b/org.tizen.ui.guides/html/native/dali/rendering_effects_n.htm
new file mode 100755 (executable)
index 0000000..d62e239
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/rendering_effects_n.htm
@@ -0,0 +1,138 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Rendering and Effects: Managing Viewing Modes and Shader Effects</title>\r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#modes">Viewing Modes</a></li>\r
+                       <li><a href="#shader">Shader Effects</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ShaderEffect.html">Dali::ShaderEffect API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Rendering and Effects: Managing Viewing Modes and Shader Effects</h1>\r
+\r
+<h2 id="modes" name="modes">Viewing Modes</h2>\r
+\r
+<p>DALi supports the following viewing modes:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">MONO</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span></li>\r
+</ul>\r
+\r
+<p><span style="font-family: Courier New,Courier,monospace;">MONO</span> is the default viewing mode. When using the <span style="font-family: Courier New,Courier,monospace;">MONO</span> mode, only 1 image per scene is produced in every update. In this setup, DALi creates a default render task, which renders everything added to the stage root layer, and 1 default camera for that render task.</p>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> and <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> modes allow the application to produce stereo images. Stereoscopy is a technique for creating or enhancing the illusion of depth in an image. Stereo rendering technique produces 2 images of the scene with an slight offset between them, which is presented to the left and the right eye independently. In this setup, DALi creates 2 additional render tasks, 1 for the right eye and 1 for the left, each with its own camera. Those cameras are parented to the default camera. The method to generate the projection transformation for each camera is known as &quot;parallel axis asymmetric frustum perspective projection&quot; and is illustrated in the following figure.</p>\r
+\r
+<p class="figure">Figure: Stereoscopic projection</p>  \r
+       <p align="center"><img alt="Stereoscopic projection" src="../../images/stereo_projection.png"/></p> \r
+ \r
+<p>The separation between the 2 cameras is configurable but, typically, it ranges between 50 and 70 millimeters. Too large a separation can be hard to resolve and is known as hyperstereo. The convergence plane for both frustums is the 2D plane, so the projection of anything lying in the 2D plane is coincident for both left and right eye, resulting in no parallax. Objects that lie in front of the projection plane appear to be in front of the screen and objects behind the projection plane appear to be &quot;into&quot; the screen. Objects behind the projection plane (positive parallax) are easier to look at without straining the eyes.</p>\r
+\r
+<p>To view stereoscopic images correctly, each image must be presented to each eye independently. There are devices on the market for this, such as a head-mounted display, which is a display device worn in the head that has 2 small displays, one for each eye. A cheaper alternative to this often expensive device is the Google cardboard viewer.</p>\r
+\r
+<p class="figure">Figure: Google cardboard viewer</p>  \r
+       <p align="center"><img alt="Google cardboard viewer" src="../../images/google_cardboard.png"/></p> \r
+ \r
+<p>With the Google cardboard viewer or a similar device, you can transform your phone into a basic virtual reality headset.</p>\r
+\r
+<h3 id="stereo" name="stereo">Stereoscopic Rendering in DALi</h3>\r
+\r
+<p>THe <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> mode presents the left image on the top half of the screen and the right image on the bottom half. It is intended to be used in landscape orientation, so the images are rotated 90 degrees counter-clockwise. The <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> mode, on the other hand, renders the left image on the left half of the screen and the right image on the right half.</p>\r
+\r
+<p>To define the viewing mode to be used, use the <span style="font-family: Courier New,Courier,monospace;">SetViewMode()</span> function of the <span style="font-family: Courier New,Courier,monospace;">Application</span> class, passing the mode as a parameter. You can query the view mode being used by calling the <span style="font-family: Courier New,Courier,monospace;">GetViewMode()</span> function. To define the separation between the left and right cameras, use the <span style="font-family: Courier New,Courier,monospace;">SetStereoBase()</span>function, passing the distance in millimeters as a parameter. This distance can be queried using the <span style="font-family: Courier New,Courier,monospace;">GetStereoBase()</span> function. You can also set the viewing mode and offset at initialization time using 2 command line arguments for this purpose: <span style="font-family: Courier New,Courier,monospace;">-view-mode</span> (or <span style="font-family: Courier New,Courier,monospace;">-v</span>) and <span style="font-family: Courier New,Courier,monospace;">0</span> for <span style="font-family: Courier New,Courier,monospace;">MONO</span>, <span style="font-family: Courier New,Courier,monospace;">1</span> for <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span>, <span style="font-family: Courier New,Courier,monospace;">2</span> for <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span>, and <span style="font-family: Courier New,Courier,monospace;">-stereo-base</span> (or <span style="font-family: Courier New,Courier,monospace;">-s</span>) and the separation in millimeters.</p>\r
+\r
+<h3 id="restrictions" name="restrictions">Restrictions</h3>\r
+\r
+<p>There are certain restrictions when writing stereoscopic applications using DALi:</p>\r
+\r
+<ul>\r
+<li>When a stereo mode is selected, the default render task source actor is set to an uninitialized actor so it does not render anything. Changing the default render task source actor later on produces undesired results, as the user does not want to see anything rendered by the default camera when stereo mode is on.</li>\r
+<li>Stereo cameras are parented to the default camera, so if the application needs to change the camera position or orientation, it must change the default camera transformation. The handle to the default camera can be obtained from the default render task as follows:\r
+\r
+<pre class="prettyprint">Dali::RenderTask defaultRenderTask = Dali::Stage::GetCurrent().GetRenderTaskList().GetTask(0); Dali::CameraActor defaultCamera = defaultRenderTask.GetCameraActor();</pre>\r
+</li>\r
+<li>Stereo render tasks render everything added to the stage&#39;s root layer. If the application must render an object hierarchy to an off-screen buffer, it must set the exclusive flag on that render task so that the stereo tasks do not render that particular subtree. To set the exclusive flag in a render task, use the <span style="font-family: Courier New,Courier,monospace;">SetExclusive()</span> function defined in the render task.</li>\r
+</ul>\r
+\r
+<h2 id="shader" name="shader">Shader Effects</h2>\r
+<p>The shader effects allow the developer to apply visual deformations on the actors. They can affect the geometry, the colors and textures of the actor.</p>\r
+<ul>\r
+<li>Each actor has its own default shaders.</li>\r
+<li>Those default shaders can be overridden by modified shader effects.</li>\r
+<li>In an application, each actor might possess its own shader effect.</li>\r
+<li>In an application, multiple actors might apply the same effect.</li>\r
+</ul>\r
+\r
+<h3 id="custom" name="custom">Custom Shader Effects</h3>\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">ShaderEffect</span> enables you to create custom shader effects by specifying the vertex and pixel shaders. For a custom shader, you can provide the vertex and fragment shader code as strings. These shader snippets get concatenated with the default attributes and uniforms.</p>\r
+\r
+<p>Create a custom shader effect:</p>\r
+\r
+<pre class="prettyprint">String myVertexShader; // This variable would contain the code for a vertex shader.\r
+Dali::ShaderEffect myEffect = Dali::ShaderEffect::New(myVertexShader,\r
+   &quot;&quot; // use default pixel shader\r
+);</pre>\r
+\r
+<p>Set the value of a uniform:</p>\r
+\r
+<pre class="prettyprint">// if the uniform was declared like this in the shader: uniform float myUniform;\r
+myEffect.SetUniform(&quot;myUniform&quot;, 0.5f);</pre>\r
+\r
+<p>You can apply the custom shader effect to an actor like any other shader:</p>\r
+\r
+<pre class="prettyprint">actor.SetShaderEffect(myEffect);</pre>\r
+\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/resources_n.htm b/org.tizen.ui.guides/html/native/dali/resources_n.htm
new file mode 100755 (executable)
index 0000000..d0a2575
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/resources_n.htm
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Resources: Handling Images</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#image">Resource Image</a></li>\r
+                       <li><a href="#patch">9-patch Image</a></li>\r
+                       <li><a href="#buffer">Buffer Image</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">DALi::BufferImage API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1NinePatchImage.html">DALi::NinePatchImage API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1BufferImage.html">DALi::BufferImage API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1NinePatchImage.html">DALi::NinePatchImage API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Resources: Handling Images</h1>\r
+\r
+<h2 id="image" name="image">Resource Image</h2>\r
+\r
+<p>A resource image is an image that is loaded using a file path or a URL:</p>\r
+\r
+<pre class="prettyprint">Dali::ResourceImage image = Dali::ResourceImage::New(&quot;/my-path/my-image.png&quot;);</pre>\r
+\r
+<p>The resource image can be used with actors, such as ImageActor.</p>\r
+\r
+<p>Resources are loaded in separate threads. The application can connect to the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage::LoadingFinishedSignal()</span> signal to get notified when the image has loaded.</p>\r
+\r
+<p>By default, resource images start loading immediately and the data is released only when the <span style="font-family: Courier New,Courier,monospace;">ResourceImage</span> handle is destroyed. To optimize the application&#39;s memory footprint, the application can ask resources to be loaded only when actually required and their data to be released automatically when they are no longer being used by actors.</p>\r
+\r
+<pre class="prettyprint">Dali::ResourceImage image = Dali::ResourceImage::New(&quot;/my-path/my-image.png&quot;, Dali::ResourceImage::ON_DEMAND, Dali::Image::UNUSED);</pre>\r
+\r
+<p>If the <span style="font-family: Courier New,Courier,monospace;">Dali::Image::UNUSED</span> property is used, when the image is used again, the resource data is reloaded automatically.</p>\r
+\r
+<p>If the application requires the image dimensions immediately, they can be retrieved synchronously:</p>\r
+\r
+<pre class="prettyprint">Dali::ImageDimensions dimensions = Dali::ResourceImage::GetImageSize(&quot;/my-path/my-image.png&quot;);</pre>\r
+\r
+<p>This is a disk read which can be slow and block the event thread.</p>\r
+\r
+<h2 id="patch" name="patch">9-patch Image</h2>\r
+\r
+<p>DALi provides support for 9-patch images. These are stretchable, repeatable images which are reduced to their smallest size. Essentially, an image is sliced up into 9 squares and the 4 corners do not change size at all. The other 5 segments are stretched or repeated to allow the whole image to scale appropriately.</p>\r
+\r
+<p>DALi has inbuilt support for *.9.png and *.9.jpg images as well.</p>\r
+ \r
+<p>The following is an example of a *.9.png image.</p>\r
+\r
+<p class="figure">Figure: 9-patch image</p>  \r
+       <p align="center"><img alt="9-patch image" src="../../images/9patch_resource.png"/></p> \r
+ \r
+<p>Zoomed in, the red section shows the part that is repeated. The corner areas remain static. 1-pixel border is also stripped out.</p>\r
+\r
+<p class="figure">Figure: Zoomed 9-patch image</p>  \r
+       <p align="center"><img alt="Zoomed 9-patch image" src="../../images/9patch_zoomed.png"/></p>\r
+\r
+<p>The following is an example of a 200 x 200 image.</p>\r
+\r
+<p class="figure">Figure: 200 x 200 image</p>  \r
+       <p align="center"><img alt="200 x 200 image" src="../../images/9patch_buffer.png"/></p> \r
+\r
+<h2 id="buffer" name="buffer">Buffer Image</h2>\r
+\r
+<p>A <span style="font-family: Courier New,Courier,monospace;">BufferImage</span> represents an image resource in the form of a pixel buffer data. The application can write to this buffer as required and the image is updated on the screen.</p>\r
+\r
+<pre class="prettyprint">// Create a 200 by 200 pixel buffer with a color-depth of 32-bits (with alpha)\r
+Dali::BufferImage image = Dali::BufferImage::New(200, 200);</pre>\r
+\r
+\r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/scrollview_n.htm b/org.tizen.ui.guides/html/native/dali/scrollview_n.htm
new file mode 100755 (executable)
index 0000000..7be69a6
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/scrollview_n.htm
@@ -0,0 +1,198 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>ScrollView</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#create">Creating a ScrollView</a></li>\r
+                       <li><a href="#ruler">Ruler, RulerDomain, and Wrap</a></li>\r
+               </ul>\r
+               <ul class="toc">\r
+               <p class="toc-title">Related Info</p>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1DefaultRuler.html">Dali::Toolkit::DefaultRuler API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1FixedRuler.html">Dali::Toolkit::FixedRuler API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Ruler.html">Dali::Toolkit::Ruler API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1RulerDomain.html">Dali::Toolkit::RulerDomain API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollView.html">Dali::Toolkit::ScrollView API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollViewEffect.html">Dali::Toolkit::ScrollViewEffect API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollViewPagePathEffect.html">Dali::Toolkit::ScrollViewPagePathEffect API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1DefaultRuler.html">Dali::Toolkit::DefaultRuler API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1FixedRuler.html">Dali::Toolkit::FixedRuler API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Ruler.html">Dali::Toolkit::Ruler API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RulerDomain.html">Dali::Toolkit::RulerDomain API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollView.html">Dali::Toolkit::ScrollView API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollViewEffect.html">Dali::Toolkit::ScrollViewEffect API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollViewPagePathEffect.html">Dali::Toolkit::ScrollViewPagePathEffect API for Wearable Native</a></li>                 \r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>ScrollView</h1>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> class provides scrollable view. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contains actors that can be scrolled manually through touch or automatically. </p>\r
+\r
+<p>The following figure shows layouts that use the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>.</p>\r
+\r
+<p class="figure">Figure: ScrollView</p>  \r
+       <p align="center"><img alt="ScrollView" src="../../images/scrollview.png"/></p>\r
+\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">snap-started</span> signal is emitted using the <span style="font-family: Courier New,Courier,monospace;">SnapStartedSignal()</span> function when the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.</p>\r
+\r
+<h2 id="create" name="create">Creating a ScrollView</h2>\r
+\r
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>:</p>\r
+\r
+<pre class="prettyprint">Dali::Toolkit::ScrollView scrollView;\r
+\r
+// Create a ScrollView instance\r
+myScrollView = ScrollView::New();\r
+\r
+// Add it to the stage\r
+Stage::GetCurrent().Add(scrollView);\r
+\r
+// Set the size of stage; it covers the entire stage \r
+Stage stage = Dali::Stage::GetCurrent();\r
+Size size = stage.GetSize();\r
+scrollView.SetSize(size);\r
+\r
+// Add actors to the ScrollView \r
+Image image = Image::New(DALI_IMAGE_DIR &quot;button-background.png&quot;);\r
+ImageActor imageActor = ImageActor::New(image);\r
+scrollView.Add(imageActor);\r
+// The ScrollView contents are now draggable\r
+\r
+// To enforce horizontal-only scrolling, the Y-axis ruler can be disabled \r
+RulerPtr rulerY = new DefaultRuler();\r
+rulerY-&gt;Disable();\r
+scrollView.SetRulerY(rulerY);\r
+\r
+// To enable snapping, a FixedRuler can be applied to the X-axis, with snap points spaced to the width of the stage. \r
+Size size = stage.GetSize();\r
+RulerPtr rulerX = new FixedRuler(size.width);\r
+scrollView.SetRulerX(rulerX);\r
+\r
+// A domain can be applied to rulers to prevent scrolling beyond this boundary\r
+// In this case, to 4 times the width of the stage, allowing for 4 pages to be scrolled\r
+Size size = stage.GetSize();\r
+RulerPtr rulerX = new FixedRuler(size.width);\r
+rulerX-&gt;SetDomain(RulerDomain(0.0f, size.width*4.0f));\r
+scrollView.SetRulerX(rulerX);</pre>\r
+\r
+<h2 id="ruler" name="ruler">Ruler, RulerDomain, and Wrap</h2>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">Ruler</span> abstract class defines the scroll axes. The <span style="font-family: Courier New,Courier,monospace;">RulerDomain</span> class specifies the minimum and maximum values of a ruler. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> class provides a wrap mode for <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents. When enabled, the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents are wrapped over the x/y domain. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> behavior depends on a combination of the Ruler, RulerDomain, and Wrap modes. The following table shows ScrollView behavior according to the combination.</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: Scrollview behavior in the Ruler, RulerDomain, and Wrap mode</caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Ruler</th>\r
+        <th>Domain</th>\r
+     <th>Wrap</th>\r
+        <th>Behavior</th>\r
+    </tr>\r
+    <tr>\r
+               <td>Disabled</td>\r
+               <td>Disabled</td>\r
+               <td>Wrap</td>\r
+               <td>No movement in axis</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Disabled</td>\r
+               <td>Enabled</td>\r
+               <td>No wrap</td>\r
+               <td>No movement in axis</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Disabled</td>\r
+               <td>Enabled</td>\r
+               <td>Wrap</td>\r
+               <td>No movement in axis</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Enabled</td>\r
+               <td>Disabled</td>\r
+               <td>No wrap</td>\r
+               <td>Free movement in axis</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Enabled</td>\r
+               <td>Disabled</td>\r
+               <td>Wrap</td>\r
+               <td>Free movement in axis, wrapped according to domain minimum and maximum</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Enabled</td>\r
+               <td>Enabled</td>\r
+               <td>No wrap</td>\r
+               <td>Movement limited to domain minimum and maximum</td>\r
+       </tr>\r
+       <tr>\r
+               <td>Enabled</td>\r
+               <td>Enabled</td>\r
+               <td>Wrap</td>\r
+               <td>Movement limited to domain minimum and maximum</td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+  \r
+ <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">Actors within a <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> are controlled by constraints. If you apply constraints to these actors externally, undefined behavior can occur. Applying additional constraints can conflict with the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> constraints, so place the actors within container actors. The container actors are affected by the constraints.</td>\r
+    </tr>\r
+   </tbody>\r
+ </table>\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/tableview_n.htm b/org.tizen.ui.guides/html/native/dali/tableview_n.htm
new file mode 100755 (executable)
index 0000000..0287f7a
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/tableview_n.htm
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>TableView</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>TableView</h1>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">TableView</span> class is a layout container for aligning child actors in a grid like layout. <span style="font-family: Courier New,Courier,monospace;">TableView</span> constraints the x and y position and width and height of the child actors.</p>\r
+\r
+<p class="figure">Figure: TableView</p>  \r
+       <p align="center"><img alt="TableView" src="../../images/tableview.png"/></p>\r
+       \r
+<h2 id="create" name="create">Creating a TableView</h2>\r
+\r
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TableView</span>:</p>\r
+\r
+<pre class="prettyprint">class ButtonsController: public ConnectionTracker\r
+{\r
+&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TableView tableView = TableView::New(4,4);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.SetKeyboardFocusable(true);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.SetName(&quot;TableView&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int row = 0; row &lt; 4; ++row)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int col = 0; col &lt; 4; ++col)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Control control = Control::New();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;std::ostringstream str;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str &lt;&lt; row &lt;&lt; &quot;-&quot; &lt;&lt; col;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;control.SetName(str.str());\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;control.SetKeyboardFocusable(true);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.AddChild(control, TableView::CellPosition(row, col));\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(tableView);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;// Signal\r
+\r
+&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
+}</pre>\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/textfield_n.htm b/org.tizen.ui.guides/html/native/dali/textfield_n.htm
new file mode 100755 (executable)
index 0000000..bd44fec
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/textfield_n.htm
@@ -0,0 +1,305 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>TextField </title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#create">Creating a TextField</a></li>\r
+                       <li><a href="#font">Font Selection</a></li>\r
+                       <li><a href="#align">Text Alignment</a></li>\r
+                       <li><a href="#decorations">Decorations</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextField.html">Dali::Toolkit::TextField API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextField.html">Dali::Toolkit::TextField API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>TextField </h1>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> class is a control providing a single-line editable text field.</p>\r
+\r
+<p class="figure">Figure: TextField</p>  \r
+       <p align="center"><img alt="TextField" src="../../images/textfield.png"/></p>\r
+       \r
+<h2 id="create" name="create">Creating a TextField</h2>\r
+\r
+<p>Before text has been entered, the <span style="font-family: Courier New,Courier,monospace;">TextField</span> can display a placeholder text. An alternative placeholder can be displayed when the <span style="font-family: Courier New,Courier,monospace;">TextField</span> has keyboard focus. For example, a <span style="font-family: Courier New,Courier,monospace;">TextField</span> used to enter a username can initially show the text <span style="font-family: Courier New,Courier,monospace;">Unknown Name</span>, and the text <span style="font-family: Courier New,Courier,monospace;">Enter Name.</span>when the cursor is visible.</p>\r
+\r
+<pre class="prettyprint">TextField field = TextField::New();\r
+field.SetProperty(TextField::Property::PLACEHOLDER_TEXT, &quot;Unnamed Name&quot;);\r
+field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_FOCUSED, &quot;Enter Name.&quot;);\r
+Stage::GetCurrent().Add(field);\r
+</pre>\r
+\r
+<p>When the <span style="font-family: Courier New,Courier,monospace;">TextField</span> is tapped, it automatically gets the keyboard focus. Key events enter text, and the placeholder text is removed. After text has been entered, it can be retrieved from the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> property.</p>\r
+\r
+<pre class="prettyprint">Property::Value fieldText = field.GetProperty(TextField::Property::TEXT);\r
+std::cout &lt;&lt; &quot;Received text: &quot; &lt;&lt; fieldText.Get&lt; std::string &gt;() &lt;&lt; std::endl;</pre>\r
+\r
+<h2 id="font" name="font">Font Selection</h2>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> automatically selects suitable fonts, in the same was as the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>. The preferred font can also be selected from a JSON stylesheet:</p>\r
+\r
+<pre class="prettyprint">{  \r
+&nbsp;&nbsp;&nbsp;&quot;styles&quot;:  \r
+&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;textfield&quot;:&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;  \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;font-family&quot;:&quot;Arial&quot;, &quot;font-style&quot;:&quot;Regular&quot;, &quot;point-size&quot;:8\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  \r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<h2 id="align" name="align">Text Alignment</h2>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:</p>\r
+\r
+<pre class="prettyprint">field.SetProperty(TextField::Property::HORIZONTAL_ALIGNMENT, &quot;BEGIN&quot;); // &quot;CENTER&quot; or &quot;END&quot;</pre>\r
+\r
+<h2 id="decorations" name="decorations">Decorations</h2>\r
+\r
+<p>For text decorations, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> class provides the properties listed in the following table.</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: <span style="font-family: Courier New,Courier,monospace;">TextField</span> properties\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Property</th>\r
+        <th>Type</th>\r
+        <th>Writable</th>\r
+        <th>Animatable</th>\r
+    </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>\r
+               <td>Integer</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+    <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_FOCUSED</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>\r
+               <td>Float</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">MAX_LENGTH</span></td>\r
+               <td>Integer</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">EXCEED_POLICY</span></td>\r
+               <td>Integer</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">VERTICAL_ALIGNMENT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">COLOR</span></td>\r
+               <td>Vector4</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span></td>\r
+               <td>Vector2</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span></td>\r
+               <td>Vector4</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">PRIMARY_CURSOR_COLOR</span></td>\r
+               <td>Vector4</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SECONDARY_CURSOR_COLOR</span></td>\r
+               <td>Vector4</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">ENABLE_CURSOR_BLINK</span></td>\r
+               <td>Boolean</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_INTERVAL</span></td>\r
+               <td>Float</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_DURATION</span></td>\r
+               <td>Float</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_IMAGE</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_PRESSED_IMAGE</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SCROLL_THRESHOLD</span></td>\r
+               <td>Float</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SCROLL_SPEED</span></td>\r
+               <td>Float</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_IMAGE_RIGHT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_LEFT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_RIGHT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HIGHLIGHT_COLOR</span></td>\r
+               <td>Vector4</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">DECORATION_BOUNDING_BOX</span></td>\r
+               <td>Rectangle</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">INPUT_METHOD_SETTINGS</span></td>\r
+               <td>Map</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. An alternative color can be used for placeholder text by setting the <span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, these properties do not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextField</span>.</p>\r
+\r
+<pre class="prettyprint">field.SetProperty(TextField::Property::TEXT_COLOR, Color::CYAN);\r
+field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK);</pre>\r
+\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/textlabel_n.htm b/org.tizen.ui.guides/html/native/dali/textlabel_n.htm
new file mode 100755 (executable)
index 0000000..1835665
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/textlabel_n.htm
@@ -0,0 +1,332 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>TextLabel</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#create">Creating a TextLabel</a></li>\r
+                       <li><a href="#select">Font Selection</a></li>\r
+                       <li><a href="#style">Font Styles</a></li>\r
+                       <li><a href="#align">Text Alignment</a></li>\r
+                       <li><a href="#size">Negotiating Size</a></li>\r
+                       <li><a href="#decoration">Decorations</a></li>\r
+                       <li><a href="#drop">Drop Shadow</a></li>\r
+                       <li><a href="#underlining">Underlining</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>TextLabel</h1>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.</p>\r
+\r
+<p class="figure">Figure: TextLabel</p>  \r
+       <p align="center"><img alt="TextLabel" src="../../images/textlabel.png"/></p>\r
+\r
+<h2 id="create" name="create">Creating a TextLabel</h2>\r
+\r
+<p>To display a <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>, the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> property must be set using a UTF-8 string.</p>\r
+\r
+<pre class="prettyprint">TextLabel label = TextLabel::New();\r
+label.SetProperty(TextLabel::Property::TEXT, &quot;Hello World&quot;);\r
+Stage::GetCurrent().Add(label);</pre>\r
+\r
+<p>The label must also be added to the stage, or to an actor on the stage. The position of the label on the screen depends on the <span style="font-family: Courier New,Courier,monospace;">parent-origin</span> and <span style="font-family: Courier New,Courier,monospace;">anchor-point</span> properties.</p>\r
+\r
+<h2 id="select" name="select">Font Selection</h2>\r
+\r
+<p>By default, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> automatically selects a suitable font from the platform. Typically, fonts do not support all scripts. For example, Latin fonts often do not provide Arabic glyphs. The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> cannot select fonts for all scripts.</p>\r
+\r
+<p>Alternatively, you can request a font using the <span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span>, <span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span>, and <span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span> properties:</p>\r
+\r
+<pre class="prettyprint">label.SetProperty(TextLabel::Property::FONT_FAMILY, &quot;HelveticaNue&quot;);\r
+label.SetProperty(TextLabel::Property::FONT_STYLE,  &quot;Regular&quot;);\r
+label.SetProperty(TextLabel::Property::POINT_SIZE,  12.0f);</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> falls back to using the default font if the requested font does not support the required scripts.</p>\r
+\r
+<h2 id="style" name="style">Font Styles</h2>\r
+\r
+<p>Setting the font size programmatically is not ideal for applications that support multiple screen resolutions. A more flexible approach is to prepare various JSON stylesheets and request a different style for each platform:</p>\r
+\r
+<pre class="prettyprint">StyleManager styleManager = StyleManager::Get();\r
+styleManager.RequestThemeChange(&quot;example-path/example.json&quot;);</pre>\r
+\r
+<p>To change the font for standard text labels, use JSON syntax:</p>\r
+\r
+<pre class="prettyprint">{  \r
+&nbsp;&nbsp;&nbsp;&quot;styles&quot;:  \r
+&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;textlabel&quot;:&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;  \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;font-family&quot;:&quot;Arial&quot;,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;font-style&quot;:&quot;Regular&quot;,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;point-size&quot;:8&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  \r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<p>The same point size is unlikely to be suitable for all labels in an application. To set custom sizes, simply set a <span style="font-family: Courier New,Courier,monospace;">style name</span> for each case and provide a style override in JSON:</p>\r
+\r
+<pre class="prettyprint">label.SetProperty(Control::Property::STYLE_NAME, &quot;custom&quot;); </pre>\r
+\r
+<p>In the example above, standard text labels have point size 8, and custom labels have point size 10.</p>\r
+\r
+<h2 id="align" name="align">Text Alignment</h2>\r
+\r
+<p>Wrapping can be enabled using the <span style="font-family: Courier New,Courier,monospace;">MULTI_LINE</span> property:</p>\r
+\r
+<pre class="prettyprint">label.SetProperty(TextLabel::Property::MULTI_LINE, true);</pre>\r
+\r
+<p>The text can be aligned horizontally to the beginning, end, or center of the available area:</p>\r
+\r
+<pre class="prettyprint">label.SetProperty(TextLabel::Property::HORIZONTAL_ALIGNMENT, &quot;BEGIN&quot;); // &quot;CENTER&quot; or &quot;END&quot;</pre>\r
+\r
+<h2 id="size" name="size">Negotiating Size</h2>\r
+\r
+<p>Size negotiation is a layouting feature supported by UI controls, such as <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>.</p>\r
+\r
+<p>There are several resize policies commonly used with <span style="font-family: Courier New,Courier,monospace;">TextLabels</span>.\r
+The following examples show the actual size by setting a colored background, whilst the black area represents the size of the parent control.</p>\r
+\r
+<h3 id="font" name="font">Using the Natural Size</h3>\r
+\r
+<p>In its natural size, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> is large enough to display the text without wrapping, and does not have extra space to align the text within. In the following example, the same result is displayed regardless of the alignment or multi-line properties:</p>\r
+\r
+<pre class="prettyprint">TextLabel label = TextLabel::New(&quot;Hello World&quot;);\r
+label.SetAnchorPoint(AnchorPoint::TOP_LEFT);\r
+label.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE,Dimension::ALL_DIMENSIONS);\r
+label.SetBackgroundColor(Color::BLUE);Stage::GetCurrent().Add(label);</pre>\r
+\r
+<h3 id="font" name="font">Height-for-width Negotiation</h3>\r
+\r
+<p>To lay out text labels vertically, a fixed (maximum) width must be provided by the parent control. Each <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> reports the desired height for the given width. The following example uses <span style="font-family: Courier New,Courier,monospace;">TableView</span> as the parent:</p>\r
+\r
+<pre class="prettyprint">TableView parent = TableView::New(3, 1);\r
+parent.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
+parent.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);\r
+parent.SetAnchorPoint(AnchorPoint::TOP_LEFT);\r
+\r
+Stage::GetCurrent().Add(parent);\r
+\r
+TextLabel label = TextLabel::New(&quot;Hello World&quot;);\r
+label.SetAnchorPoint(AnchorPoint::TOP_LEFT);\r
+label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
+label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);\r
+label.SetBackgroundColor(Color::BLUE);\r
+\r
+parent.AddChild(label, TableView::CellPosition(0, 0));\r
+parent.SetFitHeight(0);\r
+\r
+label = TextLabel::New(&quot;A Quick Brown Fox Jumps Over The Lazy Dog&quot;);\r
+label.SetAnchorPoint(AnchorPoint::TOP_LEFT);\r
+label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
+label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);\r
+label.SetBackgroundColor(Color::GREEN);\r
+label.SetProperty(TextLabel::Property::MULTI_LINE, true);\r
+\r
+parent.AddChild(label, TableView::CellPosition(1, 0));\r
+parent.SetFitHeight(1);\r
+\r
+label = TextLabel::New(&quot;لإعادة ترتيب الشاشات، يجب تغيير نوع العرض إلى شبكة قابلة للتخصيص&quot;);\r
+label.SetAnchorPoint(AnchorPoint::TOP_LEFT);\r
+label.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
+label.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);\r
+label.SetBackgroundColor(Color::BLUE);\r
+label.SetProperty(TextLabel::Property::MULTI_LINE, true);\r
+\r
+parent.AddChild(label, TableView::CellPosition(2, 0));\r
+parent.SetFitHeight(2);</pre>\r
+\r
+<p>In the example, the &quot;Hello World&quot; text label has been given the full width, not the natural width.</p>\r
+\r
+<h2 id="decoration" name="decoration">Decorations</h2>\r
+\r
+<p>For text decorations, the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> claSS provides several properties.</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> properties\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Property</th>\r
+        <th>Type</th>\r
+        <th>Writable</th>\r
+        <th>Animatable</th>\r
+    </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>\r
+               <td>Integer</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+    <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>\r
+               <td>Float</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">MULTI_LINE</span></td>\r
+               <td>Boolean</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">VERTICAL_ALIGNMENT</span></td>\r
+               <td>String</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span></td>\r
+               <td>Vector4</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span></td>\r
+               <td>Vector2</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span></td>\r
+               <td>Vector4</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_ENABLED</span></td>\r
+               <td>Boolean</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_COLOR</span></td>\r
+               <td>Vector4</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+       <tr>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE_HEIGHT</span></td>\r
+               <td>Float</td>\r
+               <td>Yes</td>\r
+               <td>No</td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<h3 id="font" name="font">Color</h3>\r
+\r
+<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, this does not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>.</p>\r
+\r
+<pre class="prettyprint">label.SetProperty(TextLabel::Property::TEXT, &quot;Red Text&quot;);\r
+label.SetProperty(TextLabel::Property::TEXT_COLOR, Color::RED);</pre>\r
+\r
+<h2 id="drop" name="drop">Drop Shadow</h2>\r
+\r
+<p>To add a drop shadow to the text, set the <span style="font-family: Courier New,Courier,monospace;">SHADOW_OFFSET</span> property with a non-zero values. The color can also be selected using the <span style="font-family: Courier New,Courier,monospace;">SHADOW_COLOR</span> property.</p>\r
+\r
+<pre class="prettyprint">stage.SetBackgroundColor(Color::BLUE);\r
+label1.SetProperty(TextLabel::Property::TEXT, &quot;Plain Text&quot;);\r
+label2.SetProperty(TextLabel::Property::TEXT, &quot;Text with Shadow&quot;);\r
+label2.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(1.0f, 1.0f));\r
+label2.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::BLACK);\r
+label3.SetProperty(TextLabel::Property::TEXT, &quot;Text with Bigger Shadow&quot;);\r
+label3.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(2.0f, 2.0f));\r
+label3.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::BLACK);\r
+label4.SetProperty(TextLabel::Property::TEXT, &quot;Text with Color Shadow&quot;);\r
+label4.SetProperty(TextLabel::Property::SHADOW_OFFSET, Vector2(1.0f, 1.0f));\r
+label4.SetProperty(TextLabel::Property::SHADOW_COLOR, Color::RED);</pre>\r
+\r
+<h2 id="underlining" name="underlining">Underlining</h2>\r
+\r
+<p>The text can be underlined by setting <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_ENABLED</span>. The color can also be selected using the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_COLOR</span> property.</p>\r
+\r
+<pre class="prettyprint">label1.SetProperty(TextLabel::Property::TEXT, &quot;Text with Underline&quot;);\r
+label1.SetProperty(TextLabel::Property::UNDERLINE_ENABLED, true);\r
+label2.SetProperty(TextLabel::Property::TEXT, &quot;Text with Color Underline&quot;);\r
+label2.SetProperty(TextLabel::Property::UNDERLINE_ENABLED, true);\r
+label2.SetProperty(TextLabel::Property::UNDERLINE_COLOR, Color::GREEN); </pre>\r
+\r
+<p>By default, the underline height is based on the font metrics. This can be overridden using the <span style="font-family: Courier New,Courier,monospace;">UNDERLINE_HEIGHT</span> property:</p>\r
+\r
+<pre class="prettyprint">label1.SetProperty(TextLabel::Property::UNDERLINE_HEIGHT, 1.0f);</pre>\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/dali/ui_components_n.htm b/org.tizen.ui.guides/html/native/dali/ui_components_n.htm
new file mode 100755 (executable)
index 0000000..f9a3700
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/dali/ui_components_n.htm
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>UI Components: Creating the Application Layout</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+               <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/###.html">Dali::Toolkit API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/###.html">Dali::Toolkit API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>UI Components: Creating the Application Layout</h1>\r
+\r
+<p>UI components are interactive components for layouting and scrolling the user interface. DALi provides UI components, such as buttons, item view, scroll view, table view, and text controls.</p>\r
+\r
+<p class="figure">Figure: DALi UI controls</p>  \r
+       <p align="center"><img alt="DALi UI controls" src="../../images/ui_controls.png"/></p>\r
+\r
+<p>The following table lists the available UI controls.</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: UI controls provided by Dali\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Control</th>\r
+        <th>Description</th>\r
+        <th>Related classes</th>\r
+    </tr>\r
+    <tr>\r
+               <td><a href="buttons_n.htm">Buttons</a></td>\r
+               <td>A push button that can be pressed, a checkbox button that can be checked/unchecked,and a radio button that only one option can be selected.</td>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">Button, PushButton, CheckBoxButton, RadioButton</span></td>\r
+       </tr>\r
+       <tr>\r
+               <td><a href="itemview_n.htm">ItemView</a></td>\r
+               <td>An item view that renders item sets in a scrollable layout.</td>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">ItemView, ItemFactory, ItemLayout, Scrollable</span></td>\r
+       </tr>\r
+       <tr>\r
+               <td><a href="scrollview_n.htm">ScrollView</a></td>\r
+               <td>A scroll view to provide scrollable view.</td>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">ScrollView, Scrollable, ScrollViewEffect, ScrollViewPagePathEffect</span></td>\r
+       </tr>\r
+       <tr>\r
+               <td><a href="tableview_n.htm">TableView</a></td>\r
+               <td>A table view that can align child actors in a grid like layout.</td>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">TableView</span></td>\r
+       </tr>\r
+       <tr>\r
+               <td><a href="textfield_n.htm">TextField</a></td>\r
+               <td>A text field that provides a single-line editable text field.</td>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">TextField</span></td>\r
+       </tr>\r
+       <tr>\r
+               <td><a href="textlabel_n.htm">TextLabel</a></td>\r
+               <td>A text label that renders a short text string.</td>\r
+               <td><span style="font-family: Courier New,Courier,monospace;">TextLabel</span></td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+  \r
+  <p>The base class for the controls is <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications). This class can also be used as for creating new custom UI controls. The following figure illustrates the hierarchy of the UI controls.</p>\r
+\r
+<p class="figure">Figure: DALi UI control hierarchy</p>  \r
+       <p align="center"><img alt="DALi UI control hierarchy" src="../../images/ui_control_hierarchy.png"/></p> \r
+       \r
+    \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
+\r
diff --git a/org.tizen.ui.guides/html/native/efl/animation_effects_n.htm b/org.tizen.ui.guides/html/native/efl/animation_effects_n.htm
new file mode 100755 (executable)
index 0000000..c6ee375
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/animation_effects_n.htm
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Animations and Effects: Creating Transformations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Animations and Effects: Creating Transformations</h1> 
+
+<p>EFL provides the following animation functionalities: Ecore animators, Elementary transitions, Edje animations, and Evas Map animations.</p>
+
+<p>The first option for creating animations with EFL is to use <a href="ecore_animation_n.htm">Ecore animators</a>. To create an Ecore animation, you must first determine the duration of the animation, and then define a callback function that performs the animation with that duration.</p>
+
+<p>You can also create animations using <a href="elementary_animation_n.htm">Elementary transitions</a>. Elementary transitions allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
+
+<p>A third option for animating objects is to use <a href="edje_animation_n.htm">Edje animations</a>, which are based on a simple principle: transitioning from one state to another. To animate an object with Edje, you have to first define the start and end states of the animation, and then transition the object from the start state to the end state.</p>
+
+<p>Finally, <a href="evas_map_animation_n.htm">Evas Map animations</a> allow you to apply transformations to all types of objects by way of UV mapping. In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p> 
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/basic_tutorial_mn.htm b/org.tizen.ui.guides/html/native/efl/basic_tutorial_mn.htm
new file mode 100755 (executable)
index 0000000..1e662b5
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/basic_tutorial_mn.htm
@@ -0,0 +1,285 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Basic Mobile Interactions</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#button">Using Buttons</a></li>
+                       <li><a href="#simple_text">Using Simple Text</a></li>
+                       <li><a href="#simple_list">Using Simple Lists</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>         
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Basic Mobile Interactions</h1>
+
+  
+<p>This tutorial teaches the basics of UI components interactions. It builds upon the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+ <h2 id="button" name="button">Using Buttons</h2>
+
+<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
+
+<h3>Button Styles </h3>
+<h4>Basic Text Button</h4>
+
+<p>To create a text-only button, use the following code.</p>
+<pre class="prettyprint">Evas_Object* button;
+
+button = elm_button_add(box);
+elm_object_text_set(button, &quot;Click me&quot;);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+
+<h4>Basic Icon Button</h4>
+<p>Instead of a button with text, create a button with an icon.</p>
+<pre class="prettyprint">Evas_Object* button2;
+Evas_Object* icon2;
+
+button2 = elm_button_add(box);
+icon2 = elm_icon_add(box);
+elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button2, &quot;icon&quot;, icon2);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+
+<h4>Icon and Text Button</h4>
+<p>Create buttons with both an icon and a text label.</p>
+<pre class="prettyprint">Evas_Object* button3;
+Evas_Object* icon3;
+button3 = elm_button_add(box);
+icon3 = elm_icon_add(box);
+elm_image_file_set(icon, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button3, &quot;icon&quot;, icon3);
+elm_object_text_set(button3, &quot;Press me&quot;);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre>
+
+<h4>Disabled Button</h4>
+<p>To disable a button so that it is not in use, only shown.</p>
+<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
+</pre>
+
+<h3>Callbacks </h3>
+<p>The Elementary buttons respond to user interactions with several events.</p>
+
+<h4>Click Event</h4>
+<p>The &quot;click&quot; event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
+<pre class="prettyprint">
+static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
+}
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
+</pre>
+
+<h4>Press/Unpress Events</h4>
+<p>The button can respond to the press and unpress events instead of the entire click event.</p>
+<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
+}
+static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
+}
+
+evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
+evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
+</pre>
+
+<h4>Repeated Events</h4>
+<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
+<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;char buf[16];
+
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
+
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
+}
+
+elm_button_autorepeat_set(button3, EINA_TRUE);
+elm_button_autorepeat_initial_timeout_set(button3, 1.0);
+elm_button_autorepeat_gap_timeout_set(button3, 0.5);
+evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
+</pre>
+
+ <h2 id="simple_text" name="simple_text">Using Simple Text</h2>
+
+<h3>Basic Text</h3>
+<p>To create a label object, use the following code.</p>
+<pre class="prettyprint">label = elm_label_add(ad-&gt;win);
+elm_object_text_set(label, &quot;My label&quot;);
+evas_object_show(label);
+</pre>
+
+<h3>Sliding Text</h3>
+<p>If your text is too long, set it to slide. The duration of the slide is set to five seconds in the following example. There are several styles available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text stops at an edge, reverts to its initial position and slides again.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text is originally empty. It slides in, all the way to the edge, continues sliding until the label is empty, and loops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text moves backwards after stopping at the edge. In the example, it is set to bounce.</li>
+</ul>
+
+<pre class="prettyprint">Evas_Object* label;
+label = elm_label_add(-&gt;win);
+elm_object_text_set(label, &quot;This text is supposed to be really long.&quot;);
+elm_label_slide_set(label, EINA_TRUE);
+elm_label_slide_duration_set(label, 5.);
+elm_object_style_set(label, &quot;slide_bounce&quot;);
+evas_object_show(label);
+</pre>
+
+<p>If needed, you can use the <span style="font-family: Courier New,Courier,monospace">slide,end</span> event to respond to the moment when the sliding text reaches its end.</p>
+
+<h3>Marker Text</h3>
+<p>A marker is a text that is centered and bold by default. As the default color is white, set the blue color in this example.</p>
+<pre class="prettyprint">elm_object_style_set(label, &quot;marker&quot;);
+evas_object_color_set(label, 0, 0, 255, 255);
+</pre>
+
+<h3>Styling the Text</h3>
+<p>You can apply basic styles to the text. For a bolded text, do as follows.</p>
+<pre class="prettyprint">elm_object_text_set(label, &quot;&lt;b&gt;This text is bold.&lt;/b&gt;&quot;);
+</pre>
+
+ <h2 id="simple_list" name="simple_list">Using Simple Lists</h2>
+
+<h3>Basic List</h3>
+<p>A list is a scrollable container, whose children are selected.</p>
+<pre class="prettyprint">Evas_Object* list;
+Evas_Object* icon;
+list = elm_list_add(ad-&gt;win);
+elm_list_item_append(list, &quot;Text item&quot;, NULL, NULL, NULL, NULL);
+icon = elm_icon_add(ad-&gt;win);
+elm_icon_standard_set(icon, &quot;chat&quot;);
+elm_list_item_append(list, &quot;Second item&quot;, icon, NULL, NULL, NULL);
+Evas_Object* button;
+button = elm_button_add();
+elm_object_text_set(button, &quot;Button&quot;);
+elm_list_item_append(list, &quot;Fourth item&quot;, NULL, button, NULL, NULL);
+elm_list_go(list);
+</pre>
+
+<p>Any Evas Object can be added as an icon, either at the beginning (third parameter) or the end (fourth parameter).</p>
+
+<h3>List Orientation</h3>
+<p>By default, a list is set vertically. This is how to display it horizontally.</p>
+<pre class="prettyprint">elm_list_horizontal_set(list, EINA_TRUE);
+</pre>
+
+<h3>List Mode</h3>
+<p>There are several modes for the list item dimensions.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>: The list does not set any size measures to inform the container how to resize it. If the list is not created as a &quot;resize object&quot;, its dimensions are zeroed. The list respects the container&#39;s geometry and if any of the list items do not fit into the container transverse axis, the list does not scroll in that direction.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_SCROLL</span>: This is the default value. This list is the same as ELM_LIST_COMPRESS, with the exception that if any of the list items do not fit into the container transverse axis, the list still scrolls in that direction.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>: This list sets a minimum size measure on the list object, so that containers may respect it (and resize themselves to fit the child properly). More specifically, a minimum size measure is set for its transverse axis, so that the largest item in that direction fits well. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_EXPAND</span>: Besides setting a minimum size on the transverse axis, as in <span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>, this list sets a minimum size on the longitudinal axis to reserve space for all its children to be visible at the same time. This feature is bound by the list object&#39;s maximum size measures that are set externally.</li>
+</ul>
+<pre class="prettyprint">elm_list_mode_set(list, ELM_LIST_COMPRESS);
+</pre>
+
+<h3>Scroller Policy</h3>
+<p>Several effects are shown on a list.</p>
+<p>For example, the scroller is set to bounce at the end on either direction.</p>
+<pre class="prettyprint">elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
+</pre>
+
+
+<p>This is how to control displaying scrollbars. The second argument is for the horizontal axis, the third one for the vertical axis.</p>
+<pre class="prettyprint">elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_ON);
+</pre>
+
+<p>As for the bounce preference, the second argument is for the horizontal axis, the third one for the vertical axis.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> hides the scrollbar</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> shows the scrollbar</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> the scrollbar is  shown only when needed and stays hidden at other times</li>
+</ul>
+
+<h3>Events</h3>
+<p>A list responds to several events:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user clicks or presses an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The user scrolls the list to the top edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The user scrolls the list to the bottom edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The user scrolls the list to the left edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The user scrolls the list to the right edge.</li>
+<li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: An item is pressed and highlighted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The press and highlight is removed on an item.</li>
+</ul>
+       
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/button_tutorial_wn.htm b/org.tizen.ui.guides/html/native/efl/button_tutorial_wn.htm
new file mode 100755 (executable)
index 0000000..09fbae2
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/button_tutorial_wn.htm
@@ -0,0 +1,231 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Wearable Buttons</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#init">Initializing the Button Application</a></li>
+                       <li><a href="#style">Using Button Styles</a></li>
+                       <li><a href="#event">Managing Button Events</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Buttons</h1>
+
+  
+<p>This tutorial teaches the basics of the button component interactions.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+
+<h2 id="init" name="init">Initializing the Button Application</h2>
+       
+<p>This use case creates an application with a window entitled &quot;Button Basic Tutorial&quot;. The window consists of a box component, and a button is placed inside the box.</p>
+       
+<p>To create a typical elementary application:</p> 
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad) 
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;Evas_Object *btn1, *btn2, *btn3;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Button Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;box);
+
+&nbsp;&nbsp;&nbsp;create_button(ad-&gt;box);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;struct app_data ad = {0,};
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}</pre>
+       
+       
+ <h2 id="style" name="style">Using Button Styles</h2>
+
+<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
+
+<p>To use various button styles:</p>
+
+<ol><li><p>To create buttons using various styles:</p>
+
+<ul><li>Create a basic text-only button:
+
+<pre class="prettyprint">Evas_Object* button;
+
+button = elm_button_add(box);
+elm_object_text_set(button, &quot;Click me&quot;);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre></li>
+
+<li>Create a basic icon button (no text, just an icon):
+<pre class="prettyprint">Evas_Object* button2;
+Evas_Object* icon2;
+
+button2 = elm_button_add(box);
+icon2 = elm_icon_add(box);
+elm_image_file_set(icon2, &quot;icon.png&quot;, NULL);
+elm_object_content_set(button2, icon2);
+evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button2, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button2);
+evas_object_show(button2);
+</pre></li>
+
+<li>Create a button with both an icon and a text label:
+<pre class="prettyprint">Evas_Object* button3;
+Evas_Object* icon3;
+button3 = elm_button_add(box);
+icon3 = elm_icon_add(box);
+elm_image_file_set(icon3, &quot;icon.png&quot;, NULL);
+elm_object_content_set(button3, icon3);
+elm_object_text_set(button3, &quot;Press me&quot;);
+evas_object_size_hint_weight_set(button3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button3, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button3);
+evas_object_show(button3);
+</pre></li>
+</ul></li>
+<li><p>To disable a button so that it is not in use, only shown:</p>
+<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
+</pre></li></ol>
+
+ <h2 id="event" name="event">Managing Button Events</h2>
+<p>The Elementary buttons respond to user interactions with several events.</p>
+<p>To manage button events:</p>
+
+<ul> 
+<li>Handle click events:
+<p>The &quot;click&quot; event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
+<pre class="prettyprint">
+static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Clicked!&quot;);
+}
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_click_cb, NULL);
+</pre></li>
+
+<li>Handle press and unpress events:
+<p>The button can respond to the separate press and unpress events instead of the entire click event.</p>
+<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pressed!&quot;);
+}
+static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Unpressed!&quot;);
+}
+
+evas_object_smart_callback_add(button3, &quot;pressed&quot;, _button_press_cb, NULL);
+evas_object_smart_callback_add(button3, &quot;unpressed&quot;, _button_unpress_cb, NULL);
+</pre></li>
+
+<li>Handle repeated events:
+<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
+<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;char buf[16];
+
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Repeat %d&quot;, count++);
+
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, buf);
+}
+
+elm_button_autorepeat_set(button3, EINA_TRUE);
+elm_button_autorepeat_initial_timeout_set(button3, 1.0);
+elm_button_autorepeat_gap_timeout_set(button3, 0.5);
+evas_object_smart_callback_add(button3, &quot;repeated&quot;, _button_repeat_cb, NULL);
+</pre></li></ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/circle_components_wn.htm b/org.tizen.ui.guides/html/native/efl/circle_components_wn.htm
new file mode 100755 (executable)
index 0000000..e36f89b
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/circle_components_wn.htm
@@ -0,0 +1,689 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Creating Wearable Circle Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#datetime">Circle Datetime</a></li>
+                       <li><a href="#genlist">Circle Genlist</a></li>
+                       <li><a href="#object">Circle Object</a></li>
+                       <li><a href="#progressbar">Circle Progressbar</a></li>
+                       <li><a href="#scroller">Circle Scroller</a></li>
+                       <li><a href="#slider">Circle Slider</a></li>
+                       <li><a href="#surface">Circle Surface</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Circle Components</h1>
+
+<p>Circle components extend the UI features and provide functionalities optimized for the circular UI.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>Generally, circle components can be added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_[component_name]_add()</span> function, which returns a circle object handle. Circle components are shown in a form of an arch with radius, line width, and color. These properties can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs. The circle object can also take a rotary event. Generally, a clockwise rotary event increases the value of the rotary event activated by the circle object, and a counter clockwise rotary event decreases the value.</p>
+
+<h2 id="datetime">Circle Datetime</h2>
+
+
+<p class="figure">Figure: Circle Datetime</p> 
+<p align="center"><img alt="Circle Datetime" src="../../images/circle_datetime.png" /></p> 
+
+<p>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field. If a rotary event is activated by <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span>, a circle datetime increases or decreases value of selected field in <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by the clockwise or counter clockwise rotary event.</p>
+
+<h3>Creating a Circle Datetime</h3>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_datetime_add()</span> function to create a circle object. When creating a circle datetime, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> handle must be passed as an argument. If a circle surface is passed as an argument, a circle object connected with a circle surface is created, and it is rendered by the circle surface. When <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as a surface argument, the new circle object is managed and rendered by itself.</p>
+<pre class="prettyprint">
+Evas_Object *datetime;
+Evas_Object *circle_datetime;
+
+datetime = elm_datetime_add(parent);
+circle_datetime = eext_circle_object_datetime_add(datetime, surface);
+</pre>
+
+<h3>Activating a Rotary Event</h3>
+
+<p>You can activate and deactivate the circle datetime by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle datetime can receive the rotary event. Otherwise, the circle datetime cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
+</pre>
+
+<h3>Using the Circle Object Property</h3>
+
+<p>A circle datetime has the following styles:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+<p>When created, the circle datetime has default style automatically.</p>
+
+<p>The circle datetime objects support the following circle object API calls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle datetime has the following item:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws a marker.</li>
+</ul>
+
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p> 
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__DATETIME__MODULE.html">Efl Extension Circle Datetime</a> API.</p>
+
+<h2 id="genlist">Circle Genlist</h2>
+
+<p class="figure">Figure: Circle Genlist</p> 
+<p align="center"><img alt="Circle Genlist" src="../../images/circle_genlist.png" /></p> 
+
+<p>Use the circle genlist to visualize and utilize the scroll effect for <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>. While <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> provides a scrollbar with straight horizontal and vertical movement, the circle genlist provides scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</p>
+
+<h3>Creating a Circle Genlist</h3>
+
+<p>A genlist and a surface are necessary when creating the circle genlist. The circle genlist is added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *circle_genlist, *parent;
+
+genlist = elm_genlist_add(parent);
+circle_genlist = eext_circle_object_genlist_add(genlist, surface);
+</pre>
+
+<h3>Configuring the Circle Genlist</h3>
+
+<p>You can set the circle genlist scroller policy by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_scroller_policy_set()</span> function.</p>
+<pre class="prettyprint">
+eext_circle_object_genlist_scroller_policy_set(circle_genlist, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_SCROLLER_POLICY_OFF, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_SCROLLER_POLICY_ON);
+</pre>
+<p>This sets the scrollbar visibility policy of a given scroller. <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden. <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> turns the scrollbar on all the time, and <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> turns it off. This applies to the horizontal and vertical scrollbars respectively.</p>
+<p>The following enum values are available for circle genlist.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span></li>
+</ul>
+
+<h3>Activating a Rotary Event</h3>
+
+<p>You can activate and deactivate the circle genlist by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle genlist can receive the rotary event. Otherwise, the circle genlist cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
+</pre>
+
+<h3>Using the Circle Object Property</h3>
+
+<p>Circle genlist objects support the following circle object API calls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle genlist has the following item:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item. It draws vertical scroll bar.</li>
+<li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__GENLIST__MODULE.html">Efl Extension Circle Genlist</a> API.</p>
+
+
+
+<h2 id="object">Circle Object</h2>
+
+<p>A circle object extends elementary components in a form of circular design. Sometimes, a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.</p>
+
+<h3>Creating a Circle Object</h3>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_add()</span> function to create a circle object. When creating a circle object, you can choose whether the circle object is rendered by itself or by the circle surface. If the circle surface is passed as an argument, a circle object connected with circle surface is created, and it is rendered by the circle surface.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+</pre>
+
+<p>When <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as a surface argument, the new circle object is managed and rendered by itself. Here, a circle object without a circle surface is created and showed in a size of 360 x 360.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, NULL);
+evas_object_size_hint_min_set(circle_obj, 360, 360);
+evas_object_show(circle_obj);
+</pre>
+
+<h3>Setting the Line Width</h3>
+
+<p>You can set the line width of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Here, circle object with a surface is created and its line width set to 20. You can get the current line width of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_line_width_set(circle_obj, 20);
+</pre>
+
+<p>You can set the line width of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_set()</span> function. If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Similar to the above example, a circle object with a surface is created and its line width is set to 20. You can get the current line width of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_get()</span> function.</p>
+<pre class="prettyprint">Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_line_width_set(circle_obj, &quot;default&quot;, 20);
+</pre>
+
+<h3>Setting the Angle</h3>
+
+<p>You can set the angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Here, circle object with surface is created and its angle set to a 45.0 degree angle. You can get the current angle of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_set(circle_obj, 45.0);
+</pre>
+
+<p>You can set the angle of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Similar to the above example, a circle object with surface is created and its angle is set to a 45.0 degree angle. You can get the current angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_set(circle_obj, &quot;default&quot;, 45.0);
+</pre>
+
+<h3>Setting the Angle Offset</h3>
+
+<p>You can set the angle offset of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. Here, a circle object with a 45.0 degree angle is created and its angle offset set to 30.0 degrees. As a result, the circle object has an arch of 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees. You can get the current angle offset of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_set(circle_obj, 45.0);
+eext_circle_object_angle_offset_set(circle_obj, 30.0);
+</pre>
+
+<p>You can set the angle offset of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. The following code works the same way as in the above example. You can get the current angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_set(circle_obj, &quot;default&quot;, 45.0); 
+eext_circle_object_item_angle_offset_set(circle_obj, &quot;default&quot;, 30.0);
+</pre>
+
+<h3>Setting the Minimum and Maximum Angle</h3>
+
+<p>You can set the minimum and maximum angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Here, a circle object with a surface is created and its minimum angle set to 0.0 degrees and maximum angle to 90.0 degrees. You can get the current minimum and maximum angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
+</pre>
+
+<p>You can set the minimum and maximum angles of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Similar to the above example, a circle object with a minimum and maximum angles of 0.0 and 90.0 is created. You can get the current minimum and maximum angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_min_max_set(circle_obj, &quot;default&quot;, 0.0, 90.0);
+</pre> 
+
+<h3>Setting the Minimum and Maximum Value</h3>
+
+<p>You can set the minimum and maximum values of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Here, a circle object with a surface is created and its minimum value is set to 0.0 degrees and maximum value to 10.0 degrees. You can get the current minimum and maximum value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
+</pre>
+
+<p>You can set the value of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Similar to the above example, a circle object with a minimum and maximum value of 0.0 to 10.0 degrees is created. You can get the current minimum and maximum values of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_min_max_get()</span> function.</p>
+<pre class="prettyprint"> 
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_min_max_set(circle_obj, &quot;default&quot;, 0.0, 10.0);
+</pre>
+
+<h3>Setting the Value</h3>
+
+<p>You can set the value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Here, a circle object with a surface is created and its value set to 5.0. You can get the current value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_value_set(circle_obj, 5.0);
+</pre>
+
+<p>You can set the value of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Similar to the above example, a circle object with a surface is created and its value is set to 5.0 degree angle. You can get the current value of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_set(circle_obj, &quot;default&quot;, 5.0);
+</pre>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The value cannot be lower than the minimum value or higher than the maximum value.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<h3>Setting the Color</h3>
+
+<p>You can set the color of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. To set the color, red, green, blue, and alpha values in range from 0 to 255 must  be passed. Here, a circle object with a surface is created and its color set to blue. You can get the current color of circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
+</pre>
+
+<p>You can set the color of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. Similar to the above example, a circle object with a surface is created and its color is set to red. You can get the current color of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_set(circle_obj, &quot;default&quot;, 255, 0, 0, 255);
+</pre>
+
+<h3>Setting the Radius</h3> 
+
+<p>You can set the radius of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Here, a circle object with radius of 50.0 is created. You can get the current radius of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_radius_set(circle_obj, 50.0);
+</pre>
+
+<p>You can set the radius of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Similar to the above example, a circle object with a radius of 50.0 is created. You can get the current radius of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_radius_set(circle_obj, &quot;default&quot;, 50.0);
+</pre>
+
+<h3>Disabling a Circle Object</h3>
+
+<p>You can disable the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function. Here, a circle object is disabled. You can get the current disabled status of circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_disabled_set(circle_obj, EINA_TRUE);
+</pre>
+
+<p>You can enable a disabled circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> argument.</p>
+<pre class="prettyprint">
+eext_circle_object_disabled_set(circle_obj, EINA_FALSE);
+</pre>
+
+
+
+
+<h2 id="progressbar">Circle Progressbar</h2>
+
+<p class="figure">Figure: Circle Progressbar</p> 
+<p align="center"><img alt="Circle Progressbar" src="../../images/circle_progressbar.png" /></p> 
+
+<p>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</p>
+
+<h3>Creating a Circle Progressbar</h3>
+
+<p>You can create the circle progressbar by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_progressbar_add()</span> function. When creating the circle progressbar, a surface is necessary to render on the surface.</p>
+<pre class="prettyprint">
+Evas_Object *circle_progressbar, *parent;
+circle_progressbar = eext_circle_object_progressbar_add(parent, surface);
+</pre>
+
+<h3>Using the Circle Object Property</h3>
+<p>Circle progressbar supports the following circle object API calls:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle progressbar has the following items:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the progressbar.</li>
+<li><span style="font-family: Courier New,Courier,monospace">bg</span>: Progress bar background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__PROGRESSBAR__MODULE.html">Efl Extension Circle Progressbar</a> API.</p>
+
+<h3>Configuring Circle Progressbar</h3>
+
+<p>Before using the circle progressbar, its minimum and maximum values are set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. The current value is set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>.</p>
+<p>Here, the minimum value is set to 0.0, the maximum value to 100.0, and the current value to 3.0.</p>
+<pre class="prettyprint">
+eext_circle_object_value_min_max_set(circle_progressbar, 0.0, 100.0);
+eext_circle_object_value_set(circle_progressbar, 3.0);
+</pre>
+
+<h2 id="scroller">Circle Scroller</h2> 
+
+<p class="figure">Figure: Circle Scroller</p> 
+<p align="center"><img alt="Circle Scroller" src="../../images/circle_scroller.png" /></p> 
+
+<p>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar. It wraps the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> internally only to draw a circular scroll bar to the edge of the circular screen. This means you can use <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> callbacks and APIs excluding <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> APIs.</p>
+
+<h3>Creating a Circle Scroller</h3> 
+
+<p>To create a circle scroller, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_add()</span> function. <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> has to be passed by the first parameter of this function.</p>
+<pre class="prettyprint">
+Evas_Object *scroller;
+Evas_Object *circle_scroller;
+
+scroller = elm_scroller_add(parent);
+circle_scroller = eext_circle_object_scroller_add(scroller, surface);
+</pre>
+
+<h3>Activating the Rotary Event</h3>
+
+<p>You can activate and deactivate the circle scroller by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle scroller can receive the rotary event. Otherwise, the circle scroller cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
+</pre>
+
+<h3>Using the Circle Object Property</h3>
+
+<p>A circle scroller has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+<p>When created, the circle scroller has default style automatically.</p>
+
+<p>Circle scroller objects support the following circle object API calls:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle slider has the following items:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the vertical scroll bar.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bar</span>: Horizontal scroll bar circle item.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bg</span> : Horizontal scroll background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../..//org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SCROLLER__MODULE.html">Efl Extension Circle Scroller</a> API.</p>
+
+<h3>Configuring the Circle Scroller</h3>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> APIs to configure a circle scroller, except <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> APIs.</p>
+<p>Instead of excluded APIs, <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_get()</span> functions are provided for the circle scroller.</p>
+<p>A policy parameter has the following value.</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span>: indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span>: Turns the scrollbar on all the time.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span>: Turns the scrollbar off. This applies to the horizontal and vertical scrollbars respectively.</li>
+</ul>
+<p>The following example shows how to set the scroll bar visibility policy to <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> for horizontal scroll bar and <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> for vertical scroll bar.</p>
+<pre class="prettyprint">
+eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
+</pre>
+
+<h2 id="slider">Circle Slider</h2> 
+
+<p class="figure">Figure: Circle Slider</p> 
+<p align="center"><img alt="Circle Slider" src="../../images/circle_slider.png" /></p> 
+ 
+<p>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</p>
+
+<h3>Adding an Eext Slider object</h3>
+
+<p>To create a circle slider, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_slider = NULL;
+circle_slider = eext_circle_object_slider_add(parent, surface);
+</pre>
+
+<h3>Activating the Rotary Event</h3>
+
+<p>You can activate or deactivate the circle slider by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle slider can receive the rotary event. Otherwise, the circle slider cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_slider, EINA_TRUE);
+</pre>
+
+<h3>Using the Circle Slider Property</h3>
+
+<p>A circle slider has the following styles:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+
+<p>When created, the circle slider has default style automatically.</p>
+<p>Circle slider objects support the following circle object API calls:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle slider has the following items:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item, It draws slider bar.</li>
+       <li><span style="font-family: Courier New,Courier,monospace">bg</span>: Background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SLIDER__MODULE.html">Efl Extension Circle Slider</a> API.</p>
+
+<h3>Configuring the Circle Slider</h3>
+
+<p>The circle slider step value is used when the rotary event increases or decreases the circle slider value. It can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_step_set()</span> function.</p>
+<p>Here, the step value is set to 0.5.</p>
+<pre class="prettyprint">
+eext_circle_object_slider_step_set(circle_slider, 0.5);
+</pre>
+<p>Before using the circle slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span>. The current value is set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>.</p>
+<p>Here, the minimum value is set to 0.0, the maximum value to 15.0, and the current value to 3.0.</p>
+<pre class="prettyprint">
+eext_circle_object_value_min_max_set(circle_slider, 0.0, 15.0);
+eext_circle_object_value_set(circle_slider, 3.0);
+</pre>
+<p>You can retrieve the current value of the circle slider with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
+<pre class="prettyprint">
+double value = eext_circle_object_value_get(circle_slider);
+</pre>
+
+<h3>Using Circle Slider Callbacks</h3>
+
+<p>The circle slider emits the following signal:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">value,changed</span>: The rotary event changes the circle slider value.</li>
+</ul>
+<p>For this signal, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">value,changed</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;value,changed&quot;, _value_changed_cb, data);
+}
+
+// Callback function for the &quot;value,changed&quot; signal
+// This callback is called when a value of the circle slider is changed
+static void
+_value_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Circle slider value changed. \n&quot;);
+}
+</pre>
+
+<h2 id="surface">Circle Surface</h2>
+
+<p>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered. When one of circle objects is set as visible, the surface renders the circle object and hides the others.</p> 
+
+<h3>Creating a Circle Surface</h3>
+
+<p>To create a new circle surface:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+surface = eext_circle_surface_conformant_add(conformant);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_conformant_add()</span> function creates a circle surface in the conformant layer. If you want to create a circle surface in the layout layer, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_layout_add()</span> function:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *layout;
+
+layout = elm_layout_add(parent);
+surface = eext_circle_surface_layout_add(layout); 
+</pre>
+
+<p>If you want to create a circle surface in the naviframe layer, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_naviframe_add()</span> function:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *naviframe;
+
+naviframe = elm_naviframe_add(parent);
+surface = eext_circle_surface_naviframe_add(naviframe); 
+</pre>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">A circle surface is a non-graphical object. It adds no graphics to or around the objects it holds.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<h3>Adding Circle Objects to the Circle Surface</h3>
+
+<p>You can add any circle object to a circle surface. The following example shows how to create an <span style="font-family: Courier New,Courier,monospace">eext_slider</span> component and add it to a circle surface in conformant layer:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *slider;
+
+surface = eext_circle_surface_conformant_add(conformant);
+slider = eext_circle_object_slider_add(parent, surface);
+</pre>
+
+<h3>Deleting Circle Surface</h3>
+
+<p>Deleting an Evas object automatically deletes the circle surface in the same layer. However, you can explicitly use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function to delete a circle surface.</p>
+<pre class="prettyprint">
+eext_circle_surface_del(surface);
+</pre>
+
+<table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function does not delete the connected circle objects.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/component_custom_n.htm b/org.tizen.ui.guides/html/native/efl/component_custom_n.htm
new file mode 100755 (executable)
index 0000000..d3f8043
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/component_custom_n.htm
@@ -0,0 +1,557 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Customizing Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#elm_theme">Elementary Theme</a></li>
+                               <li><a href="#customizing_style">Customizing a UI Component Style</a></li>
+                               </ul>   
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Customizing Components</h1> 
+  
+
+<p>Elementary UI components use the Edje library EDC themes to manage their look.</p>
+
+<h2 id="elm_theme" name="elm_theme">Elementary Theme</h2>
+
+<p>An Elementary theme is an Edje EDC file that contains groups composed of parts and programs. For more information about Edje, see <a href="theme_n.htm">Theme</a>.</p>
+
+<h3 id="use_theme_styles" name="use_theme_styles">Using Theme Styles</h3>
+
+<p>Elementary UI components provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one UI component. For example, you can create a new style for a button component to change its appearance without modifying the default theme.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When creating a new style, knowledge of how each UI component is themed is required, because setting another style always replaces the entire group used by the UI component. Important signals and parts must be there for the object to behave properly.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>When several styles are loaded in the current theme, you can set a different style to a specific UI component using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to see the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
+
+<p>The default theme specifies several styles for the button component. The code below shows how to set the &quot;anchor&quot; style of a newly created button component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *button;
+
+// Create a button object 
+button = elm_button_add(parent);
+
+// Set its style to &quot;anchor"&quot;
+elm_object_style_set(button, &quot;anchor&quot;);
+</pre>
+
+<h3 id="load_theme_styles" name="load_theme_styles">Loading Theme Styles</h3>
+
+<p>Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:</p>
+  <ul>
+   <li>overlays</li>
+   <li>extensions</li>
+  </ul>
+
+<p>When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the UI component, it looks at the extensions list.</p>
+
+<h4 id="overlay_chapter" name="overlay_chapter">Overlay</h4>
+
+<p>An overlay can replace the look of all UI components by overriding the default style. If we create a new style called &quot;default&quot; for the button component and add it as an overlay, the Elementary uses the overlay for all button components overriding the default theme.</p>
+
+<p>Here is how to add an overlay to your application&#39;s theme.</p>
+
+<pre class="prettyprint">
+elm_theme_overlay_add(NULL, &quot;./theme_button.edj&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here we assume that the &quot;theme_button.edj&quot; file only contains a new theme for the button component.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button components defined in the application. You must make sure that the &quot;theme_button.edj&quot; file reimplements everything that was previously defined in the default theme concerning the button component.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>This is how to remove the previously added overlay to return to the default theme.</p>
+
+<pre class="prettyprint">
+elm_theme_overlay_del(NULL, &quot;./theme_button.edj&quot;);
+</pre>
+
+<h4 id="extension" name="extension">Extension</h4>
+
+<p>With extensions, we can write styles that we can apply to some UI components (not all of them) by using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
+
+<p>The application adds a theme to the list of extensions with the following call.</p>
+
+<pre class="prettyprint">
+elm_theme_extension_add(NULL, &quot;./theme_button_style_custom.edj&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here we assume that the &quot;theme_button_style_custom.edj&quot; file contains a new button style called &quot;custom&quot;.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>This is how to use the new &quot;custom&quot; style on a button component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *button;
+
+// Create a button object 
+button = elm_button_add(parent);
+
+// Set its style to &quot;custom&quot; 
+elm_object_style_set(button, &quot;custom&quot;);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When using <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add</span> or <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add</span> to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush</span> function to flush Elementary theme caches. Thus, the theme of all UI components that use the default theme is reloaded.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3 id="create_new_theme" name="create_new_theme">Creating a New Theme</h3>
+
+<p>This is how to create a new theme object.</p>
+
+<pre class="prettyprint">
+Elm_Theme *new_theme = elm_theme_new();
+</pre>
+
+<p>This function creates an empty specific theme that only uses the default theme. It has its own private set of extensions and overlays (which are empty by default). Specific themes do not fall back to the themes of parent objects. They are not intended for this use.</p>
+
+<p>This is how to apply this theme to a UI component and its children (a button, for example).</p>
+
+<pre class="prettyprint">
+// Create a button component 
+Evas_Object *button = elm_button_add();
+
+// Set the new theme to the button component 
+elm_object_theme_set(button, new_theme);
+</pre>
+
+<h2 id="customizing_style" name="customizing_style">Customizing a UI Component Style</h2>
+
+<p>UI component themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see <a href="theme_n.htm">Theme</a>.</p>
+
+<p>A new Edje style can be added for a UI component. The best way is to copy the existing &quot;default&quot; style, rename it, and update it to your needs.</p>
+
+<h3 id="check_custom_style" name="check_custom_style">Creating a Customized Style for the Check Component</h3>
+
+<p>As an example, we show how to create a new style for the <span style="font-family: Courier New,Courier,monospace">check</span> component. The aim is to update the background and the main pictures of this UI component with custom pictures.</p>
+
+<p>The EDC source file concerning the check component (check.edc file) is composed of several groups.</p>
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/default&quot;;
+}
+
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/toggle&quot;;
+}
+</pre>
+
+<p>Those two groups define two different styles for the check component (the &quot;default&quot; style and the &quot;toggle&quot; style).</p>
+
+<p>We copy the group corresponding to the &quot;default&quot; style in a new file to create a new style called &quot;custom&quot;. This new style is saved in the &quot;check_custom.edc&quot; file.</p>
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/custom&quot;;
+&nbsp;&nbsp;&nbsp;// Here is the copy of the content of &quot;default&quot; style 
+}
+</pre>
+
+<p>In the new group (&quot;elm/check/base/custom&quot;), we have to find the parts we want to modify. Here, the appropriate parts are &quot;bg&quot; and &quot;check&quot; parts.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 16 16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: VERTICAL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill.smooth: 0;
+&nbsp;&nbsp;&nbsp;}
+}
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -2 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check.png&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>We do not detail all the options that can be modified here, but assume that the user is familiar with <a href="theme_n.htm">Edje</a> and knows Edje basics.</p>
+
+<p>Our custom pictures filenames are:</p>
+  <ul>
+   <li>check_base_custom.png for the bg part</li>
+   <li>check_custom.png for the check part</li></ul>
+
+<p>We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;   
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base_custom.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+                
+&nbsp;&nbsp;&nbsp;}
+}
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
+        
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+            
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check_custom.png&quot;;
+&nbsp;&nbsp;&nbsp;}
+        
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Here, we assume that the custom images are the same size as the &quot;default&quot; images.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3 id="add_theme_to_project" name="add_theme_to_project">Adding the Theme File to Your Project</h3>
+
+<p>Once written, the check_custom.edc file is put in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span>. directory of the application project in the SDK.</p>
+
+<p>When building the application, the SDK calls the Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">check_custom.edj</span> file. This file can be loaded from our application.</p>
+
+<h3 id="use_new_style" name="use_new_style">Using the New Style</h3>
+
+<p>This is how to add the new theme file as an extension in the application.</p>
+
+<pre class="prettyprint">
+char edj_path[PATH_MAX] = {0, };
+
+// Get the full path of the edj file 
+app_get_resource(&quot;/edje/check_custom.edj&quot;, edj_path, (int)PATH_MAX);
+
+// Load check custom style as an extension 
+elm_theme_extension_add(NULL, edj_path);
+</pre>
+
+<p>Use the &quot;custom&quot; style on a new check component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check;
+
+// Create a check object 
+check = elm_check_add(parent);
+
+// Set its style to &quot;custom&quot; 
+elm_object_style_set(check, &quot;custom&quot;);
+</pre>
+
+<h3 id="special_theme_parts" name="special_theme_parts">Special Theme Parts</h3>
+
+<p>Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span> are modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_set_text()</span> function. The content of <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts is updated using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function.</p>
+
+<h4 id="swallow_parts" name="swallow_parts">Swallow Parts</h4>
+
+<p>In the previous example (the check component &quot;default&quot; style), there is a part called &quot;elm.swallow.content&quot; that is of the type <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to_x: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 128;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check1, *content;
+
+// Create a check object 
+check1 = elm_check_add(parent);
+
+// Set the content of the check object 
+elm_object_part_content_set(check1, &quot;elm.swallow.content&quot;, content);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">We can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a UI component&#39;s style, if we want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the UI component&#39;s behavior.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h4 id="text_parts" name="text_parts">Text Parts</h4>
+
+<p>The same is done with parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span>. The check &quot;default&quot; style contains a part named &quot;elm.text&quot;.</p>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;elm.text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to_x: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -2 -2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans,Edje-Vera&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: -1.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: "default" 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.min: 1 1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>This is how to modify the content of the &quot;elm.text&quot; part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check2;
+
+// Create a check object 
+check2 = elm_check_add(parent);
+
+// Set the text of the check object 
+elm_object_part_text_set(check2, &quot;elm.text&quot;, &quot;Test text&quot;);
+</pre>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/component_focus_n.htm b/org.tizen.ui.guides/html/native/efl/component_focus_n.htm
new file mode 100755 (executable)
index 0000000..ee8ae76
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/component_focus_n.htm
@@ -0,0 +1,174 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Managing Component Focus</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#Movement">Moving Focus</a></li>
+                               <li><a href="#Customization">Customizing Focus</a></li>
+                               <li><a href="#On_Component">Focus on UI Component</a></li>
+               </ul>   
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Managing Component Focus</h1> 
+  
+
+<p>Focus is a graphical user interface concept. A component, for example, a UI component, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press. A UI component application has, at all times, one (and only one) focused object. This is what determines where the input event goes to within the application window. Also, focused objects can be decorated differently, in order to signal to the user where the input is at any given moment.</p>
+
+<p>Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press). There are mainly 2 ways to set focus on a graphical elements:</p>
+
+<ul>
+<li>Direct selection: this is done by clicking on the element.
+<p>Direct selection does not really need any kind of special treatment as the user explicitly selects the UI component to interact with.</p></li>
+<li>Relative selection: this is done by moving the selection from a UI component to another, such as going to the previous or next one; this is done with a keyboard.
+<p>Relative selection&#39; default order is the one in which the UI components have been added to the canvas. That may not be appropriate, if they are added programmatically in a different order than they appear on-screen.</p></li>
+</ul>
+
+  
+<h2 id="Movement" name="Movement">Moving Focus</h2>
+
+<h3>Concept of Focus Chain</h3>
+<p>The order the focus goes from a UI component to another is called the focus chain. As said before, the default focus chain is set to the order the UI components have been added to the canvas.</p>
+
+<h3>Focusable Objects</h3>
+<p>An object can be focused if the following conditions apply:</p>
+
+<ul>
+<li>object is visible</li>
+<li>object is enabled</li>
+<li>object accepts focus</li>
+<li>object&#39;s subtree (if any) is focusable</li>
+<li>all of object&#39;s parents have their subtrees focusable</li>
+</ul>
+
+<p>If any of these conditions do not apply, the object is unfocusable.</p>
+
+<h3>Handling Key Input</h3>
+
+<p>Handling of the keys is done automatically by Elementary. According to which key the user pressed, Elementary switches the focus in the selected direction. For example, using the <span style="font-family: Courier New,Courier,monospace;">Tab</span> key the focus goes to the next object in the natural order, whereas using the direction keys the focus goes to the next object in the requested direction.</p>
+
+<h3>Hiding, Deleting or Disabling a Focused Object</h3>
+
+<p>When a UI component is hidden, deleted, or disabled, it becomes unfocusable.</p>
+
+<p>When a focused object is unfocusable, the focus is moved to another object.</p>
+
+<h3>Selecting Next Object</h3>
+
+<p>When the user wants to switch the focus to the next object (i.e. cycle focus), Elementary searches the first object which is focusable.</p>
+
+<p>If there is a disabled or read-only object in the focus chain, the focus goes to the following object in the requested direction.</p>
+
+<h2 id="Customization" name="Customization">Customizing Focus</h2>
+
+<p>There are several reasons why to customize the focus chain of an application, for example:</p>
+
+<ul>
+<li>If you have created a form with labels and text entries next to them, the focus moves to the entry field when the user clicks on the associated label.</li>
+<li>If you have created an interface with several columns (table), set the focus chain as you wish, for example, going horizontally instead of going vertically, regardless whatever the order the UI components are added.</li>
+</ul>
+
+<h3>Customizing Object&#39;s Focus Exit Chain </h3>
+
+<p>Set the object to focus after other object in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set(object, next, direction)</span>. Use the following directions:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_NEXT</span>: next UI component in natural order</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_PREVIOUS</span>: previous UI component in natural order</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_UP</span>: UI component to focus when going up</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_DOWN</span>: UI component to focus when going down</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_RIGHT</span>: UI component to focus when going right</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_LEFT</span>: UI component to focus when going left</li>
+</ul>
+
+<p>Set the object next to another in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get(object, direction)</span>.</p>
+
+<h3>Customizing Whole Application&#39;s Focus Chain</h3>
+
+<p>To customize the application&#39;s custom chain:</p>
+
+<pre class="prettyprint">
+Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
+
+Eina_List *focus_chain = NULL;
+focus_chain = eina_list_append(focus_chain, obj3);
+focus_chain = eina_list_append(focus_chain, obj2);
+// The chain is obj3, then obj2. Set the chain.
+elm_object_focus_custom_chain_set(main, focus_chain);
+// Prepend obj5 at the beginning of the chain
+elm_object_focus_chain_prepend(main, NULL, obj5);
+// Append obj1 after obj3
+elm_object_focus_chain_append(main, obj3, obj1);
+// Prepend obj4 before obj1
+elm_object_focus_chain_prepend(main, obj1, obj4);
+</pre>
+
+<p>The focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj1, obj2</span>.</p>
+
+<p>This actually applies to any container: it is possible to set the focus chain of, for example, a box.</p>
+
+<h3>Customizing Collision of Both</h3>
+
+<p>If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.</p>
+
+<p>Following on the previous example, if <span style="font-family: Courier New,Courier,monospace;">obj4</span> has <span style="font-family: Courier New,Courier,monospace;">obj5</span> defined as its next object, the actual focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4</span>, and loop back to <span style="font-family: Courier New,Courier,monospace;">obj5</span>.</p>
+
+<h2 id="On_Component" name="On_Component">Focus on UI Component</h2>
+
+<p>If your Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component if applicable.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get(object)</span> to set whether a specific object has the focus. Set the focus to an object using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set(object, set)</span>, where <span style="font-family: Courier New,Courier,monospace;">set</span> is a Boolean value. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to that given object. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_False</span>, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after <span style="font-family: Courier New,Courier,monospace;">evas_object_show(object)</span> has been called. Call the function back when the object receives or loses focus by registering on smart event &quot;focused&quot; or &quot;unfocused&quot;</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set(object, focusable)</span> to tell Elementary whether an object and its children are focusable, where <span style="font-family: Courier New,Courier,monospace;">focusable</span> is a Boolean value. Get the current value using <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get(object)</span>.</p>
+
+<p>The similar functions for a specific object are <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set(object, focusable)</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get(object)</span>. </p>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/component_infra_n.htm b/org.tizen.ui.guides/html/native/efl/component_infra_n.htm
new file mode 100755 (executable)
index 0000000..0c9a0ff
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/component_infra_n.htm
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>UI Component Infrastructure Modules: Managing Component Properties</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>UI Component Infrastructure Modules: Managing Component Properties</h1> 
+  
+<p>The Elementary library is composed of many UI components to support Tizen native applications. While using UI components, you must manage their common properties. To meet this requirement, Elementary creates some infrastructure modules in order to support many UI components. Currently, Elementary provides following infrastructure modules: </p>
+<ul><li><a href="component_focus_n.htm">Component focus</a>
+<p>A UI component application always has 1 focused object, which is selected to receive input from the user. The focus can change between objects, and the focused object can be decorated on the screen to make it easily visible.</p></li>
+<li><a href="touch_gesture_n.htm">Handling touch gestures for components</a>
+<p>UI components generally handle basic touch inputs, such as press, release and moving. However, in some use cases (for example, when the accessibility Assistive Technology (AT) client is working), handling for a variety of touch gesture events (such as tap, double-tap, triple-tap, double-tap and hold, and left/right/up/down swipe) is needed. Elementary can also create new touch gesture patterns according to application use cases.</p>
+</li>
+<li><a href="component_custom_n.htm">Customizing components</a>
+<p>Elementary provides basic UI components based on the Tizen UX styles which you can use. Usually, you can use the supported UI components themselves to make your application. However, if you need to use other styles than the basic ones, you must customize the UI component style.</p></li>
+<li>UI mirroring
+<p>Elementary provides UI mirroring, which allows you to set UI mirroring on specific UI components or the whole interface. This facility is very useful to support applications which need both right-to-left and left-to-right languages.</p></li></ul>
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/components_mn.htm b/org.tizen.ui.guides/html/native/efl/components_mn.htm
new file mode 100755 (executable)
index 0000000..8dd78aa
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/components_mn.htm
@@ -0,0 +1,3350 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Using Mobile UI Components</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#background">Background</a></li>
+                       <li><a href="#button">Button</a></li>
+                       <li><a href="#check">Check</a></li>
+                       <li><a href="#colorselector">Colorselector</a></li>
+                       <li><a href="#ctxpopup">Ctxpopup</a></li>
+                       <li><a href="#datetime">Datetime</a></li>
+                       <li><a href="#entry">Entry</a></li>
+                       <li><a href="#flip">Flip</a></li>
+                       <li><a href="#gengrid">Gengrid</a></li>
+                       <li><a href="#genlist">Genlist</a></li>
+                       <li><a href="#glview">GLView</a></li>
+                       <li><a href="#icon">Icon</a></li>
+                       <li><a href="#image">Image</a></li>
+                       <li><a href="#index">Index</a></li>
+                       <li><a href="#label">Label</a></li>
+                       <li><a href="#list">List</a></li>
+                       <li><a href="#map">Map</a></li>
+                       <li><a href="#notify">Notify</a></li>
+                       <li><a href="#panel">Panel</a></li>
+                       <li><a href="#photo">Photo</a></li>
+                       <li><a href="#photocam">Photocam </a></li>
+                       <li><a href="#plug">Plug</a></li>
+                       <li><a href="#popup">Popup</a></li>
+                       <li><a href="#progressbar">Progressbar</a></li>
+                       <li><a href="#radio">Radio</a></li>
+                       <li><a href="#segmentcontrol">Segmentcontrol</a></li>
+                       <li><a href="#slider">Slider</a></li>
+                       <li><a href="#spinner">Spinner</a></li>
+                       <li><a href="#toolbar_component">Toolbar</a></li>
+                       <li><a href="#tooltip">Tooltip</a></li>
+                       <li><a href="#win">Win</a></li>
+               </ul>
+                       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Using Mobile UI Components</h1>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+                               <h2 id="background" name="background">Background</h2>
+                               
+<p class="figure">Figure: Red color background</p>
+<p align="center"><img alt="Red color background" src="../../images/bg.png" /></p>
+
+<p class="figure">Figure: Background hierarchy</p>
+<p align="center"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
+
+<p>The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.</p>
+
+<h3>Adding a Background Component</h3>
+
+<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg, *parent;
+
+// Create a background
+bg = elm_bg_add(parent);
+</pre>
+
+<h3>Changing the Color of the Background</h3>
+
+<p>You can set the color of the background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function. The following example sets the background color to red.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+</pre>
+
+<h3>Changing the Image of the Background</h3>
+
+<p>It is also possible to set an image or an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component&#39;s area.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
+</ul>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Set a file on the disk as a background image
+elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
+// Set an Edje group as a background image
+elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;edje_group&quot;);
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+</pre>
+
+<h3>Using Overlay</h3>
+
+<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(bg, &quot;overlay&quot;, over);
+</pre>
+
+<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
+
+                       
+                               <h2 id="button" name="button">Button</h2>
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
+
+<p class="figure">Figure: Button hierarchy</p>
+<p align="center"><img alt="Button hierarchy" src="../../images/button_tree.png" /></p>
+
+<p>The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.</p>
+
+<h3>Adding a Button Component</h3>
+
+<p>Create a button.</p>
+<pre class="prettyprint">
+Evas_Object *button, *parent;
+
+// Create a button
+button = elm_button_add(parent);</pre>
+
+<h3>Adding an Icon Inside a Button</h3>
+
+<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name.</p>
+
+<pre class="prettyprint">
+Evas_Object *ic;
+ic = elm_icon_add(button);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button, &quot;icon&quot;, ic);
+</pre>
+
+<h3>Adding Text Inside a Button</h3>
+
+<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(button, &quot;Click me!&quot;);
+</pre>
+
+<h3>Using Button Styles</h3>
+
+<p>Various styles can be used on the button. Tizen supports the following styles:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">icon_reorder</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">icon_expand_add</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">icon_expand_delete</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">contacts</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">option</span></li>
+</ul>
+
+<p>You can see these themes in action on the following screenshot (in the above order).</p>
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
+
+<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(button,&quot;icon_expand_add&quot;);
+</pre>
+
+<h3>Using the Button Callbacks</h3>
+
+<p>The button emits the following signals:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the button (press/release).</li>
+    <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The user pressed the button without releasing it.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The user pressed the button.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The user released the button after pressing it.</li>
+</ul>
+
+<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>This is an example to register and define a callback function called by the clicked signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
+}
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
+}
+</pre>
+
+<h3>Using the Autorepeat Feature</h3>
+
+<p>The autorepeat feature is enabled by default. It consists of calling the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with the following functions:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
+</ul>
+
+<p>Disable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_FALSE);
+</pre>
+
+<p>Enable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_TRUE);
+</pre>
+
+<p>Set the initial timeout to five seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_initial_timeout_set(button, 5.0);
+</pre>
+
+<p>Set the gap between two signals to 0.5 seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_gap_timeout_set(button, 0.5);
+</pre>
+
+               
+                               <h2 id="check" name="check">Check</h2>
+
+<p class="figure">Figure: Check component</p> 
+<p align="center"><img alt="Check component" src="../../images/check.png" /></p> 
+
+<p class="figure">Figure: Check hierarchy</p> 
+<p align="center"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p> 
+
+<p>The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
+
+<p>This UI component inherits from the layout component. All layout functions can be used on the check component.</p>
+
+<h3 id="Adding" name="Adding">Adding a Check Component</h3>
+
+<p>The following example shows how to create a check component.</p>
+
+<pre class="prettyprint">
+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+</pre>
+
+<h3 id="Modifying" name="Modifying">Modifying the Check Styles</h3>
+
+<p>The check component style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. The following styles are available:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">favorite</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">on</span> and <span style="font-family: Courier New,Courier,monospace;">off</span></li>
+</ul>
+
+<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">favorite</span> style on our check object.</p>
+<pre class="prettyprint">
+elm_object_style_set(check, &quot;favorite&quot;);
+</pre>
+
+<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
+<pre class="prettyprint">
+char *style = elm_object_style_get(check);
+</pre>
+
+<h3 id="Using_Check" name="Using_Check">Using the Check Component</h3>
+
+<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+<pre class="prettyprint">
+elm_check_state_set(check, EINA_TRUE);
+</pre>
+
+<p>You can also retrieve the current value of the check object.</p>
+<pre class="prettyprint">
+Eina_Bool value = elm_check_state_get(check);
+</pre>
+
+<p>As with a radio object, an icon and a label can be set.</p>
+<pre class="prettyprint">
+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;home&quot;);
+
+// Set it to the check object 
+elm_object_part_content_set(check, &quot;icon&quot;, icon);
+
+// Set the check label 
+elm_object_text_set(check, &quot;Check label&quot;);
+</pre>
+
+<p>You can also modify the <span style="font-family: Courier New,Courier,monospace">on</span> and <span style="font-family: Courier New,Courier,monospace">off</span> labels.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(check, &quot;on&quot;, &quot;True&quot;);
+elm_object_part_text_set(check, &quot;off&quot;, &quot;False&quot;);
+</pre>
+
+<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
+
+<pre class="prettyprint">
+// Get the current set text of the check label 
+char *text = elm_object_text_get(check);
+
+// Get the content set in the icon part 
+Evas_Object *icon = elm_object_part_content_get(check, &quot;icon&quot;);
+</pre>
+
+<h3 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h3>
+
+<p>When the value is changed by the user, the changed signal is emitted. The <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+                               <h2 id="colorselector" name="colorselector">Colorselector</h2>
+
+    <p class="figure">Figure: Colorselector component</p> 
+  <p align="center"><img alt="Colorselector component" src="../../images/colorsel.png" /></p> 
+  
+      <p class="figure">Figure: Colorselector hierarchy</p> 
+  <p align="center"><img alt="Colorselector hierarchy" src="../../images/colorselector_tree.png" /></p>
+
+
+<p>The colorselector component provides a color selection solution to the user. There are different modes available, each of them showing a different configuration of the colorselector component.</p>
+
+<p>Currently only the Palette mode is available in Tizen.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_COLORSELECTOR_PALETTE</span></li>
+</ul>
+
+<p>The Palette mode displays several color items that enable the user to choose a color in the items displayed. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, and it is associated with a unique identifier. This enables the developers to create new series of colors (a new palette) and save it under another identifier. By default, the color palette is using the <span style="font-family: Courier New,Courier,monospace">default</span> identifier.</p>
+
+<p>This UI component inherits from the layout component, so all function concerning the layout component can also be used on the colorselector component.</p>
+
+<h3>Adding a Colorselector Component</h3>
+
+<p>The following example shows how to create a colorselector object.</p>
+
+<pre class="prettyprint">
+Evas_Object *colorsel, *parent;
+
+colorsel = elm_colorselector_add(parent);
+</pre>
+
+<h3>Setting the Colorselector Modes</h3>
+
+<p>The following example shows how to set the mode of the colorselector to the palette mode.</p>
+
+<pre class="prettyprint">
+elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
+</pre>
+
+<p>The following example shows how to create a new palette called <span style="font-family: Courier New,Courier,monospace">mypalette</span>. This new palette is saved by elementary config and you can to load it again later. You then add three colors in <span style="font-family: Courier New,Courier,monospace">mypalette</span>: red, green, and blue.</p>
+
+<pre class="prettyprint">
+elm_colorselector_palette_name_set(colorsel, &quot;mypalette&quot;);
+elm_colorselector_palette_color_add(colorsel, 255, 0, 0, 255);
+elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
+elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">default</span> palette already contains 14 colors.</p>
+
+<pre class="prettyprint">
+elm_colorselector_palette_name_set(colorsel, &quot;default&quot;);
+</pre>
+
+<p>When the user clicks on the color elements, the element changes the color that is set to the colorselector component. You can use the following function to retrieve the current selected color.</p>
+<pre class="prettyprint">
+int r, g, b, a;
+
+elm_colorselector_color_get(colorsel, &amp;r, &amp;g, &amp;b, &amp;a);
+</pre>
+
+<h3>Using the Colorselector Callbacks</h3>
+
+<p>You can register callbacks on the following signals:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span> - The color value changes on the selector. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">color,item,selected</span> - The user clicks on a color item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback is the selected color item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">color,item,longpressed</span> - The user long presses on a color item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback contains the selected color item.</li>
+</ul>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(colorselector, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the colorselector value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The color has changed\n&quot;);
+}
+</pre> 
+
+               
+                               <h2 id="ctxpopup" name="ctxpopup">Ctxpopup</h2>
+
+    <p class="figure">Figure: Context popup component</p> 
+  <p align="center"><img alt="Context popup component" src="../../images/ctxpopup1.png" /></p> 
+  
+      <p class="figure">Figure: Context popup hierarchy</p> 
+  <p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
+
+
+<p>Ctxpopup is a contextual popup that can show a list of items.</p>
+
+<h3>Adding a Ctxpopup Component</h3>
+
+<p>A ctxpopup can be created with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function, and when shown, it automatically chooses an area inside its parent object&#39;s view (set using <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
+
+<pre class="prettyprint">
+Evas_Object *ctxpopup, *parent;
+
+// Create a ctxpopup 
+ctxpopup = elm_ctxpopup_add(parent);
+</pre>
+
+<h3>Modifying the Ctxpopup Style</h3>
+
+<p>The following styles are available:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">dropdown/list</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dropdown/label</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">more/default</span></li>
+</ul>
+
+    <p class="figure">Figure: Context popup more/default style</p> 
+  <p align="center"><img alt="Context popup more/default style" src="../../images/ctxpopup1.png" /></p> 
+  
+      <p class="figure">Figure: Context popup dropdown/list</p> 
+  <p align="center"><img alt="Context popup dropdown/list" src="../../images/ctxpopup2.png" /></p>
+
+      <p class="figure">Figure: Context popup dropdown/label</p> 
+  <p align="center"><img alt="Context popup dropdown/label" src="../../images/ctxpopup3.png" /></p>
+
+<p>The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">more/default</span> style.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(ctxpopup, &quot;more/default&quot;);
+</pre>
+
+<h3>Configuring the Ctxpopup</h3>
+
+<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here it is set to horizontal.</p>
+<pre class="prettyprint">
+elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<p>Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden.</p>
+<pre class="prettyprint">
+elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<h3>Managing the Ctxpopup Items</h3>
+
+<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the <span style="font-family: Courier New,Courier,monospace">Test</span> label and no icon.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
+<pre class="prettyprint">
+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
+}
+</pre>
+
+<p>After that the item label is set to <span style="font-family: Courier New,Courier,monospace">New label</span>.</p>
+
+<pre class="prettyprint">elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
+</pre>
+
+<p>And its icon is modified to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, &quot;home&quot;);
+
+elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
+</pre>
+
+<h3>Using the Ctxpopup Callbacks</h3>
+
+<p>The context popup emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal when it is dismissed. You can register a callback to this signal. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ctxpopup, &quot;dismissed&quot;, dismissed_cb, data);
+}
+
+// Callback function for the &quot;dismissed&quot; signal
+// This callback is called when the ctxpopup is dismissed
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Ctxpopup dismissed\n&quot;);
+}
+</pre> 
+
+                               <h2 id="datetime" name="datetime">Datetime</h2>
+  
+<p class="figure">Figure: Datetime selection</p> 
+<p align="center"> <img alt="Datetime selection" src="../../images/date2.png" /> </p> 
+ 
+<p class="figure">Figure: Datetime hierarchy</p> 
+<p align="center"> <img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p> 
+ 
+<p>The datetime component displays and adds date and time values.</p>
+
+<h3>Adding a Datetime Component</h3>
+
+<p>The UI component is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>. It is possible to select the visible fields with <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span>. The following fields can be controlled:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: the year field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: the month field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: the date field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: the hour field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: the minute field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: the AM/PM field</li>
+  </ul>
+
+<p>The following example shows how to create a datetime component and set the <span style="font-family: Courier New,Courier,monospace">HOUR</span> and <span style="font-family: Courier New,Courier,monospace">MINUTE</span> fields visible.</p>
+
+<pre class="prettyprint">
+Evas_Object *datetime, *parent;
+
+datetime = elm_datetime_add(parent);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_HOUR, EINA_TRUE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MINUTE, EINA_TRUE);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
+</pre>
+
+<h3>Using the Datetime Styles</h3>
+
+<p>The following styles are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">date_layout</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">time_layout</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">time_layout_24h</span></li>
+  </ul>
+
+<p>The following example creates the <span style="font-family: Courier New,Courier,monospace">date_layout</span> style:</p>
+
+<pre class="prettyprint">
+elm_object_style_set(datetime, &quot;date_layout&quot;);
+</pre>
+
+<h3>Setting the Datetime Format</h3>
+
+<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.</p>
+
+<pre class="prettyprint">
+elm_datetime_format_set(datetime, &quot;%H : %M&quot;);
+</pre>
+
+<p>Please refer to the API documentation for a complete list of all the options available.</p>
+
+<h3>Using the Datetime Callbacks</h3>
+
+<p>A callback can be registered on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal to detect when the Datetime field values are changed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime field changed. \n&quot;);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
+ 
+
+<h3>UX Issue in Tizen 2.3</h3>
+
+<ul>
+  <li><span style="font-family: Courier New,Courier,monospace">date_layout</span> (default): Year, Month, Day</li>
+  <li><span style="font-family: Courier New,Courier,monospace">time_layout</span>: Hour, Minute, AM/PM button</li>
+  <li><span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span>: Hour, Minute</li>
+</ul>
+ 
+<p>Basically, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component needs a full-length format that includes the Year, Month, Day, Hour, Minute, and AM/PM. Each style then shows specific fields according their style, limited by the UX concept. If you call the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function for a field that is not supported in the style, it does not work.</p>
+ 
+               
+                               <h2 id="entry" name="entry">Entry</h2>
+  
+<p class="figure">Figure: Entry component</p> 
+<p align="center"> <img alt="Entry component" src="../../images/entry.png" /> </p> 
+ 
+<p class="figure">Figure: Entry component</p> 
+<p align="center"> <img alt="Entry component" src="../../images/entry2.png" /> </p> 
+ 
+<p class="figure">Figure: Entry hierarchy</p> 
+<p align="center"> <img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p> 
+ 
+<p>The entry component is a box where the user can enter text. It supports the following features:</p>
+  <ul>
+   <li>text wrapping</li>
+   <li>multiline</li>
+   <li>scrolling</li>
+   <li>formatted markup text</li>
+   <li>password mode</li>
+   <li>filtering text</li>
+   <li>read/write from a file</li>
+   <li>theme style overrides</li>
+  </ul>
+   
+<h3>Adding an Entry Component</h3>
+
+<p>The entry component is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, &quot;A short text.&quot;);
+</pre>
+
+<h3>Using the Text Editor</h3>
+
+<p>You can append text to the end of existing content.</p>
+
+<pre class="prettyprint">
+elm_entry_entry_append(entry, &quot;END&quot;);
+</pre>
+
+<p>You can also insert text at the current cursor position.</p>
+
+<pre class="prettyprint">
+elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
+Eina_Bool Empty = elm_entry_is_empty(entry);
+</pre>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable <span style="font-family: Courier New,Courier,monospace">Empty</span> returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+<p>By default, the user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.</p>
+
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+ 
+<h3>Setting the Password Mode</h3>
+
+<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
+
+<pre class="prettyprint">
+elm_entry_password_set(entry, EINA_TRUE);
+</pre>
+
+<h3>Entry Line Modes And Wrapping</h3>
+
+<p>The entry component has two line modes:</p>
+  <ul>
+   <li>single line mode</li>
+   <li>multiline mode</li>
+  </ul>
+
+<p>First, set the entry in single line mode.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_TRUE);
+</pre>
+
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+
+<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+</pre>
+
+<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, char wrap</li>
+  </ul>
+
+<h3>Selecting Text</h3>
+
+<p>Text selections can be made with different functions:</p>
+<ul>
+<li>To select all the content of the entry component:
+<pre class="prettyprint">
+elm_entry_select_all(entry);
+</pre>
+</li>
+
+<li>To deselect the current selection:
+<pre class="prettyprint">
+elm_entry_select_none(entry);
+</pre>
+</li>
+
+<li>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The following code selects the first twenty characters of the entry content.
+<pre class="prettyprint">
+elm_entry_select_region_set(entry, 0, 20);
+</pre>
+</li>
+
+<li>To retrieve the currently selected text in an entry:
+<pre class="prettyprint">
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+</pre>
+</li>
+</ul>
+
+<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>You can copy or cut the selection to the clipboard.</p>
+<pre class="prettyprint">
+elm_entry_selection_cut(entry);
+</pre>
+
+<p>The selection can be pasted in the same or a different entry.</p>
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
+</pre>
+
+<h3>Controlling the Cursor</h3>
+
+<p>The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.</p>
+<ul>
+<li>To move the cursor to the beginning of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_begin_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor to the end of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_end_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor one line down or up:
+<pre class="prettyprint">
+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+</pre>
+</li>
+<li>To move the cursor one character to the left or right:
+<pre class="prettyprint">
+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+</pre>
+</li>
+
+<li>To set the cursor at a specific position (15th character, for example):
+<pre class="prettyprint">
+elm_entry_cursor_pos_set(entry, 15);
+</pre>
+</li>
+</ul>
+
+<p>It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_selection_begin(entry);
+
+for (i = 0; i &lt; 5; i++)
+{
+&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+</pre>
+
+<h3>Formatting Text</h3>
+
+<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span>: Inserts a line break.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;ps&gt;</span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;tab&gt;</span>: Inserts a tab.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;em&gt;...&lt;/em&gt;</span>: Emphasis. Sets the oblique style for the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;b&gt;...&lt;/b&gt;</span>: Sets the bold style for the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;link&gt;...&lt;/link&gt;</span>: Underlines the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;hilight&gt;...&lt;/hilight&gt;</span>: Highlights the enclosed text.</li>
+  </ul>
+
+<h3>Using Special Markups</h3>
+
+<p>Special markups can be added within the text of the entry:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;a href = ..&gt;...&lt;/a&gt;</span>: Anchors</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;item size = .. vsize = .. href = ..&gt;...&lt;/item&gt;</span>: Items</li>
+  </ul>
+
+<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
+
+<p>The item markup provides a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name has to be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+
+<h3>Overriding Style</h3>
+
+<p>To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
+
+<h3>Filtering Text</h3>
+
+<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
+
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size limit_size = 
+{
+&nbsp;&nbsp;&nbsp;.max_char_count = 8,
+&nbsp;&nbsp;&nbsp;.max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+ 
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+</pre>
+
+<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters.</p>
+<pre class="prettyprint">
+static Elm_Entry_Filter_Accept_Set accept_set = 
+{
+&nbsp;&nbsp;&nbsp;.accepted = NULL,
+&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+</pre>
+
+<h3>Loading and Saving Files</h3>
+
+<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
+
+<pre class="prettyprint">
+// Set the file in which the entry text is saved. This function
+// implicitly loads the existing file content 
+elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
+</pre>
+
+<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
+
+<pre class="prettyprint">
+// Disable autosaving 
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed 
+elm_entry_file_save(entry);
+</pre>
+
+<h3>Using Entry Theme Content</h3>
+
+<p>Two content parts of the default theme are available: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>. The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part.</p>
+<pre class="prettyprint">
+Evas_Object *icon;
+
+ic = elm_icon_add(entry);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(entry, &quot;end&quot;, icon);
+</pre>
+
+<h3>Using Entry Theme Texts</h3>
+
+<p>The default theme allows the use of the following text parts:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">default</span> - text of the entry</li>
+   <li><span style="font-family: Courier New,Courier,monospace">guide</span> - placeholder of the entry</li>
+  </ul>
+
+<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(entry, &quot;Hello World&quot;);
+</pre>
+
+<h3>Using Entry Callbacks</h3>
+
+<p>The entry component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The escape key is pressed on a single line entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The enter key is pressed on a single line entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: Mouse button is pressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: Mouse cursor is moved into an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: Mouse cursor is moved out of an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: Mouse button is unpressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: Program language is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: A mouse button is pressed and held for a couple of seconds.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: A maximum length is reached.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: A mouse button is pressed on the entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard contents is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
+  </ul>
+
+<p>For signals, where <span style="font-family: Courier New,Courier,monospace">event_info</span> has not been explicitly described, it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback to the <span style="font-family: Courier New,Courier,monospace">focused</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the entry receive the focus
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
+} 
+</pre>
+  
+
+                               <h2 id="flip" name="flip">Flip</h2>
+  
+<p class="figure">Figure: Flip hierarchy</p> 
+<p align="center"> <img alt="Flip hierarchy" src="../../images/flip_tree.png" /> </p> 
+ 
+<p>The flip component can hold two <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> and allows the user flip between them using several pre-defined animations.</p>
+
+<h3>Adding a Flip Component</h3>
+
+<p>The following example shows how to create a flip component.</p>
+
+<pre class="prettyprint">
+Evas_Object *flip, *parent, *content1, *content2;
+flip = elm_flip_add(parent);
+</pre>
+
+<p>You can add content to the flip component. <span style="font-family: Courier New,Courier,monospace">content1</span> is set to the <span style="font-family: Courier New,Courier,monospace">front</span> content and <span style="font-family: Courier New,Courier,monospace">content2</span> is set to the <span style="font-family: Courier New,Courier,monospace">back</span> mode.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(flip, &quot;front&quot;, content1);
+elm_object_part_content_set(flip, &quot;back&quot;, content2);
+</pre>
+
+<h3>Configuring Flip Animation</h3>
+
+<p>Now you can run an flip animation.</p>
+<pre class="prettyprint">
+elm_flip_go(flip, ELM_FLIP_CUBE_UP);
+</pre>
+
+<p>This animation flips up the <span style="font-family: Courier New,Courier,monospace">front</span> content object as if it was on a side of a cube, letting the down facing side of the cube appear with the <span style="font-family: Courier New,Courier,monospace">back</span> content object. Several animations are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_X_CENTER_AXIS</span>: Rotate the content around a horizontal axis.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_Y_CENTER_AXIS</span>: Rotate the content around a vertical axis.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_XZ_CENTER_AXIS</span>: Rotate the content around a diagonal axis.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_YZ_CENTER_AXIS</span>: Rotate the content around a diagonal axis.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_LEFT</span>: Rotate the content left as if it was on a side of a cube.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_RIGHT</span>: Rotate the content right as if it was on a side of a cube.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_UP</span>: Rotate the content up as if it was on a side of a cube.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_DOWN</span>: Rotate the content down as if it was on a side of a cube.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_LEFT</span>: Move the content to the left as if the flip was a book.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_RIGHT</span>: Move the content to the right as if the flip was a book.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_UP</span>: Move the content up as if the flip was a book.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_DOWN</span>: Move the content down as if the flip was a book.</li>
+  </ul>
+
+<h3>Interacting With the User</h3>
+
+<p>By default, the user cannot interact with the flip. You can set the interaction to be possible, but you have to choose which animation appears on the interaction (rotation has been selected in the following example).</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
+</pre>
+
+<p>The available modes of interaction are</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_NONE</span>: No interaction is allowed</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_ROTATE</span>: Interaction causes a rotating animation</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_CUBE</span>: Interaction causes a cube animation</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_PAGE</span>: Interaction causes a page animation</li>
+  </ul>
+
+<p>You must also choose which interaction directions are enabled. Only right and left are enabled in the following example.</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
+</pre>
+
+<p>You can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
+</pre>
+
+<h3>Using the Flip Callbacks</h3>
+
+<p>Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+&quot;animate,begin&quot; - A flip animation is started
+&quot;animate,done&quot; - A flip animation is finished
+</pre>
+
+<p>You can register a callback on the &quot;animation,begin&quot; signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;animate,begin&quot;, anim_start_cb, data);
+}
+
+// Callback function for the &quot;animate,begin&quot; signal
+// This callback is called when the flip animation starts
+void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Animation starts\n&quot;);
+}</pre>
+
+                               <h2 id="gengrid" name="gengrid">Gengrid</h2>
+  
+<p class="figure">Figure: Gengrid component</p> 
+<p align="center"> <img alt="Gengrid component" src="../../images/gengrid.png" /> </p> 
+ 
+<p class="figure">Figure: Gengrid hierarchy</p> 
+<p align="center"> <img alt="Gengrid hierarchy" src="../../images/gengrid_tree.png" /> </p> 
+ 
+<p>Gengrid component is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.</p>
+
+<p>This UI component inherits from the layout component and implements the scroller interface. Because of this, the scroller and layout functions can be used with this UI component.</p>
+
+<p>A gengrid can display its items using a horizontal or vertical layout. In the first layout, the items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.</p>
+
+<h3>Adding a Gengrid Component</h3>
+
+<p>You can add a gengrid component with the following code.</p>
+<pre class="prettyprint">
+Evas_Object *gengrid, *parent;
+gengrid = elm_gengrid_add(parent);
+</pre>
+
+<h3>Gengrid Items</h3>
+
+<p>A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or more boolean states. The number of the text and content depends on the theme used for gengrid items. In the default Tizen gengrid item theme, items can have two content parts that can be set with the <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> part names.</p>
+
+<h3>Creating and Deleting Items</h3>
+
+<p>As with genlists, the items are allocated and deleted on the go, while the user is scrolling the gengrid. The following example shows how to declare a <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> structure to inform the gengrid how to manage items.</p>
+<pre class="prettyprint">
+static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
+gic-&gt;item_style = &quot;default&quot;;
+gic-&gt;func.text_get = _grid_label_get;
+gic-&gt;func.content_get = _grid_content_get;
+gic-&gt;func.state_get = _grid_state_get;
+gic-&gt;func.del = _grid_del;
+</pre>
+
+<p>The parameters of this structure are not be detailed here, because they are very similar to that of the genlist. Please refer to the genlist component page for more detailed information.</p>
+
+<h3>Managing Items</h3>
+
+<p>As with genlists, items can be added with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_prepend()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_before()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_after()</span> functions. With the gengrid, there is no need to pass the <span style="font-family: Courier New,Courier,monospace">type</span> parameters. They can be cleared with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function.</p>
+
+<p>You can set the multiselection mode on.</p>
+<pre class="prettyprint">
+elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
+</pre>
+
+<p>When the multiselection mode is on, the selected items are retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_items_get()</span> function. The function returns a list of all the selected items.</p>
+
+<p>When the content of an item changes, you can call <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> to ask the gengrid to update this item&#39;s content.</p>
+
+<p>It is also possible to select or disable some items manually with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> functions.</p>
+
+<h3>Using Gengrid Callbacks</h3>
+
+<p>The gengrid component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is activated.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is double-clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. By default it is one second.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user has selected an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is selected.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user has unselected an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is unselected.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item in the gengrid has its implementing Evas object instantiated, de facto. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the gengrid item that is created. The object can be deleted at any time, so it is strongly advisable not to use the object pointer returned from <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_object_get()</span>, because it can point to freed objects.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: The implementing Evas object for this item is deleted. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the gengrid item that is deleted.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: An item is added, removed, resized or moved and the gengrid is resized or has <span style="font-family: Courier New,Courier,monospace">horizontal</span> property changes.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the gengrid is dragged (not scrolled) up.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the gengrid has dragged (not scrolled) down.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the gengrid is dragged (not scrolled) left.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the gengrid is dragged (not scrolled) right.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the gengrid stops being dragged.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the gengrid is dragged.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content starts.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content stops.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The gengrid is scrolled to the top edge.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The gengrid is scrolled to the bottom edge.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The gengrid is scrolled to the left edge.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The gengrid is scrolled to the right edge.</li>
+  </ul>
+
+                               <h2 id="genlist" name="genlist">Genlist</h2>
+  
+<p class="figure">Figure: Genlist component</p> 
+<p align="center"> <img alt="Genlist component" src="../../images/genlist.png" /> </p> 
+
+<p class="figure">Figure: Genlist hierarchy</p> 
+<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p> 
+
+<p>Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
+
+<p>For more information, see <a href="genlist_tutorial_mn.htm">Creating Mobile Genlists</a>.</p>
+
+<h3>Genlist Item Style</h3>
+
+<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides one text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), two content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>) and no state parts.</p>
+
+<p>The following item styles are available:</p>
+  <ul>
+       <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">full</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">one_icon</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">end_icon</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">group_index</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">double_label</span></li>
+  </ul>
+
+<p>Here are some examples of the item styles.</p>
+
+<p class="figure">Figure: Default item style</p> 
+<p align="center"> <img alt="Default item style" src="../../images/gl-default.png" /> </p> 
+
+<p class="figure">Figure: end_icon item style</p> 
+<p align="center"> <img alt="end_icon item style" src="../../images/gl-end-icon.png" /> </p> 
+
+<p class="figure">Figure: double_label item style</p> 
+<p align="center"> <img alt="double_label item style" src="../../images/gl-double-label.png" /> </p> 
+
+<p>For more information on creating a new genlist item style, see <a href="component_custom_n.htm">Customizing Components</a>.</p>
+
+<h3>Adding a Genlist Component</h3>
+
+<p>A genlist component is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *parent;
+genlist = elm_genlist_add(parent);
+</pre>
+
+<h3>Creating And Deleting Items</h3>
+
+<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+
+<pre class="prettyprint">
+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;decorate_item_style = NULL;
+itc-&gt;decorate_all_item_style = NULL;
+itc-&gt;func.text_get = _item_label_get;
+itc-&gt;func.content_get = _item_content_get;
+itc-&gt;func.state_get = _item_state_get;
+itc-&gt;func.del = _item_del;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">text_get</span>
+   <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item&#39;s theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">content_get</span>
+   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">state_get</span>
+   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item&#39;s theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter&#39;s theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> argument, when the state is true. xxx is the name of the (state) part.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">del</span>
+   <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
+</ul>
+
+<h3>Managing Items</h3>
+
+<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
+
+<p>The previous functions take a <span style="font-family: Courier New,Courier,monospace">type</span> parameter that can be one of the following.</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
+  </ul>
+
+<p>If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span> is set, this item is displayed as being able to expand and have child items. If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> is set, this item is a group index item that is displayed at the top until the next group appears.</p>
+
+<p class="figure">Figure: Genlist tree</p> 
+<p align="center"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p> 
+
+<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
+
+<p>To help inspect the list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
+
+<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> for it.</p>
+
+<h3>Selection</h3>
+
+<p>Items are manually selected or deselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In the single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
+
+<p>In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
+
+<p class="figure">Figure: Genlist component</p> 
+<p align="center"> <img alt="Genlist component" src="../../images/genlist_multi.png"/> </p> 
+
+<h3>Using Genlist Callbacks</h3>
+
+<p>The genlist component emits the following signals:</p>
+   <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. event_info in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>, that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is one second. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch swiped left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch swiped right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch swiped up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch swiped down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch pinched out. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch pinched in. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program&#39;s language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+  </ul>
+
+               
+                               <h2 id="glview" name="glview">GLView</h2>
+
+      <p class="figure">Figure: GLView gears example</p> 
+  <p align="center"><img alt="GLView gears example" src="../../images/glview.png" /></p> 
+  
+      <p class="figure">Figure: GLView hierarchy</p> 
+  <p align="center"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
+
+
+<p> The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
+
+<h3>Adding a GLView Component</h3>
+
+<p>Create a GLView component with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+</pre>
+
+<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
+<pre class="prettyprint">
+elm_glview_size_set(glview, 200, 200);
+</pre>
+
+<h3>Using the GLView API</h3>
+
+<p>You can configure the GLView rendering mode by activating the following rendering modes:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
+</ul>
+
+<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
+<pre class="prettyprint">
+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+</pre>
+
+<p>The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
+<pre class="prettyprint">
+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+</pre>
+
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+
+<p>The following example shows how to set the GLView rendering policy.</p>
+<pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+</pre>
+
+<p>The GLView object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where the GLView component is redrawn only when it is visible.</p>
+
+<p>Register the callbacks:</p>
+
+<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</li>
+</ul>
+
+<h3>Using GLView Callbacks</h3>
+
+<p>The GLView component emits the following signals:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The Glview component is focused. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
+</ul>
+
+<p>To register a callback:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
+}
+</pre>
+
+                               <h2 id="icon" name="icon">Icon</h2>
+  
+<p class="figure">Figure: Icon component</p> 
+<p align="center"> <img alt="Icon component" src="../../images/icon.png" /> </p> 
+ 
+<p class="figure">Figure: Icon hierarchy</p> 
+<p align="center"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p> 
+  
+<p>The icon component inherits from the image component. It is used to display images in an icon context.</p>
+
+<h3>Adding an Icon Component</h3>
+
+<p>You can create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;Home&quot;);
+</pre>
+
+<h3>Changing Image File</h3>
+
+<p>You can change the image by using an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
+</pre>
+
+<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
+
+<pre class="prettyprint">
+elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+
+<h3>Using Icon Callbacks</h3>
+
+<p>The icon component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
+  </ul>
+
+<p>In both cases, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+               
+                               <h2 id="image" name="image">Image</h2>
+
+<p class="figure">Figure: Image component</p> 
+<p align="center"> <img alt="Image component" src="../../images/image.png" /> </p>   
+
+<p class="figure">Figure: Image hierarchy</p> 
+<p align="center"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>   
+
+<p>The image component can load and display an image from a disk file or a memory region.</p>
+
+<h3>Adding an Image Component</h3>
+
+<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+</pre>
+
+<h3>Configuring the Image Component</h3>
+
+<p>Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.</p>
+<pre class="prettyprint">
+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
+<pre class="prettyprint">
+elm_image_smooth_set(image, EINA_TRUE);
+</pre>
+
+<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
+<pre class="prettyprint">
+elm_image_preload_disabled_set(image, EINA_TRUE);
+</pre>
+
+<p>The image can be rotated or flipped. Here the image is rotated 180 degrees.</p>
+<pre class="prettyprint">
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+</pre>
+
+<p>The following orientations are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line</li>
+  </ul>
+  
+<p>If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object&#39;s area.</p>
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio 
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object 
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In this configuration, part of the image can go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
+
+<h3>Using Image Callbacks</h3>
+
+<p>The image component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">drop</span>: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks the image. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+  </ul>
+
+<p>To register a callback when a user clicks on the image:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the image is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
+}
+</pre>  
+
+                               <h2 id="index" name="index">Index</h2>
+  
+<p class="figure">Figure: Index component</p> 
+<p align="center"> <img alt="Index component" src="../../images/index.png" /> </p> 
+ 
+<p class="figure">Figure: Index hierarchy</p> 
+<p align="center"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p> 
+ 
+<p>An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component&#39;s container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
+
+<h3>Adding an Index Component</h3>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function to create a new index component.</p>
+<pre class="prettyprint">
+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+</pre>
+
+<h3>Adding Items</h3>
+
+<p>The following example shows how to add the listitem object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *list_item1, *list_item2;
+elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
+</pre>
+
+<p>The following example shows how to define the smart callback.</p>
+<pre class="prettyprint">
+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item1 selected\n&quot;);
+}
+</pre>
+
+<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
+
+<h3>Sorting Index Items</h3>
+
+<p>You can insert index items using a sorting function. Indexes can be sorted, for example, by alphabetic order.</p>
+
+<p>You must write a compare function that returns a positive <span style="font-family: Courier New,Courier,monospace">int</span>, 0 or a negative <span style="font-family: Courier New,Courier,monospace">int</span> when the <span style="font-family: Courier New,Courier,monospace">data2</span> item parameter is respectively greater than, equal to or lower than the <span style="font-family: Courier New,Courier,monospace">data1</span> parameter.</p>
+
+<pre class="prettyprint">
+static int
+_index_icmp(const void *data1,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const void *data2)
+{
+&nbsp;&nbsp;&nbsp;int result;
+
+&nbsp;&nbsp;&nbsp;// Code that does the item comparison is written here
+
+&nbsp;&nbsp;&nbsp;return result;
+}
+</pre>
+
+<p>This example shows how to add a new item at the <span style="font-family: Courier New,Courier,monospace">B</span> index using the compare function to sort the indexes.</p>
+
+<pre class="prettyprint">
+elm_index_item_sorted_insert(index, &quot;B&quot;, NULL, list_item2, _index_icmp, NULL);
+</pre>
+
+<h3>Using Index Callbacks</h3>
+
+<p>The index component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user releases a mouse button and selects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
+  </ul>
+
+<p>When the user selects an item in the index, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
+<pre class="prettyprint">
+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *lit = event_info;
+
+&nbsp;&nbsp;&nbsp;// Code that does the desired action
+}
+</pre>
+
+<p>After that, the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is registered.</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb, NULL);
+</pre>
+
+                       
+                               <h2 id="label" name="label">Label</h2>
+  
+<p class="figure">Figure: Label component</p> 
+<p align="center"> <img alt="Label component" src="../../images/label.png" /> </p> 
+ 
+<p class="figure">Figure: Label hierarchy</p> 
+<p align="center"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p> 
+
+<p>The label component displays text with simple html-like markup.</p>
+
+<h3>Adding a Label Component</h3>
+
+<p>To add a label and set the text in it, use the following functions.</p>
+
+<pre class="prettyprint">
+Evas_Object *label = elm_label_add(win);
+
+elm_object_text_set(label, &quot;Some long text for our label, that is not so long&quot;);
+</pre>
+
+<h3>Using the Label Styles</h3>
+
+<p>Label displays the text with several predefined styles.</p>
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>   
+  </ul>
+
+<p>Here the style is set to <span style="font-family: Courier New,Courier,monospace">slide_long</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_long&quot;);
+</pre>
+
+<h3>Configuring the Label</h3>
+
+<p>The duration of the animation and the slide mode can be set with the following functions.</p>
+<pre class="prettyprint">
+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+</pre>
+
+<p>Use the following function to modify the style.</p>
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_bounce&quot;);
+</pre>
+
+<h3>Using the Label Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program&#39;s language changes.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+  </ul>
+  
+<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
+}
+
+// Callback function for the &quot;slide,end&quot; signal
+// This callback is called when the label slide reaches the end
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
+}
+</pre>
+
+       <h2 id="list" name="list">List</h2>
+       
+ <p class="figure">Figure: List component</p> 
+<p align="center"> <img alt="List component" src="../../images/list.png" /> </p> 
+  
+  <p class="figure">Figure: List hierarchy</p> 
+<p align="center"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p> 
+ 
+  
+ <p>This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
+
+ <p>The list items can contain a text and two contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
+
+<h3>Adding a List Component</h3>
+
+<pre class="prettyprint">
+Evas_Object *list, *parent;
+
+// Create a list 
+list = elm_list_add(parent);
+</pre>
+
+<h3>Using the List</h3>
+
+<p>This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
+// Enable bounce effect when the list reaches the upper and lower limits 
+elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Activate multi selection 
+elm_list_multi_select_set(list, EINA_TRUE);
+</pre>
+
+<h3>Adding Item to the List</h3>
+
+ <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected 
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
+}
+
+for (i = 0; i &lt; 10; i++)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *ic;
+&nbsp;&nbsp;&nbsp;char tmp[8];
+&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
+&nbsp;&nbsp;&nbsp;// Create an icon 
+&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
+&nbsp;&nbsp;&nbsp;// Set the file to the icon file 
+&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+&nbsp;&nbsp;&nbsp;// Add item to the list 
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+</pre>
+ 
+<h3>Changing the Text or Icon of an Item</h3>
+
+<p>If you want to change the state of an item, you can do it by using all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains two instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth arguments when you append or prepend the item in the list. The <span style="font-family: Courier New,Courier,monospace">evas_object</span> instances are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, whereas the second one is referenced as the <span style="font-family: Courier New,Courier,monospace">end</span> object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item 
+it = elm_list_selected_item_get(list);
+if (!it)
+&nbsp;&nbsp;&nbsp;return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file 
+elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+// Change the first icon 
+elm_object_item_part_content_set(it, &quot;start&quot;, ic);
+// Change the second icon 
+elm_object_item_part_content_set(it, &quot;end&quot;, ic);
+// Change the label 
+elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
+</pre>
+  
+<h3>Retrieving Selected Items</h3>
+
+ <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
+
+<pre class="prettyprint">
+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item 
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
+</pre>
+
+<h3>List Item Operations</h3>
+
+ <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+ <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
+
+ <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
+
+ <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+</pre>
+
+<h3>Using List Callbacks</h3>
+
+ <p>The list emits the following signals: </p> 
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user double-clicks or presses (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: The user highlights an item on the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The user unhighlights an item in the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>  
+  </ul>
+
+<p>You can register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal with the following code. Note that the currently double-clicked item can be retrieved using the <span style="font-family: Courier New,Courier,monospace">event_info</span> pointer. This code registers to the <span style="font-family: Courier New,Courier,monospace">double,clicked</span> signal and unselects the item that has been double-clicked.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
+&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it,  EINA_FALSE);
+}
+</pre>
+       
+<h2 id="map" name="map">Map</h2>
+  
+<p class="figure">Figure: Map hierarchy</p> 
+<p align="center"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>   
+
+<p>The map component displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
+
+<p>This UI component supports:</p>
+  <ul> 
+   <li>Zooming</li> 
+   <li>Scrolling</li> 
+   <li>Markers with content to be displayed when the user clicks over them</li> 
+   <li>Group of markers</li>   
+   <li>Routes</li> 
+  </ul>
+
+<p>The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.</p>
+
+<h3>Adding a Map Component</h3>
+
+<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
+
+<pre class="prettyprint">
+Evas_Object *map, *parent;
+
+map = elm_map_add(parent);
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
+</pre>
+
+<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
+
+<h3>Playing with the Map</h3>
+
+<p>If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.</p>
+<pre class="prettyprint">
+elm_map_region_show(map, 2.2, 48.8);
+</pre>
+
+<p>This shows the desired coordinates. The location can also be shown with a bring-in animation.</p>
+<pre class="prettyprint">
+elm_map_region_bring_in(map, 2.2, 48.8);
+</pre>
+
+<p>The map is rotated 90 degrees around the current position.</p>
+<pre class="prettyprint">
+elm_map_rotate_set(map, 90, 2.2, 48.8);
+</pre>
+
+<h3>Drawing Overlays</h3>
+
+<p>Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.</p>
+
+<h4>Creating an Overlay Class</h4>
+
+<p>Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
+
+<p>Set an icon (&quot;Home&quot; icon) to the forest class. This icon is displayed in place of the forest class on the map.</p>
+<pre class="prettyprint">
+Evas_Object *icon;
+Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
+
+// Set min zoom level at which class is displayed
+elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
+
+// Create a Home icon object and set it to the forest class 
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;home&quot;);
+elm_map_overlay_icon_set(forest_class, icon);
+</pre>
+
+<h4>Adding Overlays to a Class</h4>
+
+<p>After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. Set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+<pre class="prettyprint">
+Elm_Map_Overlay *ovl;
+const char* data_meudon = &quot;Meudon forest&quot;;
+const char* data_fausses = &quot;Fausse forest&quot;;
+
+// Add an overlay
+ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;stop&quot;);
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &amp;data_meudon);
+
+// Add the new ovl object to the forest class 
+elm_map_overlay_class_append(forest_class, ovl);
+
+// Add another overlay next to the first one 
+ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;stop&quot;);
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &amp;data_fausses);
+elm_map_overlay_class_append(forest_class, ovl);
+</pre>  
+
+<p>If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.</p>
+<pre class="prettyprint">
+elm_map_overlay_class_zoom_max_set(forest_class, 8);
+</pre>
+
+<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
+
+<h4>Creating Bubbles Following Overlays</h4>
+
+<p>The following example shows how to set a content in a bubble following an overlay.</p>
+
+<pre class="prettyprint">
+// Add an overlay bubble object 
+Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
+
+// Set it to follow a specific overlay (the last created one here) 
+elm_map_overlay_bubble_follow(bubble, ovl);
+</pre>
+
+<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay&#39;s behavior.</p>
+
+<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
+
+<h3>Adding Other Overlays</h3>
+
+<p>You can draw a circle on the map with coordinates and a radius size.</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
+</pre>
+
+<p>You can also add a scale at the 200x0 coordinate (in pixels).</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
+</pre>
+
+<p>You can also draw a line, a polygon, or a route. For a full description of these functions, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Map.html">Map API</a>.</p>
+
+<h3>Calculating Routes</h3>
+
+<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
+
+<p>The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.</p>
+
+<pre class="prettyprint">
+Elm_Map_Route *route = elm_map_route_add(map,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_TYPE_BICYCLE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_METHOD_FASTEST,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.20718, 48.79759,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.1699, 48.8189,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL);
+
+// Add a callback to when the route has been calculated and loaded 
+evas_object_smart_callback_add(map, &quot;route,loaded&quot;, _route_loaded_cb, route);
+</pre>
+
+<p>Once the route is calculated, create a route overlay object and change its color. In this example, the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback is used.</p>
+<pre class="prettyprint">
+static void
+_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;Elm_Map_Route *route = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
+&nbsp;&nbsp;&nbsp;elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
+}
+</pre>     
+
+<h3>Using Map Callbacks</h3>
+
+<p>The map component emits the following callbacks:</p>
+<ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the map without dragging around.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the map.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the map.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the map for a long time without dragging around.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the contents around starts.</li>  
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the contents around stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">tile,load</span>: A map tile image load begins.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: A map tile image load ends.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: A map tile image load fails.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: Route request begins.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: Route request ends.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: Route request fails.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: Name request begins.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: Name request ends.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: Name request fails.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">overlay,clicked</span>: An overlay is clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The map is loaded.</li>
+</ul>
+
+               
+                               <h2 id="notify" name="notify">Notify</h2>
+  
+  <p class="figure">Figure: Notify hierarchy</p> 
+<p align="center"> <img alt="Notify hierarchy" src="../../images/notify_tree.png" /> </p> 
+
+  <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
+
+<h3>Adding a Notify Component</h3> 
+  
+<p>The following example shows how to create a notify object.</p>
+
+<pre class="prettyprint">
+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+</pre>
+
+<h3>Configuring the Notify Component</h3> 
+
+<p>Create a label and add it to the notify object.</p>
+
+<pre class="prettyprint">
+Evas_Object *content;
+
+// Create the label and set some text to it 
+content = elm_label_add(parent);
+
+elm_object_text_set(content, &quot;A label text&quot;);
+evas_object_show(content);
+
+// Add the label object to the notify component
+elm_object_content_set(notify, content);
+</pre>
+
+<p>In the following example the notify object is shown on the bottom left corner of the parent object.</p>
+
+<pre class="prettyprint">
+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+</pre>
+
+<p>Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.</p>
+
+<pre class="prettyprint">
+elm_notify_timeout_set(notify, 5.0);
+</pre>
+
+<h3>Using Notify Callbacks</h3> 
+
+<p>The notify component emits the following signals:</p>
+ <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The timeout count ends and the notify component is hidden</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks outside of the notify component</li> 
+  </ul>
+
+<p>For both these signals <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(notify, &quot;timeout&quot;, timeout_cb, data);
+}
+
+// Callback function for the &quot;timeout&quot; signal
+// The timeout expires and the notify object is hidden
+ 
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Notify is hidden\n&quot;);
+}
+</pre>
+
+               
+                               <h2 id="panel" name="panel">Panel</h2>
+                               
+                               
+  <p class="figure">Figure: Panel hierarchy</p> 
+<p align="center"> <img alt="Panel hierarchy" src="../../images/panel_tree.png" /> </p> 
+   <p>The panel component is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.</p>
+
+   <p>Panel inherits from layout component, so the layout API can be used on this UI component.</p>
+
+<h3 id="add_panel">Adding a Panel Component</h3>
+
+<p>The following example shows how to add a panel and set its orientation to the left.</p>
+
+<pre class="prettyprint">
+Evas_Object *panel, *parent;
+
+panel = elm_panel_add(parent);
+elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
+</pre>
+
+<h3 id="use_panel">Using the Panel</h3>
+
+<p>The panel can be manually hidden.</p>
+<pre class="prettyprint">
+elm_panel_hidden_set(pan, EINA_TRUE);
+</pre>
+
+<p>The panel can be toggled if you do not know the hidden state of the UI component.</p>
+<pre class="prettyprint">
+elm_panel_toggle(pan);
+</pre>
+
+<p>The panel can be set scrollable.</p>
+<pre class="prettyprint">
+elm_panel_scrollable_set(pan, EINA_TRUE);
+</pre>
+
+<h3 id="create_drawer">Creating a Drawer</h3>
+
+<p>Tizen SDK has implemented a layout theme to add a drawer in the application. This example shows how to add a new Elementary layout object and set the theme of this layout to the drawer.</p>
+
+<pre class="prettyprint">
+Evas_Object *layout;
+
+// Create a new layout object 
+layout = elm_layout_add(parent);
+
+// Set the &quot;drawer&quot; group theme and &quot;panel&quot; style to it 
+elm_layout_theme_set(layout,&quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+
+// Show the new layout
+evas_object_show(layout);
+</pre>
+
+<p>Once the panel object is created, it can be swallowed in the new layout.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(layout, &quot;elm.swallow.left&quot;, pan);
+</pre>
+
+<p>You can set content to the <span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> parts of the layout.</p>
+<pre class="prettyprint">
+// Panel Background (Dimmed Area) 
+Evas_Object *bg = create_bg(layout);
+elm_object_part_content_set(layout, &quot;elm.swallow.bg&quot;, bg);
+
+// Add content to the drawer 
+Evas_Object *content;
+elm_object_part_content_set(layout, &quot;elm.swallow.content&quot;, content);
+</pre>
+
+<h3 id="panel_cb">Using Panel Callbacks</h3>
+
+<p>You can register a callback on the <span style="font-family: Courier New,Courier,monospace">scroll</span> signal, when the user scrolls the panel. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is of the type <span style="font-family: Courier New,Courier,monospace">Elm_Panel_Scroll_Info</span>.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pan, &quot;scroll&quot;, scroll_cb, data);
+}
+// Callback function for the &quot;scroll&quot; signal
+// This callback is called when the user scrolls the panel
+void scroll_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Panel_Scroll_Info *scrollinfo = event_info;
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The panel was scrolled.\n&quot;);
+}
+</pre>
+
+       
+                               <h2 id="photo" name="photo">Photo</h2>
+  
+  <p class="figure">Figure: Photo hierarchy</p> 
+<p align="center"> <img alt="Photo hierarchy" src="../../images/photo_tree.png" /> </p> 
+  
+ <p>The photo component is used to display a photo, such as a contact image. If no photo is set on it, it displays a person icon to show that it is a photo placeholder.</p> 
+  
+<h3 id="add_photo">Adding a Photo Component</h3>  
+
+ <p>The following example shows how to create a photo object.</p> 
+
+ <pre class="prettyprint">
+Evas_Object *photo, *parephotoslider = elm_photo_add(parent);
+photo = elm_photo_add(parent);
+</pre>
+
+<h3 id="use_photo">Using a Photo Component</h3>  
+
+ <p>A file can be set to the photo component. Here, <span style="font-family: Courier New,Courier,monospace">PHOTO_FILENAME</span> is a string corresponding to the photo file name on the system.</p> 
+<pre class="prettyprint">
+elm_photo_file_set(photo, PHOTO_FILENAME);</pre>
+
+<p>The photo can be set as editable, and it can be copied, cut, or dragged in another region of the screen.</p> 
+<pre class="prettyprint">
+elm_photo_editable_set(photo, EINA_TRUE);</pre>
+
+<p>The photo can also be completely visible on the screen.</p>
+
+<pre class="prettyprint">
+elm_photo_fill_inside_set(photo, EINA_TRUE);</pre>
+
+<h3 id="use_photo_cb">Using Photo Callbacks</h3> 
+
+ <p>The following callbacks are registered on the photo component.</p>
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the photo.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start</span>: The user starts dragging the inner image out of the photo&#39;s frame.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,end</span>: The user drops the dragged image.</li>    
+  </ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">event_info</span> is always <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+               
+                               <h2 id="photocam" name="photocam">Photocam</h2>
+
+  <p class="figure">Figure: Photocam hierarchy</p> 
+<p align="center"> <img alt="Photocam hierarchy" src="../../images/photocam_tree.png" /> </p> 
+  
+  <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for <span style="font-family: Courier New,Courier,monospace">.jpeg</span> images format and has a low memory footprint.</p>
+
+  <p>This UI component implements the scroller interface, so all the functions concerning the scroller can be used with the photocam component.</p>
+
+<h3 id="add_photocam">Adding a Photocam Component</h3>
+
+<p>The following example shows how to create a photocam component and set an image file on it.</p>
+
+<pre class="prettyprint">
+Evas_Object *photocam;
+photocam = elm_photocam_add(win);
+elm_photocam_file_set(photocam, &quot;/tmp/photo.jpeg&quot;);
+</pre>
+
+<h3 id="use_zoom">Using Photocam Zoom</h3>
+
+<p>You can choose between two automatic zoom modes and a manual zoom mode. In the following example the zoom mode is set to manual and a double zoom is requested.</p>
+<pre class="prettyprint">
+elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
+elm_photocam_zoom_set(photocam, 2.0);
+</pre>
+
+<p>The zoom mode can be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span>. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> to fill all the pixels of the photocam component.</p>
+
+<p>Multi-touch zooming is activated by enabling gestures.</p>
+<pre class="prettyprint">
+elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
+</pre>
+
+<p>You can zoom in a specific region. The following example shows how to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.</p>
+
+<pre class="prettyprint">
+elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
+</pre>
+
+<h3 id="photocam_cb">Using Photocam Callbacks</h3>
+
+<p>The photocam component emits the following signals:</p>
+<ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the photo without dragging around.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the photo.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the photo for a long time without dragging around.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the photo.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">load</span>: The photo load begins.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The image file load is complete for the first view (a low resolution blurry version).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">load,detail</span>: A photo detailed data load begins.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">loaded,detail</span>: The image file load is complete for the detailed image data (full resolution is needed).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content around starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content around stops.</li> 
+  </ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">loaded</span> signal.</p>
+
+<pre class="prettyprint">
+void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(photocam, &quot;loaded&quot;, loaded_cb, data);
+}
+
+// Callback function for the &quot;loaded&quot; signal
+// The photocam has loaded the photo file in a low resolution
+ 
+void loaded_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The photo has been loaded\n&quot;);
+}
+</pre>
+
+                               <h2 id="plug" name="plug">Plug</h2>
+  
+  <p class="figure">Figure: Plug hierarchy</p> 
+<p align="center"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p> 
+
+<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by an other process. It can be used anywhere the same way as any other elementary UI component.</p>
+
+<h3 id="add_plug">Adding a Plug Component</h3>  
+
+<p>The following example shows how to create a plug.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+</pre>
+
+<h3 id="use_plug">Using the Plug</h3>
+
+<p>The socket image provides the service where to connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process, use the service name and number set by the socket you want to connect to.</p>
+
+<p>As an example, connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
+
+<pre class="prettyprint">
+elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called <span style="font-family: Courier New,Courier,monospace">remote_win</span> here).</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<pre class="prettyprint">
+// Create a remote window in the other process 
+Elm_Win *remote_win = elm_win_add(NULL, &quot;Window Socket&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_WIN_SOCKET_IMAGE);
+// Create a socket named &quot;plug_test&quot; and listen to it
+elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+                               <h2 id="popup" name="popup">Popup</h2>
+  
+<p class="figure">Figure: Popup component</p> 
+<p align="center"><img alt="Popup component" src="../../images/popup.png" /></p>
+      
+<p class="figure">Figure: Popup hierarchy</p> 
+<p align="center"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
+  
+
+<p> The popup component shows a popup area that can contain:</p>
+<ul>
+<li>a title area (optional)</li>
+<li>a content area</li>
+<li>an action area (optional)</li>
+</ul>
+
+<p>The optional title area can contain an icon and text, the action area can contain up to three buttons.</p>
+
+<h3>Adding a Popup Component</h3>
+
+<p>The following example shows how to create a popup component.</p>
+<pre class="prettyprint">
+Evas_Object *popup, *parent;
+
+// Create a popup 
+popup = elm_popup_add(parent);
+</pre>
+
+<h3>Using Popup Styles</h3>
+
+<p>The following item styles are available for the popup:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
+</ul>
+
+<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
+
+<pre class="prettyprint">elm_object_style_set(popup, &quot;toast&quot;);</pre>
+
+<h3>Setting the Popup Areas</h3>
+
+<p>Configure the title area. Set the icon object using the part name <span style="font-family: Courier New,Courier,monospace">title,icon</span>. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon;
+
+// Add an icon to the title area 
+elm_object_part_content_set(popup, &quot;title,icon&quot;, icon);
+
+// Set the title text 
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
+</pre>
+
+<p>Set the content of the popup. The content can be simple text.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(popup, &quot;default&quot;, &quot;Test popup&quot;);
+</pre>
+
+<p>The content can also be an Evas object.</p>
+
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+</pre>
+
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button, a <strong>Cancel</strong> button, and a <strong>Help</strong> button.</p>
+
+<pre class="prettyprint">
+Evas_Object *button1, *button2, *button3;
+
+// Create the 3 buttons 
+
+button1 = elm_button_add(popup);
+elm_object_text_set(button1, &quot;OK&quot;);
+
+button2 = elm_button_add(popup);
+elm_object_text_set(button2, &quot;Cancel&quot;);
+
+button3 = elm_button_add(popup);
+elm_object_text_set(button3, &quot;Help&quot;);
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, &quot;button1&quot;, button1);
+elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+elm_object_part_content_set(popup, &quot;button3&quot;, button3);
+</pre>
+
+<h3>Using Popup Callbacks</h3>
+<p>The popup emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the Blocked Event area.</li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In this example, the timeout is set to five seconds.</p>
+
+<pre class="prettyprint">
+elm_popup_timeout_set(popup, 5.0);
+</pre>
+
+<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Timeout \n&quot;);
+}
+</pre>
+
+<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal <span style="font-family: Courier New,Courier,monospace">block,clicked</span> is sent to the application.</p>
+
+                       
+                               <h2 id="progressbar" name="progressbar">Progressbar</h2>
+  
+         <p class="figure">Figure: Progressbar component</p> 
+  <p align="center"><img alt="Progressbar component" src="../../images/progressbar.png" /></p>
+      
+         <p class="figure">Figure: Progressbar hierarchy</p> 
+  <p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
+  
+
+ <h3>Adding a Progressbar Component</h3>
+ 
+<p>This UI component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.</p> 
+<p>The following example shows how to create a progressbar component.</p>
+
+<pre class="prettyprint">
+Evas_Object *pb = elm_progressbar_add(win);
+</pre>
+
+<h3>Using the Progressbar Styles</h3>
+
+<p>The progressbar has several styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">pending_list</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_large</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_medium</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_small</span></li>
+</ul>
+
+<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
+
+<pre class="prettyprint">elm_object_style_set(pb, &quot;pending_list&quot;);</pre>
+
+<h3>Using the Progressbar</h3>
+
+<p>By default, the progressbar does not show a label or an icon, and the unit label is set to <span style="font-family: Courier New,Courier,monospace">%.0f %%</span>.</p>
+
+<p>The following example shows how to set a label. In this example it is named <span style="font-family: Courier New,Courier,monospace">Test label</span>.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(pb, &quot;Test label&quot;);
+</pre>
+
+<p>An icon is set with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> using the partname <span style="font-family: Courier New,Courier,monospace">icon</span>.</p>
+<pre class="prettyprint">
+elm_object_part_content_set(pb, &quot;icon&quot;, icon_object);
+</pre>
+
+<p>The unit label format string can be modified using a <span style="font-family: Courier New,Courier,monospace">printf</span> style format. Set it to be a float number with two decimals.</p>
+<pre class="prettyprint">
+elm_progressbar_unit_format_set(pb, &quot;%1.2f%%&quot;);
+</pre>
+
+<h3>Configuring the Progressbar</h3>
+
+<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
+<pre class="prettyprint">
+elm_progressbar_pulse_set(pb, EINA_TRUE);
+elm_progressbar_pulse(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
+<pre class="prettyprint">
+elm_progressbar_inverted_set(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+<pre class="prettyprint">
+elm_progressbar_value_set(pb, 0.2);
+</pre>
+
+<p>The current value can be read.</p>
+<pre class="prettyprint">
+double value = elm_progressbar_value_get(pb);
+</pre>
+
+<p>You can set the orientation of the progressbar to vertical instead of the default horizontal orientation.</p>
+<pre class="prettyprint">
+elm_progressbar_horizontal_set(pb, EINA_FALSE);
+</pre>
+
+<h3>Using the Progressbar Callbacks</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">changed</span> signal is the only signal specifically emitted by the progressbar component.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pb, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the progressbar value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+               
+                               <h2 id="radio" name="radio">Radio</h2>
+                               
+<p class="figure">Figure: Radio component</p> 
+<p align="center"><img alt="Radio component" src="../../images/radio.png" /></p>
+      
+<p class="figure">Figure: Radio hierarchy</p> 
+<p align="center"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
+  
+<p> This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected), an optional icon and an optional label. Even though it is usually grouped with two or more other radio objects, it can also be used alone.</p>
+<p>The radio component inherits from the layout component. All the layout functions can be used with radio objects.</p>
+
+<h3>Adding a Radio Component</h3>
+
+<p>Create a radio component and set a label to it.</p>
+<pre class="prettyprint">
+Evas_Object *radio, *parent;
+
+// Create a radio
+radio = elm_radio_add(parent);
+
+// Set a label to it
+elm_object_text_set(radio, &quot;Radio component&quot;);
+</pre>
+
+<p>Set an icon to the radio object.</p>
+<pre class="prettyprint">
+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;home&quot;);
+
+// Set it to the radio component 
+elm_object_part_content_set(radio, &quot;icon&quot;, icon);
+</pre>
+
+<h3>Changing the Radio Value</h3>
+
+<p>The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.</p>
+<pre class="prettyprint">
+elm_radio_state_value_set(radio, 1);
+</pre>
+
+<h3>Managing the Radio Groups</h3>
+
+<p>The following example shows how to create a group of radio objects with at least two radio components.</p>
+
+<pre class="prettyprint">
+// Create another radio object 
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+</pre>
+
+<p>Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.</p>
+
+<pre class="prettyprint">
+elm_radio_value_set(group, 2);
+</pre>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
+
+<h3>Using the Radio Callbacks</h3>
+
+<p>When the state of a radio is modified in a group of radio objects, the <span style="font-family: Courier New,Courier,monospace">changed</span> signal is emitted.</p>
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+                       
+                               <h2 id="segmentcontrol" name="segmentcontrol">Segmentcontrol</h2>
+ 
+<p class="figure">Figure: Segmentcontrol with text</p> 
+<p align="center"><img alt="Segmentcontrol with text" src="../../images/segment_text.png" /></p>
+      
+<p class="figure">Figure: Segmentcontrol with icons</p> 
+<p align="center"><img alt="Segmentcontrol with icons" src="../../images/segment.png" /></p>
+  
+<p class="figure">Figure: Segmentcontrol hierarchy</p> 
+<p align="center"><img alt="Segmentcontrol hierarchy" src="../../images/segment_control_tree.png" /></p>
+ 
+<p>This UI component consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.</p>
+<p>This UI component inherits from the layout component, so all the layout components API can be used on segmentcontrol objects.</p>
+
+<h3>Adding a Segmentcontrol Component</h3>
+
+<p>The following example shows how to add a segmentcontrol component.</p>
+
+<pre class="prettyprint">
+Evas_Object *segcontrol, *parent;
+
+segcontrol = elm_segment_control_add(parent);
+</pre>
+
+<h3>Adding Items</h3>
+
+<p>You can add items to the UI component. In the following example four items containing only text labels (no icons) are added.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+elm_segment_control_item_add(segcontrol, NULL, &quot;item1&quot;);
+elm_segment_control_item_add(segcontrol, NULL, &quot;item2&quot;);
+elm_segment_control_item_add(segcontrol, NULL, &quot;item3&quot;);
+it = elm_segment_control_item_add(segcontrol, NULL, &quot;item4&quot;);
+</pre>
+
+<p>You can also:</p>
+<ul>
+<li>Insert an item at a specific position starting at 0.
+<pre class="prettyprint">
+elm_segment_control_item_insert_at(segcontrol, NULL, &quot;item7&quot;, 2);
+</pre></li>
+
+<li>Delete an item.
+<pre class="prettyprint">
+elm_segment_control_item_del_at(segcontrol, 2);
+</pre></li>
+
+<li>Set the selected state of an item manually.
+<pre class="prettyprint">
+elm_segment_control_item_selected_set(it, EINA_TRUE);
+</pre></li>
+<li>Disable the whole segment control.
+<pre class="prettyprint">elm_object_disabled_set(segcontrol, EINA_TRUE);</pre></li>
+</ul>
+
+<h3>Using the Segmentcontrol Callbacks</h3>
+
+<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span>signal. It is called when the user clicks on a segment item which is not previously selected. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the segment item pointer.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(segcontrol, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the segcontrol selected item changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Segment_Item *it = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The selected segment item has changed\n&quot;);
+}
+</pre>
+
+               
+                               <h2 id="slider" name="slider">Slider</h2>
+
+<p class="figure">Figure: Slider component</p> 
+<p align="center"><img alt="Slider component" src="../../images/slider.png" /></p>
+      
+<p class="figure">Figure: Slider hierarchy</p> 
+<p align="center"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
+
+<p> The slider component is a draggable bar that is used to select a value within a certain range.</p>
+
+<h3>Adding a Slider Component</h3>
+
+<p>The following example shows how to create a slider object.</p>
+<pre class="prettyprint">
+Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+</pre>
+
+<h3>Using the Slider Styles</h3>
+
+<p>A slider has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">center_point</span></li>
+</ul>
+
+<p>The following example sets the style to <span style="font-family: Courier New,Courier,monospace">center_point</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(slider, &quot;center_point&quot;);
+</pre>
+
+<p>With this style, the slider <span style="font-family: Courier New,Courier,monospace">0</span> point is in the middle of the UI component.</p>
+
+<h3>Configuring the Slider</h3>
+
+<p>The orientation is set with the <span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span> function, and it is inverted the same way as the progressbar component. In the following example it is set to vertical and inverted.</p>
+<pre class="prettyprint">
+elm_slider_horizontal_set(slider, EINA_FALSE);
+elm_slider_inverted_set(slider, EINA_TRUE);
+</pre>
+
+<p>The slider can contain icons (<span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span> partnames), a label, a unit label, and an indicator label.</p>
+<pre class="prettyprint">
+Evas_Object *icon1, *icon2;
+
+// Set the icons 
+elm_object_part_content_set(slider, &quot;icon&quot;, icon1);
+elm_object_part_content_set(slider, &quot;end&quot;, icon2);
+
+// Set the label 
+elm_object_part_text_set(slider, &quot;default&quot;, &quot;slider label&quot;);
+
+// Set the unit format 
+elm_slider_unit_format_set(slider, &quot;%1.2f meters&quot;);
+</pre>
+
+<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<pre class="prettyprint">
+elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+</pre>
+
+<p>The span of the slider represents its length horizontally or vertically. It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
+<p>You can retrieve the current value of the slider anytime.</p>
+<pre class="prettyprint">
+double value = elm_slider_value_get(slider);
+</pre>
+
+<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.</p>
+<pre class="prettyprint">
+// Get the current state of the indicator 
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior 
+elm_slider_indicator_show_set(slider, !enlarge);
+</pre>
+ 
+<h3>Using the Slider Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span>: Dragging the slider indicator around starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span>: Dragging the slider indicator around stops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the slider value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The slider has changed\n&quot;);
+}
+</pre>
+ 
+                               <h2 id="spinner" name="spinner">Spinner</h2>
+                               
+                               
+<p class="figure">Figure: Spinner component</p> 
+<p align="center"><img alt="Spinner component" src="../../images/spin.png" /></p>
+      
+<p class="figure">Figure: Spinner hierarchy</p> 
+<p align="center"><img alt="Spinner hierarchy" src="../../images/spinner_tree.png" /></p>
+
+<p> The spinner component increases or decreases a numeric value with the arrow buttons.</p>
+
+<p>This UI component inherits from the layout component, so all functions concerning the layout component are used on the spinner component.</p>
+
+<h3>Adding a Spinner Component</h3>
+<p>The following example shows how to create a spinner object.</p>
+
+<pre class="prettyprint">
+Evas_Object *spin, *parent;
+
+spin = elm_spinner_add(parent);
+</pre>
+
+<h3>Configuring the Spinner</h3>
+
+<p>The label format is set to a different value:</p>
+<pre class="prettyprint">
+elm_spinner_label_format_set(spin, &quot;%1.2f meters&quot;);
+</pre>
+
+<p>You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:</p>
+<pre class="prettyprint">
+elm_spinner_step_set(spin, 2.0);
+</pre>
+<p>The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.</p>
+<pre class="prettyprint">
+elm_spinner_wrap_set(spin, EINA_TRUE);
+</pre>
+
+<p>You can set the minimum and maximum values of the spinner.</p>
+<pre class="prettyprint">
+elm_spinner_min_max_set(spin, -25.0, 100.0);
+</pre>
+
+<p>The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.</p>
+<pre class="prettyprint">
+elm_object_style_set(spin, &quot;vertical&quot;);
+elm_spinner_interval_set(spin, 0.1);
+</pre>
+
+<p>If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.</p>
+<pre class="prettyprint">Evas_Object *spin2 = elm_spinner_add(parent);
+elm_spinner_min_max_set(spin2, 1, 3);
+elm_spinner_special_value_add(spin2, 1, &quot;One&quot;);
+elm_spinner_special_value_add(spin2, 2, &quot;Two&quot;);
+elm_spinner_special_value_add(spin2, 3, &quot;Three&quot;);
+</pre>
+
+<h3>Using the Spinner Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The spinner value changes.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">delay,changed</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(spin, &quot;delay,changed&quot;, delay_changed_cb, data);
+}
+
+// Callback function for the &quot;delay,changed&quot; signal
+// This callback is called a short time after the spinner value changes
+void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The spinner value has changed\n&quot;);
+}
+</pre>
+       
+                               <h2 id="toolbar_component" name="toolbar_component">Toolbar</h2>
+
+    <p class="figure">Figure: Toolbar component</p> 
+  <p align="center"><img alt="toolbar component" src="../../images/toolbar.png" /></p> 
+  
+      <p class="figure">Figure: Toolbar hierarchy</p> 
+  <p align="center"><img alt="Toolbar hierarchy" src="../../images/toolbar_tree.png" /></p> 
+
+  
+<p> This UI component is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.</p>
+
+<h3>Adding and Configuring a Toolbar Component</h3>
+
+<p>Use the following function to create a toolbar.</p>
+<pre class="prettyprint">
+Evas_Object *toolbar, *parent;
+
+toolbar = elm_toolbar_add(parent);
+</pre>
+
+<h3>Using the Toolbar Styles</h3>
+<p>The toolbar has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">tabbar</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">tabbar_with_title</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">navigationbar</span></li>
+</ul>
+<p>The following example sets the style to <span style="font-family: Courier New,Courier,monospace">navigationbar</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(toolbar, &quot;navigationbar&quot;);
+</pre>
+
+<h3>Configuring the Toolbar</h3>
+<p>The toolbar displays its items in one of the following options.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>: The toolbar sets a minimum size to its items so that all of them fit without scrolling.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_HIDE</span>: The toolbar does not scroll or show the items that do not fit in.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_SCROLL</span>: The toolbar scrolls to show the items that do not fit in.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_MENU</span>: The toolbar creates a button to popup hidden items.</li>
+</ul>
+
+<p>Here the toolbar is set to <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>.</p>
+<pre class="prettyprint">
+elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);
+</pre>
+<p>By default, the toolbar displays items homogeneously. Items with long labels occupy a lot of space. To avoid that, you can disable the homogeneous mode.</p>
+<pre class="prettyprint">
+elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);
+</pre>
+
+<h3>Adding Items to the Toolbar</h3>
+<p>The following example shows how to add two items and choose the associated icon, label, and function to call when the item is clicked.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *home_it, *help_it;
+
+&nbsp;&nbsp;&nbsp;home_it = elm_toolbar_item_append(toolbar, &quot;home&quot;, &quot;Home&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_home_item_pressed_cb, NULL);
+&nbsp;&nbsp;&nbsp;help_it = elm_toolbar_item_append(toolbar, &quot;help&quot;, &quot;Help&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_help_item_pressed_cb, NULL);
+}
+
+static void
+_home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Home item clicked \n&quot;);
+}
+
+static void
+_help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Help item clicked \n&quot;);
+}
+</pre>
+
+<p>An item can be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.</p>
+<pre class="prettyprint">
+elm_object_item_disabled_set(help_it, EINA_TRUE);
+</pre>
+
+<h3>Adding Items with States</h3>
+<p>Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. The following example shows how to create two states to the help item with the same icon but two different labels.</p>
+<pre class="prettyprint">
+elm_toolbar_item_state_add(help_it, &quot;help&quot;, &quot;Help state 1&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_help_item_pressed_cb, NULL);
+elm_toolbar_item_state_add(help_it, &quot;help&quot;, &quot;Help state 2&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_help_item_pressed_cb, NULL);
+</pre>
+<p>It is possible to cycle through the states of the help item by using the following code.</p>
+<pre class="prettyprint">
+elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
+</pre>
+
+<h3>Using the Toolbar Callbacks</h3>
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks on a toolbar item, which is selected. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks on a toolbar item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The toolbar is pressed for a certain amount of time. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language changes.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,focused</span>: The item is highlighted. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,unfocused</span>: The highlight is removed from the item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The toolbar scrolls. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The toolbar scrolling animation starts. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The toolbar scrolling animation stops. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: The user starts dragging the toolbar. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: The user stops dragging the toolbar. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+</ul>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(toolbar, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when a toolbar item is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Toolbar_Item * item = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item clicked\n&quot;);
+}
+</pre>
+
+                               <h2 id="tooltip" name="tooltip">Tooltip</h2>
+
+<p>The tooltip component is a smart object that shows a content in a frame when mouse hovers a parent object. The UI component provides tips or information about the parent object.</p>
+
+<h3>Adding a Tooltip</h3>
+<p>The tooltip component cannot be created with the <span style="font-family: Courier New,Courier,monospace">elm_tooltip_add()</span> function. This component is already contained in a parent component when it is created. You can only activate or disable it.</p>
+
+<h3>Activating the Tooltip</h3>
+<p>To activate the tooltip on a parent object, you can set a tooltip text to the parent object.</p>
+<pre class="prettyprint">
+Evas_Object *parent;
+
+elm_object_tooltip_text_set(parent, &quot;The tooltip text&quot;;
+</pre>
+<p>You can also set a content to the parent object.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;elm_object_tooltip_content_cb_set(parent, tooltip_content_cb, NULL, tooltip_content_del_cb);
+}
+
+Evas_Object*
+tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
+{
+&nbsp;&nbsp;&nbsp;// Create the tooltip content 
+}
+
+void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;// Destroy the tooltip content 
+}
+</pre>
+
+<p>When passing content to the tooltip, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_cb</span> function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>When the tooltip disappears, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_del_cb</span> function is called. This function is in charge of deleting the previously allocated <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>Once set, the tooltip can be manually hidden or shown.</p>
+
+<pre class="prettyprint">
+elm_object_tooltip_hide(parent);
+elm_object_tooltip_show(parent);
+</pre>
+
+<p>The tooltip can be removed from the parent object when it is not needed.</p>
+<pre class="prettyprint">
+elm_object_tooltip_unset(parent);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">When content is set into the tooltip object, unsetting it calls the callback provided as <span style="font-family: Courier New,Courier,monospace">del_cb</span> to notify that the tooltip cannot be used any longer.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>A tooltip object is not a UI component, so it does not emit signals. There are no registered callbacks for it.</p>
+
+
+                               <h2 id="win" name="win">Win</h2>
+
+    <p class="figure">Figure: Win hierarchy</p> 
+  <p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>   
+ 
+
+<p>The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
+<p>The window component is created with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function. The content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
+
+<h3>Adding a Window Component</h3>
+
+<p>Create a new window and change the title.</p>
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a window 
+window = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+
+// Change the window title 
+elm_win_title_set(window, &quot;Example Window&quot;);
+</pre>
+
+<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. <span style="font-family: Courier New,Courier,monospace">main</span> is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
+
+<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>. The window created is of the type <span style="font-family: Courier New,Courier,monospace">ELM_WIN_BASIC</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a standard window 
+window = elm_win_util_standard_add(&quot;main&quot;, &quot;Example Window&quot;);
+</pre>
+
+<h3>Closing a Window</h3>
+<p>When the user closes the window outside of the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
+<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
+<p>The autodel is set using the following call:</p>
+<pre class="prettyprint">
+elm_win_autodel_set(window, EINA_TRUE);
+</pre>
+
+<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function. The window is destroyed and the signal <span style="font-family: Courier New,Courier,monospace">delete,request</span> is sent.</p>
+
+<h3>Using the Window Callbacks</h3>
+<p>The window component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focus,in</span>: The window received focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,out</span>: The window lost focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">moved</span>: The window that holds the canvas is moved.</li>
+<li><span style="font-family: Courier New,Courier,monospace">withdrawn</span>: The window is managed normally but is removed from the view.</li>
+<li><span style="font-family: Courier New,Courier,monospace">iconified</span>: The window is minimized (for example, into an icon or a taskbar).</li>
+<li><span style="font-family: Courier New,Courier,monospace">normal</span>: The window is in the normal state (not withdrawn or iconified).</li>
+<li><span style="font-family: Courier New,Courier,monospace">stick</span>: The window shows on all desktops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unstick</span>: The window shows only on one desktop.</li>
+<li><span style="font-family: Courier New,Courier,monospace">fullscreen</span>: The window is fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfullscreen</span>: The window stops being fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">maximized</span>: The window is maximized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unmaximized</span>: The window is diminished.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span>: The rotation of the window is changed by the Windows Manager.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ioerr</span>: A low-level I/O error occurred in the display system.</li>
+</ul>
+<p>With all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example registers a callback function called on the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window, &quot;fullscreen&quot;, fullscreen_cb, data);
+}
+
+// Callback function for the &quot;fullscreen&quot; signal
+// This callback is called when the window becomes fullscreen
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Window fullscreen\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/native/efl/components_wn.htm b/org.tizen.ui.guides/html/native/efl/components_wn.htm
new file mode 100755 (executable)
index 0000000..07466b0
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/components_wn.htm
@@ -0,0 +1,2481 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Using Wearable UI Components</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#background">Background</a></li>
+                       <li><a href="#button">Button</a></li>
+                       <li><a href="#check">Check</a></li>
+                       <li><a href="#ctxpopup">Ctxpopup</a></li>
+                       <li><a href="#datetime">Datetime</a></li>
+                       <li><a href="#entry">Entry</a></li>
+                       <li><a href="#genlist">Genlist</a></li>
+                       <li><a href="#glview">GLView</a></li>
+                       <li><a href="#icon">Icon</a></li>
+                       <li><a href="#image">Image</a></li>
+                       <li><a href="#index">Index</a></li>
+                       <li><a href="#label">Label</a></li>
+                       <li><a href="#list">List</a></li>
+                       <li><a href="#map">Map</a></li>
+                       <li><a href="#notify">Notify</a></li>
+                       <li><a href="#plug">Plug</a></li>
+                       <li><a href="#popup">Popup</a></li>
+                       <li><a href="#progressbar">Progressbar</a></li>
+                       <li><a href="#radio">Radio</a></li>
+                       <li><a href="#slider">Slider</a></li>
+                       <li><a href="#win">Win</a></li>
+               </ul>
+                       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>             
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Using Wearable UI Components</h1>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+                               <h2 id="background" name="background">Background</h2>
+                               
+<p class="figure">Figure: Red color background</p>
+<p align="center"><img alt="Red color background" src="../../images/bg_wn.png" /></p>
+
+<p class="figure">Figure: Background hierarchy</p>
+<p align="center"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
+
+<p>The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.</p>
+
+<h3>Adding a Background Component</h3>
+
+<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg, *parent;
+
+// Create a background
+bg = elm_bg_add(parent);
+</pre>
+
+<h3>Changing the Color of the Background</h3>
+
+<p>You can set the color of the background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function. The following example sets the background color to red.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+</pre>
+
+<h3>Changing the Image of the Background</h3>
+
+<p>It is also possible to set an image or an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component&#39;s area.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
+</ul>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Set a file on the disk as a background image
+elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
+// Set an Edje group as a background image
+elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;edje_group&quot;);
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+</pre>
+
+<h3>Using Overlay</h3>
+
+<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(bg, &quot;overlay&quot;, over);
+</pre>
+
+<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
+
+                       
+                               <h2 id="button" name="button">Button</h2>
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button_wn.png" /></p>
+
+<p class="figure">Figure: Button hierarchy</p>
+<p align="center"><img alt="Button hierarchy" src="../../images/button_tree.png" /></p>
+
+<p>The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.</p>
+
+<h3>Adding a Button Component</h3>
+
+<p>Create a button.</p>
+<pre class="prettyprint">
+Evas_Object *button, *parent;
+
+// Create a button
+button = elm_button_add(parent);</pre>
+
+<h3>Adding an Icon Inside a Button</h3>
+
+<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name.</p>
+
+<pre class="prettyprint">
+Evas_Object *ic;
+ic = elm_icon_add(button);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(button, &quot;icon&quot;, ic);</pre>
+
+<h3>Adding Text Inside a Button</h3>
+
+<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(button, &quot;Click me!&quot;);
+</pre>
+
+<h3>Using Button Styles</h3>
+
+<p>Various styles can be used on the button. Tizen supports the following styles for wearable core controls:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">green</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">orange</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">red</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">nextdepth</span></li>
+</ul>
+<p>Tizen supports the following styles for Gear O:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
+</ul>
+
+<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
+
+<pre class="prettyprint">
+// Example for wearable core control
+elm_object_style_set(button, &quot;nextdepth&quot;);
+
+// Example for Gear O
+elm_object_style_set(button, &quot;bottom&quot;);
+</pre>
+
+<h3>Using the Button Callbacks</h3>
+
+<p>The button emits the following signals:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the button (press/release).</li>
+    <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The user pressed the button without releasing it.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The user pressed the button.</li>
+    <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The user released the button after pressing it.</li>
+</ul>
+
+<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>This is an example to register and define a callback function called by the clicked signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
+}
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
+}
+</pre>
+
+<h3>Using the Autorepeat Feature</h3>
+
+<p>The autorepeat feature is enabled by default. It consists of calling the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with the following functions:</p>
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
+    <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
+</ul>
+
+<p>Disable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_FALSE);
+</pre>
+
+<p>Enable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_TRUE);
+</pre>
+
+<p>Set the initial timeout to five seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_initial_timeout_set(button, 5.0);
+</pre>
+
+<p>Set the gap between two signals to 0.5 seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_gap_timeout_set(button, 0.5);
+</pre>
+
+               
+                               <h2 id="check" name="check">Check</h2>
+
+<p class="figure">Figure: Check component</p> 
+<p align="center"><img alt="Check component" src="../../images/check_wn.png" /></p> 
+
+<p class="figure">Figure: Check hierarchy</p> 
+<p align="center"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p> 
+
+<p>The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
+
+<p>This UI component inherits from the layout component. All layout functions can be used on the check component.</p>
+
+<h3 id="Adding" name="Adding">Adding a Check Component</h3>
+
+<p>The following example shows how to create a check component.</p>
+<pre class="prettyprint">
+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+</pre>
+
+<h3 id="Modifying" name="Modifying">Modifying the Check Styles</h3>
+
+<p>The check component style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function.</p>
+<p>The following styles are available for wearable core controls:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
+</ul>
+<p>The following styles are available for Gear O:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">small</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
+</ul>
+
+<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">on and off</span> style on our check object.</p>
+<pre class="prettyprint">
+elm_object_style_set(check, &quot;on and off&quot;);
+</pre>
+
+<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
+<pre class="prettyprint">
+char *style = elm_object_style_get(check);
+</pre>
+
+<h3 id="Using_Check" name="Using_Check">Using the Check Component</h3>
+
+<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+<pre class="prettyprint">
+elm_check_state_set(check, EINA_TRUE);
+</pre>
+
+<p>You can also retrieve the current value of the check object.</p>
+<pre class="prettyprint">
+Eina_Bool value = elm_check_state_get(check);
+</pre>
+
+<p>As with a radio object, an icon can be set for the wearable core control.</p>
+<pre class="prettyprint">
+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;home&quot;);
+
+// Set it to the check object 
+elm_object_part_content_set(check, &quot;icon&quot;, icon);
+</pre>
+
+<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
+<pre class="prettyprint">
+// Get the content set in the icon part 
+Evas_Object *icon = elm_object_part_content_get(check, &quot;icon&quot;);
+</pre>
+
+<h3 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h3>
+
+<p>When the value is changed by the user, the changed signal is emitted. The <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+               
+                               <h2 id="ctxpopup" name="ctxpopup">Ctxpopup</h2>
+
+    <p class="figure">Figure: Context popup component</p> 
+<p align="center"><img alt="Context popup component" src="../../images/ctxpopup_wn.png" /></p> 
+  
+      <p class="figure">Figure: Context popup hierarchy</p> 
+<p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
+
+
+<p>Ctxpopup is a contextual popup that can show a list of items.</p>
+
+<h3>Adding a Ctxpopup Component</h3>
+
+<p>A ctxpopup can be created with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function, and when shown, it automatically chooses an area inside its parent object&#39;s view (set using <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
+
+<pre class="prettyprint">
+Evas_Object *ctxpopup, *parent;
+
+// Create a ctxpopup 
+ctxpopup = elm_ctxpopup_add(parent);
+</pre>
+
+<h3>Modifying the Ctxpopup Style</h3>
+
+<p>The following styles are available for wearable core controls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+<p>The following styles are available for Gear O:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">select_mode</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">select_mode/top</span>, <span style="font-family: Courier New,Courier,monospace">select_mode/bottom</span> (These two styles can be used as a pair.)</li>
+</ul>
+
+
+<p>The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+<pre class="prettyprint">
+elm_object_style_set(ctxpopup, &quot;default&quot;);
+</pre>
+
+<h3>Configuring the Ctxpopup</h3>
+
+<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here it is set to horizontal.</p>
+<pre class="prettyprint">
+elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<p>Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden. </p>
+<pre class="prettyprint">
+elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<h3>Managing the Ctxpopup Items</h3>
+
+<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the <span style="font-family: Courier New,Courier,monospace">Test</span> label and no icon.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_cb, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
+<pre class="prettyprint">
+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
+}
+</pre>
+
+<p>After that the item label is set to <span style="font-family: Courier New,Courier,monospace">New label</span>.</p>
+<pre class="prettyprint">elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
+</pre>
+
+<p>And its icon is modified to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon.</p>
+<pre class="prettyprint">
+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, &quot;home&quot;);
+
+elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
+</pre>
+
+<h3>Using the Ctxpopup Callbacks</h3>
+
+<p>The context popup emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal when it is dismissed. You can register a callback to this signal. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ctxpopup, &quot;dismissed&quot;, dismissed_cb, data);
+}
+
+// Callback function for the &quot;dismissed&quot; signal
+// This callback is called when the ctxpopup is dismissed
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Ctxpopup dismissed\n&quot;);
+}
+</pre> 
+
+                               <h2 id="datetime" name="datetime">Datetime</h2>
+  
+<p class="figure">Figure: Datetime selection</p> 
+<p align="center"><img alt="Datetime selection" src="../../images/datetime_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Datetime hierarchy</p> 
+<p align="center"><img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p> 
+ 
+<p>The datetime component displays and adds date and time values.</p>
+
+<h3>Adding a Datetime Component</h3>
+
+<p>The UI component is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>.</p>
+<p>The following fields can be controlled:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: the year field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: the month field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: the date field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: the hour field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: the minute field</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: the AM/PM field</li>
+  </ul>
+
+<h3>Using the Datetime Styles</h3>
+
+<p>The following styles are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">datepicker_layout</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">timepicker_layout</span></li>
+  </ul>
+
+<p>The following example creates the <span style="font-family: Courier New,Courier,monospace">datepicker_layout</span> style:</p>
+<pre class="prettyprint">
+elm_object_style_set(datetime, &quot;datepicker_layout&quot;);
+</pre>
+
+<h3>Setting the Datetime Format</h3>
+
+<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.</p>
+<pre class="prettyprint">
+elm_object_style_set(datetime, &quot;timepicker_layout&quot;);
+elm_datetime_format_set(datetime, &quot;%d/%b/%Y%I:%M&quot;);
+</pre>
+<p>Please refer to the API documentation for a complete list of all the options available.</p>
+
+<h3>Using the Datetime Callbacks</h3>
+
+<p>A callback can be registered on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal to detect when the Datetime field values are changed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime field changed. \n&quot;);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
+ 
+ 
+               
+                               <h2 id="entry" name="entry">Entry</h2>
+  
+<p class="figure">Figure: Entry component</p> 
+<p align="center"><img alt="Entry component" src="../../images/entry_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Entry component</p> 
+<p align="center"><img alt="Entry component" src="../../images/entry2_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Entry hierarchy</p> 
+<p align="center"><img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p> 
+ 
+<p>The entry component is a box where the user can enter text. It supports the following features:</p>
+  <ul>
+   <li>text wrapping</li>
+   <li>multiline</li>
+   <li>scrolling</li>
+   <li>formatted markup text</li>
+   <li>password mode</li>
+   <li>filtering text</li>
+   <li>read/write from a file</li>
+   <li>theme style overrides</li>
+  </ul>
+   
+<h3>Adding an Entry Component</h3>
+
+<p>The entry component is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
+<pre class="prettyprint">
+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, &quot;A short text.&quot;);
+</pre>
+
+<h3>Using the Text Editor</h3>
+
+<p>You can append text to the end of existing content.</p>
+<pre class="prettyprint">
+elm_entry_entry_append(entry, &quot;END&quot;);
+</pre>
+
+<p>You can also insert text at the current cursor position.</p>
+<pre class="prettyprint">
+elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
+Eina_Bool Empty = elm_entry_is_empty(entry);
+</pre>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable <span style="font-family: Courier New,Courier,monospace">Empty</span> returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<p>The user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.</p>
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+ 
+<h3>Setting the Password Mode</h3>
+
+<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
+
+<pre class="prettyprint">
+elm_entry_password_set(entry, EINA_TRUE);
+</pre>
+
+<h3>Entry Line Modes And Wrapping</h3>
+
+<p>The entry component has two line modes:</p>
+  <ul>
+   <li>single line mode</li>
+   <li>multiline mode</li>
+  </ul>
+
+<p>First, set the entry in single line mode.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_TRUE);
+</pre>
+
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+
+<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+</pre>
+
+<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, char wrap</li>
+  </ul>
+
+<h3>Selecting Text</h3>
+
+<p>Text selections can be made with different functions:</p>
+<ul>
+<li>To select all the content of the entry component:
+<pre class="prettyprint">
+elm_entry_select_all(entry);
+</pre>
+</li>
+
+<li>To deselect the current selection:
+<pre class="prettyprint">
+elm_entry_select_none(entry);
+</pre>
+</li>
+
+<li>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The following code selects the first twenty characters of the entry content.
+<pre class="prettyprint">
+elm_entry_select_region_set(entry, 0, 20);
+</pre>
+</li>
+
+<li>To retrieve the currently selected text in an entry:
+<pre class="prettyprint">
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+</pre>
+</li>
+</ul>
+
+<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>You can copy or cut the selection to the clipboard.</p>
+<pre class="prettyprint">
+elm_entry_selection_cut(entry);
+</pre>
+
+<p>The selection can be pasted in the same or a different entry.</p>
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
+</pre>
+
+<h3>Controlling the Cursor</h3>
+
+<p>The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.</p>
+<ul>
+<li>To move the cursor to the beginning of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_begin_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor to the end of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_end_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor one line down or up:
+<pre class="prettyprint">
+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+</pre>
+</li>
+<li>To move the cursor one character to the left or right:
+<pre class="prettyprint">
+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+</pre>
+</li>
+
+<li>To set the cursor at a specific position (15th character, for example):
+<pre class="prettyprint">
+elm_entry_cursor_pos_set(entry, 15);
+</pre>
+</li>
+</ul>
+
+<p>It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.</p>
+<pre class="prettyprint">
+elm_entry_cursor_selection_begin(entry);
+
+for (i = 0; i &lt; 5; i++)
+{
+&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+</pre>
+
+<h3>Formatting Text</h3>
+
+<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available in the default theme:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span>: Inserts a line break.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;ps&gt;</span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;tab&gt;</span>: Inserts a tab.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;em&gt;...&lt;/em&gt;</span>: Emphasis. Sets the oblique style for the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;b&gt;...&lt;/b&gt;</span>: Sets the bold style for the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;link&gt;...&lt;/link&gt;</span>: Underlines the enclosed text.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;hilight&gt;...&lt;/hilight&gt;</span>: Highlights the enclosed text.</li>
+  </ul>
+
+<h3>Using Special Markups</h3>
+
+<p>Special markups can be added within the text of the entry:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;a href = ..&gt;...&lt;/a&gt;</span>: Anchors</li>
+   <li><span style="font-family: Courier New,Courier,monospace">&lt;item size = .. vsize = .. href = ..&gt;...&lt;/item&gt;</span>: Items</li>
+  </ul>
+
+<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
+
+<p>The item markup provides a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name has to be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+
+<h3>Overriding Style</h3>
+
+<p>To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
+
+<h3>Filtering Text</h3>
+
+<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size limit_size = 
+{
+&nbsp;&nbsp;&nbsp;.max_char_count = 8,
+&nbsp;&nbsp;&nbsp;.max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+ 
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+</pre>
+
+<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters.</p>
+
+<pre class="prettyprint">
+static Elm_Entry_Filter_Accept_Set accept_set = 
+{
+&nbsp;&nbsp;&nbsp;.accepted = NULL,
+&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+</pre>
+
+<h3>Loading and Saving Files</h3>
+
+<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
+
+<pre class="prettyprint">
+// Set the file in which the entry text is saved. This function
+// implicitly loads the existing file content 
+elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
+</pre>
+
+<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
+<pre class="prettyprint">
+// Disable autosaving 
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed 
+elm_entry_file_save(entry);
+</pre>
+
+<h3>Using Entry Theme Content</h3>
+
+<p>Two content parts of the default theme are available: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>. The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon;
+
+ic = elm_icon_add(entry);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+elm_object_part_content_set(entry, &quot;end&quot;, icon);
+</pre>
+
+<h3>Using Entry Theme Texts</h3>
+
+<p>The default theme allows the use of the following text parts:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">elm.text</span> - text of the entry</li>
+   <li><span style="font-family: Courier New,Courier,monospace">elm.guide</span> - placeholder of the entry</li>
+  </ul>
+
+<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
+<pre class="prettyprint">
+elm_object_part_text_set(entry, &quot;elm.guide&quot;, &quot;Hello World&quot;);
+</pre>
+
+<h3>Using Entry Callbacks</h3>
+
+<p>The entry component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The escape key is pressed on a single line entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The enter key is pressed on a single line entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: Mouse button is pressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: Mouse cursor is moved into an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: Mouse cursor is moved out of an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: Mouse button is unpressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: Program language is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: A mouse button is pressed and held for a couple of seconds.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: A maximum length is reached.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: A mouse button is pressed on the entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard contents is requested.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
+  </ul>
+
+<p>For signals, where <span style="font-family: Courier New,Courier,monospace">event_info</span> has not been explicitly described, it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback to the <span style="font-family: Courier New,Courier,monospace">focused</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the entry receive the focus
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
+} 
+</pre>
+  
+
+                               <h2 id="genlist" name="genlist">Genlist</h2>
+  
+<p class="figure">Figure: Genlist component</p> 
+<p align="center"> <img alt="Genlist component" src="../../images/genlist.png" /> </p> 
+
+<p class="figure">Figure: Genlist hierarchy</p> 
+<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p> 
+
+<p>Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
+
+<p>For more information, see <a href="genlist_tutorial_wn.htm">Creating Wearable Genlists</a>.</p>
+
+<h3>Genlist Item Style</h3>
+
+<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides one text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), two content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>) and no state parts.</p>
+
+<p>The following item styles are available:</p>
+  <ul>
+       <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">groupindex</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">1text</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">1text.1icon</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">2text</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">2text.1</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">1text.1icon.divider</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">1text.1icon.1</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">2text.1icon.1</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">multiline/1text</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">multiline/2text</span></li>
+  </ul>
+
+<p>Here are some examples of the item styles.</p>
+
+<p class="figure">Figure: 1text item style</p> 
+<p align="center"> <img alt="1 text item style" src="../../images/genlist1_wn.png" /> </p> 
+
+<p class="figure">Figure: 1text.1icon.1 item style</p> 
+<p align="center"> <img alt="1text.1icon.1 item style" src="../../images/genlist2_wn.png" /> </p> 
+
+<p class="figure">Figure: 2text.1icon.1 item style</p> 
+<p align="center"> <img alt="2text.1icon.1 item style" src="../../images/genlist3_wn.png" /> </p> 
+
+<p>For more information on creating a new genlist item style, see <a href="component_custom_n.htm">Customizing Components</a>.</p>
+
+<h3>Adding a Genlist Component</h3>
+
+<p>A genlist component is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *parent;
+genlist = elm_genlist_add(parent);
+</pre>
+
+<h3>Creating And Deleting Items</h3>
+
+<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+<pre class="prettyprint">
+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;decorate_item_style = NULL;
+itc-&gt;decorate_all_item_style = NULL;
+itc-&gt;func.text_get = _item_label_get;
+itc-&gt;func.content_get = _item_content_get;
+itc-&gt;func.state_get = _item_state_get;
+itc-&gt;func.del = _item_del;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">text_get</span>
+   <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item&#39;s theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">content_get</span>
+   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">state_get</span>
+   <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item&#39;s theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter&#39;s theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> argument, when the state is true. xxx is the name of the (state) part.</p></li>
+
+   <li><span style="font-family: Courier New,Courier,monospace">del</span>
+   <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
+</ul>
+
+<h3>Managing Items</h3>
+
+<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
+
+<p>The previous functions take a <span style="font-family: Courier New,Courier,monospace">type</span> parameter that can be one of the following.</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
+  </ul>
+
+<p>If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span> is set, this item is displayed as being able to expand and have child items. If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> is set, this item is a group index item that is displayed at the top until the next group appears.</p>
+
+<p class="figure">Figure: Genlist tree</p> 
+<p align="center"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p> 
+
+<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
+
+<p>To help inspect the list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
+
+<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> for it.</p>
+
+<h3>Selection</h3>
+
+<p>Items are manually selected or deselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In the single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
+
+<p>In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
+
+<p class="figure">Figure: Genlist component</p> 
+<p align="center"> <img alt="Genlist component" src="../../images/genlist_multi.png"/> </p> 
+
+<h3>Using Genlist Callbacks</h3>
+
+<p>The genlist component emits the following signals:</p>
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. event_info in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>, that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is one second. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch swiped left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch swiped right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch swiped up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch swiped down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch pinched out. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch pinched in. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program&#39;s language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+  </ul>
+
+               
+                               <h2 id="glview" name="glview">GLView</h2>
+
+      <p class="figure">Figure: GLView example</p> 
+  <p align="center"><img alt="GLView example" src="../../images/glview_wn.png" /></p> 
+  
+      <p class="figure">Figure: GLView hierarchy</p> 
+  <p align="center"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
+
+
+<p> The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
+
+<h3>Adding a GLView Component</h3>
+
+<p>Create a GLView component with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+</pre>
+
+<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
+<pre class="prettyprint">
+elm_glview_size_set(glview, 200, 200);
+</pre>
+
+<h3>Using the GLView API</h3>
+
+<p>You can configure the GLView rendering mode by activating the following rendering modes:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
+</ul>
+
+<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
+<pre class="prettyprint">
+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+</pre>
+
+<p>The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
+<pre class="prettyprint">
+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+</pre>
+
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+
+<p>The following example shows how to set the GLView rendering policy.</p>
+<pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+</pre>
+
+<p>The GLView object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where the GLView component is redrawn only when it is visible.</p>
+
+<p>Register the callbacks:</p>
+<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</li>
+</ul>
+
+<h3>Using GLView Callbacks</h3>
+
+<p>The GLView component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The GlView component is focused. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
+</ul>
+
+<p>To register a callback:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
+}
+
+// Callback function for the &quot;focused&quot; signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
+}
+</pre>
+
+<h2 id="icon" name="icon">Icon</h2>
+ 
+<p class="figure">Figure: Icon hierarchy</p> 
+<p align="center"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p> 
+  
+<p>The icon component inherits from the image component. It is used to display images in an icon context.</p>
+
+<h3>Adding an Icon Component</h3>
+
+<p>You can create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, &quot;Home&quot;);
+</pre>
+
+<h3>Changing Image File</h3>
+
+<p>You can change the image by using an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
+</pre>
+
+<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
+
+<pre class="prettyprint">
+elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+</pre>
+
+<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+
+<h3>Using Icon Callbacks</h3>
+
+<p>The icon component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
+  </ul>
+
+<p>In both cases, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+               
+                               <h2 id="image" name="image">Image</h2>
+
+<p class="figure">Figure: Image component</p> 
+<p align="center"> <img alt="Image component" src="../../images/image_wn.png" /> </p>  
+
+<p class="figure">Figure: Image hierarchy</p> 
+<p align="center"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>   
+
+<p>The image component can load and display an image from a disk file or a memory region.</p>
+
+<h3>Adding an Image Component</h3>
+
+<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+</pre>
+
+<h3>Configuring the Image Component</h3>
+
+<p>Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.</p>
+<pre class="prettyprint">
+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
+<pre class="prettyprint">
+elm_image_smooth_set(image, EINA_TRUE);
+</pre>
+
+<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
+<pre class="prettyprint">
+elm_image_preload_disabled_set(image, EINA_TRUE);
+</pre>
+
+<p>The image can be rotated or flipped. Here the image is rotated 180 degrees.</p>
+<pre class="prettyprint">
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+</pre>
+
+<p>The following orientations are available:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line</li>
+   <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line</li>
+  </ul>
+  
+<p>If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object&#39;s area.</p>
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio 
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object 
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In this configuration, part of the image can go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
+
+<h3>Using Image Callbacks</h3>
+
+<p>The image component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">drop</span>: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks the image. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+  </ul>
+
+<p>To register a callback when a user clicks on the image:</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the image is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
+}
+</pre>  
+
+                               <h2 id="index" name="index">Index</h2>
+  
+<p class="figure">Figure: Index component</p> 
+<p align="center"> <img alt="Index component" src="../../images/index_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Index hierarchy</p> 
+<p align="center"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p> 
+ 
+<p>An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component&#39;s container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
+
+<h3>Adding an Index Component</h3>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function to create a new index component.</p>
+<pre class="prettyprint">
+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+</pre>
+
+<h3>Adding Items</h3>
+
+<p>The following example shows how to add the listitem object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *list_item1, *list_item2;
+elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
+</pre>
+
+<p>The following example shows how to add item objects, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when the item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it[5];
+for (i = 0; i &lt; 5; ++i)
+{
+&nbsp;&nbsp;&nbsp;it[i] = elm_index_item_append(index, NULL, it_select_cb, (void *) i);
+}</pre>
+
+<p>The following example shows how to define the smart callback.</p>
+<pre class="prettyprint">
+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item1 selected\n&quot;);
+}
+</pre>
+
+<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
+
+
+<h3>Using Index Callbacks</h3>
+
+<p>The index component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user releases a mouse button and selects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item&#39;s data pointer.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
+  </ul>
+
+<p>When the user selects an item in the index, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
+<pre class="prettyprint">
+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *lit = event_info;
+
+&nbsp;&nbsp;&nbsp;// Code that does the desired action
+}
+</pre>
+
+<p>After that, the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is registered.</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb, NULL);
+</pre>
+
+                       
+                               <h2 id="label" name="label">Label</h2>
+  
+<p class="figure">Figure: Label component</p> 
+<p align="center"> <img alt="Label component" src="../../images/label_wn.png" /> </p> 
+ 
+<p class="figure">Figure: Label hierarchy</p> 
+<p align="center"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p> 
+
+<p>The label component displays text with simple html-like markup.</p>
+
+<h3>Adding a Label Component</h3>
+
+<p>To add a label and set the text in it, use the following functions.</p>
+
+<pre class="prettyprint">
+Evas_Object *label = elm_label_add(win);
+
+elm_object_text_set(label, &quot;Some long text for our label, that is not so long&quot;);
+</pre>
+
+<h3>Using the Label Styles</h3>
+
+<p>Label displays the text with several predefined styles.</p>
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_roll</span>: The text appears from the left of the label and slides to the right to show the overflow, and then appears from the right of the label again.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>   
+  </ul>
+
+<p>Here the style is set to <span style="font-family: Courier New,Courier,monospace">slide_roll</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_roll&quot;);
+</pre>
+
+<h3>Configuring the Label</h3>
+
+<p>The duration of the animation and the slide mode can be set with the following functions.</p>
+<pre class="prettyprint">
+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+</pre>
+
+<p>Use the following function to modify the style.</p>
+<pre class="prettyprint">
+elm_object_style_set(label, &quot;slide_bounce&quot;);
+</pre>
+
+<h3>Using the Label Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+  <ul>
+   <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program&#39;s language changes.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+  </ul>
+  
+<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
+}
+
+// Callback function for the &quot;slide,end&quot; signal
+// This callback is called when the label slide reaches the end
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
+}
+</pre>
+
+       <h2 id="list" name="list">List</h2>
+       
+ <p class="figure">Figure: List component</p> 
+<p align="center"> <img alt="List component" src="../../images/list_wn.png" /> </p> 
+  
+  <p class="figure">Figure: List hierarchy</p> 
+<p align="center"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p> 
+ 
+  
+ <p>This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
+
+ <p>The list items can contain a text and two contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
+
+<h3>Adding a List Component</h3>
+
+<pre class="prettyprint">
+Evas_Object *list, *parent;
+
+// Create a list 
+list = elm_list_add(parent);
+</pre>
+
+<h3>Using the List</h3>
+
+<p>This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+// Enable bounce effect when the list reaches the upper and lower limits 
+elm_scroller_bounce_set(list, EINA_FALSE, EINA_TRUE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Activate multi selection 
+elm_list_multi_select_set(list, EINA_FALSE);
+</pre>
+
+<h3>Adding Item to the List</h3>
+
+ <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected 
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
+}
+
+for (i = 0; i &lt; 10; i++)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *ic;
+&nbsp;&nbsp;&nbsp;char tmp[8];
+&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
+&nbsp;&nbsp;&nbsp;// Create an icon 
+&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
+&nbsp;&nbsp;&nbsp;// Set the file to the icon file 
+&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+&nbsp;&nbsp;&nbsp;// Add item to the list 
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+</pre>
+ 
+<h3>Changing the Text or Icon of an Item</h3>
+
+<p>If you want to change the state of an item, you can do it by using all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains two instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth arguments when you append or prepend the item in the list. The <span style="font-family: Courier New,Courier,monospace">evas_object</span> instances are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, whereas the second one is referenced as the <span style="font-family: Courier New,Courier,monospace">end</span> object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item 
+it = elm_list_selected_item_get(list);
+if (!it)
+&nbsp;&nbsp;&nbsp;return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file 
+elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+// Change the first icon 
+elm_object_item_part_content_set(it, &quot;start&quot;, ic);
+// Change the second icon 
+elm_object_item_part_content_set(it, &quot;end&quot;, ic);
+// Change the label 
+elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
+</pre>
+  
+<h3>Retrieving Selected Items</h3>
+
+ <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
+
+<pre class="prettyprint">
+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item 
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
+</pre>
+
+<h3>List Item Operations</h3>
+
+ <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+ <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
+
+ <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
+
+ <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+</pre>
+
+<h3>Using List Callbacks</h3>
+
+ <p>The list emits the following signals: </p> 
+  <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user double-clicks or presses (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: The user highlights an item on the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The user unhighlights an item in the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>  
+  </ul>
+
+<p>You can register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal with the following code. Note that the currently double-clicked item can be retrieved using the <span style="font-family: Courier New,Courier,monospace">event_info</span> pointer. This code registers to the <span style="font-family: Courier New,Courier,monospace">double,clicked</span> signal and unselects the item that has been double-clicked.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
+}
+
+// Callback function for the &quot;clicked&quot; signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
+&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it,  EINA_FALSE);
+}
+</pre>
+
+
+<h2 id="map" name="map">Map</h2>
+  
+<p class="figure">Figure: Map hierarchy</p> 
+<p align="center"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>   
+
+<p>The map component displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
+
+<p>This component supports:</p>
+  <ul> 
+   <li>Zooming</li> 
+   <li>Scrolling</li> 
+   <li>Markers with content to be displayed when the user clicks over them</li> 
+   <li>Group of markers</li>   
+   <li>Routes</li> 
+  </ul>
+
+<p>The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.</p>
+
+<h3>Adding a Map Component</h3>
+
+<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
+
+<pre class="prettyprint">
+Evas_Object *map, *parent;
+
+map = elm_map_add(parent);
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
+</pre>
+
+<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
+
+<h3>Playing with the Map</h3>
+
+<p>If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.</p>
+<pre class="prettyprint">
+elm_map_region_show(map, 2.2, 48.8);
+</pre>
+
+<p>This shows the desired coordinates. The location can also be shown with a bring-in animation.</p>
+<pre class="prettyprint">
+elm_map_region_bring_in(map, 2.2, 48.8);
+</pre>
+
+<p>The map is rotated 90 degrees around the current position.</p>
+<pre class="prettyprint">
+elm_map_rotate_set(map, 90, 2.2, 48.8);
+</pre>
+
+<h3>Drawing Overlays</h3>
+
+<p>Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.</p>
+
+<h4>Creating an Overlay Class</h4>
+
+<p>Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
+
+<p>Set an icon (&quot;Home&quot; icon) to the forest class. This icon is displayed in place of the forest class on the map.</p>
+<pre class="prettyprint">
+Evas_Object *icon;
+Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
+
+// Set min zoom level at which class is displayed
+elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
+
+// Create a Home icon object and set it to the forest class 
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;home&quot;);
+elm_map_overlay_icon_set(forest_class, icon);
+</pre>
+
+<h4>Adding Overlays to a Class</h4>
+
+<p>After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. Set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+  
+<pre class="prettyprint">
+Elm_Map_Overlay *ovl;
+const char* data_meudon = &quot;Meudon forest&quot;;
+const char* data_fausses = &quot;Fausse forest&quot;;
+
+// Add an overlay
+ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;stop&quot;);
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &amp;data_meudon);
+
+// Add the new ovl object to the forest class 
+elm_map_overlay_class_append(forest_class, ovl);
+
+// Add another overlay next to the first one 
+ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, &quot;stop&quot;);
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &amp;data_fausses);
+elm_map_overlay_class_append(forest_class, ovl);
+</pre>  
+
+<p>If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.</p>
+<pre class="prettyprint">
+elm_map_overlay_class_zoom_max_set(forest_class, 8);
+</pre>
+
+<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
+
+<h4>Creating Bubbles Following Overlays</h4>
+
+<p>The following example shows how to set a content in a bubble following an overlay.</p>
+
+<pre class="prettyprint">
+// Add an overlay bubble object 
+Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
+
+// Set it to follow a specific overlay (the last created one here) 
+elm_map_overlay_bubble_follow(bubble, ovl);
+</pre>
+
+<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay&#39;s behavior.</p>
+
+<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
+
+<h3>Adding Other Overlays</h3>
+
+<p>You can draw a circle on the map with coordinates and a radius size.</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
+</pre>
+
+<p>You can also add a scale at the 200x0 coordinate (in pixels).</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
+</pre>
+
+<p>You can also draw a line, a polygon, or a route. For a full description of these functions, see the <a href="../../../../org.tizen.native.wearable.apireference/group__Map.html">Map API</a>.</p>
+
+<h3>Calculating Routes</h3>
+
+<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
+
+<p>The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.</p>
+
+<pre class="prettyprint">
+Elm_Map_Route *route = elm_map_route_add(map,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_TYPE_BICYCLE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_MAP_ROUTE_METHOD_FASTEST,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.20718, 48.79759,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.1699, 48.8189,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL);
+
+// Add a callback to when the route has been calculated and loaded 
+evas_object_smart_callback_add(map, &quot;route,loaded&quot;, _route_loaded_cb, route);
+</pre>
+
+<p>Once the route is calculated, create a route overlay object and change its color. In this example, the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback is used.</p>
+<pre class="prettyprint">
+static void
+_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;Elm_Map_Route *route = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
+&nbsp;&nbsp;&nbsp;elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
+}
+</pre>     
+
+<h3>Using Map Callbacks</h3>
+
+<p>The map component emits the following callbacks:</p>
+<ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the map without dragging around.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the map.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the map.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the map for a long time without dragging around.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the contents around starts.</li>  
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the contents around stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">tile,load</span>: A map tile image load begins.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: A map tile image load ends.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: A map tile image load fails.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: Route request begins.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: Route request ends.</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: Route request fails.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: Name request begins.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: Name request ends.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: Name request fails.</li>   
+   <li><span style="font-family: Courier New,Courier,monospace">overlay,clicked</span>: An overlay is clicked.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The map is loaded.</li>
+</ul>
+
+               
+                               <h2 id="notify" name="notify">Notify</h2>
+  
+  <p class="figure">Figure: Notify hierarchy</p> 
+<p align="center"> <img alt="Notify hierarchy" src="../../images/notify_tree.png" /> </p> 
+
+  <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
+
+<h3>Adding a Notify Component</h3> 
+  
+<p>The following example shows how to create a notify object.</p>
+<pre class="prettyprint">
+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+</pre>
+
+<h3>Configuring the Notify Component</h3> 
+
+<p>Create a label and add it to the notify object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+// Create the label and set some text to it 
+content = elm_label_add(parent);
+
+elm_object_text_set(content, &quot;A label text&quot;);
+evas_object_show(content);
+
+// Add the label object to the notify component
+elm_object_content_set(notify, content);
+</pre>
+
+<p>In the following example the notify object is shown on the bottom left corner of the parent object.</p>
+<pre class="prettyprint">
+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+</pre>
+
+<p>Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.</p>
+<pre class="prettyprint">
+elm_notify_timeout_set(notify, 5.0);
+</pre>
+
+<h3>Using Notify Callbacks</h3> 
+
+<p>The notify component emits the following signals:</p>
+ <ul> 
+   <li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The timeout count ends and the notify component is hidden</li> 
+   <li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks outside of the notify component</li> 
+  </ul>
+
+<p>For both these signals <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(notify, &quot;timeout&quot;, timeout_cb, data);
+}
+
+// Callback function for the &quot;timeout&quot; signal
+// The timeout expires and the notify object is hidden
+ 
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Notify is hidden\n&quot;);
+}
+</pre>
+
+                               <h2 id="plug" name="plug">Plug</h2>
+  
+  <p class="figure">Figure: Plug hierarchy</p> 
+<p align="center"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p> 
+
+<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by an other process. It can be used anywhere the same way as any other elementary UI component.</p>
+
+<h3 id="add">Adding a Plug Component</h3>  
+
+<p>The following example shows how to create a plug.</p>
+<pre class="prettyprint">
+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+</pre>
+
+<h3 id="use">Using the Plug</h3>
+
+<p>The socket image provides the service where to connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process, use the service name and number set by the socket you want to connect to.</p>
+
+<p>As an example, connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
+
+<pre class="prettyprint">
+elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called <span style="font-family: Courier New,Courier,monospace">remote_win</span> here).</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<pre class="prettyprint">
+// Create a remote window in the other process 
+Elm_Win *remote_win = elm_win_add(NULL, &quot;Window Socket&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_WIN_SOCKET_IMAGE);
+// Create a socket named &quot;plug_test&quot; and listen to it
+elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
+</pre>
+
+                               <h2 id="popup" name="popup">Popup</h2>
+  
+<p class="figure">Figure: Popup component</p> 
+<p align="center"><img alt="Popup component" src="../../images/popup_wn.png" /></p>
+      
+<p class="figure">Figure: Popup hierarchy</p> 
+<p align="center"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
+  
+
+<p>The popup component shows a popup area that can contain:</p>
+<ul>
+<li>a title area (optional)</li>
+<li>a content area</li>
+<li>an action area (optional)</li>
+</ul>
+
+<p>The optional title area can contain an icon and text, the action area can contain up to three buttons.</p>
+
+<h3>Adding a Popup Component</h3>
+
+<p>The following example shows how to create a popup component.</p>
+<pre class="prettyprint">
+Evas_Object *popup, *parent;
+
+// Create a popup 
+popup = elm_popup_add(parent);
+</pre>
+
+<h3>Using Popup Styles</h3>
+
+<p>The following item styles are available for wearable core controls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
+</ul>
+<p>The following item styles are available for Gear O:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">toast/circle</span></li>
+</ul>
+<p>The following layout styles are available for Gear O:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">content/circle</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons1</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons2</span></li>
+</ul>
+
+<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(popup, &quot;toast&quot;);
+</pre>
+
+
+<h3>Setting the Popup Areas in Wearable Core Controls</h3>
+<p>Configure the title area. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
+</pre>
+<p>Set the content of the popup. The content can be simple text.</p>
+<pre class="prettyprint">
+elm_object_text_set(popup, &quot;simple text&quot;);
+</pre>
+<p>The content can also be an Evas object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+</pre>
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button and a <strong>Cancel</strong> button.</p>
+<pre class="prettyprint">
+Evas_Object *button1, *button2;
+
+// Create the two buttons 
+button1 = elm_button_add(popup);
+elm_object_style_set(button1, &quot;popup&quot;);
+evas_object_size_hint_weight_set(button1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button1, &quot;Cancel&quot;);
+
+button2 = elm_button_add(popup)
+elm_object_style_set(button2, &quot;popup&quot;);
+evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button2, &quot;OK&quot;);
+
+evas_object_show(popup);
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, &quot;button1&quot;, button1);
+elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+</pre>
+
+<h3>Setting the Popup Areas in Gear O</h3>
+<p>Set the circle style and the layout of the popup.</p>
+<pre class="prettyprint">
+// Setting the style
+elm_object_style_set(popup, &quot;circle&quot;);
+
+// Setting the layout
+layout = elm_layout_add(popup);
+elm_layout_theme_set(layout, &quot;layout&quot;, &quot;popup&quot;, &quot;content/circle/buttons2&quot;);
+</pre>
+
+<p>To configure the title area, set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">elm.text.title</span>.</p>
+<pre class="prettyprint">
+// Setting the title text 
+elm_object_part_text_set(layout, &quot;elm.text.title&quot;, &quot;Text popup&quot;);
+</pre>
+
+<p>Set the content of the popup. The content can be simple text.</p>
+<pre class="prettyprint">elm_object_part_text_set(layout, &quot;elm.text.content&quot;, &quot;Test popup&quot;);
+</pre>
+
+<p>The content of the popup can also be an Evas object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(layout, content);
+</pre>
+<p>Set the popup content.</p>
+<pre class="prettyprint">
+elm_object_content_set(popup, layout);
+</pre>
+
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button, a <strong>Cancel</strong> button, and a <strong>Help</strong> button.</p>
+
+<pre class="prettyprint">
+Evas_Object *button1, *button2, *icon;
+
+// Create the 2 buttons 
+
+button1 = elm_button_add(popup);
+elm_object_style_set(button1, &quot;popup/circle/left&quot;);
+icon = elm_image_add(button1);
+elm_image_file_set(icon, ICON_DIR&quot;/b_option_list_icon_share.png&quot;, NULL);
+evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_part_content_set(button1, &quot;elm.swallow.content&quot;, icon);
+evas_object_show(icon);
+
+button2 = elm_button_add(popup);
+elm_object_style_set(button2, &quot;popup/circle/right&quot;);
+icon = elm_image_add(button2);
+elm_image_file_set(icon, ICON_DIR&quot;/b_option_list_icon_delete.png&quot;, NULL);
+evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_part_content_set(button2, &quot;elm.swallow.content&quot;, icon);
+evas_object_show(icon);
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, &quot;button1&quot;, button1);
+elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+
+</pre>
+
+<h3>Using Popup Callbacks</h3>
+<p>The popup emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the Blocked Event area.</li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In the following example the timeout is set to five seconds.</p>
+<pre class="prettyprint">elm_popup_timeout_set(popup, 5.0);</pre>
+
+<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Timeout \n&quot;);
+}
+</pre>
+
+<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal <span style="font-family: Courier New,Courier,monospace">block,clicked</span> is sent to the application.</p>
+
+                       
+                               <h2 id="progressbar" name="progressbar">Progressbar</h2>
+  
+         <p class="figure">Figure: Progressbar component</p> 
+<p align="center"><img alt="Progressbar component" src="../../images/progressbar_wn.png" /></p>
+      
+         <p class="figure">Figure: Progressbar hierarchy</p> 
+<p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
+  
+
+ <h3>Adding a Progressbar Component</h3>
+ 
+<p>This UI component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.</p> 
+<p>The following example shows how to create a progressbar component.</p>
+<pre class="prettyprint">
+Evas_Object *pb = elm_progressbar_add(win);
+</pre>
+
+<h3>Using the Progressbar Styles</h3>
+
+<p>The progressbar has several styles for wearable core controls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">pending_list</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process/groupindex</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process/popup/small</span></li>
+</ul>
+<p>The progressbar has several styles for Gear O:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">process</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process/small</span></li>
+</ul>
+
+<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(pb, &quot;pending_list&quot;);
+</pre>
+
+<h3>Configuring the Progressbar for Wearable Core Control</h3>
+
+<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
+<pre class="prettyprint">elm_progressbar_pulse_set(pb, EINA_TRUE);
+elm_progressbar_pulse(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
+<pre class="prettyprint">elm_progressbar_inverted_set(pb, EINA_TRUE);</pre>
+
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+<pre class="prettyprint">elm_progressbar_value_set(pb, 0.2);</pre>
+
+<p>It is possible to read the current value.</p>
+<pre class="prettyprint">double value = elm_progressbar_value_get(pb);</pre>
+
+<h3>Configuring the Progressbar for Gear O</h3>
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+
+<pre class="prettyprint">
+elm_progressbar_value_set(pb, 0.2);
+</pre>
+<p>The current value can be read.</p>
+<pre class="prettyprint">
+double value = elm_progressbar_value_get(pb);
+</pre>
+
+
+<h3>Using the Progressbar Callbacks</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">changed</span> signal is the only signal specifically emitted by the progressbar component.</p>
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(pb, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the progressbar value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+               
+                               <h2 id="radio" name="radio">Radio</h2>
+                               
+<p class="figure">Figure: Radio component</p> 
+<p align="center"><img alt="Radio component" src="../../images/radio_wn.png" /></p>
+      
+<p class="figure">Figure: Radio hierarchy</p> 
+<p align="center"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
+  
+<p>This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected). Even though it is usually grouped with two or more other radio objects, it can also be used alone.
+</p>
+<p>The radio component inherits from the layout component. All the layout functions can be used with radio objects.</p>
+
+<h3>Adding a Radio Component</h3>
+
+<p>Create a radio component.</p>
+<pre class="prettyprint">
+Evas_Object *radio, *parent;
+
+// Create a radio
+radio = elm_radio_add(parent);
+</pre>
+
+<h3>Changing the Radio Value</h3>
+
+<p>The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.</p>
+<pre class="prettyprint">
+elm_radio_state_value_set(radio, 1);
+</pre>
+
+<h3>Managing the Radio Groups</h3>
+
+<p>The following example shows how to create a group of radio objects with at least two radio components.</p>
+
+<pre class="prettyprint">
+// Create another radio object 
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+</pre>
+
+<p>Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.</p>
+
+<pre class="prettyprint">elm_radio_value_set(group, 2);</pre>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
+
+<h3>Using the Radio Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">changed</span>: The state of a radio is modified in a group of radio objects.</li></ul>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+}
+</pre>
+
+       <h3>Using the Radio Callbacks with Gear O</h3>
+       
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: Radio was clicked.</li>
+</ul>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(radio, &quot;clicked&quot;, clicked_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;This radio was clicked\n&quot;);
+}
+</pre>
+
+               
+                               <h2 id="slider" name="slider">Slider for the Wearable Core</h2>
+
+<p class="figure">Figure: Slider component</p> 
+<p align="center"><img alt="Slider component" src="../../images/slider_wn.png" /></p>
+      
+<p class="figure">Figure: Slider hierarchy</p> 
+<p align="center"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
+
+<p> The slider component is a draggable bar that is used to select a value within a certain range.</p>
+
+<h3>Adding a Slider Component</h3>
+
+<p>The following example shows how to create a slider object.</p>
+<pre class="prettyprint">
+Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+</pre>
+
+<h3>Using the Slider Styles</h3>
+
+<p>A slider has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+
+<h3>Configuring the Slider</h3>
+
+<p>It can contain icons (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> partname), a label, a unit label and an indicator label.</p>
+<pre class="prettyprint">
+Evas_Object *icon1, *icon2;
+
+// Set the icons 
+elm_object_part_content_set(slider, &quot;elm.swallow.icon&quot;, icon1);
+
+// Set the unit format 
+elm_slider_unit_format_set(slider, &quot;%1.2f meters&quot;);
+</pre>
+
+<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<pre class="prettyprint">
+elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+</pre>
+
+<p>The span of the slider represents its length horizontally. It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
+<p>You can retrieve the current value of the slider anytime.</p>
+<pre class="prettyprint">
+double value = elm_slider_value_get(slider);
+</pre>
+
+<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.</p>
+<pre class="prettyprint">
+// Get the current state of the indicator 
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior 
+elm_slider_indicator_show_set(slider, !enlarge);
+</pre>
+ 
+<h3>Using the Slider Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span>: Dragging the slider indicator around starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span>: Dragging the slider indicator around stops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(slider, &quot;changed&quot;, changed_cb, data);
+}
+
+// Callback function for the &quot;changed&quot; signal
+// This callback is called when the slider value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The slider has changed\n&quot;);
+}
+</pre>
+ 
+                       
+
+                               <h2 id="win" name="win">Win</h2>
+
+    <p class="figure">Figure: Win hierarchy</p> 
+<p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>   
+ 
+
+<p>The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
+<p>The window component is created with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function. The content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
+
+<h3>Adding a Window Component</h3>
+
+<p>Create a new window and change the title.</p>
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a window 
+window = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
+
+// Change the window title 
+elm_win_title_set(window, &quot;Example Window&quot;);
+</pre>
+
+<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. <span style="font-family: Courier New,Courier,monospace">main</span> is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
+
+<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>. The window created is of the type <span style="font-family: Courier New,Courier,monospace">ELM_WIN_BASIC</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a standard window 
+window = elm_win_util_standard_add(&quot;main&quot;, &quot;Example Window&quot;);
+</pre>
+
+<h3>Closing a Window</h3>
+<p>When the user closes the window outside of the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
+<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
+<p>The autodel is set using the following call:</p>
+<pre class="prettyprint">
+elm_win_autodel_set(window, EINA_TRUE);
+</pre>
+
+<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function. The window is destroyed and the signal <span style="font-family: Courier New,Courier,monospace">delete,request</span> is sent.</p>
+
+<h3>Using the Window Callbacks</h3>
+<p>The window component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">delete,request</span>: The window is requested delete.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,in</span>: The window received focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,out</span>: The window lost focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">moved</span>: The window that holds the canvas is moved.</li>
+<li><span style="font-family: Courier New,Courier,monospace">withdrawn</span>: The window is managed normally but is removed from the view.</li>
+<li><span style="font-family: Courier New,Courier,monospace">iconified</span>: The window is minimized (for example, into an icon or a taskbar).</li>
+<li><span style="font-family: Courier New,Courier,monospace">normal</span>: The window is in the normal state (not withdrawn or iconified).</li>
+<li><span style="font-family: Courier New,Courier,monospace">stick</span>: The window shows on all desktops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unstick</span>: The window shows only on one desktop.</li>
+<li><span style="font-family: Courier New,Courier,monospace">fullscreen</span>: The window is fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfullscreen</span>: The window stops being fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">maximized</span>: The window is maximized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unmaximized</span>: The window is diminished.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span>: The rotation of the window is changed by the Windows Manager.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ioerr</span>: A low-level I/O error occurred in the display system.</li>
+<li><span style="font-family: Courier New,Courier,monospace">indicator,prop,changed</span>: The property or indicator mode and indicator opacity are changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">rotation,changed</span>: The rotation of the window is changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">profile,changed</span>: The profile of the window is changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">aux,hint,allowed</span>: aux_hint of the window free.</li>
+<li><span style="font-family: Courier New,Courier,monospace">access,changed</span>: The access function of the window is changed.</li>
+</ul>
+<p>With all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example registers a callback function called on the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal.</p>
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window, &quot;fullscreen&quot;, fullscreen_cb, data);
+}
+
+// Callback function for the &quot;fullscreen&quot; signal
+// This callback is called when the window becomes fullscreen
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Window fullscreen\n&quot;);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/native/efl/containers_n.htm b/org.tizen.ui.guides/html/native/efl/containers_n.htm
new file mode 100755 (executable)
index 0000000..f9ad56d
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/containers_n.htm
@@ -0,0 +1,608 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Using Container UI Components</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#box">Box</a></li>
+                       <li><a href="#conformant">Conformant</a></li>
+                       <li><a href="#grid">Grid</a></li>
+                       <li><a href="#layout">Layout</a></li>
+                       <li><a href="#mapbuf">Mapbuf</a></li>
+                       <li><a href="#naviframe">Naviframe</a></li>
+                       <li><a href="#panes">Panes</a></li>
+                       <li><a href="#scroller">Scroller</a></li>
+                       <li><a href="#table">Table</a></li>
+                       
+                       </ul>
+               <p class="toc-title">Related Info</p>
+                       <ul class="toc">
+                               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Using Container UI Components</h1>
+
+                               <h2 id="box" name="box">Box</h2>
+                               
+
+  <p class="figure">Figure: Box container</p>
+  <p align="center"><img alt="Box container" src="../../images/box.png" /></p>
+
+
+<p>Most of the time, you want to display UI components on the screen in a specific order. In a <a href="form_tutorial_n.htm">form container</a>, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.</p>
+<h3>Creating a Box</h3>
+<p>To create a new horizontal box:</p>
+<pre class="prettyprint">Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+</pre>
+<p>By default, the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function creates a vertical box. If you want to create a horizontal box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function:</p>
+<pre class="prettyprint">Evas_Object *hbox;
+
+hbox = elm_box_add(parent);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">A box is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
+    </tr>
+   </tbody>
+  </table>
+
+<h3>Adding Objects to the Box</h3>
+<p>You can add any Evas object to the box. Here, we create 5 button components and add them to a box:</p>
+<pre class="prettyprint">int i;
+Evas_Object *bt;
+Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+
+for (i = 0; i &lt; 5; i++)
+{
+&nbsp;&nbsp;&nbsp;char tmp[16];
+&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Button %d&quot;, i);
+&nbsp;&nbsp;&nbsp;bt = elm_button_add(vbox);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, tmp);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(vbox, bt);
+&nbsp;&nbsp;&nbsp;evas_object_show(bt);
+}
+evas_object_show(vbox);
+</pre>
+<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button component to the end of the box.</p>
+
+<h3>Setting the Padding</h3>
+<p>You can set the padding between the objects in a box by using the <span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span> function. The padding values are the number of pixels horizontally and vertically.</p>
+<pre class="prettyprint">elm_box_padding_set(vbox, 16, 64);
+</pre>
+
+<h3>Handling Element Size</h3>
+<p>You can add different-size elements to a container. For example, to add an image with a size of 128x128 pixels as the first element in a box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function:</p>
+<pre class="prettyprint">ic = elm_icon_add(vbox);
+elm_image_file_set(ic, &quot;./c1.png&quot;, NULL);
+evas_object_size_hint_min_set(ic, 128, 128);
+evas_object_show(ic);
+elm_box_pack_start(vbox, ic);
+</pre>
+<p>We ask Evas to set the size hint for the icon object by using the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Evas will try to set the minimum size of this object accordingly.</p>
+<p>If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_homogeneous_set()</span> function:</p>
+<pre class="prettyprint">elm_box_homogeneous_set(vbox, EINA_TRUE);
+</pre>
+<p>Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.</p>
+<h3>Setting the Alignment</h3>
+<p>You can set the alignment of UI components inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
+
+<p class="figure">Figure: Alignment</p>
+<p align="center"><img alt="Alignment" src="../../images/align.png" /></p>
+
+<p>Here, we set an alignment of 0.8 vertically:</p>
+<pre class="prettyprint">elm_box_align_set(vbox, 0.0, 0.8);
+</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The alignment only takes effect in the opposite direction than the one defined with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function.</td>
+    </tr>
+   </tbody>
+  </table>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_layout_transition()</span> function provides the ability to animate the motion of the objects in a box when switching from one layout to another.</p>
+<h3>Using Size Hints</h3>
+<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called &quot;hints&quot;. The size hint functions are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span></li>
+</ul>
+<p>You can also use the respective get functions to get the current hint values.</p>
+<p>In case of the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function, you ask Evas to respect the minimum size you define for the object. For example, to set the minimum size of an icon to 64x46 pixels:</p>
+<pre class="prettyprint">evas_object_size_hint_min_set(ic, 64, 64);
+</pre>
+<p>You can also set a maximum size for the same icon:</p>
+<pre class="prettyprint">evas_object_size_hint_max_set(ic, 128, 128);
+</pre>
+<p>When you resize the parent of the icon, if there are no constraints to the parent, the minimum size of the parent will be the minimum hint size of the icon. If you increase the parent size, the icon will grow larger until its maximum hint size is reached. After this point, the icon will not grow any larger and there will be empty space around the icon within the parent.</p>
+<p>When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. Here, the proportion of the icon is respected, and the width will be the same as the height:</p>
+<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
+</pre>
+<p>Here, the width will be twice the height:</p>
+<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
+</pre>
+<p>If we want to change the alignment of the icon relative to the parent, we can use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align()</span> function. By default, the icon is centered, so it is aligned with a value of 0.5. You can change the alignment as follows:</p>
+<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+<p>In the above case, the icon is aligned to the bottom left corner of the parent.</p>
+<p>We can also play with the size of the icon inside its container by using the weight size hint. By default, the weight is not set, so the size of the icon will be the minimum size. But if you set this value to 1, the icon will be expand as much as it can inside the container:</p>
+<pre class="prettyprint">evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+<p>You can also use the alignment and weight hints together. Here, we want the icon to take up all the space in its parent:</p>
+<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+ 
+               
+                               <h2 id="conformant" name="conformant">Conformant</h2>
+
+<p class="figure">Figure: Conformant container</p>
+<p align="center"><img alt="Conformant container" src="../../images/conformant.png" /></p>
+
+<p>A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.</p>
+
+<h3>Creating a Conformant</h3>
+<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+</pre>
+
+<h3>Adding Content to the Conformant</h3>
+<p>To add content to the conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
+<pre class="prettyprint">elm_object_content_set(conformant, main_view);
+</pre>
+
+<h3>Signals</h3>
+<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
+<ul>
+<li>&quot;virtualkeypad,state,on&quot;: The virtual keyboard has been switched on.</li>
+<li>&quot;virtualkeypad,state,off&quot;: The virtual keyboard has been switched off.</li>
+<li>&quot;virtualkeypad,size,changed&quot;: The virtual keyboard size has changed.</li>
+<li>&quot;clipboard,state,on&quot;: The clipboard has been switched on.</li>
+<li>&quot;clipboard,state,off&quot;: The clipboard has been switched off. </li>
+</ul>
+
+                       
+                               <h2 id="grid" name="grid">Grid</h2>
+
+<p>In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.</p>
+
+<h3>Creating a Grid</h3>
+<p>To create a grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *grid;
+
+grid = elm_grid_add(parent);
+</pre><h3>Adding Items to the Grid</h3>
+<p>To add an item to the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. Provide the X and Y coordinates, and the width and height in the grid as parameters. The following code adds 12 icons in a circle formation:</p>
+<pre class="prettyprint">for (i = 0; i &lt; 12; i++)
+{
+&nbsp;&nbsp;&nbsp;ic = elm_icon_add(grid);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(ic, 128, 128);
+&nbsp;&nbsp;&nbsp;evas_object_show(ic);
+&nbsp;&nbsp;&nbsp;x = 40 * cos(2.0 * M_PI / 12 * i);
+&nbsp;&nbsp;&nbsp;y = 40 * sin(2.0 * M_PI / 12 * i);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, ic,  40 + x,  40 + y,  20 , 20);
+}
+evas_object_show(grid);
+</pre>
+
+<h3>Changing Position and Size</h3>
+<p>To change the position of an item in the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. The first parameter is the item you want to move, and the following parameters are the same as for the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span> function.</p>
+<p>To change the size of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span> function. You can set the new width and height for the grid. The position and size of the items in the grid are changed accordingly.</p>
+<h3>Clearing the Grid</h3>
+<p>To clear the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_clear()</span> function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function called on each item.</p>
+
+
+                               <h2 id="layout" name="layout">Layout</h2>
+
+<p>A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of a lot of graphics components used in Elementary.</p>
+
+<p>An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see <a href="theme_n.htm">Themes</a>.</p>
+
+<h3 id="container_layout_creating" name="container_layout_creating">Creating a Layout</h3>
+
+<p>To create a new layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *layout;
+
+layout = elm_layout_add(parent);
+</pre>
+<p>In Tizen, the layout component is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
+<ul>
+<li>application/default: This layout can be used to display content inside a window.</li>
+<li>drawer/panel: This layout can be used to create a 2-panel view.</li>
+<li>nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.</li>
+</ul>
+<p>To use the application/default layout:</p>
+<pre class="prettyprint">Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
+</pre>
+
+<h3 id="container_layout_inserting_objects" name="container_layout_inserting_objects">Adding Objects to the Layout</h3>
+<p>To add an Evas object to the layout:</p>
+<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot; view);
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.</p>
+<p>The drawer/panel layout can display 2 different views, the background and the main content:</p>
+<pre class="prettyprint">Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+</pre>
+<p>To swallow an object inside the main content and background views:</p>
+<pre class="prettyprint">elm_object_part_content_set(ly, &quot;elm.swallow.content&quot;, main_view);
+elm_object_part_content_set(ly, &quot;elm.swallow.background&quot;, background);
+</pre>
+<p>The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part. There are two different texts zones: <span style="font-family: Courier New,Courier,monospace">elm.text</span> and <span style="font-family: Courier New,Courier,monospace">elm.help.text</span>. To change the text:</p>
+<pre class="prettyprint">elm_object_part_text_set(ly, &quot;elm.text&quot;, &quot;Hi All :)&quot;);
+elm_object_part_text_set(ly, &quot;elm.help.text&quot;, &quot;Hi All :)&quot;);
+</pre>
+<h3 id="container_layout_styles" name="container_layout_styles">Using Layout Themes</h3>
+<p>The layout component supports the following predefined default themes:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content</span>: For applications with a toolbar and main content area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back</span>: For applications with a toolbar, main content area (with a back button), and title area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back-next</span>: For applications with a toolbar, main content area (with back and next buttons), and title area.</li>
+<li><span style="font-family: Courier New,Courier,monospace">content-back</span>: For applications with main content (with a back button) and title areas.</li>
+<li><span style="font-family: Courier New,Courier,monospace">content-back-next</span>: For applications with main content (with back and next buttons) and title areas.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-vbox</span>: For applications with a toolbar and main content area as a vertical box.</li>
+<li><span style="font-family: Courier New,Courier,monospace">toolbar-table</span>: For applications with a toolbar and main content area as a table.</li>
+</ul>
+<p>To set a theme to the layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function.</p>
+
+
+                               <h2 id="mapbuf" name="mapbuf">Mapbuf</h2>
+
+<p class="figure">Figure: Mapbuf hierarchy</p>
+<p align="center"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
+
+<p>A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.</p>
+
+<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.</p>
+
+<p>The mapbuf component inherits all the functions of the container class.</p>
+
+<h3>Creating a Mapbuf</h3>
+<p>To create a mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *mapbuf, *parent, *content;
+
+// Creating a mapbuf
+mapbuf = elm_mapbuf_add(parent);
+</pre>
+<h3>Adding Content to the Mapbuf</h3>
+<p>To add content to the mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the &quot;default&quot; part:</p>
+<pre class="prettyprint">elm_object_content_set(mapbuf, content);</pre>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Calling <span style="font-family: Courier New,Courier,monospace">elm_object_content_set(mapbuf, content)</span> is equivalent to calling <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(mapbuf, "default", content)</span>.</td>
+    </tr>
+   </tbody>
+  </table>
+
+
+<p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
+<pre class="prettyprint">elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
+elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
+</pre>
+
+<h3>Activating the Mapbuf</h3>
+<p>Finally, to use the mapbuf component, you must activate it:</p>
+<pre class="prettyprint">elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);</pre>
+
+<h3>Signals</h3>
+<p>The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.</p>
+
+                       
+                               <h2 id="naviframe" name="naviframe">Naviframe</h2>
+
+<p>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.</p>
+
+<h3>Creating a Naviframe</h3>
+<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *nav;
+
+nav = elm_naviframe_add(parent);
+</pre>
+<h3>Adding and Deleting Views</h3>
+<p>The naviframe is a stack of views. A new view is always pushed to the top of the stack. The top-most view is deleted by popping it.</p>
+<p>To add a new view to the naviframe:</p>
+<pre class="prettyprint">Elm_Object_Item *nav_it;
+
+nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
+// In Tizen 2.3, the back button is not supported in the naviframe 
+</pre>
+<p>When you push a new view to the stack, you receive an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> for the view. You can use this item to modify the view.</p>
+<p>To pop and delete the top-most view:</p>
+<pre class="prettyprint">elm_naviframe_item_pop(nav);
+</pre>
+
+<h3>Adding Fixed Content</h3>
+<p>The naviframe can also display fixed content on top of the current (top-most) view. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function to set this content. Use the following part names to specify the location of the content:</p>
+<ul>
+<li>&quot;default&quot;: The main content area of the current view.</li>
+<li>&quot;icon&quot;: An icon in the title area of the current view.</li>
+<li>&quot;title_left_btn&quot;: A button on the left side of the naviframe.</li>
+<li>&quot;title_right_btn&quot;: A button on the right side of the naviframe.</li>
+</ul>
+<p>For example, to add a button to the naviframe:</p>
+<pre class="prettyprint">btn = elm_button_add(nav);
+elm_object_style_set(btn, &quot;naviframe/title_cancel&quot;);
+elm_object_item_part_content_set(nav_it, &quot;title_left_btn&quot;, btn);
+</pre>
+<p>To set the title labels of the naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function and specify one of the following label locations:</p>
+<ul>
+<li>&quot;default&quot;: Sets the title label in the title area of the current view.</li>
+<li>&quot;subtitle&quot;: Sets the subtitle label in the title area of the current view.</li>
+</ul>
+<h3>Signals</h3>
+<p>The naviframe emits the following signals:</p>
+<ul>
+<li>&quot;transition,finished&quot;: The transition has finished changing the view.</li>
+<li>&quot;title,transition,finished&quot;: The title area transition has finished  changing the state of the title.</li>
+<li>&quot;title,clicked&quot;: The user has clicked the title area.</li>
+</ul>
+
+
+               
+                               <h2 id="panes" name="panes">Panes in Mobile Applications</h2>
+
+<p class="figure">Figure: Panes component</p>
+<p align="center"><img alt="Panes component" src="../../images/panes.png" /></p>
+
+<p>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</p>
+
+<h3>Creating Panes</h3>
+<p>To create a panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *panes;
+
+panes = elm_panes_add(parent);
+</pre>
+
+<h3>Adding Content to the Panes</h3>
+<p>To add content to the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. The following code adds an object to the left pane:</p>
+<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, obj);
+</pre>
+
+<h3>Setting Panes Options</h3>
+<p>To set the orientation of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
+
+<p>To set the size of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions.</p>
+
+<h3>Signals</h3>
+<p>The panes component emits the following signals:</p>
+<ul>
+<li>&quot;press&quot;: The panes component has been pressed (but the press has not been released yet).</li>
+<li>&quot;unpress&quot;: The press has been released.</li>
+<li>&quot;clicked&quot;: The panes component has been clicked.</li>
+<li>&quot;clicked,double&quot;: The panes component has been double-clicked.</li>
+</ul>
+
+               
+                               <h2 id="scroller" name="scroller">Scroller</h2>
+
+<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.</p>
+<p>The scroller component inherits all the functions of the <a href="#layout">Layout</a>.</p>
+<h3>Creating a Scroller</h3>
+<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *scroller;
+
+scroller = elm_scroller_add(parent);
+</pre>
+<h3>Adding Objects to the Scroller</h3>
+<p>To add an object to the scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
+<pre class="prettyprint">Evas_Object *image;
+
+image = elm_image_add(parent);
+elm_image_file_set(image, &quot;image.png&quot;, NULL);
+evas_object_show(image);
+evas_object_size_hint_min_set(image, 2560, 1600);
+elm_object_content_set(scroller, image);
+</pre>
+<p>In the above code, we set a minimum size of 2560 x 1600 pixels for the image. The scroller is smaller than the image, so you can scroll across the image.</p>
+<p>If you want to be informed when the user begins scrolling the image, use the following code:</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(scroller, &quot;scroll,drag,start&quot;, _scroll_start_cb, NULL);
+
+// Callback function for the &quot;animate,begin&quot; signal
+// This callback is called when the user begins scrolling the image
+void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Scroll starts\n&quot;);
+}</pre>
+
+<h3>Managing the Properties of the Scroller</h3>
+<p>When scrolling content, the scroller may &quot;bounce&quot; when reaching the edge of the content. This is a visual way of indicating that there is no more content to scroll in that direction. Bounce is enabled by default for both axes. To enable or disable the bounce for either or both axes, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_bounce_set()</span> function. The following code disables the bounce for the horizontal axis and enables it for the vertical axis:</p>
+
+<pre class="prettyprint">elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
+</pre>
+<p>The scroller can limit the scrolling to &quot;pages&quot;. In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single "page" at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
+
+<h3>Signals</h3>
+
+<p>The scroller emits the following signals, which you can catch in your application:</p>
+
+<ul>
+<li>&quot;edge,left&quot;: The left edge of the content has been reached.</li>
+<li>&quot;edge,right&quot;: The right edge of the content has been reached.</li>
+<li>&quot;edge,top&quot;: The top edge of the content has been reached.</li>
+<li>&quot;edge,bottom&quot;: The bottom edge of the content has been reached.</li>
+<li>&quot;scroll&quot;: The content has been scrolled (moved).</li>
+<li>&quot;scroll,anim,start&quot;: The scrolling animation has started.</li>
+<li>&quot;scroll,anim,stop&quot;: The scrolling animation has stopped.</li>
+<li>&quot;scroll,drag,start&quot;: Dragging the contents has started.</li>
+<li>&quot;scroll,drag,stop&quot;: Dragging the contents has stopped.</li>
+<li>&quot;vbar,drag&quot;: The vertical scroll bar has been dragged.</li>
+<li>&quot;vbar,press&quot;: The vertical scroll bar has been pressed.</li>
+<li>&quot;vbar,unpress&quot;: The vertical scroll bar has been unpressed.</li>
+<li>&quot;hbar,drag&quot;: The horizontal scroll bar has been dragged.</li>
+<li>&quot;hbar,press&quot;: The horizontal scroll bar has been pressed.</li>
+<li>&quot;hbar,unpress&quot;: The horizontal scroll bar has been unpressed.</li>
+<li>&quot;scroll,page,changed&quot;: The visible page has changed.</li>
+</ul>
+
+<h3>Example</h3>
+<p>A good example of the scroller is a picture slideshow: we add images to the scroller and limit the scrolling to pages (one picture at a time). In the following code, we disable the scroll bars for both axes, limit the scrolling to pages by using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_scroll_limit_set()</span> function, and lock the scrolling on the Y axis by using the <span style="font-family: Courier New,Courier,monospace">elm_object_scroll_lock_y_set()</span> function:</p>
+<pre class="prettyprint">elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
+elm_scroller_page_scroll_limit_set(scroller, 1, 0);
+elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
+</pre>
+<p>We create a horizontal box, which will contain all the images, and which itself will be contained by the scroller:</p>
+<pre class="prettyprint">box = elm_box_add(scroller);
+elm_box_horizontal_set(box, EINA_TRUE);
+elm_object_content_set(scroller, box);
+evas_object_show(box);
+</pre>
+<p>We then create all the images and add them to the horizontal box:</p>
+<pre class="prettyprint">img = elm_image_add(scroller);
+snprintf(buf, sizeof(buf), IMAGE_DIR&quot;/%d.jpg&quot;, i);
+elm_image_file_set(img, buf, NULL);
+evas_object_show(img);
+pages = eina_list_append(pages, img);
+elm_box_pack_end(box, img);
+</pre>
+<p>We store references to the images in an <span style="font-family: Courier New,Courier,monospace">eina_list</span> for easy retrieval later.</p>
+<p>Finally, we display the first page of the scroller:</p>
+<pre class="prettyprint">elm_scroller_page_show(scroller, 0, 0);
+</pre>
+<p>The size of the scroller depends on the size of the parent. When the parent changes, for example when the window is resized or rotated, the scroller is also resized. Since we need to be informed when the scroller is resized, we add a callback on the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span> event for the scroller:</p>
+<pre class="prettyprint">evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);</pre>
+<p>The callback retrieves the new size of the scroller by using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function on the object pointer. The pointer is relative to the object that has been resized, which in our case is the scroller itself. We can then iterate through the images of the scroller and set the minimum size to fit the scroller size:</p>
+<pre class="prettyprint">EINA_LIST_FOREACH(images, l, page)
+{
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(page, w, h);
+}
+</pre>
+<p>Finally, we set the page size of the scroller to match the scroller size and display the first page:</p>
+<pre class="prettyprint">elm_scroller_page_size_set(obj, w, h);
+elm_scroller_page_show(obj, 0, 0);</pre>
+
+                               <h2 id="table" name="table">Table</h2>
+
+<p>A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).</p>
+
+<h3>Creating a Table</h3>
+
+<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *table;
+table = elm_table_add(parent);</pre>
+
+<h3>Adding Items to the Table</h3>
+
+<p>Items are added to the table with the <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function. This function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan). If we want to create an icon that takes 3 columns and rows and a button that only takes 1 row and column, the code will look like this:</p>
+<pre class="prettyprint">ic = elm_icon_add(table);
+elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
+evas_object_show(ic);
+elm_table_pack(table, ic, 0, 0, 3, 3);
+
+btn = elm_button_add(table);
+elm_object_text_set(btn, &quot;Click me i'm famous&quot;);
+evas_object_show(btn);
+elm_table_pack(table, btn, 3, 1, 1, 1);
+evas_object_show(table);
+</pre>
+
+<h3>Managing the Items</h3>
+
+<p>If you want to change the position of the item after adding it, use the <span style="font-family: Courier New,Courier,monospace">elm_table_pack_set()</span> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
+
+<p>To add padding around the item, use the <span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span> function. The second parameter is the padding between columns, and the third parameter is the padding between rows:</p>
+<pre class="prettyprint">elm_table_padding_set(table, 10, 10);</pre>
+
+<p>To change the alignment and size of an item, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint</span> parameters. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
+<pre class="prettyprint">elm_table_homogeneous_set(table, EINA_TRUE);
+</pre>
+
+<h3>Clearing the Table</h3>
+
+<p>To clear the table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted. The <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function will be called on each item.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/native/efl/core_loop_n.htm b/org.tizen.ui.guides/html/native/efl/core_loop_n.htm
new file mode 100755 (executable)
index 0000000..fcd6f6d
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/core_loop_n.htm
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Core Loop and OS Interfacing: Handling the Main Loop and Threads</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>\r
+        </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+   \r
+   <h1>Core Loop and OS Interfacing: Handling the Main Loop and Threads</h1>\r
+ <p>The Ecore library provides convenience functions, which allow you to manage the <a href="main_loop_n.htm">application main loop</a> and <a href="threads_n.htm">threading</a>.</p>\r
+  \r
+<p>Tizen applications developed with EFL use the EDA (Event-driven Architecture) pattern. In EDA, applications reiterate the routine that checks input events, processes the events, and then displays the outputs. The main loop is the entity handling this sequence. It is the heart of any GUI based on EDA.</p>\r
+\r
+<p>Most applications start and end the main loop, which is used in special situations, such as propagation of events to UI components for handling and updating application appearance and state. That guarantees the delivery of all events received from low-level input devices and provides the accurate and speedy render event loop for synchronizing the application UI with events.</p>\r
+\r
+<p>The Ecore library provides main loop abstraction with a clean and tiny event loop library. Applications mainly deal with file descriptors handling, event handling, and timer handling from the beginning of the main loop.</p>\r
+\r
+<p>In addition, Ecore provides several modules related to, for example, Audio, Cocoa, Connection, Drm, FrameBuffer, Input, IPC, Wayland, Win32, and X11 with convenient methods to communicate with underlying operating systems, such as Linux, Windows&reg;, or Mac OS&reg; X.</p>\r
+\r
+<p>There are 2 types of threads in Tizen applications:</p>\r
+<ul>\r
+<li>Main thread that contains the main loop</li>\r
+<li>Worker threads that support concurrent processing. In parallel processing, applications must keep the GUI updating while processing the data related to the UI.</li>\r
+</ul>\r
+\r
+<p>The Ecore library provides these concurrent processing mechanisms through Ecore threads. An Ecore thread is not a simple wrapper for standard POSIX threads. It is not meant to be used to run parallel tasks throughout the entire duration of the application, especially when these tasks are performance-critical. Ecore manages these tasks using a pool of threads based on system configuration, such as the number of processors the system has, and the maximum amount of concurrent threads set for the application.</p>\r
+\r
+<table class="note">\r
+    <tbody>\r
+        <tr>\r
+            <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+   \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/data_types_n.htm b/org.tizen.ui.guides/html/native/efl/data_types_n.htm
new file mode 100755 (executable)
index 0000000..f3dc7e0
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/data_types_n.htm
@@ -0,0 +1,1764 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Data Types</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">      
+                        <li><a href="#iterate">Iterator Functions</a></li>
+                        <li><a href="#string">Strings</a></li>
+                        <li><a href="#array">Arrays</a></li>
+                        <li><a href="#hash">Hash Tables</a></li>
+                        <li><a href="#list">Lists</a></li>
+                        <li><a href="#generic">Generic Value</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
+               </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Data Types</h1>
+
+  <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types:</p>
+
+<ul>
+<li><a href="#inline">Inline Array</a>: standard array of inlined members</li>
+<li><a href="#array">Array</a>: standard array of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#hash">Hash Table</a>: standard hash of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#inlist">Inline List</a>: list with nodes inlined into the user type</li>
+<li>Compact List</li>
+<li><a href="#list">List</a>: standard list of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li><a href="#iterate">Iterator Functions</a></li>
+<li>Sparse Matrix: sparse matrix of <span style="font-family: Courier New,Courier,monospace;">void*</span> data</li>
+<li>Red-Black tree: red-black tree with nodes inlined into the user type</li>
+<li><a href="#buffer">String Buffer</a>: mutable string to prepend, insert, or append strings to a buffer</li>
+<li><a href="#share">Stringshare</a>: shares read-only string references</li>
+<li>Tiler split: merges and navigates into 2D tiled regions</li>
+<li>Trash: container of unused but allocated data</li>
+<li><a href="#generic">Generic Value Storage</a>: container for generic value storage and access</li>
+<li>Data Model API: container for data with a user-defined hierarchy or structure</li>
+</ul>
+
+  
+<h2 id="iterate" name="iterate">Iterator Functions</h2>
+<p>Eina provides a set of iterator functions to manipulate data types, such as arrays.</p>
+<p>These functions allow access to container elements in a generic way, without knowing which container is used (similar to iterators in the C++ STL). Iterators only allow sequential access (that is, from one element to the next one). For random access, Eina provides accessor functions.</p>
+<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. Note that all iterators, regardless of the container type, are always deleted with the same <span style="font-family: Courier New,Courier,monospace">eina_iterator_free()</span> function.</p>
+<p>To get the data and iterate, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_next()</span> function. To call a function on every single element of a container, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_foreach()</span> function.</p>
+<p>In addition to iterator functions, each data type also owns a set of macros that provide the iterators, such as <span style="font-family: Courier New,Courier,monospace">FOREACH</span> or <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p>
+
+<h2 id="string" name="string">Strings</h2>
+
+<h3 id="share" name="share">Stringshare</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> data type functions allow you to store a single copy of a string and use it in multiple places throughout your program. This way you can save a lot of strings with less memory. It improves string creation and destruction speed, reduces memory use, and decreases memory fragmentation.</p>
+<p>With this data type you can reduce the number of duplicated strings kept in memory. It is common for the same strings to be dynamically allocated repeatedly between applications and libraries, especially in circumstances where you can have multiple copies of a structure that allocates the string. Rather than duplicating and freeing these strings, request a read-only pointer to an existing string and only incur the overhead of a hash lookup. This can sound like micro-optimizing, but profiling has shown that this can have a significant impact as the number of copies grows.</p>
+
+<p>To manage stringshares:</p>
+<ol>
+<li>To create a stringshare, declare a string variable and call the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_add()</span> function:
+<pre class="prettyprint">
+const char *mystr;
+const char *prologue = &quot;Enlightenment is not just a window manager for Linux/X11 and others&quot;
+
+mystr = eina_stringshare_add(prologue);
+</pre></li>
+
+<li>To retrieve or modify the string data:
+<ul>
+<li>Retrieve a string for use in a program from a format string using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf()</span> function. If you have a &quot;format&quot; string to pass to a function like <span style="font-family: Courier New,Courier,monospace">printf</span>, you can store it as a stringshare as well.
+<p>The following example produces &quot;1 desktop manager to rule them all&quot;.</p>
+<pre class="prettyprint">
+const char *myfmtstr = &quot;%d desktop manager to rule them all&quot;;
+const char *str;
+
+str = eina_stringshare_printf(myfmtstr, 1);
+
+print(str)
+</pre>
+</li>
+
+<li>Replace the value of a stringshare with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace()</span> function. Pass the pointer address and the new value to the function.
+<pre class="prettyprint">
+eina_stringshare_replace(&amp;str,&quot;One desktop manager to rule them all&quot;);
+</pre>
+</li>
+
+<li>Retrieve the length of the stringshare value with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen()</span> function.
+<pre class="prettyprint">
+printf(&quot;length: %d\n&quot;, eina_stringshare_strlen(str));
+</pre>
+</li>
+</ul>
+</li>
+<li>When the string is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_del()</span> function:
+<pre class="prettyprint">
+eina_stringshare_del(mystr);
+</pre>
+</li>
+</ol>
+
+
+
+<h3 id="buffer" name="buffer">String Buffer</h3>
+<p>The string buffer data type is designed to be a mutable string, allowing you to append, prepend or insert a string to a buffer. It allows easy handling of buffers in your applications.</p>
+<p>To manage string buffers:</p>
+<ol>
+<li>Initialize the <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> instance and create the buffer:
+<pre class="prettyprint">
+Eina_Strbuf *buf;
+mybuffer = eina_strbuf_new();
+</pre>
+</li>
+<li>Manage the buffer content:
+<ul>
+<li>To append characters to the buffer:
+<ul>
+<li>
+<p>For basic strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append()</span> function:</p>
+<pre class="prettyprint">
+eina_strbuf_append(mybuffer, &quot;This is my string.&quot;);
+</pre>
+</li>
+<li>To append 1 character to your buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_char()</span> function. You can also append a sized string to the buffer using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_length()</span> function.
+<pre class="prettyprint">
+eina_strbuf_append_length(mybuffer, &quot;Buffe&quot;, 5);
+eina_strbuf_append_char(mybuffer, &#39;r&#39;);
+</pre>
+</li>
+<li>To handle &quot;printf&quot; format strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_printf()</span> function to add formatted strings to the buffer:
+<pre class="prettyprint">
+eina_strbuf_append_printf(buf, &quot;%s%c&quot;, &quot;buffe&quot;, &#39;r&#39;);
+</pre>
+</li>
+</ul>
+</li>
+
+<li>To remove characters from one position to another, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_remove()</span> function. The first parameter is the buffer, the second is the start position of the characters you want to delete, and the last the end position.
+<p>This example removes the first 19 characters of the buffer:</p>
+<pre class="prettyprint">
+eina_strbuf_remove(buf, 0, 18);
+</pre>
+</li>
+
+<li>To replace characters: 
+
+<ul><li>
+<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace()</span> replaces a specific occurrence of a given string in the buffer with another string.</li>
+<li>
+<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all()</span> replaces all occurrences of a given string in the buffer with another string.
+</li>
+</ul>
+<pre class="prettyprint">
+eina_strbuf_append(mybuffer, &quot;buffer buffer buffer&quot;);
+
+// Replacing one occurrence of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot;
+eina_strbuf_replace(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;, 1);
+
+// Replacing all the occurrences of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot;
+eina_strbuf_replace_all(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;);
+
+// Replacing all the occurrences of &quot;B-U-F-F-E-R&quot; by &quot;Buffer&quot;
+eina_strbuf_replace_all(mybuffer, &quot;B-U-F-F-E-R&quot;, &quot;Buffer&quot;);
+</pre>
+</li>
+<li>To insert a string at the specified position, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert()</span> function. Use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert_printf()</span> function with formatted strings.
+<pre class="prettyprint">
+eina_strbuf_insert(mybuffer, &quot;More buffer&quot;, 10);
+
+// Using eina_strbuf_length_get to get the buffer length
+eina_strbuf_insert_printf(buf, &quot; %s: %d&quot;, 6, &quot;length&quot;, eina_strbuf_length_get(buf));
+</pre>
+</li>
+
+<li>To get the complete length of the string and the buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_get()</span> and <span style="font-family: Courier New,Courier,monospace">eina_strbuf_length_get()</span> functions:
+<pre class="prettyprint">
+printf(&quot;%s : %d\n&quot;, eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
+</pre>
+</li>
+</ul>
+</li>
+
+<li>When no longer needed, free the buffer with the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_free()</span> function. You can also free the content of <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> without freeing the buffer itself using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_free()</span> function.
+<pre class="prettyprint">
+eina_strbuf_free(mybuffer);
+</pre>
+</li>
+</ol>
+
+<h2 id="array" name="array">Arrays</h2>
+<p>An array is a data type which describes an ordered collection of values. The values are accessed by their index. </p>
+<pre class="prettyprint">
+INDEX | VALUE
+--------------
+0     | value0
+1     | value1
+2     | value2
+3     | value3
+4     | value4
+5     | value5
+6     | value6
+7     | value7
+</pre>
+<p>Eina provides 2 array types: the classic array and an inline array.</p>
+
+<h3>Creating and Destroying a Classic Array</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function creates a new array. You can store strings or objects in the created array. The function returns a new array, or if memory allocation fails, <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function defines the size of the array allocation step. For example, if you set it to 4, the function returns an array of 4 elements and the next time you grow the array it grows by 4 elements. Unless you have pushed 4 elements inside, it does not grow. But once you add the 5th element, it grows again and becomes an array of 8 elements. The allocation step feature is very useful for optimizing performance, and it also reduces memory fragmentation by having a size that fits the array usage. If you set the step to 0, the function sets a default safe value.</p>
+
+<p>To create an array to store strings:</p>
+<ol>
+<li>Create the array:
+<pre class="prettyprint">
+// Strings to store in the array 
+const char* strings[] = 
+{
+&nbsp;&nbsp;&nbsp;&quot;helo&quot;, &quot;hera&quot;, &quot;starbuck&quot;, &quot;kat&quot;, &quot;boomer&quot;,
+&nbsp;&nbsp;&nbsp;&quot;hotdog&quot;, &quot;longshot&quot;, &quot;jammer&quot;, &quot;crashdown&quot;, &quot;hardball&quot;,
+&nbsp;&nbsp;&nbsp;&quot;duck&quot;, &quot;racetrack&quot;, &quot;apolo&quot;, &quot;husker&quot;, &quot;freaker&quot;,
+&nbsp;&nbsp;&nbsp;&quot;skulls&quot;, &quot;bulldog&quot;, &quot;flat top&quot;, &quot;hammerhead&quot;, &quot;gonzo&quot;
+};
+// Declaring the array (type Eina_Array)
+Eina_Array *array;
+unsigned int i;
+
+// Creating the array
+array = eina_array_new(20);
+
+// Inserting elements in the array
+for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
+</pre>
+</li>
+<li>To change the allocation step, use the <span style="font-family: Courier New,Courier,monospace">eina_array_step_set()</span> function:
+<ul><li>The first parameter is the array you want to change.</li>
+<li>The second parameter is the size of that specific array (retrieved with the <span style="font-family: Courier New,Courier,monospace">sizeof()</span> function).</li>
+<li>The last parameter is the new step size.</li></ul>
+<p>In this example, the array step changes from 20 to 30.</p>
+<pre class="prettyprint">
+eina_array_step_set(array, sizeof(*array), 30);
+</pre>
+</li>
+<li>When no longer used, use the <span style="font-family: Courier New,Courier,monospace">eina_array_free()</span> function to free the array. It first calls the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function and frees the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, use a <span style="font-family: Courier New,Courier,monospace">while</span> statement with the <span style="font-family: Courier New,Courier,monospace">eina_array_pop</span> function.
+<pre class="prettyprint">
+// Freeing the array elements
+while (eina_array_count(array))
+&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
+
+// Freeing the array itself
+eina_array_free(array);
+</pre>
+</li>
+</ol>
+
+<h3>Modifying Classic Array Content</h3>
+
+<p>To modify classic array content:</p>
+<ul>
+<li>To set the data of an element, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_set()</span> function. The first parameter is the array, the second is the index of the element you want to set, and the last one is the data. You must first get the related pointer if you need to free it, as this function replaces the previously held data. Be careful, as there is no array or index check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the application can crash.
+<pre class="prettyprint">
+free(eina_array_data_get(array, 0));
+eina_array_data_set(array, 0, strdup(strings[3]);
+</pre>
+</li>
+<li>To add elements to the end of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_push()</span> function. The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The first parameter is the array to store the element, the second one is the data you want to store. If you store strings, remember to allocate the memory first. The example uses the <span style="font-family: Courier New,Courier,monospace">strdup</span> function to duplicate the string contained in <span style="font-family: Courier New,Courier,monospace">strings[]</span>. This function allocates the memory of the returned string, so you do not have to do it yourself.
+<pre class="prettyprint">
+for (i = 0; i &lt; 20; i++)
+&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
+</pre>
+</li>
+
+<li>To remove the last element of an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_pop()</span> function. It takes the array as a parameter, and if the operation is successful, returns a pointer to the data of the removed element.
+<pre class="prettyprint">
+while (eina_array_count(array))
+&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
+</pre>
+</li>
+
+<li>To rebuild the array by specifying the data to be kept, use the <span style="font-family: Courier New,Courier,monospace">eina_array_remove()</span> function:
+<ul><li>The first parameter is the array to be changed.</li>
+<li>The second parameter is the function which selects the data to keep in the rebuilt array.</li>
+<li>The last parameter is the data to pass to the selector function defined as the second parameter.</li></ul>
+<p>The selector function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the element stays, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it has to be removed.</p>
+<p>The following example shows how to remove all the elements of the array that are longer than 5.</p>
+<pre class="prettyprint">
+// Selector function 
+Eina_Bool keep(void *data, void *gdata)
+{
+&nbsp;&nbsp;&nbsp;if (strlen((const char*)data) &lt;= 5)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int remove_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;Eina_Array_Iterator iterator;
+&nbsp;&nbsp;&nbsp;const char *item;
+&nbsp;&nbsp;&nbsp;unsigned int i;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating an array
+
+&nbsp;&nbsp;&nbsp;// Removing the undesired elements 
+&nbsp;&nbsp;&nbsp;eina_array_remove(array, keep, NULL);
+
+&nbsp;&nbsp;&nbsp;// Flushing and freeing the array
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+<li>To completely wipe an array out, use the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function. This function sets the count and total members of an array to 0, and frees and sets its data members to <span style="font-family: Courier New,Courier,monospace">NULL</span>. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash. The only parameter of this function is a pointer to the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> array you want to flush.
+<pre class="prettyprint">
+eina_array_flush(array);
+</pre>
+</li>
+<li>To empty an array quickly, use the <span style="font-family: Courier New,Courier,monospace">eina_array_clean()</span> function. This function sets the counting of members in the array to 0. It does not free any space so you have to use it carefully. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash.
+<pre class="prettyprint">
+eina_array_clean(array);
+</pre>
+</li>
+</ul>
+
+<h3>Accessing Classic Array Data</h3>
+
+<p>To access classic array data:</p>
+<ul>
+<li>To access the data in the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_get()</span> function with the array and the index of the element you want to get. The function returns a pointer to the data.
+<pre class="prettyprint">
+// Getting the data of the first element 
+char *mydata;
+mydata = eina_array_data_get(array, 0);
+</pre>
+</li>
+
+
+<li>To get the number of elements in an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_count()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function.
+<p>The function returns the number of elements.</p>
+<pre class="prettyprint">
+unsigned int nb_elm;
+nb_elm = eina_array_count(array);
+</pre>
+</li>
+
+<li>To iterate through an array, you can use various methods:
+<ul>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> iterator called <span style="font-family: Courier New,Courier,monospace">ITER_NEXT</span>.
+<p>You can use the iterator by calling the macro <span style="font-family: Courier New,Courier,monospace">EINA_ARRAY_ITER_NEXT()</span>. It takes the array to iterate as the first parameter, a counter for the current index during the iteration, and a variable of the same type as the item data and an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>. To use it, declare an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>, an <span style="font-family: Courier New,Courier,monospace">int</span> counter, and, for example, a <span style="font-family: Courier New,Courier,monospace">char *</span> item if your array contains any strings.</p>
+<pre class="prettyprint">
+Eina_Array_Iterator iterator;
+const char *item;
+unsigned int i;
+
+EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
+&nbsp;&nbsp;&nbsp;printf(&quot;item #%d: %s\n&quot;, i, item);
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function to iterate over the array.
+<p>The first parameter is the array to iterate, the second is a callback function which determines whether the iteration can continue,and the last is the data passed to the callback function.</p>
+<p>To iterate over the array and to print the data of each array element:</p>
+<pre class="prettyprint">
+// Callback function 
+static Eina_Bool
+elm_print(const void *container, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char *)data);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int iterating_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;unsigned int i;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating an array
+
+&nbsp;&nbsp;&nbsp;// Iterating over the array and calling elm_print on each element
+&nbsp;&nbsp;&nbsp;eina_array_foreach(array, elm_print, NULL);
+
+&nbsp;&nbsp;&nbsp;// Freeing the element data and array
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_iterator_new()</span> function to create an iterator for the array. <p>The function returns a newly allocated iterator associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the count of the array members is less than or equal to 0, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid iterator is returned.</p>
+<p>Pass to this function the array for which you want to create a new iterator. The iterator is used to run a sequential walk through the array, just like the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function.</p>
+<p>To create an iterator and use it to print the data of each array element:</p>
+<pre class="prettyprint">
+static Eina_Bool
+print_one(const void *container, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)data);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int new_iterator()
+{
+&nbsp;&nbsp;&nbsp;Eina_Array *arra;
+&nbsp;&nbsp;&nbsp;Eina_Iterator *it;
+&nbsp;&nbsp;&nbsp;unsigned short int i;
+&nbsp;&nbsp;&nbsp;void *uninteresting;
+&nbsp;&nbsp;&nbsp;Eina_Bool rt;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating an array
+
+&nbsp;&nbsp;&nbsp;it = eina_array_iterator_new(array);
+
+&nbsp;&nbsp;&nbsp;it = eina_iterator_next(it, &amp;uninteresting);
+&nbsp;&nbsp;&nbsp;eina_iterator_foreach(it, print_one, NULL);
+&nbsp;&nbsp;&nbsp;eina_iterator_free(it);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_accessor_new()</span> function to get random access to the array elements. 
+<p>The function returns a newly allocated accessor associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the counting of array members is less than or equal to 0, this function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid accessor is returned.</p>
+<p>To use the accessor to retrieve and print the data of every other array element:</p>
+<pre class="prettyprint">
+int random_access()
+{
+&nbsp;&nbsp;&nbsp;// Declaration of the array 
+&nbsp;&nbsp;&nbsp;Eina_Array *array;
+&nbsp;&nbsp;&nbsp;// Declaration of the accessor
+&nbsp;&nbsp;&nbsp;Eina_Accessor *acc;
+
+&nbsp;&nbsp;&nbsp;// Generic counter
+&nbsp;&nbsp;&nbsp;unsigned short int i;
+
+&nbsp;&nbsp;&nbsp;// Variable to put the data retrieved from an array element
+&nbsp;&nbsp;&nbsp;void *data;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating an array
+
+&nbsp;&nbsp;&nbsp;// Creating the array accessor
+&nbsp;&nbsp;&nbsp;acc = eina_array_accessor_new(array);
+
+&nbsp;&nbsp;&nbsp;// Random access to the data of the array elements
+&nbsp;&nbsp;&nbsp;for(i = 1; i &lt; 10; i += 2)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Putting the data in the variable &#39;data&#39;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_accessor_data_get(acc, i, &amp;data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (const char *)data);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Freeing the accessor
+&nbsp;&nbsp;&nbsp;eina_accessor_free(acc);
+
+&nbsp;&nbsp;&nbsp;// Freeing the array
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+
+<h3 id="inline" name="inline">Creating and Destroying an Inline Array</h3>
+
+<p>An inline array is a container that stores the data itself, not the pointers to the data. This means there is no memory fragmentation, and for small data types, such as char, short, and int, it is more memory-efficient. This is because the data is stored in the cache and is faster to access. The bigger the data gets, however, the less likely it is and the less interesting it becomes.</p>
+<p>To create an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function:</p>
+<ul><li>The first parameter is the size of the value. In this example, only the characters are stored, and because of that, only <span style="font-family: Courier New,Courier,monospace">sizeof(char)</span> is passed to the function.</li>
+<li>The second parameter defines the size of the array allocation step. For example, if you set it to 4, the function returns an inline array of 4 elements, and the next time you grow the inline array, it grows by 4 elements and becomes an array of 8 elements. If you set the step to 0, the function sets a default safe value. 
+<p>The step can be changed later on using the <span style="font-family: Courier New,Courier,monospace">eina_inarray_step_set()</span> function.</p></li></ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function returns a pointer to the new <span style="font-family: Courier New,Courier,monospace">Eina_Inarray</span> variable.</p>
+<pre class="prettyprint">
+int inline_array() 
+{
+&nbsp;&nbsp;&nbsp;// Declare an inline array variable of the type Eina_Inarray
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+
+&nbsp;&nbsp;&nbsp;// Create an inline array of &quot;char&quot;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 0);
+
+&nbsp;&nbsp;&nbsp;// When no longer needed, free the array memory
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+<h3>Modifying Inline Array Content</h3>
+
+<p>To modify inline array content:</p>
+<ul>
+<li>
+<p>To add data as the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_push()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to push to the inline array.</p>
+<p>If everything runs fine, the function returns the index of the new element. If something goes wrong, it returns <span style="font-family: Courier New,Courier,monospace">-1</span>.</p>
+<pre class="prettyprint">
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+</pre>
+</li>
+<li>
+<p>To insert data to a given position of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_at()</span> function:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the index of the element you want to add to the inline array.</li>
+<li>The last parameter is a pointer to the content to be added.</li></ul>
+<p>The content of the pointer is copied to the given position in the inline array. All the members from the position to the end of the array are shifted towards the end. If the position is equal to the end of the array, the member is appended. If the position is bigger than the array length, the function fails.</p>
+<pre class="prettyprint">
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;b&#39;;
+eina_inarray_push(iarr, &amp;ch);
+ch = &#39;d&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Adding data on position 3
+ch = &#39;c&#39;;
+eina_inarray_insert_at(iarr, 2, &amp;ch)
+</pre>
+</li>
+<li>
+<p>To insert data with your own position criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function. The only difference between these functions is that the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function assumes that the array is already sorted and consequently optimizes the insertion position by doing a binary search.</p>
+<p>In both functions:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the data you want to push to the inline array.</li>
+<li>The last parameter is the callback comparison function. 
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback function compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function as the second parameter. If data1 is less than data2, -1 must be returned, if it is greater, 1 must be returned, and if they are equal, 0 must be returned.</p></li></ul>
+<p>The following example shows how to insert a value before a greater value:</p>
+<pre class="prettyprint">
+// Defining the comparison function with the position criteria
+Eina_Compare_Cb cmp(const void *a, const void *b)
+{
+&nbsp;&nbsp;&nbsp;return *(int*)a &gt; *(int*)b;
+}
+
+int inline_insert()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;char ch, *ch3;
+&nbsp;&nbsp;&nbsp;int a, *b;
+
+&nbsp;&nbsp;&nbsp;// Creating an inline array
+
+&nbsp;&nbsp;&nbsp;// Adding data to the inline array
+&nbsp;&nbsp;&nbsp;a = 97;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+&nbsp;&nbsp;&nbsp;a = 98;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+&nbsp;&nbsp;&nbsp;a = 100;
+&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
+
+&nbsp;&nbsp;&nbsp;// Inserting data with the criteria
+&nbsp;&nbsp;&nbsp;a = 99;
+&nbsp;&nbsp;&nbsp;eina_inarray_insert_sorted(iarr, &amp;a, cmp);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+}
+</pre>
+</li>
+<li>
+<p>To remove the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop()</span> function. The only parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. This function returns the data removed from the inline array.</p>
+<pre class="prettyprint">
+eina_inarray_pop(iarr);
+</pre>
+</li>
+<li>
+<p>To remove specific data from an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to remove from the inline array.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function finds the data and removes the matching members from the array. The data can be an existing member of an inline array for optimized usage. In other cases, the content is matched using the <span style="font-family: Courier New,Courier,monospace">memcmp()</span> function.</p>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function returns the index of the removed member, or -1 if failed.</p>
+<pre class="prettyprint">
+iarr = eina_inarray_new(sizeof(char), 0);
+
+ch = &#39;a&#39;;
+eina_inarray_push(iarr, &amp;ch);
+
+// Removing data from the array
+eina_inarray_remove(iarr, &amp;ch);
+</pre>
+</li>
+
+<li>
+<p>To remove data from a defined position in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove_at()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the index of the element you want to remove from the inline array.</p>
+<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array&#39;s head.</p>
+<pre class="prettyprint">
+// Removing data from position 2
+eina_inarray_remove_at(iarr, 2);
+</pre>
+</li>
+<li><p>To remove all the elements of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_flush()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function removes every member from the array.</p>
+<pre class="prettyprint">
+eina_inarray_flush(iarr);
+</pre>
+</li>
+
+<li>
+<p>To replace values in the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at()</span> function, which copies the data over the given position:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the index of the element you want to remove from the inline array.</li>
+<li>The last parameter is the data you want to copy in place of the current data.</li></ul>
+<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member&#39;s array using the previously defined <span style="font-family: Courier New,Courier,monospace">member_size</span>. If the position does not exist, the function fails.</p>
+<pre class="prettyprint">
+// Replacing the member at position 3 
+ch = &#39;d&#39;;
+eina_inarray_replace_at(iarr, 3, &amp;ch);
+</pre>
+</li>
+
+<li>
+<p>To sort an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_sort()</span> function, which applies a quick sorting algorithm to the inline array:</p>
+<ul><li>The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2. 
+<p>data1 and data2 are values contained in the inline array. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
+<pre class="prettyprint">
+static int
+short_cmp(const void *pa, const void *pb)
+{
+&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
+
+&nbsp;&nbsp;&nbsp;return *a - *b;
+}
+
+int sorting_inline_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating the inline array
+
+&nbsp;&nbsp;&nbsp;eina_inarray_sort(array, short_cmp);
+&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
+}
+</pre>
+
+<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
+</li>
+</ul> 
+
+<h3>Accessing Inline Array Data</h3>
+
+<p>To access inline array data:</p>
+<ul>
+<li>
+<p>To search a member in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function that runs a linear walk looking for the given data:</p>
+
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the data used by the callback function to run the comparison.</li>
+<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2.
+<p>data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function as the second parameter. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
+<p>The function returns the member index, or -1 if not found.</p>
+<pre class="prettyprint">
+Eina_Compare_Cb
+compare(const void *pa, const void *pb)
+{
+&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
+&nbsp;&nbsp;&nbsp;if (*a == *b)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int search_inline_array()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;int elm_index;
+&nbsp;&nbsp;&nbsp;int to_search = 3;
+
+&nbsp;&nbsp;&nbsp;// Creating and populating the inline array
+
+&nbsp;&nbsp;&nbsp;elm_index = eina_inarray_search(array, &amp;to_search, compare);
+&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
+}
+</pre>
+
+<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_search_sorted()</span> function does exactly the same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span>, but uses a binary search for the given data.</p>
+</li>
+
+<li>
+<p>To get the number of elements in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_count()</span>. The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function returns an unsigned <span style="font-family: Courier New,Courier,monospace">int</span>, the number of elements.</p>
+<pre class="prettyprint">
+printf(&quot;Inline array of integers with %d elements:\n&quot;, eina_inarray_count(iarr));
+</pre>
+</li>
+
+<li>To iterate through an inline array, you can use various methods:
+<ul>
+<li><p>You can use the iterator macros for the inline arrays: <span style="font-family: Courier New,Courier,monospace">FOREACH</span> and <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p></li>
+<li>
+<p>To run a linear walk over an array of elements, use the <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_FOREACH()</span> macro. The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>, and the second parameter is the variable into which the current value is put during the walk. The <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_REVERSE_FOREACH()</span> macro does the same thing but starts from the last element.</p>
+
+<p>The following example illustrates the printing of each element and its pointer:</p>
+<pre class="prettyprint">
+iarr = eina_inarray_new(sizeof(char), 0);
+int a, *b;
+
+a = 97;
+eina_inarray_push(iarr, &amp;a);
+a = 98;
+eina_inarray_push(iarr, &amp;a);
+a = 99;
+eina_inarray_push(iarr, &amp;a);
+
+EINA_INARRAY_FOREACH(iarr, b)
+  printf(&quot;int: %d(pointer: %p)\n&quot;, *b, b);
+</pre>
+</li>
+<li>To process the array data, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function, which invokes the given function on each element of the array with the given data:
+<ul><li>The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>.</li>
+<li>The second parameter is the function to run on each element.
+<p>The function must return <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as long as you want to continue iterating. By returning <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, you stop the iteration and make the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function return <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<p>The data given to the function is the pointer to the member itself.</p></li>
+<li>The last parameter is the data passed to the function called on each element.</li></ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if it successfully iterates through all items of the array. Call the function for every given data in the array. This is a safe way to iterate over an array.</p>
+<pre class="prettyprint">
+static Eina_Bool
+array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;short *member = p;
+&nbsp;&nbsp;&nbsp;int *i = user_data;
+&nbsp;&nbsp;&nbsp;(*p)++;
+&nbsp;&nbsp;&nbsp;(*i)++;
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+int inline_array_foreach()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;i = 0;
+&nbsp;&nbsp;&nbsp;eina_inarray_foreach(iarr, array_foreach, &amp;i);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>To remove some elements based on your own criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach_remove()</span> function, which walks through the array and, if the value matches in the callback function, removes the element:
+<ul><li>The first parameter is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the callback function to run on each element.
+<p>The callback function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the value matches, or <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it does not match.</p></li>
+<li>The last parameter is the data passed to the callback function.</li></ul>
+<p>The function returns the number of removed entries or -1 if something goes wrong.</p>
+<pre class="prettyprint">
+static Eina_Bool
+array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;short *member = p;
+&nbsp;&nbsp;&nbsp;int *i = user_data;
+&nbsp;&nbsp;&nbsp;if (*i == *p) 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+
+int inline_array_foreach_remove()
+{
+&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;i = 6;
+&nbsp;&nbsp;&nbsp;eina_inarray_foreach_remove(iarr, array_foreach, &amp;i);
+
+&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+</li>
+</ul>
+</li>
+</ul>
+
+
+<h2 id="hash" name="hash">Hash Tables</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> provides a way to store values in association with a key. For example, if you want to store some tuples into a table, you can do it using the <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> is implemented using an array of &quot;buckets&quot; where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
+
+<h3 id="hash_create" name="hash_create">Creating a Hash Table</h3>
+
+<p>To create the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_new()</span> function:</p>
+<ul>
+<li>The first parameter is the function called when getting the size of the key.</li>
+<li>The second parameter is the function called when comparing the keys.</li>
+<li>The third parameter is the function called when getting the values.</li>
+<li>The fourth parameter is the function called on each value when the hash table is freed, or when an item is deleted from it. <span style="font-family: Courier New,Courier,monospace">NULL</span> can be passed as the callback.</li>
+<li>The last parameter is the size of the buckets.</li>
+</ul>
+<p>When you create an <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> instance, you have to create 4 potentially long callback functions. To make the functions shorter, <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers some predefined functions to create the following kinds of hash tables:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_djb2_new()</span> creates a new hash table using the djb2 algorithm for strings.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> creates a new hash table for use with strings (better with long strings).</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_small_new()</span> creates a new hash table for use with strings with a small bucket size.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_int32_new()</span> and <span style="font-family: Courier New,Courier,monospace">eina_hash_int64_new()</span> create a new hash table for use with 32-bit and 64-bit integers.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_pointer_new()</span> creates a new hash table for use with pointers.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_stringshared_new()</span> creates a new hash table for use with shared strings.</li>
+</ul>
+<p>All these predefined functions require only one parameter, which is the function to free the data you store in the hash table.</p>
+<p>The following example shows how to manage a small phone book using the <span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> function to create the hash table.</p>
+<ol>
+<li><p>Create the phone book structure and some static data:</p>
+<pre class="prettyprint">
+struct _Phone_Entry 
+{
+&nbsp;&nbsp;&nbsp;const char *name; // Full name
+&nbsp;&nbsp;&nbsp;const char *number; // Phone number
+};
+
+typedef struct _Phone_Entry Phone_Entry;
+
+static Phone_Entry _start_entries[] = 
+{
+&nbsp;&nbsp;&nbsp;{ &quot;Wolfgang Amadeus Mozart&quot;, &quot;+01 23 456-78910&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Ludwig van Beethoven&quot;, &quot;+12 34 567-89101&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Richard Georg Strauss&quot;, &quot;+23 45 678-91012&quot; },
+&nbsp;&nbsp;&nbsp;{ &quot;Heitor Villa-Lobos&quot;, &quot;+34 56 789-10123&quot; },
+&nbsp;&nbsp;&nbsp;{ NULL, NULL }
+};
+</pre>
+</li>
+
+<li><p>Create the callback to free the data:</p>
+<pre class="prettyprint">
+static void
+_phone_entry_free_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;free(data);
+}
+</pre>
+<p>The free callback can be changed later using the <span style="font-family: Courier New,Courier,monospace">eina_hash_free_cb_set()</span> function. You need to pass the hash and the new callback function.</p>
+</li>
+
+<li><p>Create and destroy the hash table.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_free_buckets()</span> function frees all hash table buckets. It empties the hash but does not destroy it, and you can still use it for another purpose. When <span style="font-family: Courier New,Courier,monospace">eina_hash_free()</span> is called, the space allocated for the hash is freed.</p>
+<pre class="prettyprint">
+int free_data()
+{
+&nbsp;&nbsp;&nbsp;Eina_Hash *phone_book = NULL;
+&nbsp;&nbsp;&nbsp;phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
+
+&nbsp;&nbsp;&nbsp;// Empty the phone book without destroying it
+&nbsp;&nbsp;&nbsp;eina_hash_free_buckets(phone_book);
+&nbsp;&nbsp;&nbsp;eina_hash_free(phone_book);
+}
+</pre>
+</li>
+</ol>
+
+
+
+
+<h3>Modifying Hash Table Content</h3>
+
+<p>To modify hash table content:</p>
+<ul>
+<li>
+<p>To add some data to a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_add()</span> function. This function takes the hash, the key to access the data, and the data as its parameters.</p>
+<p>The following example shows how to add the initial data declared earlier to the hash:</p>
+<pre class="prettyprint">
+for (i = 0; _start_entries[i].name != NULL; i++)
+{
+&nbsp;&nbsp;&nbsp;eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers various ways to add elements to a hash, such as the <span style="font-family: Courier New,Courier,monospace">eina_hash_direct_add()</span> function, which adds the entry without duplicating the string key. The key is stored in the struct, so this function can be used with <span style="font-family: Courier New,Courier,monospace">eina_stringshare</span> to avoid key data duplication.</p>
+<pre class="prettyprint">
+for (i = 0; _start_entries[i].name != NULL; i++)
+{
+&nbsp;&nbsp;&nbsp;// Allocating memory for the phone entry
+&nbsp;&nbsp;&nbsp;Phone_Entry *e = malloc(sizeof(Phone_Entry));
+
+&nbsp;&nbsp;&nbsp;// Creating an eina_stringshare for the name and the phone number
+&nbsp;&nbsp;&nbsp;e-&gt;name = eina_stringshare_add(_start_entries[i].name);
+&nbsp;&nbsp;&nbsp;e-&gt;number = eina_stringshare_add(_start_entries[i].number);
+
+&nbsp;&nbsp;&nbsp;// Adding the entry to the hash 
+&nbsp;&nbsp;&nbsp;eina_hash_direct_add(phone_book, e-&gt;name, e);
+}
+</pre>
+</li>
+<li>
+<p>To modify an entry, use <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span> function passing the hash, the key of the data to change, and the new data. The function returns the old data on success.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_set()</span> function does the same work as <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span>, but if the entry does not exist, the function creates a new one.</p>
+<pre class="prettyprint">
+char *old_phone = NULL;
+char *phone = NULL;
+// Replace the phone number of Richard Strauss
+old_phone = eina_hash_modify(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-11111&quot;));
+phone = eina_hash_set(phone_book, &quot;Philippe de Magalhães&quot;, strdup(&quot;+33 6 111-11111&quot;));
+eina_hash_set(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-117711&quot;));
+</pre>
+</li>
+<li>
+<p>To change the key associated with the data without freeing and creating a new entry, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_move()</span> function. You only have to pass the hash, the old key, and the new key. If the operation succeeds, the function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, if not, it returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<pre class="prettyprint">
+Eina_Bool res;
+res = eina_hash_move(phone_book, &quot;Philippe de Magalhães&quot;, &quot;Filipe de Magalhães&quot;);
+</pre>
+</li>
+<li>
+<p>To delete entries from a hash table:</p>
+<ul><li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del()</span> function to remove the entry identified by a key or data from the given hash table:
+<pre class="prettyprint">
+Eina_Bool r;
+const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
+r = eina_hash_del(phone_book, entry_name, NULL);
+</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_key()</span> function to remove an entry based on the key:
+<pre class="prettyprint">
+r = eina_hash_del_by_key(phone_book, &quot;Richard Georg Strauss&quot;);
+</pre>
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_data()</span> function to remove an entry based on the data:</p>
+<pre class="prettyprint">
+r = eina_hash_del_by_data(phone_book, &quot;+12 34 567-89101&quot;);
+</pre>
+</li>
+</ul></li></ul>
+
+<h3>Accessing Hash Table Data</h3>
+<p>To find hash table elements and get data based on the key name:</p>
+<ul>
+<li>
+<p>To retrieve an entry based on its key, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_find()</span> function by passing the hash and the key you are looking for:</p>
+<pre class="prettyprint">
+char *phone = NULL;
+const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
+
+// Look for a specific entry and get its phone number
+phone = eina_hash_find(phone_book, entry_name);
+</pre>
+</li>
+<li>
+<p>To get the number of entries in a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_population()</span> function. Pass the hash as the only argument.</p>
+<pre class="prettyprint">
+unsigned int nb_elm;
+nb_elm = eina_hash_population(phone_book);
+</pre>
+</li>
+
+<li>To iterate through a hash table, you can use various methods: 
+<ul>
+
+<li>to iterate over the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach()</span> function:
+
+<ul><li>The first parameter is the hash.</li>
+<li>The second parameter is the callback function called on each iteration.
+<p>The callback function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the iteration has to continue and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if the iteration has to stop.</p></li>
+<li>The last parameter one is the data passed to the callback function.</li></ul>
+
+<p>The following example prints the key and the data of the hash entry (the name and the phone number):</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
+{
+&nbsp;&nbsp;&nbsp;const char *name = key;
+&nbsp;&nbsp;&nbsp;const char *number = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
+
+&nbsp;&nbsp;&nbsp;// Return EINA_FALSE to stop this callback from being called
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+printf(&quot;List of phones:\n&quot;);
+
+// Running the callback on the hash called phone_book 
+eina_hash_foreach(phone_book, pb_foreach_cb, NULL);
+printf(&quot;\n&quot;);
+</pre>
+</li>
+<li>To iterate over the keys, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span> function:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
+Eina_Iterator *it;
+
+// Variable to handle the current iteration &quot;data&quot;
+void *data;
+
+// Iterate over the keys (names)
+printf(&quot;List of names in the phone book:\n&quot;);
+
+it = eina_hash_iterator_key_new(phone_book);
+
+// Use the generic eina_iterator_next()
+while (eina_iterator_next(it, &amp;data))
+{
+&nbsp;&nbsp;&nbsp;const char *name = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, name);
+}
+
+// Free the iterator
+eina_iterator_free(it);
+</pre>
+</li>
+
+<li>To iterate over the hash data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_data_new()</span> function the same way as <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span>:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
+Eina_Iterator *it;
+
+// Variable to handle the current iteration &quot;data&quot;
+void *data;
+
+// Iterate over hash data 
+printf(&quot;List of numbers in the phone book:\n&quot;);
+
+it = eina_hash_iterator_data_new(phone_book);
+while (eina_iterator_next(it, &amp;data))
+{
+&nbsp;&nbsp;&nbsp;const char *number = data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, number);
+}
+
+// Free the iterator
+eina_iterator_free(it);
+</pre>
+</li>
+<li>To iterate over a tuple composed of keys and data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_tuple_new()</span> function:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
+Eina_Iterator *tit;
+
+// Variable to handle the current iteration &quot;data&quot;
+void *tuple;
+
+printf(&quot;List of phones:\n&quot;);
+tit = eina_hash_iterator_tuple_new(phone_book);
+while (eina_iterator_next(tit, &amp;tuple))
+{
+&nbsp;&nbsp;&nbsp;Eina_Hash_Tuple *t = tuple;
+&nbsp;&nbsp;&nbsp;const char *name = t-&gt;key;
+&nbsp;&nbsp;&nbsp;const char *number = t-&gt;data;
+&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
+}
+
+// Always free the iterator after its use
+eina_iterator_free(tit); 
+</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+
+<h2 id="list" name="list">Lists</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_List</span> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct&#39;s fields, similar to a self-made double-link list.</p>
+<p>In addition to the previous and next node and its data, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> nodes keep a reference to an accounting structure. The accounting structure is used to improve the performance of some functions. The structure is private and must not be modified.</p>
+
+<p>In an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a &quot;list&quot;: the list itself is a list where each node is a list as well.</p>
+
+<p>Eina provides 2 list types: the classic list (<span style="font-family: Courier New,Courier,monospace">Eina_List</span>) and an inline list (<span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span>).</p>
+
+<h3>Creating and Destroying a List</h3>
+<p>To use an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
+
+<ol><li>Declare the list with <span style="font-family: Courier New,Courier,monospace">NULL</span> as the default value:
+<pre class="prettyprint">
+int list()
+{
+&nbsp;&nbsp;&nbsp;// Declaration of the Eina_List with NULL as default value;
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
+</pre></li>
+
+<li>Call the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function with the list and the data you want to append as parameters.
+<p>The list must be a pointer to the first element of the list (or <span style="font-family: Courier New,Courier,monospace">NULL</span>). The function returns a pointer to the list.</p>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Creating the first element of the list 
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;watch&quot;);
+
+&nbsp;&nbsp;&nbsp;// Adding more elements
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;phone&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;ivi&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;notebook&quot;);
+</pre></li>
+
+<li>When you no longer need the list, free it:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;// Free the Eina_List
+&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre></li>
+</ol>
+
+
+<h3>Modifying List Content</h3>
+
+<p>To modify list content:</p>
+<ul>
+<li>
+<p>To add data to a list:</p>
+
+<ul>
+<li>To add data at the end of the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function. To add data at the top of the list, use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span>. The functions work in the same way, only adding the data to different places.
+<pre class="prettyprint">
+list = eina_list_prepend(list, &quot;set-top box&quot;);
+</pre>
+</li>
+
+<li>To insert data into the list after a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function. As the last parameter, define the element after which the data is added.
+<p>For example to append data after the &quot;phone&quot; element:</p>
+<pre class="prettyprint">
+list = eina_list_append_relative(list, &quot;single-board computer&quot;, &quot;phone&quot;);
+</pre>
+</li>
+
+<li>To add a new entry before a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_prepend_relative()</span> function. It is similar to the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function.
+<pre class="prettyprint">
+list = eina_list_prepend_relative(list, &quot;ultrabook&quot;, &quot;ivi&quot;);
+</pre>
+</li>
+
+<li>To append a list node to a linked list after a specified member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative_list()</span> function. To prepend a list node to a linked list before a specified member, use the <span style="font-family: Courier New,Courier,monospace">Eina_List * eina_list_prepend_relative_list()</span> function.
+</li>
+</ul>
+</li>
+
+<li>To set data in a list member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_set()</span> function. Pass the &quot;list&quot; (node) as the first argument and the data to set as the second.
+
+<p>The following example also shows the usage of the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span> function, which returns the last element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
+
+<pre class="prettyprint">
+// Setting new data for the last element
+eina_list_data_set(eina_list_last(list), eina_stringshare_add(&quot;Boris&quot;));
+</pre>
+</li>
+
+<li id="remove_list">To remove a node from the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_remove()</span> function. This function removes the first instance of the specified data from the given list.
+<pre class="prettyprint">
+list = eina_list_remove(list, &quot;ultrabook&quot;);
+</pre>
+<p>You can also remove a &quot;list&quot; (node) from a list using the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function. Pass the list you want to delete an element from and a &#39;list&#39; (node) you want to delete.</p>
+<pre class="prettyprint">
+Eina_List *app_list = NULL;
+Eina_List *to_remove = NULL;
+
+// Adding some elements to the list (using stringshares)
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
+
+// Finding the &quot;list&quot; to remove 
+to_remove = eina_list_data_find_list(list, eina_string_share_add(&quot;enlightenment&quot;));
+
+list = eina_list_remove_list(list, to_remove);
+</pre>
+</li>
+
+<li>To move elements in a list, you can use various function, such as <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list()</span> that promotes an element to the top of the list or <span style="font-family: Courier New,Courier,monospace">eina_list_demote_list()</span> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the &quot;list&quot; (node) you want to move. Use the functions just like the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function.
+<pre class="prettyprint">
+list = eina_list_promote_list(list, eina_list_data_find_list(list, &quot;ivi&quot;));
+</pre>
+</li>
+<li>To reverse all the elements of a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse()</span> function. To obtain a reversed copy of the list while keeping the initial list unchanged, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse_clone()</span> function.
+<pre class="prettyprint">
+Eina_List *rev_copy;
+
+app_list = eina_list_reverse(app_list);
+rev_copy = eina_list_reverse_clone(app_list);
+</pre>
+</li>
+<li>To sort a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_sort()</span> function. This function takes a list which needs to be sorted, the maximum number of elements to be sorted, and a callback function that compares data. To sort all list elements, set the maximum number of elements to 0.
+<pre class="prettyprint">
+int sort_cb(const void *d1, const void *d2)
+{
+&nbsp;&nbsp;&nbsp;const char *txt = d1;
+&nbsp;&nbsp;&nbsp;const char *txt2 = d2;
+&nbsp;&nbsp;&nbsp;if(!txt) return(1);
+&nbsp;&nbsp;&nbsp;if(!txt2) return(-1);
+
+&nbsp;&nbsp;&nbsp;return(strcmp(txt, txt2));
+}
+
+extern Eina_List *list;
+list = eina_list_sort(list, 0, sort_cb);
+</pre>
+</li>
+<li>To merge 2 list into 1, use the <span style="font-family: Courier New,Courier,monospace">eina_list_merge()</span> function. The <span style="font-family: Courier New,Courier,monospace">eina_list_sorted_merge()</span> function merges 2 sorted lists according to the ordering function that you pass as the last argument.
+<pre class="prettyprint">
+int sort_cb(void *d1, void *d2)
+{
+&nbsp;&nbsp;&nbsp;const char *txt = NULL;
+&nbsp;&nbsp;&nbsp;const char *txt2 = NULL;
+&nbsp;&nbsp;&nbsp;if(!d1) return(1);
+&nbsp;&nbsp;&nbsp;if(!d2) return(-1);
+
+&nbsp;&nbsp;&nbsp;return(strcmp((const char*)d1, (const char*)d2));
+}
+
+Eina_List *sorted1;
+Eina_List *sorted2;
+Eina_List *newlist;
+
+// Insert some values and sort your lists
+
+// Simply merge 2 lists without any process
+newlist = eina_list_merge(sorted1, sorted2);
+
+newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
+</pre>
+</li>
+<li>To split a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_split_list()</span> function:
+<ul><li>The first parameter is the list to split.</li>
+<li>The second parameter is the &quot;list&quot; (element) after which the list is split.</li>
+<li>The last parameter is the head of the second list.</li></ul>
+<pre class="prettyprint">
+// Original list (left list)
+Eina_List *list = NULL;
+
+// New list (right list)
+Eina_List *other_list = NULL;
+
+// Eina_List (element)
+Eina_List *l;
+
+list = eina_list_append(list, &quot;super tux&quot;);
+list = eina_list_append(list, &quot;frozen bubble&quot;);
+list = eina_list_append(list, &quot;lincity-ng&quot;);
+
+// Sorting the list (just for fun)
+list = eina_list_sort(list, 0, cmp_func);
+
+// Looking for the &#39;split&#39; element
+l = eina_list_search_sorted_list(list, cmp_func, &quot;frozen bubble&quot;);
+
+// Splitting the list
+list = eina_list_split_list(list, l, &amp;other_list);
+</pre>
+</li>
+<li>To copy a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_clone()</span> function. The function copies all the elements in the list in the exact same order.
+<pre class="prettyprint">
+Eina_List *app_list_copy;
+
+app_list_copy = eina_list_clone(app_list);
+</pre>
+</li>
+
+</ul>
+
+
+<h3>Accessing List Data</h3>
+<p>To access list data:</p>
+<ul>
+<li>To find some data on your list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function. Pass the list containing your data as the first parameter and the data you are looking for as the last one. The function returns the found member data pointer if found, <span style="font-family: Courier New,Courier,monospace">NULL</span> otherwise.
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function searches the list from the beginning to the end for the first member for which the data pointer is data. If it is found, the data is returned, otherwise <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned. The function only compares pointers, which is why using <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> is very useful with lists, because it always returns the same pointer for the same string.</p>
+<pre class="prettyprint">
+Eina_List *app_list = NULL;
+const char *res_str;
+
+// Adding some elements to the list (using stringshares)
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
+
+// Finding the data
+res_str = eina_list_data_find(list, eina_string_share_add(&quot;enlightenment&quot;));
+if (res_str == eina_stringshare_add(&quot;enlightenment&quot;))
+&nbsp;&nbsp;&nbsp;printf(&quot;Data is present&quot;);
+else
+&nbsp;&nbsp;&nbsp;printf(&quot;Data not present&quot;);
+</pre>
+
+<p>The above example returns &quot;Data is present&quot;.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find_list()</span> function does the same thing as <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span>, but returns an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>. For an example, see the <a href="#remove_list"><span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function</a>.</p>
+<p>You can access the data or a &quot;list&quot; (node) of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span> using the <span style="font-family: Courier New,Courier,monospace">eina_list_nth()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_nth_list()</span> functions. The first one returns a pointer to the data of the &quot;n&quot; element and the second a pointer to the &quot;list&quot;. To access the data of the 3rd element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
+<pre class="prettyprint">
+const char *res;
+Eina_List *res_lst;
+
+res = eina_list_nth(app_list, 2);
+res_lst = eina_list_nth_list(app_list, 2);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">res</span> variable contains the pointer to the string &quot;calaos&quot;. The <span style="font-family: Courier New,Courier,monospace">res_lst</span> variable is the list containing &quot;calaos&quot;.</p>
+</li>
+
+<li>To search for data in a list, select your function based on whether the list is sorted or unsorted.
+<ul>
+<li>To search in an unsorted list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function:
+<ul><li>The first parameter is the list.</li>
+<li>The second parameter is a callback function for comparison.</li>
+<li>The last parameter is the data you are looking for.</li></ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> function does the same but returns an &quot;Eina_List&quot;.</p>
+
+
+<p>The following example shows 2 searches using both the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> functions:</p>
+<pre class="prettyprint">
+int search_list()
+{
+&nbsp;&nbsp;&nbsp;// Declaring the list
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL; 
+&nbsp;&nbsp;&nbsp;Eina_List *l;
+&nbsp;&nbsp;&nbsp;// Little trick to use strcmp as Eina_Compare_Cb 
+&nbsp;&nbsp;&nbsp;Eina_Compare_Cb cmp_func = (Eina_Compare_Cb)strcmp;
+
+&nbsp;&nbsp;&nbsp;void *data;
+&nbsp;&nbsp;&nbsp;int cmp_result;
+
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;debian&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;centos&quot;);
+
+&nbsp;&nbsp;&nbsp;data = eina_list_search_unsorted(list, cmp_func, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;l = eina_list_search_unsorted_list(list, cmp_func, &quot;archlinux&quot;);
+&nbsp;&nbsp;&nbsp;if (l-&gt;data != data)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;eina_list_free(list);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+
+</li>
+<li>To search in sorted lists, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted_list()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted()</span> functions. They work similarly as the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function.
+</li>
+</ul>
+</li>
+
+
+<li>To get data from a list element, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_get()</span> function. The function returns the data contained in the given list.
+
+<p>The following example uses the <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span> function to move through the list in a statement.</p>
+<pre class="prettyprint">
+int list_data_set()
+{
+&nbsp;&nbsp;&nbsp;// Declaring the list
+&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
+&nbsp;&nbsp;&nbsp;// Eina_List in which to place the elements or lists
+&nbsp;&nbsp;&nbsp;Eina_List *l;
+
+&nbsp;&nbsp;&nbsp;void *list_data;
+
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Bertrand&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Cedric&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Nicolas&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Vincent&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Raoul&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Fabien&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Philippe&quot;));
+&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;billiob&quot;));
+
+&nbsp;&nbsp;&nbsp;for(l = list; l; l = eina_list_next(l))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Printing the data returned by eina_list_data_get
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
+
+&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(list, list_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_stringshare_del(list_data);
+
+&nbsp;&nbsp;&nbsp;return 0;
+}
+</pre>
+</li>
+
+<li>To move in a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span>, <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">eina_list_prev()</span> functions to move to the last, next, or previous element in the list.
+<p>The following example scrolls backwards starting from the end of the list:</p>
+<pre class="prettyprint">
+for(l = eina_list_last(list); l; l = eina_list_prev(l))
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
+</pre>
+
+</li>
+
+<li>To count the list elements, use the <span style="font-family: Courier New,Courier,monospace">eina_list_count()</span> function. The function returns the number of items in a list.
+<pre class="prettyprint">
+printf(&quot;List size: %d\n&quot;, eina_list_count(list));
+</pre>
+</li>
+<li>To iterate through an array, you can use various iterators: 
+<ul>
+<li>To iterate over a list from the beginning to the end, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro:
+<ul><li>The first parameter is the list to iterate.</li>
+<li>The second parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_List *</span> to hold the current &quot;List&quot; (node).</li>
+<li>The last parameter receives the current data during the run.</li></ul>
+
+<p>The following example prints the data of each &quot;List&quot; (node) of the list:</p>
+<pre class="prettyprint">
+Eina_List *list = NULL;
+Eina_List *l;
+void *list_data;
+
+list = eina_list_append(list, &quot;ls&quot;);
+list = eina_list_append(list, &quot;top&quot;);
+list = eina_list_append(list, &quot;rmdir&quot;);
+list = eina_list_append(list, &quot;uname&quot;);
+
+EINA_LIST_FOREACH(list, l, list_data)
+&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)list_data);
+
+eina_list_free(list);
+</pre>
+</li>
+<li>To iterate from the last element to the first, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_REVERSE_FOREACH</span> macro. It works similarly as <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH()</span>.
+</li>
+<li>To iterate over a list from the beginning to the end, you can also use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH_SAFE</span> macro. It is called safe, because it stores the next &quot;List&quot; (node), so you can safely remove the current &quot;List&quot; (node) and continue the iteration.
+<pre class="prettyprint">
+Eina_List *list;
+Eina_List *l;
+Eina_List *l_next;
+char *data;
+
+list = eina_list_append(list, &quot;tizen&quot;);
+list = eina_list_append(list, &quot;tizen&quot;);
+list = eina_list_append(list, &quot;tizen&quot;);
+list = eina_list_append(list, &quot;tizen&quot;);
+
+// Using EINA_LIST_FOREACH_SAFE to free the elements that match &quot;tizen&quot;
+
+EINA_LIST_FOREACH_SAFE(list, l, l_next, data)
+&nbsp;&nbsp;&nbsp;if (strcmp(data, &quot;tizen&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_remove_list(list, l);
+&nbsp;&nbsp;&nbsp;}
+</pre>
+</li>
+
+
+<li>To remove each list element while having access to the node&#39;s data, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FREE</span> macro. Pass the list and a pointer to hold the current data.
+<pre class="prettyprint">
+Eina_List *list;
+char *data;
+
+// List is filled
+
+EINA_LIST_FREE(list, data)
+&nbsp;&nbsp;&nbsp;free(data);
+</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+<h3 id="inlist" name="inlist">Using an Inline List</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> is a special data type drawn to store nodes pointers in the same memory as data. This way the memory is less fragmented, but operations, such as sort and count, are slower. The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> has its own purpose, but if you do not understand what the purpose is, use the regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span> instead.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes can be part of a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, simply added with the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> or <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span> functions.</p>
+
+<p>To use the inline list:</p>
+<ol>
+<li>Define the structure of the data before creating the inline list:
+<pre class="prettyprint">
+struct my_struct 
+{
+&nbsp;&nbsp;&nbsp;EINA_INLIST;
+&nbsp;&nbsp;&nbsp;int a, b;
+};
+</pre>
+
+<p>The structure is composed of 2 integers, the real data, and the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> type which is composed of 3 pointers defining the inline list structure:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * next</span>: next node</li>
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * prev</span>: previous node</li>
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * last</span>: last node</li>
+</ul></li>
+
+<li>
+<p>To create the inlist nodes, allocate the memory and use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_append()</span> function:</p>
+<ul><li>The first parameter is the existing list head or <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list. 
+<p>The following example passes <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list.</p></li>
+<li>The second parameter is the new list node, and it must not be <span style="font-family: Courier New,Courier,monospace">NULL</span>. 
+<p>You must use the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_GET()</span> macro to get the inlist object of the datastruct.</p></li></ul>
+<pre class="prettyprint">
+struct my_struct *d, *cur;
+Eina_Inlist *list, *itr, *tmp;
+
+d = malloc(sizeof(*d));
+d-&gt;a = 1;
+d-&gt;b = 10;
+
+list = eina_inlist_append(NULL, EINA_INLIST_GET(d));
+</pre>
+
+<p>Repeat this operation for every new node:</p>
+<pre class="prettyprint">
+d = malloc(sizeof(*d));
+d-&gt;a = 2;
+d-&gt;b = 20;
+list = eina_inlist_append(list, EINA_INLIST_GET(d));
+</pre>
+</li>
+
+<li>To add data to the inline list:
+<ul><li>Put data at the end of the inline list with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend()</span> function:
+<pre class="prettyprint">
+d = malloc(sizeof(*d));
+d-&gt;a = 3;
+d-&gt;b = 30;
+list = eina_inlist_prepend(list, EINA_INLIST_GET(d));
+</pre>
+</li>
+
+<li>Add a node before or after a given node with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend_relative()</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative()</span> functions. 
+<p>In both functions, the first parameter is the target list, the second is the element you want to add, and the last is the reference element to place data after (in this case). Similarly as in a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a list, so the last parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> typed variable.</p>
+<pre class="prettyprint">d = malloc(sizeof(*d));
+d-&gt;a = 4;
+d-&gt;b = 40;
+list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
+</pre>
+</li></ul></li>
+
+<li>To sort and iterate an inline list, to find and move list elements, and to perform other inline list operations, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Inline__List__Group.html">Inline List</a> API.</li>
+
+<li>When the inline list is no longer needed, destroy it by looping over the list to free each <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> structure and the data using allocated memory. Use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_remove()</span> function on each node.
+
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_CONTAINER_GET()</span> macro returns the container object of an inlist (the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> of <span style="font-family: Courier New,Courier,monospace">my_struc</span>), and the list element is removed and the allocated memory of the container &quot;object&quot; is freed.</p>
+
+<pre class="prettyprint">while (list)
+{
+&nbsp;&nbsp;&nbsp;struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list, struct my_struct);
+
+&nbsp;&nbsp;&nbsp;// Remove the current list element 
+&nbsp;&nbsp;&nbsp;list = eina_inlist_remove(list, list);
+&nbsp;&nbsp;&nbsp;free(aux);
+}
+</pre>
+</li>
+
+
+</ol>
+
+<h2 id="generic" name="generic">Generic Value</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> object provides generic data storage and access, allowing you to store what you want in one single type of <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types. The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> comes with predefined types for numbers, array, list, hash, blob, and structs, and it can convert between data types, including string.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can handle the following types:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UCHAR</span>: unsigned char</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_USHORT</span>: unsigned short</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT</span>: unsigned int</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ULONG</span>: unsigned long</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMESTAMP</span>: unsigned long used for timestamps</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT64</span>: unsigned integer of 64 bits</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_CHAR</span>: char</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_SHORT</span>: short</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT</span>: int</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LONG</span>: long</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT64</span>: integer of 64 bits</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_FLOAT</span>: float</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_DOUBLE</span>: double</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRINGSHARE</span>: stringshared string</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRING</span>: string</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ARRAY</span>: array</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span>: list</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_HASH</span>: hash</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMEVAL</span>: &#39;struct timeval&#39;</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_BLOB</span>: blob of bytes</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRUCT</span>: struct</li>
+</ul>
+
+
+<p>To set up a generic value:</p>
+<ol>
+<li>Declare the necessary variables:
+<pre class="prettyprint">
+// The Eina_Value itself
+Eina_Value v;
+// An integer 
+int i;
+// And a char *
+char *newstr;
+</pre>
+</li>
+
+<li>To set up an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> for an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_setup()</span> function. The first argument is the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and the second is the type.
+<pre class="prettyprint">
+eina_value_setup(&amp;v, EINA_VALUE_TYPE_INT);
+</pre>
+</li>
+</ol>
+<p>To manage the generic value:</p>
+<ul>
+<li>To set an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_set()</span> function:
+<pre class="prettyprint">
+eina_value_set(&amp;v, 123);
+</pre>
+</li>
+
+<li>To get the value, use the <span style="font-family: Courier New,Courier,monospace">eina_value_get()</span> function. Pass the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> as the first argument, and a pointer to a variable to store the value (the target variable must have the same type as the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>).
+<pre class="prettyprint">
+eina_value_get(&amp;v, &amp;i);
+printf(&quot;v=%d\n&quot;, i);
+</pre>
+<p>The above example prints &quot;v=123&quot;.</p>
+</li>
+
+<li>To convert an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to a string, use the <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span> function. The code snippet above printed an <span style="font-family: Courier New,Courier,monospace">int</span> value. It is also possible to print the value as a string.
+<pre class="prettyprint">
+newstr = eina_value_to_string(&amp;v);
+printf(&quot;v as string: %s\n&quot;, newstr);
+
+free(newstr);
+</pre>
+</li>
+
+<li>To free the memory allocated by <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_flush()</span> function:
+<pre class="prettyprint">
+eina_value_flush(&amp;v);
+</pre>
+</li>
+
+<li>To store a string, get its value, and print it:
+<pre class="prettyprint">
+const char *s;
+
+eina_value_setup(&amp;v, EINA_VALUE_TYPE_STRING);
+eina_value_set(&amp;v, &quot;My string&quot;);
+eina_value_get(&amp;v, &amp;s);
+
+printf(&quot;v=%s (pointer: %p)\n&quot;, s, s);
+</pre>
+</li>
+
+<li>To set up a string, use the <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span> function with an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>:
+<pre class="prettyprint">
+char *newstr; 
+
+newstr = eina_value_to_string(&amp;v);
+printf(&quot;v as string: %s (pointer: %p)\n&quot;, newstr, newstr);
+
+// Free the memory allocated by eina_value_to_string
+free(newstr);
+
+eina_value_flush(&amp;v); 
+</pre>
+</li>
+
+<li>To convert from one <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to another, use the <span style="font-family: Courier New,Courier,monospace">eina_value_convert()</span> function. 
+<p>The function puts the converted value into another <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It accepts pointers, so you have to pass an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> pointer.</p>
+<pre class="prettyprint">
+Eina_Value v;
+Eina_Value otherv;
+
+// Set up 2 Eina_Values: 1 int and 1 string
+eina_value_setup(&amp;otherv, EINA_VALUE_TYPE_STRING);
+eina_value_setup(&amp;v, EINA_VALUE_TYPE_INT);
+
+// Convert from int to string
+eina_value_set(&amp;v, 123);
+eina_value_convert(&amp;v, &amp;otherv);
+eina_value_get(&amp;otherv, &amp;s);
+printf(&quot;otherv=%s\n&quot;, s);
+
+// Another way to do the same 
+eina_value_set(&amp;otherv, &quot;33&quot;);
+eina_value_convert(&amp;otherv, &amp;v);
+eina_value_get(&amp;v, &amp;i);
+printf(&quot;v=%d\n&quot;, i);
+
+// Clean your values
+eina_value_flush(&amp;otherv);
+eina_value_flush(&amp;v);
+</pre>
+</li>
+
+<li>To store an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> that corresponds to the <span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span> type.
+</li>
+<li>To create an <span style="font-family: Courier New,Courier,monospace">Eina_Value_List</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_list_setup()</span> function. The function initializes a generic value storage of the list type. The first parameter is the &quot;object&quot; value, and the second one is the type (how to manage the stored list members).
+</li>
+</ul>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+   
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/data_types_tools_n.htm b/org.tizen.ui.guides/html/native/efl/data_types_tools_n.htm
new file mode 100755 (executable)
index 0000000..a5bca4a
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/data_types_tools_n.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Data Types and Tools: Using Eina Resources</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>\r
+               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+   \r
+   <h1>Data Types and Tools: Using Eina Resources</h1>\r
+\r
+<p>UI toolkits, such as Qt and Gtk, generally support their own data types, structures, functions, and macros in order for you to easily and efficiently make their applications. EFL, as one of Tizen native UI toolkits, provides data types and useful tools as well.</p>\r
+\r
+<p>The Eina library in EFL implements APIs for data types and structures easy to use and optimized in an efficient way. It also provides some useful tools, such as opening shared libraries, error management, type conversion, time accounting, and memory pool to help convenient application development.</p>  \r
+   \r
+<p>The main features of Eina are:</p>\r
+<ul>\r
+<li><a href="data_types_n.htm">Data Types</a> <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types.</p></li>\r
+<li><a href="tools_n.htm">Tools</a> <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications.</p></li>\r
+</ul>\r
+\r
+<table class="note">\r
+    <tbody>\r
+        <tr>\r
+            <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>\r
+        </tr>\r
+    </tbody>\r
+</table> \r
+   \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/datetime_tutorial_wn.htm b/org.tizen.ui.guides/html/native/efl/datetime_tutorial_wn.htm
new file mode 100755 (executable)
index 0000000..2febe03
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/datetime_tutorial_wn.htm
@@ -0,0 +1,111 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Wearable Datetimes</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#date">Creating a Date Picker</a></li>
+                       <li><a href="#time">Creating a Time Picker</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>             
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Datetimes</h1>
+
+  
+<p>This tutorial explains how you can create UI components that allow the user to select a date or time.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+
+ <h2 id="date" name="date">Creating a Date Picker</h2>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a date picker style (Year : Month : Day).</p>
+<p>The following example creates the datepicker-styled Datetime and adds it in the conform.</p>
+
+<pre class="prettyprint">
+// Add a datepicker style Datetime component
+datetime = elm_datetime_add(ad-&gt;win);
+evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
+evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
+elm_object_style_set(datetime, &quot;datepicker_layout&quot;);
+evas_object_show(datetime);
+
+elm_object_content_set(ad-&gt;conform, datetime);
+</pre>
+
+ <h2 id="time" name="time">Creating a Time Picker</h2>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a time picker style (Hour(12) : Min : AM/PM, or Hour(24) : Min).</p>
+<p>The following example creates the timepicker-styled Datetime and adds it in the conform.</p>
+
+<pre class="prettyprint">
+// Add a timepicker style Datetime component
+datetime = elm_datetime_add(ad-&gt;win);
+evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
+evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
+elm_object_style_set(datetime, &quot;timepicker_layout&quot;);
+evas_object_show(datetime);
+
+elm_object_content_set(ad-&gt;conform, datetime);
+</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/ecore_animation_n.htm b/org.tizen.ui.guides/html/native/efl/ecore_animation_n.htm
new file mode 100755 (executable)
index 0000000..944e05c
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/ecore_animation_n.htm
@@ -0,0 +1,451 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Ecore Animations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#finite">Creating an Animation with a Finite Duration</a></li>
+                               <li><a href="#position">Position Mappings</a></li>
+                               <li><a href="#infinite">Creating an Infinite Animation</a></li>
+                               <li><a href="#chain">Chaining Animations</a></li>
+                               <li><a href="#pause">Pausing and Resuming Animations</a></li>
+                               <li><a href="#free">Freeing Up Memory</a></li>
+                               <li><a href="#frame">Frametime</a></li>
+                               <li><a href="#custom">Custom Timer</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Ecore Animations</h1> 
+
+<p>Ecore provides a facility for animations called <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span>. Ecore animators use the Ecore main loop for creating animations, running a specific action on each tick of a timer in the main loop.</p>
+
+<p>To create an Ecore animation:</p>
+<ol>
+    <li>Determine the duration of the animation.</li>
+    <li>Define a callback function that performs the animation with that duration.</li>
+</ol>
+
+<p>To use Ecore animators in your application, you must include the <span style="font-family: Courier New,Courier,monospace;">&lt;Ecore.h&gt;</span> file. This file is included by default if you are already using the <span style="font-family: Courier New,Courier,monospace;">&lt;Elementary.h&gt;</span> file in your application. You then declare an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator*</span> variable and use the variable in the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_*</span> functions.</p>
+
+<p>The following example shows how to create a simple animation with a finite duration:</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_do_animation(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;evas_object_move(data, 100 * pos, 100 * pos);
+&nbsp;&nbsp;&nbsp;// Do some more animating...
+}
+ecore_animator_timeline_add(2, _do_animation, my_evas_object);
+</pre>
+
+<p>In the above example, we create a linear transition to move <span style="font-family: Courier New,Courier,monospace;">my_evas_object</span> from position (0,0) to position (100,100) in 2 seconds.</p>
+
+<h2 id="finite" name="finite">Creating an Animation with a Finite Duration</h2>
+
+<p>Most of the time, you will want to create animations that last for a predefined time.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function allows you to define an animator that is automatically deleted after the animation is finished:</p>
+
+<pre class="prettyprint">ecore_animator_timeline_add(double runtime, Ecore_Timeline_Cb func, const void *data)</pre>
+
+<ul>
+<li>The first argument is the duration of the animation in seconds. The duration is not affected by frame rate.</li>
+<li>The second argument is the callback function that performs the animation.</li>
+<li>The third argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The callback function can return <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to keep the animator running or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to stop the animator and have it be deleted automatically at any time. The callback function is also passed a timeline position parameter with a value between 0.0 (start) to 1.0 (end) to indicate where along the timeline the animator is running.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example performs a linear horizontal translation of 500 pixels in 8 seconds:</p>
+<pre class="prettyprint">
+static Eina_Bool
+_my_animation(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
+&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, 500 * pos, y); // Linear translation of the Evas object
+}
+ecore_animator_timeline_add(8, _my_animation, my_evas_object);
+</pre>
+
+<h2 id="position" name="position">Position Mappings</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Ecore_Pos_Map</span> position mappings are used to define the evolution of a given position in accordance with the desired effects. The value ranges from 0.0 to 1.0 on a given timeline. This position variation allows you to apply dynamic changes to any attribute of your Evas object, such as position, width, height, scale, angle, and color.</p>
+
+<p>Ecore supports the following position mappings (with the listed v1 and v2 parameters):</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear 0.0 - 1.0
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end
+    <ul>
+        <li>v1: not used</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), 4.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), 3.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end
+    <ul>
+        <li>v1: power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.1 is a much more pronounced sinusoidal (squared), 3.0 is cubed, and so on</li>
+        <li>v2: not used</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient * v1, interpolated via power of v2 curve
+    <ul>
+        <li>v1: multiplication factor for gradient</li>
+        <li>v2: curve value</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then &quot;drop&quot; like a ball bouncing to the ground at 1.0, and bounce v2 times, with a decay factor of v1
+    <ul>
+        <li>v1: bounce decay factor</li>
+        <li>v2: number of bounces</li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then &quot;wobble&quot; like a spring until rest position at 1.0, and wobble v2 times, with a decay factor of v1
+    <ul>
+        <li>v1: wobble decay factor</li>
+        <li>v2: number of wobbles</li>
+    </ul>
+</li>
+</ul>
+
+<p class="figure">Figure: Position mappings</p>
+<p align="center"><img alt="Position mappings" src="../../images/pos_map_all.png" /></p>
+
+<h3>Using Position Mappings</h3>
+<p>When using the animation callback function, the animator passes a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running.</p>
+
+<p>If you want to create a non-linear animation, map the position value to one of several curves and mappings:</p>
+<pre class="prettyprint">ecore_animator_pos_map(double pos, Ecore_Pos_Map map, double v1, double v2)</pre>
+<ul>
+<li>The first argument is the current position value, which ranges from 0.0 to 1.0.</li>
+<li>The second argument is the position mapping you want to apply.</li>
+<li>The third argument is the first parameter (v1) to pass to the position mapping.</li>
+<li>The fourth argument is the second parameter (v2) to pass to the position mapping.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The v1 and v2 arguments are specific to the chosen position mapping. For example, if you are using <span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>, v1 represents the bouncing level and v2 the number of bounces.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example performs a transition that bounces 7 times, diminishing by a factor of 1.8 over 5 seconds:</p>
+
+<pre class="prettyprint">static Eina_Bool
+_my_animation_callback(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; // Get the target object
+&nbsp;&nbsp;&nbsp;int x, y, w, h; // Target object geometry
+&nbsp;&nbsp;&nbsp;double frame = pos; // Actual position variation
+&nbsp;&nbsp;&nbsp;// Get frame relative position depending on desired effect
+&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); // Get current object position and size attributes
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame); // Move the Evas object according to desired effect
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+ecore_animator_timeline_add(5, _my_animation_callback, my_evas_object);</pre>
+
+<h2 id="infinite" name="infinite">Creating an Infinite Animation</h2>
+
+<p>If you want the animation to run for an unspecified amount of time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function. This function works the same way as the <span style="font-family: Courier New,Courier,monospace;">ecore_animation_timeline_add()</span> function, except its interval is based on frame rate. Using frame rate as the basis benefits performance, especially if you define multiple animations, since you may want to have a different timer for each callback function.</p>
+
+<pre class="prettyprint">
+ecore_animator_add(Ecore_Task_Cb func, const void *data)
+</pre>
+
+<ul>
+<li>The first argument is the callback function that performs the animation.</li>
+<li>The second argument is the parameter passed to the callback function. This is usually the Evas object to animate.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The function returns a pointer to an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object, which you can use to adjust the animation.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example creates a rectangle sliding from left to right and back again. When the rectangle hits one edge of the screen, it changes direction.</p>
+
+<pre class="prettyprint">static Eina_Bool
+_slide_back_and_forth(void *data)
+{
+&nbsp;&nbsp;&nbsp;typedef enum {LEFT, RIGHT} direction_t; // Direction datatype
+&nbsp;&nbsp;&nbsp;static int x = 0; // Initial position
+&nbsp;&nbsp;&nbsp;static direction_t direction = RIGHT; // Initial direction
+&nbsp;&nbsp;&nbsp;if (x &gt;= 250)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = LEFT; // Change direction
+&nbsp;&nbsp;&nbsp;else if (x &lt;= 0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = RIGHT; // Change direction
+&nbsp;&nbsp;&nbsp;if (direction == RIGHT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, ++x, 350); // Slide to right
+&nbsp;&nbsp;&nbsp;else if (direction == LEFT)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, --x, 350); // Slide to left
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;// Declarations
+
+&nbsp;&nbsp;&nbsp;// Ecore Evas init
+
+&nbsp;&nbsp;&nbsp;// Draw Evas objects
+
+&nbsp;&nbsp;&nbsp;// Animations go here
+&nbsp;&nbsp;&nbsp;anim = ecore_animator_add(_slide_back_and_forth, rectangle);
+&nbsp;&nbsp;&nbsp;// Ecore main loop
+
+&nbsp;&nbsp;&nbsp;// Free memory
+}</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To use this code, you have to merge it with the Ecore transition example above.</td>
+</tr>
+</tbody>
+</table>
+
+<h2 id="chain" name="chain">Chaining Animations</h2>
+
+<p>You may sometimes want to delay animating an object. This can be useful if, for example, you want to start an animation only after another one has finished.</p>
+
+<p>You can simply set a delay to the second animation equal to the duration of the first animation:</p>
+
+<pre class="prettyprint">
+static int runtime = 5;
+static int delay = runtime;
+static Eina_Bool
+_start_fold_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _fold_animation, data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+static Eina_Bool
+_start_unfold_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _unfold_animation, data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+_start_fold_animation(my_evas_object);
+ecore_timer_add(delay, _start_unfold_animation, my_evas_object);
+</pre>
+
+<h2 id="pause" name="pause">Pausing and Resuming Animations</h2>
+
+<p>You can pause and resume Ecore animations. To pause a running animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function:</p>
+
+<pre class="prettyprint">ecore_animator_freeze(Ecore_Animator *animator)</pre>
+
+<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to pause.</p>
+
+<p>To resume the paused animation, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function:</p>
+
+<pre class="prettyprint">ecore_animation_thaw(Ecore_Animator *animator)</pre>
+
+<p>The parameter is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> to resume.</p>
+
+<p>The following example pauses a transition after 5 seconds and resumes it after 5 more seconds:</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_freeze_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_freeze(data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+static Eina_Bool
+_thaw_animation(void *data)
+{
+&nbsp;&nbsp;&nbsp;ecore_animator_thaw(data);
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+ecore_timer_add(5, _freeze_animation, animator);
+ecore_timer_add(10, _thaw_animation, animator);
+</pre>
+
+<h2 id="free" name="free">Freeing Up Memory</h2>
+
+<p>When you create an animation that does not have a timeout, you will have to manually free up the memory allocated to the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. By comparison, if the animation has a timeout, Ecore implements the mechanisms to automatically delete the animator from the list of pointers: When your animation callback returns 0 or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>, the animator manager takes care of freeing up the allocated memory.</p>
+
+<p>To manually free up the memory, delete the pointer by using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function:</p>
+
+<pre class="prettyprint">ecore_animator_del(Ecore_Animator *animator)</pre>
+
+<p>The argument is the <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> whose memory allocation to free up.</p>
+
+<p>Regardless of the type of animation, it is good practice to always ensure that the allocated memory is freed up before the program exits:</p>
+
+<pre class="prettyprint">if (animator != NULL)
+&nbsp;&nbsp;&nbsp;ecore_animator_del(animator);</pre>
+
+<h2 id="frame" name="frame">Frametime</h2>
+<p>In most cases, you will want to use the default timer <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_TIMER</span>. This timer ticks every &quot;frametime&quot; seconds and allows you to perform transitions within a predefined timeline. The timer uses the system clock to tick over every Nth second, with the default being 1/30th of a second.</p>
+
+<p>To tweak performance, you can change the frametime value:</p>
+
+<pre class="prettyprint">ecore_animator_frametime_set(double frametime)</pre>
+
+<p>The argument is the new frametime value.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Too small a value can cause performance issues, whereas too high a value can cause your animation to seem jerky.</td>
+</tr>
+</tbody>
+</table>
+
+<p>If you want to get the current frametime value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</p>
+
+<h2 id="custom" name="custom">Custom Timer</h2>
+
+<p>You may want to specify a custom timer to match your animation to third-party events. For example, the filling speed of a progress bar will mainly depend on the time it takes for a task to complete and the velocity at which the remaining time estimation evolves. This kind of animation requires you to use a custom timer.</p>
+
+<p>To use a custom timer, first set <span style="font-family: Courier New,Courier,monospace;">ECORE_ANIMATOR_SOURCE_CUSTOM</span> as the timer source, and then drive the timer based on an input tick source (such as another application via IPC or a vertical blanking interrupt):</p>
+
+<pre class="prettyprint">ecore_animator_custom_source_tick_begin_callback_set(Ecore_Cb func, const void *data)</pre>
+
+<p>The first argument is the callback function to call on the tick start. The second argument is the data to pass to the callback function.</p>
+
+<pre class="prettyprint">ecore_animator_custom_source_tick_end_callback_set(Ecore_Cb func, const void *data)</pre>
+
+<p>The first argument is the callback function to call on the tick end. The second argument is the data to pass to the callback function to set the functions that will be called to start and stop the ticking source.</p>
+
+<p>Next, trigger a tick over one frame:</p>
+
+<pre class="prettyprint">ecore_animator_custom_tick(void)</pre>
+
+<p>The following example supposes a progress bar that will be refreshed every time some progress occurs:</p>
+
+<pre class="prettyprint">ecore_animator_source_set(ECORE_ANIMATOR_SOURCE_CUSTOM);
+void _on_progress_update()
+{
+&nbsp;&nbsp;&nbsp;// Called when some progress occurs
+&nbsp;&nbsp;&nbsp;ecore_animator_custom_tick(); // Tick (next frame in progress bar animation)
+}</pre>
+
+<p>Finally, to get the current animator source, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_source_get()</span> function.</p>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/ecore_animation_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/ecore_animation_tutorial_n.htm
new file mode 100755 (executable)
index 0000000..dcd1204
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/ecore_animation_tutorial_n.htm
@@ -0,0 +1,417 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Ecore Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#setup">Setting Up the Application</a></li>
+                       <li><a href="#rotate">Creating a Rotation Effect</a></li>
+                       <li><a href="#zoom">Creating a Zoom Effect</a></li>
+                       <li><a href="#3d_rotate">Creating a 3D Rotation Effect</a></li>
+                       <li><a href="#drop_bounce">Creating Drop and Bounce Effects</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Ecore Animations</h1>
+
+  
+<p>This tutorial demonstrates how you can use Ecore animators to simplify the creation of animations. Using Ecore animators, you can manually create your own animations by changing and manipulating Evas object attributes. Ecore animators work like timers, running callback functions over a given duration (an animation timeline).</p>
+
+ <h2 id="setup" name="setup">Setting Up the Application</h2>
+
+<p>In this part of the tutorial, we create a simple application that manipulates and animates an Evas object. We use a &quot;Basic UI Application&quot; as the basis for the application.</p>
+<p>First, we set up the UI components we are going to use in the application:</p>
+
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;// Main window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;// Application title
+&nbsp;&nbsp;&nbsp;Evas_Object *label;
+
+&nbsp;&nbsp;&nbsp;// Buttons
+&nbsp;&nbsp;&nbsp;Evas_Object *bt1;
+&nbsp;&nbsp;&nbsp;Evas_Object *bt2;
+&nbsp;&nbsp;&nbsp;Evas_Object *bt3;
+
+&nbsp;&nbsp;&nbsp;// Animation target
+&nbsp;&nbsp;&nbsp;Evas_Object *target;
+} appdata_s;
+</pre>
+
+<p>We then create the actual UI components in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, starting with the main window and application title:</p>
+
+<pre class="prettyprint">// Main window
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+}
+
+evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+// Application title
+ad-&gt;label = elm_label_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;label, &quot;Ecore Animator Tutorial&quot;);
+evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
+evas_object_show(ad-&gt;label);
+</pre>
+
+<p>Next, we create the animation target, which is an Evas object of type <span style="font-family: Courier New,Courier,monospace">Elm_Image</span>. The image that is used in the source code is stored in the <span style="font-family: Courier New,Courier,monospace">res/images</span> folder of the application. The image that is used in the EDC file is stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> folder.</p>
+
+<pre class="prettyprint">// Animation target
+// Setting the image path
+char buf[PATH_MAX];
+snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
+// Adding the image
+ad-&gt;target = elm_image_add(ad-&gt;win);
+// Setting the image path
+if (!elm_image_file_set(ad-&gt;target, buf, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
+evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+// Moving the image
+evas_object_move(ad-&gt;target, 130, 100);
+// Resizing the image
+evas_object_resize(ad-&gt;target, 200, 100);
+// Showing the image
+evas_object_show(ad-&gt;target);
+</pre>
+
+<p>All images are available in the <span style="font-family: Courier New,Courier,monospace">/opt/usr/apps/&lt;PACKAGE_NAME&gt;/res/images</span> folder of the application. The package name is defined at the begin of the application code:</p>
+
+<pre class="prettyprint">#if !defined(PACKAGE)
+#define PACKAGE &quot;org.tizen.ecoreanimator&quot;
+#endif
+</pre>
+
+<p>The image path is set by calling the <span style="font-family: Courier New,Courier,monospace">elm_image_file_set()</span> function. This function takes as arguments the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object and the path of the image file, built with the <span style="font-family: Courier New,Courier,monospace">snprintf()</span> function and stored in a buffer.</p>
+
+<pre class="prettyprint">// Setting the image path
+char buf[PATH_MAX];
+snprintf(buf, sizeof(buf), &quot;/opt/usr/apps/%s/res/images/tizen-logo.png&quot;, PACKAGE);
+// Adding the image
+ad-&gt;target = elm_image_add(ad-&gt;win);
+// Setting the image path
+if (!elm_image_file_set(ad-&gt;target, buf, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image \&quot;%s\&quot;\n&quot;, buf);
+evas_object_size_hint_weight_set(ad-&gt;target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+
+<p>The remaining code moves and resizes the image:</p>
+
+<pre class="prettyprint">//Moving the image
+evas_object_move(ad-&gt;target, 130, 100);
+//Resizing the image
+evas_object_resize(ad-&gt;target, 200, 100);
+//Showing the image
+</pre>
+
+ <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
+
+<p>After the animation target is created, we can create the first button and the associated rotation animation:</p>
+
+<pre class="prettyprint">// Button 1
+ad-&gt;bt1 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt1, &quot;Rotate&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt1, 25, 0);
+evas_object_resize(ad-&gt;bt1, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt1, &quot;clicked&quot;, _btn_rotate_cb, ad);
+evas_object_show(ad-&gt;bt1);
+</pre>
+
+<p>We create the button for triggering the rotation effect. The button is placed and resized, and associated with the <span style="font-family: Courier New,Courier,monospace">_btn_rotate_cb()</span> callback function. This callback function calls the animation on the animation target.</p>
+
+<pre class="prettyprint">static void _btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_rotate, ad-&gt;target);
+}
+</pre>
+
+<p>In this callback function, we create an Ecore animator timeline using the <span style="font-family: Courier New,Courier,monospace">ecore_animator_timeline_add()</span> function. This function adds an animator that runs for a limited time: we run the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> animation callback function for 1 second on the <span style="font-family: Courier New,Courier,monospace">ad-&gt;target</span> Evas object.</p>
+
+<p>Next, we write the animation callback function that actually runs the animation. This callback is an <span style="font-family: Courier New,Courier,monospace">Ecore_Timeline_Cb</span> function, meaning it returns an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span> value and takes as arguments some <span style="font-family: Courier New,Courier,monospace">data</span> and the current position along the animation timeline (<span style="font-family: Courier New,Courier,monospace">pos</span>).</p>
+
+<p>To create the rotation animation, we use an Evas Map. The map handles the necessary map points and allows you to manipulate the target Evas object on the X, Y, and Z axes.</p>
+
+<pre class="prettyprint">static Eina_Bool
+_do_rotate(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;// Get the animation target
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;// Declaration of an `Evas_Map`
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;// Variables to store the target size and position
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;// Getting the size and position of the target
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;// Creation of an `Evas_Map` of 4 points
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;// Populate source and destination map points to match exactly object.
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+&nbsp;&nbsp;&nbsp;// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center.
+&nbsp;&nbsp;&nbsp;evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+&nbsp;&nbsp;&nbsp;// Setting the object to &quot;animate&quot; in the `Evas_Map`
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;// Starting the Animation
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;// Free used memory
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>In the animation callback function, we first declare the Evas Map. To implement the rotation, we need to set an X and Y center, so we create 4 integer variables to store the size and position of the target. This information is provided by the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function, which returns the X and Y coordinates and the weight and height of the target Evas object. Now we have all the required data to build the animation.</p>
+
+<p>We create an Evas Map consisting of four points, and we populate these points with the animation target:</p>
+
+<pre class="prettyprint">// Creation of an Evas_Map of 4 points
+m = evas_map_new(4);
+// Populate source and destination map points to match the object.
+evas_map_util_points_populate_from_object(m, obj);
+</pre>
+
+<p>Now we can define the rotation using the <span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate()</span> function:</p>
+
+<pre class="prettyprint">// Create a rotation of 360° with x+(w/2) &quot;x&quot; center and y +(h/2) &quot;y&quot; center.
+evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+</pre>
+
+<p>The animation callback function will be called at several points along the timeline, which is why we multiply the rotation angle (360°) by the timeline position (<span style="font-family: Courier New,Courier,monospace">pos</span>) to get the actual animation angle. If we do not do this, we will never see the animation take place. We then join the target object to the map and run the animation: </p>
+
+<pre class="prettyprint">// Setting the object to &quot;animate&quot; in the Evas Map
+evas_object_map_set(obj, m);
+// Starting the Animation
+evas_object_map_enable_set(obj, EINA_TRUE);
+</pre>
+
+<p>Each call to the animation callback function will rotate the object (360 * timeline position) degrees.</p>
+
+<p>Finally, we free up the memory allocated to the Evas Map:</p>
+
+<pre class="prettyprint">// Free used memory
+evas_map_free(m);
+</pre>
+
+ <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
+
+<p>The next animation is a zoom, for which we also use an Evas Map.</p>
+
+<p>First, we create the button in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
+
+<pre class="prettyprint">// Button 2
+ad-&gt;bt2 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt2, &quot;Zoom&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt2, 315, 0);
+evas_object_resize(ad-&gt;bt2, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt2, &quot;clicked&quot;, _btn_zoom_cb, ad);
+evas_object_show(ad-&gt;bt2);
+</pre>
+
+<p>We then create the button callback function with a new timeline:</p>
+
+<pre class="prettyprint">static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_zoom, ad-&gt;target);
+}
+</pre>
+
+<p>Next, we create the <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> animation callback function, which is almost identical to the <span style="font-family: Courier New,Courier,monospace">_do_rotate()</span> callback function, except that we use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function to create the animation:</p>
+
+<pre class="prettyprint">static Eina_Bool
+_do_zoom(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+&nbsp;&nbsp;&nbsp;evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function takes the following arguments:</p>
+
+<ul>
+<li>The map to change</li>
+<li>The horizontal zoom factor</li>
+<li>The vertical zoom factor</li>
+<li>The horizontal position (X coordinate) of the zooming center</li>
+<li>The vertical position (Y coordinate) of the zooming center</li>
+</ul>
+
+<p>Here, we use a horizontal and vertical zoom factor of 2, and the X and Y coordinates of the target as the horizontal and vertical center coordinates.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> callback function is called at several points along the animation timeline, which is why we multiply the horizontal and vertical zoom factor values by the timeline position. Each call will zoom more than the previous one, thereby creating the animation effect.</p>
+
+ <h2 id="3d_rotate" name="3d_rotate">Creating a 3D Rotation Effect</h2>
+
+<p>The last animation is a 3D rotation. For this one, we are going to rotate the Evas object on all three axes (X, Y, Z).</p>
+
+<p>First, we create the button and its callback function:</p>
+
+<pre class="prettyprint">// Button 3
+ad-&gt;bt3 = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;bt3, &quot;3D&quot;);
+evas_object_size_hint_weight_set(ad-&gt;bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(ad-&gt;bt3, 170, 0);
+evas_object_resize(ad-&gt;bt3, 90, 70);
+evas_object_smart_callback_add(ad-&gt;bt3, &quot;clicked&quot;, _btn_3d_cb, ad);
+evas_object_show(ad-&gt;bt3);
+</pre>
+
+<pre class="prettyprint">static void _btn_3d_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, _do_3d, ad-&gt;target);
+}
+</pre>
+
+<p>Next, we create the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> animation callback function, which is very similar to the rotate and zoom callback functions. To create the animation, we use the <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function, which allows you to rotate any Evas object on all three axes.</p>
+
+<pre class="prettyprint">static Eina_Bool
+_do_3d(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;Evas_Map *m;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;m = evas_map_new(4);
+&nbsp;&nbsp;&nbsp;evas_map_util_points_populate_from_object(m, obj);
+&nbsp;&nbsp;&nbsp;evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y + 60, 0);
+&nbsp;&nbsp;&nbsp;evas_object_map_set(obj, m);
+&nbsp;&nbsp;&nbsp;evas_object_map_enable_set(obj, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_map_free(m);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function takes the following arguments:</p>
+
+<ul>
+<li>The map to change</li>
+<li>The angle (0-360°) to rotate around the X axis</li>
+<li>The angle (0-360°) to rotate around the Y axis</li>
+<li>The angle (0-360°) to rotate around the Z axis</li>
+<li>The X coordinate of the rotation center</li>
+<li>The Y coordinate of the rotation center</li>
+<li>The Z coordinate of the rotation center</li>
+</ul>
+
+<p>Here, we rotate 360 degrees around each axis. The horizontal (X) rotation center is the X position of the target plus its width divided by 2. The vertical (Y) rotation center is the Y position of the target plus 60. The Z rotation center is 0.</p>
+
+<p>As with the rotation and zoom animations, we multiply the angles by the timeline position to gently rotate the target on each call to the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> callback function along the timeline.</p>
+
+ <h2 id="drop_bounce" name="drop_bounce">Creating Drop and Bounce Effects</h2>
+
+<p>To finish, we add drop and bounce effects to our buttons at application start. To do this, we create one timeline per button after creating the buttons in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
+
+<pre class="prettyprint">ecore_animator_timeline_add(2, _do_drop, ad-&gt;bt1);
+ecore_animator_timeline_add(2.3, _do_drop, ad-&gt;bt2);
+ecore_animator_timeline_add(2.5, _do_drop, ad-&gt;bt3);
+</pre>
+
+<p>We call the same <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> animation callback function for each timeline. In this callback, instead of using an Evas Map, we simply change the position of the target using the <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span> function:</p>
+
+<pre class="prettyprint">static Eina_Bool
+_do_drop(void *data, double pos)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *obj = data;
+&nbsp;&nbsp;&nbsp;int x, y, w, h;
+&nbsp;&nbsp;&nbsp;double frame = pos;
+&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>To get the bounce effect, we use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_pos_map()</span> function, which maps an input position from 0.0 to 1.0 along the timeline to a position on a different curve. The curve can be of different types, such as <span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and <span style="font-family: Courier New,Courier,monospace">BOUNCE</span>. This function takes the following arguments:</p>
+
+<ul>
+<li>The input position to map</li>
+<li>The mapping to use (<span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and so on)</li>
+<li>v1, which is the first parameter used by the mapping</li>
+<li>v2, which is the second parameter used by the mapping</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">ECORE_POS_MAP_BOUNCE</span> map we use starts at 0.0, then drops like a ball bouncing to the ground at 1.0, bouncing v2 times with a decay factor of v1. Here, we bounce 4 times with a decay factor of 2:</p>
+
+<pre class="prettyprint">frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+</pre>
+
+<p>This frame is used in the move function to create the animation. The value increases on each <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> call along the timeline, which produces a nice drop of the buttons from their initial position to 600 pixels on the vertical axis.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/edc_optimization_n.htm b/org.tizen.ui.guides/html/native/efl/edc_optimization_n.htm
new file mode 100755 (executable)
index 0000000..a7aa126
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edc_optimization_n.htm
@@ -0,0 +1,556 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Optimizing EDC</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#remove">Removing Unnecessary Parts</a></li>
+                       <li><a href="#text">Using Text instead of Textblock</a></li>
+                       <li><a href="#compress">Compressing Images and Embedding into EDC</a></li>
+                       <li><a href="#spacer">Using a Spacer</a></li>
+                       <li><a href="#border">Using the Image Border Feature</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li> 
+                </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Optimizing EDC</h1>
+
+
+<p>To optimize EDC:</p>
+<ul>
+<li><a href="#remove">Removing Unnecessary Parts</a></li>
+<li><a href="#text">Using Text instead of Textblock</a></li>
+<li><a href="#compress">Compressing Images and Embedding into EDC</a></li>
+<li><a href="#spacer">Using a Spacer</a></li>
+<li><a href="#border">Using the Image Border Feature</a></li>
+</ul>
+
+
+<h2 id="remove" name="remove">Removing Unnecessary Parts</h2>
+<p>When you create EDC, there can be obsolete and unnecessary parts. Since they have an effect on performance, remove them.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;new&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;old&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </td> 
+     <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;new&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
+
+
+
+
+
+
+
+
+
+
+
+
+
+       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </td> 
+       </tr>
+</tbody>
+</table>
+
+<h2 id="text" name="text">Using Text instead of Textblock</h2>
+
+<p>The following EDCs lead to the same result. However, use TEXT for the simple texts for high performance apart from using tags or multiple lines.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1">  
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;styles 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=&quot;Sans&quot; font_size=30 text_class=entry 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color=#0088AA style=shadow,bottom 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadow_color=#00000080 valign=0.5 ellipsis=1.0 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wrap=none align=center&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style: &quot;text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>  </td> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;simple&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: SHADOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 30;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>  </td> 
+       </tr>
+</tbody>
+</table>
+
+<h2 id="compress" name="compress">Compressing Images and Embedding into EDC</h2>
+
+<p>When you use a fixed image, it is more efficient to call an image within EDC. This save time in accessing the image data and is more suitable for the data size.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;<strong>images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;logo.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}</strong>
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;logo.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h2 id="spacer" name="spacer">Using a Spacer</h2>
+<p>When you use a part (such as Padding) which is invisible but has a size, using Spacer is more efficient. Since Spacer is invisible, it does not have the visible and color options.</p>
+
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>color: 0 0 0 0;</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;        
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>RECT</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>color: 0 0 0 0;</strong>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </td> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: <strong>SPACER</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;               
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;padding_left_top&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to:&quot;padding_right_bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}         
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </td> 
+       </tr>
+</tbody>
+</table>
+
+<h2 id="border" name="border">Using the Image Border Feature</h2>
+
+<p>When you use an image, you do not need to use a full size or larger size image. As you can see below, it is much more efficient to scale the image using a border option.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+    <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;test&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </td> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;test.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;test&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;test.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>image.border: 5 5 5 5</strong>;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> </td> 
+       </tr>
+        <tr> 
+     <td rowspan="1" colspan="1"> <p align="center"><img alt="Image before" src="../../images/image_before.png" /></p> </td> 
+     <td rowspan="1" colspan="1" class="middle"><p align="center"><img alt="Image after" src="../../images/image_after.png" /></p> </td> 
+       </tr>
+</tbody>
+</table>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script> 
+  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edc_part_block_n.htm b/org.tizen.ui.guides/html/native/efl/edc_part_block_n.htm
new file mode 100755 (executable)
index 0000000..4b2c935
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edc_part_block_n.htm
@@ -0,0 +1,2080 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>EDJE Data Collection Reference</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#edje_block">Edje Blocks</a></li>
+                               <li><a href="#group_block">Group Block</a></li>
+                               <li><a href="#part_block">Part Block</a></li>
+                               <li><a href="#program1">Program</a></li>
+                               </ul>
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">        
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>EDJE Data Collection Reference</h1> 
+  
+
+  
+  <h2 id="edje_block" name="edje_block">Edje Blocks</h2>
+
+<p>A typical Edje file starts with the following definitions:</p>
+
+<pre class="prettyprint">
+<a href="#Images">images</a> {}
+<a href="#Fonts">fonts</a> {}
+<a href="#Color_classes">color_classes</a> {}
+<a href="#Styles">styles</a> {}
+<a href="#Collections">collections</a> 
+{
+&nbsp;&nbsp;&nbsp;<a href="#Sounds">sounds</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-1&quot; 2300;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-2&quot; 2300;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sample">sample</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Name">name</a>: &quot;sound1&quot; RAW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sound_Source">source</a>: &quot;sound_file1.wav&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
+&nbsp;&nbsp;&nbsp;<a href="#group_block">group</a> {}
+}
+</pre>
+
+<p>To get more details above each sub-block, click on the links inside the collections block above.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This guide is based on original work from Andres Blanc (dresb) <a href="mailto:andresblanc@gmail.com">andresblanc@gmail.com</a>, it has been heavily expanded and edited since then.</td>
+</tr>
+</tbody>
+</table> 
+
+<h3 id="Images" name="Images">Images Block</h3>
+
+<pre class="prettyprint">
+images 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;filename1.ext&quot; COMP;
+&nbsp;&nbsp;&nbsp;image: &quot;filename2.ext&quot; LOSSY 99;
+&nbsp;&nbsp;&nbsp;set {}
+&nbsp;&nbsp;&nbsp;set {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">images</span> block is used to list each image file which are used in the theme. If any compression method is used, it is also defined here. Besides the document&#39;s root, additional <span style="font-family: Courier New,Courier,monospace;">images</span> blocks can be included inside other blocks, usually <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
+<p>This is included in each image file. The full path to the directory holding the images can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s &quot;<span style="font-family: Courier New,Courier,monospace;">-id</span>&quot; option. Available compression methods are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
+<li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
+<li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
+<li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded to the file, refer to the external file instead</li>
+</ul>
+</li>
+</ul>
+
+<h4>Images.set Block</h4>
+
+<pre class="prettyprint">
+set 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;image_name_used&quot;;
+&nbsp;&nbsp;&nbsp;image {}
+&nbsp;&nbsp;&nbsp;image {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">set</span> block is used to define an image with different content depending on their size. Besides the document&#39;s root, additional <span style="font-family: Courier New,Courier,monospace;">set</span> blocks can be included inside other blocks, normally <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [image name]</span>
+<p>Defines the name that refer to this image description.</p>
+</li>
+</ul>
+
+<h4>Images.set.image Block</h4>
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;filename4.ext&quot; COMP;
+&nbsp;&nbsp;&nbsp;size: 51 51 200 200;
+&nbsp;&nbsp;&nbsp;border: 0 0 0 0;
+&nbsp;&nbsp;&nbsp;border_scale_by: 0.0;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">image</span> block inside a <span style="font-family: Courier New,Courier,monospace;">set</span> block defines the characteristic of an image. Every block describes one image and the size rule to use it.</p>
+
+<p>For full documentation, see <a href="#description_image">Image</a>.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">image [image file] [compression method] (compression level)</span>
+<p>This is included in each image file. The full path to the directory holding the images can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-id</span> option. Available compression methods are:</p>
+       <ul>
+               <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
+               <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
+               <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [0-100]</span>: JPEG lossy compression with quality from 0 to 100</li>
+               <li><span style="font-family: Courier New,Courier,monospace;">USER</span>: Not embedded to the file, refer to the external file instead</li>
+       </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">size [minw] [minh] [maxw] [maxh]</span>
+<p>Defines the minimum and maximum size that selects the specified image.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span>
+<p>If set, the area (in pixels) of each side of the image is displayed as a fixed size border, from the side to inwards, preventing the corners from being changed on a resize.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span>
+<p>If border scaling is enabled then normally the OUTPUT border sizes (e.g. if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always the exact 3 columns of output, or at scale 2.0 they will be 6 columns, or 0.33 they will merge into a single column). This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make much higher resolution outputs possible by always using the highest resolution artwork and then runtime scaling it down. Valid values are: 0.0 or bigger (0.0 or 1.0 to turn it off).</p>
+</li>
+</ul>
+
+<h3 id="Fonts" name="Fonts">Fonts Block</h3>
+
+<pre class="prettyprint">
+fonts 
+{
+&nbsp;&nbsp;&nbsp;font: &quot;filename1.ext&quot; &quot;fontname&quot;;
+&nbsp;&nbsp;&nbsp;font: &quot;filename2.ext&quot; &quot;otherfontname&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">fonts</span> block is used to list each font file with an alias used later in the theme. As with the <span style="font-family: Courier New,Courier,monospace;">images</span> block, additional <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks can be included inside other blocks.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">font [font filename] [font alias]</span>
+<p>Defines each <span style="font-family: Courier New,Courier,monospace;">font file</span> and <span style="font-family: Courier New,Courier,monospace;">alias</span>, the full path to the directory containing the font files can be defined with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-fd</span> option.
+</p></li>
+</ul>
+
+<h3 id="Data" name="Data">Data Block</h3>
+
+<pre class="prettyprint">
+data 
+{
+&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
+&nbsp;&nbsp;&nbsp;file: &quot;otherkey&quot; &quot;filename.ext&quot;;
+}
+</pre>
+
+<p>This block behaves in the same way as the data block inside the parts, only the use-cases are different: this is useful for data that is for the whole theme, for instance license information, version, authors, and so on.</p>
+
+<h3 id="Color_classes" name="Color_classes">Color_classes Block</h3>
+
+<pre class="prettyprint">
+color_classes 
+{
+&nbsp;&nbsp;&nbsp;color_class 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;colorclassname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: [0-255] [0-255] [0-255] [0-255];
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">color_classes</span> block contains a list of one or more <span style="font-family: Courier New,Courier,monospace;">color_class</span> blocks. Each <span style="font-family: Courier New,Courier,monospace;">color_class</span> allows the designer to name an arbitrary group of colors to be used in the theme, the application can use that name to alter the color values at runtime.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [color class name]</span>
+<p>Sets the name for the color class, used as reference by both the theme and the application.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span>
+<p>The main color.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span>
+<p>Used as outline in text and textblock parts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span>
+<p>Used as shadow in text and textblock parts.</p>
+</li>
+</ul>
+
+<h3 id="Styles" name="Styles">Styles Block</h3>
+
+<pre class="prettyprint">
+styles 
+{
+&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;stylename&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;..default style properties..&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag: &quot;tagname&quot; &quot;..style properties..&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">styles</span> block contains a list of one or more <span style="font-family: Courier New,Courier,monospace;">style</span> blocks. A <span style="font-family: Courier New,Courier,monospace;">style</span> block is used to create style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;</span> for advanced TEXTBLOCK formatting.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [style name]</span>
+<p>The name of the style to be used as reference later in the theme.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">base [style properties string]</span>
+<p>The default style properties that is applied to the complete text. The available tags that can be used in the style property are the following:</p>
+   <ul>
+         <li>font</li>
+         <li>font_size
+        <table class="note">
+              <tbody>
+              <tr>
+                      <th class="note">Note</th>
+              </tr>
+              <tr>
+                      <td class="note">The font size is a point size, and the size of the rendered text is affected by the ppi information. The system basic ppi is 96, and you can change it on the Emulator menu.</td>
+              </tr>
+               </tbody>
+      </table>
+
+         </li>
+         <li>color</li>
+         <li>color_class</li>
+         <li>text_class</li>
+         <li>ellipsis</li>
+      <li>wrap</li>
+      <li>style</li>
+      <li>valign</li>
+      <li>align</li>
+         
+   </ul>
+
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">tag [tag name] [style properties string]</span>
+<p>Style to be applied only to text between style <span style="font-family: Courier New,Courier,monospace;">&lt;tags&gt;..&lt;/tags&gt;</span>. When creating paired tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span><span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>, a &#39;+&#39; sign must be added at the start of the style properties of the first part (<span style="font-family: Courier New,Courier,monospace;">&lt;bold&gt;</span>). If the second part (<span style="font-family: Courier New,Courier,monospace;">&lt;/bold&gt;</span>) is also defined, a &#39;-&#39; sign must be added to its style properties. This applies only to paired tags; single tags, like <span style="font-family: Courier New,Courier,monospace;">&lt;tab&gt;</span>, must not have a starting &#39;+&#39;.</p>
+   <ul>
+         <li>br</li>
+         <li>tab</li>
+         <li>b</li>
+         <li>match</li>
+   </ul>
+
+</li>
+</ul>
+
+<p>The following code is the sample of a text style for the text style:</p>
+
+<pre class="prettyprint">
+style 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;list_text_main&quot;;
+&nbsp;&nbsp;&nbsp;base: &quot;font=Tizen:style=Regular font_size=30 color=#ffffff ellipsis=1.0&quot;;
+&nbsp;&nbsp;&nbsp;tag: &quot;br&quot; &quot;\n&quot;;\
+&nbsp;&nbsp;&nbsp;tag: &quot;ps&quot; &quot;ps&quot;;\
+&nbsp;&nbsp;&nbsp;tag: &quot;tab&quot; &quot;\t&quot;;\
+&nbsp;&nbsp;&nbsp;tag: &quot;b&quot; &quot;+ font_weight=Bold&quot;;
+}
+</pre>
+
+
+
+<h3 id="Collections" name="Collections">Collections Block</h3>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;base_scale: 1.8;
+&nbsp;&nbsp;&nbsp;sounds 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-1&quot; 2300;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tone: &quot;tone-2&quot; 440;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sample 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;sound_file1&quot; RAW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;sound_file1.wav&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alias: &quot;anothername;&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: width height;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: width height;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scripts {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limits {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">collections</span> block is used to list the groups that compose the theme. Additional <span style="font-family: Courier New,Courier,monospace;">collections</span> blocks do not prevent overriding group names.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">sounds</span> block contains a list of one or more sound sample and tone items.</p>
+
+<h4>Base Scale</h4>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">base_scale: [scale factor]</span>
+<p>Information about the scale factor in the edc file.</p>
+</li>
+</ul>
+
+<p>Object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on the scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;.</p>
+
+<p>The size of a scalable object is multiplied with the device scale value. If the scalable object with the size 10 is created in a device with the scale 1.0, the size of the object is 20 in a device with the scale 2.0, and 40 in a device with the scale 4.0.</p>
+
+<p>For more information about supporting multiple screens in one edc, see the <a href="multiple_screens_n.htm">Multiple Screen Support</a> guide.</p>
+
+
+<h3 id="Sounds" name="Sounds">Sounds Block</h3>
+
+<p id="Tone"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">tone [tone name] [frequency]</span>
+<p>A sound of the given frequency.</p>
+</li>
+</ul>
+
+
+<h4 id="Sample" name="Sample">Sounds.sample Block</h4>
+
+<p>The sample block defines the sound sample.</p>
+
+<p id="Name"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">name [sample name] [compression type] (quality)</span>
+<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with <span style="font-family: Courier New,Courier,monospace;">edje_cc</span>&#39;s <span style="font-family: Courier New,Courier,monospace;">-sd</span> option. Valid types are:</p>
+       <ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">RAW</span>: Uncompressed</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">COMP</span>: Lossless compression</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">LOSSY [-0.1 - 1.0]</span>: Lossy compression with quality from 0.0 to 1.0</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">AS_IS</span>: No compression or encoding, write the file information as it is</li>
+       </ul>
+</li>
+</ul>
+
+<p id="Sound_Source"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">source [file name]</span>
+<p>The sound source file name (source can be mono/stereo WAV file. Only files with 44.1 KHz sample rate are supported for now).</p>
+</li>
+</ul>
+
+
+  <h2 id="group_block" name="group_block">Group Block</h2>
+
+<pre class="prettyprint">
+<a href="#Group">group </a>
+{
+&nbsp;&nbsp;&nbsp;<a href="#Group_Name">name</a>: &quot;nameusedbytheapplication&quot;;
+&nbsp;&nbsp;&nbsp;<a href="#Alias">alias</a>: &quot;anothername&quot;;
+&nbsp;&nbsp;&nbsp;<a href="#Min">min</a>: width height;
+&nbsp;&nbsp;&nbsp;<a href="#Max">max</a>: width height;
+&nbsp;&nbsp;&nbsp;<a href="#Parts">parts</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;definitions of parts&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Script">script</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Limits">limits</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Vertical">vertical</a>: &quot;limit_name&quot; height_barrier;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Horizontal">horizontal</a>: &quot;limit_name&quot; width_barrier;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Group_Data">data</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Items">items</a>: &quot;key&quot; &quot;value&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#File">file</a>: &quot;key&quot; &quot;file&quot;;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#Programs">programs</a> {}
+}
+</pre>
+
+<h3 id="Group" name="Group">Group</h3>
+
+<p>A <span style="font-family: Courier New,Courier,monospace;">group</span> block contains the list of parts and programs that compose a given Edje Object.</p>
+
+<ul>
+<li id="Group_Name"><span style="font-family: Courier New,Courier,monospace;">name [group name]</span>
+<p>The name that is used by the application to load the resulting Edje object and to identify the group to swallow in a GROUP part. If a group with the same name exists already it will be completely overridden by the new group.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">inherit_only [1 or 0]</span>
+<p>This flags the group as being used only for inheriting, which will inhibit <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> resolving of programs and parts that may not exist in this group, but are located in the group which is inheriting this group.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">inherit [parent group name]</span>
+<p>Parent group name for inheritance. Group <span style="font-family: Courier New,Courier,monospace;">inherit</span> is used to inherit any predefined group and change some property which belongs to <span style="font-family: Courier New,Courier,monospace;">part</span>, <span style="font-family: Courier New,Courier,monospace;">description</span>, <span style="font-family: Courier New,Courier,monospace;">items</span> or <span style="font-family: Courier New,Courier,monospace;">program</span>. The child group has the same properties as its parent group. If you specify the type again in an inherited part, it causes an error. </p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">script_recursion [1/0]</span>
+<p>This flag (1 or 0) determines whether to error on unsafe calls when recursively running Embryo programs. For example, running an Embryo script which calls EDC that has a <span style="font-family: Courier New,Courier,monospace;">script{}</span> block is unsafe, and the outer-most (first) Embryo stack is corrupted. It is strongly unadvisable to use this flag.</p></li>
+
+<li id="Alias"><span style="font-family: Courier New,Courier,monospace;">alias [additional group name]</span>
+<p>Additional name to be used as an identifier. Defining multiple aliases is supported.</p>
+</li>
+
+<li id="Min"><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span>
+<p>The minimum size for the container defined by the composition of the parts. It is not enforced.</p>
+</li>
+
+<li id="Max"><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span>
+<p>The maximum size for the container defined by the totality of the parts. It is not enforced.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">broadcast_signal [on/off]</span>
+<p>Signal gets automatically broadcasted to all sub group parts. Default is &quot;true&quot;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">orientation [AUTO/LTR/RTL]</span>
+<p>This defines GROUP orientation. It is useful if you want match interface orientation with language.</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace;">AUTO</span>: Follow system defaults</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">LTR</span>: Used in Left To Right Languages (Latin)</li>
+       <li><span style="font-family: Courier New,Courier,monospace;">RTL</span>: Used in Right To Left Languages (Hebrew, Arabic interface)</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span>
+<p>Changes the default value of <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> for every part in this group. Default is &quot;1&quot;, to maintain compatibility.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">program_source [source name]</span>
+<p>Change the default value of source for every program in the current group which is declared after this value is set. Defaults to an unset value to maintain compatibility. The name of source can be set on every program, but if the name can be defined in the group level, it reduces the effort to indicate it in every program.</p>
+</li>
+</ul>
+
+<h4 id="Parts" name="Parts">Group.parts</h4>
+
+<pre class="prettyprint">
+parts 
+{
+&nbsp;&nbsp;&nbsp;part {}
+&nbsp;&nbsp;&nbsp;part {}
+&nbsp;&nbsp;&nbsp;part {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">parts</span> group contain one or more <span style="font-family: Courier New,Courier,monospace;">part</span>. Each part describes a visual element and has a type: <span style="font-family: Courier New,Courier,monospace;">text</span>, <span style="font-family: Courier New,Courier,monospace;">image</span>, <span style="font-family: Courier New,Courier,monospace;">table</span>, etc.</p>
+
+<p>For complete documentation, see the <a href="#part_block">Part Block</a> guide.</p>
+
+<h4 id="Script" name="Script">Group.script</h4>
+
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>This block is used to inject embryo scripts to a given Edje theme and it functions in two modalities. When it is included inside a <span style="font-family: Courier New,Courier,monospace;">program</span> block, the script is executed every time the program is run, on the other hand, when included directly into a <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">part</span>, or <span style="font-family: Courier New,Courier,monospace;">description</span> block, it is executed once at the load time, in the load order.</p>
+
+<p>For more information, see the <a href="#program1">Program</a> guide.</p>
+
+<h4 id="Limits" name="Limits">Group.limits</h4>
+
+<pre class="prettyprint">
+limits 
+{
+&nbsp;&nbsp;&nbsp;vertical: &quot;limit_name&quot; height_barrier;
+&nbsp;&nbsp;&nbsp;horizontal: &quot;limit_name&quot; width_barrier;
+}
+</pre>
+
+<p>This block is used to trigger signals when the Edje object is resized.</p>
+<p id="Vertical"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">vertical [name] [height barrier]</span>
+<p>This sends a signal <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, signal <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> is sent. This limit is applied on the y axis and is given in pixels.</p>
+</li>
+</ul>
+
+<p id="Horizontal"></p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">horizontal [name] [width barrier]</span>
+<p>This sends a signal <span style="font-family: Courier New,Courier,monospace;">limit,name,over</span> when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, signal <span style="font-family: Courier New,Courier,monospace;">limit,name,below</span> is sent. This limit is applied on the x axis and is given in pixels.</p>
+</li>
+</ul>
+
+<h4 id="Group_Data" name="Group_Data">Group.data</h4>
+
+<pre class="prettyprint">
+data 
+{
+&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
+&nbsp;&nbsp;&nbsp;file: &quot;key2&quot; &quot;somefile&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">data</span> block is used to pass arbitrary parameters from the theme to the application. Unlike the <span style="font-family: Courier New,Courier,monospace;">images</span> and <span style="font-family: Courier New,Courier,monospace;">fonts</span> blocks, additional <span style="font-family: Courier New,Courier,monospace;">data</span> blocks can only be included inside the <span style="font-family: Courier New,Courier,monospace;">group</span> block.</p>
+
+<ul>
+<li id="Items"><span style="font-family: Courier New,Courier,monospace;">items: &quot;key&quot; &quot;value&quot;;</span>
+<p>Defines a new parameter, the value is the string specified next to it.</p>
+</li>
+<li id="File"><span style="font-family: Courier New,Courier,monospace;">file: &quot;key&quot; &quot;file&quot;;</span>
+<p>Defines a new parameter, the value is the contents of the specified file formatted as a single string of text. This property only works with plain text files.</p>
+</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">For genlist item styles, keys must be texts and icons, respectively for text parts and swallow parts; values must the names of the parts, separated with spaces.</td>
+</tr>
+</tbody>
+</table> 
+
+<h4 id="Programs" name="Programs">Group.programs</h4>
+
+<pre class="prettyprint">
+programs 
+{
+&nbsp;&nbsp;&nbsp;program {}
+&nbsp;&nbsp;&nbsp;program {}
+&nbsp;&nbsp;&nbsp;program {}
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">programs</span> group contain one or more <span style="font-family: Courier New,Courier,monospace;">program</span>.</p>
+
+<p>For more information about the program structure, see the <a href="#program1">Program</a> guide. </p>
+
+  
+  <h2 id="part_block" name="part_block">Part Block</h2> 
+  
+  <pre class="prettyprint">
+<a href="#part">part</a> 
+{
+&nbsp;&nbsp;&nbsp;// inherit all the fields of another part
+&nbsp;&nbsp;&nbsp;<a href="#inherit">inherit</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// name the part
+&nbsp;&nbsp;&nbsp;<a href="#part_name">name</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// set the part type
+&nbsp;&nbsp;&nbsp;<a href="#type">type</a>: IMAGE;
+&nbsp;&nbsp;&nbsp;// enable mouse events on the part
+&nbsp;&nbsp;&nbsp;<a href="#mouse_events">mouse_events</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// repeat mouse events to parts below the current one
+&nbsp;&nbsp;&nbsp;<a href="#repeat_events">repeat_events</a>: 0/1;
+&nbsp;&nbsp;&nbsp;<a href="#ignore_flags">ignore_flag</a>s: NONE;
+&nbsp;&nbsp;&nbsp;// whether the part sizes scale with the edje scaling factor
+&nbsp;&nbsp;&nbsp;<a href="#scale">scale</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// whether fully-transparent pixels are taken into account for collision detection
+&nbsp;&nbsp;&nbsp;<a href="#precise_is_inside">precise_is_inside</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// only render the area of the part that coincides with the given part
+&nbsp;&nbsp;&nbsp;<a href="#clip_to">clip_to</a>: &quot;anotherpart&quot;;
+&nbsp;&nbsp;&nbsp;// for group/textblock parts: swallow the given group (for textblock: goes below text)
+&nbsp;&nbsp;&nbsp;<a href="#source">source</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// same as source but goes on top of text
+&nbsp;&nbsp;&nbsp;<a href="#source2">source2</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// for textblock parts: swallow the given group below the mouse cursor when it hovers over the part
+&nbsp;&nbsp;&nbsp;<a href="#source3">source3</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// same as source3 but goes on top of the cursor
+&nbsp;&nbsp;&nbsp;<a href="#source4">source4</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// for textblock parts: swallow the given group below text anchors (&lt;a&gt;...&lt;/a&gt;)
+&nbsp;&nbsp;&nbsp;<a href="#source5">source5</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// same as source5 but goes on to top of the anchor
+&nbsp;&nbsp;&nbsp;<a href="#source6">source6</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;// add a shadow effect to the part
+&nbsp;&nbsp;&nbsp;<a href="#effect">effect</a>: SOFT_SHADOW (BOTTOM_RIGHT);
+&nbsp;&nbsp;&nbsp;// for textblock parts: makes the text editable, possibly with a specific behavior
+&nbsp;&nbsp;&nbsp;<a href="#entry_mode">entry_mode</a>: PASSWORD;
+&nbsp;&nbsp;&nbsp;// for textblock parts: change how the tex selection is triggered
+&nbsp;&nbsp;&nbsp;<a href="#select_mode">select_mode</a>: EXPLICIT;
+&nbsp;&nbsp;&nbsp;// for editable textblock parts: where to draw the (blinking) cursor
+&nbsp;&nbsp;&nbsp;<a href="#cursor_mode">cursor_mode</a>: UNDER;
+&nbsp;&nbsp;&nbsp;// for editable textblock parts: allow multiple lines
+&nbsp;&nbsp;&nbsp;<a href="#multiline">multiline</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// for textblock parts: accessibility features will be used
+&nbsp;&nbsp;&nbsp;<a href="#access">access</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// no-one uses that
+&nbsp;&nbsp;&nbsp;<a href="#pointer_mode">pointer_mode</a>: AUTOGRAB;
+&nbsp;&nbsp;&nbsp;<a href="#use_alternate_font_metrics">use_alternate_font_metrics</a>: 0/1;
+&nbsp;&nbsp;&nbsp;// remove the given program; useful when it was inherited
+&nbsp;&nbsp;&nbsp;<a href="#program_remove">program_remove</a>: &quot;programname&quot;;
+&nbsp;&nbsp;&nbsp;// remove the given part; useful when it was inherited
+&nbsp;&nbsp;&nbsp;<a href="#part_remove">part_remove</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// insert the current part below the given part, as if it were declared before
+&nbsp;&nbsp;&nbsp;<a href="#insert_before">insert_before</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// insert the current part above the given part, as if it were declared after
+&nbsp;&nbsp;&nbsp;<a href="#insert_after">insert_after</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// define a new part inside this one
+&nbsp;&nbsp;&nbsp;<a href="#part_part">part</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;part definition&gt;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#dragable">draggable </a>
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// confine the current part to the given part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_confine">confine</a>: &quot;another part&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// only start drag when it would have moved enough to be outside of the given part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_threshold">threshold</a>: &quot;another part&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// forward drag events to the given part instead of handling them
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_events">events</a>: &quot;another draggable part&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// enable horizontal drag of the part with steps each step_size or with steps_count steps
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_x">x</a>: 0/1 &lt;step_size&gt; &lt;steps_count&gt;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as x but vertical
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_y">y</a>: 1 0 100;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// for box or table parts
+&nbsp;&nbsp;&nbsp;<a href="#box_table">box/table</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// list of items
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items">items</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item">item</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// define item type, can only be GROUP
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_type">type</a>: GROUP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name the item
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_name">name</a>: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the source for this item, i.e. its contents
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_source">source</a>: &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// minimum horizontal and vertical item sizes (-1 for expand)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_min">min</a>: -1 -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// maximum horizontal and vertical item sizes (-1 for ignore)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_max">max</a>: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the item padding in pixels
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_padding">padding</a>: 2 2 2 2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_spread">spread</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the item alignment
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set a weight hint in the box for the given object
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_weight">weight</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the aspect ratio hint
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect">aspect</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect_mode">aspect_mode</a>: BOTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// number of columns and rows the item will take
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_span">span</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;<a href="#description">description</a> 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// inherit another description
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_inherit">inherit</a>: &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name the current description
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_state">state</a>: &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use another part as content of the current &quot;PROXY&quot; part (This description only works in the PROXY part and the current part mirrors the rendering content of the source part)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_source">source</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the part (in)visible (invisible parts emit no signals)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_visible">visible</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// emit a signal when the given dimension becomes zero or stops being zero
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_limit">limit</a>: WIDTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// horizontal and vertical alignment of the part inside its parent
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set that the part does not change size
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_fixed">fixed</a>: 0/1 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the minimum size for the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_min">min</a>: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// forcibly multiply the minimum sizes by the given factors
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_minmul">minmul</a>: 1.2 1.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the maximum size for the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_max">max</a>: 400 400;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make vertical and horizontal resizes happen in steps
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_step">step</a>: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// force aspect ratio to be kept between min and max between resizes
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect">aspect</a>: 0.8 1.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the dimension to which the aspect ratio applies
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect_preference">aspect_preference</a>: BOTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use the given color class which can be used to factor font colors
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color_class">color_class</a>: &quot;colorclassname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color">color</a>: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the color of the text&#39;s shadow
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color2">color2</a>: 0 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the color of the text&#39;s outline
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color3">color3</a>: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// define the positions of the top-left (rel1) and bottom-right (rel2) corners
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2">rel1/rel2</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make relative and offset use the given part for their positioning
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to">to</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// position the corner relative to the part given through to (0.0 being axis beginning, 1.0 being its end)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_relative">relative</a>: 0.1 0.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// add an absolute offset (in pixels) along each axis
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_offset">offset</a>: 10 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as to but only for the x axis
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_x">to_x</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// same as to but only for the y axis
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_y">to_y</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// settings specific to parts of type image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image">image</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// name (not path) of the regular image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_normal">normal</a>: &quot;imagename&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// image to use while transitioning to the normal image; use several times to create animations
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_tween">tween</a>: &quot;imagename2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the number of pixels that make up each border of the image, i.e. are not resized when the image is
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border">border</a>: 4 4 4 4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// hide, strip from its alpha or show (default) the non-border part of the image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_middle">middle</a>: DEFAULT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale_by">border_scale_by</a>: 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to scale the border or not
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale">border_scale</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_scale_hint">scale_hint</a>: STATIC;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set how the image is going to fill its part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill">fill</a>: 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to smooth the image when scaling it
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_smooth">smooth</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_spread">spread</a>: ??;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// whether to scale or tile to fit when resizing the image is needed
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_type">type</a>: SCALE/TILE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// only display the part of the image that is below and to the right of the given point
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin">origin</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify top-left point as relative coordinates
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_relative">relative</a>: 0.1 0.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify top-left point as a pixel offset
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_offset">offset</a>: 10 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify bottom-right point as relative coordinates
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size">size</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_relative">relative</a>: 0.1 0.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// specify bottom-right point as a pixel offset
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_offset">offset</a>: 10 10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// settings specific to parts of type text and textblock
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text">text</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the part&#39;s text
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text">text</a>: &quot;some text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s font
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_font">font</a>: &quot;Tizen Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s size
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size">size</a>: 14;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the text&#39;s class which can be used to factor font and font-size settings
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_class">text_class</a>: &quot;classname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// use the styles defined in stylename
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_style">style</a>: &quot;stylename&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// for textblocks in password mode, replace characters to hide with this string
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_repch">repch</a>: &quot;*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the min and max font sizes allowed when resizing (default is 0 0, i.e. unrestricted)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size_range">size_range</a>: 6 18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// increase font size as much as possible while still remaining in the container for both axis
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_fit">fit</a>: 0/1 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the min size of the container equal to the min size of the current text (0 0 by default)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_min">min</a>: 0/1 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the max size of the container equal to the max size of the current text (0 0 by default)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_max">max</a>: 0/1 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of the text
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// re-use the text of another part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_source">text_source</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// when text is too long to fit, relative position at which to cut the text and put an ellipsis (&quot;...&quot;)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_ellipsis">ellipsis</a>: 0.9;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// settings specific to parts of type box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box">box</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set how children while be arranged in the box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_layout">layout</a>: horizontal_homogeneous;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the padding between items of the box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_padding">padding</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the box&#39; min size be the min size of its elements (i.e. make it shrinkable as much as its items)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_min">min</a>: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table">table</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make items homogeneous
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_homogeneous">homogeneous</a>: NONE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the vertical and horizontal alignments of box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_align">align</a>: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the padding between items of the box
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_padding">padding</a>: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// make the table&#39;s min size be the min size of its elements (i.e. make it shrinkable as much as its items)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_min">min</a>: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map">map</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_light">light</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_on">on</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_smooth">smooth</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_alpha">alpha</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_backface_cull">backface_cull</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_on">perspective_on</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_color">color</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation">rotation</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_center">center</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_x">x</a>: 45;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_y">y</a>: 120;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_z">z</a>: 90;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_zplane">zplane</a>: 0/1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_focal">focal</a>: 20;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// simpler syntax to create transitions to the current part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link">link</a> 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link_base">base</a>: &quot;edje,signal&quot; &quot;edje&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h3 id="part" name="part">Part</h3>
+
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;mouse_events:  1;
+&nbsp;&nbsp;&nbsp;repeat_events: 0;
+&nbsp;&nbsp;&nbsp;ignore_flags: NONE;
+&nbsp;&nbsp;&nbsp;clip_to: &quot;anotherpart&quot;;
+&nbsp;&nbsp;&nbsp;source:  &quot;groupname&quot;;
+&nbsp;&nbsp;&nbsp;pointer_mode: AUTOGRAB;
+&nbsp;&nbsp;&nbsp;use_alternate_font_metrics: 0;
+
+&nbsp;&nbsp;&nbsp;dragable {}
+&nbsp;&nbsp;&nbsp;items {}
+&nbsp;&nbsp;&nbsp;description {}
+}
+</pre>
+
+<p>Parts are used to represent the most basic design elements of the theme, for example, a part can represent a line in a border or a label on a button.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">inherit [part name]</span><a class="anchor" id="inherit"></a>
+<p>Copies all attributes except part name from referenced part into current part. All existing attributes, except part name, are overwritten.</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">When inheriting any parts, descriptions without state names are not allowed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">program_remove [program name] (program name) (program name) ...</span><a class="anchor" id="program_remove"></a>
+<p>Removes the listed programs from an inherited group. Removing non-existing programs is not allowed.</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This breaks program sequences if a program in the middle of the sequence is removed.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">part_remove [part name] (part name) (part name) ...</span><a class="anchor" id="part_remove"></a>
+<p>Removes the listed parts from an inherited group. Removing non-existing parts is not allowed.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">name [part name]</span><a class="anchor" id="part_name"></a>
+<p>The part&#39;s name is used as reference in the theme&#39;s relative positioning system, by programs and in some cases by the application. It must be unique within the group.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">type [TYPE]</span><a class="anchor" id="type"></a>
+<p>Sets the type. This is set to IMAGE by default. Valid types are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">RECT</span>: Rectangle object in the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TEXT</span>: Simple text</li>
+<li><span style="font-family: Courier New,Courier,monospace;">IMAGE</span>: Image area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>: Area where you can add the object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span>: Complex text with multiple lines, mark-up elements, and such.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">GROUP</span>: Part which can include other groups in the same group.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOX</span>: Container object as a container. It has a row or column.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: Container object as a container. It has a row and column.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PROXY</span>: Clone of another part in the same group. It shares the memory of the source part.</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">SPACER</span>: Rectangle object, but invisible. Recommended to padding because it does not allocate any memory.</li>
+
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">part [part declaration]</span><a class="anchor" id="part_part"></a>
+<p>Nested parts adds hierarchy to Edje. Nested part inherits its location relatively to the parent part. To declare a nested part create a new part within current part declaration. Define parent part name before adding nested parts. </p>
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;parent_rect&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description {}
+&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;nested_rect&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">insert_before [another part&#39;s name]</span><a class="anchor" id="insert_before"></a>
+<p>The part&#39;s name which this part is inserted before. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer more than one by <span style="font-family: Courier New,Courier,monospace;">insert_before</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">insert_after [another part&#39;s name]</span><a class="anchor" id="insert_after"></a>
+<p>The part&#39;s name which this part is inserted after. One part cannot have both <span style="font-family: Courier New,Courier,monospace;">insert_before</span> and <span style="font-family: Courier New,Courier,monospace;">insert_after</span>. One part cannot refer more than one by <span style="font-family: Courier New,Courier,monospace;">insert_after</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">mouse_events [1 or 0]</span><a class="anchor" id="mouse_events"></a>
+<p>Specifies whether the part emits signals, although it is named <span style="font-family: Courier New,Courier,monospace;">mouse_events</span>. Disabling it (0) prevents the part from emitting signal. It is set to 1 by default, or to the value set to <span style="font-family: Courier New,Courier,monospace;">mouse_events</span> at the group level, if any.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">repeat_events [1 or 0]</span><a class="anchor" id="repeat_events"></a>
+<p>Specifies whether a part echoes a mouse event to other parts below the pointer (1), or not (0). It is set to 0 by default.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">ignore_flags [FLAG] ...</span><a class="anchor" id="ignore_flags"></a>
+<p>Specifies whether events with the given flags are ignored, i.e., do not emit signals to the parts. Multiple flags must be separated by spaces, the effect is ignoring all events with one of the flags specified. Possible flags are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: Event is handled properly (default value)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ON_HOLD</span>: Event is not handled or passed in this part</li>
+
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">scale [1 or 0]</span><a class="anchor" id="scale"></a>
+<p>Specifies whether the part scales its size with an Edje scaling factor. By default scale is off (0) and the default scale factor is 1.0 which means no scaling. This is used to scale properties such as font size, min/max size of the part, and it can also be used to scale based on DPI of the target device. The reason to be selective is that some parts are scaled well, others are not, so choose what works best.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">pointer_mode [MODE]</span><a class="anchor" id="pointer_mode"></a>
+<p>Sets the mouse pointer behavior for a given part. The default value is AUTOGRAB. Available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">AUTOGRAB</span>, when the part is clicked and the button remains pressed, the part is the source of all future mouse signals emitted, even outside the object, until the button is released.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">NOGRAB</span>, the effect is limited to the part&#39;s container.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">precise_is_inside [1 or 0]</span><a class="anchor" id="precise_is_inside"></a>
+<p>Enables precise point collision detection for the part, which is more resource-intensive. It is disabled by default.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">use_alternate_font_metrics [1 or 0]</span><a class="anchor" id="use_alternate_font_metrics"></a>
+<p>Only affects text and textblock parts, when enabled Edje uses different size measurement functions. It is disabled by default.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">clip_to [another part&#39;s name]</span><a class="anchor" id="clip_to"></a>
+<p>Only renders the area of part that coincides with another part&#39;s container. Overflowing content is not displayed. Note that the part being clipped to can only be a rectangle part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span><a class="anchor" id="source"></a>
+<p>Only available to GROUP or TEXTBLOCK parts. Swallows the specified group into the part&#39;s container if it is a GROUP. If TEXTBLOCK it is used for the group to be loaded and used for selection display UNDER the selected text. <span style="font-family: Courier New,Courier,monospace;">source2</span> is used for on top of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source2</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source2 [another group&#39;s name]</span><a class="anchor" id="source2"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for selection display OVER the selected text. <span style="font-family: Courier New,Courier,monospace;">source</span> is used for under of the selected text, if <span style="font-family: Courier New,Courier,monospace;">source</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source3 [another group&#39;s name]</span><a class="anchor" id="source3"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for cursor display UNDER the cursor position. <span style="font-family: Courier New,Courier,monospace;">source4</span> is used for over the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source4 [another group&#39;s name]</span><a class="anchor" id="source4"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for cursor display OVER the cursor position. <span style="font-family: Courier New,Courier,monospace;">source3</span> is used for under the cursor text, if <span style="font-family: Courier New,Courier,monospace;">source4</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source5 [another group&#39;s name]</span><a class="anchor" id="source5"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for anchors display UNDER the anchor position. <span style="font-family: Courier New,Courier,monospace;">source6</span> is used for over the anchors text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source6 [another group&#39;s name]</span><a class="anchor" id="source6"></a>
+<p>Only available to TEXTBLOCK parts. It is used for the group to be loaded and used for anchor display OVER the anchor position. <span style="font-family: Courier New,Courier,monospace;">source5</span> is used for under the anchor text, if <span style="font-family: Courier New,Courier,monospace;">source6</span> is specified.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">effect [effect] </span> (shadow direction)<a class="anchor" id="effect"></a>
+<p>Apply the selected outline, shadow, or glow effect to &quot;textblock&quot; (take care that this effect only works for the textblock). The available effects are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOFT_OUTLINE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">OUTLINE_SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FAR_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FAR_SOFT_SHADOW</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">GLOW</span></li>
+</ul>
+
+<p>The available shadow directions definitions are (default is <span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span>):</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_RIGHT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTTOM_LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP_LEFT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TOP_RIGHT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">RIGHT</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">entry_mode [mode]</span><a class="anchor" id="entry_mode"></a>
+<p>Sets the edit mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>:
+<p>The textblock is non-editable.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAIN</span>:
+<p>The textblock is non-editable, but selectable.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EDITABLE</span>:
+<p>The textblock is editable.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">PASSWORD</span>:
+<p>The textblock is editable if the Edje object has the keyboard focus and the part has the Edje focus (or selectable always regardless of focus). In the event of password mode, not selectable and all text chars replaced with *&#39;s but editable and pastable.</p></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">select_mode [mode]</span><a class="anchor" id="select_mode"></a>
+<p>Sets the selection mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">DEFAULT</span>, selection mode is what you would expect on any desktop. Press mouse, drag and release to end.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EXPLICIT</span>, this mode requires the application controlling the Edje object has to explicitly begin and end selection modes, and the selection itself is draggable at both ends.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">cursor_mode [mode]</span><a class="anchor" id="cursor_mode"></a>
+<p>Sets the cursor mode for a textblock part. The available modes are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">UNDER</span>, the cursor draws below the character pointed at. That is the default.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BEFORE</span>, the cursor is drawn as a vertical line before the current character, just like many other GUI toolkits handle it.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">multiline [1 or 0]</span><a class="anchor" id="multiline"></a>
+<p>It causes a textblock that is editable to allow multiple lines for editing.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">access [1 or 0]</span><a class="anchor" id="access"></a>
+<p>Specifies whether the part uses accessibility feature (1), or not (0). It is set to 0 by default.</p>
+</li>
+</ul>
+
+<h3 id="dragable" name="dragable">Draggable</h3>
+
+<pre class="prettyprint">
+dragable 
+{
+&nbsp;&nbsp;&nbsp;confine: &quot;another part&quot;;
+&nbsp;&nbsp;&nbsp;threshold: &quot;another part&quot;;
+&nbsp;&nbsp;&nbsp;events:  &quot;another draggable part&quot;;
+&nbsp;&nbsp;&nbsp;x: 0 0 0;
+&nbsp;&nbsp;&nbsp;y: 0 0 0;
+}
+</pre>
+
+<p>When this block is used the part can be dragged around the interface, do not confuse with external drag and drop. By default Edje (and most applications) attempts to use the minimal size possible for a draggable part. If the min property is not set in the description the part is (most likely) set to 0px width and 0px height, thus invisible.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">x [enable/disable] [step] [count]</span><a class="anchor" id="dragable_x"></a>
+<p>Used to set up dragging events for the X axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits movement to values divisible by it, causing the part to jump from position to position. If step is set to 0 it is calculated as width of confine part divided by count.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">y [enable/disable] [step] [count]</span><a class="anchor" id="dragable_y"></a>
+<p>Used to set up dragging events for the Y axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits movement to values divisible by it, causing the part to jump from position to position. If step is set to 0 it is calculated as height of confine part divided by count.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">confine [another part&#39;s name]</span><a class="anchor" id="dragable_confine"></a>
+<p>Limits the movement of the dragged part to another part&#39;s container. Set a min size for the part, or the dragged object will not show up.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">threshold [another part&#39;s name]</span><a class="anchor" id="dragable_threshold"></a>
+<p>When set, the movement of the dragged part can only start when it get moved enough to be outside of the threshold part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">events [another draggable part&#39;s name]</span><a class="anchor" id="dragable_events"></a>
+<p>Causes the part to forward the drag events to another part, thus ignoring them for itself.</p>
+</li>
+
+</ul>
+
+<h3 id="box_table" name="box_table">Box/table</h3>
+
+<h4 id="box_table_items" name="box_table_items">Items</h4>
+
+<pre class="prettyprint">
+box/table 
+{
+&nbsp;&nbsp;&nbsp;items 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some source&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: -1 -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 1 1 2 2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some other source&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;some name&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>On a BOX part, this block is used to set other groups as elements of the box. These can be mixed with external objects set by the application through the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_box*()</span> functions.</p>
+
+<h5 id="box_table_items_item" name="box_table_items_item">Item</h5>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">type [item type]</span><a class="anchor" id="box_table_items_item_type"></a>
+<p>Sets the type of the object this item holds. The supported type is: </p>
+       <ul>
+       <li><span style="font-family: Courier New,Courier,monospace;">GROUP</span> (default)</li>
+       </ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">name [name for the object]</span><a class="anchor" id="box_table_items_item_name"></a>
+<p>Sets the name of the object via <span style="font-family: Courier New,Courier,monospace;">evas_object_name_set()</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [another group&#39;s name]</span><a class="anchor" id="box_table_items_item_source"></a>
+<p>Sets the group this object is made of.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [width] [height]</span><a class="anchor" id="box_table_items_item_min"></a>
+<p>Sets the minimum size hints for this object. </p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">Must be -1 to get expand behavior.</td>
+</tr>
+</tbody>
+</table> 
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">spread [width] [height]</span><a class="anchor" id="box_table_items_item_spread"></a>
+<p>Replicates the item in a rectangle of size width x height box starting from the defined position of this item. The default value is 1 1;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">prefer [width] [height]</span><a class="anchor" id="box_table_items_item_prefer"></a>
+<p>Sets the preferred size hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">max [width] [height]</span><a class="anchor" id="box_table_items_item_max"></a>
+<p>Sets the maximum size hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">padding [left] [right] [top] [bottom]</span><a class="anchor" id="box_table_items_item_padding"></a>
+<p>Sets the padding hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [x] [y]</span><a class="anchor" id="box_table_items_item_align"></a>
+<p>Sets the alignment hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">weight [x] [y]</span><a class="anchor" id="box_table_items_item_weight"></a>
+<p>Sets the weight hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">aspect [w] [h]</span><a class="anchor" id="box_table_items_item_aspect"></a>
+<p>Sets the aspect width and height hints for this object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">aspect_mode [mode]</span><a class="anchor" id="box_table_items_item_aspect_mode"></a>
+<p>Sets the aspect control hints for this object. The available hints are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">NEITHER</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">options [extra options]</span><a class="anchor" id="box_table_items_item_options"></a>
+<p>Sets extra options for the object.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">position [col] [row]</span><a class="anchor" id="box_table_items_item_position"></a>
+<p>Sets the position this item has in the table. This is required for parts of type TABLE.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">span [col] [row]</span><a class="anchor" id="box_table_items_item_span"></a>
+<p>Sets how many columns and rows this item uses. The default value is 1 1.</p>
+</li>
+
+</ul>
+
+<h3 id="description" name="description">Description</h3>
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;inherit: &quot;another_description&quot; INDEX;
+&nbsp;&nbsp;&nbsp;state: &quot;description_name&quot; INDEX;
+&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;min: 0 0;
+&nbsp;&nbsp;&nbsp;max: -1 -1;
+&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;fixed: 0 0;
+&nbsp;&nbsp;&nbsp;step: 0 0;
+&nbsp;&nbsp;&nbsp;aspect: 1 1;
+
+&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>Every part can have one or more description blocks. Each description is used to define style and layout properties of a part in a given &quot;state&quot;.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">inherit [another description&#39;s name] [another description&#39;s index]</span><a class="anchor" id="description_inherit"></a>
+<p>Thee description inherits all the properties from the named description. The properties defined in this part override the inherited properties, reducing the amount of necessary code for simple state changes. Note: inheritance in Edje is single level only.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [another part&#39;s name]</span><a class="anchor" id="description_source"></a>
+<p>Causes the part to use another part&#39;s content as the content of this part. This works only with PROXY part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">state [name for the description] [index]</span><a class="anchor" id="description_state"></a>
+<p>Sets a name used to identify a description inside a given part. Multiple descriptions are used to declare different states of the same part, like &quot;clicked&quot; or &quot;invisible&quot;. All state declarations are also coupled with an index number between 0.0 and 1.0. All parts must have at least one description named &quot;default 0.0&quot;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">visible [0 or 1]</span><a class="anchor" id="description_visible"></a>
+<p>Takes a Boolean value specifying whether part is visible (1) or not (0). Non-visible parts do not emit signals. The default value is 1.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">limit [mode]</span><a class="anchor" id="description_limit"></a>
+<p>Emits a signal when the part size changes from zero or to a zero (<span style="font-family: Courier New,Courier,monospace;">limit,width,over</span>, <span style="font-family: Courier New,Courier,monospace;">limit,width,zero</span>). By default no signal are emitted. Valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">WIDTH</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HEIGHT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [X axis] [Y axis]</span><a class="anchor" id="description_align"></a>
+<p>When the displayed object&#39;s size is smaller or bigger than its container, this property moves it relatively along both axis inside its container. &quot;0.0&quot; means left/top edges of the object touching container&#39;s respective ones, and &quot;1.0&quot; stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is &quot;0.5 0.5&quot;. For a more detailed explanation, see the <a href="edc_positioning_n.htm#align_size_hint">Align Size Hint</a>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">fixed [width, 0 or 1] [height, 0 or 1]</span><a class="anchor" id="description_fixed"></a>
+<p>Sets the minimum size calculation. See <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_calc()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_object_size_min_restricted_calc()</span>. This tells the min size calculation routine that this part does not change size in width or height (1 for it does not, 0 for it does), so the routine does not try to expand or contract the part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [width] [height] or SOURCE</span><a class="anchor" id="description_min"></a>
+<p>Sets the minimum size of the state. When min is defined to SOURCE, it looks at the original image size and enforces its minimal size to match at least the original one. The part must be an IMAGE or a GROUP part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">minmul [width multiplier] [height multiplier]</span><a class="anchor" id="description_minmul"></a>
+<p>A multiplier forcibly applied to whatever minimum size is only during minimum size calculation.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">max [width] [height] or SOURCE</span><a class="anchor" id="description_max"></a>
+<p>The maximum size of the state. A size of -1.0 means that it is ignored in one direction. When max is set to SOURCE, Edje enforces the part to be not more than the original image size. The part must be an IMAGE part.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">step [width] [height]</span><a class="anchor" id="description_step"></a>
+<p>Restricts resizing of each dimension to values divisible by its value. This causes the part to jump from value to value while resizing. The default value is &quot;0 0&quot; which disables stepping.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">aspect [min] [max]</span><a class="anchor" id="description_aspect"></a>
+<p>Normally width and height can be resized to any values independently. The aspect property forces the width to height ratio to be kept between the minimum and maximum set. For example, &quot;1.0 1.0&quot; increases the width a pixel for every pixel added to height. The default value is &quot;0.0 0.0&quot; which disables aspect. For a more detailed explanation, see the <a href="edc_positioning_n.htm#min_size_hint">Min Size Hint</a> .</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">aspect_preference [DIMENSION]</span><a class="anchor" id="description_aspect_preference"></a>
+<p>Set the dimensions to which the &quot;aspect&quot; property applies. Available options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">BOTH</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOURCE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+</ul>
+<p>For a more detailed explanation, see <a href="edc_positioning_n.htm#min_size_hint">Min Size Hint</a>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color_class [color class name]</span><a class="anchor" id="description_color_class"></a>
+<p>The part uses the color values of the named <span style="font-family: Courier New,Courier,monospace;">color_class</span>, these values can be overridden by the &quot;color&quot;, &quot;color2&quot; and &quot;color3&quot; properties.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color"></a>
+<p>Sets the main color to the specified values (between 0 and 255).</p>
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The textblock part is not affected by the color description. Set the color in the text style.</td>
+</tr>
+</tbody>
+</table> 
+
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color2 [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color2"></a>
+<p>Sets the text shadow color to the specified values (0 to 255).</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color3 [red] [green] [blue] [alpha]</span><a class="anchor" id="description_color3"></a>
+<p>Sets the text outline color to the specified values (0 to 255).</p>
+</li>
+
+</ul>
+
+<h4 id="description_rel1_2" name="description_rel1_2">Rel1/rel2</h4>
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:     0   0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:    -1  -1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The rel1 and rel2 blocks are used to define the position of each corner of the part&#39;s container. With rel1 being the left-up corner and rel2 being the right-down corner.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span><a class="anchor" id="description_rel1_2_relative"></a>
+<p>Moves the corner to a relative position inside the container of the relative &quot;to&quot; part. Values from 0.0 (0%, beginning) to 1.0 (100%, end) of each axis.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_rel1_2_offset"></a>
+<p>Affects the corner position a fixed number of pixels along each axis.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">to [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to"></a>
+<p>Positions the corner relatively to another part&#39;s container. Setting to &quot;&quot; resets this value for inherited parts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">to_x [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to_x"></a>
+<p>Positions the corner relatively to the X axis of another part&#39;s container. This affects the first parameter of &quot;relative&quot;. Setting to &quot;&quot; resets this value for inherited parts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">to_y [another part&#39;s name]</span><a class="anchor" id="description_rel1_2_to_y"></a>
+<p>Positions the corner relatively to the Y axis of another part&#39;s container. This affects the second parameter of &quot;relative&quot;. Setting to &quot;&quot; resets this value for inherited parts.</p>
+</li>
+
+</ul>
+
+<h4 id="description_image" name="description_image">Image</h4>
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;filename.ext&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filename2.ext&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filenameN.ext&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:  left right top bottom;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle:  0/1/NONE/DEFAULT/SOLID;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">normal [image&#39;s filename]</span><a class="anchor" id="description_image_normal"></a>
+<p>Name of image to be used as previously declared in the images block. In an animation, this is the first and last image displayed. It is required in any image part</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">tween [image&#39;s filename]</span><a class="anchor" id="description_image_tween"></a>
+<p>Name of an image to be used in an animation loop, an image block can have none, one or multiple tween declarations. Images are displayed in the order they are listed, during the transition to the state they are declared in; the &quot;normal&quot; image is the final state.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">border [left] [right] [top] [bottom]</span><a class="anchor" id="description_image_border"></a>
+<p>Sets the area (in pixels) of each side of the image is displayed as a fixed size border, from the side -&gt; inwards, preventing the corners from being changed on a resize.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">middle [mode]</span><a class="anchor" id="description_image_middle"></a>
+<p>If border is set, this value tells Edje if the rest of the image (not covered by the defined border) displayed or not or be assumed to be solid (without alpha). The default value is <span style="font-family: Courier New,Courier,monospace;">1/DEFAULT</span>. The available values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">1</span> or <span style="font-family: Courier New,Courier,monospace;">DEFAULT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SOLID</span> (strip alpha from the image over the middle zone)</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">border_scale_by [value]</span><a class="anchor" id="description_image_border_scale_by"></a>
+<p>If border scaling is enabled then normally the OUTPUT border sizes (e.g. if 3 pixels on the left edge are set as a border, then normally at scale 1.0, those 3 columns are always exactly 3 columns of output, or at scale 2.0 they are 6 columns, or 0.33 they merge into a single column). This property multiplies the input scale factor by this multiplier, allowing the creation of supersampled borders to make higher resolution outputs possible by always using the highest resolution artwork and then runtime scaling it down. Value can be: 0.0 or bigger (0.0 or 1.0 to turn it off)</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">border_scale [0/1]</span><a class="anchor" id="description_image_border_scale"></a>
+<p>Tells Edje if the border is scaled by the object/global Edje scale factors.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">scale_hint [mode]</span><a class="anchor" id="description_image_scale_hint"></a>
+<p>Sets the evas image scale hint letting the engine more effectively save cached copies of the scaled image if it makes sense. Valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">0</span> or <span style="font-family: Courier New,Courier,monospace;">NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DYNAMIC</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">STATIC</span></li>
+</ul>
+</li>
+
+</ul>
+
+<h5 id="description_image_fill" name="description_image_fill">Image.fill</h5>
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SCALE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 0-1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The fill method is an optional block that defines the way an IMAGE part is going to be displayed inside its container. It can be used for tiling (repeating the image) or displaying only part of an image. See <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> documentation for more details.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">smooth [0 or 1]</span><a class="anchor" id="description_image_fill_smooth"></a>
+<p>The smooth property takes a boolean value to decide if the image will be smoothed on scaling (1) or not (0). The default value is 1.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">spread</span><a class="anchor" id="description_image_fill_spread"></a>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">type [fill type]</span><a class="anchor" id="description_image_fill_type"></a>
+<p>Sets the image fill type. The part parameter &quot;min&quot; must be set, it is size of tiled image. If parameter &quot;max&quot; set tiled area has the size accordingly &quot;max&quot; values. SCALE is default type. Valid values are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">SCALE</span>, image is scaled accordingly the value of the parameters &quot;relative&quot; and &quot;offset&quot; from &quot;origin&quot; and &quot;size&quot; blocks.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TILE</span>, image is tiled accordingly parameters value &quot;relative&quot; and &quot;offset&quot; from &quot;origin&quot; and &quot;size&quot; blocks.</li>
+</ul>
+</li>
+
+</ul>
+
+<h6 id="description_image_fill_origin" name="description_image_fill_origin">Image.fill.origin</h6>
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The origin block is used to place the starting point, inside the displayed element, that is used to render the tile. By default, the origin is set at the element&#39;s left-up corner.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">relative [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_origin_relative"></a>
+<p>Sets the starting point relatively to displayed element&#39;s content.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_origin_offset"></a>
+<p>Affects the starting point a fixed number of pixels along each axis.</p>
+</li>
+
+</ul>
+
+<h6 id="description_image_fill_size" name="description_image_fill_size">Image.fill.size</h6>
+
+<pre class="prettyprint">
+image 
+{
+&nbsp;&nbsp;&nbsp;fill 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -1 -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The size block defines the tile size of the content that are displayed.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">relative [width] [height]</span><a class="anchor" id="description_image_fill_size_relative"></a>
+<p>Takes a pair of decimal values that represent the percentage of the original size of the element. For example, &quot;0.5 0.5&quot; represents half the size, while &quot;2.0 2.0&quot; represents the double. The default value is &quot;1.0 1.0&quot;.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">offset [X axis] [Y axis]</span><a class="anchor" id="description_image_fill_size_offset"></a>
+<p>Affects the size of the tile a fixed number of pixels along each axis.</p>
+</li>
+
+</ul>
+
+<h4 id="description_text" name="description_text">Text</h4>
+
+<pre class="prettyprint">
+text 
+{
+&nbsp;&nbsp;&nbsp;text: &quot;some string of text to display&quot;;
+&nbsp;&nbsp;&nbsp;font: &quot;font_name&quot;;
+&nbsp;&nbsp;&nbsp;size: SIZE;
+&nbsp;&nbsp;&nbsp;text_class: &quot;class_name&quot;;
+&nbsp;&nbsp;&nbsp;fit: horizontal vertical;
+&nbsp;&nbsp;&nbsp;min: horizontal vertical;
+&nbsp;&nbsp;&nbsp;max: horizontal vertical;
+&nbsp;&nbsp;&nbsp;align: X-axis Y-axis;
+&nbsp;&nbsp;&nbsp;source: &quot;part_name&quot;;
+&nbsp;&nbsp;&nbsp;text_source: &quot;text_part_name&quot;;
+&nbsp;&nbsp;&nbsp;style: &quot;stylename&quot;;
+}
+</pre>
+
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">text [a string of text, or nothing]</span><a class="anchor" id="description_text_text"></a>
+<p>Sets the default content of a text part, normally the application is the one changing its value.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">text_class [text class name]</span><a class="anchor" id="description_text_text_class"></a>
+<p>Similar to <span style="font-family: Courier New,Courier,monospace;">color_class</span>, this is the name used by the application to alter the font family and size at runtime.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">font [font alias]</span><a class="anchor" id="description_text_font"></a>
+<p>This sets the font family to one of the aliases set up in the &quot;fonts&quot; block. Can be overridden by the application.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">style [the style name]</span><a class="anchor" id="description_text_style"></a>
+<p>Causes the part to use the default style and tags defined in the &quot;style&quot; block with the specified name.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">repch [the replacement character string]</span><a class="anchor" id="description_text_repch"></a>
+<p>If this is a textblock and is in PASSWORD mode this string is used to replace every character to hide the details of the entry. Normally * is used, but you can use anything you like.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">size [font size in points (pt)]</span><a class="anchor" id="description_text_size"></a>
+<p>Sets the default font size for the text part. Can be overridden by the application.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">size_range [font min size in points (pt)] [font max size in points (pt)]</span><a class="anchor" id="description_text_size_range"></a>
+<p>Sets the allowed font size for the text part. Setting min and max to 0 means that sizing is not restricted. This is also the default value.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">fit [horizontal] [vertical]</span><a class="anchor" id="description_text_fit"></a>
+<p>When any of the parameters is set to 1 Edje resizes the text for it to fit in its container. Both are disabled by default.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_text_min"></a>
+<p>When any of the parameters is enabled (1) it forces the minimum size of the container to be equal to the minimum size of the text. The default value is &quot;0 0&quot;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">max [horizontal] [vertical]</span><a class="anchor" id="description_text_max"></a>
+<p>When any of the parameters is enabled (1) it forces the maximum size of the container to be equal to the maximum size of the text. The default value is &quot;0 0&quot;.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_text_align"></a>
+<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [another TEXT part&#39;s name]</span><a class="anchor" id="description_text_source"></a>
+<p>Causes the part to use the text properties (like font and size) of another part and update them as they change.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">text_source [another TEXT part&#39;s name]</span><a class="anchor" id="description_text_text_source"></a>
+<p>Causes the part to display the text content of another part and update them as they change.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">ellipsis [point of balance]</span><a class="anchor" id="description_text_ellipsis"></a>
+<p>Balances the text in a relative point from 0.0 to 1.0, this point is the last section of the string to be cut out in case of a resize that is smaller than the text itself. The default value is 0.0.</p>
+</li>
+
+</ul>
+
+
+<h4 id="description_box" name="description_box">Box</h4>
+
+<pre class="prettyprint">
+box 
+{
+&nbsp;&nbsp;&nbsp;layout: &quot;vertical&quot;;
+&nbsp;&nbsp;&nbsp;padding: 0 2;
+&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;min: 0 0;
+}
+</pre>
+
+<p>A box block can contain other objects and display them in different layouts, any of the predefined set, or a custom one, set by the application.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">layout [primary layout] (fallback layout)</span><a class="anchor" id="description_box_layout"></a>
+<p>Sets the layout for the box:</p>
+<ul>
+<li>horizontal (default)</li>
+<li>vertical</li>
+<li>horizontal_homogeneous</li>
+<li>vertical_homogeneous</li>
+<li>horizontal_max (homogeneous to the max sized child)</li>
+<li>vertical_max</li>
+<li>horizontal_flow</li>
+<li>vertical_flow</li>
+<li>stack</li>
+<li><span style="font-family: Courier New,Courier,monospace;">some_other_custom_layout_set_by_the_application</span>
+<p>Set a custom layout as a fallback. For more information, see <span style="font-family: Courier New,Courier,monospace;">edje_box_layout_register()</span>. If an unregistered layout is used, it defaults to horizontal.</p></li>
+
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_box_align"></a>
+<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span><a class="anchor" id="description_box_padding"></a>
+<p>Sets the space between cells in pixels.  The default value is 0 0.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_box_min"></a>
+<p>When any of the parameters is enabled (1) it forces the minimum size of the box to be equal to the minimum size of the items. The default value is 0 0.</p>
+</li>
+
+</ul>
+
+<h4 id="description_table" name="description_table">Table</h4>
+
+<pre class="prettyprint">
+table 
+{
+&nbsp;&nbsp;&nbsp;homogeneous: TABLE;
+&nbsp;&nbsp;&nbsp;padding: 0 2;
+&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;min: 0 0;
+}
+</pre>
+
+<p>A table block can contain other objects packed in multiple columns and rows, and each item can span across more than one column and/or row.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">homogeneous [homogeneous mode]</span><a class="anchor" id="description_table_homogeneous"></a>
+<p>Sets the homogeneous mode for the table:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">NONE</span>: default</li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span>: available space is evenly divided between children (which overflows onto other children if too little space is available)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ITEM</span>: size of each item is the largest minimal size of all the items</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">align [horizontal] [vertical]</span><a class="anchor" id="description_table_align"></a>
+<p>Changes the position of the point of balance inside the container. The default value is 0.5 0.5.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">padding [horizontal] [vertical]</span><a class="anchor" id="description_table_padding"></a>
+<p>Sets the space between cells in pixels. The default value is 0 0.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">min [horizontal] [vertical]</span><a class="anchor" id="description_table_min"></a>
+<p>When any of the parameters is enabled (1), it forces the minimum size of the table to be equal to the minimum size of the items. The default value is 0 0.</p>
+</li>
+
+</ul>
+
+<h4 id="description_map" name="description_map">Map</h4>
+
+<pre class="prettyprint">
+map 
+{
+&nbsp;&nbsp;&nbsp;perspective: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;light: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;backface_cull: 1;
+&nbsp;&nbsp;&nbsp;alpha: 1;
+
+&nbsp;&nbsp;&nbsp;rotation 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">perspective [another part&#39;s name]</span><a class="anchor" id="description_map_perspective"></a>
+<p>This sets the part that is used as the perspective point for giving a part a 3D look. The perspective point must have a perspective section that provides zplane and focal properties. The center of this part is used as the focal point, thus size, color and visibility are not relevant, just center point, zplane and focal are used. This also implicitly enables perspective transforms.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">light [another part&#39;s name]</span><a class="anchor" id="description_map_light"></a>
+<p>This sets the part that is used as the light for calculating the brightness (based on how directly the  part&#39;s surface is facing the light source point). Like the perspective point part, the center point is used and zplane is used for the z position (0 being the zero-plane where all 2D objects normally live) and positive values being further away into the distance. The light part color is used as the light color (alpha not used for light color). The color2 color is used for the ambient lighting when calculating brightness (alpha also not used).</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">on [1 or 0]</span><a class="anchor" id="description_map_on"></a>
+<p>This enables mapping for the part. Default is 0.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">smooth [1 or 0]</span><a class="anchor" id="description_map_smooth"></a>
+<p>This enables smooth map rendering. This may be linear interpolation, anisotropic filtering or anything the engine decides is smooth. This is a best-effort hint and may not produce precisely the same results in all engines and situations. The default value is 1.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">alpha [1 or 0]</span><a class="anchor" id="description_map_alpha"></a>
+<p>This enables alpha channel when map rendering. The default value is 1.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">backface_cull [1 or 0]</span><a class="anchor" id="description_map_backface_cull"></a>
+<p>This enables backface culling (when the rotated part that normally faces the camera is facing away after being rotated etc.). This means that the object are hidden when backface is culled.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">perspective_on [1 or 0]</span><a class="anchor" id="description_map_perspective_on"></a>
+<p>This enables perspective when rotating even without a perspective point object. This uses perspective set for the object itself or for the canvas as a whole as the global perspective with <span style="font-family: Courier New,Courier,monospace;">edje_perspective_set()</span> and <span style="font-family: Courier New,Courier,monospace;">edje_perspective_global_set()</span>.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">color [point] [red] [green] [blue] [alpha]</span><a class="anchor" id="description_map_color"></a>
+<p>This sets the color of a vertex in the map. Colors are linearly interpolated between vertex points through the map. The default color of a vertex in a map is white solid (255, 255, 255, 255) which means it has no affect on modifying the part pixels. Currently only four points are supported: 0 - Left-Top point of a part. 1 - Right-Top point of a part. 2 - Left-Bottom point of a part. 3 - Right-Bottom point of a part.</p>
+</li>
+
+</ul>
+
+<h5 id="description_map_rotation" name="description_map_rotation">Map.rotation</h5>
+
+<pre class="prettyprint">
+rotation 
+{
+&nbsp;&nbsp;&nbsp;center: &quot;name&quot;;
+&nbsp;&nbsp;&nbsp;x: 45.0;
+&nbsp;&nbsp;&nbsp;y: 45.0;
+&nbsp;&nbsp;&nbsp;z: 45.0;
+}
+</pre>
+
+<p>Rotates the part, optionally with the center on another part.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">center [another part&#39;s name]</span><a class="anchor" id="description_map_rotation_center"></a>
+<p>This sets the part that is used as the center of rotation when rotating the part with this description. The part&#39;s center point is used as the rotation center when applying rotation around the x, y and z axes. If no center is given, the parts original center itself is used for the rotation center.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">x [X degrees]</span><a class="anchor" id="description_map_rotation_x"></a>
+<p>This sets the rotation around the x axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">y [Y degrees]</span><a class="anchor" id="description_map_rotation_y"></a>
+<p>This sets the rotation around the y axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">z [Z degrees]</span><a class="anchor" id="description_map_rotation_z"></a>
+<p>This sets the rotation around the z axis of the part considering the center set. The value is given in degrees.</p>
+</li>
+
+</ul>
+
+<h5 id="description_map_perspective2" name="description_map_perspective2">Perspective</h5>
+
+<pre class="prettyprint">
+perspective 
+{
+&nbsp;&nbsp;&nbsp;zplane: 0;
+&nbsp;&nbsp;&nbsp;focal: 1000;
+}
+</pre>
+
+<p>Adds focal and plane perspective to the part. Active if <span style="font-family: Courier New,Courier,monospace;">perspective_on</span> is true. Must be provided if the part is being used by other part as it is perspective target.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">zplane [unscaled Z value]</span><a class="anchor" id="description_map_perspective_zplane"></a>
+<p>This sets the z value that is not scaled. Normally this is 0 as that is the z distance.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">focal [distance]</span><a class="anchor" id="description_map_perspective_focal"></a>
+<p>This sets the distance from the focal z plane (zplane) and the camera - i.e. equating to focal length of the camera</p>
+</li>
+
+</ul>
+
+<h5 id="description_map_link" name="description_map_link">Link</h5>
+
+<pre class="prettyprint">
+link 
+{
+&nbsp;&nbsp;&nbsp;base: &quot;edje,signal&quot; &quot;edje&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+&nbsp;&nbsp;&nbsp;in: 0.5 0.1;
+&nbsp;&nbsp;&nbsp;after: &quot;some_program&quot;;
+}
+</pre>
+
+<p>The link block can be used to create transitions to the enclosing part description state. The result of the above block is identical to creating a program with </p>
+
+
+<pre class="prettyprint">
+action: STATE_SET &quot;default&quot;";
+signal: &quot;edje,signal&quot;;
+source: &quot;edje&quot;;
+</pre> 
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">base [signal] [source]</span><a class="anchor" id="description_map_link_base"></a>
+<p>Defines the signal and source which triggers the transition to this state. The source parameter is optional here and is filled with the current group&#39;s default value if it is not provided. </p>
+</li>
+</ul>
+  
+<h2 id="program1" name="program1">Program</h2>
+
+<pre class="prettyprint">
+<a href="#program">program</a>
+{
+&nbsp;&nbsp;&nbsp;// name of the program
+&nbsp;&nbsp;&nbsp;<a href="#program_name">name</a>: &quot;programname&quot;;
+&nbsp;&nbsp;&nbsp;// signals which trigger the program
+&nbsp;&nbsp;&nbsp;<a href="#signal">signal</a>: &quot;signalname&quot;;
+&nbsp;&nbsp;&nbsp;// filter incoming signals depending on the sender name
+&nbsp;&nbsp;&nbsp;<a href="#program_source">source</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// filter incoming signals depending on the part&#39;s state
+&nbsp;&nbsp;&nbsp;<a href="#filter">filter</a>: &quot;partname&quot; &quot;statename&quot;;
+&nbsp;&nbsp;&nbsp;// delay the program by X seconds plus a random time between 0 and Y
+&nbsp;&nbsp;&nbsp;<a href="#in">in</a>: 0.3 0.0;
+&nbsp;&nbsp;&nbsp;// action to perform
+&nbsp;&nbsp;&nbsp;<a href="#action">action</a>: STATE_SET &quot;statename&quot; state_value;
+&nbsp;&nbsp;&nbsp;// if action is STATE_SET, define a transition from the current to the target state
+&nbsp;&nbsp;&nbsp;<a href="#transition">transition</a>: LINEAR 0.5;
+&nbsp;&nbsp;&nbsp;// if action is SIGNAL_EMIT, the name of the part which will receive the signal
+&nbsp;&nbsp;&nbsp;<a href="#target">target</a>: &quot;partname&quot;;
+&nbsp;&nbsp;&nbsp;// run another program after the current one is done
+&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;programname&quot;;
+&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;anotherprogram&quot;;
+}
+</pre>
+
+<h3 id="program" name="program">Program</h3>
+
+<p>Programs define how your interface reacts to events. Programs can change the state of parts or trigger other events.</p>
+
+<ul>
+
+<li><span style="font-family: Courier New,Courier,monospace;">name [program name]</span><a class="anchor" id="program_name"></a>
+<p>Symbolic name of program as a unique identifier.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">signal [signal name]</span><a class="anchor" id="signal"></a>
+<p>Specifies signals that cause the program to run. The signal received must match the specified source to run. There may be several signals, but only one signal keyword per program can be used. Also, there are some predefined signals for touch event handling. The predefined signals are:</p>
+<ul>
+<li>&quot;hold,on&quot;: Holding on the mouse event matching the source that starts the program.</li>
+<li>&quot;hold,off&quot;: Holding off the mouse event matching the source that starts the program.</li>
+<li>&quot;focus,part,in&quot;: Focusing in the matching source that starts the program.</li>
+<li>&quot;focus,part,out&quot;: Focusing out of the matching source that starts the program.</li>
+<li>&quot;mouse,in&quot;: Moving the mouse into the matching source that starts the program.</li>
+<li>&quot;mouse,out&quot;: Moving the mouse out of the matching source that starts the program.</li>
+<li>&quot;mouse,move&quot;: Moving the mouse in the matching source that starts the program.</li>
+<li>&quot;mouse,down,*&quot;: Pressing the mouse button in the matching source that starts the program.</li>
+<li>&quot;mouse,up,*&quot;: Releasing the mouse button in the matching source that starts the program.</li>
+<li>&quot;mouse,clicked,*&quot;: Clicking any mouse button in the matching source that starts the program.</li>
+<li>&quot;mouse,wheel,0,*&quot;: Moving the mouse wheel in the matching source that starts the program. A positive number moves up and a negative number moves down.</li>
+<li>&quot;drag,start&quot;: Starting a drag of the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
+<li>&quot;drag,stop&quot;: Stopping a drag of the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
+<li>&quot;drag&quot;: Dragging the mouse in the matching source that starts the program. This signal works only in the draggable part.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">source [source name]</span><a class="anchor" id="program_source"></a>
+<p>Source of accepted signal. There may be several signals, but only one source keyword per program can be used. For example, source: &quot;button-*&quot;; (signals from any part or program named &quot;button-*&quot; are accepted).</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">filter [part] [state]</span><a class="anchor" id="filter"></a>
+<p>Filter signals to be only accepted if the part is in state named <span style="font-family: Courier New,Courier,monospace;">[state]</span>. Only one filter per program can be used. If <span style="font-family: Courier New,Courier,monospace;">[state]</span> is not given, the source of the event is used instead.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">in [from] [range]</span><a class="anchor" id="in"></a>
+<p>Wait <span style="font-family: Courier New,Courier,monospace;">[from]</span> seconds before executing the program and add a random number of seconds (from 0 to <span style="font-family: Courier New,Courier,monospace;">[range]</span>) to the total waiting time.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">action [type] (param1) (param2) (param3) (param4)</span><a class="anchor" id="action"></a>
+<p> Action to be performed by the program. Valid actions (only one can be specified) are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">STATE_SET</span>: Set &quot;target part&quot; state as &quot;target state&quot;</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>: Stop the ongoing transition.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>: Emit a signal to the application level. The application can register a callback for handling actions based on the EDC state.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_SET</span>: Set a value for the dragable part (x, y values).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_STEP</span>: Set a step for the dragable part (x, y values).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DRAG_VAL_PAGE</span>: Set a page for the dragable part (x, y values).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">FOCUS_SET</span>: Set the focus to the target group.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE &quot;sample name&quot; speed (channel)</span>: Play a music sample clip.
+
+<p><span style="font-family: Courier New,Courier,monospace;">PLAY_SAMPLE</span>&#39;s (optional) channel can be one of:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EFFECT/FX</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">BACKGROUND/BG</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">MUSIC/MUS</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">FOREGROUND/FG</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">INTERFACE/UI</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">INPUT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ALERT</span></li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_TONE &quot;tone name&quot; duration_in_seconds (Range 0.1 to 10.0)</span>: Play a predefined tone of a specific duration. </li>
+<li><span style="font-family: Courier New,Courier,monospace;">PLAY_VIBRATION &quot;sample name&quot; repeat (repeat count)</span></li>
+</ul></li>
+
+
+<li><span style="font-family: Courier New,Courier,monospace;">transition [type] [length] (interp val 1) (interp val 2) (option)</span><a class="anchor" id="transition"></a>
+<p>Defines how transitions occur using <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action. <span style="font-family: Courier New,Courier,monospace;">[type]</span> is the style of the transition and <span style="font-family: Courier New,Courier,monospace;">[length]</span> is a double specifying the number of seconds in which to preform the transition. Valid types are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span></li>
+    <li><span style="font-family: Courier New,Courier,monospace;">SPRING</span></li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span>, <span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> and <span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> need the extra optional &quot;interp val 1&quot; to determine the &quot;factor&quot; of curviness. 1.0 is the same as their non-factor counterparts and 0.0 is equal to linear. Numbers higher than 1.0 make the curve angles steeper with a more pronounced curve point.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">DIVIS</span>, <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> and <span style="font-family: Courier New,Courier,monospace;">SPRING</span> also require &quot;interp val 2&quot; in addition to &quot;interp val 1&quot;.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> as the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, etc.). <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is interpreted as an integer factor defining how much the value swings outside the gradient before going back to the final resting spot at the end. 0.0 for <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> is equivalent to linear interpolation. Note that <span style="font-family: Courier New,Courier,monospace;">DIVIS</span> can exceed 1.0.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> uses <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> as the number of bounces (so it is rounded down to the nearest integer value), with <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> determining how much the bounce decays; 0.0 gives linear decay per bounce and higher values give much more decay.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">SPRING</span> is similar to bounce; <span style="font-family: Courier New,Courier,monospace;">[val 2]</span> specifies the number of spring swings and <span style="font-family: Courier New,Courier,monospace;">[val 1]</span> specifies the decay, but it can exceed 1.0 on the outer swings.</p>
+
+<p>Valid options are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">CURRENT</span> causes the object to move from its current position. Can be used as the last parameter of any transition type.</li>
+</ul>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">target [target]</span><a class="anchor" id="target"></a>
+<p>Program or part on which the specified action acts.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">after [after]</span><a class="anchor" id="after"></a>
+<p>Specifies a program that is run after the current program completes. The source and signal parameters of a program run as an <span style="font-family: Courier New,Courier,monospace;">after</span> are ignored. Multiple <span style="font-family: Courier New,Courier,monospace;">after</span> statements can be specified per program.</p>
+</li>
+
+</ul>
+ 
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edc_positioning_n.htm b/org.tizen.ui.guides/html/native/efl/edc_positioning_n.htm
new file mode 100755 (executable)
index 0000000..92c10a9
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edc_positioning_n.htm
@@ -0,0 +1,492 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Positioning Parts with the EDC File</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">        
+                       <li><a href="#basic">Positioning Basic Parts</a></li>
+                       <li><a href="#offset">Adding Offset to Relative Positioning</a></li>
+                       <li><a href="#calc">Calculating Edje Object Total Size</a></li>
+                       <li><a href="#hint">Using Edje Size Hints</a></li>                      
+                       <li><a href="#Swallow">Edje Swallow</a></li>
+                       <li><a href="#Layout">ELM Layout</a></li>
+
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Positioning Parts with the EDC File</h1> 
+
+ 
+<h2 id="basic" name="basic">Positioning Basic Parts</h2>
+
+<p>Size of a part (in pixels) is set using the min and max parameters. The following code example sets the minimum and maximum size of the rectangle part to 200x200 px.</p>
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;blue&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the size to 200x200
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// blue color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>Position of the parts is defined in the <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks. <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> blocks are used to define respectively the upper-left corner and the lower-right corner of the part. Position can be defined relatively to other parts (with the relative parameter) as an offset (offset parameter). When using relative positioning, the <span style="font-family: Courier New,Courier,monospace;">to</span>, <span style="font-family: Courier New,Courier,monospace;">to_x</span> and <span style="font-family: Courier New,Courier,monospace;">to_y</span> parameters are used to define to which part the relative positioning is done. If nothing else is specified, the positioning is relative to the parent&#39;s part.</p>
+
+<p>To demonstrate the relative positioning, here is a code example that creates another part and positions it under the first part (the upper-left corner of the new part will start at the lower-left corner of the previous one).</p>
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;rectangle2&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;green&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the size to 200x200
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// green color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the position
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// rel1 is relative to &quot;rectangle&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// rel2 is relative to the parent
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The <span style="font-family: Courier New,Courier,monospace;">align</span> parameter defines how the parts align themselves in the main window if their size is smaller than the main window. If nothing is specified, the parts are aligned in the center of the window.</td>
+</tr>
+</tbody>
+</table> 
+
+<h2 id="offset" name="offset">Adding Offset to Relative Positioning</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> structures also support offset which is a complement to the relative positioning: the corners are first placed according to their relative parameters and then adjusted using the offsets.</p>
+
+<p>The picture below shows the pixel positions for a 4x4 rectangle. The indices start in the top-left corner at (0, 0) increase to the right and to the bottom. Since the indices have started at 0, the 4th pixel has an index of 3.</p>
+
+<p>Therefore, in order to create a 2x2 blue rectangle centered inside that green square, the top-left corner has to be (1, 1) and the bottom-right one has to be (2, 2).</p>
+
+<p class="figure">Figure: Offset indices</p> 
+<p align="center"><img alt="Offset indices" src="../../images/rel1_rel2_offsets.png" /></p> 
+
+<p>Edje needs the following things defined:</p>
+<ul>
+<li>the part coordinates depending on the size and position of the green rectangle</li>
+<li>the relative component of positions is the same: the top-left corner of the green rectangle</li>
+<li>the top-left pixel is (1, 1) and the bottom-right one is (2, 2)</li>
+</ul>
+
+<p>The following code example defines these things: </p>
+
+<pre class="prettyprint">
+name: &quot;blue rectangle&quot;;
+
+rel1.to: &quot;green rectangle&quot;;
+rel1.relative: 0 0;
+rel1.offset: 1 1;
+
+rel2.to: &quot;green rectangle&quot;;
+rel2.relative: 0 0;
+rel2.offset: 2 2;
+</pre>
+
+<p>For most tasks, relative positioning is simpler than using offsets. Offsets are usually left for fine-tuning and creating borders. </p>
+
+<p>The example below is similar to the previous one but uses relative positioning instead of offsets to achieve an equivalent at 4x4 but could scale to larger sizes. </p>
+
+<p>The blue square starts at 25% of the green square (both vertically and horizontally) and ends at 75% of it (again, both vertically and horizontally). </p>
+
+<p>Just like in the previous example, the blue rectangle is named and Edje is told what the object of reference is: </p>
+
+<pre class="prettyprint">
+name: &quot;blue rectangle&quot;;
+rel1.to: &quot;green rectangle&quot;;
+rel2.to: &quot;green rectangle&quot;;
+</pre>
+
+<p>The image below shows how to refer pixels using relative positioning when the offsets are (0, 0).</p>
+
+<p class="figure">Figure: Relative positioning</p> 
+<p align="center"><img alt="Relative positioning" src="../../images/rel1_rel2_offsets_and_relative.png" /></p> 
+
+<p>Note the addressing of pixels: (0, 0) is addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0 0; offset 0 0;</span> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75; offset: 0 0;</span> is at (3, 3) and not (2, 2)!.</p>
+
+<p>This comes from a design choice in Evas and Edje which favor simplicity. In the examples shown in this guide, there are 4 pixels and therefore when the <span style="font-family: Courier New,Courier,monospace;">[0; 1)</span> range is divided in 4, the result is <span style="font-family: Courier New,Courier,monospace;">[0; 0.25), [0.25; 0.50), [0.50; 0.75), [0.75; 0.100)</span>. With Edje, the value used to refer to each segment is the left bound and therefore, 0.75 refers to <span style="font-family: Courier New,Courier,monospace;">[0.75; 0.100)</span>, i.e. the bottom-right pixel of the green rectangle and not the 3/4th one.</p>
+
+<p>The way to refer to the pixel right before is to set the <span style="font-family: Courier New,Courier,monospace;">rel2</span> bound to <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75;</span>, as would be expressed naturally, and <span style="font-family: Courier New,Courier,monospace;">offset: -1 -1;</span>. This can also be understood as extending the rectangle up to 75% of its parent with the upper bound excluded (as shown in the <span style="font-family: Courier New,Courier,monospace;">[0.50; 0.75)</span>).</p>
+
+<p>Since <span style="font-family: Courier New,Courier,monospace;">-1 -1</span> is the most common offset wanted for <span style="font-family: Courier New,Courier,monospace;">rel2</span>, it is the default value; i.e. the default behavior is practical.</p>
+
+<h2 id="calc" name="calc">Calculating Edje Object Total Size</h2>
+
+<p>When the EDC file is composed of a lot of parts, Edje calculates the size of the global Edje object, by taking all the parts and their parameters into account. Some parameters have an role in this calculation and affect the global size:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">min</span> and <span style="font-family: Courier New,Courier,monospace;">max</span>: these define the minimum and the maximum size of a part.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span>: these specify the relative position of a part.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">align</span>: this relates to the alignment of the part in the parent&#39;s object.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">fixed</span>: this defines if the part has a fixed size.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note"><span style="font-family: Courier New,Courier,monospace;">fixed</span> parameter can only be used on <span style="font-family: Courier New,Courier,monospace;">TEXTBLOCK</span> type parts. Setting this parameter to <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1</span> will not take into account the part for the calculation of the global size.</td>
+</tr>
+</tbody>
+</table> 
+
+<h2 id="hint" name="hint">Using Edje Size Hints</h2>
+
+<p>Any <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> can have hints, so that the object knows how to properly position and resize. Edje uses these hints when swallowing an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> to position and resize it in the <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part of the EDC file.</p>
+
+<p>Size hints are not a size enforcement, they just tell the parent object the desired size for this object. Then, the parent tries to get as close as possible to the hint.</p>
+
+<p>Hints are set in an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> using the <span style="font-family: Courier New,Courier,monospace;">evas_object_size_hint_*()</span> functions.</p>
+
+<h3 id="min_size_hint" name="min_size_hint">Min Size Hint</h3>
+
+<p>This sets the hints for the object&#39;s minimum size, given in pixels.</p>
+
+<p>Here the horizontal and vertical min size hints of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> are set to 0 pixels.</p>
+
+<pre class="prettyprint">
+Evas_Object *object;
+evas_object_size_hint_min_set(object, 0, 0);
+</pre>
+
+<h3>Max Size Hint</h3>
+
+<p>This sets the hints for the object&#39;s maximum size, given in pixels.</p>
+
+<p>Here the horizontal and vertical max size hints of an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> are set to 200 pixels.</p>
+<pre class="prettyprint">evas_object_size_hint_max_set(object, 200, 200);</pre>
+
+<h3>Request Size Hint</h3>
+
+<p>This sets the hints for the object&#39;s optimum size.</p>
+
+<p>The following code example defines that the optimum size of a part is 200x200 pixels.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_request_set(object, 200, 200);
+</pre>
+
+<h3>Aspect Size Hint</h3>
+
+<p>This sets the hints for the object&#39;s aspect ratio. Available aspect size hints are:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_NONE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_HORIZONTAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_VERTICAL</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span></li>
+</ul>
+
+<p>The other parameters are aspect width and height ratio. These integers are used to calculate the proportions of the object. If aspect ratio terms are null, the object&#39;s container ignores the aspect and scale of the object and occupies the whole available area.</p>
+
+<p class="figure">Figure: Aspect control</p> 
+<p align="center"><img alt="Aspect control" src="../../images/aspect-control-none.png" /></p> 
+ 
+<p align="center"><img alt="Aspect control" src="../../images/aspect-control-horizontal.png" /></p> 
+
+<p align="center"><img alt="Aspect control" src="../../images/aspect-control-both.png" /></p> 
+
+<p>The following code example sets the aspect size hint to <span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span> with a width of 100 and a height of 200. So aspect ratio should be 1/2.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_aspect_set(object, EVAS_ASPECT_CONTROL_BOTH, 100, 200);
+</pre>
+
+<h3 id="align_size_hint" name="align_size_hint">Align Size Hint</h3>
+<p>This sets the hints for the object&#39;s alignment. This hint is used when the object size is smaller than its parent&#39;s. The special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter uses maximum size hints with higher priority, if they are set. Also, any padding hints set on objects are added up to the alignment space on the final scene composition.</p>
+
+<p class="figure">Figure: Alignment</p> 
+<p align="center"><img alt="Alignment" src="../../images/align_hints.png" /></p> 
+
+<p>In the code below, the special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter is used.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_align_set(object, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+
+<h3>Weight Size Hint</h3>
+
+<p>This sets the hints for the object&#39;s weight. The weight tells to a container object how the given child is resized. Using <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_EXPAND</span> parameter asks to expand the child object&#39;s dimensions to fit the container&#39;s own.</p> 
+
+<p>When several child objects have different weights in a container object, the container distributes the space it has to layout them by those factors. Most weighted children get larger in this process than the least ones.</p> 
+
+<p>Here the container is asked to expand the object in both directions.</p> 
+
+<pre class="prettyprint">
+evas_object_size_hint_weight_set(object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+
+<h3>Padding Size Hint</h3>
+
+<p>This sets the hints for the object&#39;s padding space. Padding is extra space an object takes on each of its delimiting rectangle sides. The padding space is rendered transparent. Four hints can be defined, for the left, right, top, and bottom padding.</p>
+
+<p class="figure">Figure: Padding</p> 
+<p align="center"><img alt="Padding" src="../../images/padding-hints.png" /></p> 
+
+<p>Here the padding hints are set to 5 pixels on each side of the object.</p>
+
+<pre class="prettyprint">
+evas_object_size_hint_padding_set(object, 5, 5, 5, 5);
+</pre>
+
+
+<h2 id="Swallow" name="Swallow">Edje Swallow</h2>
+
+<p>The parent of all layout components is Edje. Edje as explained in the <a href="edc_part_block_n.htm#edje_block">Edje Blocks</a> is a library which convert edc files into Evas object. EDC is a description language. It means that the objects of interface are described by using text description. One of its main features is the possibility to create &quot;Swallows&quot; objects. When this kind of object is added in an Evas, it contains any other <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>. To create a swallow part, create first the EDC file: </p>
+
+<pre class="prettyprint">
+collections
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;container&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;part.swallow&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 31 31;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>This EDC describes a group named &quot;container&quot;, with one part inside of type SWALLOW and with the name <span style="font-family: Courier New,Courier,monospace;">part.swallow</span>. This part is centered inside the parent (it is the default behavior) but there are 32 pixels free all around this part. Use <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> to compile the EDC file into a binary EDJ file: </p>
+
+<pre class="prettyprint">
+edje_cc -o container.edj container.edc
+</pre>
+
+<p>Create an Edje object and load this file: </p>
+
+<pre class="prettyprint">
+edje = edje_object_add(evas_object_evas_get(parent));
+edje_object_file_set(edje, &quot;container.edj&quot;, &quot;container&quot;);
+</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note"><span style="font-family: Courier New,Courier,monospace;">edje_object_add</span> as opposed as all elementary object, does not take an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> as a parent. Give it the Evas on which the object is added. As the parent is already added on an Evas by elementary, retrieve a reference on it by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> function.</td>
+</tr>
+</tbody>
+</table> 
+
+<p><span style="font-family: Courier New,Courier,monospace;">edje_object_file_set</span> is used to set the Edje file from which the object is loaded. The object itself is the name of the group as defined in the EDC file, in this case it is &quot;container&quot;.</p>
+
+<p>Use the API <span style="font-family: Courier New,Courier,monospace;">edje_object_swallow</span> to swallow any kind of <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> inside. </p>
+
+<pre class="prettyprint">
+ic = elm_icon_add(parent);
+elm_image_file_set(ic, &quot;c1.png&quot;, NULL);
+edje_object_part_swallow(edje, &quot;part.swallow&quot;, ic);
+</pre>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_image_file_set()</span> function parameters are linked to Edje. The second argument in this example is a PNG file; however, it can also be an Edje file. In that case, the third argument must be the Edje group to load, exactly as previously shown with the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function.</td>
+</tr>
+</tbody>
+</table> 
+
+<p>Create complex layout for your application with Edje. It is may not be the most easy way, but it is the most powerful. This Edje layout is used all around elementary and is the basis of the layout component.</p>
+
+<h2 id="Layout" name="Layout">ELM Layout</h2>
+
+<p>Layout is a container component. For the basic use of the <span style="font-family: Courier New,Courier,monospace;">elm_layout</span> with a default style, see <a href="containers_n.htm#layout">Layout</a>. Elm layout takes a standard Edje design file and wraps it in a UI component. Layouts are the basis of graphical UI components which are used in Elementary.</p>
+
+<h3>Adding Layout</h3>
+
+<p>Create a new elementary layout using <span style="font-family: Courier New,Courier,monospace;">elm_layout_add</span>:</p>
+
+<pre class="prettyprint">
+Evas_Object *layout;
+layout = elm_layout_add(parent);
+</pre>
+
+<p>As for Edje swallows, load an Edje file. Create first an Edje file, that contains a black rectangle and an icon in the center. </p>
+
+<pre class="prettyprint">
+images
+{
+&nbsp;&nbsp;&nbsp;image: &quot;c1.png&quot; COMP;
+}
+
+collections
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_layout&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT; description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0; color: 0 0 0 255; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;background&quot;; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 31 31; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -32 -32; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default.image: &quot;c1.png&quot;; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;} 
+}
+</pre>
+<p>Compile it with <span style="font-family: Courier New,Courier,monospace;">edje_cc -o edje_example.edj edje_example.edc</span>.</p>
+<p>This file can be loaded with <span style="font-family: Courier New,Courier,monospace;">elm_layout_file_set</span>: </p>
+
+<pre class="prettyprint">
+elm_layout_file_set(layout, &quot;edje_example.edj&quot;, &quot;my_layout&quot;);
+</pre>
+
+<p>The layout component may contain as many parts/children as described in its theme file (EDC). Some of these children can have special types:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> (content holder)</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOX</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">TABLE</span></li>
+</ul>
+
+<p>Only one object can be added to a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>. The <span style="font-family: Courier New,Courier,monospace;">elm_layout_content_set()/get/unset</span> functions are used to manage objects in a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part. After being set to this part, the object&#39;s size, position, visibility, clipping and other description properties are controlled by the description of the given part (inside the Edje theme file).</p>
+
+<p>The BOX layout can be used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_box_*()</span> set of functions. It is very similar to the <span style="font-family: Courier New,Courier,monospace;">elm_box</span> component but the BOX layout&#39;s behavior is completely controlled by the Edje theme. The TABLE layout is like the BOX layout, the difference is that it is used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_table_*()</span> set of functions.</p>
+
+<h3>Signals</h3>
+<p>Elm can send Edje signals to the EDC part by using the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_emit</span>. You can also use <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_callback_add</span> to receive signals.</p>
+
+<p>Use the following code to listen to any signals sent by the layout: </p>
+
+<pre class="prettyprint">
+elm_layout_signal_callback_add(layout, &quot;*&quot;, &quot;*&quot;, _signal_cb, NULL);
+
+static void _signal_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
+{
+&nbsp;&nbsp;&nbsp;printf(&quot;Info received from layout : %s %s\n&quot;, emission, source);
+}
+</pre>
+
+<p>For more details on this, see the <a href="event_types_n.htm#events_guide_edje_with_layout">section on edje signals and layouts</a>.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_animation_n.htm b/org.tizen.ui.guides/html/native/efl/edje_animation_n.htm
new file mode 100755 (executable)
index 0000000..3a64886
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_animation_n.htm
@@ -0,0 +1,535 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Edje Animations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#Animating_Rectangle">Animating a Rectangle</a></li>
+                               <li><a href="#Actions">Actions</a></li>
+                               <li><a href="#Transitions">Transitions</a></li>
+                               <li><a href="#Chaining">Chaining Edje Programs</a></li>
+                               <li><a href="#Playing_Signals">Playing on Signals</a></li>
+                               <li><a href="#Rotate">Rotating with Edje</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Edje Animations</h1> 
+
+<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> can create predefined animations, but you can also use the Edje library to create your own animations.</p>
+  
+<p>The Edje animations are based on a very simple principle: going from one state to another. If you want to animate something with Edje, you must define two states and move from the first state to the second.</p>
+
+<h2 id="Animating_Rectangle" name="Animating_Rectangle">Animating a Rectangle</h2>
+
+<p>This example shows how to animate a rectangle. It is positioned in the top left corner of the window and is moved to the bottom right corner in five seconds. To do that with Edje, define a <span style="font-family: Courier New,Courier,monospace;">part</span> called &quot;rectangle&quot; with the <span style="font-family: Courier New,Courier,monospace;">type RECT:</span> this part has two descriptions (or states). In the first state, the rectangle is in is the top left corner. In the second state, it is in is the bottom right corner. To create the transition, set this EDC code for Edje to switch the object from its current state to another.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.3 0.1;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.7 0.9;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The &quot;rectangle&quot; part has two descriptions that share the same name, but have a different &quot;version&quot;.</p>
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The program defines when and how to move from one state to another. A program is called upon reception of a signal from a source. Here the program is called when the signal load is received from any source.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+}
+</pre>
+
+<p>An action is performed upon the signal reception. In this example, the state is changed.</p>
+
+<pre class="prettyprint">
+action: STATE_SET &quot;default&quot; 0.5;
+</pre>
+
+<p>The program has a target, here the &quot;rectangle&quot;.</p>
+
+<pre class="prettyprint">
+target: &quot;rectangle&quot;;
+</pre>
+
+<p>The program uses a transition to perform the action.</p>
+
+<pre class="prettyprint">
+transition: LINEAR 5;
+</pre>
+
+<p>This example produces a blue rectangle that moves from the upper left to the lower right corner with a linear transition in five seconds.</p>
+
+<h2 id="Actions" name="Actions">Actions</h2>
+
+<p>The Edje programs are not only for animations. There are different actions, for example <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> and <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span>. You may also send signals with <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span>.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">STATE_SET</span> action changes the state of the &quot;target&quot;.</p>
+
+<p>In the following example, the state of the part named &quot;image&quot; changes to &quot;default&quot; &quot;0.0&quot;.</p>
+
+<pre class="prettyprint">
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;animate&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;animate&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 3.0;
+&nbsp;&nbsp;&nbsp;target: &quot;image&quot;;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ACTION_STOP</span> stops the program specified by &quot;target&quot;.</p>
+
+<pre class="prettyprint">
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;animate_stop&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;animate_stop&quot;;
+&nbsp;&nbsp;&nbsp;action: ACTION_STOP;
+&nbsp;&nbsp;&nbsp;target: &quot;animate_loop&quot;;
+}
+</pre>
+
+<p>The previous example stops the program defined as &quot;target&quot; named <span style="font-family: Courier New,Courier,monospace;">animate_loop</span>. This program runs on the <span style="font-family: Courier New,Courier,monospace;">animate_stop</span> signal.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">SIGNAL_EMIT</span> emits a signal that is used to communicate with the application directly from the theme.</p>
+
+<p>The following example emits a signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when it receives the signal <span style="font-family: Courier New,Courier,monospace;">mouse,down,*</span> from the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part. In other words, it sends the signal <span style="font-family: Courier New,Courier,monospace;">frame_move</span> &quot;start&quot; when the mouse is pressed in the <span style="font-family: Courier New,Courier,monospace;">video_over</span> part.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;video_move_start&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,down,*&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;video_mover&quot;;
+&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;frame_move&quot; &quot;start&quot;;
+}
+</pre>
+
+<h2 id="Transitions" name="Transitions">Transitions</h2>
+
+<p>The transitions available are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">LIN</span> or <span style="font-family: Courier New,Courier,monospace;">LINEAR</span>: makes a linear transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL</span>: makes a sinusoidal transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE</span>: makes an accelerated transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE</span>: makes a decelerated transition and takes the duration in seconds as the parameter</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ACCEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">ACCELERATE_FACTOR</span>: makes an accelerated transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DECEL_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">DECELERATE_FACTOR</span>: makes a decelerated transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SIN_FAC</span> or <span style="font-family: Courier New,Courier,monospace;">SINUSOIDAL_FACTOR</span>: makes a sinusoidal transition and takes the duration and the factor as the parameters</li>
+<li><span style="font-family: Courier New,Courier,monospace;">DIVIS</span> or <span style="font-family: Courier New,Courier,monospace;">DIVISOR_INTERP</span>: takes 3 parameters:
+       <ul>
+               <li>the duration</li>
+        <li>the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, and so on)</li>
+        <li>an integer factor that defines how much the value swings outside the gradient to come back to the final resting spot at the end. 0.0 for the third parameter is equivalent to linear interpolation. Note that DIVIS may exceed 1.0.</li>
+       </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>: makes a bounce transition and takes 3 parameters:
+       <ul>
+        <li>the duration</li>
+        <li>how much the bounce decays, with 0.0 giving linear decay per bounce, and higher values giving more decay</li>
+        <li>the number of bounces (rounded down to the nearest integer value)</li>
+       </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">SPRING</span>: makes a spring transition and takes 3 parameters:
+       <ul>
+        <li>the duration</li>
+        <li>the decay, with the level exceeding 1.0 on the outer swings</li>
+        <li>the number of spring swings</li>
+       </ul>
+</li>
+</ul>
+
+<p>There are graphical representations of these effects in the <span style="font-family: Courier New,Courier,monospace;">Ecore_Evas</span> section above.</p>
+
+<h2 id="Chaining" name="Chaining">Chaining Edje Programs</h2>
+
+<p>To define a couple of Edje programs and chain them, we can, for example, create a program to make the rectangle return to its initial state with another transition (such as <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span>).</p>
+
+<p>Use the statement <span style="font-family: Courier New,Courier,monospace;">after</span> in the first <span style="font-family: Courier New,Courier,monospace;">program</span>. <span style="font-family: Courier New,Courier,monospace;">after</span> takes the name of the transition to run when the program is done.</p>
+
+<pre class="prettyprint">
+after: &quot;animation,state0&quot;;
+</pre>
+
+<p>This is how to add the bounce animation. To return the blue rectangle to its initial position with a <span style="font-family: Courier New,Courier,monospace;">BOUNCE</span> transition: it bounces with a factor of 1.8, six times. This program is only to be used at the end of the first one, so it does not have any signal statement.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;transition: BOUNCE 5 1.8 6;
+}
+</pre>
+
+<h2 id="Playing_Signals" name="Playing_Signals">Playing on Signals</h2>
+
+<p>The programs start when they receive a signal from a source. Edje handles many kind of signals, including mouse events.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To show the signals, use <span style="font-family: Courier New,Courier,monospace;">edje_player -p myfile.edj</span>.</td>
+</tr>
+</tbody>
+</table> 
+
+<p>For example, in another transition the rectangle is left clicked. The corresponding signal name is <span style="font-family: Courier New,Courier,monospace;">mouse,clicked,1</span>.</p>
+
+<p>For this transition, define a new state. This state changes the color and the position of the rectangle.</p>
+
+<pre class="prettyprint">
+// To be placed in the &quot;part&quot; definition
+description 
+{ 
+&nbsp;&nbsp;&nbsp;state: &quot;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
+&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
+&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+}
+</pre>
+
+<p>The program is as follows:</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 2;
+}
+</pre>
+
+<p>This starts when the rectangle is left clicked.</p>
+
+<p>If you want to send a signal from your application when you use signals to start transitions, create a program waiting for your own special signal. For example:</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+}
+</pre>
+
+<p>This program changes the state of the target named <span style="font-family: Courier New,Courier,monospace;">animation,menu_side,hide</span> to <span style="font-family: Courier New,Courier,monospace;">&quot;default&quot; 1.0</span>. It waits for the <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> signal emitted by a source called <span style="font-family: Courier New,Courier,monospace;">MenuButton</span>.</p>
+
+<pre class="prettyprint">
+edje_object_signal_emit(layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+</pre>
+
+<p>This statement sends a signal named <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> with a source named <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> to the object called <span style="font-family: Courier New,Courier,monospace;">layout</span>.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> function emits a signal on an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> part of the application.</p>
+
+<pre class="prettyprint">
+edje_object_signal_emit(Evas_Object *obj,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *emission,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *source)
+</pre>
+
+<ul>
+<li>The first parameter is the <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>, which emits the signal (<span style="font-family: Courier New,Courier,monospace;">layout</span> in the example).</li>
+<li>The second parameter is the <span style="font-family: Courier New,Courier,monospace;">emission</span> string (the name of the signal <span style="font-family: Courier New,Courier,monospace;">hide,sidemenu</span> in the example).</li>
+<li>The third parameter is the <span style="font-family: Courier New,Courier,monospace;">source</span> of the signal (the name of the source, <span style="font-family: Courier New,Courier,monospace;">MenuButton</span> in the example).</li>
+</ul>
+
+<p>If you use the Elementary in the application, you can use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span>. It functions exactly the same way as <span style="font-family: Courier New,Courier,monospace;">edje_object_signal_emit</span> and takes the same parameters.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">To find a complete example, use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span> in <a href="menu_tutorial_mn.htm">Creating Mobile Menus</a>.</td>
+</tr>
+</tbody>
+</table> 
+
+<h2 id="Rotate" name="Rotate">Rotating with Edje</h2>
+
+<p>The Edje library allows you to rotate objects, using the <span style="font-family: Courier New,Courier,monospace;">map</span> statement. For example, if you want to rotate the blue rectangle on a right click, you must define a new rotate state. To enable the <span style="font-family: Courier New,Courier,monospace;">map</span> on you object you must add a <span style="font-family: Courier New,Courier,monospace;">map</span> part to your default state.</p>
+
+<pre class="prettyprint">
+map 
+{
+&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;rotation.x: 0;
+&nbsp;&nbsp;&nbsp;rotation.y: 0;
+&nbsp;&nbsp;&nbsp;rotation.z: 0;
+}
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">on</span>: 1; enables the map on the object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">perspective_on</span>: 1, enables the perspective when rotating, even without a perspective point object</li>
+<li><span style="font-family: Courier New,Courier,monospace;">smooth</span>: 1; enables a smooth map rendering</li>
+<li>The rotation statements define the default rotation of the object on x, y, and z axes.</li>
+</ul>
+
+<p>To add a new rotate state with a rotation around any axis, do the following.</p>
+
+<pre class="prettyprint">
+description 
+{ 
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
+}
+</pre>
+
+<p>This rotate state inherits all the default state properties, but changes the value of <span style="font-family: Courier New,Courier,monospace;">map.rotation.z</span> from 0&deg; to 120&deg;.</p>
+
+<p>To set a program to run the rotate state, do the following.</p>
+
+<pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;transition: LIN 5;
+}
+</pre>
+
+<p>This program runs on a right click on the rectangle object.</p>
+
+<p>The complete code of this example is as follows.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.3 0.1;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.7 0.9;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.rotation.z: 120;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,state0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,state0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: BOUNCE 2 1.8 26;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SIN 2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,rotate&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LIN 5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_animation_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/edje_animation_tutorial_n.htm
new file mode 100755 (executable)
index 0000000..aa85f96
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_animation_tutorial_n.htm
@@ -0,0 +1,377 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Edje Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#startup">Animating on Application Start-up</a>
+                       </li>
+                       <li><a href="#click">Animating Object on Click</a>
+                       </li>
+               </ul>   
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">                
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Mobile Wearable</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Edje Animations</h1>
+
+  
+<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> can create pre-defined animations, but you can also use the Edje library to create your own animations.</p>
+
+ <h2 id="startup" name="startup">Animating on Application Start-up</h2>
+
+
+<p>The goal of this tutorial is to create an animation target and buttons to start animations, all this in an EDC (Edje Data Collection) file.</p>
+<p>First create an application using Basic EDC UI Application. This model provides a simple application just like the one used in the previous chapter, but with one more element: an <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
+<p>Animations can be run at application startup. By default the Basic EDC UI Application model produces an empty window with a title. In this example a Tizen logo is added to the window and the behavior of the window title is changed.</p>
+<p>The images used by the Edje file are stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> directory of the application. Copy the Tizen logo available in <span style="font-family: Courier New,Courier,monospace">shared/res/&lt;yourapplicationname&gt;.png</span> into the Edje image directory <span style="font-family: Courier New,Courier,monospace">edje/images</span>. Then add the image to the Edje images collection.</p>
+<pre class="prettyprint">images 
+{
+&nbsp;&nbsp;&nbsp;image: &quot;edceffects.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;image: &quot;tizen-logo.png&quot; COMP;
+}
+</pre>
+
+<p>Then add an Edje part using the small logo: this part has two states. This is the first important notion for animations. The <span style="font-family: Courier New,Courier,monospace">STATE</span> describes the appearance of a part: size, position, color, etc.</p>
+<p>In this example, the part has two states, default and down-state:</p>
+<pre class="prettyprint">// An image using the tizen logo
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 63 63;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 63 63;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;small-logo.png&quot;; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;down-state&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.1 0.92;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.05 1.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre><p>The logo part has the <span style="font-family: Courier New,Courier,monospace">IMAGE</span> type. The default state contains in the first description of the part sets:</p>
+<ul>
+<li>the maximum and minimum size using the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> statements</li>
+<li>the image to use in this <span style="font-family: Courier New,Courier,monospace">part</span></li>
+<li>the default position.</li>
+</ul>
+<p>The second state, down-state, inherits all of the default&#39;s attributes, and only changes the position to put the image at the bottom of the application window.</p>
+<p>These two states are the start and end states of the animation. To actually create the animation, add a <span style="font-family: Courier New,Courier,monospace">program</span> to the Edge <span style="font-family: Courier New,Courier,monospace">programs</span> collection.</p>
+<pre class="prettyprint">// Icon drop animation
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,state1&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;down-state&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;transition: BOUNCE 2.5 0.0 5.0;
+}
+</pre><p>This program is named <span style="font-family: Courier New,Courier,monospace">animation,state1</span> and is started when the application receives the <span style="font-family: Courier New,Courier,monospace">load</span> signal immediately on startup. It runs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action so it changes the object state from default to down-state. The target of the program is the logo <span style="font-family: Courier New,Courier,monospace">part</span>.</p>
+<p>In order to switch from one state to another, it uses a <span style="font-family: Courier New,Courier,monospace">transition</span> of the <span style="font-family: Courier New,Courier,monospace">BOUNCE</span> type with 3 parameters, the <span style="font-family: Courier New,Courier,monospace">bounce_decay</span>, the <span style="font-family: Courier New,Courier,monospace">number_of_bounces</span>, and the duration which here is set to five seconds.</p>
+<p>This produces an falling and bouncing effect.</p>
+<p>Also add an animation for the window title to make it move from the left to the right with a bounce effect while growing the font size.</p>
+<p>Create a new state on the part called &quot;txt_title&quot; inside which both the font size and position are changed.</p>
+<pre class="prettyprint">part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;mouse_events: 0;
+
+&nbsp;&nbsp;&nbsp;// The default State
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=regular&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 24;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// The &quot;Bigger&quot; state
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;Bigger&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.75 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.0 0.0; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=regular&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 28;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>Create a program to animate this part on startup, just like the small Tizen logo.</p>
+<pre class="prettyprint">// Make the title bigger
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,bigtitle&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;Bigger&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 5.0;
+}
+</pre>
+<p>This program goes from the default state to the bigger state in five seconds with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> effect, automatically running on the application startup.</p>
+
+ <h2 id="click" name="click">Animating Object on Click</h2>
+
+<p>All the previous animations are automatic and do not have any relation with the user&#39;s actions. Next animate a part by clicking on another one. Make the title restore its default aspect when clicking on the small logo.</p>
+<p>The parts and the states are already defined. The animation goes back to the default state, there is no need to add any parts or states: only add a program which makes the transition when clicking on logo part.</p>
+<pre class="prettyprint">// Make the title go back to normal
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;animation,normaltitle&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;logo&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;txt_title&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
+}
+</pre><p>This program starts when the application receives the signal <span style="font-family: Courier New,Courier,monospace">mouse,clicked,*</span> (any button of the mouse is clicked) from the part called logo, (<span style="font-family: Courier New,Courier,monospace">source</span>). It performs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action and sets the default state on the target <span style="font-family: Courier New,Courier,monospace">txt_file</span> part with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> transition.</p>
+<p>When clicking any mouse button on the small logo, the title goes back to its original state.</p>
+<h3>Rotating Parts</h3>
+<p>Next add two more buttons to the application and create programs to animate a target.</p>
+<p>It is possible to create a button with Edje from scratch, but to save time, the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is used in this example to store Elementary UI components.</p>
+<p>First create the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts, and then the <span style="font-family: Courier New,Courier,monospace">Elementary</span> UI components in the <span style="font-family: Courier New,Courier,monospace">.c</span> file.</p>
+<pre class="prettyprint">// Container for the rotate button
+part 
+{
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;name: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.10 0.80;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.30 0.90;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre><p>This part is called <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, it only has a <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> type and a default state with its position being on the bottom left of the screen.</p>
+<pre class="prettyprint">// Container for the grow button
+part 
+{
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;name: &quot;btn/grow&quot;;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 1.02 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 2.02 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre><p>This second <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is very similar to the first one. It is placed relatively to <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, in order to remain next to it.</p>
+<p>Next create the actual UI components. This is done in the <span style="font-family: Courier New,Courier,monospace">.c</span> file and is very similar to what is done for the buttons in the first chapter.</p>
+<p>This code is added to the <span style="font-family: Courier New,Courier,monospace">create_base_ui</span> function.</p>
+<pre class="prettyprint">// Creation button in the app window
+ad-&gt;button = elm_button_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
+// Add the button to the edje layout container called &quot;btn/rotate&quot;
+elm_object_part_content_set(ad-&gt;layout, &quot;btn/rotate&quot;, ad-&gt;button);
+evas_object_show(ad-&gt;button);
+
+// Creation a up button in the app window
+ad-&gt;btn_up = elm_button_add(ad-&gt;win);
+// Add the button to the edje layout container called &quot;btn/grow&quot;
+elm_object_text_set(ad-&gt;btn_up, &quot;Grow&quot;);
+elm_object_part_content_set(ad-&gt;layout, &quot;btn/grow&quot;, ad-&gt;btn_up);
+evas_object_show(ad-&gt;btn_up);
+</pre><p>In the default Basic EDC UI Application, the Edje layout is loaded by default. Create two Elementary buttons and add them to the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> containers, without having to setup sizes or positions as this is done in the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> container.</p>
+<p>Note that the part name is very important because it is used to be merged the Elementary UI component and the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part.</p>
+<p>When the buttons placed and set, create the animation target. it is done in the EDC file.</p>
+<p>Add the animation target part.</p>
+<p>The part initialization and the default <span style="font-family: Courier New,Courier,monospace">state</span>:</p>
+<pre class="prettyprint">// The animation target
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+
+&nbsp;&nbsp;&nbsp;// Default state
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image { normal: &quot;tizen-logo.png&quot;; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; // red
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 { relative: 0.3 0.3; }
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 { relative: 0.7 0.4; }
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>This <span style="font-family: Courier New,Courier,monospace">part</span> is an image displaying a big Tizen logo, placed on the top of the screen more or less centered.</p>
+<p>Create a state to change the color and add the <span style="font-family: Courier New,Courier,monospace">map</span> statement.</p>
+<pre class="prettyprint">// The rotate state
+description 
+{
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+
+&nbsp;&nbsp;&nbsp;map 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable Map on the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable smooth rendering
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enable perspective
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Apply rotations on the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.x: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.y: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation.z: 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;color: 0 255 0 255; // green
+}
+</pre><p>This part changes the color to green and defines the <span style="font-family: Courier New,Courier,monospace">map</span>. This statement makes rotations possible on an Edje <span style="font-family: Courier New,Courier,monospace">part</span>. Rotations are done around the x, y or z axes. In this example, the map is enabled and a 0&#176; rotation is applied around each axis.</p>
+<p>Add a state with a rotation around the z axis of 360&#176;.</p>
+<pre class="prettyprint">description 
+{
+&nbsp;&nbsp;&nbsp;state: &quot;rotate&quot; 1.0;
+&nbsp;&nbsp;&nbsp;inherit: &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;map.rotation.z: 360;
+}
+</pre><p>This <span style="font-family: Courier New,Courier,monospace">state</span> inherits from the default state parameters and add a rotation around the z axis.</p>
+<p>Finally add a state to the other button animation grow. Change the size of the animation target and add an offset.</p>
+<pre class="prettyprint">// The grow state
+description 
+{
+&nbsp;&nbsp;&nbsp;state: &quot;grow&quot; 0.0;
+&nbsp;&nbsp;&nbsp;color: 0 0 255 255; // blue
+&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.7 0.4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0.3 0.3;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre><p>The last step is to create the programs to make all these states animate.</p>
+<p>To make the rotation animation smoother, create and chain several <span style="font-family: Courier New,Courier,monospace">programs</span> with different durations.</p>
+<p>First create the main one: it goes from the default state to the rotate 0.0 state in 0.2 seconds.</p>
+<p>Note that the states are all named the same way (rotate) but not with the same version. This version allows you to have more than one state with the same name, in fact the actual name of the state is the name plus the version.</p>
+<pre class="prettyprint">// Change the color of target to green
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,target&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;btn/rotate&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 0.2;
+&nbsp;&nbsp;&nbsp;after: &quot;rotate,target,2&quot;;
+}
+</pre><p>The program starts when the <span style="font-family: Courier New,Courier,monospace">btn/rotate</span> part is clicked with any mouse button. When the animation ends, it calls the next one called <span style="font-family: Courier New,Courier,monospace">rotate,target,2</span>.</p>
+<pre class="prettyprint">// Rotate 360&#176;
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,target,2&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 0.7;
+&nbsp;&nbsp;&nbsp;after: &quot;rotate,end&quot;;
+}
+</pre><p>This program sets the part state to <span style="font-family: Courier New,Courier,monospace">rotate 1.0</span> in 0.7 seconds, and when done calls the next one <span style="font-family: Courier New,Courier,monospace">rotate,end</span>.</p>
+<pre class="prettyprint">// Go back to the normal
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;rotate,end&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;rotate&quot; 0.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+}
+</pre><p><span style="font-family: Courier New,Courier,monospace">rotate,end</span> is the last program of the rotation effect: it sets the state to <span style="font-family: Courier New,Courier,monospace">rotate 0.0</span> very fast.</p>
+<p>The last program of this example is the grow effect, it switches from one state to another.</p>
+<pre class="prettyprint">// Grow the target and go back to normal state
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;grow,target&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;btn/grow&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;grow&quot; 1.0;
+&nbsp;&nbsp;&nbsp;after: &quot;go,default&quot;;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+}
+</pre><p>It starts when the <span style="font-family: Courier New,Courier,monospace">btn/grow</span> part is clicked, it goes from the current state to <span style="font-family: Courier New,Courier,monospace">grow 1.0</span> in one second. It then calls the <span style="font-family: Courier New,Courier,monospace">go,default</span> program. In this program, both size and color change during the transition.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">go,default</span> program sets the status back default for the animation target.</p>
+<pre class="prettyprint">// Go back to normal (default) state
+program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;go,default&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;atarget&quot;;
+&nbsp;&nbsp;&nbsp;transition: SIN 1.0;
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/edje_color_n.htm b/org.tizen.ui.guides/html/native/efl/edje_color_n.htm
new file mode 100755 (executable)
index 0000000..48d272a
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_color_n.htm
@@ -0,0 +1,354 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Using Edje Color Classes</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+       \r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Using Edje Color Classes</h1>\r
+\r
+<p>This tutorial demonstrates how you can change the color of 2 or more parts using Edje color classes.</p>\r
+<p>If a part is assigned with a color class, setting color values to this class causes all those parts to have their colors multiplied by the values. Setting the values to a color class affects all parts within that color class at process level, while at object level, it only affects the parts inside a specified object.</p>\r
+\r
+<p>Create a simple application with a menu and separate screens for each Edje Animation function:</p>\r
+\r
+<ol>\r
+<li>In the Tizen IDE, go to <strong>Tizen Native project &gt; UI application &gt; EDC</strong> and create a new project named <span style="font-family: Courier New,Courier,monospace">colorclass</span>.</li>\r
+\r
+<li>Open the <span style="font-family: Courier New,Courier,monospace">colorclass.edc</span> file and replace it with the following code:\r
+<pre class="prettyprint">color_classes \r
+{\r
+&nbsp;&nbsp;&nbsp;color_class \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;A&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 255 255;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;color_class \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;B&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 0 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 0 0 255;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;color_class \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;C&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 125 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 0 255 255;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+collections \r
+{\r
+&nbsp;&nbsp;&nbsp;group \r
+&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textA&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.2;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;A:&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textB&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.2;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.4;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;B:&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textC&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: OUTLINE_SHADOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.4;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.6;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 255 255 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 255 255 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;C:&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 44;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.4 0.2;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.4 0.2;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.6 0.4;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;A&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.6 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.2;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect4&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;B&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.8 0.2;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.4;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect5&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 125 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.6 0.4;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.8 0.6;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect6&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_class: &quot;C&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.8 0.4;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.6;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.btn1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.8;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.45 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.btn2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.55 0.8;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<p>Setting the color class of a part causes its colors to be multiplied by <span style="font-family: Courier New,Courier,monospace">color_class</span> <span style="font-family: Courier New,Courier,monospace">color</span> values. To see how the color class affects the shadow and outline colors, set those colors as white in the part:</p>\r
+\r
+<pre class="prettyprint">color2: 255 255 255 255;\r
+color3: 255 255 255 255;</pre>\r
+\r
+<p>Parts with <span style="font-family: Courier New,Courier,monospace">color_class &quot;C&quot;</span>  have different colors because their base colors are different.</p>\r
+</li>\r
+\r
+<li>Replace the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span>  function with the following code:\r
+\r
+<pre class="prettyprint">static void\r
+btn1_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;edje_color_class_set(&quot;A&quot;, rand()%255, rand()%255, rand()%255, 255,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255);\r
+}\r
+static void\r
+btn2_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;edje_color_class_set(&quot;B&quot;, rand()%255, rand()%255, rand()%255, 255,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rand()%255, rand()%255, rand()%255, 255);\r
+}\r
+\r
+static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };\r
+\r
+&nbsp;&nbsp;&nbsp;// Window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);\r
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Conformant\r
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);\r
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);\r
+\r
+&nbsp;&nbsp;&nbsp;// Base layout\r
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;layout = elm_layout_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;layout, edj_path, GRP_MAIN);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;layout);\r
+\r
+&nbsp;&nbsp;&nbsp;// Buttons\r
+&nbsp;&nbsp;&nbsp;ad-&gt;btn1 = elm_button_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;swallow.btn1&quot;, ad-&gt;btn1);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;btn1, &quot;clicked&quot;, btn1_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;btn1, NULL, &quot;Change A&quot;);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;btn2 = elm_button_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;swallow.btn2&quot;, ad-&gt;btn2);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;btn2, &quot;clicked&quot;, btn2_cb, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;btn2, NULL, &quot;Change B&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the window\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);\r
+}</pre>\r
+\r
+<p>Pressing the <strong>Change A</strong> button changes all colors of all parts with <span style="font-family: Courier New,Courier,monospace">color_class</span>  set as <span style="font-family: Courier New,Courier,monospace">&quot;A&quot; </span> but does not affect other parts. The actual <span style="font-family: Courier New,Courier,monospace">color</span>, <span style="font-family: Courier New,Courier,monospace">color2</span>, and <span style="font-family: Courier New,Courier,monospace">color3</span> values remain unchanged but they are multiplied by values from the color class.</p>\r
+<p>You can omit the color class declaration in the <span style="font-family: Courier New,Courier,monospace">.edc</span>  file and still use it in parts. There are no visual effects unless you change the color class in the code. For example, you can comment out the color class <span style="font-family: Courier New,Courier,monospace">&quot;B&quot;</span>  and see what happens when you press the <strong>Change B</strong> button.</p>\r
+</li>\r
+\r
+<p class="figure">Figure: Edje colorclass application</p> \r
+<p align="center"><img alt="Edje colorclass application" src="../../images/edje_color.png" /></p>\r
+\r
+</ol>\r
+ \r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.ui.guides/html/native/efl/edje_files_n.htm b/org.tizen.ui.guides/html/native/efl/edje_files_n.htm
new file mode 100755 (executable)
index 0000000..55b54b3
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_files_n.htm
@@ -0,0 +1,213 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Handling Edje Files</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+       \r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+               <li><a href="#init">Initializing the Application</a></li>\r
+               <li><a href="#load">Loading the Collection List from an EDJ File</a></li>\r
+               <li><a href="#create">Creating an Edje Object</a></li>\r
+               </ul>   \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Handling Edje Files</h1>\r
+\r
+<p>This tutorial demonstrates how you can manage EDJ files. An EDJ file is a specific eet file that collects layouts. The Edje layout is called <span style="font-family: Courier New,Courier,monospace">Style</span> and created using the <a href="edc_part_block_n.htm">EDC language</a>. The file that contains the layout collection called <span style="font-family: Courier New,Courier,monospace">Theme</span>. </p>\r
+\r
+<h2 id="init" name="init">Initializing the Application</h2>\r
+\r
+<p>The following example shows a typical Elementary application that creates a window entitled <span style="font-family: Courier New,Courier,monospace">Genlist Basic Tutorial</span>. It is consisted of a conformant widget that contains a naviframe widget. The genlist goes inside the naviframe.</p>\r
+\r
+<pre class="prettyprint">static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };\r
+\r
+&nbsp;&nbsp;&nbsp;// Window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);\r
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, ad);\r
+\r
+&nbsp;&nbsp;&nbsp;// Conformant\r
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);\r
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);\r
+\r
+&nbsp;&nbsp;&nbsp;// Naviframe\r
+&nbsp;&nbsp;&nbsp;ad-&gt;navifr = elm_naviframe_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;navifr);\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;navifr, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);\r
+\r
+&nbsp;&nbsp;&nbsp;// Genlist\r
+&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();\r
+&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;\r
+\r
+&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show window after base GUI is set up\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);\r
+}\r
+\r
+static bool\r
+app_create(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Initialize UI resources and application data\r
+&nbsp;&nbsp;&nbsp;// If this function returns true, the main loop of application starts\r
+&nbsp;&nbsp;&nbsp;// If this function returns false, the application is terminated\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}</pre>\r
+\r
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">struct appdata</span>:</p>\r
+\r
+<pre class="prettyprint">typedef struct appdata\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *conform;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *navifr;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *genlist;\r
+&nbsp;&nbsp;&nbsp;Eina_List *list;\r
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;\r
+} \r
+appdata_s;</pre>\r
+\r
+<h2 id="load" name="load">Loading the Collection List from an EDJ File</h2>\r
+\r
+<p>Edje provides the functionality to manipulate the EDJ files. First, get the list of styles from EDJ file:</p>\r
+ \r
+<pre class="prettyprint">// Get the collection list from the EDJ file\r
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+ad-&gt;list = edje_file_collection_list(edj_path);</pre>\r
+\r
+<p>When you do not use the collection list, delete it:</p>\r
+\r
+<pre class="prettyprint">static void\r
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;// Free the collection list\r
+&nbsp;&nbsp;&nbsp;edje_file_collection_list_free(ad-&gt;list);\r
+&nbsp;&nbsp;&nbsp;ui_app_exit();\r
+}</pre>\r
+\r
+ <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The list returned after using the <span style="font-family: Courier New,Courier,monospace">edje_file_collection_list()</span> function must only be deleted using the <span style="font-family: Courier New,Courier,monospace">edje_file_collection_list_free()</span> function.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<p>Add the item in the genlist to display the list:</p>\r
+\r
+<pre class="prettyprint">EINA_LIST_FOREACH(ad-&gt;list, l, str)\r
+{\r
+&nbsp;&nbsp;&nbsp;elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, str, NULL, ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);\r
+}</pre>\r
+\r
+\r
+<h2 id="create" name="create">Creating an Edje Object</h2>\r
+\r
+<p>Implement callbacks for the clicked (tapped) event. Check that the required style exists using the <span style="font-family: Courier New,Courier,monospace">edje_file_group_exists()</span> function. The first argument is the path to EDJ file and style name. Create the Edje object and load the given style.</p>\r
+\r
+<pre class="prettyprint">static void\r
+_genlist_clicked(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;\r
+&nbsp;&nbsp;&nbsp;const char *str;\r
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };\r
+&nbsp;&nbsp;&nbsp;Evas_Object *edje_object;\r
+\r
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_selected_item_get(obj);\r
+\r
+&nbsp;&nbsp;&nbsp;str = elm_object_item_part_text_get(eoi, &quot;elm.text&quot;);\r
+&nbsp;&nbsp;&nbsp;// Check whether a group matching glob exists in an edje file\r
+&nbsp;&nbsp;&nbsp;// If there is no matching group\r
+&nbsp;&nbsp;&nbsp;if (!edje_file_group_exists(edj_path, str)) return;\r
+\r
+&nbsp;&nbsp;&nbsp;// Load the given style to the object\r
+&nbsp;&nbsp;&nbsp;edje_object = edje_object_add(evas_object_evas_get(ad-&gt;win));\r
+&nbsp;&nbsp;&nbsp;edje_object_file_set(edje_object, edj_path, str);\r
+&nbsp;&nbsp;&nbsp;// Check object loading errors\r
+&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(edje_object) != EDJE_LOAD_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(edje_object);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(edje_object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, edje_object);\r
+}</pre>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.ui.guides/html/native/efl/edje_intro_n.htm b/org.tizen.ui.guides/html/native/efl/edje_intro_n.htm
new file mode 100755 (executable)
index 0000000..dd8df7b
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_intro_n.htm
@@ -0,0 +1,285 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Introduction to EDC Programming</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">        
+                       <li><a href="#what">What is an EDC File?</a></li>
+                       <li><a href="#compile">Compiling the EDC File</a></li>
+                       <li><a href="#simple_edc_file">Writing a Simple EDC File</a></li>
+                       <li><a href="#Howtos">Quick How-tos</a></li>
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Introduction to EDC Programming</h1> 
+
+   
+   
+<p>This programming guide shows you how to write an EDC file that can be used to theme a Tizen application. It describes concepts about parts positioning and resizing. It also explains part animations that can be done through programs.</p>
+
+<h2 id="what" name="what">What is an EDC File?</h2>
+
+<p>An EDC file stands for Edje data collection. It is a text file that contains special code format describing the position, size, and other parameters of graphical elements that compose the visual aspect of your application. In addition to graphical elements, it can also handle sounds.</p>
+
+<p>The syntax for the Edje data collection files follows a simple structure of &quot;blocks { .. }&quot; that can contain &quot;properties: ..&quot;, more blocks, or both.</p>
+
+<p>An EDC file has the &quot;.edc&quot; extension.</p>
+
+<h2 id="compile" name="compile">Compiling the EDC File</h2>
+<p>EDC file needs to be compiled into a &quot;.edj&quot; file using Edje library tools. After compiling the &quot;.edj&quot; file can be used by a native Tizen application.</p>
+
+<p>Here is an example about compiling <span style="font-family: Courier New,Courier,monospace;">helloworld.edc</span> to &quot;.edj&quot; file using <span style="font-family: Courier New,Courier,monospace;">edje_cc tool</span>: </p>
+
+<pre class="prettyprint">
+$ edje_cc helloworld.edc
+</pre>
+
+<p>This command creates a <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file.</p>
+
+<p>An EDC file can use external files such as sounds, images, or fonts. The path to these resources are passed to the <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> tool so that they are included in the final &quot;.edj&quot; file. </p>
+
+<pre class="prettyprint">
+$ edje_cc -sd $SOUNDS_DIR -fd $FONTS_DIR -id $IMAGES_DIR
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace;">SOUNDS_DIR</span>, <span style="font-family: Courier New,Courier,monospace;">FONTS_DIR</span>, and <span style="font-family: Courier New,Courier,monospace;">IMAGES_DIR</span> are the paths for sounds, fonts, and images resources respectively.</p>
+
+<p>Tizen SDK calls <span style="font-family: Courier New,Courier,monospace;">edje_cc</span> during the project building if it finds an EDC source file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> directory.</p>
+
+<pre class="prettyprint">
+Building file: ../res/edje/helloworld.edc
+Invoking: EDC Resource Compiler
+edje_cc -sd ../edje/sounds -fd ../edje/fonts -id ../edje/images ../res/edje/helloworld.edc ../res/edje/helloworld.edj
+</pre>
+
+
+<p>The Tizen SDK compilation log extract shows you that if your EDC file uses pictures, they must be copied to the <span style="font-family: Courier New,Courier,monospace;">./edje/images</span> directory. Fonts and sounds go to the <span style="font-family: Courier New,Courier,monospace;">./edje/fonts</span> and <span style="font-family: Courier New,Courier,monospace;">./edje/sounds</span> directory respectively. The SDK builds the <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> folder.</p>
+
+<h2 id="simple_edc_file" name="simple_edc_file">Writing a Simple EDC File</h2>
+<p>The code example below shows you the structure of an EDC file. It is a collection of groups that contain parts and programs.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_group&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>Groups are identified with a name, parts correspond to the graphical elements. Each one of them can have several states that describe a specific position, size, and visual aspect. Programs contain the program code, such as interaction with the main application through signals. Also animations are defined here (changing a part state using an animated transition).</p>
+
+<p>The description field is where the state of a part is written.</p>
+
+<pre class="prettyprint">
+part
+{
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state1&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>As an example, here is a simple EDC file that contains only one part and one program. The part is a rectangle with blue state and red state, the program changes the state from blue to red when user clicks on the rectangle.</p>
+
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;example&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// create the part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the type to RECT (rectangle)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// default state (blue color)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// blue color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// second state (red color)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;red&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// red color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// create a program
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// program is triggered on mouse click
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set the red state of the &quot;rectangle&quot; part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>A program is triggered when receiving a signal from a specific source (here all the sources are taken into account). When launched, it does the action (changing the state of a part) on the target (the rectangle).</p>
+
+<h2 id="Howtos" name="Howtos">Quick How-tos</h2>
+
+<ul><li>Adding an element on the screen
+<p>Add a new <a href="edc_part_block_n.htm#part_block">part</a> inside the <a href="edc_part_block_n.htm#Parts">parts block</a>.</p></li>
+<li>Using an image
+<p>List the image in the <a href="edc_part_block_n.htm#Images">images block</a>, make sure the <a href="edc_part_block_n.htm#part_block">part</a> has <a href="edc_part_block_n.htm#type">type</a> &quot;IMAGE&quot; and set the <a href="edc_part_block_n.htm#description_image_normal">normal</a> property inside <a href="edc_part_block_n.htm#description_image">description.image</a> of part.</p></li>
+<li>Using the same color definitions across multiple elements
+<p>Define a <a href="edc_part_block_n.htm#Color_classes">color class</a> and set the <a href="edc_part_block_n.htm#description_color_class">description.color_class</a> property.</p></li>
+<li>Positioning or resizing a part (relative and absolute positioning)
+<p>Fill in the <a href="edc_part_block_n.htm#description_rel1_2">rel1 and rel2</a> structures inside the <a href="edc_part_block_n.htm#description">description block</a>.</p></li>
+<li>Hiding a part
+<p>Set the <a href="edc_part_block_n.htm#description_visible">visible property</a> to 0.</p></li>
+<li>Animating a part
+<ol><li><p>Create several <a href="edc_part_block_n.htm#description">description blocks</a> inside your <a href="edc_part_block_n.htm#part_block">part</a> and give each of them a different value for <a href="edc_part_block_n.htm#description_state">state</a>. Set one description for the initial state and one for the end state.</p></li>
+<li><p>Create a <a href="edc_part_block_n.htm#program">program</a> with an <a href="edc_part_block_n.htm#action">action</a> that is <span style="font-family: Courier New,Courier,monospace;">STATE_SET &quot;end_state&quot; 0.0;</span> and with a <a href="edc_part_block_n.htm#target">target</a> that is the <a href="edc_part_block_n.htm#part_name">name</a> of the part. You can also set a non-default <a href="edc_part_block_n.htm#transition">transition</a>.</p></li>
+<li><p>When defining the second <a href="edc_part_block_n.htm#description">description</a>, <a href="edc_part_block_n.htm#description_inherit">inherit</a> from the first part in order to re-use the values which are already defined.</p></li>
+<li><p>The <a href="edc_part_block_n.htm#after">after</a> property of the <a href="edc_part_block_n.htm#program">program block</a> is used to trigger another program after the animation is done. It can be used to trigger another animation or to emit a signal to the C part of the program.</p></li></ol></li>
+<li>Making a genlist item theme
+<p>Create a <a href="edc_part_block_n.htm#group_block">group</a> with one <a href="edc_part_block_n.htm#part">part element</a> for each part that can be filed from the C code and set the <a href="edc_part_block_n.htm#Items">items properties</a> inside the <a href="edc_part_block_n.htm#group_block">group element</a>: </p>
+
+<pre class="prettyprint">
+items: &quot;texts&quot; &quot;text_part_1 text_part_2&quot;;
+items: &quot;icons&quot; &quot;image_part_1 image_part_2&quot;;
+</pre>
+<p>On the C side, the <span style="font-family: Courier New,Courier,monospace;">text_get</span> and <span style="font-family: Courier New,Courier,monospace;">content_get</span> callback are called respectively with <span style="font-family: Courier New,Courier,monospace;">text_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">text_part_2</span>, and <span style="font-family: Courier New,Courier,monospace;">image_part_1</span> and <span style="font-family: Courier New,Courier,monospace;">image_part_2</span>. </p></li>
+
+<li>Using the image masking effect
+<p>EDC files support an image masking effect that applies the transparency of a mask image to a content object.</p>
+
+<p class="figure">Figure: Masking effect</p>
+<p align="center"><img alt="Masking effect" src="../../images/edc_masking.png" /></p>
+
+<p>To use the image masking effect, add 2 new <a href="edc_part_block_n.htm#part_block">parts</a> inside the <a href="edc_part_block_n.htm#Parts">parts block</a> used as a content and mask. Set the mask using the <span style="font-family: Courier New,Courier,monospace;">clip_to</span> keyword in the content part.</p>
+<pre class="prettyprint">
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;}
+}
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;clip_to: &quot;mask&quot;;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style: &quot;text_style&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;TEXT&lt;br&gt;WITH&lt;br&gt;MASK&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;mask&quot;;
+&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;mask.png&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>The content part is cropped off in the mask shape, which depends on the alpha value per pixel. The content part can be almost any <a href="edc_part_block_n.htm#type">type</a> in the EDC files, but the mask part can only be the <span style="font-family: Courier New,Courier,monospace;">IMAGE</span> type.</p>
+</li>
+</ul>
+
+ <table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_manage_animation_n.htm b/org.tizen.ui.guides/html/native/efl/edje_manage_animation_n.htm
new file mode 100755 (executable)
index 0000000..23049bf
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_manage_animation_n.htm
@@ -0,0 +1,728 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Edje Animations</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+       <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+               <li><a href="#layout">Creating the Application Layout</a></li>\r
+               <li><a href="#logic">Creating the Application Logic</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     \r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+  <h1>Edje Animations</h1> \r
+\r
+<p>This tutorial demonstrates how you can turn Edje animations on and off, pause, stop and resume them, and check the status of Edje parts.</p>\r
+\r
+\r
+<h2 id="layout" name="layout">Creating the Application Layout</h2>\r
+\r
+<p>Create a simple application with a menu and separate screens for each Edje Animation function:</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Create a simple main layout with a swallow for demo animation and another for controls:</p>\r
+\r
+<pre class="prettyprint">collections \r
+{\r
+&nbsp;&nbsp;&nbsp;group \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;demo&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.demo&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.control&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.control&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.8;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create a group for the cycled animation:</p>\r
+<pre class="prettyprint">group \r
+{\r
+&nbsp;&nbsp;&nbsp;name: &quot;cycled_animation&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 100 100 100 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;clicked&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 100 100 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;a&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.3 0.3;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;red&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.35 0.7;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.65 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;blue&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.7 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.3;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;programs \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg_click&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;bg&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;clicked&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;bg&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;blue&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;step3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;a&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;step1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create another group for animation that can be activated by clicking:</p>\r
+<pre class="prettyprint">group \r
+{\r
+&nbsp;&nbsp;&nbsp;name: &quot;clickme&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 100 100 100 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_bg&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;text&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;text&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;:-)&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;:-D&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_bg2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 200 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;text2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;text2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Click me&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Click me&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 42;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;state2&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;programs \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;clicked&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;text3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;state2&quot; 0.00;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 3.00000;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text_bg2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;return&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;text2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: LINEAR 1.00000;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;text_bg2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+</li>\r
+</ol>\r
+\r
+<h2 id="logic" name="logic">Creating the Application Logic</h2>\r
+\r
+<ol>\r
+<li>Create new project named <span style="font-family: Courier New,Courier,monospace">test</span>.</li>\r
+\r
+<li>Add 2 new files to the application project:<span style="font-family: Courier New,Courier,monospace">edje_animation.h</span> and <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span>.</li>\r
+<li>To access the application data from the newly created files, move the <span style="font-family: Courier New,Courier,monospace">appdata_s</span> structure from the <span style="font-family: Courier New,Courier,monospace">test.c</span> file to the <span style="font-family: Courier New,Courier,monospace">test.h</span> file and remove the <span style="font-family: Courier New,Courier,monospace">static</span> specifier.</li>\r
+\r
+<li>Add the following code to the <span style="font-family: Courier New,Courier,monospace">edje_animation.h</span> file:\r
+<pre class="prettyprint">#ifndef __edje_animation_H__\r
+#define __edje_animation_H__\r
+#include &quot;test.h&quot;\r
+\r
+typedef struct _edje_animation_item_s \r
+{\r
+&nbsp;&nbsp;&nbsp;const char *name;\r
+&nbsp;&nbsp;&nbsp;Evas_Object* (*func)(appdata_s *ap);\r
+} \r
+Edje_Animation_Menu_Item;\r
+\r
+#endif // __edje_animation_H__</pre>\r
+\r
+<p>This structure will define menu items and their callbacks.</p>\r
+</li>\r
+\r
+<li>\r
+<p>Create a global menu array in the <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span> file and fill it with necessary items:</p>\r
+<pre class="prettyprint">Edje_Animation_Menu_Item edje_animation_items[] =\r
+{\r
+&nbsp;&nbsp;&nbsp;{&quot;test1&quot;, _test1_func },\r
+&nbsp;&nbsp;&nbsp;{&quot;test2&quot;, _test2_func },\r
+\r
+&nbsp;&nbsp;&nbsp;{NULL, NULL } // Do not delete\r
+};</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Use the array to fill the  main menu:</p>\r
+<pre class="prettyprint">extern Edje_Animation_Menu_Item edje_animation_items[];\r
+\r
+static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Genlist\r
+&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();\r
+&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;\r
+&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+\r
+&nbsp;&nbsp;&nbsp;int i;\r
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;for (i = 0; edje_animation_items[i].name; ++i)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, edje_animation_items[i].name, NULL,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)&amp;edje_animation_items[i]);\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+</li>\r
+\r
+<li>All examples use the same basic layout:\r
+<pre class="prettyprint">static void\r
+app_get_resource(const char *edj_file_in, char *edj_path_out, int edj_path_max)\r
+{\r
+&nbsp;&nbsp;&nbsp;char *res_path = app_get_resource_path();\r
+&nbsp;&nbsp;&nbsp;if (res_path) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  snprintf(edj_path_out, edj_path_max, &quot;%s%s&quot;, res_path, edj_file_in);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  free(res_path);\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+static void\r
+_example_layout_create(appdata_s *ad,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *layout_group,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *demo_group,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object **layout_out,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object **animation_out)\r
+{\r
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };\r
+\r
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+\r
+&nbsp;&nbsp;&nbsp;*layout_out = elm_layout_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(*layout_out, edj_path, layout_group);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(*layout_out, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+\r
+&nbsp;&nbsp;&nbsp;*animation_out = edje_object_add(evas_object_evas_get(ad-&gt;win));\r
+&nbsp;&nbsp;&nbsp;edje_object_file_set(*animation_out, edj_path, demo_group);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(*animation_out, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(*layout_out, SWALLOW_DEMO, *animation_out);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(*animation_out);\r
+}</pre>\r
+</li>\r
+\r
+<li>You can try out the following operations to see how the application works:\r
+\r
+<ul>\r
+<li>Check the time for each frame.\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_frametime_get()</span> function allows you to check how much time is elapsed for single frame. This is a value of an internal parameter and not actual frame time. You can change it using the <span style="font-family: Courier New,Courier,monospace">edje_frametime_set()</span> function.</p>\r
+\r
+ <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Changing the frame time affects all objects on the same canvas, not only on the given one.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+ \r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_frametime_get()</span> function and <span style="font-family: Courier New,Courier,monospace">edje_frametime_set()</span> function in the <span style="font-family: Courier New,Courier,monospace">edje_animation.c</span> file:</p>\r
+<pre class="prettyprint">// edje_frametime_set/get\r
+static void\r
+_frametime_test_spinner_changed_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;edje_frametime_set(elm_spinner_value_get(obj));\r
+}\r
+\r
+Evas_Object *\r
+frametime_test(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *spinner;\r
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);\r
+\r
+&nbsp;&nbsp;&nbsp;spinner = elm_spinner_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_label_format_set(spinner, &quot;Frame_t: %1.3f&quot;);\r
+&nbsp;&nbsp;&nbsp;double framerate = edje_frametime_get();\r
+&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(spinner, 0.001, 2.0);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_step_set(spinner, 0.005);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_value_set(spinner, framerate);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(spinner, &quot;changed&quot;, _frametime_test_spinner_changed_cb, NULL);\r
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, spinner);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(spinner);\r
+\r
+&nbsp;&nbsp;&nbsp;return layout;\r
+}\r
+\r
+Edje_Animation_Menu_Item edje_animation_items[] =\r
+{\r
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},\r
+\r
+&nbsp;&nbsp;&nbsp;{NULL, NULL}\r
+};</pre>\r
+\r
+<p>The spinner displays the current frame time value and enables changing it. Extreme values (&gt; 0.9) are affecting animation.</p>\r
+\r
+<p class="figure">Figure: Displaying the frame time</p> \r
+<p align="center"><img alt="Displaying the frame time" src="../../images/show_frametime.png" /></p>\r
+\r
+</li>\r
+\r
+<li>Pause and resume animation and check its status.\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_object_play_set()</span> function allows you to pause or resume animation for a given object. A resumed animation starts from the same point.</p>\r
+<p>To check whether the animation is paused, use the <span style="font-family: Courier New,Courier,monospace">edje_object_play_get()</span> function.</p>\r
+\r
+<pre class="prettyprint">// edje_object_play_set/get\r
+static void\r
+_play_test_button_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;\r
+&nbsp;&nbsp;&nbsp;if (edje_object_play_get(anim))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_play_set(anim, EINA_FALSE);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Play&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_play_set(anim, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Pause&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+Evas_Object *\r
+play_test(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;\r
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Pause&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _play_test_button_cb, animation);\r
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+\r
+&nbsp;&nbsp;&nbsp;return layout;\r
+}\r
+\r
+Edje_Animation_Menu_Item edje_animation_items[] =\r
+{\r
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},\r
+&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;{NULL, NULL}\r
+};</pre>\r
+</li>\r
+\r
+<li>Stop the animation.\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_object_freeze()</span> function allows you to stop animation rendering. This function puts all changes on hold. Successive freezes are nested, requiring an equal number of thaws. Using the <span style="font-family: Courier New,Courier,monospace">edje_object_thaw()</span> function, you can apply all changes immediately.</p>\r
+\r
+<pre class="prettyprint">// edje_object_freeze/thaw\r
+static void\r
+_freeze_test_button_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;\r
+&nbsp;&nbsp;&nbsp;static int i = 0;\r
+&nbsp;&nbsp;&nbsp;if(!i)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = edje_object_freeze(anim);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Thaw&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = edje_object_thaw(anim);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Freeze&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+Evas_Object *\r
+freeze_test(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;\r
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CYCLED_ANIM, &amp;layout, &amp;animation);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Freeze&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _freeze_test_button_cb, animation);\r
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+\r
+&nbsp;&nbsp;&nbsp;return layout;\r
+}\r
+\r
+Edje_Animation_Menu_Item edje_animation_items[] =\r
+{\r
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},\r
+\r
+&nbsp;&nbsp;&nbsp;{NULL, NULL}\r
+};</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_freeze()</span> function and <span style="font-family: Courier New,Courier,monospace">edje_thaw()</span> function freeze or thaw all objects in the entire application.</p>\r
+</li>\r
+\r
+<li>Enable and disable the animation.\r
+\r
+<p>All transitions in edje programs are ignored and parts go directly to their final states.</p>\r
+\r
+<pre class="prettyprint">// edje_object_animation_set/get\r
+static void\r
+_animation_test_button_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;\r
+&nbsp;&nbsp;&nbsp;if (edje_object_animation_get(anim))\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_animation_set(anim, EINA_FALSE);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Turn animation on&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_animation_set(anim, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, &quot;Turn animation off&quot;);\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+\r
+Evas_Object *\r
+animation_test(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;\r
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CLICKME, &amp;layout, &amp;animation);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Turn animation off&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _animation_test_button_cb, animation);\r
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+\r
+&nbsp;&nbsp;&nbsp;return layout;\r
+}\r
+\r
+Edje_Animation_Menu_Item edje_animation_items[] =\r
+{\r
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;animation test&quot;, animation_test},\r
+\r
+&nbsp;&nbsp;&nbsp;{NULL, NULL}\r
+};</pre>\r
+</li>\r
+\r
+<li>Get the current state of given part.\r
+\r
+<p>Parts that are in transition return the transition&#39;s starting state.</p>\r
+\r
+<pre class="prettyprint">// edje_object_part_state_get\r
+static void\r
+_state_get_test_button_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *anim = data;\r
+&nbsp;&nbsp;&nbsp;const char *state;\r
+&nbsp;&nbsp;&nbsp;double state_val = 0;\r
+&nbsp;&nbsp;&nbsp;state = edje_object_part_state_get(anim, &quot;text&quot;, &amp;state_val);\r
+&nbsp;&nbsp;&nbsp;edje_object_part_text_set(anim, &quot;text&quot;, state);\r
+}\r
+\r
+Evas_Object *\r
+state_get_test(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *layout, *animation, *button;\r
+&nbsp;&nbsp;&nbsp;_example_layout_create(ad, GRP_DEMO, GRP_CLICKME, &amp;layout, &amp;animation);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Get state&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _state_get_test_button_cb, animation);\r
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, SWALLOW_CONTROL, button);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+\r
+&nbsp;&nbsp;&nbsp;return layout;\r
+}\r
+\r
+Edje_Animation_Menu_Item edje_animation_items[] =\r
+{\r
+&nbsp;&nbsp;&nbsp;{&quot;frametime test&quot;, frametime_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;play test&quot;, play_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;freeze/thaw test&quot;, freeze_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;animation test&quot;, animation_test},\r
+&nbsp;&nbsp;&nbsp;{&quot;part state get test&quot;, state_get_test},\r
+\r
+&nbsp;&nbsp;&nbsp;{NULL, NULL}\r
+};</pre>\r
+</li>\r
+</ul>\r
+</li>\r
+</ol>\r
+\r
+\r
+  \r
+  \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_message_signal_n.htm b/org.tizen.ui.guides/html/native/efl/edje_message_signal_n.htm
new file mode 100755 (executable)
index 0000000..958a3fe
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_message_signal_n.htm
@@ -0,0 +1,457 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Managing Signals and Messages</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">        
+                       <li><a href="#signals">Signals</a></li>
+                       <li><a href="#messages">Messages</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Managing Signals and Messages</h1> 
+
+   
+<p>Edje objects have 2 communication interfaces between the application logic (code) and GUI (theme). You can either emit a signal from the code to the theme, or create handles for the signals emitted from the theme. Signals are identified by strings. With Edje messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p>
+
+  
+ <h2 id="signals" name="signals">Signals</h2>
+   <p>You can emit signals from code to a theme, or create handles for the signals emitted from themes. Signals are identified by strings.</p>
+   
+   <p>Using signals in the EDC file is simple. Create a program and set the signal name to the <span style="font-family: Courier New,Courier,monospace;">signal</span> attribute.</p>
+   
+   <pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.check&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+  
+ <h3 id="emit" name="emit">Emitting Signals from the C Code</h3>
+ 
+   <p>Create the Edje Object and widget check. When a <span style="font-family: Courier New,Courier,monospace;">changed</span>  event is triggered, a signal is emitted from the C code to the EDC file.</p>
+   
+   <pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;// Base layout
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_object = edje_object_add(evas_object_evas_get(ad-&gt;win));
+&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object, edj_path, GRP_MAIN);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;ad-&gt;check = elm_check_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;edje_object_part_swallow(ad-&gt;edje_object, &quot;swallow.check&quot;, ad-&gt;check);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;check, &quot;changed&quot;, _check_toggled, ad);
+
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;edje_object);
+&nbsp;&nbsp;&nbsp;// Show the window
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+</pre>
+
+   <p>The following figure displays the result.</p>
+   
+       <p class="figure">Figure: Signal implemented on the screen</p> 
+       <p align="center"><img alt="Signal implemented on the screen" src="../../images/edje_signal1.png" /></p>
+       
+<p>The following example implements the callback for the <span style="font-family: Courier New,Courier,monospace;">changed</span> event from the widget check.</p>
+<pre class="prettyprint">
+static void
+_check_toggled(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;if (elm_check_state_get(obj))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_object, &quot;to,state,default,1&quot;, &quot;&quot;);
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_object, &quot;to,state,default,0&quot;, &quot;&quot;);
+}
+</pre>
+
+<p>The following figure displays the result.</p>
+
+       <p class="figure">Figure: Widget check status changed</p> 
+       <p align="center"><img alt="Widget check status changed" src="../../images/edje_signal2.png" /></p>
+       
+       
+<h2 id="messages" name="messages">Messages</h2>
+ 
+<p>Edje messages are used for communication between code and a given Edje object&#39;s theme. With messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p>
+       
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">rect1</span>  part is made draggable and 2 sliders added to change the part position.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;drag_area&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.check&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.slider_hor&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dragable 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 1 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 1 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;confine: &quot;drag_area&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description { state: &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.check&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.slider_ver&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.check&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.slider_hor&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.slider_hor&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;swallow.slider_ver&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;to_default_1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;to,state,default,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.00;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;drag&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float:y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_drag(PART:&quot;rect1&quot;, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 2, x);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 3, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>  
+       
+       <p>Add the sliders:</p>
+       
+       <pre class="prettyprint">
+ad-&gt;slider_ver = elm_slider_add(ad-&gt;win);
+edje_object_part_swallow(ad-&gt;edje_object, &quot;swallow.slider_ver&quot;, ad-&gt;slider_ver);
+elm_slider_horizontal_set(ad-&gt;slider_ver, EINA_FALSE);
+evas_object_smart_callback_add(ad-&gt;slider_ver, &quot;changed&quot;, _slider_changed, ad);
+
+ad-&gt;slider_hor = elm_slider_add(ad-&gt;win);
+evas_object_smart_callback_add(ad-&gt;slider_hor, &quot;changed&quot;, _slider_changed, ad);
+</pre>
+
+       <p>The following figure displays the result.</p>
+       <p class="figure">Figure: Sliders added</p> 
+       <p align="center"><img alt="Sliders added" src="../../images/edje_message.png" /></p>
+       
+       <p>To handle the message in the Style, add the following script to the EDC file:</p>
+       
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
+&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;{            
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public message(Msg_Type:type, id, ...) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((type == MSG_FLOAT_SET) &amp;&amp; (id == 1)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float:y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = getfarg(2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y = getfarg(3);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set_drag(PART:&quot;rect1&quot;, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+       
+       <p>This script is called when an incoming message is detected.</p>
+
+ <h3 id="send_message" name="send_message">Sending Messages</h3>
+ 
+       <p>Add a callback for the <span style="font-family: Courier New,Courier,monospace;">changed</span>  event to send a message to the Style:</p>
+       
+       <pre class="prettyprint">
+static void
+_slider_changed(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Edje_Message_Float_Set *msg;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;msg = malloc(sizeof(*msg) + 1 * sizeof(float));
+&nbsp;&nbsp;&nbsp;msg-&gt;count = 2;
+&nbsp;&nbsp;&nbsp;msg-&gt;val[0] = elm_slider_value_get(ad-&gt;slider_hor);
+&nbsp;&nbsp;&nbsp;msg-&gt;val[1] = elm_slider_value_get(ad-&gt;slider_ver);
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;edje_object_message_send(ad-&gt;edje_object, EDJE_MESSAGE_FLOAT_SET, 1, msg);
+&nbsp;&nbsp;&nbsp;free(msg);
+}
+</pre>
+
+<p>The same message can be sent in the opposite direction. To send messages in EDC script (Embryo – link to Embryo), use the <span style="font-family: Courier New,Courier,monospace;">sent_message()</span>  function.</p>
+       
+       <pre class="prettyprint">
+program 
+{
+&nbsp;&nbsp;&nbsp;signal: &quot;drag&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;script 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Float:x, Float:y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_drag(PART:&quot;rect1&quot;, x, y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 2, x);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;send_message(MSG_FLOAT, 3, y);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+       
+       <p>2 messages are sent using the <span style="font-family: Courier New,Courier,monospace;">drag</span> signal from the <span style="font-family: Courier New,Courier,monospace;">rect1</span> part.</p>
+       
+       <p>Add a message handler in the C code:</p>
+       
+       <pre class="prettyprint">
+edje_object_message_handler_set(ad-&gt;edje_object, _message_handle, ad);
+</pre>
+       
+       <p>Add a callback:</p>
+
+       <pre class="prettyprint">
+static void
+_message_handle(void *data, Evas_Object *obj, Edje_Message_Type type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int id, void *msg)
+{
+&nbsp;&nbsp;&nbsp;Edje_Message_Float *m;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;if (type != EDJE_MESSAGE_FLOAT) return;
+&nbsp;&nbsp;&nbsp;m = msg;
+&nbsp;&nbsp;&nbsp;if (id == 2) elm_slider_value_set(ad-&gt;slider_hor, m-&gt;val);
+&nbsp;&nbsp;&nbsp;if (id == 3) elm_slider_value_set(ad-&gt;slider_ver, m-&gt;val);
+}
+</pre>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_objects_n.htm b/org.tizen.ui.guides/html/native/efl/edje_objects_n.htm
new file mode 100755 (executable)
index 0000000..0c0bb0b
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_objects_n.htm
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Edje Objects: Managing Layouts and Layout Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Edje Objects: Managing Layouts and Layout Components</h1> 
+
+   
+<p>You can build and handle layouts using Edje objects. An Edje object is a type of Evas object for displaying units, such as rectangles, lines, polygons, text, and images. Edje objects are only used in Edje and provide functions that deal with Edje layouts and layout components. Namely, there is no Edje object type in the source code for implementing an application. The objects are mainly <a href="edc_part_block_n.htm">layouts or themes defined by groups and parts</a>, and declared in EDC files. </p> 
+<p>Edje provides functions for the following features:</p>
+
+  <ul>
+ <li><a href="edje_files_n.htm">Handling Edje Files</a>
+   <p>Edje layouts are called themes and created using the EDC language. The EDC language is declarative and must be compiled before being used. The output of this compilation is an EDJ file, which can be loaded by Edje, and the result is an Edje object.</p></li>
+   
+   <li><a href="edje_scaling_n.htm">Scaling Edje Objects</a>
+   <p>Edje enables you to build scalable interfaces. There are 2 types of scaling factors, which are set to neutral (1.0) values by default (no scaling, actual sizes): global and individual. Scaling affects the minimum and maximum values of the part sizes, which are multiplied. Font sizes are scaled, too.</p></li>
+   
+   <li><a href="edje_color_n.htm">Using Edje Color Classes</a>
+   <p>To change the color and text of 2 or more parts simultaneously, you can use color classes. If parts are assigned with a color class, setting the color values to this class causes all the parts to have their colors multiplied by the values. Setting the values to a color class at a process level affects all parts with that color class, while at the object level, only the parts inside a specified object are affected.</p></li>
+   
+   <li><a href="edje_text_n.htm">Using Edje Text Classes</a>
+   <p>To change the text of 2 or more parts simultaneously, you can use text classes. If parts are assigned with a text class, setting the font attributes to this class updates all these parts with the new font attributes. Setting the values to a text class at a process level affects all parts with that text class, while at the object level, only the parts inside a specified object are affected.</p></li>
+   
+   <li><a href="edje_perspective_n.htm">Using Edje Perspective</a> 
+   <p>Perspective is a graphical tool that makes 2D objects appear as 3D. The perspective can be used with all Edje objects.</p></li>
+   
+   <li><a href="edje_message_signal_n.htm">Managing Signals and Messages</a>
+   <p>Edje objects have 2 communication interfaces between the logic and GUI. You can either emit a signal from the logic to the GUI, or create handles for the signals emitted from the GUI. Signals are identified by strings. With Edje messages, you can communicate values, such as strings, float numbers, and integer numbers. Messages can also be identified by integer numbers.</p></li> 
+   
+   <li><a href="edje_manage_animation_n.htm">Managing Edje Animations</a>
+   <p>Edje has the ability to animate their objects. You can start, stop, play, pause, freeze, and thaw Edje animations, and check their status.</p></li>
+  </ul>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_perspective_n.htm b/org.tizen.ui.guides/html/native/efl/edje_perspective_n.htm
new file mode 100755 (executable)
index 0000000..cb50901
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_perspective_n.htm
@@ -0,0 +1,486 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Using Edje Perspective</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">        
+                       <li><a href="#application_skeleton">Creating the Basic Application</a></li>
+                       <li><a href="#play">Playing with the Perspective</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Using Edje Perspective</h1> 
+
+   
+<p>This tutorial demonstrates how you can create a 3D projection of a 2D object.</p> 
+<p>Edje Perspective is a graphical tool that makes 2D objects appear like they have a 3D appearance.</p>
+<p>Edje Perspective can be used in all Edje objects to create and configure a perspective objects and to set the to an Edje object or a canvas, affecting all the objects within that have no specific perspective already defined.</p>
+
+  <h2 id="application_skeleton" name="application_skeleton">Creating the Basic Application</h2>
+  <p>The perspective application has buttons to move the Edje object and change its perspective. The Edje object is a 2D object that changes its position so that the perspective point can be applied.</p>
+  
+ <table>
+  <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The loaded Edje object must have the perspective option enabled in its EDC source code.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+ 
+  <p>Create a simple Edje object that has 4 states: left-top, right-top, left-bottom, and right-bottom. Clicking a button emits signals into the object and makes the object move.</p>
+  
+  <ol>
+  <li>
+  
+  <p>The following example implements the Edje object:</p>
+  
+<pre class="prettyprint">
+group 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;example/group&quot;;
+&nbsp;&nbsp;&nbsp;min: 480 320;
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 1;           
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 128;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -5 -5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 4 4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 45;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 15;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouse_events: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 200 200 200 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Perspective example&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective_on: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: 45;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: 15;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;right&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 0.2;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;bottom&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.2 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.2 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;bottomright&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 0.8;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;programs 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,right&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,1,0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;right&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,bottom&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,0,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;bottom&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,bottomright&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,1,1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;bottomright&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;move,default&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;move,0,0&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: SINUSOIDAL 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;title&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;after: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;animation,end&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;animation,end&quot; &quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+</li>
+
+<li>
+<p>Create the application. Create a basic window widget that is going to be loaded and created in the main starting function:</p>
+
+<pre class="prettyprint">
+// Window
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 90, 180, 270 
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+}
+</pre> 
+</li>
+
+<li>
+<p>Add a conformant and set the main layout of the application. </p>
+<p>The main layout is described in the EDC part and consists of 2 swallows. The first swallow has the Edje object loaded into it. The second contains a box of buttons to manipulate the perspective of the Edje object.</p>
+
+<pre class="prettyprint">
+// Conformant
+ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+evas_object_show(ad-&gt;conform);
+
+// Base layout
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ad-&gt;layout = elm_layout_add(ad-&gt;win);
+elm_layout_file_set(ad-&gt;layout, edj_path, GRP_MAIN);
+evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+eext_object_event_callback_add(ad-&gt;layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+elm_object_content_set(ad-&gt;conform, ad-&gt;layout);
+</pre> 
+</li>
+
+<li>
+<p>Create the Edje object on Evas using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> function. This function is very useful because you must operate on the canvas, but have only an object pointer to a window object.</p>
+
+<pre class="prettyprint">
+Evas *evas;
+evas = evas_object_evas_get(ad-&gt;win);
+ad-&gt;edje_obj = edje_object_add(evas);
+</pre> 
+</li>
+
+<li>
+<p>Instantiate a new Edje object by creating a new Edje smart object and returning its <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> handle:</p>
+
+<pre class="prettyprint">
+ad-&gt;edje_obj = edje_object_add(evas);
+</pre>
+</li>
+
+<li>
+<p>An Edje object is useless without a source file set to it, so use the <span style="font-family: Courier New,Courier,monospace;">edje_object_file_set()</span> function to set the object into the main layout:</p>
+
+<pre class="prettyprint">
+ad-&gt;edje_obj = edje_object_add(evas);
+edje_object_file_set(ad-&gt;edje_obj, edj_path, &quot;example/group&quot;);
+evas_object_move(ad-&gt;edje_obj, 0, 0);
+evas_object_show(ad-&gt;edje_obj);
+elm_object_part_content_set(ad-&gt;layout, &quot;swallow&quot;, ad-&gt;edje_obj);
+</pre>
+
+<p class="figure">Figure: Main layout with the swallow part highlighted</p> 
+<p align="center"><img alt="Main layout with the swallow part highlighted" src="../../images/perspective_swallow.png" /></p>  
+</li>
+
+<li>
+<p>Create the actual perspective object, define its position, focal distance and Z plane position, and set it as global:</p>
+
+<pre class="prettyprint">
+ad-&gt;ps = edje_perspective_new(evas);        
+edje_perspective_set(ad-&gt;ps, 160, 320, 0, ad-&gt;focal);
+edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
+</pre>
+
+<p>To set the perspective of the Edje object, instead of setting it as global to the entire canvas, you can use the <span style="font-family: Courier New,Courier,monospace">edje_object_perspective_set()</span> function.
+</p>
+</li>
+
+<li>
+<p>Create a new perspective in the canvas by setting up the transformation for the perspective object:</p>
+
+<pre class="prettyprint">
+void 
+edje_perspective_set(Edje_Perspective * ps, Evas_Coord px, Evas_Coord py, Evas_Coord z0, Evas_Coord foc)
+</pre>
+
+<p>This sets the parameters of the perspective transformation. X, Y, and Z values are used. The <span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> points specify the infinite distance point in the 3D conversion, where all lines converge. The <span style="font-family: Courier New,Courier,monospace">z0</span> point specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates. Any points on the Z value do not have their X and Y values modified in the transformation. The points further away (with a higher Z value) shrink into the distance, and those that are closer expand and become bigger.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">foc</span> value determines the focal length of the camera. This is the distance between the camera lens plane and the <span style="font-family: Courier New,Courier,monospace">z0</span> Z value. This allows for some depth control. The <span style="font-family: Courier New,Courier,monospace">foc</span> value must be greater than 0.</p>
+</li>
+
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">Swallow buttons</span> layout part contains a box of buttons to manipulate the perspective of the loaded Edje object.</p>
+
+<p class="figure">Figure: Main layout with swallow buttons highlighted</p> 
+<p align="center"><img alt="Main layout with swallow buttons highlighted" src="../../images/perspective_buttons.png" /></p>  
+
+<p>Add the box and pack the buttons into it. Name the first button <strong>Global</strong> and register a callback for clicking:</p>
+
+<pre class="prettyprint">
+Evas_Object *box, *button;
+// Adding box
+box = elm_box_add(ad-&gt;layout);
+evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);
+evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);
+elm_box_horizontal_set(box, EINA_TRUE);
+evas_object_show(box);
+elm_object_part_content_set(ad-&gt;layout, &quot;swallow.buttons&quot;, box);
+
+button = elm_button_add(ad-&gt;layout);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button, &quot;move&quot;);
+evas_object_show(button);
+elm_box_pack_end(box, button);
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_clicked, ad);
+
+button = elm_button_add(ad-&gt;layout);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button, &quot;more&quot;);
+evas_object_show(button);
+elm_box_pack_end(box, button);
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_more_clicked, ad);
+
+button = elm_button_add(ad-&gt;layout);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button, &quot;less&quot;);
+evas_object_show(button);
+elm_box_pack_end(box, button);
+evas_object_smart_callback_add(button, &quot;clicked&quot;, _on_btn_less_clicked, ad);
+
+ad-&gt;edje_obj = edje_object_add(evas);
+edje_object_file_set(ad-&gt;edje_obj, edj_path, &quot;example/group&quot;);
+evas_object_move(ad-&gt;edje_obj, 0, 0);
+evas_object_show(ad-&gt;edje_obj);
+elm_object_part_content_set(ad-&gt;layout, &quot;swallow&quot;, ad-&gt;edje_obj);
+</pre>
+</li>
+
+<li>
+<p>Show the main window:</p>
+
+<pre class="prettyprint">
+evas_object_show(ad-&gt;win);
+</pre>
+
+<p class="figure">Figure: Main screen</p> 
+<p align="center"><img alt="Figure: Main screen" src="../../images/perspective_screen.png" /> </p>
+
+</li>
+</ol>
+
+<h2 id="play" name="play">Playing with the Perspective</h2>
+
+<ol>
+<li>
+<p>The callback for a clicked button is converted to a signal determining where the text and rectangle must be moved:</p>
+
+<pre class="prettyprint">
+static void
+_part_move(appdata_s *ad, int dx, int dy)
+{
+&nbsp;&nbsp;&nbsp;char emission[64];
+
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, &quot;AAAA&quot;, &quot;x,y = %d, %d&quot;, dx, dy);
+&nbsp;&nbsp;&nbsp;snprintf(emission, sizeof(emission), &quot;move,%d,%d&quot;, dx, dy);
+&nbsp;&nbsp;&nbsp;edje_object_signal_emit(ad-&gt;edje_obj, emission, &quot;&quot;);
+}
+</pre>
+</li>
+
+<li>
+<p>The callback representing the Edje object move calls the <span style="font-family: Courier New,Courier,monospace">part_move()</span> function that directly sends a signal to the Edje part. The moving action is treated in the <span style="font-family: Courier New,Courier,monospace">program</span> according to the passed signal.</p>
+
+<pre class="prettyprint">
+static void
+_on_btn_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;static int i = 0;
+&nbsp;&nbsp;&nbsp;switch (i) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 0:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 1, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 1, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 2:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 0, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 3:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_part_move(ad, 0, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;i++;
+&nbsp;&nbsp;&nbsp;i = i%4;
+}
+</pre>
+
+<p class="figure">Figure: Moving process</p> 
+<p align="center">-><img alt="Figure: Moving process" src="../../images/moving1.png" /> <img alt="Figure: Moving process" src="../../images/moving2.png" /></p>
+</li>
+
+<li>
+<p>By clicking the <strong>More</strong> and <strong>Less</strong> buttons, you can increase or decrease the focal length of the camera:</p>
+
+<pre class="prettyprint">
+static void
+_on_btn_more_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;focal += 5;
+&nbsp;&nbsp;&nbsp;edje_perspective_set(ad-&gt;ps, 160, 320, 0, ad-&gt;focal);
+&nbsp;&nbsp;&nbsp;edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
+}
+
+static void
+_on_btn_less_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;ad-&gt;focal -= 5;
+&nbsp;&nbsp;&nbsp;edje_perspective_set(ad-&gt;ps,160, 320, 0, ad-&gt;focal);
+&nbsp;&nbsp;&nbsp;edje_perspective_global_set(ad-&gt;ps, EINA_TRUE);
+}
+</pre>
+
+<p class="figure">Figure: Decreasing and increasing the focal length</p>
+
+<p align="center"><img alt="Decreasing and increasing the focal length" src="../../images/focal_length.png" /></p>
+</li>
+</ol>
+ 
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/edje_scaling_n.htm b/org.tizen.ui.guides/html/native/efl/edje_scaling_n.htm
new file mode 100755 (executable)
index 0000000..ff9b16e
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_scaling_n.htm
@@ -0,0 +1,794 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Scaling Edje Objects</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+       \r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+               <li><a href="#init">Initializing the EDC File</a></li>\r
+               <li><a href="#init_app">Initializing the Application</a></li>\r
+               <li><a href="#global">Setting Global Scales</a></li>\r
+               <li><a href="#set">Setting Scales for Edje Objects</a></li>\r
+               <li><a href="#scales">Personal, Global, and Base Scales</a></li>\r
+               </ul>   \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Scaling Edje Objects</h1>\r
+\r
+<p>This demonstrates how you can scale Edje objects. Scalability is important when building user interfaces for different environments, such as mobile phones and laptops.</p>\r
+<p>The natural value of scale factors is 1.0. Scaling affects minimum and maximum part size and font size, and multiplies them.</p>\r
+\r
+<p>You can disable scaling of certain parts.</p>\r
+\r
+<h2 id="init" name="init">Initializing the EDC File</h2>\r
+\r
+<p>Set up and prepare the EDC source code for loading the Edje objects in your application:</p>\r
+\r
+<ol>\r
+<li>\r
+<p>To demonstrate Edje scale usability, set up 2 groups. The first group contains only one scalable part.</p>\r
+\r
+<pre class="prettyprint">group \r
+{ \r
+&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scalable_rect&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 16 16;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<p class="figure">Figure: First scalable group</p> \r
+<p align="center"><img alt="First scalable group" src="../../images/scalable_group1.png" /></p>\r
+\r
+<p>For this example, the group is used for showing Edje&#39;s global scale.</p>\r
+\r
+<p>The other group is used for showing usability of the edje_object_scale function. The group has 2 non-scalable parts (<span style="font-family: Courier New,Courier,monospace">not_scalable_rect1</span> and <span style="font-family: Courier New,Courier,monospace">not scalable_rect2</span> ), which are related to the scalable parts. It can be seen that scalability actually changes the scalable parts and all UI can be changed according to new relatives.</p>\r
+\r
+<p>Scalability of certain parts is usually preset in the EDC source code with the <span style="font-family: Courier New,Courier,monospace">scale</span>  property:</p>\r
+\r
+<pre class="prettyprint">\r
+group \r
+{ \r
+&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;not_scalable_rect1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 40 40;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 40 40;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scalable_rect&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 25 19;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 25 19;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;not_scalable_rect1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;not_scalable_rect2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 40 40;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 40 40;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 255 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;scalable_rect&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: Second scalable group</p> \r
+<p align="center"><img alt="Second scalable group" src="../../images/scalable_group2.png" /></p>\r
+</li>\r
+\r
+<li>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">base_scale</span>  factor can be used when the whole collection in the EDC file contains it:</p>\r
+\r
+<pre class="prettyprint">collections \r
+{\r
+&nbsp;&nbsp;&nbsp;base_scale: 1.2;\r
+&nbsp;&nbsp;&nbsp;group \r
+&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;group \r
+&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;group \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main_layout&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>An application must contain controls, such as a spinner, to change the scale and see the result.</p>\r
+\r
+<p>Add a box with 2 groups loaded as edje objects, and spinners for changing the scale values:</p>\r
+\r
+<pre class="prettyprint">\r
+group \r
+{ \r
+&nbsp;&nbsp;&nbsp;name: &quot;main_application&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.content&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 20;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 32;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;edje scale:&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 150 32;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;scale.swallow&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;edje object scale:&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: Main application layout</p> \r
+<p align="center"><img alt="Main application layout" src="../../images/main_app_layout.png" /></p>\r
+\r
+<p>In the example, there are the following swallows:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span> is used for the box containing the Edje objects.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">scale.swallow</span> is used for the spinner that changes the scale value a loaded Edje object.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">scale.swallow2</span> is used for the spinner that changes the global scale, so changing this value changes the scale of all Edje objects  if they do not have their own scales set using the <span style="font-family: Courier New,Courier,monospace">edje_object_scale_set()</span> function.</li>\r
+</ul>\r
+</li>\r
+</ol>\r
+\r
+<h2 id="init_app" name="init_app">Initializing the Application</h2>\r
+\r
+<p>All application code lays in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function that creates and loads all objects and forms, and creates application&#39;s main look.</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Create a window and get the path to the EDJ file:</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);\r
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+if (elm_win_wm_rotation_supported_get(ad-&gt;win))\r
+{\r
+&nbsp;&nbsp;&nbsp;int rots[4] = \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 90, 180, 270\r
+&nbsp;&nbsp;&nbsp;};\r
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);\r
+}\r
+// Path to edj group with three groups\r
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Set the conformant containing the main layout into the window:</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;conform = elm_conformant_add(ad-&gt;win);\r
+elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);\r
+elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);\r
+evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);\r
+evas_object_show(ad-&gt;conform);\r
+// Main layout\r
+ad-&gt;main_layout = elm_layout_add(ad-&gt;win);\r
+evas_object_size_hint_weight_set(ad-&gt;main_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+elm_layout_file_set(ad-&gt;main_layout, edj_path, &quot;main_application&quot;);\r
+elm_object_content_set(ad-&gt;conform, ad-&gt;main_layout);\r
+evas_object_show(ad-&gt;main_layout);\r
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+</pre>\r
+\r
+ <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">If you have layout for your window written in the EDC file, use and load it as Layout with Elementary layout API (using, for example, the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> , <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> , and <span style="font-family: Courier New,Courier,monospace">elm_layout_file_set()</span>  functions).</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+</li>\r
+\r
+<li>\r
+<p>Add the box and set it into the <span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span>  main layout swallow:</p>\r
+\r
+<pre class="prettyprint">\r
+// Add the box\r
+ad-&gt;box = elm_box_add(ad-&gt;main_layout);\r
+evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, 0.0);\r
+evas_object_size_hint_align_set(ad-&gt;box, EVAS_HINT_FILL, 0.0);\r
+elm_box_horizontal_set(ad-&gt;box, EINA_TRUE);\r
+evas_object_show(ad-&gt;box);\r
+// Set the box into the main layout\r
+elm_object_part_content_set(ad-&gt;main_layout, &quot;edje.swallow.content&quot;, ad-&gt;box);</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Load the Edje objects:</p>\r
+\r
+<pre class="prettyprint">\r
+// Add group1\r
+ad-&gt;edje_object_1 = edje_object_add(evas_object_evas_get(ad-&gt;win));\r
+evas_object_size_hint_weight_set(ad-&gt;edje_object_1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+edje_object_file_set(ad-&gt;edje_object_1, edj_path, &quot;scale_group_1&quot;);\r
+// Check object loading errors\r
+if (edje_object_load_error_get(ad-&gt;edje_object_1) != EDJE_LOAD_ERROR_NONE)\r
+{\r
+&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_1);\r
+\r
+&nbsp;&nbsp;&nbsp;return;\r
+}\r
+evas_object_show(ad-&gt;edje_object_1);</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Pack the Edje objects into the box:</p>\r
+\r
+<pre class="prettyprint">\r
+elm_box_pack_end(ad-&gt;box, ad-&gt;edje_object_1);\r
+elm_box_pack_end(ad-&gt;box, ad-&gt;edje_object_2);</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Add 2 spinners that change the scale values:</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;edje_scale = elm_spinner_add(ad-&gt;win);\r
+evas_object_size_hint_weight_set(ad-&gt;edje_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+evas_object_size_hint_align_set(ad-&gt;edje_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+elm_spinner_min_max_set(ad-&gt;edje_scale, 1, 300);\r
+elm_spinner_step_set(ad-&gt;edje_scale, 10);\r
+evas_object_show(ad-&gt;edje_scale);\r
+elm_spinner_value_set(ad-&gt;edje_scale, 100);\r
+elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow&quot;, ad-&gt;edje_scale);\r
+\r
+ad-&gt;edje_object_scale = elm_spinner_add(ad-&gt;win);\r
+evas_object_size_hint_weight_set(ad-&gt;edje_object_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+evas_object_size_hint_align_set(ad-&gt;edje_object_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+elm_spinner_min_max_set(ad-&gt;edje_object_scale, 1, 300);\r
+elm_spinner_step_set(ad-&gt;edje_object_scale, 10);\r
+evas_object_show(ad-&gt;edje_object_scale);\r
+elm_spinner_value_set(ad-&gt;edje_object_scale, 100);\r
+elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow2&quot;, ad-&gt;edje_scale);</pre>\r
+</li>\r
+\r
+<li><p>Display the window:</p>\r
+\r
+<pre class="prettyprint">\r
+evas_object_show(ad-&gt;win);</pre>\r
+\r
+<p class="figure">Figure: Scale testing application</p> \r
+<p align="center"><img alt="Scale testing application" src="../../images/scale_testing_app.png" /></p>\r
+</li>\r
+</ol>\r
+\r
+\r
+<h2 id="global" name="global">Setting Global Scales</h2>\r
+\r
+<ol>\r
+<li>\r
+<p>Add a callback for the second spinner that changes Edje global scale value and, as a result, affects all loaded Edje objects:</p>\r
+\r
+<pre class="prettyprint">static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Add scale spinners\r
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_scale = elm_spinner_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;edje_object_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;edje_object_scale, 1, 300);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;edje_object_scale, 10);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_scale);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;edje_object_scale, 100);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow2&quot;, ad-&gt;edje_object_scale);\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;edje_object_scale, &quot;changed&quot;, _on_global_scale_change, ad);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+\r
+<p>Set the scale using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span> function:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_on_global_scale_change(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;edje_scale_set(elm_spinner_value_get(obj) / 100);\r
+}</pre>\r
+\r
+<p>By clicking the spinner buttons, you can change the scale of all loaded Edje objects. The Edje object on the right has its own scale values, so global scale values do not apply to it.</p>\r
+\r
+<p class="figure">Figure: Different global scales</p> \r
+<p align="center"><img alt="Different global scales" src="../../images/global_scales.png" /></p>\r
+</li>\r
+\r
+</ol>\r
+ <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">Using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span>  function that changes the global scale values can affect your whole application and destroy the UI layout. Be careful with this function.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<h2 id="set" name="set">Setting Scales for Edje Objects</h2>\r
+\r
+<p>Add a callback to get the value of the first spinner and apply it to the Edje object on the right:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_on_scale_change(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;edje_object_scale_set(ad-&gt;edje_object_2, elm_spinner_value_get(obj) / 100);\r
+}\r
+\r
+static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Add scale spinners\r
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_scale = elm_spinner_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_scale, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;edje_scale, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;edje_scale, 1, 300);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;edje_scale, 10);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_scale);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;edje_scale, 100);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;scale.swallow&quot;, ad-&gt;edje_scale);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;edje_scale, &quot;changed&quot;, _on_scale_change, ad);\r
+}</pre>\r
+\r
+\r
+<p>By clicking on spinner buttons, you can change the scale of the second Edje object in the box.</p>\r
+\r
+<p class="figure">Figure: Edje object scales</p> \r
+<p align="center"><img alt="Edje object scales" src="../../images/edje_object_scales.png" /></p>\r
+\r
+\r
+<h2 id="scales" name="scales">Personal, Global, and Base Scales</h2>\r
+\r
+<p>Modify the main layout and add a swallow for the buttons. The buttons are used for showing the current scale:</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Modify the main layout EDC code by creating another swallow part, <span style="font-family: Courier New,Courier,monospace">swallow.buttons</span> , and modifying the <span style="font-family: Courier New,Courier,monospace">edje.swallow.content</span>  part:</p>\r
+\r
+<pre class="prettyprint">\r
+group \r
+{ \r
+&nbsp;&nbsp;&nbsp;name: &quot;main_application&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.content&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 20;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;swallow.buttons&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 32;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;edje scale:&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 150 32;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;scale.swallow&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;edje object scale:&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 16;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_x: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title1&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale.swallow2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 48;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;title2&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;swallow.buttons&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 60;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: -1 60;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Add a box with buttons and set it into the main layout:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_edje_object_scale_get(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;object %.2f&quot;, edje_object_scale_get(ad-&gt;edje_object_2));\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);\r
+}\r
+static void\r
+_edje_scale_get(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };\r
+&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;global %.2f&quot;, edje_scale_get());\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);\r
+}\r
+static void\r
+_edje_object_base_scale_get(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;char title[PATH_MAX] = {0, };\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;snprintf(title, (int)PATH_MAX, &quot;base %.2f&quot;, edje_object_base_scale_get(ad-&gt;edje_object_2));\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(obj, title);\r
+}\r
+\r
+static void\r
+create_base_gui(appdata_s *ad) \r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *button;\r
+&nbsp;&nbsp;&nbsp;// Add the box\r
+&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;main_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);\r
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(box);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;main_layout, &quot;swallow.buttons&quot;, box);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;object &quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_scale_get, ad);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;global &quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_scale_get, ad);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;main_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;base &quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_base_scale_get, ad);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+}</pre>\r
+\r
+\r
+<p>Clicking a button gets a specific scale and prints its value on the button. For example, clicking the <strong>Global</strong> button shows the global scale value.</p>\r
+\r
+<p class="figure">Figure: Scale values</p> \r
+<p align="center"><img alt="Scale values" src="../../images/scale_values.png" /></p>\r
+</li>\r
+\r
+<li>\r
+<p>The loaded Edje object does not have its own scale value (0.00), so it uses the global scale value defined in the EFL configuration based on the device. A mobile device that is being used here, has the global scale ~1.8). The base scale is set to 1.2.</p>\r
+\r
+<pre class="prettyprint">collections \r
+{\r
+&nbsp;&nbsp;&nbsp;base_scale: 1.2;\r
+&nbsp;&nbsp;&nbsp;group \r
+&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_1&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;group \r
+&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;scale_group_2&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;group \r
+&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main_layout&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<p class="figure">Figure: Scale values after changing the Edle object scale</p> \r
+<p align="center"><img alt="Figure: Scale values after changing the Edle object scale" src="../../images/scale_values2.png" /></p>\r
+\r
+<p>After applying the scale of the new object, the global scale does not apply to this Edje object anymore. While all other objects have the scale value 1.8, the new object has the scale value 1.37.</p>\r
+\r
+ <table class="note"> \r
+<tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">The default base scale value is 1.0. All scale values in Edje objects, either set with the global scale value using the <span style="font-family: Courier New,Courier,monospace">edje_scale_set()</span> function or with a personal scale factor using the <span style="font-family: Courier New,Courier,monospace">edje_object_scale_set()</span> function are divided by base scale.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>\r
+\r
+<p class="figure">Figure: Base scale</p> \r
+<p align="center"><img alt="Base scale" src="../../images/base_scales.png" /></p>\r
+\r
+<p>Setting a scale value that is same as the base scale makes the layout appear as if it had the scale value 1.0.</p>\r
+</li>\r
+</ol>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.ui.guides/html/native/efl/edje_text_n.htm b/org.tizen.ui.guides/html/native/efl/edje_text_n.htm
new file mode 100755 (executable)
index 0000000..47ca76f
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/edje_text_n.htm
@@ -0,0 +1,712 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Using Edje Text Classes</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+       \r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+       <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+               <li><a href="#create">Creating the Basic Application</a></li>\r
+               <li><a href="#display">Getting, Deleting, and Displaying Text Classes</a></li>\r
+               <li><a href="#layout">Application Layout</a></li>\r
+               <li><a href="#all">Setting the Text Class for All Edje Objects</a></li>\r
+               <li><a href="#specific">Setting the Text Class of a Specific Object</a></li>\r
+               <li><a href="#get">Getting the Text Class of an Object</a></li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     \r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Using Edje Text Classes</h1>\r
+\r
+<p>This tutorial demonstrates how you can change the text of 2 or more parts using Edje text classes.</p>\r
+<p>If a part is assigned with a text class, setting font attributes to this class updates all those parts with the new font attributes. Setting the values to a text class affects all parts in that text class at process level, while at the object level, it only affects the parts inside a specified object.</p>\r
+\r
+<h2 id="create" name="create">Creating the Basic Application</h2>\r
+\r
+<p>The example application has 2 screen with different UIs. The screens demonstrate different text class APIs. The screen contains a genlist with 2 items set into a naviframe. Clicking an item opens displays a screen. Pressing the hardware <strong>Back</strong> button displays the main screen with the genlist.</p>\r
+\r
+<ol>\r
+<li>Create the basic application:\r
+\r
+<pre class="prettyprint">static void\r
+win_back_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_pop(ad-&gt;navifr);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Get the path to the EDC file that contains the main layout and the Edje object to load:</p>\r
+\r
+<pre class="prettyprint">static void\r
+app_get_resource(const char *edj_file_in, char *edj_path_out, int edj_path_max)\r
+{\r
+&nbsp;&nbsp;&nbsp;char *res_path = app_get_resource_path();\r
+&nbsp;&nbsp;&nbsp;if (res_path) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(edj_path_out, edj_path_max, &quot;%s%s&quot;, res_path, edj_file_in);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(res_path);\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<p>Create a window and register an event callback that calls the <span style="font-family: Courier New,Courier,monospace">win_back_cb()</span> function after pressing the <strong>Back</strong> button on the device:</p>\r
+\r
+<pre class="prettyprint">static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;// Window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);\r
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Add a conformant that contains the naviframe and genlist. Add item selection callbacks for the genlist items to show different screens:</p>\r
+\r
+<pre class="prettyprint">static char *\r
+_genlist_item_text_get(void *data, Evas_Object *obj, const char *part)\r
+{\r
+&nbsp;&nbsp;&nbsp;Eina_Stringshare *text_class = (Eina_Stringshare *)data;\r
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(text_class);\r
+&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;\r
+}\r
+\r
+static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Conformant\r
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);\r
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);\r
+\r
+&nbsp;&nbsp;&nbsp;// Naviframe\r
+&nbsp;&nbsp;&nbsp;ad-&gt;navifr = elm_naviframe_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;navifr);\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;navifr, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);\r
+\r
+&nbsp;&nbsp;&nbsp;// Genlist\r
+&nbsp;&nbsp;&nbsp;ad-&gt;itc = elm_genlist_item_class_new();\r
+&nbsp;&nbsp;&nbsp;ad-&gt;itc-&gt;func.text_get =_genlist_item_text_get;\r
+\r
+&nbsp;&nbsp;&nbsp;ad-&gt;genlist = elm_genlist_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+\r
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Text Class List&quot;), NULL,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, ad);\r
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Object Text Class API&quot;), NULL,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, ad);\r
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the window\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);\r
+}</pre>\r
+\r
+\r
+<p>The following figure shows the result.</p>\r
+\r
+<p class="figure">Figure: Main screen</p> \r
+<p align="center"><img alt="Main screen" src="../../images/edje_text_main.png" /></p></li>\r
+</ol>\r
+\r
+<h2 id="display" name="display">Getting, Deleting, and Displaying Text Classes</h2>\r
+\r
+<p>The first screen of the application shows an example of the <span style="font-family: Courier New,Courier,monospace">edje_text_class_del()</span>, <span style="font-family: Courier New,Courier,monospace">edje_text_class_list()</span>, and <span style="font-family: Courier New,Courier,monospace">edje_text_class_get()</span> functions.</p>\r
+\r
+<p>The following code implements the layout:</p>\r
+\r
+<pre class="prettyprint">\r
+group \r
+{ \r
+&nbsp;&nbsp;&nbsp;name: &quot;class_list_application&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_view&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;text part number 3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 20;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.list&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;text_view&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: First screen EDC layout</p> \r
+<p align="center"><img alt="First screen EDC layout" src="../../images/first_screen_edc.png" /></p>\r
+\r
+<p>The first part (<span style="font-family: Courier New,Courier,monospace">text_view</span>) shows the properties of the selected text class. Clicking a text class in the genlist shows its properties, such as font, size, and name in the text part.</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Add the base genlist:</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;genlist = elm_genlist_add(ad-&gt;win);\r
+evas_object_size_hint_weight_set(ad-&gt;genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Text Class List&quot;), NULL, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, _create_class_list_gui, ad);\r
+eoi = elm_genlist_item_append(ad-&gt;genlist, ad-&gt;itc, eina_stringshare_add(&quot;Object Text Class API&quot;), \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, ELM_GENLIST_ITEM_NONE, NULL, ad);\r
+elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;genlist);\r
+</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Load the layout:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_create_class_list_gui(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data; // Get application&#39;s data\r
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, }; // path to edc file\r
+&nbsp;&nbsp;&nbsp;Eina_List *l;  //  Used later\r
+&nbsp;&nbsp;&nbsp;const char *str; // Used later\r
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL; // Used later\r
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+\r
+&nbsp;&nbsp;&nbsp;// Main layout\r
+&nbsp;&nbsp;&nbsp;ad-&gt;gui1_layout = elm_layout_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;gui1_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;gui1_layout, edj_path, &quot;class_list_application&quot;);\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Get a list of all text classes loaded into the system.In the following example, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> list is a field in application data.</p>\r
+\r
+<pre class="prettyprint">ad-&gt;list = edje_text_class_list();</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create the genlist:</p>\r
+\r
+<pre class="prettyprint">// Genlist\r
+ad-&gt;itc_text_classes = elm_genlist_item_class_new();\r
+ad-&gt;itc_text_classes-&gt;func.text_get =_genlist_item_text_get;\r
+\r
+ad-&gt;genlist_text_classes = elm_genlist_add(ad-&gt;win);\r
+evas_object_size_hint_weight_set(ad-&gt;genlist_text_classes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Go through the text class list and insert each text class to the genlist. Set the genlist into the main layout of the current screen and show it in the naviframe:</p>\r
+\r
+<pre class="prettyprint">\r
+EINA_LIST_FOREACH(ad-&gt;list, l, str)\r
+{\r
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist_text_classes, ad-&gt;itc_text_classes, str, NULL, ELM_GENLIST_ITEM_NONE, NULL, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)str);\r
+}\r
+elm_object_part_content_set(ad-&gt;gui1_layout, &quot;edje.swallow.list&quot;, ad-&gt;genlist_text_classes);\r
+evas_object_show(ad-&gt;genlist_text_classes);\r
+elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui1_layout);\r
+</pre>\r
+\r
+\r
+<p>Clicking <strong>Text Class List</strong> displays the screen with a genlist of text classes.</p>\r
+\r
+<p class="figure">Figure: Text class list</p> \r
+<p align="center"><img alt="Text class list" src="../../images/text_class_list.png" /></p>\r
+</li>\r
+\r
+<li>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">edje_text_class_del()</span> function deletes a text class (in the following example, <span style="font-family: Courier New,Courier,monospace">T094</span>):</p>\r
+\r
+<pre class="prettyprint">\r
+// Main layout\r
+ad-&gt;gui1_layout = elm_layout_add(ad-&gt;win);\r
+evas_object_size_hint_weight_set(ad-&gt;gui1_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+elm_layout_file_set(ad-&gt;gui1_layout, edj_path, &quot;class_list_application&quot;);\r
+evas_object_show(ad-&gt;gui1_layout);\r
+\r
+// Get the collection list\r
+app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+edje_text_class_del(&quot;T094&quot;);\r
+ad-&gt;list = edje_text_class_list();\r
+\r
+// Genlist\r
+ad-&gt;itc_text_classes = elm_genlist_item_class_new();\r
+ad-&gt;itc_text_classes-&gt;func.text_get =_genlist_item_text_get;\r
+</pre>\r
+\r
+<p class="figure">Figure: Text class list after deleting a class</p> \r
+<p align="center"><img alt="Text class list after deleting a class" src="../../images/text_class_list_del.png" /></p>\r
+</li>\r
+\r
+<li>\r
+<p>Every text class contains specific information, such as the font name, font size, and text class name. To show the properties when the text class name is clicked, create a callback that uses the <span style="font-family: Courier New,Courier,monospace">edje_text_class_get()</span> function:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_genlist_clicked(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };\r
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *eoi = NULL;\r
+&nbsp;&nbsp;&nbsp;const char *str;\r
+&nbsp;&nbsp;&nbsp;char *font;\r
+&nbsp;&nbsp;&nbsp;Evas_Font_Size size;\r
+\r
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_selected_item_get(obj);\r
+&nbsp;&nbsp;&nbsp;str = elm_object_item_data_get(eoi);\r
+&nbsp;&nbsp;&nbsp;edje_text_class_get(str, &amp;font, &amp;size);\r
+&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;%s font{%s} size{%d}&quot;, str, font, size);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;gui1_layout, &quot;text_view&quot;, text_class);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Register the added callback function in the genlist:</p>\r
+\r
+<pre class="prettyprint">\r
+EINA_LIST_FOREACH(ad-&gt;list, l, str)\r
+{\r
+&nbsp;&nbsp;&nbsp;eoi = elm_genlist_item_append(ad-&gt;genlist_text_classes, ad-&gt;itc_text_classes, str, NULL, ELM_GENLIST_ITEM_NONE, _genlist_clicked, ad);\r
+&nbsp;&nbsp;&nbsp;elm_object_item_data_set(eoi, (void *)str);\r
+}\r
+elm_object_part_content_set(ad-&gt;gui1_layout, &quot;edje.swallow.list&quot;, ad-&gt;genlist_text_classes);\r
+\r
+evas_object_show(ad-&gt;genlist_text_classes);\r
+elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui1_layout);\r
+</pre>\r
+\r
+<p class="figure">Figure: Displaying text class properties</p> \r
+<p align="center"><img alt="Displaying text class properties" src="../../images/text_class_properties.png" /></p>\r
+</li>\r
+</ol>\r
+\r
+\r
+<h2 id="layout" name="layout">Application Layout</h2>\r
+\r
+<p>The second screen contains 2 Edje object with text parts containing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class. When a text class is modified, all text parts assigned to it are changed as well.</p>\r
+\r
+<p>The following example shows a simple Edje object layout:</p>\r
+\r
+<pre class="prettyprint">\r
+group \r
+{ \r
+&nbsp;&nbsp;&nbsp;name: &quot;edje_example&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_example&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;text part number 3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 10;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;custom_text_class&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<ol>\r
+<li>\r
+<p>After loading the Edje objects, add a spinner for changing the font size.</p>\r
+\r
+<p>Add 2 buttons for changing the text class of a specific object or setting the font size of the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class. The <strong>Set1</strong> button sets a new size for the text class of the first Edje object and the <strong>Set2</strong> button for the second object, respectively.</p>\r
+\r
+<p>The <strong>Get1</strong> and <strong>Get2</strong> buttons get the text class properties and display them on the screen.</p>\r
+<p>The <strong>Global</strong> button changes the text class globally, causing all Edje object parts to be changed in case they contain the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class.</p>\r
+\r
+<pre class="prettyprint">\r
+group \r
+{ \r
+&nbsp;&nbsp;&nbsp;name: &quot;class_list_application&quot;;\r
+&nbsp;&nbsp;&nbsp;parts \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text_view&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;text part number 3&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 1 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 20;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;edje.swallow.list&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 0 255;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to_y: &quot;text_view&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create a view for the new screen:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0, };\r
+\r
+&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);\r
+\r
+&nbsp;&nbsp;&nbsp;// Main Layout\r
+&nbsp;&nbsp;&nbsp;ad-&gt;gui2_layout = elm_layout_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;gui2_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;gui2_layout, edj_path, &quot;object_text_class_application&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;gui2_layout);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add group1\r
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_1 = edje_object_add(evas_object_evas_get(ad-&gt;win));\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object_1, edj_path, &quot;edje_example&quot;);\r
+&nbsp;&nbsp;&nbsp;// Check the object loading error\r
+&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(ad-&gt;edje_object_1) != EDJE_LOAD_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_1);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_1);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.group1&quot;, ad-&gt;edje_object_1);\r
+\r
+&nbsp;&nbsp;&nbsp;// Addgroup2\r
+&nbsp;&nbsp;&nbsp;ad-&gt;edje_object_2 = edje_object_add(evas_object_evas_get(ad-&gt;win));\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;edje_object_2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;edje_object_file_set(ad-&gt;edje_object_2, edj_path, &quot;edje_example&quot;);\r
+&nbsp;&nbsp;&nbsp;// Check object loading errors\r
+&nbsp;&nbsp;&nbsp;if (edje_object_load_error_get(ad-&gt;edje_object_2) != EDJE_LOAD_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;edje_object_2);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;edje_object_2);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.group2&quot;, ad-&gt;edje_object_2);\r
+\r
+&nbsp;&nbsp;&nbsp;// Add spinner\r
+&nbsp;&nbsp;&nbsp;ad-&gt;spinner = elm_spinner_add(ad-&gt;win);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;spinner, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;spinner, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_min_max_set(ad-&gt;spinner, 1, 64);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_step_set(ad-&gt;spinner, 1);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;spinner);\r
+&nbsp;&nbsp;&nbsp;elm_spinner_value_set(ad-&gt;spinner, 10);\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.spinner&quot;, ad-&gt;spinner);\r
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui2_layout);\r
+}</pre>\r
+\r
+\r
+<p class="figure">Figure: Second application screen</p> \r
+<p align="center"><img alt="Second application screen" src="../../images/text_screen_2.png" /></p></li>\r
+</ol>\r
+\r
+<h2 id="all" name="all">Setting the Text Class for All Edje Objects</h2>\r
+\r
+<p>To set the text class globally, use the <span style="font-family: Courier New,Courier,monospace">edje_test_class_set()</span> function:</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Add a box and pack the buttons into it. Add the <strong>Global</strong> button and register a callback for clicking:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *button;\r
+&nbsp;&nbsp;&nbsp;// Add the box\r
+&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;gui2_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, 0.0);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);\r
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_TRUE);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(box);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Global&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_text_class_set, ad);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;gui2_layout, &quot;edje.swallow.buttons&quot;, box);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_simple_push(ad-&gt;navifr, ad-&gt;gui2_layout);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>The callback contains functions for setting the text class globally:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_edje_text_class_set(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;edje_text_class_set(&quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));\r
+}</pre>\r
+\r
+<p>Clicking the <strong>Global</strong> button recalculates all text parts in every Edje object that contains the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> text class and changes their size.</p>\r
+\r
+\r
+<p class="figure">Figure: Changing the text class globally</p> \r
+<p align="center"><img alt="Changing the text class globally" src="../../images/change_text_globally.png" /></p></li>\r
+\r
+</ol>\r
+\r
+<h2 id="specific" name="specific">Setting the Text Class of a Specific Object</h2>\r
+\r
+<p>To set the text class of a specific Edje object, use the <span style="font-family: Courier New,Courier,monospace">edje_object_test_class_set()</span> function.</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Add 2 more buttons, <strong>Set1</strong> and <strong>Set2</strong>.</p>\r
+ <p>The first button sets the text class of the first Edje object on the left, and the second sets the text class of the other object, respectively.</p>\r
+\r
+<pre class="prettyprint">static void\r
+_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Set1);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button);\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_set_1, ad);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Set2);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button); \r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_set_2, ad);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Add callbacks:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_edje_object_text_class_set_1(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;edje_object_text_class_set(ad-&gt;edje_object_1, &quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));\r
+}\r
+\r
+static void\r
+_edje_object_text_class_set_2(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;edje_object_text_class_set(ad-&gt;edje_object_2, &quot;custom_text_class&quot;, &quot;Sans&quot;, elm_spinner_value_get(ad-&gt;spinner));\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Test the functionality:</p>\r
+\r
+<ol>\r
+<li>Set the size of the left object to 16.\r
+\r
+<p align="center"><img alt="Font size 16" src="../../images/object_size_16.png" /></p></li>\r
+\r
+<li>Set the size of the right object to 44.\r
+\r
+<p align="center"><img alt="Font size 44" src="../../images/object_size_44.png" /></p></li>\r
+\r
+<li>Set the size of the right object to 22.\r
+\r
+<p align="center"><img alt="Font size 22" src="../../images/object_size_22.png" /></p></li>\r
+</ol>\r
+</li>\r
+</ol>\r
+\r
+\r
+<h2 id="get" name="get">Getting the Text Class of an Object</h2>\r
+\r
+<p>To get the text class of a specific Edje object, use the <span style="font-family: Courier New,Courier,monospace">edje_object_test_class_get()</span> function.</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Add 2 more buttons, <strong>Get1</strong> and <strong>Get2</strong>. The first gets the text class of the first Edje object on the left and sets into that object result, and the second gets the text class of the other object, respectively.</p>\r
+\r
+<pre class="prettyprint">static void\r
+_create_text_class_gui(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Get1);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button); \r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_get_1, ad);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+\r
+&nbsp;&nbsp;&nbsp;button = elm_button_add(ad-&gt;gui2_layout);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);\r
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);\r
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, Get2);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(button); \r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _edje_object_text_class_get_2, ad);\r
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Add callbacks:</p>\r
+<pre class="prettyprint">static void\r
+_edje_object_text_class_get_1(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;char *font;\r
+&nbsp;&nbsp;&nbsp;Evas_Font_Size size;\r
+&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };\r
+\r
+&nbsp;&nbsp;&nbsp;edje_object_text_class_get(ad-&gt;edje_object_1, &quot;custom_text_class&quot;, &amp;font, &amp;size);\r
+&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;font{%s} size{%d}&quot;, font, size);\r
+&nbsp;&nbsp;&nbsp;edje_object_part_text_set(ad-&gt;edje_object_1, &quot;text_example&quot;, text_class);\r
+}\r
+\r
+static void\r
+_edje_object_text_class_get_2(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+&nbsp;&nbsp;&nbsp;char *font;\r
+&nbsp;&nbsp;&nbsp;Evas_Font_Size size;\r
+&nbsp;&nbsp;&nbsp;char text_class[PATH_MAX] = {0, };\r
+\r
+&nbsp;&nbsp;&nbsp;edje_object_text_class_get(ad-&gt;edje_object_2, &quot;custom_text_class&quot;, &amp;font, &amp;size);\r
+&nbsp;&nbsp;&nbsp;snprintf(text_class, PATH_MAX, &quot;font{%s} size{%d}&quot;, font, size);\r
+&nbsp;&nbsp;&nbsp;edje_object_part_text_set(ad-&gt;edje_object_2, &quot;text_example&quot;, text_class);\r
+}</pre>\r
+\r
+\r
+<p>The following figure shows the result.</p>\r
+\r
+<p class="figure">Figure: Displaying text class changes</p> \r
+<p align="center"><img alt="Displaying text class changes" src="../../images/display_text_classes.png" /></p>\r
+\r
+\r
+<p>Changing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> for the first object changed its font size to 16 size, while changing the <span style="font-family: Courier New,Courier,monospace">custom_text_class</span> for the second object changes its font size to 22.</p></li>\r
+</ol>\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.ui.guides/html/native/efl/efl_overview_n.htm b/org.tizen.ui.guides/html/native/efl/efl_overview_n.htm
new file mode 100755 (executable)
index 0000000..80a2aef
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/efl_overview_n.htm
@@ -0,0 +1,135 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>EFL Overview: Getting Started with EFL UI Programming</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                 <li><a href="#features">EFL Features</a></li> 
+                 <li><a href="#characteristic">EFL Characteristics</a></li>
+                 <li><a href="#library">EFL Libraries</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">        
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>       
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API for Wearable Native</a></li>   
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>EFL Overview: Getting Started with EFL UI Programming</h1> 
+       
+<p>EFL stands for Enlightenment Foundation Libraries. Enlightenment is a project consisting of the Enlightenment window manager, EFL libraries, and various utilities and applications. The Enlightenment team needed powerful libraries to handle, among others, rendering, main loops, and events, so EFL was introduced during the development of the Enlightenment window manager to fill these gaps. EFL is now widely used outside of the Enlightenment window manager.</p>
+
+<h2 id="features" name="features">EFL Features</h2>
+
+<p>The general UI design features include:</p> 
+<ul>
+       <li>UI component support
+       <p>You can use basic core UI components, such as buttons, genlists, and sliders, and also create a layout for the Tizen native application by using container UI components.</p></li>
+       <li>Theme support
+       <p>You can create and change a theme that is a preset package containing graphical details. Tizen supports specifying the UI look and feel through a default theme.</p></li>
+       <li>Font settings
+       <p>Tizen supports various methods to <a href="font_setting_n.htm">change the font</a> of your application to another system default font or your own font.</p></li>
+       <li>Scalability
+       <p>Elementary provides a way to <a href="ui_components_n.htm#scalability">scale UI components</a> in order to be comfortably used with a finger and to make the text more readable.</p></li>
+       <li>Event handling and main loop
+       <p>The user interface relies on callbacks designed to react to EFL events generated by the system or the user. You can <a href="event_handling_n.htm">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p>
+       <p>The Ecore library provides a main loop abstraction that gets you data when it is available and sends you events. You can <a href="main_loop_n.htm">handle the main loop</a> and <a href="threads_n.htm">use threads</a> with the Ecore main loop.</p></li>
+       <li>UI animating with animators and effects
+       <p>Tizen supports various methods to <a href="animation_effects_n.htm">create animations and effects</a> in your application.</p></li>
+       <li>Data types and tools support
+       <p>Tizen supports a core library for data types and some useful tools.</p></li>
+       <li>Hardware input event support
+       <p>Tizen supports the <a href="hw_input_n.htm">handling of hardware input events</a>.</p></li> 
+</ul>
+
+<h2 id="characteristic" name="characteristic">EFL Characteristics</h2>
+
+<p>EFL is aimed at not only desktop computers but also touch-screen and embedded devices, making EFL applications portable to many different types of devices. Applications do not need to care about the types of devices and profiles they run on. Instead of changing the code, it is typically enough to simply configure the applications for different devices.</p>
+
+<p>The key characteristics of EFL include:</p>
+
+<ul>
+ <li><strong>Performance</strong>
+  <p>The main reason Tizen adopted EFL as its native toolkit is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering. EFL is fast even in software rendering.</p></li>
+ <li><strong>Small memory footprint</strong>
+  <p>Despite its fast performance, EFL's memory footprint is smaller than that of other toolkits with similar features. A small memory footprint is useful in the embedded world, since embedded devices do not normally have much memory.</p></li>
+ <li><strong>Back-end engine support</strong>
+  <p>EFL supports several back-end engines, such as X11 (OpenGL, Xlib, Xcb), Wayland (OpenGL, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows, and Mac OS. Applications do not need to deal with each back-end engine separately.</p></li>
+ <li><strong>GUI and logic separation</strong>
+  <p>EFL supports GUI layout and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
+ <li><strong>Themeable</strong>
+  <p>An EFL theme can be changed at runtime without restarting the application. UI components are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of UI components to achieve a specific look and feel.</p></li>
+ <li><strong>Scalable</strong>
+  <p>EFL supports a scale factor that affects the size of objects in the application at runtime. By configuring the scale factor, applications can scale up and down as needed. The scale factor also supports a default setting that allows applications to scale nicely out-of-the-box.</p></li>
+ <li><strong>Animations</strong>
+  <p>EFL supports different types of animations. Evas supports Evas maps with low-level APIs for performing 2D, 2.5D, and 3D object transformations. Edje supports pre-defined transitions and wrapping of Evas maps. Elementary supports transit APIs for various types of animations, which can be combined.</p></li>
+ <li><strong>Hardware acceleration</strong>
+  <p>EFL supports OpenGL&reg; and OpenGL-ES acceleration.</p></li>
+</ul>
+       
+       
+<h2 id="library" name="library">EFL Libraries</h2>
+       
+<p>The EFL are a set of layered libraries, as shown in the following diagram:</p>
+
+<p class="figure">Figure: EFL layers</p>
+<p align="center"><img alt="EFL layers" src="../../images/efllibs.png" /></p>
+
+<p>When you create a basic EFL application, you use the following main libraries as a basis:</p>
+
+<ul>
+    <li>Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</li>
+    <li>Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="theme_n.htm">Themes</a> and <a href="component_custom_n.htm">Customizing Components</a>.</li>
+    <li>Ecore is the library which manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in the <a href="main_loop_n.htm">Handling the Main Loop</a> guide.</li>
+    <li>Evas is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, calculate minimum drawing calls needed to get the job done, and so on.</li>
+    <li>Eina is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in <a href="data_types_tools_n.htm">Data Types and Tools</a>.</li>
+</ul>
+
+<p>The EFL include more than just the above libraries, but the above are the most important libraries to get started with. The other libraries, such as Eet, Embryo, and Emotion, will be explored later in the programming guides and the API Reference (in <a href="../../../../org.tizen.native.mobile.apireference/index.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/index.html">wearable</a> applications).</p>
+
+<p>The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a> shows you how to develop your first application with the EFL.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/elementary_animation_n.htm b/org.tizen.ui.guides/html/native/efl/elementary_animation_n.htm
new file mode 100755 (executable)
index 0000000..f956971
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/elementary_animation_n.htm
@@ -0,0 +1,872 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Elementary Animations</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#Getting_Started">Getting Started</a></li>
+                               <li><a href="#Adding_Objects">Adding Objects to an Animation</a></li>
+                               <li><a href="#Add_Image">Adding Images to an Animation</a></li>
+                               <li><a href="#Animation_Duration">Animation Duration</a></li>
+                               <li><a href="#Acceleration_Mode">Animation Acceleration Mode (&quot;Tween Mode&quot;)</a></li>
+                               <li><a href="#Animation_Repeat">Animation Repeat</a></li>
+                               <li><a href="#Auto_Reverse">Animation Auto-reverse</a></li>
+                               <li><a href="#Transitions2">Transitions</a></li>
+                               <li><a href="#Combine_Transitions">Combining Transitions</a></li>
+                               <li><a href="#Animation_Chain">Animation Chain</a></li>
+                               <li><a href="#Animation_Timeline">Animation Timeline</a></li>
+                               <li><a href="#Custom_Transition">Custom Transitions</a></li>
+                               
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Elementary Animations</h1> 
+
+<p>Elementary transitions (<span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>) allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary transitions are mostly based on Ecore animators, but provide some transition methods at a higher level of abstraction. Elementary transitions provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
+
+<p>To use Elementary transitions, you must create an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object and define the desired transitions using the methods of this object. After the transitions are registered, they will be automatically managed: their callback functions will be called for the set duration, and they will be deleted upon completion.</p>
+
+<p>Use Elementary transitions only when Edje animations are not sufficient. Edje animations are better at handling transitions, have more flexibility, and can be manipulated inside themes. The only drawback is that Edje animations have their own definition language. If you want to code with the C language, use Elementary transitions.</p>
+
+<h2 id="Getting_Started" name="Getting_Started">Getting Started</h2>
+<p>The first thing you need to do when creating an transition with <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to build your transit object using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_add()</span> function:</p>
+
+<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();</pre>
+
+<p>You now have an <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that will allow you to perform transitions on one or more objects. The transit object holds the information about the target objects and the transition effects that will be used. The transit object also contains information about animation duration, number of repetitions, auto-reverse, and so on. The transit object starts playing as soon as the application enters the main loop.</p>
+
+<h2 id="Adding_Objects" name="Adding_Objects">Adding Objects to an Animation</h2>
+
+<p>You can add your Evas objects to your transition using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_object_add()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_object_add(Elm_Transit *transit, Evas_Object *obj)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to animate.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note"><p>The Evas object can be a low-level component, such as a rectangle, but also a UI component, such as a button, image, or calendar.</p>
+<p>If you want to animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.</p></td>
+</tr>
+</tbody>
+</table>
+
+<p>If you want to know which objects are currently in your transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_objects_get()</span> function. You will get a list of all the objects that are subject to the transition.</p>
+
+<p>At any time, you can remove objects from the transition:</p>
+
+<pre class="prettyprint">elm_transit_object_remove(Elm_Transit *transit, Evas_Object *obj)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the Evas object to remove from the transition.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">After you have added at least one Evas object to your transition, if the list of objects gets emptied somehow, be it because the transition has been terminated or all objects have been deleted, the transition will be automatically deleted. Otherwise, you will have to delete the transition by yourself using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del()</span> function. If you delete the transit while the transition is running, the transition will stop.</td>
+</tr>
+</tbody>
+</table>
+
+<h2 id="Add_Image" name="Add_Image">Adding Images to an Animation</h2>
+
+<p>If you do not want to manage UI components for animating images, <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for directly manipulating images:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_image_animation_add(Elm_Transit *transit, Eina_List *images)
+</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is a list of the image paths.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">This list and its contents will be deleted after the effect ends by the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_context_free()</span> function.</td>
+</tr>
+</tbody>
+</table>
+
+<p>You can now define your image transitions exactly the same way as with any Evas object.</p>
+
+<p>The following example shows how to use <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> with images:</p>
+
+<pre class="prettyprint">char buf[PATH_MAX];
+Eina_List *images = NULL;
+Elm_Transit *transit = elm_transit_add();
+snprintf(buf, sizeof(buf), &quot;%s/images/btn_default.png&quot;, PACKAGE_DATA_DIR);
+images = eina_list_append(images, eina_stringshare_add(buf));
+snprintf(buf, sizeof(buf), &quot;%s/images/btn_hover.png&quot;, PACKAGE_DATA_DIR);
+images = eina_list_append(images, eina_stringshare_add(buf));
+elm_transit_effect_image_animation_add(transit, images);</pre>
+
+<h2 id="Animation_Duration" name="Animation_Duration">Animation Duration</h2>
+
+<p>With <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, setting the transition duration is mandatory. To set the duration, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_duration_set(Elm_Transit *transit, double duration)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the duration in seconds.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The purpose of <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> is to abstract the low-level details of object interpolation, so you cannot create an infinite transition by specifying the duration. However, you can make your transition last forever using the repeat function.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make a complete revolution of the target Evas object in 2 seconds:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<p>To get the duration of the transition, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_get()</span> function.</p>
+
+<h2 id="Acceleration_Mode" name="Acceleration_Mode">Animation Acceleration Mode (&quot;Tween Mode&quot;)</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> supports a number of built-in interpolation methods. By default, all interpolations are linear. If you want to change the animation&#39;s dynamics, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_tween_mode_set(Elm_Transit *transit, Elm_Transit_Tween_Mode tween_mode)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance that handles the transition. The second argument is the tween mode of the transition, which can be one of the following:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_LINEAR</span>: The default mode.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_SINUSOIDAL</span>: The transition starts with acceleration and ends with deceleration.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_DECELERATE</span>: The transition decelerates over time.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_ACCELERATE</span>: The transition accelerates over time.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_TWEEN_MODE_BEZIER_CURVE</span>: The transition uses an interpolated cubic-bezier curve adjusted with parameters.</li>
+</ul>
+
+<p>To get the current tween mode, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_tween_mode_get()</span> function.</p>
+
+<h2 id="Animation_Repeat" name="Animation_Repeat">Animation Repeat</h2>
+
+<p>To set a transition to repeat, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_set()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_repeat_times_set(Elm_Transit *transit, int repeat)</pre>
+
+<p>The function takes the following arguments:</p>
+<ul>
+<li>The transition you want to repeat.</li>
+<li>The number of times the transition repeats.</li>
+</ul>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">If the <span style="font-family: Courier New,Courier,monospace;">repeat</span> argument is set to 0, the transition will not loop at all. If set to 1, the transition will run twice. If set to a negative value, the transition will repeat forever.</td>
+</tr>
+</tbody>
+</table>
+
+<p>To get the repeat value, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_get()</span> function. The default value is 0.</p>
+
+<p>The following example shows how to make an Evas object spin for 3 complete revolutions in 6 seconds:</p>
+
+<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_repeat_set(transit, 3.0);
+elm_transit_go(transit);</pre>
+
+<h2 id="Auto_Reverse" name="Auto_Reverse">Animation Auto-reverse</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for automatically reversing the transition once it finishes:</p>
+
+<pre class="prettyprint">elm_transit_auto_reverse_set(Elm_Transit *transit, Eina_Bool reverse)</pre>
+
+<p>The first argument is the transition you want to reverse. The second argument is the reverse state. If the reverse state is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, this function will perform the same transition backwards as soon as the first transition is complete.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">
+    <p>Reversing the transition doubles the duration of the transition. Moreover, if the transition is set to repeat, the transition will run back and forth until the repeat count is finished.</p>
+    <p>You can calculate the duration as follows if both auto-reverse and repeat are set: 2 * duration * repeat.</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make an object perform half a turn and then reverse the animation to its original position in 4 seconds:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_auto_reverse_set(transit, EINA_TRUE);
+elm_transit_go(transit);
+</pre>
+
+<p>To determine whether the auto-reverse mode is enabled, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_auto_reverse_get()</span> function.</p>
+
+<h2 id="Transitions2" name="Transitions2">Transitions</h2>
+
+<p>We distinguish two main transition types:</p>
+<ul>
+<li>Transitions that are applied to the properties of objects, such as position, size, angle, and color.</li>
+<li>Transitions from one object to another, where the first object is hidden to let the second one appear.</li>
+</ul>
+<p>All transitions are based on the same principle: we set the starting and the ending values for the properties we want to animate, we then set the lifespan of the animation, and finally we inquire the preferred interpolation method (such as linear, acceleration, or bounce).</p>
+
+<p>You must declare the transitions after the parent window has been created, since the transition effects make use of the geometric properties of the parent window. If the parent window does not yet exist when calculating the interpolation, the interpolation may end up being based on wrong information.</p>
+
+<h3 id="Built-in_Transitions" name="Built-in_Transitions">Built-in Transitions</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides several built-in transition definitions that are useful for the most common cases, so you that will not have to code them from scratch.</p>
+
+<p>All these built-in effects are implemented as follows:</p>
+
+<pre class="prettyprint">Elm_Transit *transit = elm_transit_add();
+elm_transit_effect_add(transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_op,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_context_new(),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_transit_effect_translation_context_free);</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object that contains the target Evas objects and all the information needed to setup the transition.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_op</span>: The callback function that performs the transition (resizing interpolation in this example).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_new()</span>: The callback function that returns the context used in the transition for calculations. In this example, the context is the coordinates of the before and after objects.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_translation_context_free</span>: The callback function that frees up the memory once the transition is complete.</li>
+</ul>
+
+<p>All the definitions above can be rewritten as follows:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_effect_translation_add(transit, from_x, from_y, to_x, to_y);
+</pre>
+
+<h3>Translation</h3>
+<p>To perform a translation on an Evas object, use the following method:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_translation_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_dx,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_dy,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_dx,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_dy)
+</pre>
+
+<ul>
+<li>The first argument is the transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_dx</span>: The starting X coordinate (source).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_dy</span>: The starting Y coordinate (source).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_dx</span>: The ending X coordinate (destination).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_dy</span>: The ending Y coordinate (destination).</li>
+</ul>
+
+<p>The following example shows how to slide an Evas object (a rectangle) on a 45-degree diagonal, from bottom-left to top-right, at a constant speed, and in 1 second:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, rectangle);
+elm_transit_effect_translation_add(transit, 0, 0, 280, 280);
+elm_transit_duration_set(transit, 1);
+elm_transit_go(transit);
+</pre>
+
+<h3>Color Transition</h3>
+
+<p>Color transitions allow you to dynamically change the color of Evas objects. The first argument is the transit object, while the other arguments will be used to define the color transition using RGB colors. There is also an alpha channel that controls the opacity of the color (the background of the object, not the object itself).</p>
+
+<pre class="prettyprint">
+elm_transit_effect_color_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int from_r,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int from_g,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int from_b,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int from_a,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int to_r,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int to_g,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int to_b,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int to_a)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_r</span>: The start value for &quot;Red&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_g</span>: The start value for &quot;Green&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_b</span>: The start value for &quot;Blue&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_a</span>: The start value for &quot;Alpha&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_r</span>: The end value for &quot;Red&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_g</span>: The end value for &quot;Green&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_b</span>: The end value for &quot;Blue&quot;.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_a</span>: The end value for &quot;Alpha&quot;.</li>
+</ul>
+
+<p>The following example shows how to transit a rectangle from red to blue in 3 seconds:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, rectangle);
+elm_transit_effect_color_add(transit, // Target object
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255, 0, 0, 255, // From color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 0, 255, 255); // To color
+elm_transit_duration_set(transit, 3);
+elm_transit_go(transit);
+</pre>
+
+<h3>Rotation</h3>
+
+<pre class="prettyprint">elm_transit_effect_rotation_add(Elm_Transit *transit, float from_degree, float to_degree)</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_degree</span>: The start degree of rotation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_degree</span>: The end degree of rotation.</li>
+</ul>
+
+<p>This function can be used to perform a rotation on any Evas object. It works the same way as the other transit effects and takes two arguments for the starting and ending angles. Note that if you apply a rotation on multiple objects, they will individually mill around and not act as a group. If you want several objects to revolve around a common point, you must encapsulate the objects into a single parent object and apply the rotation to the parent object. The following example shows how to achieve this:</p>
+
+<pre class="prettyprint">
+// Parent container
+Evas_Object *parent = elm_box_add(my_window);
+evas_object_show(parent);
+elm_box_horizontal_set(parent, EINA_TRUE);
+elm_box_homogeneous_set(parent, EINA_TRUE);
+
+// Button 1
+Evas_Object *btn1 = elm_button_add(parent);
+elm_object_text_set(btn1, &quot;Btn1&quot;);
+elm_box_pack_start(parent, btn1);
+evas_object_show(btn1);
+
+// Button 2
+Evas_Object *btn2 = elm_button_add(parent);
+elm_object_text_set(btn2, &quot;Btn2&quot;);
+elm_box_pack_end(parent, btn2);
+evas_object_show(btn2);
+
+// Make the parent container do a 360 degrees spin
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, parent);
+elm_transit_effect_rotation_add(transit, 0.0, 360);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h3>Wipe Effect</h3>
+
+<p>The wipe effect is designed to dynamically hide or show any element on the scene.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_wipe_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Wipe_Type type,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Wipe_Dir dir)
+</pre>
+
+<p>In addition to the <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> instance passed as the first argument, the function takes the following arguments:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">type</span>: The wipe type <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Type</span> defines whether to show or hide the target elements. The value can be one of the following:
+    <ul>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_TYPE_SHOW</span></li>
+    </ul>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">dir</span>: The wipe direction <span style="font-family: Courier New,Courier,monospace;">Elm_Transit_Effect_Wipe_Dir</span> defines in which direction the target will progressively appear or disappear. The value can be one of the following:
+    <ul>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_LEFT</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_UP</span></li>
+        <li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_WIPE_DIR_DOWN</span></li>
+    </ul>
+</li>
+</ul>
+
+<p>The following example shows how to make an object disappear progressively from left to right:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_wipe_add(transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_TRANSIT_EFFECT_TYPE_HIDE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h3>Zoom Effect</h3>
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a zoom function.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_zoom_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float from_rate,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float to_rate)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_rate</span>: The starting level of the zoom.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_rate</span>: The ending level of the zoom.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">from_rate</span> argument defines the scale of the target objects at the beginning of the animation. A value of 1 represents the initial scale of the objects.</p>
+
+<p>Setting the value of the <span style="font-family: Courier New,Courier,monospace;">to_rate</span> argument to 2 will double the size of the target objects (double the width and double the height). When using this effect, the width and height of a target object will remain proportional to one another. If you want to customize the zoom effect, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizing_add()</span> function.</p>
+
+<p>The following example shows how to implement a zoom-out transition. At the end of the 2-secondstransition, the animated object will be half its original size.</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_zoom_add(transit, 1, 0.5);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h3>Resizing Effect</h3>
+
+<p>The resizing effect allows you to design an interpolation of the width and height attributes of one or more target elements.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_resizing_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_w,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord from_h,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_w,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_h)
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">transit</span>: The transit object that contains (among other things) all the Evas objects subject to the translation.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_w</span>: The starting width.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">from_h</span>: The starting height.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_w</span>: The ending width.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">to_h</span>: The ending height.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">from_w</span> and <span style="font-family: Courier New,Courier,monospace;">from_h</span> arguments define the size at the beginning of the animation. The <span style="font-family: Courier New,Courier,monospace;">to_w</span> and <span style="font-family: Courier New,Courier,monospace;">to_h</span> arguments define the size at the end.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">If you are planning to use this method to hide an Evas object by setting one of the length attributes to zero, consider using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_wipe_add()</span> function instead.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example shows how to make a rectangle exchange its width and height properties in a 2-second transition:</p>
+
+<pre class="prettyprint">
+Evas_Coord w, h;
+evas_object_geometry_get(my_evas_object, NULL, NULL, &amp;w, &amp;h);
+
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, my_evas_object);
+elm_transit_effect_resize_add(transit, // Transition object
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w, h, // Original sizing
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h, w); // Target sizing
+elm_transit_duration_set(transit, 2.0);
+elm_transit_go(transit);
+</pre>
+
+<h3>Flip Effect</h3>
+<p>This transition combines the target Evas objects in pairs, so that one object will show up while the other one disappears. This association relates the even objects in the transit list of objects with the odd ones. The even objects are shown at the beginning of the animation, and the odd objects shown when the transition is complete. In other words, the effect applies to each pair of objects in the order in which they are listed in the transit list of objects.</p>
+
+<p>The flip effect itself is a pseudo-3D effect where the first object in the pair is the front object and the second one is the back object. When the transition launches, the front object rotates around a preferred axis in order to let the back object take its place.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_flip_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Flip_Axis axis,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool cw)
+</pre>
+
+<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
+</ul>
+
+<p>The third argument is the direction of the rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
+</ul>
+
+<p>The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary UI components for demonstration purposes. You can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function if you do not want to bother creating UI components.</p>
+
+<pre class="prettyprint">
+// Coin Heads
+Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
+if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+elm_win_resize_object_add(ad-&gt;win, coin_heads);
+
+// Coin Tails
+Evas_Object *coin_tails = elm_image_add(ad-&gt;win);
+if (!elm_image_file_set(coin_tails, IMG_DIR&quot;/coin_tails.png&quot;, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+elm_win_resize_object_add(ad-&gt;win, coin_tails);
+
+// Transition definition
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_auto_reverse_set(transit, EINA_TRUE);
+elm_transit_repeat_times_set(transit, -1);
+elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+elm_transit_go(transit);
+</pre>
+
+<p class="figure">Figure: Coin flip</p>
+<p align="center"><img alt="Coin flip" src="../../images/coin_flip_effect.png" /></p>
+
+<h3>Resizable Flip Effect</h3>
+<p>In the flip example above, we used two objects that have the same size. However, you may sometimes want to flip from one object to another object with different size attributes. The most common example would be using buttons with dimensions that depend on their contents (such as labels). If you decide to use the classic <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_flip_add()</span> function, the size of the object will change at the moment one object becomes completely hidden and the other one begins to show up. If you wish to interpolate the size attributes as well, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizable_flip_add()</span> function:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_resizable_flip_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Flip_Axis axis,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool cw)
+</pre>
+
+<p>The first argument is the transit object. The second argument is the preferred axis of rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_X</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_TRANSIT_EFFECT_FLIP_AXIS_Y</span></li>
+</ul>
+
+<p>The third argument is the direction of the rotation:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
+</ul>
+
+<p>This function works the exact same way as the standard flip effect function.</p>
+
+<h3>Fade Effect</h3>
+
+<p>This effect is used to transition from one Evas object to another one using a fading effect: the first object will slowly disappear to let the second object take its place.</p>
+
+<pre class="prettyprint">elm_transit_effect_fade_add(Elm_Transit *transit)</pre>
+
+<p>This effect is applied to each pair of objects in the order in which they are listed in the transit list of objects. The first object in the pair will be the before object and the second one will be the after object.</p>
+
+<p>Building on the coin flip example, the following example shows how to fade out one face of the coin while fading in the other face:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_effect_fade_add(transit);
+elm_transit_go(transit);
+</pre>
+
+<p>If you simply want to hide an object with a fade transition, consider using a transparent after object.</p>
+
+<h3>Blend Effect</h3>
+
+<p>Another transition involving at least two Evas objects is the blend effect. This transition makes the before object blurry before the after object appears.</p>
+
+<pre class="prettyprint">elm_transit_effect_blend_add(Elm_Transit *transit)</pre>
+
+<p>The argument is the transition target of the blend effect.</p>
+
+<p>Building on the coin flip example, the following example shows how to blur out one face of the coin while blurring in the other face:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_object_add(transit, coin_tails);
+elm_transit_duration_set(transit, 2.0);
+elm_transit_effect_blend_add(transit);
+elm_transit_go(transit);
+</pre>
+
+<p>If you simply want to hide an object with a blur transition, consider using a transparent after object.</p>
+
+<h2 id="Combine_Transitions" name="Combine_Transitions">Combining Transitions</h2>
+
+<p>To use multiple transitions at the same time on the same objects, simply declare the transitions one after the other.</p>
+
+<p>Building on the coin flip example, the following example shows how to roll the coin on the ground using a rotation and a translation effect:</p>
+
+<pre class="prettyprint">
+Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
+if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
+&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+evas_object_resize(coin_heads, 100, 100);
+evas_object_show(coin_heads);
+
+Elm_Transit *transit = elm_transit_add();
+elm_transit_object_add(transit, coin_heads);
+elm_transit_duration_set(transit, 5.0);
+elm_transit_effect_translation_add(transit, 0, 0, 3.1415 * 2 * 100, 0);
+elm_transit_effect_rotation_add(transit, 0, 360);
+elm_transit_go(transit);
+</pre>
+
+<h2 id="Animation_Chain" name="Animation_Chain">Animation Chain</h2>
+
+<p>Now that we have listed all the effects that can be implemented using <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, we will see how to chain transitions into sequences. To create complex, chained animations without worrying about synchronization between the transitions, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_add()</span> function. This function takes as arguments two <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> objects and will automatically take care of the chaining for you: the second transition will start as soon as the first transition is finished.</p>
+
+<p>The following example shows how to move a datetime component on a square trajectory:</p>
+
+<pre class="prettyprint">
+Evas_Object *dt = elm_datetime_add(ad-&gt;win);
+evas_object_resize(dt, 350, 50);
+evas_object_show(dt);
+
+// The first transition
+Elm_Transit *t1 = elm_transit_add();
+elm_transit_object_add(t1, dt);
+elm_transit_duration_set(t1, 2);
+elm_transit_effect_translation_add(t1, 0, 0, 100, 0);
+
+// The second transition
+Elm_Transit *t2 = elm_transit_add();
+elm_transit_object_add(t2, dt);
+elm_transit_duration_set(t2, 2);
+elm_transit_effect_translation_add(t2, 100, 0, 100, 100);
+
+// The third transition
+Elm_Transit *t3 = elm_transit_add();
+elm_transit_object_add(t3, dt);
+elm_transit_duration_set(t3, 2);
+elm_transit_effect_translation_add(t3, 100, 100, 0, 100);
+
+// The fourth transition
+Elm_Transit *t4 = elm_transit_add();
+elm_transit_object_add(t4, dt);
+elm_transit_duration_set(t4, 2);
+elm_transit_effect_translation_add(t4, 0, 100, 0, 0);
+
+// Chaining the transitions
+elm_transit_chain_transit_add(t1, t2);
+elm_transit_chain_transit_add(t2, t3);
+elm_transit_chain_transit_add(t3, t4);
+
+// Starting the transitions
+elm_transit_go(t1);
+</pre>
+
+<p>Note that we cannot use transition chaining to make a loop animation, since the transit object is automatically destroyed as soon as the transition completes. Therefore, you cannot do something like this:</p>
+
+<pre class="prettyprint">elm_transit_chain_transit_add(t4, t1);</pre>
+
+<p>To create a looped animation chain, you have to use low-level components provided by the Ecore and Evas transition libraries, or you can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_del_cb_set()</span> function to define a callback function for when a transition gets deleted. This way, you could recreate your objects and reiterate the transition chain as soon as the last transition ends.</p>
+
+<pre class="prettyprint">
+elm_transit_del_cb_set(Elm_Transit *transit, Elm_Transit_Del_Cb cb, void *data)
+</pre>
+
+<p>The first argument is the transition object. The second argument is the callback function to run on transition delete. The third argument is the data to pass to the callback function.</p>
+
+<p>You can severe the chain relationship between two transits by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_del()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_chain_transit_del(Elm_Transit *transit, Elm_Transit *chain_transit)</pre>
+
+<p>The first argument is the first transition in the chain. The second argument is the second transition in the chain.</p>
+
+<p>To get the current chain transit list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transits_get()</span> function.</p>
+
+<h2 id="Animation_Timeline" name="Animation_Timeline">Animation Timeline</h2>
+
+<p>After you have defined all the properties that define your transition, start the transition with the <span style="font-family: Courier New,Courier,monospace;">elm_transit_go()</span> function:</p>
+
+<pre class="prettyprint">elm_transit_go(Elm_Transit *transit)</pre>
+
+<p>You can maintain full control over the execution process even after the transition has started. You can pause the transition by setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>:</p>
+
+<pre class="prettyprint">elm_transit_paused_set(Elm_Transit *transit, Eina_Bool paused)</pre>
+
+<p>You can resume the transition by using the same method but setting the paused argument to <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>. If you want to know whether the transition is currently paused, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_paused_get()</span> function.</p>
+
+<p>You can remain informed about the present transition flow and get the current frame by using the <span style="font-family: Courier New,Courier,monospace;">elm_transit_progress_value_get()</span> function. This function will return the timeline position of the animation, ranging between 0.0 (start) and 1.0 (end).</p>
+
+<h2 id="Custom_Transition" name="Custom_Transition">Custom Transitions</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a standard function for defining any effect of your choosing that will be applied to some context data:</p>
+
+<pre class="prettyprint">
+elm_transit_effect_add(Elm_Transit *transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_Transition_Cb transition_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect *effect,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Transit_Effect_End_Cb end_cb)
+</pre>
+
+<p>The first argument is the transition target of the new effect. The second argument is the transition callback function. The third argument is the new effect. The fourth argument is the callback function to call at the end of the effect.</p>
+
+<p>As described earlier in this programming guide, this function embraces three callbacks that will allow you to define every aspects of your transition from its creation to its deletion. The following is an example of how to build a custom resizing animation.</p>
+
+<p>First, we define a structure capable of holding the context information about resizing an Evas object:</p>
+
+<pre class="prettyprint">
+typedef struct
+{
+&nbsp;&nbsp;&nbsp;struct _size
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;from, to;
+}
+Custom_Effect;
+</pre>
+
+<p>We can now implement our custom resizing callback function. This function takes the following arguments:</p>
+
+<ul>
+<li>The context data that holds the custom properties of our transition, which are used as parameters to calculate the interpolation.</li>
+<li>The transit object that contains the list of our Evas objects to animate and all the information about duration, auto-reverse, looping, and so on.</li>
+<li>The progress (position along the animation timeline) that ranges from 0.0 to 1.0 and allows us to calculate the desired interpolation for each frame.</li>
+</ul>
+
+<pre class="prettyprint">
+static void
+_custom_op(void *data, Elm_Transit *transit, double progress)
+{
+&nbsp;&nbsp;&nbsp;if (!data) return;
+&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
+&nbsp;&nbsp;&nbsp;Evas_Object *obj;
+&nbsp;&nbsp;&nbsp;const Eina_List *elist;
+&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect = data;
+&nbsp;&nbsp;&nbsp;const Eina_List *objs = elm_transit_objects_get(transit);
+&nbsp;&nbsp;&nbsp;if (progress &lt; 0.5)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + (custom_effect-&gt;to.h * progress * 2);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + custom_effect-&gt;to.h;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w + (custom_effect-&gt;to.w * (progress - 0.5) * 2);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(objs, elist, obj)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(obj, w, h);
+}
+</pre>
+
+<p>The callback function above resizes our Evas objects in two steps. During the first half of the transition, only the height changes, while the width remains the same. During the second half, it is the other way around until we get to the desired size.</p>
+
+<p>You must then define the context used by your animation:</p>
+
+<pre class="prettyprint">
+static void*
+_custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w, Evas_Coord to_h)
+{
+&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect;
+
+&nbsp;&nbsp;&nbsp;custom_effect = calloc(1, sizeof(Custom_Effect));
+&nbsp;&nbsp;&nbsp;if (!custom_effect) return NULL;
+
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.w = from_w;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.h = from_h;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.w = to_w - from_w;
+&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.h = to_h - from_h;
+
+&nbsp;&nbsp;&nbsp;return custom_effect;
+}
+</pre>
+
+<p>You must define the function that will take care of deleting all the context objects used by your custom transition and free up the allocated memory:</p>
+
+<pre class="prettyprint">
+static void
+_custom_context_free(void *data, Elm_Transit *transit __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;free(data);
+}
+</pre>
+
+<p>Finally, apply your custom transition to your <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> object:</p>
+
+<pre class="prettyprint">
+Elm_Transit *transit = elm_transit_add();
+elm_transit_effect_add(transit,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_op,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_new(),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_free);
+</pre>
+
+<p>If you want to delete an effect from your effects list, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_del()</span> function.</p>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/elementary_animation_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/elementary_animation_tutorial_n.htm
new file mode 100755 (executable)
index 0000000..5f21d4c
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/elementary_animation_tutorial_n.htm
@@ -0,0 +1,628 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Elementary Animations</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#setup">Setting Up the Application</a></li>
+                       <li><a href="#rotate">Creating a Rotation Effect</a></li>
+                       <li><a href="#zoom">Creating a Zoom Effect</a></li>
+                       <li><a href="#flip">Creating a Flip Effect</a></li>
+                       <li><a href="#blend">Creating a Blend Transition</a></li>
+                       <li><a href="#fade">Creating a Fade Effect</a></li>
+                       <li><a href="#flip_y">Creating a Flip on y Axis</a></li>
+                       <li><a href="#wipe">Creating a Wipe Effect</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">                
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Elementary Animations</h1>
+
+  
+<p>This tutorial demonstrates how you can use Elm Transit to create animated transitions effects, such as rotation, wiping, zooming, resizing, and fading, to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+
+       
+ <h2 id="setup" name="setup">Setting Up the Application</h2>
+
+<p>First create a basic application like explained in <a href="basic_tutorial_mn.htm">Creating Basic Mobile Interactions</a>.</p>
+
+<p>When the application is ready, create Evas objects and animate them. In this example, one single object is animated with different type of animations.</p>
+
+<p>Create the structure of our application represented by a struct named <span style="font-family: Courier New,Courier,monospace">appdata</span></p>
+
+<pre class="prettyprint">typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *label;
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+&nbsp;&nbsp;&nbsp;Evas_Object *buttonbck;
+&nbsp;&nbsp;&nbsp;Evas_Object *hbox;
+&nbsp;&nbsp;&nbsp;Evas_Object *left_vbox;
+&nbsp;&nbsp;&nbsp;Evas_Object *center_vbox;
+&nbsp;&nbsp;&nbsp;Evas_Object *right_vbox;
+&nbsp;&nbsp;&nbsp;float rt_angle, zto, zfrom;
+} appdata_s;
+</pre>
+
+<p>This structure holds the main UI components of the application:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">win</span>: the main window</li>
+<li><span style="font-family: Courier New,Courier,monospace">label</span>: the title label</li>
+<li><span style="font-family: Courier New,Courier,monospace">button</span>: a button object, the target of the animations</li>
+<li><span style="font-family: Courier New,Courier,monospace">buttonbck</span>: a button representing the back of the target button</li>
+<li><span style="font-family: Courier New,Courier,monospace">left_vbox</span>: a vertical box to place the first buttons column</li>
+<li><span style="font-family: Courier New,Courier,monospace">center_vbox</span>: a vertical box to store the second buttons column</li>
+<li><span style="font-family: Courier New,Courier,monospace">right_vbox</span>: a vertical box to store the last buttons column</li>
+<li><span style="font-family: Courier New,Courier,monospace">hbox</span>: a horizontal box to store the vertical boxes</li>
+<li><span style="font-family: Courier New,Courier,monospace">rt_angle</span>, <span style="font-family: Courier New,Courier,monospace">zto</span>, <span style="font-family: Courier New,Courier,monospace">zfrom</span>: these variables are used to store values for animations</li>
+</ul>
+
+<p>Place the UI components on the application&#39;s canvas. To make things easier, the UI component creation is split into two functions.</p>
+
+<p>The first function creates UI components on the main window, and the second in the boxes.</p>
+
+<pre class="prettyprint">create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;ad-&gt;rt_angle = 360.0;
+&nbsp;&nbsp;&nbsp;ad-&gt;zfrom = 1.0;
+&nbsp;&nbsp;&nbsp;ad-&gt;zto = 2.0;
+
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Label
+&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Creation a button in the app window
+&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Moving the button to x=50 y=100
+&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;button, 50, 100);
+
+&nbsp;&nbsp;&nbsp;// Resizing the button 100x50
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;button, 200, 50);
+
+&nbsp;&nbsp;&nbsp;// Showing the button
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;button);
+
+&nbsp;&nbsp;&nbsp;// Creation a back button in the app window
+&nbsp;&nbsp;&nbsp;ad-&gt;buttonbck = elm_button_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;buttonbck, &quot;Button back&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;buttonbck, 50, 100);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;buttonbck, 200, 50);
+
+&nbsp;&nbsp;&nbsp;_create_btn_box(ad);
+
+} // End of create_base_gui
+</pre>
+
+<p>This function takes <span style="font-family: Courier New,Courier,monospace">appdata_s *ad</span> as its only parameter. This function is called by the creation callback <span style="font-family: Courier New,Courier,monospace">app_create</span> of the Tizen application (<span style="font-family: Courier New,Courier,monospace">event_callback.create = app_create;</span>) in the <span style="font-family: Courier New,Courier,monospace">main</span> function of the application.</p>
+
+<p>Set up the needed values like the rotation angle, the original zoom value (<span style="font-family: Courier New,Courier,monospace">zfrom</span>), and the destination zoom value (<span style="font-family: Courier New,Courier,monospace">zto</span>).</p>
+
+<pre class="prettyprint">ad-&gt;rt_angle = 360.0;
+ad-&gt;zfrom = 1.0;
+ad-&gt;zto = 2.0;
+</pre>
+
+<p>Create the main window with a title and add the <span style="font-family: Courier New,Courier,monospace">delete</span> callback:</p>
+
+<pre class="prettyprint">// Window
+ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+{
+&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+}
+
+evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+// Label
+ad-&gt;label = elm_label_add(ad-&gt;win);
+elm_object_text_set(ad-&gt;label, &quot;Effects Tutorial&quot;);
+evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, ad-&gt;label);
+evas_object_show(ad-&gt;label);
+
+// Show the window after the base GUI is set up
+evas_object_show(ad-&gt;win);
+
+ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
+</pre>
+
+<p>Next create the animation target button and the back button. Call the button box creation function with the application data as its parameter.</p>
+
+<pre class="prettyprint">_create_btn_box(ad);
+</pre>
+
+<p>Add a set of buttons to this box that starts animations on the animation target.</p>
+
+<p>Create the structure of the buttons box with three columns (vertical boxes) and one horizontal for the main container.</p>
+
+<pre class="prettyprint">// Creation of the main container box
+ad-&gt;hbox = elm_box_add(ad-&gt;win);
+elm_box_horizontal_set(ad-&gt;hbox, EINA_TRUE);
+elm_box_homogeneous_set(ad-&gt;hbox, EINA_TRUE);
+evas_object_move(ad-&gt;hbox, 10, 500);
+evas_object_show(ad-&gt;hbox);
+
+// Creation of the first column
+ad-&gt;left_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;left_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;left_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;left_vbox);
+elm_box_pack_start(ad-&gt;hbox, ad-&gt;left_vbox);
+
+// Creation of the second column
+ad-&gt;center_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;center_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;center_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;center_vbox);
+elm_box_pack_end(ad-&gt;hbox, ad-&gt;center_vbox);
+
+// Creation of the last column
+ad-&gt;right_vbox = elm_box_add(ad-&gt;hbox);
+elm_box_horizontal_set(ad-&gt;right_vbox, EINA_FALSE);
+elm_box_homogeneous_set(ad-&gt;right_vbox, EINA_TRUE);
+evas_object_show(ad-&gt;right_vbox);
+elm_box_pack_end(ad-&gt;hbox, ad-&gt;right_vbox);
+</pre>
+
+<p>Then create the first action button for the resize effect.</p>
+
+<pre class="prettyprint">// Button creation
+btn_resize = elm_button_add(ad-&gt;win);
+// Setting the button text
+elm_object_text_set(btn_resize, &quot;Resize&quot;);
+// Setting the hint weight policy
+evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);
+// Showing the button
+evas_object_show(btn_resize);
+// Setting the &quot;clicked&quot; callback
+evas_object_smart_callback_add(btn_resize, &quot;clicked&quot;, _btn_resize_cb, ad);
+// Adding the button to the first column
+elm_box_pack_end(ad-&gt;left_vbox, btn_resize);
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> defines the callback function that is to be called when the button is clicked. In this example, set a <span style="font-family: Courier New,Courier,monospace">_btn_resize_cb</span> function and pass the application data <span style="font-family: Courier New,Courier,monospace">ad</span> to this callback function.</p>
+
+<p>The callback by itself only sets a new text for the animation target button, and calls a function which will actually animate the button.</p>
+
+<pre class="prettyprint">static void _btn_resize_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
+&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Resize&quot;);
+&nbsp;&nbsp;&nbsp;_resize_effect(ad-&gt;button);
+
+}
+</pre>
+
+<p>This function is an <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback</span> and thus needs to have its specific prototype: it does not return anything and receives three parameters:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">data</span>: data to be passed</li>
+<li><span style="font-family: Courier New,Courier,monospace">btn</span>: the object the callback is being called about</li>
+<li><span style="font-family: Courier New,Courier,monospace">ev</span>: the actual event, seldom used</li>
+</ul>
+
+<p>In this case, use <span style="font-family: Courier New,Courier,monospace">data</span> to pass the application data to the callback. However, the parameter&#39;s type is <span style="font-family: Courier New,Courier,monospace">void *</span> and not <span style="font-family: Courier New,Courier,monospace">appdata_s *</span>. Initialize a variable of the correct type with the pointer.</p>
+<pre class="prettyprint">appdata_s *ad = data;
+</pre>
+
+<p>Then use the application data in the callback function. At this point create the animation directly in the callback function, but it is more straightforward to encapsulate the animation process into a dedicated function. <span style="font-family: Courier New,Courier,monospace">_resize_effect</span> implements the animation code:</p>
+
+<pre class="prettyprint">static void _resize_effect(Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp;// Elementary Transition declaration and creation
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+
+&nbsp;&nbsp;&nbsp;// Adding the transition target object
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+
+&nbsp;&nbsp;&nbsp;// Setting the resize effect
+&nbsp;&nbsp;&nbsp;elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+
+&nbsp;&nbsp;&nbsp;// Setting the transition duration
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+
+&nbsp;&nbsp;&nbsp;// Starting the transition
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+<p>Create an <span style="font-family: Courier New,Courier,monospace">Elm_Transit *</span> object representing the transition.</p>
+
+<pre class="prettyprint">Elm_Transit *trans = elm_transit_add();
+</pre>
+
+<p>Then add the target object to the transition</p>
+
+<pre class="prettyprint">elm_transit_object_add(trans, obj);
+</pre>
+
+<p>Add a resizing transition to the object with the origin and destination width and height in pixels.</p>
+
+<pre class="prettyprint">elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+</pre>
+<p>100 and 50 are respectively the object&#39;s width and height when the effect begins, whereas 300 and 150 are respectively the object&#39;s width and height when the effect ends: the object grows from 100×50 to 300×150.</p>
+
+<p>After that set the transition duration with <span style="font-family: Courier New,Courier,monospace">elm_transit_duration_set</span>.</p>
+<pre class="prettyprint">elm_transit_duration_set(trans, 3.0);
+</pre>
+
+<p>The animation lasts three seconds. The duration parameter is a double.</p>
+
+<p>Now start the animation by calling <span style="font-family: Courier New,Courier,monospace">elm_transit_go</span> with the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> object.</p>
+
+<pre class="prettyprint">elm_transit_go(trans);
+</pre>
+
+<p>When the resize button is clicked, the animation target button grows.</p>
+
+<p>All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.</p>
+
+ <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
+
+<p>This effect rotates the animation target button with an angle of 360&deg;. This angle is stored in the application data as <span style="font-family: Courier New,Courier,monospace">ad-&gt;rt_angle</span>.</p>
+
+<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
+
+<pre class="prettyprint">// The rotation button
+btn_rotate = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_rotate, &quot;Rotate&quot;);
+evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_rotate);
+evas_object_smart_callback_add(btn_rotate, &quot;clicked&quot;, _btn_rotate_cb, ad);
+elm_box_pack_end(ad-&gt;center_vbox, btn_rotate);
+</pre>
+
+<p>In the rotate button callback, call the effect function with the target button as first parameter and the rotation angle as the second one.</p>
+
+<pre class="prettyprint">static void _btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Rotate&quot;);
+&nbsp;&nbsp;&nbsp;_rotation_effect(ad-&gt;button, ad-&gt;rt_angle);
+}
+</pre>
+
+<p>The animation function rotates the animation target by adding a rotation effect with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_rotation_add</span>. This function takes three parameters:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_Transit</span></li>
+<li>the rotation position at which the effect begins</li>
+<li>the rotation position at which the effect ends</li>
+</ul>
+
+<p>Rotation starts at 0&deg; to finish at 360&deg;. The animation lasts two seconds.</p>
+
+<pre class="prettyprint">static void _rotation_effect(Evas_Object *obj, float angle)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+
+&nbsp;&nbsp;&nbsp;// Rotates the object from its original angle to given degrees to the right
+&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(trans, 0.0, angle);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+ <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
+
+<p>The zoom effect zooms on the animation target to make it twice bigger. Store the source rate and the destination rate in the application data using <span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>.</p>
+<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
+
+<pre class="prettyprint">// The zoom button
+btn_zoom = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_zoom, &quot;Zoom&quot;);
+evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_zoom);
+evas_object_smart_callback_add(btn_zoom, &quot;clicked&quot;, _btn_zoom_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_zoom);
+</pre>
+
+<p>Then add a callback function in order to perform the animation.</p>
+
+<pre class="prettyprint">static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
+&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Zoom&quot;);
+&nbsp;&nbsp;&nbsp;_zoom_effect(ad-&gt;button, ad-&gt;zfrom, ad-&gt;zto);
+}
+</pre>
+
+<p>To create the zoom effect, use <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_zoom_add</span> with the start rate and the destination rate stored in application data (<span style="font-family: Courier New,Courier,monospace">ad-&gt;zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad-&gt;zto</span>)</p>
+
+<pre class="prettyprint">static void _zoom_effect(Evas_Object *obj, float from, float to)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(trans, from, to);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 2.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+
+ <h2 id="flip" name="flip">Creating a Flip Effect</h2>
+ 
+<p>This effect is applied to a pair of objects, in the order they are added, to the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> transition. In this example, add the animation target button and the button called buttonbck which represents the back of the target button.</p>
+
+<p>Create the action button for the flip effect:</p>
+
+<pre class="prettyprint">// The flip button
+btn_flip = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_flip, &quot;Flip x&quot;);
+evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip);
+evas_object_smart_callback_add(btn_flip, &quot;clicked&quot;, _btn_flip_cb, ad);
+elm_box_pack_end(ad-&gt;left_vbox, btn_flip);
+</pre>
+
+<p>The corresponding callback to create and start the animation with the two objects (target button and back button) to animate is like follows.</p>
+
+<pre class="prettyprint">static void _btn_flip_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip&quot;);
+&nbsp;&nbsp;&nbsp;_flip_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+
+<p>Create the function which runs the animation. This flip animation is created using <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_flip_add</span>. The second parameter is the axis of the flip: in this example it is the X axis, so the button flips down to top to show the back button. The last parameter is the flip direction: <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> means clockwise.</p>
+
+<pre class="prettyprint">static void _flip_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+ <h2 id="blend" name="blend">Creating a Blend Transition</h2>
+
+<p>The blend effect also works the same way as the flip, but without the axes or direction information. Use the back button here as well. To create the blend effect button:</p>
+
+<pre class="prettyprint">// The blend button
+btn_blend = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_blend, &quot;Blend&quot;);
+evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_blend);
+evas_object_smart_callback_add(btn_blend, &quot;clicked&quot;, _btn_blend_cb, ad);
+elm_box_pack_end(ad-&gt;center_vbox, btn_blend);
+</pre>
+
+<p>The blend transition callback is:</p>
+
+<pre class="prettyprint">static void _btn_blend_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Blend&quot;);
+&nbsp;&nbsp;&nbsp;_blend_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+
+<p>Create and start the blend animation. This animation is created by adding it to and <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add</span>. Add two objects, as for the flip.</p>
+
+<pre class="prettyprint">static void _blend_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_blend_add(trans);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+ <h2 id="fade" name="fade">Creating a Fade Effect</h2>
+
+<p>The fade effect works exactly the same way as the blend effect. First create the button:</p>
+
+<pre class="prettyprint">// The fade button
+btn_fade = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_fade, &quot;Fade&quot;);
+evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_fade);
+evas_object_smart_callback_add(btn_fade, &quot;clicked&quot;, _btn_fade_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_fade);
+</pre>
+
+<p>Then add the button&#39;s callback:</p>
+
+<pre class="prettyprint">static void _btn_fade_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Fade&quot;);
+&nbsp;&nbsp;&nbsp;_fade_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+</pre>
+
+<p>The animation function calls <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_fade_add</span> instead of <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_blend_add</span>.</p>
+
+<pre class="prettyprint">static void _fade_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_fade_add(trans);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+ <h2 id="flip_y" name="flip_y">Creating a Flip on y Axis</h2>
+
+<p>This is same as the flip transition, but on y axis. To create a flip on y axis:</p>
+
+<pre class="prettyprint">// The flip y button
+btn_flip_y = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_flip_y, &quot;Flip y&quot;);
+evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip_y);
+evas_object_smart_callback_add(btn_flip_y, &quot;clicked&quot;, _btn_flip_y_cb, ad);
+elm_box_pack_end(ad-&gt;left_vbox, btn_flip_y);
+
+static void _btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Flip 2&quot;);
+&nbsp;&nbsp;&nbsp;_flip_y_effect(ad-&gt;button, ad-&gt;buttonbck);
+}
+
+static void _flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+&nbsp;&nbsp;&nbsp;Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp;trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(trans, obj2);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp;elm_transit_go(trans);
+}
+</pre>
+
+ <h2 id="wipe" name="wipe">Creating a Wipe Effect</h2>
+
+<p>The wipe transition is applied on an Evas object considering the wipe type and the direction. Use <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> to hide the button, and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> to do it from left to right.</p>
+
+<p>The wipe animation button is as follows:</p>
+
+<pre class="prettyprint">// The wipe button
+btn_wipe = elm_button_add(ad-&gt;win);
+elm_object_text_set(btn_wipe, &quot;Wipe&quot;);
+evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_wipe);
+evas_object_smart_callback_add(btn_wipe, &quot;clicked&quot;, _btn_wipe_cb, ad);
+elm_box_pack_end(ad-&gt;right_vbox, btn_wipe);
+</pre>
+
+<p>The wipe button callback looks like:</p>
+
+<pre class="prettyprint">static void _btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;// Starting the rotation effect 360 degrees
+&nbsp;&nbsp;&nbsp;// evas_object_resize(ad-&gt;button, 100, 50);
+&nbsp;&nbsp;&nbsp;// Setting the button text
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Wipe&quot;);
+&nbsp;&nbsp;&nbsp;_wipe_effect(ad-&gt;button);
+}
+</pre>
+
+<p>The animation function calls <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_wipe_add</span> with <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> as the second parameter to hide the button and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> as last parameter to set the direction (left to right).</p>
+
+<pre class="prettyprint">static void _wipe_effect(Evas_Object *obj)
+{
+&nbsp;&nbsp;&nbsp; Elm_Transit *trans;
+
+&nbsp;&nbsp;&nbsp; trans = elm_transit_add();
+&nbsp;&nbsp;&nbsp; elm_transit_object_add(trans, obj);
+&nbsp;&nbsp;&nbsp; elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+&nbsp;&nbsp;&nbsp; elm_transit_duration_set(trans, 3.0);
+&nbsp;&nbsp;&nbsp; elm_transit_go(trans);
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/elementary_transit_effect_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/elementary_transit_effect_tutorial_n.htm
new file mode 100755 (executable)
index 0000000..a4e7e9a
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/elementary_transit_effect_tutorial_n.htm
@@ -0,0 +1,213 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Elementary Transit Effects</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#initial">Initializing the Application Layout</a></li>
+                       <li><a href="#rotation">Implementing the Rotation Effect</a></li>
+                       <li><a href="#zoom">Implementing the Zoom Effect</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Elementary Transit Effects</h1>
+
+<p>This tutorial demonstrates how you can implement a variety of EFL animation effects using the APIs available in the EFL library.</p>
+
+ <h2 id="initial" name="initial">Initializing the Application Layout</h2>
+
+<p>The application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> for view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
+<p>The transit is designed to apply various animated transition effects to the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. The following transition effects are supported in the Tizen native applications:</p>
+<ul>
+<li>Blend</li>
+<li>Color</li>
+<li>Fade</li>
+<li>Flip</li>
+<li>Rotation</li>
+<li>Transition</li>
+<li>Wipe</li>
+<li>Zoom</li>
+</ul>
+
+<p>The application layout is created by the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function. First, a window is created and the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component is added to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component, which acts as a view manager for the window and provides the window title functionality.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = create_main_view(ad);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+
+&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main content. It consists of a naviframe containing a list. This function returns a list of naviframe object pointers for the content set.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
+&nbsp;&nbsp;&nbsp;Evas_Object *navi, *list;
+
+&nbsp;&nbsp;&nbsp;navi = elm_naviframe_add(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;list = elm_list_add(navi);
+&nbsp;&nbsp;&nbsp;elm_list_mode_set(list, ELM_LIST_COMPRESS);
+
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Blend&quot;, NULL, NULL, blend_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Color&quot;, NULL, NULL, color_cb, navi
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Fade&quot;, NULL, NULL, fade_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Flip&quot;, NULL, NULL, flip_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Rotation&quot;, NULL, NULL, rotation_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;ResizableFlip&quot;, NULL, NULL, resizable_flip_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Translation&quot;, NULL, NULL, translation_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Wipe&quot;, NULL, NULL, wipe_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Zoom&quot;, NULL, NULL, zoom_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Custom&quot;, NULL, NULL, custom_cb, navi);
+&nbsp;&nbsp;&nbsp;elm_list_go(list);
+
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(navi, &quot;Transit&quot;, NULL, NULL, list, NULL);
+
+&nbsp;&nbsp;&nbsp;return navi;
+}
+</pre>
+
+<p>This document describes only the rotation and zoom implementations. For more information about other effects, see the <span style="font-family: Courier New,Courier,monospace">transit.c</span> file and the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> document. The following figure illustrates the rotation and zoom effects.</p>
+
+<p class="figure">Figure: Rotation and zoom</p>
+<p align="center"><img alt="Rotation and zoom" src="../../images/transit_rotation_zoom.png" /></p> 
+
+ <h2 id="rotation" name="rotation">Implementing the Rotation Effect</h2>
+
+<p>If the list item named by rotation includes the touch event, the callback function for this event is called.</p>
+<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
+<p>To implement the rotation effect:</p>
+<ol>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> object with the <span style="font-family: Courier New,Courier,monospace">elm_transit_add()</span> function to add the transit effect.</li>
+<li>Set the transit rotation amount and duration.</li>
+<li>To start the transit animation, use the <span style="font-family: Courier New,Courier,monospace">elm_transit_go()</span> function.</li>
+</ol>
+<pre class="prettyprint">
+static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
+
+&nbsp;&nbsp;&nbsp;// 360 degree rotation effect in the clock-wise direction
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(transit, 0, 360);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 1);
+&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit, transit_del_cb, NULL);
+&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
+}
+</pre>
+
+ <h2 id="zoom" name="zoom">Implementing the Zoom Effect</h2>
+
+<p>If the list item named by zoom includes the touch event, the callback function for this event is called.</p>
+<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
+<p>There are 2 transit functions: one is for the zoom effect and the other is for returning to the original effect:</p>
+<ol>
+<li>After adding the transit object, add an <span style="font-family: Courier New,Courier,monospace">evas_object</span> to get the effect.</li>
+<li>Set the zoom from the original size (1.0) to 0.4 times the original size, and set the duration.</li>
+<li>Similarly, set the zoom size (0.4) back to the original size (1.0), and set the duration.</li>
+<li>Set both of effects to be applied in sequence.</li>
+</ol>
+<pre class="prettyprint">
+static void
+zoom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = (Evas_Object *) data;
+&nbsp;&nbsp;&nbsp;// Zoom out to scale 0.6
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit, 1.0, 0.4);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 0.5);
+
+&nbsp;&nbsp;&nbsp;// Zoom in to the original size
+&nbsp;&nbsp;&nbsp;Elm_Transit *transit2 = elm_transit_add();
+&nbsp;&nbsp;&nbsp;elm_transit_smooth_set(transit2, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_transit_object_add(transit2, layout);
+&nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
+&nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit2, 0.5);
+&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit2, transit_del_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;elm_transit_chain_transit_add(transit, transit2);
+&nbsp;&nbsp;&nbsp;elm_transit_go(transit);
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/evas_advanced_objects_n.htm b/org.tizen.ui.guides/html/native/efl/evas_advanced_objects_n.htm
new file mode 100755 (executable)
index 0000000..fd8c475
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/evas_advanced_objects_n.htm
@@ -0,0 +1,379 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Advanced Manipulation of Evas Objects</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+       \r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+               <li><a href="#create">Creating the Basic Application</a></li>\r
+               <li><a href="#attach">Attaching Data to the Object</a></li>\r
+               <li><a href="#scale">Using Scale Functions</a></li>\r
+               <li><a href="#render">Configuring the Evas Object Render Mode</a></li>\r
+               </ul>   \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Advanced Manipulation of Evas Objects</h1>\r
+\r
+  \r
+<p>This tutorial demonstrates how you can use Evas object extra functions.</p>\r
+\r
+<p>This tutorial shows how to create an application that enables scaling of an Evas text object by clicking buttons. Data setter and getter functions are used to pass the scalable object through the clicked button object to a callback.</p>\r
+<p>The tutorial also shows how to change the Evas object rendering mode using the extra object manipulation API. </p>  \r
+\r
+<p class="figure">Figure: Advanced Evas application</p> \r
+<p align="center"><img alt="Advanced Evas application" src="../../images/evas_advanced.png" /></p>\r
+\r
+\r
+<h2 id="create" name="create">Creating the Basic Application</h2>\r
+<p>To create the basic application:</p>\r
+<ol>\r
+<li>\r
+<p>To use the required APIs, include the following libraries:</p>\r
+\r
+<pre class="prettyprint">#include &lt;app.h&gt;\r
+#include &lt;Elementary.h&gt;\r
+#include &lt;system_settings.h&gt;\r
+#include &lt;efl_extension.h&gt;</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create objects for an Elementary window and buttons for scaling and changing the object render mode. Also create a text object and 2 rectangle objects to connect to the application data structure:</p>\r
+\r
+<pre class="prettyprint">typedef struct appdata \r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *scale_incr_button;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *scale_decr_button;\r
+\r
+&nbsp;&nbsp;&nbsp;Evas_Object *render_text;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *blend_mode_button;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *copy_mode_button;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *render_rect1;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *render_rect2;\r
+} \r
+appdata_s;</pre>\r
+</li>\r
+</ol>\r
+\r
+<h3 id="window" name="window">Creating the Elementary Window</h3>\r
+<p>To create an elementary window:</p>\r
+<ol>\r
+<li>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and give there the name and title of the application. To set a callback for the Back hardware button, use the <span style="font-family: Courier New,Courier,monospace">eext_object_event_callback_add()</span> function. To display the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</p>\r
+\r
+<pre class="prettyprint">static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp;// Window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;Extra object function&quot;, &quot;Extra object function&quot;);\r
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;// Window callbacks\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, back_cb, ad);\r
+\r
+&nbsp;&nbsp;&nbsp;// Show the window\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+\r
+<p>Implement callback functions to enable closing the application: </p>\r
+\r
+<pre class="prettyprint">static void\r
+back_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);\r
+}\r
+\r
+static void\r
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;ui_app_exit();\r
+}</pre>\r
+</li>\r
+</ol>\r
+\r
+<h3 id="create_app" name="create_app">Creating an Application</h3>\r
+<p>Create an Elementary application with a GUI:</p>\r
+\r
+<pre class="prettyprint">static bool\r
+app_create(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;// Create the application UI\r
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+\r
+int\r
+main(int argc, char *argv[])\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};\r
+\r
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};\r
+\r
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;\r
+\r
+&nbsp;&nbsp;&nbsp;// Run the main loop\r
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);\r
+}</pre>\r
+\r
+<h3 id="button" name="button">Creating Buttons</h3>\r
+<p>To create buttons:</p>\r
+<ol>\r
+<li>\r
+<p>Create the scale buttons. The <span style="font-family: Courier New,Courier,monospace">move()</span> and <span style="font-family: Courier New,Courier,monospace">resize()</span> functions configure the buttons&#39; custom geometry.</p>\r
+\r
+<pre class="prettyprint">// Scale increasing button\r
+ad-&gt;scale_incr_button = elm_button_add(ad-&gt;win);\r
+elm_object_text_set(ad-&gt;scale_incr_button, &quot;Scale +&quot;);\r
+evas_object_resize(ad-&gt;scale_incr_button, 120, 50);\r
+evas_object_move(ad-&gt;scale_incr_button, 180, 20);\r
+evas_object_show(ad-&gt;scale_incr_button);\r
+\r
+// Scale decreasing button\r
+ad-&gt;scale_decr_button = elm_button_add(ad-&gt;win);\r
+elm_object_text_set(ad-&gt;scale_decr_button, &quot;Scale -&quot;);\r
+evas_object_resize(ad-&gt;scale_decr_button, 120, 50);\r
+evas_object_move(ad-&gt;scale_decr_button, 180, 170);\r
+evas_object_show(ad-&gt;scale_decr_button);</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create the render mode change buttons:</p>\r
+\r
+<pre class="prettyprint">// Blend render mode button\r
+ad-&gt;blend_mode_button = elm_button_add(ad-&gt;win);\r
+elm_object_text_set(ad-&gt;blend_mode_button, &quot;BLEND Mode&quot;);\r
+evas_object_resize(ad-&gt;blend_mode_button, 190, 50);\r
+evas_object_move(ad-&gt;blend_mode_button, 30, 280);\r
+evas_object_show(ad-&gt;blend_mode_button);\r
+\r
+// Copy render mode button\r
+ad-&gt;copy_mode_button = elm_button_add(ad-&gt;win);\r
+elm_object_text_set(ad-&gt;copy_mode_button, &quot;COPY Mode&quot;);\r
+evas_object_resize(ad-&gt;copy_mode_button, 190, 50);\r
+evas_object_move(ad-&gt;copy_mode_button, 260, 280);\r
+evas_object_show(ad-&gt;copy_mode_button);</pre>\r
+</li>\r
+</ol>\r
+\r
+<h3 id="callback" name="callback">Creating Callbacks for the Button Click Signal</h3>\r
+<p>To create the callbacks:</p>\r
+<ol>\r
+<li>\r
+<p>Create callbacks:</p>\r
+\r
+<pre class="prettyprint">\r
+evas_object_smart_callback_add(ad-&gt;scale_incr_button, &quot;clicked&quot;, scale_incr_cb, NULL);\r
+evas_object_smart_callback_add(ad-&gt;scale_decr_button, &quot;clicked&quot;, scale_decr_cb, NULL);\r
+evas_object_smart_callback_add(ad-&gt;blend_mode_button, &quot;clicked&quot;, blend_mode_cb, ad);\r
+evas_object_smart_callback_add(ad-&gt;copy_mode_button, &quot;clicked&quot;, copy_mode_cb, ad);</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Implement callback functions to enable changing the scale and render mode:</p>\r
+\r
+<pre class="prettyprint">static void\r
+scale_incr_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);\r
+&nbsp;&nbsp;&nbsp;if (!evas_text)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;double current_scale = evas_object_scale_get(evas_text);\r
+\r
+&nbsp;&nbsp;&nbsp;if (current_scale &gt;= 5.0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_scale_set(evas_text, current_scale + 0.2);\r
+}\r
+\r
+static void\r
+scale_decr_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);\r
+&nbsp;&nbsp;&nbsp;if (!evas_text)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;double current_scale = evas_object_scale_get(evas_text);\r
+\r
+&nbsp;&nbsp;&nbsp;if (current_scale &lt;= 0.0)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_scale_set(evas_text, current_scale - 0.2);\r
+}\r
+\r
+static void\r
+blend_mode_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_text_text_set(ad-&gt;render_text, &quot;EVAS_RENDER_BLEND: d = d * (1-sa) + s&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_BLEND);\r
+}\r
+\r
+static void\r
+copy_mode_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_text_text_set(ad-&gt;render_text, &quot;EVAS_RENDER_COPY: d = s&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_COPY);\r
+}</pre>\r
+</li>\r
+</ol>\r
+\r
+<h2 id="attach" name="attach">Attaching Data to the Object</h2>\r
+<p>To attach data to the object:</p>\r
+<ol>\r
+<li>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_set()</span> function. To create the keyword to get the data, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_get()</span> function.</p>\r
+\r
+<p>Create the text object using the <span style="font-family: Courier New,Courier,monospace">evas_object_text_add()</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+evas = evas_object_evas_get(ad-&gt;win);</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create the Evas text object to be used as data attached to the button:</p>\r
+\r
+<pre class="prettyprint">\r
+evas_text = evas_object_text_add(evas);\r
+evas_object_text_text_set(evas_text, &quot;Scalable Text Object&quot;);\r
+evas_object_text_font_set(evas_text, &quot;Sans&quot;, 10);\r
+evas_object_color_set(evas_text, 50, 100, 200, 255);\r
+evas_object_move(evas_text, 10, 90);\r
+evas_object_show(evas_text);</pre>\r
+</li>\r
+</ol>\r
+\r
+<h3 id="atdata" name="atdata">Attaching Data</h3>\r
+\r
+<p>The data is passed to the function through buttons. Use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_set()</span> function for the button. Give a pointer to the attach data, and the key name to associate it with the data.</p>\r
+\r
+<pre class="prettyprint">\r
+evas_object_data_set(ad-&gt;scale_incr_button, &quot;evas_text&quot;, evas_text);\r
+evas_object_data_set(ad-&gt;scale_decr_button, &quot;evas_text&quot;, evas_text);</pre>\r
+\r
+<h3 id="getdata" name="detdata">Getting data</h3>\r
+\r
+<p>To get the file data attached to the object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_get()</span> function and give the data key name added when you attached this data:</p>\r
+\r
+<pre class="prettyprint">Evas_Object *evas_text = evas_object_data_get(obj, &quot;evas_text&quot;);</pre>\r
+\r
+<h3 id="deldata" name="deldata">Deleting data</h3>\r
+\r
+<p>To delete the data attached to the object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_data_del()</span> function and give the data key name added when you attached this data:</p>\r
+\r
+<pre class="prettyprint">evas_object_data_del(obj, &quot;evas_text&quot;);</pre>\r
+\r
+<h2 id="scale" name="scale">Using Scale Functions</h2>\r
+\r
+<p>To set the scale factor to a single Evas object instead of setting scale to the entire application, use the <span style="font-family: Courier New,Courier,monospace">evas_object_scale_set()</span> function. This is useful when you want scalable UI elements at runtime. However, only text and textblock objects have scaling change handlers. Other objects do not change visually on this call. In this application, the scale is defined in the button click callbacks.</p>\r
+\r
+<pre class="prettyprint">double current_scale = evas_object_scale_get(evas_text);\r
+\r
+if (current_scale &gt;= 5.0)\r
+&nbsp;&nbsp;&nbsp;return;\r
+\r
+evas_object_scale_set(evas_text, current_scale + 0.2);</pre>\r
+\r
+<p>Get the current scale of the Evas text object and check its maximum size. If the current size is smaller than the maximum size, the scale factor for the object is increased using the evas_object_scale_set function. The text object is updated on display and its size changes.</p>\r
+\r
+<h2 id="render" name="render">Configuring the Evas Object Render Mode</h2>\r
+\r
+<p>To change the render operation to be used for rendering the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_set()</span> function. To get the current render operation, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_get()</span> function.</p>\r
+\r
+<h3 id="rect" name="rect">Creating Rectangle Objects</h3>\r
+\r
+<p>Creates Evas rectangle objects to change the Evas rendering mode for them:</p>\r
+\r
+<pre class="prettyprint">// Rectangle with yellow background\r
+ad-&gt;render_rect1 = evas_object_rectangle_add(evas);\r
+evas_object_color_set(ad-&gt;render_rect1, 240, 220, 50, 191);\r
+evas_object_resize(ad-&gt;render_rect1, 260, 260);\r
+evas_object_move(ad-&gt;render_rect1, 60, 400);\r
+evas_object_show(ad-&gt;render_rect1);\r
+\r
+// Translucent rectangle with blue foreground\r
+ad-&gt;render_rect2 = evas_object_rectangle_add(evas);\r
+evas_object_color_set(ad-&gt;render_rect2, 25, 110, 220, 127);\r
+evas_object_resize(ad-&gt;render_rect2, 260, 260);\r
+evas_object_move(ad-&gt;render_rect2, 170, 500);\r
+evas_object_show(ad-&gt;render_rect2);</pre>\r
+\r
+<h3 id="change" name="change">Changing the Render Operation</h3>\r
+\r
+<p>To change the rendering mode, use the <span style="font-family: Courier New,Courier,monospace">evas_object_render_op_set()</span> function and give the render operation constant, which informs Evas of the function to use when drawing the eEvas object on canvas. By default, all evas objects use the <span style="font-family: Courier New,Courier,monospace">EVAS_RENDER_BLEND</span> mode and all colors are drawn using the &quot;d = d*(1-sa) + s&quot; formula, where &quot;d&quot; is destination color, &quot;sa&quot; is source alpha, and &quot;s&quot; is source color.</p>\r
+\r
+<p>Change the rendering mode to copy mode (d = s):</p>\r
+\r
+<pre class="prettyprint">evas_object_render_op_set(ad-&gt;render_rect2, EVAS_RENDER_COPY);</pre>\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.ui.guides/html/native/efl/evas_basic_objects_n.htm b/org.tizen.ui.guides/html/native/efl/evas_basic_objects_n.htm
new file mode 100755 (executable)
index 0000000..80d5933
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/evas_basic_objects_n.htm
@@ -0,0 +1,349 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Basic Manipulation of Evas Objects</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+       \r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+               <li><a href="#work">Working with Evas</a></li>\r
+               <li><a href="#clip">Clipping an Object</a></li>\r
+               <li><a href="#color">Changing Colors and Visibility</a></li>\r
+               <li><a href="#ref">Reference Counting</a></li>\r
+               <li><a href="#order">Changing the Object Order on Canvas</a></li>\r
+               </ul>   \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Basic Manipulation of Evas Objects</h1>\r
+\r
+  \r
+<p>Most Evas objects can be manipulated using generic functions.</p>\r
+\r
+<p>The list of available basic actions does not depend on the object&#39;s type. Evas implements functionality that allows performing basic manipulation, such as showing, hiding, setting, and getting geometry, bringing a layer up or down, managing color, clipping, and reference counting.</p>\r
+\r
+<p>This tutorial introduces the basic manipulations available for <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> object.</p>\r
+\r
+\r
+<h2 id="work" name="work">Working with Evas</h2>\r
+\r
+<ol>\r
+<li>\r
+<p>To start interacting with Evas, first create an Evas instance or get a reference to an already allocated Evas object:</p>\r
+\r
+<pre class="prettyprint">ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);\r
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+\r
+Evas *evas = evas_object_evas_get(ad-&gt;win);</pre>\r
+</li>\r
+\r
+<li>\r
+<p>When an instance of Evas object exists, you can start creating basic Evas objects using obtained reference to Evas as a parent for child objects. The following example creates an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> with size 480x800, position on window at 0,0 by x and y axis, and set as a background:</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;bg = evas_object_rectangle_add(evas);\r
+evas_object_color_set(ad-&gt;bg, 255, 255, 255, 255);\r
+evas_object_resize(ad-&gt;bg, 480, 800);\r
+evas_object_move(ad-&gt;bg, 0, 0);\r
+evas_object_show(ad-&gt;bg);\r
+</pre>\r
+\r
+<p class="figure">Figure: Empty window</p> \r
+<p align="center"><img alt="Empty window" src="../../images/empty_window.png" /></p>\r
+\r
+</li>\r
+</ol>\r
+\r
+\r
+<h2 id="clip" name="clip">Clipping an Object</h2>\r
+\r
+<p>You can set an Evas object as a clipper for another Evas object. To obtain a clipper object, create an Evas object, set its width and height parameters, and call the <span style="font-family: Courier New,Courier,monospace">evas_object_clip_set()</span> function to set the object as a clipper for other Evas objects:</p>\r
+\r
+<pre class="prettyprint">ad-&gt;img = evas_object_image_filled_add(evas);\r
+_app_get_resource(&quot;images/enlightenment.png&quot;, image_path, PATH_MAX);\r
+evas_object_image_file_set(ad-&gt;img, image_path, NULL);\r
+if (evas_object_image_load_error_get(ad-&gt;img) != EVAS_LOAD_ERROR_NONE)\r
+&nbsp;&nbsp;&nbsp;return;\r
+\r
+evas_object_geometry_get(ad-&gt;spacer, NULL, NULL, &amp;w, &amp;h);\r
+evas_object_name_set(ad-&gt;img, &quot;background&quot;);\r
+evas_object_resize(ad-&gt;img, WIDTH, HEIGHT);\r
+evas_object_move(ad-&gt;img, w, h);\r
+evas_object_show(ad-&gt;img);\r
+\r
+ad-&gt;clipper = evas_object_rectangle_add(evas);\r
+evas_object_geometry_get(ad-&gt;img, &amp;x, &amp;y, &amp;w, &amp;h);\r
+evas_object_move(ad-&gt;clipper, WIDTH / 4 + x, HEIGHT / 4 + y);\r
+evas_object_resize(ad-&gt;clipper, w / 2, h / 2);\r
+evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);\r
+evas_object_show(ad-&gt;clipper);\r
+</pre>\r
+\r
+<p class="figure">Figure: Using the clipper</p> \r
+<p align="center"><img alt="Using the clipper" src="../../images/using_clipper.png" /></p>\r
+\r
+\r
+<p>You can also unset the clipper object using the <span style="font-family: Courier New,Courier,monospace">evas_object_clip_unset()</span> function. As a result, there are 2 objects, an image and a rectangle. The rectangle is on top of the image object according to the creation order.</p>\r
+\r
+<pre class="prettyprint">static void\r
+_clipper_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;\r
+\r
+&nbsp;&nbsp;&nbsp;const char *object_name = evas_object_name_get(ad-&gt;img);\r
+&nbsp;&nbsp;&nbsp;if (strcmp(object_name, &quot;background&quot;) != 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;if (evas_object_clip_get(ad-&gt;img) == ad-&gt;clipper)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_clip_unset(ad-&gt;img);\r
+&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);\r
+}</pre>\r
+\r
+<p class="figure">Figure: Using the clipper</p> \r
+<p align="center"><img alt="Using the clipper" src="../../images/using_clipper2.png" /></p>\r
+\r
+<h2 id="color" name="color">Changing Colors and Visibility</h2>\r
+\r
+<p>You can manage the object colors and visibility. To change a color of a valid <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>, use the <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span> and pass a color value:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_color_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;\r
+\r
+&nbsp;&nbsp;&nbsp;int alpha, r, g, b;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);\r
+&nbsp;&nbsp;&nbsp;evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);\r
+\r
+&nbsp;&nbsp;&nbsp;if (g &gt; 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = b = 0;\r
+&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = b = 255;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);\r
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);\r
+}</pre>\r
+\r
+<p class="figure">Figure: Applying color</p> \r
+<p align="center"><img alt="Applying color" src="../../images/applying_color.png" /></p>\r
+\r
+<p>You can also change the opacity of the object:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_opacity_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;\r
+\r
+&nbsp;&nbsp;&nbsp;int alpha, r, g, b;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);\r
+&nbsp;&nbsp;&nbsp;evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);\r
+\r
+&nbsp;&nbsp;&nbsp;alpha -= 20;\r
+&nbsp;&nbsp;&nbsp;if (alpha &lt; 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alpha = 255;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);\r
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);\r
+}</pre>\r
+\r
+<p class="figure">Figure: Changing opacity</p> \r
+<p align="center"><img alt="Changing opacity" src="../../images/changing_opacity.png" /></p>\r
+\r
+<p>You can also hide the object when it is not needed:</p>\r
+\r
+<pre class="prettyprint">static void\r
+_visibility_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;\r
+\r
+&nbsp;&nbsp;&nbsp;if (evas_object_visible_get(ad-&gt;clipper))\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_hide(ad-&gt;clipper);\r
+&nbsp;&nbsp;&nbsp;else\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;clipper);\r
+}</pre>\r
+\r
+<p class="figure">Figure: Changing visibility</p> \r
+<p align="center"><img alt=" Changing visibility" src="../../images/applying_invisibility.png" /></p>\r
+\r
+<h2 id="ref" name="ref">Reference Counting</h2>\r
+\r
+<p>Evas has a simple reference counting mechanism that is useful for scenarios like inside a code block, callbacks exist which would possibly delete an object we are operating on afterwards.</p>\r
+<p>To increment the reference count of an object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_ref()</span> function. If the reference count is greater than 0, the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function is called until all references are released. References cannot go below 0 and are limited to 2&#94;32 - 1 for each object:</p>\r
+\r
+<pre class="prettyprint">ad-&gt;spacer = evas_object_rectangle_add(evas);\r
+evas_object_color_set(ad-&gt;spacer, 0, 255, 100, 255);\r
+evas_object_move(ad-&gt;spacer, 0, 0);\r
+evas_object_resize(ad-&gt;spacer, 120, 20);\r
+evas_object_show(ad-&gt;spacer);\r
+evas_object_ref(ad-&gt;spacer);\r
+\r
+static void\r
+_unref_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;\r
+\r
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;spacer)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;if (evas_object_ref_get(ad-&gt;spacer) != 0)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_unref(ad-&gt;spacer);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+int x, y, w, h;\r
+\r
+evas_object_geometry_get(ad-&gt;spacer, &amp;x, &amp;y, NULL, NULL);\r
+evas_object_move(ad-&gt;img, x, y);\r
+evas_object_geometry_get(ad-&gt;img, &amp;x, &amp;y, &amp;w, &amp;h);\r
+evas_object_move(ad-&gt;clipper, x + (w / 4), y + (h / 4));\r
+evas_object_move(ad-&gt;clipper_border, x + (w / 4) - 3, y + (h / 4) - 3);\r
+evas_object_del(ad-&gt;spacer);\r
+ad-&gt;spacer = NULL;\r
+}</pre>\r
+\r
+\r
+<p>A green rectangle is used as a padding and the clipper object calculates its x, y coordinates based on the rectangle position. The rectangle reference count is increased by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_ref()</span> function and now it is equal to 1. When the <span style="font-family: Courier New,Courier,monospace">_unref_cb</span> callback is triggered, the reference count value is higher than 0 and the <span style="font-family: Courier New,Courier,monospace">evas_object_del(ad-&gt;spacer)</span> function has no effect on the object. After the second callback call, the <span style="font-family: Courier New,Courier,monospace">evas_object_ref_get(ad-&gt;spacer)</span> function returns 0 and the <span style="font-family: Courier New,Courier,monospace">evas_object_del(ad-&gt;spacer)</span> function marks the rectangle object for deletion.</p>\r
+\r
+<p class="figure">Figure: Removing padding</p> \r
+<p align="center"><img alt="Removing padding" src="../../images/removing_padding.png" /></p>\r
+\r
+<h2 id="order" name="order">Changing the Object Order on Canvas</h2>\r
+\r
+<p>By default, the placing of objects on canvas is based on their creation order.</p>\r
+\r
+<pre class="prettyprint">\r
+ad-&gt;order_rect1 = evas_object_rectangle_add(evas);\r
+evas_object_name_set(ad-&gt;order_rect1, &quot;red&quot;);\r
+evas_object_color_set(ad-&gt;order_rect1, 255, 0, 0, 255);\r
+evas_object_move(ad-&gt;order_rect1, 120, 310);\r
+evas_object_resize(ad-&gt;order_rect1, 200, 200);\r
+evas_object_show(ad-&gt;order_rect1);\r
+\r
+ad-&gt;order_rect2 = evas_object_rectangle_add(evas);\r
+evas_object_name_set(ad-&gt;order_rect2, &quot;blue&quot;);\r
+evas_object_color_set(ad-&gt;order_rect2, 0, 0, 255, 255);\r
+evas_object_move(ad-&gt;order_rect2, 180, 350);\r
+evas_object_resize(ad-&gt;order_rect2, 200, 200);\r
+evas_object_show(ad-&gt;order_rect2);\r
+</pre>\r
+\r
+<p class="figure">Figure: Default order of objects on canvas</p> \r
+<p align="center"><img alt="Default order of objects on canvas" src="../../images/default_order.png" /></p>\r
+ \r
+<p>You can change the object triggering the <span style="font-family: Courier New,Courier,monospace">_object_order_cb()</span> callback, which switches the order of the rectangles.</p>\r
+\r
+<pre class="prettyprint">static void\r
+_object_order_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;\r
+\r
+&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_below_get(ad-&gt;order_rect2);\r
+&nbsp;&nbsp;&nbsp;if (!rect)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;const char *name = evas_object_name_get(rect);\r
+&nbsp;&nbsp;&nbsp;if (name)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(name, &quot;red&quot;) == 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_stack_below(ad-&gt;order_rect2, rect);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;rect = evas_object_below_get(ad-&gt;order_rect1);\r
+&nbsp;&nbsp;&nbsp;if (!rect)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+\r
+&nbsp;&nbsp;&nbsp;name = evas_object_name_get(rect);\r
+&nbsp;&nbsp;&nbsp;if (name)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(name, &quot;blue&quot;) == 0)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_stack_below(ad-&gt;order_rect1, rect);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+}</pre>\r
+\r
+<p class="figure">Figure: Changed order of objects on canvas</p> \r
+<p align="center"><img alt="Changed order of objects on canvas" src="../../images/changed_order.png" /></p>\r
+\r
+<p>Evas allows placing an object to top and bottom layer of the canvas object stack. The <span style="font-family: Courier New,Courier,monospace">of _raise_cb</span> callback puts the canvas background on the top position of the screen. The <span style="font-family: Courier New,Courier,monospace">call of _lower_cb</span> callback puts the background to the bottom.</p>\r
+\r
+<pre class="prettyprint">static void\r
+_lower_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_lower(ad-&gt;bg);\r
+}\r
+\r
+static void\r
+_raise_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_raise(ad-&gt;bg);\r
+&nbsp;&nbsp;&nbsp;ad-&gt;isBgOnTop = EINA_TRUE;\r
+}</pre>\r
+\r
+<p class="figure">Figure: Canvas background by default and on top</p> \r
+<p align="center"><img alt="Canvas background by default and on top" src="../../images/background_order.png" /></p>\r
+\r
+\r
+\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.ui.guides/html/native/efl/evas_map_animation_n.htm b/org.tizen.ui.guides/html/native/efl/evas_map_animation_n.htm
new file mode 100755 (executable)
index 0000000..d265764
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/evas_map_animation_n.htm
@@ -0,0 +1,389 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Evas Map Effects</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#Map_Points">Map Points</a></li>
+                               <li><a href="#Utility_Functions">Utility Functions</a></li>
+                               <li><a href="#Zoom">Zoom</a></li>
+                               <li><a href="#threeD_Maps">3D Maps</a></li>
+                               <li><a href="#threeD_Rotation">3D Rotation and Perspective</a></li>
+                               <li><a href="#Color_Light">Color and Lighting</a></li>
+                               <li><a href="#Mapping">Mapping</a></li>
+                               <li><a href="#Lighting">Lighting</a></li>
+                               <li><a href="#Alpha_Channel">Alpha Channel</a></li>
+                               <li><a href="#Smoothing">Smoothing</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li> 
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Evas Map Effects</h1> 
+
+<p>Evas Map animations allow you to apply transformations to all types of objects by way of UV mapping.</p>
+
+<p>In UV mapping, you map points in the source object to 3D space positions in the target object. This allows for rotation, perspective, scale, and other transformation effects, depending on the map. In addition, each map point can carry a multiplier color, which, if properly calculated, can be used to apply 3D shading effects on the target object.</p>
+
+<p>Evas provides both raw and easy-to-use functions for UV mapping. The raw functions allow you to create UV maps outside Evas and import them into your application, for example by loading them from an external file. The easy-to-use functions allow you to create UV maps directly in Evas by calculating the map points based on high-level parameters, such as rotation angle and ambient light.</p>
+
+<h2 id="Map_Points" name="Map_Points">Map Points</h2>
+
+<p>A map consists of a set of points. (Currently, only four points are supported.) Each point contains X and Y canvas coordinates that can be used to alter the geometry of the mapped object, and a Z coordinate that indicates the depth of the point. The Z coordinate does not normally affect the map, but several utility functions use it to calculate the right position of the point given the other parameters.</p>
+
+<p>First, create an <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object using the <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function. This function creates the specified number of map points (currently only up to four points). Each point is empty and ready to be modified with <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> functions.</p>
+
+<pre class="prettyprint">Evas_Map *m = evas_map_new(4);</pre>
+
+<p>If you want to get the size (number of points) of an existing map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_count_get()</span> function.</p>
+
+<p>To set the coordinates for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_coord_set(Evas_Map *m, int idx, Evas_Coord x, Evas_Coord y, Evas_Coord z)</pre>
+
+<p>The following example shows a common way to define a map that matches the geometry of a rectangle (a square in this case):</p>
+
+<pre class="prettyprint">
+evas_map_point_coord_set(m, 0, 100, 100, 0);
+evas_map_point_coord_set(m, 1, 300, 100, 0);
+evas_map_point_coord_set(m, 2, 300, 300, 0);
+evas_map_point_coord_set(m, 3, 100, 300, 0);
+</pre>
+
+<p class="figure">Figure: Map</p>
+<p align="center"><img alt="Map" src="../../images/evas_map_1.png" /></p>
+
+<p>The following examples all produce the same result as the above example, but with simpler code:</p>
+
+<ul>
+    <li>
+        <p>To create a rectangle map using the starting X and Y coordinates combined with width and height, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_geometry()</span> function:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(Evas_Map *m, Evas_Coord x, Evas_Coord y, Evas_Coord w, Evas_Coord h, Evas_Coord z)</pre>
+        <p>The following example creates the same map as above:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_geometry(m, 100, 100, 200, 200, 0);</pre>
+    </li>
+    <li>
+        <p>To create a map based on the geometry of a given object, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object()</span> or <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object_full()</span> function. The former sets the Z coordinate of all points to 0, whereas the latter allows you to define the same custom Z coordinate for all points:</p>
+        <pre class="prettyprint">evas_map_util_points_populate_from_object(Evas_Map *m, const Evas_Object *obj)</pre>
+        <pre class="prettyprint">evas_map_util_points_populate_from_object_full(Evas_Map *m, const Evas_Object *obj, Evas_Coord z)</pre>
+        <p>The following example creates the same map as above:</p>
+        <pre class="prettyprint">
+Evas_Object *o;
+evas_object_move(o, 100, 100);
+evas_object_resize(o, 200, 200);
+evas_map_util_points_populate_from_object(m, o);
+// OR
+evas_map_util_points_populate_from_object_full(m, o, 0);</pre>
+    </li>
+</ul>
+
+<p>You can apply several effects to an object by simply setting each point of the map to the appropriate coordinates. The following example shows how to create a simulated perspective:</p>
+
+<p class="figure">Figure: Simulated perspective</p>
+<p align="center"><img alt="Simulated perspective" src="../../images/evas_map_2.png" /></p>
+
+<pre class="prettyprint">
+evas_map_point_coord_set(m, 0, 100, 100, 0);
+evas_map_point_coord_set(m, 1, 250, 120, 0);
+evas_map_point_coord_set(m, 2, 250, 280, 0);
+evas_map_point_coord_set(m, 0, 100, 300, 0);
+</pre>
+
+<p>In the above example, the Z coordinate is unused: when setting points by hand, the Z coordinate is irrelevant.</p>
+
+<p>If you want to get the actual coordinates of a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_get()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_coord_get(const Evas_Map *m, int idx, Evas_Coord *x, Evas_Coord *y, Evas_Coord *z)</pre>
+
+<p>After you have defined the map points, apply them to your map for transformation:</p>
+
+<pre class="prettyprint">
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+</pre>
+
+<p>Finally, after you are done with the map, release the memory allocated to it using the <span style="font-family: Courier New,Courier,monospace;">evas_map_free()</span> function:</p>
+
+<pre class="prettyprint">evas_map_free(m);</pre>
+
+<p>The utility functions described in the next section allow you to perform the above tasks with less coding work.</p>
+
+<h2 id="Utility_Functions" name="Utility_Functions">Utility Functions</h2>
+
+<p>Utility functions take an already configured map and allow you to easily modify it to produce specific effects. For example, to rotate an object around its center, you need the rotation angle and the coordinates of each corner of the object to perform the math required to get the new set of coordinates that needs to be set for the map. Evas provides a utility function that does the math for you:</p>
+
+<pre class="prettyprint">evas_map_util_rotate(Evas_Map *m, double degrees, Evas_Coord cx, Evas_Coord cy)</pre>
+
+<p>This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counter-clockwise.</p>
+
+<p>The following example shows how to rotate an object around its center point by 45 degrees clockwise. In the following figure, the center of rotation is the red dot.</p>
+
+<pre class="prettyprint">
+evas_object_geometry_get(o, &amp;x, &amp;y, &amp;w, &amp;h);
+m = evas_map_new(4);
+evas_map_util_points_populate_from_object(m, o);
+evas_map_util_rotate(m, 45, x + (w / 2), y + (h / 2));
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<p class="figure">Figure: Rotating around the center point</p>
+<p align="center"><img alt="Rotating around the center point" src="../../images/evas_map_3.png" /></p>
+
+<p>You can rotate the object around any other point simply by setting the last two arguments of the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_rotate()</span> function to the appropriate values:</p>
+
+<pre class="prettyprint">evas_map_util_rotate(m, 45, x + w - 20, y + h - 20);</pre>
+
+<p class="figure">Figure: Rotating around other points</p>
+<p align="center"><img alt="Rotating around other points" src="../../images/evas_map_4.png" /></p>
+
+<p>You can also set the center of the window as the center of the rotation using the appropriate coordinates of the Evas canvas:</p>
+
+<pre class="prettyprint">
+evas_output_size_get(evas, &amp;w, &amp;h);
+m = evas_map_new(4);
+evas_map_util_points_populate_from_object(m, o);
+evas_map_util_rotate(m, 45, w, h);
+evas_object_map_set(o, m);
+evas_object_map_enable_set(o, EINA_TRUE);
+evas_map_free(m);
+</pre>
+
+<h2 id="Zoom" name="Zoom">Zoom</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_zoom()</span> function zooms the points of the map from a center point, defined by <span style="font-family: Courier New,Courier,monospace;">cx</span> and <span style="font-family: Courier New,Courier,monospace;">cy</span>. The <span style="font-family: Courier New,Courier,monospace;">zoomx</span> and <span style="font-family: Courier New,Courier,monospace;">zoomy</span> arguments specify how much to zoom in on the X and Y axes. A value of 1.0 means no zoom, 2.0 means double the size, 0.5 means half the size, and so on. All the coordinates are global canvas coordinates.</p>
+
+<pre class="prettyprint">
+evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_Coord cy)
+</pre>
+
+<h2 id="threeD_Maps" name="threeD_Maps">3D Maps</h2>
+
+<p>Maps can also be used to achieve a 3D effect. In a 3D effect, the Z coordinate of each point is meaningful: the higher the value, the further back the point is located. Smaller values (usually negative) mean that the point is closer to the user.</p>
+
+<p>3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counter-clockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).</p>
+
+<p class="figure">Figure: Rotating around the Y axis</p>
+<p align="center"><img alt="Rotating around the Y axis" src="../../images/evas_map_5.png" /></p>
+
+<p>To determine whether a map is facing the user, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_clockwise_get()</span> function. This function returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the map is facing the user and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if the map is facing away from the user. This is normally done after all the other operations are applied to the map.</p>
+
+<pre class="prettyprint">evas_map_util_clockwise_get(Evas_Map *m)</pre>
+
+<h2 id="threeD_Rotation" name="threeD_Rotation">3D Rotation and Perspective</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> function transforms a map to apply a 3D rotation to the mapped object. You can apply the rotation around any point in the canvas (including a Z coordinate). You can also apply the rotation around any of the three axes.</p>
+
+<pre class="prettyprint">evas_map_util_3d_rotate(Evas_Map *m, double dx, double dy, double dz, Evas_Coord cx, Evas_Coord cy, Evas_Coord cz)</pre>
+
+<p>Starting from this simple setup, and setting the maps so that the blue square rotates around the Y axis, we get the following:</p>
+
+<p class="figure">Figure: 3D rotation</p>
+<p align="center"><img alt="3D rotation" src="../../images/evas_map_6.png" /></p>
+
+<p>A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen. To show the Z axis, that is, to add 3D perspective to the transformation, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> function on the map after its position has been set:</p>
+
+<pre class="prettyprint">evas_map_util_3d_perspective(Evas_Map *m, Evas_Coord px, Evas_Coord py, Evas_Coord z0, Evas_Coord foc)</pre>
+
+<p>The result makes the vanishing point the center of each object:</p>
+
+<p class="figure">Figure: Adding perspective</p>
+<p align="center"><img alt="Adding perspective" src="../../images/evas_map_7.png" /></p>
+
+<h2 id="Color_Light" name="Color_Light">Color and Lighting</h2>
+
+<p>Each point in a map can be set to a color, which will be multiplied with the object’s own color and linearly interpolated between adjacent points. To set the color separately for each point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_color_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
+
+<p>To set the same color for every point, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_color_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
+
+<p>When using a 3D effect, colors can be used to improve its look by simulating a light source. The <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_lighting()</span> function makes this task easier by taking the coordinates of the light source and its color, along with the color of the ambient light. Evas then sets the color of each point based on its distance to the light source, the angle at which the object is facing the light source, and the ambient light. Here, the orientation of each point is important.</p>
+
+<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
+
+<p>If the map points are defined counter-clockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.</p>
+
+<p class="figure">Figure: Obscured object</p>
+<p align="center"><img alt="Obscured object" src="../../images/evas_map_8.png" /></p>
+
+<h2 id="Mapping" name="Mapping">Mapping</h2>
+
+<p>Images need special handling when mapped. While Evas can easily handle objects, it is completely oblivious to the contents of images. This means that each point in a map needs to be mapped to a specific pixel in the source image. Failing to do this can result in unexpected behavior.</p>
+
+<p>Let's get started with the following three images, each sized at 200 × 200 pixels:</p>
+
+<p class="figure">Figure: Starting point</p>
+<p align="center"><img alt="Starting point" src="../../images/evas_map_9.png" /></p>
+
+<p>The following three images illustrate the case where a map is set to an image object without setting the right UV mapping for each map point. The objects themselves are mapped properly to their new geometries, but the images are not displayed correctly within the mapped objects.</p>
+
+<p class="figure">Figure: Questionable result</p>
+<p align="center"><img alt="Questionable result" src="../../images/evas_map_10.png" /></p>
+
+<p>To transform an image correctly, Evas needs to know how to handle the image within the map. You can do this using the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> function, which allows you to map a given point in a map to a given pixel in a source image:</p>
+
+<pre class="prettyprint">
+evas_map_point_image_uv_set(Evas_Map *m, int idx, double u, double v)
+</pre>
+
+<p>To match our example images to the maps above, all we need is the size of each image, which we can get using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_size_get()</span> function.</p>
+
+<pre class="prettyprint">
+// Tux 1: Some cropping and stretch up
+evas_map_point_image_uv_set(m, 0, 0, 20);
+evas_map_point_image_uv_set(m, 1, 200, 20);
+evas_map_point_image_uv_set(m, 2, 200, 180);
+evas_map_point_image_uv_set(m, 3, 0, 180);
+evas_object_map_set(tux1, m);
+evas_object_map_enable_set(tux1, EINA_TRUE);
+
+// Inverted texture for shadow:
+evas_map_point_image_uv_set(m, 0, 0, 180);
+evas_map_point_image_uv_set(m, 1, 200, 180);
+evas_map_point_image_uv_set(m, 2, 200, 20);
+evas_map_point_image_uv_set(m, 3, 0, 20);
+evas_object_map_set(tux1_shadow, m);
+evas_object_map_enable_set(tux1_shadow, EINA_TRUE);
+
+// Tux 2: Make it fit to the map:
+evas_map_point_image_uv_set(m, 0, 0, 0);
+evas_map_point_image_uv_set(m, 1, 200, 0);
+evas_map_point_image_uv_set(m, 2, 200, 200);
+evas_map_point_image_uv_set(m, 3, 0, 200);
+evas_object_map_set(tux2, m);
+evas_object_map_enable_set(tux2, EINA_TRUE);
+
+// Tux 3: Zoom and fit relatively to image size
+evas_object_image_size_get(evas_object_image_source_get(tux3), &amp;w, &amp;h);
+evas_map_point_image_uv_set(m, 0, 0.1 * w, 0.1 * h);
+evas_map_point_image_uv_set(m, 1, 0.9 * w, 0.1 * h);
+evas_map_point_image_uv_set(m, 2, 0.9 * w, 0.9 * h);
+evas_map_point_image_uv_set(m, 3, 0.1 * w, 0.9 * h);
+evas_object_map_set(tux3, m);
+evas_object_map_enable_set(tux3, EINA_TRUE);
+</pre>
+
+<p class="figure">Figure: Correct result</p>
+<p align="center"><img alt="Correct result" src="../../images/evas_map_11.png" /></p>
+
+<p>You can also set a map to use only part of an image, or you can even map the points in inverted order. Combined with the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_source_set()</span> function, you can achieve more interesting results still.</p>
+
+<h2 id="Lighting" name="Lighting">Lighting</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> allows you to define an ambient light and a light source within the scene. Both of these light sources have their own colors.</p>
+
+<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
+
+<p>The above function is used to apply lighting calculations (from a single light source) to a given map. The red, green, and blue values of each vertex will be modified to reflect the lighting based on the light source coordinates, its color, the ambient color, and the angle at which the map faces the light source. The points of a surface should be defined in a clockwise formation if the surface is facing the user, since faces have a logical side for lighting.</p>
+
+<p>To get the reflections (gradient) in the shadow of our previous example, you have to define a source of light close enough to the user and a very bright ambient light, for example:</p>
+
+<pre class="prettyprint">
+evas_map_util_3d_lighting(m, // Evas_Map object
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;250/2, 150/2, -100, // Spot light coordinates
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255, 255, 255, // Spot light color
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200, 200, 200); // Ambient light color
+</pre>
+
+<h2 id="Alpha_Channel" name="Alpha_Channel">Alpha Channel</h2>
+
+<p>You can also use an alpha channel on your map by enabling the alpha channel feature:</p>
+
+<pre class="prettyprint">evas_map_alpha_set(Evas_Map *m, Eina_Bool enabled)</pre>
+
+<p>Next, set the alpha value separately for each map point:</p>
+
+<pre class="prettyprint">evas_map_point_color_set(Evas_Map *m, int idx, int r, int g, int b, int a)</pre>
+
+<p>Alternatively, you can set the same alpha value to all map points:</p>
+
+<pre class="prettyprint">evas_map_util_points_color_set(Evas_Map *m, int r, int g, int b, int a)</pre>
+
+<p>The following code sets the shadow transparency for the first image in the above three-image example:</p>
+
+<pre class="prettyprint">
+// Set object transparency to 50%:
+evas_map_util_points_color_set(m, 255, 255, 255, 127);
+
+// Tux&#39;s head is almost invisible in the shadow:
+evas_map_point_color_set(m, 3, 255, 255, 255, 15);
+evas_map_point_color_set(m, 4, 255, 255, 255, 15);
+</pre>
+
+<h2 id="Smoothing" name="Smoothing">Smoothing</h2>
+
+<p>To enable smoothing when rendering a map, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_set()</span> function:</p>
+
+<pre class="prettyprint">evas_map_smooth_set(Evas_Map *m, Eina_Bool enabled)</pre>
+
+<p>The first argument is the <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object to apply smoothing to. The second argument sets whether to enable the smoothing:</p>
+
+<ul>
+    <li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>: Enable smoothing.</li>
+    <li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span>: Disable smoothing.</li>
+</ul>
+
+<p>If the object is of a type that has its own smoothing settings, the smoothing settings must be disabled for both the object and the map. Map smoothing is enabled by default. To check whether map smoothing is enabled, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_smooth_get()</span> function.</p>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/evas_map_effects_n.htm b/org.tizen.ui.guides/html/native/efl/evas_map_effects_n.htm
new file mode 100755 (executable)
index 0000000..3184eee
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/evas_map_effects_n.htm
@@ -0,0 +1,253 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+\r
+       <title>Creating Evas Map Effects</title>  \r
+</head>\r
+\r
+<body onload="prettyPrint()" style="overflow: auto;">\r
+       \r
+<div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+       </div>\r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+               <li><a href="#create">Creating the Basic Application</a></li>\r
+               <li><a href="#data">Creating Map Data</a></li>\r
+               <li><a href="#apply">Applying the Map to the Evas Object</a></li>\r
+               <li><a href="#clear">Clearing Map Data and Enabling Map Features</a></li>\r
+               </ul>   \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>Creating Evas Map Effects</h1>\r
+\r
+  \r
+<p>This tutorial demonstrates how you can use Evas map functions to create an application in which you can change the map point coordinates of Evas objects. You can modify the map point U and V texture source point using Evas map mapping APIs. &quot;U&quot; and &quot;V&quot; denote the axes of the 2D texture.</p>\r
+\r
+<p class="figure">Figure: Evas map mapping application</p> \r
+<p align="center"><img alt="Evas map mapping application" src="../../images/evas_map_effect.png" /></p>\r
+ \r
+<h2 id="create" name="create">Creating the Basic Application</h2>\r
+<p>To create a basic application:</p>\r
+<ol>\r
+<li>\r
+<p>To use the required APIs, include the following libraries:</p>\r
+\r
+<pre class="prettyprint">#include &lt;app.h&gt;\r
+#include &lt;Elementary.h&gt;\r
+#include &lt;system_settings.h&gt;\r
+#include &lt;efl_extension.h&gt;</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create an Evas object for an Elementary window and a button for mapping the map information:</p>\r
+\r
+<pre class="prettyprint">typedef struct appdata \r
+{\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win;\r
+&nbsp;&nbsp;&nbsp;Evas_Object *button;\r
+Evas_Object *default_btn;\r
+} \r
+appdata_s;</pre>\r
+</li>\r
+<li>\r
+<p>To create an Elementary window, use the <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function and give the name and title of the application. To set a callback on hardware Back button, the use <span style="font-family: Courier New,Courier,monospace">eext_object_event_callback_add()</span> function. To display the Evas object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function.</p>\r
+\r
+<pre class="prettyprint">static void\r
+create_base_gui(appdata_s *ad)\r
+{\r
+&nbsp;&nbsp;&nbsp; Evas_Object *evas_text = NULL;\r
+&nbsp;&nbsp;&nbsp; Evas *evas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = NULL;\r
+\r
+&nbsp;&nbsp;&nbsp;// Window\r
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;Extra object function&quot;, &quot;Extra object function&quot;);\r
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;// Window callbacks\r
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);\r
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, back_cb, ad);\r
+\r
+&nbsp;&nbsp;&nbsp;evas = evas_object_evas_get(ad-&gt;win);\r
+\r
+&nbsp;&nbsp;&nbsp;evas_text = evas_object_text_add(evas);\r
+&nbsp;&nbsp;&nbsp;evas_object_text_text_set(evas_text, &quot;Evas Map Mapping&quot;);\r
+&nbsp;&nbsp;&nbsp;evas_object_text_font_set(evas_text, &quot;Sans&quot;, 18);\r
+&nbsp;&nbsp;&nbsp;evas_object_color_set(evas_text, 50, 100, 200, 255);\r
+&nbsp;&nbsp;&nbsp;evas_object_move(evas_text, 10, 90);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(evas_text);\r
+\r
+&nbsp;&nbsp;&nbsp;// Evas map source code\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Implement callback functions to enable closing the application:</p>\r
+\r
+<pre class="prettyprint">static void\r
+back_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);\r
+}\r
+\r
+static void\r
+win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)\r
+{\r
+&nbsp;&nbsp;&nbsp;ui_app_exit();\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create an elementary application with a GUI:</p>\r
+\r
+<pre class="prettyprint">static bool\r
+app_create(void *data)\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;\r
+\r
+&nbsp;&nbsp;&nbsp;// Create the application UI\r
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);\r
+\r
+&nbsp;&nbsp;&nbsp;return true;\r
+}\r
+\r
+int\r
+main(int argc, char *argv[])\r
+{\r
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};\r
+\r
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};\r
+\r
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;\r
+\r
+&nbsp;&nbsp;&nbsp;// Run the main loop\r
+&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);\r
+}</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Create the button for mapping. Use the move and resize functions to configure the button&#39;s custom geometry:</p>\r
+\r
+<pre class="prettyprint">// Create a button for mapping\r
+ad-&gt;button = elm_button_add(ad-&gt;win);\r
+elm_object_text_set(ad-&gt;button, &quot;Evas Map Mapping &quot;);\r
+evas_object_move(ad-&gt;button, 15, 100);\r
+evas_object_resize(ad-&gt;button, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));\r
+evas_object_show(ad-&gt;button);\r
+\r
+// Create a default button\r
+ad-&gt;default_btn = elm_button_add(ad-&gt;win);\r
+elm_object_text_set(ad-&gt;default_btn, &quot;Default Button &quot;);\r
+evas_object_move(ad-&gt;default_btn, 15, 300);\r
+evas_object_resize(ad-&gt;default_btn, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));\r
+evas_object_show(ad-&gt;default_btn);</pre>\r
+</li>\r
+</ol>\r
+\r
+<h2 id="data" name="data">Creating Map Data</h2>\r
+\r
+<p>By using the <span style="font-family: Courier New,Courier,monospace">evas_map_new()</span> and <span style="font-family: Courier New,Courier,monospace">evas_map_*()</span> functions, you can create map data to be attached to the button:</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Get the <span style="font-family: Courier New,Courier,monospace">Evas_Map</span> object to create map data using the <span style="font-family: Courier New,Courier,monospace">evas_map_new()</span> function:</p>\r
+\r
+<pre class="prettyprint">\r
+Evas_Map *map;\r
+map = evas_map_new(4);</pre>\r
+\r
+<p>The map of transformation points is used later with an Evas object.</p>\r
+</li>\r
+\r
+<li>\r
+<p>Set the coordinates for each point using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set()</span> function. You can apply several effects to the Evas object by setting each point of the map to the right coordinates.</p>\r
+\r
+<pre class="prettyprint">// Set map coordinates\r
+evas_map_point_coord_set(map, 0, 15, 100, 0);\r
+evas_map_point_coord_set(map, 1, 265, 100, 0);\r
+evas_map_point_coord_set(map, 2, 265, 300, 0);\r
+evas_map_point_coord_set(map, 3, 15, 400, 0);</pre>\r
+</li>\r
+\r
+<li>\r
+<p>Set UV data using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_image_uv_set()</span> function, which informs the map of the correct pixels in the image it is mapping:</p>\r
+\r
+<pre class="prettyprint">// Set image UV\r
+evas_map_point_image_uv_set(map, 0, 0, 0);\r
+evas_map_point_image_uv_set(map, 1, 500, 50);\r
+evas_map_point_image_uv_set(map, 2, 500, 400);\r
+evas_map_point_image_uv_set(map, 3, 0, 200);</pre>\r
+</li>\r
+</ol>\r
+\r
+\r
+<h2 id="apply" name="apply">Applying the Map to the Evas Object</h2>\r
+\r
+<p>To set the map on a given object, use the <span style="font-family: Courier New,Courier,monospace">evas_object_map_set()</span> function for the object. A map contains 4 points, each having canvas x, y coordinates with an optional z point value for perspective correction, if available. Each point also has U an V coordinates.</p>\r
+\r
+<pre class="prettyprint">// Apply map to button evas object\r
+\r
+evas_object_map_set(ad-&gt;button, map);</pre>\r
+\r
+<h2 id="clear" name="clear">Clearing Map Data and Enabling Map Features</h2>\r
+\r
+<p>Free the map data and all memory associated with it when you no longer need it:</p>\r
+\r
+<pre class="prettyprint">// Free map resources\r
+\r
+evas_map_free(map);</pre>\r
+\r
+<p>You can enable or disable the map features for the object. When enabled, the object geometry is saved, and the new geometry changes its position and size to reflect the set map geometry.</p>\r
+\r
+<pre class="prettyprint">// Enable map features\r
+\r
+evas_object_map_enable_set(ad-&gt;button, EINA_TRUE);</pre>\r
+\r
+\r
+\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>\r
diff --git a/org.tizen.ui.guides/html/native/efl/evas_objects_n.htm b/org.tizen.ui.guides/html/native/efl/evas_objects_n.htm
new file mode 100755 (executable)
index 0000000..d0a4a7d
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/evas_objects_n.htm
@@ -0,0 +1,824 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Evas Objects</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+            <li><a href="#renderable">Primitive Renderable Objects</a></li>\r
+            <li><a href="#smart">Primitive Smart Objects</a></li>\r
+                       <li><a href="#container_objects">Primitive Container Objects</a></li>\r
+                       <li><a href="#image">Image Objects</a></li>\r
+                       <li><a href="#block">Textblock Objects</a></li>\r
+                       <li><a href="#clip">Clipping Objects</a></li>\r
+                       <li><a href="#map">Mapping Objects</a></li>\r
+        </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>\r
+               </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Evas Objects</h1>\r
+  \r
+<p>An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of UI components, is an Evas object.</p>\r
+\r
+<h2 id="renderable" name="renderable">Primitive Renderable Objects</h2>\r
+<p>Primitive objects are the base upon which to build a complex interface: rectangles, lines, polygons, <a href="#image">images</a>, <a href="#block">textblocks</a>, and texts.</p>\r
+<h3>Rectangle</h3>\r
+<p>There is only one function to deal with rectangle objects. However, the rectangle is manipulated using the generic evas object functions.</p>\r
+<p>The evas rectangle serves a number of key functions when working on Evas programs.</p>\r
+<ul>\r
+<li>background</li>\r
+<li>debugging</li>\r
+<li>clipper</li>\r
+</ul>\r
+\r
+<h4>Background</h4>\r
+<p>A common requirement of Evas programs is to have a solid color background, which can be accomplished with the following code.</p>\r
+<pre class="prettyprint">Evas_Object *bg = evas_object_rectangle_add(evas_canvas);\r
+\r
+// Here we set the rectangles red, green, blue and opacity levels\r
+evas_object_color_set(bg, 255, 255, 255, 255); // opaque white background\r
+evas_object_resize(bg, WIDTH, HEIGHT); // covers full canvas\r
+evas_object_show(bg);\r
+</pre>\r
+\r
+<h4>Debugging</h4>\r
+<p>When debugging visual issues with evas programs, the rectangle is a useful tool. The rectangle&#39;s simplicity means that it is easier to pinpoint issues with it than with more complex objects. A common technique to use when writing an evas program and not getting the desired visual result is to replace an object for a solid color rectangle and seeing how it interacts with the other elements. This often allows us to notice clipping, parenting or positioning issues. Once the issues are identified and corrected, the rectangle can be replaced for the original object, and in all likelihood any remaining issues are specific to that object&#39;s type.</p>\r
+\r
+<h4>Clipping</h4>\r
+<p><a href="#clip">Clipping</a> serves two main functions:</p>\r
+<ul>\r
+<li>limiting visibility</li>\r
+<li>applying a layer of color to an object</li>\r
+</ul>\r
+\r
+\r
+<h3>Text</h3>\r
+<p>An Evas text object shows a basic single-line single-style text.</p>\r
+<pre class="prettyprint">Evas_Object *text = evas_object_text_add(evas_canvas);\r
+evas_object_text_text_set(text, &quot;some text&quot;);\r
+evas_object_color_set(text, 127, 0, 0, 127);\r
+evas_object_show(text);\r
+</pre>\r
+\r
+<p>To set the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_set(text, some_text)</span>. You can set the current text with <span style="font-family: Courier New,Courier,monospace">evas_object_text_text_get(text)</span>.</p>\r
+<p>To set the font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">text</span>: The text object</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font</span>: The font name you want to use</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">size</span>: The font size you want to use. To query the current font, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_font_set(text, font, size)</span>.</li>\r
+</ul>\r
+<p>To set the text style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_set(text, style)</span>. The following styles are supported:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_PLAIN</span>: Plain, standard text</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW</span>: Text with shadow underneath</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE</span>: Text with an outline</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_OUTLINE</span>: Text with a soft outline</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_GLOW</span>: Text with a glow effect</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SHADOW</span>: Text with both outline and shadow effects</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SHADOW</span>: Text with (far) shadow underneath</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_OUTLINE_SOFT_SHADOW</span>: Text with outline and soft shadow effects combined</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SOFT_SHADOW</span>: Text with (soft) shadow underneath</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_FAR_SOFT_SHADOW</span>: Text with (far soft) shadow underneath</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_RIGHT</span>: Shadow growing to bottom right</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM</span>: Shadow growing to the bottom</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_BOTTOM_LEFT</span>: Shadow growing to bottom left</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_LEFT</span>: Shadow growing to the left</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_LEFT</span>: Shadow growing to top left</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP</span>: Shadow growing to the top</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_TOP_RIGHT</span>: Shadow growing to top right</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_TEXT_STYLE_SHADOW_DIRECTION_RIGHT</span>: Shadow growing to the right. To query the current style, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_style_get(text)</span>.</li>\r
+</ul>\r
+<p>If the text does not fit, make an ellipsis on it by using <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_set(text, ellipsis)</span>. The (float) value specifies, which part of the text is shown.</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">0.0</span>: The beginning is shown and the end trimmed.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">1.0</span>: The beginning is trimmed and the end shown.</li>\r
+<li>Any value in between means that both ends of the text have ellipsis and the set part is shown.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">-1.0</span>: Ellipsis is disabled. To query the current ellipsis value, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_ellipsis_get(text)</span>.</li>\r
+</ul>\r
+<p>When the text style is set to glow, set the glow color using <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. The effect is placed at a short distance from the text but not touching it. For glows set right at the text, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_set(text, r, g, b, a)</span>. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow_color_get(text, r, g, b, a)</span>, respectively <span style="font-family: Courier New,Courier,monospace">evas_object_text_glow2_color_get(text, r, g, b, a)</span>.</p>\r
+<p>If your text style is set to display a shadow, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_shadow_color_get(text, r, g, b, a)</span></p>\r
+<p>If your text style is set to display an outline, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_set(text, r, g, b, a)</span>, where <span style="font-family: Courier New,Courier,monospace">r</span>, <span style="font-family: Courier New,Courier,monospace">g</span>, <span style="font-family: Courier New,Courier,monospace">b</span>, and <span style="font-family: Courier New,Courier,monospace">a</span> are respectively the red, green, blue, and alpha values. To query the current color, use <span style="font-family: Courier New,Courier,monospace">evas_object_text_outline_color_get(text, r, g, b, a)</span></p>\r
+\r
+\r
+<h2 id="smart" name="smart">Primitive Smart Objects</h2>\r
+<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object&#39;s user. They could be, for example, a group of objects that move together, or implementations of whole complex UI components, providing some intelligence and extension to simple Evas objects.</p>\r
+\r
+<h2 id="container_objects" name="container_objects">Primitive Container Objects</h2>\r
+<p>A container is a Smart object that holds children Evas objects in a specific fashion.</p>\r
+<h3>Table</h3>\r
+<p>A table is a smart object that packs children using a tabular layout.</p>\r
+<pre class="prettyprint">table = evas_object_table_add(evas);\r
+evas_object_table_homogeneous_set(table, EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE);\r
+evas_object_table_padding_set(table, 0, 0);\r
+evas_object_resize(table, WIDTH, HEIGHT);\r
+evas_object_show(table);\r
+\r
+rect = evas_object_rectangle_add(evas);\r
+evas_object_color_set(rect, 255, 0, 0, 255);\r
+evas_object_size_hint_min_set(rect, 100, 50);\r
+evas_object_show(rect);\r
+evas_object_table_pack(table, rect, 1, 1, 2, 1);\r
+\r
+rect = evas_object_rectangle_add(d.evas);\r
+evas_object_color_set(rect, 0, 255, 0, 255);\r
+evas_object_size_hint_min_set(rect, 50, 100);\r
+evas_object_show(rect);\r
+evas_object_table_pack(table, rect, 1, 2, 1, 2);\r
+\r
+rect = evas_object_rectangle_add(d.evas);\r
+evas_object_color_set(rect, 0, 0, 255, 255);\r
+evas_object_size_hint_min_set(rect, 50, 50);\r
+evas_object_show(rect);\r
+evas_object_table_pack(table, rect, 2, 2, 1, 1);\r
+\r
+rect = evas_object_rectangle_add(d.evas);\r
+evas_object_color_set(rect, 255, 255, 0, 255);\r
+evas_object_size_hint_min_set(rect, 50, 50);\r
+evas_object_show(rect);\r
+evas_object_table_pack(table, rect, 2, 3, 1, 1);\r
+</pre>\r
+\r
+<p>In this example, we add a non-homogeneous table to the canvas with its padding set to 0.</p>\r
+<p>We then add four different colored rectangles with different properties.</p>\r
+<ul>\r
+<li>the first one, at the first column and first line, spans two columns and one line</li>\r
+<li>the second one, at the first column and second line, spans one columns and two lines</li>\r
+<li>the third one, at the second column and second line, fits in one cell</li>\r
+<li>the fourth one, at the second column and third line, also fits in one cell</li>\r
+</ul>\r
+<p>To create a table, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_add(evas)</span>.</p>\r
+<p>To set the table layout (the cells), use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_set(table, homogeneous)</span>. The following values can be homogeneous:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_NONE</span>: This default value has columns and rows calculated based on hints of individual cells. This is flexible, but much heavier on computations.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_TABLE</span>: The table size is divided equally among children, filling the whole table area. If the children have a minimum size that is larger than this (including padding), then the table overflows and is aligned respecting the alignment hint, possibly overlapping sibling cells.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_OBJECT_TABLE_HOMOGENEOUS_ITEM</span>: The greatest minimum cell size is used: if no element is set to expand, the contents of the table are the minimum size and the bounding box of all the children is aligned relatively to the table object using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get()</span>. If the table area is too small to hold this minimum bounding box, then the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To set the current mode, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_homogeneous_get(table)</span>.</li>\r
+</ul>\r
+<p>The table&#39;s content alignment is set using <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_set(table, horizontal, vertical)</span>, where <span style="font-family: Courier New,Courier,monospace">horizontal</span> and <span style="font-family: Courier New,Courier,monospace">vertical</span> are floating values. To see them, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_align_get(table, horizontal, vertical)</span>.</p>\r
+<p>To set the padding, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_set(table, horizontal, vertical)</span>. To see the current value, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_padding_get(table, horizontal, vertical)</span>.</p>\r
+<p>_To see the current column and row count, use <span style="font-family: Courier New,Courier,monospace">evas_object_table_col_row_size_get(table, columns, rows)</span>.</p>\r
+\r
+<h3>Grid</h3>\r
+<p>A grid is a smart object that packs its children as with a regular grid layout.</p>\r
+<p>Grids are added to the canvas with <span style="font-family: Courier New,Courier,monospace">evas_object_grid_add(evas)</span>.</p>\r
+<p>To change a grid&#39;s virtual resolution, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_set(grid, width, height)</span>, to see it, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_size_get(grid, width, height)</span>.</p>\r
+<p>To add an object, use <span style="font-family: Courier New,Courier,monospace">evas_object_grid_pack(grid, child, x, y, w, h)</span>, where</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">x</span> is the virtual X coordinate of the child</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">y</span> is the virtual y coordinate of the child</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">w</span> is the virtual width of the child</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">h</span> is the virtual height of the child</li>\r
+</ul>\r
+<h3>Box</h3>\r
+<p>A box is a simple container that sets its children objects linearly.</p>\r
+<p>To add a box to your canvas, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_add(evas)</span>.</p>\r
+<p>To add a child to the box, use</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_append(box, child)</span>: The child is appended.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_after(box, child, reference)</span>: The child is added after <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_before(box, child, reference)</span>: The child is added before <span style="font-family: Courier New,Courier,monospace">reference</span>.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_insert_at(box, child, pos)</span>: The child is added at the specified position.</li>\r
+</ul>\r
+<p>To set the alignment, use <span style="font-family: Courier New,Courier,monospace">evas_object_box_align_set(box, horizontal, vertical)</span>.</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">horizontal</span>: 0.0 means aligned to the left, 1.0 means to the right;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">vertical</span>: 0.0 means aligned to the top, 1.0 means to the bottom.</li>\r
+</ul>\r
+<p>Evas has predefined box layouts available:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_horizontal()</span>;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_vertical()</span>;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_horizontal()</span>;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_vertical()</span>;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_horizontal()</span>;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_homogeneous_max_size_vertical()</span>;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_horizontal()</span>;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_flow_vertical()</span>;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_box_layout_stack()</span>.</li>\r
+</ul>\r
+\r
+<h2 id="image" name="image">Image Objects</h2> \r
+\r
+\r
+<p>Using Evas, you can create and manipulate image objects. Evas supports image loaders of various formats as plug-in modules.</p>\r
+<p>The image formats that Evas supports include <span style="font-family: Courier New,Courier,monospace">bmp</span>, <span style="font-family: Courier New,Courier,monospace">edj</span>, <span style="font-family: Courier New,Courier,monospace">gif</span>, <span style="font-family: Courier New,Courier,monospace">ico</span>, <span style="font-family: Courier New,Courier,monospace">jpeg</span>, <span style="font-family: Courier New,Courier,monospace">pmaps</span>, <span style="font-family: Courier New,Courier,monospace">png</span>, <span style="font-family: Courier New,Courier,monospace">psd</span>, <span style="font-family: Courier New,Courier,monospace">svg</span>, <span style="font-family: Courier New,Courier,monospace">tga</span>, <span style="font-family: Courier New,Courier,monospace">tiff</span>, <span style="font-family: Courier New,Courier,monospace">wbmp</span>, <span style="font-family: Courier New,Courier,monospace">webp</span>, and <span style="font-family: Courier New,Courier,monospace">xpm</span>.</p>\r
+\r
+       <p class="figure">Figure: Evas image loader</p> \r
+       <p align="center"><img alt="Evas image loader" src="../../images/evas_image_loader.png" /></p>  \r
+\r
+<h3>Evas Object Image Functions</h3>\r
+\r
+<p>Evas has over 70 image object functions. The following functions are discussed in this document:</p>\r
+<pre class="prettyprint">\r
+Evas_Object *evas_object_image_add(Evas *e);\r
+void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);\r
+void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);\r
+void evas_object_image_filled_set(Evas *e, Eina_Bool setting);\r
+Evas_Object *evas_object_image_filled_add(Evas *e);\r
+void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);\r
+void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);\r
+void evas_object_image_data_set(Evas_Object *obj, void *data);\r
+void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);\r
+void evas_object_image_size_set(Evas_Object *obj, int w, int h);\r
+void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);\r
+Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);\r
+</pre>\r
+\r
+<h3>Creating an Image Object and Setting the Image Data Source</h3>\r
+<p>A common use case of an image object is to set a file as the image data source. The process has 3 steps and each one involves the following API calls:</p>\r
+       <ul>\r
+        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function creates an image object and returns the pointer.\r
+        <pre class="prettyprint">Evas_Object *evas_object_image_add(Evas *e);</pre>\r
+        </li>\r
+        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_file_set()</span> function sets a source file on the image object. The object fetches the image pixel data from the source file.\r
+        <pre class="prettyprint">void evas_object_image_file_set(Evas_Object *obj, const char *file, const char *key);</pre>\r
+        </li>\r
+        <li>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> sets how to fill the image object's area with the given pixel data.\r
+        <pre class="prettyprint">void evas_object_image_fill_set(Evas_Object *obj, int x, int y, int w, int h);</pre>\r
+        </li>\r
+       </ul>\r
+\r
+<p>In the following code example, the <span style="font-family: Courier New,Courier,monospace">main()</span> function creates an image object and displays it on a window. The image object size is 300x300 and the source image resolution is 100x127. The image is scaled into 300 by 300 to fill the image object area using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>\r
+<pre class="prettyprint">\r
+#include &lt;Elementary.h&gt;\r
+\r
+int main(int argc, char **argv)\r
+{\r
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create a window object\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 400);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(win);\r
+\r
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window\r
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create an image object\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set a source file to fetch pixel data\r
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set the size and position of the image on the image object area\r
+&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(img, 0, 0, 300, 300);\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(img);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_run();\r
+\r
+&nbsp;&nbsp;&nbsp;elm_shutdown();\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}\r
+</pre>\r
+       <p class="figure">Figure: Image object display</p> \r
+       <p align="center"><img alt="Image object display" src="../../images/evas_object_display.png" /></p>  \r
+  \r
+<h3 id="manage" name="manage">Managing Images</h3>\r
+\r
+<p>To manage image objects in Evas:</p>\r
+\r
+<h4>Limiting Visibility</h4>\r
+<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_extension_can_load_get()</span> function.</p>\r
+\r
+<p>Create the image object. Set a source file on it, so that the object knows where to fetch the image data.</p>\r
+<p>Define how to fill the image object area with the given pixel data. You can use a sub-region of the original image, or have it tiled repeatedly on the image object.</p>\r
+\r
+<pre class="prettyprint">\r
+img = evas_object_image_add(canvas);\r
+evas_object_image_file_set(img, &quot;path/to/img&quot;, NULL);\r
+evas_object_image_fill_set(img, 0, 0, w, h);\r
+</pre>\r
+\r
+\r
+<p>If the entire source image is to be displayed on the image object, stretched to the destination size, use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function helper that you can use instead of the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_fill_set()</span> function:</p>\r
+\r
+<pre class="prettyprint">\r
+evas_object_image_filled_set(img, EINA_TRUE);\r
+</pre>\r
+\r
+<h4>Scaling Images</h4>\r
+<p>Resizing image objects scales the source images to the image object size, if the source images are set to fill the object area using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_set()</span> function.</p>\r
+<p>Control the aspect ratio of an image for different sizes with functions to load images scaled up or down in memory.</p>\r
+\r
+<p>Evas has a scale cache, which caches scaled versions of images used often. You can also have Evas rescale the images smoothly, however, that is computationally expensive.</p>\r
+\r
+<p>Users can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.</p>\r
+\r
+       <p class="figure">Figure: Image scaling</p> \r
+       <p align="center"><img alt="Image scaling" src="../../images/evas_image_scaling.png" /></p>  \r
+\r
+       <table>\r
+       <tbody>\r
+       <tr>\r
+        <td><p align="center"><img alt="" src="../../images/evas_scaling1.png" /></p></td>\r
+        <td><p align="center"><img alt="" src="../../images/evas_scaling2.png" /></p></td>\r
+        <td><p align="center"><img alt="" src="../../images/evas_scaling3.png" /></p></td>\r
+       </tr>\r
+       <tr>\r
+     <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 50, 0, 300, 300)</span></td>\r
+        <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 200, 200)</span></td>\r
+        <td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 0, 0, 100, 127)</span></td>\r
+       </tr>\r
+       </tbody>\r
+       </table>  \r
+       \r
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> function scales the image to fit the object area. Resizing the image object automatically triggers an internal call to the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function.</p>\r
+<pre class="prettyprint">\r
+void evas_object_image_filled_set(Evas *e, Eina_Bool setting);</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_add()</span> function creates a new image object that automatically scales its bound image to the object area. This is a helper function around the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_image_filled_set()</span> functions.</p>\r
+\r
+<pre class="prettyprint">Evas_Object *evas_object_image_filled_add(Evas *e);</pre>\r
+\r
+<p>Scaled images&#39; quality can differ according to scaling algorithms. Smooth scaling improves the image quality in the process of size reducing or enlarging. Evas runs its own smooth scaling algorithm by default and provides an API so users can disable the function.</p>\r
+\r
+<pre class="prettyprint">\r
+void evas_object_image_smooth_scale_set(Evas_Object *obj, Eina_Bool smoothscale);</pre>\r
+\r
+<p>The algorithm is implemented using the SIMD (Single Instruction Multiple Data) vectorization in case of software rendering. It is optimized on Intel and ARM CPU through MMX and NEON command respectively.</p>\r
+\r
+<p>There is a trade-off between image smoothness and rendering performance. The load gets bigger as the image gets bigger. Users can avoid such scaling overload by using the same size of the image object and the source image.</p>\r
+\r
+<p>In the following code, 2 image objects are created to show the effects of smooth scaling. The one with smooth scaling applied appears softer on the screen.</p>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;Elementary.h&gt;\r
+\r
+int main(int argc, char **argv)\r
+{\r
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create a window object\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(win);\r
+\r
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window\r
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create an image object\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);\r
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);\r
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 0, 0);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(img);\r
+\r
+&nbsp;&nbsp;&nbsp;// Create another image object\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img2 = evas_object_image_filled_add(e);\r
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img2, &quot;./logo.png&quot;, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Disable smooth scaling\r
+&nbsp;&nbsp;&nbsp;evas_object_image_smooth_scale_set(img2, EINA_FALSE);\r
+&nbsp;&nbsp;&nbsp;evas_object_move(img2, 200, 0);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(img2, 200, 200);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(img2);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_run();\r
+\r
+&nbsp;&nbsp;&nbsp;elm_shutdown();\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}\r
+</pre>\r
+\r
+  <table>\r
+  <caption>Figure: Smooth scaling effects</caption>\r
+  <tbody>\r
+  <tr>\r
+   <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_enabled.png" /></p></td>\r
+   <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_disabled.png" /></p></td>\r
+  </tr>\r
+  <tr>\r
+   <td style="text-align:center;">Smooth scaling enabled</td>\r
+   <td style="text-align:center;">Smooth scaling disabled</td>\r
+  </tr>\r
+  </tbody></table>\r
+\r
+\r
+<p>Evas caches scaled image data and reuses them. Users can save the memory by loading the image in the scaled size to the memory at the beginning. This option is available only for <span style="font-family: Courier New,Courier,monospace">jpeg</span> format at the moment.</p>\r
+<pre class="prettyprint">\r
+void evas_object_image_load_size_set(Evas_Object *obj, int w, int h);</pre>\r
+\r
+<p>An example code is as follows.</p>\r
+<pre class="prettyprint">\r
+#include &lt;Elementary.h&gt;\r
+ \r
+int main(int argc, char **argv)\r
+{\r
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);\r
+ \r
+&nbsp;&nbsp;&nbsp;// Create a window object\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(win);\r
+ \r
+&nbsp;&nbsp;&nbsp;// Return Evas handle from window\r
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);\r
+ \r
+&nbsp;&nbsp;&nbsp;// Create an image object\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e); \r
+ \r
+&nbsp;&nbsp;&nbsp;// Load the image scaled into the object size \r
+&nbsp;&nbsp;&nbsp;// before evas_object_image_file_set() is called\r
+&nbsp;&nbsp;&nbsp;evas_object_image_load_size_set(img, 300, 300);\r
+ \r
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL); \r
+&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(img); \r
+ \r
+&nbsp;&nbsp;&nbsp;elm_run();\r
+ \r
+&nbsp;&nbsp;&nbsp;elm_shutdown();\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}\r
+</pre>\r
+\r
+<h3>Setting Raw Data to Image Object</h3>\r
+<p>Users can set raw data to the image object manually using  the <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_set()</span> function instead of setting an image file as the data source. The image data should be in raw data form. In case of an 200x200 sized image with alpha channel enabled (32 bits per pixel), the size of the image data is 14000 (=200*200*4) bytes.</p>\r
+\r
+<pre class="prettyprint">void evas_object_image_data_set(Evas_Object *obj, void *data);</pre>\r
+\r
+<p>Image objects fetch metadata such as width or height from the header of the image files. Since the raw data does not have the metadata, users must set the size of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_size_set()</span> function.</p>\r
+\r
+<pre class="prettyprint">void evas_object_image_size_set(Evas_Object *obj, int w, int h);</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_get()</span> function returns the data pointer of an image object and requires a parameter to determine whether the data is modified or not. If users pass <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for <span style="font-family: Courier New,Courier,monospace">for_writing</span>, Evas updates the image pixels in the next rendering cycle.</p>\r
+\r
+<pre class="prettyprint">void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_data_update_add()</span> helps to mark the updated area for rendering efficiency.</p>\r
+\r
+<pre class="prettyprint">void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);</pre>\r
+\r
+<p>The following example code and figure show how to specify the area to update.</p>\r
+<pre class="prettyprint">\r
+evas_object_image_data_update_add(image, 100, 100, 50, 50);\r
+evas_object_image_data_update_add(image, 180, 100, 50, 50);\r
+evas_object_image_data_update_add(image, 85, 200, 160, 80);\r
+</pre>\r
+ \r
+  <p class="figure">Figure: Partial image update</p> \r
+  <p align="center"><img alt="Partial image update" src="../../images/evas_partial_update.png" /></p>  \r
+\r
+<p>The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_save()</span> function.</p>\r
+\r
+<pre class="prettyprint">Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);</pre>\r
+\r
+<pre class="prettyprint">\r
+#include &lt;Elementary.h&gt;\r
+\r
+void image_blur(Evas_Object *img)\r
+{\r
+&nbsp;&nbsp;&nbsp;unsigned char *img_src = evas_object_image_data_get(img, EINA_TRUE);\r
+\r
+&nbsp;&nbsp;&nbsp;int w, h;\r
+&nbsp;&nbsp;&nbsp;evas_object_image_size_get(img, &amp;w, &amp;h);\r
+&nbsp;&nbsp;&nbsp;int blur_size = 4;\r
+&nbsp;&nbsp;&nbsp;int x, y, xx, yy;\r
+&nbsp;&nbsp;&nbsp;\r
+&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; h; y++)\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; w; x++)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int avg_color[3] = {0, 0, 0};\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int blur_pixel_cnt = 0;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int idx = (yy * w * 4) + (xx * 4);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[0] += img_src[idx + 0];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] += img_src[idx + 1];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] += img_src[idx + 2];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++blur_pixel_cnt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[0] /= blur_pixel_cnt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] /= blur_pixel_cnt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] /= blur_pixel_cnt;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int idx = (yy * w * 4) + (xx * 4);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 0] = avg_color[0];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 1] = avg_color[1];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 2] = avg_color[2];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;evas_object_image_data_update_add(img, 0, 0, w, h);\r
+}\r
+\r
+int main(int argc, char **argv)\r
+{\r
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);\r
+\r
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 200, 200);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(win);\r
+\r
+&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);\r
+\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);\r
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);\r
+&nbsp;&nbsp;&nbsp;evas_object_show(img);\r
+\r
+&nbsp;&nbsp;&nbsp;image_blur(img);\r
+\r
+&nbsp;&nbsp;&nbsp;evas_object_image_save(img, &quot;logo2.png&quot;, NULL, &quot;quality=100 compress=8&quot;);\r
+\r
+&nbsp;&nbsp;&nbsp;elm_run();\r
+\r
+&nbsp;&nbsp;&nbsp;elm_shutdown();\r
+\r
+&nbsp;&nbsp;&nbsp;return 0;\r
+}\r
+</pre>\r
+\r
+  <table>\r
+  <caption>Figure: Blur effect</caption>\r
+  <tbody>\r
+  <tr>\r
+   <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur1.png" /></p></td>\r
+   <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur2.png" /></p></td>\r
+  </tr>\r
+  <tr>\r
+   <td style="text-align:center;">Before</td>\r
+   <td style="text-align:center;">After</td>\r
+  </tr>\r
+  </tbody></table>  \r
+\r
+<h4>Giving Performance Hints</h4>\r
+<p>In image viewer applications, you can display an image in full size. The navigation to the adjacent images on your album must be fluid and fast. Thus, while displaying a given image, the program can load the next and previous image in the background to be able to immediately repaint the screen with a new image.</p>\r
+\r
+<p>Evas addresses this issue with image preloading:</p>\r
+\r
+<pre class="prettyprint">\r
+prev = evas_object_image_filled_add(canvas);\r
+evas_object_image_file_set(prev, &quot;/path/to/prev&quot;, NULL);\r
+evas_object_image_preload(prev, EINA_TRUE);\r
+next = evas_object_image_filled_add(canvas);\r
+evas_object_image_file_set(next, &quot;/path/to/next&quot;, NULL);\r
+evas_object_image_preload(next, EINA_TRUE);\r
+</pre>\r
+\r
+<p>If you are loading an image which is too big, set its loading size smaller.</p>\r
+\r
+<p>Load a scaled down version of the image in the memory if that is the size you are displaying (this can speed up the loading considerably):</p>\r
+<pre class="prettyprint">evas_object_image_load_scale_down_set(img, zoom);</pre>\r
+<p>If you know you are showing a sub-set of the image pixels, you can avoid loading the complementary data:</p>\r
+<pre class="prettyprint">evas_object_image_load_region_set(img, x, y, w, h);\r
+</pre>\r
+\r
+<h4>Specifying Borders</h4>\r
+<p>With Evas, you can specify image margins to be treated as borders. The margins then maintain their aspects when the image is resized. This makes setting frames around other UI objects easier. The following figure illustrates the border behavior, when the image is resized.</p>\r
+\r
+<p class="figure">Figure: Borders in Evas</p> \r
+<p align="center"><img alt="Borders in Evas" src="../../images/9patch.png" /></p> \r
+ \r
+\r
+ <h2 id="block" name="block">Textblock Objects</h2>\r
+\r
+<p>Unlike basic text objects, a textblock handles complex text, managing multiple styles and multiline text based on HTML-like tags. However, these extra features are heavier on memory and processing cost.</p>\r
+<p>The textblock objects is an object that shows big chunks of text. Textblock supports many features, including text formatting, automatic and manual text alignment, embedding items (icons, for example). Textblock has three important parts: the text paragraphs, the format nodes and the cursors.</p>\r
+<p>To set markup to format text, use for example <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50&gt;Big!&lt;/font_size&gt;</span>. Set more than one style directive in one tag with <span style="font-family: Courier New,Courier,monospace">&lt;font_size=50 color=#F00&gt;Big and Red!&lt;/font_size&gt;</span>. Please note that we used <span style="font-family: Courier New,Courier,monospace">&lt;/font_size&gt;</span> although the format also included color. This is because the first format determines the matching closing tag&#39;s name. You can use anonymous tags, such as <span style="font-family: Courier New,Courier,monospace">&lt;font_size=30&gt;Big&lt;/&gt;</span>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>\r
+<p>Textblock supports the following formats:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">font</span>: Font description in fontconfig such as format, for example &quot;Sans:style=Italic:lang=hi&quot;. or &quot;Serif:style=Bold&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font_weight</span>: Overrides the weight defined in &quot;font&quot;. For example, &quot;font_weight=Bold&quot; is the same as &quot;font=:style=Bold&quot;. The supported weights are &quot;normal&quot;, &quot;thin&quot;, &quot;ultralight&quot;, &quot;light&quot;, &quot;book&quot;, &quot;medium&quot;, &quot;semibold&quot;, &quot;bold&quot;, &quot;ultrabold&quot;, &quot;black&quot;, and &quot;extrablack&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font_style</span>: Overrides the style defined in &quot;font&quot;. For example, &quot;font_style=Italic&quot; is the same as &quot;font=:style=Italic&quot;. The supported styles are &quot;normal&quot;, &quot;oblique&quot;, and &quot;italic&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font_width</span>: Overrides the width defined in &quot;font&quot;. For example, &quot;font_width=Condensed&quot; is the same as &quot;font=:style=Condensed&quot;. The supported widths are &quot;normal&quot;, &quot;ultracondensed&quot;, &quot;extracondensed&quot;, &quot;condensed&quot;, &quot;semicondensed&quot;, &quot;semiexpanded&quot;, &quot;expanded&quot;, &quot;extraexpanded&quot;, and &quot;ultraexpanded&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">lang</span>: Overrides the language defined in &quot;font&quot;. For example, &quot;lang=he&quot; is the same as &quot;font=:lang=he&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font_fallbacks</span>: A comma delimited list of fonts to try if finding the main font fails.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font_size</span>: The font size in points.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font_source</span>: The source of the font, for example an eet file.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">color</span>: The text color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">underline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">underline2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">outline_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">shadow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">glow_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">glow2_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">strikethrough_color</span>: The color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">align</span>: The text alignment in one of the following formats: &quot;auto&quot; (according to text direction), &quot;left&quot;, &quot;right&quot;, &quot;center&quot; or &quot;middle&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">valign</span>: The vertical text alignment in one of the following formats: &quot;top&quot;, &quot;bottom&quot;, &quot;middle&quot;, &quot;center&quot;, &quot;baseline&quot; or &quot;base&quot;, which take a value between 0.0 and 1.0 or a value between 0% to 100%.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The text wrap in one of the following formats: &quot;word&quot;, &quot;char&quot;, &quot;mixed&quot;, or &quot;none&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">left_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">right_margin</span>: Either &quot;reset&quot; or a pixel value indicating the margin.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">underline</span>: The style of underlining in one of the following formats: &quot;on&quot;, &quot;off&quot;, &quot;single&quot;, or &quot;double&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">strikethrough</span>: The style of text that is either &quot;on&quot; or &quot;off&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">backing_color</span>: The background color in one of the following formats: &quot;#RRGGBB&quot;, &quot;#RRGGBBAA&quot;, &quot;#RGB&quot;, or &quot;#RGBA&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">backing</span>: The background color enabled or disabled: &quot;on&quot; or &quot;off&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">style</span>: The style of the text in one of the following formats: &quot;off&quot;, &quot;none&quot;, &quot;plain&quot;, &quot;shadow&quot;, &quot;outline&quot;, &quot;soft_outline&quot;, &quot;outline_shadow&quot;, &quot;outline_soft_shadow&quot;, &quot;glow&quot;, &quot;far_shadow&quot;, &quot;soft_shadow&quot; or &quot;far_soft_shadow&quot;. The direction is selected by adding &quot;bottom_right&quot;, &quot;bottom&quot;, &quot;bottom_left&quot;, &quot;left&quot;, &quot;top_left&quot;, &quot;top&quot;, &quot;top_right&quot; or &quot;right&quot;. For example, &quot;style=shadow,bottom_right&quot;.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">tabstops</span>: The pixel value for tab width.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">linesize</span>: To force a line size in pixels.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">linerelsize</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">linegap</span>: To force a line gap in pixels.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">linerelgap</span>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">item</span>: Creates an empty space that is filled by an upper layer. Use &quot;size&quot;, &quot;abssize&quot;, or &quot;relsize&quot; to define the item&quot;s size, and an optional vsize = full/ascent to define the item&#39;s position in the line.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">linefill</span>: Either a float value or percentage indicating how much to fill the line.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">ellipsis</span>: A value between 0.0 and 1.0 to indicate the type of ellipsis, or -1.0 to indicate that an ellipsis is not wanted.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">password</span>: Either &quot;on&quot; or &quot;off&quot;, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>\r
+</ul>\r
+\r
+\r
+<h2 id="clip" name="clip">Clipping Objects</h2>\r
+\r
+<h3>Limiting Visibility </h3>\r
+<p>An Evas object can be clipped – in other words, its visible area is restricted with the clipper object.</p>\r
+\r
+<p>It is often necessary to show only parts of an object, and while it may be possible to create an object that corresponds only to the part that must be shown (which is not always possible), it is usually easier to use a clipper. A clipper is a rectangle that defines what is visible and what is not. The way to do this is to create a solid white rectangle (by default, so you need not use <span style="font-family: Courier New,Courier,monospace">evas_object_color_set()</span>) and give it a position and size of what is wanted visible. The following code exemplifies showing the center half of my_evas_object: </p>\r
+<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas_canvas);\r
+evas_object_move(clipper, my_evas_object_x / 4, my_evas_object_y / 4);\r
+evas_object_resize(clipper, my_evas_object_width / 2, my_evas_object_height / 2);\r
+evas_object_clip_set(my_evas_object, clipper);\r
+evas_object_show(clipper);\r
+</pre>\r
+\r
+<h3>Layer of Color </h3>\r
+<p>A solid white clipper does not produce a change in the color of the clipped object, only hides what is outside the clipper&#39;s area.  Changing the color of an object is accomplished by using a colored clipper. Clippers with color function by multiplying the colors of the clipped object. The following code shows how to remove all the red from an object.</p>\r
+<pre class="prettyprint">Evas_Object *clipper = evas_object_rectangle_add(evas);\r
+evas_object_move(clipper, my_evas_object_x, my_evas_object_y);\r
+evas_object_resize(clipper, my_evas_object_width, my_evas_object_height);\r
+evas_object_color_set(clipper, 0, 255, 255, 255);\r
+evas_object_clip_set(obj, clipper);\r
+evas_object_show(clipper);\r
+</pre> \r
+\r
+\r
+<h2 id="map" name="map">Mapping Objects</h2>\r
+\r
+<p>Evas allows different transformations to be applied to all kinds of objects. These are applied by means of UV mapping. With UV mapping, one map points in the source object to a 3D space positioning at target. This allows rotation, perspective, scale, and many other effects depending on the map that is used.</p>\r
+\r
+<h3>Creating a Map </h3>\r
+<p>A map consists of a set of points, but currently only four are supported. Each of these points contains a set of canvas coordinates x and y that are used to alter the geometry of the mapped object, and a z coordinate that indicates the depth of that point. This last coordinate does not normally affect the map, but is used by several of the utility functions to calculate the right position of the point given other parameters.</p>\r
+<p>The coordinates for each point are set with <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set(map, index, x, y, z)</span>. In the example below, there is a rectangle whose coordinates are (100, 100) and (300, 300).</p>\r
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);\r
+evas_object_move(object, 100, 100);\r
+evas_object_resize(object, 200, 200);\r
+Evas_Map map = evas_map_new(4);\r
+evas_map_point_coord_set(map, 0, 100, 100, 0);\r
+evas_map_point_coord_set(map, 1, 300, 100, 0);\r
+evas_map_point_coord_set(map, 2, 300, 300, 0);\r
+evas_map_point_coord_set(map, 3, 100, 300, 0);\r
+</pre>\r
+<p>There are functions to ease the process.</p>\r
+<p>Use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_geometry(map, x, y, w, h, z)</span>, where the map coordinates are set to the given rectangle, and <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points.</p>\r
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);\r
+evas_object_move(object, 100, 100);\r
+evas_object_resize(object, 200, 200);\r
+Evas_Map map = evas_map_new(4);\r
+evas_map_util_points_populate_from_geometry(map, 100, 100, 200, 200, 0);\r
+</pre>\r
+\r
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object(map, object)</span>. </p>\r
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);\r
+evas_object_move(object, 100, 100);\r
+evas_object_resize(object, 200, 200);\r
+Evas_Map map = evas_map_new(4);\r
+evas_map_util_points_populate_from_object(map, object);\r
+</pre>\r
+\r
+<p>You can also use <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_populate_from_object_full(map, object, z)</span>, where <span style="font-family: Courier New,Courier,monospace">z</span> is the coordinate in the Z axis, which is the same for all points. </p>\r
+<pre class="prettyprint">Evas_Object *object = evas_object_rectangle_add(evas);\r
+evas_object_move(object, 100, 100);\r
+evas_object_resize(object, 200, 200);\r
+Evas_Map map = evas_map_new(4);\r
+evas_map_util_points_populate_from_object_full(map, object, 0);\r
+</pre>\r
+\r
+<h3>Manual Point Setting</h3>\r
+<p>Several effects are applied to an object by setting each point of the map to the right coordinates. For example, a simulated perspective is achieved as follows.</p>\r
+<pre class="prettyprint">evas_map_point_coord_set(map, 0, 300, 100, 0);\r
+evas_map_point_coord_set(map, 1, 450, 120, 0);\r
+evas_map_point_coord_set(map, 2, 450, 260, 0);\r
+evas_map_point_coord_set(map, 3, 300, 300, 0);\r
+</pre>\r
+\r
+<p>The Z coordinate is not used when setting points by hand; thus its value is not important.</p>\r
+\r
+<h3>Applying a Map </h3>\r
+<p>Regardless of the specific way you create a map, to apply it to a specific object, use</p>\r
+<pre class="prettyprint">evas_object_map_set(object, map);\r
+evas_object_map_enable_set(object, EINA_TRUE);\r
+</pre>\r
+\r
+<h3>Basic Utility Functions </h3>\r
+<p>Evas provides utility functions for common transformations:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_rotate(map, angle, cx, cy)</span>: This performs a rotation of the <span style="font-family: Courier New,Courier,monospace">angle</span> degrees around the center point with the coordinates (cx, cy).</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom(map, zoomx, zoomy, cx, cy)</span>: This performs a <span style="font-family: Courier New,Courier,monospace">zoomx</span> and <span style="font-family: Courier New,Courier,monospace">zoomy</span> zoom in the X and Y directions respectively, with the center point with the coordinates (cx, cy).</li>\r
+</ul>\r
+\r
+<p>For example, the following code rotates an object around its center.</p>\r
+<pre class="prettyprint">int x, y, w, h;\r
+evas_object_geometry_get(object, &amp;x, &amp;y, &amp;w, &amp;h);\r
+Evas_Map *map = evas_map_new(4);\r
+evas_map_util_points_populate_from_object(map, object);\r
+evas_map_util_rotate(map, 45, x + (w / 2), y + (h / 2));\r
+evas_object_map_set(object, map);\r
+evas_object_map_enable_set(object, EINA_TRUE);\r
+evas_map_free(m);\r
+</pre>\r
+\r
+<p>The following code rotates an object around the center of the window.</p>\r
+<pre class="prettyprint">int w, h;\r
+evas_output_size_get(evas, &amp;w, &amp;h);\r
+Evas_Map *map = evas_map_new(4);\r
+evas_map_util_points_populate_from_object(map, object);\r
+evas_map_util_rotate(map, 45, w / 2, h / 2);\r
+evas_object_map_set(object, map);\r
+evas_object_map_enable_set(object, EINA_TRUE);\r
+evas_map_free(m);\r
+</pre>\r
+\r
+<h3>3D Utility Functions </h3>\r
+<p>Evas provides utility functions for 3D transformations.</p>\r
+<p>To make a 3D rotation, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate(map, anglex, angley, anglez, cx, cy, cz)</span>. With this code, you can set the Z coordinate of the rotation center, and the angles to rotate through around all axes.</p>\r
+<p>Rotating in the 3D space does not look natural. A more natural look becomes by adding perspective to the transformation, which is done with <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_perspective(map, px, py, z0, focal)</span> on the map after its position has been set.</p>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">px</span> and <span style="font-family: Courier New,Courier,monospace">py</span> specify the &quot;infinite distance&quot; point in the 3D conversion, where all lines converge to.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">z0</span> specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates: any points on this Z value do not have their X and Y coordinates modified in the transform, while those further away (Z value higher) shrink into the distance, and those less than this value expand.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">focal</span> determines the &quot;focal length&quot; of the camera: this is the distance in reality between the camera lens plane (the rendering results are undefined at or closer than this) and the <span style="font-family: Courier New,Courier,monospace">z0</span> value; this function allows for some &quot;depth&quot; control.</li>\r
+</ul>\r
+<h3>Color and Lighting </h3>\r
+<p>Each point in a map can be set to a color, which is multiplied with the object&#39;s own color and linearly interpolated in between adjacent points. To do this, use <span style="font-family: Courier New,Courier,monospace">evas_map_point_color_set(map, index, r, g, b, a)</span> for each point of the map, or <span style="font-family: Courier New,Courier,monospace">evas_map_util_points_color_set(map, r, g, b, a)</span> to set every point into the same color.</p>\r
+<p>To add lighting for the objects, which is useful with 3D transforms, use <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_lighting(map, lightx, lighty, lightz, lightr, lightg, lightb, ambientr, ambientg, ambientb)</span>:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">lightx</span>, <span style="font-family: Courier New,Courier,monospace">lighty</span> and <span style="font-family: Courier New,Courier,monospace">lightz</span> are the local light source coordinates;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">lightr</span>, <span style="font-family: Courier New,Courier,monospace">lightg</span> and <span style="font-family: Courier New,Courier,monospace">lightb</span> are the local light source colors;</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">ambientr</span>, <span style="font-family: Courier New,Courier,monospace">ambientg</span> and <span style="font-family: Courier New,Courier,monospace">ambientb</span> are the ambient light colors. Evas sets the color of each point based on the distance to the light source, the angle with which the object is facing the light and the ambient light. The orientation of each point is important. If the map is defined counter-clockwise, the object faces away from the user and becomes obscured, since no light does not reflect from it.</li>\r
+</ul>\r
+\r
+<table class="note">\r
+    <tbody>\r
+        <tr>\r
+            <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/evas_optimization_n.htm b/org.tizen.ui.guides/html/native/efl/evas_optimization_n.htm
new file mode 100755 (executable)
index 0000000..622b72f
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/evas_optimization_n.htm
@@ -0,0 +1,227 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Optimizing Evas</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#rectangle">Using a Rectangle Object instead of a Solid Color Image</a></li>
+                       <li><a href="#invisible">Making an Object Invisible instead of Setting Alpha as 0</a></li>
+                       <li><a href="#image">Using evas_object_image for Maximum Optimization</a></li>
+                       <li><a href="#parent">Setting the Parent to Avoid the Elementary Tree Reconstruction</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+                </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Optimizing Evas</h1>
+
+<p>To optimize Evas:</p>
+
+<ul>
+<li><a href="#rectangle">Using a Rectangle Object instead of a Solid Color Image</a></li>
+<li><a href="#invisible">Making an Object Invisible instead of Setting Alpha as 0</a></li>
+<li><a href="#image">Using evas_object_image for Maximum Optimization</a></li>
+<li><a href="#parent">Setting the Parent to Avoid the Elementary Tree Reconstruction</a></li>
+</ul>
+
+<h2 id="rectangle" name="rectangle">Using a Rectangle Object instead of a Solid Color Image</h2>
+<p>When you need a solid color object, it is better (more efficient) to use a rectangle object than the image.</p>
+<table>
+   <colgroup> 
+    <col width="100%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+image = elm_image_add(win);
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+elm_image_file_set(image, buf, NULL);
+evas_object_size_hint_weight_set(image, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, image);
+evas_object_show(image);
+</pre>  </td> 
+       </tr>
+    <tr> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+rect = evas_object_rectangle_add(evas_object_evas_get(win));
+evas_object_color_set(rect, 255, 255, 255, 255);
+evas_object_size_hint_weight_set(rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, rect);
+evas_object_show(rect);
+</pre></td> 
+       </tr>
+</tbody>
+</table>
+
+
+<h2 id="invisible" name="invisible">Making an Object Invisible instead of Setting Alpha as 0</h2>
+
+<p>To make an object invisible, it is more efficient to use <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> instead of changing the alpha value to 0.</p>
+<table>
+   <colgroup> 
+    <col width="50%" /> 
+       <col width="50%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+        <th>After</th>
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+static void
+_invisible_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;evas_object_color_set(obj, 0, 0, 0, 0);   
+}
+</pre>  </td>
+<td rowspan="1" colspan="1">
+<pre class="prettyprint">
+static void
+_invisible_cb(void *data, Evas_Object *obj, void *ev)
+{
+&nbsp;&nbsp;&nbsp;evas_object_hide(obj);   
+}
+</pre> </td>  
+       </tr>
+</tbody>
+</table>
+
+<h2 id="image" name="image">Using evas_object_image for Maximum Optimization</h2>
+
+<p>If you need maximum optimization, use <span style="font-family: Courier New,Courier,monospace">evas_object_image</span> instead of <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">elm_icon</span>.</p>
+<table>
+   <colgroup> 
+    <col width="100%" /> 
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+img = elm_image_add((parent);
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+elm_image_file_set(img, buf, NULL);
+evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(img);
+</pre> </td> 
+       </tr>
+    <tr> 
+     <th>After</th> 
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1"> 
+<pre class="prettyprint">
+img = evas_object_image_add(evas_object_evas_get(parent));
+snprintf(buf, sizeof(buf), &quot;%s/images/white_bg.png&quot;, elm_app_data_dir_get()); 
+evas_object_image_file_set(img, buf, NULL);
+evas_object_image_filled_set(img, EINA_TRUE);
+evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(img);
+</pre> </td> 
+       </tr>
+</tbody>
+</table>
+
+
+<h2 id="parent" name="parent">Setting the Parent to Avoid the Elementary Tree Reconstruction</h2>
+<p>Before creating an object, make sure that the relationship between parent and child is set correctly to avoid having to reconstruct later. </p>
+<table>
+   <colgroup> 
+    <col width="50%" />
+    <col width="50%" />        
+   </colgroup> 
+<tbody>
+    <tr> 
+     <th>Before</th> 
+         <th>After</th>
+    </tr> 
+        <tr> 
+     <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+win = elm_win_add();
+
+scroller = elm_scroller_add(win);
+
+box = elm_box_add(win);
+
+button = elm_button_add(win);
+</pre> </td> 
+<td rowspan="1" colspan="1">
+<pre class="prettyprint">
+win = elm_win_add();
+
+scroller = elm_scroller_add(win);
+
+box = elm_box_add(scroller);
+
+button = elm_button_add(box);
+</pre>  </td> 
+       </tr>
+</tbody>
+</table>
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+  <script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script> 
+  
+ </body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/evas_rendering_n.htm b/org.tizen.ui.guides/html/native/efl/evas_rendering_n.htm
new file mode 100755 (executable)
index 0000000..e265bf6
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/evas_rendering_n.htm
@@ -0,0 +1,288 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Evas Rendering Concept and Method</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+                       <li><a href="#engine">Evas Engines Concept</a></li>\r
+                       <li><a href="#ui_rendering">UI Rendering Mode</a></li>\r
+        </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>         \r
+               </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Evas Rendering Concept and Method</h1>\r
+ \r
+<p>Evas is a canvas display library. It is markedly different from most display and windowing systems as the canvas is structural and is also a state engine, whereas most display and windowing systems are immediate mode display targets. Evas handles the logic between a structural display via its state engine, and controls the target windowing system in order to produce rendered results of the current canvas&#39; state on the display.</p>\r
+<p>Immediate mode display systems retain very little or no state. A program executes a series of commands, as in the following pseudo code.</p>\r
+<pre class="prettyprint">\r
+draw line from position (0, 0) to position (100, 200);\r
+\r
+draw rectangle from position (10, 30) to position (50, 500);\r
+\r
+bitmap_handle = create_bitmap();\r
+scale bitmap_handle to size 100 x 100;\r
+draw image bitmap_handle at position (10, 30);\r
+</pre>\r
+<p>The series of commands is executed by the windowing system and the results are typically displayed on the screen. Once the commands are executed, the display system does not know how to reproduce this image again, and has to be instructed by the application on how to redraw sections of the screen if needed. Each successive command is executed as instructed by the application and either emulated by software or sent to the graphics hardware on the device to be performed.</p>\r
+<p>The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of UI component sets, custom display components and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.</p>\r
+<p>For example, if in the scene below, the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the &quot;expose event&quot;). Then the programmer calculates manually the updates and repaints it again.</p>\r
+<pre class="prettyprint">\r
+Redraw from position (0, 0) to position (50, 50):\r
+\r
+// What was in area (0, 0, 50, 50)?\r
+\r
+// 1. intersection part of line (0, 0) to (100, 200)?\r
+&nbsp;&nbsp;&nbsp;draw line from position (0, 0) to position (25, 50);\r
+\r
+// 2. intersection part of rectangle (10, 30) to (50, 500)?\r
+&nbsp;&nbsp;&nbsp;draw rectangle from position (10, 30) to position (50, 50)\r
+\r
+// 3. intersection part of image at (10, 30), size 100 x 100?\r
+&nbsp;&nbsp;&nbsp;bitmap_subimage = subregion from position (0, 0) to position (40, 20)\r
+&nbsp;&nbsp;&nbsp;draw image bitmap_subimage at position (10, 30);\r
+</pre>\r
+\r
+<p>If all elements in the above scene are opaque, the system is doing useless paints: part of the line is behind the rectangle, and part of the rectangle is behind the image. These useless paints tend to be very costly.</p>\r
+<p>Evas is a structural system in which the programmer creates and manages display objects and their properties, and as a result of this higher level state management, the canvas is able to redraw the set of objects when needed to represent the current state of the canvas.</p>\r
+<p>For example, see the following pseudo code.</p>\r
+<pre class="prettyprint">\r
+line_handle = create_line();\r
+set line_handle from position (0, 0) to position (100, 200);\r
+show line_handle;\r
+\r
+rectangle_handle = create_rectangle();\r
+move rectangle_handle to position (10, 30);\r
+resize rectangle_handle to size 40 x 470;\r
+show rectangle_handle;\r
+\r
+bitmap_handle = create_bitmap();\r
+scale bitmap_handle to size 100 x 100;\r
+move bitmap_handle to position (10, 30);\r
+show bitmap_handle;\r
+\r
+render scene;\r
+</pre>\r
+\r
+<p>This looks longer, but when the display needs to be refreshed or updated, the programmer only moves, resizes, shows, hides etc. the objects that need to change. The programmer thinks at the object logic level, and the canvas software does the rest of the work, figuring out what changed in the canvas since it was last drawn, how to most efficiently redraw the canvas and its contents to reflect the current state, and doing the actual drawing of the canvas.</p>\r
+<p>This allows the programmer think in a more natural way when dealing with a display, and saves time and effort of working out how to load and display images, to render given the current display system etc. Since Evas is portable across different display systems, this gives the programmer the ability to port and display the code on different display systems with little work.</p>\r
+<p>Evas is a display system somewhere between a UI component set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.</p>\r
+\r
+<p>For more information on the UI rendering modes (immediate and retained), see <a href="#ui_rendering">UI Rendering Mode</a>.</p>\r
+\r
+\r
+<h2 id="engine" name="engine">Evas Engines Concept </h2>\r
+<p>Evas delegates most of the actual rendering work to its engines. Engines are the backends that Evas uses to render (primitive) objects on a canvas. The canvas can be the screen, or a buffer in the memory.</p>\r
+<p>Evas can work with and provides multiple engines, such as (this list is non-exhaustive):</p>\r
+<ul>\r
+<li>buffer: all the rendering takes place in a buffer</li>\r
+<li>fb: the rendering takes place in the system&#39;s framebuffer</li>\r
+<li>software_x11: this is the most used, using X11</li>\r
+<li>gl_x11: this also renders to an X11 window, except that it uses OpenGL</li>\r
+</ul>\r
+<p>These implement the rendering of all the basic objects by themselves, because they often can be accelerated by the hardware or backend software libraries to provide fast rendering.</p>\r
+<p>If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version. </p> \r
+\r
+<h2 id="ui_rendering" name="ui_rendering">UI Rendering Mode</h2> \r
+\r
+<p>Evas removes the need to know about the characteristics of your display system or what graphics calls are used to draw them and how. It deals on an object level where all you do is create and manipulate objects in a canvas, set their properties, and the rest is done for you. This rendering method is called the retained mode, whereas the immediate mode is an alternative rendering method.</p>\r
+\r
+<h3 id="immediate" name="immediate">Immediate Mode</h3>\r
+\r
+<p>The immediate mode is the most commonly used in graphics toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the portion of the client area that is invalidated.</p>\r
+\r
+<p class="figure">Figure: Immediate mode</p> \r
+<p align="center"><img alt="Immediate mode" src="../../images/immediate_mode.png" /></p> \r
+\r
+<p>The application commands any drawing issues as it needs, and the display system draws some GUIs. After the drawing is done, it appears in the destination. This mode allows you to have a exact control over the render cycles. However, if the draw commands are misused, unnecessary drawing can be performed or drawing never happen at all.</p> \r
+<p>The following example explains the common usage of the immediate mode:</p> \r
+\r
+<pre class="prettyprint">\r
+void update()\r
+{\r
+&nbsp;&nbsp;&nbsp;Image *img = load_image(NEW_IMG);\r
+\r
+&nbsp;&nbsp;&nbsp;// Switch button image to new one\r
+&nbsp;&nbsp;&nbsp;update_button_image(img);\r
+\r
+&nbsp;&nbsp;&nbsp;// Issue the invalidate area (button area) to be redrawn on the screen\r
+&nbsp;&nbsp;&nbsp;invalidate_area(button_x, button_y, button_w, button_h);\r
+\r
+&nbsp;&nbsp;&nbsp;// Move rectangle from (200, 200) to (300, 300)\r
+&nbsp;&nbsp;&nbsp;int rect_prev_x = rect_x;\r
+&nbsp;&nbsp;&nbsp;int rect_prev_y = rect_y;\r
+&nbsp;&nbsp;&nbsp;rectangle_x = 300;\r
+&nbsp;&nbsp;&nbsp;rectangle_y = 300;\r
+&nbsp;&nbsp;&nbsp;set_rect_position(rect_x, rect_y);\r
+   \r
+&nbsp;&nbsp;&nbsp;// Issue the invalidate area (changed area) to be redrawn on the screen\r
+&nbsp;&nbsp;&nbsp;int diff_x = rect_x – rect_prev_x;\r
+&nbsp;&nbsp;&nbsp;int diff_y = rect_y – rect_prev_y;\r
+&nbsp;&nbsp;&nbsp;invalidate_area(rect_prev_x, rect_prev_y, (rect_w + diff_x), (rect_h + diff_y));\r
+\r
+\r
+&nbsp;&nbsp;&nbsp;// After setting the invalidate area, request rendering to update the screen\r
+&nbsp;&nbsp;&nbsp;render();\r
+\r
+&nbsp;&nbsp;&nbsp;// Now you can see how the button image and rectangle position are changed\r
+}\r
+</pre>\r
+\r
+<h3 id="retained" name="retained">Retained Mode</h3>\r
+\r
+<p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated.</p>\r
+\r
+<p class="figure">Figure: Retained mode</p> \r
+<p align="center"><img alt="Retained mode" src="../../images/retained_mode.png" /></p> \r
+\r
+<p>Since Evas works with the retained mode, there is no need to command any drawings. The following example shows how to write a GUI code with Evas for your application:</p>\r
+\r
+<pre class="prettyprint">\r
+void create_image()\r
+{\r
+&nbsp;&nbsp;&nbsp;// Initialize an image object to be displayed on the screen\r
+&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set image resource\r
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, IMG, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set image position \r
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 100, 100);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set image size\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set image visibility (show or hide)\r
+&nbsp;&nbsp;&nbsp;evas_object_show(img);\r
+}\r
+\r
+void create_rectangle()\r
+{\r
+&nbsp;&nbsp;&nbsp;// Initialize an rectangle object to be displayed on the screen\r
+&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_rectangle_add(e);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set rectangle color\r
+&nbsp;&nbsp;&nbsp;evas_object_color_set(rect, 255, 0, 0, 255);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set rectangle position\r
+&nbsp;&nbsp;&nbsp;evas_object_move(rect, 200, 200);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set rectangle size\r
+&nbsp;&nbsp;&nbsp;evas_object_resize(rect, 200, 200);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set rectangle visibility (show or hide)\r
+&nbsp;&nbsp;&nbsp;evas_object_show(rect);\r
+}\r
+</pre>\r
+\r
+<p>A few main loops later you can replace the image with another one and move the rectangle. You only need to set a new image file to the image object and move the rectangle object. Evas computes the invalidate area and redraws the image and rectangle behind the application when it&#39;s on rendering time.</p>\r
+\r
+<pre class="prettyprint">\r
+void update()\r
+{\r
+&nbsp;&nbsp;&nbsp;// Set new image resource\r
+&nbsp;&nbsp;&nbsp;elm_image_file_set(img, NEW_IMG, NULL);\r
+\r
+&nbsp;&nbsp;&nbsp;// Set new rectangle position\r
+&nbsp;&nbsp;&nbsp;evas_object_move(rect, 300, 300);\r
+}\r
+</pre>\r
+\r
+<h3 id="evas_rendering" name="evas_rendering">Evas Rendering</h3>\r
+\r
+<p>Tizen Native applications work on the ecore main loop, and the loop goes on a few steps for every frame. Evas redraws some changes in the objects when the main loop goes to the idle enterer step. If there are no changes, Evas rendering is skipped. Otherwise, Evas calculates any changed portions of all display objects and redraws them.</p>\r
+\r
+<p class="figure">Figure: Evas rendering in the main loop</p> \r
+<p align="center"><img alt="Evas rendering in the main loop" src="../../images/rendering1.png" /></p> \r
+\r
+<p>To minimize the rendering, Evas tracks the states of all display objects, such as position, size, visibility, and color. Even if some of these states are changed but the object is hidden by other obscured objects, it is not redrawn. In other words, Evas draws only the necessary changes in the screen.</p>\r
+\r
+<p>The following figures illustrate how Evas redraws the changed area:</p>\r
+\r
+<ul><li><p>In the first example, there is a blue-color background object (a sky-blue color rectangle) and a partially hidden cloud image object. Above them, there are a red and green rectangle, and the &quot;Hello out there&quot; text is printed on the green rectangle.</p>\r
+\r
+<p class="figure">Figure: Evas redrawing example 1</p> \r
+<p align="center"><img alt="Evas redrawing example 1" src="../../images/redrawing01.png" /></p> </li>\r
+\r
+<li><p>In the second example, some of the objects have moved (the cloud image is moved to right and the green rectangle is moved downwards).</p>\r
+\r
+<p class="figure">Figure: Evas redrawing example 2</p> \r
+<p align="center"><img alt="Evas redrawing example 2" src="../../images/redrawing02.png" /></p> </li>\r
+\r
+<li><p>As a result, the third example illustrates some regions that require updates.</p>\r
+\r
+<p class="figure">Figure: Evas redrawing example 3</p> \r
+<p align="center"><img alt="Evas redrawing example 3" src="../../images/redrawing03.png" /></p> </li>\r
+\r
+<li><p>Evas decides which portions are invalid and to be redrawn. The fourth example shows the cleaned portion of the screen, which is the redrawn area.</p>\r
+<p>Evas redraws the content only in the redrawn portions.</p> \r
+<p class="figure">Figure: Evas redrawing example 4</p> \r
+<p align="center"><img alt="Evas redrawing example 4" src="../../images/redrawing04.png" /></p></li> \r
+\r
+<li><p>Finally, the fifth example shows how the screen is updated and the result is visible.</p> \r
+\r
+<p class="figure">Figure: Evas redrawing example 5</p> \r
+<p align="center"><img alt="Evas redrawing example 5" src="../../images/redrawing05.png" /></p>\r
+\r
+<p>If Evas worked in an immediate mode style, the application would need to calculate the changed areas themselves, adding extra work. With Evas, you can let Evas figure out the updates and you can yourself concentrate on the application and UI core and logic.</p></li></ul>\r
+\r
+<table class="note">\r
+    <tbody>\r
+        <tr>\r
+            <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div> \r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/event_handling_n.htm b/org.tizen.ui.guides/html/native/efl/event_handling_n.htm
new file mode 100755 (executable)
index 0000000..03dc326
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/event_handling_n.htm
@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Event Handling: Managing the Event Flow</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#events_types">EFL Event Types</a></li>
+                       <li><a href="#basic_events_flow">Basic Event Flow</a></li>
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>                     
+                       
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Event Handling: Managing the Event Flow</h1> 
+  
+<p>The EFLs rely on events and callbacks. In case of an event, (for example, a key press, mouse click or a battery running low), the mainloop calls the callback functions that are associated to that specific event. After the callbacks have finished, the mainloop takes over and waits for new events, upon which to trigger new callbacks.</p>
+<p>It is important to do light work in the callbacks and to return to the mainloop relatively quickly. If there is heavy work to do, it is best to use an asynchronous mechanism like Ecore_con for network I/O or threads for CPU-intensive tasks. Failure to return quickly to the mainloop blocks the application&#39;s UI and it appears frozen.</p>
+
+<h2 id="events_types" name="events_types">EFL Event Types</h2>
+<p>There are several event types in the EFLs, and their use depends on the level of the event. The event types from lower- to higher-level are:</p>
+<ul>
+<li><a href="event_types_n.htm#evas_smart_object">Evas smart events</a> are the most often used and take place on collections of evas objects (which are most typically handled). They are called &quot;smart&quot; because they have internal logic and can define their own events while other event types are fixed.</li>
+<li><a href="event_types_n.htm#ecore">Ecore events</a> are the lowest-level events and come directly from the system. Except for application-wide shortcuts, it is not advisable to use them.</li>
+<li><a href="event_types_n.htm#evas_object">Evas object events</a> concern the objects that are on the canvas.</li>
+<li><a href="event_types_n.htm#evas">Evas events</a> are events on the graphical canvas as a whole. They are fairly low-level and mostly useful when drawing directly on the canvas.</li>
+</ul>
+
+  <p class="figure">Figure: Event types in the EFLs: Inner boxes are more specific than outer ones</p> 
+  <p align="center"><img alt="Event types in the EFLs: Inner boxes are more specific than outer ones" src="../../images/events_scope.png" /></p>
+  
+       
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">There are also <a href="event_types_n.htm#edje">Edje signals</a>, which come from program sections in themes; they can be used from high-level Elementary APIs or a low-level Edje API.</td> 
+        </tr>
+   </tbody> 
+  </table> 
+
+<h2 id="basic_events_flow" name="basic_events_flow">Basic Event Flow</h2>
+<p>A realistic scenario involving various types of events is an application showing a button, which triggers the download of a file to be processed. There are progress bars for the operations.</p>
+<p>Create the window, create a box, set it vertical and add a button and two progress bars. At first, only the button is fully visible.</p>
+<p>When the user clicks on the button, an evas smart object event named &quot;clicked&quot; is emitted. The callback then starts the download in Ecore_con, displays the first progress bar and adds a callback to monitor the download progress. When the download progress changes, the callback updates the progress bar.</p>
+<p>After the download is finished, the second progress bar is displayed and the file processing is offloaded to another thread through Ecore_thread. The processing function regularly updates the progress bar (wrapped in ecore_main_loop_thread_safe_call_async() because GUI operations are not thread-safe).</p>
+<p>Events enable operations taking more than a few milliseconds&#39; time to be executed outside of the mainloop, therefore not blocking UI redraws.</p>
+<p>Below is an illustration for the event flow that follows a click on the screen.</p>
+
+  <p class="figure">Figure: Event flow for a user click</p> 
+  <p align="center"><img alt="Event flow for a user click" src="../../images/events_flow.png" /></p>
+  
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/event_types_n.htm b/org.tizen.ui.guides/html/native/efl/event_types_n.htm
new file mode 100755 (executable)
index 0000000..31182d5
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/event_types_n.htm
@@ -0,0 +1,461 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Event Types</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               
+                               <li><a href="#ecore">Ecore Events</a></li>
+                               <li><a href="#edje">Edje Events</a></li>
+                               <li><a href="#evas">Evas Events</a></li>
+                               <li><a href="#evas_object">Evas Object Events</a></li>
+                               <li><a href="#evas_smart_object">Evas Smart Object Events</a></li>
+               </ul>
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>                     
+                       
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                 
+                               
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Event Types</h1> 
+  
+<p>EFL provides various event types that you can use to monitor and react to user interactions and system events in the UI.</p>  
+  
+<h2 id="ecore" name="ecore">Ecore Events</h2>
+
+<p>Ecore events are used for low-level handling of events, such as key presses, network connections, and communication with sub-processes. In case of shortcuts, the low-level handling of key presses is particularly useful: instead of adding a signal handler to a specific graphical element, you can add one globally to guarantee that no matter which UI component is currently receiving events, the shortcut is caught correctly.</p>
+<p>Ecore events can also be used to implement new graphical back-ends. However, they are low-level and not useful for most applications.</p>
+
+<p>In addition to using predefined Ecore events, you can create your own events with the <span style="font-family: Courier New,Courier,monospace">ecore_event_type_new()</span> function. The function generates a new unique identifier, which you can use as the event type parameter when managing your events and event handlers.</p>
+
+
+<h3 id="ecore_events_useful_for_shortcuts">Shortcut Events</h3>
+
+<p>The following Ecore events are available for shortcuts. The event callbacks receive additional data through a <span style="font-family: Courier New,Courier,monospace">void *</span> object, whose type depends on the received event.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_UP</span> events: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Key Ecore_Event_Key;
+
+struct _Ecore_Event_Key 
+{
+&nbsp;&nbsp;&nbsp;const char *keyname;
+&nbsp;&nbsp;&nbsp;const char *key;
+&nbsp;&nbsp;&nbsp;const char *string;
+&nbsp;&nbsp;&nbsp;const char *compose;
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+};
+</pre>
+
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_BUTTON_DOWN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_BUTTON_UP</span> events: 
+<pre class="prettyprint">typedef struct _Ecore_Event_Mouse_Button Ecore_Event_Mouse_Button;
+struct _Ecore_Event_Mouse_Button 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+&nbsp;&nbsp;&nbsp;unsigned int buttons;
+&nbsp;&nbsp;&nbsp;unsigned int double_click;
+&nbsp;&nbsp;&nbsp;unsigned int triple_click;
+&nbsp;&nbsp;&nbsp;int same_screen;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 0 if normal mouse, 1+ for other mouse-devices (such as multi-touch - other fingers)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Radius of press point - radius_x and radius_y if it is an ellipse (radius is the average of the 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Angle relative to perpendicular (0.0 == perpendicular), in degrees
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as x, y, root.x, root.y, but with sub-pixel precision, if available
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
+&nbsp;&nbsp;&nbsp;} multi;
+};
+</pre>
+ 
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_MOVE</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_WHEEL</span> events: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Mouse_Wheel Ecore_Event_Mouse_Wheel;
+struct _Ecore_Event_Mouse_Wheel 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+&nbsp;&nbsp;&nbsp;int direction;
+&nbsp;&nbsp;&nbsp;int z;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+};
+</pre>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_IN</span> and <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_MOUSE_OUT</span> events: 
+<pre class="prettyprint">
+typedef struct _Ecore_Event_Mouse_Move Ecore_Event_Mouse_Move;
+struct _Ecore_Event_Mouse_Move 
+{
+&nbsp;&nbsp;&nbsp;Ecore_Window window;
+&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
+&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
+
+&nbsp;&nbsp;&nbsp;unsigned int timestamp;
+&nbsp;&nbsp;&nbsp;unsigned int modifiers;
+
+&nbsp;&nbsp;&nbsp;int same_screen;
+
+&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
+&nbsp;&nbsp;&nbsp;} root;
+
+&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 0 if normal mouse, 1+ for other mouse-devices (such as multi-touch - other fingers)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Radius of press point - radius_x and radius_y if it is an ellipse (radius is the average of the 2)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius, radius_x, radius_y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Angle relative to perpendicular (0.0 == perpendicular), in degrees
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Same as x, y, root.x, root.y, but with sub-pixel precision, if available
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x, y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
+&nbsp;&nbsp;&nbsp;} multi;
+};
+</pre>
+
+</li>
+</ul>
+<h3 id="ecore_event_handler" name="ecore_event_handler">Managing Ecore Event Handlers</h3>
+
+<p>To manage Ecore event handlers:</p>
+
+<ol><li>To add an Ecore event handler, register a callback for a specific event with the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function. 
+<p>The function takes as parameters the event type (such as <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> for key presses), callback function, and additional data delivered to the callback. The function returns an event handler pointer, which you can use to remove the handler later.</p></li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Handler_Cb()</span> callback function.
+<p>The function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add()</span> function parameters, the event type, and the event object (<span style="font-family: Courier New,Courier,monospace">Ecore_Event_Key</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Button</span>, <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Wheel</span>, or <span style="font-family: Courier New,Courier,monospace">Ecore_Event_Mouse_Move</span>). The function returns <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_PASS_ON</span> to allow other callbacks for that event be called, or <span style="font-family: Courier New,Courier,monospace">ECORE_CALLBACK_DONE</span> to not call them.</p></li>
+
+<li>When no longer needed, remove the event handler with the <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_del()</span> function, using the event handler pointer as a parameter.</li></ol>
+
+<p>The following example shows how you can set a global variable to <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> when the <strong>Ctrl</strong> key is pressed:</p>
+<pre class="prettyprint">
+Eina_Bool ctrl_pressed = EINA_FALSE;
+
+static Eina_Bool
+_key_down_cb(void *data __UNUSED__, int type __UNUSED__, void *ev)
+{
+&nbsp;&nbsp;&nbsp;// The callback is used with the ECORE_EVENT_KEY_DOWN signal: the
+&nbsp;&nbsp;&nbsp;// parameter &quot;void *ev&quot; is therefore of the actual type Ecore_Event_Key
+&nbsp;&nbsp;&nbsp;// The following renders its fields accessible
+&nbsp;&nbsp;&nbsp;Ecore_Event_Key *event = ev;
+
+&nbsp;&nbsp;&nbsp;// Test whether the key that is pressed is Ctrl.
+&nbsp;&nbsp;&nbsp;if (!strcmp(&quot;Control_L&quot;, event-&gt;key))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If it is, store that piece of information
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl_pressed = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Let the event continue to other callbacks which have not been called yet
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
+}
+
+ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
+</pre>
+
+<h3 id="ecore_event_manage" name="ecore_event_manage">Sending Ecore Events to the Main Loop</h3>
+
+<p>You can send Ecore events to the main loop yourself to handle actions of various origins through the same codepath. This is a thread-safe operation.</p>
+<p>To send an event, use the <span style="font-family: Courier New,Courier,monospace">ecore_event_add()</span> function. The function takes as parameters the event type (such as <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> for key presses), additional data delivered to the callback, the <span style="font-family: Courier New,Courier,monospace">Ecore_End_Cb()</span> function used to free the additional data after it is deliver to the callback function, and the pointer to additional data delivered to the free function. The free function and the pointer to its additional data are optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need them.</p>
+
+  
+<h2 id="edje" name="edje">Edje Events</h2>
+
+<p>Edje <a href="theme_n.htm">themes</a> have small <span style="font-family: Courier New,Courier,monospace">program</span> sections, which are triggered upon the reception of a signal that can execute actions, such as changing the state of an Edje part and running another program.</p>
+
+<h3 id="events_guide_edje_without_layout" name="events_guide_edje_without_layout">Managing a Single Signal Emitter</h3>
+<p>The following example shoes a <span style="font-family: Courier New,Courier,monospace">program</span> section. The program is called &quot;change_color&quot;, it is triggered on mouse clicks on the current part, and it emits a &quot;got.a.click&quot; signal where the source is set to &quot;color_changer&quot;.</p>
+<pre class="prettyprint">program 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
+&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;got.a.click&quot; &quot;color_changer&quot;;
+}
+</pre>
+
+<p>To catch the emitted signal from the C side, use either the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function. Their only difference is that the previous one operates on an Edje object and the latter one on an Elementary object. Unless you do not use the Elementary library at all, use the Elementary variant.</p>
+
+<p>Both the functions take as parameters the object emitting the signal, the signal name (&quot;*&quot; acts as a wildcard), the signal source, the <span style="font-family: Courier New,Courier,monospace">Edje_Signal_Cb()</span> callback function called when the signal name and source match, and additional data delivered to the callback. For the signal name and source, &quot;*&quot; acts as a wildcard. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
+
+<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function parameters, the object emitting the signal, the signal name, and the signal source.</p>
+
+
+<h3 id="events_guide_edje_with_layout" name="events_guide_edje_with_layout">Managing Multiple Signal Emitters in Layouts</h3>
+
+<p>Most of the time, Edje and Elementary are used together. In particular, you can define a group in Edje and use it as a <a href="containers_n.htm#layout">layout</a> (containing several parts) in Elementary. The layouts enable you to perform theming and object placement in Edje while benefiting from the higher-level functions of Elementary.</p>
+<p>Since the layout contains multiple parts, you cannot use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> functions, as they require a single emitter object. The solution is to use the dedicated <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> function.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> function works similarly as the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> functions. The only difference is the type of the object in the first parameter. For <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span>, it is a pointer to an Evas_Object, which is obtained through the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function. For more information, see <a href="containers_n.htm#layout">Layout</a>.</p>
+
+  
+<h2 id="evas" name="evas">Evas Events</h2>
+
+<p>Evas events happen on a canvas as a whole. These events are too low-level for writing applications and are mostly used when writing the graphical toolkit itself.</p>
+
+<p>The following Evas event types are available:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_PRE</span>: Rendering on the canvas is about to be updated.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_FLUSH_POST</span>: Rendering on the canvas is updated.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_IN</span>: Canvas receives focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_FOCUS_OUT</span>: Canvas loses focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_IN</span>: Any object on the canvas receives focus.
+<p>Instead of this event type, use the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span> type with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CANVAS_OBJECT_FOCUS_OUT</span>: Any object on the canvas loses focus. 
+<p>Instead of this event type, use the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span> type with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_PRE</span>: Rendering on the canvas starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RENDER_POST</span>: Rendering on the canvas finishes.</li>
+</ul>
+
+<p>To register the event handler, use the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function. The function takes as parameters the Evas canvas on which the event happens (to obtain the canvas, use the Evas_Object through the <span style="font-family: Courier New,Courier,monospace">evas_object_evas_get()</span> function), the event type, the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Cb</span> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
+
+<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function parameters, the canvas where the event happened, and the event info data, which depends on the object type and the event at play.</p>
+
+
+<h2 id="evas_object" name="evas_object">Evas Object Events</h2>
+
+<p>Each Evas object on a specific Evas canvas can be manipulated independently. Each object can send events, which you can handle by registering callback functions for them. The events all relate to single objects, not the whole canvas.</p>
+
+<p>The following Evas object event types are available:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span>: Pointer got over an object (with no other object between the 2). This takes place no matter how the pointer becomes directly above the object. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_OUT</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event, but when the pointer goes outside the object area. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Out</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: Mouse button is pressed while the object is receiving events (either because the pointer is on top of the object or because the object had focus). The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Move</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_WHEEL</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Wheel</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Multi_Move</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_DOWN</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Down</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_KEY_UP</span>: Triggered similarly to the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span> event. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Key_Up</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_IN</span>: Object gained focus. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FOCUS_OUT</span>: Object lost focus. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_In</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_SHOW</span>: Object is shown by a call to the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HIDE</span>: Object is hidden by a call to the <span style="font-family: Courier New,Courier,monospace">evas_object_hide()</span> function. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOVE</span>: Object origin was moved (origin is the top-left corner at the creation time of the object). The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span>: Object is resized. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESTACK</span>: Object is re-stacked by the <span style="font-family: Courier New,Courier,monospace">evas_object_stack_below()</span> or <span style="font-family: Courier New,Courier,monospace">evas_object_stack_above()</span> function, or other events. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_DEL</span>: Object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_FREE</span>: For internal use only. Do not use (the object resources are about to be freed). The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_HOLD</span>: For internal use only. The event info parameter in the callback is a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Event_Hold</span> struct.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_CHANGED_SIZE_HINTS</span>: Object size hints changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_PRELOADED</span>: Image preloaded through the <span style="font-family: Courier New,Courier,monospace">evas_object_image_preload()</span> function is loaded. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_IMAGE_UNLOADED</span>: Image data is unloaded. The event info parameter in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+</ul>
+
+<p>To register the callback, use the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function. The function takes as parameters the object to which the callback is attached, the event type, the <span style="font-family: Courier New,Courier,monospace">Evas_Object_Event_Cb</span> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p>
+
+<p>The callback function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_event_callback_add()</span> function parameters, the canvas where the event happened, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
+
+<p>When no longer needed, remove the callback with the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_del()</span> function.</p>
+
+
+<h2 id="evas_smart_object" name="evas_smart_object">Evas Smart Object Events</h2>
+
+<p>Evas smart object events are the most widely-used type of events in graphical applications, since they are used for signals, such as &quot;clicked&quot;, &quot;clicked,double&quot; (double-click), and &quot;pressed&quot;. They are identified by strings, and each smart object is able to define its own events (although the names follow conventions).</p>
+
+<h3 id="evas_object_smart_callback" name="evas_object_smart_callback">Managing Evas Smart Object Event Handlers</h3>
+
+<ol><li>To add an Evas Smart Object event handler, register a callback for a specific event to an object with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function. 
+<p>The function takes as parameters the object to which the callback is added, the event name, the callback function, and additional data delivered to the callback. The additional data is optional; use <span style="font-family: Courier New,Courier,monospace">NULL</span> if you do not need it.</p></li>
+
+<li>Define the <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb()</span> callback function.
+<p>The function takes as parameters the additional data defined in the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function parameters, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
+<p>If some of the parameters are not used by the callback function, the compiler can raise the &quot;unused parameter&quot; warning. To avoid it, annotate the parameter with the <span style="font-family: Courier New,Courier,monospace">__UNUSED__</span> macro, which is a compiler-independent way to let the compiler know that the parameter is unused willingly, rather than by a mistake:</p>
+<pre class="prettyprint">void cb(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__);</pre>
+</li>
+
+<li>When no longer needed, remove the event handler with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_del()</span> function.
+<p>The function removes the first match for the given event and callback, and returns the data pointer that was used in the corresponding call to the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function.</p></li></ol>
+
+<p>The following example shows the <span style="font-family: Courier New,Courier,monospace">_button_clicked()</span> function and sets it as the callback for the <span style="font-family: Courier New,Courier,monospace">clicked</span> event of an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> button:</p>
+
+<pre class="prettyprint">
+static void
+_button_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;// Insert function body here
+}
+
+static void
+some_function(void) 
+{
+&nbsp;&nbsp;&nbsp;// Code to build the window object
+&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+}
+</pre>
+
+<p>For a specific object and event, callbacks are called in the order they have been registered. The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function does not execute any special processing, if it is called several times with the same callback function or data. Callbacks are called as many times as they have been added and in the order they have been added.</p>
+
+
+
+<h3 id="evas_smart_objects_examples" name="evas_smart_objects_examples">Evas Smart Object Event Handling Examples</h3>
+
+<p>The following example shows a button with a callback for the &quot;clicked&quot; signal:</p>
+
+<pre class="prettyprint">static void
+_button_clicked(void *data __UNUSED__, Evas_Object *obj __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
+&nbsp;&nbsp;&nbsp;fflush(stdout);
+&nbsp;&nbsp;&nbsp;elm_exit();
+}
+
+static void
+_add_button(Evas_Object *window) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me To Exit!&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+}
+</pre>
+
+<p>The following example shows a button with a callback for the &quot;clicked&quot; signal. Clicking the button removes the callback:</p>
+
+<pre class="prettyprint">static void
+_button_clicked(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
+&nbsp;&nbsp;&nbsp;fflush(stdout);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_del(obj, &quot;clicked&quot;, _button_clicked);
+}
+
+static void
+_add_button(Evas_Object *window) 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+
+&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me!&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+}
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/font_setting_n.htm b/org.tizen.ui.guides/html/native/efl/font_setting_n.htm
new file mode 100755 (executable)
index 0000000..2f3125a
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/font_setting_n.htm
@@ -0,0 +1,450 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Fonts: Setting Application Text Fonts</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+                       <ul class="toc">
+                               <li><a href="#apply">Applying System Font Settings</a></li>
+                               <li><a href="#supported">Supported Font Styles</a></li>
+                               <li><a href="#component">Setting the Font for a UI Component</a></li>
+                               <li><a href="#edc">Setting the Font Using EDC</a></li>
+                               <li><a href="#edje">Using the Edje Text Class</a></li>
+                               <li><a href="#own">Setting Your Own Font</a></li>                               
+                       </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Fonts: Setting Application Text Fonts</h1> 
+       
+
+<p>Tizen provides various methods for setting fonts of the application text. Basically, all UI components have a default font, which can be changed according to the system settings.</p>
+
+<p>The font handling methods include:</p>
+
+<ul> 
+   <li><a href="#component">Setting the font for a UI component</a> using the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications)</li> 
+   <li><a href="#edc">Setting the font using EDC</a></li>
+   <li><a href="#edje">Changing the font and text size</a> using the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) 
+   
+<p>In the application, you can set a system-wide font and font size to text(textblock) parts with text classes (except <span style="font-family: Courier New,Courier,monospace;">tizen</span>). When the system applies a new system-wide font and font size to the application, the font size of text(textblock) parts with the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class are not affected. </p>
+<p>The following words in the <span style="font-family: Courier New,Courier,monospace;">text_class</span> definition are reserved for the system:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">button</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">label</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">entry</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">title_bar</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">list_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">grid_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">toolbar_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">menu_item</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">tizen</span></li>
+</ul>
+
+
+<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
+<pre class="prettyprint">
+elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
+elm_config_font_overlay_apply();
+</pre>
+</li>
+</ul>
+
+
+<p>You can also <a href="#own">set your own font</a>.</p> 
+
+<h2 id="apply" name="apply">Applying System Font Settings</h2>
+
+<p>Tizen provides a special &quot;Tizen&quot; font name. The &quot;Tizen&quot; font name does not match with any specific font; it is just an alias for a system-defined font (system font). When you create a text(textblock) part with the &quot;Tizen&quot; font name in the application&#39;s EDC, the system font is loaded into the user application when those objects are created. Additionally, you can apply the system font to a text or textblock part by using the text class, as described above.</p>
+
+<p>The following EDC example shows how to apply the system font to a TEXT or TEXTBLOCK part by using the &quot;Tizen&quot; font name and the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class. As font name is &quot;Tizen&quot; and the font size is set to 36, the system font is loaded in size 36. If the system setting changes, this part loads the new system font. However, its font size is not changed, because the text class is <span style="font-family: Courier New,Courier,monospace;">tizen</span>.</p>
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;tizen&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+<p>If the part has a predefined text classes other than <span style="font-family: Courier New,Courier,monospace;">tizen</span>, its font size is resized as well.</p>
+
+<pre class="prettyprint">
+description 
+{
+&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;label&quot;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+
+
+<h2 id="supported" name="supported">Supported Font Styles</h2>
+<p>The font styles supported by the EFL are listed in the following table.</p>
+
+<table>
+<caption>Table: Supported font styles</caption>
+<tbody>
+ <tr>
+  <th>Font feature</th>
+  <th>Style attribute</th>
+ </tr>
+<tr>
+ <td rowspan="3"><span style="font-family: Courier New,Courier,monospace;">font_style</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">oblique</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">italic</span></td>
+</tr>
+<tr>
+ <td rowspan="9"><span style="font-family: Courier New,Courier,monospace;">font_width</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultracondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extracondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">condensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semicondensed</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semiexpanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">expanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extraexpanded</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultraexpanded</span></td>
+</tr>
+<tr>
+ <td rowspan="11"><span style="font-family: Courier New,Courier,monospace;">font_weight</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">normal</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">thin</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultralight</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">light</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">book</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">medium</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">semibold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">bold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ultrabold</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">black</span></td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">extrablack</span></td>
+</tr>
+</tbody>
+</table>
+       
+<p>The style attributes are not case-sensitive (however, the font feature names are).</p>
+<p>If you set the weight or width attribute to <span style="font-family: Courier New,Courier,monospace;">style=</span>, it is processed to the right attribute.</p>
+<pre class="prettyprint">
+font=TizenSans:style=Bold // Textblock
+&quot;TizenSans:style=Bold&quot;; // Text font
+&lt;font=TizenSans:style=Bold&gt; // Markup tag
+</pre>
+
+<p>You can also use each attribute separately:</p>
+
+<pre class="prettyprint">
+font=TizenSans font_style=Regular font_weight=Bold // Textblock
+&lt;font=TizenSans font_style=Regular font_weight=Bold&gt; // Markup tag
+</pre>
+
+
+<h2 name="component" id="component">Setting the Font for a UI Component</h2>
+
+<p>You can use the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications) to set the font for an application.</p>
+<p>To set a font for a UI component:</p>
+<ul>
+<li>Set the font for a common UI component:
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">You can set the font for a textblock in the code, but not in EDC (Edje Data Collection). If you add markup tags for the font inside the text, you can change the font of the text. However, you cannot set the font for a text part in this way because the <span style="font-family: Courier New,Courier,monospace;">TEXT</span> type does not support markup tags.</td> 
+    </tr> 
+   </tbody>
+  </table>
+
+<pre class="prettyprint">
+char *buf = &quot;&lt;font=Sans:style=Regular font_size=50&gt;Hello&lt;/font/&gt;Font&quot;;
+elm_object_part_text_set(layout, &quot;textblock1&quot;, buf);
+</pre>
+</li>
+<li>Set the font for an entry component (in <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Entry.html">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. It overrides the default style of the entry component for each attribute.
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags.</td> 
+    </tr> 
+   </tbody>
+  </table>
+<pre class="prettyprint">
+char *user_style = &quot;DEFAULT=&#39;font=Sans:style=Regular font_size=40&#39;&quot;;
+elm_entry_text_style_user_push(entry, user_style);
+elm_object_part_text_set(entry, &quot;elm.guide&quot;,
+&nbsp;&nbsp;&nbsp;&quot;&lt;font=Sans:style=Regular font_size=40&gt;Guide Text&lt;/font&gt;&quot;);
+</pre>
+</li>
+</ul>
+
+<h2 name="edc" id="edc">Setting the Font Using EDC</h2>
+
+<p>To create a layout with text using the EDC, you can set the font for each text part or textblock:</p>
+<ul>
+<li id="TEXT">Set the font of a text part using the font family name and a specific style of the font family:
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Add style information, which can be used for multiple textblock parts:
+<pre class="prettyprint">
+styles 
+{
+&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ul>
+
+<h2 name="edje" id="edje">Using the Edje Text Class</h2>
+
+<p>You can use the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.</p>
+
+ <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Note that the <span style="font-family: Courier New,Courier,monospace;">text_class</span> cannot be used in a UI component with markup text or the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. You must set the <span style="font-family: Courier New,Courier,monospace;">text_class</span> in EDC.</td> 
+    </tr> 
+   </tbody>
+  </table>
+
+
+<p>To set the text class, you can use reserved words for text class, but you can also make your own text class:</p>
+
+<ul>
+       <li>Set a class for a text part:
+
+<pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_class: &quot;my_class&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Set a class for a textblock:
+<pre class="prettyprint">
+styles 
+{
+&nbsp;&nbsp;&nbsp;style 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30 ... text_class=my_class&quot;;
+&nbsp;&nbsp;&nbsp;}
+}
+
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
+&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
+&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>
+<p>You can handle font and font style per <span style="font-family: Courier New,Courier,monospace;">text_class</span>. If you set your own <span style="font-family: Courier New,Courier,monospace;">text_class</span> in the EDC, you can change the font and font size:</p>
+
+<pre class="prettyprint">
+elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, 30);
+elm_config_font_overlay_apply();
+</pre>
+</li>
+<li>
+<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
+<pre class="prettyprint">
+elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
+elm_config_font_overlay_apply();
+</pre>
+</li>
+</ul>
+
+<h2 name="own" id="own">Setting Your Own Font</h2>
+
+<p>You can create your own font and use them in your application. Before using your fonts, set the path for the fonts. Use the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> or prepend function once when the application is launched.</p>
+<pre class="prettyprint">
+char *font_path = &quot;/opt/usr/apps/org.tizen.myapp/res/fonts/&quot;;
+evas_font_path_global_append(font_path);
+</pre>
+
+<p>After calling the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> function, you can load your fonts including the family name and style.</p>        
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/form_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/form_tutorial_n.htm
new file mode 100755 (executable)
index 0000000..f4487a5
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/form_tutorial_n.htm
@@ -0,0 +1,316 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating a Form for a Basic Application Layout</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#create">Creating the Basic Application</a></li>
+                       <li><a href="#naviframe">Creating the Naviframe</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating a Form for a Basic Application Layout</h1>
+
+  
+<p>This tutorial explains how to create a basic application for displaying a list of contacts, and a form for displaying and editing contact information when an item is selected on the contact list.</p>
+
+ <h2 id="create" name="create">Creating the Basic Application</h2>
+
+<p>To create an elementary application with a single window, use the following code.</p>
+<pre class="prettyprint">static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_gui(ad);
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = { 0 };
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;// Zero out the structure
+&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
+
+&nbsp;&nbsp;&nbsp;// Run the mainloop
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}
+</pre> 
+
+ <h2 id="naviframe" name="naviframe">Creating the Naviframe</h2>
+
+<p>Use a naviframe in this application to switch between different views. The first view that is displayed is the list of contacts. When a user selects an item on this list, information on the contact is displayed in a form. Both the view list and the form are opened in a naviframe, which handles the animations between the views for you. It also manages creating a back button in the top bar and launching the back animation when you select it, deletes the form view, and shows the list of contacts again.</p>
+
+<h3>Naviframe</h3>
+<p>The naviframe is the main layout of the window, so it takes all the space available. To configure this, use the <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add</span> function. The first parameter is the main window, the second is the naviframe object. The naviframe is to be resized along with the window. The object (the naviframe) fills its parent (the main window) by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_resize_hint_weight_set</span> function on the naviframe object. The naviframe object expands in both x and y directions. In the end, evas shows the naviframe object on the screen.</p>
+<pre class="prettyprint"> // Create the naviframe
+nav = elm_naviframe_add(win);
+evas_object_size_hint_weight_set(nav, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, nav);
+evas_object_show(nav);
+</pre> 
+
+<h3>Contact List</h3>
+<p>Handle the contact list with the <span style="font-family: Courier New,Courier,monospace">_create_contact_list</span> function. This function takes the parent object as the parameter (in this case the naviframe) and returns the genlist. To create the genlist, use the following code.</p>
+<pre class="prettyprint">static Evas_Object *
+_create_contact_list(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;// Create a new genlist
+&nbsp;&nbsp;&nbsp;list = elm_genlist_add(parent);
+&nbsp;&nbsp;&nbsp;evas_object_show(list);
+
+&nbsp;&nbsp;&nbsp;// Create a new item class for the genlist
+&nbsp;&nbsp;&nbsp;itc = elm_genlist_item_class_new();
+&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;default&quot;;
+&nbsp;&nbsp;&nbsp;// Set the callback used when the genlist text is created
+&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = _genlist_text_get;
+&nbsp;&nbsp;&nbsp;// Set the callback be used when the content of the item is created
+&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get&nbsp;&nbsp;&nbsp;= _genlist_content_get;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.state_get = NULL;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
+}
+</pre>
+
+<p>itc is a static variable containing the item class. The item class contains all functions that are called back when an item is created. In this case, create the callbacks <span style="font-family: Courier New,Courier,monospace">_genlist_text_get</span> (for labels) and <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> (for icons). These functions are called when labels and icons of the genlist item are created.</p>
+<p>The list of contacts is contained in an array of Contacts.</p>
+<pre class="prettyprint">typedef struct _Contact Contact;
+
+struct _Contact
+{
+&nbsp;&nbsp;&nbsp;const char *name;
+&nbsp;&nbsp;&nbsp;const char *mobile;
+&nbsp;&nbsp;&nbsp;const char *address;
+&nbsp;&nbsp;&nbsp;const char *email;
+&nbsp;&nbsp;&nbsp;const char *icon;
+};
+
+static Contact contacts[] = 
+{
+&nbsp;&nbsp;&nbsp;{&quot;Alexander Holmes&quot;, &quot;+1234567896&quot;, &quot;&quot;, &quot;alexander_holmes@tizen.org&quot;, &quot;c1.png&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Lara Alvaréz&quot;,&nbsp;&nbsp;&nbsp; &quot;+9876543216&quot;, &quot;&quot;, &quot;lara_alvares@tizen.org&quot;, &quot;c2.png&quot;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{&quot;Aksel Møller&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;aksel_moller@tizen.org&quot;, &quot;c3.png&quot;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{&quot;Anir Amghar&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;+1679432846&quot;, &quot;&quot;, &quot;anir_amghar@tizen.org&quot;, &quot;c4.png&quot;&nbsp;&nbsp;&nbsp; },
+&nbsp;&nbsp;&nbsp;{&quot;Noémie Cordier&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;noemie_cordier@tizen.org&quot;, &quot;c5.png&quot;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{&quot;Henry Thompson&quot;,&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;henry_thompson@tizen.org&quot;, &quot;c6.png&quot;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;{&quot;Mai Phan&quot;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &quot;+1679432846&quot;, &quot;&quot;, &quot;mai_phan@tizen.org&quot;, &quot;c7.png&quot;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
+};
+</pre>
+
+<p>Create a genlist item for each item of the array with the following code.</p>
+<pre class="prettyprint">
+// Create a genlist item for each item in the contacts array
+for (i = 0; i &lt; EINA_C_ARRAY_LENGTH(contacts); i++)
+{
+&nbsp;&nbsp;&nbsp;// Append the item, add a callback when the item is selected, and use the
+&nbsp;&nbsp;&nbsp;// current contact item as data pointer for the callbacks
+&nbsp;&nbsp;&nbsp;elm_genlist_item_append(list, itc,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contacts[i],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contact_selected_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contacts[i]);
+}
+</pre>
+
+<p>Attach the <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb</span> callback function to the genlist item. When an item is selected in the list, the data pointer passed as the argument calls this function. Here it is a pointer on the contact. Pass the contact in the array to all the Item Class callbacks.</p>
+<p>Push the list at the top of the naviframe with the following code.</p>
+<pre class="prettyprint">
+// Create the list of contacts
+list = _create_contact_list(win);
+
+// Push the list on top of the naviframe
+elm_naviframe_item_push(nav, NULL, NULL, NULL, list, NULL);
+</pre>
+
+<p>The Item class functions are called, the <span style="font-family: Courier New,Courier,monospace">_genlist_text_get</span> first.</p>
+<pre class="prettyprint">
+static char *
+_genlist_text_get(void *data, Evas_Object *obj EINA_UNUSED, const char *part)
+{
+&nbsp;&nbsp;&nbsp;Contact *contact = data;
+
+&nbsp;&nbsp;&nbsp;// Return a new allocated string for the contact name
+&nbsp;&nbsp;&nbsp;return strdup(contact-&gt;name);
+}
+</pre>
+
+<p>These functions show the index of the contact in the array and return a freshly allocated string with the name of the contact.</p>
+<p>When the user selects an item in the list, a callback registers on the select signal and calls the corresponding function; in this case, <span style="font-family: Courier New,Courier,monospace">_contact_selected_cb()</span>. The user retrieves the index of the array passed in the data and creates the form on contact information based on this index.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function is called several times depending on the style of the created item. In this case, with the default style for the genlist item, there are two different swallow parts. A swallow part is a container in the edje file of the genlist item, which may contain an evas object. The following figure shows the layout of different parts in the theme.</p>
+
+
+<p class="figure">Figure: Genlist item</p> 
+<p align="center"><img alt="Genlist item" src="../../images/genlist_item.png" /></p>   
+ 
+
+<p>There are two elm.swallow parts. When the callback function for the creation of icons is called, the part name is passed via the <span style="font-family: Courier New,Courier,monospace">part</span> variable. Compare this variable to <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> for the first object and to <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> for the icon at the end.</p>
+
+<h3>Icon</h3>
+<p>Create the icon when the callback is recognized. In this example, we use an <span style="font-family: Courier New,Courier,monospace">elm_icon</span> object.</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;Contact *contact = data;
+
+&nbsp;&nbsp;&nbsp;// Test which part is being created
+&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.swallow.icon&quot;))
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char filename[PATH_MAX];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create a new icon
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ic = elm_icon_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the filename of the file which is to be loaded
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, filename, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the ratio squared
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return the icon
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ic;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre>
+
+<p>Note that in case of <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> the return is NULL, and no icon is added.</p>
+<p>The user may question the complexity of creating a genlist, and the benefits of callbacks for the creation of items. In a genlist with thousands of elements, graphical items are not created. Only the ones currently displayed on the screen are created with the callbacks in the Genlist Item Class. Otherwise, objects are created by calling the respective callback function when the user scrolls the list.</p>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">When the genlist is first created, the Elementary needs to know the height of the list. All elements in the list are not necessarily the same size due to different kind of styles. Thus, the Elementary creates all elements once to know the size, and displays the scroll bars correctly. If all your items have the same height, use the <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set</span> to impose the same height to all items. The Elementary does not create the complete list as the global size is a multiple of the height of the first item. It saves you cpu time.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+  
+<h3>Contact Form</h3>
+<p>The contact list is created inside the <span style="font-family: Courier New,Courier,monospace">_create_contact_form</span> function. This function takes a parent Evas_Object and a contact item as parameters, and returns an Evas_Object. The parent is the naviframe object, and the contact item contains the information on the contact.</p>
+<p>To display the various information about the contact, we use boxes in this example.</p>
+
+   <p class="figure">Figure: Form contact layout</p> 
+   <p align="center"><img alt="Form contact layout" src="../../images/form_contact_layout.png" /></p>
+
+
+<p>The first box is an vertical box.</p>
+<pre class="prettyprint">vbox = elm_box_add(parent);
+elm_box_align_set(vbox, 0, 0);
+evas_object_show(vbox);
+</pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_box_align_set</span> keeps the box element aligned to the top left corner.</p>
+<p>To add an icon, use the <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function to create the icon in the genlist item. For a bigger icon, set the minimum size of the icon object to 96x96 px.</p>
+<p>The most important function in this case is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end</span>. It adds the icon object at the end of the vbox. As the icon is the first object added, it is displayed on top of the box.</p>
+<pre class="prettyprint">
+ic = elm_icon_add(vbox);
+snprintf(filename, sizeof(filename), &quot;%s%s&quot;, ICON_PATH, contact-&gt;icon);
+elm_image_file_set(ic, filename, NULL);
+evas_object_size_hint_min_set(ic, 96, 96);
+evas_object_show(ic);
+elm_box_pack_end(vbox, ic);
+</pre>
+
+<p>In the following example, add the information on the contact: the name, the mobile phone number, the postal address and the e-mail address. For each information item, create a label and an edit line. The label contains the kind of the information, and the edit box, the information itself. To set the UI components in a horizontal layout, use a horizontal box.</p>
+<pre class="prettyprint">
+hbox = elm_box_add(vbox);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+elm_box_padding_set(hbox, 32, 32);
+evas_object_size_hint_weight_set(hbox, EVAS_HINT_EXPAND, 0);
+evas_object_size_hint_align_set(hbox, EVAS_HINT_FILL, 0);
+evas_object_show(hbox);
+</pre>
+
+<p>Change the orientation of the box with <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set</span>. To get space between the elements of the vbox, set the padding to 32px. To set the item of the box not to expand vertically, use <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set</span>.</p>
+<p>Create the label object, which is an elm_label. Set its text, and do not align or expand it.</p>
+<pre class="prettyprint">
+label = elm_label_add(hbox);
+elm_object_text_set(label, form_items[i]);
+evas_object_size_hint_weight_set(label, 0, 0);
+evas_object_size_hint_align_set(label, 0, 0);
+evas_object_show(label);
+</pre>
+
+<p>Create the edit line, which is an elm_entry.</p>
+<pre class="prettyprint">
+edit = elm_entry_add(hbox);
+evas_object_size_hint_weight_set(edit, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(edit, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(edit);
+</pre>
+
+<p>Add the label and the edit inside the horizontal box and add the horizontal box to the vertical box.</p>
+<pre class="prettyprint">
+elm_box_pack_end(hbox, label);
+elm_box_pack_end(hbox, edit);
+
+elm_box_pack_end(vbox, hbox);
+</pre>
+
+       <p class="figure">Figure: Form tutorial: form</p> 
+    <p align="center"><img alt="Form tutorial: form" src="../../images/screenshot_1.png" /></p>
+
+   <p class="figure">Figure: Form tutorial: list</p> 
+   <p align="center"><img alt="Form tutorial: list" src="../../images/screenshot_2.png" /></p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/genlist_tutorial_mn.htm b/org.tizen.ui.guides/html/native/efl/genlist_tutorial_mn.htm
new file mode 100755 (executable)
index 0000000..7e89479
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/genlist_tutorial_mn.htm
@@ -0,0 +1,457 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Mobile Genlists</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Set-up
+                               <ul class="toc">
+                                       <li><a href="#genlist_application_init">Initializing the Application</a></li>
+                                       <li><a href="#genlist_creation">Creating a Genlist</a></li>
+                                       <li><a href="#entries_creation">Adding New Entries</a></li>
+                               </ul>
+                       </li>
+                       <li>Modifications
+                               <ul class="toc">
+                                       <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
+                                       <li><a href="#item_modes">Using Item Modes</a></li>
+                                       <li><a href="#other_apis">Using Other APIs</a></li>
+                               </ul>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Mobile Genlists</h1>
+
+  
+<p>This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+
+ <h2 id="genlist_application_init" name="genlist_application_init">Initializing the Application</h2>
+
+   <p class="figure">Figure: Example of a genlist</p> 
+   <p align="center"><img alt="Example of a genlist" src="../../images/genlist_1line.png" /></p>
+  <p>The code below shows a typical elementary application that creates a window entitled &quot;Genlist Basic Tutorial&quot;. It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
+<pre class="prettyprint">static bool
+_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *app = data;
+
+&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
+
+&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;_create_list(app);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
+&nbsp;&nbsp;&nbsp;struct app_data app = { 0 };
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
+
+&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
+
+&nbsp;&nbsp;&nbsp;// Run the mainloop
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+<p> The declaration of the <span style="font-family: Courier New,Courier,monospace">struct app_data</span> is shown below:</p>
+<pre class="prettyprint">struct app_data
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
+};
+</pre>
+
+ <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
+<pre class="prettyprint">Evas_Object *list = elm_genlist_add(parent);
+</pre>
+
+ <h2 id="entries_creation" name="entries_creation">Adding New Entries</h2>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
+<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
+Building a Basic Item Class</h3>
+<p>The code for the minimal genlist item class is below: </p>
+
+<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;func.text_get = NULL;
+itc-&gt;func.content_get = NULL;
+itc-&gt;func.state_get = NULL;
+itc-&gt;func.del = NULL;
+</pre>
+
+<p>It creates a simple item class, sets the <span style="font-family: Courier New,Courier,monospace">item_style</span> to &quot;default&quot; and every other field to NULL. However, this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields which are used to add text and an icon to the list entry. This is explained in another section.</p>
+<h3 id="elm_genlist_item_append" name="elm_genlist_item_append">Adding the Element</h3>
+<p>Once the genlist item class object is created, a new element is added to the list by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>. </p>
+<pre class="prettyprint">elm_genlist_item_append(list,
+&nbsp;&nbsp;&nbsp;itc,
+&nbsp;&nbsp;&nbsp;NULL,                    // Item data
+&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
+&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type; this is the common one
+&nbsp;&nbsp;&nbsp;NULL,                    // Callback on selection of the item
+&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
+);
+</pre>
+<p>With most parameters as NULL and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.</p>
+<h3 id="text_get" name="text_get">Text in the List Elements</h3>
+<p> Use <span style="font-family: Courier New,Courier,monospace">text_get</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure. These callbacks must have a prototype matching to the following: </p>
+
+<pre class="prettyprint">char * text_get(void *data, Evas_Object *obj, const char *part);
+</pre>
+<p>This callbacks returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. This callback is called for each user-settable text part according to the current theme.</p>
+<p>If you are not familiar with the concept of parts in the EFLs,  see <a href="edje_intro_n.htm#simple_edc_file">Writing a Simple EDC File</a>.</p>
+
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>For the default theme there is one part named <span style="font-family: Courier New,Courier,monospace">elm.text</span>. A possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is therefore: </p>
+<pre class="prettyprint">static char *
+_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;// Check this is text for the part we&#39;re expecting
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The names and positions of parts depends on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. <a href="edje_intro_n.htm">Introduction to EDC Programming</a> explains how to do that.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
+<pre class="prettyprint">static char *
+_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
+{
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+
+<h3 id="content_get" name="content_get">Evas_Objects in the List Elements</h3>
+<p>Icons are added in a similar fashion: there is a callback named <span style="font-family: Courier New,Courier,monospace">content_get</span> which returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part which contents can be set.</p>
+<p>The prototype of the callback must match this one: </p>
+<pre class="prettyprint">Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
+</pre>
+
+<p>The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is that it returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
+<p>This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
+
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p> For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.</p>
+<h3 id="state_get" name="state_get">Events on Genlist Items</h3>
+<p>Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>):</p>
+<pre class="prettyprint">elm_genlist_item_append(list,
+&nbsp;&nbsp;&nbsp;itc,
+&nbsp;&nbsp;&nbsp;NULL,                    // Item data
+&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
+&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type, other values are used for trees
+&nbsp;&nbsp;&nbsp;_genlist_selected_cb,    // Callback on selection of the item
+&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
+);
+</pre>
+
+<p>This callback adheres to the following prototype: </p>
+<pre class="prettyprint">void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
+</pre>
+
+<p>The implementation below changes the item style of items when they are selected:</p>
+<pre class="prettyprint">static void
+_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;struct app_data *app = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+}
+</pre>
+
+       <h2 id="item_style" name="item_style">Choosing Another Item Style to Add or Remove Parts</h2>
+ 
+<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
+<pre class="prettyprint">app-&gt;itc-&gt;item_style = &quot;default&quot;;
+</pre>
+<p>The <a href="components_mn.htm#genlist">Genlist</a> component lists all available item styles.</p>
+<p>Further customization is achieved by modifying the theme as explained in <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</p>
+<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
+
+ <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
+
+<p>So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a &quot;group&quot; mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.</p>
+<h3 id="item_group" name="item_group">Group Mode</h3>
+<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for &quot;title&quot; items.</p>
+<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
+<p>Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:</p>
+<pre class="prettyprint">
+app-&gt;itc = elm_genlist_item_class_new();
+app-&gt;itc-&gt;item_style = &quot;default_style&quot;;
+app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
+app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
+app-&gt;itc-&gt;func.state_get = NULL;
+app-&gt;itc-&gt;func.del = NULL; 
+
+app-&gt;itc2 = elm_genlist_item_class_new();
+app-&gt;itc2-&gt;item_style = &quot;icon_top_text_bottom&quot;;
+app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
+app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
+app-&gt;itc2-&gt;func.state_get = NULL;
+app-&gt;itc2-&gt;func.del = NULL; 
+</pre>
+
+<p> Then add a group header and follow it with 10 children. This is repeated 1000 times.</p>
+<p>The parent has type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> while the children have type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span>.</p>
+<p>The other important point is that the value returned by <span style="font-family: Courier New,Courier,monospace">lm_genlist_item_append()</span> is stored in it and then sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-children relationship.</p>
+<pre class="prettyprint">
+for (i = 0; i &lt; 1000; i++) 
+{
+&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2, (void *)(uintptr_t) (10 * i), NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, NULL, NULL);
+&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (10 * i + j), it,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h3 id="item_tree" name="item_tree">Tree Mode</h3>
+<p>Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: <span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>. Like any smart callback, they are registered through <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> on the genlist object:</p>
+<pre class="prettyprint">evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_expand_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_expanded, NULL);
+
+evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_contract_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_contracted, NULL);
+</pre>
+
+<p> The callbacks <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> do only one thing: decide whether the element is expanded or contracted. This is done by using <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). A minimal implementation of these callbacks is therefore:</p>
+<pre class="prettyprint">
+static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The example above has an extra line: the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span>. It changes the item style and is explained in the <a href="#item_class_update">Changing the item class of an item after its creation</a> section.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<pre class="prettyprint">
+static void
+_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
+}
+</pre>
+
+<p> As said above, once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions like <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>, like for the group mode.</p>
+<p>The function below is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passes to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
+<pre class="prettyprint">static void
+_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (i + i_parent), it_parent,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It imply calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
+<pre class="prettyprint">static void
+_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
+}
+</pre>
+
+<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
+<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
+
+ <h2 id="other_apis" name="other_apis">Using Other APIs</h2>
+
+<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
+<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
+
+<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
+<p>Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
+<pre class="prettyprint">static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded.
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/genlist_tutorial_wn.htm b/org.tizen.ui.guides/html/native/efl/genlist_tutorial_wn.htm
new file mode 100755 (executable)
index 0000000..7f9a993
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/genlist_tutorial_wn.htm
@@ -0,0 +1,469 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Wearable Genlists</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li>Set-up
+                               <ul class="toc">
+                                       <li><a href="#genlist_application_init">Initializing the Application</a></li>
+                                       <li><a href="#genlist_creation">Creating a Genlist</a></li>
+                                       <li><a href="#entries_creation">Adding New Entries</a></li>
+                               </ul>
+                       </li>
+                       <li>Modifications
+                               <ul class="toc">
+                                       <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
+                                       <li><a href="#item_modes">Using Item Modes</a></li>
+                                       <li><a href="#other_apis">Using Other APIs</a></li>
+                               </ul>
+                       </li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>             
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Genlists</h1>
+
+<p>This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+
+ <h2 id="genlist_application_init" name="genlist_application_init">Initializing the Application</h2>
+
+   <p class="figure">Figure: Example of a genlist</p> 
+   <p align="center"><img alt="Example of a genlist" src="../../images/genlist_wn.png" /></p>
+  <p>The code below shows a typical elementary application that creates a window entitled &quot;Genlist Basic Tutorial&quot;. It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
+<pre class="prettyprint">static bool
+_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *app = data;
+
+&nbsp;&nbsp;&nbsp;app-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Genlist Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(app-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_resize(app-&gt;win, 480, 800);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(app-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;app-&gt;conformant = elm_conformant_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;conformant);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;conformant);
+
+&nbsp;&nbsp;&nbsp;app-&gt;naviframe = elm_naviframe_add(app-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(app-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(app-&gt;win, app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;evas_object_show(app-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(app-&gt;conformant, app-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;_create_list(app);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(app-&gt;naviframe, NULL, NULL, NULL, app-&gt;list, NULL);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;// Declare a few structures and zero-initialize (C99 feature)
+&nbsp;&nbsp;&nbsp;struct app_data app = { 0 };
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = { 0 };
+
+&nbsp;&nbsp;&nbsp;event_callback.create = _app_create;
+
+&nbsp;&nbsp;&nbsp;// Run the mainloop
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}
+</pre>
+<p> The declaration of the <span style="font-family: Courier New,Courier,monospace">struct app_data</span> is shown below:</p>
+<pre class="prettyprint">struct app_data
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
+&nbsp;&nbsp;&nbsp;Evas_Object *list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc2;
+};
+</pre>
+
+ <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
+<pre class="prettyprint">Evas_Object *list = elm_genlist_add(parent);
+</pre>
+
+ <h2 id="entries_creation" name="entries_creation">Adding New Entries</h2>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
+<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
+Building a Basic Item Class</h3>
+<p>The code for the minimal genlist item class is below: </p>
+
+<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;func.text_get = NULL;
+itc-&gt;func.content_get = NULL;
+itc-&gt;func.state_get = NULL;
+itc-&gt;func.del = NULL;
+</pre>
+
+<p>It creates a simple item class, sets the <span style="font-family: Courier New,Courier,monospace">item_style</span> to &quot;default&quot; and every other field to NULL. However, this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields which are used to add text and an icon to the list entry. This is explained in another section.</p>
+<h3 id="elm_genlist_item_append" name="elm_genlist_item_append">Adding the Element</h3>
+<p>Once the genlist item class object is created, a new element is added to the list by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>. </p>
+<pre class="prettyprint">elm_genlist_item_append(list,
+&nbsp;&nbsp;&nbsp;itc,
+&nbsp;&nbsp;&nbsp;NULL,                    // Item data
+&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
+&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type; this is the common one
+&nbsp;&nbsp;&nbsp;NULL,                    // Callback on selection of the item
+&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
+);
+</pre>
+<p>With most parameters as NULL and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.</p>
+<h3 id="text_get" name="text_get">Text in the List Elements</h3>
+<p> Use <span style="font-family: Courier New,Courier,monospace">text_get</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure. These callbacks must have a prototype matching to the following: </p>
+
+<pre class="prettyprint">char * text_get(void *data, Evas_Object *obj, const char *part);
+</pre>
+<p>This callbacks returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. This callback is called for each user-settable text part according to the current theme.</p>
+<p>If you are not familiar with the concept of parts in the EFLs, see <a href="edje_intro_n.htm#simple_edc_file">Writing a Simple EDC File</a>.</p>
+
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>For the default theme there is one part named <span style="font-family: Courier New,Courier,monospace">elm.text</span>. A possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is therefore: </p>
+<pre class="prettyprint">static char *
+_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;// Check this is text for the part we&#39;re expecting
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;Some text&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The names and positions of parts depends on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. <a href="edje_intro_n.htm">Introduction to EDC Programming</a> explains how to do that.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
+<pre class="prettyprint">static char *
+_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
+{
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.text&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *buf = malloc(16);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 16, &quot;Entry %d.&quot;, (int)(uintptr_t)data);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return buf;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+
+<h3 id="content_get" name="content_get">Evas_Objects in the List Elements</h3>
+<p>Icons are added in a similar fashion: there is a callback named <span style="font-family: Courier New,Courier,monospace">content_get</span> which returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part which contents can be set.</p>
+<p>The prototype of the callback must match this one: </p>
+<pre class="prettyprint">Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
+</pre>
+
+<p>The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is that it returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
+<p>This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;int i = (int) (uintptr_t) data;
+
+&nbsp;&nbsp;&nbsp;if (strcmp(part, &quot;elm.swallow.icon&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (strcmp(part, &quot;elm.swallow.end&quot;) == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bg = elm_bg_add(obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return bg;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p> For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.</p>
+<h3 id="state_get" name="state_get">Events on Genlist Items</h3>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The swallow parts have no minimum size. This means that if you do not fix the minimum size, the part cannot be seen.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<p>Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>):</p>
+<pre class="prettyprint">elm_genlist_item_append(list,
+&nbsp;&nbsp;&nbsp;itc,
+&nbsp;&nbsp;&nbsp;NULL,                    // Item data
+&nbsp;&nbsp;&nbsp;NULL,                    // Parent item for trees, NULL if none
+&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,   // Item type, other values are used for trees
+&nbsp;&nbsp;&nbsp;_genlist_selected_cb,    // Callback on selection of the item
+&nbsp;&nbsp;&nbsp;NULL                     // Data for that callback function
+);
+</pre>
+
+<p>This callback adheres to the following prototype: </p>
+<pre class="prettyprint">void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
+</pre>
+
+<p>The implementation below changes the item style of items when they are selected:</p>
+<pre class="prettyprint">static void
+_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *app = data;
+
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+}
+</pre>
+
+       <h2 id="item_style" name="item_style">Choosing Another Item Style to Add or Remove Parts</h2>
+ 
+<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
+<pre class="prettyprint">app-&gt;itc-&gt;item_style = &quot;default&quot;;
+</pre>
+<p>The <a href="components_wn.htm#genlist">Genlist</a> component lists all available item styles.</p>
+<p>Further customization is achieved by modifying the theme as explained in <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</p>
+<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
+
+ <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
+
+<p>So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a &quot;group&quot; mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.</p>
+<h3 id="item_group" name="item_group">Group Mode</h3>
+<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for &quot;title&quot; items.</p>
+<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
+<p>Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:</p>
+<pre class="prettyprint">
+app-&gt;itc = elm_genlist_item_class_new();
+app-&gt;itc-&gt;item_style = &quot;default&quot;;
+app-&gt;itc-&gt;func.text_get = _genlist_text_get_size;
+app-&gt;itc-&gt;func.content_get = _genlist_content_get_bg;
+app-&gt;itc-&gt;func.state_get = NULL;
+app-&gt;itc-&gt;func.del = NULL; 
+
+app-&gt;itc2 = elm_genlist_item_class_new();
+app-&gt;itc2-&gt;item_style = &quot;1text.1icon&quot;;
+app-&gt;itc2-&gt;func.text_get = _genlist_text_get_nosize;
+app-&gt;itc2-&gt;func.content_get = _genlist_content_get_icon;
+app-&gt;itc2-&gt;func.state_get = NULL;
+app-&gt;itc2-&gt;func.del = NULL; 
+</pre>
+
+<p> Then add a group header and follow it with 10 children. This is repeated 1000 times.</p>
+<p>The parent has type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> while the children have type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span>.</p>
+<p>The other important point is that the value returned by <span style="font-family: Courier New,Courier,monospace">lm_genlist_item_append()</span> is stored in it and then sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-children relationship.</p>
+<pre class="prettyprint">
+for (i = 0; i &lt; 1000; i++) 
+{
+&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(app-&gt;list, app-&gt;itc2, (void *)(uintptr_t) (10 * i), NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, NULL, NULL);
+&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; 10; j++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (10 * i + j), it,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h3 id="item_tree" name="item_tree">Tree Mode</h3>
+<p>Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: <span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>. Like any smart callback, they are registered through <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> on the genlist object:</p>
+<pre class="prettyprint">evas_object_smart_callback_add(app-&gt;list, &quot;expand,request&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_expand_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;expanded&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_expanded, NULL);
+
+evas_object_smart_callback_add(app-&gt;list, &quot;contract,request&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_contract_request, NULL);
+evas_object_smart_callback_add(app-&gt;list, &quot;contracted&quot;,
+&nbsp;&nbsp;&nbsp;_tree_item_contracted, NULL);
+</pre>
+
+<p> The callbacks <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> do only one thing: decide whether the element is expanded or contracted. This is done by using <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). A minimal implementation of these callbacks is therefore:</p>
+<pre class="prettyprint">
+static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+  <table class="note"> 
+   <tbody> 
+  <tr> 
+   <th class="note">Note</th> 
+  </tr> 
+  <tr> 
+   <td class="note">The example above has an extra line: the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span>. It changes the item style and is explained in the <a href="#item_class_update">Changing the item class of an item after its creation</a> section.</td> 
+  </tr> 
+   </tbody> 
+  </table> 
+
+<pre class="prettyprint">
+static void
+_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_FALSE);
+}
+</pre>
+
+<p> As said above, once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item&#39;s children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions like <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>, like for the group mode.</p>
+<p>The function below is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passes to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
+<pre class="prettyprint">static void
+_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+&nbsp;&nbsp;&nbsp;int i_parent = (int)(uintptr_t) data;
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 10; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(app-&gt;list, app-&gt;itc, (void *)(uintptr_t) (i + i_parent), it_parent,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, NULL, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It imply calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
+<pre class="prettyprint">static void
+_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it_parent);
+}
+</pre>
+
+<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
+<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
+
+ <h2 id="other_apis" name="other_apis">Using Other APIs</h2>
+
+<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
+<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
+
+<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
+<p>Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
+<pre class="prettyprint">static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+&nbsp;&nbsp;&nbsp;// Change the appearance and possibly content of the item being expanded.
+&nbsp;&nbsp;&nbsp;elm_genlist_item_item_class_update(it, app-&gt;itc2);
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/graphical_objects_n.htm b/org.tizen.ui.guides/html/native/efl/graphical_objects_n.htm
new file mode 100755 (executable)
index 0000000..6f3c87f
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/graphical_objects_n.htm
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Graphical Objects: Managing and Rendering Evas Objects</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>\r
+               </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+\r
+ <h1>Graphical Objects: Managing and Rendering Evas Objects</h1>\r
+  \r
+<p>Evas is a clean display canvas API for several target display systems that can draw anti-aliased text, smooth super and sub-sampled scaled images, alpha-blend objects and much more.</p>\r
+<p>It abstracts any need to know much about what the characteristics of your display system are, what graphics calls are used to draw them, and how. It deals on an object level where all you do is create and manipulate objects in a canvas and set their properties.</p>\r
+<p>Evas optimizes the rendering pipeline to minimize effort in redrawing changes made to the canvas and so takes this work out of the programmers hand, saving a lot of time and energy.</p>\r
+<p>It is designed to work on embedded systems all the way to large and powerful multi-cpu workstations. It can be compiled to only have the features you need for your target platform if you so wish. It has several display back-ends, allowing it display on several display systems, making it portable for cross-device and cross-platform development.</p>\r
+\r
+<p>Evas is not a UI component set or a UI component toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.</p>\r
+<p>It is not dependent or aware of main loops, input or output systems. Input must be polled from various sources and fed to Evas. It does not create windows or report windows updates to your system, but draws the pixels and reports to the user the areas that are changed. These operations are ready to be used in Ecore, particularly in Ecore_Evas wrapper/helper set of functions.</p>\r
+\r
+<table class="note">\r
+    <tbody>\r
+        <tr>\r
+            <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>\r
+        </tr>\r
+    </tbody>\r
+</table>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/guides_efl_n.htm b/org.tizen.ui.guides/html/native/efl/guides_efl_n.htm
new file mode 100755 (executable)
index 0000000..2e2ae38
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/guides_efl_n.htm
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>EFL</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>EFL</h1>
+
+<p>EFL is an open-source UI toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from UI component sets to data structures. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.</p>
+
+<p>When creating an EFL application, make sure you understand the following main features:</p>
+
+<ul>
+       <li><a href="efl_overview_n.htm">EFL Overview: Getting Started with EFL UI Programming</a>
+       <p>Enables you to get started with the EFL UI programming.</p></li>
+       <li><a href="ui_components_n.htm">UI Components: Handling Elementary UI Component Libraries</a>
+       <p>Enables you to handle Elementary UI components.</p></li>
+       <li><a href="component_infra_n.htm">UI Component Infrastructure Modules: Managing Component Properties</a>
+       <p>Enables you to handle infrastructure modules to manage the common properties of UI components.</p></li>
+       <li><a href="ui_containers_n.htm">UI Containers: Creating Layouts Using Container UI Components</a>
+       <p>Enables you to create layouts using container UI components.</p></li>
+       <li><a href="theme_n.htm">Themes: Specifying the UI Look and Feel</a>
+       <p>Enables you to specify the UI look and feel.</p></li>
+       <li><a href="edje_objects_n.htm">Edje Objects: Managing Layouts and Layout Components</a>
+       <p>Enables you to manage layouts and layout components.</p></li>
+       <li><a href="font_setting_n.htm">Fonts: Setting Application Text Fonts</a>
+       <p>Enables you get and set font information.</p></li>
+       <li><a href="ui_scalability_n.htm">Scaling: Handling Screen and Object Sizes</a>
+       <p>Enables you to manage various screen and object sizes.</p></li>
+       <li><a href="notification_window_n.htm">Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</a>
+       <p>Enables you to handle EFL utilities, such as notification windows, screenshots, and input generators.</p></li>
+       <li><a href="core_loop_n.htm">Core Loop and OS Interfacing: Handling the Main Loop and Threads</a>
+       <p>Enables you to use the main loop and handle threads.</p></li>
+       <li><a href="graphical_objects_n.htm">Graphical Objects: Managing and Rendering Evas Objects</a>
+       <p>Enables you to manage and render Evas objects.</p></li>
+       <li><a href="event_handling_n.htm">Event Handling: Managing the Event Flow</a>
+       <p>Enables you to manage polling, timers, events, and file descriptors.</p></li>
+       <li><a href="animation_effects_n.htm">Animations and Effects: Creating Transformations</a>
+       <p>Enables you to create physics-related animations and effects.</p></li>
+       <li><a href="data_types_tools_n.htm">Data Types and Tools: Using Eina Resources</a>
+       <p>Enables you to take advantage of data types and tools used in multiple places.</p></li>
+       <li><a href="hw_input_n.htm">Hardware Input Handling: Managing Hardware Events with EFL Extension</a>
+       <p>Enables you to use the EFL extension to manage hardware input events.</p></li>
+</ul>
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/native/efl/hw_input_n.htm b/org.tizen.ui.guides/html/native/efl/hw_input_n.htm
new file mode 100755 (executable)
index 0000000..27f1a9f
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/hw_input_n.htm
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Hardware Input Handling: Managing Hardware Events with EFL Extension</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>                
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Hardware Input Handling: Managing Hardware Events with EFL Extension</h1> 
+
+   <p>The Tizen platform offers the <strong>Menu</strong>, <strong>Back</strong>, and <strong>Home</strong> keys as <a href="key_events_n.htm">physical hardware keys</a> for mobile devices and <a href="rotary_events_n.htm">rotary component parts</a> for wearable devices.</p>
+   
+   <p>Basically, EFL does not depend on any specific hardware input methods, such as hardware keys, to generate back and home events, or rotary component parts to generate rotary events. Instead these hardware input events have tightly related to the Tizen UX. As a result, EFL has created the EFL extension library to support common UX behavior between applications and hardware events.</p>
+   
+   <p>When the user presses the <strong>Menu</strong> or <strong>Back</strong> key, the key generates a signal with its key property. The Ecore library receives the signal and propagates it to application layers as an event. The EFL extension library consumes the events and handles the views of the application according to key properties. Otherwise, EFL extension manages the rotary events, which are generated from rotary components in wearable devices and delivered to application layers by defining an event callback or a handler function, and registering it.</p>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/key_events_n.htm b/org.tizen.ui.guides/html/native/efl/key_events_n.htm
new file mode 100755 (executable)
index 0000000..ff158e2
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/key_events_n.htm
@@ -0,0 +1,188 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Managing Menu and Back Key Events</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>                
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Managing Menu and Back Key Events</h1>
+
+<p>The <strong>Menu</strong> and <strong>Back</strong> functions are common UX behaviors in applications. Generally, the user taps the <strong>Back</strong> hardware key to return to the previous screen. The applications usually also provide option menus to manipulate their functions through the tapping of the <strong>Menu</strong> hardware key.</p>
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Hardware key events are only supported in mobile devices.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<p>Normally, the key events are only delivered to the object in focus. However, with the EFL Extension functions, you can let visible objects without focus get events from the <strong>Menu</strong> and <strong>Back</strong> keys.</p>
+
+ <p class="figure">Figure: Menu and Back keys</p> 
+<p align="center"><img alt="Menu and Back keys" src="../../images/efl_phone.png" /></p> 
+
+<p>The EFL Extension maintains its own object stack for determining which object to deliver events to. Only visible objects are added to this stack. The stack is based on the Evas layer. It means that if 2 objects are registered for the same EFL Extension event, the object on the higher Evas layer gets the event.</p>
+
+<p>The following figure shows an example of objects and their layers. Objects 1, 2, and 3 are registered with EFL Extension callbacks for the same event, such as a <strong>Back</strong> key event. When the event occurs, object 3, which is on the highest layer (layer 3), gets the event callback.</p>
+
+<p class="figure">Figure: Objects with layers</p> 
+<p align="center"><img alt="Objects with layers" src="../../images/efl_layers.png" /></p> 
+
+<p>If objects stay on the same layer, the object which is registered to the callback first gets the event.</p>
+
+<p>To register a callback for the <strong>Menu</strong> or <strong>Back</strong> key, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_add()</span> function with the application callback type:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_BACK</span>: Hardware <strong>Back</strong> key event</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_MORE</span>: Hardware <strong>Menu</strong> key event</li>
+</ul>
+
+<p>To delete a registered event in the EFL Extension, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_del()</span> function.</p>
+
+<p>The EFL Extension also provides other convenient functions to work with the <strong>Menu</strong> and <strong>Back</strong> keys for popup (in <a href="components_mn.htm#popup">mobile</a> and <a href="components_wn.htm#popup">wearable</a> applications), ctxpopup (in <a href="components_mn.htm#ctxpopup">mobile</a> and <a href="components_wn.htm#ctxpopup">wearable</a> applications), <a href="containers_n.htm#naviframe">naviframe</a>, and entry (in <a href="components_mn.htm#entry">mobile</a> and <a href="components_wn.htm#entry">wearable</a> applications) components.</p>
+
+<h2 id="hw" name="hw">Managing Hardware Key Events</h2>
+
+<p>The application has a window that contains a naviframe and registers the EFL Extension <strong>Menu</strong> and <strong>Back</strong> key events for the naviframe.</p>
+<p>When the <strong>Menu</strong> key is pressed, a popup is created and an EFL Extension <strong>Back</strong> key event for this popup is registered. If the popup is shown and the <strong>Back</strong> key is pressed, the popup is removed. Otherwise, if the <strong>Back</strong> key is pressed and there is no popup, the application is hidden.</p>
+
+<p>To manage hardware key events:</p>
+<ol>
+<li>
+<p>To use the functions and data types of the Efl Extension API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;efl_extension.h&gt;</span> header file in your application:</p>
+<pre class="prettyprint">
+#include &lt;efl_extension.h&gt;
+</pre>
+</li>
+
+<li>Create objects using the window and naviframe:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
+
+&nbsp;&nbsp;&nbsp;// Create the window
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, _win_del, NULL);
+
+&nbsp;&nbsp;&nbsp;// Create the naviframe
+&nbsp;&nbsp;&nbsp;Evas_Object *nf = NULL;
+&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(nf);
+
+&nbsp;&nbsp;&nbsp;// Content
+&nbsp;&nbsp;&nbsp;Evas_Object *label = NULL;
+&nbsp;&nbsp;&nbsp;label = elm_label_add(nf);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(label, &quot;Press menu key to show popup,&lt;br/&gt;back key to exit.&quot;);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(nf, &quot;Efl Extension usage&quot;, NULL, NULL, label, NULL);
+
+&nbsp;&nbsp;&nbsp;// Show the window
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+
+<li>Register EFL Extension callbacks for the naviframe:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Register the EFL extension callbacks for Menu and Back key events
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_MORE, _create_popup, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_BACK, _nf_back_cb, win);
+}
+</pre>
+</li>
+
+<li>Create a popup and register EFL Extension <strong>Back</strong> key event callbacks for it:
+<pre class="prettyprint">
+static void
+_create_popup(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *parent = obj;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL, *content = NULL;
+&nbsp;&nbsp;&nbsp;popup = elm_popup_add(parent);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
+&nbsp;&nbsp;&nbsp;elm_popup_orient_set(popup, ELM_POPUP_ORIENT_CENTER);
+
+&nbsp;&nbsp;&nbsp;// Popup content
+&nbsp;&nbsp;&nbsp;content = elm_label_add(parent);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(content, &quot;Press back key to remove popup.&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, content);
+
+&nbsp;&nbsp;&nbsp;// Register the EFL extension callback for the Back key event
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_show(popup);
+}
+</pre>
+
+<p>To remove the popup when a <strong>Back</strong> key event occurs, use the <span style="font-family: Courier New,Courier,monospace;">eext_popup_back_cb</span> callback.</p>
+
+<p>The callback function for menu key callback:</p>
+<pre class="prettyprint">
+static void
+_nf_back_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = data;
+
+&nbsp;&nbsp;&nbsp;// Hide the window
+&nbsp;&nbsp;&nbsp;elm_win_lower(win);
+}
+</pre>
+</li>
+</ol>
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/layout_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/layout_tutorial_n.htm
new file mode 100755 (executable)
index 0000000..905fd28
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/layout_tutorial_n.htm
@@ -0,0 +1,752 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating UI Screen Layouts</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#init">Creating the UI Layout</a></li>
+                       <li><a href="#add_content">Adding Content to the Screen</a></li>
+                       <li><a href="#layout">Using the Base Layout</a></li>
+                       <li><a href="#base">Sample Applications with the Base Layout</a></li>
+                       <li><a href="#custom">Sample Applications with a Custom Layout</a></li>                 
+                       <li><a href="#ClockSimple">Creating a Simple Clock View</a></li>
+                       <li><a href="#ClockComplex">Creating a Complex Clock View</a></li>                      
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Creating UI Screen Layouts</h1>
+
+  
+<p>This tutorial demonstrates how you can compose a UI screen using the layout classes available in the EFL UI component library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).</p>
+
+
+ <h2 id="init" name="init">Creating the UI Layout</h2>
+
+<p>The sample application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> for the view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span>, <span style="font-family: Courier New,Courier,monospace">elm_box</span>, and <span style="font-family: Courier New,Courier,monospace">elm_grid</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_label</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates the toolbar using the <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function and adds it to naviframe.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_wm_desktop_layout_support_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;UiLayout&quot;, NULL, NULL, NULL, &quot;tabbar/icon/notitle&quot;);
+
+&nbsp;&nbsp;&nbsp;// Tabbar
+&nbsp;&nbsp;&nbsp;ad-&gt;tabbar = create_toolbar(ad);
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, ad-&gt;tabbar);
+
+&nbsp;&nbsp;&nbsp;// Set the first view
+&nbsp;&nbsp;&nbsp;tabbar_it = elm_toolbar_first_item_get(ad-&gt;tabbar);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function creates the toolbar which is then added to the naviframe.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_toolbar(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *tabbar;
+
+&nbsp;&nbsp;&nbsp;tabbar = elm_toolbar_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(tabbar, &quot;tabbar&quot;);
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Box&quot;, tabbar_item_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Grid&quot;, tabbar_item_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(tabbar, NULL, &quot;Table&quot;, tabbar_item_cb, ad);
+
+&nbsp;&nbsp;&nbsp;return tabbar;
+}
+</pre>
+
+<p>The following figure illustrates the UI Layout.</p>
+
+  <p class="figure">Figure: UI Layout screen</p> 
+  <p align="center"><img alt="UI Layout screen" src="../../images/uilayout_view2.png" /></p> 
+
+ <h2 id="add_content" name="add_content">Adding Content to the Screen</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_box_view()</span> function creates the screen using a recursive composition of the box layout.</p> 
+
+<pre class="prettyprint">static Evas_Object*
+create_box_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *box1, *box2, *box3;
+
+&nbsp;&nbsp;&nbsp;box = elm_box_add(parent);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box, 10, 10);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;box1 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box1, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box1, 8, 8);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box1);
+
+&nbsp;&nbsp;&nbsp;box2 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box2, 6, 6);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box2);
+
+&nbsp;&nbsp;&nbsp;box3 = elm_box_add(box);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(box3, 5, 5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box3, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;evas_object_show(box3);
+} 
+</pre>
+
+<p>Once the box layout is created, content or another box layout is added to the box. Box implements the size policy during the size calculation.</p> 
+
+<pre class="prettyprint">// Add an item to the box
+Evas_Object *item1 = create_content(box, &quot;Item 1&quot;);
+evas_object_size_hint_min_set(item1, 0, 40);
+elm_box_pack_end(box, item1);
+elm_box_pack_end(box, box1);
+elm_box_pack_end(box, box3);
+elm_box_pack_end(box, create_content(box, &quot;Item 4&quot;));
+
+// Add an item to the box1
+elm_box_pack_end(box1, create_content(box1, &quot;Item 2.1&quot;));
+elm_box_pack_end(box1, box2);
+elm_box_pack_end(box1, create_content(box1, &quot;Item 2.3&quot;));
+
+// Add an item to the box2
+elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.1&quot;));
+elm_box_pack_end(box2, create_content(box2, &quot;Item 2.2.2&quot;));
+
+// Add an item to the box3
+elm_box_pack_end(box3, create_content(box3, &quot;Item 3.1&quot;));
+elm_box_pack_end(box3, create_content(box3, &quot;Item 3.2&quot;));
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_table_view()</span> function creates the screen by composing table layout with content and grid view.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_table_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *table, *item;
+
+&nbsp;&nbsp;&nbsp;table = elm_table_add(parent);
+&nbsp;&nbsp;&nbsp;elm_table_padding_set(table, 10, 10);
+&nbsp;&nbsp;&nbsp;elm_table_homogeneous_set(table, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(table, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 1&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 0, 2, 1);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 2&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 2, 0, 1, 1);
+
+&nbsp;&nbsp;&nbsp;item = create_content(table, &quot;Item 3&quot;);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 1, 3, 1);
+
+&nbsp;&nbsp;&nbsp;// Add a grid view item
+&nbsp;&nbsp;&nbsp;item = create_grid_view(table);
+&nbsp;&nbsp;&nbsp;evas_object_show(item);
+&nbsp;&nbsp;&nbsp;elm_table_pack(table, item, 0, 2, 3, 10);
+
+&nbsp;&nbsp;&nbsp;return table;
+}
+</pre>
+
+<p>The table layout can be used for freestyle layouting, and for standard layouts, such as lists and grids. It does not consider the size policy of the child item during size calculation.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_grid_view()</span> function composes a screen using the grid layout and also uses box and table layout as a child item to pack inside a grid. It uses free style layouting, and during size evaluation of the child item, it does not take the size policy of the child item into consideration.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_grid_view(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *grid, *item;
+
+&nbsp;&nbsp;&nbsp;grid = elm_grid_add(parent);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;// Red background for the grid
+&nbsp;&nbsp;&nbsp;item = create_bg(grid, 255, 0, 0);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 0, 0, 100, 100);
+
+&nbsp;&nbsp;&nbsp;// Add the item to the grid
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item1&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 1, 1, 98, 98);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item2&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 5, 20, 20);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item3&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 23, 5, 76, 94);
+
+&nbsp;&nbsp;&nbsp;item = create_content(grid, &quot;Item4&quot;);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 2, 27, 20, 70);
+
+&nbsp;&nbsp;&nbsp;// Black background for the box view item
+&nbsp;&nbsp;&nbsp;item = create_bg(grid, 40, 40, 40);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 25, 10, 73, 87);
+
+&nbsp;&nbsp;&nbsp;// Add the box view item to the grid
+&nbsp;&nbsp;&nbsp;item = create_box_view(grid);
+&nbsp;&nbsp;&nbsp;evas_object_show(item);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, item, 26, 11, 71, 85);
+
+&nbsp;&nbsp;&nbsp;return grid;
+}
+</pre>
+
+ <h2 id="layout" name="layout">Using the Base Layout</h2>
+
+<p>When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and UI component hierarchy of the base layout:</p>
+
+<p class="figure">Figure: Base layout wireframe and UI component hierarchy</p>
+<p align="center"><img alt="Base layout wireframe and UI component hierarchy" src="../../images/base_layout.png"/></p>
+
+<p>The UI components have the following roles:</p>
+
+<ul>
+ <li>Window (Elm_win): Every UI component from Elementary is rendered in a Window.</li>
+ <li>Conformant (Elm_Conformant): The Conformant supports the indicator area and resizing the application due to rotation or the ISF (keypad).</li>
+ <li>Naviframe (Elm_Naviframe): The Naviframe acts as a view manager and optionally provides the application title. The main layout of the application is added to the Naviframe's view area.</li>
+</ul>
+
+
+<h2 id="base" name="base">Sample Applications with the Base Layout</h2>
+
+<h3>Setting</h3>
+
+<p>The Setting application consists of a list to show as a menu. For organizing the application, create the application layout with a screen-size-list and place the layout into the Naviframe's view area.</p>
+
+<p class="figure">Figure: Setting UI and layout</p>
+<p align="center"><img alt="Settings UI and layout" src="../../images/setting_sd.png"/></p>
+
+<p>For more information, see the Setting sample application.</p>
+
+<h3>Application Store</h3>
+
+<p>For organizing the Application Store application, you need to add a scroller to the base layout, since the total height of the layout will be greater than the screen size, and you will therefore need to scroll the screen contents up and down. If the layout is larger than the screen, the scroller makes the view itself scrollable.</p>
+
+<p>You can use a list or grid if the same objects are shown repeatedly. In this sample application, however, the various items are shown in a layout.</p>
+
+<p class="figure">Figure: Application Store UI and layout</p>
+<p align="center"><img alt="Application Store UI and layout" src="../../images/application_store_sd.png"/></p>
+
+<p>For more information, see the Application Store sample application.</p>
+
+<h2 id="custom" name="custom">Sample Applications with a Custom Layout</h2>
+
+<h3>Calculator - No Naviframe</h3>
+
+<p>The Calculator is a good example of an exception to the base layout. The application has no view changes and no application title. As these are the two reasons why you should use a Naviframe, you do not need to add a Naviframe to the Calculator.</p>
+
+<p>You can organize the application layout with container components. Container components are used for arranging UI components, both basic UI components and other container components.</p>
+
+<p class="figure">Figure: Calculator UI and layout</p>
+<p align="center"><img alt="Calculator UI and layout" src="../../images/calculator_sd.png"/></p>
+
+<p>For more information, see the Calculator sample application.</p>
+
+<h3>Email - Drawer</h3>
+
+<p>The Email application shows information using a list. The main view is the same as in the Setting application, consisting of a screen-size-list for displaying emails. However, the Email application has an additional feature: the Drawer, which is used for displaying the menu with a hierarchy.</p>
+
+<p>To develop the application as a Tizen native application, add a layout on the Conformant, and add a Naviframe to the layout. This layout has a content area for the Drawer and Naviframe, and its style name is "layout/drawer/panel". To use this layout, use the following code:</p>
+
+<pre class="prettyprint">
+layout = elm_layout_add(parent);
+elm_layout_theme_set(layout, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
+</pre>
+
+<p>The style includes parts for locating the Drawer and the main view. In the Drawer area, you can add a list to indicate the menu. In the main view, you can add a Naviframe to organize the view of the layout.</p>
+
+<p class="figure">Figure: Email UI and layout</p>
+<p align="center"><img alt="Email UI and layout" src="../../images/email_sample.png"/></p>
+
+<p>For more information, see the Email sample application.</p>
+
+ <h2 id="ClockSimple" name="ClockSimple">Creating a Simple Clock View</h2>
+
+<p>This sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box, container component, and label to create a basic layout. The application includes the following UI components:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
+</ul> 
+
+<p>The following figure illustrates the main view of the simple clock sample application and its wireframe structure.</p>
+  
+<p class="figure">Figure: Simple clock screen</p>
+<p align="center"><img alt="Simple clock screen" src="../../images/efl_simple_clock.png" /></p>
+
+<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
+
+<pre class="prettyprint">typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;// Save the window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+} 
+appdata_s;
+</pre>
+
+<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the HW back key.</p> 
+
+<p>The  single callback function for application handling is <span style="font-family: Courier New,Courier,monospace">app_create</span>, and it only creates the basic GUI:</p>
+
+<pre class="prettyprint">int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = app_main(argc, argv, &amp;event_callback, &amp;ad);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;app_main() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function to create a basic layout with a window, conformant and naviframe. This is the basic layout in the Tizen mobile environment.</p>
+  
+<pre class="prettyprint">ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+// Conformant
+conform = elm_conformant_add(ad-&gt;win);
+elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(ad-&gt;win, conform);
+evas_object_show(conform);
+
+// Naviframe
+nf = elm_naviframe_add(conform);
+elm_object_content_set(conform, nf);
+evas_object_show(nf);
+</pre>
+
+<p>After creating a basic layout, create the main layout for the application. In this sample, it contains a box with 3 labels. The labels show the time, city and date. To add the labels to the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function.</p>
+  
+<p>After adding the labels, you must set their text. You can set or decorate the text in the labels using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function. You can modify the text size (<span style="font-family: Courier New,Courier,monospace">font_size</span>), color (<span style="font-family: Courier New,Courier,monospace">color</span>), and thickness (<span style="font-family: Courier New,Courier,monospace">b</span>).</p>
+  
+  <pre class="prettyprint">
+// Add the box
+box = elm_box_add(nf);
+// Create a label
+label1 = elm_label_add(box);
+// Set text to the label with a tag
+elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
+// Add the label to the box
+elm_box_pack_end(box, label1);
+// Change label visibility
+evas_object_show(label1);
+
+// Repeat with other labels
+
+evas_object_show(box);
+</pre>
+
+<p>After creating the box with labels, set the box as a new view. You can also set the title of the application. These operations are handled by the naviframe using the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_push()</span> function:</p>
+  
+  <pre class="prettyprint">elm_naviframe_item_push(nf, _(&quot;World Clock&quot;), NULL, NULL, box, &quot;basic&quot;);</pre>
+  
+<p>The parameters include the title, the name of the UI component added as a new view, and the naviframe style. The basic style is used for a simple view with normal title.</p>
+  
+  <p>The following figure illustrates the UI component hierarchy of the application.</p>
+
+<p class="figure">Figure: Simple clock components</p>
+<p align="center"><img alt="Simple clock components" src="../../images/efl_simple_clock_tree.png" /></p>
+  
+<p>Set the HW key handler. The Tizen mobile environment supports the <strong>More</strong> and back keys, but only the back key is handled in this sample. </p> 
+<pre class="prettyprint">eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+</pre> 
+
+<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback will hide the window:</p> 
+<pre class="prettyprint">static void
+win_back_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+</pre>
+
+ <h2 id="ClockComplex" name="ClockComplex">Creating a Complex Clock View</h2>
+ 
+<p>This sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following UI components:</p>
+
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_genlist</span>: List component</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_button</span>: Simple push button</li>
+</ul> 
+  
+<p>The following figure illustrates the main view of the complex clock sample application and its wireframe structure.</p>
+  
+<p class="figure">Figure: Complex clock screen</p>
+<p align="center"><img alt="Complex clock screen" src="../../images/efl_complex_clock.png" /></p>
+
+<h3>Basic GUI</h3> 
+
+<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
+
+<pre class="prettyprint">typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;// Save the window
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+} 
+appdata_s;
+</pre>
+
+<p>The information in <span style="font-family: Courier New,Courier,monospace">appdata</span> is used for the entire system. In this sample application, the information is related to handling the HW back key.</p> 
+
+<p>The  single callback function for application handling is <span style="font-family: Courier New,Courier,monospace">app_create</span>, and it only creates the basic GUI:</p>
+
+<pre class="prettyprint">int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;app_event_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = app_main(argc, argv, &amp;event_callback, &amp;ad);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;app_main() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>The base GUI of the application contains the following elements:</p>
+
+<ul>
+<li>Clock</li>
+<li>List</li>
+<li>Main layout with buttons</li>
+</ul>
+
+<h3>Clock</h3> 
+
+ <p>The clock element contains 3 labels. The labels are packed as a single box component, which is part of the main layout.</p> 
+<pre class="prettyprint">static Evas_Object *
+create_clock(Evas_Object *nf)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box, *label1, *label2, *label3;
+
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
+
+&nbsp;&nbsp;&nbsp;label1 = elm_label_add(box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(label1, &quot;&lt;font_size=110&gt;&lt;color=#000000&gt;07:26&lt;/color&gt;&lt;/font_size&gt;&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, label1);
+&nbsp;&nbsp;&nbsp;evas_object_show(label1);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+
+&nbsp;&nbsp;&nbsp;return box;
+}
+</pre>
+
+<h3>List</h3> 
+
+<p>This element contains a list of cities. The UI component used is <span style="font-family: Courier New,Courier,monospace">genlist</span>, which is a complex list able to show information with various styles.</p> 
+<pre class="prettyprint">static Evas_Object *
+create_list(Evas_Object *nf)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object* list;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc = NULL;
+&nbsp;&nbsp;&nbsp;int i, num_of_item;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;list = elm_genlist_add(nf);
+</pre> 
+  
+<p>To add items to the list, use the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> class. After adding a new class, set callback function to detect, when the item is rendered. </p> 
+<pre class="prettyprint">itc = elm_genlist_item_class_new();
+&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;2line.top.4&quot;;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = gl_text_get_cb;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = NULL;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.del = NULL;
+</pre> 
+
+<p>In this application, all the list items are similar and use the same callback function (<span style="font-family: Courier New,Courier,monospace">gl_text_get_cb()</span>) for setting text, so only 1 item class is created:</p> 
+<pre class="prettyprint">static char*
+gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;item_data_s *id = data;
+&nbsp;&nbsp;&nbsp;char buf[1024];
+
+&nbsp;&nbsp;&nbsp;if (id-&gt;index == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text.main.left.top&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;07:26&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.top&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Cardiff&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.left.bottom&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;Wen, Jan 1&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub.right.bottom&quot;)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 1023, &quot;%s&quot;, &quot;wales&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre> 
+
+<p>Append items using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function. In this application, 3 items are added:</p> 
+<pre class="prettyprint">num_of_item = 3;
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; num_of_item; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item_data_s *id = calloc(sizeof(item_data_s), 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(list,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = it;
+&nbsp;&nbsp;&nbsp;}
+</pre>
+ 
+ <h3>Main Layout with a Button</h3> 
+ 
+<p>In the main layout, the other layout elements are merged together and a button added. The following example describes handling the main layout:</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *conform, *nf, *box, *clock, *layout, *rect, *button;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(conform);
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(conform, nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(nf);
+}
+</pre> 
+
+<p>The box component is used to organize the main layout. The box is expanded as much as possible to fill the entire view.</p> 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre> 
+
+<p>The box contains the following elements:</p> 
+
+<ul>
+
+<li><p>The clock element contains 3 labels. The parameter for the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function is 0.1 meaning that the height of the clock box occupies 30% of the available area. </p> 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;clock = create_clock(nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(clock, EVAS_HINT_EXPAND, 0.3);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(clock, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, clock);
+</pre> 
+</li>
+
+<li><p>The list element is packed into the box. As the <span style="font-family: Courier New,Courier,monospace">genlist</span> elements does not have a determined size, its size depends on the <span style="font-family: Courier New,Courier,monospace">layout</span> parameter.</p> 
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(box);
+&nbsp;&nbsp;&nbsp;elm_layout_theme_set(layout, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;rect = create_list(nf);
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(layout, &quot;elm.swallow.content&quot;, rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(layout);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, layout);
+</pre> 
+</li>
+
+<li><p>The button element has a callback function to detect, when the button is clicked.</p> 
+<pre class="prettyprint">button = elm_button_add(box);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, btn_clicked_cb, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.1);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Terminate&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(button);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, button);
+</pre> 
+</li>
+</ul>
+
+<p>The following figure illustrates the UI component hierarchy of the application.</p>
+
+<p class="figure">Figure: Complex clock components</p>
+<p align="center"><img alt="Complex clock components" src="../../images/efl_complex_clock_tree.png" /></p>
+
+<p>Add the main layout to the naviframe, and set the HW key handler:</p> 
+<pre class="prettyprint">eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+</pre> 
+
+<p>After setting the callback function, the <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback is invokes when a back key is pressed. The <span style="font-family: Courier New,Courier,monospace">win_back_cb</span> callback will hide the window:</p> 
+<pre class="prettyprint">static void
+win_back_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+}
+</pre> 
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/main_loop_n.htm b/org.tizen.ui.guides/html/native/efl/main_loop_n.htm
new file mode 100755 (executable)
index 0000000..0b1eb5e
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/main_loop_n.htm
@@ -0,0 +1,409 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Handling the Main Loop</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#start">Starting the Main Loop</a></li>
+                       <li><a href="#Timers">Timers</a></li>
+                       <li><a href="#Animators">Animators</a></li>
+                       <li><a href="#Descriptors_Handling">File Descriptors</a></li>
+                       <li><a href="#Threads">Threads</a></li>
+                       <li><a href="#Idlers">Idlers</a></li>
+               </ul>
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Handling the Main Loop</h1> 
+  
+<p>The EFL is event-driven. This means that the application polls for data, and listens for events to interact with it.</p>
+
+<p>The Ecore library provides the main loop abstraction. It gets data when data is available and sends the events so that costly polling threads are not needed. Ecore manages polling, timers, events, and file descriptors. When there is no ongoing event, the main loop automatically enters an idle mode, minimizing the power consumption. The loop wakes up when needed.</p>
+  
+ <h2 id="start" name="start">Starting the Main Loop</h2>
+
+<p>To start the Ecore main loop and move your application into the running state, call the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
+
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>  
+
+<p>When your application is running:</p> 
+<ol><li>Create a window and organize the UI components inside the window.</li>
+<li>Create the application logic code to be called when callbacks or timed events occurs (for example, animators for animations and timers for timeouts).</li></ol>
+
+  
+<h2 id="Timers" name="Timers">Timers</h2>
+
+<p>Ecore provides timers, which schedule events that are executed later at a specific time. The event can occur once or several times at specific intervals.</p>
+
+<p>A timer callback prototype looks like the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> callback function. This function receives data from the application, and returns a Boolean value to specify whether it is called again or completed. The following macros are also provided:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>: the function is called again after the timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>: the function is not called again, Ecore destroys automatically everything associated with the timer.</li>
+</ul>
+
+<p>To create and destroy a timer:</p>
+
+<ul>
+<li>To create a timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> function. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Timer</span> object.
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> function is run after 2 seconds and it receives <span style="font-family: Courier New,Courier,monospace;">my_data</span>. It is renewed while its count variable value is under 5, and stops after that.</p>
+<pre class="prettyprint">
+Eina_Bool my_timed_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;count++;
+
+&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_timer_add(2.0, my_timed_cb, my_data);
+</pre>
+</li>
+
+<li>To delete the timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_del()</span> function. The timer to delete must still be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the timer is not running, the function cannot be called.</li>
+</ul>
+
+<p>To manage a timer:</p>
+<ul>
+<li>To change the timer&#39;s interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_set()</span> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_get()</span> function to get the timer&#39;s current interval.</li>
+
+<li>To get the timer&#39;s pending time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_pending_get()</span> function.</li>
+
+<li>To delay the timer&#39;s next occurrence, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_delay()</span> function. The function adds the specified time to the current interval. It does not change the future occurrences&#39; interval. You can also reset the current interval to its full value by using the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_reset()</span> function.</li>
+
+<li>To pause the currently running timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_freeze()</span> function. The remaining time is saved and used again when the timer is resumed with the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_thaw()</span> function.</li>
+
+<li>To query the current value of the defined timer infrastructure precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_get()</span> function. A higher delay means that more timers can be run together. It diminishes the need to use system wake-ups and thus lowers the power consumption.
+<p>To set the precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_set()</span> function. This sets the precision for all timers. For example, there are 2 timers, one that expires in 2.0 seconds and another that expires in 2.1 seconds. If the precision is set to 0.1 seconds, Ecore requests the next expiration to happen in 2.1 seconds and runs both callbacks at once, instead of one at 2.0 seconds and the other one 0.1 seconds later. However, if there is no timer expiring in 2.1 seconds, the timeout is at the minimum interval, 2 seconds.</p></li>
+</ul>
+
+<h2 id="Animators" name="Animators">Animators</h2>
+
+<p>Animators are a specific type of timer, specially designed for on-screen animation purposes:</p>
+
+<ul>
+<li>The time interval is usually known when they are created.</li>
+<li>They are called at each screen refresh and their interval can vary. The interval can depend on the system load, the target power consumption, and other factors. The exact interval is not relevant.</li>
+</ul>
+
+<p>To implement animators, Ecore provides the Ecore animator subsystem.</p>
+
+<h3>Forever-running Animator</h3>
+
+<p>To create an animation that runs for an indefinite time: </p>
+
+<pre class="prettyprint">
+Eina_Bool my_anim_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;static int count = 0;
+&nbsp;&nbsp;&nbsp;count++;
+&nbsp;&nbsp;&nbsp;if (count &lt; 5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_animator_add(my_anim_cb, my_data);
+</pre>
+
+<p>This example looks the same as the one using an Ecore timer. The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function takes the callback function and data to pass to it, and returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. The function is called at a system-defined interval until it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> instead of <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>.</p>
+
+<h3>Specific-duration Animator</h3>
+
+<p>An animator callback for an animator running a specific time has a different prototype than the forever running animator.</p>
+
+<p>This callback function receives both data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to abort, or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to continue.</p>
+
+<p>To create and destroy the animator:</p>
+<ul>
+<li>To create the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function. The first parameter specifies the animator duration, the second parameter is the callback function, and the third parameter is the data to pass to the callback. The data parameter is optional.
+<pre class="prettyprint">
+Eina_Bool my_anim_cb(void *data, double position)
+{
+&nbsp;&nbsp;&nbsp;if (position &lt; .5) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+ecore_animator_timeline_add(5., my_anim_cb, my_data);
+</pre>
+
+<p>In this example, the animator is specified to run for five seconds. The function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> as soon as the position among the timeline passes half of the duration, 2.5 seconds.</p>
+
+<p>Ecore can generate a virtual position from the original one using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map(position, map, v1, v2)</span>. Several maps are available:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear from 0.0 to 1.0.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient <span style="font-family: Courier New,Courier,monospace;">* v1</span>, interpolated with the power of <span style="font-family: Courier New,Courier,monospace;">v2</span> curve.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then wobble like a spring to the rest position 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
+</ul>
+
+<p class="figure">Figure: Position maps</p> 
+<p align="center"><img alt="Position maps" src="../../images/pos_map_all.png" /></p> 
+</li>
+
+<li>To destroy the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function. The animator to destroy must be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the animator is not running, the function cannot be called.</li>
+</ul>
+
+<p>To manage the animator:</p>
+<ul>
+<li>To pause the currently running animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function. Note that time continues ticking even if the animator is frozen, and that resuming the animation using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function does not actually resume, if the full runtime has been passed in the meanwhile.</li>
+
+<li>To query Ecore for the interval between 2 animator calls, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</li>
+
+<li>To change the interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set(interval)</span> function. Note that too small a value causes performance and power consumption issues, and too high a value makes the animation jerky.</li>
+</ul>
+
+<h2 id="Descriptors_Handling" name="Descriptors_Handling">File Descriptors</h2>
+
+<p>Ecore provides an infrastructure to monitor file descriptors, so that files do not have to be blocked or polled to read or write on them. Instead, monitor sockets, pipes, or other streams are used to get a file descriptor.</p>
+
+<p>To manage the file descriptors:</p>
+<ul>
+<li>To set a callback, use the <span style="font-family: Courier New,Courier,monospace;">_my_cb_func()</span> function. Its first parameter is the data passed to it (optional), and the second one is the Ecore file descriptor handler. Its return value is, as in most Ecore callbacks, <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>. It tells Ecore whether it wants to be called again or whether its treatment is finished.</li>
+
+<li>To listen to events, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_add()</span> function.</li>
+
+<li>To wait for incoming data (that is, to read data) on the <span style="font-family: Courier New,Courier,monospace;">my_fd</span> file descriptor, passing <span style="font-family: Courier New,Courier,monospace;">my_data</span>:
+
+<pre class="prettyprint">
+Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
+{
+&nbsp;&nbsp;&nbsp;int fd;
+&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
+&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
+</pre>
+</li>
+
+<li>To delete a file descriptor handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_del()</span> function. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</li>
+
+<li>To get the handler&#39;s file descriptor, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_fd_get()</span> function.</li>
+
+<li>To select whether a flag is active on a handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_get()</span> function. For example, the handler is set to monitor both <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> and <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span>. The following example finds out whether the function was called because of an error:
+
+<pre class="prettyprint">
+Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
+{
+&nbsp;&nbsp;&nbsp;int fd;
+&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
+&nbsp;&nbsp;&nbsp;if (ecore_main_fd_handler_active_get(handler, ECORE_FD_ERROR) == EINA_TRUE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// We have an error!
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); // This is guaranteed not to block
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb, my_data, NULL, NULL);
+</pre>
+</li>
+
+<li>To change the flags the handler is monitoring, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_set()</span> function.</li>
+</ul>
+
+<h2 id="Threads" name="Threads">Threads</h2>
+
+<p>EFL is not entirely thread-safe. This means that if a task is running in another thread and, for example, an Evas object shows the status progress of this task, the object cannot be updated from within the thread. Updating can only be done from the main thread that runs the main loop.</p>
+
+<p>Ecore provides a facility to perform tasks on separate worker threads. It is not a simple wrapper around standard threads provided by the operating system. With Ecore threads, it is easier to dispatch a worker function to perform some heavy tasks and get the result once it completes. It does not block the application UI. It is also easy to cancel and reschedule threads. Several threads can be launched simultaneously, since Ecore schedules them according to the number of processors the system has and the maximum amount of concurrent threads set for the application.</p>
+
+<p>Ecore has 2 kinds of threads:</p>
+<ul>
+<li>Short jobs do not give any kind of information on their status to the parent. They are best used for short computing-intensive snippets of code.</li>
+<li>Feedback jobs give information on their status to the parent. They are best used for longer snippets requiring a feedback loop, such as an ongoing file download.</li>
+</ul>
+
+<p>Ecore creates a pool of worker threads. The exact count is computed from the number of CPUs or cores, or it can be specified by the application itself.</p>
+
+<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left. In the following example, there are 2 threads defined by <span style="font-family: Courier New,Courier,monospace;">my_short_job()</span> and <span style="font-family: Courier New,Courier,monospace;">my_feedback_job()</span>. Both threads take 2 parameters: some data passed to them, and the actual thread running. Call a callback when the jobs end, whether they are cancelled (<span style="font-family: Courier New,Courier,monospace;">my_job_cancel()</span>) or end normally (<span style="font-family: Courier New,Courier,monospace;">my_job_end()</span>).</p>
+
+<pre class="prettyprint">
+struct feedback_msg
+{
+&nbsp;&nbsp;&nbsp;int pos;
+};
+
+void my_short_job(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;usleep(200000);
+}
+
+void my_feedback_job(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;int i;
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 100; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usleep(50000); // You can have some real computation done
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct feedback_msg *message = malloc(sizeof(struct feedback_msg));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (message) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message-&gt;pos = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, message);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ecore_thread_check(thread))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+}
+
+void my_feedback_job_notify(void *data, Ecore_Thread *thread, void *msg)
+{
+&nbsp;&nbsp;&nbsp;struct feedback_msg *message = msg;
+&nbsp;&nbsp;&nbsp;free(message);
+}
+
+void my_job_end(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has normally ended.\n&quot;);
+}
+
+void my_job_cancel(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has been cancelled.\n&quot;);
+}
+
+ecore_thread_run(my_short_job, my_job_end, my_job_cancel, my_data);
+ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;my_job_cancel, my_data, EINA_FALSE);
+</pre>
+
+<p>To manage threads:</p>
+
+<ul>
+<li>To cancel a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel()</span> function. However, note that this is done cooperatively: the thread continues to run until it exists. Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> function regularly to check whether the thread has been marked for cancellation and exit if <span style="font-family: Courier New,Courier,monospace;">true</span>.</li>
+
+<li>To run threads that are not accounted for in the worker thread pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function with the last parameter set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.
+
+<p>The feedback message a thread sends as notification can be any kind of data. In the above example, it is a simple integer, but it can be as complex as needed.</p>
+</li>
+
+<li>To execute a thread later, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule()</span> function. This function is added to the end of the pending tasks.</li>
+
+<li>To get the maximum number of concurrent threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function. If needed, set it by using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function, or reset the default value using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.</li>
+
+<li>To query the number of active threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span> function. To query the number of available worker threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function, which is basically the same as the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> - <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>.</li>
+</ul>
+
+<h2 id="Idlers" name="Idlers">Idlers</h2>
+
+<p>When the rendering is done and all work is finished, the main loop enters its idle state until the next loop. You can get the functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Enterer</span>, <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Exiter</span>, and <span style="font-family: Courier New,Courier,monospace;">Ecore_Idler</span>.</p>
+
+<p class="figure">Figure: Idle loop</p> 
+<p align="center"><img alt="Idle loop" src="../../images/idlers.png" /></p> 
+
+<p>The idle enterers, exiters, and idlers all have the same prototype, <span style="font-family: Courier New,Courier,monospace;">my_idler()</span>, which receives data and returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to tell Ecore whether it wants to be called again or is finished.</p>
+
+<p>To manage the idlers:</p>
+<ul>
+<li>To add an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_add()</span> function.</li>
+<li>To delete an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function.</li>
+
+<li>To add and delete idle exiters, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_del()</span> functions.</li>
+
+<li>To add and delete idle enterers, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_del()</span> functions. The <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_before_add()</span> function is also available, if you want your function to be added at the top of the list so that it is called before the others.</li>
+</ul>
+
+<pre class="prettyprint">
+Eina_Bool my_idle_enterer_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+
+Eina_Bool my_idle_exiter_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+}
+
+Eina_Bool my_idler(void *data)
+{
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+
+ecore_idle_enterer_add(my_idle_enterer_cb, my_data);
+ecore_idle_exiter_add(my_idle_exiter_cb, my_data);
+ecore_idler_add(my_idler_cb, my_data);
+</pre>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/menu_tutorial_mn.htm b/org.tizen.ui.guides/html/native/efl/menu_tutorial_mn.htm
new file mode 100755 (executable)
index 0000000..2ea5471
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/menu_tutorial_mn.htm
@@ -0,0 +1,541 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Mobile Menus</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#structure">Defining the Application &quot;Structure&quot;</a></li>
+                       <li><a href="#theme">Defining the Application Theme</a></li>
+                       <li><a href="#basic_ui">Creating the Basic UI</a></li>
+                       <li><a href="#hidden_menu">Creating a Hidden Menu</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Mobile Menus</h1>
+
+  
+<p>This tutorial shows how to add menus to the application. The example code creates an application with 3 views, these views are showed by an interaction with a menu bar, placed on the top of the application. The application has also a hidden menu that appears only when the menu button is pressed.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+               
+ <h2 id="structure" name="structure">Defining the Application &quot;Structure&quot;</h2>
+ 
+<p>Define the structure of the application:</p>
+ <pre class="prettyprint">typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;Evas_Object* win; // The main window
+&nbsp;&nbsp;&nbsp;Evas_Object* layout; // The Edje layout
+&nbsp;&nbsp;&nbsp;Evas_Object* conform; // The conform
+&nbsp;&nbsp;&nbsp;Evas_Object *nf; // The Naviframe to handle the views
+&nbsp;&nbsp;&nbsp;appmenu_s *menu; // The main menu
+&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu; // The side menu
+&nbsp;&nbsp;&nbsp;mainview_s *main_view; // The main view (dayselector)
+&nbsp;&nbsp;&nbsp;calview_s *cal_view; // The calendar view
+&nbsp;&nbsp;&nbsp;dateview_s *date_view; // The date and time view
+&nbsp;&nbsp;&nbsp;settview_s *settings_view; // The settings view
+&nbsp;&nbsp;&nbsp;Eina_Bool sdmenu_up; // A Boolean variable to keep the side menu status
+} appdata_s;
+</pre>
+<p>This structure contains some specific variables for the views and the menus.</p>
+<p>Define the main view by using the structure <span style="font-family: Courier New,Courier,monospace">mainview</span>, it is composed of a <span style="font-family: Courier New,Courier,monospace">box</span> (the main container), a <span style="font-family: Courier New,Courier,monospace">dayselector</span>, an image <span style="font-family: Courier New,Courier,monospace">img</span>, and a label <span style="font-family: Courier New,Courier,monospace">lb_main</span>.</p>
+ <pre class="prettyprint">typedef struct mainview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view
+&nbsp;&nbsp;&nbsp;Evas_Object *colorselector; // A color selector
+&nbsp;&nbsp;&nbsp;Evas_Object *img; // An image 
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_day; // A label
+} mainview_s;
+</pre>
+<p>The date view is very similar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">datetime</span> component and a label <span style="font-family: Courier New,Courier,monospace">lb_date</span>.</p>
+ <pre class="prettyprint">typedef struct dateview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view 
+&nbsp;&nbsp;&nbsp;Evas_Object *datetime; // A datetime component 
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_date; // A label 
+} dateview_s;
+</pre>
+<p>The last view is the calendar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">calendar</span> and a label <span style="font-family: Courier New,Courier,monospace">lb_cal</span>.</p>
+ <pre class="prettyprint">typedef struct calview
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box; // The main container of the view 
+&nbsp;&nbsp;&nbsp;Evas_Object *calendar; // A calendar component  
+&nbsp;&nbsp;&nbsp;Evas_Object *lb_cal; // A label component
+} calview_s;
+</pre>
+<p>The last members of the application structure are the 2 menus. The main menu is fixed and visible, and the side menu is hidden on application starts. These menus are represented by the <span style="font-family: Courier New,Courier,monospace">appmenu</span> structure.</p>
+ <pre class="prettyprint">typedef struct appmenu
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *tb; // The toolbar
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *submenu; // The submenu item
+} appmenu_s;
+</pre>
+
+ <h2 id="theme" name="theme">Defining the Application Theme</h2>
+
+<p>After the structure is defined, define the UI. In this tutorial, Basic EDC UI Application is used. </p>
+<p>This application structure is based on this skeleton:</p>
+
+<p class="figure">Figure: Menu skeleton</p> 
+<p align="center"><img alt="Menu skeleton" src="../../images/menu_skeleton.png" /></p>
+  
+
+<p>The window, the conformant and the layout are set by the Basic EDC UI Application skeleton. Setup the containers for UI components and views.</p>
+<p>Create the <span style="font-family: Courier New,Courier,monospace">main_menu</span> <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part in the <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
+ <pre class="prettyprint">
+part
+{
+&nbsp;&nbsp;&nbsp;name: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.18;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;}
+} // End menu/main
+</pre>
+<p>This part has two descriptions, one for the real position named <span style="font-family: Courier New,Courier,monospace">up</span> and another out of the screen as the default position. Create these states to animate the menu on application start. The animation is run by <span style="font-family: Courier New,Courier,monospace">animation,menu_main</span>.</p>
+ <pre class="prettyprint">program
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_main&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.5;
+} // END animation,menu_main
+</pre>
+<p>For more information about animations, see the Effects tutorial.</p>
+<p>Create another container for the views. This container is also a &quot;SWALLOW&quot; part.</p>
+ <pre class="prettyprint">part 
+{
+&nbsp;&nbsp;&nbsp;name: &quot;view/main&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 1.1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;menu/main&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255; 
+&nbsp;&nbsp;&nbsp;}
+} // END view/main 
+</pre>
+<p>This part has also two descriptions for animation purpose, like the <span style="font-family: Courier New,Courier,monospace">main_menu</span> part.</p>
+<p>The program:</p>
+ <pre class="prettyprint">program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,view_main&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;load&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;view/main&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} // END animation,view_main
+</pre>
+<p>The last container is the side menu called <span style="font-family: Courier New,Courier,monospace">menu/side</span>.</p>
+ <pre class="prettyprint">
+part 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: -0.3 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: -0.3 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255; 
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;up&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.01;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.3 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+&nbsp;&nbsp;&nbsp;}
+} // END menu/side
+</pre>
+<p>By default, this container is hidden. Clicking menu button makes it appear. The second description places the container on the left of the screen. Here is the program to run animation:</p>
+ <pre class="prettyprint">
+ program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} // END animation,menu_side
+</pre>
+<p>This program runs when it receives an event called <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
+<p>Create a program that does the opposite and starts when it receives a signal called <span style="font-family: Courier New,Courier,monospace">hide,menu_side</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
+ <pre class="prettyprint">
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} // END animation,menu_side,hide
+
+program 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side&quot;;
+&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
+&nbsp;&nbsp;&nbsp;signal: &quot;show,sidemenu&quot;;
+&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;up&quot; 1.0;
+&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
+&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+} // END animation,menu_side
+</pre>
+
+ <h2 id="basic_ui" name="basic_ui">Creating the Basic UI</h2>
+
+<p>The view container <span style="font-family: Courier New,Courier,monospace">view/main</span> is structured like this:</p>
+
+
+<p class="figure">Figure: Main view</p> 
+<p align="center"><img alt="Main view" src="../../images/view_main.png" /></p>
+
+<p>The naviframe contains and manages the boxes. For more information, see the Container programming guide. This UI component handle views. In this example each view is contained in a <span style="font-family: Courier New,Courier,monospace">box</span> and the <span style="font-family: Courier New,Courier,monospace">box</span> is contained in the naviframe.</p>
+<p>Create the naviframe in the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function and allocate the memory to handle the views and menus of the application.</p>
+ <pre class="prettyprint">
+// Memory allocation
+ad-&gt;main_view = calloc(1, sizeof(mainview_s)); // Allocating memory for the main view 
+ad-&gt;cal_view = calloc(1, sizeof(calview_s));   // Allocating memory for the calendar view 
+ad-&gt;date_view = calloc(1, sizeof(dateview_s)); // allocating memory for the date view 
+ad-&gt;settings_view = calloc(1, sizeof(settview_s)); // allocating memory for the Settings view
+// END of Memory allocation
+</pre>
+<p>Use <span style="font-family: Courier New,Courier,monospace">app_terminate</span> function to free the memory:</p>
+ <pre class="prettyprint">app_terminate(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Release all resources
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+
+&nbsp;&nbsp;&nbsp;free(ad-&gt;menu);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;sidemenu);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;main_view);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;cal_view);
+&nbsp;&nbsp;&nbsp;free(ad-&gt;settings_view);
+} // END of app_terminate
+</pre>
+<p>Create the naviframe:</p>
+
+<p>Create the main menu after most of the containers are created. First create a new <span style="font-family: Courier New,Courier,monospace">_build_main_menu</span> function, it takes an <span style="font-family: Courier New,Courier,monospace">appdata_s</span> as a parameter. This function is called by <span style="font-family: Courier New,Courier,monospace">create_base_gui</span>.</p>
+ <pre class="prettyprint">static void _build_main_menu(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Memory allocation for the main menu function
+&nbsp;&nbsp;&nbsp;appmenu_s *menu = calloc(1, sizeof(appmenu_s));
+&nbsp;&nbsp;&nbsp;// Putting the &quot;main&quot; menu in the application data
+&nbsp;&nbsp;&nbsp;ad-&gt;menu = menu;
+
+&nbsp;&nbsp;&nbsp;// Creation of the &quot;Menu&quot; toolbar
+&nbsp;&nbsp;&nbsp;menu-&gt;tb = elm_toolbar_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Setting the &quot;Menu&quot; Toolbar properties
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(menu-&gt;tb, ELM_TOOLBAR_SHRINK_NONE);
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(menu-&gt;tb, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(menu-&gt;tb, EINA_FALSE);
+
+&nbsp;&nbsp;&nbsp;// Adding menu items to the &quot;Menu&quot; toolbar
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/calendar.png&quot;, &quot;Calendar&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Date&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(menu-&gt;tb, ICON_DIR&quot;/settings.png&quot;, &quot;Settings&quot;, _menu_item_selected_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Showing the UI component
+&nbsp;&nbsp;&nbsp;evas_object_show(menu-&gt;tb);
+
+&nbsp;&nbsp;&nbsp;// Adding the UI component to the &quot;menu/main&quot; SWALLOW container defined in the .edc theme file.
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/main&quot;, menu-&gt;tb);
+
+&nbsp;&nbsp;&nbsp;// Set the default view 
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(menu-&gt;tb), EINA_TRUE);
+}
+</pre>
+<p>Create a toolbar with <span style="font-family: Courier New,Courier,monospace">elm_toolbar_add</span>. This toolbar is a child of the main window so set <span style="font-family: Courier New,Courier,monospace">ad-&gt;win</span> as parameter.</p>
+<p>Setup the behavior of the toolbar, the display mode is set by using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_shrink_mode_set</span>. The toolbar does not scroll under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_NONE</span> mode, but it enforces a minimum size, so that all the items fit inside it. It does not scroll or show the items that do not fit under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_HIDE</span> mode. Finally, it scrolls under <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_SCROLL</span> mode, and it creates a button to aggregate items which did not fit with the <span style="font-family: Courier New,Courier,monospace">#ELM_TOOLBAR_SHRINK_MENU</span> mode.</p>
+
+<p>In this example, there is only a limited number of menu elements and thus <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span> is used.</p>
+
+<p>Expand the transverse length of the item according the transverse length of the toolbar, giving <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as second parameter of <span style="font-family: Courier New,Courier,monospace">elm_toolbar_transverse_expanded_set</span>.</p>
+
+<p>Make the menu items have the same size by setting <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> to <span style="font-family: Courier New,Courier,monospace">elm_toolbar_homogeneous_set</span>. This activates the homogeneous mode of the toolbar.</p>
+<p>Add menu items to the toolbar using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span>. This function takes 4 parameters:</p>
+<ul>
+<li>the target toolbar</li>
+<li>the icon path for the menu item</li>
+<li>the item label</li>
+<li>the function to call when the item is clicked</li>
+<li>the data to associate with the item for related callbacks.</li>
+</ul>
+<p>For the icons, add some images in the resource directory of the application <span style="font-family: Courier New,Courier,monospace">res/images</span> and define a macro to contain this path in the application <span style="font-family: Courier New,Courier,monospace">.h</span> file. In this example it is <span style="font-family: Courier New,Courier,monospace">inc/menututorial.h</span>.</p>
+
+<pre class="prettyprint">#define ICON_DIR &quot;/opt/usr/apps/&quot;PACKAGE&quot;/res/images&quot;
+</pre>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">PACKAGE</span> macro to setup this <span style="font-family: Courier New,Courier,monospace">ICON_DIR</span> macro. This way you can add items to the toolbar using icon images placed in the resource directory of the application.</p>
+
+<p>The item label is very important, it is used in the item callback function.</p>
+
+<p>In this example, only one callback is created to manage all the items but there can be several callback functions. Pass the application data to the callback.</p>
+
+<p>This callback is an <span style="font-family: Courier New,Courier,monospace">Evas_Smart_Cb</span>, it must have this prototype:</p>
+<pre class="prettyprint">
+_mycallback(void *data, Evas_Object *obj, void *ev)
+</pre>
+
+<p>In this example, the aim of the callback is to create the view which the user has requested. It is named <span style="font-family: Courier New,Courier,monospace">_menu_item_selected_cb</span>, and in this function we recover the calling object text to call the correct view creation function.</p>
+<pre class="prettyprint">
+it = ev;
+
+// Get the menu item text
+str = elm_object_item_text_get(it);
+
+// Comparing with the possible view names
+if (!strcmp(str, &quot;Calendar&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Calendar View&quot;
+&nbsp;&nbsp;&nbsp;_build_calendar_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;cal_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Date&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot;
+&nbsp;&nbsp;&nbsp;_build_date_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Home&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Home or main View&quot;
+&nbsp;&nbsp;&nbsp;_build_main_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;main_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Settings&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Settings&quot; view
+&nbsp;&nbsp;&nbsp;_build_settings_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;settings_view-&gt;box;
+}
+else if (!strcmp(str, &quot;Clock&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;// Build the &quot;Date View&quot; 
+&nbsp;&nbsp;&nbsp;_build_date_view(ad);
+&nbsp;&nbsp;&nbsp;// Set the view from the application data
+&nbsp;&nbsp;&nbsp;view = ad-&gt;date_view-&gt;box;
+}
+
+// Show the view in the naviframe 
+elm_object_content_set(ad-&gt;nf, view);
+</pre>
+<p>The menu has views, Calendar, Date, Settings, and Home (main view). The view names are stored in the menu item label, to get the label compare the returned string with the view names. When the name matches, the view is built by calling the correct function. Store the view in the application data and set up a new content to the naviframe before exit.</p>
+<p>This way when the user clicks a menu item, the view changes. The naviframe component destroys its content on each call of <span style="font-family: Courier New,Courier,monospace">elm_object_content_set</span>. That is why the content must be built again on each item click.</p>
+<p>Create the functions which create the views.</p>
+ <pre class="prettyprint">static void _build_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;mainview_s *view = ad-&gt;main_view;
+&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
+
+&nbsp;&nbsp;&nbsp;// Main box
+&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;view-&gt;colorselector = elm_colorselector_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_colorselector_mode_set(view-&gt;colorselector, ELM_COLORSELECTOR_PALETTE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;colorselector);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;colorselector);
+
+&nbsp;&nbsp;&nbsp;view-&gt;img = elm_image_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;img, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;img, 0.5, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;img, 256, 256);
+&nbsp;&nbsp;&nbsp;;snprintf(buf, sizeof(buf), &quot;%s/%s&quot;, ICON_DIR, &quot;tizen-logo.png&quot;);
+&nbsp;&nbsp;&nbsp;if (!elm_image_file_set(view-&gt;img, buf, NULL))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Problem loading image&quot;);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;img);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;img);
+
+&nbsp;&nbsp;&nbsp;view-&gt;lb_day = elm_label_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_day, &quot;Main view&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_day, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_day);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_day);
+}
+
+static void
+_build_calendar_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;calview_s *view = ad-&gt;cal_view;
+
+&nbsp;&nbsp;&nbsp;// Main box image = elm_image_add(win);
+
+&nbsp;&nbsp;&nbsp;view-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(view-&gt;box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(view-&gt;box, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;view-&gt;calendar = elm_image_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;calendar, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(view-&gt;calendar, 0.5, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(view-&gt;calendar, 256, 256);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(view-&gt;calendar, ICON_DIR&quot;/calendar.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;elm_box_pack_start(view-&gt;box, view-&gt;calendar);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;calendar);
+
+&nbsp;&nbsp;&nbsp;view-&gt;lb_cal = elm_label_add(view-&gt;box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(view-&gt;lb_cal, &quot;The calendar view&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(view-&gt;lb_cal, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(view-&gt;box, view-&gt;lb_cal);
+&nbsp;&nbsp;&nbsp;evas_object_show(view-&gt;lb_cal);
+} // End of_build_calendar_view
+</pre>
+<p>Each function creates a view and stores it in the application data.</p>
+
+ <h2 id="hidden_menu" name="hidden_menu">Creating a Hidden Menu</h2>
+
+<p>Add a new function called <span style="font-family: Courier New,Courier,monospace">_build_side_menu</span> to create the side Menu toolbar and add some items to it. This function takes the application data as parameter and stores the built menu in the sidemenu attribute of the structure.</p>
+ <pre class="prettyprint">static void _build_side_menu(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;appmenu_s *sidemenu = calloc(1, sizeof(appmenu_s));
+&nbsp;&nbsp;&nbsp;ad-&gt;sidemenu = sidemenu;
+
+&nbsp;&nbsp;&nbsp;sidemenu-&gt;tb = elm_toolbar_add(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_shrink_mode_set(sidemenu-&gt;tb, ELM_TOOLBAR_SHRINK_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_toolbar_transverse_expanded_set(sidemenu-&gt;tb, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/home.png&quot;, &quot;Home&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/account.png&quot;, &quot;Account&quot;, NULL, NULL);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/contacts.png&quot;, &quot;Friends&quot;, NULL, NULL);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_append(sidemenu-&gt;tb, ICON_DIR&quot;/clock.png&quot;, &quot;Clock&quot;, _menu_item_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_toolbar_homogeneous_set(sidemenu-&gt;tb, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;evas_object_show(sidemenu-&gt;tb);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;menu/side&quot;, sidemenu-&gt;tb);
+&nbsp;&nbsp;&nbsp;elm_toolbar_horizontal_set(sidemenu-&gt;tb, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_toolbar_item_selected_set(elm_toolbar_first_item_get(sidemenu-&gt;tb), EINA_TRUE);
+}
+</pre>
+<p>The side menu is created but hidden by default, to make it appear the use must click Home button.</p>
+
+<p>By default the Basic EDC UI application creates a function <span style="font-family: Courier New,Courier,monospace">keydown_cb</span> to handle the key down events. In the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function an <span style="font-family: Courier New,Courier,monospace">ecore_event_handler_add</span> function is called with the <span style="font-family: Courier New,Courier,monospace">ECORE_EVENT_KEY_DOWN</span> macro and with <span style="font-family: Courier New,Courier,monospace">keydown_cb</span> as callback. In this callback, the <span style="font-family: Courier New,Courier,monospace">KEY_END</span> event puts the window on the lower state.</p>
+ <pre class="prettyprint">keydown_cb(void *data , int type , void *event)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Ecore_Event_Key *ev = event;
+&nbsp;&nbsp;&nbsp;if (!strcmp(ev-&gt;keyname, KEY_END)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Let window go to hide state
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_DONE;
+}
+</pre>
+<p>The key name of menu button is <span style="font-family: Courier New,Courier,monospace">XF86Send</span>. Add the menu button key press handling to the <span style="font-family: Courier New,Courier,monospace">keydown_cb</span>. The menu is shown on the first press and hidden it on the second press. Use <span style="font-family: Courier New,Courier,monospace">Eina_Bool sdmenu_up</span> on the application data to store the menu status during the application execution. If <span style="font-family: Courier New,Courier,monospace">ad-&gt;sdmenu_up</span> is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> the menu is visible.</p>
+
+<p>A program <span style="font-family: Courier New,Courier,monospace">animation,menu_side</span> is defined in the <span style="font-family: Courier New,Courier,monospace">.edc</span> theme file. This program is run when the signal <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> is received with the source MenuButton. Also the program who hides the side menu is defined and is called <span style="font-family: Courier New,Courier,monospace">animation,menu_side,hide</span> which start on signal <span style="font-family: Courier New,Courier,monospace">hide,sidemenu</span>.</p>
+
+<p>Test side menu status by sending the signals using <span style="font-family: Courier New,Courier,monospace">elm_object_signal_emit</span></p>
+ <pre class="prettyprint">
+if (!strcmp(ev-&gt;keyname, &quot;XF86Send&quot;)) 
+{
+&nbsp;&nbsp;&nbsp;if (ad-&gt;sdmenu_up == EINA_TRUE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If the menu is visible send a &quot;hide,sidemenu&quot; signal
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Store the new menu status (hidden)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>Now the menu appears and disappears when the menu button is pressed.</p>
+<p>The first side menu button sends back to the main view:</p>
+ <pre class="prettyprint">
+// Hide the side menu if it&#39;s visible
+if (ad-&gt;sdmenu_up == EINA_TRUE) 
+{
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sdmenu_up = EINA_FALSE;
+}
+</pre>
+<p>This way the menu disappears when the view is selected by the user.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/multiple_screens_n.htm b/org.tizen.ui.guides/html/native/efl/multiple_screens_n.htm
new file mode 100755 (executable)
index 0000000..9fe2826
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/multiple_screens_n.htm
@@ -0,0 +1,261 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Multiple Screen Support</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">        
+                       <li><a href="#key_concepts">Key Concepts</a></li>
+                       <li><a href="#apply">Applying the Base Scale</a></li>
+                       <li><a href="#without">Scaling without the Base Scale</a></li>                  
+               </ul>
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">        
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Multiple Screen Support</h1> 
+
+  <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen applications, you must take this into account if you want your application to function well in various device models.</p> 
+  <p>Before <a href="#apply">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key_concepts">key concepts of multiple screen support</a>.</p> 
+  
+   <h2 id="key_concepts" name="key_concepts">Key Concepts</h2> 
+  <p>Before building a native application for multiple resolutions using Tizen native UI framework, make sure you are familiar with the following concepts:</p> 
+  <ul>
+  <li><a href="#multi">Multi-scale</a></li>
+  <li><a href="#base">Base scale</a></li>
+  </ul>
+
+  <h3 id="multi" name="multi">Multi-scale in Tizen Native UI Framework</h3> 
+  <p>Tizen native UI framework supports multiple scaling. If the application is implemented considering scalability, it is enough to change the <span style="font-family: Courier New,Courier,monospace;">elm_scale</span> value in different device environments without modifying the application code.</p> 
+  
+  <p>Scale 1.0 in Tizen native UI framework means that the application is displayed in a set size and is not scaled. Scale 1.0 is used in a display environment, such as a desktop. In the desktop environment, the monitor has a resolution between 1280 x 800 and 1920 x 1080, with a size between 20 and 27 inch, and the dpi between 80 and 100.</p>
+  
+  <p>If an application is scaled up or down after implementing it in a desktop environment, it can be used in another device without modifying the code. Each device has a proper scale value for adjusting the application size. Edje, which handles layout and themes in Tizen native UI framework, gets the size of an object by multiplying the size specified by an application using the scale value.</p> 
+  
+  <p>The following figure illustrates a 50 px wide object in a 1280 px wide monitor. If the same object is displayed with not scaling in mobile environment, it looks very small. To show the object in mobile environment in the similar size as in the monitor, define the scale is 2.0, so that the object size is 100 px instead of 50 px.</p>
+  
+  <p class="figure">Figure: Scaling from desktop to mobile</p> 
+  <p align="center"><img alt="Scaling from desktop to mobile" src="../../images/scaling.png" /> </p> 
+  
+  <h3 id="base" name="base">Base Scale</h3> 
+  <p>The object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the &quot;base scale&quot;. </p> 
+ 
+  <p>The size of a scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object (on the left) with the size 10 is created in a device with scale 1.0, the size of the object is 20 in a device with scale 2.0, and 40 in a device with scale 4.0.</p>
+  
+  <p class="figure">Figure: Base scale</p> 
+  <p align="center"><img alt="Base scale" src="../../images/base_scale.png" /> </p> 
+  
+  <p>The middle object has a base scale 2.0. The following example shows its scaling in a device with scale 4.0:</p>
+  
+  <table>
+<tbody>
+<tr>
+ <td>Scale = Device scale (information in the target) / Base scale (information in the application)
+<p>For example: 2.0 = 4.0 / 2.0</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+  <p>You must declare the following values as base scale:</p>
+  <ul>
+       <li>WVGA: 1.8</li>
+       <li>HD: 2.4</li>
+</ul>
+  
+  
+  
+  <h2 id="apply" name="apply">Applying the Base Scale</h2> 
+  <p>To create an application that supports multiple screen sizes, you must learn how to set the base scale in:</p> 
+  <ul> 
+   <li><a href="#set_edc">EDC</a></li> 
+   <li><a href="#set_c">C code</a></li> 
+  </ul> 
+  
+  <h3 id="calc_base" name="calc_base">Calculating the Base Scale</h3>
+
+<p>To get the base scale value of your own display, you must know the DPI of the display. Based on the display DPI, you can calculate the base scale, since it is basically proportional to the display DPI with the following formula:</p>
+
+<pre class="prettyprint">
+base_scale = (DPI / 90) * profile_factor</pre>
+
+<p>The profile factor is the value for fitting the object size as a profile. The distance between the user eye and the display differs for each profile. This means that the object size must be different if the device display is changed.</p>
+
+<p>The following table lists the profile factors for various profiles.</p>
+
+<table>
+<caption>Table: Profile factors</caption>
+<tbody>
+<tr>
+ <th>Profile</th>
+ <th>Profile factor</th>
+</tr>
+ <tr>
+ <td>Wearable</td>
+ <td>0.4</td>
+ </tr>
+ <tr>
+ <td>Mobile</td>
+ <td>0.7</td>
+ </tr> 
+ <tr>
+ <td>Desktop</td>
+ <td>1.0</td>
+ </tr>
+ </tbody></table>
+
+<p>For example, if your display has 233 dpi and the platform uses the mobile profile, the base scale is calculated like this:</p>
+<pre class="prettyprint">
+1.8 = (233 / 90) * 0.7</pre>
+
+<p>The base scale of the device is 1.8. If the application is made in the environment using 233 dpi and mobile profile, its base scale must be set to 1.8. For a desktop, the DPI is 90, and its base scale is 1.0.</p>
+
+ 
+<h3 id="set_edc" name="set_edc">Setting the Base Scale in EDC</h3> 
+  <p>The application must specify the scale its base scale. The edje objects are scaled properly if the base scale is set in the collection of the edc file, as in the following example:</p> 
+  
+  <table class="note"><tbody>
+<tr>
+<th class="note">Note</th> 
+      </tr>
+<tr>
+<td class="note">The base scale for WVGA is 1.8, and for HD application, 2.4.</td> 
+      </tr>
+</tbody></table>
+<pre class="prettyprint">collections 
+{
+&nbsp;&nbsp;&nbsp;base_scale: 1.8; // This value is for WVGA application
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+  <h3 id="set_c" name="set_c">Setting the Base Scale in C</h3> 
+  <p>The size of the object must be specified in EDC. However, sometimes it is better for an application to the object size in a C file. If the size is defined with no scaling in the C file, the application is displayed in the same size even if the scale changes. To avoid this, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro, as in the following example:</p> 
+
+<pre class="prettyprint">#define ELM_SCALE_SIZE(x) x / elm_app_base_scale_get() * elm_config_scale_get()</pre>
+
+  <p>in the definition, the size (<span style="font-family: Courier New,Courier,monospace;">x</span>) is changed to a size based on 1.0 (<span style="font-family: Courier New,Courier,monospace;">x/elm_app_base_scale_get()</span>) and it is multiplied with the scale of the current target (<span style="font-family: Courier New,Courier,monospace;">elm_config_scale_get()</span>).</p>
+  
+  <p>Set the base scale using the <span style="font-family: Courier New,Courier,monospace;">elm_app_base_scale_set()</span> function:</p>
+  
+<pre class="prettyprint">int app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;elm_app_base_scale_set(1.8); // This value is for WVGA application
+}
+</pre> 
+  <p>After setting the base scale, use the <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro to set the size of an object in the application:</p> 
+
+<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
+evas_object_resize(object, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
+</pre> 
+ 
+  <p>You can use <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro in any API related with setting objects sizes in Tizen native applications.</p> 
+  
+  <h2 id="without" name="without">Scaling without the Base Scale</h2>   
+
+<p>In Tizen, each device has a scale value in proportion to the display. If scaling is enabled, the objects are drawn on the display by multiplying with the user-defined object size and the device scale. If the base scale is set, the objects are drawn by dividing the user-defined object size with the base scale and multiplying it by the device scale.</p>
+
+<p>If you use the scale feature without setting the base scale, the result is the same as if you set the base scale to 1.0. Then you do not need to care about the base scale variables, because the pixels roll like a virtual pixel. For example, if you set 1 pixel in 129 dpi without setting the base scale value, the 1 pixel before scaling is equivalent to 1 real physical pixel after scaling. In case of 233 dpi, it is the same with 1.8 pixels after scaling. </p>
+
+<p>Always consider the pixel before scaling when defining the application UI, in order to ensure a proper UI display on the screen with a diversity of densities.</p>
+
+<pre class="prettyprint">int app_create(void *data)
+[ Conversion Formula ]
+Real physical pixel = (a pixel before scaling) x (dpi / 90) x 0.7
+</pre> 
+<p>Where  90 is the default DPI on a desktop and 0.7 is the mobile profile factor.</p>
+
+<p>The following table shows some examples.</p>
+
+<table>
+<caption>Table: Pixel conversions</caption>
+<tbody>
+<tr>
+ <th></th>
+ <th>Base</th>
+ <th>Low-density device (such as WVGA)</th>
+ <th>High-density device (such as HD)</th>
+</tr>
+ <tr>
+ <td>DPI</td>
+ <td>129</td>
+ <td>233</td>
+ <td>306</td> 
+ </tr>
+ <tr>
+ <td>A pixel before scaling</td>
+ <td>100</td>
+ <td>100</td>
+ <td>100</td> 
+ </tr>
+ <tr>
+ <td>Real physical pixel</td>
+ <td>100</td>
+ <td>180</td>
+ <td>240</td> 
+ </tr>
+ <tr>
+ <td>Actual base scale</td>
+ <td>1.0</td>
+ <td>1.8</td>
+ <td>2.4</td> 
+ </tr> 
+ </tbody></table>
+
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/multipoint_touch_n.htm b/org.tizen.ui.guides/html/native/efl/multipoint_touch_n.htm
new file mode 100755 (executable)
index 0000000..3b15f01
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/multipoint_touch_n.htm
@@ -0,0 +1,266 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Tracking Multi-point Touch Events</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#init">Initializing Multi-point Touch</a></li>
+                       <li><a href="#canvas">Handling the Canvas</a></li>
+                       <li><a href="#touch">Managing Touch Events</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                         
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>                     
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Tracking Multi-point Touch Events</h1>
+
+  
+<p>This tutorial demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> to paint on a canvas and track touch events.</p>
+
+ <h2 id="init" name="init">Initializing Multi-point Touch</h2>
+
+<p>This sample is a fully functional application able to track multiple simultaneous clicks. For every click, a black rectangle spot is drawn on the screen. This way it is easy to test the multi-point touch operation with the application.</p>
+
+<p>Initialization is implemented in the <span style="font-family: Courier New,Courier,monospace">multitouch.c</span> file.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">appdata</span> structure includes <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> pointers, a list, and a Boolean flag.</p>
+<pre class="prettyprint">
+typedef struct appdata 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conform;
+&nbsp;&nbsp;&nbsp;Evas_Object *nf;
+&nbsp;&nbsp;&nbsp;Evas_Object *button;
+&nbsp;&nbsp;&nbsp;Evas_Object *box;
+&nbsp;&nbsp;&nbsp;Evas_Object *rect;
+&nbsp;&nbsp;&nbsp;Evas_Object *label;
+
+&nbsp;&nbsp;&nbsp;// List of mouse spots
+&nbsp;&nbsp;&nbsp;Eina_List *spots;
+
+&nbsp;&nbsp;&nbsp;// Flag for checking the mouse down event
+&nbsp;&nbsp;&nbsp;Eina_Bool down; 
+} 
+appdata_s;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">main()</span> function initializes event callbacks and calls the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function to start the EFL application.</p>
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+
+
+<p>The following figure illustrates the Multi-point Touch.</p>
+
+  <p class="figure">Figure: Multi-point Touch screens</p> 
+  <p align="center"><img alt="Multi-point Touch screens" src="../../images/multipoint_touch.png" /></p> 
+
+ <h2 id="canvas" name="canvas">Handling the Canvas</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates base GUI elements including Naviframe and the Naviframe button. Naviframe includes each view screen as an item, which in turn includes the title and a button which clears spots when clicked.</p> 
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
+
+&nbsp;&nbsp;&nbsp;// Button
+&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Clear&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, button_clicked_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Create main view
+&nbsp;&nbsp;&nbsp;ad-&gt;box = create_main_view(ad);
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;Multi-point Touch&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL, ad-&gt;box, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, ad-&gt;button);
+} 
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main view including the label and an event rectangle. </p> 
+<p>The label displays information on mouse event status and coordinates (x, y positions). The event rectangle is received completely through mouse (touch) events. To show 2 elements in a Naviframe content area, a container combining those elements is necessary. A box container functions in that role. The label and rectangle pack end the box and the box is embedded into the Naviframe content area.</p> 
+
+<pre class="prettyprint">static Evas_Object *
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box;
+
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+
+&nbsp;&nbsp;&nbsp;// Label
+&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(box);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;None&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, 0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;label, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;label);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+
+&nbsp;&nbsp;&nbsp;// Event Rect
+&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(box));
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_spot()</span> function creates a rectangle, resizes the rectangle according to received size input, and moves the rectangle according to received coordinates (x, y positions) input.</p>
+
+<pre class="prettyprint">Evas_Object *
+create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+&nbsp;&nbsp;&nbsp;spot = evas_object_rectangle_add(evas_object_evas_get(parent));
+&nbsp;&nbsp;&nbsp;evas_object_resize(spot, size, size);
+&nbsp;&nbsp;&nbsp;// Adjust x, y positions to be center of object
+&nbsp;&nbsp;&nbsp;evas_object_move(spot, x - (size/2), y - (size/2));
+&nbsp;&nbsp;&nbsp;evas_object_show(spot);
+
+&nbsp;&nbsp;&nbsp;return spot;
+}
+</pre>
+
+<p>The rectangle object is stored in <span style="font-family: Courier New,Courier,monospace">Eina_List (ad-&gt;spots)</span> for managing other functions. The <span style="font-family: Courier New,Courier,monospace">button_clicked_cb()</span> function removes all <span style="font-family: Courier New,Courier,monospace">evas_objects</span> into the <span style="font-family: Courier New,Courier,monospace">ad-&gt;spots</span> list, meaning all spot rectangles are cleared.</p>
+
+<pre class="prettyprint">static void
+button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+
+&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(ad-&gt;spots, spot)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(spot);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spot = NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Clear&quot;);
+}
+</pre>
+
+ <h2 id="touch" name="touch">Managing Touch Events</h2>
+
+<p>On the bottom of the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function, event callbacks are added to the event rectangle. An event callback is added using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
+
+<p>The following touch event types are supported:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: This event is called when the given object receives the mouse down event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: This event is called when the given object receives the mouse up event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: This event is called when the given object receives the mouse move event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_DOWN</span>: This event is called when the given object has already received the mouse down event and receives the multi-mouse down event.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_UP</span>: This event is called when the given object receives the multi-mouse up event. </li>
+<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MULTI_MOVE</span>: This event is called when the given object receives the multi-mouse move event.</li>
+</ul>
+<p>If the given object receives a mouse event, a callback function is called, and event information, such as coordinates (x, y positions) is passed. The <span style="font-family: Courier New,Courier,monospace">mousemove_cb()</span> function sets the mouse status, positions text in the label, and draws a spot rectangle. To distinguish down and up positions, set different colors for the down and up rectangles.</p>
+
+<pre class="prettyprint">
+static void
+mousemove_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *spot;
+&nbsp;&nbsp;&nbsp;char buf[1024];
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev = event_info;
+&nbsp;&nbsp;&nbsp;Evas_Coord x = ev-&gt;cur.canvas.x;
+&nbsp;&nbsp;&nbsp;Evas_Coord y = ev-&gt;cur.canvas.y;
+&nbsp;&nbsp;&nbsp;int size = (int) 5 * elm_config_scale_get();
+
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;down)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Mouse Move, %d, %d&quot;, x, y);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
+
+&nbsp;&nbsp;&nbsp;// Draw spot on event position
+&nbsp;&nbsp;&nbsp;spot = create_spot(ad-&gt;rect, x, y, size);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(spot, 0, 0, 0, 255);
+&nbsp;&nbsp;&nbsp;ad-&gt;spots= eina_list_append(ad-&gt;spots, spot);
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/naviframe_tutorial_n.htm b/org.tizen.ui.guides/html/native/efl/naviframe_tutorial_n.htm
new file mode 100755 (executable)
index 0000000..206759b
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/naviframe_tutorial_n.htm
@@ -0,0 +1,252 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating a Naviframe for Navigation</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">     
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating a Naviframe for Navigation</h1>
+
+  
+<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
+
+
+ <h2 id="create" name="create">Creating Naviframes</h2>
+
+<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
+
+<p>This tutorial shows a UI with three naviframes. Each naviframe is made of 20 screens, each made up of a label with the text &quot;label
+&lt;n&gt;&quot;, a title with the same text, and previous and next buttons, which are used to navigate between the screens.</p>
+<p>TODO: screenshots of the staged interface</p>
+<p>The naviframe is &quot;one-way&quot;: elements are added, and when the user clicks on the &quot;previous&quot; button, they are removed; there is no &quot;next&quot; button by default. To add it, we define a structure that holds the naviframe object along with a stack of the elements that the user has popped by using the &quot;previous&quot; button.</p>
+<p>Note that it is possible to create the elements on-the-fly each time the &quot;next&quot; button is pressed. Both approaches are valid.</p>
+<pre class="prettyprint">// NOTE: A zipper is a datastructure for an ordered set of elements and a
+// cursor in this set, meaning there are elements before the cursor (which are
+// stored inside the naviframe) and after (which are stored in the &quot;popped&quot;
+// list.
+struct naviframe_zipper 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *naviframe;
+&nbsp;&nbsp;&nbsp;Eina_List *popped;
+};
+</pre>
+
+<p>To add several naviframes, create a function that factors their creation and initializes the naviframe_zipper structure defined above.</p>
+<pre class="prettyprint">static struct naviframe_zipper *
+_naviframe_add(Evas_Object *parent)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = malloc(sizeof(struct naviframe_zipper));
+&nbsp;&nbsp;&nbsp;z-&gt;naviframe = elm_naviframe_add(parent);
+&nbsp;&nbsp;&nbsp;z-&gt;popped = NULL;
+
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(z-&gt;naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(z-&gt;naviframe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(z-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;// By default, objects are destroyed when they are popped from the naviframe
+&nbsp;&nbsp;&nbsp;// To save and re-use them, enable &quot;preserve_on_pop&quot;
+&nbsp;&nbsp;&nbsp;elm_naviframe_content_preserve_on_pop_set(z-&gt;naviframe, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;return z;
+}
+</pre>
+<p>Create buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe component builds a button for &quot;previous&quot; by default, but allows the programmers to provide their own buttons. It has a specific slot for the &quot;next&quot; button.</p>
+<pre class="prettyprint">// Save the element that is popped from the naviframe
+static void
+_naviframe_prev(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
+&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_prepend(z-&gt;popped, elm_naviframe_item_pop(z-&gt;naviframe));
+}
+
+// Set the first element after the current one available and push it to the
+// naviframe
+static void
+_naviframe_next(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
+&nbsp;&nbsp;&nbsp;const char *text;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it;
+
+&nbsp;&nbsp;&nbsp;label = eina_list_data_get(z-&gt;popped);
+&nbsp;&nbsp;&nbsp;z-&gt;popped = eina_list_remove_list(z-&gt;popped, z-&gt;popped);
+&nbsp;&nbsp;&nbsp;if (label != NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The UI component is saved inside the naviframe but nothing more; we need
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// to create new buttons and set the title text again (copy the one
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// from the label that is saved).
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text = elm_object_text_get(label);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The _button function creates a button which is either &quot;Previous&quot; (-1) or
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;Next&quot; (1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it = elm_naviframe_item_push(z-&gt;naviframe, text, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p> When a naviframe and the pages that go inside it are built, populate it.</p>
+<p>Remember that three naviframes are created, each populated in a different way. The common bits have been factored out as a function and the specific parts are executed through a callback. The generic function is shown below.</p>
+<pre class="prettyprint">// Generic naviframe-populate function:
+// Its third (and last) parameter is a callback for customization, i.e. pushes
+// the new items to a specific position; it returns a &quot;context&quot; value that is
+// used between its calls and enables behaviors such as &quot;push after the
+// previously-pushed item&quot; 
+static struct naviframe_zipper*
+_naviframe_populate_gen(Evas_Object *parent, const char *id,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void * (*populate_cb) (Evas_Object *nav, const char *title, Evas_Object
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*prev, Evas_Object *next, Evas_Object *label, Elm_Object_Item *context)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)
+{
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
+&nbsp;&nbsp;&nbsp;Evas_Object *label, *prev, *next;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *context = NULL;
+&nbsp;&nbsp;&nbsp;char buf[256];
+&nbsp;&nbsp;&nbsp;int i;
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_add(parent);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 20; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label = elm_label_add(z-&gt;naviframe);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s [%d]&quot;, id, i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(label, buf);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(label);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// The _button function creates a button which is either &quot;Previous&quot; (-1) or
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &quot;Next&quot; (1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prev = _button(z, -1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next = _button(z, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Use the populate_cb callback to provide the customization of the way the
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// elements are added inside the naviframe
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context = populate_cb(z-&gt;naviframe, buf, prev, next, label, context);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return z;
+}
+</pre>
+<p>The prototype of the callbacks is fairly large, but that is because of the syntax for callbacks in C.</p>
+<pre class="prettyprint">// Push items one after the other
+static Elm_Object_Item *
+_populate_cb__push(Evas_Object *nav, const char *title,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+}
+
+// Push items one after the other but use insert_after for it
+static Elm_Object_Item *
+_populate_cb__push_then_insert_after(Evas_Object *nav, const char *title,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;if (context == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_after(nav, context, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+
+// Push one item and repeatedly insert new items before the last inserted
+// item
+static Elm_Object_Item *
+_populate_cb__push_then_insert_before(Evas_Object *nav, const char *title,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev, Evas_Object *next, Evas_Object *label,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *context)
+{
+&nbsp;&nbsp;&nbsp;if (context == NULL) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_push(nav, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return elm_naviframe_item_insert_before(nav, context, title, prev, next, label, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>Create a window with a vertical box, which holds the three naviframes from the Appcore&#39;s <span style="font-family: Courier New,Courier,monospace">app_create</span> callback.</p>
+
+<pre class="prettyprint">static bool
+_app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *w, *box;
+&nbsp;&nbsp;&nbsp;struct naviframe_zipper *z;
+
+&nbsp;&nbsp;&nbsp;w = elm_win_util_standard_add(&quot;Naviframe Test&quot;, &quot;Naviframe Test&quot;);
+
+&nbsp;&nbsp;&nbsp;box = elm_box_add(w);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(box, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(box, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(box);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(w, box);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Before&quot;, _populate_cb__push_then_insert_before);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;After&quot;, _populate_cb__push_then_insert_after);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;z = _naviframe_populate_gen(w, &quot;Push&quot;, _populate_cb__push);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, z-&gt;naviframe);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(w);
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/notification_window_n.htm b/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
new file mode 100755 (executable)
index 0000000..a5d1ede
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
@@ -0,0 +1,384 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+         <ul class="toc">
+                       <li><a href="#noti">Notification Window</a></li>
+            <li><a href="#shot">Screenshot</a></li>
+            <li><a href="#input_gen">Input Generator</a></li>
+                       <li><a href="#init">Initializing EFL Utility</a></li>                   
+                       <li><a href="#create">Creating a Notification Window and Setting a Notification Window Level</a></li>
+                       <li><a href="#getting">Getting the Notification Window Level</a></li>
+            <li><a href="#screenshot">Getting a Screenshot</a></li>
+            <li><a href="#input_gen_key">Generating a Key Input Event </a></li>
+            <li><a href="#input_gen_touch">Generating a Touch Input Event </a></li>                    
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Notification Windows: Supporting Notification Levels, Screenshots, and Input Generators</h1> 
+ 
+<p>The EFL UTIL utility package supports the following EFL functionalities:</p>
+
+<ul><li><a href="#noti">Notification Window and Level</a>
+<p>You can <a href="#init">initialize the EFL Utility</a>, <a href="#create">create a notification window and set a window level</a>, and <a href="#getting">get the notification window level</a>.</p></li>
+    <li><a href="#shot">Screenshot</a>
+<p>You can <a href="#init">initialize the EFL Utility</a> and <a href="#screenshot">capture a screenshot</a>.</p></li>
+    <li><a href="#input_gen">Input Generator</a>
+<p>You can <a href="#init">initialize the EFL Utility</a>, and generate a <a href="#input_gen_key">key input event</a> and <a href="#input_gen_touch">touch input event</a>.</p></li></ul>
+
+       
+<h2 id="noti" name="noti">Notification Window and Level</h2>
+
+<p>The EFL UTIL API allows you to set and get the notification level of the notification window (which is of the EFL window type):</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span></li></ul>
+
+<p>To understand notification levels, you must first learn about the Tizen window layer hierarchy. Window layers are logical containers used to control the window stack order. Each window belongs to 1 layer and can change the stack order in the layer. Windows in same layer are always placed on or under a window in another layer. In addition to the default &quot;normal layer&quot;, there exists a &quot;notification layer&quot;, which is always placed above the normal layer.</p>
+
+
+<p class="figure">Figure: Window layers</p> 
+<p align="center"><img alt="Window layers" src="../../images/efl_windowlayer.png" /></p> 
+
+
+<p>Each window is set to  a specific layer according to its type or properties. Most application windows belong to the normal layer. However, in case of an important alarm or other information crucial to the user, you can set the window to belong to the notification layer. This ensures that the user notices the information immediately, because the window belonging to the notification layer is always shown above the windows in the normal layer.</p> 
+
+<h3>Using the Notification Windows</h3>
+
+<p>A window that belongs to the notification layer is called a &quot;notification window&quot;. To make a notification window:</p>
+
+<ol><li>Set the window type to <span style="font-family: Courier New,Courier,monospace;">NOTIFICATION</span>, by calling the <span style="font-family: Courier New,Courier,monospace;">elm_win_add()</span> function with the third parameter set to <span style="font-family: Courier New,Courier,monospace;">ELM_WIN_NOTIFICATION</span>.</li>
+<li>Set the notification level by calling the <span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span> function.
+<p>The notification level defines the priority of the window, and the notification layer contains 3 levels (<span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span>, and <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span>).</p>
+<p>The default notification window level is <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>. Most of notification windows can be set to this level. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is a higher level than <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span>, which means that the window set to <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_2</span> is always on the <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_1</span> level window. The <span style="font-family: Courier New,Courier,monospace;">EFL_UTIL_NOTIFICATION_LEVEL_3</span> is the highest level in notification windows. Very few applications can use this level.</p>
+
+<p>If there are notification windows that have the same level, the most recently created notification window is placed on top of the other window. </p>
+
+</li></ol>
+
+<p class="figure">Figure: Notification levels</p> 
+<p align="center"><img alt="Notification levels" src="../../images/efl_notilevels.png" /></p> 
+
+
+<p>The following code snippets shown how to make a notification window with a higher level.</p>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+#include &lt;efl_util.h&gt;
+#include &lt;dlog.h&gt;
+
+static Evas_Object *create_win(const char *name)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;// Create the NOTIFICATION window object
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+
+&nbsp;&nbsp;&nbsp;if (!eo) return NULL;
+
+&nbsp;&nbsp;&nbsp;// Set the NOTIFICATION level
+&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
+
+&nbsp;&nbsp;&nbsp;elm_win_title_set(eo, name);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(eo, EINA_TRUE); 
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(eo, &quot;delete,request&quot;, _quit_cb, NULL); 
+       
+&nbsp;&nbsp;&nbsp;return eo;
+}</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span> function to get the currently set notification level of a window. If the window is not of the notification type, the function returns the <span style="font-family: Courier New,Courier,monospace;">-EFL_UTIL_ERROR_NOT_SUPPORTED_WINDOW_TYPE</span> error.</p>
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+#include &lt;efl_util.h&gt;
+#include &lt;dlog.h&gt;
+
+void get_notification_level (Evas_Object *eo)
+{
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;efl_util_notification_level_e  notification_level;
+
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+
+&nbsp;&nbsp;&nbsp;// Get the window notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level (eo, &amp;notification_level);
+
+&nbsp;&nbsp;&nbsp;// Check the return value
+&nbsp;&nbsp;&nbsp;if (error== EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 1
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for level 2
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+  
+<h2 id="shot" name="shot">Screenshot</h2>
+
+<p>The EFL UTIL SCREENSHOT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">wearable</a> applications) allows you to get the screen image to the user.</p>
+
+<p>First you must make the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure and initialize the structure members with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_initialize()</span> function. To take the actual screenshot, create screen capture data and return it to the <span style="font-family: Courier New,Courier,monospace;">tbm_surface</span> handler with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_take_tbm_surface()</span> function.</p>
+<p>When no longer needed, remember to free the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_deinitialize()</span> function.</p>
+
+
+<h2 id="input_gen" name="input_gen">Input Generator</h2>
+
+<p>The EFL UTIL INPUT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__INPUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__INPUT__MODULE.html">wearable</a> applications) allows you to generate input events (such as key and touch events).</p>
+
+<p>First you initialize the input generator and select a device type with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_initialize_generator()</span> function. To generate actual key or touch events, use the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_key()</span> or <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_touch()</span> function.</p>
+<p>When no longer needed, remember to free the input generator with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_deinitialize_generator()</span> function.</p>
+
+
+
+ <h2 id="init" name="init">Initializing EFL Utility</h2>
+ 
+ <p>To use the EFL UTIL API, the following header file has to be included:</p>
+  <pre class="prettyprint">#include &lt;efl_util.h&gt;</pre> 
+
+ <h2 id="create" name="create">Creating a Notification Window and Setting a Notification Window Level</h2>
+
+<p>To create a notification window and set the window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_set_notification_window_level()</span> function. If the window type is not notification type, the function returns an error.</p> 
+<pre class="prettyprint">#include &lt;Elementary.h&gt;
+#include &lt;dlog.h&gt;
+
+void create_win() 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Create notification window
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Set notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_set_notification_window_level
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, EFL_UTIL_NOTIFICATION_LEVEL_1);
+&nbsp;&nbsp;&nbsp;if (error != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do error handling
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+
+ <h2 id="getting" name="getting">Getting the Notification Window Level</h2>
+
+<p>To get the notification window level, use the <span style="font-family: Courier New,Courier,monospace">efl_util_get_notification_window_level()</span> function:</p>
+
+<pre class="prettyprint">void create_win() 
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *eo;
+&nbsp;&nbsp;&nbsp;efl_util_error_e error;
+&nbsp;&nbsp;&nbsp;efl_util_notification_level_e notification_level;
+&nbsp;&nbsp;&nbsp;char *name = &quot;Notification window&quot;;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Create notification window
+&nbsp;&nbsp;&nbsp;eo = elm_win_add(NULL, name, ELM_WIN_NOTIFICATION);
+&nbsp;&nbsp;&nbsp;if (!eo) return;
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;// Get notification level
+&nbsp;&nbsp;&nbsp;error = efl_util_get_notification_window_level
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(eo, &amp;notification_level);
+&nbsp;&nbsp;&nbsp;if (error == EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (notification_level) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_1:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 1
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case EFL_UTIL_NOTIFICATION_LEVEL_2:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Do something for notification level 2
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+  
+<h2 id="screenshot" name="screenshot">Getting a Screenshot</h2>
+
+ <p>To get a screenshot:</p>
+ 
+<ol><li>Initialize with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_initialize()</span> function:
+  <pre class="prettyprint">
+#include &lt;tbm_surface.h&gt;
+#include &lt;X11/Xlib.h&gt;
+
+void capture()
+{
+&nbsp;&nbsp;&nbsp;efl_util_screenshot_h screenshot = NULL;
+&nbsp;&nbsp;&nbsp;tbm_surface_h tbm_surface = NULL;
+&nbsp;&nbsp;&nbsp;tbm_surface_info_s tsuri;
+
+&nbsp;&nbsp;&nbsp;screenshot = efl_util_screenshot_initialize(width, height);
+</pre></li>
+
+<li>After getting the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_h</span> structure, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_take_tbm_surface()</span> function to get the <span style="font-family: Courier New,Courier,monospace">tbm_surface</span> handler which has the screenshot data.
+  <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;if (screenshot) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tbm_surface = efl_util_screenshot_take_tbm_surface(screenshot);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tbm_surface) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Treat tbm_surface handler (screenshot data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+</pre></li>
+
+<li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_deinitialize()</span> function:
+  <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_screenshot_deinitialize(screenshot);
+&nbsp;&nbsp;&nbsp;}
+}</pre></li></ol>
+
+ <h2 id="input_gen_key" name="input_gen_key">Generating a Key Input Event</h2>
+
+ <p>To generate key input events:</p>
+ 
+ <ol><li>Execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_initialize_generator()</span> function:
+  <pre class="prettyprint">
+void key_event_generator()
+{
+&nbsp;&nbsp;&nbsp;int ret = EFL_UTIL_ERROR_NONE;
+
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_KEYBOARD);
+</pre></li>
+ <li>After setting input device type, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_generate_key()</span> function to generate key input events:
+  <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to initialize input generator
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_key(&quot;XF86Menu&quot;, 1);
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a &quot;XF86Menu&quot; key press event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_key(&quot;XF86Menu&quot;, 0);
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a &quot;XF86Menu&quot; key release event
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+</pre></li>
+ <li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
+  <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+}</pre></li></ol>
+
+
+ <h2 id="input_gen_touch" name="input_gen_touch">Generating a Touch Input Event</h2>
+
+  <p>To generate touch input events:</p>
+ 
+ <ol><li>Execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_initialize_generator()</span> function:
+  <pre class="prettyprint">
+void touch_event_generator()
+{
+&nbsp;&nbsp;&nbsp;int ret = EFL_UTIL_ERROR_NONE;
+
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_TOUCHSCREEN);
+</pre></li>
+ <li>After setting input device type, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_generate_touch()</span> function to generate touch input events:
+  <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to initialize input generator
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_BEGIN, 100, 100);
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch press event on (100, 100)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_UPDATE, 110, 110);
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch move event to (110, 110)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_END, 110, 110);
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch release event to (110, 110)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+</pre></li>
+ <li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
+  <pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+}</pre></li></ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/panes_tutorial_mn.htm b/org.tizen.ui.guides/html/native/efl/panes_tutorial_mn.htm
new file mode 100755 (executable)
index 0000000..f53dd1f
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/panes_tutorial_mn.htm
@@ -0,0 +1,324 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Panes</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#init">Initializing the Application</a></li>
+               <li><a href="#create">Creating a Panes Component</a></li>
+               <li><a href="#config">Configuring the Panes</a></li>
+               <li><a href="#signals">Handling Signals</a></li>
+               </ul>   
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Panes</h1>
+
+  
+<p>This tutorial explains how to use Panes in the application.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+ <h2 id="init" name="init">Initializing the Application</h2>
+
+<p>This is how to start an Appcore application.</p>
+<pre class="prettyprint">#include &lt;Elementary.h&gt;
+#include &lt;app.h&gt;
+
+struct _appdata 
+{
+&nbsp;&nbsp;&nbsp;const char *name;
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+};
+
+static void app_terminate(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;struct _appdata *ad;
+
+&nbsp;&nbsp;&nbsp;if (!user_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;ad = user_data;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;win);
+}
+
+static bool app_create(void *user_data)
+{
+&nbsp;&nbsp;&nbsp;struct _appdata *ad;
+&nbsp;&nbsp;&nbsp;Evas_Object *win, *conformant, *naviframe, *panes, *panes_h, *nav_it, *bt;
+
+&nbsp;&nbsp;&nbsp;if (!user_data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;ad = user_data;
+
+&nbsp;&nbsp;&nbsp;// Create window 
+&nbsp;&nbsp;&nbsp;elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(&quot;panes&quot;, &quot;Panes tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;if (!win)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;win = win;
+
+&nbsp;&nbsp;&nbsp;// Add elm_conformant 
+&nbsp;&nbsp;&nbsp;conformant = elm_conformant_add(win);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conformant);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(conformant);
+
+&nbsp;&nbsp;&nbsp;// Add naviframe to conformant 
+&nbsp;&nbsp;&nbsp;naviframe = elm_naviframe_add(conformant);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(conformant, naviframe);
+&nbsp;&nbsp;&nbsp;evas_object_show(naviframe);
+
+&nbsp;&nbsp;&nbsp;evas_object_resize(win, 320, 400);
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+<p>The code above creates a window entitled &quot;Panes tutorial&quot;, composed of a conformant component that contains a naviframe component. To add a new Panes object, use the <span style="font-family: Courier New,Courier,monospace">_create()</span> function.</p>
+
+ <h2 id="create" name="create">Creating a Panes Component</h2>
+
+<p>The elm_panes component adds a draggable bar between two contents. When dragged, this bar resizes the contents&#39; size. To create a new Panes into an Elementary object, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
+<pre class="prettyprint">// Add an elm_panes 
+panes = elm_panes_add(naviframe);
+evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, panes);
+evas_object_show(panes);
+
+nav_it = elm_naviframe_item_push (naviframe, &quot;Panes view&quot;, NULL, NULL, panes, NULL);
+</pre>
+<p>Here the Panes is created and added in the naviframe.</p>
+
+ <h2 id="config" name="config">Configuring the Panes</h2>
+
+<p>By default, the orientation of the Panes is vertical. To modify the orientation, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
+<pre class="prettyprint">// Add a horizontal elm_panes 
+panes_h = elm_panes_add(naviframe);
+elm_panes_horizontal_set(panes_h, EINA_TRUE);
+</pre>
+<p>The code above creates another Panes object and sets the horizontal orientation. To add content in a panes, use the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function. Here we add the horizontal Panes (panes_h) to the &quot;left&quot; part of the first created Panes (panes).</p>
+<pre class="prettyprint">elm_object_part_content_set(panes, &quot;left&quot;, panes_h);
+</pre>
+
+<p>This is how to set a button object to the &quot;right&quot; side of our vertical Panes component.</p>
+<pre class="prettyprint">// Create a button object 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Right&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+
+// and set it to the &quot;right&quot; part of the vertical Panes 
+elm_object_part_content_set(panes, &quot;right&quot;, bt);
+</pre>
+
+<p>The content of the horizontal Panes is set with two button objects (up and down). When populating a vertically displayed Panes, the left content is placed at the top, and the right content is placed at the bottom.</p>
+<pre class="prettyprint">// Create a &quot;Up&quot; button 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Up&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+elm_object_part_content_set(panes_h, &quot;left&quot;, bt);
+
+// Create a &quot;Down&quot; button 
+bt = elm_button_add(naviframe);
+elm_object_text_set(bt, &quot;Down&quot;);
+evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(bt);
+elm_object_part_content_set(panes_h, &quot;right&quot;, bt);
+</pre>
+
+<p>The elm_panes can be dragged with the mouse but the proportion can also be set with the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions. As an example, this is how to set the left size of both panes to 80%.</p>
+<pre class="prettyprint">// Set the proportion of the panes to 80% 
+elm_panes_content_left_size_set(panes, 0.8);
+elm_panes_content_left_size_set(panes_h, 0.8);
+</pre>
+
+<p>The Panes proportions can also be fixed so that the user is not able to drag them. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_fixed_set()</span> function.</p>
+<pre class="prettyprint">// Fix the Panes proportion 
+elm_panes_fixed_set(panes_h, EINA_TRUE);
+</pre>
+
+ <h2 id="signals" name="signals">Handling Signals</h2>
+
+<p>The Panes components emit four different signals, depending on the users&#39; interaction with the draggable bar.</p>
+<ul>
+<li>&quot;press&quot; - The pane is pressed.</li>
+<li>&quot;unpressed&quot; - The pane is released after being pressed.</li>
+<li>&quot;clicked&quot; - The pane is clicked.</li>
+<li>&quot;clicked,double&quot; - The pane is double clicked.</li>
+</ul>
+<p>We add a callback function for each of them.</p>
+
+<h3>&quot;clicked&quot; Signal </h3>
+
+<p>The callback function for the clicked signal prints &quot;Clicked&quot; to standard output.</p>
+<pre class="prettyprint">// clicked callback 
+static void
+_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Clicked\n&quot;);
+}
+</pre>
+
+<p>This is how to register this callback function to the vertical panes.</p>
+<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;clicked&quot;, _clicked_cb, panes);
+</pre>
+
+<h3>&quot;press&quot; Signal </h3>
+
+<p>The callback function for the &quot;press&quot; signal prints &quot;Pressed&quot; to the standard output.</p>
+<pre class="prettyprint">// press callback 
+static void
+_press_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Pressed\n&quot;);
+}
+</pre>
+
+<p>This is how to register this callback function to the vertical panes.</p>
+<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;press&quot;, _press_cb, panes);
+</pre>
+
+<h3>&quot;unpress&quot; Signal </h3>
+
+<p>For the &quot;unpress&quot; signal, the proportion size of the left content of the Panes component is printed to the standard output. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> function.</p>
+<pre class="prettyprint">// unpress callback 
+static void
+_unpress_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Unpressed, size : %f\n&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_get(obj));
+}
+</pre>
+<p>This is how to register this callback function to the Panes.</p>
+<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;unpress&quot;, _unpress_cb, panes);
+</pre>
+
+<h3>&quot;clicked,double&quot; Signal </h3>
+
+<p>Hide the left part of the Panes component on the &quot;clicked,double&quot; signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> functions, and a variable to store the value of the current proportion.</p>
+
+<pre class="prettyprint">// double clicked callback 
+static void
+_clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;static double size = 0.0;
+&nbsp;&nbsp;&nbsp;double tmp_size = 0.0;
+&nbsp;&nbsp;&nbsp;tmp_size = elm_panes_content_left_size_get(obj);
+&nbsp;&nbsp;&nbsp;if (tmp_size &gt; 0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, 0.0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG, &quot;Double clicked, hidden.\n&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_panes_content_left_size_set(obj, size);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, PANES_TAG,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &quot;Double clicked, restoring size.\n&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;size = tmp_size;
+}
+</pre>
+
+<p>This is how to register this callback function to the Panes.</p>
+<pre class="prettyprint">evas_object_smart_callback_add(panes, &quot;clicked,double&quot;, _clicked_double_cb,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;panes);
+</pre>
+
+<p class="figure">Figure: Panes tutorial in action</p> 
+<p align="center"><img alt="Panes tutorial in action" src="../../images/pane_tuto.png" /></p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/popup_tutorial_wn.htm b/org.tizen.ui.guides/html/native/efl/popup_tutorial_wn.htm
new file mode 100755 (executable)
index 0000000..37b4ad8
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/popup_tutorial_wn.htm
@@ -0,0 +1,244 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Creating Wearable Popups</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#init">Initializing the Popup Application</a></li>
+                       <li><a href="#style">Using Popup Styles</a></li>
+                       <li><a href="#event">Managing Popup Events</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Wearable Popups</h1>
+
+  
+<p>This tutorial teaches the basics of the popup component interactions.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<h2 id="init" name="init">Initializing the Popup Application</h2>
+       
+<p>This use case creates an application with a window entitled &quot;Popup Basic Tutorial&quot;. The window consists of a conformant component, and a popup is placed inside the conformant.</p>
+       
+<p>To create a typical elementary application:</p>     
+       
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;main&quot;, &quot;Popup Basic Tutorial&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;create_popup(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+
+static bool
+app_create(void *data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+int
+main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;struct app_data ad = {0,};
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+
+&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, &amp;ad);
+}</pre>        
+       
+ <h2 id="style" name="style">Using Popup Styles</h2>
+
+<p>To create popups using various styles:</p>
+
+<ul><li>Create a basic text-only popup:
+
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad;
+ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad-&gt;win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_text_set(popup, &quot;This has only texts&quot;);
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a popup with a title and text. The <span style="font-family: Courier New,Courier,monospace">title,text</span> attribute is the title area text part that defines the title label.
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad;
+ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad-&gt;win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
+elm_object_text_set(popup,&quot;This Popup has title area and text&quot;);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a popup with a title, text, and 2 buttons:
+<pre class="prettyprint">
+Evas_Object *popup;
+Evas_Object *btn;
+struct appdata *ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad-&gt;win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_text_set(popup, &quot;This is title text 2button popup&quot;);
+
+btn = elm_button_add(popup);
+elm_object_style_set(btn, &quot;popup&quot;);
+evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(btn, &quot;Cancel&quot;);
+elm_object_part_content_set(popup, &quot;button1&quot;, btn);
+evas_object_smart_callback_add(btn, &quot;clicked&quot;, _response_cb, popup);
+
+btn = elm_button_add(popup);
+elm_object_style_set(btn, &quot;popup&quot;);
+evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(btn, &quot;OK&quot;);
+elm_object_part_content_set(popup, &quot;button2&quot;, btn);
+evas_object_smart_callback_add(btn, &quot;clicked&quot;, _response_cb, popup);
+
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a toast popup:
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad-&gt;win_main);
+elm_object_style_set(popup, &quot;toast&quot;);
+elm_popup_orient_set(popup, ELM_POPUP_ORIENT_BOTTOM);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_part_text_set(popup,&quot;elm.text&quot;, &quot;Saving Contacts to sim&quot;);
+
+evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, _block_clicked_cb, NULL);
+elm_popup_timeout_set(popup, 2.0);
+evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, NULL);
+
+evas_object_show(popup);
+</pre></li>
+</ul>
+
+ <h2 id="event" name="event">Managing Popup Events</h2>
+<p>The Elementary popups respond to user interactions with several events.</p>
+<p>To manage popup events:</p>
+
+<ul> 
+<li>Handle timeout events:
+<p>The &quot;timeout&quot; event is triggered whenever a popup is closed as a result of timeout.</p>
+<pre class="prettyprint">
+static void _timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;evas_object_del(obj);
+}
+elm_popup_timeout_set(popup, 3.0);
+evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, NULL);
+</pre></li>
+
+<li>Handle the <span style="font-family: Courier New,Courier,monospace">block,clicked</span> events:
+<p>The &quot;block,clicked&quot; event is triggered whenever the user taps on a blocked event area.</p>
+<pre class="prettyprint">
+static void _block_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;evas_object_del(obj);
+}
+evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, _block_clicked_cb, NULL);
+</pre></li>
+
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/rotary_events_n.htm b/org.tizen.ui.guides/html/native/efl/rotary_events_n.htm
new file mode 100755 (executable)
index 0000000..f6342f3
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/rotary_events_n.htm
@@ -0,0 +1,287 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Managing Rotary Events</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#handler">Rotary Event Handler</a></li>
+                       <li><a href="#callback">Rotary Object Event Callback</a></li>
+                       <li><a href="#rotary">Managing Rotary Events</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>                
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Managing Rotary Events</h1>
+
+  
+<p>You can use various functions to work with the rotary events. The functions manage the rotary events, which are fired from the rotary device and delivered to a suitable target. To receive rotary events, you must define an event callback or a handler function, and register it using the EFL Extension functions. There are 2 ways to receive the rotary events: the rotary event handler and the rotary object event callback.</p>
+
+
+<table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">Rotary events are only supported in devices with a circular screen.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<h2 id="handler">Rotary Event Handler</h2>
+
+<p>The rotary event handler is suitable when you want to handle rotary events without taking care about an Evas Object or when the application is not implemented using an Evas Object. The handler works like the Ecore event in EFL:</p>
+
+<ul><li><p>The application registers a rotary event handler with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_add()</span> function.</p>
+
+<p>The rotary event handlers are treated &quot;first come first served&quot;. It means that the first registered handler is called first when rotary events happens. If the handler returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the next handler is called. Otherwise, EFL Extension stops delivering the rotary events.</p>
+</li>
+<li><p>To remove a rotary event handler, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_del()</span> function.</p></li></ul>
+
+
+
+<h2 id="callback">Rotary Object Event Callback</h2>
+
+<p>The rotary object event callback is suitable when you want EFL Extension to handle the event delivery between objects. It means that EFL Extension manages a callback and an object list and decides which object&#39;s callback must be called when rotary events happen:</p> 
+
+<ul><li><p>The application registers a callback using the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_add()</span> function.</p>
+
+<p>EFL Extension treats callbacks based on the callback priority. If the application registers callbacks for a same object, the callback with the lowest priority number is called first. If this callback returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the higher priority number is called. The above function registers the rotary event callback with a default priority number (value is 0). To register the rotary event callback with another priority number, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_priority_add()</span> function.</p></li>
+<li><p>To remove a registered callback from an object, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_del()</span> function:</p></li></ul>
+
+<p>The rotary events are only delivered to 1 object named the activated object. If there is no activated object, the rotary event is not delivered to any object. If the activated object has registered callbacks and the callbacks return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the rotary events are delivered to the upper parents of the activated object until there is 1 callback that consumes the rotary event or it reaches the top parent object.</p>
+<p>To set the object as the activated object, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_activated_set()</span> function.</p>
+
+<p>Providing the activated parameter with the <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> value sets the object as the activated object. Providing the <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> value deactivates the object. Since there is only 1 object which is the activated object, if an object is set as the activated object, the previously activated object is deactivated and becomes a normal object. An activated signal named <span style="font-family: Courier New,Courier,monospace;">rotary,activated</span> is sent when an object is set as the activated object, and the <span style="font-family: Courier New,Courier,monospace;">rotary,deactivated</span> signal is sent when an object is deactivated.</p>
+
+<p>You can register callbacks for activated or deactivated signals with the <span style="font-family: Courier New,Courier,monospace;">evas_object_smart_callback_add()</span> function.</p>
+
+<p>For more information, see the Evas smart callback function (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas__Smart__Object__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas__Smart__Object__Group.html">wearable</a> applications).</p>
+
+<h2 id="rotary">Managing Rotary Events</h2>
+
+<p>To manage rotary events:</p>
+<ol>
+<li>Create the rotary event handler:
+<ol type="a">
+<li>Create the window:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+Evas_Object *win = NULL;
+
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension circle sample&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Show the window after base gui is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+
+<li>Register the rotary event handler:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Register the rotary event handler
+&nbsp;&nbsp;&nbsp;eext_rotary_event_handler_add(_rotary_handler_cb, NULL);
+}
+</pre></li>
+<li>Define the callback function:
+<pre class="prettyprint">
+Eina_Bool _rotary_handler_cb(void *data, Eext_Rotary_Event_Info *ev)
+{
+&nbsp;&nbsp;&nbsp;if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGD(&quot;Rotary device rotated in clockwise direction&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGD(&quot;Rotary device rotated in counter clockwise direction&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+</pre>
+</li>
+
+<li>Remove the rotary event handler and release all resources when you do not need it anymore.
+<pre class="prettyprint">
+static void
+app_terminate(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Release all resources
+&nbsp;&nbsp;&nbsp;eext_rotary_event_handler_del(_rotary_handler_cb);
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Create a rotary event callback for a normal Evas object. 
+<p>When a rotary event occurs, the slider value is adjusted accordingly.</p>
+<ol type="a">
+<li>Create the objects.
+<p>The window and the slider are created using the Elementary APIs.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL, *slider = NULL;
+
+&nbsp;&nbsp;&nbsp;// Window 
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Slider
+&nbsp;&nbsp;&nbsp;slider = elm_slider_add(win);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(slider, 0, 50);
+&nbsp;&nbsp;&nbsp;elm_slider_step_set(slider, 1.0);
+&nbsp;&nbsp;&nbsp;evas_object_show(slider);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, slider);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up 
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+<li>Register the rotary event callback.
+<p>To receive the rotary event, register the rotary event callback and set the activated object as the slider object.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Register rotary event callback 
+&nbsp;&nbsp;&nbsp;ext_rotary_object_event_callback_add(slider, _rotary_event_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+}
+</pre>
+<p>Define the rotary callback function:</p>
+<pre class="prettyprint">
+Eina_Bool _rotary_event_cb(void *data, Evas_Object *obj, Eext_Rotary_Event_Info *ev)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *slider = obj;
+&nbsp;&nbsp;&nbsp;int val = elm_slider_value_get(slider);
+&nbsp;&nbsp;&nbsp;if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, val + 1);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, val - 1);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Create a rotary event callback for an EFL Extension object. 
+<p>When a rotary event occurs, the slider value is adjusted accordingly.</p>
+<ol type="a">
+<li>Create the objects:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL, *conform = NULL;
+&nbsp;&nbsp;&nbsp;Eext_Circle_Surface *sur = NULL;
+
+&nbsp;&nbsp;&nbsp;// Window 
+&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension circle sample&quot;);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(win);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_SHOW);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(win, ELM_WIN_INDICATOR_OPAQUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(conform);
+
+&nbsp;&nbsp;&nbsp;// Surface 
+&nbsp;&nbsp;&nbsp;sur = eext_circle_surface_conformant_add(conform);
+
+&nbsp;&nbsp;&nbsp;// Slider
+&nbsp;&nbsp;&nbsp;slider = eext_circle_object_slider_add(conform, sur);
+&nbsp;&nbsp;&nbsp;eext_circle_object_value_min_max_set(slider, 0.0, 30.0);
+&nbsp;&nbsp;&nbsp;eext_circle_object_value_set(slider, 0.0);
+
+&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+}
+</pre>
+</li>
+<li>Set the activated object.
+<p>Since the EFL Extension API is used to create the slider object, the created slider object already registers the rotary event callbacks internally. To receive a rotary event, you only need to set the activated object as the desired object (slider).</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Activate circle slider&#39;s rotary object event
+&nbsp;&nbsp;&nbsp;// Its value increases/decreases its value by 1.0 to clockwise or 
+&nbsp;&nbsp;&nbsp;// counter-clockwise rotary event
+&nbsp;&nbsp;&nbsp;eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;eext_circle_object_slider_step_set(slider, 1.0);
+}
+</pre>
+</li>
+</ol>
+</li>
+</ol>  
+  
+    
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/scalability_n.htm b/org.tizen.ui.guides/html/native/efl/scalability_n.htm
new file mode 100755 (executable)
index 0000000..de81e0a
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/scalability_n.htm
@@ -0,0 +1,762 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Scalability Support</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">         
+                <li><a href="#key">Key Concepts</a></li>       
+                <li><a href="#elementary">Scalability Using Elementary UI Components</a></li>
+            <li><a href="#edje">Scalability Using Edje</a></li>
+            <li><a href="#aspect">Aspect Ratio</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Scalability Support</h1> 
+  <p>To ensure that your application works well in diverse devices, you must consider scalability when designing the application layout:</p>
+  <ul>
+<li><a href="#key">Key concepts</a></li>
+<li><a href="#elementary">Scalability using Elementary UI components</a></li>
+<li><a href="#edje">Scalability using Edje</a></li>
+<li><a href="#aspect">Aspect ratio</a></li></ul>
+
+<h2 id="key" name="key">Key Concepts</h2>      
+
+<p>When designing the application layout to be scalable, you must pay attention to the following key concepts:</p>
+
+<ul><li>Understand the character of the relative position and the fixed position
+
+<p>In the <strong>relative position</strong>, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.</p>
+
+<p class="figure">Figure: Relative position</p> 
+<p align="center"> <img alt="Relative position" src="../../images/scale_relative.png" /> </p> 
+ 
+<p>In the <strong>fixed position</strong>, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.</p>
+ 
+<p class="figure">Figure: Fixed position</p> 
+<p align="center"> <img alt="Fixed position" src="../../images/scale_fixed.png" /> </p>  </li>
+
+<li>Use the relative position
+<p>If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.</p>
+
+<p class="figure">Figure: Scaling relative position</p> 
+<p align="center"> <img alt="Scaling relative position" src="../../images/scale_relative_scaled.png" /> </p>  </li> 
+
+<li>Multiply the scaling value, if you use the fixed size
+<p>If you use the EDC file to set up the layout, you can set the scale in the <span style="font-family: Courier New,Courier,monospace">part</span> element:</p>
+<pre class="prettyprint">
+parts 
+{
+&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>If you set the fixed size in C code, you can use the <span style="font-family: Courier New,Courier,monospace">ELM_SCALE_SIZE</span> macro:</p>
+<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));</pre>
+
+<p>For more information see <a href="multiple_screens_n.htm#apply">Applying the Base Scale</a>.</p></li>
+
+<li>Do not fill the width or height out with a fixed size only
+<p>If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size. </p>
+ 
+<p class="figure">Figure: Height filled with a fixed size</p> 
+<p align="center"> <img alt="Height filled with a fixed size" src="../../images/scale_fixed_height.png" /> </p> 
+
+<p>If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.</p> 
+ 
+<p class="figure">Figure: Height with a flexible area</p> 
+<p align="center"> <img alt="Height with a flexible area" src="../../images/scale_flexible_height.png" /> </p> </li></ul>
+
+
+
+<h2 id="elementary" name="elementary">Scalability Using Elementary UI Components</h2>
+
+<p>The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using elementary UI components, make sure you understand the following core concepts on how scalability works with elementary UI components.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">The Elementary library provides 3 groups of APIs:
+        <ul><li>Infrastructure: to control the behavior of elementary.</li>
+        <li>Container: UI components that can contain other UI components.</li>
+        <li>UI components: elementary UI components, such as buttons, lists, and check and radio boxes.</li></ul></td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+<h3>Using Containers for Effective Layouts</h3>
+
+<p>The Elementary library provides several containers to display UI components in an effective layout. The containers have no visual identity of their own.</p>
+
+<ul><li>Box
+
+<p>The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components&#39; size:</p>
+<ul><li>A vertical box calculates its height as the sum of its children&#39;s height and its width as the width of the widest child.</li>
+<li>A horizontal box calculates its width as the sum of its children&#39;s width and its height as the height of the tallest child.</li></ul>
+
+<p class="figure">Figure: Box layout</p> 
+<p align="center"> <img alt="Box layout" src="../../images/scale_box.png" /> </p> 
+ 
+<p>The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.</p></li>
+
+<li>Grid
+
+<p>The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then packs the child UI components into the grid while setting their position and size based on the virtual size of the grid.</p>
+
+<p class="figure">Figure: Grid layout</p> 
+<p align="center"> <img alt="Grid layout" src="../../images/scale_grid.png" /> </p> 
+ 
+<p>The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.</p></li></ul>
+
+
+<h3>Using Weight and Align Properties</h3>
+
+<p>To make a layout scalable with UI components, the UI components must be packed into a container using only the weight and align properties based on their minimum size. Do not resize the UI components directly using pixels.</p>
+
+<p>The weight and align properties are associated with every elementary UI component, and they serve as hints for the container they are in. They tell the container how the UI component wants to occupy the space and pack itself with other UI components in the container.</p>
+
+<h4>Weight</h4>
+
+<p>You can set the weight property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set(x_weight, y_weight)</span> function:</p>
+
+<ul><li>Containers use the weights of the child UI components by normalizing them across all child UI components along both X and Y directions.</li>
+<li>The parameter values can be 0 or positive values (default: 0.0).
+<p>0.0 means that the container allocates a minimum size of the UI component area.</p>
+<p>1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span>) means that the container allocates all of the remaining area to the UI component.</p></li>
+<li>If the container has several UI components, it allocates the UI component area relative to the weights of other UI components.</li></ul>
+
+<p class="figure">Figure: Weight hint</p> 
+<p align="center"> <img alt="Weight hint" src="../../images/scale_weight_hint.png" /> </p>     
+ 
+<p class="figure">Figure: Weight hint across multiple child UI components</p> 
+<p align="center"> <img alt="Weight hint across multiple child UI components" src="../../images/scale_weight_hint_multiple.png" /> </p> 
+
+<h4>Align</h4>
+
+<p>You can set the align property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set(x_align, y_align)</span> function:</p>
+
+<ul><li>UI components use the alignment for their position or size along both X and Y directions.</li>
+<li>The parameter values can be from 0.0 to 1.0 or -1.0 (default: 0.5).</li>
+<li>The values define positions as follows: left is (x=0.0), right is (x=1.0), top is (y=0.0), and bottom is (y=1.0). The center is (x=0.5, y=0.5).
+<p>-1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span>) means that the UI component fills all of the allocated area.</p></li></ul>
+
+<p class="figure">Figure: Alignment hint</p> 
+<p align="center"> <img alt="Alignment hint" src="../../images/scale_align_hint.png" /> </p>   
+
+<h2 id="edje" name="edje">Scalability Using Edje</h2>
+
+<p>The Tizen platform provides a complex graphical design and layout library called Edje, which provides an abstraction layer between the application code and the interface. You can use Edje in your Tizen applications to create visual elements and control the layout, look, and feel.</p>
+<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an Edje <span style="font-family: Courier New,Courier,monospace">.edj</span> file. The file can be produced by using <span style="font-family: Courier New,Courier,monospace">Edje_cc</span> to take a text file (a <span style="font-family: Courier New,Courier,monospace">.edc</span> file) and &quot;compile&quot; an output <span style="font-family: Courier New,Courier,monospace">.edj</span> file that contains the state graph information, images, and any other needed data.</p>
+
+<p>While creating Edje, you set specific element properties to control the scalable behavior of the UI. Before creating a scalable UI using Edje, you must be familiar with the following scalability properties and part types.</p>
+
+<h3>Part</h3>
+<p>Parts are used to represent the most basic layout elements, such as a line in a border or a text on an image.</p>
+<p>The parts can have the following property:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">scale</span>: 0-1
+<p>Specifies whether the part scales its size with the scaling factor (Tizen has a scaling factor to resize the application layout and object). This property is used to scale properties, such as font size or min/max size of the part.</p>
+<p>The default value is 0 (off) and the default scaling factor is 1.0. To make a part scalable, set the property to 1 (on).</p>
+</li></ul>
+
+<h3>Description</h3>
+<p>Every part can have one or more description blocks to define the layout properties of the part.</p>
+<p>The descriptions can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">min</span>/<span style="font-family: Courier New,Courier,monospace">max</span>: width height
+<p>Specifies the minimum or maximum size of the part in pixels. It has no effect on the container size.</p>
+<p>When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">fixed</span>: 0-1 0-1
+<p>When the <span style="font-family: Courier New,Courier,monospace">min</span> or <span style="font-family: Courier New,Courier,monospace">max</span> property is set, this property sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application whether it must be scaled when resized.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>. To fix a part size to its min or max, set the value to 1.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">align</span>: X-axis Y-axis
+<p>When the displayed object size is smaller than its container, this property moves it along both axes using the relative position.</p>
+<p>To move the property, use x = 0.0 to move to left, x = 1.0 to move to right, y = 0.0 to move to the top, and y = 1.0 to move to the bottom. The x = 0.5, y = 0.5 value sets the object at the center of its container.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.5 0.5</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">rel1</span>/<span style="font-family: Courier New,Courier,monospace">rel2</span>
+<p>Specifies the position of the left-top and bottom-right corners of the part&#39;s container.</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">relative</span>: X-axis Y-axis
+<p>Specifies the relative position of the part&#39;s container.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span> for <span style="font-family: Courier New,Courier,monospace">rel1.relative</span> and <span style="font-family: Courier New,Courier,monospace">1.0 1.0</span> for <span style="font-family: Courier New,Courier,monospace">rel2.relative</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">to</span>/<span style="font-family: Courier New,Courier,monospace">to_x</span>/<span style="font-family: Courier New,Courier,monospace">to_y</span>
+<p>Specified that a corner must be positioned relatively to another part&#39;s container.</p>
+<p>By default, the corners of a part are placed to the whole interface.</p></li></ul>
+
+<table>
+<caption>Table: Edje part property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+                                                                 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;panorama.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
+                                                                 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.4;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.6;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 127 255 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Height: 100 pixels (when the scaling factor is 1.0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bottom-aligned
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 127 0 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Image size: 720 x 180 pixels (when the scaling factor is 1.0)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 720 180;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Y-axis is positioned relative to &quot;rect2&quot; part
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Bottom-aligned
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 1.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;panorama.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>         
+</td>
+ <td><p align="center"> <img alt="Part example" src="../../images/scale_example_part.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">aspect</span>: min max
+<p>Specifies the width to height ratio to keep when the part is resized. When both values are the same, the ratio is fixed. When they differ, the part is forced to keep the ratio between the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> properties when resized.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">aspect_preference</span>: dimension
+<p>Specifies the scope of the <span style="font-family: Courier New,Courier,monospace">aspect</span> property to a given dimension.</p>
+<p>The possible values are     <span style="font-family: Courier New,Courier,monospace">BOTH</span>, <span style="font-family: Courier New,Courier,monospace">VERTICAL</span>, <span style="font-family: Courier New,Courier,monospace">HORIZONTAL</span>, and <span style="font-family: Courier New,Courier,monospace">NONE</span>. The default is <span style="font-family: Courier New,Courier,monospace">NONE</span>.</p>
+
+<table>
+<caption>Table: Edje part property aspect example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;island.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+   
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;island.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 8/5 8/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Keep the aspect ratio based on the part width
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: HORIZONTAL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>         
+</td>
+ <td><p align="center"> <img alt="Part aspect example" src="../../images/scale_example_part_aspect.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+</li></ul>
+
+<h3>Text</h3>
+<p>The text elements are used to display text on the screen.</p>
+<p>The texts can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">size</span>: font-size
+<p>Specifies the font size for the text. When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
+       
+<li><span style="font-family: Courier New,Courier,monospace">min</span>: horizontal vertical
+<p>Specifies a pair of boolean values that define whether the container can be reduced further than the text size. The property is used to prevent the container from chopping the text.</p>
+<p>When <span style="font-family: Courier New,Courier,monospace">min</span> is set horizontally or vertically, the minimum height or width of the part is decided by the text size.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">max</span>: horizontal vertical
+<p>Specifies a pair of boolean values that define whether the container can be expanded further than the text size.</p>
+<p>When <span style="font-family: Courier New,Courier,monospace">max</span> is set horizontally or vertically, the maximum height or width of the part is decided by the text size.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
+
+<table>
+<caption>Table: Edje text property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;TIZEN&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Minimum height of the part container is decided by the text size
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>         
+</td>
+ <td><p align="center"> <img alt="Text example" src="../../images/scale_example_text.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">fit</span>: horizontal vertical
+<p>Specifies a pair of values that define whether the text is scaled to fill its container horizontally and/or vertically.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
+
+<table>
+<caption>Table: Edje text property fit example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.1;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;TIZEN&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Resize text to fill the container height
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fit: 0 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>         
+</td>
+ <td><p align="center"> <img alt="Text fit example" src="../../images/scale_example_text_fit.png" /> </p> </td>
+ </tr>
+ </tbody></table></li></ul>
+
+ 
+ <h3>Image</h3>
+<p>The image elements are used to display images on the screen.</p>
+<p>The images can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">border</span>: left right top bottom
+<p>Specifies the border size of the image in pixels. This property sets the area of each side of the image to be displayed as a fixed size border, preventing the corners from being changed on a resize.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">border_scale</span>
+<p>Specifies whether the border scales its size according to the scaling factor.</p>
+<p>The default value is 0 (off). To make the border scalable, the value must be set to 1 (on).</p>
+
+<table>
+<caption>Table: Edje image property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;00_button_01_normal.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.6;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.7;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;00_button_01_normal.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;ninepatch_image&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.9;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;00_button_01_normal.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 4 4 0 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Affected by scaling factor
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border_scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>         
+</td>
+ <td><p align="center"> <img alt="Image example" src="../../images/scale_example_image.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+
+</li></ul>
+<h3>Image Set</h3>
+<p>The image set elements are used to display a specific image on the screen based on the container size.</p>
+<p>The image sets can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">name</span>: image-name
+<p>Specifies the name of the image file.</p></li>
+       
+<li><span style="font-family: Courier New,Courier,monospace">size</span>: minw minh maxw maxh
+<p>Specifies the minimum and maximum size that causes a specified image to be selected and shown.</p>
+<p>The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part&#39;s container, an appropriate image is loaded.</p>
+
+<table>
+<caption>Table: Edje image set property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections 
+{
+&nbsp;&nbsp;&nbsp;group 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;pig.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 640 800 1200 1500;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;monkey.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 400 500 639 799;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;cat.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 240 300 399 499;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;mouse.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80 100 239 299;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;snail.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 79 99;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image1&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.45;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image2&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.5;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.75;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}</pre>        
+</td>
+ <td><p align="center"> <img alt="Image set example" src="../../images/scale_example_image_set.png" /> </p> </td>
+ </tr>
+ </tbody></table> 
+</li></ul>
+
+<h3>Part Types</h3>
+<p>You can use fixed and flexible parts:</p>
+
+<ul><li>Fixed parts
+
+<ul><li>Fixed parts have a minimum size (at least width or height).</li>
+<li>When the part <span style="font-family: Courier New,Courier,monospace">scale</span> property is set to 1 (on), the scaling factor has an effect on the minimum size.</li>
+<li>Fixed parts are used when the parts must keep a fixed size in any device or any orientation.</li></ul></li>
+<li>Flexible parts
+<ul><li>Flexible parts resize according to the container size and other fixed parts&#39; size.</li>
+<li>Flexible parts are used when the parts can be resized in any device or any orientation.</li></ul></li></ul>
+
+<p class="figure">Figure: Fixed and flexible parts</p> 
+<p align="center"> <img alt="Fixed and flexible parts" src="../../images/scale_fixed_flexible.png" /> </p> 
+
+
+<h2 id="aspect" name="aspect">Aspect Ratio</h2>
+
+<p>In Tizen, the application generally fills out the screen. However, sometimes you want the application to be shown in a specific aspect ratio, regardless of the screen size.</p>
+<p>As images are scaled in different devices, they are resized based on the container size. The images have specific properties that define the area to be shown when resized.</p>
+
+<p>For example, the following table illustrates what happens to the parts marked with yellow rectangles in the following figures, when scaling properties are applied.</p>
+  
+<p class="figure">Figure: Original image [1920x1280 (8:5)]</p> 
+<p align="center"> <img alt="Original image [1920x1280 (8:5)]" src="../../images/scale_original_image.png" /> </p> 
+
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">To set the required aspect ratio, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span> function or the <span style="font-family: Courier New,Courier,monospace">aspect_preference</span> attribute in the EDC.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+<table>
+<caption>Table: Image resizing effects with a specific aspect ratio</caption>
+<col width="40%" />
+<tbody>
+<tr>
+ <th rowspan="2">Aspect</th>
+ <th colspan="2">Container area</th>
+</tr>
+<tr>
+ <th>720x384 (15:8)</th>
+ <th>720x640 (9:8)</th>
+</tr>
+ <tr>
+ <td>HORIZONTAL
+<p>Resizing based on the container width while keeping the image aspect ratio.</p>
+<p>Extra height goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_1.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_2.png" /></p></td>
+ </tr>
+ <tr>
+ <td>VERTICAL
+<p>Resizing based on the container height while keeping the image aspect ratio.</p> 
+<p>Extra width goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_3.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_4.png" /></p></td>
+ </tr>
+ <tr>
+ <td>BOTH
+<p>Resizing based on the container area while keeping the image aspect ratio.</p>
+<p>No extra width or height goes outside the image area, so the entire image is always shown.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_5.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_6.png" /></p></td>
+ </tr>
+ <tr>
+ <td>NONE
+<p>Resizing to fill the available area while keeping the image aspect ratio.</p> 
+<p>Extra width or height goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_7.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_8.png" /></p></td>
+ </tr> 
+ </tbody></table>
+
+<h3>Setting the Image Aspect Ratio</h3>
+<p>In case of an image object, you can set its aspect ratio with additional APIs:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span>
+<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">TRUE</span>, the image resizes to fill the entire area while keeping its aspect ratio. It lets the extra width or height go outside of the area (same result as with the aspect NONE in the above table).</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">elm_image_aspect_fixed_set()</span>
+
+<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">FALSE</span>, the image resizes to fill the entire area without keeping its original aspect ratio. The image can be distorted to fit the area.</p>
+<table>
+<caption>Table: Image resizing without keeping the aspect ratio</caption>
+<tbody>
+<tr>
+ <th colspan="2">Container area</th>
+</tr>
+<tr>
+ <th>720x384 (15:8)</th>
+ <th>720x640 (9:8)</th>
+</tr>
+ <tr>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_9.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_10.png" /></p></td>
+ </tr>
+ </tbody></table>
+</li></ul>
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/theme_n.htm b/org.tizen.ui.guides/html/native/efl/theme_n.htm
new file mode 100755 (executable)
index 0000000..00ac2ce
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/theme_n.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Themes: Specifying the UI Look and Feel</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Themes: Specifying the UI Look and Feel</h1> 
+
+   
+<p>Tizen provides powerful theme features you can use to easily change your applications&#39; UI look and feel. A theme is a collection of visual identities, which provide the graphical appearance of applications. A theme comprises a layout, shapes, fonts, and colors for the UI components.</p> 
+
+<p>The Tizen platform provides a default theme for UI components implemented based on the Tizen UX design concept (AIR – light and simple). To change the current look and feel, you can replace the default theme with a customized theme package.</p>
+
+<p>The Edje library used by Elementary provides themes. You can also use Edje to create your own objects to modify the application appearance with a unique GUI. The UI components are customizable so that each application can have its own customized theme to overlay the default theme.</p>
+
+<p>Edje supports separation between layout and logic. While it is possible to implement both GUI and logic in the C code, a loose coupling of GUI and logic is more convenient when you want to revise, add, or delete application UI components. In EFL, the GUI is handled by Edje, while application logic is handled in the C code.</p>
+
+<p>Edje was designed as a theme layer for moving the look, feel, and animation of objects into separate data files loaded at runtime. Using a plain text <a href="edje_intro_n.htm">EDC file</a> you can create your application&#39;s layout without writing a single line of code. EFL can even change the theme of application at runtime without restarting the application.</p>
+
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/threads_n.htm b/org.tizen.ui.guides/html/native/efl/threads_n.htm
new file mode 100755 (executable)
index 0000000..0e837b2
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/threads_n.htm
@@ -0,0 +1,507 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Using Threads</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#Thread_safety">Thread Safety</a></li>
+                       <li><a href="#Costs">Thread Pools</a></li> 
+                       <li><a href="#Functions">Thread Management with Ecore</a></li>
+                       <li><a href="#low_level">Low-level Functions</a></li>
+                       <li><a href="#Examples">Thread Use Examples</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">        
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Using Threads</h1> 
+
+<p>Threads are concurrent execution environments that are lighter than full-blown processes because they share some operating system resources. Threads make it possible to do several things at the same time while using less resources and offering simpler synchronization and data exchange compared to processes.</p>
+
+<p>If you move a blocking operation to a separate thread, it cannot block the event loop and keeps the user interface reactive. Blocking the event loop and using long-running callbacks means the application cannot update its graphical user interface.</p>
+
+<p>While threads can be useful, they are not always the best choice:</p>
+
+<ul><li>The first rule to using threads is to avoid them as much as possible, as there are often better tools and approaches. For example, to do network transfers, use <span style="font-family: Courier New,Courier,monospace;">Ecore_Con</span> that integrates with the event loop to use a function based on callbacks. Being able to use such a function means that specific support work has been done in libraries. In some cases, using a function and libraries is impossible, and in those situations threads are required.</li>
+<li>Use threads in CPU-intensive tasks and disk IOs. For example, a thread is the appropriate way to apply filters to an image or to a video without blocking the interface.</li>
+<li>Use threads to take advantage of multiple available CPU cores, if the workload can be split into several units of work and spread across the cores. A typical example for an image processing application on a quad-core CPU is to process 4 images at once, each on 1 thread. For such tasks, the thread pool helps with the creation and scheduling of the threads, handling all the grunt work.</li></ul>
+
+<h2 id="Thread_safety" name="Thread_safety">Thread Safety</h2>
+
+<p>If several strings have to work on the same resources, conflicts can happen as the threads are run in parallel. For example, if thread A modifies several values while thread B is reading them, it is likely that some of the values read by B are outdated. Similar issues can happen if both threads are modifying data concurrently.</p>
+
+<p>These kinds of conflicts are called race-conditions: depending on which thread is faster, the output changes and can be incorrect. Avoiding such issues is called thread safety. Thread safety involves critical sections, which are blocks of code that operate on shared resources and must not be accessed concurrently by another thread.</p>
+
+<p>The usual solution for ensuring exclusive access to shared resources is mutual exclusion: only 1 thread can operate on the data at any given time. Mutual exclusion is often implemented through locks. Before attempting to operate on a shared resource, the thread waits until it can lock something called a mutex (stands for mutual exclusion), then operates on the resource, and unlocks the mutex. Operating systems guarantee that only 1 thread can lock a mutex at a given time: this ensures that only 1 thread operates on the shared resource at one time.</p>
+
+<p>For more information on thread safety, see <a href="#low_level">Low-level Functions</a>.</p>
+
+<h2 id="Costs" name="Costs">Thread Pools</h2>
+
+<p>Threads are operating system resources: while much lighter than processes, they still have a cost. Moreover, spawning a thousand threads means that each of them only gets 1/1000th of the total CPU time: each thread is progressed slowly and, in the worst case, the system wastes all of its time switching between threads without doing any actual work.</p>
+
+<p>Thread pools solve this problem. In thread pools, upto a maximum number of threads are created on-demand and used to execute tasks. When the tasks are finished, they are kept alive but sleeping. This avoids the cost of creating and destroying them.</p>
+
+<p>In EFL, the thread pool is controlled by a <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter, which defines the maximum number of threads running at the same time. Another control feature is the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback that runs from the main loop thread after a task has completed and is typically used to extract the data from the finished task and make it available to the main loop.</p>
+
+<p>To manage the maximum number of threads:</p>
+
+<ul>
+<li>To retrieve the current value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function.
+</li>
+
+<li>To set the value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function. The value has a maximum of 16 times the CPU count.
+</li>
+
+<li>To reset the maximum number of threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.
+
+</li>
+
+<li>To get the number of available threads in the pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function. The function returns the current maximum number of threads minus the number of running threads. The number can be a negative value, if the maximum number of threads has been lowered.
+</li>
+</ul>
+
+<p>The following figures illustrate the thread pool. The first figure shows the occupancy of a hypothetical thread pool. There are several tasks, of which 4 are running. The  <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter of the pool is 4, and the other tasks are waiting. There is no thread with its <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback currently called.</p>
+
+<p class="figure">Figure: Thread pool, step 1</p> 
+<p align="center"><img alt="Thread pool, step 1" src="../../images/thread_pool_lifecycle_1.png" /></p> 
+
+<p>When a task, applying the sepia filter on image1, finishes, the corresponding <span style="font-family: Courier New,Courier,monospace;">func_end()</span> function is invoked from the main loop.</p>
+
+<p class="figure">Figure: Thread pool, step 2</p> 
+<p align="center"><img alt="Thread pool, step 2" src="../../images/thread_pool_lifecycle_2.png" /></p> 
+
+<p>With the task done, one of the threads from the pool becomes available, and another thread, adding the reverberation effect on audio3, can run in it.</p>
+
+<p class="figure">Figure: Thread pool, step 3</p> 
+<p align="center"><img alt="Thread pool, step 3" src="../../images/thread_pool_lifecycle_3.png" /></p> 
+
+<p>As long as there are tasks to be done, the thread pool continues the same way, running tasks in its threads whenever a thread is available.</p>
+
+
+<h2 id="Functions" name="Functions">Thread Management with Ecore</h2>
+
+<p>Ecore offers a simplified API for managing threads in EFL applications. The Ecore API applies to a typical scenario where the main thread creates another thread, which in turn sends data back to the main thread or calls GUI-related functions. GUI-related functions are not thread-safe.</p>
+
+<h3>Creating Threads with Ecore</h3>
+
+<p>The threads created with Ecore are by default integrated with the thread pool and offer simple callback-based ways to interact with the main loop. New threads are created as needed until the maximum capacity of the thread pool is reached.</p>
+
+<ul><li>To return values to the main thread:
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to send intermediate feedback from the thread to the main loop.</p></li>
+
+<li>To return only the final value to the main thread:
+<p>To create and run a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function. It runs a function inside a thread from the thread pool and takes care of all the low-level work. It returns the corresponding thread handler or <span style="font-family: Courier New,Courier,monospace;">NULL</span> on failure.</p>
+
+<p>The most common way to return data from one thread to the main thread is to put a pointer to it in the data. When the thread is aborted or finishes, either <span style="font-family: Courier New,Courier,monospace;">func_cancel()</span> or <span style="font-family: Courier New,Courier,monospace;">func_end()</span> is called from the main loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
+
+<p>The data pointer approach can only be used when the data is shared between the one thread and the main thread only. However, this does not prevent you from using the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback to merge the results into a single data structure. For example, you can add all the values computed by the threads to an <span style="font-family: Courier New,Courier,monospace;">Eina_List</span>, as all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p></li></ul>
+
+
+<h3>Running Callbacks from the Main Loop</h3>
+
+<p>If you are performing operations in another thread and want to update a progress bar, the update operation must be done from the main thread. The simplest way is to use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function, which takes a function and some data as parameters and instructs the main loop to execute the given function with the given data.</p>
+
+<p>Depending on the kind of thread the function is called from, the process differs:</p>
+<ul>
+<li>If the function is called from a thread that is not the main one, the function sends a message to the main loop and returns quickly. The message is processed in order, similarly to others.</li>
+
+<li>If the function is called from the main thread, the function is called immediately as if it were a direct call.</li>
+</ul>
+
+<p>If you want to wait until the callback is called and returns, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function, which is similar but synchronous. Since it is synchronous, it can also return the value returned by the callback.</p>
+
+<h2 id="low_level" name="low_level">Low-level Functions</h2>
+
+<p>Eina offers low-level functions that are portable across the operating system, such as locks, conditions, semaphores, barriers, and spinlocks. The functions follow closely the logic of pthreads.</p>
+
+<p>While these functions are useful, they are building blocks and not usually useful in EFL applications considering the higher-level functions that are available in Ecore.</p>
+
+<p>For an introduction to threads and pthreads in particular, see:</p>
+
+<ul>
+<li><a href="http://www.ibm.com/developerworks/library/l-pthred/index.html" target="_blank">Basic use of pthreads</a> (IBM developerWorks)</li>
+<li><a href="https://computing.llnl.gov/tutorials/pthreads/" target="_blank">POSIX Threads Programming</a> (Lawrence Livermore National Laboratory)</li>
+<li><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/pthread.h.html" target="_blank">POSIX 2003 specification</a> (opengroup)</li>
+</ul>
+
+<p>If you are already familiar with threads, see the standard pthreads documentation and the Eina reference documentation, or the following function lists. Remember that the Eina functions map very closely to the pthreads functions.</p>
+
+<table>
+<caption>Locks (mutual exclusions)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_new()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_destroy()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_lock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_trylock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take_try()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_unlock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_release()</span></td> 
+</tr>
+<tr> 
+<td>none (prints debug information on the lock)</td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_debug()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Conditions (notifications when condition objects change)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_init()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_destroy </span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_wait()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_wait()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_timedwait()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_timedwait()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_broadcast()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_broadcast()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_signal()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_signal()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>RWLocks (Read-write locks, for multiple-readers/single-writer scenarios)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_init()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_new() </span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_destroy()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_rwlock_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_rdlock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_take_read()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_wrlock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_take_write()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_unlock()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_release()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>TLS (Thread-Local Storage)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_create()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_delete()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_getspecific()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_get()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_setspecific</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_set()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Semaphores (access restrictions for a set of resources)</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">sem_init()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">sem_destroy()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">sem_wait()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_lock()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">sem_post()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_release()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Barriers</caption>
+<colgroup> 
+<col width="50%" /> 
+<col width="50%" /> 
+</colgroup> 
+<tbody>
+<tr> 
+<th>pthreads function</th> 
+<th>Eina equivalent</th> 
+</tr> 
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_init()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_new()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_destroy()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_free()</span></td> 
+</tr>
+<tr> 
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_wait()</span></td> 
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_wait()</span></td> 
+</tr>
+</tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Thread Use Examples</h2>
+
+<p>The following examples display a window with a label. An auxiliary thread semi-regularly changes the text of the label. If you want to display a regular animation, use the Ecore animators described in the <a href="main_loop_n.htm">Main Loop</a> guide.</p>
+
+<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function:</p>
+
+<ol>
+
+<li>Implement the GUI function that sets the text of a label and can be called from the main thread.
+
+<pre class="prettyprint">
+static void
+_set_label_text(void *data, Ecore_Thread *thread __UNUSED__, void *msgdata)
+{
+&nbsp;&nbsp;&nbsp;char buf[64];
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Tick %d&quot;, (int)(uintptr_t)msgdata);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
+}
+</pre>
+</li>
+<li>Send the feedback from the other thread using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function. The following function does nothing besides sending the feedback and sleeping.
+
+<pre class="prettyprint">
+static void
+_long_function(void *data __UNUSED__, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;int iteration;
+&nbsp;&nbsp;&nbsp;// Change the text roughly every 1 second. This is only an example; if you
+&nbsp;&nbsp;&nbsp;// want regular animations, use Ecore animators!
+&nbsp;&nbsp;&nbsp;for (iteration = 0; ; iteration++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Since you are running from another thread, you need to take special
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// care and instead send data to the main thread and have it run the
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// feedback function given when creating the thread
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Sleep for roughly one second
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Create an end function that is called when the thread exits. In this example, the end function is called only right before the application exits. However, if the blocking function is more complex, it can trigger the end function.
+
+<pre class="prettyprint">
+static void
+_end_func(void *data, Ecore_Thread *thread __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Ticks over&quot;);
+}
+</pre>
+</li>
+
+<li>Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to start the thread:
+
+<pre class="prettyprint">
+ecore_thread_feedback_run(_long_function, _set_label_text, _end_func, NULL, ad, EINA_FALSE);
+</pre>
+</li>
+</ol>
+
+<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function:</p>
+
+<ol>
+<li>Implement the GUI function that sets the text of a label and can be called from the main thread. The function receives data as a structure and alternatively displays &quot;Tick d&quot; or &quot;Tock d&quot;.
+
+<pre class="prettyprint">
+struct thd 
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad;
+&nbsp;&nbsp;&nbsp;Eina_Bool tick_not_tock;
+&nbsp;&nbsp;&nbsp;int iteration;
+};
+static void *
+_set_label_text_tick_tock(void *data)
+{
+&nbsp;&nbsp;&nbsp;char buf[64];
+&nbsp;&nbsp;&nbsp;struct thd *thd = data;
+&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s %d&quot;, (thd-&gt;tick_not_tock ? &quot;Tick&quot; : &quot;Tock&quot;), thd-&gt;iteration);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(thd-&gt;ad-&gt;label, buf);
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</pre>
+</li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function call the GUI function. Differentiate between the ticks and the tocks:
+
+<pre class="prettyprint">
+static void
+_long_function_tick_tock(void *data, Ecore_Thread *thread __UNUSED__)
+{
+&nbsp;&nbsp;&nbsp;struct thd *thd = malloc(sizeof(struct thd));
+&nbsp;&nbsp;&nbsp;thd-&gt;ad = data;
+&nbsp;&nbsp;&nbsp;for (thd-&gt;iteration = 0; ; (thd-&gt;iteration)++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_FALSE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;free(thd);
+}
+</pre>
+</li>
+
+<li>Start the thread through the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function:
+
+<pre class="prettyprint">
+ecore_thread_run(_long_function_tick_tock, _end_func, NULL, ad);
+</pre>
+</li>
+</ol>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/tools_n.htm b/org.tizen.ui.guides/html/native/efl/tools_n.htm
new file mode 100755 (executable)
index 0000000..eba7d01
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/tools_n.htm
@@ -0,0 +1,243 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>\r
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Tools</title>\r
+ </head>\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+\r
+ <div id="toc-navigation">\r
+    <div id="profile">\r
+        <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
+    </div>\r
+\r
+    <div id="toc_border"><div id="toc">\r
+        <p class="toc-title">Content</p>\r
+        <ul class="toc">             \r
+                       <li><a href="#string">String</a></li>\r
+                       <li><a href="#memory">Memory Pool</a></li>\r
+                       <li><a href="#safety">Safety Checks</a></li>\r
+        </ul>\r
+        <p class="toc-title">Related Info</p>\r
+        <ul class="toc">\r
+               <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>\r
+               <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>\r
+            </ul>\r
+    </div></div>\r
+</div>\r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+   \r
+   <h1>Tools</h1>\r
+ <p>Eina provides a number of tools, such as string manipulation, that make your life easier when coding applications:</p>\r
+\r
+<ul>\r
+<li>Convert fast: conversion from, for example, strings to integers and double</li>\r
+<li>Counter: measures the number of calls and their time</li>\r
+<li>Error: error identifiers</li>\r
+<li>File: file list and path split</li>\r
+<li>Lazy allocator: lazy allocator</li>\r
+<li>Log: full-featured logging system</li>\r
+<li>Magic: provides runtime type checking</li>\r
+<li><a href="#memory">Memory Pool</a>: abstraction for various memory allocators</li>\r
+<li>Module lists: loads and shares modules using the <span style="font-family: Courier New,Courier,monospace;">Eina_Module</span> standard</li>\r
+<li>Rectangle: rectangle structure and standard manipulation methods</li>\r
+<li><a href="#safety">Safety Checks</a>: extra checks that report unexpected conditions and can be disabled during compilation</li>\r
+<li><a href="#string">String</a>: set of functions that manage C strings</li>\r
+</ul>    \r
+  \r
+<h2 id="string" name="string">String</h2>\r
+\r
+<p>When creating applications, you always need to manipulate strings. Eina provides a very useful API for manipulating C strings:</p>\r
+\r
+<ul><li>\r
+\r
+<p>The most common string manipulation is the &quot;split&quot;. If you have a string, such as &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;, and you want to print it in an easily readable format, you can use the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function to split the string using a delimiter. The first parameter is the string to split, the second determines where to split the string, and the final parameter is the maximum number of strings to split the string into. If you set a number less than 1, it splits the string as many times as possible.</p>\r
+<p>The function returns a newly-allocated NULL-terminated array of strings, or <span style="font-family: Courier New,Courier,monospace;">NULL</span>, if it fails to allocate the array. Always remember to free the memory allocated by the <span style="font-family: Courier New,Courier,monospace;">eina_str_split()</span> function.</p>\r
+\r
+<pre class="prettyprint">\r
+char *nicks = &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;;\r
+char **result_arr;\r
+int i;\r
+\r
+// Splitting the string with &#39;:&#39; delimiter\r
+result_arr = eina_str_split(names, &quot;:&quot;, 0);\r
+// Printing the result\r
+for (i = 0; result_arr[i]; i++)\r
+&nbsp;&nbsp;&nbsp;printf(&quot;Nick : %s\n&quot;, result_arr[i]);\r
+// Remember to free memory\r
+free(arr[0]);\r
+free(arr);\r
+</pre></li>\r
+\r
+\r
+<li><p>To change the string to lowercase or uppercase, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_tolower()</span> and <span style="font-family: Courier New,Courier,monospace;">eina_str_toupper()</span> functions. They change the case for all characters of the given string. These functions modify the original strings.</p>\r
+\r
+<pre class="prettyprint">\r
+char *str;\r
+// Initialize the string\r
+str = malloc(sizeof(char) * 4);\r
+strcpy(str, &quot;bsd&quot;);\r
+// Change the string to uppercase\r
+eina_str_toupper((char **)&amp;str);\r
+printf(&quot;%s\n&quot;, str);\r
+// Change the string to lowercase\r
+eina_str_tolower(&amp;str);\r
+printf(&quot;%s\n&quot;, str);\r
+// Free the allocated memory\r
+free(str);\r
+</pre></li>\r
+<li><p>If you need to &quot;join&quot; 2 strings of known length, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_join()</span> function. The fist parameter is the buffer to store the result, the second is the size of the buffer, the third is the separator between the 2 strings, and the 2 final parameters are the stings to be joined.</p>\r
+\r
+<pre class="prettyprint">\r
+char *part1 = &quot;Tizen powered by&quot;;\r
+char *part2 = &quot;Enlightenment Foundation Libraries&quot;;\r
+char *res;\r
+size_t size;\r
+// Calculate the string size + 1 for the delimiter\r
+size = strlen(part1) + strlen(part2) + 1\r
+// Allocate memory for the result\r
+res = malloc(sizeof(char) * size);\r
+// Join the strings\r
+eina_str_join(res, size, &#39; &#39;, part1, part2);\r
+printf(&quot;%s\n&quot;, res);\r
+// Free the allocated memory\r
+free(res):\r
+</pre></li>\r
+<li><p>To check whether a string starts or ends with another string, use the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_prefix()</span> or <span style="font-family: Courier New,Courier,monospace;">eina_str_has_suffix()</span> function. You can also check whether a string has a particular extension with the <span style="font-family: Courier New,Courier,monospace;">eina_str_has_extension()</span> function.</p>\r
+\r
+<p>These functions return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the given string contains the specified prefix, suffix, or extension, and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if it does not.</p>\r
+\r
+<pre class="prettyprint">\r
+char *names = &quot;Carsten;Cedric;Tom;Chidambar;Boris;Philippe&quot;\r
+if (eina_str_has_prefix(names, &quot;Carsten&quot;))\r
+&nbsp;&nbsp;&nbsp;printf(&quot;String starts with &#39;Carsten&#39;&quot;)\r
+if (eina_str_has_suffix(names, &quot;Philippe&quot;))\r
+&nbsp;&nbsp;&nbsp;printf(&quot;String ends with &#39;Philippe&#39;&quot;)\r
+if (eina_str_has_extension(names, &quot;philippe&quot;))\r
+&nbsp;&nbsp;&nbsp;printf(&quot;String has extension &#39;philippe&#39;&quot;)\r
+else\r
+&nbsp;&nbsp;&nbsp;printf(&quot;String does not have extension &quot;philippe)\r
+</pre></li></ul>\r
+\r
+<h2 id="memory" name="memory">Memory Pool</h2>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">Eina_Mempool</span> tool provides memory pool functionality. With a memory pool, you can preallocate fixed-size memory spaces for easy memory management.</p>\r
+\r
+<p>The following mempools are available:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">buddy</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">chained_pool</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">ememoa_fixed and ememoa_unknown</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">fixed_bitmap</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">pass_through</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">one_big</span></li>\r
+</ul>\r
+\r
+<h2 id="safety" name="safety">Safety Checks</h2>\r
+\r
+<p>Eina safety checks are a set of macros that can be used to check for parameters or values that must never occur. The concept is similar to the <span style="font-family: Courier New,Courier,monospace;">assert()</span> function, but safety checks log the parameter or value and return instead of aborting your program.</p>\r
+\r
+<p>The following safety checks are available:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN(exp)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL(exp, val)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO(exp, label)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN(exp)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN_VAL(exp, val)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_GOTO(exp, label)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN(exp)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_RETURN_VAL(exp, val)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_FALSE_GOTO(exp, label)</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_ARG_NONNULL(...)</span></li>\r
+</ul>\r
+\r
+<p>To return if a variable is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro calls return if the given parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>\r
+\r
+<pre class="prettyprint">\r
+Eina_Bool myfunction(char *param) \r
+{\r
+&nbsp;&nbsp;&nbsp;// If my param is NULL, EINA_SAFETY_ON_NULL_RETURN calls &quot;return&quot;\r
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN(param);\r
+\r
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);\r
+\r
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;\r
+} \r
+</pre>\r
+\r
+<p>To return a specific value, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN_VAL()</span> function instead of the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function. This macro returns the given value.</p>\r
+\r
+<pre class="prettyprint">\r
+Eina_Bool void myfunction(char *param)\r
+{\r
+&nbsp;&nbsp;&nbsp;// If the parameter is NULL, return EINA_FALSE;\r
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN_VAL(param, EINA_FALSE);\r
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);\r
+\r
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;\r
+}\r
+</pre>\r
+\r
+<p>To call another function if a parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function. This macro works similarly to the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_RETURN()</span> function except that it calls goto with the given function instead of return.</p>\r
+\r
+<pre class="prettyprint">\r
+static void isnullcb()\r
+{\r
+&nbsp;&nbsp;&nbsp;printf(&quot;The parameter is NULL\n&quot;);\r
+}\r
+Eina_Bool void myfunction(char *param)\r
+{\r
+&nbsp;&nbsp;&nbsp;// If the parameter is NULL we return EINA_FALSE;\r
+&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_GOTO(param, isnullcb);\r
+&nbsp;&nbsp;&nbsp;printf(&quot;My pram is : %s\n&quot;, param);\r
+\r
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;\r
+}\r
+</pre>\r
+\r
+<p>Eina also provides macros that check whether a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span> or <span style="font-family: Courier New,Courier,monospace;">FALSE</span>. For example, to call return if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_TRUE_RETURN()</span> function. To call &quot;goto&quot; in a given function if a given value is <span style="font-family: Courier New,Courier,monospace;">TRUE</span>, use the <span style="font-family: Courier New,Courier,monospace;">EINA_SAFETY_ON_NULL_GOTO()</span> function.</p>\r
+\r
+  \r
+  <table class="note">\r
+    <tbody>\r
+        <tr>\r
+            <th class="note">Note</th>\r
+        </tr>\r
+        <tr>\r
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>\r
+        </tr>\r
+    </tbody>\r
+</table> \r
+   \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/touch_gesture_n.htm b/org.tizen.ui.guides/html/native/efl/touch_gesture_n.htm
new file mode 100755 (executable)
index 0000000..e295894
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/touch_gesture_n.htm
@@ -0,0 +1,265 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Handling Component Touch Gestures</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+       
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#init">Initializing Touch Gestures</a></li>
+                       <li><a href="#touch">Implementing Touch Gestures</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Handling Component Touch Gestures</h1>
+
+  
+<p>This tutorial demonstrates how you can implement different types of gestures provided by the EFL library and instructions on how to use them.</p>
+
+ <h2 id="init" name="init">Initializing Touch Gestures</h2>
+
+<p>The EFL library provides a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum, line, zoom and rotate, which can be used by the application to build a dynamic user interface interaction which is simple to use as well as intuitive.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and adds it to naviframe.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it, *tabbar_it;
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;layout);
+&nbsp;&nbsp;&nbsp;// Calendar View
+&nbsp;&nbsp;&nbsp;create_main_view(ad);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;nf, &quot;Calendar&quot;, NULL, NULL, ad-&gt;calendar, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;elm.swallow.content&quot;, ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view</span> function creates the application layout by arranging the labels and rectangles by using recursive composition of the box layout:</p>
+<pre class="prettyprint">
+static void
+create_main_view(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Box
+&nbsp;&nbsp;&nbsp;ad-&gt;box = elm_box_add(ad-&gt;nf);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;box, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(ad-&gt;box, 0, 5 * elm_config_scale_get());
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;box);
+&nbsp;&nbsp;&nbsp;// Event Rect
+&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(ad-&gt;box));
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
+&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;gl = create_gesture_layer(ad);
+
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;box, ad-&gt;rect);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
+}
+</pre>
+
+<p>A gesture layer is added to the rectangle object. This layer is able to receive the gesture event:</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_gesture_layer(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *g = elm_gesture_layer_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_gesture_layer_attach(g, ad-&gt;rect);
+}
+</pre>
+
+<p>The following figure illustrates the Gesture Detector.</p>
+
+  <p class="figure">Figure: Gesture Detector screen</p> 
+  <p align="center"><img alt="Gesture Detector screen" src="../../images/gesture_view2.png" /></p> 
+
+ <h2 id="touch" name="touch">Implementing Touch Gestures</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_attach()</span> is the function to which a gesture layer for a particular object is attached.</p>
+<p>A gesture can have 4 different states:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_MOVE</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span></li></ul>
+<p>Every gesture starts with the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span> state and finishes with either the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span> or <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span> state depending on whether the gesture is completed or aborted on that object. </p>
+<p>If an application only needs to track a finished gesture, it can listen for the finished state only. For a more complete control of the gesture, an application can listen for all state changes for that particular gesture.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function is used for registering state change callback for a particular gesture.</p>
+<p>For more information about the gestures, see the gesture documentation.</p>
+
+<p>To detect touch gestures:</p>
+<ul>
+<li><p>The following example adds callbacks for listening to the tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, n_finger_tap_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, n_finger_tap_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, n_finger_tap_abort, ad);
+</pre></li>
+<li><p>The following example adds callbacks for listening to the double tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, dbl_click_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, dbl_click_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, dbl_click_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, dbl_click_abort, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the triple tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, triple_click_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, triple_click_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, triple_click_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, triple_click_abort, ad);
+</pre></li>
+<li><p>The following example adds callbacks for listening to the long tap gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the momentum gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, momentum_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, momentum_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, momentum_move, ad);
+</pre></li>
+
+<li><p>The following example adds callbacks for listening to the line gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, line_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, line_move, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, line_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, line_abort, ad);
+</pre></li>
+ 
+<li><p>The following examples add callbacks for listening to the flick gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, flick_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, flick_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, flick_abort, ad);
+</pre></li>
+
+<li><p>The following examples add callbacks for listening to the zoom gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, zoom_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, zoom_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, zoom_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, zoom_move, ad);
+</pre></li>
+ 
+<li><p>The following example adds callbacks for listening to the rotate gesture:</p>
+<pre class="prettyprint">
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_START, rotate_start, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_END, rotate_end, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_ABORT, rotate_abort, ad);
+elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
+&nbsp;&nbsp;&nbsp;ELM_GESTURE_STATE_MOVE, rotate_move, ad);
+</pre></li>
+
+<li><p>The following example adds a callback for getting the tap gesture finishing notification:</p>
+<pre class="prettyprint">
+static Evas_Event_Flags
+n_finger_tap_end(void *data, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *) event_info;
+&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+}
+</pre></li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div> 
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
diff --git a/org.tizen.ui.guides/html/native/efl/ui_components_mn.htm b/org.tizen.ui.guides/html/native/efl/ui_components_mn.htm
new file mode 100755 (executable)
index 0000000..385a8c1
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/ui_components_mn.htm
@@ -0,0 +1,1090 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Mobile UI Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li> 
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Mobile UI Components</h1> 
+  
+<p>The EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. The number of supported UI components is around 80, including both containers and non-containers. Originally, the Elementary was developed as part of the Window Manager development on Desktop devices. For the mobile profile, Tizen reused the proper UI components and created new ones, and then enhanced and adjusted all of them for Tizen native applications.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>The UI components are mobile-friendly: for example, the Naviframe component supports view-managing for multiple views, the Entry component supports many modes (such as Password, Single/Multi-line, Edit/No-Edit), the Index component supports fast access to another group of UI items, and the Toolbar component shows a menu when an item is selected.</p>
+<p>The mobile UI components were designed to allow the user to interact with touch screen-equipped mobile devices. Therefore, when developing mobile applications, you can easily use them through the mobile-related infrastructure in company with view managing and when reacting to touch events and the user finger size.</p>
+  
+  <table border="1"> 
+   <caption>
+     Table: Available UI components
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr>      
+       <tr> 
+     <td><a href="components_mn.htm#background">Background</a></td> 
+     <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#button">Button</a></td> 
+     <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#check">Check</a></td> 
+     <td>The check component toggles the value of a Boolean between true and false.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#colorselector">Colorselector</a></td> 
+     <td>The colorselector component provides a color selection solution to the user. It has different modes available, each of them showing a different configuration of the color selection.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#ctxpopup">Ctxpopup</a></td> 
+     <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#datetime">Datetime</a></td> 
+     <td>The datetime component can display and input date and time values.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#entry">Entry</a></td> 
+     <td>The entry component is a box to which the user can enter text.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#flip">Flip</a></td> 
+     <td>The flip component can hold two Evas objects and let the user flip between these objects using a variety of predefined animations.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#gengrid">Gengrid</a></td> 
+     <td>The gengrid component displays objects on a grid layout and renders only the visible objects.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#genlist">Genlist</a></td> 
+     <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
+    </tr>
+               <tr> 
+     <td><a href="components_mn.htm#glview">GLView</a></td> 
+     <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#icon">Icon</a></td> 
+     <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#image">Image</a></td> 
+     <td>The image component can load and display an image from a file or from memory.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#index">Index</a></td> 
+     <td>The index component provides an index for fast access to another group of UI items.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#label">Label</a></td> 
+     <td>The label component displays text with simple HTML-like markup.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#list">List</a></td> 
+     <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#map">Map</a></td> 
+     <td>The map component can display a geographic map. The default map data is provided by the OpenStreetMap project (<a target="_blank" href="http://www.openstreetmap.org/">http://www.openstreetmap.org/</a>).</td>
+    </tr>
+               <tr> 
+     <td><a href="components_mn.htm#notify">Notify</a></td> 
+     <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#panel">Panel</a></td> 
+     <td>The panel component is an animated object that can contain child objects. It can be expanded or contracted by clicking on the button on its edge.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#photo">Photo</a></td> 
+     <td>The photo component can be used to display a photo, such as a contact image. If no photo is set, the UI component displays a person icon to show that it is a photo placeholder.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#photocam">Photocam</a></td> 
+     <td>The photocam component is designed to display high-resolution photos taken with a digital camera. It allows you to zoom photos, load photos fast, and fit photos. It is optimized for JPEG images and has a low memory footprint.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#plug">Plug</a></td> 
+     <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#popup">Popup</a></td> 
+     <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#progressbar">Progressbar</a></td> 
+     <td>The progressbar component can be used to display the progress status of a given job.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#radio">Radio</a></td> 
+     <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#segmentcontrol">Segmentcontrol</a></td> 
+     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#slider">Slider</a></td> 
+     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#spinner">Spinner</a></td> 
+     <td>The spinner component enables the user to increase or decrease a numeric value by using arrow buttons.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#toolbar_component">Toolbar</a></td> 
+     <td>The toolbar component is a scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#tooltip">Tooltip</a></td> 
+     <td>The tooltip component is a smart object used to show tips or information about a parent object when the mouse hovers over the parent object.</td>
+    </tr>
+       <tr> 
+     <td><a href="elementary_transit_effect_tutorial_n.htm">Transit</a></td> 
+     <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_mn.htm#win">Win</a></td> 
+     <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
+    </tr>
+   </tbody> 
+  </table> 
+ 
+<h2 id="styles" name="styles">Mobile UI Component Styles</h2> 
+  
+<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component. For more detailed information, see the <a href="theme_n.htm">Themes</a>.</p>
+
+<table>
+<caption>Table: Button styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/button/base/default</td>
+ <td><img src="../../images/button_default.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/anchor</td>
+ <td><img src="../../images/button_anchor.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/bottom</td>
+ <td><img src="../../images/bottom.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>This style is used widely at the bottom of the screen.</td>
+ </tr>
+  <tr>
+ <td>elm/button/base/circle</td>
+ <td><img src="../../images/button_circle.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/dropdown</td>
+ <td><img src="../../images/button_dropdown.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_horizontal/default</td>
+ <td><img src="../../images/button_hoversel.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_horizontal_entry/default</td>
+ <td><img src="../../images/button_hoversel_entry.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_vertical/default</td>
+ <td><img src="../../images/button_hover_v.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/hoversel_vertical_entry/default</td>
+ <td><img src="../../images/button_hover_v_entry.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/icon_reorder</td>
+ <td><img src="../../images/button_recorder.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/drawers</td>
+ <td><img src="../../images/button_drawers.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/title_cancel</td>
+ <td><img src="../../images/button_title_cancel.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/naviframe/title_done</td>
+ <td><img src="../../images/button_title_done.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/button/base/option</td>
+ <td><img src="../../images/button_option.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>elm/check/base/default</td>
+ <td><img src="../../images/check_default.png" /></td>
+ </tr>
+ <tr>
+ <td>elm/check/base/favorite</td>
+ <td><img src="../../images/check_favorite.png" /></td>
+ </tr>
+  <tr>
+ <td>elm/check/base/on&amp;off</td>
+ <td><img src="../../images/check_on_off.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Colorselector styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/colorselector/item/color/colorplane</td>
+ <td><img src="../../images/color_colorplane.png" /></td>
+ <td>Use the following command: <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</span></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/progressbar_default.png" /></td>
+ </tr>
+ <tr>
+ <td>wheel</td>
+ <td><img src="../../images/progressbar_wheel.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: List styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/styleguide_genlist_def.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Multi Button Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/multibuttonentry/base/default</td>
+ <td><img src="../../images/multi_button_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>, guide</td>
+ <td>The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Toolbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/toolbar/base/default</td>
+ <td><img src="../../images/toolbar_default.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/toolbar/base/navigationbar</td>
+ <td><img src="../../images/toolbar_navigation.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/base/tabbar_with_title</td>
+ <td><img src="../../images/toolbar_tabbar.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/item/default</td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
+ </tr>
+  <tr>
+ <td>elm/toolbar/item/navigationbar</td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td>This style is for the toolbar&#39;s item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Flipselector styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/flipsel_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The style of the genlist&#39;s item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item&#39;s style.</p>
+<table>
+<caption>Table: Genlist styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/styleguide_genlist_def.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_style</td>
+ <td><img src="../../images/styleguide_genlist_defstyle.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>double_label</td>
+ <td><img src="../../images/styleguide_genlist_doublelabel.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span>: for the sub text.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>end_icon</td>
+ <td><img src="../../images/styleguide_genlist_end.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>full</td>
+ <td><img src="../../images/styleguide_genlist_full.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>The swallow part is the full size of the item. There is no padding in the item.</td>
+ </tr>
+  <tr>
+ <td>group_index</td>
+ <td><img src="../../images/styleguide_genlist_group.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>one_icon</td>
+ <td><img src="../../images/styleguide_genlist_oneicon.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>message</td>
+ <td><img src="../../images/styleguide_genlist_message.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the text on the top. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.title.1</span>: for the text in the middle.</p>
+<p><span style="font-family: Courier New,Courier,monospace">elm.title.2</span>: for the text on the bottom.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The style of the gengrid&#39;s item is not set by external APIs. For more information on using the item class to set the item&#39;s style, see the guide of gengrid.</p>
+<table>
+<caption>Table: Gengrid styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/gengrid_default.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>album-preview</td>
+ <td><img src="../../images/gengrid_album_pre.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>block</td>
+ <td><img src="../../images/gengrid_block.png" /></td>
+ <td></td>
+ <td></td>
+ <td>This style is used to show an empty area.</td>
+</tr>
+ <tr>
+ <td>group_index</td>
+ <td><img src="../../images/gengrid_grp_index.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>default_grid</td>
+ <td><img src="../../images/gengrid_def.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+<tr>
+ <td>default_gridtext2</td>
+ <td><img src="../../images/gengrid_def_gridtext2.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_gridtext</td>
+ <td><img src="../../images/gengrid_def_gridtext.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_style</td>
+ <td><img src="../../images/gengrid_def_style.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Segmentation Control styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/segm_control_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Index styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/index_default.png" /></td>
+ <td>This style is for supporting the vertical style.</td>
+ </tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/index_default02.png" /></td>
+ <td>This style is for supporting the horizontal style. To set a horizontal index, use the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set</span>.</td>
+ </tr>
+  <tr>
+ <td>pagecontrol</td>
+ <td><img src="../../images/index_pagecontrol.png" /></td>
+ <td>This style is used for the &quot;page control&quot; layout. For more information, refer to the Core Control sample application.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual Popup (Ctxpopup) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/ctxpopup_default.png" /></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>dropdown/list</td>
+ <td><img src="../../images/ctxpopup_dropdown.png" /></td>
+ <td>The size of the item and the ctxpopup follow the size of the screen.</td>
+ </tr>
+  <tr>
+ <td>dropdown/label</td>
+ <td><img src="../../images/ctxpopup_dropdown_label.png" /></td>
+ <td>The size of the item and the ctxpopup follow the maximum length of the item.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Icon styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>apps</td>
+ <td><img src="../../images/icon_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>arrow_down</td>
+ <td><img src="../../images/icon_arrowdown.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_left</td>
+ <td><img src="../../images/icon_arrowleft.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_right</td>
+ <td><img src="../../images/icon_arrowright.png" /></td>
+ </tr>
+  <tr>
+ <td>arrow_up</td>
+ <td><img src="../../images/icon_arrowup.png" /></td>
+ </tr>
+  <tr>
+ <td>chat</td>
+ <td><img src="../../images/icon_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>clock</td>
+ <td><img src="../../images/icon_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>close</td>
+ <td><img src="../../images/icon_close.png" /></td>
+ </tr>
+ <tr>
+ <td>delete</td>
+ <td><img src="../../images/icon_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>edit</td>
+ <td><img src="../../images/icon_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>file</td>
+ <td><img src="../../images/icon_file.png" /></td>
+ </tr>
+ <tr>
+ <td>home</td>
+ <td><img src="../../images/icon_home.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/forward</td>
+ <td><img src="../../images/icon_forward.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/info</td>
+ <td><img src="../../images/icon_info.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/next</td>
+ <td><img src="../../images/icon_next.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/pause</td>
+ <td><img src="../../images/icon_pause.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/play</td>
+ <td><img src="../../images/icon_play.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/prev</td>
+ <td><img src="../../images/icon_prev.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/rewind</td>
+ <td><img src="../../images/icon_rewind.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/stop</td>
+ <td><img src="../../images/icon_stop.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/apps</td>
+ <td><img src="../../images/icon_menu_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_down</td>
+ <td><img src="../../images/icon_menu_arrdown.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_left</td>
+ <td><img src="../../images/icon_menu_arrleft.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_right</td>
+ <td><img src="../../images/icon_menu_arrright.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_up</td>
+ <td><img src="../../images/icon_menu_arrup.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/chat</td>
+ <td><img src="../../images/icon_menu_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/clock</td>
+ <td><img src="../../images/icon_menu_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/close</td>
+ <td><img src="../../images/icon_menu_close.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/delete</td>
+ <td><img src="../../images/icon_menu_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/edit</td>
+ <td><img src="../../images/icon_menu_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/file</td>
+ <td><img src="../../images/icon_menu_file.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/folder</td>
+ <td><img src="../../images/icon_menu_folder.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/home</td>
+ <td><img src="../../images/icon_menu_home.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/refresh</td>
+ <td><img src="../../images/icon_menu_refresh.png" /></td>
+ </tr>
+ <tr>
+ <td>no_photo</td>
+ <td><img src="../../images/icon_menu_nophoto.png" /></td>
+ </tr>
+ <tr>
+ <td>photo/no_photo</td>
+ <td><img src="../../images/icon_photo_nophoto.png" /></td>
+ </tr>
+ <tr>
+ <td>refresh</td>
+ <td><img src="../../images/icon_refresh.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/apps</td>
+ <td><img src="../../images/icon_toolbar_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_down</td>
+ <td><img src="../../images/icon_toolbar_arrdown.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_left</td>
+ <td><img src="../../images/icon_toolbar_arrleft.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_right</td>
+ <td><img src="../../images/icon_toolbar_arrright.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_up</td>
+ <td><img src="../../images/icon_toolbar_arrup.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/chat</td>
+ <td><img src="../../images/icon_toolbar_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/clock</td>
+ <td><img src="../../images/icon_toolbar_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/close</td>
+ <td><img src="../../images/icon_toolbar_close.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/delete</td>
+ <td><img src="../../images/icon_toolbar_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/edit</td>
+ <td><img src="../../images/icon_toolbar_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/file</td>
+ <td><img src="../../images/icon_toolbar_file.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/folder</td>
+ <td><img src="../../images/icon_toolbar_folder.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/home</td>
+ <td><img src="../../images/icon_home.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/more_menu</td>
+ <td><img src="../../images/icon_toolbar_moremenu.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/refresh</td>
+ <td><img src="../../images/icon_toolbar_refresh.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>date_layout</td>
+ <td><img src="../../images/datetime_date_layout.png" /></td>
+ </tr>
+ <tr>
+ <td>time_layout</td>
+ <td><img src="../../images/datetime_time_layout.png" /></td>
+ </tr>
+  <tr>
+ <td>time_layout_24hr</td>
+ <td><img src="../../images/datetime_time_24h.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Panel (drawer) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/panel_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>For more information on the drawer, see the [UI Sample] Core Control guide.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ <tr>
+ <td>horizontal/center_point</td>
+ <td><img src="../../images/slider_hor_center.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+  <tr>
+ <td>vertical/center_point</td>
+ <td><img src="../../images/slider_ver_center.png" /></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>vertical/default</td>
+ <td><img src="../../images/slider_ver.png" /></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/popup_default.png" /></td>
+ </tr>
+ <tr>
+ <td>toast</td>
+ <td><img src="../../images/popup_toast.png" /></td>
+ </tr>
+ </tbody>
+</table>
+ 
+ <table>
+<caption>Table: Spinner styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>base/horizontal</td>
+ <td><img src="../../images/spinner_hor.png" /></td>
+ </tr>
+  <tr>
+ <td>base/vertical</td>
+ <td><img src="../../images/spinner_ver.png" /></td>
+ </tr>
+ </tbody>
+</table>
+  
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>  
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/ui_components_n.htm b/org.tizen.ui.guides/html/native/efl/ui_components_n.htm
new file mode 100755 (executable)
index 0000000..20103e4
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/ui_components_n.htm
@@ -0,0 +1,700 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>UI Components: Handling Elementary UI Component Libraries</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#components">Using UI Components</a></li>
+                               <li><a href="#first">Getting Started with the Elementary Library</a></li>
+                               <li><a href="#objects">Elementary Objects</a></li>
+                               <li><a href="#callbacks">Elementary Callbacks</a></li>
+                               <li><a href="#config">Managing Elementary Profiles</a></li>
+                               <li><a href="#options">Configuring Elementary Options</a></li>
+                               <li><a href="#scalability">Scaling UI Components</a></li>
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>UI Components: Handling Elementary UI Component Libraries</h1> 
+
+<p>Before writing an application, you should already have an answer to the following question: What is an application? An application is a process launched by the user. Every application has at least one window for presenting its content. Users can interact with the content through events. Different sources of events can modify the life cycle of the application. The application may receive data from a network connection, and it may also receive touch and key events. From the computer&#39;s point of view, an application is a collection of code that reacts to events and displays content on the screen. Elementary bridges this divide between the user and the code.</p>
+
+<p>Elementary provides a variety of pre-built UI components, such as layout objects and components, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.</p>
+
+<p>There are three main groups of objects provided by Elementary:</p>
+
+<ul>
+    <li>UI components: These are the components with which you build your application UI.</li>
+    <li>Containers: These are the containers that hold the components.</li>
+    <li>Infrastructure: These are the modules that deal with Elementary as a whole.</li>
+</ul>
+
+  <h2 id="components" name="components">Using UI Components</h2>
+  
+<p>The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
+
+  <p class="figure">Figure: Elementary</p>
+<p align="center"><img alt="Elementary" src="../../images/elementary.png" /></p>
+
+
+<h2 id="first" name="first">Getting Started with the Elementary Library</h2>
+
+
+<p>Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner to facilitate the creation of new UI components. The Elementary UI components inherit a lot of their code from the container UI components and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
+
+<p>To use the Elementary library:</p>
+
+<ol><li>Initialize the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function.</li>
+<li>Start the Elementary main loop with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function.
+<p>The function does not return, instead, it constantly loops and runs the event and the processing tasks.</p></li>
+<li>Add Elementary UI components in the main loop.
+<p>Generally, an Elementary UI component can be added with the <span style="font-family: Courier New,Courier,monospace">elm_&lt;UI component name&gt;_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is passed to the functions that are used to configure the UI component.</p></li>
+<li>Stop the main loop and return to the <span style="font-family: Courier New,Courier,monospace">main()</span> function with the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function.</li>
+<li>When your application terminates, shut down the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function.
+<p>The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</p></li></ol>
+
+
+<p>The following code snippet shows the <span style="font-family: Courier New,Courier,monospace">main()</span> function of a minimal Elementary application:</p>
+
+<pre class="prettyprint">
+#include &lt;Elementary.h&gt;
+int main(int argc, char **argv)
+{
+&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+&nbsp;&nbsp;&nbsp;elm_run();
+&nbsp;&nbsp;&nbsp;elm_shutdown();
+
+&nbsp;&nbsp;&nbsp;return 0;
+}</pre>
+
+
+<h2 id="objects" name="objects">Elementary Objects</h2>
+
+<p>All objects created using Elementary are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type. This means that both Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.</p>
+
+<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid component, and to save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary UI component can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instance is bigger than expected, but can still help in saving memory.</p>
+
+<p>For more information, see <a href="evas_objects_n.htm">Evas Objects</a>.</p>
+
+<h2 id="callbacks" name="callbacks">Elementary Callbacks</h2>
+
+<p>Several callbacks can be registered to handle Elementary object events:</p>
+
+<ul>
+<li>Evas event callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function to add a callback for input events (key up, key down, mouse wheel) on an Evas object. In case of an Elementary object, the callback is registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
+</li>
+
+<li>Evas smart callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for a smart event emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the &quot;smart event&quot; to register must be implemented by the corresponding smart object. Otherwise, the callback does nothing. The callback does not apply to input events (keyboard or mouse).</p>
+</li>
+
+<li>Edje signal callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function to add a callback for a signal coming from an Edje object (a theme object).</p>
+</li>
+
+<li>Elementary signal callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function to add a callback for a signal coming from an Elementary UI component&#39;s theme. The callback does not apply to input events (keyboard or mouse).</p>
+</li>
+
+<li>Elementary event callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function to add a callback for an input event (keyboard or mouse) coming from an Elementary object. In contrast to the Evas event callback, the Elementary event callback takes the hierarchy of the object into account: the event can be propagated to the parents of the object, and the parents can process the event.</p>
+</li>
+</ul>
+
+<p>For more information about events related to Elementary objects, see <a href="event_handling_n.htm">Event Handling</a>. For more information about Evas objects and smart objects, see <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p>
+
+ <h2 id="config" name="config">Managing Elementary Profiles</h2> 
+
+<p>An Elementary profile is a set of preconfigured options that affects the entire look and feel of an application. The options linked to a specific profile form an Elementary configuration, which can be used to store the desired set of options for use in multiple sessions. Once loaded, the Elementary profile configures all the options and sets the look and feel of your Elementary application.</p>
+
+<p>To manage Elementary profiles:</p>
+<ul>
+<li>List the existing profiles:
+<pre class="prettyprint">
+Eina_List *list = elm_config_profile_list_get();
+</pre>
+</li>
+<li>Set a particular profile:
+<pre class="prettyprint">
+elm_config_profile_set(&quot;myprofile&quot;);
+</pre>
+</li>
+<li>Get the current profile:
+<pre class="prettyprint">
+char *profile = elm_config_profile_get();
+</pre>
+</li>
+<li>To save the current option values as an Elementary configuration for later use, use the <span style="font-family: Courier New,Courier,monospace">elm_config_save()</span> function:
+<pre class="prettyprint">
+elm_config_save();
+</pre>
+</li>
+<li>To reload the Elementary configuration saved for the current profile:
+<pre class="prettyprint">
+elm_config_reload();
+</pre>
+</li>
+</ul>
+
+<h2 id="options" name="options">Configuring Elementary Options</h2>
+
+<p>You can set the following options in the Elementary configuration. In addition, you can <a href="#customizing_themes">customize themes</a> and <a href="#config_focus">manage focus</a>.</p>
+<ul>
+
+<li>To scale UI components:
+<p>You can configure <a href="ui_components_n.htm#scalability">UI component scaling</a> in terms of both interactive and readable areas.</p>
+<ul>
+<li>Set the global scaling factor (for example, setting it to 2.0 doubles the size of all scalable UI components):
+<pre class="prettyprint">
+elm_config_scale_set(2.0);
+</pre>
+</li>
+
+<li>Set the finger size:
+<pre class="prettyprint">
+elm_config_finger_size_set(1.5);
+</pre>
+</li>
+</ul>
+</li>
+
+<li>To manage caches:
+<ul>
+<li>Enable the globally configured cache flush, and set the flush interval (in this example, to 60 seconds):
+<pre class="prettyprint">
+elm_config_cache_flush_enabled_set(EINA_TRUE);
+elm_config_cache_flush_interval_set(60);
+</pre>
+</li>
+
+<li>Configure the font and image cache sizes (to 500 and 5 000 000 bytes, respectively):
+<pre class="prettyprint">
+elm_config_cache_font_cache_size_set(500);
+elm_config_cache_image_cache_size_set(5000000);
+</pre>
+</li>
+
+<li>Set the Edje collection and Edje file cache sizes:
+<pre class="prettyprint">
+elm_config_cache_edje_file_cache_size_set(500);
+elm_config_cache_edje_collection_cache_size_set(500);
+</pre>
+</li>
+</ul>
+</li>
+
+
+<li>To configure the gesture layer:
+<p>You can set the duration of the long tap and double tap events on the gesture layer objects. The following example sets the duration to 500 ms.</p>
+
+<pre class="prettyprint">
+elm_config_glayer_long_tap_start_timeout_set(0.5);
+elm_config_glayer_double_tap_timeout_set(0.5);
+</pre>
+</li>
+<li>To manage scrolling:
+<ul>
+<li>Make the scroller bounce when it reaches its viewport&#39;s edge during scrolling by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_enabled_set()</span> function:
+<pre class="prettyprint">
+elm_config_scroll_bounce_enabled_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>Control the inertia of the bounce animation by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_friction_set()</span> function:
+<pre class="prettyprint">
+elm_config_scroll_bounce_friction_set(0.5);
+</pre>
+<p>You can also set the friction for a page scroll, include animations, and zoom animations.</p>
+</li>
+
+<li>Set the scroller to be draggable by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
+
+<p>The following example sets the scroller to be draggable, defines that the number of pixels one must travel while dragging the scroller view to actually trigger  scrolling is 20 pixels.</p>
+<pre class="prettyprint">
+elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
+elm_config_scroll_thumbscroll_threshold_set(20);
+</pre>
+</li>
+</ul>
+</li>
+
+<li>To configure long press events:
+<p>Get the current timeout before a long press event is retrieved, and modify it. The following example increases the timeout by 1 second.</p>
+<pre class="prettyprint">
+double lp_timeout = elm_config_longpress_timeout_get();
+elm_config_longpress_timeout_set(lp_timeout + 1.0);
+</pre>
+</li>
+
+<li>To configure tooltips:
+<p>Set the duration after which a tooltip is shown. The following example sets the delay to 2 seconds.</p>
+
+<pre class="prettyprint">
+elm_config_tooltip_delay_set(2.0);
+</pre>
+</li>
+
+<li>To configure the password show last feature:
+<p>The password show last feature enables the user to view the last input entered for a few seconds before it is masked.</p>
+
+<ul>
+<li>Enable the password show last feature:
+<pre class="prettyprint">
+elm_config_password_show_last_set(EINA_TRUE);
+</pre>
+</li>
+<li>Set the visibility timeout (how many seconds the input is visible): 
+<pre class="prettyprint">
+elm_config_password_show_last_timeout_set(5.0);
+</pre>
+</li>
+</ul>
+</li>
+<li>To set the Elementary engine:
+<p>You can define the rendering engine that Elementary uses to draw the windows. The following rendering engines are supported:</p>
+
+<ul>
+    <li>&quot;software_x11&quot;</li>
+    <li>&quot;fb&quot;</li>
+    <li>&quot;directfb&quot;</li>
+    <li>&quot;software_16_x11&quot;</li>
+    <li>&quot;software_8_x11&quot;</li>
+    <li>&quot;xrender_x11&quot;</li>
+    <li>&quot;opengl_x11&quot;</li>
+    <li>&quot;software_gdi&quot;</li>
+    <li>&quot;software_16_wince_gdi&quot;</li>
+    <li>&quot;sdl&quot;</li>
+    <li>&quot;software_16_sdl&quot;</li>
+    <li>&quot;opengl_sdl&quot;</li>
+    <li>&quot;buffer&quot;</li>
+    <li>&quot;ews&quot;</li>
+    <li>&quot;opengl_cocoa&quot;</li>
+    <li>&quot;psl1ght&quot;</li>
+</ul>
+
+<pre class="prettyprint">
+elm_config_engine_set(&quot;opengl_x11&quot;);
+</pre>
+</li>
+
+<li>To activate the access mode: 
+<p>Set the access mode as active, so that information about an Elementary object is read when the object receives an <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event:</p>
+
+<pre class="prettyprint">
+elm_config_access_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To configure the selection mode: 
+<p>Set the selection mode so that the selection is cleared when the entry component is unfocused:</p>
+<pre class="prettyprint">
+elm_config_selection_unfocused_clear_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To enable mirroring: 
+<p>Elementary allows UI mirroring both on a single object and on the entire UI. If mirroring is enabled, an Elementary UI component displays as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.</p>
+
+<pre class="prettyprint">
+elm_config_mirrored_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To set the frame rate:
+<p>Define the frames per second (FPS) value for the <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime</span> and <span style="font-family: Courier New,Courier,monospace">edje_frametime</span> calculations. This example sets the FPS 60.</p>
+
+<pre class="prettyprint">
+elm_config_fps_set(60.0);
+</pre>
+</li>
+</ul>
+
+<h3 id="customizing_themes" name="customizing_themes">Customizing Themes</h3>
+
+<p>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component in an application. You can change the theme using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable. You can also modify the theme globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
+
+<p>For <a href="component_custom_n.htm">custom styles</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces the default theme of the UI component.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, you must know how the UI component is themed. If something is missing from the extension, it can break the UI component&#39;s behavior.</td>
+        </tr>
+    </tbody>
+</table>
+
+<p>To modify Elementary themes, you can also use overlays. An overlay can replace the look of all UI components by overriding the default styles. As with extensions, you must write the correct overlay theme for a UI component. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. To add or remove an overlay, use the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> functions.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.</td>
+        </tr>
+    </tbody>
+</table>
+
+<h3 id="config_focus" name="config_focus">Managing Focus</h3>
+
+<p>When an Elementary object has the focus, input events are directly passed to that object in the application window. The focused object can also change its decoration to show the user where the focus is. In an Elementary application, only one object can have the focus at a time.</p>
+
+<p>To set the focus to a new Elementary object and take the focus away from the previous focused object, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. You can make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function.</p>
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Only visible objects can have the focus.</td>
+        </tr>
+    </tbody>
+</table>
+
+<p>Elementary supports focus chains that allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components are added to the code. It is also possible to define custom focus chains, when needed.</p>
+
+<p>For more information on focus, see <a href="component_focus_n.htm">Component Focus</a>.</p>
+
+<p>To manage the focus:</p>
+
+<ul>
+<li>To define a custom focus chain, create an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, and add the Elementary objects to it in the desired focus order. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set the final list as the custom focus chain of the parent object (in the following example, <span style="font-family: Courier New,Courier,monospace">container_object</span> is the parent object).
+
+<pre class="prettyprint">Eina_List *obj_list = NULL;
+
+list = eina_list_append(list, obj1); 
+list = eina_list_append(list, obj4);
+list = eina_list_append(list, obj2); 
+list = eina_list_append(list, obj3);
+
+elm_object_focus_custom_chain_set(container_object, list);</pre>
+</li>
+
+<li>To remove the custom focus chain and use the default focus chain instead, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function.
+</li>
+
+<li>To programmatically cycle through the focus chain, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function.
+</li>
+
+<li>To show a highlight on the focused object:
+
+<pre class="prettyprint">
+elm_config_focus_highlight_enabled_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To activate an animation when the focus shifts from one object to another:
+
+<pre class="prettyprint">
+elm_config_focus_highlight_animate_set(EINA_TRUE);
+</pre>
+</li>
+</ul>
+
+ <h2 id="scalability" name="scalability">Scaling UI Components</h2> 
+  
+<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale UI components with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.</p>
+
+<h3 id="Finger_Size" name="Finger_Size">Finger Size</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales UI components based on the user&#39;s finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.</p>
+
+<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of UI components so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
+
+<p>To increase the current global finger size by 20px:</p>
+
+<pre class="prettyprint">
+Evas_Coord finger_size;
+
+// Get the current finger size
+finger_size = elm_config_finger_size_get();
+
+// Add 20px to finger size parameter and set it 
+// to the global Elementary configuration
+elm_config_finger_size_set(finger_size + 20);
+</pre>
+
+<h3 id="Scale" name="Scale">Scale</h3>
+
+<p>This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the UI components. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary UI component and all its children.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The scaling factor is multiplicative, if a child already has a scale size set, it is multiplied by its parent&#39;s scale size.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example sets the global scaling factor to 2.0. Then, the scaling factor of an existing Elementary object is set to 2.0, meaning that this object appears as if it had a 4.0 scale factor, the rest of the application is displayed with a 2.0 scaling factor:</p>
+
+<pre class="prettyprint">
+Evas_Object *button;
+
+// The button object is created and configured
+
+// Set the global scale factor to 2.0
+elm_config_scale_set(2.0);
+
+// Set the scaling factor of the button component to 2.0, this component
+// appears 4 times bigger than its initial size
+elm_object_scale_set(button, 2.0);
+</pre>
+
+<h3 id="Example" name="Example">Example</h3>
+
+<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
+
+<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application</p> 
+<p align="center"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p> 
+
+<p>The previous picture shows the <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.</p>
+
+<p>The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.</p>
+
+<p class="figure">Figure: Scale increased (1.30)</p> 
+<p align="center"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p> 
+
+<p>A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.</p>
+
+<p class="figure">Figure: Finger size increased (90px)</p> 
+<p align="center"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p> 
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">It is up to the theme (Edje file) to set the parts that are scalable. This is something that needs to be taken into account when developing a new Edje theme. This can be done in EDC with the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter. For more information on how to do that, see <a href="edje_intro_n.htm">Introduction to EDC Programming</a>.</td>
+</tr>
+</tbody>
+</table> 
+
+<h3 id="Scalable_EDC_Object" name="Scalable_EDC_Object">Creating Scalable EDC Objects</h3>
+
+<h4>Scale Parameter </h4>
+
+<p>This chapter explains how to make a scalable Edje object and give hints how to write an EDC file that is scalable. The example shows a basic button that is composed of a background image part and a swallow part that can receive some content.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;parts 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>To have a scalable object, set the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to 1 on the parts you want to be scalable. Here the <span style="font-family: Courier New,Courier,monospace;">bg</span> and <span style="font-family: Courier New,Courier,monospace;">elm.swallow.content</span> parts must be scalable.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;parts
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible:1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h4>Image Set</h4>
+
+<p>If your application needs to be used at different resolutions it is recommended to have 2 images for the background image <span style="font-family: Courier New,Courier,monospace;">bg.png</span>. Here the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> is added to the application. It is used when the size of the image is under 500 px, and a <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image is for higher resolutions. Use a set on the <span style="font-family: Courier New,Courier,monospace;">bg.png</span> image.</p>
+
+<pre class="prettyprint">
+group 
+{ 
+&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
+&nbsp;&nbsp;&nbsp;images 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_low.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 200 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_high.png&quot; COMP;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 101 5000 5000;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The image below shows three buttons with only a background part visible (the SWALLOW part is empty).</p>
+
+<p class="figure">Figure: Image set example</p> 
+<p align="center"><img alt="Image set example" src="../../images/scale.png" /></p> 
+
+<p>The first button&#39;s size is 100x50 pixels, the background image (<span style="font-family: Courier New,Courier,monospace;">bg_low.png</span>) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</p>
+
+<p>To prevent this, the image set has a bigger image to use when the size is bigger than 200x100 pixels (<span style="font-family: Courier New,Courier,monospace;">bg_high.png</span>). The third button size is 201x101 pixels and it uses the new image, which has a better quality than the scaled image.</p>
+
+<h4>Image Borders</h4>
+
+<p>When the button is resized, the image part is also resized because it is marked as scalable. To get the image resized but to keep the image border as it is, use the <span style="font-family: Courier New,Courier,monospace;">border</span> parameter. It specifies the border size which is not resized even if the image is.</p>
+
+<p>To add a 40 pixel border on the left and right part of the <span style="font-family: Courier New,Courier,monospace;">bg</span> image and a 20 pixel border on top and bottom borders:</p>
+
+<pre class="prettyprint">
+parts 
+{
+&nbsp;&nbsp;&nbsp;part 
+&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.border: 40 40 20 20;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.</p>
+
+<p class="figure">Figure: Border example</p> 
+<p align="center"><img alt="Border example" src="../../images/border.png" /></p> 
+
+
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/ui_components_wn.htm b/org.tizen.ui.guides/html/native/efl/ui_components_wn.htm
new file mode 100755 (executable)
index 0000000..b79e119
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/ui_components_wn.htm
@@ -0,0 +1,874 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Wearable UI Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#styles_r">Wearable Rectangular UI Component Styles</a></li>                       
+                               <li><a href="#styles_c">Wearable Circular UI Component Styles</a></li>
+               </ul>
+       <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>             
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Wearable UI Components</h1> 
+  
+<p>The EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. The number of supported UI components is around 80, including both containers and non-containers. Originally, the Elementary was developed as part of the Window Manager development on Desktop devices. For the wearable profile, Tizen reused the proper UI components and created new UI styles for rectangular and circular wearable devices, and then enhanced and adjusted all of them for Tizen native applications.</p>
+
+ <table class="note"> 
+<tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>  
+
+<p>The UI components are wearable-friendly: for example, the Circle Datetime component extends the <span style="font-family: Courier New,Courier,monospace">elm_date_time</span> by visualizing the selected field, the Circle Genlist component provides a scrollbar with circular movement, and the Circle progress bar/scroller/slider components are adjusted to the circular design.</p>
+<p>The wearable UI components were designed to allow the user to interact with small touch screen-equipped wearable devices with rotary component parts. Therefore, when developing wearable applications, you can easily use them through the wearable-related infrastructure in company with full notification and when reacting to touch and rotary events and the user finger size.</p>  
+  
+<table border="1"> 
+   <caption>
+     Table: Available UI components
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr>      
+       <tr> 
+     <td><a href="components_wn.htm#background">Background</a></td> 
+     <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#button">Button</a></td> 
+     <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#check">Check</a></td> 
+     <td>The check component toggles the value of a Boolean between true and false.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#ctxpopup">Ctxpopup</a></td> 
+     <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#datetime">Datetime</a></td> 
+     <td>The datetime component can display and input date and time values.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#entry">Entry</a></td> 
+     <td>The entry component is a box to which the user can enter text.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#genlist">Genlist</a></td> 
+     <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
+    </tr>
+               <tr> 
+     <td><a href="components_wn.htm#glview">GLView</a></td> 
+     <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#icon">Icon</a></td> 
+     <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#image">Image</a></td> 
+     <td>The image component can load and display an image from a file or from memory.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#index">Index</a></td> 
+     <td>The index component provides an index for fast access to another group of UI items.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#label">Label</a></td> 
+     <td>The label component displays text with simple HTML-like markup.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#list">List</a></td> 
+     <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
+    </tr>
+               <tr> 
+     <td><a href="components_wn.htm#notify">Notify</a></td> 
+     <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#plug">Plug</a></td> 
+     <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#popup">Popup</a></td> 
+     <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#progressbar">Progressbar</a></td> 
+     <td>The progressbar component can be used to display the progress status of a given job.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#radio">Radio</a></td> 
+     <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#slider">Slider</a></td> 
+     <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
+    </tr>
+       <tr> 
+     <td><a href="elementary_transit_effect_tutorial_n.htm">Transit</a></td> 
+     <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit component is documented in the Creating Animations and Effects guide.</td>
+    </tr>
+       <tr> 
+     <td><a href="components_wn.htm#win">Win</a></td> 
+     <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
+    </tr>
+   </tbody> 
+  </table>   
+
+<p>The following UI components were designed for specific circular wearable devices which have rotary component parts. In a circular device, you can draw round UI components, such as a slider, progressbar, and scroller. Generally, wearable UI components provide compatibility between the rectangular and circular wearable devices. However, use circular UI components for circular wearable devices only, because they have a dependency with the round UX and rotary events. For more information on the compatibility of the UI components between rectangular and circular, see the Wearable Design Guidelines.</p>
+  
+<table border="1"> 
+   <caption>
+     Table: Available circular UI components
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr>
+       <tr> 
+     <td><a href="circle_components_wn.htm#datetime">Circle Datetime</a></td> 
+     <td>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field.</td>
+    </tr>      
+       <tr> 
+     <td><a href="circle_components_wn.htm#genlist">Circle Genlist</a></td> 
+     <td>The circle genlist provides a scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</td>
+    </tr>
+       <tr>
+     <td><a href="circle_components_wn.htm#object">Circle Object</a></td> 
+     <td>The circle object extends elementary components in a form of circular design. Sometimes a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.</td>
+    </tr>
+       <tr> 
+     <td><a href="circle_components_wn.htm#progressbar">Circle Progressbar</a></td> 
+     <td>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</td>
+    </tr>
+       <tr> 
+     <td><a href="circle_components_wn.htm#scroller">Circle Scroller</a></td> 
+     <td>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.</td>
+    </tr>
+       <tr> 
+     <td><a href="circle_components_wn.htm#slider">Circle Slider</a></td> 
+     <td>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</td>
+    </tr>
+       <tr> 
+     <td><a href="circle_components_wn.htm#surface">Circle Surface</a></td> 
+     <td>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered.</td>
+    </tr>
+   </tbody> 
+  </table>   
+  
+<h2 id="styles_r" name="styles_r">Wearable Rectangular UI Component Styles</h2> 
+  
+<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component. For more detailed information, see the <a href="theme_n.htm">Themes</a>.</p> 
+
+<table>
+<caption>Table: Button styles (wearable core)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/button_default_wn.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>green</td>
+ <td><img src="../../images/button_green_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>orange</td>
+ <td><img src="../../images/button_orange_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>red</td>
+ <td><img src="../../images/button_red_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>nextdepth</td>
+ <td><img src="../../images/button_next_wn.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>naviframe/title_icon</td>
+ <td><img src="../../images/button_titleicon_wn.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>The icon can be set with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(btn, &quot;icon&quot;, ic)</span> function.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles (wearable core)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/check_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>on&amp;off</td>
+ <td><img src="../../images/check_onoff_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual popup (Ctxpopup) styles (wearable core)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/contextual_wn.png" /></td>
+ <td>Use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function to add both text and an icon to the list.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles (wearable core)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>datepicker_layout</td>
+ <td><img src="../../images/datetime_date_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>timepicker_layout</td>
+ <td><img src="../../images/datetime_time_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Genlist styles (wearable core)</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/genlist_def_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>group_index</td>
+ <td><img src="../../images/genlist_group_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr> 
+ <tr>
+ <td>1text</td>
+ <td><img src="../../images/genlist_1text_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon</td>
+ <td><img src="../../images/genlist_1text1icon_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>2text</td>
+ <td><img src="../../images/genlist_2text_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>2text.1</td>
+ <td><img src="../../images/genlist_2text1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+  <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon.divider</td>
+ <td><img src="../../images/genlist_1text1icondivider_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon.1</td>
+ <td><img src="../../images/genlist_1text1icon1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>2text.1icon.1</td>
+ <td><img src="../../images/genlist_2text1icon1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>multiline/1text</td>
+ <td><img src="../../images/genlist_multi1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the multi-line text.</td>
+ <td></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>multiline/2text</td>
+ <td><img src="../../images/genlist_multi2_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the multi-line sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+
+<table>
+<caption>Table: Index styles (wearable core)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>thumbnail</td>
+ <td><img src="../../images/index_thumb_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>tab</td>
+ <td><img src="../../images/index_tab_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles (wearable core)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/popup_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>toast</td>
+ <td><img src="../../images/popup_toast_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles (wearable core)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/progressbar_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>pending_list</td>
+ <td><img src="../../images/progressbar_pending_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process</td>
+ <td><img src="../../images/progressbar_process_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process/groupindex</td>
+ <td><img src="../../images/progressbar_group_wn.png" /></td>
+ </tr> 
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles (wearable core)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ </tbody>
+</table>
+
+ 
+<h2 id="styles_c" name="styles_c">Wearable Circular UI Component Styles</h2> 
+  
+<p>EFL can separate the GUI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> functions to get and apply the style for a specific UI component.</p>
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component.</p> 
+
+<table>
+<caption>Table: Button styles (Gear O)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/button_default_wn.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>bottom</td>
+ <td><img src="../../images/button_bottom_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles (Gear O)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/check_default_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>small</td>
+ <td><img src="../../images/check_small_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>on&amp;off</td>
+ <td><img src="../../images/check_onoff_o_wn.png" /></td>
+ </tr> 
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual popup (Ctxpopup) styles (Gear O)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>select_mode</td>
+ <td><img src="../../images/contextual_select_o_wn.png" /></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>select_mode/top</td>
+ <td><img src="../../images/contextual_top_o_wn.png" /></td>
+ <td>Pair this style with select_mode/bottom.</td>
+ </tr>
+  <tr>
+ <td>select_mode/bottom</td>
+ <td><img src="../../images/contextual_bottom_o_wn.png" /></td>
+ <td>Pair this style with select_mode/top.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles (Gear O)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>datepicker/circle</td>
+ <td><img src="../../images/datetime_date_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>timepicker/circle</td>
+ <td><img src="../../images/datetime_time_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<table>
+<caption>Table: Genlist styles (Gear O)</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/genlist_def_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left. 
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+<tr>
+ <td>title</td>
+ <td><img src="../../images/genlist_title_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr> 
+  <tr>
+ <td>groupindex</td>
+ <td><img src="../../images/genlist_group_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr> 
+ <tr>
+ <td>1text</td>
+ <td><img src="../../images/genlist_1text_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon</td>
+ <td><img src="../../images/genlist_1text1icon_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>2text</td>
+ <td><img src="../../images/genlist_2text_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon.divider</td>
+ <td><img src="../../images/genlist_1text1icondivider_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td></td>
+ </tr>
+  <tr>
+ <td>1text.1icon.1</td>
+ <td><img src="../../images/genlist_1text1icon1_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>2text.1icon.1</td>
+ <td><img src="../../images/genlist_2text1icon1_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+   <tr>
+ <td>editfield</td>
+ <td><img src="../../images/genlist_edit_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+
+<table>
+<caption>Table: Index styles (Gear O)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>thumbnail</td>
+ <td><img src="../../images/index_thumb_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>circle</td>
+ <td><img src="../../images/index_circle_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles (Gear O)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>circle</td>
+ <td><img src="../../images/popup_circle_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>toast/circle</td>
+ <td><img src="../../images/popup_toast_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles (Gear O)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>process</td>
+ <td><img src="../../images/progressbar_process_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process/small</td>
+ <td><img src="../../images/progressbar_small_o_wn.png" /></td>
+ </tr> 
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles (Gear O)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ </tbody>
+</table> 
+ 
+<table class="note">
+    <tbody>
+        <tr>
+            <th class="note">Note</th>
+        </tr>
+        <tr>
+            <td class="note">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.</td>
+        </tr>
+    </tbody>
+</table> 
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/ui_containers_n.htm b/org.tizen.ui.guides/html/native/efl/ui_containers_n.htm
new file mode 100755 (executable)
index 0000000..5db93d6
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/ui_containers_n.htm
@@ -0,0 +1,131 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>UI Containers: Creating Layouts Using Container UI Components</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+
+               
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>     
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>UI Containers: Creating Layouts Using Container UI Components</h1> 
+       
+<p>All applications use containers to create the layout of the UI. The EFL and Elementary support several ways to create this layout. You can use predefined layouts or animated layouts, or you can create your own layouts. It is important to note that container UI components do not have their own visual identity - only logical structures for assignment or placement of the UI components.</p>
+
+<p>When you use container components, such as naviframe, conformant, button, and box, you need to understand certain APIs related to alignment, and EDC parts for, for example, the core layout and animated layout. For more information on the containers EDC parts, see <a href="edc_positioning_n.htm">Positioning and Laying out Parts Using the EDC File</a>. The use of the container UI components only differs from the use of the UI components through their absence of a visual identity.</p>
+
+<p>Most of the time, your application has to manage multiple views. The easiest way to handle them with the EFL is to create a naviframe object. This object is a container. At first, it is used to contain the pages your application is composed of. Every Tizen application can use this top-layer object to facilitate navigation. More details can be found in <a href="naviframe_tutorial_n.htm">Creating a Naviframe for Navigation</a>.</p>
+
+<p>Another interesting object that has to be present in every application is the conformant object. Conformant is a container component that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.</p>
+
+<p class="figure">Figure: Basic EFL application structure</p>
+<p align="center"><img alt="Basic EFL application structure" src="../../images/elementary_app.png" /></p>
+
+<h2 id="containers" name="containers">Container Components</h2> 
+  
+ <p>The following table lists the available UI container components.</p>
+ 
+   <table border="1"> 
+   <caption>
+     Table: Available container components
+   </caption> 
+   <colgroup> 
+    <col /> 
+    <col /> 
+   </colgroup> 
+   <tbody> 
+    <tr> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Container name</th> 
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+    </tr>      
+       <tr> 
+     <td><a href="containers_n.htm#box">Box</a></td>  
+     <td>One of the most simple containers in the EFL is a box.</td>
+    </tr>
+       <tr> 
+     <td><a href="containers_n.htm#conformant">Conformant</a></td> 
+     <td>A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
+    </tr>
+       <tr> 
+     <td><a href="containers_n.htm#grid">Grid</a></td>  
+     <td>In a grid, objects are placed at specific positions along a fixed grid.</td>
+    </tr>
+       <tr> 
+     <td><a href="containers_n.htm#layout">Layout</a></td>      
+     <td>A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.</td>
+    </tr>
+       <tr> 
+     <td><a href="containers_n.htm#mapbuf">Mapbuf</a></td>      
+     <td>A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.</td>
+    </tr>
+       <tr> 
+     <td><a href="containers_n.htm#naviframe">Naviframe</a></td>  
+     <td>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
+    </tr>
+       <tr> 
+     <td><a href="containers_n.htm#panes">Panes</a><br/>(in <strong>mobile applications only</strong>)</td>     
+     <td>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</td>
+    </tr>
+       <tr> 
+     <td><a href="containers_n.htm#scroller">Scroller</a></td>          
+     <td>A scroller holds (and clips) a single object and allows you to scroll across it.</td>
+    </tr>
+       <tr> 
+     <td><a href="containers_n.htm#table">Table</a></td>        
+     <td>A table is like a box but with 2 dimensions.</td>
+    </tr>
+       </tbody> 
+  </table> 
+
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/efl/ui_scalability_n.htm b/org.tizen.ui.guides/html/native/efl/ui_scalability_n.htm
new file mode 100755 (executable)
index 0000000..483202a
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/efl/ui_scalability_n.htm
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Scaling: Handling Screen and Object Sizes</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>Scaling: Handling Screen and Object Sizes</h1> 
+  
+<p>Supporting UI scalability in a user interface toolkit means that container components and UI components are scaled properly when the resolution or screen size changes. The Elementary library allows you to manipulate scaling on a per-UI-component basis using a scale factor based on the screen resolution, size, and profile configurations.</p>
+
+<p>Tizen native applications can run on different types of devices, such as wearable, phone, tablets, and TVs. Tizen also supports various resolutions (WVGA - XQXGA) with the same layouts and resources. However, remember that you must always polish your work to create an optimal application for each device.</p>
+  
+<p>The main scalability features are:</p>
+<ul>
+<li><a href="multiple_screens_n.htm">Multiple Screen Support</a> <p>Enables you to design applications for different kinds of screens.</p></li>
+<li><a href="scalability_n.htm">Scalability Support</a> <p>Enables you to design applications so that their UI can be scaled for diverse devices without problems.</p></li>
+</ul>
+  
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/native/guides_n.htm b/org.tizen.ui.guides/html/native/guides_n.htm
new file mode 100755 (executable)
index 0000000..76cfcde
--- /dev/null
+++ b/org.tizen.ui.guides/html/native/guides_n.htm
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Tizen Native UI Guides</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API References for Mobile Native</a></li>
+                       <li><a href="../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
+                       <li><a href="../../../org.tizen.native.mobile.apireference/###.html">DALi API References for Mobile Native</a></li>
+                       <li><a href="../../../org.tizen.native.wearable.apireference/###.html">DALi API References for Wearable Native</a></li>
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">Native UI Guides</font></h1>
+
+<p>The UI framework features include various aspects of creating a visual outlook for the user application to ensure the best possible user experience.</p>
+
+<p>The UI framework is a universal, reusable software environment that provides the essential building blocks as part of the Tizen platform to facilitate the development of Tizen native applications. The framework provides the window, UI components, and scene-based graphic rendering architecture needed to manage your application user interface. In addition, the framework provides animations and effects needed to make your application more fresh and vivid, event handling and the main loop to interact with the user and system, and more features, such as scalability, and font setting.</p>
+
+<p>The Tizen platform provides the following native UI toolkit frameworks for developing a native application:</p> 
+
+<ul>
+       <li><a href="efl/guides_efl_n.htm">EFL (Enlightenment Foundation Libraries)</a>
+       <p>EFL provides streamlined graphic core libraries you need to create powerful applications. EFL needs lower memory but provides high performance, and supports a retained mode graphics system and user-centric features, such as themes, 2D/3D effects, and accessibility. In addition, EFL supports various resolutions with the same layout, fast and small file systems, a variety of programming language bindings, and a separate UI and logic.</p>
+       <p>Generally, select the EFL UI toolkit if you are creating a 2D-based Tizen native application. However, EFL supports 2.5D and 3D effects and 3D objects as well.</p></li>
+       <li><a href="dali/guides_dali_n.htm">DALi (Dynamic Animation Library)</a>
+       <p>DALi is based on OpenGL ES 2.0 and 3.0; however it hides the complexity of the OpenGL ES API from you. DALi requires a GPU (Graphical Processing Unit) on the device.</p>
+       <p>Select the DALi 3D UI toolkit if you are creating a high-performance rich UI application.</p></li>
+</ul>
+
+    
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/scripts/common.js b/org.tizen.ui.guides/html/scripts/common.js
new file mode 100755 (executable)
index 0000000..d46479a
--- /dev/null
+++ b/org.tizen.ui.guides/html/scripts/common.js
@@ -0,0 +1,1752 @@
+$(document).ready(function(){\r
+       $('#contents table').each(function(){\r
+               if (!$(this).parent().hasClass('table')) {\r
+                       $(this).wrap('<div class="table"></div>');\r
+               }\r
+       });\r
+\r
+       // Lnb Menu Initialize\r
+       if($('div#contents').find('.lnb').length){\r
+               if($("ul li.events_news").size() > 0) {\r
+                       $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");\r
+               }\r
+               initLnb();\r
+               initScript(staticURL + "/js/fixednavbar.js", function(){});\r
+       }\r
+\r
+       //family site\r
+       if($('div#footer').find('dl#familySlider').length){\r
+               fn_rollToEx('familySlider', 'sliderBanner', 1, true);\r
+       }\r
+\r
+       // Svn Commit Test\r
+       \r
+       // Language Selection\r
+       if($('div#header').find('.util').length){\r
+               var $lang = $('div#header').find('.util');\r
+               $lang.find('a.lang').toggle(function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();\r
+                       },function(){\r
+                               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();\r
+                       });\r
+\r
+               $lang.bind('mouseleave',function(){\r
+                       $(this).find('ul.language').hide();\r
+                       $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+               });\r
+\r
+               $lang.find('ul.language').children().last().on("keydown", function(e) {\r
+                       if(e.which == 9 && e.shiftKey) {\r
+                               return true;\r
+                       }\r
+                       \r
+                       if(e.which == 9) {\r
+                               e.preventDefault();\r
+                               $lang.find('ul.language').hide();\r
+                               $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));\r
+                               setTimeout(function() {\r
+                                       $("#searchTop").focus();\r
+                               }, 1);\r
+                       }\r
+               });\r
+       }\r
+\r
+       // Open the Sitemap\r
+       var $open = $('div#header').find('.bt-open');\r
+       $open.bind('click',function(){\r
+               var $self = $(this);\r
+               var $sitemap = $('div#wrapper').find('div#sitemap');\r
+               //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');\r
+\r
+               if($sitemap.is(':visible')){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');\r
+\r
+                       $self.attr('title','open sitemap');\r
+               }else{\r
+                       var source = $self.css('background-image').replace('.gif','_.gif');\r
+                       //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');\r
+\r
+                       $self.attr('title','close sitemap');\r
+               }\r
+               \r
+               $self.css('background-image',source);\r
+               $sitemap.slideToggle('fast');\r
+               \r
+               $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){\r
+                       var source = $self.css('background-image').replace('_.gif','.gif');\r
+                       $self.css('background-image',source);\r
+                       $sitemap.slideToggle('fast');\r
+               });\r
+\r
+       });\r
+\r
+       // Search Auto Complete\r
+       var $search = $('div#header').find('fieldset.search');\r
+       var $searchList = $search.find('#topAutocomplete>ul');\r
+\r
+       if($search.length){\r
+               $search.find('> input').each(function(){\r
+                       $(this).bind({\r
+                               keydown : function(e){\r
+                       \r
+                                       if(e.type=='keydown'&& $(this).val().length!=0){\r
+                                               $search.find('#topAutocomplete').show();\r
+                                               var hei = $searchList.outerHeight();\r
+                                               if(hei>400){\r
+                                                       $searchList.css({'height':'400px','overflow-y':'auto'});\r
+                                               }\r
+                                       }\r
+                                       if(e.keyCode==9){\r
+                                               $search.unbind('focusout.search');\r
+                                       }\r
+                                       if(e.keyCode==40){\r
+                                               $search.find('#topAutocomplete>ul').children(':first').find('a').focus();\r
+                                               //window.scrollTo(0,0);\r
+                                       }\r
+                               },\r
+                               focusin : function(e){\r
+                                       if($(this).val()==='Search'){\r
+                                               $(this).val('');\r
+                                       }\r
+                               },\r
+                               focusout : function(e){\r
+                                       if($(this).val().length==0) $(this).val('Search');\r
+                               }\r
+                       });\r
+               });\r
+\r
+               //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){\r
+               //      if(e.keyCode==40){\r
+               //              $(this).parent().next().css('border','1px solid red').find('a').focus();\r
+               //      }\r
+               //});\r
+\r
+               $search.find('#topAutocomplete').bind('mouseleave',function(e){\r
+                       if($search.find('> input').val().length==0){\r
+                               $search.find('> input').val('Search');\r
+                       }\r
+                       $search.find('#topAutocomplete').hide();\r
+               });\r
+\r
+               $search.find('#topAutocomplete>ul').children().last().focusout(function(){\r
+                       $search.find('> input').val('Search');\r
+                       $search.find('#topAutocomplete').hide();\r
+                       \r
+                       //$search.bind('focusout.search', function(){\r
+                       //      $(this).find('> input').val('Search');\r
+                       //      $(this).find('#topAutocomplete').hide();\r
+                       //});\r
+               });\r
+       }\r
+});\r
+\r
+// 비차단 동적 스크립트 로딩\r
+function initScript(url, callback){\r
+       var script = document.createElement("script");\r
+       script.type = "text/javascript";\r
+\r
+       if(script.readyState){ // 인터넷 익스플로러\r
+               script.onreadystatechange = function(){\r
+                       if(script.readyState=="loaded" || script.readyState=="complete"){\r
+                               script.onreadystatechange = null;\r
+                               callback();\r
+                       }\r
+               };\r
+       }else{  // 다른  브라우저\r
+               script.onload = function(){\r
+                       callback();\r
+               };\r
+       }\r
+\r
+       script.src = url;\r
+       document.getElementsByTagName("head")[0].appendChild(script);\r
+}\r
+\r
+\r
+// lnb\r
+function initLnb(){\r
+       var sMenu = $('.lnb');\r
+       var sItem = sMenu.find('>li');\r
+\r
+       sItem.each(function(){\r
+               if($(this).find('a').hasClass('more')){\r
+                       if($(this).find('ul').is(":visible")) {\r
+                               $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0)); \r
+                       } else {\r
+                               $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));\r
+                       }\r
+               }\r
+       });\r
+       \r
+       var setIcoArrText = function(obj) {\r
+               if(obj.next().is(":visible")) {\r
+                       obj.text("close submenu");\r
+               } else {\r
+                       obj.text("open submenu");\r
+               }\r
+       }\r
+       \r
+       sItem.find('.ico-arr').on("click", function() {\r
+               var $that = $(this);\r
+               var liBox = $that.parent();   \r
+               var ulBox = $that.next();\r
+               \r
+               sItem.not(liBox).not(".on").find("a.more").next().next().hide();\r
+               sItem.not(liBox).removeClass("active").find("a").removeClass("bov");\r
+               \r
+               if(liBox.hasClass("on")) {\r
+                       if(ulBox.is(":visible")) {\r
+                               ulBox.hide();\r
+                               $that.addClass("ico-on");\r
+                       } else {\r
+                               ulBox.show();\r
+                               $that.removeClass("ico-on");\r
+                       }\r
+                       setIcoArrText($that);\r
+                       return true;\r
+               }\r
+               \r
+               if(liBox.hasClass("active")) {\r
+                       liBox.removeClass("active").find("a").eq(0).removeClass("bov");\r
+                       ulBox.hide();\r
+               } else {\r
+                       liBox.addClass("active").find("a").eq(0).addClass("bov");\r
+                       ulBox.show();\r
+               }\r
+               setIcoArrText($that);\r
+       });\r
+\r
+       sItem.hover(function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+               $(this).find("a").eq(0).addClass("bov");\r
+       },function(){\r
+               if($(this).hasClass('on')||$(this).hasClass('active')) return false;\r
+                $(this).find("a").eq(0).removeClass("bov");\r
+\r
+       });\r
+}\r
+\r
+//footer rolling banner\r
+function fn_rollToEx(container,objectId,step,auto){\r
+\r
+       // 롤링할 객체를 변수에 담아둔다.\r
+       var el = $('#'+container).find('#'+objectId);\r
+       var lastChild;\r
+       var speed = 3000;\r
+       var timer = 0;\r
+       var autoplay = false;\r
+\r
+       el.data('prev', $('#'+container).find('.prev'));        //이전버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('next', $('#'+container).find('.next'));        //다음버튼을 data()메서드를 사용하여 저장한다.\r
+       el.data('size', el.children().outerWidth());            //롤링객체의 자식요소의 넓이를 저장한다.\r
+       el.data('len', el.children().length);                           //롤링객체의 전체요소 개수\r
+       el.data('animating',false);\r
+       el.data('step', step);                                                          //매개변수로 받은 step을 저장한다.\r
+       el.data('autoStart', false);                                                            //매개변수로 받은 step을 저장한다.\r
+\r
+       el.css('width',el.data('size')*el.data('len'));         //롤링객체의 전체넓이 지정한다.\r
+\r
+       if(arguments.length==4){\r
+               el.data('autoStart', auto);\r
+       }\r
+\r
+       if(el.data('autoStart')){\r
+               if(timer==0){\r
+                       timer = setInterval(moveNextSlide, speed);\r
+                       autoplay = true;\r
+               }\r
+       }\r
+\r
+       el.bind({\r
+               mouseenter:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+\r
+       //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('prev').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       movePrevSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.\r
+       el.data('next').bind({\r
+               click:function(e){\r
+                       e.preventDefault();\r
+                       moveNextSlide();\r
+               },\r
+               mouseenter:function(){\r
+\r
+                       $(this).find('img').addClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer!=0 && el.data('autoStart')){\r
+                               clearInterval(timer);\r
+                               timer=0;\r
+                       }\r
+               },\r
+               mouseleave:function(){\r
+\r
+                       $(this).find('img').removeClass('btnOn');\r
+\r
+                       if(!autoplay) return false;\r
+\r
+                       if(timer==0 && el.data('autoStart')){\r
+                               timer = setInterval(moveNextSlide, speed);\r
+                       }\r
+               }\r
+       });\r
+\r
+       function movePrevSlide(){\r
+               if(!el.data('animating')){\r
+                       //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                       var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);\r
+                       lastItem.prependTo(el);         //복사된 요소를 롤링객체의 앞에 붙여놓는다.\r
+                       el.children().eq(-(el.data('step')+1)).nextAll().remove();      //step개수만큼 선택된 요소를 끝에서 제거한다\r
+                       el.css('left','-'+(el.data('size')*el.data('step'))+'px');      //롤링객체의 left위치값을 재설정한다.\r
+               \r
+                       el.data('animating',true);      //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.\r
+\r
+                       el.animate({'left': '0px'},'normal',function(){         //롤링객체를 left:0만큼 애니메이션 시킨다.\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+    function moveNextSlide(){\r
+               if(!el.data('animating')){\r
+                       el.data('animating',true);\r
+\r
+                       el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){     //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.\r
+                               //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.\r
+                               var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);\r
+                               firstChild.appendTo(el);        //복사된 요소를 롤링객체의 끝에 붙여놓는다.\r
+                               el.children().filter(':lt('+el.data('step')+')').remove();      //step개수만큼 선택된 요소를 앞에서 제거한다\r
+                               el.css('left','0px');   ////롤링객체의 left위치값을 재설정한다.\r
+\r
+                               el.data('animating',false);\r
+                       });\r
+               }\r
+               return false;\r
+       }\r
+\r
+}\r
+\r
+function fn_slide(options){\r
+\r
+       var opts = jQuery.extend({},options);\r
+\r
+       var $bt = $('#'+opts.container).find('#'+opts.bt).children();                                   //롤링버튼에 대한 선택자\r
+       var $obj = $('#'+opts.container).find('#'+opts.obj);                                                            //objectId를 id로 갖는 롤링객체의 선택자\r
+       var $prev = $('#'+opts.container).find('#'+opts.prev).hide();                                   //이전버튼에 대한 선택자\r
+       var $next = $('#'+opts.container).find('#'+opts.next);                                                  //다음버튼에 대한 선택자\r
+       var size = $obj.children().outerWidth();                                //롤링객체의 각 이미지 넓이값\r
+       var len = $obj.children().length;                                               //롤링객체의 이미지 갯수\r
+       var effect = false;                                                                             //슬라이드효과를 위한 boolean변수\r
+       var auto = false;\r
+       var current = 0;                                                                                //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수\r
+       var time;\r
+\r
+\r
+       $obj.css('width',size*len);                                                             //롤링객체의 전체넓이 지정\r
+       effect = opts.effect;\r
+       auto = opts.auto;\r
+\r
+       if(auto){\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       slideShow = function(){\r
+\r
+               if(current < len-1){\r
+                       current++;\r
+               }else{\r
+                       current=0;\r
+               }\r
+\r
+               controllStatus();\r
+\r
+               moveControl('next');\r
+\r
+               time = setTimeout('slideShow()',3000);\r
+       }\r
+\r
+       controllStatus = function(){\r
+               //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정\r
+               if(current>0||current<len-1){                           \r
+                       $prev.show();\r
+                       $next.show();\r
+               }\r
+               if(current==0){\r
+                       $prev.hide();\r
+                       $next.show();\r
+               }\r
+               if(current>=len-1){\r
+                       $prev.show();\r
+                       $next.hide();\r
+               }\r
+       }\r
+\r
+       moveControl = function(msg){\r
+               if(opts.bt!=null){\r
+                       msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))\r
+                                                       :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'));  //이전에 활성화된 롤링버튼을 비활성화\r
+                       $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png'));               //현재 인덱스값을 가지는 롤링버튼을 활성화\r
+               }\r
+\r
+               if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                       $obj.children().hide();\r
+                       $obj.children().eq(current).show();\r
+               }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                       $obj.animate({'left':'-'+size*current},'slow');\r
+               }\r
+       }\r
+\r
+       $obj.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               }\r
+       });\r
+\r
+       //롤링 버튼 클릭시\r
+       $bt.bind({\r
+               mouseenter:function(){\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       var idx = $bt.index(this);                                      //클릭한 롤링버튼의 인덱스값 저장\r
+\r
+                       current = idx;                                                          //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정\r
+\r
+                       controllStatus();\r
+\r
+                       if(effect!=true){                               //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.\r
+                               $obj.children().hide();\r
+                               $obj.children().eq(current).show();\r
+                       }else{                                                  //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨\r
+                               $obj.animate({'left':'-'+size*current},'slow');\r
+                       }\r
+\r
+                       // 모든 롤링 버튼을 비활성화\r
+                       $bt.each(function(){\r
+                               var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                                $(this).find('img').attr('src',source);\r
+                       });\r
+\r
+                       // 선택한 롤링버튼을 활성화\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //이전 버튼 클릭시\r
+       $prev.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       if(current==len-1) $next.show();        //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화 \r
+                       current--;                                                      //이미지 인덱스값 1씩 감소\r
+\r
+                       moveControl('prev');\r
+\r
+                       if(current==0) $(this).hide();  //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+       //다음 버튼 클릭시\r
+       $next.bind({\r
+               mouseenter:function(){\r
+                       var source = $(this).find('img').attr('src').replace('.png','_.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       clearTimeout(time);\r
+               },\r
+               mouseleave:function(){\r
+                       var source = $(this).find('img').attr('src').replace('_.png','.png');\r
+                       $(this).find('img').attr('src',source);\r
+                       if(!auto) return false;\r
+                       time = setTimeout('slideShow()',3000);\r
+               },\r
+               click:function(){\r
+                       current++;                                                      //이미지 인덱스값 1씩 증가\r
+                       \r
+                       moveControl('next');\r
+\r
+                       if(current>=len-1) $(this).hide();      //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화\r
+                       if(current>0) $prev.show();                     //이미지인덱스값이 0이 아닌경우 이전버튼 활성화\r
+\r
+                       return false;\r
+               }\r
+       });\r
+\r
+}\r
+\r
+// main rolling banner\r
+function slideMotion1(){\r
+       var $banner = $('#rolling .motionview'),\r
+               //$nav = $('#rolling ul.nav'),\r
+               banner = {prev:null, next:null},\r
+               size = $banner.children().length;\r
+               index = 1,\r
+               speed = 3000,\r
+               timer = null,\r
+               auto = true,\r
+               width = parseInt(100/size),\r
+               rest = parseInt(100%size);\r
+\r
+       var $nav = $('<ul class="nav">').insertAfter($banner);\r
+\r
+       $banner.children().each(function(index){\r
+               index++;\r
+               (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);\r
+               if(index==size){\r
+                       $nav.children().eq(-1).find('a').css('background-image','none');\r
+               }\r
+       });\r
+\r
+       if(rest>0){\r
+               width+=rest;\r
+               $nav.children().eq(-1).css('width',width+'%');\r
+       }\r
+\r
+       $nav.delegate("li",'click',function(){\r
+               var idx = $nav.children().index(this);\r
+               index = idx;\r
+               banner.prev = $banner.find('a.active');\r
+               banner.next = $banner.find('a').eq(index);\r
+\r
+               clearInterval(timer);\r
+               auto = false;\r
+               \r
+               $nav.trigger('change.banner',banner)\r
+                       .trigger('change.tab',index);\r
+\r
+               return false;\r
+       });\r
+\r
+       $nav.bind('change.banner',function(event, banner){\r
+               aniMotion();\r
+       });\r
+\r
+       $nav.bind('change.tab',function(event, index){\r
+               $nav.children().find('a').removeClass('sel');\r
+               $nav.children().eq(index).find('a').addClass('sel');\r
+       });\r
+\r
+       timer = setInterval(autoMotion, speed);\r
+\r
+       function autoMotion(){\r
+               if(index > size-1) index = 0;\r
+\r
+               aniMotion();\r
+       }\r
+\r
+       function aniMotion(){\r
+               if(auto){\r
+                       banner.prev = $banner.find('a.active');\r
+                       banner.next = $banner.find('a').eq(index);\r
+\r
+                       $nav.children().find('a').removeClass('sel');\r
+                       $nav.children().eq(index).find('a').addClass('sel');\r
+               }\r
+               banner.prev.addClass('last-active');\r
+               banner.next.css({'opacity':0.0})\r
+                       .addClass('active')\r
+                       .animate({'opacity':1.0}, 1000, function(){\r
+                               banner.prev.removeClass('active last-active');\r
+\r
+                               if(auto){\r
+                                       index++;\r
+                               }else{\r
+                                       index++;\r
+                                       timer = setInterval(autoMotion, speed*1.5);\r
+                                       auto = true;\r
+                               }\r
+                       });\r
+       }\r
+}\r
+\r
+// forum list show or hide function\r
+function toggleFunc(){\r
+       \r
+       var defaulNum = [2];\r
+\r
+       $('.forum-tit').each(function(){\r
+               var self = $(this);\r
+\r
+               var idx = $('.forum-tit').index(this);\r
+\r
+               for(i=0;i<=defaulNum.length;i++){\r
+                       if(idx==defaulNum[i]){\r
+                               var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');\r
+                               self.find('a.toggle').css('background-image',source);\r
+\r
+                               self.find('a.toggle').text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }\r
+               }\r
+\r
+               self.find('a.toggle').click(function(){\r
+                       \r
+                       if(self.next().is(':visible')){\r
+                               var source = $(this).css('background-image').replace('.gif','_.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Show');\r
+                               self.addClass('mb35').next().hide();\r
+                       }else{\r
+                               var source = $(this).css('background-image').replace('_.gif','.gif');\r
+                               $(this).css('background-image',source);\r
+\r
+                               $(this).text('Hide');\r
+                               self.removeClass('mb35').next().show();\r
+                       }\r
+\r
+                       return false;\r
+\r
+               });\r
+\r
+       });\r
+}\r
+\r
+// 파일 업로드\r
+function fileUpload( width ){\r
+       //var $img = $('.attach input[type=image]');\r
+       //var width = $img.attr('width');\r
+\r
+       // 2012-08-08 추가 : 파일 input 너비영역 셋팅\r
+       var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";\r
+\r
+       var $file = $('.attach input.upload').css({\r
+               "position": "absolute",\r
+               "top": "0px",\r
+               "right": "0px",\r
+               "width": w,\r
+               "cursor": "pointer",\r
+               "opacity": "0.0",\r
+               "height": "23px"\r
+       });\r
+       $file.off('change');\r
+       $file.on('change',function(e){\r
+               if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드\r
+                       return;\r
+               }\r
+               var idx = $file.index(this);\r
+               var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();\r
+               var fileErrMsg = {\r
+                               limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"\r
+                           ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"\r
+                           ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"\r
+                           ,ext_ko : "지원하지 않는 확장자 입니다."\r
+                           ,ext_zh : "不允许上传具有该扩展名的文件。"\r
+                           ,ext_en : "File extention not allowed for upload."\r
+               };\r
+               var initFileInput = function(obj) {\r
+                       $(obj).parent().find('input.file').val("");\r
+                       if($.browser.msie && $.browser.msie && $.browser.version < 10.0  ) $(obj).replaceWith( $(obj).clone(true) );\r
+                       else $(obj).val("");\r
+               };\r
+               \r
+               var filename = $(this).val();\r
+               \r
+               //CHK File ext\r
+               var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"\r
+                                     , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"\r
+                                     , "jpg", "png", "zip"];\r
+               var fileExt  = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();\r
+               var findFlag = false;\r
+               for(var i = 0; i < imgExts.length; i++) {\r
+                       if(imgExts[i] == fileExt) {\r
+                               findFlag = true;\r
+                               break;\r
+                       }\r
+               }\r
+       \r
+               if(findFlag == false) {\r
+                       alert( fileErrMsg["ext_" + localeCode] );\r
+                       initFileInput(this);\r
+//                     setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.\r
+                       return;\r
+               }\r
+               \r
+               //CHK File Size\r
+               if(\r
+                               ($.browser.msie && $.browser.version >= 10.0 ) //msie\r
+                               || $.browser.mozilla //FF\r
+                               || $.browser.safari //Chrome\r
+               )\r
+               {\r
+                       var filesize = parseInt(this.files[0].size/1024/1024); //MB;\r
+                       if( filesize > 200 ) {\r
+                               alert( fileErrMsg["limit_" + localeCode] );\r
+                               initFileInput(this);\r
+                               return;\r
+                       }\r
+               }\r
+               \r
+               $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);\r
+       });\r
+};\r
+\r
+\r
+// Show or Hide Toggle\r
+function showToEx(args){\r
+\r
+       if(!arguments.length) return false;\r
+       \r
+       var bt = $('#'+args.bt);\r
+       var obj = $('#'+args.obj);\r
+\r
+       var source = bt.css('background-image');\r
+       \r
+       if(obj.is(':visible')){\r
+               obj.hide();\r
+       }\r
+\r
+       bt.toggle(function(){\r
+               var src = source.replace('.gif','_.gif');\r
+               bt.css('background-image', src);\r
+               obj.show();\r
+               \r
+               return false;\r
+       },function(){\r
+               var src = source.replace('_.gif','.gif');\r
+               bt.css('background-image', src);\r
+               obj.hide();\r
+\r
+               return false;\r
+       });\r
+\r
+}\r
+\r
+\r
+// FAQ 20131016\r
+function faqToEx(){\r
+\r
+ var $question = $('#contents').find('.question');\r
+ var $answer = $('#contents').find('.answer');\r
+\r
+ // All Answer Rows Hide\r
+ $answer.hide().find('.conts').hide();\r
+\r
+ $question.each(function(){\r
+  var $self = $(this);\r
+  $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");\r
+  \r
+  $self.find('a').bind('click',function(){\r
+   $("#selArea ul").hide();\r
+   /*\r
+   if($(this).parents('tr').next().find('.answer').is(':visible')) return false;\r
+\r
+   $answer.hide().find('.conts').hide();\r
+   $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');\r
+   */\r
+\r
+   /* 20120822 hjh modify*/\r
+   /* if ( this open )?  close : all close, e.target open */\r
+   var cutTtl  = $(this).parent().children("div").html();\r
+   var ttl     = $(this).parent().parent().children("td.real_question").html();\r
+   \r
+   if($(this).parents('tr').next().find('.answer').is(':visible')){\r
+    $(this).html(cutTtl);\r
+    $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){\r
+     $answer.hide();\r
+    });\r
+   }else{\r
+    titleInit();\r
+    $(this).html(ttl);\r
+    $answer.hide().find('.conts').hide();\r
+    //$answer.slideUp('normal').find('.conts').hide();\r
+    $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow'); \r
+   }   \r
+\r
+   return false;\r
+  });\r
+ });\r
+\r
+ $answer.each(function(){\r
+  var $self = $(this);\r
+\r
+  $(this).find('a.bt-close-faq').bind('click',function(){\r
+   var question_td = $(this).parent().parent().parent().prev().children("td.question");\r
+   var cutTtl      = question_td.children("div").html();\r
+   question_td.children("a").html(cutTtl);\r
+   \r
+   $self.find('.conts').slideUp('fast',function(){\r
+    $self.hide();\r
+   });\r
+\r
+   return false;\r
+  });\r
+ });\r
+ \r
+ var titleInit = function() {\r
+  $question.each(function(i) {\r
+   $(this).find("a").html($(this).find("div").html());\r
+  });\r
+ }\r
+}\r
+\r
+\r
+\r
+/**\r
+ *  쓰기페이지 Tab 영역 컨트롤\r
+ *  @param     selector        텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'\r
+ */\r
+function setSwitchTab( selector ) {\r
+       var tabs = $('.tab-list').find("li");\r
+       var elements = $( selector );\r
+\r
+       $( elements ).each( function( i ) {\r
+               if( i != 0 )\r
+               {\r
+                       $(this).hide();\r
+               }\r
+       })\r
+\r
+       // Control Tabs\r
+       $( tabs ).each( function( i ) {\r
+               $( this ).click( function(){\r
+                       resetClass();\r
+\r
+                       $( this ).find( 'a' ).addClass( "sel" );\r
+                       $( elements[i] ).show();\r
+\r
+                       return false;\r
+               });\r
+       });\r
+\r
+       // Class 리셋\r
+       function resetClass()\r
+       {\r
+               $( tabs ).each( function( i ) {\r
+                       $( this ).find( 'a' ).removeClass( 'sel' );\r
+               });\r
+\r
+               $( elements ).each( function( i ) {\r
+                       $( this ).hide();\r
+               });\r
+       }\r
+}\r
+\r
+var SET_ATTACH_LIMIT;\r
+var SET_ATTACH_WIDTH;\r
+var SET_ATTACH_BTNNAME;\r
+\r
+var firstAddAction = function(obj, limit, w, btnName) {\r
+ var bn            = btnName || 'File';\r
+ var fileAttachStr = "<li class='clfix no-first'>";\r
+ fileAttachStr += '<div class="attach">';\r
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';\r
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';\r
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';\r
+ fileAttachStr += '</div>';\r
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';\r
+ fileAttachStr += '</li>';\r
+ obj.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    $("a.remove-btn").eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ obj.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ \r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+}\r
+\r
+var firstRemoveAction = function(id) {\r
+ var obj = $("#" + id);\r
+ var compFile    = $("input[type=file]");\r
+ var compFileCnt = compFile.size();\r
+ var ulObj       = compFile.eq(0).parent().parent().parent();\r
+ if(compFileCnt <= 1) {\r
+  var firstCompFile = compFile.eq(0);\r
+  firstCompFile.prev().prev().val("");\r
+  if ($.browser.msie) {\r
+               $(obj).parent().find('input.file').val("");\r
+               firstCompFile.replaceWith( firstCompFile.clone(true) );\r
+       } else {\r
+               firstCompFile.val("");\r
+               firstCompFile.prev().prev().val("");\r
+  }\r
+ } else {\r
+  obj.parent().remove();\r
+  ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");\r
+  \r
+  //add-btn event..\r
+  firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);\r
+ }\r
+ \r
+ ulObj\r
+ .find("li")\r
+ .eq(0)\r
+ .removeClass("no-first")\r
+ .find("a.remove-btn")\r
+ .attr("id", id)\r
+ .unbind("click");\r
+ \r
+ setTimeout(function() {\r
+  $("#" + id).focus();\r
+ }, 100);\r
+ \r
+ $("#" + id).on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   var that = $(this);\r
+   setTimeout(function() {\r
+    that.prev().focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ $("#" + id).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+/** \r
+ * File 첨부컨트롤\r
+ * @param limit 최대 파일 첨부 갯수\r
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가\r
+ */\r
+function setAttachFile( limit, width, btnName, removeBtnId )\r
+{\r
+ var w = width == null || width == undefined  || isNaN( width ) ? 180 : width;\r
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );\r
+ var inputFile     = $( 'ul.file-att-form input[type=file]' );\r
+ \r
+ SET_ATTACH_LIMIT = limit;\r
+ SET_ATTACH_WIDTH = w;\r
+ SET_ATTACH_BTNNAME = btnName;\r
+ \r
+ inputFile.on("keydown", function(e) {\r
+  var that = $(this);\r
+  \r
+  if(e.which == 9 && e.shiftKey) {\r
+   return true;\r
+  }\r
+  \r
+  if(e.which === 9) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    that.parent().parent().find("#" + removeBtnId).eq(0).focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ inputFile.on("focusin", function(e) {\r
+  $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+ }).on("focusout", function(e) {\r
+  $(this).parent().css("outline", "");\r
+ });\r
+ \r
+ firstAddAction(btnFileAttach, limit, w, btnName);\r
+ \r
+ /*\r
+ btnFileAttach.on("keydown", function(e) {\r
+  if(e.which == 9 && e.shiftKey) {\r
+   e.preventDefault();\r
+   setTimeout(function() {\r
+    inputFile.focus();\r
+   }, 1);\r
+  }\r
+ });\r
+ \r
+ btnFileAttach.click( function()\r
+ {\r
+  var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );\r
+  \r
+  if( $( ul ).find( "li" ).length >= limit )\r
+  {\r
+   alert( "Only " + limit + " files are allowed" );\r
+   return;\r
+  }\r
+  //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );\r
+  $( ul ).append( fileAttachStr );\r
+  var removeBtns = $( ul ).find( ".remove-btn" ).last();\r
+  $( removeBtns ).bind( "click", onBtnFileDetachClick );\r
+  \r
+  \r
+  removeBtns.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.prev().find("input[type=file]").focus();\r
+    }, 1);\r
+   }\r
+  });\r
+  \r
+  var addInputFile = $("ul.file-att-form input[type=file]").last(); \r
+  \r
+  addInputFile.on("keydown", function(e) {\r
+   var that = $(this);\r
+   if(e.which == 9 && e.shiftKey) {\r
+    return true;\r
+   }\r
+   \r
+   if(e.which === 9) {\r
+    e.preventDefault();\r
+    setTimeout(function() {\r
+     that.parent().parent().find("a.remove-btn").eq(0).focus();\r
+    }, 1);\r
+   }\r
+  }).on("focusin", function(e) {\r
+   $(this).parent().css("outline", "1px dotted #2d2d2d");\r
+  }).on("focusout", function(e) {\r
+   $(this).parent().css("outline", "");\r
+  });\r
+\r
+  fileUpload( w + 50 );\r
+  updateFileField();\r
+  return false;\r
+ });\r
+ \r
+\r
+ // File 제거 버튼\r
+ function onBtnFileDetachClick()\r
+ {\r
+  var that = $(this);\r
+  $( this ).unbind( "click", onBtnFileDetachClick );\r
+   var a = that.parent().prev().children("a").eq(0);\r
+   setTimeout(function() {\r
+   that.parents(".no-first").remove();\r
+  }, 1);\r
+  \r
+  setTimeout(function() {\r
+   a.focus();\r
+  }, 300);\r
+  return false;\r
+ }\r
+ */\r
+ /**\r
+  *  2012-08-08 전종호 추가\r
+  *  파일 Input Text 영역 너비를 잡아주는 메서드\r
+  */\r
+ function updateFileField()\r
+ {\r
+  var ul = $( ".file-att-form" );\r
+  $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );\r
+ }\r
+\r
+ updateFileField();\r
+ fileUpload( w + 50 );\r
+ \r
+ $("#" + removeBtnId).on("click", function(e) {\r
+  firstRemoveAction($(this).attr("id"));\r
+ });\r
+}\r
+\r
+\r
+\r
+/** \r
+ * [PAGE] device speces list page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+function initDevicespecsList (){\r
+       var isCompareView=false;\r
+       $("#devicespecs-list > li").each( \r
+               function(i){ \r
+                       $(".info", this).bind("click", devicespecsListInfoToggle);\r
+                       $(".xx", this).bind("click", devicespecsListInfoToggle);\r
+                       \r
+                       //detail info layer toggle function\r
+                       function devicespecsListInfoToggle (){\r
+                               $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();\r
+                               return false;\r
+                       }\r
+       });\r
+\r
+\r
+       /* DEVICE COMPARE 열리는 부분\r
+       - defualt : close. \r
+       - 최초 한번만 열림 \r
+       - 현재는 compare 버튼에 공통으로 함수 바인딩\r
+       */\r
+       function devicespecsCompareOnOff (){\r
+               if ( isCompareView ) return;\r
+               var ww = ( isCompareView ) ? "30px":"207px";\r
+               $("#devicespecs-compare").animate({\r
+                   height: ww }, 300, "linear", function(){ });\r
+\r
+               isCompareView = ( isCompareView ) ? false:true;\r
+               return false;\r
+       }\r
+\r
+       //compare 버튼 공통으로 클릭 이벤트 걸림 \r
+       $(".compare").bind("click", function (){ devicespecsCompareOnOff() });\r
+}\r
+\r
+/** \r
+ * [PAGE] device speces view page\r
+ * date : 20120808\r
+ * id : hjh\r
+ */\r
+ function initDevicespecsView (){\r
+       var isImgView = false;\r
+       var isView = 0;\r
+       \r
+       //thumbnail overevent bind\r
+       $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );\r
+       focusDeviceDetail (1);\r
+       \r
+       $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.type === "keydown" && e.which == 9) {\r
+                       setTimeout(function() {\r
+                               $("#img-viewer-handle a").eq(0).focus();        \r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       //thumbnail viewarea controll handler bind\r
+       $("#img-viewer-handle").click(function () {\r
+               var ww;\r
+               var src = $("#img-viewer-handle img").attr("src");\r
+               if ( isImgView ){\r
+                       ww = "300px";\r
+                       src = src.replace(".gif", "_.gif");\r
+                       $("#img-viewer-thumbnail").hide();\r
+                       $("#device-info").show();\r
+               }else{\r
+                       ww = "730px";\r
+                       src = src.replace("_.gif", ".gif");\r
+                       $("#img-viewer-thumbnail").show();\r
+                       $("#device-info").hide();\r
+                       focusDeviceDetail(1);\r
+               }\r
+               \r
+               $("#img-viewer-handle img").attr("src", src);\r
+       $("#img-viewer").animate({\r
+                   width: ww\r
+                       }, 300, "linear", function(){\r
+                       if($.browser.msie)\r
+                               $("#img-inner").css("width", ww);\r
+               });\r
+               \r
+       isImgView = ( isImgView ) ? false:true;\r
+    });\r
+\r
+       //thumbnail overevent function (update date 2012.09.05 kangki)\r
+       function focusDeviceDetail ( id ) {\r
+               if ( isView == id ) return;\r
+\r
+               $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");\r
+               var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');\r
+\r
+               $( "#img-viewer-bic > img").attr("src", imgSrc);\r
+               isView = (id);          \r
+       }\r
+\r
+       /*toggle devicespecs List*/\r
+       if($('div#contents').find('.devicespec-tit').length){\r
+               \r
+               $('.devicespec-tit').each(function(){\r
+                       var self = $(this);\r
+                       $('a', self).bind ("click", fnToggle);\r
+\r
+                       function fnToggle(){\r
+\r
+                               if ( $(this).parent().parent().next().is(':visible') ){\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+                                       self.find('em').text('Show');\r
+                                       self.next().hide();\r
+\r
+                                       return false;\r
+                               }else{\r
+                                       $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+                                       self.find('em').text('Hide');\r
+                                       self.next().show();\r
+\r
+                                       return false;\r
+                               }\r
+                       }\r
+                                                       \r
+               });\r
+       }\r
+\r
+       /*all Show Hide devicespecs List*/\r
+       if($('div#contents').find('.devicespecs-util').length){\r
+               var self = $('div#contents').find('.devicespecs-util');\r
+\r
+               $('.showA', self).bind ("click", function (){\r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( !me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+                                       me.find('em').text('Hide');\r
+                                       me.next().show();\r
+                               }\r
+                       });\r
+                       return false;\r
+               })\r
+               $('.hideA', self).bind ("click", function (){\r
+                       \r
+                       $('.devicespec-tit').each(function(){\r
+\r
+                               var me = $(this);\r
+                               if ( me.next().is(':visible') ){\r
+                                       me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+                                       me.find('em').text('Show');\r
+                                       me.next().hide();\r
+                               }\r
+                                                               \r
+                       });\r
+                       return false;\r
+               })\r
+       }       \r
+}\r
+\r
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       $("#searchInput").bind("keydown", checkSearchText);\r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+\r
+       $(".autocomplete").mouseleave(function(){\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".autocomplete").css("visibility", "visible");\r
+\r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+\r
+                       var hei = $(".autocomplete").find('>ul').outerHeight();\r
+                       if(hei>400){\r
+                               $(".autocomplete").css({'height':'400px','overflow-y':'auto'});\r
+                       }\r
+               }\r
+               else{\r
+                       $(".autocomplete").css("visibility", "hidden");\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+ */\r
+\r
+function setTopScroll(selector) {\r
+       if ( !selector ) return false;\r
+       var btn = $( selector );\r
+       var w = $( window );\r
+       btn.css( "position", "absolute" );\r
+\r
+\r
+       btn.click( function(){ w.scrollTop( 0 ) } );\r
+\r
+       var wheight = w.innerHeight();\r
+       \r
+       $(window).resize( function() {\r
+               wheight = w.innerHeight();\r
+               redraw();\r
+       });\r
+\r
+       $(window).scroll( function() {\r
+               redraw();\r
+       })\r
+\r
+       /**\r
+        *      Top 버튼의 재정렬 메서드\r
+        */\r
+       function redraw()\r
+       {\r
+               var t = w.scrollTop() + wheight - 289;\r
+\r
+               if( t < wheight / 2 && w.scrollTop() == 0 )     {\r
+                       t = wheight / 2;\r
+               }\r
+               \r
+               btn.clearQueue();\r
+\r
+               btn.animate({\r
+           top: t\r
+               }, 500, function() {\r
+           // Animation complete.\r
+               });\r
+               //btn.css( "top", t );\r
+               //console.log( "target : " + t );\r
+       }\r
+\r
+       redraw();\r
+       /*\r
+       obj.initTop = position;\r
+       obj.topLimit = topLimit;\r
+       obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;\r
+\r
+       obj.style.position = "absolute";\r
+       obj.top = obj.initTop;\r
+       // obj.left = obj.initLeft;\r
+\r
+       if ( typeof( window.pageYOffset ) === "number" ) {      //WebKit\r
+               obj.getTop = function() {\r
+                       return window.pageYOffset;\r
+               }\r
+       } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {\r
+               obj.getTop = function() {\r
+                       return Math.max( document.documentElement.scrollTop, document.body.scrollTop );\r
+               }\r
+       } else {\r
+               obj.getTop = function() {\r
+                       return 0;\r
+               }\r
+       }\r
+\r
+       if ( self.innerHeight ) {       //WebKit\r
+               obj.getHeight = function() {\r
+                       return self.innerHeight;\r
+               }\r
+       } else if( document.documentElement.clientHeight ) {\r
+               obj.getHeight = function() {\r
+                       return document.documentElement.clientHeight;\r
+               }\r
+       } else {\r
+               obj.getHeight = function() {\r
+                       return 500;\r
+               }\r
+       }\r
+\r
+       obj.move = setInterval( function() {\r
+               if ( obj.initTop > 0 ) {\r
+                       pos = obj.getTop() + obj.initTop;\r
+               } else {\r
+                       pos = obj.getTop() + obj.getHeight() + obj.initTop;\r
+               }\r
+\r
+               if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;\r
+               if ( pos < obj.topLimit ) pos = obj.topLimit;\r
+\r
+               interval = obj.top - pos;\r
+               obj.top = obj.top - interval / 3;\r
+               obj.style.top = obj.top + "px";\r
+       }, 30 )\r
+       */\r
+}\r
+\r
+\r
+//popup\r
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)\r
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)\r
+\r
+//popup 중앙에 띄우기\r
+function pop_center(){ \r
+       var x,y; \r
+       if (window.innerHeight) { // IE 외 모든 브라우저 \r
+               x = (screen.availWidth - self.innerWidth) / 2; \r
+               y = (screen.availHeight - self.innerHeight) / 2; \r
+       }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드 \r
+               x = (screen.availWidth - document.documentElement.clientWidth) / 2; \r
+               y = (screen.availHeight - document.documentElement.clientHeight) / 2; \r
+       }else if (document.body) { // 다른 IE 브라우저( IE &lt; 6) \r
+               x = (screen.availWidth - document.body.clientWidth) / 2; \r
+               y = (screen.availHeight - document.body.clientHeight) / 2; \r
+       } \r
+       window.moveTo(x,y); \r
+}\r
+\r
+// Layer Popup Open\r
+function layer_open(el){\r
+       var temp = $('#' + el);\r
+\r
+       if(!temp.hasClass('sty2')){\r
+               $('.layer').fadeIn();\r
+       }\r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       if(temp.hasClass('sty2')){\r
+               temp.fadeIn();\r
+\r
+               temp.find('a.cbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+               temp.find('a.gbtn').click(function(e){\r
+                       temp.fadeOut();\r
+               });\r
+\r
+               return false;\r
+       }\r
+       // 닫는 버튼 gbtn-c 추가 20130627\r
+       $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){\r
+               $('.layer').fadeOut();\r
+               return false;\r
+       });\r
+}\r
+\r
+// background dim - 2013-05-31\r
+function layer_open2(el){\r
+       var temp = $('#' + el);\r
+       $('input').attr('disabled', 'disabled');\r
+       $('.layerPop').fadeIn();\r
+       \r
+\r
+       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');\r
+       else temp.css('top', '0px');\r
+       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');\r
+       else temp.css('left', '0px');\r
+\r
+       $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){\r
+               $('.layerPop').fadeOut();\r
+               $('input').removeAttr('disabled');\r
+               return false;\r
+       });\r
+}\r
+\r
+\r
+function pop_account(url){\r
+       window.open(url,'account','width=619,height=591,scrollbars=yes')\r
+}\r
+\r
+function pop_loadDoc(url){\r
+       window.open(url,'online','width=850,height=600,scrollbars=yes')\r
+}\r
+\r
+/** \r
+ *  [PAGE] Tags\r
+ *  date : 20120820\r
+ *  author : 전종호\r
+ */\r
+function initTags()\r
+{\r
+       // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.\r
+       // 마지막 아이템은 제외\r
+       var eleArr = $(".tag-list").find("li");\r
+\r
+       $( eleArr ).each( function( i ) {\r
+               if( i < eleArr.length - 1 )\r
+               {\r
+                       var target = $(this).find("a")[0];\r
+                       var content = $( target ).html();\r
+\r
+                       $( target ).html( content + "," );\r
+               }\r
+       })\r
+}\r
+\r
+$(document).ready(function(){\r
+       $(".tip_info").css("cursor","pointer");\r
+       $(".tip_info > img").mouseover(function(){\r
+               $(".tip_cont").css("display","block");\r
+       });\r
+       $(".tip_info > img").mouseout(function(){\r
+               $(".tip_cont").css("display","none");\r
+       });\r
+});\r
+\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+var isPopup = false ;\r
+\r
+function popupLayerView(id){\r
+\r
+       var $L = $("#" + id) ;\r
+       var $D  = $("#" + id + "down") ;\r
+\r
+       $T = $("#" + id) ;\r
+\r
+       $L.show();\r
+       isPopup = true ;\r
+\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+\r
+       $("#" + id + "agree").focus() ;\r
+\r
+       jQuery(":focusable").focusin(function(e){\r
+               if (isPopup) {\r
+                       e.stopPropagation() ;\r
+                       if ($L.find(jQuery(this)).length > 0) {\r
+                       } else {\r
+                               jQuery(this).blur() ;\r
+                               jQuery("#" + id + " :focusable:first").focus() ;\r
+                       }\r
+               }\r
+       }) ;\r
+\r
+       $L.find('.close').click(function(){\r
+               resetPopup(id) ;\r
+       });\r
+\r
+       $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });\r
+}\r
+\r
+function resetPopup(T) {\r
+       $("#" + T + "down").hide();\r
+       $("#" + T + "agree").attr("checked", false) ;\r
+       isPopup = false ;\r
+       $("#" + T).hide() ;\r
+       $("#" + T + "Btn").focus() ;\r
+}\r
+\r
+function getDownload(T, F, I) {\r
+       if ($("#" + T + "agree").is(':checked')) {\r
+               commonDownloadLog(F, I) ;\r
+               resetPopup(T) ;\r
+       }\r
+}\r
+\r
+function focusable( element, isTabIndexNotNaN ) {\r
+       var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;\r
+       if ( "area" === nodeName ) {\r
+               map = element.parentNode;\r
+               mapName = map.name;\r
+               if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }\r
+               img = $( "img[usemap=#" + mapName + "]" )[0];\r
+               return !!img && visible( img );\r
+       }\r
+       return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible\r
+                       visible( element ) ;\r
+}\r
+\r
+function visible( element ) {\r
+       return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {\r
+               return $.css( this, "visibility" ) === "hidden";\r
+       }).length;\r
+}\r
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }\r
+\r
+$.extend( $.expr[ ":" ], {\r
+       data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },\r
+       focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },\r
+       tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }\r
+});\r
+// new layer popup script by ygh 2013.11.14\r
+\r
+// 2013-11-15 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device1').hide();\r
+       \r
+       $('#thumb_view_btn').hover(function() {\r
+               $('.view_device1').show();\r
+       },function() {\r
+               $('.view_device1').hide();\r
+       });\r
+               \r
+});\r
+\r
+// 2014-04-22 타이젠 썸네일 추가\r
+$(document).ready(function() {\r
+       $('.view_device2').hide();\r
+       \r
+       $('#thumb_view_btn2').hover(function() {\r
+               $('.view_device2').show();\r
+       },function() {\r
+               $('.view_device2').hide();\r
+       });\r
+               \r
+});\r
+\r
+\r
+function beforePopupLayerView(popId, popId2, popContinue){\r
+       var $L = $("#" + popId) ;\r
+       $L.show(100);\r
+       $('html, body').animate({ scrollTop: $L.offset().top }, 500);\r
+       $L.find('.close').click(function(){\r
+               $L.hide();\r
+       });\r
+       $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });\r
+}\r
diff --git a/org.tizen.ui.guides/html/scripts/core.js b/org.tizen.ui.guides/html/scripts/core.js
new file mode 100755 (executable)
index 0000000..31ad7ff
--- /dev/null
+++ b/org.tizen.ui.guides/html/scripts/core.js
@@ -0,0 +1,899 @@
+// /////////////////////////////////////////////////////////////////////////////////////////////////\r
+// # com.samsung.devloper common core javascript #\r
+// # Create Date : 2012.07.10. \r
+// # Create By : kangki\r
+;(function ($) {\r
+/**\r
+ * Samsung Developer Common JavaScript\r
+ */\r
+$.SD = {};\r
+\r
+/*\r
+ * Method Common\r
+ */\r
+$.SD.message = function (msg) { if (msg) alert(msg); };\r
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }\r
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };\r
+$.SD.typeTest = function (data, datatype) {\r
+       if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));\r
+       if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));\r
+       if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));\r
+       if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));\r
+       if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));\r
+       if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));\r
+       if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));\r
+\r
+       return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));\r
+};\r
+\r
+$.SD.toDate = function (date, seperator) {\r
+       if (!seperator) seperator = '-';\r
+\r
+       date = $.SD.replaceAll(date, seperator, '');\r
+       date = $.SD.replaceAll(date, '/', '');\r
+\r
+       if (date.length !== 8) return null;\r
+       \r
+       date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));\r
+\r
+       if (date.valueOf().toString() === 'NaN') return null;\r
+\r
+       return date;\r
+};\r
+\r
+$.SD.toDateString = function (date, seperator) {\r
+       if (!seperator) seperator = '/';\r
+       if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);\r
+       if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";\r
+\r
+       var str, dateString = date.getFullYear();\r
+\r
+       str             = "0" + (date.getMonth()+1);\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+       str             = "0" + date.getDate();\r
+       dateString      = dateString + seperator + str.substring(str.length-2, str.length);\r
+\r
+       return dateString;\r
+};\r
+\r
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };\r
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };\r
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };\r
+\r
+$.SD.insertComma = function(num) {\r
+       var tnum    = num + "";\r
+       var tarr    = new Array();\r
+       var dot     = "";\r
+       var idxDot  = tnum.indexOf(".");\r
+       var sign    = "";\r
+       var tinx    = 0;\r
+       var fnum    = tnum;\r
+        \r
+       \r
+       if(idxDot > -1) {\r
+               fnum = tnum.substring(0, idxDot);\r
+               dot  = tnum.substring(idxDot);\r
+               tnum = fnum;\r
+       } \r
+       \r
+       if(tnum.indexOf("-") > -1) {\r
+               fnum = tnum.substring(1);\r
+               sign = tnum.substring(0, 1);\r
+       }\r
+       \r
+       for(var inx = fnum.length; inx > 0; ) {\r
+               tarr[tinx++] = fnum.substring(inx, inx - 3);\r
+               inx = inx - 3;\r
+       }\r
+       \r
+       return sign + tarr.reverse().join(",") + dot;\r
+}\r
+\r
+/**\r
+ * Method Ajax\r
+ */\r
+$.SD.ajax = {\r
+       doAjax : function (json) {\r
+               var param = {\r
+                       async : json.async,\r
+                       type : json.type,\r
+                       dataType : json.dataType,\r
+                       cache: json.cache,\r
+                       timeout : json.timeout,\r
+                       success : json.success,\r
+                       error : json.error\r
+               };\r
+\r
+               if (param.dataType === 'jsonp') {\r
+                       param.url = json.url + '?' + $.param(json.data) + '&callback=?';\r
+               } else {\r
+                       param.url = json.url;\r
+                       param.data = json.data;\r
+               }\r
+               $.ajax(param);\r
+       },\r
+       \r
+       get : function (json) {\r
+               $.SD.ajax.doAjax({ \r
+                       url:json.url,\r
+                       cache:json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'get', \r
+                       dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       },\r
+       \r
+       post : function (json) {\r
+               $.SD.ajax.doAjax({ url:json.url,\r
+                       cache: json.cache != null ? json.cache : false,\r
+                       async:json.async != null ? json.async : true,\r
+                       type:'post', dataType:'json',\r
+                       data:json.data != null ? json.data : {}, \r
+                       timeout:10000, success:json.success, \r
+                       error: function(){ if(json.error != null)json.error(); }\r
+               });\r
+       }\r
+};\r
+\r
+/**\r
+ * SD20 password check\r
+ */\r
+\r
+$.SD.isSD20Pwd = function(pwd) {\r
+       \r
+       if(/[a-zA-Z]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/[0-9]{1,}/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {\r
+               return false;\r
+       }\r
+       \r
+       return true;\r
+};\r
+\r
+$.SD.popupCenter = function(popObj) {\r
+       var scrollbars  = "no";\r
+       var resizeable  = "no";\r
+       \r
+       if(popObj.scrollbars) {\r
+               scrollbars = popObj.scrollbars; \r
+       }\r
+       \r
+       if(popObj.resizeable) {\r
+               resizeable = popObj.resizeable;\r
+       }\r
+       \r
+       var width  = screen.width;\r
+       var height = screen.height;\r
+\r
+       var x = ( width / 2 ) - ( popObj.width / 2 );\r
+       var y = ( height / 2 ) - ( popObj.height / 2 );\r
+\r
+       var opt = "left=" + x +\r
+                 ",top=" + y +\r
+                 ",width=" + popObj.width +\r
+                 ",height=" + popObj.height +\r
+                 ",toolbar=no,location=no,directories=no,status=no,menubar=no" +\r
+                 ",scrollbars=" + scrollbars +\r
+                 ",resizable=" + resizeable;\r
+       var pop = window.open(popObj.url, popObj.target, opt);\r
+       if(pop) {\r
+               pop.focus();\r
+       }\r
+}\r
+\r
+$.SD.isValidDate = function(val) {\r
+       if(val.length != 8) {\r
+               return false;\r
+       }\r
+       \r
+       var yyyy = Number(val.substring(0, 4)); \r
+       var mm   = Number(val.substring(4, 6));\r
+       var dd   = Number(val.substring(6));\r
+       \r
+       if( mm < 1 || mm > 12 ) {\r
+               return false;\r
+       }\r
+       \r
+       var endDay  = 0;\r
+       \r
+       if( mm == 2 ) {\r
+               if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {\r
+                       endDay = 29;\r
+               } else {\r
+                       endDay = 28;\r
+               }\r
+               \r
+       } else {\r
+               var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);\r
+               endDay = endDays[mm - 1];\r
+       }\r
+       \r
+       if( dd <= 0 || dd > endDay ) {\r
+               return false;\r
+       } \r
+       \r
+       return true;\r
+       \r
+}\r
+\r
+$.SD.boardDownload = function(option, func) {\r
+       var jsonData = {\r
+               url: "/board/ajaxDwnldProc.do",\r
+               async: false,\r
+               data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;\r
+                               //location.href = $(obj).attr("href");\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.commonDownload = function(fileName, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDwnldProc.do",\r
+               async: false,\r
+               data: {fileName: fileName, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               location.href = fileFullPath;\r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonDownloadLogProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {\r
+                       if(data.existFileYn == "Y") {\r
+                               //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;\r
+                               if(target == 'new'){\r
+                                       window.open(fileFullPath, '');\r
+                               }else{\r
+                                       location.href = fileFullPath;\r
+                               }\r
+                               \r
+                               if(func) {\r
+                                       func(data);\r
+                               }       \r
+                       } else {\r
+                               alert("File does not exist.");\r
+                       }\r
+               }\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonAllShareClickCountProc.do",\r
+               async: false,\r
+               data: {fileFullPath: fileFullPath, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData); \r
+}\r
+\r
+$.SD.commonClickCount = function(categoryName, categoryId) {\r
+       var jsonData = {\r
+               url: "/common/ajaxCommonClickCountProc.do",\r
+               data: {categoryName: categoryName, categoryId: categoryId},\r
+               success: function(data) {}\r
+       }\r
+       \r
+       $.SD.ajax.get(jsonData);\r
+}\r
+\r
+$.SD.getByteLen = function(str) {\r
+       var resultSize = 0;\r
+       if(str == null){\r
+               return 0;\r
+       }\r
+       for(var i=0; i<str.length; i++){\r
+         var c = escape(str.charAt(i));\r
+         if(c.length == 1){\r
+                 resultSize ++;\r
+         }     else if(c.indexOf("%u") != -1) {\r
+                 resultSize += 2;\r
+         }     else if(c.indexOf("%") != -1) {\r
+                 resultSize += c.length/3;\r
+         }\r
+       }\r
+       return resultSize;\r
+}\r
+\r
+$.SD.cutByte = function(str, limit) {\r
+       var tempStr = new String(str);\r
+       var len = 0;\r
+       for ( var i = 0; i < str.length; i++) {\r
+               var c = escape(str.charAt(i));\r
+               if (c.length == 1)\r
+                       len++;\r
+               else if (c.indexOf("%u") != -1)\r
+                       len += 2;\r
+               else if (c.indexOf("%") != -1)\r
+                       len += c.length / 3;\r
+               if (len > limit) {\r
+                       tempStr = tempStr.substring(0, i);\r
+                       break;\r
+               }\r
+       }\r
+       return tempStr;\r
+}\r
+\r
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};\r
+\r
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */\r
+\r
+/** \r
+ * Method pagination \r
+ * */\r
+$.fn.frontPagination = function (pageInfo, func) {\r
+       var info = {\r
+                        prev : 1\r
+                       ,first : 1\r
+                       ,begin : pageInfo.begin - 0\r
+                       ,current : pageInfo.current - 0\r
+                       ,end : pageInfo.end - 0\r
+                       ,last : pageInfo.last - 0\r
+                       ,next : 1\r
+               },\r
+               target  = this, \r
+               page    = $('<span class="page"></span>'),\r
+               prev    = "", \r
+               next    = "", \r
+               i               = 0, \r
+               n               = 0;\r
+\r
+       info.begin       = info.begin < 1 ? 1 : info.begin;\r
+       info.current = info.current < 1 ? 1 : info.current;\r
+       info.end         = info.end < 1 ? 1 : info.end;\r
+       info.last        = info.last < 1 ? 1 : info.last;\r
+\r
+       info.prev = info.current - 1;\r
+       info.next = info.current + 1;\r
+\r
+       target.addClass("pageNumber");\r
+       target.addClass("mt20");\r
+       target.children().remove();\r
+\r
+       if (info.first < info.begin) {\r
+               target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.first);\r
+               }));\r
+       }\r
+\r
+       if (info.prev >= info.first) {\r
+               target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.prev);\r
+               }));\r
+       }\r
+\r
+       i = info.begin;\r
+       n = info.end;\r
+       for(; i <= n; i++) {\r
+               if (i === info.current) {\r
+                       page.append('<strong>'+i+'</strong>');\r
+               } else {\r
+                       (function(index){\r
+                               page.append($('<a href="#">'+index+'</a>').bind('click', function(e){\r
+                                       e.preventDefault();\r
+                                       func(index);\r
+                               }));\r
+                       })(i);\r
+               }\r
+       }\r
+\r
+       target.append(page);\r
+\r
+       if (info.next <= info.last) {\r
+               target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.next);\r
+               }));\r
+       }\r
+       \r
+       if (info.last > info.end) {\r
+               target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {\r
+                       e.preventDefault();\r
+                       func(info.last);\r
+               }));\r
+       }       \r
+};\r
+\r
+/**\r
+ *  Method : popup Show Hide \r
+ */\r
+$.fn.popupShow = function(options) {\r
+       var opts = $.extend({}, $.fn.popupShow.defaults, options);\r
+       \r
+       if($("body div#" + opts.maskId).size() == 0) {\r
+               $("body").append("<div id='" + opts.maskId + "'></div>");\r
+               $("#" + opts.maskId).css({\r
+                       "position" : "absolute",\r
+                       "left"     : "0",\r
+                       "top"      : "0",\r
+                       "z-index"  : "9000",\r
+                       "background-color" : "#000",\r
+                       "display"  : "none"\r
+               });\r
+       }\r
+       \r
+       var mask_layer  = $("#" + opts.maskId);\r
+       var popup_layer = $(this);\r
+       \r
+       popup_layer.css("z-index", "9999");\r
+       \r
+       var maskHeight = $(document).height();\r
+       var maskWidth = $(window).width();\r
+       \r
+       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+       \r
+       mask_layer.fadeIn(opts.fadeSec);\r
+       mask_layer.fadeTo(opts.speed, opts.fadeLow);\r
+       \r
+       var winH = $(window).height();\r
+       var winW = $(window).width();\r
+       \r
+       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+       \r
+       popup_layer.fadeIn(opts.fadeSec);\r
+       \r
+       var init_num = 0;\r
+       \r
+       if(init_num == 0) {\r
+               mask_layer.click(function() {\r
+                       $(this).hide();\r
+                       popup_layer.hide();\r
+               });\r
+               \r
+               \r
+               $("#" + opts.closeId).click( function(e) {\r
+                       e.preventDefault();\r
+                       popup_layer.popupHidden(opts.maskId);\r
+               });\r
+               \r
+               \r
+               $(window).resize( function() {\r
+                       var maskHeight = $(document).height();\r
+                       var maskWidth  = $(window).width();\r
+                       var winH       = $(window).height();\r
+                       var winW       = $(window).width();\r
+                       \r
+                       mask_layer.css({'width':maskWidth,'height':maskHeight});\r
+                       \r
+                       popup_layer.css('top',  $(window).scrollTop() + winH/2 - popup_layer.height()/2);\r
+                       popup_layer.css('left', $(window).scrollLeft()  + winW/2 - popup_layer.width()/2);\r
+               });\r
+               \r
+               init_num++;\r
+       }\r
+};\r
+\r
+$.fn.popupHidden = function(maskId) {\r
+       var id = "#";\r
+       \r
+       if(maskId) {\r
+               id = id + maskId;\r
+       } else {\r
+               id = id + $.fn.popupShow.defaults.maskId; \r
+       }\r
+       \r
+       $(id).hide();\r
+       $(this).hide();\r
+};\r
+\r
+\r
+$.fn.popupShow.defaults = {\r
+       speed : "slow",\r
+       fadeLow : 0.8,\r
+       fadeSec : 100,\r
+       maskId  : "mask",\r
+       popupId : "layer-pop",\r
+       closeId : "layer-pop-close"\r
+};\r
+\r
+/**\r
+ *  Method : validate File Ext\r
+ */\r
+$.fn.isNotValidateFileExt = function(imgExts) {\r
+       imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};\r
+       var that = this;\r
+       var target = null;\r
+\r
+       that.each(function (i, item) {\r
+               var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';\r
+               if (filePath != "") {\r
+                       var fileExt  = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();\r
+                       if (!imgExts[fileExt]) {\r
+                               target = item;\r
+                               return false;\r
+                       }\r
+               }\r
+       });\r
+\r
+       return target;\r
+}      \r
+\r
+/**\r
+ *  Method : validate SD20 Password\r
+ */\r
+$.validator.addMethod("isSD20Pwd", function(value, element) {\r
+       return this.optional(element) \r
+              || $.SD.isSD20Pwd(value);\r
+}, "비밀번호를 다시 입력해 주세요.");\r
+\r
+$.SD.alterParent = function(options, event) {\r
+    var label = $(this).data('label');\r
+    \r
+    /*\r
+    if (event && event.type === 'focusin') {\r
+      label.hide();\r
+    } else if (event && event.type === 'focusout') {\r
+      label.css('opacity', options.placeholderOpacity);\r
+    }\r
+    */\r
+    \r
+    if (event && event.type !== 'keydown') {\r
+      toggleLabel(this, label);\r
+    } else {\r
+      // Use timeout to catch val() just after the key is pressed\r
+      // Using keyup is too slow.   \r
+      (function(input) {\r
+        setTimeout(function() {\r
+          toggleLabel(input, label);\r
+        }, 0);\r
+      })(this);\r
+    }\r
+    \r
+    if (event && event.type === 'focusin') {\r
+       label.hide();\r
+    }\r
+  };\r
+  \r
+  var toggleLabel = function(input, label) {\r
+    if ($(input).val()) {\r
+      label.hide();\r
+    } else {\r
+      label.show();\r
+    }\r
+  };\r
+\r
+  $.fn.stickyPlaceholders = function(options) {\r
+    var defaults = {\r
+      wrapperClass: 'sticky-placeholder-wrapper',\r
+      wrapperDisplay: 'block',\r
+      labelClass: 'sticky-placeholder-label',\r
+      placeholderAttr: 'placeholder',\r
+      dataAttr: 'data-sticky-placeholder',\r
+      placeholderColor: '#000',\r
+      placeholderOpacity: 0.5,\r
+      placeholderFocusOpacity: 0.25\r
+    };\r
+    options = $.extend(defaults, options);\r
+\r
+    return this.each(function() {\r
+      var input       = $(this),\r
+          placeholder = input.attr(options.placeholderAttr),\r
+          wrapper     = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),\r
+          label       = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),\r
+          labelStyle;\r
+\r
+      // store a reference to each input's label\r
+      input.data('label', label);\r
+\r
+      // remove the placeholder attribute to avoid conflcits\r
+      input.removeAttr('placeholder');\r
+      \r
+      // If the dataAttr is set and it's not equal to the placeholderAttr\r
+      if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {\r
+        input.attr('data-sticky-placeholder', placeholder);\r
+      }\r
+\r
+      labelStyle = {\r
+        'color': options.placeholderColor,\r
+        'cursor': 'text',\r
+        'font-family': input.css('font-family'),\r
+        'font-weight': input.css('font-weight'),\r
+        'font-size': input.css('font-size'),\r
+        'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),\r
+        'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),\r
+        // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671\r
+        'opacity': options.placeholderOpacity,\r
+        'padding-left': input.css('padding-left'),\r
+        'padding-top': input.css('padding-top'),\r
+        'position': 'absolute',\r
+        'text-transform': input.css('text-transform'),\r
+        'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)\r
+      };\r
+      label.css(labelStyle);\r
+      \r
+      // hide the placeholder if the input already has a value\r
+      if (input.val()) {\r
+        label.hide();\r
+      }\r
+\r
+      $(this).bind('keydown input focusin focusout', function(event) {\r
+        $.SD.alterParent.call(this, options, event);\r
+      });\r
+        \r
+      // prevent click/dblclick from selecting the label text\r
+      label.bind('mousedown', function(e) {\r
+        e.preventDefault();\r
+      });\r
+      \r
+      // call alterParent initially without an event to set up the wrapper elements\r
+      $.SD.alterParent.call(this, options);\r
+    });\r
+  };\r
+ \r
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {\r
+       $("#" + file_id).on("keydown", function(e) {\r
+               var that = $(this);\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       return true;\r
+               }\r
+               \r
+               if(e.which === 9) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + after_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+       \r
+       $("#" + after_id).on("keydown", function(e) {\r
+               if(e.which == 9 && e.shiftKey) {\r
+                       e.preventDefault();\r
+                       setTimeout(function() {\r
+                               $("#" + file_id).focus();\r
+                       }, 1);\r
+               }\r
+       });\r
+}  \r
+\r
+$.SD.closeWP = function() {\r
+       var Browser = navigator.appName;\r
+       var indexB = Browser.indexOf('Explorer');\r
+       if (indexB > 0) {\r
+           var indexV = navigator.userAgent.indexOf('MSIE') + 5;\r
+           var Version = navigator.userAgent.substring(indexV, indexV + 1);\r
+           window.opener.focus();\r
+           if (Version >= 7) {\r
+               window.open('', '_self', '');\r
+               window.close();\r
+           }\r
+           else if (Version == 6) {\r
+               window.opener = null;\r
+               window.close();\r
+           }\r
+           else {\r
+               window.opener = '';\r
+               window.close();\r
+           }\r
+       }\r
+       else {\r
+           window.close();\r
+       }\r
+}\r
+\r
+$.SD.profileFacebook = function() {\r
+       location.replace("http://facebook.com/profile.php");\r
+}\r
+\r
+/* ------------------------------ END --------------------------------------- */\r
+window.$SD = $.SD;\r
+\r
+})(jQuery);\r
+\r
+\r
+$(document).ready(function(){\r
+//document rady Start #########################################\r
+\r
+// Top menu action Start\r
+var onClickChangeEn            = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };\r
+var onClickChangeZh            = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };\r
+var onClickChangeKo            = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };\r
+var onClickSignOut                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };\r
+var onClickSignUp                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };\r
+var onClickSignIn                      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };\r
+var onClickUserInfoUpdate      = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };\r
+var onClickSignOff                     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); }; \r
+var onClickMyProfileUpdate     = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };\r
+var onClickDeleteAccount       = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };\r
+\r
+$("#wrapper").on('click', 'a', function(e) {\r
+        switch($(this).attr('id')) {\r
+        case 'changeEn': onClickChangeEn(e);  break;\r
+        case 'changeZh': onClickChangeZh(e); break;\r
+        case 'changeKo': onClickChangeKo(e); break;\r
+        case 'signOut': onClickSignOut(e); break;\r
+        case 'signUp': onClickSignUp(e); break;\r
+        case 'signIn': onClickSignIn(e); break;\r
+        case 'userInfoUpdate': onClickUserInfoUpdate(e); break;\r
+        case 'signOff': onClickSignOff(e); break;\r
+        case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;\r
+        case 'deleteAccount' : onClickDeleteAccount(e); break;\r
+        }\r
+});\r
+ \r
+//Top menu action End\r
+\r
+\r
+$("#sendFacebook, #sendTwitter").click(function(e) {\r
+       e.preventDefault();\r
+       var $this = $(this);\r
+       \r
+       if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {\r
+               var sns = $this.attr("id").substring(4).toLowerCase();\r
+               switch(sns) {\r
+               case "facebook" :\r
+                       var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";\r
+                       $("div.content img").each(function() {\r
+                               var that = $(this);\r
+                               if(that.width() > 200 && that.height() > 200) {\r
+                                       imgUrl = that.attr("src");\r
+                                       return false;\r
+                               }\r
+                       });\r
+                       \r
+                       var data = {\r
+                               app_id : $("#sd_appId").text(),\r
+                               link : copyUrl,\r
+                               picture : imgUrl,\r
+                               name : $("title").text(),\r
+                               caption : "developer.samsung.com",\r
+                               description : $("div.content p").eq(0).text(),\r
+                               redirectUri : "http://" + location.host + "/board/sns.do"\r
+                       };\r
+                       var url = "https://www.facebook.com/dialog/feed?" ;\r
+                       url += "app_id=" + data.app_id + "&" ;\r
+                       url += "link=" + data.link + "&" ;\r
+                       url += "picture=" + data.picture + "&" ;\r
+                       url += "name=" + encodeURIComponent(data.name) + "&" ;\r
+                       url += "caption=" + encodeURIComponent(data.caption) + "&" ;\r
+                       url += "description=" + encodeURIComponent(data.description) + "&" ;\r
+                       url += "redirect_uri=" + data.redirectUri ;\r
+                       sendSNS(sns, url, 850, 600);\r
+                       break;\r
+               case "twitter" :\r
+                       sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);\r
+                       break;\r
+               }\r
+       }\r
+       \r
+       function sendSNS(sns, url, iWidth, iHeight) {\r
+               var popObj = { url : url\r
+                                    , width : iWidth\r
+                                    , height: iHeight\r
+                                    , target: sns\r
+                                    , scrollbars: "yes"\r
+                                    , resizeable: "yes"};\r
+       \r
+               $SD.popupCenter(popObj);\r
+       }\r
+})\r
+ \r
+//document rady End #########################################\r
+ });\r
+\r
+;(function(){\r
+       window.deviceImageError = function(el) {\r
+               var noImage = noImage || '/images/common/device_details_noimage.gif';\r
+               if (el.src === noImage) \r
+                       return;\r
+               el.src = noImage;\r
+       };\r
+})();\r
+\r
+function commonDownload(fileName, categoryId){\r
+       if (fileName == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownload(fileName, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLog(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonDownloadLogTarget(fileFullPath, categoryId, target){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+function commonAllShareClickCount(fileFullPath, categoryId){\r
+       if (fileFullPath == "" || categoryId == ""){\r
+               alert("필요한 인자값을 확인해주세요!!")\r
+               return;\r
+       }else{\r
+               $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {\r
+               });\r
+       }\r
+}\r
+\r
+/*\r
+function layer_view(id){\r
+\r
+       var $layer = $('#'+id);\r
+       var $down  = $('.license-layer').find('a#down');\r
+\r
+       $layer.show();\r
+       $layer.find('.close, #down').click(function(){\r
+               $layer.hide();\r
+       });\r
+\r
+       function countChecked() {\r
+               $(":checkbox").is(':checked') ? $down.show() : $down.hide()\r
+       }\r
+\r
+       $(":checkbox").click(countChecked);\r
+}\r
+*/\r
diff --git a/org.tizen.ui.guides/html/scripts/jquery.util.js b/org.tizen.ui.guides/html/scripts/jquery.util.js
new file mode 100755 (executable)
index 0000000..a8516b0
--- /dev/null
+++ b/org.tizen.ui.guides/html/scripts/jquery.util.js
@@ -0,0 +1,1441 @@
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */\r
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);\r
+\r
+\r
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */\r
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML="   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};\r
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()\r
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);\r
+\r
+/*\r
+ * Metadata - jQuery plugin for parsing metadata from elements\r
+ *\r
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ *\r
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $\r
+ *\r
+ */\r
+\r
+/**\r
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property\r
+ * in the JSON will become a property of the element itself.\r
+ *\r
+ * There are three supported types of metadata storage:\r
+ *\r
+ *   attr:  Inside an attribute. The name parameter indicates *which* attribute.\r
+ *          \r
+ *   class: Inside the class attribute, wrapped in curly braces: { }\r
+ *   \r
+ *   elem:  Inside a child element (e.g. a script tag). The\r
+ *          name parameter indicates *which* element.\r
+ *          \r
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.\r
+ *\r
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements\r
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.\r
+ * \r
+ * @name $.metadata.setType\r
+ *\r
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("class")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from the class attribute\r
+ * \r
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>\r
+ * @before $.metadata.setType("attr", "data")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a "data" attribute\r
+ * \r
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>\r
+ * @before $.metadata.setType("elem", "script")\r
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"\r
+ * @desc Reads metadata from a nested script element\r
+ * \r
+ * @param String type The encoding type\r
+ * @param String name The name of the attribute to be used to get metadata (optional)\r
+ * @cat Plugins/Metadata\r
+ * @descr Sets the type of encoding to be used when loading metadata for the first time\r
+ * @type undefined\r
+ * @see metadata()\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend({\r
+       metadata : {\r
+               defaults : {\r
+                       type: 'class',\r
+                       name: 'metadata',\r
+                       cre: /({.*})/,\r
+                       single: 'metadata'\r
+               },\r
+               setType: function( type, name ){\r
+                       this.defaults.type = type;\r
+                       this.defaults.name = name;\r
+               },\r
+               get: function( elem, opts ){\r
+                       var settings = $.extend({},this.defaults,opts);\r
+                       // check for empty string in single property\r
+                       if ( !settings.single.length ) settings.single = 'metadata';\r
+                       \r
+                       var data = $.data(elem, settings.single);\r
+                       // returned cached data if it already exists\r
+                       if ( data ) return data;\r
+                       \r
+                       data = "{}";\r
+                       \r
+                       if ( settings.type == "class" ) {\r
+                               var m = settings.cre.exec( elem.className );\r
+                               if ( m )\r
+                                       data = m[1];\r
+                       } else if ( settings.type == "elem" ) {\r
+                               if( !elem.getElementsByTagName )\r
+                                       return undefined;\r
+                               var e = elem.getElementsByTagName(settings.name);\r
+                               if ( e.length )\r
+                                       data = $.trim(e[0].innerHTML);\r
+                       } else if ( elem.getAttribute != undefined ) {\r
+                               var attr = elem.getAttribute( settings.name );\r
+                               if ( attr )\r
+                                       data = attr;\r
+                       }\r
+                       \r
+                       if ( data.indexOf( '{' ) <0 )\r
+                       data = "{" + data + "}";\r
+                       \r
+                       data = eval("(" + data + ")");\r
+                       \r
+                       $.data( elem, settings.single, data );\r
+                       return data;\r
+               }\r
+       }\r
+});\r
+\r
+/**\r
+ * Returns the metadata object for the first member of the jQuery object.\r
+ *\r
+ * @name metadata\r
+ * @descr Returns element's metadata object\r
+ * @param Object opts An object contianing settings to override the defaults\r
+ * @type jQuery\r
+ * @cat Plugins/Metadata\r
+ */\r
+$.fn.metadata = function( opts ){\r
+       return $.metadata.get( this[0], opts );\r
+};\r
+\r
+})(jQuery);\r
+\r
+\r
+/**\r
+ * jQuery Validation Plugin 1.9.0\r
+\r
+ *\r
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/\r
+ * http://docs.jquery.com/Plugins/Validation\r
+ *\r
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer\r
+ *\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ *   http://www.opensource.org/licenses/mit-license.php\r
+ *   http://www.gnu.org/licenses/gpl.html\r
+ */\r
+\r
+/**\r
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망\r
+ */\r
+\r
+(function($) {\r
+\r
+$.extend($.fn, {\r
+       // http://docs.jquery.com/Plugins/Validation/validate\r
+       validate: function( options ) {\r
+\r
+               // if nothing is selected, return nothing; can't chain anyway\r
+               if (!this.length) {\r
+                       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );\r
+                       return;\r
+               }\r
+\r
+               // check if a validator for this form was already created\r
+               var validator = $.data(this[0], 'validator');\r
+               if ( validator ) {\r
+                       return validator;\r
+               }\r
+\r
+               // Add novalidate tag if HTML5.\r
+               this.attr('novalidate', 'novalidate');\r
+\r
+               validator = new $.validator( options, this[0] );\r
+               $.data(this[0], 'validator', validator);\r
+\r
+               if ( validator.settings.onsubmit ) {\r
+\r
+                       var inputsAndButtons = this.find("input, button");\r
+\r
+                       // allow suppresing validation by adding a cancel class to the submit button\r
+                       inputsAndButtons.filter(".cancel").click(function () {\r
+                               validator.cancelSubmit = true;\r
+                       });\r
+\r
+                       // when a submitHandler is used, capture the submitting button\r
+                       if (validator.settings.submitHandler) {\r
+                               inputsAndButtons.filter(":submit").click(function () {\r
+                                       validator.submitButton = this;\r
+                               });\r
+                       }\r
+\r
+                       // validate the form on submit\r
+                       this.submit( function( event ) {\r
+                               if ( validator.settings.debug )\r
+                                       // prevent form submit to be able to see console output\r
+                                       event.preventDefault();\r
+\r
+                               function handle() {\r
+                                       if ( validator.settings.submitHandler ) {\r
+                                               if (validator.submitButton) {\r
+                                                       // insert a hidden input as a replacement for the missing submit button\r
+                                                       var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);\r
+                                               }\r
+                                               validator.settings.submitHandler.call( validator, validator.currentForm );\r
+                                               if (validator.submitButton) {\r
+                                                       // and clean up afterwards; thanks to no-block-scope, hidden can be referenced\r
+                                                       hidden.remove();\r
+                                               }\r
+                                               return false;\r
+                                       }\r
+                                       return true;\r
+                               }\r
+\r
+                               // prevent submit for invalid forms or custom submit handlers\r
+                               if ( validator.cancelSubmit ) {\r
+                                       validator.cancelSubmit = false;\r
+                                       return handle();\r
+                               }\r
+                               if ( validator.form() ) {\r
+                                       if ( validator.pendingRequest ) {\r
+                                               validator.formSubmitted = true;\r
+                                               return false;\r
+                                       }\r
+                                       return handle();\r
+                               } else {\r
+                                       validator.focusInvalid();\r
+                                       return false;\r
+                               }\r
+                       });\r
+               }\r
+\r
+               return validator;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/valid\r
+       valid: function() {\r
+        if ( $(this[0]).is('form')) {\r
+            return this.validate().form();\r
+        } else {\r
+            var valid = true;\r
+            var validator = $(this[0].form).validate();\r
+            this.each(function() {\r
+                               valid &= validator.element(this);\r
+            });\r
+            return valid;\r
+        }\r
+    },\r
+       // attributes: space seperated list of attributes to retrieve and remove\r
+       removeAttrs: function(attributes) {\r
+               var result = {},\r
+                       $element = this;\r
+               $.each(attributes.split(/\s/), function(index, value) {\r
+                       result[value] = $element.attr(value);\r
+                       $element.removeAttr(value);\r
+               });\r
+               return result;\r
+       },\r
+       // http://docs.jquery.com/Plugins/Validation/rules\r
+       rules: function(command, argument) {\r
+               var element = this[0];\r
+\r
+               if (command) {\r
+                       var settings = $.data(element.form, 'validator').settings;\r
+                       var staticRules = settings.rules;\r
+                       var existingRules = $.validator.staticRules(element);\r
+                       switch(command) {\r
+                       case "add":\r
+                               $.extend(existingRules, $.validator.normalizeRule(argument));\r
+                               staticRules[element.name] = existingRules;\r
+                               if (argument.messages)\r
+                                       settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );\r
+                               break;\r
+                       case "remove":\r
+                               if (!argument) {\r
+                                       delete staticRules[element.name];\r
+                                       return existingRules;\r
+                               }\r
+                               var filtered = {};\r
+                               $.each(argument.split(/\s/), function(index, method) {\r
+                                       filtered[method] = existingRules[method];\r
+                                       delete existingRules[method];\r
+                               });\r
+                               return filtered;\r
+                       }\r
+               }\r
+\r
+               var data = $.validator.normalizeRules(\r
+               $.extend(\r
+                       {},\r
+                       $.validator.metadataRules(element),\r
+                       $.validator.classRules(element),\r
+                       $.validator.attributeRules(element),\r
+                       $.validator.staticRules(element)\r
+               ), element);\r
+\r
+               // make sure required is at front\r
+               if (data.required) {\r
+                       var param = data.required;\r
+                       delete data.required;\r
+                       data = $.extend({required: param}, data);\r
+               }\r
+\r
+               return data;\r
+       }\r
+});\r
+\r
+// Custom selectors\r
+$.extend($.expr[":"], {\r
+       // http://docs.jquery.com/Plugins/Validation/blank\r
+       blank: function(a) {return !$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/filled\r
+       filled: function(a) {return !!$.trim("" + a.value);},\r
+       // http://docs.jquery.com/Plugins/Validation/unchecked\r
+       unchecked: function(a) {return !a.checked;}\r
+});\r
+\r
+// constructor for validator\r
+$.validator = function( options, form ) {\r
+       this.settings = $.extend( true, {}, $.validator.defaults, options );\r
+       this.currentForm = form;\r
+       this.init();\r
+};\r
+\r
+$.validator.format = function(source, params) {\r
+       if ( arguments.length == 1 )\r
+               return function() {\r
+                       var args = $.makeArray(arguments);\r
+                       args.unshift(source);\r
+                       return $.validator.format.apply( this, args );\r
+               };\r
+       if ( arguments.length > 2 && params.constructor != Array  ) {\r
+               params = $.makeArray(arguments).slice(1);\r
+       }\r
+       if ( params.constructor != Array ) {\r
+               params = [ params ];\r
+       }\r
+       $.each(params, function(i, n) {\r
+               source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);\r
+       });\r
+       return source;\r
+};\r
+\r
+$.extend($.validator, {\r
+\r
+       defaults: {\r
+               messages: {},\r
+               groups: {},\r
+               rules: {},\r
+               errorClass: "error",\r
+               validClass: "valid",\r
+               errorElement: "label",\r
+               focusInvalid: true,\r
+               errorContainer: $( [] ),\r
+               errorLabelContainer: $( [] ),\r
+               onsubmit: true,\r
+               ignore: ":hidden",\r
+               ignoreTitle: false,\r
+               onfocusin: function(element, event) {\r
+                       this.lastActive = element;\r
+\r
+                       // hide error label and remove error class on focus if enabled\r
+                       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {\r
+                               this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );\r
+                               this.addWrapper(this.errorsFor(element)).hide();\r
+                       }\r
+               },\r
+               onfocusout: function(element, event) {\r
+                       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onkeyup: function(element, event) {\r
+                       if ( element.name in this.submitted || element == this.lastElement ) {\r
+                               this.element(element);\r
+                       }\r
+               },\r
+               onclick: function(element, event) {\r
+                       // click on selects, radiobuttons and checkboxes\r
+                       if ( element.name in this.submitted )\r
+                               this.element(element);\r
+                       // or option elements, check parent select in that case\r
+                       else if (element.parentNode.name in this.submitted)\r
+                               this.element(element.parentNode);\r
+               },\r
+               highlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).addClass(errorClass).removeClass(validClass);\r
+                       } else {\r
+                               $(element).addClass(errorClass).removeClass(validClass);\r
+                       }\r
+               },\r
+               unhighlight: function(element, errorClass, validClass) {\r
+                       if (element.type === 'radio') {\r
+                               this.findByName(element.name).removeClass(errorClass).addClass(validClass);\r
+                       } else {\r
+                               $(element).removeClass(errorClass).addClass(validClass);\r
+                       }\r
+               }\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults\r
+       setDefaults: function(settings) {\r
+               $.extend( $.validator.defaults, settings );\r
+       },\r
+\r
+       messages: {\r
+               required: "This field is required.",\r
+               remote: "Please fix this field.",\r
+               email: "Please enter a valid email address.",\r
+               url: "Please enter a valid URL.",\r
+               date: "Please enter a valid date.",\r
+               dateISO: "Please enter a valid date (ISO).",\r
+               number: "Please enter a valid number.",\r
+               digits: "Please enter only digits.",\r
+               creditcard: "Please enter a valid credit card number.",\r
+               equalTo: "Please enter the same value again.",\r
+               accept: "Please enter a value with a valid extension.",\r
+               maxlength: $.validator.format("Please enter no more than {0} characters."),\r
+               minlength: $.validator.format("Please enter at least {0} characters."),\r
+               rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),\r
+               range: $.validator.format("Please enter a value between {0} and {1}."),\r
+               max: $.validator.format("Please enter a value less than or equal to {0}."),\r
+               min: $.validator.format("Please enter a value greater than or equal to {0}.")\r
+       },\r
+\r
+       autoCreateRanges: false,\r
+\r
+       prototype: {\r
+\r
+               init: function() {\r
+                       this.labelContainer = $(this.settings.errorLabelContainer);\r
+                       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);\r
+                       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );\r
+                       this.submitted = {};\r
+                       this.valueCache = {};\r
+                       this.pendingRequest = 0;\r
+                       this.pending = {};\r
+                       this.invalid = {};\r
+                       this.reset();\r
+\r
+                       var groups = (this.groups = {});\r
+                       $.each(this.settings.groups, function(key, value) {\r
+                               $.each(value.split(/\s/), function(index, name) {\r
+                                       groups[name] = key;\r
+                               });\r
+                       });\r
+                       var rules = this.settings.rules;\r
+                       $.each(rules, function(key, value) {\r
+                               rules[key] = $.validator.normalizeRule(value);\r
+                       });\r
+\r
+                       function delegate(event) {\r
+                               var validator = $.data(this[0].form, "validator"),\r
+                                       eventType = "on" + event.type.replace(/^validate/, "");\r
+                               validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);\r
+                       }\r
+                       $(this.currentForm)\r
+                              .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +\r
+                                               "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +\r
+                                               "[type='email'], [type='datetime'], [type='date'], [type='month'], " +\r
+                                               "[type='week'], [type='time'], [type='datetime-local'], " +\r
+                                               "[type='range'], [type='color'] ",\r
+                                               "focusin focusout keyup", delegate)\r
+                               .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);\r
+\r
+                       if (this.settings.invalidHandler)\r
+                               $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/form\r
+               form: function() {\r
+                       this.checkForm();\r
+                       $.extend(this.submitted, this.errorMap);\r
+                       this.invalid = $.extend({}, this.errorMap);\r
+                       if (!this.valid())\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                       this.showErrors();\r
+                       return this.valid();\r
+               },\r
+\r
+               // 원본소스\r
+               /*\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               this.check( elements[i] );\r
+                       }\r
+                       return this.valid();\r
+               },\r
+               */\r
+\r
+               // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경\r
+               checkForm: function() {\r
+                       this.prepareForm();\r
+                       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\r
+                               if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {\r
+                                       for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {\r
+                                               this.check( this.findByName( elements[i].name )[cnt] );\r
+                                       }\r
+                               } else {\r
+                                       this.check( elements[i] );\r
+                               }\r
+                       }\r
+                       return this.valid();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/element\r
+               element: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+                       this.lastElement = element;\r
+                       this.prepareElement( element );\r
+                       this.currentElements = $(element);\r
+                       var result = this.check( element );\r
+                       if ( result ) {\r
+                               delete this.invalid[element.name];\r
+                       } else {\r
+                               this.invalid[element.name] = true;\r
+                       }\r
+                       if ( !this.numberOfInvalids() ) {\r
+                               // Hide error containers on last error\r
+                               this.toHide = this.toHide.add( this.containers );\r
+                       }\r
+                       this.showErrors();\r
+                       return result;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/showErrors\r
+               showErrors: function(errors) {\r
+                       if(errors) {\r
+                               // add items to error list and map\r
+                               $.extend( this.errorMap, errors );\r
+                               this.errorList = [];\r
+                               for ( var name in errors ) {\r
+                                       this.errorList.push({\r
+                                               message: errors[name],\r
+                                               element: this.findByName(name)[0]\r
+                                       });\r
+                               }\r
+                               // remove items from success list\r
+                               this.successList = $.grep( this.successList, function(element) {\r
+                                       return !(element.name in errors);\r
+                               });\r
+                       }\r
+                       this.settings.showErrors\r
+                               ? this.settings.showErrors.call( this, this.errorMap, this.errorList )\r
+                               : this.defaultShowErrors();\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Validator/resetForm\r
+               resetForm: function() {\r
+                       if ( $.fn.resetForm )\r
+                               $( this.currentForm ).resetForm();\r
+                       this.submitted = {};\r
+                       this.lastElement = null;\r
+                       this.prepareForm();\r
+                       this.hideErrors();\r
+                       this.elements().removeClass( this.settings.errorClass );\r
+               },\r
+\r
+               numberOfInvalids: function() {\r
+                       return this.objectLength(this.invalid);\r
+               },\r
+\r
+               objectLength: function( obj ) {\r
+                       var count = 0;\r
+                       for ( var i in obj )\r
+                               count++;\r
+                       return count;\r
+               },\r
+\r
+               hideErrors: function() {\r
+                       this.addWrapper( this.toHide ).hide();\r
+               },\r
+\r
+               valid: function() {\r
+                       return this.size() == 0;\r
+               },\r
+\r
+               size: function() {\r
+                       return this.errorList.length;\r
+               },\r
+\r
+               focusInvalid: function() {\r
+                       if( this.settings.focusInvalid ) {\r
+                               try {\r
+                                       $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])\r
+                                       .filter(":visible")\r
+                                       .focus()\r
+                                       // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find\r
+                                       .trigger("focusin");\r
+                               } catch(e) {\r
+                                       // ignore IE throwing errors when focusing hidden elements\r
+                               }\r
+                       }\r
+               },\r
+\r
+               findLastActive: function() {\r
+                       var lastActive = this.lastActive;\r
+                       return lastActive && $.grep(this.errorList, function(n) {\r
+                               return n.element.name == lastActive.name;\r
+                       }).length == 1 && lastActive;\r
+               },\r
+\r
+               elements: function() {\r
+                       var validator = this,\r
+                               rulesCache = {};\r
+\r
+                       // select all valid inputs inside the form (no submit or reset buttons)\r
+                       return $(this.currentForm)\r
+                       .find("input, select, textarea")\r
+                       .not(":submit, :reset, :image, [disabled]")\r
+                       .not( this.settings.ignore )\r
+                       .filter(function() {\r
+                               !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);\r
+\r
+                               // select only the first element for each name, and only those with rules specified\r
+                               if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )\r
+                                       return false;\r
+\r
+                               rulesCache[this.name] = true;\r
+                               return true;\r
+                       });\r
+               },\r
+\r
+               clean: function( selector ) {\r
+                       return $( selector )[0];\r
+               },\r
+\r
+               errors: function() {\r
+                       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );\r
+               },\r
+\r
+               reset: function() {\r
+                       this.successList = [];\r
+                       this.errorList = [];\r
+                       this.errorMap = {};\r
+                       this.toShow = $([]);\r
+                       this.toHide = $([]);\r
+                       this.currentElements = $([]);\r
+               },\r
+\r
+               prepareForm: function() {\r
+                       this.reset();\r
+                       this.toHide = this.errors().add( this.containers );\r
+               },\r
+\r
+               prepareElement: function( element ) {\r
+                       this.reset();\r
+                       this.toHide = this.errorsFor(element);\r
+               },\r
+\r
+               check: function( element ) {\r
+                       element = this.validationTargetFor( this.clean( element ) );\r
+\r
+                       var rules = $(element).rules();\r
+                       var dependencyMismatch = false;\r
+                       for (var method in rules ) {\r
+                               var rule = { method: method, parameters: rules[method] };\r
+                               try {\r
+                                       var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );\r
+\r
+                                       // if a method indicates that the field is optional and therefore valid,\r
+                                       // don't mark it as valid when there are no other rules\r
+                                       if ( result == "dependency-mismatch" ) {\r
+                                               dependencyMismatch = true;\r
+                                               continue;\r
+                                       }\r
+                                       dependencyMismatch = false;\r
+\r
+                                       if ( result == "pending" ) {\r
+                                               this.toHide = this.toHide.not( this.errorsFor(element) );\r
+                                               return;\r
+                                       }\r
+\r
+                                       if( !result ) {\r
+                                               this.formatAndAdd( element, rule );\r
+                                               return false;\r
+                                       }\r
+                               } catch(e) {\r
+                                       this.settings.debug && window.console && console.log("exception occured when checking element " + element.id\r
+                                                + ", check the '" + rule.method + "' method", e);\r
+                                       throw e;\r
+                               }\r
+                       }\r
+                       if (dependencyMismatch)\r
+                               return;\r
+                       if ( this.objectLength(rules) )\r
+                               this.successList.push(element);\r
+                       return true;\r
+               },\r
+\r
+               // return the custom message for the given element and validation method\r
+               // specified in the element's "messages" metadata\r
+               customMetaMessage: function(element, method) {\r
+                       if (!$.metadata)\r
+                               return;\r
+\r
+                       var meta = this.settings.meta\r
+                               ? $(element).metadata()[this.settings.meta]\r
+                               : $(element).metadata();\r
+\r
+                       return meta && meta.messages && meta.messages[method];\r
+               },\r
+\r
+               // return the custom message for the given element name and validation method\r
+               customMessage: function( name, method ) {\r
+                       var m = this.settings.messages[name];\r
+                       return m && (m.constructor == String\r
+                               ? m\r
+                               : m[method]);\r
+               },\r
+\r
+               // return the first defined argument, allowing empty strings\r
+               findDefined: function() {\r
+                       for(var i = 0; i < arguments.length; i++) {\r
+                               if (arguments[i] !== undefined)\r
+                                       return arguments[i];\r
+                       }\r
+                       return undefined;\r
+               },\r
+\r
+               defaultMessage: function( element, method) {\r
+                       return this.findDefined(\r
+                               this.customMessage( element.name, method ),\r
+                               this.customMetaMessage( element, method ),\r
+                               // title is never undefined, so handle empty string as undefined\r
+                               !this.settings.ignoreTitle && element.title || undefined,\r
+                               $.validator.messages[method],\r
+                               "<strong>Warning: No message defined for " + element.name + "</strong>"\r
+                       );\r
+               },\r
+\r
+               formatAndAdd: function( element, rule ) {\r
+                       var message = this.defaultMessage( element, rule.method ),\r
+                               theregex = /\$?\{(\d+)\}/g;\r
+                       if ( typeof message == "function" ) {\r
+                               message = message.call(this, rule.parameters, element);\r
+                       } else if (theregex.test(message)) {\r
+                               message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);\r
+                       }\r
+                       this.errorList.push({\r
+                               message: message,\r
+                               element: element\r
+                       });\r
+\r
+                       this.errorMap[element.name] = message;\r
+                       this.submitted[element.name] = message;\r
+               },\r
+\r
+               addWrapper: function(toToggle) {\r
+                       if ( this.settings.wrapper )\r
+                               toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );\r
+                       return toToggle;\r
+               },\r
+\r
+               defaultShowErrors: function() {\r
+                       for ( var i = 0; this.errorList[i]; i++ ) {\r
+                               var error = this.errorList[i];\r
+                               this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );\r
+                               this.showLabel( error.element, error.message );\r
+                       }\r
+                       if( this.errorList.length ) {\r
+                               this.toShow = this.toShow.add( this.containers );\r
+                       }\r
+                       if (this.settings.success) {\r
+                               for ( var i = 0; this.successList[i]; i++ ) {\r
+                                       this.showLabel( this.successList[i] );\r
+                               }\r
+                       }\r
+                       if (this.settings.unhighlight) {\r
+                               for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {\r
+                                       this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );\r
+                               }\r
+                       }\r
+                       this.toHide = this.toHide.not( this.toShow );\r
+                       this.hideErrors();\r
+                       this.addWrapper( this.toShow ).show();\r
+               },\r
+\r
+               validElements: function() {\r
+                       return this.currentElements.not(this.invalidElements());\r
+               },\r
+\r
+               invalidElements: function() {\r
+                       return $(this.errorList).map(function() {\r
+                               return this.element;\r
+                       });\r
+               },\r
+\r
+               showLabel: function(element, message) {\r
+                       var label = this.errorsFor( element );\r
+                       if ( label.length ) {\r
+                               // refresh error/success class\r
+                               label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );\r
+\r
+                               // check if we have a generated label, replace the message then\r
+                               label.attr("generated") && label.html(message);\r
+                       } else {\r
+                               // create label\r
+                               label = $("<" + this.settings.errorElement + "/>")\r
+                                       .attr({"for":  this.idOrName(element), generated: true})\r
+                                       .addClass(this.settings.errorClass)\r
+                                       .html(message || "");\r
+                               if ( this.settings.wrapper ) {\r
+                                       // make sure the element is visible, even in IE\r
+                                       // actually showing the wrapped element is handled elsewhere\r
+                                       label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();\r
+                               }\r
+                               if ( !this.labelContainer.append(label).length )\r
+                                       this.settings.errorPlacement\r
+                                               ? this.settings.errorPlacement(label, $(element) )\r
+                                               : label.insertAfter(element);\r
+                       }\r
+                       if ( !message && this.settings.success ) {\r
+                               label.text("");\r
+                               typeof this.settings.success == "string"\r
+                                       ? label.addClass( this.settings.success )\r
+                                       : this.settings.success( label );\r
+                       }\r
+                       this.toShow = this.toShow.add(label);\r
+               },\r
+\r
+               errorsFor: function(element) {\r
+                       var name = this.idOrName(element);\r
+               return this.errors().filter(function() {\r
+                               return $(this).attr('for') == name;\r
+                       });\r
+               },\r
+\r
+               idOrName: function(element) {\r
+                       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);\r
+               },\r
+\r
+               validationTargetFor: function(element) {\r
+                       // if radio/checkbox, validate first element in group instead\r
+                       if (this.checkable(element)) {\r
+                               element = this.findByName( element.name ).not(this.settings.ignore)[0];\r
+                       }\r
+                       return element;\r
+               },\r
+\r
+               checkable: function( element ) {\r
+                       return /radio|checkbox/i.test(element.type);\r
+               },\r
+\r
+               findByName: function( name ) {\r
+                       // select by name and filter by form for performance over form.find("[name=...]")\r
+                       var form = this.currentForm;\r
+                       return $(document.getElementsByName(name)).map(function(index, element) {\r
+                               return element.form == form && element.name == name && element  || null;\r
+                       });\r
+               },\r
+\r
+               getLength: function(value, element) {\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               return $("option:selected", element).length;\r
+                       case 'input':\r
+                               if( this.checkable( element) )\r
+                                       return this.findByName(element.name).filter(':checked').length;\r
+                       }\r
+                       return value.length;\r
+               },\r
+\r
+               depend: function(param, element) {\r
+                       return this.dependTypes[typeof param]\r
+                               ? this.dependTypes[typeof param](param, element)\r
+                               : true;\r
+               },\r
+\r
+               dependTypes: {\r
+                       "boolean": function(param, element) {\r
+                               return param;\r
+                       },\r
+                       "string": function(param, element) {\r
+                               return !!$(param, element.form).length;\r
+                       },\r
+                       "function": function(param, element) {\r
+                               return param(element);\r
+                       }\r
+               },\r
+\r
+               optional: function(element) {\r
+                       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";\r
+               },\r
+\r
+               startRequest: function(element) {\r
+                       if (!this.pending[element.name]) {\r
+                               this.pendingRequest++;\r
+                               this.pending[element.name] = true;\r
+                       }\r
+               },\r
+\r
+               stopRequest: function(element, valid) {\r
+                       this.pendingRequest--;\r
+                       // sometimes synchronization fails, make sure pendingRequest is never < 0\r
+                       if (this.pendingRequest < 0)\r
+                               this.pendingRequest = 0;\r
+                       delete this.pending[element.name];\r
+                       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {\r
+                               $(this.currentForm).submit();\r
+                               this.formSubmitted = false;\r
+                       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {\r
+                               $(this.currentForm).triggerHandler("invalid-form", [this]);\r
+                               this.formSubmitted = false;\r
+                       }\r
+               },\r
+\r
+               previousValue: function(element) {\r
+                       return $.data(element, "previousValue") || $.data(element, "previousValue", {\r
+                               old: null,\r
+                               valid: true,\r
+                               message: this.defaultMessage( element, "remote" )\r
+                       });\r
+               }\r
+\r
+       },\r
+\r
+       classRuleSettings: {\r
+               required: {required: true},\r
+               email: {email: true},\r
+               url: {url: true},\r
+               date: {date: true},\r
+               dateISO: {dateISO: true},\r
+               dateDE: {dateDE: true},\r
+               number: {number: true},\r
+               numberDE: {numberDE: true},\r
+               digits: {digits: true},\r
+               creditcard: {creditcard: true}\r
+       },\r
+\r
+       addClassRules: function(className, rules) {\r
+               className.constructor == String ?\r
+                       this.classRuleSettings[className] = rules :\r
+                       $.extend(this.classRuleSettings, className);\r
+       },\r
+\r
+       classRules: function(element) {\r
+               var rules = {};\r
+               var classes = $(element).attr('class');\r
+               classes && $.each(classes.split(' '), function() {\r
+                       if (this in $.validator.classRuleSettings) {\r
+                               $.extend(rules, $.validator.classRuleSettings[this]);\r
+                       }\r
+               });\r
+               return rules;\r
+       },\r
+\r
+       attributeRules: function(element) {\r
+               var rules = {};\r
+               var $element = $(element);\r
+\r
+               for (var method in $.validator.methods) {\r
+                       var value;\r
+                       // If .prop exists (jQuery >= 1.6), use it to get true/false for required\r
+                       if (method === 'required' && typeof $.fn.prop === 'function') {\r
+                               value = $element.prop(method);\r
+                       } else {\r
+                               value = $element.attr(method);\r
+                       }\r
+                       if (value) {\r
+                               rules[method] = value;\r
+                       } else if ($element[0].getAttribute("type") === method) {\r
+                               rules[method] = true;\r
+                       }\r
+               }\r
+\r
+               // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs\r
+               if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {\r
+                       delete rules.maxlength;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       metadataRules: function(element) {\r
+               if (!$.metadata) return {};\r
+\r
+               var meta = $.data(element.form, 'validator').settings.meta;\r
+               return meta ?\r
+                       $(element).metadata()[meta] :\r
+                       $(element).metadata();\r
+       },\r
+\r
+       staticRules: function(element) {\r
+               var rules = {};\r
+               var validator = $.data(element.form, 'validator');\r
+               if (validator.settings.rules) {\r
+                       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};\r
+               }\r
+               return rules;\r
+       },\r
+\r
+       normalizeRules: function(rules, element) {\r
+               // handle dependency check\r
+               $.each(rules, function(prop, val) {\r
+                       // ignore rule when param is explicitly false, eg. required:false\r
+                       if (val === false) {\r
+                               delete rules[prop];\r
+                               return;\r
+                       }\r
+                       if (val.param || val.depends) {\r
+                               var keepRule = true;\r
+                               switch (typeof val.depends) {\r
+                                       case "string":\r
+                                               keepRule = !!$(val.depends, element.form).length;\r
+                                               break;\r
+                                       case "function":\r
+                                               keepRule = val.depends.call(element, element);\r
+                                               break;\r
+                               }\r
+                               if (keepRule) {\r
+                                       rules[prop] = val.param !== undefined ? val.param : true;\r
+                               } else {\r
+                                       delete rules[prop];\r
+                               }\r
+                       }\r
+               });\r
+\r
+               // evaluate parameters\r
+               $.each(rules, function(rule, parameter) {\r
+                       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;\r
+               });\r
+\r
+               // clean number parameters\r
+               $.each(['minlength', 'maxlength', 'min', 'max'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = Number(rules[this]);\r
+                       }\r
+               });\r
+               $.each(['rangelength', 'range'], function() {\r
+                       if (rules[this]) {\r
+                               rules[this] = [Number(rules[this][0]), Number(rules[this][1])];\r
+                       }\r
+               });\r
+\r
+               if ($.validator.autoCreateRanges) {\r
+                       // auto-create ranges\r
+                       if (rules.min && rules.max) {\r
+                               rules.range = [rules.min, rules.max];\r
+                               delete rules.min;\r
+                               delete rules.max;\r
+                       }\r
+                       if (rules.minlength && rules.maxlength) {\r
+                               rules.rangelength = [rules.minlength, rules.maxlength];\r
+                               delete rules.minlength;\r
+                               delete rules.maxlength;\r
+                       }\r
+               }\r
+\r
+               // To support custom messages in metadata ignore rule methods titled "messages"\r
+               if (rules.messages) {\r
+                       delete rules.messages;\r
+               }\r
+\r
+               return rules;\r
+       },\r
+\r
+       // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}\r
+       normalizeRule: function(data) {\r
+               if( typeof data == "string" ) {\r
+                       var transformed = {};\r
+                       $.each(data.split(/\s/), function() {\r
+                               transformed[this] = true;\r
+                       });\r
+                       data = transformed;\r
+               }\r
+               return data;\r
+       },\r
+\r
+       // http://docs.jquery.com/Plugins/Validation/Validator/addMethod\r
+       addMethod: function(name, method, message) {\r
+               $.validator.methods[name] = method;\r
+               $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];\r
+               if (method.length < 3) {\r
+                       $.validator.addClassRules(name, $.validator.normalizeRule(name));\r
+               }\r
+       },\r
+\r
+       methods: {\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/required\r
+               required: function(value, element, param) {\r
+                       // check if dependency is met\r
+                       if ( !this.depend(param, element) )\r
+                               return "dependency-mismatch";\r
+                       switch( element.nodeName.toLowerCase() ) {\r
+                       case 'select':\r
+                               // could be an array for select-multiple or a string, both are fine this way\r
+                               var val = $(element).val();\r
+                               return val && val.length > 0;\r
+                       case 'input':\r
+                               if ( this.checkable(element) )\r
+                                       return this.getLength(value, element) > 0;\r
+                       default:\r
+                               return $.trim(value).length > 0;\r
+                       }\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/remote\r
+               remote: function(value, element, param) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+\r
+                       var previous = this.previousValue(element);\r
+                       if (!this.settings.messages[element.name] )\r
+                               this.settings.messages[element.name] = {};\r
+                       previous.originalMessage = this.settings.messages[element.name].remote;\r
+                       this.settings.messages[element.name].remote = previous.message;\r
+\r
+                       param = typeof param == "string" && {url:param} || param;\r
+\r
+                       if ( this.pending[element.name] ) {\r
+                               return "pending";\r
+                       }\r
+                       if ( previous.old === value ) {\r
+                               return previous.valid;\r
+                       }\r
+\r
+                       previous.old = value;\r
+                       var validator = this;\r
+                       this.startRequest(element);\r
+                       var data = {};\r
+                       data[element.name] = value;\r
+                       $.ajax($.extend(true, {\r
+                               url: param,\r
+                               mode: "abort",\r
+                               port: "validate" + element.name,\r
+                               dataType: "json",\r
+                               data: data,\r
+                               success: function(response) {\r
+                                       validator.settings.messages[element.name].remote = previous.originalMessage;\r
+                                       var valid = response === true;\r
+                                       if ( valid ) {\r
+                                               var submitted = validator.formSubmitted;\r
+                                               validator.prepareElement(element);\r
+                                               validator.formSubmitted = submitted;\r
+                                               validator.successList.push(element);\r
+                                               validator.showErrors();\r
+                                       } else {\r
+                                               var errors = {};\r
+                                               var message = response || validator.defaultMessage( element, "remote" );\r
+                                               errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;\r
+                                               validator.showErrors(errors);\r
+                                       }\r
+                                       previous.valid = valid;\r
+                                       validator.stopRequest(element, valid);\r
+                               }\r
+                       }, param));\r
+                       return "pending";\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/minlength\r
+               minlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/maxlength\r
+               maxlength: function(value, element, param) {\r
+                       return this.optional(element) || this.getLength($.trim(value), element) <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/rangelength\r
+               rangelength: function(value, element, param) {\r
+                       var length = this.getLength($.trim(value), element);\r
+                       return this.optional(element) || ( length >= param[0] && length <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/min\r
+               min: function( value, element, param ) {\r
+                       return this.optional(element) || value >= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/max\r
+               max: function( value, element, param ) {\r
+                       return this.optional(element) || value <= param;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/range\r
+               range: function( value, element, param ) {\r
+                       return this.optional(element) || ( value >= param[0] && value <= param[1] );\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/email\r
+               email: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/\r
+                       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/url\r
+               url: function(value, element) {\r
+                       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/\r
+                       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/date\r
+               date: function(value, element) {\r
+                       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/dateISO\r
+               dateISO: function(value, element) {\r
+                       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/number\r
+               number: function(value, element) {\r
+                       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/digits\r
+               digits: function(value, element) {\r
+                       return this.optional(element) || /^\d+$/.test(value);\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/creditcard\r
+               // based on http://en.wikipedia.org/wiki/Luhn\r
+               creditcard: function(value, element) {\r
+                       if ( this.optional(element) )\r
+                               return "dependency-mismatch";\r
+                       // accept only spaces, digits and dashes\r
+                       if (/[^0-9 -]+/.test(value))\r
+                               return false;\r
+                       var nCheck = 0,\r
+                               nDigit = 0,\r
+                               bEven = false;\r
+\r
+                       value = value.replace(/\D/g, "");\r
+\r
+                       for (var n = value.length - 1; n >= 0; n--) {\r
+                               var cDigit = value.charAt(n);\r
+                               var nDigit = parseInt(cDigit, 10);\r
+                               if (bEven) {\r
+                                       if ((nDigit *= 2) > 9)\r
+                                               nDigit -= 9;\r
+                               }\r
+                               nCheck += nDigit;\r
+                               bEven = !bEven;\r
+                       }\r
+\r
+                       return (nCheck % 10) == 0;\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/accept\r
+               accept: function(value, element, param) {\r
+                       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";\r
+                       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));\r
+               },\r
+\r
+               // http://docs.jquery.com/Plugins/Validation/Methods/equalTo\r
+               equalTo: function(value, element, param) {\r
+                       // bind to the blur event of the target in order to revalidate whenever the target field is updated\r
+                       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead\r
+                       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {\r
+                               $(element).valid();\r
+                       });\r
+                       return value == target.val();\r
+               }\r
+\r
+       }\r
+\r
+});\r
+\r
+// deprecated, use $.validator.format instead\r
+$.format = $.validator.format;\r
+\r
+})(jQuery);\r
+\r
+// ajax mode: abort\r
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});\r
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()\r
+;(function($) {\r
+       var pendingRequests = {};\r
+       // Use a prefilter if available (1.5+)\r
+       if ( $.ajaxPrefilter ) {\r
+               $.ajaxPrefilter(function(settings, _, xhr) {\r
+                       var port = settings.port;\r
+                       if (settings.mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               pendingRequests[port] = xhr;\r
+                       }\r
+               });\r
+       } else {\r
+               // Proxy ajax\r
+               var ajax = $.ajax;\r
+               $.ajax = function(settings) {\r
+                       var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,\r
+                               port = ( "port" in settings ? settings : $.ajaxSettings ).port;\r
+                       if (mode == "abort") {\r
+                               if ( pendingRequests[port] ) {\r
+                                       pendingRequests[port].abort();\r
+                               }\r
+                               return (pendingRequests[port] = ajax.apply(this, arguments));\r
+                       }\r
+                       return ajax.apply(this, arguments);\r
+               };\r
+       }\r
+})(jQuery);\r
+\r
+// provides cross-browser focusin and focusout events\r
+// IE has native support, in other browsers, use event caputuring (neither bubbles)\r
+\r
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation\r
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target\r
+;(function($) {\r
+       // only implement if not provided by jQuery core (since 1.4)\r
+       // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs\r
+       if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {\r
+               $.each({\r
+                       focus: 'focusin',\r
+                       blur: 'focusout'\r
+               }, function( original, fix ){\r
+                       $.event.special[fix] = {\r
+                               setup:function() {\r
+                                       this.addEventListener( original, handler, true );\r
+                               },\r
+                               teardown:function() {\r
+                                       this.removeEventListener( original, handler, true );\r
+                               },\r
+                               handler: function(e) {\r
+                                       arguments[0] = $.event.fix(e);\r
+                                       arguments[0].type = fix;\r
+                                       return $.event.handle.apply(this, arguments);\r
+                               }\r
+                       };\r
+                       function handler(e) {\r
+                               e = $.event.fix(e);\r
+                               e.type = fix;\r
+                               return $.event.handle.call(this, e);\r
+                       }\r
+               });\r
+       };\r
+       $.extend($.fn, {\r
+               validateDelegate: function(delegate, type, handler) {\r
+                       return this.bind(type, function(event) {\r
+                               var target = $(event.target);\r
+                               if (target.is(delegate)) {\r
+                                       return handler.apply(target, arguments);\r
+                               }\r
+                       });\r
+               }\r
+       });\r
+})(jQuery);\r
+\r
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)\r
+ * Licensed under the MIT License (LICENSE.txt).\r
+ *\r
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.\r
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.\r
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY\r
+ *\r
+ * Version: 3.0.6\r
+ * \r
+ * Requires: 1.2.2+\r
+ */\r
+\r
+(function($) {\r
+\r
+var types = ['DOMMouseScroll', 'mousewheel'];\r
+\r
+if ($.event.fixHooks) {\r
+    for ( var i=types.length; i; ) {\r
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;\r
+    }\r
+}\r
+\r
+$.event.special.mousewheel = {\r
+    setup: function() {\r
+        if ( this.addEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.addEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = handler;\r
+        }\r
+    },\r
+    \r
+    teardown: function() {\r
+        if ( this.removeEventListener ) {\r
+            for ( var i=types.length; i; ) {\r
+                this.removeEventListener( types[--i], handler, false );\r
+            }\r
+        } else {\r
+            this.onmousewheel = null;\r
+        }\r
+    }\r
+};\r
+\r
+$.fn.extend({\r
+    mousewheel: function(fn) {\r
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");\r
+    },\r
+    \r
+    unmousewheel: function(fn) {\r
+        return this.unbind("mousewheel", fn);\r
+    }\r
+});\r
+\r
+\r
+function handler(event) {\r
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;\r
+    event = $.event.fix(orgEvent);\r
+    event.type = "mousewheel";\r
+    \r
+    // Old school scrollwheel delta\r
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }\r
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }\r
+    \r
+    // New school multidimensional scroll (touchpads) deltas\r
+    deltaY = delta;\r
+    \r
+    // Gecko\r
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {\r
+        deltaY = 0;\r
+        deltaX = -1*delta;\r
+    }\r
+    \r
+    // Webkit\r
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }\r
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }\r
+    \r
+    // Add event and delta to the front of the arguments\r
+    args.unshift(event, delta, deltaX, deltaY);\r
+    \r
+    return ($.event.dispatch || $.event.handle).apply(this, args);\r
+}\r
+\r
+})(jQuery);\r
+\r
+/*\r
+ * jScrollPane - v2.0.0beta12 - 2012-07-24\r
+ * http://jscrollpane.kelvinluck.com/\r
+ *\r
+ * Copyright (c) 2010 Kelvin Luck\r
+ * Dual licensed under the MIT and GPL licenses.\r
+ */\r
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);\r
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)\r
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()\r
+})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/scripts/jquery.zclip.min.js b/org.tizen.ui.guides/html/scripts/jquery.zclip.min.js
new file mode 100755 (executable)
index 0000000..3548cc2
--- /dev/null
+++ b/org.tizen.ui.guides/html/scripts/jquery.zclip.min.js
@@ -0,0 +1,12 @@
+/*\r
+ * zClip :: jQuery ZeroClipboard v1.1.1\r
+ * http://steamdev.com/zclip\r
+ *\r
+ * Copyright 2011, SteamDev\r
+ * Released under the MIT license.\r
+ * http://www.opensource.org/licenses/mit-license.php\r
+ *\r
+ * Date: Wed Jun 01, 2011\r
+ */\r
+\r
+(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/scripts/navi.js b/org.tizen.ui.guides/html/scripts/navi.js
new file mode 100755 (executable)
index 0000000..e4569c3
--- /dev/null
+++ b/org.tizen.ui.guides/html/scripts/navi.js
@@ -0,0 +1,192 @@
+//<![CDATA[\r
+    var staticURL = "http://img-developer.samsung.com";\r
+       var sslCall = "";\r
+\r
+       if('' !== 'N') {\r
+               var locationStr = location.href;\r
+               if(locationStr.indexOf("https://") > -1) {\r
+                       location.href = "http://" + locationStr.substring(8);\r
+               }     \r
+    }\r
+\r
+//     if( typeof($) === function ) {\r
+               //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.\r
+               //? ??? ?? ?? ??? ?? ?? ???.\r
+//     }\r
+    $SD.pagination.alt = {\r
+               first:"go first",\r
+               prev:"go prev",\r
+               next:"go next",\r
+               last:"go last"\r
+    };\r
+    $(document).ready(function(){\r
+       var myVar;\r
+           topSearchInit();//top search ??\r
+           $('#searchTop').attr("autocomplete","off");\r
+           var searchingBoolean = false;\r
+           \r
+           var topSearchChange = function(){\r
+               \r
+               if (searchingBoolean) return;\r
+               \r
+                       var searchInput = $('#searchTop').val();\r
+                       \r
+                       if($('#searchTop').val() != ""){\r
+                               $("#topAutocomplete").hide();\r
+                               searchingBoolean = true;\r
+                               \r
+                               var jsonData = {\r
+                                               url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",\r
+                                               async : true,\r
+                                               data : { searchInput : searchInput},\r
+                                               success : function(data){\r
+                                                       if (searchInput == $('#searchTop').val()){\r
+                                                               var autoComplete = data.kwdNm;\r
+                                                               var tmpHtml = "";\r
+                                                               \r
+                                                               if (autoComplete.length > 0){\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                                       $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));\r
+                                                                       $.each(autoComplete, function(i, item){\r
+                                                                               var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");\r
+                                                                               a.data('keyword', item.kwdNm);\r
+                                                                               $('#topAutocompleteList').append($('<li><\/li>').html(a));\r
+                                                                       });\r
+                                                                       $("#topAutocompleteList").find("li").last().on("keydown", function(e) {\r
+                                                                               if(e.which == 9 && e.shiftKey) {\r
+                                                                                       return true;\r
+                                                                               }\r
+                                                                               \r
+                                                                               if(e.which == 9) {\r
+                                                                                       e.preventDefault();\r
+                                                                                       $('#topAutocomplete').hide();   \r
+                                                                                       setTimeout(function() {\r
+                                                                                               $("#searchTopBtn").focus();\r
+                                                                                       }, 1);\r
+                                                                               }\r
+                                                                               \r
+                                                                       });\r
+                                                                       $("#searchTopBtn").off("focusout", function(e) {});\r
+                                                                   $("#searchTopBtn").on("focusout", function(e) {\r
+                                                                               $('#topAutocomplete').hide();\r
+                                                                       });\r
+                                                               }else{\r
+                                                                       $('#topAutocomplete').children().remove();\r
+                                                               }\r
+                                                               if($('#searchTop').val() == ""){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                                       searchingBoolean = false;\r
+                                                                       return;\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               searchingBoolean = false;\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                               if (autoComplete.length == 0){\r
+                                                                       $("#topAutocomplete").hide();\r
+                                                               }else{\r
+                                                                       if (searchInput == $('#searchTop').val()){\r
+                                                                               $("#topAutocomplete").show();\r
+                                                                               var $searchList = $("#topAutocomplete").find('ul');\r
+                                                                               var hei = $searchList.outerHeight();\r
+                                                                               if(hei>180){\r
+                                                                                       $searchList.css({'height':'180px','overflow-y':'auto'});\r
+                                                                               }\r
+                                                                       }else{\r
+                                                                               searchingBoolean = false;\r
+                                                                               topSearchChange();\r
+                                                                       }\r
+                                                               }\r
+                                                       }else{\r
+                                                               searchingBoolean = false;\r
+                                                               topSearchChange();\r
+                                                       }\r
+                                               },\r
+                                               error : function() {searchingBoolean = false;}\r
+                                               \r
+                               };\r
+                               //setTimeout(function(){$SD.ajax.get(jsonData);},100);\r
+                               $SD.ajax.get(jsonData);\r
+                               searchingBoolean = false;\r
+                       }\r
+                       \r
+                       //console.log("/search/autoComplete.do end");\r
+                       //console.groupEnd();\r
+               };\r
+               \r
+               $('#searchTop').keyup(function(e){\r
+                       if($('#searchTop').val() == ""){\r
+                               $('#topAutocomplete').children().remove();\r
+                               $("#topAutocomplete").hide();\r
+                       }else{\r
+                               if(e.which == 13){\r
+                                       search();\r
+                               }else{\r
+                                       topSearchChange();\r
+                               }\r
+                       }\r
+               });\r
+               \r
+               var search = function(){\r
+                       if($.trim($('#searchTop').val()) == ""){\r
+                               alert('Search keyword is required.');\r
+                       }else{\r
+                               $('#topSearchForm').submit();\r
+                       }\r
+               };\r
+               $("#topAutocomplete").on('mousedown','ul li a', function(e){\r
+                       e.preventDefault();\r
+                       var keyword = $(this).data('keyword');\r
+                       $("#searchTop").val(keyword);\r
+                       $('#topSearchForm').submit();\r
+               });\r
+               \r
+               $("#topAutocomplete").on('keydown keypress','ul li a', function(e){\r
+                       if(e.which == 13) {\r
+                               e.preventDefault();\r
+                               var keyword = $(this).data('keyword');\r
+                               $("#searchTop").val(keyword);\r
+                               $('#topSearchForm').submit();                   \r
+                       }\r
+               });\r
+               \r
+               $('#searchTopBtn').click(function(e){\r
+                       search();       \r
+               });  \r
+    });\r
+    \r
+    function topSearchEnter(){\r
+       if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){\r
+               alert('Search keyword is required.');\r
+               return false;\r
+       }else{\r
+               return true;\r
+       }\r
+    }\r
+\r
+/* Tracking Code TOTAL */\r
+               var _gaq = _gaq || [];\r
+               var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';\r
+               _gaq.push(['_require', 'inpage_linkid', pluginUrl]);\r
+               _gaq.push(['_setAccount', 'UA-6892706-3']);\r
+               _gaq.push(['_setDomainName', 'samsung.com']);\r
+               _gaq.push(['_setAllowLinker', true]);\r
+               _gaq.push(['_trackPageview']);\r
+               (function() {\r
+                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+               })();\r
+       \r
+               <!--// Tracking Code 1 -->\r
+                       var _gaq = _gaq || [];\r
+                       _gaq.push(['_setAccount', 'UA-6892706-4']);\r
+                       _gaq.push(['_trackPageview']);\r
+                       (function() {\r
+                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+                       })();\r
diff --git a/org.tizen.ui.guides/html/scripts/search.js b/org.tizen.ui.guides/html/scripts/search.js
new file mode 100755 (executable)
index 0000000..a67a795
--- /dev/null
+++ b/org.tizen.ui.guides/html/scripts/search.js
@@ -0,0 +1,168 @@
+/** \r
+ * [PAGE] Search Result\r
+ * date : 20120810\r
+ * author : 전종호\r
+ */\r
+function searchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#autocomplete").hide();\r
+\r
+       //$("#searchInput").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchInput").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {\r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchInput" ).focusin( function() {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $("#autocomplete").bind("mouseleave",function(){\r
+               $(this).hide();\r
+               $("#btnDropdown").removeClass("dropdownoff");\r
+               $("#btnDropdown").addClass("dropdown");         \r
+       });\r
+\r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       });\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchInput").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       //$(".autocomplete").css("visibility", "visible");\r
+                       $("#autocomplete").show();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdown");\r
+                       $("#btnDropdown").addClass("dropdownoff");\r
+               }\r
+               else{\r
+                       //$(".autocomplete").css("visibility", "hidden");\r
+                       $("#autocomplete").hide();\r
+                       \r
+                       $("#btnDropdown").removeClass("dropdownoff");\r
+                       $("#btnDropdown").addClass("dropdown");\r
+               }\r
+       }\r
+}\r
+\r
+\r
+\r
+function topSearchInit()\r
+{\r
+       var focusTarget = "input";\r
+\r
+       //$("#searchTop").bind("keydown", checkSearchText);\r
+       \r
+       $("#searchTop").focusout(function() {\r
+               if( focusTarget == "dropdown" )\r
+               {\r
+                       return false;\r
+               }\r
+               else\r
+               {       \r
+                       //toggleClass( false );\r
+               }\r
+       });\r
+       \r
+       $( "#searchTop" ).focusin( function()   {\r
+               focusTarget = "input";\r
+       });\r
+\r
+       $("#btnDropdown").mousedown( function(){\r
+               focusTarget = "dropdown";\r
+       });\r
+\r
+       $(".autocomplete ul li").focusin( function() {\r
+               //\r
+       });\r
+       \r
+       $(".autocomplete ul li:last-child").focusout( function() {\r
+               toggleClass( false );\r
+       })\r
+       \r
+       $("#btnDropdown").click( function(){\r
+               //alert("btn click");\r
+               if( $("#searchInput").val().length == 0 ){ \r
+                       return false;\r
+               }\r
+               else{\r
+                       if( $("#btnDropdown").hasClass("dropdown") ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );\r
+                       }\r
+               }\r
+\r
+               return false;\r
+       });\r
+\r
+       function checkSearchText(){\r
+               setTimeout(function(){\r
+                       var txt = $("#searchTop").val();\r
+\r
+                       if( txt.length > 0 ){\r
+                               toggleClass( true );\r
+                       }\r
+                       else{\r
+                               toggleClass( false );   \r
+                       }\r
+               }, 1);\r
+       }\r
+\r
+       function toggleClass( bo ){\r
+               if( bo ){\r
+                       $(".topAutocomplete").css("visibility", "visible");\r
+               }else{\r
+                       $(".topAutocomplete").css("visibility", "hidden");\r
+                       $("#topAutocomplete").hide();\r
+               }\r
+       }\r
+}\r
diff --git a/org.tizen.ui.guides/html/scripts/showhide.js b/org.tizen.ui.guides/html/scripts/showhide.js
new file mode 100755 (executable)
index 0000000..b882d14
--- /dev/null
+++ b/org.tizen.ui.guides/html/scripts/showhide.js
@@ -0,0 +1,204 @@
+/*all Show Hide devicespecs List*/\r
+if($('div#contents').find('.devicespecs-util').length){\r
+var self = $('div#contents').find('.devicespecs-util');\r
+\r
+$('.showA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+var me = $(this);\r
+var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+if ( !me.next().is(':visible') ){\r
+       me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));\r
+       me.find('em').text('Hide');\r
+       me.next().show();\r
+}\r
+});\r
+return false;\r
+})\r
+$('.hideA', self).bind ("click", function (){\r
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){\r
+\r
+       var me = $(this);\r
+       var idx = $('.devicespecifications .devicespec-tit').index(this);\r
+\r
+       if ( me.next().is(':visible') ){\r
+               me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));\r
+               me.find('em').text('Show');\r
+               me.next().hide();\r
+       }\r
+                                       \r
+});\r
+return false;\r
+})\r
+}      \r
+\r
+/*toggle devicespecs List*/\r
+if($('div#contents').find('.devicespec-tit').length){\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+$('a', self).bind ("click", function(){\r
+       var idx = $('.devicespec-tit a').index(this);\r
+\r
+       if ( $(this).parent().parent().next().is(':visible') ){\r
+               $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));\r
+\r
+               self.find('em').text('Show');\r
+               self.next().hide();\r
+\r
+               return false;\r
+       }else{\r
+               $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));\r
+               self.find('em').text('Hide');\r
+\r
+               self.next().show();\r
+\r
+               return false;\r
+       }\r
+\r
+});\r
+\r
+});\r
+}\r
+\r
+$('ul.devicespecifications li div.devicespec-con').hide();\r
+\r
+\r
+$('.devicespec-tit').each(function(){\r
+var self = $(this);\r
+var arrow =  $('a', self);\r
+\r
+if(self.next().is(':visible')){\r
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));\r
+self.find('em').text('Hide');\r
+}else{\r
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));\r
+self.find('em').text('Show');\r
+}\r
+\r
+});\r
+\r
+$(document).ready(function(){\r
+       var openheading = function(target) {\r
+               var origin = $(target);\r
+               target = origin.closest('.devicespec-con');\r
+               if (!(target.length > 0)) {\r
+                       target = origin.closest('.devicespec-tit');\r
+               }\r
+               if (target.length > 0) {\r
+                       if (!$('.devicespec-con', target.parent()).is(":visible")) {\r
+                               $("div.devicespec-tit a.bt-arr", target.parent()).click();\r
+                       }\r
+               }\r
+\r
+               $(window.location.hash)[0].scrollIntoView();\r
+       };\r
+\r
+       $(".opensection").click(function(){\r
+               var target = $($(this).attr("href"));//.closest('.devicespec-con');\r
+               openheading(target);\r
+       });\r
+\r
+       if (window.location.hash) {\r
+               var target = $(window.location.hash);\r
+               openheading(target);\r
+               //$(target).focus(); //uncomment if fail to work\r
+       }\r
+\r
+       var isScrolledIntoView = function(elem)\r
+       {\r
+               var docViewTop = $('#contents').scrollTop();\r
+               var docViewBottom = docViewTop + $('#contents').height();\r
+\r
+               var elemTop = $(elem).offset().top;\r
+               var elemBottom = elemTop + $(elem).height();\r
+\r
+               return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)\r
+                 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );\r
+       }\r
+\r
+       $('#contents').scroll();\r
+\r
+       var checkBreadCrumbs = function() {\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+                       $('.help_breadcrumbs').hide();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+                       $('.help_breadcrumbs').show();\r
+               }\r
+               $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));\r
+       }       \r
+\r
+       var updateH = function(){\r
+               checkBreadCrumbs();\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));\r
+\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+\r
+               if ($('a.top').is(':visible'))\r
+               {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);\r
+               } else {\r
+                       $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);\r
+               }\r
+               $('#toc').css('height', $('#toc').css('height') - 5);\r
+\r
+               $('#toc_border').height($('#toc').outerHeight() + 5);\r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+               //$('#toc').css('top', $('#toc_border').position()['top'] + 2);\r
+               $('#toc').css('top', $('#toc_border').position()['top'] + 7);\r
+               $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);\r
+               //$('#toc').css('width', $('#toc_border').width() - 40);\r
+               $('#toc').css('width', $('#toc_border').width() - 49);\r
+       };\r
+\r
+       var updateH_no_toc = function() {\r
+               checkBreadCrumbs();\r
+               if (!isScrolledIntoView($('#contents .content h1')))\r
+               {\r
+                       $('a.top.sms').show();\r
+               } else {\r
+                       $('a.top.sms').hide();\r
+               }\r
+               $('a.top').css('bottom', $('#footer').outerHeight());\r
+               \r
+               $('#container #contents').css('margin-bottom', $('#footer').outerHeight());\r
+       }\r
+\r
+       if ($('body').hasClass('no-toc')) {\r
+               updateH = updateH_no_toc;\r
+       }\r
+       $(window).resize(updateH);\r
+       $('#contents').scroll(updateH);\r
+       $(window).resize();\r
+       \r
+       $('a.top').click(function(){$('#contents').scrollTop(0)});\r
+\r
+       var hashchanged = function() {\r
+               if (window.location.hash.length) {\r
+                       openheading(window.location.hash);\r
+                       //$(window.location.hash).scrollTo();\r
+                       $(window.location.hash)[0].scrollIntoView();\r
+\r
+               } else \r
+               {\r
+                       $('#contents').scrollTop(0);\r
+               }\r
+       };\r
+\r
+       if (("onhashchange" in window) && !($.browser.msie)) { \r
+               $(window).bind( 'hashchange',hashchanged);\r
+       }\r
+       else { \r
+               var prevHash = window.location.hash;\r
+               window.setInterval(function () {\r
+                       if (window.location.hash != prevHash) {\r
+                               hashchanged();\r
+                               prevHash = window.location.hash;\r
+                       }\r
+               }, 100);\r
+       }\r
+});\r
diff --git a/org.tizen.ui.guides/html/scripts/snippet.js b/org.tizen.ui.guides/html/scripts/snippet.js
new file mode 100755 (executable)
index 0000000..777e9ae
--- /dev/null
+++ b/org.tizen.ui.guides/html/scripts/snippet.js
@@ -0,0 +1,1478 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+      "static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype," +
+      "dynamic_cast,explicit,export,friend,inline,late_check," +
+      "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+      "template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,boolean,extends,final,finally,implements,import," +
+      "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+      "transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+      "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+      "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like.  Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
+      }
+    }
+  
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
+  
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
+  
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+        ch = '\\' + ch;
+      }
+      return ch;
+    }
+  
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var groups = [];
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          groups.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
+          } else {
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            }
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            }
+          }
+        }
+      }
+  
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [NaN, NaN];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+      out.push.apply(out, groups);
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
+        }
+      }
+      out.push(']');
+      return out.join('');
+    }
+  
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/emd of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            capturedGroups[decimalValue] = -1;
+          }
+        }
+      }
+  
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
+      }
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (capturedGroups[groupIndex] === undefined) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[groupIndex];
+          }
+        }
+      }
+  
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+      }
+  
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
+  
+      return parts.join('');
+    }
+  
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
+  
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                 1         2
+   *   //       012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName;
+          if ('BR' === nodeName || 'LI' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+        case 3: case 4:  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
+          }
+          break;
+      }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
+          }
+        }
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
+        }
+      }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
+        } else {
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
+            }
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
+            }
+          }
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
+          }
+
+          if (!isEmbedded) { styleCache[token] = style; }
+        }
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
+        }
+      }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
+    }
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+    }
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+              
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+//          shortcutStylePatterns.push(
+//              [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+//               null, '#']);
+        }
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+      }
+    }
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+    }
+    if (options['regexLiterals']) {
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C]'
+          // escape sequences (\x5C),
+          +    '|\\x5C[\\s\\S]'
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.  See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   */
+  function numberLines(node, opt_startLineNum) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+  
+    var document = node.ownerDocument;
+  
+    var whitespace;
+    if (node.currentStyle) {
+      whitespace = node.currentStyle.whiteSpace;
+    } else if (window.getComputedStyle) {
+      whitespace = document.defaultView.getComputedStyle(node, null)
+          .getPropertyValue('white-space');
+    }
+    // If it's preformatted, then we need to split lines on line breaks
+    // in addition to <BR>s.
+    var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+  
+    var li = document.createElement('LI');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('BR' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+  
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+  
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+  
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+  
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+  
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+  
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
+  
+    var ol = document.createElement('OL');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
+  
+    node.appendChild(ol);
+  }
+
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE = /\bMSIE\b/.test(navigator.userAgent);
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
+  
+    nDecorations = decorations.length = decPos;
+  
+    var decoration = null;
+    while (spanIndex < nSpans) {
+      var spanStart = spans[spanIndex];
+      var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+      var decStart = decorations[decorationIndex];
+      var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+      var end = Math.min(spanEnd, decEnd);
+  
+      var textNode = spans[spanIndex + 1];
+      var styledText;
+      if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+          // Don't introduce spans around empty text nodes.
+          && (styledText = source.substring(sourceIndex, end))) {
+        // This may seem bizarre, and it is.  Emitting LF on IE causes the
+        // code to display with spaces instead of line breaks.
+        // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+        // space to appear at the beginning of every line but the first.
+        // Emitting an old Mac OS 9 line separator makes everything spiffy.
+        if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+        textNode.nodeValue = styledText;
+        var document = textNode.ownerDocument;
+        var span = document.createElement('SPAN');
+        span.className = decorations[decorationIndex + 1];
+        var parentNode = textNode.parentNode;
+        parentNode.replaceChild(span, textNode);
+        span.appendChild(textNode);
+        if (sourceIndex < spanEnd) {  // Split off a text node.
+          spans[spanIndex + 1] = textNode
+              // TODO: Possibly optimize by using '' if there's no flicker.
+              = document.createTextNode(source.substring(end, spanEnd));
+          parentNode.insertBefore(textNode, span.nextSibling);
+        }
+      }
+  
+      sourceIndex = end;
+  
+      if (sourceIndex >= spanEnd) {
+        spanIndex += 2;
+      }
+      if (sourceIndex >= decEnd) {
+        decorationIndex += 2;
+      }
+    }
+  }
+
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (window['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if ('console' in window) {
+        console['log'](e && e['stack'] ? e['stack'] : e);
+      }
+    }
+  }
+
+  /**
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('PRE');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    container.innerHTML = sourceCodeHtml;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+  function prettyPrint(opt_whenDone) {
+    function byTagName(tn) { return document.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    function doWork() {
+      var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+        var className = cs.className;
+        if (className.indexOf('prettyprint') >= 0) {
+          // If the classes includes a language extensions, use it.
+          // Language extensions can be specified like
+          //     <pre class="prettyprint lang-cpp">
+          // the language extension "cpp" is used to find a language handler as
+          // passed to PR.registerLangHandler.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          if (langExtension) {
+            langExtension = langExtension[1];
+          }
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            if ((p.tagName === 'pre' || p.tagName === 'code' ||
+                 p.tagName === 'xmp') &&
+                p.className && p.className.indexOf('prettyprint') >= 0) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+            lineNums = lineNums
+                  ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+                  : false;
+            if (lineNums) { numberLines(cs, lineNums); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if (opt_whenDone) {
+        opt_whenDone();
+      }
+    }
+
+    doWork();
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function?} opt_whenDone if specified, called when the last entry
+    *     has been finished.
+    */
+  window['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  window['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE
+      };
+})();
diff --git a/org.tizen.ui.guides/html/web/guides_w.htm b/org.tizen.ui.guides/html/web/guides_w.htm
new file mode 100755 (executable)
index 0000000..91773ec
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/guides_w.htm
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+       <title>Tizen Web UI Guides</title>  
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html">W3C/HTML5 and Supplementaries API Reference for Mobile Web</a></li>
+                       <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">W3C/HTML5 and Supplementaries API Reference for Wearable Web</a></li>
+                       <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li>                       
+               </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
+<font size="11">Web UI Guides</font></h1>
+
+<p>Tizen Web UI guides include various aspects of creating a visual outlook for the user application to ensure the best possible user experience.</p>
+
+<p>The Tizen platform provides the following Web UI toolkit frameworks for developing a Web application:</p>
+<ul>
+       <li><a href="tau/guides_tau_w.htm">TAU (Tizen Advanced UI)</a>
+       <p>TAU is a Web UI library that enables you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider. You can manipulate and interact with the application screens through the UI components.</p></li>
+       <li><a href="w3c/guides_w3c_w.htm">W3C</a>
+       <p>The W3C specifications provide HTML and CSS tools for creating a user interface. With the HTML tools, you can define the structure of the application screens, while the CSS tools allow you to define the look and feel of the screens.</p></li>
+</ul>
+
+
+    
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/web/tau/accessibility_w.htm b/org.tizen.ui.guides/html/web/tau/accessibility_w.htm
new file mode 100755 (executable)
index 0000000..324f157
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/accessibility_w.htm
@@ -0,0 +1,110 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Accessibility: Supporting Easy Access</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI framework (TAU) API</a></li>
+
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Accessibility: Supporting Easy Access</h1>
+
+
+<p>The <a href="http://www.w3.org/TR/wai-aria/" target="_blank">WAI-ARIA</a> (Web Accessibility Initiative - Accessible Rich Internet Applications) is a standard to support easy access to Web content in Web applications. The WAI-ARIA is composed of a role, states, and property, and its current version is 1.0. The Tizen screen reader sends the screen information to the user with the text-to-speech technology from WAI-ARIA data.</p>
+<p>You must define the role, states, and property of the HTML elements in order to enable the Tizen screen reader.</p>
+
+<p>The Tizen screen reader reads HTML elements in the following order:</p>
+<ol>
+       <li>Content
+               <p>The actual element content is read first.</p></li>
+       <li>Other attributes than <span style="font-family: Courier New,Courier,monospace">role</span> and <span style="font-family: Courier New,Courier,monospace">aria-label</span></li>
+       <li><span style="font-family: Courier New,Courier,monospace">role</span> attribute
+       </li>
+       <li><span style="font-family: Courier New,Courier,monospace">aria-label</span> attribute
+       </li>
+</ol>
+
+<p>The following examples show how WAI-ARIA code is read using the text-to-speech functionality of the screen reader:</p>
+<ul>
+       <li>Result: checkbox checked, double tap to uncheck
+               <pre class="prettyprint">&lt;div role=&quot;checkbox&quot; aria-checked=&quot;true&quot; aria-label=&quot;double tap to uncheck&quot;&gt;&lt;/div&gt;</pre></li>
+       <li>Result: test button, double tap to click
+               <pre class="prettyprint">&lt;div role=&quot;button&quot; aria-label=&quot;double tap to click&quot;&gt;test&lt;/div&gt;</pre></li>
+</ul>
+
+<p>When creating applications that use the Tizen screen reader, keep in mind the following exceptions:</p>
+<ul>
+       <li>If the <span style="font-family: Courier New,Courier,monospace">aria-hidden</span> attribute of an element is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the screen reader does not read the content of the element or its child elements.
+               <p>In the following snippet, the screen reader reads &quot;on&quot;, but not &quot;off&quot; or &quot;child&quot;.</p>
+<pre class="prettyprint">&lt;div tabindex=&quot;0&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;on&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div aria-hidden=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;off
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;child&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre></li>
+       <li>If the <span style="font-family: Courier New,Courier,monospace">role</span> attribute is not defined, it is not read.
+               <p>In the following snippet, the screen reader reads &quot;test&quot;, but not &quot;link&quot;.</p>
+               <pre class="prettyprint">&lt;a role=&quot;&quot; href=&quot;test.html&quot;&gt;test&lt;/a&gt;</pre></li>
+       <li>The screen reader does not read elements that are hidden, for example, if the <span style="font-family: Courier New,Courier,monospace">display</span> property is set to <span style="font-family: Courier New,Courier,monospace">none</span>.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;img&gt;</span> element supports the image alt text through the <span style="font-family: Courier New,Courier,monospace">alt</span> attribute:</p>
+<pre class="prettyprint">&lt;img src=&quot;icon.jpg&quot; alt=&quot;icon&quot;&gt;</pre>
+<table class="note">
+       <tbody>
+       <tr>
+               <th class="note">Note</th>
+       </tr>
+       <tr>
+               <td class="note">The <span style="font-family: Courier New,Courier,monospace">alt</span> attribute need not be defined for the virtual grid component.
+                       <p>The accessibility feature is supported since Tizen 2.1.</p></td>
+       </tr>
+       </tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm b/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm
new file mode 100755 (executable)
index 0000000..7baa5ca
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm
@@ -0,0 +1,266 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Circle Progress Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm">CircleProgressBar API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Progress Bar</h1>
+
+<p>You can create a circle-shaped progress bar component with the CircleProgressBar API.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure shows the layout of the progress bar in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: The circle-shaped progress bar in rectangular and circular devices</p>
+                       <p align="center"><img alt="Circle-shaped progress bar in a rectangular device" src="../../images/rectangular_progress.png" />  <img alt="Circle-shaped progress bar in a circular device" src="../../images/round_progress.png" /></p>
+
+<p>To implement the progress bar:</p>
+
+<ol>
+<li>Edit the HTML code to add the component to your application screen:
+
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageCircleProgressBar&quot; data-enable-page-scroll=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Circle Progress&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;result&quot; id=&quot;result&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-grid-col-2&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;minus&quot;&gt;-10%&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;plus&quot;&gt;+10%&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&nbsp;&nbsp;&nbsp;&lt;progress class=&quot;ui-circle-progress&quot; id=&quot;circleprogress&quot; max=&quot;100&quot; value=&quot;20&quot;&gt;&lt;/progress&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the progress bar:
+
+<pre class="prettyprint">
+.ui-progressbar-large 
+{
+&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;left: 50%;
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-50%, -50%, 0);
+}
+.result 
+{
+&nbsp;&nbsp;&nbsp;font-size:35px;
+&nbsp;&nbsp;&nbsp;text-align:center;
+&nbsp;&nbsp;&nbsp;top: 33%;
+&nbsp;&nbsp;&nbsp;left: 50%;
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-50%, -50%, 0);
+&nbsp;&nbsp;&nbsp;position: absolute;
+}
+
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;.result 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.ui-footer 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Edit the JavaScript code to manage the progress bar events and other functionality:
+
+<pre class="prettyprint">
+(function()
+{
+&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageCircleProgressBar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = document.getElementById(&quot;circleprogress&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn = document.getElementById(&quot;minus&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn = document.getElementById(&quot;plus&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = document.getElementById(&quot;result&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isCircle = tau.support.shape.circle,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultText,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i;
+
+&nbsp;&nbsp;&nbsp;function printResult() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultText = progressBarWidget.value();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerHTML = resultText + &quot;%&quot;;
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function clearVariables() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = null;
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function unbindEvents() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pageshow&quot;, pageBeforeShowHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pagehide&quot;, pageHideHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isCircle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn.removeEventListener(&quot;click&quot;, minusBtnClickHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn.removeEventListener(&quot;click&quot;, plusBtnClickHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function minusBtnClickHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = i-10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i &lt; 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i=0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function plusBtnClickHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = i+10;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i &gt; 100) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i=100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(i);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function rotaryDetentHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the rotary direction */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var direction = event.detail.direction,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = parseInt(progressBarWidget.value());
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (direction === &quot;CW&quot;) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right direction */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value &lt; 100) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value++;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = 100;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (direction === &quot;CCW&quot;) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left direction */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value &gt; 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value--;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(value);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;function pageBeforeShowHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isCircle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make the circular progressbar object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: &quot;full&quot;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: &quot;large&quot;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn.addEventListener(&quot;click&quot;, minusBtnClickHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn.addEventListener(&quot;click&quot;, plusBtnClickHandler);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = parseInt(progressBarWidget.value());
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerHTML = i + &quot;%&quot;;
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;function pageHideHandler() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unbindEvents();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearVariables();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release the object */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.destroy();
+&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, pageBeforeShowHandler);
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, pageHideHandler);
+}());
+</pre>
+</li>
+</ol>
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm b/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm
new file mode 100755 (executable)
index 0000000..cd4deb2
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm
@@ -0,0 +1,221 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Circular UI: Creating Applications for the Circular UI</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#apply">Applying the Circular UI</a></li>
+            <li><a href="#incss">Overriding Circular CSS Style with Media Query</a></li>
+            <li><a href="#injs">Writing JavaScript Selectively for the Circular UI</a></li>
+            <li><a href="#components">Supported UI Components</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework (TAU) API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Circular UI: Creating Applications for the Circular UI</h1>
+
+<p>TAU for Wearable supports different types of wearable devices (rectangle and circle) in the same application. To support the circular UI along with rectangular UI, media query is required.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+
+<h2 id="apply">Applying the Circular UI</h2>
+
+<p>To support the circular UI:</p>
+
+<ol>
+<li>Include the link tag for the latest <span style="font-family: Courier New,Courier,monospace">tau.css</span> file into the &lt;head&gt; part in HTML. Note that for the compatibility with the rectangular UI, you must use the latest version of TAU library.</li>
+
+<li>Include the link tag for the latest <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file with media query feature (<span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape: circle</span>) next to the link tag for the <span style="font-family: Courier New,Courier,monospace">tau.css</span>. Note that adding the <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file following the general <span style="font-family: Courier New,Courier,monospace">tau.css</span> file covers the additional circular UI.</li>
+
+<li>Include the link tag for the latest <span style="font-family: Courier New,Courier,monospace">tau.js</span> script file at the end of &lt;body&gt; part of HTML.</li>
+
+<li>For writing a separate code for Circular UI in JavaScript, you can use the <span style="font-family: Courier New,Courier,monospace">tau.support.shape.circle</span> property for detecting the circular device.</li>
+</ol>
+
+<pre class="prettyprint">
+&lt;head name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;title&gt;Support for Circular UI&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;tau.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;!-- CSS media query on a link element --&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (-tizen-geometric-shape: circle)&quot; href=&quot;tau.circle.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/stlye.css&quot;&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement your code for the circular UI */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement your code for the rectangular UI */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/body&gt;
+</pre>
+
+<p>The following figure shows how the media query <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape: circle</span> works in a rectangular and circular UI.</p>
+<p class="figure">Figure: Media query in a rectangular device and circular device</p>
+<p align="center">
+       <img alt="Media query in a rectangular device and circular device" src="../../images/circular_support.png" />
+</p>
+
+<h2 id="incss">Overriding Circular CSS Style with Media Query</h2>
+
+<p>For some styles to be applied selectively, you can use the media query feature <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> with a <span style="font-family: Courier New,Courier,monospace">rectangle</span> or <span style="font-family: Courier New,Courier,monospace">circle</span> value to distinguish type difference. Note that the <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> feature is only available in Tizen devices.</p>
+
+<table>
+       <caption>Table: <span style="font-family: Courier New,Courier,monospace">-tizen-geometric-shape</span> feature description</caption>
+       <tbody>
+       <tr>
+               <th colspan="2">-tizen-geometric-shape</th>
+       </tr>
+       <tr>
+               <td>Value</td>
+               <td>rectangle | circle</td>
+       </tr>
+       <tr>
+               <td>Applied to</td>
+               <td>Visual media types</td>
+       </tr>
+       <tr>
+               <td>Accept min/max prefixes</td>
+               <td>No</td>
+       </tr>
+       </tbody>
+</table>
+
+<pre class="prettyprint">
+.className 
+{
+&nbsp;&nbsp;&nbsp;/* Implement the basic CSS style for all types of devices (rectangular and circular) */
+}
+
+@media screen and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;.className
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement the CSS style to be overridden in circular */
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<h2 id="injs">Writing JavaScript Selectively for the Circular UI</h2>
+<p>TAU for Wearable provides the <span style="font-family: Courier New,Courier,monospace">tau.support.shape.circle</span> property that checks whether the device screen is a circle or not. If you want implement code selectively for circular UI and rectangular UI, you can use the property with a boolean value. Note that for developing in a browser environment, this property is always set to <span style="font-family: Courier New,Courier,monospace">true</span> when the <span style="font-family: Courier New,Courier,monospace">tau.circle.css</span> file is loaded.</p>
+
+<pre class="prettyprint">
+if (tau.support.shape.circle) 
+{
+&nbsp;&nbsp;&nbsp;/* Implement your code for the circular UI */
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;/* Implement your code for the rectangular UI */
+}
+</pre>
+
+<h2 id="components">Supported UI Components</h2>
+<p>The following components can be used in both rectangular and circular devices.</p>
+  <table>
+       <caption>Table: UI components supported by rectangular and circular UI</caption>
+       <tbody>
+       <tr>
+               <th>Component</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+        <td><a href="list_ww.htm">List</a></td>
+        <td>Shows how you can create a snap list component.</td>
+       </tr>
+       <tr>
+        <td><a href="helper_ww.htm">Helper Script</a></td>
+        <td>Shows how you to support some application components.</td>
+       </tr>
+       <tr>
+        <td><a href="header_ww.htm">Header</a></td>
+        <td>Shows how you can create a header component.</td>
+       </tr>
+       <tr>
+        <td><a href="circle_progressbar_ww.htm">Circle Progress Bar</a></td>
+        <td>Shows how you can create a circle progress bar component.</td>
+       </tr>
+       <tr>
+        <td><a href="processing_ww.htm">Processing</a></td>
+        <td>Shows how you can create a processing component.</td>
+       </tr>
+       <tr>
+        <td><a href="moreoptions_ww.htm">More Options</a></td>
+        <td>Shows how you can create a more options button component.</td>
+       </tr>
+       <tr>
+        <td><a href="footerbutton_ww.htm">Footer Button</a></td>
+        <td>Shows how you can create a footer button component.</td>
+       </tr>
+       <tr>
+        <td><a href="thumbnail_ww.htm">Thumbnail</a></td>
+        <td>Shows how you can create a thumbnail component.</td>
+       </tr>
+       <tr>
+        <td><a href="popup_ww.htm">Popup</a></td>
+        <td>Shows how you can create a popup component.</td>
+    </tr>
+</tbody>
+</table>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/event_handling_w.htm b/org.tizen.ui.guides/html/web/tau/event_handling_w.htm
new file mode 100755 (executable)
index 0000000..7daf215
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/event_handling_w.htm
@@ -0,0 +1,184 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Event Handling: Handling User Interactions</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#hardwarekey">Hardware Key Events</a></li>
+            <li><a href="#rotaryevent">Rotary Events</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework (TAU) API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Event Handling: Handling User Interactions</h1>
+<p>The Tizen platform supports some device events for user interaction. To provide a full user experience for your application users, you must handle various events in your application.</p>
+
+<h2 id="hardwarekey">Hardware Key Events</h2>
+
+<p>The Tizen platform supports hardware key events for user interaction on devices.</p>
+<p>The following figures show the hardware keys and events for mobile and wearable devices.</p>
+
+       <p class="figure">Figure: Menu and Back keys on a mobile device</p>
+<p align="center"><img alt="Menu and Back keys" src="../../images/efl_phone.png" /></p>
+<p class="figure">Figure: Back key on a wearable device</p>
+ <p align="center"><img alt="Back key" src="../../images/backWearable.png" /></p>
+
+
+<table>
+       <caption> Table: hardware key events</caption>
+       <tbody>
+       <tr>
+               <th>Type</th>
+               <th>Description</th>
+               <th>Attribute</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span></td>
+               <td>Event is triggered when a device detects the user interaction through special point of hardware.</td>
+               <td>
+                       <span style="font-family: Courier New,Courier,monospace;">event.keyName</span>
+                       <ul>
+                       <li><span style="font-family: Courier New,Courier,monospace;">back</span> for wearable</li>
+                       <li><span style="font-family: Courier New,Courier,monospace;">back, menu</span> for mobile</li>
+                       </ul>
+               </td>
+       </tr>
+       </tbody>
+</table>
+<p>To bind an event callback on the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> events, use the following code:</p>
+<pre class="prettyprint">
+window.addEventListener(&quot;tizenhwkey&quot;, function(ev)
+{
+&nbsp;&nbsp;&nbsp;if (ev.keyName == &quot;back&quot;) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call window.history.back() to go to previous browser window */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call tizen.application.getCurrentApplication().exit() to exit application */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add script to add another behavior */
+&nbsp;&nbsp;&nbsp;}
+});
+</pre>
+
+<h3>Exiting the Application with the Back Key</h3>
+<p>When application binds a <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event, it checks the page ID and decides to go back or exit with several lines of app-side script.</p>
+<p>The Tizen Device APIs provide an application exit method. Even if the application has many pages, it can handle the back/exit process.</p>
+<p>With TAU page, just remember the ID of the main page of main page. In the following example, the ID of the main page is <span style="font-family: Courier New,Courier,monospace;">main</span>.</p>
+<pre class="prettyprint">(function()
+{
+&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;tizenhwkey&quot;, function(ev);
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(ev.keyName === &quot;back&quot;)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementsByClassName(&quot;ui-page-active&quot;)[0],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid = page ? page.id:&nbsp;&quot;&quot;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(pageid === &quot;main&quot;)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch(ignore)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;});
+}());</pre>
+
+<h2 id="rotaryevent">Rotary Events</h2>
+
+<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called detents. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
+
+<table class="note">
+       <tbody>
+       <tr>
+               <th class="note">Note</th>
+       </tr>
+       <tr>
+               <td class="note">This feature is supported in wearable applications only.</td>
+       </tr>
+       </tbody>
+</table>
+
+
+<p class="figure">Figure: Rotary device</p>
+<p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
+<p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
+
+<table>
+       <caption> Table: Rotary events</caption>
+       <tbody>
+       <tr>
+               <th>Type</th>
+               <th>Description</th>
+               <th>Attribute</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">rotarydetent</span></td>
+               <td>Event is triggered when a device detects the detent point.</td>
+               <td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: the rotation direction.
+                       <p>The available values are <span style="font-family: Courier New,Courier,monospace;">CW</span> for clockwise and <span style="font-family: Courier New,Courier,monospace;">CCW</span> for counter-clockwise rotation.</p></td>
+       </tr>
+       </tbody>
+</table>
+
+<p>To bind an event callback on rotary events, use the following code:</p>
+<pre class="prettyprint">
+document.addEventListener(&quot;rotarydetent&quot;, function(ev)
+{
+&nbsp;&nbsp;&nbsp;var direction = ev.detail.direction;
+&nbsp;&nbsp;&nbsp;/* Add behavior for detent detected event with a direction value */
+});
+</pre>
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm b/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm
new file mode 100755 (executable)
index 0000000..0ec86d2
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm
@@ -0,0 +1,233 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Footer Button</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">Page Handling</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Footer Button</h1>
+
+<p>You can create a footer button component that is supported in both rectangular and circular UI.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figures show the layout of the footer button components in a rectangular and circular UI.</p>
+<p class="figure">Figure: Footer button in a rectangular and circular device</p>
+                       <p align="center"><img alt="Footer button in a rectangular device" src="../../images/rectangular_footer.png"/> <img alt="Footer button in a circular device" src="../../images/round_footer.png"/></p>
+                       
+<p class="figure">Figure: Multiple footer buttons in a rectangular and circular device</p>
+                       <p align="center"><img alt="Multiple footer buttons in a rectangular device" src="../../images/rectangular_multibtn.png"/> <img alt="Multiple footer buttons in a circular device" src="../../images/round_multibtn.png"/></p>
+<p>The footer button on the circular UI has the <span style="font-family: Courier New,Courier,monospace">ui-bottom-button</span> class. When there are multiple buttons, the other buttons except for the first button use the drawer component in the circular UI.</p>
+
+
+<p>To implement footer buttons:</p>
+
+<ul>
+<li>To implement a single footer button:
+<p>Edit the HTML code to add the footer button component to your application screen.</p>
+
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;bottomButtonPage&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-bottom-button&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;Button&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li>To implement multiple footer buttons:
+
+
+<ol>
+<li>Edit the HTML code to add the footer button components to your application screen.
+<p>When there are multiple buttons, the buttons except for the first button use drawer in Circular UI.</p>
+
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;bottomButtonWithMorePage&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Multiple Buttons&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;a class=&quot;drawer-handler&quot;&gt;&lt;/a&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!-- Circle Profile --&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;moreoptionsDrawer&quot; class=&quot;ui-drawer drawer-elem&quot; data-drawer-target=&quot;#bottomButtonWithMorePage&quot; data-position=&quot;right&quot; data-enable=&quot;true&quot; data-drag-edge=&quot;1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;moreoptionsSectionChanger&quot; class=&quot;ui-section-changer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=&quot;option-button&quot;&gt;2&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=&quot;option-button&quot;&gt;3&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-grid-col-3 ui-bottom-button&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;1&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;2&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;3&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the buttons:
+
+<pre class="prettyprint">
+.drawer-elem 
+{
+&nbsp;&nbsp;&nbsp;display: none;
+}
+
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;.drawer-handler 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:24px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 115px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: fixed;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 122px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: transparent;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #a4a4a4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-image: url(/*path of the image*/);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-size: 18px 36px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-repeat: no-repeat;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-position: 0 40px;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.drawer-elem 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: rgba(255, 255, 255, 0.1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 100%;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.sections,
+&nbsp;&nbsp;&nbsp;.options 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.option-button 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 158px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 158px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #a4a4a4;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(-50%, -50%, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: none;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 158px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-appearance: none;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;.ui-bottom-button a + a 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Edit the JavaScript code to manage the footer button events and other functionalities:
+<pre class="prettyprint">
+(function()
+{
+&nbsp;&nbsp;&nbsp;var page = document.querySelector(&quot;#bottomButtonWithMorePage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = page.querySelector(&quot;#moreoptionsDrawer&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler = page.querySelector(&quot;.ui-more&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawerMoreHelper;
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawerMoreHelper = tau.helper.DrawerMoreStyle.create(drawer, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler: &quot;.drawer-handler&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (drawerMoreHelper) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawerMoreHelper.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;});
+})();
+</pre>
+</li>
+</ol>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/globalization_w.htm b/org.tizen.ui.guides/html/web/tau/globalization_w.htm
new file mode 100755 (executable)
index 0000000..6644ca6
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/globalization_w.htm
@@ -0,0 +1,484 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Globalization: Supporting Internationalization and Localization</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#jquery_globalize">jQuery and Globalize</a></li>
+            <li><a href="#use">Using the Globalize Utility</a></li>
+            <li><a href="#utility">Using the Globalize Utility Methods</a></li>
+            <li><a href="#rtl">Right-to-left (RTL) Language Support</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework (TAU) API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Globalization: Supporting Internationalization and Localization</h1>
+
+    <p>The TAU Globalize utility supports internationalization and localization. It wraps the <a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> functionality for easy access from Tizen Web applications, and it is extended to support the right-to-left (RTL) languages.</p>
+
+    <h2 id="jquery_globalize" name="jquery_globalize">jQuery and Globalize</h2>
+
+    <p>Globalize is a jQuery JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data. The library works both for the browser and as a Node.js module. jQuery and Globalize have dependencies with <a href="https://github.com/rxaviers/cldrjs" target="_blank">cldr.js</a>, which is a CLDR low-level manipulation tool.</p>
+
+    <p>Globalize:</p>
+    <ul>
+        <li>Leverages the Unicode CLDR data and follows its UTS#35 specification.</li>
+        <li>Keeps the code separate from the i18n content. Does not host or embed any locale data in the library. Empowers you to control the loading mechanism of your choice.</li>
+        <li>Allows you to load as much or as little data as you need. Avoids duplicating data if using multiple i18n libraries that leverage CLDR.</li>
+        <li>Keeps the code modular. Allows you to load the i18n functionalities you need.</li>
+        <li>Runs in browsers and Node.js, and consistently across all of them.</li>
+        <li>Makes globalization as easy to use as jQuery.</li>
+    </ul>
+
+    <h3 id="cldr" name="cldr">CLDR Data</h3>
+
+    <p>The Unicode CLDR provides the key building blocks for software to support the world&#39;s languages. It includes:</p>
+    <ul>
+        <li>Locale-specific patterns for formatting and parsing dates, times, time zones, numbers, and currency values</li>
+        <li>Translations of names: languages, scripts, countries and regions, currencies, eras, months, weekdays, day periods, time zones, cities, and time units</li>
+        <li>Language and script information: characters used, plural cases, gender of lists, capitalization, rules for sorting and searching, writing direction, transliteration rules, rules for spelling out numbers, and rules for segmenting text into graphemes, words, and sentences</li>
+        <li>Country information: language usage, currency information, calendar preference and week conventions, and postal and telephone codes</li>
+        <li>ISO and BCP 47 code support (such as cross-mappings) and keyboard layouts</li>
+    </ul>
+
+    <p>CLDR uses the XML format provided by UTS #35: Unicode Locale Data Markup Language (LDML). LDML is a format used not only for CLDR, but also for the general interchange of locale data. For more information about CLDR, see <a href="http://cldr.unicode.org/index/downloads/cldr-27" target="_blank">CLDR release notes</a>, and to download the JSON format file , see <a href="https://github.com/unicode-cldr/cldr-json" target="_blank">JSON Data from the Unicode CLDR Project</a>.</p>
+    <p>The TAU Globalize utility uses the CLDR 26 release, and when you create a Tizen Web application project, you find CLDR in the <span style="font-family: Courier New,Courier,monospace">&lt;project&gt;/lib/tau/&lt;profile&gt;js/cldr-data</span> folder.</p>
+
+    <h2 id="use" name="use">Using the Globalize Utility</h2>
+
+    <p>To use the TAU Globalize utility in your application:</p>
+    <ol>
+        <li>Download the following dependency files for your application:
+            <ul>
+                <li><a href="https://github.com/rxaviers/cldrjs" target="_blank">Cldr</a>  (v0.4.0)</li>
+                <li><a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> (v1.0.0-alpha.17)</li>
+                <li><a href="http://unicode.org/Public/cldr/26/json-full.zip" target="_blank">Cldr-date</a> (26 version) main and supplemental</li>
+            </ul>
+        </li>
+        <li>Create a folder structure, as shown in the following table.
+            <table>
+                <caption>
+                    Table: Globalize folder structure
+                </caption>
+                <tbody>
+                <tr>
+                    <th colspan="2">Folder structure</th>
+                    <th>Description</th>
+                </tr>
+                <tr>
+                    <td rowspan="7"> <p class="figure"></p>
+                        <p align="center"><img src="../../images/globalize_folder_structure.png" alt="Globalize folder structure" /></p></td>
+                    <td rowspan="7"> <p class="figure"></p>
+                        <p align="center"><img src="../../images/globalize_folder_structure_main.png" alt="Globalize main folder" /></p></td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/</span>: Copy the cldr.js library in this folder.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr-data/</span>: Copy the cldr-data files in this folder.
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr-data/main</span>: Copy the languages to be supported in this folder.</p>
+                        <table class="note">
+                            <tbody>
+                            <tr>
+                                <th class="note">Note</th>
+                            </tr>
+                            <tr>
+                                <td class="note">Do not copy all languages, just the ones you need.</td>
+                            </tr>
+                            </tbody>
+                        </table></td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">globalize/</span>: Copy the Globalize library in this folder.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">locale/</span>: Make the custom locale string in this folder.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">script/</span>: JavaScript files.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">style/</span>: CSS, image, and other style related files.</td>
+                </tr>
+                <tr>
+                    <td><span style="font-family: Courier New,Courier,monospace">view/</span>: HTML files</td>
+                </tr>
+                </tbody>
+            </table>
+        </li>
+        <li>Set the locale using the following example code:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* &quot;ko&quot; is the Globalize utility instance */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getLocale()) /* &quot;ko&quot; */
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+
+            <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is not synchronous, and it returns the deferred object with the methods <span style="font-family: Courier New,Courier,monospace">then()</span>, <span style="font-family: Courier New,Courier,monospace">done()</span>, and <span style="font-family: Courier New,Courier,monospace">fail()</span>. Use these methods to receive the Globalize utility instance.</p>
+            <p>You can specify locales in 2 ways using IETF language tags, such as en, pt-BR, or zh-Hant-TW:</p>
+            <ul>
+                <li>Specify the locale ID in the <span style="font-family: Courier New,Courier,monospace">lang</span> attribute of the body element, such as <span style="font-family: Courier New,Courier,monospace">&lt;body lang=&quot;ko-KR&quot;&gt;</span>.</li>
+                <li>Use a string variable as an input argument of the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method (for example <span style="font-family: Courier New,Courier,monospace">ko.setLocale(&quot;en&quot;)</span>) to overwrite the body element setting. </li>
+            </ul>
+            <p>If no <span style="font-family: Courier New,Courier,monospace">lang</span> attribute or <span style="font-family: Courier New,Courier,monospace">setLocale()</span> input argument is defined, the Globalize utility finds the locale by checking the <span style="font-family: Courier New,Courier,monospace">window.navigator.language</span> property. If the check result is false, the utility uses the default locale &quot;en&quot;.</p>
+            <p>The following table illustrates the locale setting method order.</p>
+            <table>
+                <caption>
+                    Table: Locale setting methods
+                </caption>
+                <tbody>
+                <tr>
+                    <th>Order</th>
+                    <th>Locale setting methods</th>
+                </tr>
+                <tr>
+                    <td>1</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">setLocale(LocaleId)</span></td>
+                </tr>
+                <tr>
+                    <td>2</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">&lt;body lang=&quot;ko-KR&quot;&gt;</span></td>
+                </tr>
+                <tr>
+                    <td>3</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">window.navigator.language</span></td>
+                </tr>
+                <tr>
+                    <td>4</td>
+                    <td>Default locale &quot;en&quot;</td>
+                </tr>
+                </tbody>
+            </table>
+        </li>
+        <li>Make sure that you have all required CLDR files.
+            <p>The <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method automatically loads the basic CLDR data files which are match the given locale by local AJAX. During the method call, the Globalize utility also loads the basic CLDR JSON files:</p>
+            <ul>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/currencies.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/scriptMetaData.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)</li>
+                <li><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</li>
+            </ul>
+            <p>In addition to the basic files, each Globalize method requires a special set of CLDR portions. Determine which Globalize module functionalities you need, and make sure you have the required files, as defined in the following table.</p>
+
+            <table>
+                <caption>
+                    Table: CLDR requirements
+                </caption>
+                <tbody>
+                <tr>
+                    <th>Module</th>
+                    <th>Required CLDR JSON files</th>
+                </tr>
+                <tr>
+                    <td>Core module</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/likelySubtags.json</span></td>
+                </tr>
+                <tr>
+                    <td>Date module</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/ca-gregorian.json</span>
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/timeZoneNames.json</span></p>
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/timeData.json</span></p>
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/weekData.json</span></p>
+                        <p>CLDR JSON files from the number module</p></td>
+                </tr>
+                <tr>
+                    <td>Number module</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/main/locale/numbers.json</span>
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/numberingSystems.json</span></p></td>
+                </tr>
+                <tr>
+                    <td>Plural module</td>
+                    <td><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/plurals.json</span> (for cardinals)
+                        <p><span style="font-family: Courier New,Courier,monospace">cldr/supplemental/ordinals.json</span> (for ordinals)</p>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </li>
+    </ol>
+
+    <h2 id="utility" name="utility">Using the Globalize Utility Methods</h2>
+    <p>The following code snippets show how to use the TAU Globalize utility methods:</p>
+    <ul>
+        <li><span style="font-family: Courier New,Courier,monospace">formatCurrency()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+            <p>For more information, see the <a href="http://en.wikipedia.org/wiki/ISO_4217" target="_blank">currency unit standard in ISO 4217</a>.</p>
+        </li>
+
+        <li><span style="font-family: Courier New,Courier,monospace">formatDate()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatDate(new Date(), {datetime:&quot;medium&quot;});
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+            <p>For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md" target="_blank">date-formatter</a>.</p>
+        </li>
+
+        <li><span style="font-family: Courier New,Courier,monospace">getCalendar()</span>:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getCalendar().months.format.wide, undefined, 4));
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+            <p>The calendar format is specified in the <span style="font-family: Courier New,Courier,monospace">gregorian.json</span> file in the CLDR data.</p>
+        </li>
+
+        <li><span style="font-family: Courier New,Courier,monospace">formatMessage()</span>:
+            <p>This method supports custom locale data.</p>
+            <ol>
+                <li>Create a directory for each locale that has localized content under the locales directory in the project root. The locale names are defined in the <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA language subtag registry</a>.
+<pre class="prettyprint">
+index.html
+locale
+&nbsp;&nbsp;&nbsp;en.json
+&nbsp;&nbsp;&nbsp;ko.json
+</pre>
+                </li>
+                <li>Create a JSON file for the <span style="font-family: Courier New,Courier,monospace">formatMessage</span> strings (custom locale strings) in locales paths:
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&quot;en&quot;:
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;like&quot;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{0, plural, offset:1&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=0 {Be the first to like this}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=1 {You liked this}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;one {You and someone else liked this}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;other {You and # others liked this}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;}&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;greeting&quot;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;hello&quot;:&quot;hello&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bye&quot;:&quot;bye&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;longText&quot;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;quis exercitationem culpa nesciunt nihil aut nostrum explicabo&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;reprehenderit optio amet ab temporibus asperiores quasi cupiditate.&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Voluptatum ducimus voluptates voluptas?&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+                </li>
+
+                <li>Call the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method to load the custom locale files automatically:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ko-KR&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ko)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/hello&quot;));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/bye&quot;));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;longText&quot;));
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+                </li>
+            </ol>
+        </li>
+
+        <li><span style="font-family: Courier New,Courier,monospace">messageFormatter()</span>:
+            <p>This method returns a function that formats a message using the ICU message format pattern. For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/message/message-formatter.md" target="_blank">message-formatter</a>.</p>
+            <ol>
+                <li>Create a locale resource in the locales path:
+<pre class="prettyprint">
+{
+&nbsp;&nbsp;&nbsp;&quot;en&quot;:
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;formatter&quot;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;welcome&quot;:&quot;Hello Mr. {0}&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;thankyou&quot;:&quot;Bye Mr. {custom}.&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+                </li>
+
+                <li>Use the <span style="font-family: Courier New,Courier,monospace">messageFormatter()</span> method:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;en-US&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(en)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var welcomeFormatter = en.messageFormatter(&#39;formatter/welcome&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouFormatter  = en.messageFormatter(&#39;formatter/thankyou&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;welcomeMessageList = [&quot;Tom&quot;],
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouMessageList = {custom:&quot;Tom&quot;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(welcomeFormatter(welcomeMessageList));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(thankyouFormatter(thankyouMessageList));
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+                </li>
+            </ol>
+        </li>
+    </ul>
+
+    <h2 id="rtl" name="rtl">Right-to-left (RTL) Language Support</h2>
+
+    <p>TAU offers 2 ways to handle right-to-left (RTL) languages:</p>
+    <ul>
+        <li>Locale-specific CSS</li>
+        <li>RTL property in a locale object</li>
+    </ul>
+    <p>When the <span style="font-family: Courier New,Courier,monospace">setLocale()</span> method is called, it automatically applies a CSS class to the body element of your DOM if the given locale has an RTL direction.</p>
+    <p>The following examples show how to use the locale-specific CSS:</p>
+
+    <ul>
+        <li>The following example has ar-EG as the given locale, and the language has an RTL direction:
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ar-EG&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ar)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+        </li>
+
+        <li>The following example has a DOM of body with a locale-specific CSS named <span style="font-family: Courier New,Courier,monospace">ui-script-direction-rtl</span>:
+<pre class="prettyprint">
+&lt;body class=&quot;ui-script-direction-rtl&quot;&gt;
+</pre>
+        </li>
+
+        <li>The following example uses the locale-specific CSS to switch on the RTL feature for a UI component:
+<pre class="prettyprint">
+.ui-script-direction-rtl .ui-listview
+{
+&nbsp;&nbsp;&nbsp;direction: rtl;
+}
+.ui-script-direction-rtl .ui-li.ui-li-static
+{
+&nbsp;&nbsp;&nbsp;text-align: right;
+&nbsp;&nbsp;&nbsp;unicode-bidi: bidi-override;
+}
+</pre>
+        </li>
+    </ul>
+
+    <p>The following example shows how to use the RTL property in a locale object (the <span style="font-family: Courier New,Courier,monospace">rtl</span> variable). If a given locale has an RTL direction, the variable is <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<pre class="prettyprint">
+var globalize = tau.util.globalize,
+&nbsp;&nbsp;&nbsp;&nbsp;localeId  = &quot;ar-EG&quot;;
+
+document.addEventListener(&#39;pageshow&#39;, function()
+{
+&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId)
+&nbsp;&nbsp;&nbsp;.done(function(ar)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ar.rtl) /* true */
+&nbsp;&nbsp;&nbsp;})
+})
+</pre>
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm b/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
new file mode 100755 (executable)
index 0000000..f2f82bb
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>TAU</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>TAU</h1>
+       
+<p>The Tizen Advanced UI Framework components allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which gives you interaction with and manipulation features.</p>
+<p>TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework Library (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of Web UI Framework Library were coding simplification and application creation speed.  The purpose of TAU is to be the &quot;framework advanced to the next level&quot;.</p>
+
+
+<p>With TAU you can take advantage of the following benefits in your code:</p>
+<ul>
+       <li>TAU is a standalone library, so no additional libraries are needed.</li>
+       <li>TAU can be used with jQuery, as it exposes a special API to the jQuery object identical to jQuery Mobile. Migration is painless.</li>
+       <li>TAU has been written with speed in mind, and all the code is tweaked for maximum performance.</li>
+       <li>Applications can be built to dramatically improve startup performance.</li>
+       <li>TAU is ECMAScript5- and HTML5-compliant.</li>
+       <li>TAU has a large and open API, TAU methods and core functions (event utility functions) are available and not hidden.</li>
+       <li>TAU is customizable and easy to extend (to create new UI components).</li>
+       <li>TAU is optimized for wearable, mobile, and TV devices.</li>
+       <li>TAU supports various profiles (mobile, wearable, and TV).</li>
+</ul>
+
+<table class="note">
+       <tbody>
+       <tr>
+               <th class="note">Note</th>
+       </tr>
+       <tr>
+               <td class="note">TAU (Tizen Advanced UI) is the new name of the <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span>.
+               </td>
+       </tr>
+       <tr>
+               <td class="note">Since 2.3, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span> has been deprecated (including <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw.js</span>, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw-libs.js</span>, and <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw.css</span>).
+               <p>In all documents and source code, TAU is used instead of <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span>.</p>
+                       <p>Since 2.4, <span style="font-family: Courier New,Courier,monospace">tizen-web-ui-fw</span> is fully deleted and not supported anymore.</p>
+               </td>
+       </tr>
+       </tbody>
+</table>
+
+<p>To learn to use the TAU features in your application UI, see the following topics:</p>
+<ul>
+<li><a href="helloworld_w.htm">Hello World: Creating a Basic Hello World Page</a>
+<p>Enables you to make a Web application using TAU.</p></li>
+
+<li><a href="managing_page_w.htm">Managing Pages: Creating and Managing a Page Element</a>
+<p>Enables you to manage TAU pages.</p></li>
+
+<li><a href="event_handling_w.htm">Event Handling: Handling User Interactions</a>
+<p>Enables you to handle user events and interaction.</p></li>
+
+<li><a href="ui_component_w.htm">UI Components: Managing UI Components</a>
+<p>Enables you to create and manage UI components.</p></li>
+
+<li><a href="notepad_w.htm">Creating a UI: Making a Notepad Application</a>
+<p>Enables you to create a notepad application with TAU.</p></li>
+
+<li><a href="circular_ui_ww.htm">Circular UI: Creating Applications for the Circular UI</a> in <strong>wearable applications only</strong>
+<p>Enables you to apply a circular UI to a wearable application.</p></li>
+
+<li><a href="accessibility_w.htm">Accessibility: Supporting Easy Access</a>
+<p>Enables you to manage application accessibility.</p></li>
+
+<li><a href="globalization_w.htm">Globalization: Supporting Internationalization and Localization</a>
+<p>Enables you to localize and globalize applications.</p></li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/header_ww.htm b/org.tizen.ui.guides/html/web/tau/header_ww.htm
new file mode 100755 (executable)
index 0000000..0739d11
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/header_ww.htm
@@ -0,0 +1,137 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Header</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">Page Handling</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Header</h1>
+
+<p>You can create an expandable header component for your application. The expandable header offers events to support interactivity with other components.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure shows the layout of the header component in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: Header component in rectangular and circular devices</p>
+<p align="center"><img alt="Header component in a rectangular device" src="../../images/rectangular_header.png" /> <img alt="Header component in a circular device" src="../../images/round_header.png" /></p>
+
+<p>To implement the header component, edit the HTML code to add the header component to your application screen:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;headerPage&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot; id=&quot;myHeader&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Long title with ExpandableHeader&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header is expandable in Circular UI.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+<p>The header component supports the following events.</p>
+
+<table>
+<tbody>
+       <tr>
+               <th>Event name</th>
+               <th>Description</th>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">headerexpand</span></td>
+               <td>Triggered when the header starts to expand.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">headerexpandcomplete</span></td>
+               <td>Triggered after the header has fully expanded.</td>
+       </tr>
+       <tr>
+               <td><span style="font-family: Courier New,Courier,monospace">headercollapse</span></td>
+               <td>Triggered when the header returns to the state before expanding.</td>
+       </tr>
+</tbody>
+</table>
+
+<p>You can use events <span style="font-family: Courier New,Courier,monospace">headerexpand</span> and <span style="font-family: Courier New,Courier,monospace">headercollapse</span> if you need to do something when the header expands and collapses.</p>
+<p>The following examples show header events with Marquee.</p>
+
+<pre class="prettyprint">
+var page = document.querySelector(&quot;#myPage&quot;);
+
+page.addEventListener(&quot;pagebeforeshow&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;var textElement = page.querySelector(&quot;.ui-title&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee = new tau.widget.Marquee(textElement);
+}, false);
+
+page.addEventListener(&quot;headercollapse&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;if (marquee) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee.reset();
+&nbsp;&nbsp;&nbsp;}
+}, false);
+
+page.addEventListener(&quot;headerexpandcomplete&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;if (marquee) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee.start();
+&nbsp;&nbsp;&nbsp;}
+}, false);
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/helloworld_w.htm b/org.tizen.ui.guides/html/web/tau/helloworld_w.htm
new file mode 100755 (executable)
index 0000000..ad9d9af
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/helloworld_w.htm
@@ -0,0 +1,183 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Hello World: Creating a Basic Hello World Page</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#scaling">Scaling the UI</a></li>
+            <li><a href="#import_tau">Importing TAU</a></li>
+            <li><a href="#custom_js">Running Custom JavaScript and CSS</a></li>
+            <li><a href="#fill_content">Creating a Page in the Body</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework (TAU) API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Hello World: Creating a Basic Hello World Page</h1>
+
+<p>You can import TAU into your application and create a basic Hello World page with TAU.</p>
+
+<p>The following example shows a basic TAU template:</p>
+  <pre class="prettyprint">
+&lt;!DOCTYPE&nbsp;html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,&nbsp;user-scalable=no&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;myapp.css&quot;&nbsp;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello&nbsp;TAU&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;HTML&nbsp;BODY&nbsp;CONTENT&nbsp;--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+
+<h2 id="scaling">Scaling the UI</h2>
+<p>The Tizen Advanced UI (TAU) based template provides 2 scaling methods: device-width and fixed-width.</p>
+<ul>
+       <li>Device-width scaling 
+       <p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone&reg; and Android&reg;. In this mode, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web applications, a 320 px screen width is assumed.</p>
+       <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
+       </li>
+       <li>Fixed-width scaling 
+       <p>This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360 px screen width.</p>
+       <p>You can also use fixed-width scaling if you do not want to scale your application or if you want to set your own scale. In this case, declare a viewport but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to <span style="font-family: Courier New,Courier,monospace">device-width</span> as follows:</p>
+       <pre class="prettyprint lang-html">&lt;meta name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
+       <p>To enable fixed-width scaling, the header must contain the <span style="font-family: Courier New,Courier,monospace">&lt;meta name=&quot;viewport&quot;&gt;</span> element:</p>
+       <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=360, initial-scale=1, user-scalable=no&quot;&gt;</pre>
+       </li>
+</ul>
+
+<h2 id="import_tau">Importing TAU</h2>
+<p>You can import TAU with HTML. For better performance, all CSS files must be included in header and all scripts tags must be put before the body element&#39;s close tag:</p>
+<pre class="prettyprint">
+&lt;!DOCTYPE&nbsp;html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;HTML&nbsp;BODY&nbsp;CONTENT&nbsp;--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>In HTML, use the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;link&gt;</span> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
+<ul>
+       <li>TAU library: <span style="font-family: Courier New,Courier,monospace">tau(.min).js</span> <p>This element is mandatory, as it imports the TAU library, which you need to use the TAU JavaScript Interface.</p></li>
+       <li>TAU theme: <span style="font-family: Courier New,Courier,monospace">tau(.min).css</span> <p>This element is also mandatory, as it imports the TAU theme.</p></li>
+</ul>
+
+<h2 id="custom_js">Running Custom JavaScript and CSS</h2>
+<p>You can add an additional <span style="font-family: Courier New,Courier,monospace">&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</span> or <span style="font-family: Courier New,Courier,monospace">&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</span> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> elements, as you can use any TAU APIs provided by the default libraries.</p>
+<p>To load your JavaScript file, include the file in the <span style="font-family: Courier New,Courier,monospace">&lt;script&gt;</span> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
+<pre class="prettyprint">&lt;script src=&quot;{YOUR_SCRIPT_PATH}&quot;&gt;&lt;/script&gt;</pre>
+
+<h2 id="fill_content">Creating a Page in the Body</h2>
+
+<p>The body section of the HTML file contains 1 or more pages.</p>
+<p>To create a page in &lt;body&gt;, you can use the &quot;ui-page&quot; class with the &lt;div&gt; element:</p>
+ <pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>Each pages has a header, mandatory content, and a footer: </p>
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello&nbsp;TAU!&lt;/p&gt;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>The following example shows a basic sample code for Hello World : </p>
+<pre class="prettyprint">
+&lt;!DOCTYPE&nbsp;html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,&nbsp;user-scalable=no&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;myapp.css&quot;&nbsp;/&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello&nbsp;TAU&lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-page&quot;&nbsp;id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello&nbsp;TAU!&lt;/p&gt;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/helper_ww.htm b/org.tizen.ui.guides/html/web/tau/helper_ww.htm
new file mode 100755 (executable)
index 0000000..ba91563
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/helper_ww.htm
@@ -0,0 +1,239 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Helper Script</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview API for Wearable Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_marquee.htm">Marquee API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Helper Script</h1>
+
+<p>You can use the TAU helper script to support some components for the Web applications. SnapListMarqueeStyle provides creating marquee-able and expandable list style with SnapListview.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>You can use the helper script as follows:</p>
+
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var helperInstance = tau.helper.<i>NameSpace</i>
+&lt;/script&gt;
+</pre>
+
+<p>The SnapListMarqueeStyle helper provides a helper script to support some creating usable components for list style. It supports making the list view more effective using the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_marquee.htm">Marquee</a> components.</p>
+
+       <table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">This helper script is supported since Tizen 2.3.</td>
+               </tr>
+               </tbody>
+       </table>
+       
+<p>The following example shows how to create your own style listview with SnapListMarqueeStyle. In the example, text of list item scrolls horizontally and the sub text appears if the list item is placed in the middle of the screen.</p>
+
+<p>To create a SnapListMarqueeStyle:</p>
+       
+<ol>
+<li>Edit the HTML code to add the SnapListMarqueeStyle component to your application screen.
+<p>You can add a multiline style listview as follows.</p>
+
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snaplistTest&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;1.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;2.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;3.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;4.SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set your list animation style:
+<pre class="prettyprint">.ui-listview.expand-list li.li-has-2line .ui-marquee
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 16px, 0);
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease .5s;
+}
+.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-2line .ui-li-sub-text
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -20px, 0);
+&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease .5s;
+}
+.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+</pre>
+</li>
+
+<li>Edit the JavaScript code to make your list into a SnapListMarqueeStyle component and manage the list events:
+<pre class="prettyprint">
+&lt;script&gt;
+var page = document.getElementById(&quot;snaplistTest&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;list = document.getElementById(&quot;snapList&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+
+page.addEventListener(&quot;pageshow&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+});
+
+page.addEventListener(&quot;pagehide&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;listHelper.destroy();
+});
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+
+<p>The following table shows the options you have in creating your SnapListMarqueeStyle component.</p>
+
+       <table>
+               <tbody>
+               <tr>
+                       <th>Option</th>
+                       <th>Input type</th>
+                       <th>Default value</th>
+                       <th>Description</th>
+               </tr>
+
+               <tr>
+                       <td><span style="font-family: Courier New,Courier,monospace">marqueeDelay</span></td>
+                       <td>number</td>
+                       <td>0</td>
+                       <td>Sets the delay time for marquee component. The unit of time is millisecond.</td>
+               </tr>
+
+               </tbody>
+       </table>
+
+<p>You can use the following methods with the SnapListMarqueeStyle:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">create</span>
+               <p>Creates the related components for SnapListMarqueeStyle.</p>
+               <p>This method is supported since Tizen 2.3.</p>
+               <p>The following code example shows the use of the method:</p>
+<pre class="prettyprint">
+&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;snapList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;some element or text&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+
+&nbsp;&nbsp;&nbsp;/* Create the helper */
+&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+&lt;/script&gt;
+</pre>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">destroy</span>
+               <p>Destroys the related components for SnapListMarqueeStyle.</p>
+               <p>This method is supported since Tizen 2.3. It has no return value.</p>
+               <p>The following code example shows the use of the method:</p>
+               <pre class="prettyprint">
+&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;snapList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;some element or text&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+
+&nbsp;&nbsp;&nbsp;/* Create the helper */
+&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+
+&nbsp;&nbsp;&nbsp;/* Destroy the helper */
+&nbsp;&nbsp;&nbsp;listHelper.destroy();
+&lt;/script&gt;
+</pre>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/list_ww.htm b/org.tizen.ui.guides/html/web/tau/list_ww.htm
new file mode 100755 (executable)
index 0000000..a61ece5
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/list_ww.htm
@@ -0,0 +1,200 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>List</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>List</h1>
+
+<p>You can create a snap list component with the marquee component using the SnapListview API and the <a href="helper_ww.htm">helper script</a>.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure shows the layout of the list component in a rectangular and circular UI.</p>
+<p class="figure">Figure: List component in rectangular and circular devices</p>
+<p align="center"><img alt="List component in a rectangular device" src="../../images/rectangular_list.png" /> <img alt="List component in a circular device" src="../../images/round_list.png" /></p>
+
+<p>To implement the list component:</p>
+
+<ol>
+<li>Edit the HTML code to add the list component to your application screen:
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snapListPage&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Snap List&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;1.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;2.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;3.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;4.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;5.3line SnapListview with Marquee SnapListview with Marquee&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the list:
+<pre class="prettyprint">
+.ui-listview li .li-text-sub 
+{
+&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
+&nbsp;&nbsp;&nbsp;overflow: hidden;
+&nbsp;&nbsp;&nbsp;line-height: 32px;
+&nbsp;&nbsp;&nbsp;color: rgb(51, 51, 51);
+}
+
+.ui-listview li.li-has-3line 
+{
+&nbsp;&nbsp;&nbsp;padding-top: 0;
+&nbsp;&nbsp;&nbsp;padding-bottom: 0;
+&nbsp;&nbsp;&nbsp;height: 115px;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-marquee
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 30px, 0);
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-marquee
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:nth-child(2)
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -10px, 0);
+&nbsp;&nbsp;&nbsp;opacity: 0;
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:nth-child(2)
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:last-child
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -42px, 0);
+&nbsp;&nbsp;&nbsp;opacity: 0;
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:last-child
+{
+&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+}
+</pre>
+</li>
+
+<li>Edit the JavaScript code to manage the list events and other functionality:
+<pre class="prettyprint">
+var page = document.querySelector(&quot;#snapListPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+
+page.addEventListener( &quot;pagebeforeshow&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;);
+
+&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+&nbsp;&nbsp;&nbsp;}
+});
+
+page.addEventListener( &quot;pagehide&quot;, function() 
+{
+&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (listHelper) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+});
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/managing_page_w.htm b/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
new file mode 100755 (executable)
index 0000000..2de840c
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
@@ -0,0 +1,262 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Managing Pages: Creating and Managing a Page Element</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#structure">Page Structure</a></li>
+            <li><a href="#createone">Creating Single Page</a></li>
+            <li><a href="#createtwo">Creating Multiple Pages in One HTML Code</a></li>
+            <li><a href="#pageRouting">Page Routing</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework (TAU) API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Managing Pages: Creating and Managing a Page Element</h1>
+
+<p>The basic building block of an application UI in the TAU library is the <span style="font-family: Courier New,Courier,monospace">Page</span> element, which includes all other elements. The element is optional and extendable, so you can have any element for grouping controls you want. </p>
+
+<h2 id="structure">Page Structure</h2>
+<p>The page consist of:</p>
+<ul>
+<li>Header area
+<p>Shows the user which page is currently open. The header can contain buttons, menus, and toolbars. The header is optional.</p></li>
+<li>Content area
+<p>Contains the main application content. The content area has an optional scroll bar.</p></li>
+<li>Footer area
+<p>Contains a status line or buttons. The footer is optional.</p></li>
+</ul>
+<p>All the page areas are specified by a corresponding <span style="font-family: Courier New,Courier,monospace">class</span> attribute.</p>
+
+<p class="figure">Figure: Page content</p>
+<p align="center"><img src="../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
+
+<p>If there is no <span style="font-family: Courier New,Courier,monospace">Page</span> element in the markup, TAU creates one. For example, if no <span style="font-family: Courier New,Courier,monospace">Page</span> element exists:</p>
+<pre class="prettyprint">&lt;span&gt;I have no page&lt;/span&gt;</pre>
+<p>TAU creates a page:</p>
+<pre class="prettyprint">&lt;div class="ui-page"&gt;&lt;span&gt;I have no page&lt;/span&gt;&lt;/div&gt;
+</pre>
+
+
+<h2 id="createone">Creating a Single Page</h2>
+
+
+<p>To create a page:</p>
+<ol>
+<li><p>Create a single page with the following code:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;Simple page
+&lt;/div&gt;
+</pre>
+
+<p>To create a page for your application, use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> value. TAU uses that information to properly acquire the <span style="font-family: Courier New,Courier,monospace">div</span> element and bind the DOM element to its JavaScript component implementation.</p>
+</li>
+<li><p>Create a header area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-header&quot;</span> attribute:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;This is a header&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+<li><p>Create a footer area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-footer&quot;</span> attribute:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;This is a footer&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+
+<li><p>Create the main content area by using the <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-content&quot;</span> attribute:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;MyApplication header&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello world!
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;Application status line&lt;/div&gt;
+&lt;/div&gt;
+</pre></li>
+<li><p>The previous example shows a full page structure. The header and footer areas can contain multiple UI components, such as buttons or images.</p>
+<p>The following example shows a title bar with a <strong>More Options</strong> button and an icon:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title ui-icon&quot; style=&quot;background-image: url(image.png);&quot;&gt;Title&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-more ui-icon-overflow&quot;&gt;More Options&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;MyApplication content&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li>
+<p>You can also create a popup for your page:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;Popup Open Page&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#popup&quot; class=&quot;ui-btn&quot; data-rel=&quot;popup&quot;&gt;Popup Open&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;popup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Popup Page&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;Popup Content&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>The popup works because TAU opens (makes visible) the page whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information see <a href="#pageRouting">Page Routing</a>.</p>
+</li>
+</ol>
+
+<h2 id="createtwo">Creating Multiple Pages in One HTML Code</h2>
+
+
+<p>You can implement a template containing multiple <span style="font-family: Courier New,Courier,monospace">page</span> containers in the application&#39;s <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
+<p>In a multi-page layout, the main page is defined with the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class. If no page has the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.</p>
+<pre class="prettyprint">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<h2 id="pageRouting" name="basic_page_routing">Page Routing</h2>
+
+<p>TAU is basically a UI framework, but since its purpose is to ease application building, it also provides basic functionality for changing pages in multi-page applications. The mechanics behind page routing are simple, and works without any additional JavaScript code. You can use the JavaScript API to get more powerful page routing functionalities.</p>
+
+<p>To manage page routing:</p>
+
+<ul>
+<li>To route without JavaScript:
+<p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <span style="font-family: Courier New,Courier,monospace">#hashtag</span> changes and tries to display the page that has the <span style="font-family: Courier New,Courier,monospace">id</span> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
+<p>TAU uses every <span style="font-family: Courier New,Courier,monospace">&lt;a&gt;</span> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <span style="font-family: Courier New,Courier,monospace">href</span> attribute work with the framework router. The active page has a <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
+<pre class="prettyprint">&lt;!--pageOne.html--&gt;
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageTwo.html&quot;&gt;Go to page two&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!--pageTwo.html--&gt;
+&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageOne.html&quot;&gt;Go to page one&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>With multiple pages in one HTML code, you can use only the ID of the page in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#two&quot;&gt;Go to page two&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#first&quot;&gt;Go to page one&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+<li>To route using the API:
+<p>You can change pages through the TAU API by using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method:</p>
+<pre class="prettyprint">&lt;!--pageTwo.html--&gt;
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You are viewing the first page of the example.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;first-button&quot;&gt;Click here to change to page two&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el1 = document.getElementById(&quot;first-button&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el1.addEventListener(&quot;click&quot;, function ()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageTwo.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+
+&lt;!--pageTwo.html--&gt;
+&lt;div class=&quot;ui-page&quot; id=&quot;second&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the second page of the example.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;second-button&quot;&gt;Click here to change to page one&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el2 = document.getElementById(&quot;second-button&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el2.addEventListener(&quot;click&quot;, function ()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageOne.html&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>To load pages from external resources:
+<p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <span style="font-family: Courier New,Courier,monospace">base</span> element&#39;s <span style="font-family: Courier New,Courier,monospace">href</span> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
+<p>To load pages from external resources, define the proper local address in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute of the link:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot;&gt;Change to external&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>To create an external link that is not supposed to be handled by the TAU router, use the <span style="font-family: Courier New,Courier,monospace">rel=&quot;external&quot;</span>, <span style="font-family: Courier New,Courier,monospace">data-ajax=&quot;false&quot;</span>, or <span style="font-family: Courier New,Courier,monospace">target=&quot;_self&quot;</span> attribute:</p>
+<pre class="prettyprint">&lt;div class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot; target=&quot;_self&quot;&gt;Change to external&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm b/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
new file mode 100755 (executable)
index 0000000..c67ae68
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
@@ -0,0 +1,265 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>More Options</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+               <div id="profile">
+                               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+               </div>
+
+               <div id="toc_border"><div id="toc">
+                               <p class="toc-title">Related Info</p>
+                               <ul class="toc">
+                                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_viewSwitcher.htm">ViewSwitcher API for Wearable Web</a></li>
+                               </ul>
+               </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>More Options</h1>
+
+
+<p>In rectangular UI, you can implement more options by using the button and popup components. For a circular UI, use the ViewSwitcher API for implementing the more options button.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure shows the more options components in a rectangular and circular UI.</p>
+<p class="figure">Figure: More options component in rectangular and circular devices</p>
+<p align="center"><img alt="More options component in a rectangular device" src="../../images/rectangular_moreoption.png" /> <img alt="More options component in a circular device" src="../../images/round_moreoption.png" /></p>
+
+<p>To implement the more options components:</p>
+<ol>
+
+<li>Edit the HTML code to add the more options component to your application screen:
+<pre class="prettyprint">
+&lt;div id=&quot;moreoptionsPage&quot; class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot;  href=&quot;./moreoptions.css&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header ui-has-more&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;More Options&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-more ui-icon-overflow&quot;&gt;More Options&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!-- Rectangular Profile --&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;moreoptionsPopup&quot; class=&quot;ui-popup&quot; data-transition=&quot;slideup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Options&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!-- Circular Profile --&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;moreoptionsDrawer&quot; class=&quot;ui-drawer&quot; data-drawer-target=&quot;#moreoptionsPage&quot; data-position=&quot;right&quot; data-enable=&quot;true&quot; data-drag-edge=&quot;1&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;pageIndicator&quot; class=&quot;ui-page-indicator&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;viewSwitcher&quot; class=&quot;ui-view-switcher&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-view custom-view&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=&quot;option-button&quot;&gt;1&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-view custom-view ui-view-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=&quot;option-button&quot;&gt;2&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-view custom-view&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=&quot;option-button&quot;&gt;3&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-view custom-view&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=&quot;option-button&quot;&gt;4&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-view custom-view&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=&quot;option-button&quot;&gt;5&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the buttons:
+
+<pre class="prettyprint">
+#moreoptionsDrawer 
+{
+&nbsp;&nbsp;&nbsp;display: none;
+}
+
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;#moreoptionsDrawer 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: rgba(255, 255, 255, 0.1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 100%;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;#moreoptionsPopup 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.sections,
+&nbsp;&nbsp;&nbsp;.options 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.option-button 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 140px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-appearance: none;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: transparent;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #000000;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.ui-view-switcher .ui-view.custom-view 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 140px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 140px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -webkit-calc(50% - 70px);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Edit the JavaScript code to manage the option button events and other functionality:
+
+<pre class="prettyprint">
+(function()
+{
+&nbsp;&nbsp;&nbsp;var page = document.querySelector(&quot;#moreoptionsPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup = page.querySelector(&quot;#moreoptionsPopup&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = page.querySelector(&quot;#moreoptionsDrawer&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler = page.querySelector(&quot;.ui-more&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elPageIndicator = page.querySelector(&quot;#pageIndicator&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;views = page.querySelectorAll(&quot;.ui-view&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewSwitcherElement = page.querySelector(&quot;#viewSwitcher&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawerMoreHelper;
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var popupWidget,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 }),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastActiveIndex,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewSwitcher;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageIndicator.setActive(1);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawerMoreHelper = tau.helper.DrawerMoreStyle.create(drawer, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler: &quot;.ui-more&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewSwitcher = tau.widget.ViewSwitcher(viewSwitcherElement);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Using a rotary event */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, function(event) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var direction = event.detail.direction,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activeIndex = viewSwitcher.getActiveIndex();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(direction === &quot;CW&quot;) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (activeIndex &lt; views.length - 1) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewSwitcher.setActiveIndex(activeIndex + 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (activeIndex &gt; 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewSwitcher.setActiveIndex(activeIndex - 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastActiveIndex = activeIndex;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Shape is rect */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popupWidget = tau.widget.Popup(popup);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.event.on(handler, &quot;click&quot;, function(e)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popupWidget.open();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewSwitcherElement.addEventListener(&quot;viewchange&quot;, function(event) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var index = event.detail.index;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (index &lt; 0 || index &gt; views.length - 1) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageIndicator.setActive(event.detail.index);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (drawerMoreHelper) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawerMoreHelper.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;});
+})();
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/notepad_w.htm b/org.tizen.ui.guides/html/web/tau/notepad_w.htm
new file mode 100755 (executable)
index 0000000..eb242ff
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/notepad_w.htm
@@ -0,0 +1,448 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>Creating a UI: Making a Notepad Application</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework (TAU) API</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>Creating a UI: Making a Notepad Application</h1>
+
+<p>The notepad application shows all the notes in the main page, and allows the user to add new notes, edit existing notes, and delete notes by swiping them. The notes on the main page can be scrolled and edited, and a button is provided for adding a new note. After you click a note, it is displayed in the edit page for editing.</p>
+
+<p>To create a simple notepad application using the TAU library:</p>
+
+<ol>
+<li>Generate an application from the Tizen SDK.
+<p>Create a simple basic application that can be used for further development:</p>
+<ol type="a"><li>In the IDE menu, go to
+       <strong>File &gt; New &gt; Tizen Web Project &gt; WEARABLE-2.4 &gt; Wearable UI &gt; Basic Application</strong>.</li>
+       <li>Enter the application name as <strong>Notes</strong> and click <strong>Finish</strong>.</li></ol>
+<p>The IDE creates the application with a default file structure.</p>
+</li>
+<li>Edit the section header for the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
+<p>Because the application runs on mobile or wearable devices, make sure that you have the correct <span style="font-family: Courier New,Courier,monospace">tau.css</span> styles for the corresponding profile:</p>
+<ul><li>Mobile:
+       <pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.min.css&quot;/&gt;</pre></li>
+       <li>Wearable:
+               <pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;/&gt;</pre>
+       </li></ul>
+<p>Add also your own styles for the application:</p>
+<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
+</pre>
+
+<p>The following example shows how the section header looks after editing:</p>
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen basic template generated by Tizen Web IDE&quot;/&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;title&gt;Notepad&lt;/title&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;!--Use &#39;mobile&#39; or &#39;wearable&#39; to choose the device TAU profile--&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.css&quot;/&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
+&lt;/head&gt;</pre>
+</li>
+<li>Create the pages: the main page for displaying the notes and the editing page for adding and editing notes.
+<ol type="a">
+<li>The main page is the first page, defined with the <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class and <span style="font-family: Courier New,Courier,monospace">main</span> id.
+       <ol type="a"><li>Add the title header (<strong>Notes</strong>) for the page:
+<pre class="prettyprint">
+&lt;div id=&quot;main&quot; class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&lt;/div&gt;
+</pre></li>
+               <li>Add content for the main page by adding a <span style="font-family: Courier New,Courier,monospace">div</span> element with
+                       the <span style="font-family: Courier New,Courier,monospace">_ui-content</span> class. Add to this a <span style="font-family: Courier New,Courier,monospace">ul</span> element, which creates the list of notes.
+                       <p>Set the <span style="font-family: Courier New,Courier,monospace">data-scroll=&quot;y&quot;</span> and <span style="font-family: Courier New,Courier,monospace">data-handler=&quot;true&quot;</span> attributes.</p>
+                       <p>The item in the list is represented as a <span style="font-family: Courier New,Courier,monospace">li</span> element. When a note on the main page is clicked, the application triggers the <span style="font-family: Courier New,Courier,monospace">changepage</span> event to the <span style="font-family: Courier New,Courier,monospace">editor</span> page and shows the item.</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
+&lt;/div&gt;
+</pre></li>
+               <li>Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an <span style="font-family: Courier New,Courier,monospace">a</span> element,
+                       which has the <span style="font-family: Courier New,Courier,monospace">id=&quot;newBtn&quot;</span> attribute.
+<pre class="prettyprint">
+&lt;div class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
+&lt;/div&gt;
+</pre></li></ol>
+       <p>The above examples apply to a wearable application. The following example shows the full code for the main page in a mobile application:</p>
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+       <table class="note">
+               <tbody>
+               <tr>
+                       <th class="note">Note</th>
+               </tr>
+               <tr>
+                       <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
+               </tr>
+               </tbody>
+       </table>
+</li>
+
+<li>On the editing page, the header and footer are similar to main page.
+<p> The only difference is that the action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">id=&quot;editor&quot;</span> and <span style="font-family: Courier New,Courier,monospace">class=&quot;ui-page&quot;</span> attributes.</p>
+<p>The editing page is needed for adding or editing a selected note. It has a <span style="font-family: Courier New,Courier,monospace">textarea</span> element to allow the user to edit the selected note.</p>
+
+<pre class="prettyprint">
+&lt;!--This code applies to wearable applications--&gt;
+&lt;div class=&quot;ui-page&quot; id=&quot;editor&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Editor&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id=&quot;editorField&quot; placeholder=&quot;enter note&quot;&gt;&lt;/textarea&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;javascript:void()&quot; id=&quot;saveBtn&quot;&gt;Save&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre></li></ol></li>
+
+<li>Link to the TAU library sources and add the script to the application:
+<pre class="prettyprint">
+&lt;script src=&quot;lib/jquery.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot; data-build-remove=&quot;false&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file is now ready.</p>
+</li>
+
+<li>Add styles for the content:
+<pre class="prettyprint">
+a
+{
+&nbsp;&nbsp;&nbsp;color: #FFF;
+}
+
+#notesList.ui-listview
+{
+&nbsp;&nbsp;&nbsp;width: 100%;
+}
+
+#notesList.ui-listview li
+{
+&nbsp;&nbsp;&nbsp;margin: 0;
+&nbsp;&nbsp;&nbsp;white-space: nowrap;
+}
+
+#notesList.ui-listview li .ui-inline
+{
+&nbsp;&nbsp;&nbsp;position: absolute;
+&nbsp;&nbsp;&nbsp;right: 5px;
+&nbsp;&nbsp;&nbsp;top: 5px;
+}
+
+#notesList.ui-listview li .ui-swipe-item-cover-inner
+{
+&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
+&nbsp;&nbsp;&nbsp;overflow: hidden;
+}
+
+#editor .ui-scrollview-view
+{
+&nbsp;&nbsp;&nbsp;height: 100%;
+}
+
+#editor textarea
+{
+&nbsp;&nbsp;&nbsp;height: 95%;
+&nbsp;&nbsp;&nbsp;width: 100%;
+}
+</pre>
+</li>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">main.js</span> file and create a function to close the application.
+<p>The application is started when the HTML content is ready.</p>
+<pre class="prettyprint">
+document.addEventListener(&quot;DOMContentLoaded&quot;, function ()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var newBtn = document.getElementById(&#39;newBtn&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn = document.getElementById(&#39;saveBtn&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField = document.getElementById(&#39;editorField&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList = document.getElementById(&#39;notesList&#39;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage = document.getElementById(&#39;editor&#39;),
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mainPageId = &#39;#main&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPageId = &#39;#editor&#39;,
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null,
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EMPTY_CONTENT = &#39;(empty)&#39;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_KEY = &#39;notepad&#39;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Get data from local storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @return {Array}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getStorage(key)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return JSON.parse(window.localStorage.getItem(key)) || false;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Add data to local storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @param {Array} data
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function addStorage(data)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Return current page ID
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @returns
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getCurrentPageId()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return $(&#39;.ui-page:visible&#39;)[0].id;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Refresh current page */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function refreshCurrentPage()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#&#39; + getCurrentPageId()).trigger(&#39;create&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Get notes from storage
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @return {Array}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getNotes()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return getStorage(STORAGE_KEY) || [];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear list with notes */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearNotesList()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.innerHTML = &#39;&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete note from storage */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function deleteNote(index)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes.splice(index, 1);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;deleteNote: note not found&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* Edit note using array index
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* @param index
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function editNote(index)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = index;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = getNotes()[index];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;editNote: note not found&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show all notes extracted from local storage */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function showNotes()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes(),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesLen = notes.length,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeCover = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeItem = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = {},
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearNotesList();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i; i &lt; notesLen; i += 1)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = document.createElement(&#39;li&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.addEventListener(&#39;click&#39;, editNote.bind(this, i), false);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = document.createElement(&#39;button&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.className(&#39;ui-btn&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.setAttribute(&#39;data-inline&#39;, &#39;true&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.innerText = &#39;Delete&#39;;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.addEventListener(&#39;click&#39;, deleteNote.bind(this, i), false);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.innerText = notes[i].replace(/\n/g, &#39; &#39;) || EMPTY_CONTENT;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.appendChild(deleteBtn);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.appendChild(li);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst = tau.widget.getInstance(notesList);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.Button(deleteBtn);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst.refresh();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear editor textarea */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearEditor()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = &#39;&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save note to storage */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function saveNote()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (currentIndex !== null)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes[currentIndex] = editorField.value;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes.push(editorField.value);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(mainPageId);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New note button handler */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function newNote()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* On editor page show handler */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function onEditorPageShow()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.focus();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Attach events */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function events()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newBtn.addEventListener(&#39;click&#39;, newNote);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn.addEventListener(&#39;click&#39;, saveNote);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage.addEventListener(&#39;pageshow&#39;, onEditorPageShow);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function (e)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName === &quot;back&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen.application)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (getCurrentPageId())
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case &#39;main&#39;:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.tizen.application.getCurrentApplication().exit();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function init()
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;events();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init();
+&nbsp;&nbsp;&nbsp;}, false);
+</pre>
+<p>Now the application is ready and you can deploy it to a device or Emulator.</p>
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/popup_ww.htm b/org.tizen.ui.guides/html/web/tau/popup_ww.htm
new file mode 100755 (executable)
index 0000000..c80d95e
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/popup_ww.htm
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Popup</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_popup.htm">Popup API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Popup</h1>
+
+<p>You can create bottom and side popup button components with the Popup API.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figures show the layout of the popup component in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: Bottom popup component in rectangular and circular devices</p>
+
+<p align="center"><img alt="Bottom popup in a rectangular device" src="../../images/rectangular_popup_bottom.png"/> <img alt="Bottom popup in a circular device" src="../../images/round_popup_bottom.png"/></p>
+
+<p class="figure">Figure: Side popup component in rectangular and circular devices</p>
+
+<p align="center"><img alt="Side popup component in a rectangular device" src="../../images/rectangular_popup_side.png"/> <img alt="Side popup component in a circular device" src="../../images/round_popup_side.png"/></p>
+
+<p>To implement the popup button component:</p>
+
+<ul>
+<li>To implement a bottom popup button component:
+
+<p>Edit the HTML code to add the bottom popup button component to your application screen. To add the bottom button to the circular UI, you must add the <span style="font-family: Courier New,Courier,monospace">ui-bottom-button</span> class to the popup footer. The popup can have only 1 bottom button.</p>
+<pre class="prettyprint">
+&lt;div id=&quot;bottomBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-bottom-button&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;bottomBtn&quot; class=&quot;ui-btn&quot;&gt;Check&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>To implement a side popup button component: 
+<p>Edit the HTML code to add the side popup button component to your application screen. To add side buttons for the circular UI, you must add the <span style="font-family: Courier New,Courier,monospace">ui-side-button</span> class to the popup footer. The popup can have only 2 side buttons.</p>
+<pre class="prettyprint">
+&lt;style&gt;
+&nbsp;&nbsp;&nbsp;.btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
+&nbsp;&nbsp;&nbsp;.btn-icon-ok::before {-webkit-mask-image: url(./ok.png)}
+&lt;/style&gt;
+&lt;div id=&quot;sideBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-grid-col-2 ui-side-button&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-1&quot; class=&quot;ui-btn btn-icon-cancel&quot;&gt;Cancel&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-2&quot; class=&quot;ui-btn btn-icon-ok&quot;&gt;OK&lt;/button&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+</ul>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/processing_ww.htm b/org.tizen.ui.guides/html/web/tau/processing_ww.htm
new file mode 100755 (executable)
index 0000000..623f378
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/processing_ww.htm
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Processing</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_processing.htm">Processing API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Processing</h1>
+
+<p>You can create a full size processing component with the Processing API.</p>
+
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure shows the layout of the processing component in a rectangular and circular UI.</p>
+<p class="figure">Figure: The processing component in rectangular and circular device</p>
+
+       <p align="center"><img alt="Processing component in a rectangular device" src="../../images/rectangular_processing.png" /> <img alt="Processing component in a circular device" src="../../images/round_processing.png" /></p>
+               
+<p>To implement the processing component:</p>
+<ol>
+<li>Edit the HTML code to add the processing component to your application screen:
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageProcessing&quot; data-enable-page-scroll=&quot;false&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Processing&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing&quot;&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing-text&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Description about progress
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing ui-processing-full-size&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the processing component:
+<pre class="prettyprint">
+.ui-processing-full-size 
+{
+&nbsp;&nbsp;&nbsp;display: none;
+}
+
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;.ui-processing 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.ui-processing.ui-processing-full-size 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm b/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
new file mode 100755 (executable)
index 0000000..3f83ee6
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
@@ -0,0 +1,166 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+       <title>Thumbnail</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_sectionchanger.htm">SectionChanger API for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Thumbnail</h1>
+
+<p>You can create thumbnail component with the SectionChanger API.</p>
+  <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note" colspan="1" rowspan="1">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+
+<p>The following figure shows the layout of the thumbnail component in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: Thumbnail in rectangular and circular devices</p>
+
+<p align="center"><img alt="Thumbnail in a rectangular device" src="../../images/rectangular_thumbnail.png" /> <img alt="Thumbnail in a circular device" src="../../images/round_thumbnail.png" /></p>
+
+
+<p>To implement the thumbnail component:</p>
+<ol>
+<li>Edit the HTML code to add the thumbnail component to your application screen:
+<pre class="prettyprint">
+&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;sectionChangerPage&quot; data-enable-page-scroll=&quot;false&quot; &gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;sectionChanger&quot; class=&quot;ui-content ui-section-changer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;scroller&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;1&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;2&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;3&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Edit the CSS code to set the visual style of the thumbnail:
+<pre class="prettyprint">
+section 
+{
+&nbsp;&nbsp;&nbsp;padding: 0 10px 0 10px;
+&nbsp;&nbsp;&nbsp;height: 100%;
+}
+.thumbnail 
+{
+&nbsp;&nbsp;&nbsp;height: 300px;
+&nbsp;&nbsp;&nbsp;width: 200px;
+&nbsp;&nbsp;&nbsp;background-color: #80482f;
+&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;transform: translate3d(0, -50%, 0);
+&nbsp;&nbsp;&nbsp;position: relative;
+&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;line-height: 300px;
+}
+.ui-section-active .thumbnail
+{
+&nbsp;&nbsp;&nbsp;background-color: #000000;
+&nbsp;&nbsp;&nbsp;border: 1px solid #a06322;
+}
+
+@media all and (-tizen-geometric-shape: circle) 
+{
+&nbsp;&nbsp;&nbsp;section 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.thumbnail 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #802532;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 200px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(0.8) translate3d(0, -60%, 0);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: transform 300ms;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;.ui-section-active .thumbnail'
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1) translate3d(0, -50%, 0);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Edit the JavaScript code to manage the thumbnail events and other functionalities:
+<pre class="prettyprint">
+(function()
+{
+&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;sectionChangerPage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChanger = document.getElementById(&quot;sectionChanger&quot;);
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.SectionChanger(sectionChanger, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fillContent: false
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;});
+})();
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/ui_component_w.htm b/org.tizen.ui.guides/html/web/tau/ui_component_w.htm
new file mode 100755 (executable)
index 0000000..9851f65
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/tau/ui_component_w.htm
@@ -0,0 +1,209 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+    <title>UI Components: Managing UI Components</title>
+</head>
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#creating">Defining UI Components</a></li>
+            <li><a href="#setoption">Setting UI Component Options</a></li>
+            <li><a href="#jquery">Managing UI Components with jQuery</a></li>
+        </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm">Mobile UI Components</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/widget_reference.htm">Wearable UI Components</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+    <h1>UI Components: Managing UI Components</h1>
+
+
+<p>Each UI component in TAU has its own selector for auto detecting in a HTML file. The most popular selectors are <span style="font-family: Courier New,Courier,monospace;">classes</span>. The old style of selectors is the <span style="font-family: Courier New,Courier,monospace;">data-role</span>, which is deprecated. Some UI components have also simple HTML selectors such as <span style="font-family: Courier New,Courier,monospace;">button</span> (button component), or <span style="font-family: Courier New,Courier,monospace;">input[type=checkbox]</span> (CheckboxRadio component).</p>
+
+
+<h2 id="creating">Defining UI Components</h2>
+
+<p>You can define UI components in 2 different ways using selectors:</p>
+<ul>
+<li>With a <span style="font-family: Courier New,Courier,monospace;">class</span> selector
+<p>It is recommended to use the <span style="font-family: Courier New,Courier,monospace;">class</span> selector for each component. Class selectors in TAU are composed with <span style="font-family: Courier New,Courier,monospace;">ui-</span>prefix and &lt;COMPONENT_NAME&gt;.</p>
+<p>The following example shows the creation of some components with a <span style="font-family: Courier New,Courier,monospace;">class</span> selector:</p>
+<pre class="prettyprint">
+&lt;!--&nbsp;Create&nbsp;Expandable&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;class=&quot;ui-expandable&quot;&nbsp;id=&quot;expandable-test&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable&nbsp;head&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!--&nbsp;Create&nbsp;ToggleSwitch&nbsp;component&nbsp;--&gt;
+&lt;select&nbsp;class=&quot;ui-toggleswitch&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;off&quot;&gt;&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;on&quot;&gt;&lt;/option&gt;
+&lt;/select&gt;</pre>
+</li>
+<li>With a <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector
+<p>The <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector in TAU composed with &lt;COMPONENT_NAME&gt; in lowercase.</p>
+<p>The following example shows the creation of some components with a <span style="font-family: Courier New,Courier,monospace;">data-role</span> selector:</p>
+<pre class="prettyprint">
+&lt;!--&nbsp;Create&nbsp;TextEnveloper&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;data-role=&quot;textenveloper&quot;&gt;&lt;/div&gt;
+
+&lt;!--&nbsp;Create&nbsp;Drawer&nbsp;component&nbsp;--&gt;
+&lt;div&nbsp;data-role=&quot;drawer&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;data-role=&quot;listview&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;List&nbsp;item&nbsp;1&lt;/a&gt;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;/div&gt;</pre>
+</li>
+</ul>
+
+<h2 id="setoption">Setting UI Component Options</h2>
+
+<p>TAU supports several ways of setting options for a UI component. For more information, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm">Mobile UI Components</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/widget_reference.htm">Wearable UI Components</a>.</p>
+<p>You have the following options for setting the options:</p>
+<ul>
+<li>Initializing options with the <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute
+<p>Various options can be set with <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute when the component is being created. This type of setting options is called only when the component is created. After creating the component, changing the data attributes on the HTML element do not change the component options.</p>
+<p>The following example shows a SectionChanger code with a <span style="font-family: Courier New,Courier,monospace;">data-</span> option:</p>
+<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&nbsp;data-circular=&quot;true&quot;&nbsp;data-use-tab=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;</pre>
+<p><span style="font-family: Courier New,Courier,monospace;">data-circular</span> and <span style="font-family: Courier New,Courier,monospace;">data-use-tab</span> are the initial options for creating a SectionChanger.</p>
+</li>
+
+
+<li>Setting options with a manual constructor
+<p>Options can be also set as argument to component constructor. When using options as argument you must use the camelCase name.</p>
+<p>The following example shows the use of manual constructor:</p>
+<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;id=&quot;sectionchanger&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;sectionEl&nbsp;=&nbsp;document.getElementById(&quot;sectionchanger&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionEl,&nbsp;
+&nbsp;&nbsp;&nbsp;{&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation:&nbsp;&quot;horizontal&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circular:&nbsp;true
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useTab:&nbsp;true
+&nbsp;&nbsp;&nbsp;});
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>Setting options with a method call
+<p>To set options dynamically, use the <span style="font-family: Courier New,Courier,monospace;">option</span>() method.</p>
+<pre class="prettyprint">&lt;div&nbsp;id=&quot;hasSectionchangerPage&quot;&nbsp;class=&quot;ui-page&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;header&nbsp;class=&quot;ui-header&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
+&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-section-changer&quot;&nbsp;data-orientation=&quot;horizontal&quot;&nbsp;data-circular=&quot;true&quot;&nbsp;data-use-tab=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;class=&quot;ui-section-active&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN&nbsp;PAGE&lt;/h3&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var&nbsp;sectionEl&nbsp;=&nbsp;document.getElementById(&quot;sectionchanger&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget&nbsp;=&nbsp;tau.widget.SectionChanger(sectionEl);
+
+&nbsp;&nbsp;&nbsp;sectionChangerWidget.option("circular", true);
+&lt;/script&gt;
+</pre>
+</li>
+</ul>
+
+<h2 id="jquery">Managing UI Components with jQuery</h2>
+<p>You can use jQuery with TAU for convenience. Also for backward compatibility, TAU supports the jQuery interface for UI components. However, it is strongly recommended to use new TAU style.</p>
+<p>To manage the UI components if the jQuery library is loaded:</p>
+<ol>
+<li>Create the UI component:
+<pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar();
+&lt;/script&gt;</pre>
+</li>
+<li>Use the call methods:
+<pre class="prettyprint">$(&quot;.selector&quot;).componentName(&quot;methodName&quot;,&nbsp;argument1,&nbsp;argument2,&nbsp;...);</pre>
+<pre class="prettyprint">&lt;div&nbsp;class=&quot;ui-indexscrollbar&quot;&nbsp;id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* If the IndexScrollBar component is created */
+&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar("destroy");
+&lt;/script&gt;</pre>
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-25976949-1']);
+    _gaq.push(['_trackPageview']);
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/animation_w.htm b/org.tizen.ui.guides/html/web/w3c/animation_w.htm
new file mode 100755 (executable)
index 0000000..3d34691
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/animation_w.htm
@@ -0,0 +1,336 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Animations Module Level 3: Creating Animations</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#keyframe">Keyframes</a></li>\r
+                       <li><a href="#prop_ani">Animation Properties</a></li>\r
+                       <li><a href="#create">Creating a Logo Animation</a>\r
+                       </li>\r
+               </ul>\r
+               \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#animations">CSS Animations Module Level 3 API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#animations">CSS Animations Module Level 3 API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>CSS Animations Module Level 3: Creating Animations</h1>\r
+\r
+<p>Animations (like <a href="transition_w.htm">transitions</a>) change the presentational value of the CSS properties over time. The principal difference between animations and transitions is that while transitions are triggered implicitly when property values change, animations are explicitly executed when the animation properties are applied. This means that for animations, you must <a href="#create">use animation keyframes to define explicit values for the properties</a> being animated.</p>\r
+\r
+<p>When using the CSS animation properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>\r
+\r
+<h2 name="keyframe" id="keyframe">Keyframes</h2>\r
+<p>The CSS animations work based on <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules defined for specific elements. The rules can define various property changes complementing the simple running of a transition.</p>\r
+<p>If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a <span style="font-family: Courier New,Courier,monospace">from {} to {}</span> rule, where <span style="font-family: Courier New,Courier,monospace">from</span> is the beginning of the animation at 0% and <span style="font-family: Courier New,Courier,monospace">to</span> is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <span style="font-family: Courier New,Courier,monospace">&lt;number&gt;% {}</span> rules that together cover the entire animation iteration from 0% to 100%.</p>\r
+<p>The following code snippet demonstrates how to use keyframes. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_keyframes.html</a></p>\r
+<pre class="prettyprint">\r
+&lt;style type=&quot;text/css&quot;&gt;\r
+\r
+&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {left: 0; top: 0;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {left: 100px; top: 100px;}\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani_case01 \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0% {left: 0; top: 0;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25% {left: 100px; top: 0;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50% {left: 100px; top: 100px;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75% {left: 0; top: 100px;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100% {left: 0; top: 0;}\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&lt;/style&gt;\r
+</pre>\r
+\r
+<h2 name="prop_ani" id="prop_ani">Animation Properties</h2>\r
+\r
+<p>You can define various properties for an animation to control how it is played:</p>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">animation-name</span>\r
+<p>This property uses the name defined in the <span style="font-family: Courier New,Courier,monospace">@-webkit-keyframes</span> rules to play the animation.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">animation-duration</span>\r
+<p>This property defines how long one iteration of the animation takes.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span>\r
+<p>This property defines how many times the animation is repeated. If the value is set as <span style="font-family: Courier New,Courier,monospace">infinite</span>, the repetitions are unlimited.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">animation-timing-function</span>\r
+<p>This property defines the pace of the animation.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">animation-direction</span>\r
+<p>This property defines the replay direction. The <span style="font-family: Courier New,Courier,monospace">reverse</span> value plays the animation from 100% keyframe to 0% keyframe, while the <span style="font-family: Courier New,Courier,monospace">alternate</span> value plays the animation normally during odd iterations, and from 100% keyframe to 0% keyframe during even iterations.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">animation-play-state</span>\r
+<p>This property defines the replay status of the animation. The <span style="font-family: Courier New,Courier,monospace">paused</span> value temporarily stops the animation.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">animation-delay</span>\r
+<p>This property defines the delay time before the start of the animation.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>\r
+<p>This property defines the state of the animation before or after the animation is played. The <span style="font-family: Courier New,Courier,monospace">forwards</span> value maintains the last value of the keyframe rule when the animation is over, while the <span style="font-family: Courier New,Courier,monospace">backwards</span> value fills up the first value of the keyframe rule when the animation with the <span style="font-family: Courier New,Courier,monospace">animation-delay</span> property is in a standby state. The <span style="font-family: Courier New,Courier,monospace">both</span> value covers both the start and the end of the animation.</p></li></ul>\r
+\r
+<p>The following code snippet demonstrates how to use animation properties. For a complete source code, see:</p>\r
+<ul>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_delay.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_direction.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_fill_mode.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_iteration_count.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_name.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_play_state.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_timing_function.html</a></li>\r
+</ul>\r
+\r
+<pre class="prettyprint lang-html">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: boxani;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 5s;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: linear;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-direction: normal;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-delay: 1s;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: none;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01: hover \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-play-state: paused;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: forwards;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;animation-name&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani_case01;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+       \r
+<p>The <span style="font-family: Courier New,Courier,monospace">animation</span> property allows you to define all the animation properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">animation-name</span> | <span style="font-family: Courier New,Courier,monospace">animation-duration</span> | <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">animation-delay</span> | <span style="font-family: Courier New,Courier,monospace">animation-iteration-count</span> | <span style="font-family: Courier New,Courier,monospace">animation-direction</span> | <span style="font-family: Courier New,Courier,monospace">animation-fill-mode</span>. If you omit a property value, a default value is used instead.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;style type=&quot;text/css&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;.box \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 150px; height: 100px; background: Coral; position: relative;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: boxani 3s ease 1s infinite alternate backwards;\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/style&gt;\r
+</pre>\r
+\r
+<h2 id="create" name="create">Creating a Logo Animation</h2>\r
+                               \r
+<p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or Emulator) is switched on:</p>\r
+\r
+<ol>  \r
+<li>No elements are initially shown on the screen.  </li>\r
+<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller.</li>\r
+<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location.</li>\r
+</ol>\r
+<p class="figure">Figure: Logo animation (in mobile applications only)</p> \r
+<p align="center"><img alt="Logo animation" src="../../images/animation1.png" /></p> \r
+<p>To create a logo animation:</p>\r
+<ol>\r
+<li>Create the HTML layout for the animation. To be able to manage the movement of each animation part separately, you must define individual elements for each part.\r
+<pre class="prettyprint">\r
+&lt;div class=&quot;animation-holder&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;\r
+&lt;/div&gt;\r
+</pre>\r
+</li>\r
+<li>Define the basic style for the animation:\r
+<pre class="prettyprint">\r
+.example-body {width: 320px; height: 480px; background: #000; margin: 0 auto; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; border: 2px solid #fff; overflow: hidden;}\r
+.animation-holder {width: 280px; height: 88px; position: absolute; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 50%; top: 50%; margin: -54px 0 0 -140px;} \r
+\r
+.tizen-txt, .tizen-logo {position: absolute; display: block; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat; background-position: 50% 50%}\r
+.tizen-txt.t {width: 48px; height: 56px; background-image: url(images/txt_t.png);}\r
+.tizen-txt.i {width: 15px; height: 56px; background-image: url(images/txt_i.png);}\r
+.tizen-txt.z {width: 46px; height: 56px; background-image: url(images/txt_z.png);}\r
+.tizen-txt.e {width: 45px; height: 56px; background-image: url(images/txt_e.png);}\r
+.tizen-txt.n {width: 54px; height: 58px; background-image: url(images/txt_n.png);}\r
+.tizen-txt.tm {width: 11px; height: 6px; background-image: url(images/txt_tm.png);}\r
+.tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(images/logo_tizen.png); background-size: 100% 100%;}\r
+</pre>\r
+</li>\r
+<li>Create the animation:\r
+<ol type="a">\r
+<li>To ensure that all the animation elements are played within the same time frame, some common properties are defined for the animation. The animation movement time is 7 seconds, and the animation repeats infinitely.\r
+<p>When an animation that repeats itself is activated, it can look unnatural when it suddenly returns to its initial position after finishing an iteration. To make the repetition move naturally, set the <span style="font-family: Courier New,Courier,monospace">animation-direction</span> property to <span style="font-family: Courier New,Courier,monospace">alternate</span>. The alternate direction means that during the odd iterations the animation proceeds in the normal direction (from the 0% keyframe to the 100% keyframe), while during the even iterations the keyframes are played in the opposite direction from 100% to 0%.</p>\r
+<pre class="prettyprint">\r
+.tizen-txt, .tizen-logo \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 7s;\r
+&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;\r
+&nbsp;&nbsp;&nbsp;-webkit-animation-direction: alternate;\r
+}\r
+</pre>\r
+</li>\r
+<li>Create the keyframes to implement the flow for the Tizen logo:\r
+<ul>\r
+<li>During the first 25% of the animation total playing time (7 seconds), the transparency disappears and the Tizen logo appears.</li>\r
+<li>During the 25 - 50% of the playing time, the logo size becomes smaller as the width and height values are reduced, and due to the left and top value, the logo is positioned to the top right corner of the screen.</li>\r
+<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li> \r
+</ul> \r
+<p></p>\r
+<pre class="prettyprint">\r
+@-webkit-keyframes tizen-logo \r
+{\r
+&nbsp;&nbsp;&nbsp;0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}\r
+&nbsp;&nbsp;&nbsp;25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}\r
+&nbsp;&nbsp;&nbsp;50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}\r
+&nbsp;&nbsp;&nbsp;100% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}\r
+}\r
+</pre>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">If the 100% keyframe is not defined, the animation is executed based on the original properties, and the logo size increases to its original size at the end.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table></li>\r
+<li>Create the keyframes to implement the flow for each letter in the word &quot;TIZEN&quot;:\r
+<ul>\r
+<li>To hide the letter initially, the property has been assigned outside the screen at the 0% keyframe. To allow the Tizen logo to appear first, the first letter is introduced at the 30% keyframe.</li>\r
+<li>To create a slight collision animation, the letter element moves to -10 px of the final value at the 40% keyframe before reaching its final 0 px value at the 45% keyframe.</li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> property can be changed for each keyframe point, and is used to determine the pace of the animation. When the letter is actually shown on the screen and moved to its final location, the ease in and out timing functions are used.</li>\r
+</ul>\r
+\r
+<p>To show the letters one at a time, the timing is pushed back a bit more for each consecutive letter:</p>\r
+<pre class="prettyprint">\r
+&lt;!--Letter T--&gt;\r
+@-webkit-keyframes tizen-txt-t \r
+{\r
+&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}\r
+&nbsp;&nbsp;&nbsp;30% {left: 340px; top: 31px; animation-timing-function: ease-in;}\r
+&nbsp;&nbsp;&nbsp;40% {left: -10px; top: 31px; animation-timing-function: ease-out;}\r
+&nbsp;&nbsp;&nbsp;45% {left: 0; top: 31px;}\r
+&nbsp;&nbsp;&nbsp;100% {left: 0; top: 31px;}\r
+}\r
+\r
+&lt;!--Letter I--&gt;\r
+@-webkit-keyframes tizen-txt-i \r
+{\r
+&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}\r
+&nbsp;&nbsp;&nbsp;40% {left: 340px; top: 31px; animation-timing-function: ease-in;}\r
+&nbsp;&nbsp;&nbsp;50% {left: 47px; top: 31px; animation-timing-function: ease-out;}\r
+&nbsp;&nbsp;&nbsp;55% {left: 57px; top: 31px;}\r
+&nbsp;&nbsp;&nbsp;100% {left: 57px; top: 31px;}\r
+}\r
+\r
+&lt;!--Remaining letters--&gt;\r
+</pre></li>\r
+\r
+<li><p>After creating all the keyframes, define the <span style="font-family: Courier New,Courier,monospace">animation-name</span> property for each element:</p>\r
+<pre class="prettyprint">\r
+.tizen-txt.t \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-t;\r
+}\r
+.tizen-txt.i \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-i;\r
+}\r
+</pre></li>\r
+\r
+</ol></li></ol>\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_practical.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">logo_tizen.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_e.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_i.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_n.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_t.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_tm.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_z.png</a></li>\r
+ </ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/background_w.htm b/org.tizen.ui.guides/html/web/w3c/background_w.htm
new file mode 100755 (executable)
index 0000000..609ad9e
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/background_w.htm
@@ -0,0 +1,188 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#border">CSS Backgrounds and Borders Module Level 3 API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#border">CSS Backgrounds and Borders Module Level 3 API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</h1>\r
+\r
+<p>You can manage the CSS properties for <a href="#create">specifying the border style or background of any HTML element</a>.</p>\r
+\r
+<p>When creating a background for an element, you can use the following properties:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">background-color</span>\r
+<p>Defines the color of the background.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">background-image</span>\r
+<p>Defines the image to be used. You can add images as separate layers to an element. To add multiple images, separate them by commas to add each image as a separate layer. The images are added in the order they are defined.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">background-position</span>\r
+<p>Defines the exact position of the image.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">background-repeat</span>\r
+<p>Defines whether the image is repeated to fill the entire background (in case the image is too small to do it otherwise).</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">background-origin</span>\r
+<p>Defines the position of the initial background for the item.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">background-size</span>\r
+<p>Defines the size of the image in the background.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">background-clip</span>\r
+<p>Defines the area of the cropped background element.</p></li>\r
+</ul>\r
+\r
+<p>The border properties specify the line thickness, style, and color for the element border. You can define the border using 3 separate properties (<span style="font-family: Courier New,Courier,monospace">border-width</span>, <span style="font-family: Courier New,Courier,monospace">border-style</span>, and <span style="font-family: Courier New,Courier,monospace">border-color</span>), or by listing the values for all 3 properties together in 1 <span style="font-family: Courier New,Courier,monospace">border</span> property. To define rounded corners for the border, you can additionally use the <span style="font-family: Courier New,Courier,monospace">border-radius</span> property.</p>\r
+\r
+<p>To define shading for an element, you can define the horizontal and vertical offset, blur radius, and the spread distance values within the <span style="font-family: Courier New,Courier,monospace">box-shadow</span> property. To switch the shadow from outside to inside the element, add the <span style="font-family: Courier New,Courier,monospace">inset</span> keyword to the property too.</p>\r
+\r
+<p>The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the <span style="font-family: Courier New,Courier,monospace">background-repeat</span> property value.</p>\r
+\r
+  <p class="figure">Figure: Background examples</p> \r
+  <p align="center"><img alt="Background examples" src="../../images/css_bg1.png" /></p>\r
+<p>The following code snippet demonstrates how to set the background color, images, borders, and shadings.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;!--Background color--&gt;\r
+#one \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 180px;\r
+&nbsp;&nbsp;&nbsp;height: 40px;\r
+&nbsp;&nbsp;&nbsp;background-color: lightblue;\r
+}\r
+\r
+&lt;!--Background image--&gt; \r
+#one \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 200px;\r
+&nbsp;&nbsp;&nbsp;height: 100px;\r
+&nbsp;&nbsp;&nbsp;background-color: #00F;\r
+&nbsp;&nbsp;&nbsp;background-image: url(t3.png);\r
+}\r
+\r
+&lt;!--Multiple images--&gt; \r
+#multi \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 155px;\r
+&nbsp;&nbsp;&nbsp;height: 100px;\r
+&nbsp;&nbsp;&nbsp;border: 1px solid #000;\r
+&nbsp;&nbsp;&nbsp;background-color: #87CEFA;\r
+&nbsp;&nbsp;&nbsp;background-image: url(t1.png), url(t2.png), url(t3.png);\r
+&nbsp;&nbsp;&nbsp;background-position: center center, 20% 100%, top left;\r
+&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;\r
+}\r
+\r
+&lt;!--Shading and border with rounded corners--&gt;\r
+#shading \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 160px;\r
+&nbsp;&nbsp;&nbsp;height: 40px;\r
+&nbsp;&nbsp;&nbsp;border: 1px solid #000;\r
+&nbsp;&nbsp;&nbsp;border-radius: 20px;\r
+&nbsp;&nbsp;&nbsp;background-color: #88f;\r
+&nbsp;&nbsp;&nbsp;box-shadow: #888 10px 10px;\r
+}\r
+</pre>\r
+\r
+<h2 id="create" name="create">Creating Backgrounds</h2>\r
+\r
+<p>To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>\r
+\r
+<p class="figure">Figure: Background with the parallax effect</p> \r
+<p align="center"><img alt="Background with the parallax effect" src="../../images/css_bg_tutorial1.png" /></p> \r
+\r
+<ol><li>Prepare 3 images (<span style="font-family: Courier New,Courier,monospace">tizen.png</span>, <span style="font-family: Courier New,Courier,monospace">tizen2.png</span>, and <span style="font-family: Courier New,Courier,monospace">dot.png</span>), each with a transparent background.\r
+\r
+<p align="center"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../images/css_bg_tutorial2.png" /></p> </li>\r
+\r
+<li>Create a <span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">id=&quot;parallelexample&quot;</span> and a slider input element with the minimum, maximum, and initial value:\r
+<pre class="prettyprint">\r
+&lt;div id=&quot;parallelexample&quot;&gt;&lt;/div&gt;\r
+&lt;input id=&quot;position&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;200&quot; value=&quot;50&quot;&gt;\r
+</pre></li>\r
+\r
+<li>Define the needed styles for the  <span style="font-family: Courier New,Courier,monospace">div</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section using the <span style="font-family: Courier New,Courier,monospace">parallelexample</span> ID.\r
+<p>Define a background using the prepared images in the correct order. The images are shown in the order they have been added, with the first image on the topmost layer. Use the same order when defining the background position for each image.</p>\r
+<pre class="prettyprint">\r
+#parallelexample\r
+{\r
+&nbsp;&nbsp;&nbsp;width: 300px;\r
+&nbsp;&nbsp;&nbsp;height: 300px;\r
+&nbsp;&nbsp;&nbsp;background-image: url(tizen2_32.png), url(tizen3_32.png), url(dot.png);\r
+&nbsp;&nbsp;&nbsp;background-position: 6.25em 8em, 3.125em 4em, center top;\r
+&nbsp;&nbsp;&nbsp;background-repeat: repeat, repeat, repeat;\r
+&nbsp;&nbsp;&nbsp;border: 1px solid black;\r
+&nbsp;&nbsp;&nbsp;margin: 0px auto;\r
+}\r
+</pre></li>\r
+<li>To create the parallax effect, create a method that moves the background layers by changing the horizontal position values of the images in the <span style="font-family: Courier New,Courier,monospace">div</span> element. To determine the position value change, add an <span style="font-family: Courier New,Courier,monospace">onchange</span> event handler for the slider to determine the change based on the slider handle movement.\r
+<pre class="prettyprint">\r
+function moveLayers() \r
+{\r
+&nbsp;&nbsp;&nbsp;/* Get slider value */\r
+&nbsp;&nbsp;&nbsp;var poz = document.getElementById(&#39;position&#39;);\r
+&nbsp;&nbsp;&nbsp;/* Get the div element */\r
+&nbsp;&nbsp;&nbsp;var example = document.getElementById(&#39;ParallaxExamle&#39;);\r
+&nbsp;&nbsp;&nbsp;/* Add the event handler */\r
+&nbsp;&nbsp;&nbsp;poz.onchange = function()\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var layer1 = this.value/8, layer2 = this.value/16;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;example.style.backgroundPosition = layer1 +&#39;em 8em, &#39; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ layer2 + &#39;em 4em, center top&#39;;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre></li></ol>\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">css_background.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">dot.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen2_32_s.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen3_32.png</a></li>\r
+ </ul>\r
+               \r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/basic_ui_w.htm b/org.tizen.ui.guides/html/web/w3c/basic_ui_w.htm
new file mode 100755 (executable)
index 0000000..3090acb
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/basic_ui_w.htm
@@ -0,0 +1,201 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#selector">Using Pseudo-element Selectors</a></li>\r
+                       <li><a href="#boxmodel">Using Box Model Properties</a>\r
+                       </li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</h1>\r
+\r
+<p>You can apply styles to HTML documents.</p>\r
+<p>The CSS3 version has caused changes in the Selector, Color, Web Form, and Fonts CSS modules. In addition, the CSS3 UI API also handles changes related to the following user interface items:</p>\r
+<ul>\r
+<li>User interface selectors\r
+<p>The CSS Selector is an essential module for applying a CSS to HTML in order to enable the DOM element selection. The <a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#user-interface-selectors" target="_blank">pseudo-element selectors</a> can be used to assign the user interface state. With the selectors, you can <a href="#selector">change the Web form style</a> according to the user input without using JavaScript.</p></li>\r
+\r
+<li>Box model properties\r
+<p>A box model refers to all DOM elements excluding design elements, such as <span style="font-family: Courier New,Courier,monospace">&lt;br&gt;</span> and <span style="font-family: Courier New,Courier,monospace">&lt;i&gt;</span>. The box model area is set as defined in the following figure.</p>\r
+<ul>\r
+<li><strong>Content</strong>: Content area</li>\r
+<li><strong>Padding</strong>: Gap between the content and boundary</li>\r
+<li><strong>Border</strong>: Boundary</li>\r
+<li><strong>Margin</strong>: Overall size of the box model</li>\r
+</ul>\r
+<p class="figure">Figure: Box model structure</p>\r
+<p align="center"><img alt="Figure: Box model structure" src="../../images/box_model_properties_struct.png"/></p>\r
+\r
+<p>You can <a href="#boxmodel">use the box model properties</a> to assign styles to the selected DOM elements:</p>\r
+<ul>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property assigns the box size range.</li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">outline</span> properties make the box outstanding.</li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property handles the text extending outside the box.</li></ul>\r
+</li>\r
+</ul>\r
+\r
+<h2 id="selector" name="selector">Using Pseudo-element Selectors</h2>\r
+                               \r
+<p>To enhance the user experience of your application, you must learn how to use pseudo-element selectors:</p>\r
+<ol>\r
+<li><p>Use the pseudo-classes, such as <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span>, to add different styles based on the state of the DOM elements:</p>\r
+<pre class="prettyprint">input: enabled {border: 1px solid blue}\r
+input: disabled {border: 1px solid red}</pre>\r
+<table class="note"> \r
+    <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">In the versions prior to CSS3, pseudo-elements, such as <span style="font-family: Courier New,Courier,monospace">:hover</span>, <span style="font-family: Courier New,Courier,monospace">:active</span>, and <span style="font-family: Courier New,Courier,monospace">:focus</span>, were used, and required an attribute selector. Since the <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span> classes are not influenced by the <span style="font-family: Courier New,Courier,monospace">display</span> and <span style="font-family: Courier New,Courier,monospace">visibility</span> attributes, they improve the accessibility.</td> \r
+      </tr> \r
+     </tbody> \r
+   </table></li>\r
+<li>To control the state of the HTML5 Web Forms (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <span style="font-family: Courier New,Courier,monospace">:in-range</span> and <span style="font-family: Courier New,Courier,monospace">:out-of-range</span> pseudo-classes. \r
+<p>They check for any values that have exceeded the inserted range. (The following figure applies to mobile applications only.)</p>\r
+<pre class="prettyprint">\r
+&lt;!--HTML--&gt; \r
+&lt;input type=&quot;number&quot; step=&quot;10&quot; min=&quot;10&quot; max=&quot;100&quot;&gt;\r
+</pre>\r
+<pre class="prettyprint">\r
+&lt;!--CSS--&gt;\r
+input[type=&quot;number&quot;]: in-range {border: 3px solid blue; width: 90%}\r
+input[type=&quot;number&quot;]: out-of-range {border: 3px solid red; width: 90%}\r
+</pre>\r
+<p align="center"><img alt="Element ranges (in mobile applications only)" src="../../images/pseudo_elements_selector_range.png"/></p></li>\r
+<li>To apply different styles to required input items and option items, use the <span style="font-family: Courier New,Courier,monospace">:required</span> and <span style="font-family: Courier New,Courier,monospace">:optional</span> pseudo-classes. (The following figure applies to mobile applications only.)\r
+<pre class="prettyprint">\r
+&lt;!--HTML--&gt;\r
+&lt;fieldset&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;legend&gt;required and optional&lt;/legend&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;email: &lt;input type=&quot;email&quot; required&gt;&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;password: &lt;input type=&quot;Password&quot; placeholder=&quot;required area&quot; required&gt;&lt;/label&gt;\r
+\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;date: &lt;input type=&quot;date&quot; placeholder=&quot;You know what to do, huh?&quot;&gt;&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;textarea placeholder=&quot;Comment&quot;&gt;&lt;/textarea&gt;\r
+&lt;/fieldset&gt;</pre>\r
+<pre class="prettyprint">\r
+&lt;!--CSS--&gt;\r
+input: required, textarea: required {border: 1px solid red}\r
+input: optional, textarea: optional {border: 1px solid #777}\r
+</pre>\r
+<p align="center"><img alt="Required and optional elements (in mobile applications only)" src="../../images/pseudo_elements_selector_required.png"/></p></li></ol>\r
+\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">range.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">required_and_optional.html</a></li>\r
+ </ul>\r
+                       \r
+<h2 id="boxmodel" name="boxmodel">Using Box Model Properties</h2>\r
+                               \r
+<p>To enhance the user experience of your application, you must learn how to use box model properties:</p> \r
+<table>\r
+<tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">The properties dependent on mouse and keyboard functions are not discussed in this tutorial.</td> \r
+      </tr> \r
+     </tbody> \r
+   </table>\r
+<ol>\r
+<li>To assign the area that is included in the width and height of the box automatically, use the <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property. To assign the width without a margin, use the <span style="font-family: Courier New,Courier,monospace">box-sizing: border-box</span> property.\r
+<pre class="prettyprint lang-html">\r
+div.content-box {box-sizing: content-box} &lt;!--width (height) = content--&gt;\r
+div.border-box {box-sizing: border-box} &lt;!--width (height) = content + padding + border--&gt;\r
+div.border-box: before {height: 40px}\r
+</pre></li>\r
+\r
+<li>To draw an outline without using up the area, use the <span style="font-family: Courier New,Courier,monospace">outline</span> property:\r
+<pre class="prettyprint">\r
+.Test-Box {outline: 5px dashed red}\r
+.outline: before {outline: 2px dashed red}\r
+.outline-offset: before {outline-offset: 35px}\r
+</pre></li>\r
+\r
+<li>To handle text that exceeds the area of the box model, use the <span style="font-family: Courier New,Courier,monospace">text-overflow</span> property. The <span style="font-family: Courier New,Courier,monospace">text-overflow: ellipsis</span> property is used to indicate the text exceeded the padding area as &#39;...&#39;.\r
+<pre class="prettyprint">div \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 250px;\r
+&nbsp;&nbsp;&nbsp;margin: 20px auto;\r
+&nbsp;&nbsp;&nbsp;padding: 20px 30px;\r
+&nbsp;&nbsp;&nbsp;background-color: #eee;\r
+&nbsp;&nbsp;&nbsp;color: #333;\r
+&nbsp;&nbsp;&nbsp;border: 5px solid #333;\r
+&nbsp;&nbsp;&nbsp;font-weight: bold;\r
+&nbsp;&nbsp;&nbsp;overflow: hidden;\r
+&nbsp;&nbsp;&nbsp;white-space: nowrap;\r
+}\r
+\r
+.clip {text-overflow: clip}\r
+.ellipsis {text-overflow: ellipsis}</pre></li>\r
+</ol>\r
+\r
+<p>The following figure illustrates the box model properties; from left to right, it shows the effects of the box sizing, outline, and text overflow properties.</p>\r
+<p class="figure">Figure: Box model properties (in mobile applications only)</p>\r
+<p align="center"><img alt="Box model properties (in mobile applications only)" src="../../images/box_model_properties.png"/></p>\r
+\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">box_sizing_property.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">outline_property.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">text_overflow_property.html</a></li>\r
+ </ul>\r
+               \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/clipboard_mw.htm b/org.tizen.ui.guides/html/web/w3c/clipboard_mw.htm
new file mode 100755 (executable)
index 0000000..aede950
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/clipboard_mw.htm
@@ -0,0 +1,297 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Clipboard API and events: Transferring Content Between Applications</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/></p>
+    </div>
+
+       <div id="toc_border"><div id="toc">
+       <p class="toc-title">Content</p>
+       <ul class="toc">
+               <li><a href="#copy">Copying Content</a></li>
+               <li><a href="#cut">Cutting Content</a></li>
+               <li><a href="#paste">Pasting Content</a></li>
+               <li><a href="#target">Copying and Pasting Content into an Editable Element</a></li>
+       </ul>
+    <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#clipboard">Clipboard and events API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Clipboard API and events: Transferring Content Between Applications</h1>
+  
+  
+<p>The clipboard and events feature is used for cutting, copying, and pasting content to easily transfer it between Web applications.</p>
+
+  <table class="note">
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th>
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>   
+
+  <p>The main features of Clipboard API and events include:</p>
+  <ul>
+    <li><p>Copying</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">copy</span> event to <a href="#copy">place the selected data on the clipboard</a>.</p></li>
+    <li><p>Cutting</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">cut</span> event to place the selected data on the clipboard, and <a href="#cut">remove the selected content in the document</a>.</p></li>
+    <li><p>Pasting</p>
+<p>You can fire the <span style="font-family: Courier New,Courier,monospace">paste</span> event to <a href="#paste">retrieve data from the clipboard and insert it into a document</a>. The data is retrieved in the format most appropriate to the assigned context.</p>
+<p>The most common way of providing clipboard features in an application is to create an editable element, and allow the user to <a href="#target">copy content and then paste it into the editable element</a>.</p>
+</li>
+  </ul>
+  
+  <h2 id="copy" name="copy">Copying Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">copy</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> event:
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+    </li>
+       <li><p>When you start copying, the <span style="font-family: Courier New,Courier,monospace">copy</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">copyHandler()</span> method is called.</p>
+       <p>Stop the system clipboard basic operation and set the range you want to copy:</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function copyHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">If the current selection is not influenced and there is no selected range, the clipboard imports the <span style="font-family: Courier New,Courier,monospace">setData()</span> method. The copied content cannot be edited apart from adding a <a href="http://www.w3.org/TR/2014/WD-html51-20140617/editing.html#the-datatransferitemlist-interface" target="_blank">DataTransferItemList</a> item.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+<li>Store the data of the selected range: 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
+&nbsp;&nbsp;&nbsp;};
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul>  
+
+ <h2 id="cut" name="cut">Cutting Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">cut</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">cut</span> event:
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;cut&quot;, function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cutHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+
+    </li>
+       <li><p>When you start cutting, the <span style="font-family: Courier New,Courier,monospace">cut</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">cutHandler()</span> method is called.</p>
+       <p>Stop the system clipboard basic operation and set the range you want to cut:</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function cutHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+
+</li>
+<li>Store the data of the selected range: 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
+&nbsp;&nbsp;&nbsp;};   
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Before the <span style="font-family: Courier New,Courier,monospace">setData()</span> method is imported, the basic motion of the system event must be cancelled using the <span style="font-family: Courier New,Courier,monospace">preventDefault()</span> method. Otherwise, the data to be allocated to the clipboard is overwritten by the system clipboard.</td> 
+      </tr> 
+     </tbody>
+</table>
+</li>
+</ol>
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul> 
+
+ <h2 id="paste" name="paste">Pasting Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">paste</span> event:</p> 
+<ol>
+<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">paste</span> event:
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);</pre>
+</li>
+       <li><p>When you start pasting, the <span style="font-family: Courier New,Courier,monospace">paste</span> event is fired and the <span style="font-family: Courier New,Courier,monospace">pasteHandler()</span> method is called.</p>
+       <p>Stop the system clipboard basic operation:</p>
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();</pre>
+</li>
+       <li>Paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
+&nbsp;&nbsp;&nbsp;};              
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul>  
+
+ <h2 id="target" name="target">Copying and Pasting Content into an Editable Element</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p> 
+
+<ol>
+<li><p>Define the editable element into which copied data is to be pasted:</p>
+<pre class="prettyprint">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.log {border: 1px solid #d9d9d9; margin: 10px; padding: 5px;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.target {border: 1px solid #36c; margin: 10px; padding: 5px;}
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Clipboard API&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 300px; height: 100px; border: 1px solid #d9d9d9&quot; contenteditable&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edit Section
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div  class=&quot;target&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;Target Element&lt;/h4&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target contenteditable&quot;&gt;Paste content&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ev-log&quot; class=&quot;log&quot;&gt;Event log&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div contenteditable&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This section is informative
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This specification defines the common clipboard operations of cutting, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copying and pasting, in such a way that they are exposed to Web Applications 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and can be adapted to provide advanced functionalities. 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Its goal is to provide for compatibility where possible with existing implementations.
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;body&gt;
+</pre>
+</li>
+
+<li><p>Add event listeners to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> and <span style="font-family: Courier New,Courier,monospace">paste</span> events:</p>
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var pasteTarget = document.getElementById(&quot;target&quot;);
+&nbsp;&nbsp;&nbsp;var evLogBox = document.getElementById(&quot;ev-log&quot;);    
+
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);
+
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
+&nbsp;&nbsp;&nbsp;}, false);
+</pre>
+</li>
+
+<li>When the <span style="font-family: Courier New,Courier,monospace">copy</span> event occurs, stop the system clipboard basic operation and set the range you want to copy:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;function copyHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();</pre>
+</li>
+<li>Store the data of the selected range: 
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log : copy&quot;;
+&nbsp;&nbsp;&nbsp;};</pre>
+</li>
+<li>When the <span style="font-family: Courier New,Courier,monospace">paste</span> event occurs, stop the system clipboard basic operation and paste the clipboard data to the target using the <span style="font-family: Courier New,Courier,monospace">getData()</span> method:
+<pre class="prettyprint">&nbsp;&nbsp;&nbsp;function pasteHandler(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log : paste&quot;;
+&nbsp;&nbsp;&nbsp;};  
+&lt;/script&gt;
+</pre>
+</li>
+</ol>
+
+<p class="figure">Figure: Copying and pasting</p> 
+<p align="center"><img alt="Copying and pasting" src="../../images/copy_pasting.png" /></p>
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
+ </ul>  
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/color_w.htm b/org.tizen.ui.guides/html/web/w3c/color_w.htm
new file mode 100755 (executable)
index 0000000..1a478a5
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/color_w.htm
@@ -0,0 +1,221 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Color Module Level 3: Specifying Color and Opacity</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">        \r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#color">CSS Color Module Level 3 API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#color">CSS Color Module Level 3 API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>CSS Color Module Level 3: Specifying Color and Opacity</h1>\r
+\r
+<p>You can manage the CSS properties for <a href="#create">specifying the color and opacity of an HTML element</a>, and the CSS color value type.</p>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note"><p>The CSS2 System Color values have been deprecated in favor of the CSS3 UI &#39;appearance&#39; property.</p></td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+\r
+<p>You can specify the color of an element with the following formats:</p>\r
+<ul>\r
+<li>Keyword values\r
+<p>You can use basic keywords, such as <span style="font-family: Courier New,Courier,monospace">red</span>, <span style="font-family: Courier New,Courier,monospace">green</span>, <span style="font-family: Courier New,Courier,monospace">blue</span>, or <span style="font-family: Courier New,Courier,monospace">deepskyblue</span>, as defined in <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">Extended color keywords</a>.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword can be used with all properties that accept a color value (borders, box shadows, outlines, or backgrounds). The computed value of the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is the computed value of the <span style="font-family: Courier New,Courier,monospace">color</span> property. If the <span style="font-family: Courier New,Courier,monospace">currentColor</span> keyword is set on the <span style="font-family: Courier New,Courier,monospace">color</span> property itself, it is treated as <span style="font-family: Courier New,Courier,monospace">color: inherit</span>.\r
+</p>\r
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">transparent</span> keyword with all properties that accept a color value (borders, box shadows, outlines, or backgrounds), to turn the element in question transparent (invisible).</p>\r
+</li>\r
+<li>RGB values\r
+<ul>\r
+<li>In hexadecimal notation\r
+<p>The format is &#39;#&#39; followed by either 3 or 6 hexadecimal characters. The 3-digit RGB notation (#rgb) is converted into a 6-digit form (#rrggbb) by replicating digits. For example, <span style="font-family: Courier New,Courier,monospace">#fc0</span> expands to <span style="font-family: Courier New,Courier,monospace">#ffcc00</span>.</p></li>\r
+<li>In functional notation\r
+<p>The format is &#39;rgb(&#39; followed by a comma-separated list of 3 numerical values (integer or percentage) followed by &#39;)&#39;. The integer value 255 corresponds to 100%, and to F or FF in a hexadecimal notation: <span style="font-family: Courier New,Courier,monospace">rgb(255, 255, 255)</span> = <span style="font-family: Courier New,Courier,monospace">rgb(100%, 100%, 100%)</span> = <span style="font-family: Courier New,Courier,monospace">#FFF</span>. White space characters are allowed around the numerical values.\r
+</p></li>\r
+</ul>\r
+</li>\r
+<li>RGBA values\r
+<p>The RGB color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The RGBA values are defined using functional notation where the final value is the alpha (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">rgba(255, 0, 0, 0.7)</span>.</p>\r
+</li>\r
+<li>HSL value \r
+<p>You can use numerical hue-saturation-lightness (HSL) colors as an alternative to numerical RGB colors. The HSL colors are encoded as a triple (hue, saturation, lightness). The hue is represented as the angle of the color circle, where by definition red=0°=360° and other colors are spread around the circle. The saturation and lightness are represented as percentages, where 100% is full saturation or black lightness, and 0% is a shade of gray or white lightness. 50% lightness is &quot;normal&quot;. For example: <span style="font-family: Courier New,Courier,monospace">hsl(0, 100%, 50%)</span>. \r
+</p></li>\r
+<li>HSLA value\r
+<p>The HSL color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The HSLA values are defined using the HSL notation where a final alpha value is added (range from 0.1 to 1). For example: <span style="font-family: Courier New,Courier,monospace">hsla(120, 100%, 50%, 0.8)</span>.</p></li>\r
+</ul>\r
+ <p>The following code snippet demonstrates how to specify a color for an element. For a complete source code, see:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">color.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">current_color.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsl_color.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsla_color.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgb_color.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgba_color.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">transparent.html</a></li> \r
+ </ul>\r
+<pre class="prettyprint">\r
+&lt;!--Keywords--&gt;\r
+#one\r
+{\r
+&nbsp;&nbsp;&nbsp;color: blue;\r
+&nbsp;&nbsp;&nbsp;background: white;\r
+&nbsp;&nbsp;&nbsp;border: 1px solid springgreen;\r
+}\r
+#one span \r
+{\r
+&nbsp;&nbsp;&nbsp;background: currentColor;\r
+}\r
+#one span.hide\r
+{\r
+&nbsp;&nbsp;&nbsp;color: transparent;\r
+}\r
+\r
+&lt;!--RGB--&gt;\r
+#two\r
+{\r
+&nbsp;&nbsp;&nbsp; color: #ff0000;\r
+}\r
+\r
+&lt;!--RGBA--&gt;\r
+#three\r
+{\r
+&nbsp;&nbsp;&nbsp;color: rgba(100%, 0, 0, 0.5);\r
+}\r
+\r
+&lt;!--HSL--&gt;\r
+#four\r
+{\r
+&nbsp;&nbsp;&nbsp;color: hsl(0, 100%, 50%);\r
+}\r
+\r
+&lt;!--HSLA--&gt;\r
+#five\r
+{\r
+&nbsp;&nbsp;&nbsp;color: hsla(0, 100%, 50%, 0.5);\r
+}\r
+</pre>\r
+\r
+<h2 id="create" name="create">Creating a Color Generator</h2>\r
+\r
+<p>To enhance the user experience of your application, you must learn to create a HSLA color generator to set the color value for an element in the HSLA format.</p>\r
+\r
+<p class="figure">Figure: HSLA color generator</p> \r
+<p align="center"><img alt="HSLA color generator" src="../../images/css_color_tutorial1.png" /></p>\r
+\r
+\r
+\r
+<ol><li>To create the color generator, define 2 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> elements for displaying the HSLA value as text and in a color box. You also need 4 slider inputs for defining the HSLA color:\r
+<ul>\r
+<li>The first input has a range of 0 - 360 and represents hue.</li>\r
+<li>The second and third inputs have a range of 0 - 100 and represent saturation and lightness.</li>\r
+<li>The last input has a range of 0 - 10 and represents alpha transparency.\r
+<p>The range should be 0.1 - 1, but the minimum value of the <span style="font-family: Courier New,Courier,monospace">min</span> attribute is 0 so the value can be divided by 10.</p></li></ul>\r
+\r
+<pre class="prettyprint lang-html">\r
+&lt;div id=&quot;color-generator&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;text-box&quot;&gt;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;color-box&quot;&gt;&lt;/div&gt;\r
+\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Hue&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;input id=&quot;hue&quot; value=&quot;0&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;360&quot;&gt;\r
+\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Saturation&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;input id=&quot;saturation&quot; value=&quot;100&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;\r
+\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Lightness&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;input id=&quot;lightness&quot; value=&quot;50&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;\r
+\r
+&nbsp;&nbsp;&nbsp;&lt;label&gt;Alpha&lt;/label&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;input id=&quot;alpha&quot; value=&quot;10&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;10&quot;&gt;\r
+&lt;/div&gt;\r
+</pre></li>\r
+<li>Obtain the values from the slider inputs with the <span style="font-family: Courier New,Courier,monospace">getElementById</span> method. Remember to divide the alpha value by 10 to reach the correct range of 0.1 - 1.\r
+<pre class="prettyprint">\r
+var h = document.getElementById(&#39;hue&#39;).value,\r
+&nbsp;&nbsp;&nbsp;&nbsp;s = document.getElementById(&#39;saturation&#39;).value,\r
+&nbsp;&nbsp;&nbsp;&nbsp;l = document.getElementById(&#39;lightness&#39;).value,\r
+&nbsp;&nbsp;&nbsp;&nbsp;a = document.getElementById(&#39;alpha&#39;).value / 10;\r
+</pre></li>\r
+<li>Set the HSLA text and the color of the color box by defining the color from the inputs in the HSL and HSLA formats.\r
+<p>If the alpha is 1, the HSL format is displayed. Otherwise, the HSLA format is used.</p>\r
+<pre class="prettyprint">\r
+/* Define formats */\r
+hsl = &#39;hsl(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%)&#39;;\r
+hsla = &#39;hsla(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%, &#39; + a + &#39;)&#39;;\r
+\r
+/* Set the color of the box */\r
+cBox = document.querySelector(&#39;#color-box&#39;),\r
+\r
+/* Set the text */\r
+tBox = document.querySelector(&#39;#text-box&#39;);\r
+</pre></li>\r
+\r
+<li>Add an event handler to the input sliders to change the displayed text and color box color when the slider values change.\r
+<pre class="prettyprint">\r
+var inputs = document.querySelectorAll(&#39;#color-generator input[type=range]&#39;);\r
+                       \r
+for (i = 0; i &lt; inputs.length; i++)\r
+{\r
+&nbsp;&nbsp;&nbsp;inputs[i].onchange = function()\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show color */\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre></li></ol>\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following file:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">css_color.html</a></li>   \r
+ </ul>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/flexible_w.htm b/org.tizen.ui.guides/html/web/w3c/flexible_w.htm
new file mode 100755 (executable)
index 0000000..5bd3406
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/flexible_w.htm
@@ -0,0 +1,355 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Flexible Box Layout Module: Adjusting the Layout</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#usecont">Using the Flex Container</a></li>\r
+                       <li><a href="#item">Using the Flex Items</a></li>\r
+                       <li><a href="#create">Creating a Flexible Layout with CSS3</a>\r
+                       </li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">        \r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">CSS Flexible Box Layout Module API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">CSS Flexible Box Layout Module API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>CSS Flexible Box Layout Module: Adjusting the Layout</h1>\r
+\r
+<p>CSS attributes, such as <span style="font-family: Courier New,Courier,monospace">float</span>, <span style="font-family: Courier New,Courier,monospace">display</span>, and <span style="font-family: Courier New,Courier,monospace">position</span>, can be used to adjust and align the screen layout according to various resolutions. However, operating the layout accurately among changing screen sizes is difficult.</p>\r
+\r
+<p>Tizen supports the CSS Flexible Box Layout Module API that enables you to create an easily manageable flexible layout, which fluidly adjusts the layout according to viewport size changes. When you <a href="#create">create and use a flexible box layout</a>, the alignment method or object (flex item) size within a specific area (flex container) can be adjusted.</p>\r
+<p>The main components of the flexible box layout include:</p>\r
+<ul>\r
+<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-containers" target="_blank">Flex container</a>, which refers to flex or inline-flex DOM elements assigned by the display.<p>You can <a href="#usecont">use the flex container</a> to assign a flex area and the flex items included in it. The flex container properties are used to assign the indication area and alignment method.</p></li>\r
+<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items" target="_blank">Flex item</a>, which refers to the child nodes of the flex container.\r
+<p>The flex item changes its size fluidly according to the area of the flex container. You can <a href="#item">define flex item properties</a> to assign the sizes of the respective items and the alignment method.</p></li>\r
+</ul>\r
+<p class="figure">Figure: Flexible box layout</p>\r
+<p align ="center"><img alt="Flexible box layout" src="../../images/flex_container.png"/></p>\r
+\r
+<h2 id="usecont" name="usecont">Using the Flex Container</h2>\r
+<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex container:</p>\r
+\r
+<ol>\r
+<li>Assign the area (flex container) where the flexible box layout is applied by using the <span style="font-family: Courier New,Courier,monospace">display: flex</span> property:\r
+<pre class="prettyprint">&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}\r
+&lt;/style&gt;\r
+\r
+&lt;div class=&quot;flex_container&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>D&lt;/div&gt;\r
+&lt;div&gt;</pre>\r
+\r
+<p>The child nodes within the assigned flex container become flex items.</p>\r
+</li>\r
+<li><p>Define the necessary properties for the flex container to assign the alignment of the flex items within it:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">flex-direction</span> property sets the alignment direction of the flex items:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">row</span>: Align from left to right.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">row-reverse</span>: Align from right to left.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">column</span>: Align from top to bottom.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">column-reverse</span>: Align from bottom to top.</li>\r
+</ul></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property sets the line changing of the flex items:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">nowrap</span>: Reduces the size of the flex items without changing lines.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the cross axis direction of the current writing mode.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the opposite cross axis direction than in the <span style="font-family: Courier New,Courier,monospace">wrap</span> value.</li>\r
+</ul></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">justify-content</span> property sets the handling of gaps between the flex items on the main axis:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Gathers the items at the alignment starting point.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Gathers the items at the alignment finishing point.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">center</span>: Gathers the items in the center.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">space-between</span>: Aligns the start and end item at both ends, and creates equal gaps in between the rest of the items.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">space-around</span>: Creates equal gaps between all items.</li>\r
+</ul>\r
+<table class="note"> \r
+    <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">This property is similar to <span style="font-family: Courier New,Courier,monospace">text-align</span>, but the alignment direction and the starting point are based on the <span style="font-family: Courier New,Courier,monospace">flex-direction</span> and <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> properties.</td> \r
+      </tr> \r
+     </tbody> \r
+   </table></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">align-content</span> property sets the handling of gaps between the flex items on the cross axis. It has the same values as the <span style="font-family: Courier New,Courier,monospace">justify-content</span> property, and 1 additional value:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the size of the flex items and aligns them without gaps.</li>\r
+</ul></li>\r
+<li id="alignitems"><span style="font-family: Courier New,Courier,monospace">align-items</span> property sets the relative location and size between the flex items on the cross axis:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Aligns the items vertically to the top.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Aligns the items vertically to the bottom.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">center</span>: Aligns the items vertically to the middle.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">baseline</span>: Aligns the items vertically to the baseline.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the height of the flex items and aligns them without gaps.</li>\r
+</ul>\r
+<table class="note"> \r
+    <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">If the <span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property is set to <span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>, the start and end points of the alignment are reversed.</td> \r
+      </tr> \r
+     </tbody> \r
+   </table></li></ul></li></ol>\r
+<p>The following figure shows examples of flex containers and how their flex items have been aligned.</p>\r
+<p class="figure">Figure: Flex container properties (in mobile applications only)</p> \r
+<p align="center"><img alt="Flex container properties (in mobile applications only)" src="../../images/flexcontainer_properties.png"/></p>\r
+\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_2.html</a></li>\r
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_3.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_4.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_5.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_6.html</a></li>  \r
+ </ul>\r
+               \r
+                               <h2 id="item" name="item">Using the Flex Items</h2>\r
+                               \r
+                       <p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex items:</p>\r
+\r
+<ol>\r
+<li>Assign the area (flex container) where the flexible box layout is applied, and define the flex items for it:\r
+<pre class="prettyprint">&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}\r
+&lt;/style&gt;\r
+\r
+&lt;div class=&quot;flex_container&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;\r
+&lt;div&gt;</pre>\r
+</li>\r
+\r
+<li><p>Define the necessary properties for the flex items:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">align-self</span> property is similar as the <a href="#usecont">align-items</a> property of the flex container.\r
+<table class="note"> \r
+    <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">If both the <span style="font-family: Courier New,Courier,monospace">align-self</span> and <span style="font-family: Courier New,Courier,monospace">align-items</span> properties are used simultaneously, the <span style="font-family: Courier New,Courier,monospace">align-items</span> property is ignored.</td> \r
+      </tr> \r
+     </tbody> \r
+   </table></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">flex</span> property is a shorthand expression defining the flex item size handling:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">flex-grow</span>: Sets whether the spaces between flex items are filled.</li> \r
+<li><span style="font-family: Courier New,Courier,monospace">flex-shrink</span>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace">flex-basis</span>: Sets the default width of the relevant flex items.</li>\r
+</ul></li></ul></li></ol>\r
+<p>The following figure shows examples of how flex items can be placed and sized within a flex container.</p>\r
+<p class="figure">Figure: Flex items (in mobile applications only)</p>\r
+<p align="center"><img alt="Flex items (in mobile applications only)" src="../../images/flexitem_properties.png"/></p>\r
+\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_2.html</a></li>\r
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_3.html</a></li>           \r
+ </ul>\r
+                       \r
+<h2 id="create" name="create">Creating a Flexible Layout with CSS3</h2>\r
+\r
+<p>To enhance the user experience of your application, you must learn how to create flexible box layout:</p>\r
+<ol>\r
+<li>Define the HTML content for the flexible layout. In this example, create 2 articles areas, 1 for a text list and 1 for an icon list:\r
+<pre class="prettyprint">&lt;div class=&quot;container&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;article class=&quot;events&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;UPCOMING EVENTS&lt;/h2&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;date&quot;&gt;&lt;span&gt;APR&lt;/span&gt;&lt;br&gt; 15&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;title&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Linux Foundation Collaboration Summit &lt;span class=&quot;local&quot;>San Francisco, CA&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other text items--&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;article class=&quot;schedule&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;SCHEDULE&lt;/h2&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;img_list&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;folder.png&quot; alt=&quot;folder&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;alert.png&quot; alt=&quot;alert&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other icons--&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;\r
+&lt;/div&gt;</pre></li>\r
+\r
+<li>Define styles to decorate the article areas. (The following figure applies to mobile applications only.)\r
+<pre class="prettyprint">&lt;!--Border for the article areas--&gt;\r
+.container article &gt; * {border: 1px solid #ccc;}\r
+\r
+&lt;!--Font style for the article area titles--&gt;\r
+.container .events &gt; h2, .container .schedule &gt; h2 \r
+{\r
+&nbsp;&nbsp;&nbsp;padding: 10px 20px;\r
+&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;\r
+}\r
+\r
+&lt;!--List styles--&gt;\r
+.container .events &gt; ul, .container .schedule .img_list  \r
+{\r
+&nbsp;&nbsp;&nbsp;height: 100%; \r
+&nbsp;&nbsp;&nbsp;padding: 10px;\r
+}\r
+\r
+&lt;!--Text style for the text list item title--&gt;\r
+.container .events &gt; ul &gt; li .title \r
+{\r
+&nbsp;&nbsp;&nbsp;color: #51809e;\r
+&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #000;\r
+}\r
+\r
+&lt;!--Text style for the text list item location info--&gt;\r
+.container .events &gt; ul &gt; li .title .local \r
+{\r
+&nbsp;&nbsp;&nbsp;text-indent: 10px;\r
+&nbsp;&nbsp;&nbsp;text-shadow: 0 0 0 #fff;\r
+}\r
+\r
+&lt;!--Styles for the text list item date box--&gt;\r
+.container .events &gt; ul &gt; li .date \r
+{\r
+&nbsp;&nbsp;&nbsp;text-align: center;\r
+}\r
+.container .events &gt; ul &gt; li .date \r
+{\r
+&nbsp;&nbsp;&nbsp;background-color: #ddd;\r
+&nbsp;&nbsp;&nbsp;border-radius: 10px;\r
+&nbsp;&nbsp;&nbsp;box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .5);\r
+}\r
+.container .events &gt; ul &gt; li .date &gt; span \r
+{\r
+&nbsp;&nbsp;&nbsp;background-color: #fff;\r
+&nbsp;&nbsp;&nbsp;border-radius: 5px;\r
+}</pre>\r
+<p align="center"><img alt="Article areas with styles defined (in mobile applications only)" src="../../images/flexible_default_structure.png"/></p></li>\r
+\r
+\r
+<li>Define a flexible alignment for the article areas to support screen orientation changes and ensure that the content fills up the entire available screen area regardless of the orientation:\r
+<ol type="a">\r
+<li>Define the text list items and the icon list as flex containers using the <span style="font-family: Courier New,Courier,monospace">display: -webkit-flex;</span> property:\r
+<ul>\r
+<li>For the text list items, align them vertically in the middle, define a 0 margin at the top for the first item, and center-align the text for the date box.</li>\r
+<li>For the icon list, align the icon list so that the first and last icon are placed at the ends and the gaps between the rest of the icons are equal.</li></ul>\r
+<p>(The following figure applies to mobile applications only.)</p>\r
+<pre class="prettyprint">&lt;!--Flexible alignment of text list--&gt;\r
+.container .events &gt; ul &gt; li \r
+{\r
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;\r
+&nbsp;&nbsp;&nbsp;-webkit-align-items: center;\r
+}\r
+.container .events &gt; ul &gt; li: first-child \r
+{\r
+&nbsp;&nbsp;&nbsp;margin-top: 0;\r
+}\r
+\r
+.container .events &gt; ul &gt; li .date \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-flex: 0 0 20%;\r
+&nbsp;&nbsp;&nbsp;text-align: center;\r
+}\r
+\r
+&lt;!--Flexible alignment of icon list--&gt;\r
+.container .schedule .img_list \r
+{\r
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;\r
+&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;\r
+}</pre>\r
+<p align="center"><img alt="Article areas with a flexible box layout defined (in mobile applications only)" src="../../images/flexible_box_alignment.png"/></p></li>\r
+\r
+\r
+<li>Special consideration can be given for some screen sizes. The following example defines a specific layout for small screens (where the screen width is less than 390 pixels). (The following figure applies to mobile applications only.)\r
+<pre class="prettyprint">\r
+@media screen and (min-width: 390px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.container .schedule .img_list \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: -webkit-flex;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-flex-wrap: wrap;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-align-content: space-around;\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}\r
+&nbsp;&nbsp;&nbsp;.container &gt; * {-webkit-align-content: center;}\r
+&nbsp;&nbsp;&nbsp;.container article {height: 250px;}\r
+}</pre>\r
+<p align="center"><img alt="Article areas with a flexible box layout for small screens (in mobile applications only)" src="../../images/flexible_screen_size.png"/></p>\r
+<p>For more information on defining screen-size-specific rules, see <a href="media_query_w.htm">Media Queries</a>.</p>\r
+</li></ol></li></ol>\r
+\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_1.html</a></li>\r
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_2.html</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">alert.png</a></li>\r
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">folder.png</a></li>        \r
+ </ul>\r
+                       \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/font_w.htm b/org.tizen.ui.guides/html/web/w3c/font_w.htm
new file mode 100755 (executable)
index 0000000..68537ab
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/font_w.htm
@@ -0,0 +1,214 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Fonts Module Level 3: Manipulating Fonts</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">CSS Fonts Module Level 3 API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">CSS Fonts Module Level 3 API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>CSS Fonts Module Level 3: Manipulating Fonts</h1>\r
+\r
+<p>You can change the text fonts easily.</p>\r
+\r
+<p>The new text features in CSS Fonts Module Level 3 API include:</p>\r
+<ul>\r
+<li>Font properties \r
+<p>You can <a href="#font">use CSS font properties</a>, such as <span style="font-family: Courier New,Courier,monospace">font-style</span>, <span style="font-family: Courier New,Courier,monospace">font-weight</span>, <span style="font-family: Courier New,Courier,monospace">font-variant</span>, <span style="font-family: Courier New,Courier,monospace">font-size</span>, and <span style="font-family: Courier New,Courier,monospace">font-family</span>, to modify the appearance of text.</p></li>\r
+</ul> \r
+\r
+\r
+<h2 id="font" name="font">Manipulating Fonts</h2>\r
+                               \r
+<p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>\r
+\r
+<ol>\r
+<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-style</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to apply different font styles:</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) em{font-style: normal}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) em{font-style: italic}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) em{font-style: oblique}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;oblique&lt;/em&gt;&lt;/p&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li><p>Define the <span style="font-family: Courier New,Courier,monospace">font-weight</span> property,\r
+which controls the weight of the text:</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-weight: normal}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-weight: bold}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-weight: 300}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-weight: 500}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-weight: 700}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;bold&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;300&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;500&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;700&lt;/em&gt;&lt;/p&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-variant</span> property to\r
+change the font to, for example, use small capital letters:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-variant: normal}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-variant: small-caps}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;small-caps&lt;/em&gt;&lt;/p&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-size</span> property, which controls the size of the font:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-size: 150%}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-size: 1.2em}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;150%&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;1.2em&lt;/em&gt;&lt;/p&gt;\r
+&lt;/body&gt;\r
+&lt;/html&gt;\r
+</pre>\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">line-height</span> property, which controls the height of a text line:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {line-height: 1}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {line-height: 1.5}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {line-height: 5}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1.5&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;5&lt;/em&gt;&lt;/p&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">font-family</span> property, which assigns a specific font or its representative to an element. The list order within the <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element determines the property priority.\r
+<p>If the assigned font is not installed on the target, a different font is obtained based on the user system.</p>\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-family: serif}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: sans-serif}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: monospace}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: cursive}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-family: fantasy}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {font-family: &#39;Arial Black&#39;, sans-serif}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(7) {font-family: Tahoma, sans-serif}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(8) {font-family: Verdana, sans-serif}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(9) {font-family: Arial, sans-serif}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;serif&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;sans-serif&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;monospace&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;cursive&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;fantasy&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;&#39;Arial Black&#39;, sans-serif&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Tahoma, sans-serif&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Verdana, sans-serif&lt;/em&gt;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Arial, sans-serif&lt;/em&gt;&lt;/p&gt;\r
+&lt;/body&gt;\r
+&lt;/html&gt;\r
+</pre>\r
+</li>\r
+</ol>\r
+\r
+\r
+<p>The following figure shows examples of manipulating the text font properties.</p>\r
+<p class="figure">Figure: Font properties (in mobile applications only)</p>\r
+<p align="center"><img alt="Font properties (in mobile applications only)" src="../../images/font_properties.png"/></p>\r
+\r
+   <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#property-index" target="_blank">Property index</a>.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+           \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/frame_flattening_mw.htm b/org.tizen.ui.guides/html/web/w3c/frame_flattening_mw.htm
new file mode 100755 (executable)
index 0000000..2f5d3c9
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/frame_flattening_mw.htm
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+       <title>Frame Flattening: Expanding Content According to Size</title>  
+       
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/></p>
+       </div>
+       
+<h1>Frame Flattening: Expanding Content According to Size</h1>
+
+  <p>In the Tizen WebKit, content placed within the <span style="font-family: Courier New,Courier,monospace;">&lt;frame&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;iframe&gt;</span> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</p> 
+  
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table>
+  
+  <p>The Tizen WebKit supports this feature since scrolling through small subframes on small screen devices is a tedious task and, occasionally, causes confusion between scrolling subframes and scrolling the Web page itself.</p> 
+  <p>To implement scrollable content in the Tizen WebKit, use the CSS <span style="font-family: Courier New,Courier,monospace;">overflow: scroll</span> or <span style="font-family: Courier New,Courier,monospace;">webkit-overflow-scrolling: touch</span> property instead of <span style="font-family: Courier New,Courier,monospace;">iframe</span>.</p>   
+       
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
diff --git a/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm b/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
new file mode 100755 (executable)
index 0000000..b40e1b9
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
@@ -0,0 +1,131 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>W3C</title> 
+ </head> 
+<body onload="prettyPrint()" style="overflow: auto;">
+ 
+<div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+               <div id="toc_border"><div id="toc">
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html">W3C/HTML5 and Supplementaries API Reference for Mobile Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">W3C/HTML5 and Supplementaries API Reference for Wearable Web</a></li>
+               </ul>
+       </div></div>
+</div> 
+               
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>W3C</h1> 
+
+<p>The W3C specifications provide HTML and CSS, which are the core technologies for building Web pages and Web applications.</p>
+
+<p>To learn to use the W3C features in your application UI, see the following topics:</p>
+
+<ul>
+<li>
+<strong>HTML tools</strong> 
+<p>HTML is the language for describing the structure of the Web pages.</p>
+
+<ul>
+
+       <li><a href="html_priority_w.htm">HTML Priorities: Understanding HTML Behavior</a>
+       <p>Enables you to use CSS and JavaScript code effectively with HTML elements.</p></li>
+
+       <li><a href="media_query_w.htm">Media Queries: Labeling Output Devices in Style Sheets</a>
+       <p>Enables you to define media features for specific output devices using the CSS media queries.</p></li>
+
+       <li><a href="multiple_screens_mw.htm">Multiple Screen Support: Supporting Different Screen Sizes</a> in <strong>mobile applications only</strong>
+       <p>Allows you to create an application that is both scalable and adaptive to multiple screen resolutions.</p></li>
+
+       <li><a href="ui_layout_ww.htm">Multiple UI Layouts: Designing Applications for Multiple Devices</a> in <strong>wearable applications only</strong>
+       <p>Allows you to design your application layout so that your application can run on multiple Tizen devices.</p></li>
+
+       <li><a href="frame_flattening_mw.htm">Frame Flattening: Expanding Content According to Size</a> in <strong>mobile applications only</strong>
+       <p>Allows you to improve the scrollability of small screens.</p></li>
+
+       <li><a href="clipboard_mw.htm">Clipboard API and events: Transferring Content Between Applications</a> in <strong>mobile applications only</strong>
+       <p>Enables you to copy content and paste it in an editable area.</p></li>
+</ul>
+</li>
+
+
+<li>
+<strong>CSS tools</strong> 
+<p>CSS is the language for describing the presentation of the Web pages, including colors, layout, and fonts.</p>
+<ul>
+       <li><a href="transform_w.htm">CSS Transforms: Manipulating Elements</a> 
+       <p>Enables you to move, rotate, stretch, and scale elements using the CSS3 <span style="font-family: Courier New,Courier,monospace">transform</span> property.</p></li>
+       
+       <li><a href="animation_w.htm">CSS Animations Module Level 3: Creating Animations</a> 
+       <p>Enables you to create animations using the CSS3 <span style="font-family: Courier New,Courier,monospace">animation</span> property.</p></li>
+       
+       <li><a href="transition_w.htm">CSS Transitions Module Level 3: Changing Element Styles</a> 
+       <p>Enables you to add effects when changing the style of an element using the CSS3 <span style="font-family: Courier New,Courier,monospace">transition</span> property.</p></li>
+       
+       <li><a href="color_w.htm">CSS Color Module Level 3: Specifying Color and Opacity</a> 
+       <p>Enables you to specify the color and opacity of HTML elements using CSS properties.</p></li>
+       
+       <li><a href="background_w.htm">CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</a> 
+       <p>Enables you to specify the border and background styles of HTML elements using CSS properties.</p></li>
+       
+       <li><a href="flexible_w.htm">CSS Flexible Box Layout Module: Adjusting the Layout</a> 
+       <p>Enables you to create flexible layouts for Web applications.</p></li>
+               
+       <li><a href="multi_mw.htm">CSS Multi-column Layout Module: Creating Multi-column Layouts</a> in <strong>mobile applications only</strong>
+       <p>Enables you to create multi-column layouts for Web applications.</p></li>
+       
+       <li><a href="text_module_w.htm">CSS Text Module Level 3: Manipulating Text</a> 
+       <p>Enables you to apply various text effects.</p></li>  
+       
+       <li><a href="basic_ui_w.htm">CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</a> 
+       <p>Enables you to apply styles to HTML documents.</p></li>
+       
+       <li><a href="font_w.htm">CSS Fonts Module Level 3: Manipulating Fonts</a> 
+       <p>Enables you to change the text fonts.</p></li>       
+       
+       <li><a href="woff_w.htm">WOFF File Format 1.0: Changing Fonts Using WOFF</a> 
+       <p>Enables you to encode and decode font data easily.</p></li>  
+</ul>
+</li>
+</ul>
+
+
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/html_priority_w.htm b/org.tizen.ui.guides/html/web/w3c/html_priority_w.htm
new file mode 100755 (executable)
index 0000000..4714abf
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/html_priority_w.htm
@@ -0,0 +1,449 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>HTML Priorities: Understanding HTML Behavior</title> 
+ </head> 
+ <body onload="prettyPrint()" style="overflow: auto;">
+ 
+ <div id="toc-navigation">
+       <div id="profile">
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+       </div>
+       
+       <div id="toc_border"><div id="toc">
+               <p class="toc-title">Content</p>
+               <ul class="toc">
+                       <li><a href="#doctype">&lt;!DOCTYPE&gt; Element</a></li>
+                       <li><a href="#dom">HTML DOM Tree</a></li>
+                       <li><a href="#css">CSS Rule Priorities</a></li>
+                       <li><a href="#js">JavaScript Behavior</a></li>  
+                       <li><a href="#use">Using JavaScript Code within HTML</a></li>
+               </ul>                   
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>HTML Priorities: Understanding HTML Behavior</h1> 
+
+<p>The HTML markup is not as important as before, because JavaScript APIs can be used to create various functionalities. For example, graphics APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">wearable</a> applications) can be used for making games, media APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">wearable</a> applications) for creating video chats, and communication APIs (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">wearable</a> applications) for various types of messaging. However, HTML remains the basis of Web applications, and it is useful to be familiar with its behavior.</p>
+
+<p>The structure of the HTML document can be classified into DOCTYPE and HTML DOM (Document Object Model). When an HTML document is loaded, the browser renders the contents in its screen as follows:</p>
+<ol>
+<li>HTML is parsed referring to the rules defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element.</li>
+<li>HTML DOM tree is established.</li>
+<li>DOM elements, including <a href="#js">references to JavaScript</a>, are arranged based on the information defined in the head element. This is called rendering.</li>
+<li>The elements are painted on the screen based on <a href="#css">CSS rules</a>.</li>
+</ol>
+
+<h2 id="doctype"><span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> Element</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element informs the browser of the HTML version and which rules it must follow. It is not a composition element of the HTML.</p>
+
+<p>The browser, based on the version defined in the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <span style="font-family: Courier New,Courier,monospace;">&lt;!DOCTYPE&gt;</span> element must be declared at the beginning of an HTML document.</p>
+
+<pre class="prettyprint">&lt;!--HTML5--&gt;
+&lt;!DOCTYPE html&gt;
+
+&lt;!--Prior to HTML5--&gt;
+&lt;!DOCTYPE html PUBLIC &quot;{HTML Version Information}&quot; &quot;{DTD (Document Type Definition) file link defined by Rule in HTML DOM}&quot;&gt;
+</pre>
+
+<h2 id="dom">HTML DOM Tree</h2>
+
+<p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;html&gt;</span> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements as child nodes:</p>
+
+<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3>&lt;head&gt; element</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element contains the information that the browser refers to when rendering the body element to interpret information, such as the title of HTML document, CSS, JavaScript, and favicon:</p>
+
+<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="utf-8" /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; Tizen (in mobile applications) or Tizen Wearable (in wearable applications) &lt;/title&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot; /&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;/common/js/ui.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> contains the following subelements:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;title&gt;</span>: Defines the title of the document.</li>
+<li><span style="font-family: Courier New,Courier,monospace;"><a href="http://www.w3.org/wiki/HTML/Elements/meta" target="_blank">&lt;meta&gt;</a></span>: Defines information, such as encoding, creator, and keywords of the document.
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <a href="http://www.w3.org/TR/css-device-adapt/#the-viewport-rule" target="_blank">viewport element</a>, which sets the screen area, is included in the meta information.</td> 
+      </tr> 
+     </tbody> 
+    </table></li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span>: Sets the styles of the document.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span>, <span style="font-family: Courier New,Courier,monospace;">&lt;noscript&gt;</span>: Adds functions to the document. </li>
+</ul>
+
+<h3>&lt;body&gt; element</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element defines the area displaying content on the browser screen:</p>
+
+<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;tizen_wrap&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Tizen Web App (in mobile applications) or Tizen Wearable Wep App (in wearable applications)&lt;/h1&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;contents&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&amp;copy; All rights reserved.&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;</pre>
+  
+   <h2 id="css" name="css">CSS Rule Priorities</h2>
+<p>The basic rule of HTML, CSS, and JavaScript is that the code is applied from the top to the bottom of the document. Sometimes the lack of understanding of the CSS rule priorities can cause a result you do not expect.</p>
+<p>The following figure illustrates this problem in mobile applications by applying a font color to a black background.</p>
+
+<p class="figure">Figure: Expected and actual result of applying a font color (in mobile applications only)</p> 
+<p align="center"><img alt="Expected and actual result of applying a font color (in mobile applications only)" src="../../images/css_result.png" /></p>
+
+<h3>Basic CSS Rules</h3>
+
+<p>When creating a CSS document, the following rules apply:</p>
+
+<ul>
+<li>When more than 1 overlapping styles are applied to the same element, only the last style is visible:
+
+<pre class="prettyprint lang-html">p {color: red}
+p {color: blue}
+&lt;!--Blue color is applied--&gt;
+</pre></li>
+<li>The style applied in the parent node at the DOM tree is inherited. For more information, see <a href="http://www.w3.org/TR/CSS21/cascade.html#inheritance" target="_blank">W3C inheritance documentation</a>.
+</li>
+<li>The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
+<ul>
+<li>ID attribute = 100</li>
+<li>Class attribute = 10</li>
+<li>Element = 1</li>
+</ul>
+
+<pre class="prettyprint lang-html">&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;style&gt;
+&nbsp;&nbsp;&nbsp;p#target {color: black} /* Specificity: 101 */
+&nbsp;&nbsp;&nbsp;p#target {color: red} /* Specificity: 101 */
+&nbsp;&nbsp;&nbsp;p.target {color: blue} /* Specificity: 11 */
+&nbsp;&nbsp;&nbsp;p {color: tomato} /* Specificity: 1 */
+&lt;/style&gt;
+&lt;!--Red color is applied--&gt;</pre>
+</li>
+<li>When the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute is used, it has the highest priority:
+<pre class="prettyprint lang-html">&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;style&gt;
+&nbsp;&nbsp;&nbsp;p#target {color: black !important}
+&nbsp;&nbsp;&nbsp;p#target {color: red}
+&nbsp;&nbsp;&nbsp;p.target {color: blue}
+&nbsp;&nbsp;&nbsp;p {color: tomato}
+&lt;/style&gt;
+&lt;!--Black color is applied--&gt;</pre>
+</li>
+</ul>
+
+<p>Keeping these rules in mind, you can use any of the following ways to achieve the expected result illustrated in the figure above:</p>
+<pre class="prettyprint">.contents {color: #999 !important;}
+
+section.contents {color: #999;}
+
+body .contents {color: #999;}
+
+#container &gt; .contents {color: #999;}
+</pre>
+
+<h3>Using CSS with HTML</h3>
+
+<p>There are various ways to connect CSS with HTML. Creating a separate CSS file and managing it separately is convenient when it comes to applying changes in the future. The file is connected to the HTML file using a <span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element.</p>
+
+<p>In the following example, the applied order of the CSS elements is as follows:</p>
+<ol>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
+</ol>
+
+<pre class="prettyprint">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&nbsp;&nbsp;&nbsp;&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Link in head--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style tag in head--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p {color: tomato}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--@import in CSS area--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@import url(&quot;css/style.css&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style attribute in HTML element--&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style=&quot;color: red&quot;&gt;Hello World&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>However, the priority order of the elements is as follows:</p>
+<ol>
+<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;style&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+<li><span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</li>
+<li><span style="font-family: Courier New,Courier,monospace;">&lt;link&gt;</span> tag in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element</li>
+</ol>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">style</span> attribute in the HTML element has the highest priority after the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute.</p>
+
+<p>Using the order above, if all other color styles are applied to <span style="font-family: Courier New,Courier,monospace;">&lt;p&gt;</span> elements, the <span style="font-family: Courier New,Courier,monospace;">style</span> attribute is used to apply the red color that has been directly defined in the HTML. This rule differs from the CSS specificity rules.</p>
+
+<p>Generally, when the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute is used, connect to the top of CSS file that has been linked externally, as illustrated in the figure below. If the attribute is applied in the middle of the CSS file, it is difficult to know the point where CSS has been applied, and to find the file connected to the source in the future. Therefore, group the CSS file at the top.</p>
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute gives the same result as connecting an external file, but it does not function correctly in older browsers (IE 5.5 and below).</td> 
+      </tr> 
+     </tbody> 
+    </table>
+<p class="figure">Figure: Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
+<p align="center"><img alt="Using the @import attribute" src="../../images/using_import_attribute.png" /></p>
+
+<p>The markup in the corresponding files is as follows:</p>
+<ul>
+<li>In the HTML code:
+<pre class="prettyprint">&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
+&lt;/head&gt;
+</pre></li>
+<li>In the <span style="font-family: Courier New,Courier,monospace;">style.css</span> file:
+<pre class="prettyprint">@import url(&quot;priorities1.css&quot;);
+
+p: after {content: &quot; : linked in head&quot;}
+</pre>
+<p class="figure">Figure: Result of linking the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p> 
+<p align="center"><img alt="Result of linking the @import attribute" src="../../images/import_linked_in_head.png" /></p></li>
+<li>In the <span style="font-family: Courier New,Courier,monospace;">priorities1.css</span> file:
+<pre class="prettyprint">p: after {content: &quot; : Using @import in CSS area&quot;}
+</pre>
+<p class="figure">Figure: Result of using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</p> 
+<p align="center"><img alt="Result of using the @import attribute in the CSS area" src="../../images/import_css_area.png" /></p></li>
+</ul>
+
+ <h2 id="js" name="js">JavaScript Behavior</h2>
+<p>With the advent of HTML5, numerous powerful HTML5 APIs have been introduced. Since the usage of JavaScript has increased, it has become important to use it accurately in accordance with <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm">optimized JavaScript performance</a>.</p>
+
+<p><a href="#use">JavaScript used in Web applications</a> can be divided into the core, <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMAScript</a>, and <a href="http://www.w3.org/DOM" target="_blank">DOM</a>, which all manipulate HTML. ECMAScript is executed when a method is called, or it can be executed when an event is fired within a HTML document through a linkage with DOM.  </p>
+
+<h3>Using JavaScript with HTML</h3>
+<p>Used with HTML, JavaScript works as follows:</p>
+<ol>
+<li>During HTML parsing, the content of the <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag is parsed to JavaScript Interpreter.</li>
+<li>The Interpreter parses the received script code. </li>
+<li>Requests that need not be handled immediately are suspended.  </li>
+<li>The handled result is passed over to the browser, which continues to parse HTML.</li>
+</ol>
+
+<p>The following example shows how you can use JavaScript with HTML either by linking to a JavaScript file, or embedding it directly in the HTML code:</p>
+<pre class="prettyprint">/* Linking from HTML */
+&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+
+/* Direct use in HTML */
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated&quot;);
+    
+&nbsp;&nbsp;&nbsp;function animate() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Execute */
+&nbsp;&nbsp;&nbsp;};
+    
+&nbsp;&nbsp;&nbsp;/* Call the animation function when the event is fired */
+&nbsp;&nbsp;&nbsp;webkitRequestAnimationFrame(animate);  
+&lt;/script&gt;
+
+</pre>
+<p>Both ways described above give the same result in behavior. However, the position of the JavaScript code affects the order in which the methods are called.</p>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">Previously, adding JavaScript code within head tag was recommended because it is easy to maintain. Currently, adding it to the end of the body and executing it after parsing the HTML document is common.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+       
+<h3>JavaScript Events</h3>
+
+<p>JavaScript generally calls a method when a specific <a href="http://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank">event</a> is fired. More than 70 types of events, such as onload and onclick are available.</p>
+
+<p>The following example shows the use of a simple event:</p>
+
+<pre class="prettyprint">&lt;!--HTML--&gt;
+&lt;body onload=&quot;touchEventHandler()&quot;&gt;
+
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;/* JavaScript */
+&nbsp;&nbsp;&nbsp;/* Directly assigning */  
+&nbsp;&nbsp;&nbsp;window.onload = touchEventHandler; /* Assigns the name of the subject method */
+    
+&nbsp;&nbsp;&nbsp;/* Event listener (W3C standard) */
+&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;touchstart&quot;, touchEventHandler, false);
+&lt;/script&gt;</pre>
+<p>Prefer using W3C standard event listener methods. The inline JavaScript code applied directly to an HTML tag is difficult to maintain. Assigning a method directly to an event is also difficult when passing parameters, as the method needs to be assigned for every event.</p>
+
+<h3>JavaScript Priorities</h3>
+
+<p>The rendering order of JavaScript code is based on the following rules:</p>
+<ul>
+<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is temporarily saved, but not handled.  </li>
+<li>JavaScript within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is immediately handled when it is parsed.  </li>
+<li>When the temporarily saved JavaScript content is executed, the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element content is rendered first, and the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element content after it.</li>
+</ul>
+
+
+<h2 id="use" name="use">Using JavaScript Code within HTML</h2>
+
+<p>To provide users with JavaScript-based features, you must learn to use JavaScript code within an HTML document:</p>
+
+<ul>
+<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag:
+<pre class="prettyprint lang-html">
+&lt;head&gt;
+&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;       
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head onload&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head ready&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/head&gt;</pre> 
+
+<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is sent to Interpreter. As there are no methods to be handled immediately, its execution is suspended.</p>
+</li>
+<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;">&lt;script&gt;</span> tag:
+<pre class="prettyprint lang-html">
+&lt;body&gt;
+&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
+&nbsp;&nbsp;&nbsp;&lt;script&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function testLog(txt) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logText = document.querySelector(&#39;.log&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML += &#39;&lt;li&gt;JavaScript in HTML &#39; + txt + &#39;&lt;/li&gt;&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+    
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body onload&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body ready&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body&#39;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function() 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body anonymous function&#39;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}();
+&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;/body&gt;
+</pre>
+<p>The JavaScript code within the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element is sent to Interpreter. The anonymous method is immediately executed, and the HTML DOM structure is set up. The methods in the <span style="font-family: Courier New,Courier,monospace;">$(document).ready</span> method and in the <span style="font-family: Courier New,Courier,monospace;">onload</span> event are executed in the stored order.</p>
+</li></ul>
+
+
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">jQuery has to be called from both the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> and <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> elements. The <span style="font-family: Courier New,Courier,monospace;">logText</span> variable has to be called from the <span style="font-family: Courier New,Courier,monospace;">&lt;body&gt;</span> element. The method connected to the <span style="font-family: Courier New,Courier,monospace;">onload</span> event in the <span style="font-family: Courier New,Courier,monospace;">&lt;head&gt;</span> element is not executed. </td> 
+      </tr> 
+     </tbody> 
+    </table>
+ 
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/media_query_w.htm b/org.tizen.ui.guides/html/web/w3c/media_query_w.htm
new file mode 100755 (executable)
index 0000000..64dd6e0
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/media_query_w.htm
@@ -0,0 +1,342 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Media Queries: Labeling Output Devices in Style Sheets</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#rule">Media Query Conditions</a></li>\r
+                       <li><a href="#priorities">Media Query Priorities</a></li>\r
+                       <li><a href="#create">Creating a Liquid Layout</a>\r
+                       </li>\r
+               </ul>           \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">        \r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediaquery">Media Queries API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#mediaquery">Media Queries API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>Media Queries: Labeling Output Devices in Style Sheets</h1>\r
+ \r
+<p>Media queries allow you to apply the CSS differently according to the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a <a href="#create">liquid layout</a> that mainly reacts according to the device resolution. </p>\r
+\r
+<p>You can use media queries in 3 ways:</p>\r
+\r
+<ul>\r
+<li>In CSS\r
+<p>You can define attribute values depending on given conditions:</p>\r
+<pre class="prettyprint">@media only screen and (max-width: 480px) {styles}\r
+</pre>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+</li>\r
+<li>In an <span style="font-family: Courier New,Courier,monospace">@import</span> rule in CSS\r
+<p>You can import from CSS a file that matches the condition:</p>\r
+<pre class="prettyprint">@import url(example.css) not screen and (min-width: 480px)\r
+</pre>\r
+</li>\r
+<li>In HTML\r
+<p>You can directly import the CSS file that matches the condition:</p>\r
+<pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 480px)&quot; href=&quot;example.css&quot;&gt;</pre>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced. </td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+</li>\r
+</ul>\r
+\r
+<p>For more information on the CSS priorities when different media queries are used, see <a href="#priorities">Media Query Priorities</a>.</p>\r
+\r
+<h2 id="rule" name="rule">Media Query Conditions</h2>\r
+\r
+<p>You can define the following conditions for the media queries:</p>\r
+\r
+<ul>\r
+<li>Combination and relevancy\r
+<p>You can combine multiple conditions into 1 Boolean query with the <span style="font-family: Courier New,Courier,monospace">and</span> operator. To define a negative condition (something not being relevant), use the <span style="font-family: Courier New,Courier,monospace">not</span> operator.</p>\r
+<pre class="prettyprint">@media not screen and (min-width: 320px), screen and (max-width: 480px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}\r
+}\r
+</pre>\r
+</li>\r
+<li>Viewport width\r
+<p>You can define the query to match to a specific viewport width range using the <span style="font-family: Courier New,Courier,monospace">min-width</span> and <span style="font-family: Courier New,Courier,monospace">max-width</span> attributes.</p>\r
+<pre class="prettyprint">@media all and (min-width: 320px) and (max-width: 480px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}\r
+}\r
+</pre>\r
+</li>\r
+<li>Device and viewport height\r
+<p>The <span style="font-family: Courier New,Courier,monospace">height</span> attribute refers to restoring the viewport&#39;s height, and the <span style="font-family: Courier New,Courier,monospace">device-height</span> attribute refers to restoring the resolution set in the device.</p>\r
+<p>The same difference applies to the <span style="font-family: Courier New,Courier,monospace">width</span> and <span style="font-family: Courier New,Courier,monospace">aspect-ratio</span> attributes, which can assign &#39;device-&#39;.</p>\r
+<pre class="prettyprint">@media screen and (min-device-height: 700px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-device-height&quot;}\r
+}\r
+@media screen and (min-height: 550px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-height&quot;}\r
+}\r
+</pre>\r
+<p>In the above example, a device with the width-height resolution of 480/720 has the <span style="font-family: Courier New,Courier,monospace">{content: &quot;min-height&quot;}</span> rule applied as a priority in a portrait screen, but the <span style="font-family: Courier New,Courier,monospace">{content &quot;min-device-height&quot;}</span> rule applied in a landscape screen.</p> \r
+\r
+</li>\r
+<li>Device aspect ratio\r
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">device-aspect-ratio</span> attribute to check the width-length ratio (aspect ratio) of the printing device.</p>\r
+<pre class="prettyprint">@media all and (device-aspect-ratio: 9/16) and (orientation: portrait),  \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;all and (device-aspect-ratio: 2/3) and (orientation: portrait) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;aspect-ratio, portrait&quot;}\r
+}\r
+</pre>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.)</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+</li>\r
+</ul>\r
+\r
+ <h2 id="priorities" name="priorities">Media Query Priorities</h2>\r
+\r
+<p>When multiple media queries and conditions are defined, CSS is applied with the following priorities:</p>\r
+<ul>\r
+<li>In case of the CSS reiteration declaration, the CSS that has been declared last is applied.</li>\r
+<li>In case of specificity, the CSS with the highest specificity is applied.\r
+<p>The specificity is calculated as follows:</p><ul><li>id attribute = 100</li>\r
+<li>class attribute = 10</li>\r
+<li>element = 1</li></ul>\r
+<p>Selectors, such as <span style="font-family: Courier New,Courier,monospace">section#content &gt; .title p</span>, carry the specificity of 112.</p></li>\r
+<li>In case of user override, the user CSS is applied instead of the creator CSS.</li>\r
+<li><p>CSS is applied first based on the conditions in the <span style="font-family: Courier New,Courier,monospace">@import</span> rule, then based on the conditions in CSS, and finally based on the conditions in HTML.</p></li>\r
+<li><p>In media queries, regardless of CSS priority, CSS which has not been imported still exists based on the conditions.</p></li>\r
+</ul>\r
+\r
+<p>To apply media query, consider an example with the following files:</p>\r
+<pre class="prettyprint">\r
+&lt;!--example.html--&gt;\r
+&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;c.css&quot;&gt;\r
+&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;a.css&quot;&gt;\r
+&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (min-width: 768px)&quot; href=&quot;b.css&quot;&gt;\r
+&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;@media all and (max-width: 400px) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.example: after {content: &quot;In HTML head&quot;}\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/style&gt;\r
+\r
+&lt;!--a.css--&gt;\r
+body {background-color: #ccc}\r
+\r
+@media screen and (max-width: 480px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content:&quot;a.css : width: ~ 480px&quot;}\r
+}\r
+@media screen and (min-width: 480px) and (max-width: 768px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;a.css : width: 480px ~ 768px&quot;}\r
+}\r
+\r
+&lt;!--b.css--&gt;\r
+@import url(&quot;c.css&quot;);\r
+\r
+body {background-color: #333; color: #fff}\r
+\r
+@media screen and (min-width: 768px) and (max-width: 1024px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;b.css : width: 768px ~ 1024px&quot;}\r
+}\r
+\r
+&lt;!--c.css--&gt;\r
+body {background-color: tomato}\r
+\r
+@media screen and (min-width: 768px) and (max-width: 1024px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 768px ~ 1024px&quot;}\r
+}\r
+@media screen and (min-width: 1024px) and (max-width: 1280px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 1024px ~ 1280px&quot;}\r
+}\r
+</pre>\r
+\r
+<p>The CSS is applied based on the viewport:</p>\r
+<ul>\r
+<li>If the viewport is 320 px:\r
+<ul>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: ~ 480px&quot;</span>).</li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li>\r
+<li>CSS is applied instead of the HTML <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> (the <span style="font-family: Courier New,Courier,monospace">a.css</span> file has higher priority than <span style="font-family: Courier New,Courier,monospace">content: &quot;In HTML head&quot;</span>).</li>\r
+</ul></li>\r
+<li>If the viewport is 700 px:\r
+<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;a.css : width: 480px ~ 768px&quot;</span>).</p> </li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">c.css</span> and <span style="font-family: Courier New,Courier,monospace">b.css</span> files are not imported.</li></ul></li>\r
+<li>If the viewport is 900 px:\r
+<ul>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is imported.</li>\r
+<li>c.css is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;c.css : width: 768px ~ 1024px&quot;</span>). </li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">a.css</span> file is not imported.</li>\r
+<li>The <span style="font-family: Courier New,Courier,monospace">b.css</span> file is applied (based on <span style="font-family: Courier New,Courier,monospace">content: &quot;b.css : width: 768px ~ 1024px&quot;</span>).</li>\r
+</ul></li>\r
+</ul>\r
+ \r
+ \r
+       <h2 id="create" name="create">Creating a Liquid Layout</h2>\r
+                       <p>To enhance the user experience of your application, you must learn to define media queries to determine the styles to be used in the Web document. This example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show the optimized layout on both portrait and landscape modes.</p>\r
+\r
+\r
+<ol>\r
+<li>Define a page with title and content elements:\r
+<pre class="prettyprint">\r
+&lt;header&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;Media queries tutorial&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;&lt;img src=&quot;logo.png&quot; alt=&quot;Tizen&quot;&gt;&lt;/h1&gt;\r
+&lt;/header&gt;\r
+&lt;div class=&quot;container&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;section class=&quot;contents&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Section Title&lt;/h2&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;desc&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The quick brown fox jumps over a lazy dog.  The quick brown...\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/section&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;aside&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aside\r
+&nbsp;&nbsp;&nbsp;&lt;/aside&gt;\r
+&lt;/div&gt;\r
+</pre></li>\r
+<li>Define basic styles for the page, using a flexible box (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">wearable</a> applications) and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">multi-column</a> (in mobile applications only) layout with 2 columns. (The following figure applies to mobile applications only.)\r
+<pre class="prettyprint">\r
+.container \r
+{\r
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;\r
+}\r
+.container aside \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-flex: 1 0 20%;\r
+}\r
+.contents \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-columns: 5em 3;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-rule: 1px solid #999;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-gap: 2em;\r
+&nbsp;&nbsp;&nbsp;-webkit-flex: 1 1 auto;\r
+}\r
+.contents h2 \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-column-span: all;\r
+}\r
+</pre>\r
+\r
+<p align="center"><img alt="Fixed layout example (in mobile applications only)" src="../../images/media_queries1.png" /></p>\r
+<p>The page is easy to view as long as the screen width is about 600 px; however, in a smaller screen below 400 px, the legibility rapidly decreases. You can edit the layout by reducing the number of columns to 1 and moving the <strong>Aside</strong> area at the bottom of the screen, but those changes then decrease legibility on a wider screen.</p>\r
+\r
+</li>\r
+<li>\r
+<p>To solve the problem, use a media query to define a liquid layout that changes according to the screen resolution:</p>\r
+\r
+<pre class="prettyprint">\r
+@media all and (max-width: 480px) and (orientation: portrait) \r
+{\r
+&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 1;}\r
+}\r
+@media all and (min-width: 480px) and (max-width: 768px) \r
+{\r
+&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 2;}\r
+&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}\r
+}\r
+</pre>\r
+<p>With the above media query, the normal resolution has 2 columns (shown on the right in the figure), while in a smaller resolution in a portrait mode only 1 column is used (shown on the left). (The following figure applies to mobile applications only.)</p>\r
+<p align="center"><img alt="Liquid layout example (in mobile applications only)" src="../../images/media_queries3.png" /></p> \r
+\r
+</li>\r
+<li><p>If you need to define specific styles for a certain resolution range, simply add more media queries. However, too many conditions make the maintenance harder, so carefully consider what kind of resolution ranges you need.\r
+</p>\r
+\r
+<p>The following conditions are generally used and cover all possibilities up to a Web browser in a PC:</p>\r
+<pre class="prettyprint">\r
+&lt;!--Portrait mode of a smart phone--&gt;\r
+@media screen and (max-width: 480px) and (orientation: portrait) {&lt;!--Specific layout--&gt;}\r
+\r
+&lt;!--Landscape mode of a smart phone and a small tablet--&gt;\r
+@media screen and (min-width: 480px) and (max-width: 768px) {&lt;!--Specific layout--&gt;}\r
+\r
+&lt;!--Tablet and a small laptop--&gt;\r
+@media screen and (min-width: 768px) and (max-width: 1024px) {&lt;!--Specific layout--&gt;}\r
+\r
+&lt;!--PC browser--&gt;\r
+@media screen and (min-width: 1024px) {&lt;!--Specific layout--&gt;}\r
+@media print {&lt;!--Specific layout--&gt;}\r
+</pre></li>\r
+\r
+</ol>\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">liquid_layout_2.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">logo.png</a></li>\r
+ </ul>\r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/multi_mw.htm b/org.tizen.ui.guides/html/web/w3c/multi_mw.htm
new file mode 100755 (executable)
index 0000000..798e73d
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/multi_mw.htm
@@ -0,0 +1,620 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Multi-column Layout Module: Creating Multi-column Layouts</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+        <ul class="toc">\r
+            <li><a href="#size">Setting the Column Number and Width</a></li>\r
+                       <li><a href="#gap">Setting the Column Gap</a></li>\r
+                       <li><a href="#rule">Setting the Column Rule</a></li>\r
+                       <li><a href="#span">Setting the Column Span</a></li>\r
+                       <li><a href="#break">Setting the Column Break</a></li>\r
+                       <li><a href="#basic">Creating a Basic Layout</a></li>\r
+                       <li><a href="#dynamic">Creating a Layout with Dynamic Content</a></li>\r
+               </ul>   \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">CSS Multi-column Layout Module API for Mobile Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>CSS Multi-column Layout Module: Creating Multi-column Layouts</h1>\r
+ \r
+\r
+ <p>You can arrange the screen content into columns. Using the CSS <span style="font-family: Courier New,Courier,monospace">column-</span> properties, the content elements can flow between columns when the column height or number changes. You can use the properties alone to <a href="#basic">create a basic layout</a>, or add JavaScript code to <a href="#dynamic">make the layout dynamic</a>.</p>\r
+\r
+   <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in mobile applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table> \r
+ \r
+ <p>You can manage the following column-related features:</p>\r
+<ul>\r
+<li><a href="#size">Setting the column number and width</a></li>\r
+<li><a href="#gap">Setting the column gap</a></li>\r
+<li><a href="#rule">Setting the column rule</a></li>\r
+<li><a href="#span">Setting the column span</a></li>\r
+<li><a href="#break">Setting the column break</a></li>\r
+</ul>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">Up to Tizen SDK version 2.2, most CSS properties and values used in Tizen required the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix. To ensure future compatibility, these properties can now be used with or without the prefix.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+       \r
+<h2 id="size" name="size">Setting the Column Number and Width</h2>\r
+\r
+<p> When the layout is set to a constant number of columns using the <span style="font-family: Courier New,Courier,monospace">column-count</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-count)</span> property, the column width is set to fill the available horizontal space.</p>\r
+<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown on the top), the column width is 116 px, whereas on a 720 x 1280 display (shown on the bottom), the column with is 143 px.</p>\r
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-count</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_count" target="_blank">multi_column_column_count/renamed_index.html</a>.</p>\r
+<pre class="prettyprint">\r
+article\r
+{\r
+&nbsp;&nbsp;&nbsp;column-count: 4;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-count: 4;\r
+&nbsp;&nbsp;&nbsp;margin: 10px;\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: 4 columns on different resolution displays</p> \r
+<p align="center"><img alt="4 columns on different resolution displays" src="../../images/4_columns.png" /></p> \r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width)</span> property sets the base column width.</p>\r
+ <p>In the following code snippet and figure, the column width is set to 153 px, but the effective column width is 288 px for a 480 x 800 display (shown on the left) and 154 px for a 720 x 1280 display (shown on the right). The parameter sets the column to at least the defined width, but not wider than the available display space or twice the defined width. The actual column width is calculated using a <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412/#pseudo-algorithm" target="_blank">pseudo-algorithm</a>.</p>\r
+<p>The code snippet shows how the multi-column layout is implemented when the vertical space is limited. If there is more content than fits the available space, the next column is set outside the available space. Using the <span style="font-family: Courier New,Courier,monospace">overflow: scroll</span> property, the column can be scrolled horizontally.</p>\r
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-width</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_width" target="_blank">multi_column_column_width/renamed_index.html</a>.</p>\r
+<pre class="prettyprint">\r
+article\r
+{\r
+&nbsp;&nbsp;&nbsp;width: 90vw;\r
+&nbsp;&nbsp;&nbsp;height: 90vh;\r
+&nbsp;&nbsp;&nbsp;column-width: 153px;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;\r
+&nbsp;&nbsp;&nbsp;margin: 5vw;\r
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;\r
+&nbsp;&nbsp;&nbsp;overflow: scroll;\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: Column width 153 px on different resolution displays</p> \r
+<p align="center"><img alt="Column width 153 px on different resolution displays" src="../../images/column_width.png" /></p> \r
+\r
+<h2 id="gap" name="gap">Setting the Column Gap</h2>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property sets the distance between columns. The property affects the column width, as the column width, gap, and margins all take available space. In the following code snippet and figure, the column gap is set to 17 px.</p>\r
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_gap" target="_blank">multi_column_column_gap/renamed_index.html</a>.</p>\r
+<pre class="prettyprint">\r
+article \r
+{\r
+&nbsp;&nbsp;&nbsp;height: 303px;\r
+&nbsp;&nbsp;&nbsp;column-width: 153px;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;\r
+&nbsp;&nbsp;&nbsp;column-gap: 17px;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-gap: 17px;\r
+&nbsp;&nbsp;&nbsp;margin: 7px;\r
+&nbsp;&nbsp;&nbsp;padding: 3px;\r
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: Column gap</p> \r
+<p align="center"><img alt="Column gap" src="../../images/column_gap.png" /></p>\r
+\r
+<h2 id="rule" name="rule">Setting the Column Rule</h2>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property displays a vertical line in the middle of the column gap.</p>\r
+<p>The rule has analogical parameters, such as width, line style, and color, but its size is not included in the available space, and it is a drawing similar to the background.</p>\r
+\r
+<p>Rules are only displayed in the content area. If the <span style="font-family: Courier New,Courier,monospace">padding</span> property is set in the same element, the rule appears shorter than the background. In the following code snippet and figure, the rule width is set to 5 px.</p>\r
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_rule" target="_blank">multi_column_column_rule/renamed_index.html</a>.</p>\r
+<pre class="prettyprint">article \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 5px;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: rgb(92, 203, 246);\r
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: Column rule</p> \r
+<p align="center"><img alt="Column rule" src="../../images/column_rule.png" /></p>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">In Tizen SDK version 2.2, to avoid displaying the rules incorrectly, do not use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property with horizontal scrolling of the columns.</td> \r
+      </tr> \r
+     </tbody>\r
+</table>\r
+\r
+<h2 id="span" name="span">Setting the Column Span</h2>\r
+<p>By default, all elements within the columns are no wider than the column width. The <span style="font-family: Courier New,Courier,monospace">column-span</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-span</span>) property can be used to display content across all columns.</p>\r
+<p>When using this property with column elements which have the <span style="font-family: Courier New,Courier,monospace">column-count</span> or <span style="font-family: Courier New,Courier,monospace">column-width</span> property set, the following restrictions apply:</p>\r
+<ul>\r
+<li>Column element height is not used and elements in columns take more vertical space than is set in height.</li>\r
+<li>If the column element has the <span style="font-family: Courier New,Courier,monospace">overflow</span> property set to <span style="font-family: Courier New,Courier,monospace">hidden</span>, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is ignored.</li>\r
+<li>An element using the <span style="font-family: Courier New,Courier,monospace">column-span</span> property does not have to be a direct child of the column element.</li>\r
+</ul>\r
+<p>In the figure below, the blue arrow shows the order of the column elements. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is set to  <span style="font-family: Courier New,Courier,monospace">all</span>, as in the following code snippet.</p>\r
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-span</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_span" target="_blank">multi_column_column_span/renamed_index.html</a>.</p>\r
+<pre class="prettyprint">\r
+article.left header \r
+{\r
+&nbsp;&nbsp;&nbsp;column-span: all;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-span: all;\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: Column span</p> \r
+<p align="center"><img alt="Column span" src="../../images/column_span.png" /></p>\r
+\r
+<h2 id="break" name="break">Setting the Column Break</h2>\r
+<p>By default, column elements are broken to balance column height. The <span style="font-family: Courier New,Courier,monospace">break-before</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-before</span>), <span style="font-family: Courier New,Courier,monospace">break-after</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-after</span>), and <span style="font-family: Courier New,Courier,monospace">break-inside</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-inside</span>) properties can be used to define that an element cannot be broken between columns (set to <span style="font-family: Courier New,Courier,monospace">avoid</span>), or that an element must begin or end within a given column.</p>\r
+\r
+<p>The following code snippet and figure illustrate the use of the <span style="font-family: Courier New,Courier,monospace">break-</span> property. In the upper header area, the <span style="font-family: Courier New,Courier,monospace">break-</span> property is not used, and in the lower header area, the <span style="font-family: Courier New,Courier,monospace">break-before</span> property is set to  <span style="font-family: Courier New,Courier,monospace">always</span>.</p>\r
+<p>The following code snippet demonstrates how to use the <span style="font-family: Courier New,Courier,monospace">column-break</span> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_break" target="_blank">multi_column_column_break/renamed_index.html</a>.</p>\r
+<pre class="prettyprint">\r
+article.lower section\r
+{\r
+&nbsp;&nbsp;&nbsp;break-before: always;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-break-before: always;\r
+}\r
+</pre>\r
+\r
+<p class="figure">Figure: Column break</p> \r
+<p align="center"><img alt="Column break" src="../../images/column_break.png" /></p>\r
+\r
+<h2 id="basic" name="basic">Creating a Basic Layout</h2>\r
+\r
+<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a basic layout using CSS:</p>\r
+\r
+<ol>\r
+<li>\r
+<p>Create the HTML layout, defining separate sections for the column content and including an image file:</p>\r
+<pre class="prettyprint">\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 1&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Lorem ipsum dolor (...), id.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/pinwheel_green.png&quot; alt=&quot;&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Maecenas at (...)tortor.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 2&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot; alt=&quot;&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Nullam bibendum (...) Curabitur.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_WhiteFold_4.png&quot; alt=&quot;&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 3&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Sed sagittis, (...) Vivamus sed est sit amet.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;figure&quot; src=&quot;images/pinwheel_yellow.png&quot; alt=&quot;&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Pellentesque habitant (...). Duis lobortis, nibh.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;\r
+&lt;/body&gt;\r
+</pre></li>\r
+\r
+<li>Set the CSS column properties:\r
+<ol type="a">\r
+<li>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element acts as a multi-column container. Set the <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span>) property to enable the multi-column layout:</p>\r
+\r
+<pre class="prettyprint">\r
+article \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 80vw;\r
+&nbsp;&nbsp;&nbsp;column-width: 119px;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 119px;\r
+\r
+&nbsp;&nbsp;&nbsp;margin: 2vh 5vw;\r
+&nbsp;&nbsp;&nbsp;padding: 2vh 5vw;\r
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> property defines the default column width but the visible width is not always similar. An algorithm calculates the width according to available space. Normally, a column has a different display width from the one set in the property because as the columns are sized to fill all available space.</p>\r
+<p>For example, on a 480 x 800 display with portrait orientation, the device width is 123 px, whereas on a 720 x 1280 display with a landscape orientation, the width is 120 px. The space available for columns is the <span style="font-family: Courier New,Courier,monospace">width</span> attribute value reduced by <span style="font-family: Courier New,Courier,monospace">padding</span>, in this case 80vw - (2 * 5vw) = 70vw, which means 70/100 width of the device display.</p>\r
+</li>\r
+<li>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property to set the distance between columns:</p>\r
+<pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;column-gap: 10px;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-gap: 10px;\r
+</pre>\r
+</li>\r
+<li>\r
+\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property to draw a vertical line between columns. Define the width, color, and style of the rule:</p>\r
+\r
+<pre class="prettyprint">\r
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 1px;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: #677784;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;\r
+&nbsp;&nbsp;&nbsp;column-rule-width: 1px;\r
+&nbsp;&nbsp;&nbsp;column-rule-color: #677784;\r
+&nbsp;&nbsp;&nbsp;column-rule-style: solid;\r
+}</pre>\r
+\r
+<p>The rule width does not increase the distance between columns. It is drawn under the column gap and can be even wider than the gap.</p>\r
+\r
+</li></ol>\r
+\r
+ <p>The figure below shows the layout with the <span style="font-family: Courier New,Courier,monospace">column-rule</span> <span style="font-family: Courier New,Courier,monospace">width</span> set to 40 px and the <span style="font-family: Courier New,Courier,monospace">column-gap</span> set to 10 px.</p>\r
+\r
+<p class="figure">Figure: Column settings</p> \r
+<p align="center"><img alt="Column settings" src="../../images/column_settings.png" /></p>\r
+</li>\r
+<li>\r
+<p>Define the <span style="font-family: Courier New,Courier,monospace">footer</span> element with the display height set to 5/100 and padding set to 2 * 2vh:</p> \r
+\r
+<pre class="prettyprint">\r
+footer \r
+{\r
+&nbsp;&nbsp;&nbsp;padding: 2vh;\r
+&nbsp;&nbsp;&nbsp;height: 5vh;\r
+&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Define the <span style="font-family: Courier New,Courier,monospace">section</span> elements setting the <span style="font-family: Courier New,Courier,monospace">border-bottom</span> and vertical <span style="font-family: Courier New,Courier,monospace">padding</span> values. It is not necessary to define horizontal padding, as it has been defined for the <span style="font-family: Courier New,Courier,monospace">article</span> element.</p>\r
+\r
+<pre class="prettyprint">\r
+article&gt;section\r
+{\r
+&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;\r
+&nbsp;&nbsp;&nbsp;padding: 4px 0;\r
+&nbsp;&nbsp;&nbsp;text-align: center;\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Set image elements to have an automatic <span style="font-family: Courier New,Courier,monospace">margin</span> to center them within the column.</p>\r
+<p>In case of the image whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">figure</span>, set it to be a floating element with text drawn around it.</p>\r
+\r
+<pre class="prettyprint">\r
+img{\r
+&nbsp;&nbsp;&nbsp;display: block;\r
+&nbsp;&nbsp;&nbsp;margin: 4px auto;\r
+}\r
+\r
+#figure\r
+{\r
+&nbsp;&nbsp;&nbsp;float: right;        \r
+&nbsp;&nbsp;&nbsp;margin: 4px;\r
+}\r
+</pre>\r
+</li></ol>\r
+\r
+<p>The following figures illustrate the created layout in different display sizes and orientations.</p>\r
+\r
+<p class="figure">Figure: Basic layout on a 480 x 800 display</p> \r
+<p align="center"><img alt="Basic layout on a 480 x 800 display" src="../../images/basic_layout_480x800.png" /></p>\r
+\r
+<p class="figure">Figure: Basic layout on a 720 x 1280 display</p> \r
+<p align="center"><img alt="Basic layout on a 720 x 1280 display" src="../../images/basic_layout_720x1280.png" /></p>\r
+\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up" target="_blank">renamed_index.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/css" target="_blank">style.css</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_green.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_yellow.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>\r
+ </ul>\r
+                       \r
+                               <h2 id="dynamic" name="dynamic">Creating a Layout with Dynamic Content</h2>\r
+                               \r
+                       <p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:</p>\r
+<ol>\r
+<li>\r
+<p>Create the HTML layout. The <span style="font-family: Courier New,Courier,monospace">article</span> element displays the columns, and the <span style="font-family: Courier New,Courier,monospace">nav</span> element contains buttons to add and remove content in the columns.</p>\r
+<pre class="prettyprint">\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;nav&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;addSections&quot; href=&quot;#&quot;&gt;Add images&lt;/a&gt; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;howMany&quot; value=&quot;3&quot;&gt; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;removeGroup&quot; href=&quot;#&quot;&gt;Remove last Group&lt;/a&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/nav&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;footer&gt; Multicolumn Layout Tutorial 02&lt;/footer&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+</li>\r
+<li>Set the CSS properties:\r
+<ol type="a">\r
+<li>\r
+<p>Define the CSS display and column properties:</p>\r
+<pre class="prettyprint">\r
+body \r
+{\r
+&nbsp;&nbsp;&nbsp;display: flex;\r
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;\r
+&nbsp;&nbsp;&nbsp;flex-direction: column;\r
+&nbsp;&nbsp;&nbsp;-webkit-flex-direction: column;\r
+&nbsp;&nbsp;&nbsp;background: #fefffa;\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Set the <span style="font-family: Courier New,Courier,monospace">article</span>, <span style="font-family: Courier New,Courier,monospace">nav</span> and <span style="font-family: Courier New,Courier,monospace">footer</span> elements in one column using the flexible box layout.</p>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">nav</span> element is also a flexible box layout container to set UI elements in.</p>\r
+<pre class="prettyprint">\r
+nav \r
+{\r
+&nbsp;&nbsp;&nbsp;height: 20vh;\r
+&nbsp;&nbsp;&nbsp;padding-left: 20%;\r
+&nbsp;&nbsp;&nbsp;padding-top: 10px;\r
+&nbsp;&nbsp;&nbsp;display: flex;\r
+&nbsp;&nbsp;&nbsp;display: -webkit-flex;\r
+&nbsp;&nbsp;&nbsp;flex-flow: row wrap;\r
+&nbsp;&nbsp;&nbsp;-webkit-flex-flow: row wrap;\r
+&nbsp;&nbsp;&nbsp;flex: none;\r
+&nbsp;&nbsp;&nbsp;-webkit-flex: none;\r
+&nbsp;&nbsp;&nbsp;justify-content: space-around;\r
+&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-around;\r
+&nbsp;&nbsp;&nbsp;align-items: center;\r
+&nbsp;&nbsp;&nbsp;-webkit-align-items: center;\r
+&nbsp;&nbsp;&nbsp;background: url(../images/white_logo.png) no-repeat;\r
+&nbsp;&nbsp;&nbsp;background-position: 2%;\r
+&nbsp;&nbsp;&nbsp;background-size: auto 70%;\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Define the styles for the <span style="font-family: Courier New,Courier,monospace">a</span> elements within the <span style="font-family: Courier New,Courier,monospace">nav</span> element to make them appear as buttons:</p>\r
+<pre class="prettyprint">\r
+nav a \r
+{\r
+&nbsp;&nbsp;&nbsp;margin: 3px;\r
+&nbsp;&nbsp;&nbsp;border-radius: 5px;\r
+&nbsp;&nbsp;&nbsp;padding: 5px 15px;\r
+&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);\r
+&nbsp;&nbsp;&nbsp;text-align: center;\r
+&nbsp;&nbsp;&nbsp;font-weight: bold;\r
+}\r
+</pre>\r
+<p>When the user taps the <strong>Add images</strong> button, the images and their descriptions are displayed.</p>\r
+</li>\r
+<li>\r
+<p>Define the <span style="font-family: Courier New,Courier,monospace">input</span> element (with the property type set to <span style="font-family: Courier New,Courier,monospace">number</span>) style with an increased height to match the buttons around it:</p>\r
+<pre class="prettyprint">\r
+nav input\r
+{\r
+&nbsp;&nbsp;&nbsp;width: 50px;\r
+&nbsp;&nbsp;&nbsp;height: 2em;\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element contains the column properties. Use the <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span> property to set the column width. The real width is calculated based on available space.</p>\r
+<pre class="prettyprint">\r
+article \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 90vw;\r
+&nbsp;&nbsp;&nbsp;column-width: 136px;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-width: 136px;\r
+&nbsp;&nbsp;&nbsp;margin: 1vh 2vh;\r
+&nbsp;&nbsp;&nbsp;padding: 1vh;\r
+&nbsp;&nbsp;&nbsp;background: #c3c8ca;\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Set the images within the <span style="font-family: Courier New,Courier,monospace">article</span> element with a block display to separate them from text:</p>\r
+<pre class="prettyprint">\r
+article img \r
+{\r
+&nbsp;&nbsp;&nbsp;margin: 0 auto;\r
+&nbsp;&nbsp;&nbsp;display: block;\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Define the <span style="font-family: Courier New,Courier,monospace">column-span</span> property as <span style="font-family: Courier New,Courier,monospace">all</span> for the <span style="font-family: Courier New,Courier,monospace">h1</span> elements:</p>\r
+<pre class="prettyprint">\r
+article&gt;h1 \r
+{\r
+&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.5);\r
+&nbsp;&nbsp;&nbsp;padding: 4px;\r
+&nbsp;&nbsp;&nbsp;text-align: center;\r
+&nbsp;&nbsp;&nbsp;color: #eed484;\r
+&nbsp;&nbsp;&nbsp;column-span: all;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-span: all;\r
+}\r
+</pre>\r
+<p> As a result, the <span style="font-family: Courier New,Courier,monospace">h1</span> elements are spread across the columns. When the <span style="font-family: Courier New,Courier,monospace">column-span</span> property is used, you cannot have more columns than can fit in the available horizontal space.</p>\r
+</li>\r
+<li>\r
+<p>Define the <span style="font-family: Courier New,Courier,monospace">break-inside</span> property as <span style="font-family: Courier New,Courier,monospace">avoid</span> to avoid breaking elements between columns:</p>\r
+<pre class="prettyprint">\r
+article&gt;section \r
+{\r
+&nbsp;&nbsp;&nbsp;break-inside: avoid;\r
+&nbsp;&nbsp;&nbsp;-webkit-column-break-inside: avoid;\r
+&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;\r
+&nbsp;&nbsp;&nbsp;padding: 4px 0;\r
+&nbsp;&nbsp;&nbsp;text-align: center;\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Set the <span style="font-family: Courier New,Courier,monospace">footer</span> size:</p>\r
+<pre class="prettyprint">\r
+footer \r
+{\r
+&nbsp;&nbsp;&nbsp;padding: 2vh;\r
+&nbsp;&nbsp;&nbsp;height: 5vh;\r
+&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);\r
+}\r
+</pre>\r
+</li>\r
+</ol>\r
+</li>\r
+<li>Add the JavaScript code to make the content dynamic:\r
+<ol type="a">\r
+<li>\r
+<p>Declare a variable for the images. Elements included in the variable amount to data displayed in a column layout, such as a newsfeed:</p>\r
+<pre class="prettyprint">\r
+var images = [&quot;images/pinwheel_green.png&quot;,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot;, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_WhiteFold_4.png&quot;, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/pinwheel_yellow.png&quot;];\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Declare a variable for the input element for selecting the number of images added to the content:</p>\r
+<pre class="prettyprint">\r
+var howManyInput;\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Use the <span style="font-family: Courier New,Courier,monospace">addGroup()</span> method with the input parameter value to add random images to the column layout and initialize the button events:</p>\r
+\r
+<pre class="prettyprint">\r
+window.onload = function() \r
+{\r
+&nbsp;&nbsp;&nbsp;addGroup(4);\r
+&nbsp;&nbsp;&nbsp;howManyInput = document.getElementById(&#39;howMany&#39;);\r
+&nbsp;&nbsp;&nbsp;var addBtn = document.getElementById(&#39;addSections&#39;);\r
+&nbsp;&nbsp;&nbsp;addBtn.onclick = function() \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addGroup(howManyInput.value);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;};\r
+&nbsp;&nbsp;&nbsp;var removeBtn = document.getElementById(&#39;removeGroup&#39;);\r
+&nbsp;&nbsp;&nbsp;removeBtn.onclick = function() \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeGroup();\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;};\r
+};\r
+</pre>\r
+</li>\r
+<li>\r
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">h1No</span> variable containing the number of <span style="font-family: Courier New,Courier,monospace">h1</span> elements included in the <span style="font-family: Courier New,Courier,monospace">article</span> elements, and one added to next lines.</p>\r
+\r
+<p>Declare the <span style="font-family: Courier New,Courier,monospace">newHTML</span> variable to add new content to the column layout. Each added element contains an <span style="font-family: Courier New,Courier,monospace">h1</span> element as a header, and <span style="font-family: Courier New,Courier,monospace">section</span> elements. Include an <span style="font-family: Courier New,Courier,monospace">img</span> element with a text description in each <span style="font-family: Courier New,Courier,monospace">section</span> element to display a random image. The <span style="font-family: Courier New,Courier,monospace">art</span> variable is initialized, and new HTML code (<span style="font-family: Courier New,Courier,monospace">newHTML</span>) is concatenated with the existing one (<span style="font-family: Courier New,Courier,monospace">innerHTML</span>):</p>\r
+<pre class="prettyprint">\r
+function addGroup(howMany) \r
+{\r
+&nbsp;&nbsp;&nbsp;var h1No = document.querySelectorAll(&#39;article&gt;h1&#39;).length + 1;\r
+&nbsp;&nbsp;&nbsp;var newHTML = &quot;&lt;h1&gt;Group &quot; + h1No + &quot;&lt;/h1&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;var i;\r
+\r
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; howMany; ++i) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&lt;section&gt;&lt;img alt=&#39;&#39; src=&#39;&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += images[Math.floor(Math.random() * 4)];\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&#39;&gt;Lorem ipsum dolor sit amet diam sodales rutrum.&lt;/section&gt;&quot;;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;var art = document.getElementById(&quot;article&quot;);\r
+&nbsp;&nbsp;&nbsp;art.innerHTML += newHTML;\r
+}\r
+</pre>\r
+</li>\r
+<li>\r
+<p>When the user taps the <strong>Remove last Group</strong> button, the <span style="font-family: Courier New,Courier,monospace">removeGroup()</span> method is called to remove the group of images that was added last. Use the <span style="font-family: Courier New,Courier,monospace">all</span> variable to select all  <span style="font-family: Courier New,Courier,monospace">h1</span> elements in the content using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method. If the <span style="font-family: Courier New,Courier,monospace">last</span> value is less than 0, there is no element to remove. Use the <span style="font-family: Courier New,Courier,monospace">removeNextSibling()</span> method to recursively delete the next sibling element, and the  <span style="font-family: Courier New,Courier,monospace">removeChild()</span> method to remove the <span style="font-family: Courier New,Courier,monospace">h1</span> elements from its parent.</p>\r
+<pre class="prettyprint">\r
+function removeGroup() \r
+{\r
+&nbsp;&nbsp;&nbsp;var all = document.querySelectorAll(&#39;article&gt;h1&#39;);\r
+&nbsp;&nbsp;&nbsp;var last = all.length - 1;\r
+&nbsp;&nbsp;&nbsp;if (last &lt; 0) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;removeNextSibling(all[last].nextSibling);\r
+&nbsp;&nbsp;&nbsp;all[last].parentElement.removeChild(all[last]);\r
+}\r
+</pre>\r
+</li>\r
+</ol>\r
+</li></ol>\r
+<p>The following figures illustrate the created layout in different display sizes and orientations.</p>\r
+\r
+<p class="figure">Figure: Dynamic layout on a 480 x 800 display</p> \r
+<p align="center"><img alt="Dynamic layout on a 480 x 800 display" src="../../images/dynamic_layout_480x800.png" /></p>\r
+\r
+<p class="figure">Figure: Dynamic layout on a 720 x 1280 display</p> \r
+<p align="center"><img alt="Dynamic layout on a 720 x 1280 display" src="../../images/dynamic_layout_720x1280.png" /></p>\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up" target="_blank">renamed_index.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/css" target="_blank">style.css</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/js" target="_blank">main.js</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">pinwheel_green.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">pinwheel_yellow.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">white_logo.png</a></li>\r
+ </ul>\r
+                       \r
+ \r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/multiple_screens_mw.htm b/org.tizen.ui.guides/html/web/w3c/multiple_screens_mw.htm
new file mode 100755 (executable)
index 0000000..6af563d
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/multiple_screens_mw.htm
@@ -0,0 +1,382 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
+    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+    <script type="text/javascript" src="../../scripts/snippet.js"></script>
+    <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+  <title>Multiple Screen Support: Supporting Different Screen Sizes</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+    <div id="profile">
+        <p><img alt="Mobile Web" src="../../images/mw_icon.png"/></p>
+    </div>
+
+    <div id="toc_border"><div id="toc">
+        <p class="toc-title">Content</p>
+        <ul class="toc">
+            <li><a href="#key">Key Concepts</a></li>
+            <li><a href="#ui">UI Scalability</a></li>
+            <li><a href="#create">Creating Applications Supporting Multiple Screens</a></li>
+            <li><a href="#resolution">Image Resolution Optimization</a></li>
+        </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+  <h1>Multiple Screen Support: Supporting Different Screen Sizes</h1>
+  
+  <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen Web applications, you must take this into account if you want your application to function well in various device models.</p>
+
+    
+    <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+
+  <p>Before <a href="#create">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key">key concepts of multiple screen support</a>.</p>
+  <p>Tizen provides the <a href="#ui">UI scalability</a> resolution feature, which allows you to create scalable applications.</p>
+  <p>To optimize images used in Web applications, images based on a single resource can be used in <a href="#resolution">various resolutions</a>.</p>
+  <h2 id="key" name="key">Key Concepts</h2>
+  <p>Before building a Web application for multiple resolutions, make sure you are familiar with the following <a href="http://www.w3.org/" target="_blank">W3C</a> Web content scaling standards, which must be taken into account when developing Web applications:</p>
+  <ul>
+   <li>Viewport meta tag</li>
+   <li>CSS media query</li>
+  </ul>
+  <h3 id="viewport" name="viewport">Viewport Meta Tag</h3>
+  <p>A viewport defines the application area that displays the Web page content.</p>
+  <p>In a Web browser, the viewport size depends on the browser window size. If the viewport is smaller than the Web content size, horizontal and vertical scrollbars are displayed for page navigation. The Web browser viewport does not support the zoom feature. However, in a mobile Web browser, there are no window scrollbars and the viewport supports the zoom feature.</p>
+  <p>The <a href="http://www.w3.org/TR/mwabp/#bp-viewport" target="_blank">viewport meta tag</a> enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages.</p>
+  <p>To use the viewport meta tag while developing Web applications, you must note the following:</p>
+  <ul>
+   <li>The <span style="font-family: Courier New,Courier,monospace">device-height</span> and <span style="font-family: Courier New,Courier,monospace">device-width</span> attributes defined in the viewport meta tag are not the same as the real device width and height in pixels.</li>
+   <li>Using the viewport meta tag, the Web browsers of different devices display the same content with different layout size and scale factor. The scale factor is calculated using the device pixel ratio (DPR).</li>
+  </ul>
+  <h3 id="css" name="css">CSS Media Query</h3>
+  <p>The <a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank">CSS media query</a> enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example:</p>
+  <ul>
+   <li>Define the image resource to be used based on the screen dots per inch (DPI) ratio.</li>
+   <li>Determine the CSS layout to be used based on the screen width.</li>
+  </ul>
+  <p></p>
+  <h2 id="ui" name="ui">UI Scalability</h2>
+  <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application&#39;s logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <span style="font-family: Courier New,Courier,monospace">rem</span> unit to determine the size of the Tizen Web UI components.</p>
+  <h3 id="set" name="set">Setting the Viewport</h3>
+  <p>Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.</p>
+  <p>In the following example, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, which is determined by the width of the Tizen device. The <span style="font-family: Courier New,Courier,monospace">device-width</span> value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
+  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</pre>
+  <p>If the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (<span style="font-family: Courier New,Courier,monospace">http://tizen.org</span>) on different devices with the viewport width set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
+  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;</pre>
+  <table>
+   <caption>
+     Table: Layout size and scale factor
+   </caption>
+   <tbody>
+    <tr>
+     <th>Device screen resolution</th>
+     <th>Real screen DPI</th>
+     <th>Device DPI</th>
+     <th>Web browser page</th>
+     <th>Viewport width</th>
+     <th>Scale factor</th>
+    </tr>
+    <tr>
+     <td style="text-align:center;">720 x 1280</td>
+     <td style="text-align:center;">306</td>
+     <td style="text-align:center;">320</td>
+     <td style="text-align:center;"><img alt="captured screen1" src="../../images/captured_screen1.png" /></td>
+     <td style="text-align:center;">360 px</td>
+     <td style="text-align:center;">2.0</td>
+    </tr>
+    <tr>
+     <td style="text-align:center;">480 x 800</td>
+     <td style="text-align:center;">218</td>
+     <td style="text-align:center;">240</td>
+     <td style="text-align:center;"><img alt="captured screen2" src="../../images/captured_screen2.png" /></td>
+     <td style="text-align:center;">320 px</td>
+     <td style="text-align:center;">1.5</td>
+    </tr>
+   </tbody>
+  </table>
+  <h3 id="web" name="web">Working with Tizen Web Winsets</h3>
+  <p>The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
+  <p>If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the <span style="font-family: Courier New,Courier,monospace">rem</span> unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the <span style="font-family: Courier New,Courier,monospace">&lt;html&gt;</span> element to adjust the Tizen Web winset sizes accurately.</p>
+  <h2 id="create" name="create">Creating Applications Supporting Multiple Screens</h2>
+  <p>To create an application that supports multiple screen sizes, you must consider the following while coding your application:</p>
+  <ul>
+   <li>Configuring the viewport</li>
+   <li>Optimizing resources</li>
+   <li>Creating screen resolution-independent UI</li>
+  </ul>
+  <h3 id="configure" name="configure">Configuring the Viewport</h3>
+  <p>To use UI scalability in your application, set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag while <a href="../../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm">creating a Web application project</a> in IDE. To configure the viewport in the Tizen Web applications, add the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+  <pre class="prettyprint">&lt;meta name=&quot;viewport&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1.0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt;</pre>
+  <h3 id="optimize" name="optimize">Optimizing Resources</h3>
+  <p>By default, the Tizen Advanced UI (TAU) consists of the HD Web winsets. The winset scale is lowered for lower screen resolution devices. To optimize resources for different screen resolutions and devices, use the <a href="#css">CSS media query</a> for different resolutions available in Tizen. You can use CSS media queries in the HTML or CSS files.</p>
+  <p>In the HTML file:</p>
+  <pre class="prettyprint">&lt;link media=&quot;only screen and (min-resolution: 320dpi)&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;high-quality-images.css&quot; type= &quot;text/css&quot; rel=&quot;stylesheet&quot;&gt;</pre>
+  <p>In the CSS file:</p>
+  <pre class="prettyprint lang-html">@media screen and (max-resolution: 159dpi)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+
+@media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+
+@media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+
+@media screen and (min-resolution: 320dpi)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+</pre>
+  <p>You can also set different layout and resources for the portrait and landscape views in the CSS file:</p>
+  <pre class="prettyprint lang-html">@media screen and (orientation: portrait)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+
+@media screen and (orientation: landscape)
+{
+&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+}
+</pre>
+  <h3 id="independent" name="independent">Creating Screen Resolution-independent UI</h3>
+  <p>The Tizen base font size is 22 px. This base font size value varies based on the device screen resolution. However, to create a screen resolution-independent UI, the Web browser engine renders the base font size as a logical pixel size instead of a physical pixel size.</p>
+  <h2 id="resolution" name="resolution">Image Resolution Optimization</h2>
+
+  <p>In Web applications, optimization of applications for various platforms (regarding devices, OS, and resolution) is efficient.</p>
+  <p><a href="media_query_w.htm">Media Queries</a> and <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" target="blank">Flexible Box Layout</a> can be used to create flexible layouts, and to build the <a href="https://developer.tizen.org/downloads/sample-web-applications/load-web-app-tizen-sdk" target="blank">deployable package</a> easily.</p>
+
+  <p>Images can be used in Web applications in the following ways:</p>
+  <ul><li><span style="font-family: Courier New,Courier,monospace">IMG</span> tag linking images directly to HTML</li>
+  <li>CSS <span style="font-family: Courier New,Courier,monospace">background</span> property expressing images as a background in HTML</li>
+  <li><a href="../../../../org.tizen.guides/html/web/w3c/graphics/svg_w.htm">SVG (Scalable Vector Graphics)</a>, <a href="../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a>, and <a href="http://www.khronos.org/registry/webgl/specs/latest/" target="blank">WebGL</a> APIs implementing graphics in HTML</li>
+  </ul>
+  <p>When selecting an option from the list above, consider the type of the image resource you are going to use.</p>
+  <p>You can use the following types of image resources:</p>
+  <ul><li><a href="#photos">Photos</a></li>
+<li><a href="#icons">Icons</a></li>
+
+    <li><a href="#animated">Animated images</a></li>
+
+    </ul>
+    <h3 id="photos" name="photos">Photos</h3>
+    <p>An image can be added to an application using the HTML <span style="font-family: Courier New,Courier,monospace">img</span> tag, or CSS <span style="font-family: Courier New,Courier,monospace">background</span> property as shown in the following example:</p>
+  <pre class="prettyprint">&lt;!--HTML--&gt;
+&lt;img src=&quot;images/sample.jpg&quot; alt=&quot;sample image&quot; /&gt;
+
+&lt;!--CSS--&gt;
+.photo
+{
+&nbsp;&nbsp;&nbsp;background: url(../images/sample.jpg) 0 0 no-repeat;
+&nbsp;&nbsp;&nbsp;background-size: 100%;
+&nbsp;&nbsp;&nbsp;width: 100%;
+&nbsp;&nbsp;&nbsp;height: 200px;
+}
+</pre>
+<p>In terms of performance, there is no difference between the options.</p>
+
+<p>The image color is expressed based on pixels. Therefore, the higher resolution an image has, the better it looks on a large screen. For full HD display, a resolution bigger than the image size displayed on the screen is needed. However, since a high resolution image tends to have a large size, limit the image size as to fit the maximum screen size:</p>
+<ul><li>1024 x 768 px: 90 KB</li><li>300 x 200 px: 39 KB</li><li>300 x 200 px: 15 KB</li></ul>
+<p>Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size.</p>
+<pre class="prettyprint">img
+{
+&nbsp;&nbsp;&nbsp;max-width: 100%;
+}
+</pre>
+
+<p class="figure">Figure: Enlarging a low-resolution image</p>
+<p align="center"><img alt="Enlarging a low-resolution image" src="../../images/enlarge_low_res_image.png" /></p>
+  <h3 id="icons" name="icons">Icons</h3>
+    <p>Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 <span style="font-family: Courier New,Courier,monospace">background-size</span> property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.</p>
+    <pre class="prettyprint">.prev_icon, .next_icon
+{
+&nbsp;&nbsp;&nbsp;padding-left: 30px;
+&nbsp;&nbsp;&nbsp;height: 30px;
+&nbsp;&nbsp;&nbsp;line-height: 30px;
+&nbsp;&nbsp;&nbsp;font-size: 1.2em;
+&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
+&nbsp;&nbsp;&nbsp;background-position: 0 50%;
+&nbsp;&nbsp;&nbsp;background-size: auto 20px;
+}
+
+.prev_icon.icon1
+{
+&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow_left_01.png);
+}
+</pre>
+
+<p>When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the figure below.</p>
+
+<p class="figure">Figure: Network speed when calling each image separately</p>
+<p align="center"><img alt="Calling each of image separately" src="../../images/calling_img_sep.png"/></p>
+
+<p>You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the <span style="font-family: Courier New,Courier,monospace">background-position</span> property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
+</p>
+<pre class="prettyprint lang-html">.prev_icon, .next_icon
+{
+&nbsp;&nbsp;&nbsp;background-size: 20px auto; &lt;!--Full HD Display--&gt;
+&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow.png);
+}
+
+.prev_icon.icon1
+{
+&nbsp;&nbsp;&nbsp;background-position: 0 0;
+}
+
+.prev_icon.icon2
+{
+&nbsp;&nbsp;&nbsp;background-position: 0 -50px;
+}
+</pre>
+<p class="figure">Figure: Network speed when using sprite images</p>
+<p align="center"><img alt="Network speed when using sprite image" src="../../images/network_speed_sprite.png" /></p>
+     <h3 id="animated" name="animated">Animated Images</h3>
+    <p>Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.</p>
+
+    <p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <span style="font-family: Courier New,Courier,monospace;">animation</span> attribute.</p>
+    <p class="figure">Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</p>
+    <p align="center"><img alt="JAVA mascot character  in GIF" src="../../images/mascot.gif"/></p><br/>
+
+    <p>Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a>:</p>
+    <ul>
+    <li><a href="#gif">GIF animation</a></li>
+    <li><a href="#js">JavaScript animation</a></li>
+    <li><a href="#css3">CSS3 animation</a></li>
+    </ul>
+
+    <h4 id="gif" name="gif">GIF Animation</h4>
+
+    <p>Using GIF animation, the resource usage is as follows:</p>
+    <ul><li>Events: Fires only the painting event</li>
+    <li>Memory: 3 ~ 4 MB</li>
+    <li>Network: 10 ~ 25 ms</li>
+</ul>
+
+    <p class="figure">Figure: Events for a GIF image</p>
+    <p align="center"><img alt="Events" src="../../images/events.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a GIF image</p>
+    <p align="center"><img alt="Memory" src="../../images/memory.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a GIF image</p>
+    <p align="center"><img alt="Network" src="../../images/network.png"/></p><br/>
+
+    <p>GIF animation can be created in various resolutions without quality loss, when you use the option introduced in <a href="#photos">Photos</a>. This, however, increases memory occupancy.</p>
+
+    <h4 id="js" name="js">JavaScript Animation</h4>
+
+<p>JavaScript animation is less affected by enlarging or reducing its screen size. However, it uses a lot of device resources compared to using CSS3 animations:</p>
+<ul><li>
+Events: Event is fired every 100 ms, the interval of <span style="font-family: Courier New,Courier,monospace">setInterval()</span>.</li><li>
+Memory: Increases in proportion to time, from the initial size 90 KB.</li><li>
+Network: Used until the animation is stopped.</li></ul>
+    <p class="figure">Figure: Events for a JavaScript animation</p>
+    <p align="center"><img alt="Events" src="../../images/events2.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a JavaScript animation</p>
+    <p align="center"><img alt="Memory" src="../../images/memory2.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a JavaScript animation</p>
+    <p align="center"><img alt="Network" src="../../images/network2.png"/></p><br/>
+<p>The following example shows how JavaScript animation can be implemented:</p>
+    <pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0;
+&nbsp;&nbsp;&nbsp;function animate()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;setInterval(animate, 100);
+&lt;/script&gt;
+</pre>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations</a> API to prevent animation freezes that occur occasionally:</p>
+
+<pre class="prettyprint">&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0, i = 0;
+&nbsp;&nbsp;&nbsp;function animate()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(i % 6)) obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
+&lt;/script&gt;
+</pre>
+
+    <h4 id="css3" name="css3">CSS3 Animation</h4>
+
+        <p>CSS3 animation has a low usage of events, memory, and network capacity. It is efficient for animations that have a fixed size. However, since CSS3 animation is pixel-based, it is difficult to use for animations that need to be enlarged or reduced, in which case JavaScript is a better option:</p>
+<ul><li>
+Events: Fires only rendering and painting events</li><li>
+Memory: 50 ~ 90 KB</li><li>
+Network: 9 ~ 21 ms</li></ul>
+
+    <p class="figure">Figure: Events for a CSS3 animation</p>
+    <p align="center"><img alt="Events" src="../../images/events3.png"/></p><br/>
+    <p class="figure">Figure: Memory usage of a CSS3 animation</p>
+    <p align="center"><img alt="Memory" src="../../images/memory3.png"/></p><br/>
+    <p class="figure">Figure: Network capacity usage of a CSS3 animation</p>
+    <p align="center"><img alt="Network" src="../../images/network3.png"/></p><br/>
+
+    <p>The following example shows how CSS3 animation can be implemented:</p>
+        <pre class="prettyprint">&lt;style&gt;
+&nbsp;&nbsp;&nbsp;.css_animation
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 50px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 70px;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(../images/sprite.png);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: cssAni .8s steps(10) infinite;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;@-webkit-keyframes cssAni
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {background-position: 0px;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {background-position: -500px;}
+&nbsp;&nbsp;&nbsp;}
+&lt;/style&gt;
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/text_module_w.htm b/org.tizen.ui.guides/html/web/w3c/text_module_w.htm
new file mode 100755 (executable)
index 0000000..bd570e1
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/text_module_w.htm
@@ -0,0 +1,244 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Text Module Level 3: Manipulating Text</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">CSS Text Module Level 3 API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">CSS Text Module Level 3 API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>CSS Text Module Level 3: Manipulating Text</h1>\r
+\r
+<p>You can apply various text effects easily.</p>\r
+\r
+<p>The new text features in CSS Text Module Level 3 include:</p>\r
+<ul>\r
+\r
+<li>Text properties\r
+<p>You can use CSS text properties, such as <span style="font-family: Courier New,Courier,monospace">text-transform</span>, <span style="font-family: Courier New,Courier,monospace">text-align</span>, <span style="font-family: Courier New,Courier,monospace">text-indent</span>, <span style="font-family: Courier New,Courier,monospace">letter-spacing</span>, and <span style="font-family: Courier New,Courier,monospace">word-spacing</span>, to <a href="#text">manipulate and transform text</a>.</p></li>\r
+</ul> \r
+\r
+<h2 id="text" name="text">Manipulating Text</h2>\r
+                               \r
+<p>To enhance the user experience of your application, you must learn to handle line breaking, justification, alignment, white space handling, and text transformations using CSS text properties:</p>\r
+\r
+<ol>\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-transform</span> property within a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of the Web page to control the text capitalization:\r
+\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-transform: none;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-transform: capitalize;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-transform: uppercase;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-transform: lowercase;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-transform: full-width;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-align</span> property, which controls the text alignment:\r
+\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-align: start;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-align: end;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-align: left;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-align: right;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-align: center;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {text-align: justify;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-indent</span> property, which controls the text indentation:\r
+\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-indent: 0}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-indent: 1em}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-indent: -1em}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-indent: 5%}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-indent: -5%}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">letter-spacing</span> property, which controls the letter spacing:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {letter-spacing: .5em}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {letter-spacing: -.1em}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-spacing</span> property, which controls the space between words:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-spacing: 1em}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-spacing: -.1em}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-break</span> property, which determines the line breaking rules for non-CJK (Chinese, Japanese, and Korean) scripts:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-break: normal}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-break: keep-all}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {word-break: break-all}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">white-space</span> property, which determines the handling of empty space within an element:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {white-space: normal}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {white-space: pre}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {white-space: nowrap}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {white-space: pre-wrap}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {white-space: pre-line}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps\r
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps\r
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps\r
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps\r
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps\r
+&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;\r
+&lt;/body&gt;\r
+&lt;/html&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">text-shadow</span> property, which adds a shadow effect to text:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, .7)}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-shadow: -0.2em 0.2em 0.2em #000, 0.2em -0.2em 0.2em #f00}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {color: #fff; text-shadow: 0 0 .7em #000;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {color: #fff; text-shadow: 0 0 1px #f00;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">word-wrap</span> and  <span style="font-family: Courier New,Courier,monospace">overflow-wrap</span> properties, which control forced line breaks when the length of a word is longer than the area where it is displayed:\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-wrap: normal}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-wrap: break-word}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {overflow-wrap: normal}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {overflow-wrap: break-word}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+</li>\r
+\r
+</ol>\r
+\r
+\r
+<p>The following figure shows examples of manipulating the text properties.</p>\r
+<p class="figure">Figure: Text properties (in mobile applications only)</p>\r
+<p align="center"><img alt="Text properties (in mobile applications only)" src="../../images/text_properties.png"/></p>\r
+\r
+  <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note">For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/#appendix-h-full-property-index" target="_blank">Property index</a>.</td>\r
+    </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/transform_w.htm b/org.tizen.ui.guides/html/web/w3c/transform_w.htm
new file mode 100755 (executable)
index 0000000..ecffd0a
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/transform_w.htm
@@ -0,0 +1,772 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Transforms: Manipulating Elements</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#prop_trans">Transform Properties</a></li>\r
+                       <li><a href="#twod">2D and 3D Transform Functions</a></li>\r
+                       <li><a href="#animation">Creating an Animation with Transforms</a></li>\r
+                       <li><a href="#effect">Creating Fade Animation Effects</a></li>\r
+                       <li><a href="#hw">Using Hardware Acceleration</a>\r
+                       </li>\r
+               </ul>\r
+               \r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transforms">CSS Transforms API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>CSS Transforms: Manipulating Elements</h1>\r
+\r
+<p>Transforms allow you to <a href="#animation">modify the coordinate space</a> where each element is positioned. The elements can be translated, rotated, and scaled in 2- or 3-dimensional space. According to the API, the coordinate system is a visual formatting model, and positions and sizes in the coordinate space are expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.</p>\r
+\r
+<p>To enhance the rendering performance and user experience, you can <a href="#hw">use hardware acceleration</a> and <a href="#effect">create fade effects</a>.</p>\r
+\r
+<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <span style="font-family: Courier New,Courier,monospace">-moz-</span> prefix, the Chrome and Safari browsers require the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix, and the Opera browser requires the <span style="font-family: Courier New,Courier,monospace">-o-</span> prefix.</p>\r
+\r
+<h2 name="prop_trans" id="prop_trans">Transform Properties</h2>\r
+\r
+<p>You can define various properties to control the elements within the coordinate space:</p>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">transform-origin</span>\r
+<p>This property changes the location of the transformed element. It can only be used with elements for whom the <span style="font-family: Courier New,Courier,monospace">transform</span> property has been declared.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">transform-style</span>\r
+<p>This property defines the rendering of the inherited element in the 3D space. Animation property has been added in the example for easier comprehension.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">perspective</span>\r
+<p>This property changes the perspective of the element being expressed. A 3D transform element must be used together with this property to emphasize the expression of the X axis.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">perspective-origin</span>\r
+<p>This property defines the location facing the element.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">backface-visibility</span>\r
+<p>This property defines whether the backface of the transformed element is expressed.</p></li>\r
+</ul>\r
+\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(30deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 30% 30%;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective: 220;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animation: trans-ani 10s infinite linear;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backface-visibility: visible;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(30deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 30% 30%;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective: 220;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: trans-ani 10s infinite linear;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-backface-visibility: visible;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01 \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-style: preserve-3d;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective-origin: 30% 30%;\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-style: preserve-3d;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective-origin: 30% 30%;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;transform-origin&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform-origin: 30% 30%;&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;box&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+<p>In addition to transform properties, you can also use various <a href="#twod">2D and 3D transform functions</a>.</p>\r
+\r
+ <h2 id="twod" name="twod">2D and 3D Transform Functions</h2>\r
+\r
+<p>The CSS Transforms API supports various transform functions in 2D and 3D.</p>\r
+\r
+<p>In 2D transforms, all transform functions are expressed based on a matrix. The X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span>, <span style="font-family: Courier New,Courier,monospace">scale()</span>, and <span style="font-family: Courier New,Courier,monospace">skew()</span> functions can be expressed in individual functions. For example, the X and Y values of the <span style="font-family: Courier New,Courier,monospace">translate()</span> function can be expressed with the <span style="font-family: Courier New,Courier,monospace">translateX(number)</span> and <span style="font-family: Courier New,Courier,monospace">translateY(number)</span> functions.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate(30px, 30px);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate(30px, 30px);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1.2, 1.2);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale(1.2, 1.2);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(45deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(45deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-skew \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: skew(20deg, 20deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: skew(20deg, 20deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;2d transform&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h2&gt;translate&lt;/h2&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box no-transform&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Original&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed box-translate&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform: translate(30px, 30px);&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+<p>In 3D transforms, the Z axis has been added (for example, <span style="font-family: Courier New,Courier,monospace">translateZ(number)</span> and <span style="font-family: Courier New,Courier,monospace">scale3dZ(number)</span>). When handling 3D transforms, pay attention to the following:</p>\r
+<ul>\r
+<li>If a transform function is used together with the <span style="font-family: Courier New,Courier,monospace">perspective</span> property, the z axis is emphasized.</li>\r
+<li>The X, Y, and Z values of the <span style="font-family: Courier New,Courier,monospace">translate3d()</span>, <span style="font-family: Courier New,Courier,monospace">scale3d()</span>, and <span style="font-family: Courier New,Courier,monospace">rotate3d()</span> functions can be expressed in individual functions.</li>\r
+<li>In the <span style="font-family: Courier New,Courier,monospace">rotate3d(number, number, number, angle)</span> function, the element rotates according to the assigned parameter (angle) with the X, Y, and Z directional vectors as the center. Each vector can be expressed as an individual function: for example, the <span style="font-family: Courier New,Courier,monospace">rotateX(&lt;angle&gt;)</span> and <span style="font-family: Courier New,Courier,monospace">rotate3d(1, 0, 0, &lt;angle&gt;)</span> functions perform the same task.</li>\r
+</ul> \r
+<p>The following code snippet demonstrates how to implement a 3D transform. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">3d_transform.html</a>.</p>\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.first-transform {opacity: .5; background: #3399cc;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.transformed {opacity: .8;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* translate3d */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .first-transform \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(-5px, -5px, -60px) rotateY(70deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-5px, -5px, -60px) rotateY(70deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .transformed \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(15px, 15px, 60px) rotateY(70deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(15px, 15px, 60px) rotateY(70deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* scale3d */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .first-transform \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(1, 1, 1) rotateY(70deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(1, 1, 1) rotateY(70deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .transformed \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(0.6, 0.6, 2) rotateY(70deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(0.6, 0.6, 2) rotateY(70deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* rotate3d */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .first-transform \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(-1, -1, -1, 110deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(-1, -1, -1, 110deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .transformed \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(1, 1, 1, 110deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(1, 1, 1, 110deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* matrix3d */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .first-transform \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .transformed \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;3D transform&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h2&gt;&lt;/h2&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;First box value:&lt;/strong&gt; transform: translate3d(-5px, -5px, -60px) rotateY(70deg);&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;Second box value:&lt;/strong&gt; transform: translate3d(15px, 15px, 60px) rotateY(70deg);&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea box-translate3d&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box first-transform&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;First box\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Second Box&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mouse over or tab here to animate\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+\r
+\r
+<h2 id="animation" name="animation">Creating an Animation with Transforms</h2>\r
+\r
+<p>To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <span style="font-family: Courier New,Courier,monospace">transform</span> property. In the modified animation:</p>\r
+\r
+<ul>\r
+<li>As in the original animation, no elements are initially shown on the screen.</li>\r
+<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the logo is made to rotate.</li> \r
+<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the letters are translated in the 3D space and rotated around the Y axis.</li>\r
+</ul>\r
+\r
+<p class="figure">Figure: Tizen logo to be transformed</p> \r
+<p align="center"><img alt="Tizen logo to be transformed" src="../../images/css_transforms1.png" /></p>\r
+\r
+\r
+<ol>\r
+<li>Create the HTML layout to control the movement of each individual animation element:\r
+<pre class="prettyprint">\r
+&lt;div class=&quot;animation-holder&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;\r
+&lt;/div&gt;\r
+</pre>\r
+</li>\r
+<li>Define the basic style of the animation elements. Add the <span style="font-family: Courier New,Courier,monospace">perspective</span> property to increase the Z axis effect of the 3D transform.\r
+<pre class="prettyprint">\r
+.animation-holder \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-perspective: 1000px;\r
+&nbsp;&nbsp;&nbsp;height: 88px;\r
+&nbsp;&nbsp;&nbsp;left: 50%;\r
+&nbsp;&nbsp;&nbsp;margin: -54px 0px 0px -140px;\r
+&nbsp;&nbsp;&nbsp;position: absolute;\r
+&nbsp;&nbsp;&nbsp;top: 50%;\r
+&nbsp;&nbsp;&nbsp;width: 280px;\r
+}\r
+.tizen-txt,\r
+.tizen-logo \r
+{\r
+&nbsp;&nbsp;&nbsp;background-position: 50% 50%;\r
+&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;\r
+&nbsp;&nbsp;&nbsp;display: block;\r
+&nbsp;&nbsp;&nbsp;position: absolute;\r
+}\r
+.tizen-txt.t \r
+{\r
+&nbsp;&nbsp;&nbsp;background-image: url(&quot;images/txt_t.png&quot;);\r
+&nbsp;&nbsp;&nbsp;height: 56px;\r
+&nbsp;&nbsp;&nbsp;left: 0px;\r
+&nbsp;&nbsp;&nbsp;top: 31px;\r
+&nbsp;&nbsp;&nbsp;width: 48px;\r
+}\r
+</pre>\r
+</li>\r
+<li>Create the animation:\r
+<ol type="a">\r
+<li>\r
+<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: rotate()</span> function, which defines the angle of the rotation.  \r
+</p>\r
+<pre class="prettyprint">\r
+@-webkit-keyframes tizen-logo \r
+{\r
+&nbsp;&nbsp;&nbsp;0% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-in;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(0deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;30% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-out;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(720deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;50% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;100% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">For a rotation, the image has to be carefully created to ensure the correct end result. The rotation occurs with the center of the element as the center. If the rotation center must be moved because the image center is not aligned, use the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property to adjust the rotation location.</td> \r
+      </tr> \r
+     </tbody> \r
+    </table></li>\r
+<li>Create the keyframes for the first letter in the word &quot;TIZEN&quot;. In the animation, due to the <span style="font-family: Courier New,Courier,monospace">translate3d()</span> and <span style="font-family: Courier New,Courier,monospace">rotateY()</span> methods, each letter transforms slightly from the right to the left as it comes in.\r
+\r
+<p align="center"><img alt="Animation" src="../../images/css_transforms2.png" /></p>\r
+\r
+<pre class="prettyprint">\r
+@-webkit-keyframes tizen-txt-t \r
+{\r
+&nbsp;&nbsp;&nbsp;0% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;30% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;35% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0) rotateY(0deg);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;100% {}\r
+}\r
+</pre></li>\r
+<li>To emphasize the fact that the letters are being created on the right, change the location of the transform. If the <span style="font-family: Courier New,Courier,monospace">transform-origin</span> property is declared for the entire animation element, the logo rotation changes. Consequently, you must only declared it for the letters.\r
+<pre class="prettyprint">\r
+.tizen-txt \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 100% 50%;\r
+}\r
+</pre></li>\r
+\r
+<li><p>Create the keyframes for the other letters similarly:</p>\r
+<pre class="prettyprint">\r
+@-webkit-keyframes tizen-txt-i \r
+{\r
+&nbsp;&nbsp;&nbsp;0% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;32% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;37% \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translateX(0) rotateY(0deg);\r
+&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp; 100% {}\r
+}\r
+</pre></li></ol>\r
+\r
+</li>\r
+</ol>\r
+\r
+<p>The following figure shows the full Tizen logo animation with the <span style="font-family: Courier New,Courier,monospace">transform</span> properties.</p>\r
+<p class="figure">Figure: Full Tizen logo animation</p> \r
+<p align="center"><img alt="Full Tizen logo animation" src="../../images/css_transforms5.png" /></p>\r
+\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following files:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">transform_practical.html</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">logo_tizen.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_e.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_i.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_n.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_t.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_tm.png</a></li>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_z.png</a></li>\r
+ </ul>\r
+                       \r
+                               <h2 id="effect" name="effect">Creating Fade Animation Effects</h2>\r
+                               \r
+                               \r
+                       <p>To enhance the user experience of your application, you must learn to use fade animation effects.</p>\r
+<p>The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:</p>\r
+<ul>\r
+<li>If an event is fired, it gradually becomes visible. This is known as the Fade In effect.</li>\r
+<li>The existing background is covered with a translucent layer to make the user focus on the pop-up.</li> \r
+<li>When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.</li>\r
+</ul>\r
+\r
+<p class="figure">Figure: Fade effect</p> \r
+<p align="center"><img alt="Fade effect" src="../../images/fade_affect_animation.png" /></p>\r
+\r
+<p>You can control UI events and change the DOM elements in the following ways:</p>\r
+<ul>\r
+<li>Events can be controlled with JavaScript, and DOM elements can be devised with CSS.</li>\r
+<li>You can use JavaScript frameworks, such as jQuery, Prototype, and Dojo.</li> \r
+</ul>\r
+\r
+<p>To create fade effects:</p>\r
+\r
+<ul>\r
+<li>Create a modal layer pop-up using jQuery:\r
+\r
+<pre class="prettyprint">\r
+(function($) \r
+{\r
+&nbsp;&nbsp;&nbsp;function showModalPopup(url) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).append(&#39;&lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;&#39;); /* Mask in body appended */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).css({&#39;height&#39;: $(window).height()}); /* Mask area set */\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Target layer position set */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).css(\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;top&#39;: ($(window).height()/2 + $(document).scrollTop() - $(url).height()/2) + &#39;px&#39;, \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;left&#39;: ($(window).width()/2 + $(document).scrollLeft() - $(url).width()/2) + &#39;px&#39;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Fade effect */\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeTo(&#39;slow&#39;, 0.7);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).fadeTo(&#39;slow&#39;, 1);\r
+&nbsp;&nbsp;&nbsp;};\r
+\r
+&nbsp;&nbsp;&nbsp;$(&#39;.layerpopupActive a&#39;).on(&#39;click&#39;, function()\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var targetUrl = $(this).attr(&#39;href&#39;);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showModalPopup(targetUrl);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;\r
+&nbsp;&nbsp;&nbsp;});\r
+  \r
+&nbsp;&nbsp;&nbsp;/* End processing - Fade Out effect */\r
+    \r
+&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).on(&#39;click&#39;, function(e) \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.target.className === &#39;mask&#39;) \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.layerpop&#39;).fadeOut();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeOut(400, function() \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).remove();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\r
+&nbsp;&nbsp;&nbsp;});\r
+})(jQuery);</pre>\r
+\r
+<p>If the animation effect is created by using JavaScript, the browser executes the following tasks:</p>\r
+<ol>\r
+       <li>A structure layer is created and added to the document. This is a CPU task.</li>\r
+       <li>The added layer is painted as a default value. This is a GPU task.</li>\r
+       <li>The layer is painted once again according to the change of value. This is a CPU operation.</li>\r
+</ol>\r
+\r
+<p>Steps a and c incur CPU tasks, which affect performance the most.</p>  \r
+<p>In case of step a, only 2 layers are created, but as the number of layers created increases, the efficiency of page rendering work drops. In case of step c as well, the more steps it undergoes, the slower the rendering becomes.</p>  \r
+<p>In certain browsers, even if the style of just 1 layer is changed, the entire document is repainted. As the repainting takes only a moment, any animation effects that are supposed to happen cannot be executed in such a short time. This issue occurs frequently in Android&trade; with severe fragmentation.</p>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">If a new layer is created in Android 4.0X version, and if the fade effect is used, it only shows the initial value and the result value of the layer style.</td> \r
+      </tr> \r
+     </tbody> \r
+</table>\r
+\r
+<p>To avoid such a situation to the maximum possible extent, CPU tasks must be reduced to the minimum, and it is better to use transition or animation that uses the internal timer of the browser.</p>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">In case of using 3D effects, <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translateZ(0);</span> can be used to accelerate the hardware. However, since hardware acceleration support varies between the OS and devices, the actual resulting effects can vary too. Moreover, in the case of version Android&trade; 2.1, iOS&trade;3.X and below, note that transition and animation may not be realized.</td> \r
+      </tr> \r
+     </tbody> \r
+</table>\r
+</li>\r
+<li>Create a modal layer pop-up using CSS3:\r
+<pre class="prettyprint">\r
+&lt;!--CSS--&gt;\r
+.mask \r
+{\r
+&nbsp;&nbsp;&nbsp;opacity: 0;\r
+&nbsp;&nbsp;&nbsp;z-index: -1;\r
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 400ms ease-in-out;\r
+}\r
+\r
+.mask.active \r
+{\r
+&nbsp;&nbsp;&nbsp;opacity: .7;\r
+&nbsp;&nbsp;&nbsp;z-index: 498;\r
+}\r
+\r
+&lt;!--Layer pop-up public styles--&gt;\r
+.layerpop \r
+{\r
+&nbsp;&nbsp;&nbsp;opacity: 0;\r
+&nbsp;&nbsp;&nbsp;z-index: -1;\r
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 300ms ease-in-out;\r
+}\r
+\r
+.layerpop.active \r
+{\r
+&nbsp;&nbsp;&nbsp;opacity: 1;\r
+&nbsp;&nbsp;&nbsp;z-index: 499;\r
+}\r
+/* JavaScript */\r
+function showModalPopup(url) \r
+{\r
+&nbsp;&nbsp;&nbsp;url.className += &#39;active&#39;;\r
+}</pre>\r
+</li>\r
+</ul>\r
+<h3>Performance Differences</h3>\r
+\r
+<p>There can be a difference in performance depending on how the modal layer pop-up is used.</p>\r
+<p>The following figures illustrate the difference in event performance, when using JavaScript and CSS3.</p>\r
+<p class="figure">Figure: Event performance using JavaScript</p> \r
+<p align="center"><img alt="Events using JavaScript" src="../../images/events_using_javascript.png" /></p>\r
+\r
+<p class="figure">Figure: Event performance using CSS3</p> \r
+<p align="center"><img alt="Events using CSS3" src="../../images/events_using_css3.png" /></p>\r
+\r
+<p>The following figures illustrate the difference in memory performance, when using JavaScript and CSS3.</p>\r
+<p class="figure">Figure: Memory performance using JavaScript</p> \r
+<p align="center"><img alt="Memory when using JavaScript" src="../../images/memory_using_javascript.png" /></p>\r
+\r
+<p class="figure">Figure: Memory performance using CSS3</p> \r
+<p align="center"><img alt="Memory when using CSS3" src="../../images/memory_using_css3.png" /></p>\r
+\r
+<p>When the styles are applied using JavaScript, the UI thread is used to create the pop-up. The UI thread increases the usage of CPU memory in proportion to the number of pop-ups used.</p>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">Tizen provides remote debugging through the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">JavaScript Debugger tool</a>.</td> \r
+      </tr> \r
+     </tbody> \r
+</table>\r
+\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note"><p>If CSS is used, the handling of JavaScript events and UI DOM operations becomes unnecessary, so the load of the UI thread decreases, and the usage of CPU memory decreases as well. However, CSS3 transitions cannot be applied to versions below Android&trade; 2.3 and for versions above iOS&trade; 4.3, which are still widely used, so attention is needed when distributing it to various devices.</p></td> \r
+      </tr> \r
+     </tbody> \r
+</table>  \r
+                       \r
+                               <h2 id="hw" name="hw">Using Hardware Acceleration</h2>\r
+                               \r
+                       <p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>\r
+ <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>\r
+ \r
+ <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>\r
+ <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>\r
+<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>\r
+ <p class="figure">Figure: Blue box</p> \r
+ <p align="center"><img alt="Blue box" src="../../images/blue_box.png" /></p> \r
+\r
+ <ul>\r
+ <li>Use CPU painting:\r
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>\r
+ <ol>\r
+       <li>Construct the blue box and set its position on the screen:\r
+       <pre class="prettyprint">&lt;!DOCTYPE html&gt;\r
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;</pre>\r
+</li>\r
+<li>\r
+<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>\r
+               <pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process ()\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;\r
+&lt;/html&gt;</pre></li></ol></li>\r
+       <li>Use CSS transition:\r
+       <p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>\r
+               <pre class="prettyprint">&lt;!DOCTYPE html&gt;\r
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate(200px, 200px)&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;\r
+&lt;/html&gt;</pre>\r
+</li>\r
+               <li>Use 3D transform:\r
+               <p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>\r
+               <pre class="prettyprint">&lt;!DOCTYPE html&gt;\r
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate3d(200px, 200px, 0px)&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;\r
+&lt;/html&gt;</pre>\r
+</li>\r
+       </ul>\r
+ <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>\r
+ <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>\r
+ <pre class="prettyprint">#scroll_area \r
+{\r
+&nbsp;&nbsp;&nbsp;overflow: scroll;\r
+&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;\r
+}</pre>  \r
+                       \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/transition_w.htm b/org.tizen.ui.guides/html/web/w3c/transition_w.htm
new file mode 100755 (executable)
index 0000000..c21bc1e
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/transition_w.htm
@@ -0,0 +1,382 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>CSS Transitions Module Level 3: Changing Element Styles</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#prop">Transition Properties</a></li>\r
+                       <li><a href="#modify">Modifying Element Properties</a></li>\r
+                       <li><a href="#hw">Using Hardware Acceleration</a>\r
+                       </li>\r
+               </ul>\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transitions">CSS Transitions Module Level 3 API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transitions">CSS Transitions Module Level 3 API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>CSS Transitions Module Level 3: Changing Element Styles</h1>\r
+\r
+<p>Transitions allow you to <a href="#modify">enable implicit transitions</a>, which describe how the CSS properties can be made to change smoothly from one value to another over a given duration. To enhance the rendering performance, you can <a href="#hw">use hardware acceleration</a>.</p>\r
+\r
+<p>When using the CSS transition properties, the Tizen browser requires the <span style="font-family: Courier New,Courier,monospace">-webkit-</span> prefix.</p>\r
+\r
+<h2 name="prop" id="prop">Transition Properties</h2> \r
+ \r
+<p>You can define various properties to control the element transitions:</p>\r
+\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">transition-property</span>\r
+<p>This property defines the element property that is changed during the transition. In the following code snippet, both the width and height of the element change when the mouse hovers over it, but the transition effect is applied to the width property only.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">transition-duration</span>\r
+<p>This property defines the duration of the transition. You must define as many instances of the property as you have elements in the <span style="font-family: Courier New,Courier,monospace">transition-property</span> property.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">transition-timing-function</span>\r
+<p>This property defines the pace of the transition. The value of the property is defined as a stepping function or a cubic Bézier curve. The <span style="font-family: Courier New,Courier,monospace">ease</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0.25, 0.1, 0.25, 1)</span>, and the <span style="font-family: Courier New,Courier,monospace">linear</span> stepping function equals <span style="font-family: Courier New,Courier,monospace">cubic-bezier(0, 0, 1, 1)</span>.</p></li>\r
+\r
+<li><span style="font-family: Courier New,Courier,monospace">transition-delay</span>\r
+<p>This property defines the delay time before the start of the transition.</p></li>\r
+\r
+</ul>\r
+\r
+<p>The following code snippet demonstrates how to use transition properties. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_property.html</a>.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body{font-size: 12px}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-property: width;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 2s;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: ease;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-delay: 0.5s;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box: hover \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 300px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: CornflowerBlue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;\r
+&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;h1&gt;CSS transitions tutorial&lt;/h1&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Mouse over or tap here to animate&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transition-property: width, height, background&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&lt;/body&gt;\r
+</pre>\r
+<table class="note"> \r
+     <tbody> \r
+      <tr> \r
+       <th class="note">Note</th> \r
+      </tr> \r
+      <tr> \r
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">hover</span> pseudo class in Tizen maintains a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state when an element is tapped, and becomes a <span style="font-family: Courier New,Courier,monospace">mouseout</span> state when another element is tapped. </td> \r
+      </tr> \r
+     </tbody> \r
+    </table>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property allows you to define all the transition properties in a shorthand mode in the order of <span style="font-family: Courier New,Courier,monospace">transition-property</span> | <span style="font-family: Courier New,Courier,monospace">transition-duration</span> | <span style="font-family: Courier New,Courier,monospace">transition-timing-function</span> | <span style="font-family: Courier New,Courier,monospace">transition-delay</span>. If you omit a property value, a default value is used instead.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;style type=&quot;text/css&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;.box \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: width 1s ease 1s;\r
+&nbsp;&nbsp;&nbsp;}\r
+&lt;/style&gt;\r
+</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">transition</span> property connects movement more naturally than the more generally used the pseudo classes, such as <span style="font-family: Courier New,Courier,monospace">:hover</span> or <span style="font-family: Courier New,Courier,monospace">:active</span>. The smooth effect can be achieved more conveniently and easily with the <span style="font-family: Courier New,Courier,monospace">transition</span> property than with JavaScript or Flash, and the <span style="font-family: Courier New,Courier,monospace">transition</span> property also supports the browser side to provide excellent performance.</p>\r
+\r
+\r
+<h2 id="modify" name="modify">Modifying Element Properties</h2>\r
+                               \r
+<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <span style="font-family: Courier New,Courier,monospace">http://tizen.org</span> Web site, where the current &quot;UPCOMING EVENTS&quot; area only has the <span style="font-family: Courier New,Courier,monospace">text-decoration: underline</span> property in a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <span style="font-family: Courier New,Courier,monospace">transitions</span> properties in this area.</p>\r
+\r
+\r
+<p class="figure">Figure: Tizen site section to be transitioned</p> \r
+<p align="center"><img alt="Tizen site section to be transitioned" src="../../images/transitions1.png" /></p>\r
+\r
+  \r
+<ol><li><p>Add a background color change to the &quot;UPCOMING EVENTS&quot; area during a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state:</p>\r
+\r
+<ol type="a"><li><p>Originally, the area on the site is defined as follows:</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;h2 class=&quot;block-title&quot;&gt;Upcoming Events&lt;/h2&gt;\r
+</pre>\r
+\r
+\r
+<p>Additionally, a <span style="font-family: Courier New,Courier,monospace">transition</span> property is declared in the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:</p>\r
+\r
+<pre class="prettyprint">\r
+.block-title \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 2s ease;\r
+}\r
+</pre>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">all</span> value in the transition property means that the transition effect applies to all CSS properties of the element.</p>\r
+</li>\r
+\r
+<li>Define the <span style="font-family: Courier New,Courier,monospace">mouseover</span> state for the <span style="font-family: Courier New,Courier,monospace">block-title</span> class:\r
+\r
+<pre class="prettyprint">\r
+.block-title: hover {background: #eaeaea;}\r
+</pre>\r
+\r
+<p>Due to the CSS characteristics, adding a class through an event allows immediate rendering in the screen.</p></li></ol>\r
+\r
+<p>When the mouse is moved over the &quot;UPCOMING EVENTS&quot; area, the background color changes.</p>\r
+\r
+<p align="center"><img alt="Background color change" src="../../images/transitions2.png" /></p> </li>\r
+\r
+<li>\r
+\r
+<p>Apply the transition effect in other elements:</p>\r
+\r
+<ol type="a"><li>To avoid unnecessary repetition, tie a list of <span style="font-family: Courier New,Courier,monospace">transition</span> elements together into groups <span style="font-family: Courier New,Courier,monospace">a</span> and <span style="font-family: Courier New,Courier,monospace">span</span>:\r
+\r
+<pre class="prettyprint">\r
+.location, .date, .location .anibg, h3 &gt; a, .day &gt; span \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;\r
+}\r
+</pre></li>\r
+\r
+<li><p>When the mouse hovers over the date element, change the background of the date and the font size of all the elements tied into the <span style="font-family: Courier New,Courier,monospace">span</span> group. When the mouse hovers over the title element, change the color of all elements tied into the <span style="font-family: Courier New,Courier,monospace">a</span> group.</p>\r
+<pre class="prettyprint">\r
+.date: hover {background: #d2ecff !important;}\r
+.date: hover .day &gt; span {font-size: 1.9em;}\r
+\r
+.event-info: hover h3 &gt; a {color: #ec4986;}\r
+</pre></li></ol>\r
+\r
+<p align="center"><img alt="Before mouseover" src="../../images/transitions3.png" />\r
+</p> </li>\r
+<li>\r
+\r
+<p>Emphasize the location phrase by adding an empty element. The emphasis is made by filling the background with black from left to right, and changing the font color to an appropriate value for the black background.</p>\r
+<ol type="a">\r
+<li><p>Add the empty element:</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;div class=&quot;location&quot;&gt;San Francisco, CA&lt;span class=&quot;anibg&quot;&gt;&lt;/span&gt;&lt;/div&gt;\r
+</pre></li>\r
+<li><p>Create the effect using the width value of the added element:</p>\r
+<pre class="prettyprint">\r
+.location {position: relative; z-index: 3; margin-top: 3px;}\r
+.location .anibg \r
+{\r
+&nbsp;&nbsp;&nbsp;position: absolute; \r
+&nbsp;&nbsp;&nbsp;left: -3px; top: 0; \r
+&nbsp;&nbsp;&nbsp;display: block; \r
+&nbsp;&nbsp;&nbsp;width: 0; height: 100%; \r
+&nbsp;&nbsp;&nbsp;background: #000; \r
+&nbsp;&nbsp;&nbsp;z-index: -1;\r
+}\r
+</pre>\r
+\r
+<p>The effect is defined by using the <span style="font-family: Courier New,Courier,monospace">position</span> property. The location element position is declared <span style="font-family: Courier New,Courier,monospace">relative</span>, while the <span style="font-family: Courier New,Courier,monospace">anibg</span> child element position is declared as <span style="font-family: Courier New,Courier,monospace">absolute</span>. The width of the child element basic state is set as 0. Since the child element layer covers the location text, the child element has been defined to come out from the back of the text in the <span style="font-family: Courier New,Courier,monospace">z-index</span> value of the child.</p></li>\r
+<li><p>Define the state to be changed:</p>\r
+<pre class="prettyprint">\r
+.location, .date, .location .anibg, h3 &gt; a, .day &gt; span \r
+{\r
+&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;\r
+}\r
+\r
+.event-info: hover .location {color: #fff;}\r
+.event-info: hover .location .anibg {width: 100%; color: #fff;}\r
+</pre>\r
+\r
+<p>The transition takes place when the property in question is at the front on the screen. The <span style="font-family: Courier New,Courier,monospace">event-info</span> class is used as the subject for the change, and it has been defined so that  the transition occurs simultaneously in the <span style="font-family: Courier New,Courier,monospace">.location</span> and <span style="font-family: Courier New,Courier,monospace">.anibg</span> elements when the mouse hovers over any of the elements tied together as group <span style="font-family: Courier New,Courier,monospace">a</span>.\r
+</p></li>\r
+\r
+ </ol><p align="center"><img alt="Location phrase emphasis" src="../../images/transitions5.png" /></p>\r
+</li></ol>\r
+<h3>Source Code</h3>\r
+ <p>For the complete source code related to this use case, see the following file:</p>\r
+ <ul>\r
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_practical.html</a></li>\r
+ </ul>  \r
+               \r
+                               <h2 id="hw" name="hw">Using Hardware Acceleration</h2>\r
+                               \r
+                       <p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>\r
+ <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>\r
+ \r
+ <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>\r
+ <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>\r
+<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>\r
+ <p class="figure">Figure: Blue box</p> \r
+ <p align="center"><img alt="Blue box" src="../../images/blue_box.png" /></p> \r
+\r
+ <ul>\r
+ <li>Use CPU painting:\r
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>\r
+ <ol>\r
+       <li>Construct the blue box and set its position on the screen:\r
+       <pre class="prettyprint">&lt;!DOCTYPE html&gt;\r
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;</pre>\r
+</li>\r
+<li>\r
+<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method:</p>\r
+               <pre class="prettyprint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process ()\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;\r
+&lt;/html&gt;</pre></li></ol></li>\r
+       <li>Use CSS transition:\r
+       <p>Separate a moving element to an independent layer with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>\r
+               <pre class="prettyprint">&lt;!DOCTYPE html&gt;\r
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate(200px, 200px)&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;\r
+&lt;/html&gt;</pre>\r
+</li>\r
+               <li>Use 3D transform:\r
+               <p>Use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: translate3d</span> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>\r
+               <pre class="prettyprint">&lt;!DOCTYPE html&gt;\r
+&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition() \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform = &quot;translate3d(200px, 200px, 0px)&quot;;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/body&gt;\r
+&lt;/html&gt;</pre>\r
+</li>\r
+       </ul>\r
+ <h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>\r
+ <p>If a page has an overflow scroll, use the <span style="font-family: Courier New,Courier,monospace">-webkit-overflow-scrolling</span> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>\r
+ <pre class="prettyprint">#scroll_area \r
+{\r
+&nbsp;&nbsp;&nbsp;overflow: scroll;\r
+&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;\r
+}</pre>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/ui_layout_ww.htm b/org.tizen.ui.guides/html/web/w3c/ui_layout_ww.htm
new file mode 100755 (executable)
index 0000000..afecdf8
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/ui_layout_ww.htm
@@ -0,0 +1,715 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>Multiple UI Layouts: Designing Applications for Multiple Devices</title> \r
+ </head> \r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Content</p>\r
+               <ul class="toc">\r
+                       <li><a href="#single">Single Layout for Multiple Devices</a></li>\r
+                       <li><a href="#multiple">Multiple Layouts for Multiple Devices</a></li>\r
+               </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+ <h1>Multiple UI Layouts: Designing Applications for Multiple Devices</h1>\r
+ \r
+  <p>To ensure the largest possible market for your application, you have to design your application layout so that your application can run on multiple Tizen devices.</p>\r
+\r
+    <table class="note"> \r
+   <tbody> \r
+    <tr> \r
+     <th class="note">Note</th> \r
+    </tr> \r
+    <tr> \r
+     <td class="note">This feature is supported in wearable applications only.</td> \r
+    </tr> \r
+   </tbody> \r
+  </table>  \r
+  \r
+<p>Although the Web was originally designed to structure documents for large-scaled Internet world, with CSS (Cascading Style Sheet), JavaScript, and various device APIs, it is quickly evolving to a complete runtime environment for applications. In addition, its W3C open development model and the flexibility of its CSS-based presentation make it every developer&#39;s choice as the next development platform. CSS is the key technology for flexible presentation, and it is used to describe the look and formatting of HTML documents. The role of CSS is to determine how the logical structure of the document is displayed to the user.</p>\r
+\r
+<p>The Tizen Web engine provides the basic mechanisms for fitting the application content to the target screen. However, to ensure that the application runs well on multiple devices, you must understand those mechanisms in detail. In general, select a relative layout rather than a fixed layout, because a relative layout helps to maintain usability even when the application runs on unexpected devices. To enhance usability even further, use different layouts for each device category.</p>\r
+\r
+<p>Using some CSS techniques and Tizen Web engine mechanisms, you can design your application UI layout so that it displays properly on multiple devices:</p>\r
+<ul><li>You can use a <a href="#single">single layout</a> and take advantage of the auto-fitting mechanism of the Tizen Web engine to ensure that a single layout covers multiple devices.</li>\r
+<li>You can use <a href="#multiple">multiple layouts</a> to define a separate optimal layout for each device category.</li></ul>\r
+\r
+ <h2 id="single" name="single">Single Layout for Multiple Devices</h2> \r
+  <p>A typical application developer designs an optimized UI for a target device with a fixed layout and high-quality resources. This approach usually results in a nice look for the end user, but can sometimes result in an ugly layout, which makes the application unusable. And this unfortunate result can occur merely due to a change in the device form factor.</p>\r
+<p>Since the presentation and business logic are strictly separated in a Web application, it handles the device form factor change better than native applications. One single layout, taking advantage of Web technology, can ensure usability even on multiple devices with different form factors.</p>\r
+\r
+<p>To design applications with a single layout, you must consider the following issues:</p> \r
+\r
+  <ul> \r
+   <li><a href="#viewport">Viewport and other meta tags</a></li> \r
+   <li><a href="#relative">Relative layout</a></li> \r
+   <li><a href="#header_footer">Header and footer position</a></li> \r
+   <li><a href="#flexible">Flexible media</a></li> </ul>\r
+   \r
+   <p>For a complete application layout that considers all the above issues, see <a href="#single_example">Single Layout Example</a>.</p>\r
+   \r
+  <h3 id="viewport" name="viewport">Viewport and Other Meta Tags</h3>   \r
+   \r
+<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag was introduced by Apple to fill the screen resolution gap between initial Smartphone (for example, 320 px) and PC (for example, 980 px). Basically, the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>\r
+\r
+<p>To use the tag in an HTML file, set its name and content:</p>\r
+<pre class="prettyprint">\r
+&lt;meta name=&quot;viewport&quot; content=&quot;XXX&quot;&gt;\r
+</pre> \r
+\r
+<p>As shown in the following code snippet, use the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag to tell the Web engine which device width is targeted by the application. The Web engine can estimate the scale factor based on the target content size and the real screen width. For example, usually almost all wearable applications have the following <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, which sets the viewport width to the appropriate size based on each device:</p>\r
+<pre class="prettyprint">\r
+&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;\r
+</pre> \r
+\r
+<p>If you want to set your content layout to the target width of 320 px on every wearable device, use the following meta tag:</p>\r
+<pre class="prettyprint">\r
+&lt;meta name=&quot;viewport&quot; content=&quot;width=320&quot;&gt;\r
+</pre>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag has other properties, such as <span style="font-family: Courier New,Courier,monospace">height</span>, <span style="font-family: Courier New,Courier,monospace">initial-scale</span>, <span style="font-family: Courier New,Courier,monospace">minimum-scale</span>, <span style="font-family: Courier New,Courier,monospace">maximum-scale</span>, and <span style="font-family: Courier New,Courier,monospace">user-scalable</span>. However, do not use those properties unless you understand their exact meaning. Wrong values can cause the Web engine to incorrectly fit the application content to the current device.</p>\r
+\r
+<h3 id="relative" name="relative">Relative Layout</h3>\r
+\r
+<p>The relative layout concept means that the element size of all content is set as a relative unit (such as percentage), and not as absolute values (such as pixels or points). In responsive Web design, this concept is also known as <strong>fluid grid</strong> (for more information, search for <strong>responsive web design</strong> in your Web browser). To achieve a layout that works on multiple devices, you only need to know about relative layout, not all the other concepts of responsive Web design.</p>\r
+<p>To implementing a relative layout, you only have to set the width and height of each element as a percentage, as shown in the following example and figure. In the example, the width and height of the <span style="font-family: Courier New,Courier,monospace;">number_pad</span> element is set to 100% and 70%, not 320 px and 224 px. </p>\r
+\r
+<p class="figure">Figure: 320x320 calculator</p> \r
+<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 100%; height: 70%;}</span></p>\r
+<p align="center"><img alt="320x320 calculator" src="../../images/layout_calculator.png"/></p> \r
+\r
+<p>An application with this relative layout is auto-fitted when it runs on an unexpected device, such as the device with a 360x480 resolution shown in the following figure. Even though this adjusted layout may not be as good as the original, it is good enough, since it shows a usable application UI.</p>\r
+ \r
+\r
+<p class="figure">Figure: 360x480 calculator with a relative layout</p>  \r
+       <p align="center"><img alt="360x480 calculator with a relative layout" src="../../images/layout_calculator_relative.png"/></p> \r
+\r
+<p>The following figure shows what happens if you use an absolute 320x320 layout. The presentation is definitely ugly (with an empty white space at the bottom) and usability reduced, although the calculation logic itself still works.</p>\r
+<p class="figure">Figure: 360x480 calculator with an absolute 320x320 layout</p>\r
+<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 320px; height: 224px;}</span></p> \r
+ \r
+  \r
+       <p align="center"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../images/layout_calculator_absolute.png"/></p> \r
+\r
+<h3 id="header_footer" name="header_footer">Header and Footer Position</h3>\r
+\r
+<p>While the content layout itself becomes the application UI layout on a Web page, a typical wearable application layout consists of a header area, content area, and footer area. With this trend, many wearable Web applications are designed by separating the 3 areas explicitly.</p>\r
+<p class="figure">Figure: Typical wearable Web application layout</p>  \r
+<p align="center"><img alt="Typical wearable Web application layout" src="../../images/layout_app.png"/></p> \r
+\r
+<p>Not setting the place of the header and footer areas clearly can easily cause problems for your layout. In case of the header, the side-effect is relatively small. However, a wrongly defined footer area can be quite visible and lead to poor usability. The following figure shows the original layout of a pedometer application that consists of a header, content, and footer, with a Stop button set in the footer area. </p>\r
+<p class="figure">Figure: 320x320 sample Web application</p>  \r
+<p align="center"><img alt="320x320 sample Web application" src="../../images/layout_sample.png"/></p> \r
+\r
+<p>In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure. </p> \r
+<p class="figure">Figure: Layout on 360x480</p>  \r
+<p align="center"><img alt="Layout on 360x480" src="../../images/layout_sample_ugly.png"/></p> \r
+\r
+<p>To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px:</p> \r
+\r
+<pre class="prettyprint">\r
+.footer {position: fixed; bottom: 0px;}\r
+</pre>\r
+ \r
+<p>The following figure shows the same Web application running on the unexpected device after the footer properties are defined properly. With the correct values, the Web application is usable even on a new target, not planned during the development phase. Note that if a <a href="#relative">relative layout</a> is also applied to the content area, the result is an even better layout and further improved usability.</p>\r
+<p class="figure">Figure: Usable layout on 360x480</p>  \r
+<p align="center"><img alt="Usable layout on 360x480" src="../../images/layout_sample_ok.png"/></p> \r
+\r
+<h3 id="flexible" name="flexible">Flexible Media</h3>\r
+       \r
+<p>One of key elements used in the content area is a media element, including image and video. As all other elements, the media elements also must be placed within a relative layout to allow the application flexibly handle resolution changes. When such relative sizing is applied to a media element, it is called <strong>flexible media</strong> in responsive Web design. </p>\r
+<p>The main issue when making a media element size relative is to ensure that the usable ratio does not change. The following figure shows a video element that works on both 320x320 and 360x480 resolutions, even though the aspect ratio of the screen is changed and scaled up. Basically, when handling media elements, you want to keep the size or ratio of the element the same as in the initially targeted device, even when displayed using a different resolution and aspect ratio. To achieve this, set the width and height properties of the media element with percentage and the auto keyword.</p>\r
+\r
+<p class="figure">Figure: Flexible media on 320x320 and 360x480</p> \r
+<p><span style="font-family: Courier New,Courier,monospace;">.video iframe {width: 100%; height: auto;}</span></p>\r
+<p align="center"><img alt="Flexible media on 320x320 and 360x480" src="../../images/layout_flexible_media.png"/></p> \r
+\r
+ \r
+ <p>The following figure shows an example of wrong usage, where usability decreases as the video element is simply scaled up based on the aspect ratio change. If you set the video element size using a fixed size like this, you get no benefit from the increased resolution, and the layout on the whole screen becomes inharmonious, decreasing usability.</p>\r
+\r
+\r
+<p class="figure">Figure: Fixed size media element</p> \r
+<p><span style="font-family: Courier New,Courier,monospace;"> .video iframe {width: 320px; height: 240px;} </span></p>\r
+<p align="center"><img alt="Fixed size media element" src="../../images/layout_fixed_media.png"/></p> \r
+\r
+<h3 id="single_example" name="single_example">Single Layout Example</h3>\r
+       \r
+       <p>This section illustrates a complete application layout that takes advantage of the issues discussed in previous sections. In particular, it shows how to set the viewport properly to help the Web engine scaling mechanism and how to create a CSS-based layout.</p>\r
+       \r
+       \r
+<p>First of all, set the targeted size of the content area as 320 px in the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag, and disable the <span style="font-family: Courier New,Courier,monospace">user-scalable</span> property, as shown in the following code snippet.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;html&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;                                             \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=320px, user-scalable=no&quot; /&gt;                                                 \r
+&nbsp;&nbsp;&nbsp;&lt;/head&gt;                                                                                                           \r
+&nbsp;&nbsp;&nbsp;&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box1&quot; class=&quot;box&quot;&gt;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;            \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box2&quot; class=&quot;box&quot;&gt;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box3&quot; class=&quot;box&quot;&gt;&lt;/div&gt;                                                                       \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box4&quot; class=&quot;box&quot;&gt;&lt;/div&gt;                                                                       \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/main&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/body&gt; \r
+&lt;/html&gt;\r
+</pre>\r
+\r
+<p>In the above HTML code, the content area consists of 4 <span style="font-family: Courier New,Courier,monospace">&lt;div&gt;</span> box elements, and their UI layout is described in the <span style="font-family: Courier New,Courier,monospace">style.css</span> file. The following CSS code programs the layout and the specific box element styles that were defined in the HTML file.</p> \r
+<p>The code snippet shows that the content size is set to be same as the viewport size. Each box is filled with a different color and placed so that it fills a quarter of the content area. Because each box size is defined with the width and height of 100%, the relative size of each box element remains the same even if the viewport size changes.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;!--Default, used for all--&gt;\r
+* {box-sizing: border-box;}\r
+body, div, h1 {margin: 0px; padding: 0px;}\r
+html, body {width: 100%; height: 100%; overflow-x: hidden;}\r
+\r
+#box1 {background-color: rgb(255, 255, 141);}\r
+#box2 {background-color: rgb(165, 241, 238);}\r
+#box3 {background-color: rgb(248, 179, 179);}\r
+#box4 {background-color: rgb(192, 161, 246);}\r
+.tile \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 50%;\r
+&nbsp;&nbsp;&nbsp;height: 50%;\r
+&nbsp;&nbsp;&nbsp;float: left;\r
+}\r
+.left {padding: 10px 5px 5px 10px;}\r
+.right {padding: 10px 10px 5px 5px;}\r
+\r
+.box \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 100%;\r
+&nbsp;&nbsp;&nbsp;height: 100%;\r
+}\r
+</pre>\r
+\r
+\r
+<p>The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area.</p> \r
+ \r
+ <p class="figure">Figure: Original layout on a target device</p>  \r
+ <p align="center"><img alt="Original layout on a target device" src="../../images/layout_original.png"/></p>\r
+ <p>The following figure shows that the relative layout and scaling are correctly applied even when the same application is run on a mobile device with the aspect ratio of 16:9.</p>\r
+  <p class="figure">Figure: Scaled layout on a 16:9 mobile device</p>  \r
+  <p align="center"><img alt="Scaled layout on a 16:9 mobile device" src="../../images/layout_original_scaled.png"/></p>\r
+<p>The following code snippet shows an example where the background color is replaced with an image while the layout is exactly same as in the 4 box example. The following figures show how the layout including media elements (such as images) functions exactly like the basic box layout.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;!--Default, used for all--&gt;\r
+* {box-sizing: border-box;}\r
+body, div, h1 {margin: 0px; padding: 0px;}\r
+html, body {width: 100%; height: 100%; overflow-x: hidden;}\r
+\r
+#box1 {background-color: rgb(255, 255, 141);}\r
+#box2 {background-color: rgb(165, 241, 238);}\r
+#box3 {background-color: rgb(248, 179, 179);}\r
+#box4 {background-color: rgb(192, 161, 246);}\r
+.tile \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 50%;\r
+&nbsp;&nbsp;&nbsp;height: 50%;\r
+&nbsp;&nbsp;&nbsp;float: left;\r
+}\r
+.left {padding: 10px 5px 5px 10px;}\r
+.right {padding: 10px 10px 5px 5px;}\r
+\r
+.box \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 100%;\r
+&nbsp;&nbsp;&nbsp;height: 100%;\r
+&nbsp;&nbsp;&nbsp;padding: 20px;\r
+&nbsp;&nbsp;&nbsp;background: no-repeat center;\r
+&nbsp;&nbsp;&nbsp;background-size: 100% 100%;\r
+}\r
+\r
+#box1 {background-image: url('../a.png');}\r
+#box2 {background-image: url('../b.png');}\r
+#box3 {background-image: url('../c.png');}\r
+#box4 {background-image: url('../d.png');}\r
+</pre>\r
+\r
+\r
+ \r
+ <p class="figure">Figure: Image-based layout on a target device</p>  \r
+ <p align="center"><img alt="Image-based layout on a target device" src="../../images/layout_image.png"/></p>\r
+\r
+<p class="figure">Figure: Image-based scaled layout on a 16:9 mobile device</p>  \r
+<p align="center"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../images/layout_image_scaled.png"/></p>        \r
+\r
+\r
+ <h2 id="multiple" name="multiple">Multiple Layouts for Multiple Devices</h2> \r
+  \r
+  <p>In many cases, the desired end result for your application can be achieved using scaling and a relative layout within a <a href="#single">single layout</a>. However, this approach does not always provide the best quality for the end user. </p>\r
+<p>You can support the best possible layout and usability with some additional development efforts. For instance, you can create an application which, on a tablet, shows the main information (clock face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (clock face). This kind of end result, as shown in the following figure, cannot be achieved by only scaling up the whole layout of the watch device.</p>\r
+<p class="figure">Figure: Application for a watch and tablet</p>  \r
+<p align="center"><img alt="Application for a watch and tablet" src="../../images/multiple_layout_example.png"/></p>  \r
+\r
+<p>W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p> \r
+\r
+  <ul> \r
+  <li><a href="#viewport2">Viewport setting</a></li>\r
+   <li><a href="#category">Category classification</a></li> \r
+   <li><a href="#display">Classification for display modes</a></li>  \r
+ </ul>\r
+\r
+ \r
+<p>Since the <strong>2.3.1</strong> version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily <a href="#migration">migrate your application to support both shapes</a>.</p> \r
+ <p class="figure">Figure: Application for a square and circular device</p>  \r
+ <p align="center"><img alt="Application for a square and circular device" src="../../images/circular_support.png"/></p>  \r
+     \r
+\r
+  <h3 id="viewport2" name="viewport2">Viewport Setting for Multiple Layouts</h3>   \r
+<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is set to <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <span style="font-family: Courier New,Courier,monospace">&quot;device-width&quot;</span> setting is needed to create an adaptive and responsive Web application. </p>\r
+\r
+<p>To use the meta tag in an HTML file, set its name and content: </p>\r
+ <pre class="prettyprint">\r
+&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;\r
+</pre>\r
+\r
+<h3 id="category" name="category">Category Classification</h3>\r
+       \r
+<p>When creating multiple layouts, you must first configure the layout categories. In other words, a classifying category is needed to fit the layout on the current executable environment. Media queries are supported in CSS3 to give Web application information to the executable environment.</p>\r
+\r
+<h4>W3C Media Queries</h4>\r
+<p>Media queries consist of a media type and expressions of media features. </p>\r
+\r
+<p>The media types indicate the media on which the current Web application is running. They are defined in HTML4. The following media types are supported:</p>\r
+<ul><li><span style="font-family: Courier New,Courier,monospace;">aural</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">braille</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">handheld</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">print</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">projection</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">screen</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">tty</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">tv</span></li>\r
+</ul>\r
+\r
+<p>You can declare that sections apply to certain media types inside a CSS style sheet.  As in the following example, you can declare <span style="font-family: Courier New,Courier,monospace;">screen</span> as a media type and describe its layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span>. That code applies the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> when the Web application is run on the screen type executable context.</p>\r
+\r
+<pre class="prettyprint">\r
+@media screen {...}\r
+</pre>\r
+\r
+<p>Several media queries can be combined in a media query list to configure the executable environment and define the detailed layout configuration, as needed. The following example shows a case in which the Web application runs on the executable environment having a <span style="font-family: Courier New,Courier,monospace;">screen</span> media type and a 500 pixel minimum width. Its final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user. </p>\r
+\r
+<pre class="prettyprint">\r
+@media screen and (min-width: 500px) {...}\r
+</pre>\r
+\r
+<p>The following table lists the CSS media features, which you can use to specify the layout utilizing the media queries.</p> \r
+\r
+<table> \r
+<caption>Table: Media features</caption>\r
+   <tbody> \r
+    <tr> \r
+     <th>Feature</th> \r
+        <th>Value</th>\r
+        <th>Min/Max</th>\r
+        <th>Description</th> \r
+    </tr> \r
+    <tr> \r
+     <td>color</td> \r
+     <td rowspan="2">integer</td>\r
+        <td rowspan="5">yes</td>\r
+        <td>Number of bits per a color component</td>   \r
+    </tr> \r
+  <tr>\r
+    <td>color-index</td>\r
+        <td>Number of entries in the color lookup table</td>\r
+  </tr>\r
+    <tr> \r
+     <td>device-aspect-ratio</td> \r
+     <td>integer/integer</td>\r
+        <td>Aspect ratio</td>   \r
+    </tr>  \r
+    <tr> \r
+     <td>device-height</td> \r
+     <td rowspan="2">length</td>\r
+        <td>Output device height</td>   \r
+    </tr>\r
+    <tr> \r
+     <td>device-width</td> \r
+        <td>Output device width</td>    \r
+    </tr>\r
+    <tr> \r
+     <td>grid</td> \r
+     <td>integer</td>\r
+        <td>no</td>\r
+        <td>Set to true for a grid-based device</td>    \r
+    </tr>\r
+    <tr> \r
+     <td>height</td> \r
+     <td>length</td>\r
+        <td rowspan="3">yes</td>\r
+        <td>Rendering surface height</td>       \r
+    </tr>\r
+    <tr> \r
+     <td>monochrome</td> \r
+     <td>integer</td>\r
+        <td>Number of bits per pixel in a monochrome frame buffer</td>  \r
+    </tr>\r
+    <tr> \r
+     <td>resolution</td> \r
+     <td>resolution (<span style="font-family: Courier New,Courier,monospace;">dpi</span> or <span style="font-family: Courier New,Courier,monospace;">dpcm</span>)</td>\r
+        <td>Resolution</td>     \r
+    </tr>\r
+    <tr> \r
+     <td>scan</td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">progressive</span> or <span style="font-family: Courier New,Courier,monospace;">interlaced</span></td>\r
+        <td>no</td>\r
+        <td>Scanning process of the <span style="font-family: Courier New,Courier,monospace;">tv</span> media types</td>        \r
+    </tr>\r
+    <tr> \r
+     <td>width</td> \r
+     <td>length</td>\r
+        <td>yes</td>\r
+        <td>Rendering surface width</td>        \r
+    </tr>      \r
+   </tbody> \r
+  </table>\r
+ \r
+<h4>Tizen Specialized Media Query</h4>\r
+<p>Tizen supports a special media query feature for a circular device shape. The following table lists the supported media features.</p>\r
+\r
+<table class="note">\r
+       <tbody>\r
+       <tr>\r
+               <th class="note">Note</th>\r
+       </tr>\r
+       <tr>\r
+               <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>\r
+       </tr>\r
+       </tbody>\r
+</table>\r
+\r
+<table> \r
+<caption>Table: Tizen specialized media feature</caption>\r
+   <tbody> \r
+    <tr> \r
+     <th>Feature</th> \r
+        <th>Value</th>\r
+        <th>Min/Max</th>\r
+        <th>Description</th> \r
+    </tr> \r
+    \r
+    <tr> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span></td> \r
+     <td><span style="font-family: Courier New,Courier,monospace;">&quot;rectangle&quot;</span> | <span style="font-family: Courier New,Courier,monospace;">&quot;circle&quot;</span></td>\r
+        <td>No</td>\r
+        <td>Device shape</td>   \r
+    </tr>\r
+    \r
+   </tbody> \r
+  </table>\r
+\r
+<p>You can combine this media query feature with the W3C type in your code. The final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user:</p>\r
+<pre class="prettyprint">\r
+@media all and (-tizen-geometric-shape: circle) {...}\r
+</pre>\r
+ \r
+       \r
+<h3 id="display" name="display">Classification for Display Modes</h3>\r
+\r
+<p>The display mode can be classified as portrait or landscape for a rectangle-shaped device, or circular for a circular device.</p>\r
+\r
+<h4>Portrait and Landscape</h4>\r
+\r
+<p>You can configure the device landscape and portrait mode using the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <span style="font-family: Courier New,Courier,monospace;">max-device-aspect-ratio</span> feature is used.</p> \r
+<p>If you use the <span style="font-family: Courier New,Courier,monospace;">orientation:portrait/landscape</span> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> to configure the portrait and landscape mode.</p> \r
+<pre class="prettyprint lang-html">\r
+@media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1) \r
+{\r
+&nbsp;&nbsp;&nbsp;&lt;!--For portrait mode--&gt;\r
+}\r
+@media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10) \r
+{\r
+&nbsp;&nbsp;&nbsp;&lt;!--For landscape mode--&gt;\r
+}\r
+</pre> \r
+\r
+<h4>Circular Device</h4>\r
+\r
+<p>You can configure the device circular mode using the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> attribute in the Tizen environment. The following example shows how to use the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> feature.</p>\r
+\r
+<table class="note">\r
+       <tbody>\r
+       <tr>\r
+               <th class="note">Note</th>\r
+       </tr>\r
+       <tr>\r
+               <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>\r
+       </tr>\r
+       </tbody>\r
+</table>\r
+\r
+\r
+<pre class="prettyprint lang-html">\r
+@media all and (-tizen-geometric-shape: circle) \r
+{\r
+&nbsp;&nbsp;&nbsp;&lt;!--For a circular device--&gt;\r
+}\r
+</pre>\r
+\r
+<h3 id="migration" name="migration">Application Migration to a Circular Device</h3>    \r
+\r
+<p>This section illustrates an example for how you can migrate a basic application from a rectangular device (such as Gear 2 or Gear S) to a circular device. Use this example as the best practice to improve your layout.</p>\r
+\r
+<p>The example uses the following HTML and CSS code for the sample application and its layout.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;!--HTML code--&gt;\r
+&lt;section id=&quot;main&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;header&gt;HEADER&lt;/header&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;article id=&quot;content&quot;&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lt;ul&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 1&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 2&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 3&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 4&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 5&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 6&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 7&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 8&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 9&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 10&lt;/li&gt;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;/article&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;footer&gt;FOOTER&lt;/footer&gt;\r
+&lt;/section&gt;\r
+\r
+&lt;!--CSS code--&gt;\r
+html, body \r
+{\r
+&nbsp;&nbsp;&nbsp;height: 100%;\r
+&nbsp;&nbsp;&nbsp;width: 100%;\r
+&nbsp;&nbsp;&nbsp;padding: 0;\r
+&nbsp;&nbsp;&nbsp;margin: 0;\r
+&nbsp;&nbsp;&nbsp;font-size: 24px;\r
+&nbsp;&nbsp;&nbsp;overflow: hidden;\r
+}\r
+\r
+section \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 100%;\r
+&nbsp;&nbsp;&nbsp;height: 100%;\r
+&nbsp;&nbsp;&nbsp;overflow: auto;\r
+&nbsp;&nbsp;&nbsp;padding: 70px 0;\r
+}\r
+\r
+header, footer \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 100%;\r
+&nbsp;&nbsp;&nbsp;height: 70px;\r
+&nbsp;&nbsp;&nbsp;min-height: 70px;\r
+&nbsp;&nbsp;&nbsp;line-height: 70px;\r
+&nbsp;&nbsp;&nbsp;font-size: 30px;\r
+&nbsp;&nbsp;&nbsp;text-align: center;\r
+&nbsp;&nbsp;&nbsp;position: fixed;\r
+}\r
+\r
+header \r
+{\r
+&nbsp;&nbsp;&nbsp;top: 0;\r
+}\r
+\r
+footer \r
+{\r
+&nbsp;&nbsp;&nbsp;bottom: 0;\r
+}\r
+\r
+article ul li \r
+{\r
+&nbsp;&nbsp;&nbsp;border-top: 1px solid rgba(52, 52, 52, 1);\r
+&nbsp;&nbsp;&nbsp;padding: 15px 20px;\r
+&nbsp;&nbsp;&nbsp;color: rgba(209, 209, 209, 1);\r
+&nbsp;&nbsp;&nbsp;font-size: 40px;\r
+}\r
+\r
+article ul li:first \r
+{\r
+&nbsp;&nbsp;&nbsp;border-top: 0 none;\r
+}</pre>\r
+\r
+<p>To migrate the application, use the following steps:</p>\r
+\r
+ <ol> \r
+  <li>Use a relative layout.\r
+\r
+ <p>To achieve a responsive layout for different devices, implement a relative layout. Simply set the <span style="font-family: Courier New,Courier,monospace;">width: 100%</span> attribute to the layout elements in the CSS code:</p>\r
+<pre class="prettyprint">\r
+section \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 100%;\r
+&nbsp;&nbsp;&nbsp;height: 100%;\r
+&nbsp;&nbsp;&nbsp;...\r
+}\r
+\r
+header, footer \r
+{\r
+&nbsp;&nbsp;&nbsp;width: 100%;\r
+&nbsp;&nbsp;&nbsp;...\r
+} </pre>\r
+ <table class="note">\r
+       <tbody>\r
+       <tr>\r
+               <th class="note">Note</th>\r
+       </tr>\r
+       <tr>\r
+               <td class="note">The <strong>relative layout</strong> concept is described in more detail in <a href="#relative">Relative Layout</a>.</td>\r
+       </tr>\r
+       </tbody>\r
+</table>\r
+</li>\r
+   <li>Set extra spaces both at the top and bottom.\r
+\r
+ <p>During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a &quot;padding&quot; space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:</p>\r
+<pre class="prettyprint">\r
+@media all and (-tizen-geometric-shape: circle) \r
+{\r
+&nbsp;&nbsp;&nbsp;section {padding: 77px 0;}\r
+}\r
+</pre>\r
+\r
+ <p class="figure">Figure: Top and bottom padding</p>  \r
+ <p align="center"><img alt="Top and bottom padding" src="../../images/migrate_padding.png"/></p>  \r
+</li>\r
+   <li>Set the header and footer position.\r
+\r
+<p>After setting the top and bottom padding, set the header and footer position for scrolling in the circular view.</p>\r
+<p>For a rectangular device with a lengthwise screen, especially Gear S, the best option is to make only the content area scrollable.</p>\r
+\r
+<p class="figure">Figure: Scrolling with a rectangular screen</p>  \r
+<p align="center"><img alt="Scrolling with a rectangular screen" src="../../images/migrate_scrollable_rect.png"/></p>\r
+<p>In a circular screen, it is better to make the whole page scrollable, including the top and bottom space.</p>\r
+<p class="figure">Figure: Scrolling with a circular screen</p>  \r
+<p align="center"><img alt="Scrolling with a circular screen" src="../../images/migrate_scrollable_circle.png"/></p>\r
+\r
+<p>To implement the header and footer position, use the CSS <span style="font-family: Courier New,Courier,monospace;">position</span> attribute:</p>\r
+<pre class="prettyprint">\r
+&lt;!--Rectangular device--&gt;\r
+header, footer \r
+{\r
+&nbsp;&nbsp;&nbsp;position: fixed;\r
+}\r
+\r
+&lt;!--Circular device--&gt;\r
+@media all and (-tizen-geometric-shape: circle) \r
+{\r
+&nbsp;&nbsp;&nbsp;header, footer \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: static;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+\r
+</li>\r
+   <li>Move the display to the initial position.\r
+\r
+<p>To provide a better user experience, show the entire display at the beginning, including the &quot;top padding&quot; space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.</p>\r
+\r
+<p class="figure">Figure: Moving to the initial position</p>  \r
+<p align="center"><img alt="Moving to the initial position" src="../../images/migrate_move_to_top.png"/></p>\r
+\r
+<p>The scroll move requires several lines of JavaScript code. In the following sample, the few (N) seconds is set to 1500 ms, but you can change the value as needed.</p>\r
+<pre class="prettyprint">\r
+(function initScrollPosition() \r
+{\r
+&nbsp;&nbsp;&nbsp;var SCROLL_DELAY_TIME = 1500,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = document.getElementById(&quot;main&quot;),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollPosition = window.parseInt(window.getComputedStyle(page)[&quot;padding-top&quot;]),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = null,\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mql = window.matchMedia(&quot;(-tizen-geometric-shape: circle)&quot;);;\r
+\r
+&nbsp;&nbsp;&nbsp;/* The effect is applied to a circular device only, so use mediaquery */\r
+&nbsp;&nbsp;&nbsp;if (mql.matches) \r
+&nbsp;&nbsp;&nbsp;{    \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;scroll&quot;, function clearInitScrollCallback() \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.clearTimeout(initScrollTimeoutId);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;scroll&quot;, clearInitScrollCallback, false);\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = window.setTimeout(function() \r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.scrollTop = scrollPosition;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, SCROLL_DELAY_TIME);\r
+&nbsp;&nbsp;&nbsp;}\r
+}());\r
+</pre>\r
+\r
+</li>\r
+   <li>Set extra attributes for a better view.\r
+\r
+<p>Extra attributes are not mandatory in the migration process, but they can be helpful for a better application view.</p>\r
+<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements&#39; layout are needed too. For example, consider setting the <span style="font-family: Courier New,Courier,monospace;">text-align: center</span> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>\r
+\r
+<pre class="prettyprint">\r
+&lt;!--Common style for header and footer text--&gt;\r
+header, footer \r
+{\r
+&nbsp;&nbsp;&nbsp;text-align: center;\r
+}\r
+\r
+&lt;!--In a circular screen, list item has a center position--&gt;\r
+@media all and (-tizen-geometric-shape: circle) \r
+{\r
+&nbsp;&nbsp;&nbsp;article ul li \r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 60px;\r
+&nbsp;&nbsp;&nbsp;}\r
+}\r
+</pre>\r
+</li>\r
+ </ol>\r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/woff_w.htm b/org.tizen.ui.guides/html/web/w3c/woff_w.htm
new file mode 100755 (executable)
index 0000000..fa02e72
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/woff_w.htm
@@ -0,0 +1,132 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
+<head>\r
+       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\r
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
+       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
+       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
+       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
+       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
+  <title>WOFF File Format 1.0: Changing Fonts Using WOFF</title>\r
+</head>\r
+\r
+ <body onload="prettyPrint()" style="overflow: auto;">\r
+ \r
+ <div id="toc-navigation">\r
+       <div id="profile">\r
+               <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>\r
+       </div>\r
+       \r
+       <div id="toc_border"><div id="toc">\r
+               <p class="toc-title">Related Info</p>\r
+               <ul class="toc">\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 1.0 API for Mobile Web</a></li>\r
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#woff">WOFF File Format 1.0 API for Wearable Web</a></li>\r
+                       </ul>\r
+       </div></div>\r
+</div> \r
+\r
+<div id="container"><div id="contents"><div class="content">\r
+<h1>WOFF File Format 1.0: Changing Fonts Using WOFF</h1>\r
+\r
+<p>You can decode and restore font data easily.</p>\r
+\r
+<p>The new text features in WOFF File Format 1.0 include:</p>\r
+<ul>\r
+\r
+<li>WOFF file format 1.0 \r
+<p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rule</a> to display it identically with the input font. The <span style="font-family: Courier New,Courier,monospace">@font-face</span> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="#woff">use WOFF</a> within a Web page. </p></li>\r
+</ul> \r
+\r
+<h2 id="woff" name="woff">Using the WOFF File Format</h2>\r
+                               \r
+<p>To enhance the user experience of your application, you must learn to use the WOFF (Web Open Font Format) file format 1.0, which is a W3C standard font packaging format used in Web pages:</p>\r
+\r
+<ol>\r
+<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rules</a>. Within the rules, you can define the following properties:\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace">font-family</span>\r
+<p>Defines a name for the font. This property is mandatory.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">src</span>\r
+<p>Defines the URL of the font file on the server. This property is mandatory. If the <span style="font-family: Courier New,Courier,monospace">local</span> attribute is defined, the font resource is not downloaded from the server if it already exists in the local storage. </p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font-stretch</span>\r
+<p>Defines the way the font is stretched. This property is optional.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font-style</span>\r
+<p>Defines the font style. This property is optional.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace">font-weight</span>\r
+<p>Defines the font weight. This property is optional.</p></li>\r
+</ul>\r
+<p>Define the rules with in a <span style="font-family: Courier New,Courier,monospace">&lt;style&gt;</span> element in the <span style="font-family: Courier New,Courier,monospace">&lt;head&gt;</span> section of a Web page:</p>\r
+<pre class="prettyprint">\r
+&lt;head&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
+&nbsp;&nbsp;&nbsp;@font-face\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_1_0.woff&#39;) format(&#39;woff&#39;);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;@font-face\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_0_0.woff&#39;) format(&#39;woff&#39;);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;@font-face\r
+&nbsp;&nbsp;&nbsp;{\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: 900;\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),\r
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_2_0.woff&#39;) format(&#39;woff&#39;);\r
+&nbsp;&nbsp;&nbsp;}\r
+\r
+&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: MuseoSans}\r
+&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: MuseoSans; font-weight: bold;}\r
+&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: MuseoSans; font-weight: 900;}\r
+&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+&lt;/head&gt;</pre>\r
+</li>\r
+<li>In the <span style="font-family: Courier New,Courier,monospace">&lt;body&gt;</span> section, create <span style="font-family: Courier New,Courier,monospace">&lt;p&gt;</span> elements containing text in which the font rules are implemented:\r
+<pre class="prettyprint">&lt;body&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;\r
+&lt;/body&gt;\r
+&lt;/html&gt;\r
+</pre>\r
+</li>\r
+</ol>\r
+<p class="figure">Figure: Implementing the @font-face rules (in mobile applications only)</p>\r
+<p align="center"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../images/font_face.png" /></p>\r
+         \r
+\r
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
+<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
+</div></div></div>\r
+\r
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
+\r
+<div id="footer">\r
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>\r
+</div>\r
+\r
+<script type="text/javascript">\r
+var _gaq = _gaq || [];\r
+_gaq.push(['_setAccount', 'UA-25976949-1']);\r
+_gaq.push(['_trackPageview']);\r
+(function() {\r
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+})();\r
+</script>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/org.tizen.ui.guides/index.xml b/org.tizen.ui.guides/index.xml
new file mode 100755 (executable)
index 0000000..1a76baa
--- /dev/null
+++ b/org.tizen.ui.guides/index.xml
@@ -0,0 +1,159 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+
+
+<toc label="UI Guides" topic="html/cover_page.htm">
+
+<topic href="html/web/guides_w.htm" label="Web Application">
+       <topic href="html/web/tau/guides_tau_w.htm" label="TAU">
+               <topic href="html/web/tau/helloworld_w.htm" label="Hello World"></topic>
+               <topic href="html/web/tau/managing_page_w.htm" label="Managing Pages"></topic>
+               <topic href="html/web/tau/event_handling_w.htm" label="Event Handling"></topic>
+               <topic href="html/web/tau/ui_component_w.htm" label="UI Components"></topic>
+               <topic href="html/web/tau/notepad_w.htm" label="Creating a UI"></topic>
+               <topic href="html/web/tau/circular_ui_ww.htm" label="Circular UI">
+                       <topic href="html/web/tau/list_ww.htm" label="List"></topic>
+                       <topic href="html/web/tau/helper_ww.htm" label="Helper Script"></topic>
+                       <topic href="html/web/tau/header_ww.htm" label="Header"></topic>
+                       <topic href="html/web/tau/circle_progressbar_ww.htm" label="Circle Progress Bar"></topic>
+                       <topic href="html/web/tau/processing_ww.htm" label="Processing"></topic>
+                       <topic href="html/web/tau/moreoptions_ww.htm" label="More Options"></topic>
+                       <topic href="html/web/tau/footerbutton_ww.htm" label="Footer Button"></topic>
+                       <topic href="html/web/tau/thumbnail_ww.htm" label="Thumbnail"></topic>          
+                       <topic href="html/web/tau/popup_ww.htm" label="Popup"></topic>
+               </topic>
+               <topic href="html/web/tau/accessibility_w.htm" label="Accessibility"></topic>
+               <topic href="html/web/tau/globalization_w.htm" label="Globalization"></topic>
+       </topic>
+       <topic href="html/web/w3c/guides_w3c_w.htm" label="W3C">                        
+               <topic href="html/web/w3c/html_priority_w.htm" label="HTML Priorities"></topic>
+               <topic href="html/web/w3c/media_query_w.htm" label="Media Queries"></topic>
+               <topic href="html/web/w3c/multiple_screens_mw.htm" label="Multiple Screen Support"></topic>
+               <topic href="html/web/w3c/ui_layout_ww.htm" label="Multiple UI Layouts"></topic>
+               <topic href="html/web/w3c/frame_flattening_mw.htm" label="Frame Flattening"></topic>
+               <topic href="html/web/w3c/clipboard_mw.htm" label="Clipboard API and events"></topic>
+               <topic href="html/web/w3c/transform_w.htm" label="CSS Transforms"></topic>
+               <topic href="html/web/w3c/animation_w.htm" label="CSS Animations Module Level 3"></topic>
+               <topic href="html/web/w3c/transition_w.htm" label="CSS Transitions Module Level 3"></topic>
+               <topic href="html/web/w3c/color_w.htm" label="CSS Color Module Level 3"></topic>
+               <topic href="html/web/w3c/background_w.htm" label="CSS Backgrounds and Borders Module Level 3"></topic>
+               <topic href="html/web/w3c/flexible_w.htm" label="CSS Flexible Box Layout Module"></topic>
+               <topic href="html/web/w3c/multi_mw.htm" label="CSS Multi-column Layout Module"></topic>
+               <topic href="html/web/w3c/text_module_w.htm" label="CSS Text Module Level 3"></topic>
+               <topic href="html/web/w3c/basic_ui_w.htm" label="CSS Basic User Interface Module Level 3 (CSS3 UI)"></topic>
+               <topic href="html/web/w3c/font_w.htm" label="CSS Fonts Module Level 3"></topic>         
+               <topic href="html/web/w3c/woff_w.htm" label="WOFF File Format 1.0"></topic>     
+       </topic>        
+</topic>
+<topic href="html/native/guides_n.htm" label="Native Application">             
+       <topic href="html/native/efl/guides_efl_n.htm" label="EFL">
+               <topic href="html/native/efl/efl_overview_n.htm" label="EFL Overview"></topic>
+               <topic href="html/native/efl/ui_components_n.htm" label="UI Components">
+                       <topic href="html/native/efl/ui_components_mn.htm" label="Mobile UI Components">
+                               <topic href="html/native/efl/components_mn.htm" label="Using Mobile UI Components"></topic>
+                               <topic href="html/native/efl/basic_tutorial_mn.htm" label="Creating Basic Mobile Interactions"></topic> 
+                               <topic href="html/native/efl/genlist_tutorial_mn.htm" label="Creating Mobile Genlists"></topic> 
+                               <topic href="html/native/efl/menu_tutorial_mn.htm" label="Creating Mobile Menus"></topic>
+                       </topic>        
+                       <topic href="html/native/efl/ui_components_wn.htm" label="Wearable UI Components">
+                               <topic href="html/native/efl/components_wn.htm" label="Using Wearable UI Components"></topic>   
+                               <topic href="html/native/efl/button_tutorial_wn.htm" label="Creating Wearable Buttons"></topic>
+                               <topic href="html/native/efl/datetime_tutorial_wn.htm" label="Creating Wearable Datetimes"></topic>
+                               <topic href="html/native/efl/genlist_tutorial_wn.htm" label="Creating Wearable Genlists"></topic>       
+                               <topic href="html/native/efl/popup_tutorial_wn.htm" label="Creating Wearable Popups"></topic>
+                               <topic href="html/native/efl/circle_components_wn.htm" label="Creating Wearable Circle Components"></topic>
+                       </topic>
+               </topic>
+               <topic href="html/native/efl/component_infra_n.htm" label="UI Component Infrastructure Modules">
+                       <topic href="html/native/efl/component_focus_n.htm" label="Managing Component Focus"></topic>   
+                       <topic href="html/native/efl/component_custom_n.htm" label="Customizing Components"></topic>
+                       <topic href="html/native/efl/touch_gesture_n.htm" label="Handling Component Touch Gestures"></topic>            
+               </topic>
+               <topic href="html/native/efl/ui_containers_n.htm" label="UI Containers">
+                       <topic href="html/native/efl/containers_n.htm" label="Using Container UI Components"></topic>   
+                       <topic href="html/native/efl/form_tutorial_n.htm" label="Creating a Form for a Basic Application Layout"></topic>
+                       <topic href="html/native/efl/naviframe_tutorial_n.htm" label="Creating a Naviframe for Navigation"></topic>
+                       <topic href="html/native/efl/layout_tutorial_n.htm" label="Creating UI Screen Layouts"></topic> 
+                       <topic href="html/native/efl/panes_tutorial_mn.htm" label="Creating Panes"></topic>                     
+               </topic>
+               <topic href="html/native/efl/theme_n.htm" label="Themes">
+                       <topic href="html/native/efl/edje_intro_n.htm" label="Introduction to EDC Programming"></topic> 
+                       <topic href="html/native/efl/edc_positioning_n.htm" label="Positioning Parts with the EDC File"></topic>
+                       <topic href="html/native/efl/edc_part_block_n.htm" label="EDJE Data Collection Reference"></topic>      
+                       <topic href="html/native/efl/edc_optimization_n.htm" label="Optimizing EDC"></topic>                    
+               </topic>
+               <topic href="html/native/efl/edje_objects_n.htm" label="Edje Objects">
+                       <topic href="html/native/efl/edje_files_n.htm" label="Handling Edje Files"></topic>     
+                       <topic href="html/native/efl/edje_scaling_n.htm" label="Scaling Edje Objects"></topic>
+                       <topic href="html/native/efl/edje_color_n.htm" label="Using Edje Color Classes"></topic>        
+                       <topic href="html/native/efl/edje_text_n.htm" label="Using Edje Text Classes"></topic>
+                       <topic href="html/native/efl/edje_perspective_n.htm" label="Using Edje Perspective"></topic>    
+                       <topic href="html/native/efl/edje_message_signal_n.htm" label="Managing Signals and Messages"></topic>  
+                       <topic href="html/native/efl/edje_manage_animation_n.htm" label="Managing Edje Animations"></topic>     
+               </topic>
+               <topic href="html/native/efl/font_setting_n.htm" label="Fonts"></topic>
+               <topic href="html/native/efl/ui_scalability_n.htm" label="Scaling">
+                       <topic href="html/native/efl/multiple_screens_n.htm" label="Multiple Screen Support"></topic>   
+                       <topic href="html/native/efl/scalability_n.htm" label="Scalability Support"></topic>    
+               </topic>
+               <topic href="html/native/efl/notification_window_n.htm" label="Notification Windows"></topic>
+               <topic href="html/native/efl/core_loop_n.htm" label="Core Loop and OS Interfacing">
+                       <topic href="html/native/efl/main_loop_n.htm" label="Handling the Main Loop"></topic>   
+                       <topic href="html/native/efl/threads_n.htm" label="Using Threads"></topic>      
+               </topic>
+               <topic href="html/native/efl/graphical_objects_n.htm" label="Graphical Objects">
+                       <topic href="html/native/efl/evas_objects_n.htm" label="Evas Objects"></topic>  
+                       <topic href="html/native/efl/evas_rendering_n.htm" label="Evas Rendering Concept and Method"></topic>
+                       <topic href="html/native/efl/evas_basic_objects_n.htm" label="Basic Manipulation of Evas Objects"></topic>
+                       <topic href="html/native/efl/evas_advanced_objects_n.htm" label="Advanced Manipulation of Evas Objects"></topic>
+                       <topic href="html/native/efl/evas_optimization_n.htm" label="Optimizing Evas"></topic>
+               </topic>
+               <topic href="html/native/efl/event_handling_n.htm" label="Event Handling">
+                       <topic href="html/native/efl/event_types_n.htm" label="Event Types"></topic>    
+                       <topic href="html/native/efl/multipoint_touch_n.htm" label="Tracking Multi-point Touch Events"></topic> 
+               </topic>
+               <topic href="html/native/efl/animation_effects_n.htm" label="Animations and Effects">
+                       <topic href="html/native/efl/ecore_animation_n.htm" label="Ecore Animations"></topic>   
+                       <topic href="html/native/efl/ecore_animation_tutorial_n.htm" label="Creating Ecore Animations"></topic> 
+                       <topic href="html/native/efl/edje_animation_n.htm" label="Edje Animations"></topic>
+                       <topic href="html/native/efl/edje_animation_tutorial_n.htm" label="Creating Edje Animations"></topic>
+                       <topic href="html/native/efl/elementary_animation_n.htm" label="Elementary Animations"></topic>
+                       <topic href="html/native/efl/elementary_animation_tutorial_n.htm" label="Creating Elementary Animations"></topic>
+                       <topic href="html/native/efl/elementary_transit_effect_tutorial_n.htm" label="Creating Elementary Transit Effects"></topic>
+                       <topic href="html/native/efl/evas_map_animation_n.htm" label="Evas Map Effects"></topic>
+                       <topic href="html/native/efl/evas_map_effects_n.htm" label="Creating Evas Map Effects"></topic>
+               </topic>                
+               <topic href="html/native/efl/data_types_tools_n.htm" label="Data Types and Tools">
+                       <topic href="html/native/efl/data_types_n.htm" label="Data Types"></topic>      
+                       <topic href="html/native/efl/tools_n.htm" label="Tools"></topic>        
+               </topic>        
+               <topic href="html/native/efl/hw_input_n.htm" label="Hardware Input Handling">
+                       <topic href="html/native/efl/key_events_n.htm" label="Managing Menu and Back Key Events"></topic>       
+                       <topic href="html/native/efl/rotary_events_n.htm" label="Managing Rotary Events"></topic>       
+               </topic>                
+       </topic>
+       <topic href="html/native/dali/guides_dali_n.htm" label="DALi">
+               <topic href="html/native/dali/dali_overview_n.htm" label="DALi Overview"></topic>
+               <topic href="html/native/dali/actors_n.htm" label="Actors"></topic>
+               <topic href="html/native/dali/event_handling_n.htm" label="Event Handling"></topic>
+               <topic href="html/native/dali/ui_components_n.htm" label="UI Components">
+                       <topic href="html/native/dali/buttons_n.htm" label="Buttons"></topic>
+                       <topic href="html/native/dali/itemview_n.htm" label="ItemView"></topic>
+                       <topic href="html/native/dali/scrollview_n.htm" label="ScrollView"></topic>
+                       <topic href="html/native/dali/tableview_n.htm" label="TableView"></topic>
+                       <topic href="html/native/dali/textfield_n.htm" label="TextField"></topic>
+                       <topic href="html/native/dali/textlabel_n.htm" label="TextLabel"></topic>
+               </topic>
+               <topic href="html/native/dali/animation_n.htm" label="Animations">
+                       <topic href="html/native/dali/basic_framework_n.htm" label="Basic Framework"></topic>
+                       <topic href="html/native/dali/advanced_animation_n.htm" label="Advanced Animations"></topic>
+                       <topic href="html/native/dali/constraints_n.htm" label="Constraints"></topic>
+                       <topic href="html/native/dali/multi_threading_n.htm" label="Multi-threading"></topic>
+               </topic>
+               <topic href="html/native/dali/dali_applications_n.htm" label="DALi Applications"></topic>
+               <topic href="html/native/dali/resources_n.htm" label="Resources"></topic>
+               <topic href="html/native/dali/rendering_effects_n.htm" label="Rendering and Effects"></topic>
+       </topic>
+</topic>               
+       
+</toc>
diff --git a/org.tizen.ui.guides/plugin.xml b/org.tizen.ui.guides/plugin.xml
new file mode 100755 (executable)
index 0000000..4c22a91
--- /dev/null
+++ b/org.tizen.ui.guides/plugin.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>\r
+<?eclipse version="3.0"?>\r
+\r
+<plugin>\r
+       <extension point="org.eclipse.help.toc">\r
+               <toc file="index.xml" primary="true" />\r
+       </extension>\r
+</plugin>\r
Domain: SDK / Documents;